Skip to content

Commit 3adc976

Browse files
NiznikrNiznikr
authored
feat(tokens): add data alias tokens (#1654)
* feat(tokens): add data alias tokens * fix: story * fix: undo bump * chore: add primitives test * feat: add gradient * fix: undo change
1 parent 5a2e0b3 commit 3adc976

File tree

8 files changed

+246
-3
lines changed

8 files changed

+246
-3
lines changed

‎.changeset/little-carpets-follow.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@launchpad-ui/tokens": patch
3+
---
4+
5+
Add data alias tokens

‎packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@ exports[`Tokens > builds dark alias tokens 1`] = `
77
88
[data-theme='dark'] {
99
--lp-color-bg-interactive-link: rgba(71, 97, 255, 0.2);
10+
--lp-color-data-info: rgb(153, 109, 216);
11+
--lp-color-data-comparison: rgb(96, 101, 106);
12+
--lp-color-data-neutral: rgb(168, 173, 179);
13+
--lp-color-data-positive: rgb(43, 149, 86);
14+
--lp-color-data-negative: rgb(232, 72, 102);
15+
--lp-color-data-series-1: rgb(35, 171, 197);
16+
--lp-color-data-series-2: rgb(246, 182, 104);
17+
--lp-color-data-series-3: rgb(153, 109, 216);
18+
--lp-color-data-series-4: rgb(43, 149, 86);
1019
--lp-color-bg-feedback-error: var(--lp-color-red-900);
1120
--lp-color-bg-feedback-info: var(--lp-color-blue-900);
1221
--lp-color-bg-feedback-success: var(--lp-color-green-900);
@@ -83,6 +92,15 @@ exports[`Tokens > builds default alias tokens 1`] = `
8392
--lp-color-border-interactive-primary-focus: rgba(0, 0, 0, 0);
8493
--lp-color-border-interactive-primary-hover: rgba(0, 0, 0, 0);
8594
--lp-color-border-interactive-disabled: rgba(0, 0, 0, 0);
95+
--lp-color-data-info: rgb(137, 96, 194);
96+
--lp-color-data-comparison: rgb(169, 175, 180);
97+
--lp-color-data-neutral: rgb(148, 153, 159);
98+
--lp-color-data-positive: rgb(0, 131, 68);
99+
--lp-color-data-negative: rgb(219, 34, 81);
100+
--lp-color-data-series-1: rgb(52, 182, 208);
101+
--lp-color-data-series-2: rgb(254, 190, 112);
102+
--lp-color-data-series-3: rgb(137, 96, 194);
103+
--lp-color-data-series-4: rgb(0, 131, 68);
86104
--lp-color-bg-feedback-primary: var(--lp-color-gray-800);
87105
--lp-color-bg-feedback-error: var(--lp-color-red-50);
88106
--lp-color-bg-feedback-info: var(--lp-color-blue-50);
@@ -174,3 +192,118 @@ exports[`Tokens > builds default alias tokens 1`] = `
174192
}
175193
"
176194
`;
195+
196+
exports[`Tokens > builds default primitive tokens 1`] = `
197+
"/**
198+
* Do not edit directly, this file was auto-generated.
199+
*/
200+
201+
:root {
202+
--lp-color-gray-0: rgb(247, 249, 251);
203+
--lp-color-gray-50: rgb(236, 239, 242);
204+
--lp-color-gray-100: rgb(216, 221, 227);
205+
--lp-color-gray-200: rgb(198, 203, 209);
206+
--lp-color-gray-300: rgb(169, 175, 180);
207+
--lp-color-gray-400: rgb(137, 142, 148);
208+
--lp-color-gray-500: rgb(108, 114, 122);
209+
--lp-color-gray-600: rgb(84, 90, 98);
210+
--lp-color-gray-700: rgb(63, 69, 76);
211+
--lp-color-gray-800: rgb(45, 50, 57);
212+
--lp-color-gray-900: rgb(35, 37, 42);
213+
--lp-color-gray-950: rgb(24, 26, 31);
214+
--lp-color-blue-0: rgb(246, 248, 255);
215+
--lp-color-blue-50: rgb(228, 234, 255);
216+
--lp-color-blue-100: rgb(207, 217, 255);
217+
--lp-color-blue-200: rgb(175, 191, 255);
218+
--lp-color-blue-300: rgb(138, 158, 255);
219+
--lp-color-blue-400: rgb(112, 132, 255);
220+
--lp-color-blue-500: rgb(66, 94, 255);
221+
--lp-color-blue-600: rgb(49, 68, 217);
222+
--lp-color-blue-700: rgb(37, 54, 166);
223+
--lp-color-blue-800: rgb(25, 38, 125);
224+
--lp-color-blue-900: rgb(18, 29, 97);
225+
--lp-color-blue-950: rgb(11, 20, 77);
226+
--lp-color-purple-0: rgb(251, 246, 255);
227+
--lp-color-purple-50: rgb(244, 233, 255);
228+
--lp-color-purple-100: rgb(230, 208, 255);
229+
--lp-color-purple-200: rgb(220, 185, 255);
230+
--lp-color-purple-300: rgb(203, 145, 255);
231+
--lp-color-purple-400: rgb(189, 97, 255);
232+
--lp-color-purple-500: rgb(166, 54, 236);
233+
--lp-color-purple-600: rgb(135, 23, 205);
234+
--lp-color-purple-700: rgb(106, 0, 169);
235+
--lp-color-purple-800: rgb(78, 0, 126);
236+
--lp-color-purple-900: rgb(60, 2, 98);
237+
--lp-color-purple-950: rgb(46, 0, 77);
238+
--lp-color-green-0: rgb(229, 255, 232);
239+
--lp-color-green-50: rgb(199, 251, 206);
240+
--lp-color-green-100: rgb(163, 242, 180);
241+
--lp-color-green-200: rgb(108, 224, 144);
242+
--lp-color-green-300: rgb(30, 203, 106);
243+
--lp-color-green-400: rgb(0, 164, 85);
244+
--lp-color-green-500: rgb(0, 131, 68);
245+
--lp-color-green-600: rgb(0, 105, 51);
246+
--lp-color-green-700: rgb(0, 80, 37);
247+
--lp-color-green-800: rgb(0, 59, 27);
248+
--lp-color-green-900: rgb(9, 44, 23);
249+
--lp-color-green-950: rgb(0, 33, 13);
250+
--lp-color-red-0: rgb(255, 245, 246);
251+
--lp-color-red-50: rgb(255, 232, 235);
252+
--lp-color-red-100: rgb(255, 205, 214);
253+
--lp-color-red-200: rgb(255, 181, 189);
254+
--lp-color-red-300: rgb(255, 138, 150);
255+
--lp-color-red-400: rgb(248, 79, 110);
256+
--lp-color-red-500: rgb(219, 34, 81);
257+
--lp-color-red-600: rgb(182, 7, 60);
258+
--lp-color-red-700: rgb(140, 6, 43);
259+
--lp-color-red-800: rgb(107, 0, 28);
260+
--lp-color-red-900: rgb(78, 11, 22);
261+
--lp-color-red-950: rgb(60, 4, 13);
262+
--lp-color-black-0: rgba(7, 8, 12, 0.05);
263+
--lp-color-black-50: rgba(7, 8, 12, 0.1);
264+
--lp-color-black-100: rgba(7, 8, 12, 0.15);
265+
--lp-color-black-200: rgba(7, 8, 12, 0.2);
266+
--lp-color-black-300: rgba(7, 8, 12, 0.3);
267+
--lp-color-black-400: rgba(7, 8, 12, 0.4);
268+
--lp-color-black-500: rgba(7, 8, 12, 0.5);
269+
--lp-color-black-600: rgba(7, 8, 12, 0.6);
270+
--lp-color-black-700: rgba(7, 8, 12, 0.7);
271+
--lp-color-black-800: rgba(7, 8, 12, 0.8);
272+
--lp-color-black-900: rgba(7, 8, 12, 0.9);
273+
--lp-color-black-950: rgb(7, 8, 12);
274+
--lp-color-white-0: rgba(255, 255, 255, 0.05);
275+
--lp-color-white-50: rgba(255, 255, 255, 0.1);
276+
--lp-color-white-100: rgba(255, 255, 255, 0.15);
277+
--lp-color-white-200: rgba(255, 255, 255, 0.2);
278+
--lp-color-white-300: rgba(255, 255, 255, 0.3);
279+
--lp-color-white-400: rgba(255, 255, 255, 0.4);
280+
--lp-color-white-500: rgba(255, 255, 255, 0.5);
281+
--lp-color-white-600: rgba(255, 255, 255, 0.6);
282+
--lp-color-white-700: rgba(255, 255, 255, 0.7);
283+
--lp-color-white-800: rgba(255, 255, 255, 0.8);
284+
--lp-color-white-900: rgba(255, 255, 255, 0.9);
285+
--lp-color-white-950: rgb(255, 255, 255);
286+
--lp-color-brand-blue-light: rgb(112, 132, 255);
287+
--lp-color-brand-blue-base: rgb(64, 91, 255);
288+
--lp-color-brand-blue-dark: rgb(42, 59, 166);
289+
--lp-color-brand-cyan-light: rgb(109, 224, 247);
290+
--lp-color-brand-cyan-base: rgb(61, 214, 245);
291+
--lp-color-brand-cyan-dark: rgb(35, 140, 163);
292+
--lp-color-brand-purple-light: rgb(182, 117, 228);
293+
--lp-color-brand-purple-base: rgb(163, 79, 222);
294+
--lp-color-brand-purple-dark: rgb(106, 51, 144);
295+
--lp-color-brand-pink-light: rgb(238, 93, 172);
296+
--lp-color-brand-pink-base: rgb(255, 53, 162);
297+
--lp-color-brand-pink-dark: rgb(129, 11, 75);
298+
--lp-color-brand-orange-light: rgb(255, 208, 153);
299+
--lp-color-brand-orange-base: rgb(255, 157, 41);
300+
--lp-color-brand-orange-dark: rgb(163, 89, 1);
301+
--lp-color-brand-yellow-light: rgb(247, 255, 175);
302+
--lp-color-brand-yellow-base: rgb(235, 255, 56);
303+
--lp-color-brand-yellow-dark: rgb(129, 140, 31);
304+
--lp-color-brand-green-light: rgb(225, 255, 200);
305+
--lp-color-brand-green-base: rgb(139, 239, 52);
306+
--lp-color-brand-green-dark: rgb(67, 144, 0);
307+
}
308+
"
309+
`;

‎packages/tokens/__tests__/tokens.spec.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,34 @@ import type { DesignTokens } from 'style-dictionary/types';
22

33
import path from 'path';
44
import StyleDictionary from 'style-dictionary';
5+
import { formats, transformGroups, transforms } from 'style-dictionary/enums';
56
import { describe, expect, it } from 'vitest';
67

78
import { css } from '../src/themes';
89
import aliasDark from '../tokens/color-aliases.dark.json' with { type: 'json' };
910
import aliasDefault from '../tokens/color-aliases.default.json' with { type: 'json' };
1011

12+
const primitives = () => ({
13+
source: [path.resolve(__dirname, '../tokens/color-primitives.json')],
14+
platforms: {
15+
css: {
16+
prefix: 'lp',
17+
transformGroup: transformGroups.css,
18+
transforms: [transforms.colorRgb],
19+
options: {
20+
outputReferences: true,
21+
usesDtcg: true,
22+
},
23+
files: [
24+
{
25+
destination: 'primitives.css',
26+
format: formats.cssVariables,
27+
},
28+
],
29+
},
30+
},
31+
});
32+
1133
const sameKeys = (tokens1: DesignTokens, tokens2: DesignTokens) => {
1234
for (const key in tokens1) {
1335
if (!(key in tokens2)) {
@@ -29,6 +51,15 @@ describe('Tokens', () => {
2951
expect(sameKeys(aliasDark, aliasDefault)).toBeTruthy();
3052
});
3153

54+
it('builds default primitive tokens', async () => {
55+
const config = primitives();
56+
57+
const sd = new StyleDictionary(config);
58+
const [file] = await sd.formatPlatform('css');
59+
60+
expect(file.output).toMatchSnapshot();
61+
});
62+
3263
it('builds default alias tokens', async () => {
3364
const config = css('default');
3465
config.source = [

‎packages/tokens/stories/color.stories.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export default {
99
title: 'Tokens/Color',
1010
};
1111

12+
const ALIAS = ['bg', 'border', 'fill', 'shadow', 'text', 'data'];
13+
1214
const flatten = (obj: Record<string, unknown>) => {
1315
const result = {};
1416

@@ -97,7 +99,7 @@ const TokenTable = ({ tokens }: { tokens: Record<string, string> }) => {
9799
};
98100

99101
const global = Object.keys(vars.color)
100-
.filter((key) => !['bg', 'border', 'fill', 'shadow', 'text'].includes(key))
102+
.filter((key) => !ALIAS.includes(key))
101103
.reduce((obj, key) => {
102104
// @ts-expect-error fixme
103105
obj[key] = vars.color[key];
@@ -109,7 +111,7 @@ export const Global = {
109111
};
110112

111113
const alias = Object.keys(vars.color)
112-
.filter((key) => ['bg', 'border', 'fill', 'shadow', 'text'].includes(key))
114+
.filter((key) => ALIAS.includes(key))
113115
.reduce((obj, key) => {
114116
// @ts-expect-error fixme
115117
obj[key] = vars.color[key];

‎packages/tokens/tokens/color-aliases.dark.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,37 @@
240240
"$value": "{color.brand.blue.light}"
241241
}
242242
}
243+
},
244+
"data": {
245+
"info": {
246+
"$value": "#996DD8"
247+
},
248+
"comparison": {
249+
"$value": "#60656A"
250+
},
251+
"neutral": {
252+
"$value": "#A8ADB3"
253+
},
254+
"positive": {
255+
"$value": "#2B9556"
256+
},
257+
"negative": {
258+
"$value": "#E84866"
259+
},
260+
"series": {
261+
"1": {
262+
"$value": "#23ABC5"
263+
},
264+
"2": {
265+
"$value": "#F6B668"
266+
},
267+
"3": {
268+
"$value": "#996DD8"
269+
},
270+
"4": {
271+
"$value": "#2B9556"
272+
}
273+
}
243274
}
244275
}
245276
}

‎packages/tokens/tokens/color-aliases.default.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,6 +390,44 @@
390390
"$value": "{color.brand.blue.dark}"
391391
}
392392
}
393+
},
394+
"data": {
395+
"$extensions": {
396+
"com.figma": {
397+
"hiddenFromPublishing": false,
398+
"scopes": ["ALL_SCOPES"],
399+
"codeSyntax": {}
400+
}
401+
},
402+
"info": {
403+
"$value": "#8960C2"
404+
},
405+
"comparison": {
406+
"$value": "#A9AFB4"
407+
},
408+
"neutral": {
409+
"$value": "#94999F"
410+
},
411+
"positive": {
412+
"$value": "#008344"
413+
},
414+
"negative": {
415+
"$value": "#DB2251"
416+
},
417+
"series": {
418+
"1": {
419+
"$value": "#34B6D0"
420+
},
421+
"2": {
422+
"$value": "#FEBE70"
423+
},
424+
"3": {
425+
"$value": "#8960C2"
426+
},
427+
"4": {
428+
"$value": "#008344"
429+
}
430+
}
393431
}
394432
}
395433
}

‎packages/tokens/tokens/gradient.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
},
2222
"purple-pink": {
2323
"$value": "linear-gradient(326deg, {color.brand.purple.base} -9.86%, {color.brand.pink.base} 112.59%)"
24+
},
25+
"blue-bg-primary": {
26+
"$value": "linear-gradient(40deg, {color.brand.blue.light} -30.41%, {color.bg.ui.primary} 51.41%)"
2427
}
2528
}
2629
}

‎pnpm-lock.yaml

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)