@acorex/styles 21.0.3-next.32 → 21.0.3-next.33

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 (82) hide show
  1. package/base/_preflight.scss +421 -0
  2. package/base/index.scss +15 -0
  3. package/components/{_action-item.css → _action-item.scss} +35 -13
  4. package/components/{_actionsheet.css → _actionsheet.scss} +8 -15
  5. package/components/{_check-box.css → _check-box.scss} +24 -8
  6. package/components/{_conversation-picker-popup.css → _conversation-picker-popup.scss} +1 -0
  7. package/components/{_drop-down.css → _drop-down.scss} +17 -12
  8. package/components/_editor-container.scss +293 -0
  9. package/components/_general-button.scss +75 -0
  10. package/components/{_list.css → _list.scss} +56 -25
  11. package/components/_radio.scss +51 -0
  12. package/components/{_ripple.css → _ripple.scss} +8 -8
  13. package/components/{_table.css → _table.scss} +23 -20
  14. package/components/{_uploader.css → _uploader.scss} +20 -1
  15. package/components/index.scss +12 -0
  16. package/generators/index.js +1 -0
  17. package/generators/tailwind-class-generator.js +68 -0
  18. package/icons/fontawesome/_variables.scss +227 -0
  19. package/icons/fontawesome/index.scss +714 -0
  20. package/icons/huge/huge-bulk/_variables.scss +209 -0
  21. package/icons/huge/huge-bulk/index.scss +656 -0
  22. package/icons/huge/huge-duotone/_variables.scss +209 -0
  23. package/icons/huge/huge-duotone/index.scss +657 -0
  24. package/icons/huge/huge-solid-rounded/_variables.scss +209 -0
  25. package/icons/huge/huge-solid-rounded/index.scss +643 -0
  26. package/icons/huge/huge-solid-sharp/_variables.scss +209 -0
  27. package/icons/huge/huge-solid-sharp/index.scss +656 -0
  28. package/icons/huge/huge-solid-standard/_variables.scss +209 -0
  29. package/icons/huge/huge-solid-standard/index.scss +656 -0
  30. package/icons/huge/huge-stroke-rounded/_variables.scss +209 -0
  31. package/icons/huge/huge-stroke-rounded/index.scss +656 -0
  32. package/icons/huge/huge-stroke-sharp/_variables.scss +209 -0
  33. package/icons/huge/huge-stroke-sharp/index.scss +656 -0
  34. package/icons/huge/huge-stroke-standard/_variables.scss +209 -0
  35. package/icons/huge/huge-stroke-standard/index.scss +656 -0
  36. package/icons/huge/huge-twotone/_variables.scss +209 -0
  37. package/icons/huge/huge-twotone/index.scss +656 -0
  38. package/icons/material/_variables.scss +227 -0
  39. package/icons/material/index.scss +718 -0
  40. package/index.scss +7 -0
  41. package/mixins/_editor-looks.scss +32 -0
  42. package/mixins/_media.scss +73 -0
  43. package/mixins/_scroll-bar.scss +35 -0
  44. package/mixins/_util.scss +19 -0
  45. package/mixins/index.scss +4 -0
  46. package/package.json +5 -8
  47. package/tailwind-base.js +4 -0
  48. package/themes/default.scss +74 -0
  49. package/utils/_theme-generator.scss +238 -0
  50. package/utils/_utils.scss +278 -0
  51. package/utils/index.scss +2 -0
  52. package/variables/_colors.scss +14 -0
  53. package/variables/_looks.scss +1 -0
  54. package/variables/index.scss +2 -0
  55. package/components/_editor-container.css +0 -69
  56. package/components/_general-button.css +0 -62
  57. package/components/_radio.css +0 -33
  58. package/components/index.css +0 -12
  59. package/icons/fontawesome/_variables.css +0 -229
  60. package/icons/fontawesome/index.css +0 -557
  61. package/icons/huge/huge-bulk/_variables.css +0 -211
  62. package/icons/huge/huge-bulk/index.css +0 -522
  63. package/icons/huge/huge-duotone/_variables.css +0 -211
  64. package/icons/huge/huge-duotone/index.css +0 -519
  65. package/icons/huge/huge-solid-rounded/_variables.css +0 -211
  66. package/icons/huge/huge-solid-rounded/index.css +0 -519
  67. package/icons/huge/huge-solid-sharp/_variables.css +0 -213
  68. package/icons/huge/huge-solid-sharp/index.css +0 -519
  69. package/icons/huge/huge-solid-standard/_variables.css +0 -211
  70. package/icons/huge/huge-solid-standard/index.css +0 -518
  71. package/icons/huge/huge-stroke-rounded/_variables.css +0 -211
  72. package/icons/huge/huge-stroke-rounded/index.css +0 -517
  73. package/icons/huge/huge-stroke-sharp/_variables.css +0 -142
  74. package/icons/huge/huge-stroke-sharp/index.css +0 -517
  75. package/icons/huge/huge-stroke-standard/_variables.css +0 -141
  76. package/icons/huge/huge-stroke-standard/index.css +0 -517
  77. package/icons/huge/huge-twotone/_variables.css +0 -211
  78. package/icons/huge/huge-twotone/index.css +0 -518
  79. package/icons/material/_variables.css +0 -229
  80. package/icons/material/index.css +0 -575
  81. package/index.css +0 -2
  82. package/themes/default.css +0 -3532
package/themes/default.css DELETED
@@ -1,3532 +0,0 @@
1
- @import 'tailwindcss';
2
- @import 'tw-animate';
3
-
4
- @custom-variant dark (&:where(.ax-dark, .ax-dark *):not(:where(.ax-light, .ax-light *)));
5
-
6
- @custom-variant hover (&:hover);
7
-
8
- input:-webkit-autofill,
9
- input:-webkit-autofill:hover,
10
- input:-webkit-autofill:focus,
11
- textarea:-webkit-autofill,
12
- select:-webkit-autofill {
13
- -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
14
- -webkit-text-fill-color: inherit !important;
15
- transition: background-color 9999s ease-in-out 0s;
16
- }
17
-
18
- @layer base {
19
- * {
20
- border-color: var(--color-border-default);
21
- scrollbar-width: thin;
22
- scrollbar-color: var(--ax-sys-scroller-thumb-color) var(--ax-sys-scroller-track-color);
23
-
24
- ::-webkit-scrollbar {
25
- width: var(--ax-sys-scroller-size);
26
- height: var(--ax-sys-scroller-size);
27
- }
28
-
29
- ::-webkit-scrollbar-track {
30
- background: var(--ax-sys-scroller-track-color);
31
- border-radius: var(--ax-sys-scroller-size-radius);
32
- }
33
-
34
- ::-webkit-scrollbar-thumb {
35
- background: var(--ax-sys-scroller-thumb-color);
36
- border-radius: var(--ax-sys-scroller-size-radius);
37
- }
38
- }
39
- }
40
-
41
- html {
42
- background-color: rgba(var(--ax-sys-color-lightest-surface));
43
- color: rgba(var(--ax-sys-color-on-lightest-surface));
44
- }
45
-
46
- html.ax-dark {
47
- background-color: rgba(var(--ax-sys-color-darkest-surface));
48
- color: rgba(var(--ax-sys-color-on-darkest-surface));
49
- }
50
-
51
- .ax-xs {
52
- --ax-sys-size: ax-xs;
53
- }
54
- .ax-sm {
55
- --ax-sys-size: ax-sm;
56
- }
57
- .ax-md {
58
- --ax-sys-size: ax-md;
59
- }
60
- .ax-lg {
61
- --ax-sys-size: ax-lg;
62
- }
63
- .ax-xl {
64
- --ax-sys-size: ax-xl;
65
- }
66
-
67
- :root {
68
- --ax-sys-theme-isDark: 0;
69
- --ax-sys-icon-size: 100%;
70
- --ax-sys-icon-weight: 400;
71
- --ax-sys-size-base: 2.5rem;
72
- --ax-overlay-full-width: 93;
73
- --ax-sys-icon-width: inherit;
74
- --ax-sys-icon-height: inherit;
75
- --ax-sys-body-font-size: 1rem;
76
- --ax-sys-border-radius-base: 0.5rem;
77
- --ax-sys-spacing-base: 0.25rem;
78
- --ax-sys-text-xs-base: 0.75rem;
79
- --ax-sys-text-sm-base: 0.875rem;
80
- --ax-sys-text-lg-base: 1.125rem;
81
- --ax-sys-text-xl-base: 1.25rem;
82
- --ax-sys-leading-3-base: 0.75rem;
83
- --ax-sys-leading-4-base: 1rem;
84
- --ax-sys-leading-5-base: 1.25rem;
85
- --ax-sys-leading-6-base: 1.5rem;
86
-
87
- /* Default Tailwind scale (matches ax-md) — used when no ax-* size class is applied */
88
- --spacing: var(--ax-sys-spacing-base);
89
- --text-xs: var(--ax-sys-text-xs-base);
90
- --text-sm: var(--ax-sys-text-sm-base);
91
- --text-base: var(--ax-sys-body-font-size);
92
- --text-lg: var(--ax-sys-text-lg-base);
93
- --text-xl: var(--ax-sys-text-xl-base);
94
- --leading-3: var(--ax-sys-leading-3-base);
95
- --leading-4: var(--ax-sys-leading-4-base);
96
- --leading-5: var(--ax-sys-leading-5-base);
97
- --leading-6: var(--ax-sys-leading-6-base);
98
-
99
- --ax-sys-border-radius: var(--ax-sys-border-radius-base);
100
- --ax-sys-transition-duration: 150ms;
101
- --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
102
-
103
- --ax-sys-scroller-size: 5px;
104
- --ax-sys-scroller-size-radius: 3px;
105
- --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
106
- --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
107
-
108
- --ax-sys-color-lightest-surface: 255, 255, 255;
109
- --ax-sys-color-on-lightest-surface: 10, 10, 10;
110
- --ax-sys-color-border-lightest-surface: 233, 233, 233;
111
-
112
- --ax-sys-color-lighter-surface: 250, 250, 250;
113
- --ax-sys-color-on-lighter-surface: 10, 10, 10;
114
- --ax-sys-color-border-lighter-surface: 228, 228, 228;
115
-
116
- --ax-sys-color-light-surface: 245, 245, 245;
117
- --ax-sys-color-on-light-surface: 10, 10, 10;
118
- --ax-sys-color-border-light-surface: 223, 223, 223;
119
-
120
- --ax-sys-color-surface: 240, 240, 241;
121
- --ax-sys-color-on-surface: 10, 10, 10;
122
- --ax-sys-color-border-surface: 218, 218, 218;
123
-
124
- --ax-sys-color-dark-surface: 235, 235, 236;
125
- --ax-sys-color-on-dark-surface: 10, 10, 10;
126
- --ax-sys-color-border-dark-surface: 213, 213, 213;
127
-
128
- --ax-sys-color-darker-surface: 230, 230, 231;
129
- --ax-sys-color-on-darker-surface: 10, 10, 10;
130
- --ax-sys-color-border-darker-surface: 208, 208, 208;
131
-
132
- --ax-sys-color-darkest-surface: 224, 224, 225;
133
- --ax-sys-color-on-darkest-surface: 10, 10, 10;
134
- --ax-sys-color-border-darkest-surface: 202, 202, 202;
135
-
136
- --ax-sys-color-primary-50: 231, 246, 255;
137
- --ax-sys-color-primary-100: 211, 234, 255;
138
- --ax-sys-color-primary-200: 183, 217, 255;
139
- --ax-sys-color-primary-300: 138, 189, 255;
140
- --ax-sys-color-primary-400: 77, 151, 255;
141
- --ax-sys-color-primary-500: 43, 127, 255;
142
- --ax-sys-color-primary-600: 20, 108, 235;
143
- --ax-sys-color-primary-700: 0, 86, 210;
144
- --ax-sys-color-primary-800: 12, 70, 182;
145
- --ax-sys-color-primary-900: 29, 64, 142;
146
- --ax-sys-color-primary-950: 14, 34, 84;
147
-
148
- --ax-sys-color-secondary-50: 234, 243, 255;
149
- --ax-sys-color-secondary-100: 219, 229, 247;
150
- --ax-sys-color-secondary-200: 199, 208, 226;
151
- --ax-sys-color-secondary-300: 168, 177, 194;
152
- --ax-sys-color-secondary-400: 130, 138, 154;
153
- --ax-sys-color-secondary-500: 106, 114, 130;
154
- --ax-sys-color-secondary-600: 93, 101, 117;
155
- --ax-sys-color-secondary-700: 78, 86, 101;
156
- --ax-sys-color-secondary-800: 66, 73, 87;
157
- --ax-sys-color-secondary-900: 59, 64, 74;
158
- --ax-sys-color-secondary-950: 35, 38, 45;
159
-
160
- --ax-sys-color-success-50: 207, 255, 232;
161
- --ax-sys-color-success-100: 162, 255, 211;
162
- --ax-sys-color-success-200: 111, 255, 188;
163
- --ax-sys-color-success-300: 86, 233, 167;
164
- --ax-sys-color-success-400: 48, 206, 141;
165
- --ax-sys-color-success-500: 1, 188, 125;
166
- --ax-sys-color-success-600: 0, 165, 104;
167
- --ax-sys-color-success-700: 0, 136, 81;
168
- --ax-sys-color-success-800: 22, 110, 67;
169
- --ax-sys-color-success-900: 43, 89, 61;
170
- --ax-sys-color-success-950: 23, 41, 28;
171
-
172
- --ax-sys-color-warning-50: 255, 244, 220;
173
- --ax-sys-color-warning-100: 255, 234, 201;
174
- --ax-sys-color-warning-200: 255, 221, 174;
175
- --ax-sys-color-warning-300: 255, 198, 128;
176
- --ax-sys-color-warning-400: 255, 168, 40;
177
- --ax-sys-color-warning-500: 253, 154, 1;
178
- --ax-sys-color-warning-600: 224, 127, 0;
179
- --ax-sys-color-warning-700: 181, 100, 0;
180
- --ax-sys-color-warning-800: 144, 81, 20;
181
- --ax-sys-color-warning-900: 110, 71, 40;
182
- --ax-sys-color-warning-950: 44, 28, 18;
183
-
184
- --ax-sys-color-danger-50: 255, 236, 237;
185
- --ax-sys-color-danger-100: 255, 220, 221;
186
- --ax-sys-color-danger-200: 255, 196, 198;
187
- --ax-sys-color-danger-300: 255, 155, 162;
188
- --ax-sys-color-danger-400: 255, 89, 113;
189
- --ax-sys-color-danger-500: 255, 32, 86;
190
- --ax-sys-color-danger-600: 232, 0, 68;
191
- --ax-sys-color-danger-700: 195, 0, 53;
192
- --ax-sys-color-danger-800: 159, 23, 47;
193
- --ax-sys-color-danger-900: 122, 44, 49;
194
- --ax-sys-color-danger-950: 61, 27, 27;
195
-
196
- --ax-sys-color-surface-50: 250, 250, 250;
197
- --ax-sys-color-surface-100: 244, 244, 244;
198
- --ax-sys-color-surface-200: 235, 235, 235;
199
- --ax-sys-color-surface-300: 222, 222, 222;
200
- --ax-sys-color-surface-400: 205, 205, 205;
201
- --ax-sys-color-surface-500: 194, 194, 194;
202
- --ax-sys-color-surface-600: 165, 165, 165;
203
- --ax-sys-color-surface-700: 131, 131, 131;
204
- --ax-sys-color-surface-800: 104, 104, 104;
205
- --ax-sys-color-surface-900: 83, 83, 83;
206
- --ax-sys-color-surface-950: 31, 31, 31;
207
-
208
- --ax-sys-color-accent-50: 208, 255, 255;
209
- --ax-sys-color-accent-100: 181, 251, 255;
210
- --ax-sys-color-accent-200: 135, 243, 255;
211
- --ax-sys-color-accent-300: 85, 225, 255;
212
- --ax-sys-color-accent-400: 48, 199, 229;
213
- --ax-sys-color-accent-500: 6, 182, 212;
214
- --ax-sys-color-accent-600: 0, 158, 188;
215
- --ax-sys-color-accent-700: 0, 129, 156;
216
- --ax-sys-color-accent-800: 22, 105, 126;
217
- --ax-sys-color-accent-900: 43, 85, 98;
218
- --ax-sys-color-accent-950: 22, 38, 44;
219
-
220
- --ax-sys-color-accent1-50: 255, 236, 255;
221
- --ax-sys-color-accent1-100: 255, 218, 255;
222
- --ax-sys-color-accent1-200: 255, 192, 255;
223
- --ax-sys-color-accent1-300: 253, 149, 255;
224
- --ax-sys-color-accent1-400: 238, 92, 255;
225
- --ax-sys-color-accent1-500: 217, 70, 239;
226
- --ax-sys-color-accent1-600: 195, 42, 216;
227
- --ax-sys-color-accent1-700: 167, 0, 189;
228
- --ax-sys-color-accent1-800: 138, 24, 155;
229
- --ax-sys-color-accent1-900: 107, 45, 118;
230
- --ax-sys-color-accent1-950: 52, 26, 56;
231
-
232
- --ax-sys-color-accent2-50: 255, 240, 226;
233
- --ax-sys-color-accent2-100: 255, 228, 207;
234
- --ax-sys-color-accent2-200: 255, 209, 179;
235
- --ax-sys-color-accent2-300: 255, 178, 132;
236
- --ax-sys-color-accent2-400: 255, 134, 54;
237
- --ax-sys-color-accent2-500: 249, 115, 22;
238
- --ax-sys-color-accent2-600: 223, 91, 0;
239
- --ax-sys-color-accent2-700: 187, 68, 0;
240
- --ax-sys-color-accent2-800: 151, 58, 18;
241
- --ax-sys-color-accent2-900: 115, 57, 37;
242
- --ax-sys-color-accent2-950: 52, 26, 19;
243
-
244
- --ax-sys-color-accent3-50: 198, 255, 251;
245
- --ax-sys-color-accent3-100: 143, 255, 244;
246
- --ax-sys-color-accent3-200: 114, 250, 231;
247
- --ax-sys-color-accent3-300: 90, 229, 209;
248
- --ax-sys-color-accent3-400: 54, 201, 183;
249
- --ax-sys-color-accent3-500: 20, 184, 166;
250
- --ax-sys-color-accent3-600: 0, 161, 144;
251
- --ax-sys-color-accent3-700: 0, 132, 117;
252
- --ax-sys-color-accent3-800: 23, 108, 95;
253
- --ax-sys-color-accent3-900: 43, 87, 79;
254
- --ax-sys-color-accent3-950: 23, 40, 36;
255
-
256
- --ax-sys-color-accent4-50: 237, 242, 255;
257
- --ax-sys-color-accent4-100: 220, 228, 255;
258
- --ax-sys-color-accent4-200: 196, 207, 255;
259
- --ax-sys-color-accent4-300: 161, 173, 255;
260
- --ax-sys-color-accent4-400: 119, 126, 255;
261
- --ax-sys-color-accent4-500: 99, 102, 241;
262
- --ax-sys-color-accent4-600: 86, 85, 223;
263
- --ax-sys-color-accent4-700: 71, 64, 201;
264
- --ax-sys-color-accent4-800: 59, 52, 175;
265
- --ax-sys-color-accent4-900: 52, 53, 137;
266
- --ax-sys-color-accent4-950: 31, 35, 83;
267
-
268
- --ax-sys-color-accent5-50: 255, 235, 248;
269
- --ax-sys-color-accent5-100: 255, 219, 237;
270
- --ax-sys-color-accent5-200: 255, 194, 222;
271
- --ax-sys-color-accent5-300: 255, 152, 200;
272
- --ax-sys-color-accent5-400: 255, 94, 172;
273
- --ax-sys-color-accent5-500: 236, 72, 153;
274
- --ax-sys-color-accent5-600: 213, 48, 134;
275
- --ax-sys-color-accent5-700: 185, 0, 111;
276
- --ax-sys-color-accent5-800: 156, 23, 92;
277
- --ax-sys-color-accent5-900: 119, 43, 77;
278
- --ax-sys-color-accent5-950: 59, 26, 39;
279
-
280
- --ax-sys-color-accent6-50: 250, 241, 236;
281
- --ax-sys-color-accent6-100: 235, 227, 221;
282
- --ax-sys-color-accent6-200: 214, 206, 201;
283
- --ax-sys-color-accent6-300: 183, 175, 170;
284
- --ax-sys-color-accent6-400: 144, 137, 132;
285
- --ax-sys-color-accent6-500: 120, 113, 108;
286
- --ax-sys-color-accent6-600: 107, 100, 95;
287
- --ax-sys-color-accent6-700: 91, 84, 80;
288
- --ax-sys-color-accent6-800: 78, 72, 68;
289
- --ax-sys-color-accent6-900: 67, 63, 60;
290
- --ax-sys-color-accent6-950: 41, 38, 36;
291
-
292
- --ax-sys-color-primary-lightest-surface: 211, 234, 255;
293
- --ax-sys-color-on-primary-lightest-surface: 29, 48, 64;
294
- --ax-sys-color-border-primary-lightest-surface: 175, 217, 255;
295
-
296
- --ax-sys-color-primary-lighter-surface: 183, 217, 255;
297
- --ax-sys-color-on-primary-lighter-surface: 18, 47, 77;
298
- --ax-sys-color-border-primary-lighter-surface: 147, 198, 255;
299
-
300
- --ax-sys-color-primary-light-surface: 138, 189, 255;
301
- --ax-sys-color-on-primary-light-surface: 0, 44, 98;
302
- --ax-sys-color-border-primary-light-surface: 102, 169, 255;
303
-
304
- --ax-sys-color-primary-surface: 43, 127, 255;
305
- --ax-sys-color-on-primary-surface: 244, 254, 255;
306
- --ax-sys-color-border-primary-surface: 7, 105, 255;
307
-
308
- --ax-sys-color-primary-dark-surface: 20, 108, 235;
309
- --ax-sys-color-on-primary-dark-surface: 244, 254, 255;
310
- --ax-sys-color-border-primary-dark-surface: 17, 93, 202;
311
-
312
- --ax-sys-color-primary-darker-surface: 0, 86, 210;
313
- --ax-sys-color-on-primary-darker-surface: 245, 254, 255;
314
- --ax-sys-color-border-primary-darker-surface: 0, 71, 174;
315
-
316
- --ax-sys-color-primary-darkest-surface: 12, 70, 182;
317
- --ax-sys-color-on-primary-darkest-surface: 245, 254, 255;
318
- --ax-sys-color-border-primary-darkest-surface: 10, 57, 149;
319
-
320
- --ax-sys-color-secondary-lightest-surface: 219, 229, 247;
321
- --ax-sys-color-on-secondary-lightest-surface: 39, 46, 60;
322
- --ax-sys-color-border-secondary-lightest-surface: 190, 208, 241;
323
-
324
- --ax-sys-color-secondary-lighter-surface: 199, 208, 226;
325
- --ax-sys-color-on-secondary-lighter-surface: 39, 46, 60;
326
- --ax-sys-color-border-secondary-lighter-surface: 175, 188, 214;
327
-
328
- --ax-sys-color-secondary-light-surface: 168, 177, 194;
329
- --ax-sys-color-on-secondary-light-surface: 39, 46, 59;
330
- --ax-sys-color-border-secondary-light-surface: 147, 158, 179;
331
-
332
- --ax-sys-color-secondary-surface: 106, 114, 130;
333
- --ax-sys-color-on-secondary-surface: 246, 254, 255;
334
- --ax-sys-color-border-secondary-surface: 90, 97, 110;
335
-
336
- --ax-sys-color-secondary-dark-surface: 93, 101, 117;
337
- --ax-sys-color-on-secondary-dark-surface: 246, 254, 255;
338
- --ax-sys-color-border-secondary-dark-surface: 77, 84, 97;
339
-
340
- --ax-sys-color-secondary-darker-surface: 78, 86, 101;
341
- --ax-sys-color-on-secondary-darker-surface: 245, 254, 255;
342
- --ax-sys-color-border-secondary-darker-surface: 62, 69, 81;
343
-
344
- --ax-sys-color-secondary-darkest-surface: 66, 73, 87;
345
- --ax-sys-color-on-secondary-darkest-surface: 246, 254, 255;
346
- --ax-sys-color-border-secondary-darkest-surface: 51, 56, 67;
347
-
348
- --ax-sys-color-success-lightest-surface: 162, 255, 211;
349
- --ax-sys-color-on-success-lightest-surface: 0, 59, 32;
350
- --ax-sys-color-border-success-lightest-surface: 126, 255, 194;
351
-
352
- --ax-sys-color-success-lighter-surface: 111, 255, 188;
353
- --ax-sys-color-on-success-lighter-surface: 0, 59, 29;
354
- --ax-sys-color-border-success-lighter-surface: 75, 255, 171;
355
-
356
- --ax-sys-color-success-light-surface: 86, 233, 167;
357
- --ax-sys-color-on-success-light-surface: 0, 59, 29;
358
- --ax-sys-color-border-success-light-surface: 54, 229, 151;
359
-
360
- --ax-sys-color-success-surface: 1, 188, 125;
361
- --ax-sys-color-on-success-surface: 231, 255, 244;
362
- --ax-sys-color-border-success-surface: 1, 152, 101;
363
-
364
- --ax-sys-color-success-dark-surface: 0, 165, 104;
365
- --ax-sys-color-on-success-dark-surface: 231, 255, 243;
366
- --ax-sys-color-border-success-dark-surface: 0, 129, 81;
367
-
368
- --ax-sys-color-success-darker-surface: 0, 136, 81;
369
- --ax-sys-color-on-success-darker-surface: 232, 255, 242;
370
- --ax-sys-color-border-success-darker-surface: 0, 100, 60;
371
-
372
- --ax-sys-color-success-darkest-surface: 22, 110, 67;
373
- --ax-sys-color-on-success-darkest-surface: 232, 255, 242;
374
- --ax-sys-color-border-success-darkest-surface: 16, 80, 49;
375
-
376
- --ax-sys-color-warning-lightest-surface: 255, 234, 201;
377
- --ax-sys-color-on-warning-lightest-surface: 59, 43, 14;
378
- --ax-sys-color-border-warning-lightest-surface: 255, 220, 165;
379
-
380
- --ax-sys-color-warning-lighter-surface: 255, 221, 174;
381
- --ax-sys-color-on-warning-lighter-surface: 66, 39, 0;
382
- --ax-sys-color-border-warning-lighter-surface: 255, 206, 138;
383
-
384
- --ax-sys-color-warning-light-surface: 255, 198, 128;
385
- --ax-sys-color-on-warning-light-surface: 71, 36, 0;
386
- --ax-sys-color-border-warning-light-surface: 255, 182, 92;
387
-
388
- --ax-sys-color-warning-surface: 253, 154, 1;
389
- --ax-sys-color-on-warning-surface: 255, 250, 231;
390
- --ax-sys-color-border-warning-surface: 217, 132, 1;
391
-
392
- --ax-sys-color-warning-dark-surface: 224, 127, 0;
393
- --ax-sys-color-on-warning-dark-surface: 255, 249, 233;
394
- --ax-sys-color-border-warning-dark-surface: 188, 107, 0;
395
-
396
- --ax-sys-color-warning-darker-surface: 181, 100, 0;
397
- --ax-sys-color-on-warning-darker-surface: 255, 249, 234;
398
- --ax-sys-color-border-warning-darker-surface: 145, 80, 0;
399
-
400
- --ax-sys-color-warning-darkest-surface: 144, 81, 20;
401
- --ax-sys-color-on-warning-darkest-surface: 255, 249, 234;
402
- --ax-sys-color-border-warning-darkest-surface: 113, 63, 16;
403
-
404
- --ax-sys-color-danger-lightest-surface: 255, 220, 221;
405
- --ax-sys-color-on-danger-lightest-surface: 63, 38, 39;
406
- --ax-sys-color-border-danger-lightest-surface: 255, 184, 186;
407
-
408
- --ax-sys-color-danger-lighter-surface: 255, 196, 198;
409
- --ax-sys-color-on-danger-lighter-surface: 74, 30, 34;
410
- --ax-sys-color-border-danger-lighter-surface: 255, 160, 164;
411
-
412
- --ax-sys-color-danger-light-surface: 255, 155, 162;
413
- --ax-sys-color-on-danger-light-surface: 91, 0, 25;
414
- --ax-sys-color-border-danger-light-surface: 255, 119, 129;
415
-
416
- --ax-sys-color-danger-surface: 255, 32, 86;
417
- --ax-sys-color-on-danger-surface: 255, 247, 248;
418
- --ax-sys-color-border-danger-surface: 251, 0, 61;
419
-
420
- --ax-sys-color-danger-dark-surface: 232, 0, 68;
421
- --ax-sys-color-on-danger-dark-surface: 255, 247, 247;
422
- --ax-sys-color-border-danger-dark-surface: 196, 0, 58;
423
-
424
- --ax-sys-color-danger-darker-surface: 195, 0, 53;
425
- --ax-sys-color-on-danger-darker-surface: 255, 247, 247;
426
- --ax-sys-color-border-danger-darker-surface: 159, 0, 43;
427
-
428
- --ax-sys-color-danger-darkest-surface: 159, 23, 47;
429
- --ax-sys-color-on-danger-darkest-surface: 255, 247, 247;
430
- --ax-sys-color-border-danger-darkest-surface: 128, 18, 38;
431
-
432
- --ax-sys-color-accent-lightest-surface: 181, 251, 255;
433
- --ax-sys-color-on-accent-lightest-surface: 0, 55, 60;
434
- --ax-sys-color-border-accent-lightest-surface: 145, 249, 255;
435
-
436
- --ax-sys-color-accent-lighter-surface: 135, 243, 255;
437
- --ax-sys-color-on-accent-lighter-surface: 0, 55, 62;
438
- --ax-sys-color-border-accent-lighter-surface: 99, 239, 255;
439
-
440
- --ax-sys-color-accent-light-surface: 85, 225, 255;
441
- --ax-sys-color-on-accent-light-surface: 0, 54, 68;
442
- --ax-sys-color-border-accent-light-surface: 49, 219, 255;
443
-
444
- --ax-sys-color-accent-surface: 6, 182, 212;
445
- --ax-sys-color-on-accent-surface: 0, 54, 69;
446
- --ax-sys-color-border-accent-surface: 5, 152, 177;
447
-
448
- --ax-sys-color-accent-dark-surface: 0, 158, 188;
449
- --ax-sys-color-on-accent-dark-surface: 228, 255, 255;
450
- --ax-sys-color-border-accent-dark-surface: 0, 128, 152;
451
-
452
- --ax-sys-color-accent-darker-surface: 0, 129, 156;
453
- --ax-sys-color-on-accent-darker-surface: 229, 255, 255;
454
- --ax-sys-color-border-accent-darker-surface: 0, 99, 120;
455
-
456
- --ax-sys-color-accent-darkest-surface: 22, 105, 126;
457
- --ax-sys-color-on-accent-darkest-surface: 229, 255, 255;
458
- --ax-sys-color-border-accent-darkest-surface: 17, 80, 96;
459
-
460
- --ax-sys-color-accent1-lightest-surface: 255, 218, 255;
461
- --ax-sys-color-on-accent1-lightest-surface: 62, 34, 63;
462
- --ax-sys-color-border-accent1-lightest-surface: 255, 182, 255;
463
-
464
- --ax-sys-color-accent1-lighter-surface: 255, 192, 255;
465
- --ax-sys-color-on-accent1-lighter-surface: 72, 19, 74;
466
- --ax-sys-color-border-accent1-lighter-surface: 255, 156, 255;
467
-
468
- --ax-sys-color-accent1-light-surface: 253, 149, 255;
469
- --ax-sys-color-on-accent1-light-surface: 82, 0, 87;
470
- --ax-sys-color-border-accent1-light-surface: 252, 113, 255;
471
-
472
- --ax-sys-color-accent1-surface: 217, 70, 239;
473
- --ax-sys-color-on-accent1-surface: 255, 247, 255;
474
- --ax-sys-color-border-accent1-surface: 210, 37, 236;
475
-
476
- --ax-sys-color-accent1-dark-surface: 195, 42, 216;
477
- --ax-sys-color-on-accent1-dark-surface: 255, 247, 255;
478
- --ax-sys-color-border-accent1-dark-surface: 169, 34, 188;
479
-
480
- --ax-sys-color-accent1-darker-surface: 167, 0, 189;
481
- --ax-sys-color-on-accent1-darker-surface: 255, 247, 255;
482
- --ax-sys-color-border-accent1-darker-surface: 135, 0, 153;
483
-
484
- --ax-sys-color-accent1-darkest-surface: 138, 24, 155;
485
- --ax-sys-color-on-accent1-darkest-surface: 255, 247, 255;
486
- --ax-sys-color-border-accent1-darkest-surface: 110, 19, 124;
487
-
488
- --ax-sys-color-accent2-lightest-surface: 255, 228, 207;
489
- --ax-sys-color-on-accent2-lightest-surface: 61, 41, 24;
490
- --ax-sys-color-border-accent2-lightest-surface: 255, 208, 171;
491
-
492
- --ax-sys-color-accent2-lighter-surface: 255, 209, 179;
493
- --ax-sys-color-on-accent2-lighter-surface: 70, 35, 8;
494
- --ax-sys-color-border-accent2-lighter-surface: 255, 187, 143;
495
-
496
- --ax-sys-color-accent2-light-surface: 255, 178, 132;
497
- --ax-sys-color-on-accent2-light-surface: 83, 24, 0;
498
- --ax-sys-color-border-accent2-light-surface: 255, 156, 96;
499
-
500
- --ax-sys-color-accent2-surface: 249, 115, 22;
501
- --ax-sys-color-on-accent2-surface: 255, 249, 238;
502
- --ax-sys-color-border-accent2-surface: 229, 97, 6;
503
-
504
- --ax-sys-color-accent2-dark-surface: 223, 91, 0;
505
- --ax-sys-color-on-accent2-dark-surface: 255, 248, 239;
506
- --ax-sys-color-border-accent2-dark-surface: 187, 76, 0;
507
-
508
- --ax-sys-color-accent2-darker-surface: 187, 68, 0;
509
- --ax-sys-color-on-accent2-darker-surface: 255, 248, 240;
510
- --ax-sys-color-border-accent2-darker-surface: 151, 55, 0;
511
-
512
- --ax-sys-color-accent2-darkest-surface: 151, 58, 18;
513
- --ax-sys-color-on-accent2-darkest-surface: 255, 248, 241;
514
- --ax-sys-color-border-accent2-darkest-surface: 119, 46, 14;
515
-
516
- --ax-sys-color-accent3-lightest-surface: 143, 255, 244;
517
- --ax-sys-color-on-accent3-lightest-surface: 0, 57, 52;
518
- --ax-sys-color-border-accent3-lightest-surface: 107, 255, 240;
519
-
520
- --ax-sys-color-accent3-lighter-surface: 114, 250, 231;
521
- --ax-sys-color-on-accent3-lighter-surface: 0, 57, 49;
522
- --ax-sys-color-border-accent3-lighter-surface: 80, 249, 225;
523
-
524
- --ax-sys-color-accent3-light-surface: 90, 229, 209;
525
- --ax-sys-color-on-accent3-light-surface: 0, 57, 49;
526
- --ax-sys-color-border-accent3-light-surface: 59, 224, 200;
527
-
528
- --ax-sys-color-accent3-surface: 20, 184, 166;
529
- --ax-sys-color-on-accent3-surface: 226, 255, 255;
530
- --ax-sys-color-border-accent3-surface: 17, 152, 137;
531
-
532
- --ax-sys-color-accent3-dark-surface: 0, 161, 144;
533
- --ax-sys-color-on-accent3-dark-surface: 226, 255, 255;
534
- --ax-sys-color-border-accent3-dark-surface: 0, 125, 112;
535
-
536
- --ax-sys-color-accent3-darker-surface: 0, 132, 117;
537
- --ax-sys-color-on-accent3-darker-surface: 226, 255, 255;
538
- --ax-sys-color-border-accent3-darker-surface: 0, 96, 85;
539
-
540
- --ax-sys-color-accent3-darkest-surface: 23, 108, 95;
541
- --ax-sys-color-on-accent3-darkest-surface: 227, 255, 254;
542
- --ax-sys-color-border-accent3-darkest-surface: 17, 79, 69;
543
-
544
- --ax-sys-color-accent4-lightest-surface: 220, 228, 255;
545
- --ax-sys-color-on-accent4-lightest-surface: 39, 45, 65;
546
- --ax-sys-color-border-accent4-lightest-surface: 184, 200, 255;
547
-
548
- --ax-sys-color-accent4-lighter-surface: 196, 207, 255;
549
- --ax-sys-color-on-accent4-lighter-surface: 36, 42, 79;
550
- --ax-sys-color-border-accent4-lighter-surface: 160, 178, 255;
551
-
552
- --ax-sys-color-accent4-light-surface: 161, 173, 255;
553
- --ax-sys-color-on-accent4-light-surface: 34, 34, 103;
554
- --ax-sys-color-border-accent4-light-surface: 125, 142, 255;
555
-
556
- --ax-sys-color-accent4-surface: 99, 102, 241;
557
- --ax-sys-color-on-accent4-surface: 249, 252, 255;
558
- --ax-sys-color-border-accent4-surface: 66, 70, 238;
559
-
560
- --ax-sys-color-accent4-dark-surface: 86, 85, 223;
561
- --ax-sys-color-on-accent4-dark-surface: 249, 252, 255;
562
- --ax-sys-color-border-accent4-dark-surface: 56, 55, 217;
563
-
564
- --ax-sys-color-accent4-darker-surface: 71, 64, 201;
565
- --ax-sys-color-on-accent4-darker-surface: 249, 252, 255;
566
- --ax-sys-color-border-accent4-darker-surface: 57, 51, 179;
567
-
568
- --ax-sys-color-accent4-darkest-surface: 59, 52, 175;
569
- --ax-sys-color-on-accent4-darkest-surface: 249, 252, 255;
570
- --ax-sys-color-border-accent4-darkest-surface: 50, 44, 147;
571
-
572
- --ax-sys-color-accent5-lightest-surface: 255, 219, 237;
573
- --ax-sys-color-on-accent5-lightest-surface: 63, 36, 50;
574
- --ax-sys-color-border-accent5-lightest-surface: 255, 183, 219;
575
-
576
- --ax-sys-color-accent5-lighter-surface: 255, 194, 222;
577
- --ax-sys-color-on-accent5-lighter-surface: 73, 27, 51;
578
- --ax-sys-color-border-accent5-lighter-surface: 255, 158, 203;
579
-
580
- --ax-sys-color-accent5-light-surface: 255, 152, 200;
581
- --ax-sys-color-on-accent5-light-surface: 90, 0, 54;
582
- --ax-sys-color-border-accent5-light-surface: 255, 116, 181;
583
-
584
- --ax-sys-color-accent5-surface: 236, 72, 153;
585
- --ax-sys-color-on-accent5-surface: 255, 246, 255;
586
- --ax-sys-color-border-accent5-surface: 233, 40, 135;
587
-
588
- --ax-sys-color-accent5-dark-surface: 213, 48, 134;
589
- --ax-sys-color-on-accent5-dark-surface: 255, 246, 255;
590
- --ax-sys-color-border-accent5-dark-surface: 187, 38, 116;
591
-
592
- --ax-sys-color-accent5-darker-surface: 185, 0, 111;
593
- --ax-sys-color-on-accent5-darker-surface: 255, 246, 255;
594
- --ax-sys-color-border-accent5-darker-surface: 149, 0, 90;
595
-
596
- --ax-sys-color-accent5-darkest-surface: 156, 23, 92;
597
- --ax-sys-color-on-accent5-darkest-surface: 255, 246, 254;
598
- --ax-sys-color-border-accent5-darkest-surface: 125, 18, 74;
599
-
600
- --ax-sys-color-accent6-lightest-surface: 235, 227, 221;
601
- --ax-sys-color-on-accent6-lightest-surface: 50, 44, 40;
602
- --ax-sys-color-border-accent6-lightest-surface: 222, 208, 199;
603
-
604
- --ax-sys-color-accent6-lighter-surface: 214, 206, 201;
605
- --ax-sys-color-on-accent6-lighter-surface: 51, 44, 41;
606
- --ax-sys-color-border-accent6-lighter-surface: 199, 188, 181;
607
-
608
- --ax-sys-color-accent6-light-surface: 183, 175, 170;
609
- --ax-sys-color-on-accent6-light-surface: 255, 252, 246;
610
- --ax-sys-color-border-accent6-light-surface: 167, 157, 151;
611
-
612
- --ax-sys-color-accent6-surface: 120, 113, 108;
613
- --ax-sys-color-on-accent6-surface: 255, 252, 246;
614
- --ax-sys-color-border-accent6-surface: 101, 95, 91;
615
-
616
- --ax-sys-color-accent6-dark-surface: 107, 100, 95;
617
- --ax-sys-color-on-accent6-dark-surface: 255, 252, 246;
618
- --ax-sys-color-border-accent6-dark-surface: 88, 82, 78;
619
-
620
- --ax-sys-color-accent6-darker-surface: 91, 84, 80;
621
- --ax-sys-color-on-accent6-darker-surface: 255, 252, 247;
622
- --ax-sys-color-border-accent6-darker-surface: 72, 66, 63;
623
-
624
- --ax-sys-color-accent6-darkest-surface: 78, 72, 68;
625
- --ax-sys-color-on-accent6-darkest-surface: 255, 252, 247;
626
- --ax-sys-color-border-accent6-darkest-surface: 59, 54, 51;
627
-
628
- --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
629
- --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
630
- --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
631
- }
632
-
633
- .ax-dark {
634
- --ax-sys-theme-isDark: 1;
635
- --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darker-surface));
636
- --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-lightest-surface));
637
-
638
- --ax-sys-color-lightest-surface: 56, 56, 56;
639
- --ax-sys-color-on-lightest-surface: 245, 245, 245;
640
- --ax-sys-color-border-lightest-surface: 64, 64, 64;
641
-
642
- --ax-sys-color-lighter-surface: 49, 49, 49;
643
- --ax-sys-color-on-lighter-surface: 245, 245, 245;
644
- --ax-sys-color-border-lighter-surface: 56, 56, 56;
645
-
646
- --ax-sys-color-light-surface: 42, 42, 42;
647
- --ax-sys-color-on-light-surface: 245, 245, 245;
648
- --ax-sys-color-border-light-surface: 50, 50, 50;
649
-
650
- --ax-sys-color-surface: 33, 33, 33;
651
- --ax-sys-color-on-surface: 245, 245, 245;
652
- --ax-sys-color-border-surface: 44, 44, 44;
653
-
654
- --ax-sys-color-dark-surface: 27, 27, 27;
655
- --ax-sys-color-on-dark-surface: 245, 245, 245;
656
- --ax-sys-color-border-dark-surface: 38, 38, 38;
657
-
658
- --ax-sys-color-darker-surface: 20, 20, 20;
659
- --ax-sys-color-on-darker-surface: 245, 245, 245;
660
- --ax-sys-color-border-darker-surface: 32, 32, 32;
661
-
662
- --ax-sys-color-darkest-surface: 10, 10, 10;
663
- --ax-sys-color-on-darkest-surface: 245, 245, 245;
664
- --ax-sys-color-border-darkest-surface: 28, 28, 28;
665
-
666
- --ax-sys-color-primary-50: 233, 247, 255;
667
- --ax-sys-color-primary-100: 219, 238, 255;
668
- --ax-sys-color-primary-200: 190, 221, 255;
669
- --ax-sys-color-primary-300: 161, 203, 255;
670
- --ax-sys-color-primary-400: 132, 185, 255;
671
- --ax-sys-color-primary-500: 101, 166, 255;
672
- --ax-sys-color-primary-600: 67, 146, 255;
673
- --ax-sys-color-primary-700: 43, 127, 255;
674
- --ax-sys-color-primary-800: 25, 112, 239;
675
- --ax-sys-color-primary-900: 0, 98, 223;
676
- --ax-sys-color-primary-950: 0, 90, 215;
677
-
678
- --ax-sys-color-secondary-50: 240, 249, 255;
679
- --ax-sys-color-secondary-100: 233, 242, 255;
680
- --ax-sys-color-secondary-200: 219, 228, 243;
681
- --ax-sys-color-secondary-300: 206, 214, 229;
682
- --ax-sys-color-secondary-400: 192, 201, 215;
683
- --ax-sys-color-secondary-500: 179, 187, 202;
684
- --ax-sys-color-secondary-600: 166, 174, 188;
685
- --ax-sys-color-secondary-700: 153, 161, 175;
686
- --ax-sys-color-secondary-800: 135, 143, 157;
687
- --ax-sys-color-secondary-900: 118, 126, 139;
688
- --ax-sys-color-secondary-950: 110, 117, 131;
689
-
690
- --ax-sys-color-success-50: 210, 255, 233;
691
- --ax-sys-color-success-100: 180, 255, 219;
692
- --ax-sys-color-success-200: 115, 255, 191;
693
- --ax-sys-color-success-300: 99, 244, 178;
694
- --ax-sys-color-success-400: 82, 230, 164;
695
- --ax-sys-color-success-500: 64, 216, 151;
696
- --ax-sys-color-success-600: 42, 202, 138;
697
- --ax-sys-color-success-700: 1, 188, 125;
698
- --ax-sys-color-success-800: 0, 170, 108;
699
- --ax-sys-color-success-900: 0, 151, 91;
700
- --ax-sys-color-success-950: 0, 142, 85;
701
-
702
- --ax-sys-color-warning-50: 255, 245, 222;
703
- --ax-sys-color-warning-100: 255, 238, 208;
704
- --ax-sys-color-warning-200: 255, 224, 181;
705
- --ax-sys-color-warning-300: 255, 210, 152;
706
- --ax-sys-color-warning-400: 255, 195, 120;
707
- --ax-sys-color-warning-500: 255, 180, 82;
708
- --ax-sys-color-warning-600: 255, 165, 33;
709
- --ax-sys-color-warning-700: 253, 154, 1;
710
- --ax-sys-color-warning-800: 230, 133, 0;
711
- --ax-sys-color-warning-900: 203, 114, 0;
712
- --ax-sys-color-warning-950: 190, 105, 0;
713
-
714
- --ax-sys-color-danger-50: 255, 240, 242;
715
- --ax-sys-color-danger-100: 255, 230, 233;
716
- --ax-sys-color-danger-200: 255, 210, 215;
717
- --ax-sys-color-danger-300: 255, 189, 196;
718
- --ax-sys-color-danger-400: 255, 167, 178;
719
- --ax-sys-color-danger-500: 255, 144, 159;
720
- --ax-sys-color-danger-600: 255, 117, 140;
721
- --ax-sys-color-danger-700: 255, 99, 126;
722
- --ax-sys-color-danger-800: 234, 80, 109;
723
- --ax-sys-color-danger-900: 213, 59, 92;
724
- --ax-sys-color-danger-950: 203, 48, 84;
725
-
726
- --ax-sys-color-surface-50: 237, 237, 237;
727
- --ax-sys-color-surface-100: 219, 219, 219;
728
- --ax-sys-color-surface-200: 185, 185, 185;
729
- --ax-sys-color-surface-300: 151, 151, 151;
730
- --ax-sys-color-surface-400: 119, 119, 119;
731
- --ax-sys-color-surface-500: 89, 89, 89;
732
- --ax-sys-color-surface-600: 60, 60, 60;
733
- --ax-sys-color-surface-700: 33, 33, 33;
734
- --ax-sys-color-surface-800: 35, 35, 35;
735
- --ax-sys-color-surface-900: 37, 37, 37;
736
- --ax-sys-color-surface-950: 37, 37, 37;
737
-
738
- --ax-sys-color-accent-50: 210, 255, 255;
739
- --ax-sys-color-accent-100: 192, 254, 255;
740
- --ax-sys-color-accent-200: 147, 245, 255;
741
- --ax-sys-color-accent-300: 97, 236, 255;
742
- --ax-sys-color-accent-400: 81, 222, 253;
743
- --ax-sys-color-accent-500: 63, 208, 239;
744
- --ax-sys-color-accent-600: 42, 195, 225;
745
- --ax-sys-color-accent-700: 6, 182, 212;
746
- --ax-sys-color-accent-800: 0, 163, 193;
747
- --ax-sys-color-accent-900: 0, 145, 174;
748
- --ax-sys-color-accent-950: 0, 135, 162;
749
-
750
- --ax-sys-color-accent1-50: 255, 237, 255;
751
- --ax-sys-color-accent1-100: 255, 225, 255;
752
- --ax-sys-color-accent1-200: 255, 199, 255;
753
- --ax-sys-color-accent1-300: 255, 172, 255;
754
- --ax-sys-color-accent1-400: 252, 142, 255;
755
- --ax-sys-color-accent1-500: 248, 109, 255;
756
- --ax-sys-color-accent1-600: 233, 88, 255;
757
- --ax-sys-color-accent1-700: 217, 70, 239;
758
- --ax-sys-color-accent1-800: 199, 48, 221;
759
- --ax-sys-color-accent1-900: 181, 18, 203;
760
- --ax-sys-color-accent1-950: 173, 0, 194;
761
-
762
- --ax-sys-color-accent2-50: 255, 242, 228;
763
- --ax-sys-color-accent2-100: 255, 232, 214;
764
- --ax-sys-color-accent2-200: 255, 213, 186;
765
- --ax-sys-color-accent2-300: 255, 194, 157;
766
- --ax-sys-color-accent2-400: 255, 173, 125;
767
- --ax-sys-color-accent2-500: 255, 151, 89;
768
- --ax-sys-color-accent2-600: 255, 129, 45;
769
- --ax-sys-color-accent2-700: 249, 115, 22;
770
- --ax-sys-color-accent2-800: 228, 96, 0;
771
- --ax-sys-color-accent2-900: 208, 77, 0;
772
- --ax-sys-color-accent2-950: 195, 71, 0;
773
-
774
- --ax-sys-color-accent3-50: 202, 255, 252;
775
- --ax-sys-color-accent3-100: 166, 255, 246;
776
- --ax-sys-color-accent3-200: 118, 254, 234;
777
- --ax-sys-color-accent3-300: 102, 240, 220;
778
- --ax-sys-color-accent3-400: 86, 225, 206;
779
- --ax-sys-color-accent3-500: 69, 212, 193;
780
- --ax-sys-color-accent3-600: 49, 198, 179;
781
- --ax-sys-color-accent3-700: 20, 184, 166;
782
- --ax-sys-color-accent3-800: 0, 166, 148;
783
- --ax-sys-color-accent3-900: 0, 148, 131;
784
- --ax-sys-color-accent3-950: 0, 138, 122;
785
-
786
- --ax-sys-color-accent4-50: 239, 244, 255;
787
- --ax-sys-color-accent4-100: 226, 233, 255;
788
- --ax-sys-color-accent4-200: 202, 212, 255;
789
- --ax-sys-color-accent4-300: 178, 190, 255;
790
- --ax-sys-color-accent4-400: 156, 168, 255;
791
- --ax-sys-color-accent4-500: 134, 144, 255;
792
- --ax-sys-color-accent4-600: 115, 121, 255;
793
- --ax-sys-color-accent4-700: 99, 102, 241;
794
- --ax-sys-color-accent4-800: 88, 89, 227;
795
- --ax-sys-color-accent4-900: 78, 75, 213;
796
- --ax-sys-color-accent4-950: 73, 69, 206;
797
-
798
- --ax-sys-color-accent5-50: 255, 237, 248;
799
- --ax-sys-color-accent5-100: 255, 225, 241;
800
- --ax-sys-color-accent5-200: 255, 200, 226;
801
- --ax-sys-color-accent5-300: 255, 174, 211;
802
- --ax-sys-color-accent5-400: 255, 146, 197;
803
- --ax-sys-color-accent5-500: 255, 113, 183;
804
- --ax-sys-color-accent5-600: 254, 89, 168;
805
- --ax-sys-color-accent5-700: 236, 72, 153;
806
- --ax-sys-color-accent5-800: 218, 53, 138;
807
- --ax-sys-color-accent5-900: 200, 30, 122;
808
- --ax-sys-color-accent5-950: 190, 14, 115;
809
-
810
- --ax-sys-color-accent6-50: 251, 243, 237;
811
- --ax-sys-color-accent6-100: 240, 232, 226;
812
- --ax-sys-color-accent6-200: 219, 211, 206;
813
- --ax-sys-color-accent6-300: 198, 191, 185;
814
- --ax-sys-color-accent6-400: 178, 171, 165;
815
- --ax-sys-color-accent6-500: 158, 151, 146;
816
- --ax-sys-color-accent6-600: 139, 132, 127;
817
- --ax-sys-color-accent6-700: 120, 113, 108;
818
- --ax-sys-color-accent6-800: 109, 103, 98;
819
- --ax-sys-color-accent6-900: 99, 92, 88;
820
- --ax-sys-color-accent6-950: 94, 87, 83;
821
-
822
- --ax-sys-color-primary-lightest-surface: 219, 238, 255;
823
- --ax-sys-color-on-primary-lightest-surface: 9, 23, 35;
824
- --ax-sys-color-border-primary-lightest-surface: 255, 255, 255;
825
-
826
- --ax-sys-color-primary-lighter-surface: 190, 221, 255;
827
- --ax-sys-color-on-primary-lighter-surface: 0, 22, 47;
828
- --ax-sys-color-border-primary-lighter-surface: 236, 245, 255;
829
-
830
- --ax-sys-color-primary-light-surface: 161, 203, 255;
831
- --ax-sys-color-on-primary-light-surface: 0, 20, 59;
832
- --ax-sys-color-border-primary-light-surface: 207, 228, 255;
833
-
834
- --ax-sys-color-primary-surface: 101, 166, 255;
835
- --ax-sys-color-on-primary-surface: 0, 6, 82;
836
- --ax-sys-color-border-primary-surface: 147, 193, 255;
837
-
838
- --ax-sys-color-primary-dark-surface: 67, 146, 255;
839
- --ax-sys-color-on-primary-dark-surface: 0, 0, 87;
840
- --ax-sys-color-border-primary-dark-surface: 113, 173, 255;
841
-
842
- --ax-sys-color-primary-darker-surface: 43, 127, 255;
843
- --ax-sys-color-on-primary-darker-surface: 0, 0, 91;
844
- --ax-sys-color-border-primary-darker-surface: 89, 155, 255;
845
-
846
- --ax-sys-color-primary-darkest-surface: 25, 112, 239;
847
- --ax-sys-color-on-primary-darkest-surface: 0, 0, 91;
848
- --ax-sys-color-border-primary-darkest-surface: 68, 139, 242;
849
-
850
- --ax-sys-color-secondary-lightest-surface: 233, 242, 255;
851
- --ax-sys-color-on-secondary-lightest-surface: 16, 22, 31;
852
- --ax-sys-color-border-secondary-lightest-surface: 255, 255, 255;
853
-
854
- --ax-sys-color-secondary-lighter-surface: 219, 228, 243;
855
- --ax-sys-color-on-secondary-lighter-surface: 16, 22, 32;
856
- --ax-sys-color-border-secondary-lighter-surface: 253, 254, 254;
857
-
858
- --ax-sys-color-secondary-light-surface: 206, 214, 229;
859
- --ax-sys-color-on-secondary-light-surface: 17, 22, 32;
860
- --ax-sys-color-border-secondary-light-surface: 236, 239, 245;
861
-
862
- --ax-sys-color-secondary-surface: 179, 187, 202;
863
- --ax-sys-color-on-secondary-surface: 17, 22, 33;
864
- --ax-sys-color-border-secondary-surface: 206, 211, 221;
865
-
866
- --ax-sys-color-secondary-dark-surface: 166, 174, 188;
867
- --ax-sys-color-on-secondary-dark-surface: 16, 22, 32;
868
- --ax-sys-color-border-secondary-dark-surface: 192, 198, 208;
869
-
870
- --ax-sys-color-secondary-darker-surface: 153, 161, 175;
871
- --ax-sys-color-on-secondary-darker-surface: 16, 22, 32;
872
- --ax-sys-color-border-secondary-darker-surface: 179, 185, 195;
873
-
874
- --ax-sys-color-secondary-darkest-surface: 135, 143, 157;
875
- --ax-sys-color-on-secondary-darkest-surface: 16, 22, 33;
876
- --ax-sys-color-border-secondary-darkest-surface: 160, 167, 178;
877
-
878
- --ax-sys-color-success-lightest-surface: 180, 255, 219;
879
- --ax-sys-color-on-success-lightest-surface: 0, 31, 13;
880
- --ax-sys-color-border-success-lightest-surface: 226, 255, 241;
881
-
882
- --ax-sys-color-success-lighter-surface: 115, 255, 191;
883
- --ax-sys-color-on-success-lighter-surface: 0, 31, 11;
884
- --ax-sys-color-border-success-lighter-surface: 161, 255, 212;
885
-
886
- --ax-sys-color-success-light-surface: 99, 244, 178;
887
- --ax-sys-color-on-success-light-surface: 0, 31, 10;
888
- --ax-sys-color-border-success-light-surface: 142, 247, 199;
889
-
890
- --ax-sys-color-success-surface: 64, 216, 151;
891
- --ax-sys-color-on-success-surface: 0, 31, 10;
892
- --ax-sys-color-border-success-surface: 102, 224, 172;
893
-
894
- --ax-sys-color-success-dark-surface: 42, 202, 138;
895
- --ax-sys-color-on-success-dark-surface: 0, 31, 10;
896
- --ax-sys-color-border-success-dark-surface: 73, 217, 159;
897
-
898
- --ax-sys-color-success-darker-surface: 1, 188, 125;
899
- --ax-sys-color-on-success-darker-surface: 0, 31, 10;
900
- --ax-sys-color-border-success-darker-surface: 1, 234, 155;
901
-
902
- --ax-sys-color-success-darkest-surface: 0, 170, 108;
903
- --ax-sys-color-on-success-darkest-surface: 0, 31, 8;
904
- --ax-sys-color-border-success-darkest-surface: 0, 216, 137;
905
-
906
- --ax-sys-color-warning-lightest-surface: 255, 238, 208;
907
- --ax-sys-color-on-warning-lightest-surface: 32, 20, 0;
908
- --ax-sys-color-border-warning-lightest-surface: 255, 255, 254;
909
-
910
- --ax-sys-color-warning-lighter-surface: 255, 224, 181;
911
- --ax-sys-color-on-warning-lighter-surface: 37, 16, 0;
912
- --ax-sys-color-border-warning-lighter-surface: 255, 243, 227;
913
-
914
- --ax-sys-color-warning-light-surface: 255, 210, 152;
915
- --ax-sys-color-on-warning-light-surface: 38, 16, 0;
916
- --ax-sys-color-border-warning-light-surface: 255, 230, 198;
917
-
918
- --ax-sys-color-warning-surface: 255, 180, 82;
919
- --ax-sys-color-on-warning-surface: 39, 15, 0;
920
- --ax-sys-color-border-warning-surface: 255, 200, 128;
921
-
922
- --ax-sys-color-warning-dark-surface: 255, 165, 33;
923
- --ax-sys-color-on-warning-dark-surface: 40, 14, 0;
924
- --ax-sys-color-border-warning-dark-surface: 255, 184, 79;
925
-
926
- --ax-sys-color-warning-darker-surface: 253, 154, 1;
927
- --ax-sys-color-on-warning-darker-surface: 41, 13, 0;
928
- --ax-sys-color-border-warning-darker-surface: 254, 172, 46;
929
-
930
- --ax-sys-color-warning-darkest-surface: 230, 133, 0;
931
- --ax-sys-color-on-warning-darkest-surface: 42, 12, 0;
932
- --ax-sys-color-border-warning-darkest-surface: 255, 156, 21;
933
-
934
- --ax-sys-color-danger-lightest-surface: 255, 230, 233;
935
- --ax-sys-color-on-danger-lightest-surface: 33, 17, 19;
936
- --ax-sys-color-border-danger-lightest-surface: 255, 255, 255;
937
-
938
- --ax-sys-color-danger-lighter-surface: 255, 210, 215;
939
- --ax-sys-color-on-danger-lighter-surface: 41, 10, 16;
940
- --ax-sys-color-border-danger-lighter-surface: 255, 255, 255;
941
-
942
- --ax-sys-color-danger-light-surface: 255, 189, 196;
943
- --ax-sys-color-on-danger-light-surface: 48, 1, 13;
944
- --ax-sys-color-border-danger-light-surface: 255, 235, 237;
945
-
946
- --ax-sys-color-danger-surface: 255, 144, 159;
947
- --ax-sys-color-on-danger-surface: 54, 0, 9;
948
- --ax-sys-color-border-danger-surface: 255, 190, 199;
949
-
950
- --ax-sys-color-danger-dark-surface: 255, 117, 140;
951
- --ax-sys-color-on-danger-dark-surface: 54, 0, 10;
952
- --ax-sys-color-border-danger-dark-surface: 255, 163, 178;
953
-
954
- --ax-sys-color-danger-darker-surface: 255, 99, 126;
955
- --ax-sys-color-on-danger-darker-surface: 54, 0, 9;
956
- --ax-sys-color-border-danger-darker-surface: 255, 145, 164;
957
-
958
- --ax-sys-color-danger-darkest-surface: 234, 80, 109;
959
- --ax-sys-color-on-danger-darkest-surface: 54, 0, 8;
960
- --ax-sys-color-border-danger-darkest-surface: 239, 121, 143;
961
-
962
- --ax-sys-color-accent-lightest-surface: 192, 254, 255;
963
- --ax-sys-color-on-accent-lightest-surface: 0, 29, 30;
964
- --ax-sys-color-border-accent-lightest-surface: 238, 255, 255;
965
-
966
- --ax-sys-color-accent-lighter-surface: 147, 245, 255;
967
- --ax-sys-color-on-accent-lighter-surface: 0, 28, 33;
968
- --ax-sys-color-border-accent-lighter-surface: 193, 249, 255;
969
-
970
- --ax-sys-color-accent-light-surface: 97, 236, 255;
971
- --ax-sys-color-on-accent-light-surface: 0, 28, 35;
972
- --ax-sys-color-border-accent-light-surface: 143, 242, 255;
973
-
974
- --ax-sys-color-accent-surface: 63, 208, 239;
975
- --ax-sys-color-on-accent-surface: 0, 27, 38;
976
- --ax-sys-color-border-accent-surface: 105, 218, 243;
977
-
978
- --ax-sys-color-accent-dark-surface: 42, 195, 225;
979
- --ax-sys-color-on-accent-dark-surface: 0, 27, 38;
980
- --ax-sys-color-border-accent-dark-surface: 82, 206, 231;
981
-
982
- --ax-sys-color-accent-darker-surface: 6, 182, 212;
983
- --ax-sys-color-on-accent-darker-surface: 0, 27, 38;
984
- --ax-sys-color-border-accent-darker-surface: 16, 214, 248;
985
-
986
- --ax-sys-color-accent-darkest-surface: 0, 163, 193;
987
- --ax-sys-color-on-accent-darkest-surface: 0, 27, 38;
988
- --ax-sys-color-border-accent-darkest-surface: 0, 202, 239;
989
-
990
- --ax-sys-color-accent1-lightest-surface: 255, 225, 255;
991
- --ax-sys-color-on-accent1-lightest-surface: 33, 13, 34;
992
- --ax-sys-color-border-accent1-lightest-surface: 255, 255, 255;
993
-
994
- --ax-sys-color-accent1-lighter-surface: 255, 199, 255;
995
- --ax-sys-color-on-accent1-lighter-surface: 42, 0, 44;
996
- --ax-sys-color-border-accent1-lighter-surface: 255, 245, 255;
997
-
998
- --ax-sys-color-accent1-light-surface: 255, 172, 255;
999
- --ax-sys-color-on-accent1-light-surface: 45, 0, 48;
1000
- --ax-sys-color-border-accent1-light-surface: 255, 218, 255;
1001
-
1002
- --ax-sys-color-accent1-surface: 248, 109, 255;
1003
- --ax-sys-color-on-accent1-surface: 45, 0, 49;
1004
- --ax-sys-color-border-accent1-surface: 250, 155, 255;
1005
-
1006
- --ax-sys-color-accent1-dark-surface: 233, 88, 255;
1007
- --ax-sys-color-on-accent1-dark-surface: 44, 0, 52;
1008
- --ax-sys-color-border-accent1-dark-surface: 239, 134, 255;
1009
-
1010
- --ax-sys-color-accent1-darker-surface: 217, 70, 239;
1011
- --ax-sys-color-on-accent1-darker-surface: 44, 0, 52;
1012
- --ax-sys-color-border-accent1-darker-surface: 226, 112, 243;
1013
-
1014
- --ax-sys-color-accent1-darkest-surface: 199, 48, 221;
1015
- --ax-sys-color-on-accent1-darkest-surface: 44, 0, 52;
1016
- --ax-sys-color-border-accent1-darkest-surface: 210, 87, 227;
1017
-
1018
- --ax-sys-color-accent2-lightest-surface: 255, 232, 214;
1019
- --ax-sys-color-on-accent2-lightest-surface: 33, 18, 5;
1020
- --ax-sys-color-border-accent2-lightest-surface: 255, 255, 255;
1021
-
1022
- --ax-sys-color-accent2-lighter-surface: 255, 213, 186;
1023
- --ax-sys-color-on-accent2-lighter-surface: 41, 12, 0;
1024
- --ax-sys-color-border-accent2-lighter-surface: 255, 241, 232;
1025
-
1026
- --ax-sys-color-accent2-light-surface: 255, 194, 157;
1027
- --ax-sys-color-on-accent2-light-surface: 46, 7, 0;
1028
- --ax-sys-color-border-accent2-light-surface: 255, 223, 203;
1029
-
1030
- --ax-sys-color-accent2-surface: 255, 151, 89;
1031
- --ax-sys-color-on-accent2-surface: 47, 6, 0;
1032
- --ax-sys-color-border-accent2-surface: 255, 180, 135;
1033
-
1034
- --ax-sys-color-accent2-dark-surface: 255, 129, 45;
1035
- --ax-sys-color-on-accent2-dark-surface: 47, 5, 0;
1036
- --ax-sys-color-border-accent2-dark-surface: 255, 157, 91;
1037
-
1038
- --ax-sys-color-accent2-darker-surface: 249, 115, 22;
1039
- --ax-sys-color-on-accent2-darker-surface: 48, 4, 0;
1040
- --ax-sys-color-border-accent2-darker-surface: 250, 142, 67;
1041
-
1042
- --ax-sys-color-accent2-darkest-surface: 228, 96, 0;
1043
- --ax-sys-color-on-accent2-darkest-surface: 49, 3, 0;
1044
- --ax-sys-color-border-accent2-darkest-surface: 255, 118, 19;
1045
-
1046
- --ax-sys-color-accent3-lightest-surface: 166, 255, 246;
1047
- --ax-sys-color-on-accent3-lightest-surface: 0, 29, 26;
1048
- --ax-sys-color-border-accent3-lightest-surface: 212, 255, 251;
1049
-
1050
- --ax-sys-color-accent3-lighter-surface: 118, 254, 234;
1051
- --ax-sys-color-on-accent3-lighter-surface: 0, 30, 24;
1052
- --ax-sys-color-border-accent3-lighter-surface: 164, 254, 241;
1053
-
1054
- --ax-sys-color-accent3-light-surface: 102, 240, 220;
1055
- --ax-sys-color-on-accent3-light-surface: 0, 30, 24;
1056
- --ax-sys-color-border-accent3-light-surface: 144, 244, 230;
1057
-
1058
- --ax-sys-color-accent3-surface: 69, 212, 193;
1059
- --ax-sys-color-on-accent3-surface: 0, 30, 24;
1060
- --ax-sys-color-border-accent3-surface: 106, 221, 205;
1061
-
1062
- --ax-sys-color-accent3-dark-surface: 49, 198, 179;
1063
- --ax-sys-color-on-accent3-dark-surface: 0, 30, 24;
1064
- --ax-sys-color-border-accent3-dark-surface: 81, 212, 195;
1065
-
1066
- --ax-sys-color-accent3-darker-surface: 20, 184, 166;
1067
- --ax-sys-color-on-accent3-darker-surface: 0, 30, 24;
1068
- --ax-sys-color-border-accent3-darker-surface: 25, 225, 203;
1069
-
1070
- --ax-sys-color-accent3-darkest-surface: 0, 166, 148;
1071
- --ax-sys-color-on-accent3-darkest-surface: 0, 30, 24;
1072
- --ax-sys-color-border-accent3-darkest-surface: 0, 212, 189;
1073
-
1074
- --ax-sys-color-accent4-lightest-surface: 226, 233, 255;
1075
- --ax-sys-color-on-accent4-lightest-surface: 17, 21, 36;
1076
- --ax-sys-color-border-accent4-lightest-surface: 255, 255, 255;
1077
-
1078
- --ax-sys-color-accent4-lighter-surface: 202, 212, 255;
1079
- --ax-sys-color-on-accent4-lighter-surface: 15, 18, 49;
1080
- --ax-sys-color-border-accent4-lighter-surface: 248, 249, 255;
1081
-
1082
- --ax-sys-color-accent4-light-surface: 178, 190, 255;
1083
- --ax-sys-color-on-accent4-light-surface: 14, 12, 63;
1084
- --ax-sys-color-border-accent4-light-surface: 224, 229, 255;
1085
-
1086
- --ax-sys-color-accent4-surface: 134, 144, 255;
1087
- --ax-sys-color-on-accent4-surface: 18, 0, 85;
1088
- --ax-sys-color-border-accent4-surface: 180, 186, 255;
1089
-
1090
- --ax-sys-color-accent4-dark-surface: 115, 121, 255;
1091
- --ax-sys-color-on-accent4-dark-surface: 18, 0, 85;
1092
- --ax-sys-color-border-accent4-dark-surface: 161, 165, 255;
1093
-
1094
- --ax-sys-color-accent4-darker-surface: 99, 102, 241;
1095
- --ax-sys-color-on-accent4-darker-surface: 18, 0, 85;
1096
- --ax-sys-color-border-accent4-darker-surface: 141, 143, 245;
1097
-
1098
- --ax-sys-color-accent4-darkest-surface: 88, 89, 227;
1099
- --ax-sys-color-on-accent4-darkest-surface: 18, 0, 86;
1100
- --ax-sys-color-border-accent4-darkest-surface: 127, 128, 234;
1101
-
1102
- --ax-sys-color-accent5-lightest-surface: 255, 225, 241;
1103
- --ax-sys-color-on-accent5-lightest-surface: 34, 14, 26;
1104
- --ax-sys-color-border-accent5-lightest-surface: 255, 255, 255;
1105
-
1106
- --ax-sys-color-accent5-lighter-surface: 255, 200, 226;
1107
- --ax-sys-color-on-accent5-lighter-surface: 43, 5, 27;
1108
- --ax-sys-color-border-accent5-lighter-surface: 255, 246, 250;
1109
-
1110
- --ax-sys-color-accent5-light-surface: 255, 174, 211;
1111
- --ax-sys-color-on-accent5-light-surface: 51, 0, 28;
1112
- --ax-sys-color-border-accent5-light-surface: 255, 220, 236;
1113
-
1114
- --ax-sys-color-accent5-surface: 255, 113, 183;
1115
- --ax-sys-color-on-accent5-surface: 52, 0, 27;
1116
- --ax-sys-color-border-accent5-surface: 255, 159, 206;
1117
-
1118
- --ax-sys-color-accent5-dark-surface: 254, 89, 168;
1119
- --ax-sys-color-on-accent5-dark-surface: 52, 0, 25;
1120
- --ax-sys-color-border-accent5-dark-surface: 254, 135, 192;
1121
-
1122
- --ax-sys-color-accent5-darker-surface: 236, 72, 153;
1123
- --ax-sys-color-on-accent5-darker-surface: 52, 0, 25;
1124
- --ax-sys-color-border-accent5-darker-surface: 240, 114, 176;
1125
-
1126
- --ax-sys-color-accent5-darkest-surface: 218, 53, 138;
1127
- --ax-sys-color-on-accent5-darkest-surface: 52, 0, 25;
1128
- --ax-sys-color-border-accent5-darkest-surface: 225, 92, 160;
1129
-
1130
- --ax-sys-color-accent6-lightest-surface: 240, 232, 226;
1131
- --ax-sys-color-on-accent6-lightest-surface: 26, 21, 17;
1132
- --ax-sys-color-border-accent6-lightest-surface: 255, 255, 255;
1133
-
1134
- --ax-sys-color-accent6-lighter-surface: 219, 211, 206;
1135
- --ax-sys-color-on-accent6-lighter-surface: 26, 21, 17;
1136
- --ax-sys-color-border-accent6-lighter-surface: 238, 235, 232;
1137
-
1138
- --ax-sys-color-accent6-light-surface: 198, 191, 185;
1139
- --ax-sys-color-on-accent6-light-surface: 26, 21, 17;
1140
- --ax-sys-color-border-accent6-light-surface: 219, 214, 210;
1141
-
1142
- --ax-sys-color-accent6-surface: 158, 151, 146;
1143
- --ax-sys-color-on-accent6-surface: 26, 21, 17;
1144
- --ax-sys-color-border-accent6-surface: 180, 174, 170;
1145
-
1146
- --ax-sys-color-accent6-dark-surface: 139, 132, 127;
1147
- --ax-sys-color-on-accent6-dark-surface: 255, 252, 246;
1148
- --ax-sys-color-border-accent6-dark-surface: 161, 155, 151;
1149
-
1150
- --ax-sys-color-accent6-darker-surface: 120, 113, 108;
1151
- --ax-sys-color-on-accent6-darker-surface: 255, 252, 246;
1152
- --ax-sys-color-border-accent6-darker-surface: 143, 136, 131;
1153
-
1154
- --ax-sys-color-accent6-darkest-surface: 109, 103, 98;
1155
- --ax-sys-color-on-accent6-darkest-surface: 255, 252, 246;
1156
- --ax-sys-color-border-accent6-darkest-surface: 133, 126, 120;
1157
-
1158
- --ax-sys-color-bg-default: var(--ax-sys-color-darkest-surface);
1159
- --ax-sys-color-text-default: var(--ax-sys-color-on-darkest-surface);
1160
- --ax-sys-color-border-default: var(--ax-sys-color-border-darkest-surface);
1161
- }
1162
-
1163
- /*
1164
- * Re-declare light theme primitives and Tailwind color aliases for the `.ax-light` subtree.
1165
- * Mirrors the `.ax-dark` override pattern so localized light zones work inside a dark page.
1166
- */
1167
- .ax-dark .ax-light {
1168
- --ax-sys-theme-isDark: 0;
1169
- --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
1170
- --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
1171
-
1172
- --ax-sys-color-lightest-surface: 255, 255, 255;
1173
- --ax-sys-color-on-lightest-surface: 10, 10, 10;
1174
- --ax-sys-color-border-lightest-surface: 233, 233, 233;
1175
- --ax-sys-color-lighter-surface: 250, 250, 250;
1176
- --ax-sys-color-on-lighter-surface: 10, 10, 10;
1177
- --ax-sys-color-border-lighter-surface: 228, 228, 228;
1178
- --ax-sys-color-light-surface: 245, 245, 245;
1179
- --ax-sys-color-on-light-surface: 10, 10, 10;
1180
- --ax-sys-color-border-light-surface: 223, 223, 223;
1181
- --ax-sys-color-surface: 240, 240, 241;
1182
- --ax-sys-color-on-surface: 10, 10, 10;
1183
- --ax-sys-color-border-surface: 218, 218, 218;
1184
- --ax-sys-color-dark-surface: 235, 235, 236;
1185
- --ax-sys-color-on-dark-surface: 10, 10, 10;
1186
- --ax-sys-color-border-dark-surface: 213, 213, 213;
1187
- --ax-sys-color-darker-surface: 230, 230, 231;
1188
- --ax-sys-color-on-darker-surface: 10, 10, 10;
1189
- --ax-sys-color-border-darker-surface: 208, 208, 208;
1190
- --ax-sys-color-darkest-surface: 224, 224, 225;
1191
- --ax-sys-color-on-darkest-surface: 10, 10, 10;
1192
- --ax-sys-color-border-darkest-surface: 202, 202, 202;
1193
-
1194
- --ax-sys-color-primary-50: 231, 246, 255;
1195
- --ax-sys-color-primary-100: 211, 234, 255;
1196
- --ax-sys-color-primary-200: 183, 217, 255;
1197
- --ax-sys-color-primary-300: 138, 189, 255;
1198
- --ax-sys-color-primary-400: 77, 151, 255;
1199
- --ax-sys-color-primary-500: 43, 127, 255;
1200
- --ax-sys-color-primary-600: 20, 108, 235;
1201
- --ax-sys-color-primary-700: 0, 86, 210;
1202
- --ax-sys-color-primary-800: 12, 70, 182;
1203
- --ax-sys-color-primary-900: 29, 64, 142;
1204
- --ax-sys-color-primary-950: 14, 34, 84;
1205
-
1206
- --ax-sys-color-primary-lightest-surface: 211, 234, 255;
1207
- --ax-sys-color-on-primary-lightest-surface: 29, 48, 64;
1208
- --ax-sys-color-border-primary-lightest-surface: 175, 217, 255;
1209
- --ax-sys-color-primary-lighter-surface: 183, 217, 255;
1210
- --ax-sys-color-on-primary-lighter-surface: 18, 47, 77;
1211
- --ax-sys-color-border-primary-lighter-surface: 147, 198, 255;
1212
- --ax-sys-color-primary-light-surface: 138, 189, 255;
1213
- --ax-sys-color-on-primary-light-surface: 0, 44, 98;
1214
- --ax-sys-color-border-primary-light-surface: 102, 169, 255;
1215
- --ax-sys-color-primary-surface: 43, 127, 255;
1216
- --ax-sys-color-on-primary-surface: 244, 254, 255;
1217
- --ax-sys-color-border-primary-surface: 7, 105, 255;
1218
- --ax-sys-color-primary-dark-surface: 20, 108, 235;
1219
- --ax-sys-color-on-primary-dark-surface: 244, 254, 255;
1220
- --ax-sys-color-border-primary-dark-surface: 17, 93, 202;
1221
- --ax-sys-color-primary-darker-surface: 0, 86, 210;
1222
- --ax-sys-color-on-primary-darker-surface: 245, 254, 255;
1223
- --ax-sys-color-border-primary-darker-surface: 0, 71, 174;
1224
- --ax-sys-color-primary-darkest-surface: 12, 70, 182;
1225
- --ax-sys-color-on-primary-darkest-surface: 245, 254, 255;
1226
- --ax-sys-color-border-primary-darkest-surface: 10, 57, 149;
1227
-
1228
- --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
1229
- --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
1230
- --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
1231
-
1232
- --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1233
- --color-text-default: rgba(var(--ax-sys-color-text-default));
1234
- --color-border-default: rgba(var(--ax-sys-color-border-default));
1235
-
1236
- --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
1237
- --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
1238
- --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
1239
- --color-lighter: rgba(var(--ax-sys-color-lighter-surface));
1240
- --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));
1241
- --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));
1242
- --color-light: rgba(var(--ax-sys-color-light-surface));
1243
- --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1244
- --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1245
- --color-surface: rgba(var(--ax-sys-color-surface));
1246
- --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1247
- --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1248
- --color-dark: rgba(var(--ax-sys-color-dark-surface));
1249
- --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));
1250
- --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));
1251
- --color-darker: rgba(var(--ax-sys-color-darker-surface));
1252
- --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));
1253
- --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));
1254
- --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1255
- --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1256
- --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1257
-
1258
- --color-primary: rgba(var(--ax-sys-color-primary-surface));
1259
- --color-primary-50: rgba(var(--ax-sys-color-primary-50));
1260
- --color-primary-100: rgba(var(--ax-sys-color-primary-100));
1261
- --color-primary-200: rgba(var(--ax-sys-color-primary-200));
1262
- --color-primary-300: rgba(var(--ax-sys-color-primary-300));
1263
- --color-primary-400: rgba(var(--ax-sys-color-primary-400));
1264
- --color-primary-500: rgba(var(--ax-sys-color-primary-500));
1265
- --color-primary-600: rgba(var(--ax-sys-color-primary-600));
1266
- --color-primary-700: rgba(var(--ax-sys-color-primary-700));
1267
- --color-primary-800: rgba(var(--ax-sys-color-primary-800));
1268
- --color-primary-900: rgba(var(--ax-sys-color-primary-900));
1269
- --color-primary-950: rgba(var(--ax-sys-color-primary-950));
1270
- --color-primary-lightest: rgba(var(--ax-sys-color-primary-lightest-surface));
1271
- --color-on-primary-lightest: rgba(var(--ax-sys-color-on-primary-lightest-surface));
1272
- --color-border-primary-lightest: rgba(var(--ax-sys-color-border-primary-lightest-surface));
1273
- --color-primary-lighter: rgba(var(--ax-sys-color-primary-lighter-surface));
1274
- --color-on-primary-lighter: rgba(var(--ax-sys-color-on-primary-lighter-surface));
1275
- --color-border-primary-lighter: rgba(var(--ax-sys-color-border-primary-lighter-surface));
1276
- --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1277
- --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1278
- --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1279
- --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1280
- --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1281
- --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
1282
- --color-on-primary-dark: rgba(var(--ax-sys-color-on-primary-dark-surface));
1283
- --color-border-primary-dark: rgba(var(--ax-sys-color-border-primary-dark-surface));
1284
- --color-primary-darker: rgba(var(--ax-sys-color-primary-darker-surface));
1285
- --color-on-primary-darker: rgba(var(--ax-sys-color-on-primary-darker-surface));
1286
- --color-border-primary-darker: rgba(var(--ax-sys-color-border-primary-darker-surface));
1287
- --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
1288
- --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
1289
- --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
1290
- }
1291
-
1292
- /*
1293
- * Re-declare every Tailwind theme color alias for the `.ax-dark` subtree.
1294
- *
1295
- * Why this exists:
1296
- * `@theme { --color-lightest: rgba(var(--ax-sys-color-lightest-surface)); ... }`
1297
- * is emitted by Tailwind only on `:root`. Per the CSS spec, the inner
1298
- * `var(--ax-sys-color-*)` references are substituted at computed-value time
1299
- * on the declaring element (`:root`), so the resolved alias values are baked
1300
- * to the LIGHT primitives and inherited downward unchanged.
1301
- *
1302
- * Result: a sub-tree `.ax-dark` flips the `--ax-sys-color-*` primitives but
1303
- * the `--color-*` aliases (consumed by Tailwind utilities like `bg-lightest`,
1304
- * `text-on-surface`, `border-default`) stay light, and a localized dark zone
1305
- * inside an otherwise light page does not actually go dark.
1306
- *
1307
- * This block re-declares the aliases on `.ax-dark` so they are recomputed
1308
- * against the dark primitives wherever `.ax-dark` appears in the DOM.
1309
- * Pure static aliases (`--radius-default`, `--breakpoint-*`) are intentionally
1310
- * omitted because they do not depend on `--ax-sys-color-*`.
1311
- */
1312
- .ax-dark {
1313
- --ax-sys-theme-isDark: 1;
1314
- --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1315
- --color-text-default: rgba(var(--ax-sys-color-text-default));
1316
- --color-border-default: rgba(var(--ax-sys-color-border-default));
1317
-
1318
- /* Surface Surfaces */
1319
- --color-surface: rgba(var(--ax-sys-color-surface));
1320
- --color-surface-50: rgba(var(--ax-sys-color-surface-50));
1321
- --color-surface-100: rgba(var(--ax-sys-color-surface-100));
1322
- --color-surface-200: rgba(var(--ax-sys-color-surface-200));
1323
- --color-surface-300: rgba(var(--ax-sys-color-surface-300));
1324
- --color-surface-400: rgba(var(--ax-sys-color-surface-400));
1325
- --color-surface-500: rgba(var(--ax-sys-color-surface-500));
1326
- --color-surface-600: rgba(var(--ax-sys-color-surface-600));
1327
- --color-surface-700: rgba(var(--ax-sys-color-surface-700));
1328
- --color-surface-800: rgba(var(--ax-sys-color-surface-800));
1329
- --color-surface-900: rgba(var(--ax-sys-color-surface-900));
1330
- --color-surface-950: rgba(var(--ax-sys-color-surface-950));
1331
-
1332
- --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
1333
- --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
1334
- --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
1335
- --color-lighter: rgba(var(--ax-sys-color-lighter-surface));
1336
- --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));
1337
- --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));
1338
- --color-light: rgba(var(--ax-sys-color-light-surface));
1339
- --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1340
- --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1341
- --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1342
- --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1343
- --color-dark: rgba(var(--ax-sys-color-dark-surface));
1344
- --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));
1345
- --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));
1346
- --color-darker: rgba(var(--ax-sys-color-darker-surface));
1347
- --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));
1348
- --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));
1349
- --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1350
- --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1351
- --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1352
-
1353
- /* Primary Surfaces */
1354
- --color-primary: rgba(var(--ax-sys-color-primary-surface));
1355
- --color-primary-50: rgba(var(--ax-sys-color-primary-50));
1356
- --color-primary-100: rgba(var(--ax-sys-color-primary-100));
1357
- --color-primary-200: rgba(var(--ax-sys-color-primary-200));
1358
- --color-primary-300: rgba(var(--ax-sys-color-primary-300));
1359
- --color-primary-400: rgba(var(--ax-sys-color-primary-400));
1360
- --color-primary-500: rgba(var(--ax-sys-color-primary-500));
1361
- --color-primary-600: rgba(var(--ax-sys-color-primary-600));
1362
- --color-primary-700: rgba(var(--ax-sys-color-primary-700));
1363
- --color-primary-800: rgba(var(--ax-sys-color-primary-800));
1364
- --color-primary-900: rgba(var(--ax-sys-color-primary-900));
1365
- --color-primary-950: rgba(var(--ax-sys-color-primary-950));
1366
-
1367
- --color-primary-lightest: rgba(var(--ax-sys-color-primary-lightest-surface));
1368
- --color-on-primary-lightest: rgba(var(--ax-sys-color-on-primary-lightest-surface));
1369
- --color-border-primary-lightest: rgba(var(--ax-sys-color-border-primary-lightest-surface));
1370
- --color-primary-lighter: rgba(var(--ax-sys-color-primary-lighter-surface));
1371
- --color-on-primary-lighter: rgba(var(--ax-sys-color-on-primary-lighter-surface));
1372
- --color-border-primary-lighter: rgba(var(--ax-sys-color-border-primary-lighter-surface));
1373
- --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1374
- --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1375
- --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1376
- --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1377
- --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1378
- --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
1379
- --color-on-primary-dark: rgba(var(--ax-sys-color-on-primary-dark-surface));
1380
- --color-border-primary-dark: rgba(var(--ax-sys-color-border-primary-dark-surface));
1381
- --color-primary-darker: rgba(var(--ax-sys-color-primary-darker-surface));
1382
- --color-on-primary-darker: rgba(var(--ax-sys-color-on-primary-darker-surface));
1383
- --color-border-primary-darker: rgba(var(--ax-sys-color-border-primary-darker-surface));
1384
- --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
1385
- --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
1386
- --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
1387
-
1388
- /* Secondary Surfaces */
1389
- --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1390
- --color-secondary-50: rgba(var(--ax-sys-color-secondary-50));
1391
- --color-secondary-100: rgba(var(--ax-sys-color-secondary-100));
1392
- --color-secondary-200: rgba(var(--ax-sys-color-secondary-200));
1393
- --color-secondary-300: rgba(var(--ax-sys-color-secondary-300));
1394
- --color-secondary-400: rgba(var(--ax-sys-color-secondary-400));
1395
- --color-secondary-500: rgba(var(--ax-sys-color-secondary-500));
1396
- --color-secondary-600: rgba(var(--ax-sys-color-secondary-600));
1397
- --color-secondary-700: rgba(var(--ax-sys-color-secondary-700));
1398
- --color-secondary-800: rgba(var(--ax-sys-color-secondary-800));
1399
- --color-secondary-900: rgba(var(--ax-sys-color-secondary-900));
1400
- --color-secondary-950: rgba(var(--ax-sys-color-secondary-950));
1401
-
1402
- --color-secondary-lightest: rgba(var(--ax-sys-color-secondary-lightest-surface));
1403
- --color-on-secondary-lightest: rgba(var(--ax-sys-color-on-secondary-lightest-surface));
1404
- --color-border-secondary-lightest: rgba(var(--ax-sys-color-border-secondary-lightest-surface));
1405
- --color-secondary-lighter: rgba(var(--ax-sys-color-secondary-lighter-surface));
1406
- --color-on-secondary-lighter: rgba(var(--ax-sys-color-on-secondary-lighter-surface));
1407
- --color-border-secondary-lighter: rgba(var(--ax-sys-color-border-secondary-lighter-surface));
1408
- --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
1409
- --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
1410
- --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
1411
- --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
1412
- --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
1413
- --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
1414
- --color-on-secondary-dark: rgba(var(--ax-sys-color-on-secondary-dark-surface));
1415
- --color-border-secondary-dark: rgba(var(--ax-sys-color-border-secondary-dark-surface));
1416
- --color-secondary-darker: rgba(var(--ax-sys-color-secondary-darker-surface));
1417
- --color-on-secondary-darker: rgba(var(--ax-sys-color-on-secondary-darker-surface));
1418
- --color-border-secondary-darker: rgba(var(--ax-sys-color-border-secondary-darker-surface));
1419
- --color-secondary-darkest: rgba(var(--ax-sys-color-secondary-darkest-surface));
1420
- --color-on-secondary-darkest: rgba(var(--ax-sys-color-on-secondary-darkest-surface));
1421
- --color-border-secondary-darkest: rgba(var(--ax-sys-color-border-secondary-darkest-surface));
1422
-
1423
- /* Success Surfaces */
1424
- --color-success: rgba(var(--ax-sys-color-success-surface));
1425
- --color-success-50: rgba(var(--ax-sys-color-success-50));
1426
- --color-success-100: rgba(var(--ax-sys-color-success-100));
1427
- --color-success-200: rgba(var(--ax-sys-color-success-200));
1428
- --color-success-300: rgba(var(--ax-sys-color-success-300));
1429
- --color-success-400: rgba(var(--ax-sys-color-success-400));
1430
- --color-success-500: rgba(var(--ax-sys-color-success-500));
1431
- --color-success-600: rgba(var(--ax-sys-color-success-600));
1432
- --color-success-700: rgba(var(--ax-sys-color-success-700));
1433
- --color-success-800: rgba(var(--ax-sys-color-success-800));
1434
- --color-success-900: rgba(var(--ax-sys-color-success-900));
1435
- --color-success-950: rgba(var(--ax-sys-color-success-950));
1436
-
1437
- --color-success-lightest: rgba(var(--ax-sys-color-success-lightest-surface));
1438
- --color-on-success-lightest: rgba(var(--ax-sys-color-on-success-lightest-surface));
1439
- --color-border-success-lightest: rgba(var(--ax-sys-color-border-success-lightest-surface));
1440
- --color-success-lighter: rgba(var(--ax-sys-color-success-lighter-surface));
1441
- --color-on-success-lighter: rgba(var(--ax-sys-color-on-success-lighter-surface));
1442
- --color-border-success-lighter: rgba(var(--ax-sys-color-border-success-lighter-surface));
1443
- --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
1444
- --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
1445
- --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
1446
- --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
1447
- --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
1448
- --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
1449
- --color-on-success-dark: rgba(var(--ax-sys-color-on-success-dark-surface));
1450
- --color-border-success-dark: rgba(var(--ax-sys-color-border-success-dark-surface));
1451
- --color-success-darker: rgba(var(--ax-sys-color-success-darker-surface));
1452
- --color-on-success-darker: rgba(var(--ax-sys-color-on-success-darker-surface));
1453
- --color-border-success-darker: rgba(var(--ax-sys-color-border-success-darker-surface));
1454
- --color-success-darkest: rgba(var(--ax-sys-color-success-darkest-surface));
1455
- --color-on-success-darkest: rgba(var(--ax-sys-color-on-success-darkest-surface));
1456
- --color-border-success-darkest: rgba(var(--ax-sys-color-border-success-darkest-surface));
1457
-
1458
- /* Warning Surfaces */
1459
- --color-warning: rgba(var(--ax-sys-color-warning-surface));
1460
- --color-warning-50: rgba(var(--ax-sys-color-warning-50));
1461
- --color-warning-100: rgba(var(--ax-sys-color-warning-100));
1462
- --color-warning-200: rgba(var(--ax-sys-color-warning-200));
1463
- --color-warning-300: rgba(var(--ax-sys-color-warning-300));
1464
- --color-warning-400: rgba(var(--ax-sys-color-warning-400));
1465
- --color-warning-500: rgba(var(--ax-sys-color-warning-500));
1466
- --color-warning-600: rgba(var(--ax-sys-color-warning-600));
1467
- --color-warning-700: rgba(var(--ax-sys-color-warning-700));
1468
- --color-warning-800: rgba(var(--ax-sys-color-warning-800));
1469
- --color-warning-900: rgba(var(--ax-sys-color-warning-900));
1470
- --color-warning-950: rgba(var(--ax-sys-color-warning-950));
1471
-
1472
- --color-warning-lightest: rgba(var(--ax-sys-color-warning-lightest-surface));
1473
- --color-on-warning-lightest: rgba(var(--ax-sys-color-on-warning-lightest-surface));
1474
- --color-border-warning-lightest: rgba(var(--ax-sys-color-border-warning-lightest-surface));
1475
- --color-warning-lighter: rgba(var(--ax-sys-color-warning-lighter-surface));
1476
- --color-on-warning-lighter: rgba(var(--ax-sys-color-on-warning-lighter-surface));
1477
- --color-border-warning-lighter: rgba(var(--ax-sys-color-border-warning-lighter-surface));
1478
- --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
1479
- --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
1480
- --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
1481
- --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
1482
- --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
1483
- --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
1484
- --color-on-warning-dark: rgba(var(--ax-sys-color-on-warning-dark-surface));
1485
- --color-border-warning-dark: rgba(var(--ax-sys-color-border-warning-dark-surface));
1486
- --color-warning-darker: rgba(var(--ax-sys-color-warning-darker-surface));
1487
- --color-on-warning-darker: rgba(var(--ax-sys-color-on-warning-darker-surface));
1488
- --color-border-warning-darker: rgba(var(--ax-sys-color-border-warning-darker-surface));
1489
- --color-warning-darkest: rgba(var(--ax-sys-color-warning-darkest-surface));
1490
- --color-on-warning-darkest: rgba(var(--ax-sys-color-on-warning-darkest-surface));
1491
- --color-border-warning-darkest: rgba(var(--ax-sys-color-border-warning-darkest-surface));
1492
-
1493
- /* Danger Surfaces */
1494
- --color-danger: rgba(var(--ax-sys-color-danger-surface));
1495
- --color-danger-50: rgba(var(--ax-sys-color-danger-50));
1496
- --color-danger-100: rgba(var(--ax-sys-color-danger-100));
1497
- --color-danger-200: rgba(var(--ax-sys-color-danger-200));
1498
- --color-danger-300: rgba(var(--ax-sys-color-danger-300));
1499
- --color-danger-400: rgba(var(--ax-sys-color-danger-400));
1500
- --color-danger-500: rgba(var(--ax-sys-color-danger-500));
1501
- --color-danger-600: rgba(var(--ax-sys-color-danger-600));
1502
- --color-danger-700: rgba(var(--ax-sys-color-danger-700));
1503
- --color-danger-800: rgba(var(--ax-sys-color-danger-800));
1504
- --color-danger-900: rgba(var(--ax-sys-color-danger-900));
1505
- --color-danger-950: rgba(var(--ax-sys-color-danger-950));
1506
-
1507
- --color-danger-lightest: rgba(var(--ax-sys-color-danger-lightest-surface));
1508
- --color-on-danger-lightest: rgba(var(--ax-sys-color-on-danger-lightest-surface));
1509
- --color-border-danger-lightest: rgba(var(--ax-sys-color-border-danger-lightest-surface));
1510
- --color-danger-lighter: rgba(var(--ax-sys-color-danger-lighter-surface));
1511
- --color-on-danger-lighter: rgba(var(--ax-sys-color-on-danger-lighter-surface));
1512
- --color-border-danger-lighter: rgba(var(--ax-sys-color-border-danger-lighter-surface));
1513
- --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
1514
- --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
1515
- --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
1516
- --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
1517
- --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
1518
- --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
1519
- --color-on-danger-dark: rgba(var(--ax-sys-color-on-danger-dark-surface));
1520
- --color-border-danger-dark: rgba(var(--ax-sys-color-border-danger-dark-surface));
1521
- --color-danger-darker: rgba(var(--ax-sys-color-danger-darker-surface));
1522
- --color-on-danger-darker: rgba(var(--ax-sys-color-on-danger-darker-surface));
1523
- --color-border-danger-darker: rgba(var(--ax-sys-color-border-danger-darker-surface));
1524
- --color-danger-darkest: rgba(var(--ax-sys-color-danger-darkest-surface));
1525
- --color-on-danger-darkest: rgba(var(--ax-sys-color-on-danger-darkest-surface));
1526
- --color-border-danger-darkest: rgba(var(--ax-sys-color-border-danger-darkest-surface));
1527
-
1528
- /* Accent Surfaces */
1529
- --color-accent: rgba(var(--ax-sys-color-accent-surface));
1530
- --color-accent-50: rgba(var(--ax-sys-color-accent-50));
1531
- --color-accent-100: rgba(var(--ax-sys-color-accent-100));
1532
- --color-accent-200: rgba(var(--ax-sys-color-accent-200));
1533
- --color-accent-300: rgba(var(--ax-sys-color-accent-300));
1534
- --color-accent-400: rgba(var(--ax-sys-color-accent-400));
1535
- --color-accent-500: rgba(var(--ax-sys-color-accent-500));
1536
- --color-accent-600: rgba(var(--ax-sys-color-accent-600));
1537
- --color-accent-700: rgba(var(--ax-sys-color-accent-700));
1538
- --color-accent-800: rgba(var(--ax-sys-color-accent-800));
1539
- --color-accent-900: rgba(var(--ax-sys-color-accent-900));
1540
- --color-accent-950: rgba(var(--ax-sys-color-accent-950));
1541
-
1542
- --color-accent-lightest: rgba(var(--ax-sys-color-accent-lightest-surface));
1543
- --color-on-accent-lightest: rgba(var(--ax-sys-color-on-accent-lightest-surface));
1544
- --color-border-accent-lightest: rgba(var(--ax-sys-color-border-accent-lightest-surface));
1545
- --color-accent-lighter: rgba(var(--ax-sys-color-accent-lighter-surface));
1546
- --color-on-accent-lighter: rgba(var(--ax-sys-color-on-accent-lighter-surface));
1547
- --color-border-accent-lighter: rgba(var(--ax-sys-color-border-accent-lighter-surface));
1548
- --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
1549
- --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
1550
- --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
1551
- --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
1552
- --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
1553
- --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
1554
- --color-on-accent-dark: rgba(var(--ax-sys-color-on-accent-dark-surface));
1555
- --color-border-accent-dark: rgba(var(--ax-sys-color-border-accent-dark-surface));
1556
- --color-accent-darker: rgba(var(--ax-sys-color-accent-darker-surface));
1557
- --color-on-accent-darker: rgba(var(--ax-sys-color-on-accent-darker-surface));
1558
- --color-border-accent-darker: rgba(var(--ax-sys-color-border-accent-darker-surface));
1559
- --color-accent-darkest: rgba(var(--ax-sys-color-accent-darkest-surface));
1560
- --color-on-accent-darkest: rgba(var(--ax-sys-color-on-accent-darkest-surface));
1561
- --color-border-accent-darkest: rgba(var(--ax-sys-color-border-accent-darkest-surface));
1562
-
1563
- /* Accent 1 Surfaces */
1564
- --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
1565
- --color-accent1-50: rgba(var(--ax-sys-color-accent1-50));
1566
- --color-accent1-100: rgba(var(--ax-sys-color-accent1-100));
1567
- --color-accent1-200: rgba(var(--ax-sys-color-accent1-200));
1568
- --color-accent1-300: rgba(var(--ax-sys-color-accent1-300));
1569
- --color-accent1-400: rgba(var(--ax-sys-color-accent1-400));
1570
- --color-accent1-500: rgba(var(--ax-sys-color-accent1-500));
1571
- --color-accent1-600: rgba(var(--ax-sys-color-accent1-600));
1572
- --color-accent1-700: rgba(var(--ax-sys-color-accent1-700));
1573
- --color-accent1-800: rgba(var(--ax-sys-color-accent1-800));
1574
- --color-accent1-900: rgba(var(--ax-sys-color-accent1-900));
1575
- --color-accent1-950: rgba(var(--ax-sys-color-accent1-950));
1576
-
1577
- --color-accent1-lightest: rgba(var(--ax-sys-color-accent1-lightest-surface));
1578
- --color-on-accent1-lightest: rgba(var(--ax-sys-color-on-accent1-lightest-surface));
1579
- --color-border-accent1-lightest: rgba(var(--ax-sys-color-border-accent1-lightest-surface));
1580
- --color-accent1-lighter: rgba(var(--ax-sys-color-accent1-lighter-surface));
1581
- --color-on-accent1-lighter: rgba(var(--ax-sys-color-on-accent1-lighter-surface));
1582
- --color-border-accent1-lighter: rgba(var(--ax-sys-color-border-accent1-lighter-surface));
1583
- --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
1584
- --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
1585
- --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
1586
- --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
1587
- --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
1588
- --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
1589
- --color-on-accent1-dark: rgba(var(--ax-sys-color-on-accent1-dark-surface));
1590
- --color-border-accent1-dark: rgba(var(--ax-sys-color-border-accent1-dark-surface));
1591
- --color-accent1-darker: rgba(var(--ax-sys-color-accent1-darker-surface));
1592
- --color-on-accent1-darker: rgba(var(--ax-sys-color-on-accent1-darker-surface));
1593
- --color-border-accent1-darker: rgba(var(--ax-sys-color-border-accent1-darker-surface));
1594
- --color-accent1-darkest: rgba(var(--ax-sys-color-accent1-darkest-surface));
1595
- --color-on-accent1-darkest: rgba(var(--ax-sys-color-on-accent1-darkest-surface));
1596
- --color-border-accent1-darkest: rgba(var(--ax-sys-color-border-accent1-darkest-surface));
1597
-
1598
- /* Accent 2 Surfaces */
1599
- --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
1600
- --color-accent2-50: rgba(var(--ax-sys-color-accent2-50));
1601
- --color-accent2-100: rgba(var(--ax-sys-color-accent2-100));
1602
- --color-accent2-200: rgba(var(--ax-sys-color-accent2-200));
1603
- --color-accent2-300: rgba(var(--ax-sys-color-accent2-300));
1604
- --color-accent2-400: rgba(var(--ax-sys-color-accent2-400));
1605
- --color-accent2-500: rgba(var(--ax-sys-color-accent2-500));
1606
- --color-accent2-600: rgba(var(--ax-sys-color-accent2-600));
1607
- --color-accent2-700: rgba(var(--ax-sys-color-accent2-700));
1608
- --color-accent2-800: rgba(var(--ax-sys-color-accent2-800));
1609
- --color-accent2-900: rgba(var(--ax-sys-color-accent2-900));
1610
- --color-accent2-950: rgba(var(--ax-sys-color-accent2-950));
1611
-
1612
- --color-accent2-lightest: rgba(var(--ax-sys-color-accent2-lightest-surface));
1613
- --color-on-accent2-lightest: rgba(var(--ax-sys-color-on-accent2-lightest-surface));
1614
- --color-border-accent2-lightest: rgba(var(--ax-sys-color-border-accent2-lightest-surface));
1615
- --color-accent2-lighter: rgba(var(--ax-sys-color-accent2-lighter-surface));
1616
- --color-on-accent2-lighter: rgba(var(--ax-sys-color-on-accent2-lighter-surface));
1617
- --color-border-accent2-lighter: rgba(var(--ax-sys-color-border-accent2-lighter-surface));
1618
- --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
1619
- --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
1620
- --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
1621
- --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
1622
- --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
1623
- --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
1624
- --color-on-accent2-dark: rgba(var(--ax-sys-color-on-accent2-dark-surface));
1625
- --color-border-accent2-dark: rgba(var(--ax-sys-color-border-accent2-dark-surface));
1626
- --color-accent2-darker: rgba(var(--ax-sys-color-accent2-darker-surface));
1627
- --color-on-accent2-darker: rgba(var(--ax-sys-color-on-accent2-darker-surface));
1628
- --color-border-accent2-darker: rgba(var(--ax-sys-color-border-accent2-darker-surface));
1629
- --color-accent2-darkest: rgba(var(--ax-sys-color-accent2-darkest-surface));
1630
- --color-on-accent2-darkest: rgba(var(--ax-sys-color-on-accent2-darkest-surface));
1631
- --color-border-accent2-darkest: rgba(var(--ax-sys-color-border-accent2-darkest-surface));
1632
-
1633
- /* Accent 3 Surfaces */
1634
- --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
1635
- --color-accent3-50: rgba(var(--ax-sys-color-accent3-50));
1636
- --color-accent3-100: rgba(var(--ax-sys-color-accent3-100));
1637
- --color-accent3-200: rgba(var(--ax-sys-color-accent3-200));
1638
- --color-accent3-300: rgba(var(--ax-sys-color-accent3-300));
1639
- --color-accent3-400: rgba(var(--ax-sys-color-accent3-400));
1640
- --color-accent3-500: rgba(var(--ax-sys-color-accent3-500));
1641
- --color-accent3-600: rgba(var(--ax-sys-color-accent3-600));
1642
- --color-accent3-700: rgba(var(--ax-sys-color-accent3-700));
1643
- --color-accent3-800: rgba(var(--ax-sys-color-accent3-800));
1644
- --color-accent3-900: rgba(var(--ax-sys-color-accent3-900));
1645
- --color-accent3-950: rgba(var(--ax-sys-color-accent3-950));
1646
-
1647
- --color-accent3-lightest: rgba(var(--ax-sys-color-accent3-lightest-surface));
1648
- --color-on-accent3-lightest: rgba(var(--ax-sys-color-on-accent3-lightest-surface));
1649
- --color-border-accent3-lightest: rgba(var(--ax-sys-color-border-accent3-lightest-surface));
1650
- --color-accent3-lighter: rgba(var(--ax-sys-color-accent3-lighter-surface));
1651
- --color-on-accent3-lighter: rgba(var(--ax-sys-color-on-accent3-lighter-surface));
1652
- --color-border-accent3-lighter: rgba(var(--ax-sys-color-border-accent3-lighter-surface));
1653
- --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
1654
- --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
1655
- --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
1656
- --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
1657
- --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
1658
- --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
1659
- --color-on-accent3-dark: rgba(var(--ax-sys-color-on-accent3-dark-surface));
1660
- --color-border-accent3-dark: rgba(var(--ax-sys-color-border-accent3-dark-surface));
1661
- --color-accent3-darker: rgba(var(--ax-sys-color-accent3-darker-surface));
1662
- --color-on-accent3-darker: rgba(var(--ax-sys-color-on-accent3-darker-surface));
1663
- --color-border-accent3-darker: rgba(var(--ax-sys-color-border-accent3-darker-surface));
1664
- --color-accent3-darkest: rgba(var(--ax-sys-color-accent3-darkest-surface));
1665
- --color-on-accent3-darkest: rgba(var(--ax-sys-color-on-accent3-darkest-surface));
1666
- --color-border-accent3-darkest: rgba(var(--ax-sys-color-border-accent3-darkest-surface));
1667
-
1668
- /* Accent 4 Surfaces */
1669
- --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
1670
- --color-accent4-50: rgba(var(--ax-sys-color-accent4-50));
1671
- --color-accent4-100: rgba(var(--ax-sys-color-accent4-100));
1672
- --color-accent4-200: rgba(var(--ax-sys-color-accent4-200));
1673
- --color-accent4-300: rgba(var(--ax-sys-color-accent4-300));
1674
- --color-accent4-400: rgba(var(--ax-sys-color-accent4-400));
1675
- --color-accent4-500: rgba(var(--ax-sys-color-accent4-500));
1676
- --color-accent4-600: rgba(var(--ax-sys-color-accent4-600));
1677
- --color-accent4-700: rgba(var(--ax-sys-color-accent4-700));
1678
- --color-accent4-800: rgba(var(--ax-sys-color-accent4-800));
1679
- --color-accent4-900: rgba(var(--ax-sys-color-accent4-900));
1680
- --color-accent4-950: rgba(var(--ax-sys-color-accent4-950));
1681
-
1682
- --color-accent4-lightest: rgba(var(--ax-sys-color-accent4-lightest-surface));
1683
- --color-on-accent4-lightest: rgba(var(--ax-sys-color-on-accent4-lightest-surface));
1684
- --color-border-accent4-lightest: rgba(var(--ax-sys-color-border-accent4-lightest-surface));
1685
- --color-accent4-lighter: rgba(var(--ax-sys-color-accent4-lighter-surface));
1686
- --color-on-accent4-lighter: rgba(var(--ax-sys-color-on-accent4-lighter-surface));
1687
- --color-border-accent4-lighter: rgba(var(--ax-sys-color-border-accent4-lighter-surface));
1688
- --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
1689
- --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
1690
- --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
1691
- --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
1692
- --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
1693
- --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
1694
- --color-on-accent4-dark: rgba(var(--ax-sys-color-on-accent4-dark-surface));
1695
- --color-border-accent4-dark: rgba(var(--ax-sys-color-border-accent4-dark-surface));
1696
- --color-accent4-darker: rgba(var(--ax-sys-color-accent4-darker-surface));
1697
- --color-on-accent4-darker: rgba(var(--ax-sys-color-on-accent4-darker-surface));
1698
- --color-border-accent4-darker: rgba(var(--ax-sys-color-border-accent4-darker-surface));
1699
- --color-accent4-darkest: rgba(var(--ax-sys-color-accent4-darkest-surface));
1700
- --color-on-accent4-darkest: rgba(var(--ax-sys-color-on-accent4-darkest-surface));
1701
- --color-border-accent4-darkest: rgba(var(--ax-sys-color-border-accent4-darkest-surface));
1702
-
1703
- /* Accent 5 Surfaces */
1704
- --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
1705
- --color-accent5-50: rgba(var(--ax-sys-color-accent5-50));
1706
- --color-accent5-100: rgba(var(--ax-sys-color-accent5-100));
1707
- --color-accent5-200: rgba(var(--ax-sys-color-accent5-200));
1708
- --color-accent5-300: rgba(var(--ax-sys-color-accent5-300));
1709
- --color-accent5-400: rgba(var(--ax-sys-color-accent5-400));
1710
- --color-accent5-500: rgba(var(--ax-sys-color-accent5-500));
1711
- --color-accent5-600: rgba(var(--ax-sys-color-accent5-600));
1712
- --color-accent5-700: rgba(var(--ax-sys-color-accent5-700));
1713
- --color-accent5-800: rgba(var(--ax-sys-color-accent5-800));
1714
- --color-accent5-900: rgba(var(--ax-sys-color-accent5-900));
1715
- --color-accent5-950: rgba(var(--ax-sys-color-accent5-950));
1716
-
1717
- --color-accent5-lightest: rgba(var(--ax-sys-color-accent5-lightest-surface));
1718
- --color-on-accent5-lightest: rgba(var(--ax-sys-color-on-accent5-lightest-surface));
1719
- --color-border-accent5-lightest: rgba(var(--ax-sys-color-border-accent5-lightest-surface));
1720
- --color-accent5-lighter: rgba(var(--ax-sys-color-accent5-lighter-surface));
1721
- --color-on-accent5-lighter: rgba(var(--ax-sys-color-on-accent5-lighter-surface));
1722
- --color-border-accent5-lighter: rgba(var(--ax-sys-color-border-accent5-lighter-surface));
1723
- --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
1724
- --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
1725
- --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
1726
- --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
1727
- --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
1728
- --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
1729
- --color-on-accent5-dark: rgba(var(--ax-sys-color-on-accent5-dark-surface));
1730
- --color-border-accent5-dark: rgba(var(--ax-sys-color-border-accent5-dark-surface));
1731
- --color-accent5-darker: rgba(var(--ax-sys-color-accent5-darker-surface));
1732
- --color-on-accent5-darker: rgba(var(--ax-sys-color-on-accent5-darker-surface));
1733
- --color-border-accent5-darker: rgba(var(--ax-sys-color-border-accent5-darker-surface));
1734
- --color-accent5-darkest: rgba(var(--ax-sys-color-accent5-darkest-surface));
1735
- --color-on-accent5-darkest: rgba(var(--ax-sys-color-on-accent5-darkest-surface));
1736
- --color-border-accent5-darkest: rgba(var(--ax-sys-color-border-accent5-darkest-surface));
1737
-
1738
- /* Accent 6 Surfaces */
1739
- --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
1740
- --color-accent6-50: rgba(var(--ax-sys-color-accent6-50));
1741
- --color-accent6-100: rgba(var(--ax-sys-color-accent6-100));
1742
- --color-accent6-200: rgba(var(--ax-sys-color-accent6-200));
1743
- --color-accent6-300: rgba(var(--ax-sys-color-accent6-300));
1744
- --color-accent6-400: rgba(var(--ax-sys-color-accent6-400));
1745
- --color-accent6-500: rgba(var(--ax-sys-color-accent6-500));
1746
- --color-accent6-600: rgba(var(--ax-sys-color-accent6-600));
1747
- --color-accent6-700: rgba(var(--ax-sys-color-accent6-700));
1748
- --color-accent6-800: rgba(var(--ax-sys-color-accent6-800));
1749
- --color-accent6-900: rgba(var(--ax-sys-color-accent6-900));
1750
- --color-accent6-950: rgba(var(--ax-sys-color-accent6-950));
1751
-
1752
- --color-accent6-lightest: rgba(var(--ax-sys-color-accent6-lightest-surface));
1753
- --color-on-accent6-lightest: rgba(var(--ax-sys-color-on-accent6-lightest-surface));
1754
- --color-border-accent6-lightest: rgba(var(--ax-sys-color-border-accent6-lightest-surface));
1755
- --color-accent6-lighter: rgba(var(--ax-sys-color-accent6-lighter-surface));
1756
- --color-on-accent6-lighter: rgba(var(--ax-sys-color-on-accent6-lighter-surface));
1757
- --color-border-accent6-lighter: rgba(var(--ax-sys-color-border-accent6-lighter-surface));
1758
- --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
1759
- --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
1760
- --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
1761
- --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
1762
- --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
1763
- --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
1764
- --color-on-accent6-dark: rgba(var(--ax-sys-color-on-accent6-dark-surface));
1765
- --color-border-accent6-dark: rgba(var(--ax-sys-color-border-accent6-dark-surface));
1766
- --color-accent6-darker: rgba(var(--ax-sys-color-accent6-darker-surface));
1767
- --color-on-accent6-darker: rgba(var(--ax-sys-color-on-accent6-darker-surface));
1768
- --color-border-accent6-darker: rgba(var(--ax-sys-color-border-accent6-darker-surface));
1769
- --color-accent6-darkest: rgba(var(--ax-sys-color-accent6-darkest-surface));
1770
- --color-on-accent6-darkest: rgba(var(--ax-sys-color-on-accent6-darkest-surface));
1771
- --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
1772
- }
1773
-
1774
- @theme inline {
1775
- --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1776
- --color-text-default: rgba(var(--ax-sys-color-text-default));
1777
- --color-border-default: rgba(var(--ax-sys-color-border-default));
1778
- --radius-default: var(--ax-sys-border-radius);
1779
- --breakpoint-3xl: 1920px;
1780
- --breakpoint-4xl: 2560px;
1781
- /* Surface Surfaces */
1782
- --color-surface: rgba(var(--ax-sys-color-surface));
1783
- --color-surface-50: rgba(var(--ax-sys-color-surface-50));
1784
- --color-surface-100: rgba(var(--ax-sys-color-surface-100));
1785
- --color-surface-200: rgba(var(--ax-sys-color-surface-200));
1786
- --color-surface-300: rgba(var(--ax-sys-color-surface-300));
1787
- --color-surface-400: rgba(var(--ax-sys-color-surface-400));
1788
- --color-surface-500: rgba(var(--ax-sys-color-surface-500));
1789
- --color-surface-600: rgba(var(--ax-sys-color-surface-600));
1790
- --color-surface-700: rgba(var(--ax-sys-color-surface-700));
1791
- --color-surface-800: rgba(var(--ax-sys-color-surface-800));
1792
- --color-surface-900: rgba(var(--ax-sys-color-surface-900));
1793
- --color-surface-950: rgba(var(--ax-sys-color-surface-950));
1794
-
1795
- --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
1796
- --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
1797
- --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
1798
- --color-lighter: rgba(var(--ax-sys-color-lighter-surface));
1799
- --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));
1800
- --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));
1801
- --color-light: rgba(var(--ax-sys-color-light-surface));
1802
- --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
1803
- --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1804
- --color-surface: rgba(var(--ax-sys-color-surface));
1805
- --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1806
- --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1807
- --color-dark: rgba(var(--ax-sys-color-dark-surface));
1808
- --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));
1809
- --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));
1810
- --color-darker: rgba(var(--ax-sys-color-darker-surface));
1811
- --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));
1812
- --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));
1813
- --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
1814
- --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
1815
- --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1816
- /* Primary Surfaces */
1817
- --color-primary: rgba(var(--ax-sys-color-primary-surface));
1818
- --color-primary-50: rgba(var(--ax-sys-color-primary-50));
1819
- --color-primary-100: rgba(var(--ax-sys-color-primary-100));
1820
- --color-primary-200: rgba(var(--ax-sys-color-primary-200));
1821
- --color-primary-300: rgba(var(--ax-sys-color-primary-300));
1822
- --color-primary-400: rgba(var(--ax-sys-color-primary-400));
1823
- --color-primary-500: rgba(var(--ax-sys-color-primary-500));
1824
- --color-primary-600: rgba(var(--ax-sys-color-primary-600));
1825
- --color-primary-700: rgba(var(--ax-sys-color-primary-700));
1826
- --color-primary-800: rgba(var(--ax-sys-color-primary-800));
1827
- --color-primary-900: rgba(var(--ax-sys-color-primary-900));
1828
- --color-primary-950: rgba(var(--ax-sys-color-primary-950));
1829
-
1830
- --color-primary-lightest: rgba(var(--ax-sys-color-primary-lightest-surface));
1831
- --color-on-primary-lightest: rgba(var(--ax-sys-color-on-primary-lightest-surface));
1832
- --color-border-primary-lightest: rgba(var(--ax-sys-color-border-primary-lightest-surface));
1833
- --color-primary-lighter: rgba(var(--ax-sys-color-primary-lighter-surface));
1834
- --color-on-primary-lighter: rgba(var(--ax-sys-color-on-primary-lighter-surface));
1835
- --color-border-primary-lighter: rgba(var(--ax-sys-color-border-primary-lighter-surface));
1836
- --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
1837
- --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
1838
- --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
1839
- --color-primary: rgba(var(--ax-sys-color-primary-surface));
1840
- --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
1841
- --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
1842
- --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
1843
- --color-on-primary-dark: rgba(var(--ax-sys-color-on-primary-dark-surface));
1844
- --color-border-primary-dark: rgba(var(--ax-sys-color-border-primary-dark-surface));
1845
- --color-primary-darker: rgba(var(--ax-sys-color-primary-darker-surface));
1846
- --color-on-primary-darker: rgba(var(--ax-sys-color-on-primary-darker-surface));
1847
- --color-border-primary-darker: rgba(var(--ax-sys-color-border-primary-darker-surface));
1848
- --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
1849
- --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
1850
- --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
1851
-
1852
- /* Secondary Surfaces */
1853
- --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1854
- --color-secondary-50: rgba(var(--ax-sys-color-secondary-50));
1855
- --color-secondary-100: rgba(var(--ax-sys-color-secondary-100));
1856
- --color-secondary-200: rgba(var(--ax-sys-color-secondary-200));
1857
- --color-secondary-300: rgba(var(--ax-sys-color-secondary-300));
1858
- --color-secondary-400: rgba(var(--ax-sys-color-secondary-400));
1859
- --color-secondary-500: rgba(var(--ax-sys-color-secondary-500));
1860
- --color-secondary-600: rgba(var(--ax-sys-color-secondary-600));
1861
- --color-secondary-700: rgba(var(--ax-sys-color-secondary-700));
1862
- --color-secondary-800: rgba(var(--ax-sys-color-secondary-800));
1863
- --color-secondary-900: rgba(var(--ax-sys-color-secondary-900));
1864
- --color-secondary-950: rgba(var(--ax-sys-color-secondary-950));
1865
-
1866
- --color-secondary-lightest: rgba(var(--ax-sys-color-secondary-lightest-surface));
1867
- --color-on-secondary-lightest: rgba(var(--ax-sys-color-on-secondary-lightest-surface));
1868
- --color-border-secondary-lightest: rgba(var(--ax-sys-color-border-secondary-lightest-surface));
1869
- --color-secondary-lighter: rgba(var(--ax-sys-color-secondary-lighter-surface));
1870
- --color-on-secondary-lighter: rgba(var(--ax-sys-color-on-secondary-lighter-surface));
1871
- --color-border-secondary-lighter: rgba(var(--ax-sys-color-border-secondary-lighter-surface));
1872
- --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
1873
- --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
1874
- --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
1875
- --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1876
- --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
1877
- --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
1878
- --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
1879
- --color-on-secondary-dark: rgba(var(--ax-sys-color-on-secondary-dark-surface));
1880
- --color-border-secondary-dark: rgba(var(--ax-sys-color-border-secondary-dark-surface));
1881
- --color-secondary-darker: rgba(var(--ax-sys-color-secondary-darker-surface));
1882
- --color-on-secondary-darker: rgba(var(--ax-sys-color-on-secondary-darker-surface));
1883
- --color-border-secondary-darker: rgba(var(--ax-sys-color-border-secondary-darker-surface));
1884
- --color-secondary-darkest: rgba(var(--ax-sys-color-secondary-darkest-surface));
1885
- --color-on-secondary-darkest: rgba(var(--ax-sys-color-on-secondary-darkest-surface));
1886
- --color-border-secondary-darkest: rgba(var(--ax-sys-color-border-secondary-darkest-surface));
1887
-
1888
- /* Success Surfaces */
1889
- --color-success: rgba(var(--ax-sys-color-success-surface));
1890
- --color-success-50: rgba(var(--ax-sys-color-success-50));
1891
- --color-success-100: rgba(var(--ax-sys-color-success-100));
1892
- --color-success-200: rgba(var(--ax-sys-color-success-200));
1893
- --color-success-300: rgba(var(--ax-sys-color-success-300));
1894
- --color-success-400: rgba(var(--ax-sys-color-success-400));
1895
- --color-success-500: rgba(var(--ax-sys-color-success-500));
1896
- --color-success-600: rgba(var(--ax-sys-color-success-600));
1897
- --color-success-700: rgba(var(--ax-sys-color-success-700));
1898
- --color-success-800: rgba(var(--ax-sys-color-success-800));
1899
- --color-success-900: rgba(var(--ax-sys-color-success-900));
1900
- --color-success-950: rgba(var(--ax-sys-color-success-950));
1901
-
1902
- --color-success-lightest: rgba(var(--ax-sys-color-success-lightest-surface));
1903
- --color-on-success-lightest: rgba(var(--ax-sys-color-on-success-lightest-surface));
1904
- --color-border-success-lightest: rgba(var(--ax-sys-color-border-success-lightest-surface));
1905
- --color-success-lighter: rgba(var(--ax-sys-color-success-lighter-surface));
1906
- --color-on-success-lighter: rgba(var(--ax-sys-color-on-success-lighter-surface));
1907
- --color-border-success-lighter: rgba(var(--ax-sys-color-border-success-lighter-surface));
1908
- --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
1909
- --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
1910
- --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
1911
- --color-success: rgba(var(--ax-sys-color-success-surface));
1912
- --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
1913
- --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
1914
- --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
1915
- --color-on-success-dark: rgba(var(--ax-sys-color-on-success-dark-surface));
1916
- --color-border-success-dark: rgba(var(--ax-sys-color-border-success-dark-surface));
1917
- --color-success-darker: rgba(var(--ax-sys-color-success-darker-surface));
1918
- --color-on-success-darker: rgba(var(--ax-sys-color-on-success-darker-surface));
1919
- --color-border-success-darker: rgba(var(--ax-sys-color-border-success-darker-surface));
1920
- --color-success-darkest: rgba(var(--ax-sys-color-success-darkest-surface));
1921
- --color-on-success-darkest: rgba(var(--ax-sys-color-on-success-darkest-surface));
1922
- --color-border-success-darkest: rgba(var(--ax-sys-color-border-success-darkest-surface));
1923
-
1924
- /* Warning Surfaces */
1925
- --color-warning: rgba(var(--ax-sys-color-warning-surface));
1926
- --color-warning-50: rgba(var(--ax-sys-color-warning-50));
1927
- --color-warning-100: rgba(var(--ax-sys-color-warning-100));
1928
- --color-warning-200: rgba(var(--ax-sys-color-warning-200));
1929
- --color-warning-300: rgba(var(--ax-sys-color-warning-300));
1930
- --color-warning-400: rgba(var(--ax-sys-color-warning-400));
1931
- --color-warning-500: rgba(var(--ax-sys-color-warning-500));
1932
- --color-warning-600: rgba(var(--ax-sys-color-warning-600));
1933
- --color-warning-700: rgba(var(--ax-sys-color-warning-700));
1934
- --color-warning-800: rgba(var(--ax-sys-color-warning-800));
1935
- --color-warning-900: rgba(var(--ax-sys-color-warning-900));
1936
- --color-warning-950: rgba(var(--ax-sys-color-warning-950));
1937
-
1938
- --color-warning-lightest: rgba(var(--ax-sys-color-warning-lightest-surface));
1939
- --color-on-warning-lightest: rgba(var(--ax-sys-color-on-warning-lightest-surface));
1940
- --color-border-warning-lightest: rgba(var(--ax-sys-color-border-warning-lightest-surface));
1941
- --color-warning-lighter: rgba(var(--ax-sys-color-warning-lighter-surface));
1942
- --color-on-warning-lighter: rgba(var(--ax-sys-color-on-warning-lighter-surface));
1943
- --color-border-warning-lighter: rgba(var(--ax-sys-color-border-warning-lighter-surface));
1944
- --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
1945
- --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
1946
- --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
1947
- --color-warning: rgba(var(--ax-sys-color-warning-surface));
1948
- --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
1949
- --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
1950
- --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
1951
- --color-on-warning-dark: rgba(var(--ax-sys-color-on-warning-dark-surface));
1952
- --color-border-warning-dark: rgba(var(--ax-sys-color-border-warning-dark-surface));
1953
- --color-warning-darker: rgba(var(--ax-sys-color-warning-darker-surface));
1954
- --color-on-warning-darker: rgba(var(--ax-sys-color-on-warning-darker-surface));
1955
- --color-border-warning-darker: rgba(var(--ax-sys-color-border-warning-darker-surface));
1956
- --color-warning-darkest: rgba(var(--ax-sys-color-warning-darkest-surface));
1957
- --color-on-warning-darkest: rgba(var(--ax-sys-color-on-warning-darkest-surface));
1958
- --color-border-warning-darkest: rgba(var(--ax-sys-color-border-warning-darkest-surface));
1959
-
1960
- /* Danger Surfaces */
1961
- --color-danger: rgba(var(--ax-sys-color-danger-surface));
1962
- --color-danger-50: rgba(var(--ax-sys-color-danger-50));
1963
- --color-danger-100: rgba(var(--ax-sys-color-danger-100));
1964
- --color-danger-200: rgba(var(--ax-sys-color-danger-200));
1965
- --color-danger-300: rgba(var(--ax-sys-color-danger-300));
1966
- --color-danger-400: rgba(var(--ax-sys-color-danger-400));
1967
- --color-danger-500: rgba(var(--ax-sys-color-danger-500));
1968
- --color-danger-600: rgba(var(--ax-sys-color-danger-600));
1969
- --color-danger-700: rgba(var(--ax-sys-color-danger-700));
1970
- --color-danger-800: rgba(var(--ax-sys-color-danger-800));
1971
- --color-danger-900: rgba(var(--ax-sys-color-danger-900));
1972
- --color-danger-950: rgba(var(--ax-sys-color-danger-950));
1973
-
1974
- --color-danger-lightest: rgba(var(--ax-sys-color-danger-lightest-surface));
1975
- --color-on-danger-lightest: rgba(var(--ax-sys-color-on-danger-lightest-surface));
1976
- --color-border-danger-lightest: rgba(var(--ax-sys-color-border-danger-lightest-surface));
1977
- --color-danger-lighter: rgba(var(--ax-sys-color-danger-lighter-surface));
1978
- --color-on-danger-lighter: rgba(var(--ax-sys-color-on-danger-lighter-surface));
1979
- --color-border-danger-lighter: rgba(var(--ax-sys-color-border-danger-lighter-surface));
1980
- --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
1981
- --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
1982
- --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
1983
- --color-danger: rgba(var(--ax-sys-color-danger-surface));
1984
- --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
1985
- --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
1986
- --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
1987
- --color-on-danger-dark: rgba(var(--ax-sys-color-on-danger-dark-surface));
1988
- --color-border-danger-dark: rgba(var(--ax-sys-color-border-danger-dark-surface));
1989
- --color-danger-darker: rgba(var(--ax-sys-color-danger-darker-surface));
1990
- --color-on-danger-darker: rgba(var(--ax-sys-color-on-danger-darker-surface));
1991
- --color-border-danger-darker: rgba(var(--ax-sys-color-border-danger-darker-surface));
1992
- --color-danger-darkest: rgba(var(--ax-sys-color-danger-darkest-surface));
1993
- --color-on-danger-darkest: rgba(var(--ax-sys-color-on-danger-darkest-surface));
1994
- --color-border-danger-darkest: rgba(var(--ax-sys-color-border-danger-darkest-surface));
1995
-
1996
- /* Accent Surfaces */
1997
- --color-accent: rgba(var(--ax-sys-color-accent-surface));
1998
- --color-accent-50: rgba(var(--ax-sys-color-accent-50));
1999
- --color-accent-100: rgba(var(--ax-sys-color-accent-100));
2000
- --color-accent-200: rgba(var(--ax-sys-color-accent-200));
2001
- --color-accent-300: rgba(var(--ax-sys-color-accent-300));
2002
- --color-accent-400: rgba(var(--ax-sys-color-accent-400));
2003
- --color-accent-500: rgba(var(--ax-sys-color-accent-500));
2004
- --color-accent-600: rgba(var(--ax-sys-color-accent-600));
2005
- --color-accent-700: rgba(var(--ax-sys-color-accent-700));
2006
- --color-accent-800: rgba(var(--ax-sys-color-accent-800));
2007
- --color-accent-900: rgba(var(--ax-sys-color-accent-900));
2008
- --color-accent-950: rgba(var(--ax-sys-color-accent-950));
2009
-
2010
- --color-accent-lightest: rgba(var(--ax-sys-color-accent-lightest-surface));
2011
- --color-on-accent-lightest: rgba(var(--ax-sys-color-on-accent-lightest-surface));
2012
- --color-border-accent-lightest: rgba(var(--ax-sys-color-border-accent-lightest-surface));
2013
- --color-accent-lighter: rgba(var(--ax-sys-color-accent-lighter-surface));
2014
- --color-on-accent-lighter: rgba(var(--ax-sys-color-on-accent-lighter-surface));
2015
- --color-border-accent-lighter: rgba(var(--ax-sys-color-border-accent-lighter-surface));
2016
- --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
2017
- --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
2018
- --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
2019
- --color-accent: rgba(var(--ax-sys-color-accent-surface));
2020
- --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
2021
- --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
2022
- --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
2023
- --color-on-accent-dark: rgba(var(--ax-sys-color-on-accent-dark-surface));
2024
- --color-border-accent-dark: rgba(var(--ax-sys-color-border-accent-dark-surface));
2025
- --color-accent-darker: rgba(var(--ax-sys-color-accent-darker-surface));
2026
- --color-on-accent-darker: rgba(var(--ax-sys-color-on-accent-darker-surface));
2027
- --color-border-accent-darker: rgba(var(--ax-sys-color-border-accent-darker-surface));
2028
- --color-accent-darkest: rgba(var(--ax-sys-color-accent-darkest-surface));
2029
- --color-on-accent-darkest: rgba(var(--ax-sys-color-on-accent-darkest-surface));
2030
- --color-border-accent-darkest: rgba(var(--ax-sys-color-border-accent-darkest-surface));
2031
-
2032
- /* Accent 1 Surfaces */
2033
- --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
2034
- --color-accent1-50: rgba(var(--ax-sys-color-accent1-50));
2035
- --color-accent1-100: rgba(var(--ax-sys-color-accent1-100));
2036
- --color-accent1-200: rgba(var(--ax-sys-color-accent1-200));
2037
- --color-accent1-300: rgba(var(--ax-sys-color-accent1-300));
2038
- --color-accent1-400: rgba(var(--ax-sys-color-accent1-400));
2039
- --color-accent1-500: rgba(var(--ax-sys-color-accent1-500));
2040
- --color-accent1-600: rgba(var(--ax-sys-color-accent1-600));
2041
- --color-accent1-700: rgba(var(--ax-sys-color-accent1-700));
2042
- --color-accent1-800: rgba(var(--ax-sys-color-accent1-800));
2043
- --color-accent1-900: rgba(var(--ax-sys-color-accent1-900));
2044
- --color-accent1-950: rgba(var(--ax-sys-color-accent1-950));
2045
-
2046
- --color-accent1-lightest: rgba(var(--ax-sys-color-accent1-lightest-surface));
2047
- --color-on-accent1-lightest: rgba(var(--ax-sys-color-on-accent1-lightest-surface));
2048
- --color-border-accent1-lightest: rgba(var(--ax-sys-color-border-accent1-lightest-surface));
2049
- --color-accent1-lighter: rgba(var(--ax-sys-color-accent1-lighter-surface));
2050
- --color-on-accent1-lighter: rgba(var(--ax-sys-color-on-accent1-lighter-surface));
2051
- --color-border-accent1-lighter: rgba(var(--ax-sys-color-border-accent1-lighter-surface));
2052
- --color-accent1-light: rgba(var(--ax-sys-color-accent1-light-surface));
2053
- --color-on-accent1-light: rgba(var(--ax-sys-color-on-accent1-light-surface));
2054
- --color-border-accent1-light: rgba(var(--ax-sys-color-border-accent1-light-surface));
2055
- --color-accent1: rgba(var(--ax-sys-color-accent1-surface));
2056
- --color-on-accent1: rgba(var(--ax-sys-color-on-accent1-surface));
2057
- --color-border-accent1: rgba(var(--ax-sys-color-border-accent1-surface));
2058
- --color-accent1-dark: rgba(var(--ax-sys-color-accent1-dark-surface));
2059
- --color-on-accent1-dark: rgba(var(--ax-sys-color-on-accent1-dark-surface));
2060
- --color-border-accent1-dark: rgba(var(--ax-sys-color-border-accent1-dark-surface));
2061
- --color-accent1-darker: rgba(var(--ax-sys-color-accent1-darker-surface));
2062
- --color-on-accent1-darker: rgba(var(--ax-sys-color-on-accent1-darker-surface));
2063
- --color-border-accent1-darker: rgba(var(--ax-sys-color-border-accent1-darker-surface));
2064
- --color-accent1-darkest: rgba(var(--ax-sys-color-accent1-darkest-surface));
2065
- --color-on-accent1-darkest: rgba(var(--ax-sys-color-on-accent1-darkest-surface));
2066
- --color-border-accent1-darkest: rgba(var(--ax-sys-color-border-accent1-darkest-surface));
2067
-
2068
- /* Accent 2 Surfaces */
2069
- --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
2070
- --color-accent2-50: rgba(var(--ax-sys-color-accent2-50));
2071
- --color-accent2-100: rgba(var(--ax-sys-color-accent2-100));
2072
- --color-accent2-200: rgba(var(--ax-sys-color-accent2-200));
2073
- --color-accent2-300: rgba(var(--ax-sys-color-accent2-300));
2074
- --color-accent2-400: rgba(var(--ax-sys-color-accent2-400));
2075
- --color-accent2-500: rgba(var(--ax-sys-color-accent2-500));
2076
- --color-accent2-600: rgba(var(--ax-sys-color-accent2-600));
2077
- --color-accent2-700: rgba(var(--ax-sys-color-accent2-700));
2078
- --color-accent2-800: rgba(var(--ax-sys-color-accent2-800));
2079
- --color-accent2-900: rgba(var(--ax-sys-color-accent2-900));
2080
- --color-accent2-950: rgba(var(--ax-sys-color-accent2-950));
2081
-
2082
- --color-accent2-lightest: rgba(var(--ax-sys-color-accent2-lightest-surface));
2083
- --color-on-accent2-lightest: rgba(var(--ax-sys-color-on-accent2-lightest-surface));
2084
- --color-border-accent2-lightest: rgba(var(--ax-sys-color-border-accent2-lightest-surface));
2085
- --color-accent2-lighter: rgba(var(--ax-sys-color-accent2-lighter-surface));
2086
- --color-on-accent2-lighter: rgba(var(--ax-sys-color-on-accent2-lighter-surface));
2087
- --color-border-accent2-lighter: rgba(var(--ax-sys-color-border-accent2-lighter-surface));
2088
- --color-accent2-light: rgba(var(--ax-sys-color-accent2-light-surface));
2089
- --color-on-accent2-light: rgba(var(--ax-sys-color-on-accent2-light-surface));
2090
- --color-border-accent2-light: rgba(var(--ax-sys-color-border-accent2-light-surface));
2091
- --color-accent2: rgba(var(--ax-sys-color-accent2-surface));
2092
- --color-on-accent2: rgba(var(--ax-sys-color-on-accent2-surface));
2093
- --color-border-accent2: rgba(var(--ax-sys-color-border-accent2-surface));
2094
- --color-accent2-dark: rgba(var(--ax-sys-color-accent2-dark-surface));
2095
- --color-on-accent2-dark: rgba(var(--ax-sys-color-on-accent2-dark-surface));
2096
- --color-border-accent2-dark: rgba(var(--ax-sys-color-border-accent2-dark-surface));
2097
- --color-accent2-darker: rgba(var(--ax-sys-color-accent2-darker-surface));
2098
- --color-on-accent2-darker: rgba(var(--ax-sys-color-on-accent2-darker-surface));
2099
- --color-border-accent2-darker: rgba(var(--ax-sys-color-border-accent2-darker-surface));
2100
- --color-accent2-darkest: rgba(var(--ax-sys-color-accent2-darkest-surface));
2101
- --color-on-accent2-darkest: rgba(var(--ax-sys-color-on-accent2-darkest-surface));
2102
- --color-border-accent2-darkest: rgba(var(--ax-sys-color-border-accent2-darkest-surface));
2103
-
2104
- /* Accent 3 Surfaces */
2105
- --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
2106
- --color-accent3-50: rgba(var(--ax-sys-color-accent3-50));
2107
- --color-accent3-100: rgba(var(--ax-sys-color-accent3-100));
2108
- --color-accent3-200: rgba(var(--ax-sys-color-accent3-200));
2109
- --color-accent3-300: rgba(var(--ax-sys-color-accent3-300));
2110
- --color-accent3-400: rgba(var(--ax-sys-color-accent3-400));
2111
- --color-accent3-500: rgba(var(--ax-sys-color-accent3-500));
2112
- --color-accent3-600: rgba(var(--ax-sys-color-accent3-600));
2113
- --color-accent3-700: rgba(var(--ax-sys-color-accent3-700));
2114
- --color-accent3-800: rgba(var(--ax-sys-color-accent3-800));
2115
- --color-accent3-900: rgba(var(--ax-sys-color-accent3-900));
2116
- --color-accent3-950: rgba(var(--ax-sys-color-accent3-950));
2117
-
2118
- --color-accent3-lightest: rgba(var(--ax-sys-color-accent3-lightest-surface));
2119
- --color-on-accent3-lightest: rgba(var(--ax-sys-color-on-accent3-lightest-surface));
2120
- --color-border-accent3-lightest: rgba(var(--ax-sys-color-border-accent3-lightest-surface));
2121
- --color-accent3-lighter: rgba(var(--ax-sys-color-accent3-lighter-surface));
2122
- --color-on-accent3-lighter: rgba(var(--ax-sys-color-on-accent3-lighter-surface));
2123
- --color-border-accent3-lighter: rgba(var(--ax-sys-color-border-accent3-lighter-surface));
2124
- --color-accent3-light: rgba(var(--ax-sys-color-accent3-light-surface));
2125
- --color-on-accent3-light: rgba(var(--ax-sys-color-on-accent3-light-surface));
2126
- --color-border-accent3-light: rgba(var(--ax-sys-color-border-accent3-light-surface));
2127
- --color-accent3: rgba(var(--ax-sys-color-accent3-surface));
2128
- --color-on-accent3: rgba(var(--ax-sys-color-on-accent3-surface));
2129
- --color-border-accent3: rgba(var(--ax-sys-color-border-accent3-surface));
2130
- --color-accent3-dark: rgba(var(--ax-sys-color-accent3-dark-surface));
2131
- --color-on-accent3-dark: rgba(var(--ax-sys-color-on-accent3-dark-surface));
2132
- --color-border-accent3-dark: rgba(var(--ax-sys-color-border-accent3-dark-surface));
2133
- --color-accent3-darker: rgba(var(--ax-sys-color-accent3-darker-surface));
2134
- --color-on-accent3-darker: rgba(var(--ax-sys-color-on-accent3-darker-surface));
2135
- --color-border-accent3-darker: rgba(var(--ax-sys-color-border-accent3-darker-surface));
2136
- --color-accent3-darkest: rgba(var(--ax-sys-color-accent3-darkest-surface));
2137
- --color-on-accent3-darkest: rgba(var(--ax-sys-color-on-accent3-darkest-surface));
2138
- --color-border-accent3-darkest: rgba(var(--ax-sys-color-border-accent3-darkest-surface));
2139
-
2140
- /* Accent 4 Surfaces */
2141
- --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
2142
- --color-accent4-50: rgba(var(--ax-sys-color-accent4-50));
2143
- --color-accent4-100: rgba(var(--ax-sys-color-accent4-100));
2144
- --color-accent4-200: rgba(var(--ax-sys-color-accent4-200));
2145
- --color-accent4-300: rgba(var(--ax-sys-color-accent4-300));
2146
- --color-accent4-400: rgba(var(--ax-sys-color-accent4-400));
2147
- --color-accent4-500: rgba(var(--ax-sys-color-accent4-500));
2148
- --color-accent4-600: rgba(var(--ax-sys-color-accent4-600));
2149
- --color-accent4-700: rgba(var(--ax-sys-color-accent4-700));
2150
- --color-accent4-800: rgba(var(--ax-sys-color-accent4-800));
2151
- --color-accent4-900: rgba(var(--ax-sys-color-accent4-900));
2152
- --color-accent4-950: rgba(var(--ax-sys-color-accent4-950));
2153
-
2154
- --color-accent4-lightest: rgba(var(--ax-sys-color-accent4-lightest-surface));
2155
- --color-on-accent4-lightest: rgba(var(--ax-sys-color-on-accent4-lightest-surface));
2156
- --color-border-accent4-lightest: rgba(var(--ax-sys-color-border-accent4-lightest-surface));
2157
- --color-accent4-lighter: rgba(var(--ax-sys-color-accent4-lighter-surface));
2158
- --color-on-accent4-lighter: rgba(var(--ax-sys-color-on-accent4-lighter-surface));
2159
- --color-border-accent4-lighter: rgba(var(--ax-sys-color-border-accent4-lighter-surface));
2160
- --color-accent4-light: rgba(var(--ax-sys-color-accent4-light-surface));
2161
- --color-on-accent4-light: rgba(var(--ax-sys-color-on-accent4-light-surface));
2162
- --color-border-accent4-light: rgba(var(--ax-sys-color-border-accent4-light-surface));
2163
- --color-accent4: rgba(var(--ax-sys-color-accent4-surface));
2164
- --color-on-accent4: rgba(var(--ax-sys-color-on-accent4-surface));
2165
- --color-border-accent4: rgba(var(--ax-sys-color-border-accent4-surface));
2166
- --color-accent4-dark: rgba(var(--ax-sys-color-accent4-dark-surface));
2167
- --color-on-accent4-dark: rgba(var(--ax-sys-color-on-accent4-dark-surface));
2168
- --color-border-accent4-dark: rgba(var(--ax-sys-color-border-accent4-dark-surface));
2169
- --color-accent4-darker: rgba(var(--ax-sys-color-accent4-darker-surface));
2170
- --color-on-accent4-darker: rgba(var(--ax-sys-color-on-accent4-darker-surface));
2171
- --color-border-accent4-darker: rgba(var(--ax-sys-color-border-accent4-darker-surface));
2172
- --color-accent4-darkest: rgba(var(--ax-sys-color-accent4-darkest-surface));
2173
- --color-on-accent4-darkest: rgba(var(--ax-sys-color-on-accent4-darkest-surface));
2174
- --color-border-accent4-darkest: rgba(var(--ax-sys-color-border-accent4-darkest-surface));
2175
-
2176
- /* Accent 5 Surfaces */
2177
- --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
2178
- --color-accent5-50: rgba(var(--ax-sys-color-accent5-50));
2179
- --color-accent5-100: rgba(var(--ax-sys-color-accent5-100));
2180
- --color-accent5-200: rgba(var(--ax-sys-color-accent5-200));
2181
- --color-accent5-300: rgba(var(--ax-sys-color-accent5-300));
2182
- --color-accent5-400: rgba(var(--ax-sys-color-accent5-400));
2183
- --color-accent5-500: rgba(var(--ax-sys-color-accent5-500));
2184
- --color-accent5-600: rgba(var(--ax-sys-color-accent5-600));
2185
- --color-accent5-700: rgba(var(--ax-sys-color-accent5-700));
2186
- --color-accent5-800: rgba(var(--ax-sys-color-accent5-800));
2187
- --color-accent5-900: rgba(var(--ax-sys-color-accent5-900));
2188
- --color-accent5-950: rgba(var(--ax-sys-color-accent5-950));
2189
-
2190
- --color-accent5-lightest: rgba(var(--ax-sys-color-accent5-lightest-surface));
2191
- --color-on-accent5-lightest: rgba(var(--ax-sys-color-on-accent5-lightest-surface));
2192
- --color-border-accent5-lightest: rgba(var(--ax-sys-color-border-accent5-lightest-surface));
2193
- --color-accent5-lighter: rgba(var(--ax-sys-color-accent5-lighter-surface));
2194
- --color-on-accent5-lighter: rgba(var(--ax-sys-color-on-accent5-lighter-surface));
2195
- --color-border-accent5-lighter: rgba(var(--ax-sys-color-border-accent5-lighter-surface));
2196
- --color-accent5-light: rgba(var(--ax-sys-color-accent5-light-surface));
2197
- --color-on-accent5-light: rgba(var(--ax-sys-color-on-accent5-light-surface));
2198
- --color-border-accent5-light: rgba(var(--ax-sys-color-border-accent5-light-surface));
2199
- --color-accent5: rgba(var(--ax-sys-color-accent5-surface));
2200
- --color-on-accent5: rgba(var(--ax-sys-color-on-accent5-surface));
2201
- --color-border-accent5: rgba(var(--ax-sys-color-border-accent5-surface));
2202
- --color-accent5-dark: rgba(var(--ax-sys-color-accent5-dark-surface));
2203
- --color-on-accent5-dark: rgba(var(--ax-sys-color-on-accent5-dark-surface));
2204
- --color-border-accent5-dark: rgba(var(--ax-sys-color-border-accent5-dark-surface));
2205
- --color-accent5-darker: rgba(var(--ax-sys-color-accent5-darker-surface));
2206
- --color-on-accent5-darker: rgba(var(--ax-sys-color-on-accent5-darker-surface));
2207
- --color-border-accent5-darker: rgba(var(--ax-sys-color-border-accent5-darker-surface));
2208
- --color-accent5-darkest: rgba(var(--ax-sys-color-accent5-darkest-surface));
2209
- --color-on-accent5-darkest: rgba(var(--ax-sys-color-on-accent5-darkest-surface));
2210
- --color-border-accent5-darkest: rgba(var(--ax-sys-color-border-accent5-darkest-surface));
2211
-
2212
- /* Accent 6 Surfaces */
2213
- --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
2214
- --color-accent6-50: rgba(var(--ax-sys-color-accent6-50));
2215
- --color-accent6-100: rgba(var(--ax-sys-color-accent6-100));
2216
- --color-accent6-200: rgba(var(--ax-sys-color-accent6-200));
2217
- --color-accent6-300: rgba(var(--ax-sys-color-accent6-300));
2218
- --color-accent6-400: rgba(var(--ax-sys-color-accent6-400));
2219
- --color-accent6-500: rgba(var(--ax-sys-color-accent6-500));
2220
- --color-accent6-600: rgba(var(--ax-sys-color-accent6-600));
2221
- --color-accent6-700: rgba(var(--ax-sys-color-accent6-700));
2222
- --color-accent6-800: rgba(var(--ax-sys-color-accent6-800));
2223
- --color-accent6-900: rgba(var(--ax-sys-color-accent6-900));
2224
- --color-accent6-950: rgba(var(--ax-sys-color-accent6-950));
2225
-
2226
- --color-accent6-lightest: rgba(var(--ax-sys-color-accent6-lightest-surface));
2227
- --color-on-accent6-lightest: rgba(var(--ax-sys-color-on-accent6-lightest-surface));
2228
- --color-border-accent6-lightest: rgba(var(--ax-sys-color-border-accent6-lightest-surface));
2229
- --color-accent6-lighter: rgba(var(--ax-sys-color-accent6-lighter-surface));
2230
- --color-on-accent6-lighter: rgba(var(--ax-sys-color-on-accent6-lighter-surface));
2231
- --color-border-accent6-lighter: rgba(var(--ax-sys-color-border-accent6-lighter-surface));
2232
- --color-accent6-light: rgba(var(--ax-sys-color-accent6-light-surface));
2233
- --color-on-accent6-light: rgba(var(--ax-sys-color-on-accent6-light-surface));
2234
- --color-border-accent6-light: rgba(var(--ax-sys-color-border-accent6-light-surface));
2235
- --color-accent6: rgba(var(--ax-sys-color-accent6-surface));
2236
- --color-on-accent6: rgba(var(--ax-sys-color-on-accent6-surface));
2237
- --color-border-accent6: rgba(var(--ax-sys-color-border-accent6-surface));
2238
- --color-accent6-dark: rgba(var(--ax-sys-color-accent6-dark-surface));
2239
- --color-on-accent6-dark: rgba(var(--ax-sys-color-on-accent6-dark-surface));
2240
- --color-border-accent6-dark: rgba(var(--ax-sys-color-border-accent6-dark-surface));
2241
- --color-accent6-darker: rgba(var(--ax-sys-color-accent6-darker-surface));
2242
- --color-on-accent6-darker: rgba(var(--ax-sys-color-on-accent6-darker-surface));
2243
- --color-border-accent6-darker: rgba(var(--ax-sys-color-border-accent6-darker-surface));
2244
- --color-accent6-darkest: rgba(var(--ax-sys-color-accent6-darkest-surface));
2245
- --color-on-accent6-darkest: rgba(var(--ax-sys-color-on-accent6-darkest-surface));
2246
- --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
2247
-
2248
- /* Default scale (matches ax-md) — wired to base tokens so all utilities respond to theme changes */
2249
- --spacing: var(--ax-sys-spacing-base);
2250
- --text-xs: var(--ax-sys-text-xs-base);
2251
- --text-sm: var(--ax-sys-text-sm-base);
2252
- --text-base: var(--ax-sys-body-font-size);
2253
- --text-lg: var(--ax-sys-text-lg-base);
2254
- --text-xl: var(--ax-sys-text-xl-base);
2255
- --leading-3: var(--ax-sys-leading-3-base);
2256
- --leading-4: var(--ax-sys-leading-4-base);
2257
- --leading-5: var(--ax-sys-leading-5-base);
2258
- --leading-6: var(--ax-sys-leading-6-base);
2259
- }
2260
-
2261
- @utility text-muted {
2262
- @apply text-gray-900/60;
2263
- }
2264
-
2265
- @utility bg-default {
2266
- background-color: var(--color-bg-default);
2267
- }
2268
-
2269
- @utility text-default {
2270
- color: var(--color-text-default);
2271
- }
2272
-
2273
- @utility border-default {
2274
- border-color: var(--color-border-default);
2275
- }
2276
-
2277
- @utility text {
2278
- color: var(--color-text-default);
2279
- }
2280
-
2281
- @utility border-s-default {
2282
- border-inline-start-width: 1px;
2283
- }
2284
-
2285
- @utility border-e-default {
2286
- border-inline-end-width: 1px;
2287
- }
2288
-
2289
- @utility border-t-default {
2290
- border-top-width: 1px;
2291
- }
2292
-
2293
- @utility border-b-default {
2294
- border-bottom-width: 1px;
2295
- }
2296
-
2297
- @utility border-x-default {
2298
- border-left-width: 1px;
2299
- border-right-width: 1px;
2300
- }
2301
-
2302
- @utility border-y-default {
2303
- border-top-width: 1px;
2304
- border-bottom-width: 1px;
2305
- }
2306
-
2307
- /* Primary Surfaces */
2308
-
2309
- @utility primary-lightest-surface {
2310
- background-color: var(--color-primary-lightest);
2311
- color: var(--color-on-primary-lightest);
2312
- border-color: var(--color-border-primary-lightest);
2313
- }
2314
-
2315
- @utility primary-lighter-surface {
2316
- background-color: var(--color-primary-lighter);
2317
- color: var(--color-on-primary-lighter);
2318
- border-color: var(--color-border-primary-lighter);
2319
- }
2320
-
2321
- @utility primary-light-surface {
2322
- background-color: var(--color-primary-light);
2323
- color: var(--color-on-primary-light);
2324
- border-color: var(--color-border-primary-light);
2325
- }
2326
-
2327
- @utility primary-surface {
2328
- background-color: var(--color-primary);
2329
- color: var(--color-on-primary);
2330
- border-color: var(--color-border-primary);
2331
- }
2332
-
2333
- @utility primary-dark-surface {
2334
- background-color: var(--color-primary-dark);
2335
- color: var(--color-on-primary-dark);
2336
- border-color: var(--color-border-primary-dark);
2337
- }
2338
-
2339
- @utility primary-darker-surface {
2340
- background-color: var(--color-primary-darker);
2341
- color: var(--color-on-primary-darker);
2342
- border-color: var(--color-border-primary-darker);
2343
- }
2344
-
2345
- @utility primary-darkest-surface {
2346
- background-color: var(--color-primary-darkest);
2347
- color: var(--color-on-primary-darkest);
2348
- border-color: var(--color-border-primary-darkest);
2349
- }
2350
-
2351
- /* @utility ax-default {
2352
- --ax-comp-bg-lightest: var(--color-darkest);
2353
- --ax-comp-text-lightest: var(--color-on-darkest);
2354
- --ax-comp-border-lightest: var(--color-border-darkest);
2355
- --ax-comp-bg-lighter: var(--color-darker);
2356
- --ax-comp-text-lighter: var(--color-on-darker);
2357
- --ax-comp-border-lighter: var(--color-border-darker);
2358
- --ax-comp-bg-light: var(--color-dark);
2359
- --ax-comp-text-light: var(--color-on-dark);
2360
- --ax-comp-border-light: var(--color-border-dark);
2361
- --ax-comp-bg: var(--color-on-surface);
2362
- --ax-comp-text: var(--color-surface);
2363
- --ax-comp-border: var(--color-border-surface);
2364
- --ax-comp-bg-dark: var(--color-light);
2365
- --ax-comp-text-dark: var(--color-on-light);
2366
- --ax-comp-border-dark: var(--color-border-light);
2367
- --ax-comp-bg-darker: var(--color-lighter);
2368
- --ax-comp-text-darker: var(--color-on-lighter);
2369
- --ax-comp-border-darker: var(--color-border-lighter);
2370
- --ax-comp-bg-darkest: var(--color-lightest);
2371
- --ax-comp-text-darkest: var(--color-on-lightest);
2372
- --ax-comp-border-darkest: var(--color-border-lightest);
2373
- } */
2374
-
2375
- @utility ax-primary {
2376
- --ax-comp-bg-lightest: var(--color-primary-lightest);
2377
- --ax-comp-text-lightest: var(--color-on-primary-lightest);
2378
- --ax-comp-border-lightest: var(--color-border-primary-lightest);
2379
- --ax-comp-bg-lighter: var(--color-primary-lighter);
2380
- --ax-comp-text-lighter: var(--color-on-primary-lighter);
2381
- --ax-comp-border-lighter: var(--color-border-primary-lighter);
2382
- --ax-comp-bg-light: var(--color-primary-light);
2383
- --ax-comp-text-light: var(--color-on-primary-light);
2384
- --ax-comp-border-light: var(--color-border-primary-light);
2385
- --ax-comp-bg: var(--color-primary);
2386
- --ax-comp-text: var(--color-on-primary);
2387
- --ax-comp-border: var(--color-border-primary);
2388
- --ax-comp-bg-dark: var(--color-primary-dark);
2389
- --ax-comp-text-dark: var(--color-on-primary-dark);
2390
- --ax-comp-border-dark: var(--color-border-primary-dark);
2391
- --ax-comp-bg-darker: var(--color-primary-darker);
2392
- --ax-comp-text-darker: var(--color-on-primary-darker);
2393
- --ax-comp-border-darker: var(--color-border-primary-darker);
2394
- --ax-comp-bg-darkest: var(--color-primary-darkest);
2395
- --ax-comp-text-darkest: var(--color-on-primary-darkest);
2396
- --ax-comp-border-darkest: var(--color-border-primary-darkest);
2397
- }
2398
-
2399
- /* Secondary Surfaces */
2400
-
2401
- @utility secondary-lightest-surface {
2402
- background-color: var(--color-secondary-lightest);
2403
- color: var(--color-on-secondary-lightest);
2404
- border-color: var(--color-border-secondary-lightest);
2405
- }
2406
-
2407
- @utility secondary-lighter-surface {
2408
- background-color: var(--color-secondary-lighter);
2409
- color: var(--color-on-secondary-lighter);
2410
- border-color: var(--color-border-secondary-lighter);
2411
- }
2412
-
2413
- @utility secondary-light-surface {
2414
- background-color: var(--color-secondary-light);
2415
- color: var(--color-on-secondary-light);
2416
- border-color: var(--color-border-secondary-light);
2417
- }
2418
-
2419
- @utility secondary-surface {
2420
- background-color: var(--color-secondary);
2421
- color: var(--color-on-secondary);
2422
- border-color: var(--color-border-secondary);
2423
- }
2424
-
2425
- @utility secondary-dark-surface {
2426
- background-color: var(--color-secondary-dark);
2427
- color: var(--color-on-secondary-dark);
2428
- border-color: var(--color-border-secondary-dark);
2429
- }
2430
-
2431
- @utility secondary-darker-surface {
2432
- background-color: var(--color-secondary-darker);
2433
- color: var(--color-on-secondary-darker);
2434
- border-color: var(--color-border-secondary-darker);
2435
- }
2436
-
2437
- @utility secondary-darkest-surface {
2438
- background-color: var(--color-secondary-darkest);
2439
- color: var(--color-on-secondary-darkest);
2440
- border-color: var(--color-border-secondary-darkest);
2441
- }
2442
-
2443
- @utility ax-secondary {
2444
- --ax-comp-bg-lightest: var(--color-secondary-lightest);
2445
- --ax-comp-text-lightest: var(--color-on-secondary-lightest);
2446
- --ax-comp-border-lightest: var(--color-border-secondary-lightest);
2447
- --ax-comp-bg-lighter: var(--color-secondary-lighter);
2448
- --ax-comp-text-lighter: var(--color-on-secondary-lighter);
2449
- --ax-comp-border-lighter: var(--color-border-secondary-lighter);
2450
- --ax-comp-bg-light: var(--color-secondary-light);
2451
- --ax-comp-text-light: var(--color-on-secondary-light);
2452
- --ax-comp-border-light: var(--color-border-secondary-light);
2453
- --ax-comp-bg: var(--color-secondary);
2454
- --ax-comp-text: var(--color-on-secondary);
2455
- --ax-comp-border: var(--color-border-secondary);
2456
- --ax-comp-bg-dark: var(--color-secondary-dark);
2457
- --ax-comp-text-dark: var(--color-on-secondary-dark);
2458
- --ax-comp-border-dark: var(--color-border-secondary-dark);
2459
- --ax-comp-bg-darker: var(--color-secondary-darker);
2460
- --ax-comp-text-darker: var(--color-on-secondary-darker);
2461
- --ax-comp-border-darker: var(--color-border-secondary-darker);
2462
- --ax-comp-bg-darkest: var(--color-secondary-darkest);
2463
- --ax-comp-text-darkest: var(--color-on-secondary-darkest);
2464
- --ax-comp-border-darkest: var(--color-border-secondary-darkest);
2465
- }
2466
-
2467
- /* Success Surfaces */
2468
-
2469
- @utility success-lightest-surface {
2470
- background-color: var(--color-success-lightest);
2471
- color: var(--color-on-success-lightest);
2472
- border-color: var(--color-border-success-lightest);
2473
- }
2474
-
2475
- @utility success-lighter-surface {
2476
- background-color: var(--color-success-lighter);
2477
- color: var(--color-on-success-lighter);
2478
- border-color: var(--color-border-success-lighter);
2479
- }
2480
-
2481
- @utility success-light-surface {
2482
- background-color: var(--color-success-light);
2483
- color: var(--color-on-success-light);
2484
- border-color: var(--color-border-success-light);
2485
- }
2486
-
2487
- @utility success-surface {
2488
- background-color: var(--color-success);
2489
- color: var(--color-on-success);
2490
- border-color: var(--color-border-success);
2491
- }
2492
-
2493
- @utility success-dark-surface {
2494
- background-color: var(--color-success-dark);
2495
- color: var(--color-on-success-dark);
2496
- border-color: var(--color-border-success-dark);
2497
- }
2498
-
2499
- @utility success-darker-surface {
2500
- background-color: var(--color-success-darker);
2501
- color: var(--color-on-success-darker);
2502
- border-color: var(--color-border-success-darker);
2503
- }
2504
-
2505
- @utility success-darkest-surface {
2506
- background-color: var(--color-success-darkest-surface);
2507
- color: var(--color-on-success-darkest-surface);
2508
- border-color: var(--color-border-success-darkest-surface);
2509
- }
2510
-
2511
- @utility ax-success {
2512
- --ax-comp-bg-lightest: var(--color-success-lightest);
2513
- --ax-comp-text-lightest: var(--color-on-success-lightest);
2514
- --ax-comp-border-lightest: var(--color-border-success-lightest);
2515
- --ax-comp-bg-lighter: var(--color-success-lighter);
2516
- --ax-comp-text-lighter: var(--color-on-success-lighter);
2517
- --ax-comp-border-lighter: var(--color-border-success-lighter);
2518
- --ax-comp-bg-light: var(--color-success-light);
2519
- --ax-comp-text-light: var(--color-on-success-light);
2520
- --ax-comp-border-light: var(--color-border-success-light);
2521
- --ax-comp-bg: var(--color-success);
2522
- --ax-comp-text: var(--color-on-success);
2523
- --ax-comp-border: var(--color-border-success);
2524
- --ax-comp-bg-dark: var(--color-success-dark);
2525
- --ax-comp-text-dark: var(--color-on-success-dark);
2526
- --ax-comp-border-dark: var(--color-border-success-dark);
2527
- --ax-comp-bg-darker: var(--color-success-darker);
2528
- --ax-comp-text-darker: var(--color-on-success-darker);
2529
- --ax-comp-border-darker: var(--color-border-success-darker);
2530
- --ax-comp-bg-darkest: var(--color-success-darkest);
2531
- --ax-comp-text-darkest: var(--color-on-success-darkest);
2532
- --ax-comp-border-darkest: var(--color-border-success-darkest);
2533
- }
2534
-
2535
- /* Warning Surfaces */
2536
-
2537
- @utility warning-lightest-surface {
2538
- background-color: var(--color-warning-lightest);
2539
- color: var(--color-on-warning-lightest);
2540
- border-color: var(--color-border-warning-lightest);
2541
- }
2542
-
2543
- @utility warning-lighter-surface {
2544
- background-color: var(--color-warning-lighter);
2545
- color: var(--color-on-warning-lighter);
2546
- border-color: var(--color-border-warning-lighter);
2547
- }
2548
-
2549
- @utility warning-light-surface {
2550
- background-color: var(--color-warning-light);
2551
- color: var(--color-on-warning-light);
2552
- border-color: var(--color-border-warning-light);
2553
- }
2554
-
2555
- @utility warning-surface {
2556
- background-color: var(--color-warning);
2557
- color: var(--color-on-warning);
2558
- border-color: var(--color-border-warning);
2559
- }
2560
-
2561
- @utility warning-dark-surface {
2562
- background-color: var(--color-warning-dark);
2563
- color: var(--color-on-warning-dark);
2564
- border-color: var(--color-border-warning-dark);
2565
- }
2566
-
2567
- @utility warning-darker-surface {
2568
- background-color: var(--color-warning-darker);
2569
- color: var(--color-on-warning-darker);
2570
- border-color: var(--color-border-warning-darker);
2571
- }
2572
-
2573
- @utility warning-darkest-surface {
2574
- background-color: var(--color-warning-darkest);
2575
- color: var(--color-on-warning-darkest);
2576
- border-color: var(--color-border-warning-darkest);
2577
- }
2578
-
2579
- @utility ax-warning {
2580
- --ax-comp-bg-lightest: var(--color-warning-lightest);
2581
- --ax-comp-text-lightest: var(--color-on-warning-lightest);
2582
- --ax-comp-border-lightest: var(--color-border-warning-lightest);
2583
- --ax-comp-bg-lighter: var(--color-warning-lighter);
2584
- --ax-comp-text-lighter: var(--color-on-warning-lighter);
2585
- --ax-comp-border-lighter: var(--color-border-warning-lighter);
2586
- --ax-comp-bg-light: var(--color-warning-light);
2587
- --ax-comp-text-light: var(--color-on-warning-light);
2588
- --ax-comp-border-light: var(--color-border-warning-light);
2589
- --ax-comp-bg: var(--color-warning);
2590
- --ax-comp-text: var(--color-on-warning);
2591
- --ax-comp-border: var(--color-border-warning);
2592
- --ax-comp-bg-dark: var(--color-warning-dark);
2593
- --ax-comp-text-dark: var(--color-on-warning-dark);
2594
- --ax-comp-border-dark: var(--color-border-warning-dark);
2595
- --ax-comp-bg-darker: var(--color-warning-darker);
2596
- --ax-comp-text-darker: var(--color-on-warning-darker);
2597
- --ax-comp-border-darker: var(--color-border-warning-darker);
2598
- --ax-comp-bg-darkest: var(--color-warning-darkest);
2599
- --ax-comp-text-darkest: var(--color-on-warning-darkest);
2600
- --ax-comp-border-darkest: var(--color-border-warning-darkest);
2601
- }
2602
-
2603
- /* Danger Surfaces */
2604
-
2605
- @utility danger-lightest-surface {
2606
- background-color: var(--color-danger-lightest);
2607
- color: var(--color-on-danger-lightest);
2608
- border-color: var(--color-border-danger-lightest);
2609
- }
2610
-
2611
- @utility danger-lighter-surface {
2612
- background-color: var(--color-danger-lighter);
2613
- color: var(--color-on-danger-lighter);
2614
- border-color: var(--color-border-danger-lighter);
2615
- }
2616
-
2617
- @utility danger-light-surface {
2618
- background-color: var(--color-danger-light);
2619
- color: var(--color-on-danger-light);
2620
- border-color: var(--color-border-danger-light);
2621
- }
2622
-
2623
- @utility danger-surface {
2624
- background-color: var(--color-danger);
2625
- color: var(--color-on-danger);
2626
- border-color: var(--color-border-danger);
2627
- }
2628
-
2629
- @utility danger-dark-surface {
2630
- background-color: var(--color-danger-dark);
2631
- color: var(--color-on-danger-dark);
2632
- border-color: var(--color-border-danger-dark);
2633
- }
2634
-
2635
- @utility danger-darker-surface {
2636
- background-color: var(--color-danger-darker);
2637
- color: var(--color-on-danger-darker);
2638
- border-color: var(--color-border-danger-darker);
2639
- }
2640
-
2641
- @utility danger-darkest-surface {
2642
- background-color: var(--color-danger-darkest);
2643
- color: var(--color-on-danger-darkest);
2644
- border-color: var(--color-border-danger-darkest);
2645
- }
2646
-
2647
- @utility ax-danger {
2648
- --ax-comp-bg-lightest: var(--color-danger-lightest);
2649
- --ax-comp-text-lightest: var(--color-on-danger-lightest);
2650
- --ax-comp-border-lightest: var(--color-border-danger-lightest);
2651
- --ax-comp-bg-lighter: var(--color-danger-lighter);
2652
- --ax-comp-text-lighter: var(--color-on-danger-lighter);
2653
- --ax-comp-border-lighter: var(--color-border-danger-lighter);
2654
- --ax-comp-bg-light: var(--color-danger-light);
2655
- --ax-comp-text-light: var(--color-on-danger-light);
2656
- --ax-comp-border-light: var(--color-border-danger-light);
2657
- --ax-comp-bg: var(--color-danger);
2658
- --ax-comp-text: var(--color-on-danger);
2659
- --ax-comp-border: var(--color-border-danger);
2660
- --ax-comp-bg-dark: var(--color-danger-dark);
2661
- --ax-comp-text-dark: var(--color-on-danger-dark);
2662
- --ax-comp-border-dark: var(--color-border-danger-dark);
2663
- --ax-comp-bg-darker: var(--color-danger-darker);
2664
- --ax-comp-text-darker: var(--color-on-danger-darker);
2665
- --ax-comp-border-darker: var(--color-border-danger-darker);
2666
- --ax-comp-bg-darkest: var(--color-danger-darkest);
2667
- --ax-comp-text-darkest: var(--color-on-danger-darkest);
2668
- --ax-comp-border-darkest: var(--color-border-danger-darkest);
2669
- }
2670
-
2671
- /* Surface Surfaces */
2672
-
2673
- @utility lightest-surface {
2674
- background-color: var(--color-lightest);
2675
- color: var(--color-on-lightest);
2676
- border-color: var(--color-border-lightest);
2677
- }
2678
-
2679
- @utility lighter-surface {
2680
- background-color: var(--color-lighter);
2681
- color: var(--color-on-lighter);
2682
- border-color: var(--color-border-lighter);
2683
- }
2684
-
2685
- @utility light-surface {
2686
- background-color: var(--color-light);
2687
- color: var(--color-on-light);
2688
- border-color: var(--color-border-light);
2689
- }
2690
-
2691
- @utility surface {
2692
- background-color: var(--color-surface);
2693
- color: var(--color-on-surface);
2694
- border-color: var(--color-border-surface);
2695
- }
2696
-
2697
- @utility dark-surface {
2698
- background-color: var(--color-dark);
2699
- color: var(--color-on-dark);
2700
- border-color: var(--color-border-dark);
2701
- }
2702
-
2703
- @utility darker-surface {
2704
- background-color: var(--color-darker);
2705
- color: var(--color-on-darker);
2706
- border-color: var(--color-border-darker);
2707
- }
2708
-
2709
- @utility darkest-surface {
2710
- background-color: var(--color-darkest);
2711
- color: var(--color-on-darkest);
2712
- border-color: var(--color-border-darkest);
2713
- }
2714
-
2715
- @utility ax-surface {
2716
- --ax-comp-bg-lightest: var(--color-lightest);
2717
- --ax-comp-text-lightest: var(--color-on-lightest);
2718
- --ax-comp-border-lightest: var(--color-border-lightest);
2719
- --ax-comp-bg-lighter: var(--color-lighter);
2720
- --ax-comp-text-lighter: var(--color-on-lighter);
2721
- --ax-comp-border-lighter: var(--color-border-lighter);
2722
- --ax-comp-bg-light: var(--color-light);
2723
- --ax-comp-text-light: var(--color-on-light);
2724
- --ax-comp-border-light: var(--color-border-light);
2725
- --ax-comp-bg: var(--color-surface);
2726
- --ax-comp-text: var(--color-on-surface);
2727
- --ax-comp-border: var(--color-border-surface);
2728
- --ax-comp-bg-dark: var(--color-dark);
2729
- --ax-comp-text-dark: var(--color-on-dark);
2730
- --ax-comp-border-dark: var(--color-border-dark);
2731
- --ax-comp-bg-darker: var(--color-darker);
2732
- --ax-comp-text-darker: var(--color-on-darker);
2733
- --ax-comp-border-darker: var(--color-border-darker);
2734
- --ax-comp-bg-darkest: var(--color-darkest);
2735
- --ax-comp-text-darkest: var(--color-on-darkest);
2736
- --ax-comp-border-darkest: var(--color-border-darkest);
2737
- }
2738
-
2739
- /* Accent Surfaces */
2740
-
2741
- @utility accent-lightest-surface {
2742
- background-color: var(--color-accent-lightest);
2743
- color: var(--color-on-accent-lightest);
2744
- border-color: var(--color-border-accent-lightest);
2745
- }
2746
-
2747
- @utility accent-lighter-surface {
2748
- background-color: var(--color-accent-lighter);
2749
- color: var(--color-on-accent-lighter);
2750
- border-color: var(--color-border-accent-lighter);
2751
- }
2752
-
2753
- @utility accent-light-surface {
2754
- background-color: var(--color-accent-light);
2755
- color: var(--color-on-accent-light);
2756
- border-color: var(--color-border-accent-light);
2757
- }
2758
-
2759
- @utility accent-surface {
2760
- background-color: var(--color-accent);
2761
- color: var(--color-on-accent);
2762
- border-color: var(--color-border-accent);
2763
- }
2764
-
2765
- @utility accent-dark-surface {
2766
- background-color: var(--color-accent-dark);
2767
- color: var(--color-on-accent-dark);
2768
- border-color: var(--color-border-accent-dark);
2769
- }
2770
-
2771
- @utility accent-darker-surface {
2772
- background-color: var(--color-accent-darker);
2773
- color: var(--color-on-accent-darker);
2774
- border-color: var(--color-border-accent-darker);
2775
- }
2776
-
2777
- @utility accent-darkest-surface {
2778
- background-color: var(--color-accent-darkest);
2779
- color: var(--color-on-accent-darkest);
2780
- border-color: var(--color-border-accent-darkest);
2781
- }
2782
-
2783
- @utility ax-accent {
2784
- --ax-comp-bg-lightest: var(--color-accent-lightest);
2785
- --ax-comp-text-lightest: var(--color-on-accent-lightest);
2786
- --ax-comp-border-lightest: var(--color-border-accent-lightest);
2787
- --ax-comp-bg-lighter: var(--color-accent-lighter);
2788
- --ax-comp-text-lighter: var(--color-on-accent-lighter);
2789
- --ax-comp-border-lighter: var(--color-border-accent-lighter);
2790
- --ax-comp-bg-light: var(--color-accent-light);
2791
- --ax-comp-text-light: var(--color-on-accent-light);
2792
- --ax-comp-border-light: var(--color-border-accent-light);
2793
- --ax-comp-bg: var(--color-accent);
2794
- --ax-comp-text: var(--color-on-accent);
2795
- --ax-comp-border: var(--color-border-accent);
2796
- --ax-comp-bg-dark: var(--color-accent-dark);
2797
- --ax-comp-text-dark: var(--color-on-accent-dark);
2798
- --ax-comp-border-dark: var(--color-border-accent-dark);
2799
- --ax-comp-bg-darker: var(--color-accent-darker);
2800
- --ax-comp-text-darker: var(--color-on-accent-darker);
2801
- --ax-comp-border-darker: var(--color-border-accent-darker);
2802
- --ax-comp-bg-darkest: var(--color-accent-darkest);
2803
- --ax-comp-text-darkest: var(--color-on-accent-darkest);
2804
- --ax-comp-border-darkest: var(--color-border-accent-darkest);
2805
- }
2806
-
2807
- /* Accent 1 Surfaces */
2808
-
2809
- @utility accent1-lightest-surface {
2810
- background-color: var(--color-accent1-lightest);
2811
- color: var(--color-on-accent1-lightest);
2812
- border-color: var(--color-border-accent1-lightest);
2813
- }
2814
-
2815
- @utility accent1-lighter-surface {
2816
- background-color: var(--color-accent1-lighter);
2817
- color: var(--color-on-accent1-lighter);
2818
- border-color: var(--color-border-accent1-lighter);
2819
- }
2820
-
2821
- @utility accent1-light-surface {
2822
- background-color: var(--color-accent1-light);
2823
- color: var(--color-on-accent1-light);
2824
- border-color: var(--color-border-accent1-light);
2825
- }
2826
-
2827
- @utility accent1-surface {
2828
- background-color: var(--color-accent1);
2829
- color: var(--color-on-accent1);
2830
- border-color: var(--color-border-accent1);
2831
- }
2832
-
2833
- @utility accent1-dark-surface {
2834
- background-color: var(--color-accent1-dark);
2835
- color: var(--color-on-accent1-dark);
2836
- border-color: var(--color-border-accent1-dark);
2837
- }
2838
-
2839
- @utility accent1-darker-surface {
2840
- background-color: var(--color-accent1-darker);
2841
- color: var(--color-on-accent1-darker);
2842
- border-color: var(--color-border-accent1-darker);
2843
- }
2844
-
2845
- @utility accent1-darkest-surface {
2846
- background-color: var(--color-accent1-darkest);
2847
- color: var(--color-on-accent1-darkest);
2848
- border-color: var(--color-border-accent1-darkest);
2849
- }
2850
-
2851
- @utility ax-accent1 {
2852
- --ax-comp-bg-lightest: var(--color-accent1-lightest);
2853
- --ax-comp-text-lightest: var(--color-on-accent1-lightest);
2854
- --ax-comp-border-lightest: var(--color-border-accent1-lightest);
2855
- --ax-comp-bg-lighter: var(--color-accent1-lighter);
2856
- --ax-comp-text-lighter: var(--color-on-accent1-lighter);
2857
- --ax-comp-border-lighter: var(--color-border-accent1-lighter);
2858
- --ax-comp-bg-light: var(--color-accent1-light);
2859
- --ax-comp-text-light: var(--color-on-accent1-light);
2860
- --ax-comp-border-light: var(--color-border-accent1-light);
2861
- --ax-comp-bg: var(--color-accent1);
2862
- --ax-comp-text: var(--color-on-accent1);
2863
- --ax-comp-border: var(--color-border-accent1);
2864
- --ax-comp-bg-dark: var(--color-accent1-dark);
2865
- --ax-comp-text-dark: var(--color-on-accent1-dark);
2866
- --ax-comp-border-dark: var(--color-border-accent1-dark);
2867
- --ax-comp-bg-darker: var(--color-accent1-darker);
2868
- --ax-comp-text-darker: var(--color-on-accent1-darker);
2869
- --ax-comp-border-darker: var(--color-border-accent1-darker);
2870
- --ax-comp-bg-darkest: var(--color-accent1-darkest);
2871
- --ax-comp-text-darkest: var(--color-on-accent1-darkest);
2872
- --ax-comp-border-darkest: var(--color-border-accent1-darkest);
2873
- }
2874
-
2875
- /* Accent 2 Surfaces */
2876
-
2877
- @utility accent2-lightest-surface {
2878
- background-color: var(--color-accent2-lightest);
2879
- color: var(--color-on-accent2-lightest);
2880
- border-color: var(--color-border-accent2-lightest);
2881
- }
2882
-
2883
- @utility accent2-lighter-surface {
2884
- background-color: var(--color-accent2-lighter);
2885
- color: var(--color-on-accent2-lighter);
2886
- border-color: var(--color-border-accent2-lighter);
2887
- }
2888
-
2889
- @utility accent2-light-surface {
2890
- background-color: var(--color-accent2-light);
2891
- color: var(--color-on-accent2-light);
2892
- border-color: var(--color-border-accent2-light);
2893
- }
2894
-
2895
- @utility accent2-surface {
2896
- background-color: var(--color-accent2);
2897
- color: var(--color-on-accent2);
2898
- border-color: var(--color-border-accent2);
2899
- }
2900
-
2901
- @utility accent2-dark-surface {
2902
- background-color: var(--color-accent2-dark);
2903
- color: var(--color-on-accent2-dark);
2904
- border-color: var(--color-border-accent2-dark);
2905
- }
2906
-
2907
- @utility accent2-darker-surface {
2908
- background-color: var(--color-accent2-darker);
2909
- color: var(--color-on-accent2-darker);
2910
- border-color: var(--color-border-accent2-darker);
2911
- }
2912
-
2913
- @utility accent2-darkest-surface {
2914
- background-color: var(--color-accent2-darkest);
2915
- color: var(--color-on-accent2-darkest);
2916
- border-color: var(--color-border-accent2-darkest);
2917
- }
2918
-
2919
- @utility ax-accent2 {
2920
- --ax-comp-bg-lightest: var(--color-accent2-lightest);
2921
- --ax-comp-text-lightest: var(--color-on-accent2-lightest);
2922
- --ax-comp-border-lightest: var(--color-border-accent2-lightest);
2923
- --ax-comp-bg-lighter: var(--color-accent2-lighter);
2924
- --ax-comp-text-lighter: var(--color-on-accent2-lighter);
2925
- --ax-comp-border-lighter: var(--color-border-accent2-lighter);
2926
- --ax-comp-bg-light: var(--color-accent2-light);
2927
- --ax-comp-text-light: var(--color-on-accent2-light);
2928
- --ax-comp-border-light: var(--color-border-accent2-light);
2929
- --ax-comp-bg: var(--color-accent2);
2930
- --ax-comp-text: var(--color-on-accent2);
2931
- --ax-comp-border: var(--color-border-accent2);
2932
- --ax-comp-bg-dark: var(--color-accent2-dark);
2933
- --ax-comp-text-dark: var(--color-on-accent2-dark);
2934
- --ax-comp-border-dark: var(--color-border-accent2-dark);
2935
- --ax-comp-bg-darker: var(--color-accent2-darker);
2936
- --ax-comp-text-darker: var(--color-on-accent2-darker);
2937
- --ax-comp-border-darker: var(--color-border-accent2-darker);
2938
- --ax-comp-bg-darkest: var(--color-accent2-darkest);
2939
- --ax-comp-text-darkest: var(--color-on-accent2-darkest);
2940
- --ax-comp-border-darkest: var(--color-border-accent2-darkest);
2941
- }
2942
-
2943
- /* Accent 3 Surfaces */
2944
-
2945
- @utility accent3-lightest-surface {
2946
- background-color: var(--color-accent3-lightest);
2947
- color: var(--color-on-accent3-lightest);
2948
- border-color: var(--color-border-accent3-lightest);
2949
- }
2950
-
2951
- @utility accent3-lighter-surface {
2952
- background-color: var(--color-accent3-lighter);
2953
- color: var(--color-on-accent3-lighter);
2954
- border-color: var(--color-border-accent3-lighter);
2955
- }
2956
-
2957
- @utility accent3-light-surface {
2958
- background-color: var(--color-accent3-light);
2959
- color: var(--color-on-accent3-light);
2960
- border-color: var(--color-border-accent3-light);
2961
- }
2962
-
2963
- @utility accent3-surface {
2964
- background-color: var(--color-accent3);
2965
- color: var(--color-on-accent3);
2966
- border-color: var(--color-border-accent3);
2967
- }
2968
-
2969
- @utility accent3-dark-surface {
2970
- background-color: var(--color-accent3-dark);
2971
- color: var(--color-on-accent3-dark);
2972
- border-color: var(--color-border-accent3-dark);
2973
- }
2974
-
2975
- @utility accent3-darker-surface {
2976
- background-color: var(--color-accent3-darker);
2977
- color: var(--color-on-accent3-darker);
2978
- border-color: var(--color-border-accent3-darker);
2979
- }
2980
-
2981
- @utility accent3-darkest-surface {
2982
- background-color: var(--color-accent3-darkest);
2983
- color: var(--color-on-accent3-darkest);
2984
- border-color: var(--color-border-accent3-darkest);
2985
- }
2986
-
2987
- @utility ax-accent3 {
2988
- --ax-comp-bg-lightest: var(--color-accent3-lightest);
2989
- --ax-comp-text-lightest: var(--color-on-accent3-lightest);
2990
- --ax-comp-border-lightest: var(--color-border-accent3-lightest);
2991
- --ax-comp-bg-lighter: var(--color-accent3-lighter);
2992
- --ax-comp-text-lighter: var(--color-on-accent3-lighter);
2993
- --ax-comp-border-lighter: var(--color-border-accent3-lighter);
2994
- --ax-comp-bg-light: var(--color-accent3-light);
2995
- --ax-comp-text-light: var(--color-on-accent3-light);
2996
- --ax-comp-border-light: var(--color-border-accent3-light);
2997
- --ax-comp-bg: var(--color-accent3);
2998
- --ax-comp-text: var(--color-on-accent3);
2999
- --ax-comp-border: var(--color-border-accent3);
3000
- --ax-comp-bg-dark: var(--color-accent3-dark);
3001
- --ax-comp-text-dark: var(--color-on-accent3-dark);
3002
- --ax-comp-border-dark: var(--color-border-accent3-dark);
3003
- --ax-comp-bg-darker: var(--color-accent3-darker);
3004
- --ax-comp-text-darker: var(--color-on-accent3-darker);
3005
- --ax-comp-border-darker: var(--color-border-accent3-darker);
3006
- --ax-comp-bg-darkest: var(--color-accent3-darkest);
3007
- --ax-comp-text-darkest: var(--color-on-accent3-darkest);
3008
- --ax-comp-border-darkest: var(--color-border-accent3-darkest);
3009
- }
3010
-
3011
- /* Accent 4 Surfaces */
3012
-
3013
- @utility accent4-lightest-surface {
3014
- background-color: var(--color-accent4-lightest);
3015
- color: var(--color-on-accent4-lightest);
3016
- border-color: var(--color-border-accent4-lightest);
3017
- }
3018
-
3019
- @utility accent4-lighter-surface {
3020
- background-color: var(--color-accent4-lighter);
3021
- color: var(--color-on-accent4-lighter);
3022
- border-color: var(--color-border-accent4-lighter);
3023
- }
3024
-
3025
- @utility accent4-light-surface {
3026
- background-color: var(--color-accent4-light);
3027
- color: var(--color-on-accent4-light);
3028
- border-color: var(--color-border-accent4-light);
3029
- }
3030
-
3031
- @utility accent4-surface {
3032
- background-color: var(--color-accent4);
3033
- color: var(--color-on-accent4);
3034
- border-color: var(--color-border-accent4);
3035
- }
3036
-
3037
- @utility accent4-dark-surface {
3038
- background-color: var(--color-accent4-dark);
3039
- color: var(--color-on-accent4-dark);
3040
- border-color: var(--color-border-accent4-dark);
3041
- }
3042
-
3043
- @utility accent4-darker-surface {
3044
- background-color: var(--color-accent4-darker);
3045
- color: var(--color-on-accent4-darker);
3046
- border-color: var(--color-border-accent4-darker);
3047
- }
3048
-
3049
- @utility accent4-darkest-surface {
3050
- background-color: var(--color-accent4-darkest);
3051
- color: var(--color-on-accent4-darkest);
3052
- border-color: var(--color-border-accent4-darkest);
3053
- }
3054
-
3055
- @utility ax-accent4 {
3056
- --ax-comp-bg-lightest: var(--color-accent4-lightest);
3057
- --ax-comp-text-lightest: var(--color-on-accent4-lightest);
3058
- --ax-comp-border-lightest: var(--color-border-accent4-lightest);
3059
- --ax-comp-bg-lighter: var(--color-accent4-lighter);
3060
- --ax-comp-text-lighter: var(--color-on-accent4-lighter);
3061
- --ax-comp-border-lighter: var(--color-border-accent4-lighter);
3062
- --ax-comp-bg-light: var(--color-accent4-light);
3063
- --ax-comp-text-light: var(--color-on-accent4-light);
3064
- --ax-comp-border-light: var(--color-border-accent4-light);
3065
- --ax-comp-bg: var(--color-accent4);
3066
- --ax-comp-text: var(--color-on-accent4);
3067
- --ax-comp-border: var(--color-border-accent4);
3068
- --ax-comp-bg-dark: var(--color-accent4-dark);
3069
- --ax-comp-text-dark: var(--color-on-accent4-dark);
3070
- --ax-comp-border-dark: var(--color-border-accent4-dark);
3071
- --ax-comp-bg-darker: var(--color-accent4-darker);
3072
- --ax-comp-text-darker: var(--color-on-accent4-darker);
3073
- --ax-comp-border-darker: var(--color-border-accent4-darker);
3074
- --ax-comp-bg-darkest: var(--color-accent4-darkest);
3075
- --ax-comp-text-darkest: var(--color-on-accent4-darkest);
3076
- --ax-comp-border-darkest: var(--color-border-accent4-darkest);
3077
- }
3078
-
3079
- /* Accent 5 Surfaces */
3080
-
3081
- @utility accent5-lightest-surface {
3082
- background-color: var(--color-accent5-lightest);
3083
- color: var(--color-on-accent5-lightest);
3084
- border-color: var(--color-border-accent5-lightest);
3085
- }
3086
-
3087
- @utility accent5-lighter-surface {
3088
- background-color: var(--color-accent5-lighter);
3089
- color: var(--color-on-accent5-lighter);
3090
- border-color: var(--color-border-accent5-lighter);
3091
- }
3092
-
3093
- @utility accent5-light-surface {
3094
- background-color: var(--color-accent5-light);
3095
- color: var(--color-on-accent5-light);
3096
- border-color: var(--color-border-accent5-light);
3097
- }
3098
-
3099
- @utility accent5-surface {
3100
- background-color: var(--color-accent5);
3101
- color: var(--color-on-accent5);
3102
- border-color: var(--color-border-accent5);
3103
- }
3104
-
3105
- @utility accent5-dark-surface {
3106
- background-color: var(--color-accent5-dark);
3107
- color: var(--color-on-accent5-dark);
3108
- border-color: var(--color-border-accent5-dark);
3109
- }
3110
-
3111
- @utility accent5-darker-surface {
3112
- background-color: var(--color-accent5-darker);
3113
- color: var(--color-on-accent5-darker);
3114
- border-color: var(--color-border-accent5-darker);
3115
- }
3116
-
3117
- @utility accent5-darkest-surface {
3118
- background-color: var(--color-accent5-darkest);
3119
- color: var(--color-on-accent5-darkest);
3120
- border-color: var(--color-border-accent5-darkest);
3121
- }
3122
-
3123
- @utility ax-accent5 {
3124
- --ax-comp-bg-lightest: var(--color-accent5-lightest);
3125
- --ax-comp-text-lightest: var(--color-on-accent5-lightest);
3126
- --ax-comp-border-lightest: var(--color-border-accent5-lightest);
3127
- --ax-comp-bg-lighter: var(--color-accent5-lighter);
3128
- --ax-comp-text-lighter: var(--color-on-accent5-lighter);
3129
- --ax-comp-border-lighter: var(--color-border-accent5-lighter);
3130
- --ax-comp-bg-light: var(--color-accent5-light);
3131
- --ax-comp-text-light: var(--color-on-accent5-light);
3132
- --ax-comp-border-light: var(--color-border-accent5-light);
3133
- --ax-comp-bg: var(--color-accent5);
3134
- --ax-comp-text: var(--color-on-accent5);
3135
- --ax-comp-border: var(--color-border-accent5);
3136
- --ax-comp-bg-dark: var(--color-accent5-dark);
3137
- --ax-comp-text-dark: var(--color-on-accent5-dark);
3138
- --ax-comp-border-dark: var(--color-border-accent5-dark);
3139
- --ax-comp-bg-darker: var(--color-accent5-darker);
3140
- --ax-comp-text-darker: var(--color-on-accent5-darker);
3141
- --ax-comp-border-darker: var(--color-border-accent5-darker);
3142
- --ax-comp-bg-darkest: var(--color-accent5-darkest);
3143
- --ax-comp-text-darkest: var(--color-on-accent5-darkest);
3144
- --ax-comp-border-darkest: var(--color-border-accent5-darkest);
3145
- }
3146
-
3147
- /* Accent 6 Surfaces */
3148
-
3149
- @utility accent6-lightest-surface {
3150
- background-color: var(--color-accent6-lightest);
3151
- color: var(--color-on-accent6-lightest);
3152
- border-color: var(--color-border-accent6-lightest);
3153
- }
3154
-
3155
- @utility accent6-lighter-surface {
3156
- background-color: var(--color-accent6-lighter);
3157
- color: var(--color-on-accent6-lighter);
3158
- border-color: var(--color-border-accent6-lighter);
3159
- }
3160
-
3161
- @utility accent6-light-surface {
3162
- background-color: var(--color-accent6-light);
3163
- color: var(--color-on-accent6-light);
3164
- border-color: var(--color-border-accent6-light);
3165
- }
3166
-
3167
- @utility accent6-surface {
3168
- background-color: var(--color-accent6);
3169
- color: var(--color-on-accent6);
3170
- border-color: var(--color-border-accent6);
3171
- }
3172
-
3173
- @utility accent6-dark-surface {
3174
- background-color: var(--color-accent6-dark);
3175
- color: var(--color-on-accent6-dark);
3176
- border-color: var(--color-border-accent6-dark);
3177
- }
3178
-
3179
- @utility accent6-darker-surface {
3180
- background-color: var(--color-accent6-darker);
3181
- color: var(--color-on-accent6-darker);
3182
- border-color: var(--color-border-accent6-darker);
3183
- }
3184
-
3185
- @utility accent6-darkest-surface {
3186
- background-color: var(--color-accent6-darkest);
3187
- color: var(--color-on-accent6-darkest);
3188
- border-color: var(--color-border-accent6-darkest);
3189
- }
3190
-
3191
- @utility ax-accent6 {
3192
- --ax-comp-bg-lightest: var(--color-accent6-lightest);
3193
- --ax-comp-text-lightest: var(--color-on-accent6-lightest);
3194
- --ax-comp-border-lightest: var(--color-border-accent6-lightest);
3195
- --ax-comp-bg-lighter: var(--color-accent6-lighter);
3196
- --ax-comp-text-lighter: var(--color-on-accent6-lighter);
3197
- --ax-comp-border-lighter: var(--color-border-accent6-lighter);
3198
- --ax-comp-bg-light: var(--color-accent6-light);
3199
- --ax-comp-text-light: var(--color-on-accent6-light);
3200
- --ax-comp-border-light: var(--color-border-accent6-light);
3201
- --ax-comp-bg: var(--color-accent6);
3202
- --ax-comp-text: var(--color-on-accent6);
3203
- --ax-comp-border: var(--color-border-accent6);
3204
- --ax-comp-bg-dark: var(--color-accent6-dark);
3205
- --ax-comp-text-dark: var(--color-on-accent6-dark);
3206
- --ax-comp-border-dark: var(--color-border-accent6-dark);
3207
- --ax-comp-bg-darker: var(--color-accent6-darker);
3208
- --ax-comp-text-darker: var(--color-on-accent6-darker);
3209
- --ax-comp-border-darker: var(--color-border-accent6-darker);
3210
- --ax-comp-bg-darkest: var(--color-accent6-darkest);
3211
- --ax-comp-text-darkest: var(--color-on-accent6-darkest);
3212
- --ax-comp-border-darkest: var(--color-border-accent6-darkest);
3213
- }
3214
-
3215
- @utility max-w-8xl {
3216
- max-width: 90rem;
3217
- }
3218
-
3219
- @utility ax-state-disabled {
3220
- @apply cursor-not-allowed opacity-50 *:cursor-not-allowed;
3221
- }
3222
-
3223
- @utility ax-state-readonly {
3224
- @apply cursor-text opacity-70 *:cursor-text;
3225
- }
3226
-
3227
- @utility ax-fill {
3228
- &.ax-default {
3229
- @apply light-surface dark:dark-surface;
3230
- }
3231
- &.ax-editor-container {
3232
- @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
3233
- }
3234
- }
3235
-
3236
- @utility ax-flat {
3237
- @apply rounded-none;
3238
- &.ax-default {
3239
- @apply border-border-lightest dark:border-border-darkest border-b bg-transparent;
3240
- }
3241
- &.ax-editor-container {
3242
- @apply focus-within:border-primary!;
3243
- }
3244
- }
3245
-
3246
- @utility ax-solid {
3247
- @apply bg-(--ax-comp-bg,var(--color-lightest)) text-(--ax-comp-text,var(--color-on-lightest)) dark:bg-(--ax-comp-bg,var(--color-darkest)) dark:text-(--ax-comp-text,var(--color-on-darkest));
3248
- &.ax-default {
3249
- @apply lightest-surface dark:darkest-surface border;
3250
- }
3251
- &.ax-state-selected {
3252
- @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
3253
- }
3254
- &.ax-editor-container {
3255
- @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
3256
- }
3257
- }
3258
-
3259
- @utility ax-solid-interactive {
3260
- @supports (color: color-mix(in lab, red, red)) {
3261
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
3262
- }
3263
- @apply ax-solid transition-colors;
3264
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3265
- &:hover,
3266
- &:focus,
3267
- &:focus-within,
3268
- &:focus-visible {
3269
- @apply bg-(--ax-comp-bg-dark,var(--color-lighter)) text-(--ax-comp-text-dark,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-dark,var(--color-darker)) dark:text-(--ax-comp-text-dark,var(--color-on-darker));
3270
- }
3271
- }
3272
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3273
- @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) ring-1 ring-(--ax-comp-bg-dark) ring-offset-1 dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
3274
- }
3275
- }
3276
-
3277
- @utility ax-outline {
3278
- @apply border border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-lightest));
3279
- &.ax-default {
3280
- @apply border-border-lightest dark:border-border-darkest border;
3281
- }
3282
- &.ax-state-selected {
3283
- @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
3284
- }
3285
- &.ax-editor-container {
3286
- @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
3287
- }
3288
- }
3289
-
3290
- @utility ax-outline-interactive {
3291
- @supports (color: color-mix(in lab, red, red)) {
3292
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3293
- }
3294
- @apply ax-outline transition-colors;
3295
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3296
- &:hover,
3297
- &:focus,
3298
- &:focus-within,
3299
- &:focus-visible {
3300
- @apply border-(--ax-comp-bg-dark,var(--color-border-lighter)) text-(--ax-comp-bg-dark,var(--color-on-lighter));
3301
- }
3302
- }
3303
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3304
- @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
3305
- }
3306
- }
3307
-
3308
- @utility ax-twotone {
3309
- @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
3310
- &.ax-state-selected {
3311
- @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
3312
- }
3313
- }
3314
-
3315
- @utility ax-twotone-interactive {
3316
- @supports (color: color-mix(in lab, red, red)) {
3317
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3318
- }
3319
- @apply ax-twotone transition-colors;
3320
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3321
- &:hover,
3322
- &:focus,
3323
- &:focus-within,
3324
- &:focus-visible {
3325
- @apply bg-(--ax-comp-bg-lighter,var(--color-light)) text-(--ax-comp-text-lighter,var(--color-on-light)) dark:bg-(--ax-comp-bg-lighter,var(--color-dark)) dark:text-(--ax-comp-text-lighter,var(--color-on-dark));
3326
- }
3327
- }
3328
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3329
- @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
3330
- }
3331
- }
3332
-
3333
- @utility ax-blank {
3334
- @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
3335
- &.ax-state-selected {
3336
- @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
3337
- }
3338
- }
3339
-
3340
- @utility ax-blank-interactive {
3341
- @supports (color: color-mix(in lab, red, red)) {
3342
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3343
- }
3344
- @apply ax-blank transition-colors;
3345
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3346
- &:hover,
3347
- &:focus,
3348
- &:focus-within,
3349
- &:focus-visible {
3350
- @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
3351
- }
3352
- }
3353
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3354
- @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
3355
- }
3356
- }
3357
-
3358
- @utility links {
3359
- @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
3360
- &.ax-state-selected {
3361
- @apply text-(--ax-comp-bg-darker,var(--color-on-surface));
3362
- }
3363
- }
3364
-
3365
- @utility links-interactive {
3366
- @supports (color: color-mix(in lab, red, red)) {
3367
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3368
- }
3369
- @apply links transition-colors;
3370
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3371
- &:hover,
3372
- &:focus,
3373
- &:focus-within,
3374
- &:focus-visible {
3375
- @apply text-(--ax-comp-bg-dark,var(--color-on-surface));
3376
- }
3377
- }
3378
- &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3379
- @apply text-(--ax-comp-bg-darker,var(--color-on-surface));
3380
- }
3381
- }
3382
- @utility h1 {
3383
- font-size: 2.5rem;
3384
- font-weight: 500;
3385
- line-height: 2.5rem;
3386
- }
3387
- @utility h2 {
3388
- font-size: 2rem;
3389
- font-weight: 500;
3390
- line-height: 2rem;
3391
- }
3392
- @utility h3 {
3393
- font-size: 1.75rem;
3394
- font-weight: 500;
3395
- line-height: 1.75rem;
3396
- }
3397
- @utility h4 {
3398
- font-size: 1.5rem;
3399
- font-weight: 500;
3400
- line-height: 1.5rem;
3401
- }
3402
- @utility h5 {
3403
- font-size: 1.125rem;
3404
- font-weight: 500;
3405
- line-height: 1.125rem;
3406
- }
3407
- @utility h6 {
3408
- font-size: 1rem;
3409
- font-weight: 500;
3410
- line-height: 1rem;
3411
- }
3412
- @utility heading {
3413
- width: 100%;
3414
- border-bottom: 1px solid;
3415
- border-color: rgba(var(--ax-sys-color-border-lightest-surface));
3416
- line-height: 0.1em;
3417
- margin: 1rem auto;
3418
- }
3419
- @utility heading-start {
3420
- text-align: start;
3421
- }
3422
- @utility heading-center {
3423
- text-align: center;
3424
- }
3425
- @utility heading-end {
3426
- text-align: end;
3427
- }
3428
- @utility subtitle {
3429
- opacity: 74%;
3430
- display: block;
3431
- font-size: 1rem;
3432
- font-weight: 400;
3433
- line-height: 1.625rem;
3434
- }
3435
- @utility tabs-fit {
3436
- width: 100%;
3437
- }
3438
-
3439
- @utility ax-xs {
3440
- /* Spacing */
3441
- --spacing: calc(var(--ax-sys-spacing-base) * 0.5);
3442
- --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.5);
3443
-
3444
- /* Typography */
3445
- --text-xs: calc(var(--ax-sys-text-xs-base) * 5 / 6);
3446
- --text-sm: calc(var(--ax-sys-text-sm-base) * 11 / 14);
3447
- --text-base: calc(var(--ax-sys-body-font-size) * 0.75);
3448
- --text-lg: calc(var(--ax-sys-text-lg-base) * 7 / 9);
3449
- --text-xl: calc(var(--ax-sys-text-xl-base) * 0.8);
3450
-
3451
- /* Line Heights */
3452
- --leading-3: var(--ax-sys-leading-3-base);
3453
- --leading-4: calc(var(--ax-sys-leading-4-base) * 0.875);
3454
- --leading-5: calc(var(--ax-sys-leading-5-base) * 0.8);
3455
- --leading-6: calc(var(--ax-sys-leading-6-base) * 5 / 6);
3456
- }
3457
-
3458
- @utility ax-sm {
3459
- /* Spacing */
3460
- --spacing: calc(var(--ax-sys-spacing-base) * 0.75);
3461
- --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.75);
3462
-
3463
- /* Typography */
3464
- --text-xs: calc(var(--ax-sys-text-xs-base) * 11 / 12);
3465
- --text-sm: calc(var(--ax-sys-text-sm-base) * 6 / 7);
3466
- --text-base: calc(var(--ax-sys-body-font-size) * 0.875);
3467
- --text-lg: calc(var(--ax-sys-text-lg-base) * 8 / 9);
3468
- --text-xl: calc(var(--ax-sys-text-xl-base) * 0.9);
3469
-
3470
- /* Line Heights */
3471
- --leading-3: calc(var(--ax-sys-leading-3-base) * 7 / 6);
3472
- --leading-4: var(--ax-sys-leading-4-base);
3473
- --leading-5: calc(var(--ax-sys-leading-5-base) * 0.9);
3474
- --leading-6: calc(var(--ax-sys-leading-6-base) * 11 / 12);
3475
- }
3476
-
3477
- @utility ax-md {
3478
- /* Tailwind Default Scale */
3479
- --spacing: var(--ax-sys-spacing-base);
3480
- --ax-sys-border-radius: var(--ax-sys-border-radius-base);
3481
-
3482
- /* Typography */
3483
- --text-xs: var(--ax-sys-text-xs-base);
3484
- --text-sm: var(--ax-sys-text-sm-base);
3485
- --text-base: var(--ax-sys-body-font-size);
3486
- --text-lg: var(--ax-sys-text-lg-base);
3487
- --text-xl: var(--ax-sys-text-xl-base);
3488
-
3489
- /* Line Heights */
3490
- --leading-3: var(--ax-sys-leading-3-base);
3491
- --leading-4: var(--ax-sys-leading-4-base);
3492
- --leading-5: var(--ax-sys-leading-5-base);
3493
- --leading-6: var(--ax-sys-leading-6-base);
3494
- }
3495
-
3496
- @utility ax-lg {
3497
- /* Spacing */
3498
- --spacing: calc(var(--ax-sys-spacing-base) * 1.25);
3499
- --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.25);
3500
-
3501
- /* Typography */
3502
- --text-xs: calc(var(--ax-sys-text-xs-base) * 13 / 12);
3503
- --text-sm: calc(var(--ax-sys-text-sm-base) * 15 / 14);
3504
- --text-base: calc(var(--ax-sys-body-font-size) * 17 / 16);
3505
- --text-lg: calc(var(--ax-sys-text-lg-base) * 10 / 9);
3506
- --text-xl: calc(var(--ax-sys-text-xl-base) * 1.1);
3507
-
3508
- /* Line Heights */
3509
- --leading-3: calc(var(--ax-sys-leading-3-base) * 4 / 3);
3510
- --leading-4: calc(var(--ax-sys-leading-4-base) * 1.125);
3511
- --leading-5: calc(var(--ax-sys-leading-5-base) * 1.1);
3512
- --leading-6: calc(var(--ax-sys-leading-6-base) * 13 / 12);
3513
- }
3514
-
3515
- @utility ax-xl {
3516
- /* Spacing */
3517
- --spacing: calc(var(--ax-sys-spacing-base) * 1.5);
3518
- --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.5);
3519
-
3520
- /* Typography */
3521
- --text-xs: calc(var(--ax-sys-text-xs-base) * 7 / 6);
3522
- --text-sm: calc(var(--ax-sys-text-sm-base) * 8 / 7);
3523
- --text-base: calc(var(--ax-sys-body-font-size) * 1.125);
3524
- --text-lg: calc(var(--ax-sys-text-lg-base) * 11 / 9);
3525
- --text-xl: calc(var(--ax-sys-text-xl-base) * 1.2);
3526
-
3527
- /* Line Heights */
3528
- --leading-3: calc(var(--ax-sys-leading-3-base) * 1.5);
3529
- --leading-4: calc(var(--ax-sys-leading-4-base) * 1.25);
3530
- --leading-5: calc(var(--ax-sys-leading-5-base) * 1.2);
3531
- --leading-6: calc(var(--ax-sys-leading-6-base) * 7 / 6);
3532
- }