@workday/canvas-tokens-web 5.0.0-alpha.0 → 5.0.0-alpha.2

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 (41) hide show
  1. package/css/base/_variables.css +141 -100
  2. package/css/brand/_variables.css +39 -31
  3. package/css/component/_variables.css +1 -1
  4. package/css/legacy/base.css +340 -0
  5. package/css/legacy/brand.css +121 -0
  6. package/css/legacy/component.css +23 -0
  7. package/css/legacy/system.css +232 -0
  8. package/css/system/_variables.css +126 -53
  9. package/dist/common-js/base/index.d.ts +908 -732
  10. package/dist/common-js/base/index.js +378 -1
  11. package/dist/common-js/brand/index.d.ts +260 -77
  12. package/dist/common-js/brand/index.js +131 -1
  13. package/dist/common-js/component/index.d.ts +36 -1
  14. package/dist/common-js/component/index.js +31 -1
  15. package/dist/common-js/index.d.ts +1 -1
  16. package/dist/common-js/index.js +1 -1
  17. package/dist/common-js/system/index.d.ts +956 -70
  18. package/dist/common-js/system/index.js +520 -14
  19. package/dist/es6/base/index.d.ts +908 -732
  20. package/dist/es6/base/index.js +378 -1
  21. package/dist/es6/brand/index.d.ts +260 -77
  22. package/dist/es6/brand/index.js +131 -1
  23. package/dist/es6/component/index.d.ts +36 -1
  24. package/dist/es6/component/index.js +31 -1
  25. package/dist/es6/index.d.ts +1 -1
  26. package/dist/es6/index.js +1 -1
  27. package/dist/es6/system/index.d.ts +956 -70
  28. package/dist/es6/system/index.js +520 -14
  29. package/less/base/_variables.less +141 -100
  30. package/less/brand/_variables.less +39 -31
  31. package/less/component/_variables.less +1 -1
  32. package/less/system/_variables.less +126 -53
  33. package/package.json +1 -1
  34. package/scss/base/_variables.sass +141 -100
  35. package/scss/base/_variables.scss +141 -100
  36. package/scss/brand/_variables.sass +39 -31
  37. package/scss/brand/_variables.scss +39 -31
  38. package/scss/component/_variables.sass +1 -1
  39. package/scss/component/_variables.scss +1 -1
  40. package/scss/system/_variables.sass +126 -53
  41. package/scss/system/_variables.scss +126 -53
package/less/base/_variables.less CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 22:28:08 GMT
3
+ // Generated on Thu, 25 Jun 2026 23:45:09 GMT
4
4
 
5
- @cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overriden by user preferences
5
+ @cnvs-base-font-size: 1rem; // Default fontSize for the browser, may be overridden by user preferences
6
6
  @cnvs-base-baseline: 0.5rem; // Baseline unit used for the 8pt sizing grid
7
7
  @cnvs-base-duration-50: 50ms;
8
8
  @cnvs-base-duration-100: 100ms;
@@ -56,10 +56,11 @@
56
56
  @cnvs-base-palette-amber-900: oklch(0.32 0.098 41.19 / 1);
57
57
  @cnvs-base-palette-amber-950: oklch(0.2489 0.0771 40.64 / 1);
58
58
  @cnvs-base-palette-amber-975: oklch(0.2165 0.0674 40.35 / 1);
59
- @cnvs-base-palette-amber-a25: oklch(0.7982 0.159 92.57 / 0.1);
60
- @cnvs-base-palette-amber-a50: oklch(0.8864 0.1845 100.28 / 0.22);
61
- @cnvs-base-palette-amber-a100: oklch(0.8988 0.185 97.8 / 0.35);
62
- @cnvs-base-palette-amber-a200: oklch(0.886 0.1822 96.83 / 0.64);
59
+ @cnvs-base-palette-amber-a25: oklch(0.7792 0.1592 90.57 / 0.0902);
60
+ @cnvs-base-palette-amber-a50: oklch(0.8854 0.1841 100.16 / 0.2196);
61
+ @cnvs-base-palette-amber-a100: oklch(0.8964 0.1849 97.38 / 0.3412);
62
+ @cnvs-base-palette-amber-a200: oklch(0.8846 0.1822 96.67 / 0.6314);
63
+ @cnvs-base-palette-amber-a300: oklch(0.8372 0.1718 83.95 / 0.9529);
63
64
  @cnvs-base-palette-azure-25: oklch(0.981 0.0131 220.96 / 1);
64
65
  @cnvs-base-palette-azure-50: oklch(0.9549 0.0295 223.86 / 1);
65
66
  @cnvs-base-palette-azure-100: oklch(0.9321 0.0425 227.25 / 1);
@@ -73,10 +74,11 @@
73
74
  @cnvs-base-palette-azure-900: oklch(0.326 0.07 235.91 / 1);
74
75
  @cnvs-base-palette-azure-950: oklch(0.249 0.053 235.41 / 1);
75
76
  @cnvs-base-palette-azure-975: oklch(0.2138 0.0455 235.23 / 1);
76
- @cnvs-base-palette-azure-a25: oklch(0.7487 0.1547 233.36 / 0.06);
77
- @cnvs-base-palette-azure-a50: oklch(0.7394 0.1572 235.46 / 0.14);
77
+ @cnvs-base-palette-azure-a25: oklch(0.7461 0.1557 233.78 / 0.0588);
78
+ @cnvs-base-palette-azure-a50: oklch(0.7349 0.1588 236.29 / 0.1373);
78
79
  @cnvs-base-palette-azure-a100: oklch(0.7186 0.1639 239.76 / 0.2);
79
80
  @cnvs-base-palette-azure-a200: oklch(0.7117 0.1663 241.15 / 0.42);
81
+ @cnvs-base-palette-azure-a300: oklch(0.6542 0.1794 248.76 / 0.5255);
80
82
  @cnvs-base-palette-blue-25: oklch(0.969 0.0155 248.07 / 1);
81
83
  @cnvs-base-palette-blue-50: oklch(0.9523 0.0239 248.12 / 1);
82
84
  @cnvs-base-palette-blue-100: oklch(0.928 0.0359 250.6 / 1);
@@ -90,10 +92,11 @@
90
92
  @cnvs-base-palette-blue-900: oklch(0.3152 0.1054 261.09 / 1);
91
93
  @cnvs-base-palette-blue-950: oklch(0.2452 0.0752 254.55 / 1);
92
94
  @cnvs-base-palette-blue-975: oklch(0.209 0.07 255.61 / 1);
93
- @cnvs-base-palette-blue-a25: oklch(0.6499 0.1912 253.52 / 0.08);
94
- @cnvs-base-palette-blue-a50: oklch(0.6152 0.2108 256.1 / 0.11);
95
- @cnvs-base-palette-blue-a100: oklch(0.6225 0.2064 255.9 / 0.17);
95
+ @cnvs-base-palette-blue-a25: oklch(0.6141 0.2114 256.22 / 0.0706);
96
+ @cnvs-base-palette-blue-a50: oklch(0.6141 0.2114 256.22 / 0.1098);
97
+ @cnvs-base-palette-blue-a100: oklch(0.6077 0.215 256.92 / 0.1608);
96
98
  @cnvs-base-palette-blue-a200: oklch(0.6048 0.2166 257.21 / 0.31);
99
+ @cnvs-base-palette-blue-a300: oklch(0.5987 0.22 257.83 / 0.4667);
97
100
  @cnvs-base-palette-coral-25: oklch(0.9837 0.0085 44.54 / 1);
98
101
  @cnvs-base-palette-coral-50: oklch(0.9659 0.0171 35.14 / 1);
99
102
  @cnvs-base-palette-coral-100: oklch(0.9344 0.0339 35.8 / 1);
@@ -107,10 +110,11 @@
107
110
  @cnvs-base-palette-coral-900: oklch(0.3043 0.1137 32.49 / 1);
108
111
  @cnvs-base-palette-coral-950: oklch(0.236 0.0899 31.8 / 1);
109
112
  @cnvs-base-palette-coral-975: oklch(0.2114 0.07 29.72 / 1);
110
- @cnvs-base-palette-coral-a25: oklch(0.6708 0.221 37.37 / 0.04);
111
- @cnvs-base-palette-coral-a50: oklch(0.6598 0.229 34.15 / 0.08);
112
- @cnvs-base-palette-coral-a100: oklch(0.6545 0.2337 33.76 / 0.15);
113
- @cnvs-base-palette-coral-a200: oklch(0.6552 0.2332 34.09 / 0.36);
113
+ @cnvs-base-palette-coral-a25: oklch(0.6672 0.2239 36.87 / 0.0392);
114
+ @cnvs-base-palette-coral-a50: oklch(0.6482 0.2393 32.96 / 0.0745);
115
+ @cnvs-base-palette-coral-a100: oklch(0.6492 0.2384 33.16 / 0.1451);
116
+ @cnvs-base-palette-coral-a200: oklch(0.6524 0.2357 33.8 / 0.3529);
117
+ @cnvs-base-palette-coral-a300: oklch(0.654 0.2344 34.12 / 0.5686);
114
118
  @cnvs-base-palette-green-25: oklch(0.9824 0.0282 148.77 / 1);
115
119
  @cnvs-base-palette-green-50: oklch(0.9655 0.0561 149.93 / 1);
116
120
  @cnvs-base-palette-green-100: oklch(0.9278 0.1024 149.88 / 1);
@@ -124,10 +128,11 @@
124
128
  @cnvs-base-palette-green-900: oklch(0.3197 0.0997 145.3 / 1);
125
129
  @cnvs-base-palette-green-950: oklch(0.2548 0.0796 145.23 / 1);
126
130
  @cnvs-base-palette-green-975: oklch(0.2118 0.0653 145.69 / 1);
127
- @cnvs-base-palette-green-a25: oklch(0.8695 0.2801 143.52 / 0.08);
128
- @cnvs-base-palette-green-a50: oklch(0.8685 0.2814 143.77 / 0.15);
129
- @cnvs-base-palette-green-a100: oklch(0.8316 0.2716 143.71 / 0.29);
130
- @cnvs-base-palette-green-a200: oklch(0.796 0.2508 144.9 / 0.6);
131
+ @cnvs-base-palette-green-a25: oklch(0.8669 0.2908 142.93 / 0.0706);
132
+ @cnvs-base-palette-green-a50: oklch(0.8673 0.2872 143.33 / 0.1451);
133
+ @cnvs-base-palette-green-a100: oklch(0.8314 0.2728 143.62 / 0.2863);
134
+ @cnvs-base-palette-green-a200: oklch(0.7945 0.2509 144.87 / 0.5961);
135
+ @cnvs-base-palette-green-a300: oklch(0.7417 0.2214 146.84 / 0.7765);
131
136
  @cnvs-base-palette-indigo-25: oklch(0.9703 0.0147 286 / 1);
132
137
  @cnvs-base-palette-indigo-50: oklch(0.9499 0.0243 280.81 / 1);
133
138
  @cnvs-base-palette-indigo-100: oklch(0.9201 0.0395 282.43 / 1);
@@ -141,10 +146,11 @@
141
146
  @cnvs-base-palette-indigo-900: oklch(0.317 0.142 278.2 / 1);
142
147
  @cnvs-base-palette-indigo-950: oklch(0.2448 0.1108 277.85 / 1);
143
148
  @cnvs-base-palette-indigo-975: oklch(0.1951 0.0693 277.85 / 1);
144
- @cnvs-base-palette-indigo-a25: oklch(0.4762 0.2966 267.42 / 0.05);
145
- @cnvs-base-palette-indigo-a50: oklch(0.4661 0.3036 264.5 / 0.08);
146
- @cnvs-base-palette-indigo-a100: oklch(0.4693 0.3013 265.31 / 0.13);
147
- @cnvs-base-palette-indigo-a200: oklch(0.4666 0.3032 264.75 / 0.24);
149
+ @cnvs-base-palette-indigo-a25: oklch(0.452 0.3132 264.06 / 0.0431);
150
+ @cnvs-base-palette-indigo-a50: oklch(0.4624 0.3062 264.19 / 0.0784);
151
+ @cnvs-base-palette-indigo-a100: oklch(0.4576 0.3094 264.14 / 0.1216);
152
+ @cnvs-base-palette-indigo-a200: oklch(0.4602 0.3077 264.17 / 0.2314);
153
+ @cnvs-base-palette-indigo-a300: oklch(0.4556 0.3108 264.11 / 0.3569);
148
154
  @cnvs-base-palette-magenta-25: oklch(0.9782 0.0191 325.55 / 1);
149
155
  @cnvs-base-palette-magenta-50: oklch(0.9637 0.0322 325.69 / 1);
150
156
  @cnvs-base-palette-magenta-100: oklch(0.9253 0.0627 329.34 / 1);
@@ -159,38 +165,43 @@
159
165
  @cnvs-base-palette-magenta-950: oklch(0.2332 0.0908 343.78 / 1);
160
166
  @cnvs-base-palette-magenta-975: oklch(0.2016 0.0706 345.97 / 1);
161
167
  @cnvs-base-palette-magenta-a25: oklch(0.7091 0.3124 328.27 / 0.05);
162
- @cnvs-base-palette-magenta-a50: oklch(0.7044 0.3188 328.33 / 0.08);
163
- @cnvs-base-palette-magenta-a100: oklch(0.6892 0.3052 333.97 / 0.16);
168
+ @cnvs-base-palette-magenta-a50: oklch(0.7017 0.3225 328.36 / 0.0745);
169
+ @cnvs-base-palette-magenta-a100: oklch(0.687 0.3067 334.22 / 0.1529);
164
170
  @cnvs-base-palette-magenta-a200: oklch(0.6972 0.3174 330.1 / 0.24);
171
+ @cnvs-base-palette-magenta-a300: oklch(0.6773 0.2957 338.89 / 0.4196);
165
172
  @cnvs-base-palette-neutral-0: oklch(1 0 0 / 1);
166
173
  @cnvs-base-palette-neutral-25: oklch(0.9851 0 0 / 1);
167
174
  @cnvs-base-palette-neutral-50: oklch(0.9702 0 0 / 1);
168
175
  @cnvs-base-palette-neutral-100: oklch(0.9431 0 0 / 1);
176
+ @cnvs-base-palette-neutral-150: oklch(0.906 0 89.88 / 1);
169
177
  @cnvs-base-palette-neutral-200: oklch(0.8699 0 0 / 1);
170
- @cnvs-base-palette-neutral-300: oklch(0.8015 0 0 / 1);
171
- @cnvs-base-palette-neutral-400: oklch(0.72 0 0 / 1);
178
+ @cnvs-base-palette-neutral-300: oklch(0.8047 0 89.88 / 1);
179
+ @cnvs-base-palette-neutral-400: oklch(0.7219 0 89.88 / 1);
172
180
  @cnvs-base-palette-neutral-500: oklch(0.6234 0 0 / 1);
173
181
  @cnvs-base-palette-neutral-600: oklch(0.5103 0 0 / 1);
174
- @cnvs-base-palette-neutral-700: oklch(0.4494 0 0 / 1);
175
- @cnvs-base-palette-neutral-800: oklch(0.3523 0 0 / 1);
176
- @cnvs-base-palette-neutral-900: oklch(0.2891 0 0 / 1);
177
- @cnvs-base-palette-neutral-950: oklch(0.2308 0 0 / 1);
178
- @cnvs-base-palette-neutral-975: oklch(0.1591 0 0 / 1);
182
+ @cnvs-base-palette-neutral-700: oklch(0.4386 0 89.88 / 1);
183
+ @cnvs-base-palette-neutral-800: oklch(0.3171 0 89.88 / 1);
184
+ @cnvs-base-palette-neutral-850: oklch(0.2645 0 89.88 / 1);
185
+ @cnvs-base-palette-neutral-900: oklch(0.2478 0 89.88 / 1);
186
+ @cnvs-base-palette-neutral-950: oklch(0.228 0 89.88 / 1);
187
+ @cnvs-base-palette-neutral-975: oklch(0.196 0 89.88 / 1);
179
188
  @cnvs-base-palette-neutral-1000: oklch(0 0 0 / 1);
180
189
  @cnvs-base-palette-neutral-a0: oklch(0 0 0 / 0);
181
- @cnvs-base-palette-neutral-a25: oklch(0.1149 0 0 / 0.02);
182
- @cnvs-base-palette-neutral-a50: oklch(0.1149 0 0 / 0.04);
183
- @cnvs-base-palette-neutral-a100: oklch(0.1822 0 0 / 0.08);
184
- @cnvs-base-palette-neutral-a200: oklch(0.0847 0 0 / 0.17);
185
- @cnvs-base-palette-neutral-a300: oklch(0.1149 0 0 / 0.26);
186
- @cnvs-base-palette-neutral-a400: oklch(0.0847 0 0 / 0.36);
187
- @cnvs-base-palette-neutral-a500: oklch(0.1149 0 0 / 0.48);
190
+ @cnvs-base-palette-neutral-a25: oklch(0 0 0 / 0.0196);
191
+ @cnvs-base-palette-neutral-a50: oklch(0 0 0 / 0.0392);
192
+ @cnvs-base-palette-neutral-a100: oklch(0 0 0 / 0.0745);
193
+ @cnvs-base-palette-neutral-a150: oklch(0 0 0 / 0.1216);
194
+ @cnvs-base-palette-neutral-a200: oklch(0 0 0 / 0.1686);
195
+ @cnvs-base-palette-neutral-a300: oklch(0 0 0 / 0.251);
196
+ @cnvs-base-palette-neutral-a400: oklch(0 0 0 / 0.3529);
197
+ @cnvs-base-palette-neutral-a500: oklch(0 0 0 / 0.4706);
188
198
  @cnvs-base-palette-neutral-a600: oklch(0 0 0 / 0.6);
189
- @cnvs-base-palette-neutral-a700: oklch(0.0672 0 0 / 0.67);
190
- @cnvs-base-palette-neutral-a800: oklch(0 0 0 / 0.77);
191
- @cnvs-base-palette-neutral-a900: oklch(0.0969 0 0 / 0.84);
192
- @cnvs-base-palette-neutral-a950: oklch(0.0672 0 0 / 0.89);
193
- @cnvs-base-palette-neutral-a975: oklch(0 0 0 / 0.95);
199
+ @cnvs-base-palette-neutral-a700: oklch(0 0 0 / 0.6784);
200
+ @cnvs-base-palette-neutral-a800: oklch(0 0 0 / 0.8039);
201
+ @cnvs-base-palette-neutral-a850: oklch(0 0 0 / 0.8549);
202
+ @cnvs-base-palette-neutral-a900: oklch(0 0 0 / 0.8706);
203
+ @cnvs-base-palette-neutral-a950: oklch(0 0 0 / 0.8902);
204
+ @cnvs-base-palette-neutral-a975: oklch(0 0 0 / 0.9176);
194
205
  @cnvs-base-palette-orange-25: oklch(0.9673 0.0205 67.52 / 1);
195
206
  @cnvs-base-palette-orange-50: oklch(0.9523 0.0366 72.6 / 1);
196
207
  @cnvs-base-palette-orange-100: oklch(0.9243 0.0542 67.95 / 1);
@@ -204,10 +215,11 @@
204
215
  @cnvs-base-palette-orange-900: oklch(0.3243 0.1084 37.05 / 1);
205
216
  @cnvs-base-palette-orange-950: oklch(0.2421 0.082 36.47 / 1);
206
217
  @cnvs-base-palette-orange-975: oklch(0.2121 0.0706 37.19 / 1);
207
- @cnvs-base-palette-orange-a25: oklch(0.7136 0.1784 53.73 / 0.1);
208
- @cnvs-base-palette-orange-a50: oklch(0.7555 0.1769 59.35 / 0.17);
209
- @cnvs-base-palette-orange-a100: oklch(0.7365 0.1837 54.12 / 0.25);
210
- @cnvs-base-palette-orange-a200: oklch(0.7304 0.1863 52.52 / 0.46);
218
+ @cnvs-base-palette-orange-a25: oklch(0.7093 0.1802 52.88 / 0.098);
219
+ @cnvs-base-palette-orange-a50: oklch(0.75 0.1792 58.11 / 0.1647);
220
+ @cnvs-base-palette-orange-a100: oklch(0.7342 0.1848 53.62 / 0.2471);
221
+ @cnvs-base-palette-orange-a200: oklch(0.7295 0.1867 52.32 / 0.4588);
222
+ @cnvs-base-palette-orange-a300: oklch(0.7426 0.1817 56.01 / 0.8);
211
223
  @cnvs-base-palette-purple-25: oklch(0.9776 0.0147 312 / 1);
212
224
  @cnvs-base-palette-purple-50: oklch(0.951 0.0321 311.49 / 1);
213
225
  @cnvs-base-palette-purple-100: oklch(0.909 0.0637 314.43 / 1);
@@ -221,10 +233,11 @@
221
233
  @cnvs-base-palette-purple-900: oklch(0.3143 0.0996 313.76 / 1);
222
234
  @cnvs-base-palette-purple-950: oklch(0.2351 0.0734 313.34 / 1);
223
235
  @cnvs-base-palette-purple-975: oklch(0.194 0.062 312.79 / 1);
224
- @cnvs-base-palette-purple-a25: oklch(0.5632 0.2948 302.45 / 0.04);
225
- @cnvs-base-palette-purple-a50: oklch(0.5645 0.2935 302.36 / 0.09);
226
- @cnvs-base-palette-purple-a100: oklch(0.5867 0.2975 307.8 / 0.17);
227
- @cnvs-base-palette-purple-a200: oklch(0.6051 0.3009 311.78 / 0.25);
236
+ @cnvs-base-palette-purple-a25: oklch(0.5597 0.2956 301.91 / 0.0392);
237
+ @cnvs-base-palette-purple-a50: oklch(0.5569 0.2953 301.2 / 0.0863);
238
+ @cnvs-base-palette-purple-a100: oklch(0.5812 0.2986 307.02 / 0.1647);
239
+ @cnvs-base-palette-purple-a200: oklch(0.6012 0.302 311.32 / 0.2431);
240
+ @cnvs-base-palette-purple-a300: oklch(0.5935 0.3006 309.71 / 0.3569);
228
241
  @cnvs-base-palette-red-25: oklch(0.9667 0.0163 21.82 / 1);
229
242
  @cnvs-base-palette-red-50: oklch(0.9533 0.0231 23.95 / 1);
230
243
  @cnvs-base-palette-red-100: oklch(0.9225 0.0394 25.51 / 1);
@@ -238,36 +251,41 @@
238
251
  @cnvs-base-palette-red-900: oklch(0.291 0.118 25.59 / 1);
239
252
  @cnvs-base-palette-red-950: oklch(0.2318 0.0937 24.02 / 1);
240
253
  @cnvs-base-palette-red-975: oklch(0.1988 0.0718 20.63 / 1);
241
- @cnvs-base-palette-red-a25: oklch(0.6289 0.2567 29.11 / 0.04);
242
- @cnvs-base-palette-red-a50: oklch(0.6434 0.2428 30.17 / 0.1);
243
- @cnvs-base-palette-red-a100: oklch(0.6382 0.248 30.42 / 0.16);
244
- @cnvs-base-palette-red-a200: oklch(0.6375 0.2487 30.71 / 0.35);
245
- @cnvs-base-palette-slate-25: oklch(0.9846 0.0018 248.57 / 1);
246
- @cnvs-base-palette-slate-50: oklch(0.9692 0.0035 248.23 / 1);
247
- @cnvs-base-palette-slate-100: oklch(0.9447 0.0053 248.12 / 1);
248
- @cnvs-base-palette-slate-200: oklch(0.917 0.0081 254 / 1);
249
- @cnvs-base-palette-slate-300: oklch(0.856 0.0111 256.85 / 1);
250
- @cnvs-base-palette-slate-400: oklch(0.754 0.0181 256.33 / 1);
251
- @cnvs-base-palette-slate-500: oklch(0.629 0.0281 255.62 / 1);
252
- @cnvs-base-palette-slate-600: oklch(0.5103 0.0255 256.8 / 1);
253
- @cnvs-base-palette-slate-700: oklch(0.45 0.022 255.52 / 1);
254
- @cnvs-base-palette-slate-800: oklch(0.3685 0.0218 256.4 / 1);
255
- @cnvs-base-palette-slate-900: oklch(0.278 0.0156 252.4 / 1);
256
- @cnvs-base-palette-slate-950: oklch(0.2453 0.0136 253.1 / 1);
257
- @cnvs-base-palette-slate-975: oklch(0.18 0.008 248.33 / 1);
258
- @cnvs-base-palette-slate-a25: oklch(0.4688 0.0781 250.43 / 0.03);
259
- @cnvs-base-palette-slate-a50: oklch(0.3343 0.0951 253.3 / 0.05);
260
- @cnvs-base-palette-slate-a100: oklch(0.3337 0.0688 250.79 / 0.09);
261
- @cnvs-base-palette-slate-a200: oklch(0.3057 0.079 256.22 / 0.13);
262
- @cnvs-base-palette-slate-a300: oklch(0.2442 0.0693 257.66 / 0.21);
263
- @cnvs-base-palette-slate-a400: oklch(0.2333 0.0665 257.09 / 0.35);
264
- @cnvs-base-palette-slate-a500: oklch(0.2187 0.0685 255.77 / 0.51);
265
- @cnvs-base-palette-slate-a600: oklch(0.1793 0.0503 254.55 / 0.64);
266
- @cnvs-base-palette-slate-a700: oklch(0.1595 0.0431 250.87 / 0.7);
267
- @cnvs-base-palette-slate-a800: oklch(0.157 0.0349 253.16 / 0.79);
268
- @cnvs-base-palette-slate-a900: oklch(0.1351 0.0244 244.09 / 0.87);
269
- @cnvs-base-palette-slate-a950: oklch(0.1312 0.0198 248.87 / 0.9);
270
- @cnvs-base-palette-slate-a975: oklch(0.1168 0.014 231.47 / 0.95);
254
+ @cnvs-base-palette-red-a25: oklch(0.6329 0.253 30.1 / 0.0431);
255
+ @cnvs-base-palette-red-a50: oklch(0.6326 0.2533 30.04 / 0.0902);
256
+ @cnvs-base-palette-red-a100: oklch(0.6339 0.2521 30.28 / 0.1529);
257
+ @cnvs-base-palette-red-a200: oklch(0.6361 0.25 30.68 / 0.3451);
258
+ @cnvs-base-palette-red-a300: oklch(0.6347 0.2513 30.42 / 0.5294);
259
+ @cnvs-base-palette-slate-25: oklch(0.9849 0.0029 264.51 / 1);
260
+ @cnvs-base-palette-slate-50: oklch(0.9695 0.0046 258.42 / 1);
261
+ @cnvs-base-palette-slate-100: oklch(0.9442 0.007 248.08 / 1);
262
+ @cnvs-base-palette-slate-150: oklch(0.908 0.011 256.7 / 1);
263
+ @cnvs-base-palette-slate-200: oklch(0.8706 0.0158 257.2 / 1);
264
+ @cnvs-base-palette-slate-300: oklch(0.804 0.0214 254.94 / 1);
265
+ @cnvs-base-palette-slate-400: oklch(0.721 0.024 254.4 / 1);
266
+ @cnvs-base-palette-slate-500: oklch(0.6225 0.0248 254.47 / 1);
267
+ @cnvs-base-palette-slate-600: oklch(0.5099 0.0241 255.01 / 1);
268
+ @cnvs-base-palette-slate-700: oklch(0.44 0.023 255.6 / 1);
269
+ @cnvs-base-palette-slate-800: oklch(0.3147 0.0128 253 / 1);
270
+ @cnvs-base-palette-slate-850: oklch(0.2667 0.011 254.03 / 1);
271
+ @cnvs-base-palette-slate-900: oklch(0.2458 0.0112 254.05 / 1);
272
+ @cnvs-base-palette-slate-950: oklch(0.2202 0.0115 254.08 / 1);
273
+ @cnvs-base-palette-slate-975: oklch(0.1933 0.0102 248.36 / 1);
274
+ @cnvs-base-palette-slate-a25: oklch(0.3276 0.1499 261.85 / 0.0235);
275
+ @cnvs-base-palette-slate-a50: oklch(0.3064 0.1202 259.24 / 0.0471);
276
+ @cnvs-base-palette-slate-a100: oklch(0.3039 0.0952 253.5 / 0.0863);
277
+ @cnvs-base-palette-slate-a150: oklch(0.2742 0.101 257.89 / 0.1373);
278
+ @cnvs-base-palette-slate-a200: oklch(0.2751 0.1026 258.16 / 0.1922);
279
+ @cnvs-base-palette-slate-a300: oklch(0.2639 0.0924 256.67 / 0.2863);
280
+ @cnvs-base-palette-slate-a400: oklch(0.2307 0.0767 255.27 / 0.3922);
281
+ @cnvs-base-palette-slate-a500: oklch(0.1993 0.0626 253.59 / 0.5098);
282
+ @cnvs-base-palette-slate-a600: oklch(0.1704 0.05 251.35 / 0.6353);
283
+ @cnvs-base-palette-slate-a700: oklch(0.1549 0.0434 249.61 / 0.7098);
284
+ @cnvs-base-palette-slate-a800: oklch(0.1165 0.026 238.48 / 0.8235);
285
+ @cnvs-base-palette-slate-a850: oklch(0.1063 0.0237 238.42 / 0.8667);
286
+ @cnvs-base-palette-slate-a900: oklch(0.1055 0.0236 238.48 / 0.8863);
287
+ @cnvs-base-palette-slate-a950: oklch(0.1046 0.0233 238.41 / 0.9098);
288
+ @cnvs-base-palette-slate-a975: oklch(0.1028 0.0214 233.55 / 0.9333);
271
289
  @cnvs-base-palette-teal-25: oklch(0.9827 0.021 200.66 / 1);
272
290
  @cnvs-base-palette-teal-50: oklch(0.9575 0.0424 203.83 / 1);
273
291
  @cnvs-base-palette-teal-100: oklch(0.935 0.046 205.09 / 1);
@@ -281,24 +299,27 @@
281
299
  @cnvs-base-palette-teal-900: oklch(0.3052 0.0529 210.69 / 1);
282
300
  @cnvs-base-palette-teal-950: oklch(0.2425 0.042 210.69 / 1);
283
301
  @cnvs-base-palette-teal-975: oklch(0.2037 0.0354 211.24 / 1);
284
- @cnvs-base-palette-teal-a25: oklch(0.8804 0.1478 200.72 / 0.09);
285
- @cnvs-base-palette-teal-a50: oklch(0.8427 0.1433 206.66 / 0.19);
302
+ @cnvs-base-palette-teal-a25: oklch(0.8768 0.1491 201.26 / 0.0824);
303
+ @cnvs-base-palette-teal-a50: oklch(0.838 0.1438 207.32 / 0.1804);
286
304
  @cnvs-base-palette-teal-a100: oklch(0.7626 0.1316 209.35 / 0.22);
287
- @cnvs-base-palette-teal-a200: oklch(0.7101 0.1219 207.98 / 0.37);
305
+ @cnvs-base-palette-teal-a200: oklch(0.7093 0.1219 208.01 / 0.3686);
306
+ @cnvs-base-palette-teal-a300: oklch(0.644 0.1109 208.68 / 0.5647);
288
307
  @cnvs-base-palette-white-a0: oklch(1 0 0 / 0);
289
- @cnvs-base-palette-white-a25: oklch(1 0 0 / 0.02);
290
- @cnvs-base-palette-white-a50: oklch(1 0 0 / 0.03);
291
- @cnvs-base-palette-white-a100: oklch(1 0 0 / 0.08);
292
- @cnvs-base-palette-white-a200: oklch(1 0 0 / 0.16);
293
- @cnvs-base-palette-white-a300: oklch(1 0 0 / 0.26);
294
- @cnvs-base-palette-white-a400: oklch(1 0 0 / 0.36);
295
- @cnvs-base-palette-white-a500: oklch(1 0 0 / 0.47);
296
- @cnvs-base-palette-white-a600: oklch(1 0 0 / 0.6);
297
- @cnvs-base-palette-white-a700: oklch(1 0 0 / 0.67);
298
- @cnvs-base-palette-white-a800: oklch(1 0 0 / 0.77);
299
- @cnvs-base-palette-white-a900: oklch(1 0 0 / 0.83);
300
- @cnvs-base-palette-white-a950: oklch(1 0 0 / 0.89);
301
- @cnvs-base-palette-white-a975: oklch(1 0 0 / 0.95);
308
+ @cnvs-base-palette-white-a25: oklch(1 0 89.88 / 0.023);
309
+ @cnvs-base-palette-white-a50: oklch(1 0 89.88 / 0.045);
310
+ @cnvs-base-palette-white-a100: oklch(1 0 89.88 / 0.118);
311
+ @cnvs-base-palette-white-a150: oklch(1 0 89.88 / 0.1841);
312
+ @cnvs-base-palette-white-a200: oklch(1 0 89.88 / 0.25);
313
+ @cnvs-base-palette-white-a300: oklch(1 0 89.88 / 0.374);
314
+ @cnvs-base-palette-white-a400: oklch(1 0 89.88 / 0.489);
315
+ @cnvs-base-palette-white-a500: oklch(1 0 89.88 / 0.591);
316
+ @cnvs-base-palette-white-a600: oklch(1 0 89.88 / 0.698);
317
+ @cnvs-base-palette-white-a700: oklch(1 0 89.88 / 0.788);
318
+ @cnvs-base-palette-white-a800: oklch(1 0 89.88 / 0.861);
319
+ @cnvs-base-palette-white-a850: oklch(1 0 89.88 / 0.8909);
320
+ @cnvs-base-palette-white-a900: oklch(1 0 89.88 / 0.921);
321
+ @cnvs-base-palette-white-a950: oklch(1 0 89.88 / 0.947);
322
+ @cnvs-base-palette-white-a975: oklch(1 0 89.88 / 0.974);
302
323
  @cnvs-base-palette-cinnamon-100: #ffefee;
303
324
  @cnvs-base-palette-cinnamon-200: #FCC9C5;
304
325
  @cnvs-base-palette-cinnamon-300: #ff867d;
@@ -486,13 +507,33 @@
486
507
  @cnvs-base-size-1200: 6rem; // 96px / 6rem
487
508
  @cnvs-base-size-1300: 6.5rem; // 104px / 6.5rem
488
509
  @cnvs-base-size-1400: 7rem; // 112px / 7rem
489
- @cnvs-base-font-family-50: "Roboto"; // Default font-family
490
- @cnvs-base-font-family-100: "Roboto Mono";
510
+ @cnvs-base-size-1600: 8rem; // 128px / 8rem
511
+ @cnvs-base-size-1800: 9rem; // 144px / 9rem
512
+ @cnvs-base-size-2000: 10rem; // 160px / 10rem
513
+ @cnvs-base-size-2400: 12rem; // 192px / 12rem
514
+ @cnvs-base-size-2800: 14rem; // 224px / 14rem
515
+ @cnvs-base-size-3200: 16rem; // 256px / 16rem
516
+ @cnvs-base-font-family-0: "-apple-system, BlinkMacSystemFont, "Sana Serif", Roboto, Inter, system-ui, Avenir, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif";
517
+ @cnvs-base-font-family-50: "Sana Sans LCG 05 VF";
518
+ @cnvs-base-font-family-100: "IBM Plex Mono";
491
519
  @cnvs-base-font-family-200: "Noto Sans";
492
520
  @cnvs-base-font-weight-300: 300;
493
521
  @cnvs-base-font-weight-400: 400;
494
522
  @cnvs-base-font-weight-500: 500;
523
+ @cnvs-base-font-weight-600: 600;
495
524
  @cnvs-base-font-weight-700: 700;
525
+ @cnvs-base-letter-spacing-1: 0.008125rem;
526
+ @cnvs-base-letter-spacing-2: 0.0075rem;
527
+ @cnvs-base-letter-spacing-3: 0.006875rem;
528
+ @cnvs-base-letter-spacing-4: 0.00625rem;
529
+ @cnvs-base-letter-spacing-5: 0rem;
530
+ @cnvs-base-letter-spacing-6: -0.00625rem;
531
+ @cnvs-base-letter-spacing-7: -0.01875rem;
532
+ @cnvs-base-letter-spacing-8: -0.02125rem;
533
+ @cnvs-base-letter-spacing-9: -0.02375rem;
534
+ @cnvs-base-letter-spacing-10: -0.02875rem;
535
+ @cnvs-base-letter-spacing-11: -0.03375rem;
536
+ @cnvs-base-letter-spacing-12: -0.03875rem;
496
537
  @cnvs-base-letter-spacing-50: 0.025rem;
497
538
  @cnvs-base-letter-spacing-100: 0.02rem;
498
539
  @cnvs-base-letter-spacing-150: 0.015rem;
package/less/brand/_variables.less CHANGED
@@ -1,7 +1,8 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 22:28:08 GMT
3
+ // Generated on Thu, 25 Jun 2026 23:45:09 GMT
4
4
 
5
+ @cnvs-brand-positive-a300: @cnvs-base-palette-green-a300;
5
6
  @cnvs-brand-positive-a200: @cnvs-base-palette-green-a200;
6
7
  @cnvs-brand-positive-a100: @cnvs-base-palette-green-a100;
7
8
  @cnvs-brand-positive-a50: @cnvs-base-palette-green-a50;
@@ -11,7 +12,7 @@
11
12
  @cnvs-brand-positive-900: @cnvs-base-palette-green-900;
12
13
  @cnvs-brand-positive-800: @cnvs-base-palette-green-800;
13
14
  @cnvs-brand-positive-700: @cnvs-base-palette-green-700;
14
- @cnvs-brand-positive-600: @cnvs-base-palette-green-600; // Base success color. Use fg.inverse on this.
15
+ @cnvs-brand-positive-600: @cnvs-base-palette-green-600; // Base success color. Use fg.inverse instead
15
16
  @cnvs-brand-positive-500: @cnvs-base-palette-green-500;
16
17
  @cnvs-brand-positive-400: @cnvs-base-palette-green-400;
17
18
  @cnvs-brand-positive-300: @cnvs-base-palette-green-300;
@@ -19,6 +20,7 @@
19
20
  @cnvs-brand-positive-100: @cnvs-base-palette-green-100;
20
21
  @cnvs-brand-positive-50: @cnvs-base-palette-green-50;
21
22
  @cnvs-brand-positive-25: @cnvs-base-palette-green-25;
23
+ @cnvs-brand-caution-a300: @cnvs-base-palette-amber-a300;
22
24
  @cnvs-brand-caution-a200: @cnvs-base-palette-amber-a200;
23
25
  @cnvs-brand-caution-a100: @cnvs-base-palette-amber-a100;
24
26
  @cnvs-brand-caution-a50: @cnvs-base-palette-amber-a50;
@@ -30,12 +32,13 @@
30
32
  @cnvs-brand-caution-700: @cnvs-base-palette-amber-700;
31
33
  @cnvs-brand-caution-600: @cnvs-base-palette-amber-600;
32
34
  @cnvs-brand-caution-500: @cnvs-base-palette-amber-500;
33
- @cnvs-brand-caution-400: @cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default on this.
35
+ @cnvs-brand-caution-400: @cnvs-base-palette-amber-400; // Base caution color (amber.400). Use fg.contrast.default instead
34
36
  @cnvs-brand-caution-300: @cnvs-base-palette-amber-300;
35
37
  @cnvs-brand-caution-200: @cnvs-base-palette-amber-200;
36
38
  @cnvs-brand-caution-100: @cnvs-base-palette-amber-100;
37
39
  @cnvs-brand-caution-50: @cnvs-base-palette-amber-50;
38
40
  @cnvs-brand-caution-25: @cnvs-base-palette-amber-25;
41
+ @cnvs-brand-critical-a300: @cnvs-base-palette-red-a300;
39
42
  @cnvs-brand-critical-a200: @cnvs-base-palette-red-a200;
40
43
  @cnvs-brand-critical-a100: @cnvs-base-palette-red-a100;
41
44
  @cnvs-brand-critical-a50: @cnvs-base-palette-red-a50;
@@ -45,7 +48,7 @@
45
48
  @cnvs-brand-critical-900: @cnvs-base-palette-red-900;
46
49
  @cnvs-brand-critical-800: @cnvs-base-palette-red-800;
47
50
  @cnvs-brand-critical-700: @cnvs-base-palette-red-700;
48
- @cnvs-brand-critical-600: @cnvs-base-palette-red-600; // Base critical color. Use fg.inverse on this.
51
+ @cnvs-brand-critical-600: @cnvs-base-palette-red-600; // Base critical color. Use fg.inverse instead
49
52
  @cnvs-brand-critical-500: @cnvs-base-palette-red-500;
50
53
  @cnvs-brand-critical-400: @cnvs-base-palette-red-400;
51
54
  @cnvs-brand-critical-300: @cnvs-base-palette-red-300;
@@ -57,19 +60,21 @@
57
60
  @cnvs-brand-common-alert-inner: @cnvs-base-palette-amber-400;
58
61
  @cnvs-brand-common-error-inner: @cnvs-base-palette-red-500;
59
62
  @cnvs-brand-common-focus-outline: @cnvs-base-palette-blue-500;
60
- @cnvs-brand-neutral-a975: @cnvs-base-palette-slate-a975;
61
- @cnvs-brand-neutral-a950: @cnvs-base-palette-slate-a950;
62
- @cnvs-brand-neutral-a900: @cnvs-base-palette-slate-a900;
63
- @cnvs-brand-neutral-a800: @cnvs-base-palette-slate-a800;
64
- @cnvs-brand-neutral-a700: @cnvs-base-palette-slate-a700;
65
- @cnvs-brand-neutral-a600: @cnvs-base-palette-slate-a600;
66
- @cnvs-brand-neutral-a500: @cnvs-base-palette-slate-a500;
67
- @cnvs-brand-neutral-a400: @cnvs-base-palette-slate-a400;
68
- @cnvs-brand-neutral-a300: @cnvs-base-palette-slate-a300;
69
- @cnvs-brand-neutral-a200: @cnvs-base-palette-slate-a200;
70
- @cnvs-brand-neutral-a100: @cnvs-base-palette-slate-a100;
71
- @cnvs-brand-neutral-a50: @cnvs-base-palette-slate-a50;
72
- @cnvs-brand-neutral-a25: @cnvs-base-palette-slate-a25;
63
+ @cnvs-brand-neutral-a975: @cnvs-base-palette-neutral-a975;
64
+ @cnvs-brand-neutral-a950: @cnvs-base-palette-neutral-a950;
65
+ @cnvs-brand-neutral-a900: @cnvs-base-palette-neutral-a900;
66
+ @cnvs-brand-neutral-a850: @cnvs-base-palette-neutral-a850;
67
+ @cnvs-brand-neutral-a800: @cnvs-base-palette-neutral-a800;
68
+ @cnvs-brand-neutral-a700: @cnvs-base-palette-neutral-a700;
69
+ @cnvs-brand-neutral-a600: @cnvs-base-palette-neutral-a600;
70
+ @cnvs-brand-neutral-a500: @cnvs-base-palette-neutral-a500;
71
+ @cnvs-brand-neutral-a400: @cnvs-base-palette-neutral-a400;
72
+ @cnvs-brand-neutral-a300: @cnvs-base-palette-neutral-a300;
73
+ @cnvs-brand-neutral-a200: @cnvs-base-palette-neutral-a200;
74
+ @cnvs-brand-neutral-a150: @cnvs-base-palette-neutral-a150;
75
+ @cnvs-brand-neutral-a100: @cnvs-base-palette-neutral-a100;
76
+ @cnvs-brand-neutral-a50: @cnvs-base-palette-neutral-a50;
77
+ @cnvs-brand-neutral-a25: @cnvs-base-palette-neutral-a25;
73
78
  @cnvs-brand-neutral-light: @cnvs-base-palette-neutral-200;
74
79
  @cnvs-brand-neutral-lighter: @cnvs-base-palette-neutral-50;
75
80
  @cnvs-brand-neutral-accent: @cnvs-base-palette-neutral-0;
@@ -77,19 +82,21 @@
77
82
  @cnvs-brand-neutral-dark: @cnvs-base-palette-neutral-700;
78
83
  @cnvs-brand-neutral-base: @cnvs-base-palette-neutral-600;
79
84
  @cnvs-brand-neutral-lightest: @cnvs-base-palette-neutral-25;
80
- @cnvs-brand-neutral-975: @cnvs-base-palette-slate-975;
81
- @cnvs-brand-neutral-950: @cnvs-base-palette-slate-950;
82
- @cnvs-brand-neutral-900: @cnvs-base-palette-slate-900;
83
- @cnvs-brand-neutral-800: @cnvs-base-palette-slate-800;
84
- @cnvs-brand-neutral-700: @cnvs-base-palette-slate-700;
85
- @cnvs-brand-neutral-600: @cnvs-base-palette-slate-600;
86
- @cnvs-brand-neutral-500: @cnvs-base-palette-slate-500;
87
- @cnvs-brand-neutral-400: @cnvs-base-palette-slate-400;
88
- @cnvs-brand-neutral-300: @cnvs-base-palette-slate-300;
89
- @cnvs-brand-neutral-200: @cnvs-base-palette-slate-200;
90
- @cnvs-brand-neutral-100: @cnvs-base-palette-slate-100;
91
- @cnvs-brand-neutral-50: @cnvs-base-palette-slate-50;
92
- @cnvs-brand-neutral-25: @cnvs-base-palette-slate-25;
85
+ @cnvs-brand-neutral-975: @cnvs-base-palette-neutral-975;
86
+ @cnvs-brand-neutral-950: @cnvs-base-palette-neutral-950;
87
+ @cnvs-brand-neutral-900: @cnvs-base-palette-neutral-900;
88
+ @cnvs-brand-neutral-850: @cnvs-base-palette-neutral-850;
89
+ @cnvs-brand-neutral-800: @cnvs-base-palette-neutral-800;
90
+ @cnvs-brand-neutral-700: @cnvs-base-palette-neutral-700;
91
+ @cnvs-brand-neutral-600: @cnvs-base-palette-neutral-600;
92
+ @cnvs-brand-neutral-500: @cnvs-base-palette-neutral-500;
93
+ @cnvs-brand-neutral-400: @cnvs-base-palette-neutral-400;
94
+ @cnvs-brand-neutral-300: @cnvs-base-palette-neutral-300;
95
+ @cnvs-brand-neutral-200: @cnvs-base-palette-neutral-200;
96
+ @cnvs-brand-neutral-150: @cnvs-base-palette-neutral-150;
97
+ @cnvs-brand-neutral-100: @cnvs-base-palette-neutral-100;
98
+ @cnvs-brand-neutral-50: @cnvs-base-palette-neutral-50;
99
+ @cnvs-brand-neutral-25: @cnvs-base-palette-neutral-25;
93
100
  @cnvs-brand-success-light: @cnvs-base-palette-green-200;
94
101
  @cnvs-brand-success-accent: @cnvs-base-palette-neutral-0;
95
102
  @cnvs-brand-success-darkest: @cnvs-base-palette-green-800;
@@ -111,6 +118,7 @@
111
118
  @cnvs-brand-error-dark: @cnvs-base-palette-red-700;
112
119
  @cnvs-brand-error-lightest: @cnvs-base-palette-red-25;
113
120
  @cnvs-brand-error-base: @cnvs-base-palette-red-600;
121
+ @cnvs-brand-primary-a300: @cnvs-base-palette-blue-a300;
114
122
  @cnvs-brand-primary-a200: @cnvs-base-palette-blue-a200;
115
123
  @cnvs-brand-primary-a100: @cnvs-base-palette-blue-a100;
116
124
  @cnvs-brand-primary-a50: @cnvs-base-palette-blue-a50;
@@ -127,7 +135,7 @@
127
135
  @cnvs-brand-primary-900: @cnvs-base-palette-blue-900;
128
136
  @cnvs-brand-primary-800: @cnvs-base-palette-blue-800;
129
137
  @cnvs-brand-primary-700: @cnvs-base-palette-blue-700;
130
- @cnvs-brand-primary-600: @cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse on this.
138
+ @cnvs-brand-primary-600: @cnvs-base-palette-blue-600; // Base primary color. Use fg.inverse instead
131
139
  @cnvs-brand-primary-500: @cnvs-base-palette-blue-500;
132
140
  @cnvs-brand-primary-400: @cnvs-base-palette-blue-400;
133
141
  @cnvs-brand-primary-300: @cnvs-base-palette-blue-300;
package/less/component/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 25 Mar 2026 22:28:08 GMT
3
+ // Generated on Thu, 25 Jun 2026 23:45:09 GMT
4
4
 
5
5
  @cnvs-component-system-icon-color-background: @cnvs-base-palette-neutral-a0; // Component level color used on the background of system icons
6
6
  @cnvs-component-system-icon-color-fill: @cnvs-base-palette-neutral-800; // Component level color used on the fill areas of system icons