Skip to content

Commit e759501

Browse files
didoodidoo
committed
added proper $modes definitions to color/semantic src JSON tokens
1 parent 725be43 commit e759501

File tree

5 files changed

+361
-46
lines changed

5 files changed

+361
-46
lines changed

‎packages/tokens/src/global/color/semantic-border.json‎

Lines changed: 64 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,98 @@
44
"primary": {
55
"$type": "color",
66
"$value": "{color.palette.alpha-200}",
7-
"group": "semantic"
7+
"group": "semantic",
8+
"$modes": {
9+
"hds": "{color.palette.alpha-200}",
10+
"cds-g0": "{carbon.themes.white.borderSubtle03}",
11+
"cds-g10": "{carbon.themes.g10.borderSubtle03}",
12+
"cds-g90": "{carbon.themes.g90.borderSubtle03}",
13+
"cds-g100": "{carbon.themes.g100.borderSubtle03}"
14+
}
815
},
916
"faint": {
1017
"$type": "color",
1118
"$value": "{color.palette.alpha-100}",
12-
"group": "semantic"
19+
"group": "semantic",
20+
"$modes": {
21+
"hds": "{color.palette.alpha-100}",
22+
"cds-g0": "{carbon.themes.white.borderSubtle00}",
23+
"cds-g10": "{carbon.themes.g10.borderSubtle00}",
24+
"cds-g90": "{carbon.themes.g90.borderSubtle00}",
25+
"cds-g100": "{carbon.themes.g100.borderSubtle00}"
26+
}
1327
},
1428
"strong": {
1529
"$type": "color",
1630
"$value": "{color.palette.alpha-300}",
17-
"group": "semantic"
31+
"group": "semantic",
32+
"$modes": {
33+
"hds": "{color.palette.alpha-300}",
34+
"cds-g0": "{carbon.themes.white.borderSubtle01}",
35+
"cds-g10": "{carbon.themes.g10.borderSubtle01}",
36+
"cds-g90": "{carbon.themes.g90.borderSubtle01}",
37+
"cds-g100": "{carbon.themes.g100.borderSubtle01}"
38+
}
1839
},
1940
"action": {
2041
"$type": "color",
2142
"$value": "{color.palette.blue-100}",
22-
"group": "semantic"
43+
"group": "semantic",
44+
"$modes": {
45+
"hds": "{color.palette.blue-100}",
46+
"cds-g0": "{carbon.color.blue.60}",
47+
"cds-g10": "{carbon.color.blue.60}",
48+
"cds-g90": "{carbon.color.blue.50}",
49+
"cds-g100": "{carbon.color.blue.50}"
50+
}
2351
},
2452
"highlight": {
2553
"$type": "color",
2654
"$value": "{color.palette.purple-100}",
27-
"group": "semantic"
55+
"group": "semantic",
56+
"$modes": {
57+
"hds": "{color.palette.purple-100}",
58+
"cds-g0": "{carbon.color.purple.40}",
59+
"cds-g10": "{carbon.color.purple.40}",
60+
"cds-g90": "{carbon.color.purple.50}",
61+
"cds-g100": "{carbon.color.purple.50}"
62+
}
2863
},
2964
"success": {
3065
"$type": "color",
3166
"$value": "{color.palette.green-100}",
32-
"group": "semantic"
67+
"group": "semantic",
68+
"$modes": {
69+
"hds": "{color.palette.green-100}",
70+
"cds-g0": "{carbon.color.green.40}",
71+
"cds-g10": "{carbon.color.green.40}",
72+
"cds-g90": "{carbon.color.green.50}",
73+
"cds-g100": "{carbon.color.green.50}"
74+
}
3375
},
3476
"warning": {
3577
"$type": "color",
3678
"$value": "{color.palette.amber-100}",
37-
"group": "semantic"
79+
"group": "semantic",
80+
"$modes": {
81+
"hds": "{color.palette.amber-100}",
82+
"cds-g0": "{carbon.color.orange.40}",
83+
"cds-g10": "{carbon.color.orange.40}",
84+
"cds-g90": "{carbon.color.orange.50}",
85+
"cds-g100": "{carbon.color.orange.50}"
86+
}
3887
},
3988
"critical": {
4089
"$type": "color",
4190
"$value": "{color.palette.red-100}",
42-
"group": "semantic"
91+
"group": "semantic",
92+
"$modes": {
93+
"hds": "{color.palette.red-100}",
94+
"cds-g0": "{carbon.color.red.40}",
95+
"cds-g10": "{carbon.color.red.40}",
96+
"cds-g90": "{carbon.color.red.50}",
97+
"cds-g100": "{carbon.color.red.50}"
98+
}
4399
}
44100
}
45101
}

‎packages/tokens/src/global/color/semantic-focus.json‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,54 @@
55
"internal": {
66
"$type": "color",
77
"$value": "{color.palette.blue-300}",
8-
"group": "semantic"
8+
"group": "semantic",
9+
"$modes": {
10+
"hds": "{color.palette.blue-300}",
11+
"cds-g0": "{carbon.themes.white.focusInset}",
12+
"cds-g10": "{carbon.themes.g10.focusInset}",
13+
"cds-g90": "{carbon.themes.g90.focusInset}",
14+
"cds-g100": "{carbon.themes.g100.focusInset}"
15+
}
916
},
1017
"external": {
1118
"$type": "color",
1219
"$value": "#5990ff",
1320
"group": "semantic",
14-
"comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose"
21+
"comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose",
22+
"$modes": {
23+
"hds": "#5990ff",
24+
"cds-g0": "{carbon.themes.white.focus}",
25+
"cds-g10": "{carbon.themes.g10.focus}",
26+
"cds-g90": "{carbon.themes.g90.focus}",
27+
"cds-g100": "{carbon.themes.g100.focus}"
28+
}
1529
}
1630
},
1731
"critical": {
1832
"internal": {
1933
"$type": "color",
2034
"$value": "{color.palette.red-300}",
21-
"group": "semantic"
35+
"group": "semantic",
36+
"$modes": {
37+
"hds": "{color.palette.blue-300}",
38+
"cds-g0": "{carbon.themes.white.focusInset}",
39+
"cds-g10": "{carbon.themes.g10.focusInset}",
40+
"cds-g90": "{carbon.themes.g90.focusInset}",
41+
"cds-g100": "{carbon.themes.g100.focusInset}"
42+
}
2243
},
2344
"external": {
2445
"$type": "color",
2546
"$value": "#dd7578",
2647
"group": "semantic",
27-
"comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose"
48+
"comment": "this is a special color used only for the focus style, to pass color contrast for a11y purpose",
49+
"$modes": {
50+
"hds": "#5990ff",
51+
"cds-g0": "{carbon.themes.white.focus}",
52+
"cds-g10": "{carbon.themes.g10.focus}",
53+
"cds-g90": "{carbon.themes.g90.focus}",
54+
"cds-g100": "{carbon.themes.g100.focus}"
55+
}
2856
}
2957
}
3058
}

0 commit comments

Comments
 (0)