Skip to content

Commit e332956

Browse files
nhironakanhironaka
committed
Test new color tokens
1 parent 84d26d5 commit e332956

7 files changed

Lines changed: 218 additions & 1 deletion

File tree

packages/tokens/tokens/color-aliases.dark.json renamed to packages/tokens/old_tokens/color-aliases.dark.json

File renamed without changes.

packages/tokens/tokens/color-aliases.default.json renamed to packages/tokens/old_tokens/color-aliases.default.json

File renamed without changes.

packages/tokens/tokens/color-primitives.dark.json renamed to packages/tokens/old_tokens/color-primitives.dark.json

File renamed without changes.

packages/tokens/tokens/color-primitives.default.json renamed to packages/tokens/old_tokens/color-primitives.default.json

File renamed without changes.

‎packages/tokens/src/themes.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ export const themes = ['default', 'dark'] as const;
66
export type Theme = (typeof themes)[number];
77

88
export const css = (theme: Theme): Config => ({
9-
source: ['tokens/color-primitives.default.json', `tokens/*.${theme}.json`],
9+
source: [
10+
'tokens/new-color-primitives.default.json',
11+
'tokens/new-color-aliases.default.json',
12+
`tokens/new-color-aliases.${theme}.json`,
13+
`tokens/new-color-primitives.${theme}.json`,
14+
],
1015
platforms: {
1116
css: {
1217
prefix: 'lp',

‎packages/tokens/tokens/color-primitives-map.json‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
{
2+
"color": {
3+
"$type": "color",
4+
"$extensions": {
5+
"com.figma": {
6+
"hiddenFromPublishing": true,
7+
"scopes": ["ALL_SCOPES"],
8+
"codeSyntax": {}
9+
}
10+
},
11+
"gray": {
12+
"0": { "$value": "{color.neutral.0}" },
13+
"50": { "$value": "{color.neutral.50}" },
14+
"100": { "$value": "{color.neutral.100}" },
15+
"200": { "$value": "{color.neutral.200}" },
16+
"300": { "$value": "{color.neutral.300}" },
17+
"400": { "$value": "{color.neutral.400}" },
18+
"500": { "$value": "{color.neutral.500}" },
19+
"600": { "$value": "{color.neutral.600}" },
20+
"700": { "$value": "{color.neutral.700}" },
21+
"800": { "$value": "{color.neutral.800}" },
22+
"900": { "$value": "{color.neutral.800}" },
23+
"950": { "$value": "{color.neutral.800}" }
24+
},
25+
"blue": {
26+
"0": { "$value": "{color.action.0}" },
27+
"50": { "$value": "{color.action.50}" },
28+
"100": { "$value": "{color.action.100}" },
29+
"200": { "$value": "{color.action.200}" },
30+
"300": { "$value": "{color.action.300}" },
31+
"400": { "$value": "{color.action.400}" },
32+
"500": { "$value": "{color.action.500}" },
33+
"600": { "$value": "{color.action.600}" },
34+
"700": { "$value": "{color.action.700}" },
35+
"800": { "$value": "{color.action.800}" },
36+
"900": { "$value": "{color.action.800}" },
37+
"950": { "$value": "{color.action.800}" }
38+
},
39+
"red": {
40+
"0": { "$value": "{color.negative.0}" },
41+
"50": { "$value": "{color.negative.50}" },
42+
"100": { "$value": "{color.negative.100}" },
43+
"200": { "$value": "{color.negative.200}" },
44+
"300": { "$value": "{color.negative.300}" },
45+
"400": { "$value": "{color.negative.400}" },
46+
"500": { "$value": "{color.negative.500}" },
47+
"600": { "$value": "{color.negative.600}" },
48+
"700": { "$value": "{color.negative.700}" },
49+
"800": { "$value": "{color.negative.800}" },
50+
"900": { "$value": "{color.negative.800}" },
51+
"950": { "$value": "{color.negative.800}" }
52+
},
53+
"green": {
54+
"0": { "$value": "{color.positive.0}" },
55+
"50": { "$value": "{color.positive.50}" },
56+
"100": { "$value": "{color.positive.100}" },
57+
"200": { "$value": "{color.positive.200}" },
58+
"300": { "$value": "{color.positive.300}" },
59+
"400": { "$value": "{color.positive.400}" },
60+
"500": { "$value": "{color.positive.500}" },
61+
"600": { "$value": "{color.positive.600}" },
62+
"700": { "$value": "{color.positive.700}" },
63+
"800": { "$value": "{color.positive.800}" },
64+
"900": { "$value": "{color.positive.800}" },
65+
"950": { "$value": "{color.positive.800}" }
66+
},
67+
"purple": {
68+
"0": { "$value": "{color.info.0}" },
69+
"50": { "$value": "{color.info.50}" },
70+
"100": { "$value": "{color.info.100}" },
71+
"200": { "$value": "{color.info.200}" },
72+
"300": { "$value": "{color.info.300}" },
73+
"400": { "$value": "{color.info.400}" },
74+
"500": { "$value": "{color.info.500}" },
75+
"600": { "$value": "{color.info.600}" },
76+
"700": { "$value": "{color.info.700}" },
77+
"800": { "$value": "{color.info.800}" },
78+
"900": { "$value": "{color.info.800}" },
79+
"950": { "$value": "{color.info.800}" }
80+
},
81+
"white": {
82+
"0": { "$value": "{color.neutral.0}" },
83+
"50": { "$value": "{color.neutral.50}" },
84+
"100": { "$value": "{color.neutral.100}" },
85+
"200": { "$value": "{color.neutral.200}" },
86+
"300": { "$value": "{color.neutral.300}" },
87+
"400": { "$value": "{color.neutral.400}" },
88+
"500": { "$value": "{color.neutral.500}" },
89+
"600": { "$value": "{color.neutral.600}" },
90+
"700": { "$value": "{color.neutral.700}" },
91+
"800": { "$value": "{color.neutral.800}" },
92+
"900": { "$value": "{color.neutral.800}" },
93+
"950": { "$value": "{color.neutral.0}" }
94+
},
95+
"black": {
96+
"0": { "$value": "{color.neutral.0}" },
97+
"50": { "$value": "{color.neutral.50}" },
98+
"100": { "$value": "{color.neutral.100}" },
99+
"200": { "$value": "{color.neutral.200}" },
100+
"300": { "$value": "{color.neutral.300}" },
101+
"400": { "$value": "{color.neutral.400}" },
102+
"500": { "$value": "{color.neutral.500}" },
103+
"600": { "$value": "{color.neutral.600}" },
104+
"700": { "$value": "{color.neutral.700}" },
105+
"800": { "$value": "{color.neutral.800}" },
106+
"900": { "$value": "{color.neutral.800}" },
107+
"950": { "$value": "{color.neutral.800}" }
108+
},
109+
"brand": {
110+
"blue": {
111+
"light": { "$value": "{color.action.400}" },
112+
"base": { "$value": "{color.action.500}" },
113+
"dark": { "$value": "{color.action.700}" }
114+
},
115+
"purple": {
116+
"light": { "$value": "{color.info.400}" },
117+
"base": { "$value": "{color.info.500}" },
118+
"dark": { "$value": "{color.info.700}" }
119+
},
120+
"orange": {
121+
"light": { "$value": "{color.warning.300}" },
122+
"base": { "$value": "{color.warning.500}" },
123+
"dark": { "$value": "{color.warning.700}" }
124+
},
125+
"green": {
126+
"light": { "$value": "{color.positive.200}" },
127+
"base": { "$value": "{color.positive.400}" },
128+
"dark": { "$value": "{color.positive.600}" }
129+
}
130+
}
131+
}
132+
}

‎packages/tokens/tokens/shadow.json‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{
2+
"shadow": {
3+
"$type": "shadow",
4+
"0": {
5+
"$value": [
6+
{
7+
"color": "{color.shadow.ui.primary}",
8+
"offsetX": "0",
9+
"offsetY": "0",
10+
"blur": "1px",
11+
"spread": "0"
12+
},
13+
{
14+
"color": "{color.shadow.ui.primary}",
15+
"offsetX": "0",
16+
"offsetY": "1px",
17+
"blur": "2px",
18+
"spread": "0"
19+
},
20+
{
21+
"color": "{color.shadow.ui.secondary}",
22+
"offsetX": "0",
23+
"offsetY": "2px",
24+
"blur": "8px",
25+
"spread": "0"
26+
}
27+
]
28+
},
29+
"1": {
30+
"$value": [
31+
{
32+
"color": "{color.shadow.ui.secondary}",
33+
"offsetX": "0",
34+
"offsetY": "0",
35+
"blur": "1px",
36+
"spread": "0"
37+
},
38+
{
39+
"color": "{color.shadow.ui.secondary}",
40+
"offsetX": "0",
41+
"offsetY": "0",
42+
"blur": "4px",
43+
"spread": "0"
44+
},
45+
{
46+
"color": "{color.shadow.ui.secondary}",
47+
"offsetX": "0",
48+
"offsetY": "4px",
49+
"blur": "8px",
50+
"spread": "0"
51+
},
52+
{
53+
"color": "{color.shadow.ui.secondary}",
54+
"offsetX": "0",
55+
"offsetY": "2px",
56+
"blur": "12px",
57+
"spread": "0"
58+
}
59+
]
60+
},
61+
"2": {
62+
"$value": [
63+
{
64+
"color": "{color.shadow.ui.secondary}",
65+
"offsetX": "0",
66+
"offsetY": "0",
67+
"blur": "16px",
68+
"spread": "0"
69+
},
70+
{
71+
"color": "{color.shadow.ui.primary}",
72+
"offsetX": "0",
73+
"offsetY": "8px",
74+
"blur": "36px",
75+
"spread": "0"
76+
}
77+
]
78+
}
79+
}
80+
}

0 commit comments

Comments
 (0)