@patternfly/design-tokens 1.15.2 → 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/build/css/tokens-charts-dark.scss +4 -2
  2. package/build/css/tokens-charts-highcontrast-dark.scss +175 -0
  3. package/build/css/tokens-charts-highcontrast.scss +175 -0
  4. package/build/css/tokens-charts.scss +4 -2
  5. package/build/css/tokens-dark.scss +1 -1
  6. package/build/css/tokens-default.scss +1 -1
  7. package/build/css/tokens-felt-dark.scss +1 -1
  8. package/build/css/tokens-felt-glass-dark.scss +1 -1
  9. package/build/css/tokens-felt-glass.scss +1 -1
  10. package/build/css/tokens-felt-highcontrast-dark.scss +1 -1
  11. package/build/css/tokens-felt-highcontrast.scss +10 -2
  12. package/build/css/tokens-felt.scss +1 -1
  13. package/build/css/tokens-glass-dark.scss +1 -1
  14. package/build/css/tokens-glass.scss +1 -1
  15. package/build/css/tokens-palette.scss +1 -1
  16. package/build/css/tokens-redhat-highcontrast.scss +1 -1
  17. package/build.js +7 -1
  18. package/config.charts.dark.json +1 -1
  19. package/config.charts.highcontrast.dark.json +23 -0
  20. package/config.charts.highcontrast.json +23 -0
  21. package/config.charts.json +1 -1
  22. package/config.felt-highcontrast.json +2 -2
  23. package/config.layers.felt-highcontrast.json +2 -2
  24. package/config.layers.felt.json +2 -2
  25. package/package.json +1 -1
  26. package/patternfly-docs/content/token-layers-felt-dark.json +60 -16
  27. package/patternfly-docs/content/token-layers-felt-highcontrast.json +53027 -0
  28. package/patternfly-docs/content/token-layers-felt.json +65461 -0
  29. package/patternfly-docs/content/tokensTable.css +178 -0
  30. package/patternfly-docs/content/tokensTable.js +1078 -180
  31. package/patternfly-docs/content/tokensToolbar.js +240 -11
  32. package/patternfly-docs/generated/foundations-and-styles/design-tokens/all-design-tokens/design-tokens.js +37 -3
  33. package/patternfly-docs/generated/index.js +1 -0
  34. package/plugins/export-patternfly-tokens/dist/ui.html +9 -9
  35. package/plugins/export-patternfly-tokens/src/ui.tsx +8 -8
  36. package/tokens/default/dark/charts.dark.json +11 -3
  37. package/tokens/default/dark/charts.highcontrast.dark.json +11 -3
  38. package/tokens/default/light/charts.highcontrast.json +11 -3
  39. package/tokens/default/light/charts.json +11 -3
  40. package/tokens/felt/dark/felt.color.dark.json +41 -41
  41. package/tokens/felt/glass/felt.color.glass.json +9 -9
  42. package/tokens/felt/glass-dark/felt.color.glass.dark.json +41 -41
  43. package/tokens/felt/highcontrast/felt.color.highcontrast.json +9 -9
  44. package/tokens/felt/highcontrast-dark/felt.color.highcontrast.dark.json +9 -9
  45. package/tokens/felt/light/felt.color.json +9 -9
package/plugins/export-patternfly-tokens/src/ui.tsx CHANGED
@@ -72,12 +72,12 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
72
72
  saveFolderNames = ['default/glass-dark'];
73
73
  break;
74
74
  // Semantic color - high contrast
75
- case '/* Default Semantic Color Tokens.Light - High Contrast (Beta).tokens.json */':
75
+ case '/* Default Semantic Color Tokens.Light - High Contrast.tokens.json */':
76
76
  saveFileName = 'semantic.highcontrast.json';
77
77
  saveFolderNames = ['default/highcontrast'];
78
78
  break;
79
79
  // Semantic color - high contrast - dark
80
- case '/* Default Semantic Color Tokens.Dark - High Contrast (Beta).tokens.json */':
80
+ case '/* Default Semantic Color Tokens.Dark - High Contrast.tokens.json */':
81
81
  saveFileName = 'semantic.highcontrast.dark.json';
82
82
  saveFolderNames = ['default/highcontrast-dark'];
83
83
  break;
@@ -87,7 +87,7 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
87
87
  saveFolderNames = ['default/light'];
88
88
  break;
89
89
  // Semantic dimension - high contrast
90
- case '/* Default Semantic Dimension Tokens.High Contrast - Beta.tokens.json */':
90
+ case '/* Default Semantic Dimension Tokens.High Contrast.tokens.json */':
91
91
  saveFileName = 'semantic.dimension.highcontrast.json';
92
92
  saveFolderNames = ['default/highcontrast'];
93
93
  break;
@@ -113,12 +113,12 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
113
113
  saveFolderNames = ['default/dark'];
114
114
  break;
115
115
  // Charts - high contrast - light
116
- case '/* Charts.High Contrast - Light.tokens.json */':
116
+ case '/* Charts.Light - High Contrast.tokens.json */':
117
117
  saveFileName = 'charts.highcontrast.json';
118
118
  saveFolderNames = ['default/light'];
119
119
  break;
120
120
  // Charts - high contrast - dark
121
- case '/* Charts.High Contrast - Dark.tokens.json */':
121
+ case '/* Charts.Dark - High Contrast.tokens.json */':
122
122
  saveFileName = 'charts.highcontrast.dark.json';
123
123
  saveFolderNames = ['default/dark'];
124
124
  break;
@@ -140,11 +140,11 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
140
140
  saveFileName = 'felt.color.glass.dark.json';
141
141
  saveFolderNames = ['felt/glass-dark'];
142
142
  break;
143
- case '/* Felt Color Tokens.Light - High Contrast (Beta).tokens.json */':
143
+ case '/* Felt Color Tokens.Light - High Contrast.tokens.json */':
144
144
  saveFileName = 'felt.color.highcontrast.json';
145
145
  saveFolderNames = ['felt/highcontrast'];
146
146
  break;
147
- case '/* Felt Color Tokens.Dark - High Contrast (Beta).tokens.json */':
147
+ case '/* Felt Color Tokens.Dark - High Contrast.tokens.json */':
148
148
  saveFileName = 'felt.color.highcontrast.dark.json';
149
149
  saveFolderNames = ['felt/highcontrast-dark'];
150
150
  break;
@@ -157,7 +157,7 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
157
157
  saveFileName = 'felt.dimension.glass.json';
158
158
  saveFolderNames = ['felt/glass'];
159
159
  break;
160
- case '/* Felt Dimension Tokens.High Contrast - Beta.tokens.json */':
160
+ case '/* Felt Dimension Tokens.High Contrast.tokens.json */':
161
161
  saveFileName = 'felt.dimension.highcontrast.json';
162
162
  saveFolderNames = ['felt/highcontrast'];
163
163
  break;
package/tokens/default/dark/charts.dark.json CHANGED
@@ -252,6 +252,12 @@
252
252
  "type": "color",
253
253
  "value": "{color.white}"
254
254
  }
255
+ },
256
+ "opacity": {
257
+ "area": {
258
+ "type": "number",
259
+ "value": 20
260
+ }
255
261
  }
256
262
  },
257
263
  "warning": {
@@ -332,12 +338,14 @@
332
338
  "value": "{color.white}"
333
339
  },
334
340
  "stroke": {
341
+ "color": {
342
+ "type": "string",
343
+ "value": "transparent"
344
+ },
335
345
  "width": {
336
346
  "type": "number",
337
347
  "value": 0
338
- },
339
- "type": "string",
340
- "value": "transparent"
348
+ }
341
349
  }
342
350
  }
343
351
  },
package/tokens/default/dark/charts.highcontrast.dark.json CHANGED
@@ -252,6 +252,12 @@
252
252
  "type": "color",
253
253
  "value": "{color.white}"
254
254
  }
255
+ },
256
+ "opacity": {
257
+ "area": {
258
+ "type": "number",
259
+ "value": 20
260
+ }
255
261
  }
256
262
  },
257
263
  "warning": {
@@ -332,12 +338,14 @@
332
338
  "value": "{color.white}"
333
339
  },
334
340
  "stroke": {
341
+ "color": {
342
+ "type": "string",
343
+ "value": "transparent"
344
+ },
335
345
  "width": {
336
346
  "type": "number",
337
347
  "value": 0
338
- },
339
- "type": "string",
340
- "value": "transparent"
348
+ }
341
349
  }
342
350
  }
343
351
  },
package/tokens/default/light/charts.highcontrast.json CHANGED
@@ -252,6 +252,12 @@
252
252
  "type": "color",
253
253
  "value": "{color.white}"
254
254
  }
255
+ },
256
+ "opacity": {
257
+ "area": {
258
+ "type": "number",
259
+ "value": 10
260
+ }
255
261
  }
256
262
  },
257
263
  "warning": {
@@ -332,12 +338,14 @@
332
338
  "value": "{color.gray.90}"
333
339
  },
334
340
  "stroke": {
341
+ "color": {
342
+ "type": "string",
343
+ "value": "transparent"
344
+ },
335
345
  "width": {
336
346
  "type": "number",
337
347
  "value": 0
338
- },
339
- "type": "string",
340
- "value": "transparent"
348
+ }
341
349
  }
342
350
  }
343
351
  },
package/tokens/default/light/charts.json CHANGED
@@ -252,6 +252,12 @@
252
252
  "type": "color",
253
253
  "value": "{color.white}"
254
254
  }
255
+ },
256
+ "opacity": {
257
+ "area": {
258
+ "type": "number",
259
+ "value": 30
260
+ }
255
261
  }
256
262
  },
257
263
  "warning": {
@@ -332,12 +338,14 @@
332
338
  "value": "{color.gray.90}"
333
339
  },
334
340
  "stroke": {
341
+ "color": {
342
+ "type": "string",
343
+ "value": "transparent"
344
+ },
335
345
  "width": {
336
346
  "type": "number",
337
347
  "value": 0
338
- },
339
- "type": "string",
340
- "value": "transparent"
348
+ }
341
349
  }
342
350
  }
343
351
  },
package/tokens/felt/dark/felt.color.dark.json CHANGED
@@ -4,6 +4,11 @@
4
4
  "color": {
5
5
  "brand": {
6
6
  "accent": {
7
+ "default": {
8
+ "description": "Use this color for elements that you want to reinforce your brand",
9
+ "type": "color",
10
+ "value": "{global.dark.color.brand.accent.100}"
11
+ },
7
12
  "hover": {
8
13
  "description": "Use as the hover state for elements that have a branded background color",
9
14
  "type": "color",
@@ -13,33 +18,42 @@
13
18
  "description": "Use as the clicked state for elements that have a brand background color",
14
19
  "type": "color",
15
20
  "value": "{global.dark.color.brand.accent.200}"
16
- },
17
- "default": {
18
- "description": "Use this color for elements that you want to reinforce your brand",
19
- "type": "color",
20
- "value": "{global.dark.color.brand.accent.100}"
21
21
  }
22
22
  }
23
23
  }
24
24
  },
25
- "border": {
25
+ "icon": {
26
26
  "color": {
27
- "brand": {
27
+ "on-brand": {
28
28
  "accent": {
29
29
  "hover": {
30
- "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
30
+ "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
31
31
  "type": "color",
32
- "value": "{global.dark.color.brand.accent.400}"
32
+ "value": "{global.icon.color.regular}"
33
+ },
34
+ "default": {
35
+ "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
36
+ "type": "color",
37
+ "value": "{global.icon.color.regular}"
33
38
  },
34
39
  "clicked": {
35
- "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
40
+ "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
36
41
  "type": "color",
37
- "value": "{global.dark.color.brand.accent.400}"
42
+ "value": "{global.icon.color.regular}"
43
+ }
44
+ }
45
+ },
46
+ "brand": {
47
+ "accent": {
48
+ "clicked": {
49
+ "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
50
+ "type": "color",
51
+ "value": "{global.dark.color.brand.accent.300}"
38
52
  },
39
- "default": {
40
- "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
53
+ "hover": {
54
+ "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
41
55
  "type": "color",
42
- "value": "{global.dark.color.brand.accent.400}"
56
+ "value": "{global.dark.color.brand.accent.300}"
43
57
  }
44
58
  }
45
59
  }
@@ -49,11 +63,6 @@
49
63
  "color": {
50
64
  "on-brand": {
51
65
  "accent": {
52
- "clicked": {
53
- "description": "Use as the clicked state color for text placed on a brand-colored background.",
54
- "type": "color",
55
- "value": "{global.text.color.regular}"
56
- },
57
66
  "hover": {
58
67
  "description": "Use as the hover state color for text placed on a brand-colored background.",
59
68
  "type": "color",
@@ -63,43 +72,34 @@
63
72
  "description": "Use as the default color for text placed on a brand-colored background.",
64
73
  "type": "color",
65
74
  "value": "{global.text.color.regular}"
75
+ },
76
+ "clicked": {
77
+ "description": "Use as the clicked state color for text placed on a brand-colored background.",
78
+ "type": "color",
79
+ "value": "{global.text.color.regular}"
66
80
  }
67
81
  }
68
82
  }
69
83
  }
70
84
  },
71
- "icon": {
85
+ "border": {
72
86
  "color": {
73
87
  "brand": {
74
88
  "accent": {
75
- "hover": {
76
- "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
77
- "type": "color",
78
- "value": "{global.dark.color.brand.accent.300}"
79
- },
80
89
  "clicked": {
81
- "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
82
- "type": "color",
83
- "value": "{global.dark.color.brand.accent.300}"
84
- }
85
- }
86
- },
87
- "on-brand": {
88
- "accent": {
89
- "default": {
90
- "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
90
+ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
91
91
  "type": "color",
92
- "value": "{global.icon.color.regular}"
92
+ "value": "{global.dark.color.brand.accent.400}"
93
93
  },
94
94
  "hover": {
95
- "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
95
+ "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
96
96
  "type": "color",
97
- "value": "{global.icon.color.regular}"
97
+ "value": "{global.dark.color.brand.accent.400}"
98
98
  },
99
- "clicked": {
100
- "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
99
+ "default": {
100
+ "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
101
101
  "type": "color",
102
- "value": "{global.icon.color.regular}"
102
+ "value": "{global.dark.color.brand.accent.400}"
103
103
  }
104
104
  }
105
105
  }
package/tokens/felt/glass/felt.color.glass.json CHANGED
@@ -4,6 +4,11 @@
4
4
  "color": {
5
5
  "brand": {
6
6
  "accent": {
7
+ "default": {
8
+ "description": "Use this color for elements that you want to reinforce your brand",
9
+ "type": "color",
10
+ "value": "{global.color.brand.accent.100}"
11
+ },
7
12
  "hover": {
8
13
  "description": "Use as the hover state for elements that have a branded background color",
9
14
  "type": "color",
@@ -13,11 +18,6 @@
13
18
  "description": "Use as the clicked state for elements that have a brand background color",
14
19
  "type": "color",
15
20
  "value": "{global.color.brand.accent.200}"
16
- },
17
- "default": {
18
- "description": "Use this color for elements that you want to reinforce your brand",
19
- "type": "color",
20
- "value": "{global.color.brand.accent.100}"
21
21
  }
22
22
  }
23
23
  }
@@ -26,13 +26,13 @@
26
26
  "color": {
27
27
  "brand": {
28
28
  "accent": {
29
- "hover": {
30
- "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
29
+ "clicked": {
30
+ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
31
31
  "type": "color",
32
32
  "value": "{global.color.brand.accent.400}"
33
33
  },
34
- "clicked": {
35
- "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
34
+ "hover": {
35
+ "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
36
36
  "type": "color",
37
37
  "value": "{global.color.brand.accent.400}"
38
38
  },
package/tokens/felt/glass-dark/felt.color.glass.dark.json CHANGED
@@ -4,6 +4,11 @@
4
4
  "color": {
5
5
  "brand": {
6
6
  "accent": {
7
+ "default": {
8
+ "description": "Use this color for elements that you want to reinforce your brand",
9
+ "type": "color",
10
+ "value": "{global.dark.color.brand.accent.100}"
11
+ },
7
12
  "hover": {
8
13
  "description": "Use as the hover state for elements that have a branded background color",
9
14
  "type": "color",
@@ -13,33 +18,42 @@
13
18
  "description": "Use as the clicked state for elements that have a brand background color",
14
19
  "type": "color",
15
20
  "value": "{global.dark.color.brand.accent.200}"
16
- },
17
- "default": {
18
- "description": "Use this color for elements that you want to reinforce your brand",
19
- "type": "color",
20
- "value": "{global.dark.color.brand.accent.100}"
21
21
  }
22
22
  }
23
23
  }
24
24
  },
25
- "border": {
25
+ "icon": {
26
26
  "color": {
27
- "brand": {
27
+ "on-brand": {
28
28
  "accent": {
29
29
  "hover": {
30
- "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
30
+ "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
31
31
  "type": "color",
32
- "value": "{global.dark.color.brand.accent.400}"
32
+ "value": "{global.icon.color.regular}"
33
+ },
34
+ "default": {
35
+ "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
36
+ "type": "color",
37
+ "value": "{global.icon.color.regular}"
33
38
  },
34
39
  "clicked": {
35
- "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
40
+ "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
36
41
  "type": "color",
37
- "value": "{global.dark.color.brand.accent.400}"
42
+ "value": "{global.icon.color.regular}"
43
+ }
44
+ }
45
+ },
46
+ "brand": {
47
+ "accent": {
48
+ "clicked": {
49
+ "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
50
+ "type": "color",
51
+ "value": "{global.dark.color.brand.accent.300}"
38
52
  },
39
- "default": {
40
- "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
53
+ "hover": {
54
+ "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
41
55
  "type": "color",
42
- "value": "{global.dark.color.brand.accent.400}"
56
+ "value": "{global.dark.color.brand.accent.300}"
43
57
  }
44
58
  }
45
59
  }
@@ -49,11 +63,6 @@
49
63
  "color": {
50
64
  "on-brand": {
51
65
  "accent": {
52
- "clicked": {
53
- "description": "Use as the clicked state color for text placed on a brand-colored background.",
54
- "type": "color",
55
- "value": "{global.text.color.regular}"
56
- },
57
66
  "hover": {
58
67
  "description": "Use as the hover state color for text placed on a brand-colored background.",
59
68
  "type": "color",
@@ -63,43 +72,34 @@
63
72
  "description": "Use as the default color for text placed on a brand-colored background.",
64
73
  "type": "color",
65
74
  "value": "{global.text.color.regular}"
75
+ },
76
+ "clicked": {
77
+ "description": "Use as the clicked state color for text placed on a brand-colored background.",
78
+ "type": "color",
79
+ "value": "{global.text.color.regular}"
66
80
  }
67
81
  }
68
82
  }
69
83
  }
70
84
  },
71
- "icon": {
85
+ "border": {
72
86
  "color": {
73
87
  "brand": {
74
88
  "accent": {
75
- "hover": {
76
- "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
77
- "type": "color",
78
- "value": "{global.dark.color.brand.accent.300}"
79
- },
80
89
  "clicked": {
81
- "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
82
- "type": "color",
83
- "value": "{global.dark.color.brand.accent.300}"
84
- }
85
- }
86
- },
87
- "on-brand": {
88
- "accent": {
89
- "default": {
90
- "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
90
+ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
91
91
  "type": "color",
92
- "value": "{global.icon.color.regular}"
92
+ "value": "{global.dark.color.brand.accent.400}"
93
93
  },
94
94
  "hover": {
95
- "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
95
+ "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
96
96
  "type": "color",
97
- "value": "{global.icon.color.regular}"
97
+ "value": "{global.dark.color.brand.accent.400}"
98
98
  },
99
- "clicked": {
100
- "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
99
+ "default": {
100
+ "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
101
101
  "type": "color",
102
- "value": "{global.icon.color.regular}"
102
+ "value": "{global.dark.color.brand.accent.400}"
103
103
  }
104
104
  }
105
105
  }
package/tokens/felt/highcontrast/felt.color.highcontrast.json CHANGED
@@ -4,6 +4,11 @@
4
4
  "color": {
5
5
  "brand": {
6
6
  "accent": {
7
+ "default": {
8
+ "description": "Use this color for elements that you want to reinforce your brand",
9
+ "type": "color",
10
+ "value": "{global.color.brand.accent.400}"
11
+ },
7
12
  "hover": {
8
13
  "description": "Use as the hover state for elements that have a branded background color",
9
14
  "type": "color",
@@ -13,11 +18,6 @@
13
18
  "description": "Use as the clicked state for elements that have a brand background color",
14
19
  "type": "color",
15
20
  "value": "{global.color.brand.accent.300}"
16
- },
17
- "default": {
18
- "description": "Use this color for elements that you want to reinforce your brand",
19
- "type": "color",
20
- "value": "{global.color.brand.accent.400}"
21
21
  }
22
22
  }
23
23
  }
@@ -26,13 +26,13 @@
26
26
  "color": {
27
27
  "brand": {
28
28
  "accent": {
29
- "hover": {
30
- "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
29
+ "clicked": {
30
+ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
31
31
  "type": "color",
32
32
  "value": "{global.color.brand.accent.400}"
33
33
  },
34
- "clicked": {
35
- "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
34
+ "hover": {
35
+ "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
36
36
  "type": "color",
37
37
  "value": "{global.color.brand.accent.400}"
38
38
  },
package/tokens/felt/highcontrast-dark/felt.color.highcontrast.dark.json CHANGED
@@ -4,6 +4,11 @@
4
4
  "color": {
5
5
  "brand": {
6
6
  "accent": {
7
+ "default": {
8
+ "description": "Use this color for elements that you want to reinforce your brand",
9
+ "type": "color",
10
+ "value": "{global.dark.color.brand.accent.400}"
11
+ },
7
12
  "hover": {
8
13
  "description": "Use as the hover state for elements that have a branded background color",
9
14
  "type": "color",
@@ -13,11 +18,6 @@
13
18
  "description": "Use as the clicked state for elements that have a brand background color",
14
19
  "type": "color",
15
20
  "value": "{global.dark.color.brand.accent.350}"
16
- },
17
- "default": {
18
- "description": "Use this color for elements that you want to reinforce your brand",
19
- "type": "color",
20
- "value": "{global.dark.color.brand.accent.400}"
21
21
  }
22
22
  }
23
23
  }
@@ -26,13 +26,13 @@
26
26
  "color": {
27
27
  "brand": {
28
28
  "accent": {
29
- "hover": {
30
- "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
29
+ "clicked": {
30
+ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
31
31
  "type": "color",
32
32
  "value": "{global.dark.color.brand.accent.400}"
33
33
  },
34
- "clicked": {
35
- "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
34
+ "hover": {
35
+ "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
36
36
  "type": "color",
37
37
  "value": "{global.dark.color.brand.accent.400}"
38
38
  },
package/tokens/felt/light/felt.color.json CHANGED
@@ -4,6 +4,11 @@
4
4
  "color": {
5
5
  "brand": {
6
6
  "accent": {
7
+ "default": {
8
+ "description": "Use this color for elements that you want to reinforce your brand",
9
+ "type": "color",
10
+ "value": "{global.color.brand.accent.100}"
11
+ },
7
12
  "hover": {
8
13
  "description": "Use as the hover state for elements that have a branded background color",
9
14
  "type": "color",
@@ -13,11 +18,6 @@
13
18
  "description": "Use as the clicked state for elements that have a brand background color",
14
19
  "type": "color",
15
20
  "value": "{global.color.brand.accent.200}"
16
- },
17
- "default": {
18
- "description": "Use this color for elements that you want to reinforce your brand",
19
- "type": "color",
20
- "value": "{global.color.brand.accent.100}"
21
21
  }
22
22
  }
23
23
  }
@@ -26,13 +26,13 @@
26
26
  "color": {
27
27
  "brand": {
28
28
  "accent": {
29
- "hover": {
30
- "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
29
+ "clicked": {
30
+ "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
31
31
  "type": "color",
32
32
  "value": "{global.color.brand.accent.400}"
33
33
  },
34
- "clicked": {
35
- "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
34
+ "hover": {
35
+ "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
36
36
  "type": "color",
37
37
  "value": "{global.color.brand.accent.400}"
38
38
  },