@acorex/styles 21.0.1-next.59 → 21.0.1-next.60

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 (2) hide show
  1. package/package.json +1 -1
  2. package/themes/default.css +447 -987
@@ -165,78 +165,6 @@ html.dark {
165
165
  --ax-sys-color-accent-900: 43, 85, 98;
166
166
  --ax-sys-color-accent-950: 22, 38, 44;
167
167
 
168
- --ax-sys-color-accent2-50: 255, 236, 255;
169
- --ax-sys-color-accent2-100: 255, 218, 255;
170
- --ax-sys-color-accent2-200: 255, 192, 255;
171
- --ax-sys-color-accent2-300: 253, 149, 255;
172
- --ax-sys-color-accent2-400: 238, 92, 255;
173
- --ax-sys-color-accent2-500: 217, 70, 239;
174
- --ax-sys-color-accent2-600: 195, 42, 216;
175
- --ax-sys-color-accent2-700: 167, 0, 189;
176
- --ax-sys-color-accent2-800: 138, 24, 155;
177
- --ax-sys-color-accent2-900: 107, 45, 118;
178
- --ax-sys-color-accent2-950: 52, 26, 56;
179
-
180
- --ax-sys-color-accent3-50: 255, 240, 226;
181
- --ax-sys-color-accent3-100: 255, 228, 207;
182
- --ax-sys-color-accent3-200: 255, 209, 179;
183
- --ax-sys-color-accent3-300: 255, 178, 132;
184
- --ax-sys-color-accent3-400: 255, 134, 54;
185
- --ax-sys-color-accent3-500: 249, 115, 22;
186
- --ax-sys-color-accent3-600: 223, 91, 0;
187
- --ax-sys-color-accent3-700: 187, 68, 0;
188
- --ax-sys-color-accent3-800: 151, 58, 18;
189
- --ax-sys-color-accent3-900: 115, 57, 37;
190
- --ax-sys-color-accent3-950: 52, 26, 19;
191
-
192
- --ax-sys-color-accent4-50: 198, 255, 251;
193
- --ax-sys-color-accent4-100: 143, 255, 244;
194
- --ax-sys-color-accent4-200: 114, 250, 231;
195
- --ax-sys-color-accent4-300: 90, 229, 209;
196
- --ax-sys-color-accent4-400: 54, 201, 183;
197
- --ax-sys-color-accent4-500: 20, 184, 166;
198
- --ax-sys-color-accent4-600: 0, 161, 144;
199
- --ax-sys-color-accent4-700: 0, 132, 117;
200
- --ax-sys-color-accent4-800: 23, 108, 95;
201
- --ax-sys-color-accent4-900: 43, 87, 79;
202
- --ax-sys-color-accent4-950: 23, 40, 36;
203
-
204
- --ax-sys-color-accent5-50: 237, 242, 255;
205
- --ax-sys-color-accent5-100: 220, 228, 255;
206
- --ax-sys-color-accent5-200: 196, 207, 255;
207
- --ax-sys-color-accent5-300: 161, 173, 255;
208
- --ax-sys-color-accent5-400: 119, 126, 255;
209
- --ax-sys-color-accent5-500: 99, 102, 241;
210
- --ax-sys-color-accent5-600: 86, 85, 223;
211
- --ax-sys-color-accent5-700: 71, 64, 201;
212
- --ax-sys-color-accent5-800: 59, 52, 175;
213
- --ax-sys-color-accent5-900: 52, 53, 137;
214
- --ax-sys-color-accent5-950: 31, 35, 83;
215
-
216
- --ax-sys-color-accent6-50: 255, 235, 248;
217
- --ax-sys-color-accent6-100: 255, 219, 237;
218
- --ax-sys-color-accent6-200: 255, 194, 222;
219
- --ax-sys-color-accent6-300: 255, 152, 200;
220
- --ax-sys-color-accent6-400: 255, 94, 172;
221
- --ax-sys-color-accent6-500: 236, 72, 153;
222
- --ax-sys-color-accent6-600: 213, 48, 134;
223
- --ax-sys-color-accent6-700: 185, 0, 111;
224
- --ax-sys-color-accent6-800: 156, 23, 92;
225
- --ax-sys-color-accent6-900: 119, 43, 77;
226
- --ax-sys-color-accent6-950: 59, 26, 39;
227
-
228
- --ax-sys-color-accent7-50: 250, 241, 236;
229
- --ax-sys-color-accent7-100: 235, 227, 221;
230
- --ax-sys-color-accent7-200: 214, 206, 201;
231
- --ax-sys-color-accent7-300: 183, 175, 170;
232
- --ax-sys-color-accent7-400: 144, 137, 132;
233
- --ax-sys-color-accent7-500: 120, 113, 108;
234
- --ax-sys-color-accent7-600: 107, 100, 95;
235
- --ax-sys-color-accent7-700: 91, 84, 80;
236
- --ax-sys-color-accent7-800: 78, 72, 68;
237
- --ax-sys-color-accent7-900: 67, 63, 60;
238
- --ax-sys-color-accent7-950: 41, 38, 36;
239
-
240
168
  --ax-sys-color-primary-lightest-surface: 211, 234, 255;
241
169
  --ax-sys-color-on-primary-lightest-surface: 29, 48, 64;
242
170
  --ax-sys-color-border-primary-lightest-surface: 175, 217, 255;
@@ -377,34 +305,6 @@ html.dark {
377
305
  --ax-sys-color-on-danger-darkest-surface: 255, 247, 247;
378
306
  --ax-sys-color-border-danger-darkest-surface: 128, 18, 38;
379
307
 
380
- --ax-sys-color-surface-lightest-surface: 244, 244, 244;
381
- --ax-sys-color-on-surface-lightest-surface: 46, 46, 46;
382
- --ax-sys-color-border-surface-lightest-surface: 226, 226, 226;
383
-
384
- --ax-sys-color-surface-lighter-surface: 235, 235, 235;
385
- --ax-sys-color-on-surface-lighter-surface: 46, 46, 46;
386
- --ax-sys-color-border-surface-lighter-surface: 217, 217, 217;
387
-
388
- --ax-sys-color-surface-light-surface: 222, 222, 222;
389
- --ax-sys-color-on-surface-light-surface: 46, 46, 46;
390
- --ax-sys-color-border-surface-light-surface: 204, 204, 204;
391
-
392
- --ax-sys-color-surface: 194, 194, 194;
393
- --ax-sys-color-on-surface: 46, 46, 46;
394
- --ax-sys-color-border-surface: 176, 176, 176;
395
-
396
- --ax-sys-color-surface-dark-surface: 165, 165, 165;
397
- --ax-sys-color-on-surface-dark-surface: 253, 253, 253;
398
- --ax-sys-color-border-surface-dark-surface: 147, 147, 147;
399
-
400
- --ax-sys-color-surface-darker-surface: 131, 131, 131;
401
- --ax-sys-color-on-surface-darker-surface: 253, 253, 253;
402
- --ax-sys-color-border-surface-darker-surface: 113, 113, 113;
403
-
404
- --ax-sys-color-surface-darkest-surface: 104, 104, 104;
405
- --ax-sys-color-on-surface-darkest-surface: 253, 253, 253;
406
- --ax-sys-color-border-surface-darkest-surface: 86, 86, 86;
407
-
408
308
  --ax-sys-color-accent-lightest-surface: 181, 251, 255;
409
309
  --ax-sys-color-on-accent-lightest-surface: 0, 55, 60;
410
310
  --ax-sys-color-border-accent-lightest-surface: 145, 249, 255;
@@ -433,174 +333,6 @@ html.dark {
433
333
  --ax-sys-color-on-accent-darkest-surface: 229, 255, 255;
434
334
  --ax-sys-color-border-accent-darkest-surface: 17, 80, 96;
435
335
 
436
- --ax-sys-color-accent2-lightest-surface: 255, 218, 255;
437
- --ax-sys-color-on-accent2-lightest-surface: 62, 34, 63;
438
- --ax-sys-color-border-accent2-lightest-surface: 255, 182, 255;
439
-
440
- --ax-sys-color-accent2-lighter-surface: 255, 192, 255;
441
- --ax-sys-color-on-accent2-lighter-surface: 72, 19, 74;
442
- --ax-sys-color-border-accent2-lighter-surface: 255, 156, 255;
443
-
444
- --ax-sys-color-accent2-light-surface: 253, 149, 255;
445
- --ax-sys-color-on-accent2-light-surface: 82, 0, 87;
446
- --ax-sys-color-border-accent2-light-surface: 252, 113, 255;
447
-
448
- --ax-sys-color-accent2-surface: 217, 70, 239;
449
- --ax-sys-color-on-accent2-surface: 255, 247, 255;
450
- --ax-sys-color-border-accent2-surface: 210, 37, 236;
451
-
452
- --ax-sys-color-accent2-dark-surface: 195, 42, 216;
453
- --ax-sys-color-on-accent2-dark-surface: 255, 247, 255;
454
- --ax-sys-color-border-accent2-dark-surface: 169, 34, 188;
455
-
456
- --ax-sys-color-accent2-darker-surface: 167, 0, 189;
457
- --ax-sys-color-on-accent2-darker-surface: 255, 247, 255;
458
- --ax-sys-color-border-accent2-darker-surface: 135, 0, 153;
459
-
460
- --ax-sys-color-accent2-darkest-surface: 138, 24, 155;
461
- --ax-sys-color-on-accent2-darkest-surface: 255, 247, 255;
462
- --ax-sys-color-border-accent2-darkest-surface: 110, 19, 124;
463
-
464
- --ax-sys-color-accent3-lightest-surface: 255, 228, 207;
465
- --ax-sys-color-on-accent3-lightest-surface: 61, 41, 24;
466
- --ax-sys-color-border-accent3-lightest-surface: 255, 208, 171;
467
-
468
- --ax-sys-color-accent3-lighter-surface: 255, 209, 179;
469
- --ax-sys-color-on-accent3-lighter-surface: 70, 35, 8;
470
- --ax-sys-color-border-accent3-lighter-surface: 255, 187, 143;
471
-
472
- --ax-sys-color-accent3-light-surface: 255, 178, 132;
473
- --ax-sys-color-on-accent3-light-surface: 83, 24, 0;
474
- --ax-sys-color-border-accent3-light-surface: 255, 156, 96;
475
-
476
- --ax-sys-color-accent3-surface: 249, 115, 22;
477
- --ax-sys-color-on-accent3-surface: 255, 249, 238;
478
- --ax-sys-color-border-accent3-surface: 229, 97, 6;
479
-
480
- --ax-sys-color-accent3-dark-surface: 223, 91, 0;
481
- --ax-sys-color-on-accent3-dark-surface: 255, 248, 239;
482
- --ax-sys-color-border-accent3-dark-surface: 187, 76, 0;
483
-
484
- --ax-sys-color-accent3-darker-surface: 187, 68, 0;
485
- --ax-sys-color-on-accent3-darker-surface: 255, 248, 240;
486
- --ax-sys-color-border-accent3-darker-surface: 151, 55, 0;
487
-
488
- --ax-sys-color-accent3-darkest-surface: 151, 58, 18;
489
- --ax-sys-color-on-accent3-darkest-surface: 255, 248, 241;
490
- --ax-sys-color-border-accent3-darkest-surface: 119, 46, 14;
491
-
492
- --ax-sys-color-accent4-lightest-surface: 143, 255, 244;
493
- --ax-sys-color-on-accent4-lightest-surface: 0, 57, 52;
494
- --ax-sys-color-border-accent4-lightest-surface: 107, 255, 240;
495
-
496
- --ax-sys-color-accent4-lighter-surface: 114, 250, 231;
497
- --ax-sys-color-on-accent4-lighter-surface: 0, 57, 49;
498
- --ax-sys-color-border-accent4-lighter-surface: 80, 249, 225;
499
-
500
- --ax-sys-color-accent4-light-surface: 90, 229, 209;
501
- --ax-sys-color-on-accent4-light-surface: 0, 57, 49;
502
- --ax-sys-color-border-accent4-light-surface: 59, 224, 200;
503
-
504
- --ax-sys-color-accent4-surface: 20, 184, 166;
505
- --ax-sys-color-on-accent4-surface: 226, 255, 255;
506
- --ax-sys-color-border-accent4-surface: 17, 152, 137;
507
-
508
- --ax-sys-color-accent4-dark-surface: 0, 161, 144;
509
- --ax-sys-color-on-accent4-dark-surface: 226, 255, 255;
510
- --ax-sys-color-border-accent4-dark-surface: 0, 125, 112;
511
-
512
- --ax-sys-color-accent4-darker-surface: 0, 132, 117;
513
- --ax-sys-color-on-accent4-darker-surface: 226, 255, 255;
514
- --ax-sys-color-border-accent4-darker-surface: 0, 96, 85;
515
-
516
- --ax-sys-color-accent4-darkest-surface: 23, 108, 95;
517
- --ax-sys-color-on-accent4-darkest-surface: 227, 255, 254;
518
- --ax-sys-color-border-accent4-darkest-surface: 17, 79, 69;
519
-
520
- --ax-sys-color-accent5-lightest-surface: 220, 228, 255;
521
- --ax-sys-color-on-accent5-lightest-surface: 39, 45, 65;
522
- --ax-sys-color-border-accent5-lightest-surface: 184, 200, 255;
523
-
524
- --ax-sys-color-accent5-lighter-surface: 196, 207, 255;
525
- --ax-sys-color-on-accent5-lighter-surface: 36, 42, 79;
526
- --ax-sys-color-border-accent5-lighter-surface: 160, 178, 255;
527
-
528
- --ax-sys-color-accent5-light-surface: 161, 173, 255;
529
- --ax-sys-color-on-accent5-light-surface: 34, 34, 103;
530
- --ax-sys-color-border-accent5-light-surface: 125, 142, 255;
531
-
532
- --ax-sys-color-accent5-surface: 99, 102, 241;
533
- --ax-sys-color-on-accent5-surface: 249, 252, 255;
534
- --ax-sys-color-border-accent5-surface: 66, 70, 238;
535
-
536
- --ax-sys-color-accent5-dark-surface: 86, 85, 223;
537
- --ax-sys-color-on-accent5-dark-surface: 249, 252, 255;
538
- --ax-sys-color-border-accent5-dark-surface: 56, 55, 217;
539
-
540
- --ax-sys-color-accent5-darker-surface: 71, 64, 201;
541
- --ax-sys-color-on-accent5-darker-surface: 249, 252, 255;
542
- --ax-sys-color-border-accent5-darker-surface: 57, 51, 179;
543
-
544
- --ax-sys-color-accent5-darkest-surface: 59, 52, 175;
545
- --ax-sys-color-on-accent5-darkest-surface: 249, 252, 255;
546
- --ax-sys-color-border-accent5-darkest-surface: 50, 44, 147;
547
-
548
- --ax-sys-color-accent6-lightest-surface: 255, 219, 237;
549
- --ax-sys-color-on-accent6-lightest-surface: 63, 36, 50;
550
- --ax-sys-color-border-accent6-lightest-surface: 255, 183, 219;
551
-
552
- --ax-sys-color-accent6-lighter-surface: 255, 194, 222;
553
- --ax-sys-color-on-accent6-lighter-surface: 73, 27, 51;
554
- --ax-sys-color-border-accent6-lighter-surface: 255, 158, 203;
555
-
556
- --ax-sys-color-accent6-light-surface: 255, 152, 200;
557
- --ax-sys-color-on-accent6-light-surface: 90, 0, 54;
558
- --ax-sys-color-border-accent6-light-surface: 255, 116, 181;
559
-
560
- --ax-sys-color-accent6-surface: 236, 72, 153;
561
- --ax-sys-color-on-accent6-surface: 255, 246, 255;
562
- --ax-sys-color-border-accent6-surface: 233, 40, 135;
563
-
564
- --ax-sys-color-accent6-dark-surface: 213, 48, 134;
565
- --ax-sys-color-on-accent6-dark-surface: 255, 246, 255;
566
- --ax-sys-color-border-accent6-dark-surface: 187, 38, 116;
567
-
568
- --ax-sys-color-accent6-darker-surface: 185, 0, 111;
569
- --ax-sys-color-on-accent6-darker-surface: 255, 246, 255;
570
- --ax-sys-color-border-accent6-darker-surface: 149, 0, 90;
571
-
572
- --ax-sys-color-accent6-darkest-surface: 156, 23, 92;
573
- --ax-sys-color-on-accent6-darkest-surface: 255, 246, 254;
574
- --ax-sys-color-border-accent6-darkest-surface: 125, 18, 74;
575
-
576
- --ax-sys-color-accent7-lightest-surface: 235, 227, 221;
577
- --ax-sys-color-on-accent7-lightest-surface: 50, 44, 40;
578
- --ax-sys-color-border-accent7-lightest-surface: 222, 208, 199;
579
-
580
- --ax-sys-color-accent7-lighter-surface: 214, 206, 201;
581
- --ax-sys-color-on-accent7-lighter-surface: 51, 44, 41;
582
- --ax-sys-color-border-accent7-lighter-surface: 199, 188, 181;
583
-
584
- --ax-sys-color-accent7-light-surface: 183, 175, 170;
585
- --ax-sys-color-on-accent7-light-surface: 255, 252, 246;
586
- --ax-sys-color-border-accent7-light-surface: 167, 157, 151;
587
-
588
- --ax-sys-color-accent7-surface: 120, 113, 108;
589
- --ax-sys-color-on-accent7-surface: 255, 252, 246;
590
- --ax-sys-color-border-accent7-surface: 101, 95, 91;
591
-
592
- --ax-sys-color-accent7-dark-surface: 107, 100, 95;
593
- --ax-sys-color-on-accent7-dark-surface: 255, 252, 246;
594
- --ax-sys-color-border-accent7-dark-surface: 88, 82, 78;
595
-
596
- --ax-sys-color-accent7-darker-surface: 91, 84, 80;
597
- --ax-sys-color-on-accent7-darker-surface: 255, 252, 247;
598
- --ax-sys-color-border-accent7-darker-surface: 72, 66, 63;
599
-
600
- --ax-sys-color-accent7-darkest-surface: 78, 72, 68;
601
- --ax-sys-color-on-accent7-darkest-surface: 255, 252, 247;
602
- --ax-sys-color-border-accent7-darkest-surface: 59, 54, 51;
603
-
604
336
  --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
605
337
  --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
606
338
  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
@@ -722,78 +454,6 @@ html.dark {
722
454
  --ax-sys-color-accent-900: 0, 145, 174;
723
455
  --ax-sys-color-accent-950: 0, 135, 162;
724
456
 
725
- --ax-sys-color-accent2-50: 255, 237, 255;
726
- --ax-sys-color-accent2-100: 255, 225, 255;
727
- --ax-sys-color-accent2-200: 255, 199, 255;
728
- --ax-sys-color-accent2-300: 255, 172, 255;
729
- --ax-sys-color-accent2-400: 252, 142, 255;
730
- --ax-sys-color-accent2-500: 248, 109, 255;
731
- --ax-sys-color-accent2-600: 233, 88, 255;
732
- --ax-sys-color-accent2-700: 217, 70, 239;
733
- --ax-sys-color-accent2-800: 199, 48, 221;
734
- --ax-sys-color-accent2-900: 181, 18, 203;
735
- --ax-sys-color-accent2-950: 173, 0, 194;
736
-
737
- --ax-sys-color-accent3-50: 255, 242, 228;
738
- --ax-sys-color-accent3-100: 255, 232, 214;
739
- --ax-sys-color-accent3-200: 255, 213, 186;
740
- --ax-sys-color-accent3-300: 255, 194, 157;
741
- --ax-sys-color-accent3-400: 255, 173, 125;
742
- --ax-sys-color-accent3-500: 255, 151, 89;
743
- --ax-sys-color-accent3-600: 255, 129, 45;
744
- --ax-sys-color-accent3-700: 249, 115, 22;
745
- --ax-sys-color-accent3-800: 228, 96, 0;
746
- --ax-sys-color-accent3-900: 208, 77, 0;
747
- --ax-sys-color-accent3-950: 195, 71, 0;
748
-
749
- --ax-sys-color-accent4-50: 202, 255, 252;
750
- --ax-sys-color-accent4-100: 166, 255, 246;
751
- --ax-sys-color-accent4-200: 118, 254, 234;
752
- --ax-sys-color-accent4-300: 102, 240, 220;
753
- --ax-sys-color-accent4-400: 86, 225, 206;
754
- --ax-sys-color-accent4-500: 69, 212, 193;
755
- --ax-sys-color-accent4-600: 49, 198, 179;
756
- --ax-sys-color-accent4-700: 20, 184, 166;
757
- --ax-sys-color-accent4-800: 0, 166, 148;
758
- --ax-sys-color-accent4-900: 0, 148, 131;
759
- --ax-sys-color-accent4-950: 0, 138, 122;
760
-
761
- --ax-sys-color-accent5-50: 239, 244, 255;
762
- --ax-sys-color-accent5-100: 226, 233, 255;
763
- --ax-sys-color-accent5-200: 202, 212, 255;
764
- --ax-sys-color-accent5-300: 178, 190, 255;
765
- --ax-sys-color-accent5-400: 156, 168, 255;
766
- --ax-sys-color-accent5-500: 134, 144, 255;
767
- --ax-sys-color-accent5-600: 115, 121, 255;
768
- --ax-sys-color-accent5-700: 99, 102, 241;
769
- --ax-sys-color-accent5-800: 88, 89, 227;
770
- --ax-sys-color-accent5-900: 78, 75, 213;
771
- --ax-sys-color-accent5-950: 73, 69, 206;
772
-
773
- --ax-sys-color-accent6-50: 255, 237, 248;
774
- --ax-sys-color-accent6-100: 255, 225, 241;
775
- --ax-sys-color-accent6-200: 255, 200, 226;
776
- --ax-sys-color-accent6-300: 255, 174, 211;
777
- --ax-sys-color-accent6-400: 255, 146, 197;
778
- --ax-sys-color-accent6-500: 255, 113, 183;
779
- --ax-sys-color-accent6-600: 254, 89, 168;
780
- --ax-sys-color-accent6-700: 236, 72, 153;
781
- --ax-sys-color-accent6-800: 218, 53, 138;
782
- --ax-sys-color-accent6-900: 200, 30, 122;
783
- --ax-sys-color-accent6-950: 190, 14, 115;
784
-
785
- --ax-sys-color-accent7-50: 251, 243, 237;
786
- --ax-sys-color-accent7-100: 240, 232, 226;
787
- --ax-sys-color-accent7-200: 219, 211, 206;
788
- --ax-sys-color-accent7-300: 198, 191, 185;
789
- --ax-sys-color-accent7-400: 178, 171, 165;
790
- --ax-sys-color-accent7-500: 158, 151, 146;
791
- --ax-sys-color-accent7-600: 139, 132, 127;
792
- --ax-sys-color-accent7-700: 120, 113, 108;
793
- --ax-sys-color-accent7-800: 109, 103, 98;
794
- --ax-sys-color-accent7-900: 99, 92, 88;
795
- --ax-sys-color-accent7-950: 94, 87, 83;
796
-
797
457
  --ax-sys-color-primary-lightest-surface: 219, 238, 255;
798
458
  --ax-sys-color-on-primary-lightest-surface: 9, 23, 35;
799
459
  --ax-sys-color-border-primary-lightest-surface: 255, 255, 255;
@@ -934,34 +594,6 @@ html.dark {
934
594
  --ax-sys-color-on-danger-darkest-surface: 54, 0, 8;
935
595
  --ax-sys-color-border-danger-darkest-surface: 239, 121, 143;
936
596
 
937
- --ax-sys-color-surface-lightest-surface: 219, 219, 219;
938
- --ax-sys-color-on-surface-lightest-surface: 22, 22, 22;
939
- --ax-sys-color-border-surface-lightest-surface: 242, 242, 242;
940
-
941
- --ax-sys-color-surface-lighter-surface: 185, 185, 185;
942
- --ax-sys-color-on-surface-lighter-surface: 22, 22, 22;
943
- --ax-sys-color-border-surface-lighter-surface: 208, 208, 208;
944
-
945
- --ax-sys-color-surface-light-surface: 151, 151, 151;
946
- --ax-sys-color-on-surface-light-surface: 22, 22, 22;
947
- --ax-sys-color-border-surface-light-surface: 174, 174, 174;
948
-
949
- --ax-sys-color-surface: 89, 89, 89;
950
- --ax-sys-color-on-surface: 253, 253, 253;
951
- --ax-sys-color-border-surface: 112, 112, 112;
952
-
953
- --ax-sys-color-surface-dark-surface: 60, 60, 60;
954
- --ax-sys-color-on-surface-dark-surface: 253, 253, 253;
955
- --ax-sys-color-border-surface-dark-surface: 83, 83, 83;
956
-
957
- --ax-sys-color-surface-darker-surface: 33, 33, 33;
958
- --ax-sys-color-on-surface-darker-surface: 253, 253, 253;
959
- --ax-sys-color-border-surface-darker-surface: 56, 56, 56;
960
-
961
- --ax-sys-color-surface-darkest-surface: 35, 35, 35;
962
- --ax-sys-color-on-surface-darkest-surface: 253, 253, 253;
963
- --ax-sys-color-border-surface-darkest-surface: 58, 58, 58;
964
-
965
597
  --ax-sys-color-accent-lightest-surface: 192, 254, 255;
966
598
  --ax-sys-color-on-accent-lightest-surface: 0, 29, 30;
967
599
  --ax-sys-color-border-accent-lightest-surface: 238, 255, 255;
@@ -989,174 +621,6 @@ html.dark {
989
621
  --ax-sys-color-accent-darkest-surface: 0, 163, 193;
990
622
  --ax-sys-color-on-accent-darkest-surface: 0, 27, 38;
991
623
  --ax-sys-color-border-accent-darkest-surface: 0, 202, 239;
992
-
993
- --ax-sys-color-accent2-lightest-surface: 255, 225, 255;
994
- --ax-sys-color-on-accent2-lightest-surface: 33, 13, 34;
995
- --ax-sys-color-border-accent2-lightest-surface: 255, 255, 255;
996
-
997
- --ax-sys-color-accent2-lighter-surface: 255, 199, 255;
998
- --ax-sys-color-on-accent2-lighter-surface: 42, 0, 44;
999
- --ax-sys-color-border-accent2-lighter-surface: 255, 245, 255;
1000
-
1001
- --ax-sys-color-accent2-light-surface: 255, 172, 255;
1002
- --ax-sys-color-on-accent2-light-surface: 45, 0, 48;
1003
- --ax-sys-color-border-accent2-light-surface: 255, 218, 255;
1004
-
1005
- --ax-sys-color-accent2-surface: 248, 109, 255;
1006
- --ax-sys-color-on-accent2-surface: 45, 0, 49;
1007
- --ax-sys-color-border-accent2-surface: 250, 155, 255;
1008
-
1009
- --ax-sys-color-accent2-dark-surface: 233, 88, 255;
1010
- --ax-sys-color-on-accent2-dark-surface: 44, 0, 52;
1011
- --ax-sys-color-border-accent2-dark-surface: 239, 134, 255;
1012
-
1013
- --ax-sys-color-accent2-darker-surface: 217, 70, 239;
1014
- --ax-sys-color-on-accent2-darker-surface: 44, 0, 52;
1015
- --ax-sys-color-border-accent2-darker-surface: 226, 112, 243;
1016
-
1017
- --ax-sys-color-accent2-darkest-surface: 199, 48, 221;
1018
- --ax-sys-color-on-accent2-darkest-surface: 44, 0, 52;
1019
- --ax-sys-color-border-accent2-darkest-surface: 210, 87, 227;
1020
-
1021
- --ax-sys-color-accent3-lightest-surface: 255, 232, 214;
1022
- --ax-sys-color-on-accent3-lightest-surface: 33, 18, 5;
1023
- --ax-sys-color-border-accent3-lightest-surface: 255, 255, 255;
1024
-
1025
- --ax-sys-color-accent3-lighter-surface: 255, 213, 186;
1026
- --ax-sys-color-on-accent3-lighter-surface: 41, 12, 0;
1027
- --ax-sys-color-border-accent3-lighter-surface: 255, 241, 232;
1028
-
1029
- --ax-sys-color-accent3-light-surface: 255, 194, 157;
1030
- --ax-sys-color-on-accent3-light-surface: 46, 7, 0;
1031
- --ax-sys-color-border-accent3-light-surface: 255, 223, 203;
1032
-
1033
- --ax-sys-color-accent3-surface: 255, 151, 89;
1034
- --ax-sys-color-on-accent3-surface: 47, 6, 0;
1035
- --ax-sys-color-border-accent3-surface: 255, 180, 135;
1036
-
1037
- --ax-sys-color-accent3-dark-surface: 255, 129, 45;
1038
- --ax-sys-color-on-accent3-dark-surface: 47, 5, 0;
1039
- --ax-sys-color-border-accent3-dark-surface: 255, 157, 91;
1040
-
1041
- --ax-sys-color-accent3-darker-surface: 249, 115, 22;
1042
- --ax-sys-color-on-accent3-darker-surface: 48, 4, 0;
1043
- --ax-sys-color-border-accent3-darker-surface: 250, 142, 67;
1044
-
1045
- --ax-sys-color-accent3-darkest-surface: 228, 96, 0;
1046
- --ax-sys-color-on-accent3-darkest-surface: 49, 3, 0;
1047
- --ax-sys-color-border-accent3-darkest-surface: 255, 118, 19;
1048
-
1049
- --ax-sys-color-accent4-lightest-surface: 166, 255, 246;
1050
- --ax-sys-color-on-accent4-lightest-surface: 0, 29, 26;
1051
- --ax-sys-color-border-accent4-lightest-surface: 212, 255, 251;
1052
-
1053
- --ax-sys-color-accent4-lighter-surface: 118, 254, 234;
1054
- --ax-sys-color-on-accent4-lighter-surface: 0, 30, 24;
1055
- --ax-sys-color-border-accent4-lighter-surface: 164, 254, 241;
1056
-
1057
- --ax-sys-color-accent4-light-surface: 102, 240, 220;
1058
- --ax-sys-color-on-accent4-light-surface: 0, 30, 24;
1059
- --ax-sys-color-border-accent4-light-surface: 144, 244, 230;
1060
-
1061
- --ax-sys-color-accent4-surface: 69, 212, 193;
1062
- --ax-sys-color-on-accent4-surface: 0, 30, 24;
1063
- --ax-sys-color-border-accent4-surface: 106, 221, 205;
1064
-
1065
- --ax-sys-color-accent4-dark-surface: 49, 198, 179;
1066
- --ax-sys-color-on-accent4-dark-surface: 0, 30, 24;
1067
- --ax-sys-color-border-accent4-dark-surface: 81, 212, 195;
1068
-
1069
- --ax-sys-color-accent4-darker-surface: 20, 184, 166;
1070
- --ax-sys-color-on-accent4-darker-surface: 0, 30, 24;
1071
- --ax-sys-color-border-accent4-darker-surface: 25, 225, 203;
1072
-
1073
- --ax-sys-color-accent4-darkest-surface: 0, 166, 148;
1074
- --ax-sys-color-on-accent4-darkest-surface: 0, 30, 24;
1075
- --ax-sys-color-border-accent4-darkest-surface: 0, 212, 189;
1076
-
1077
- --ax-sys-color-accent5-lightest-surface: 226, 233, 255;
1078
- --ax-sys-color-on-accent5-lightest-surface: 17, 21, 36;
1079
- --ax-sys-color-border-accent5-lightest-surface: 255, 255, 255;
1080
-
1081
- --ax-sys-color-accent5-lighter-surface: 202, 212, 255;
1082
- --ax-sys-color-on-accent5-lighter-surface: 15, 18, 49;
1083
- --ax-sys-color-border-accent5-lighter-surface: 248, 249, 255;
1084
-
1085
- --ax-sys-color-accent5-light-surface: 178, 190, 255;
1086
- --ax-sys-color-on-accent5-light-surface: 14, 12, 63;
1087
- --ax-sys-color-border-accent5-light-surface: 224, 229, 255;
1088
-
1089
- --ax-sys-color-accent5-surface: 134, 144, 255;
1090
- --ax-sys-color-on-accent5-surface: 18, 0, 85;
1091
- --ax-sys-color-border-accent5-surface: 180, 186, 255;
1092
-
1093
- --ax-sys-color-accent5-dark-surface: 115, 121, 255;
1094
- --ax-sys-color-on-accent5-dark-surface: 18, 0, 85;
1095
- --ax-sys-color-border-accent5-dark-surface: 161, 165, 255;
1096
-
1097
- --ax-sys-color-accent5-darker-surface: 99, 102, 241;
1098
- --ax-sys-color-on-accent5-darker-surface: 18, 0, 85;
1099
- --ax-sys-color-border-accent5-darker-surface: 141, 143, 245;
1100
-
1101
- --ax-sys-color-accent5-darkest-surface: 88, 89, 227;
1102
- --ax-sys-color-on-accent5-darkest-surface: 18, 0, 86;
1103
- --ax-sys-color-border-accent5-darkest-surface: 127, 128, 234;
1104
-
1105
- --ax-sys-color-accent6-lightest-surface: 255, 225, 241;
1106
- --ax-sys-color-on-accent6-lightest-surface: 34, 14, 26;
1107
- --ax-sys-color-border-accent6-lightest-surface: 255, 255, 255;
1108
-
1109
- --ax-sys-color-accent6-lighter-surface: 255, 200, 226;
1110
- --ax-sys-color-on-accent6-lighter-surface: 43, 5, 27;
1111
- --ax-sys-color-border-accent6-lighter-surface: 255, 246, 250;
1112
-
1113
- --ax-sys-color-accent6-light-surface: 255, 174, 211;
1114
- --ax-sys-color-on-accent6-light-surface: 51, 0, 28;
1115
- --ax-sys-color-border-accent6-light-surface: 255, 220, 236;
1116
-
1117
- --ax-sys-color-accent6-surface: 255, 113, 183;
1118
- --ax-sys-color-on-accent6-surface: 52, 0, 27;
1119
- --ax-sys-color-border-accent6-surface: 255, 159, 206;
1120
-
1121
- --ax-sys-color-accent6-dark-surface: 254, 89, 168;
1122
- --ax-sys-color-on-accent6-dark-surface: 52, 0, 25;
1123
- --ax-sys-color-border-accent6-dark-surface: 254, 135, 192;
1124
-
1125
- --ax-sys-color-accent6-darker-surface: 236, 72, 153;
1126
- --ax-sys-color-on-accent6-darker-surface: 52, 0, 25;
1127
- --ax-sys-color-border-accent6-darker-surface: 240, 114, 176;
1128
-
1129
- --ax-sys-color-accent6-darkest-surface: 218, 53, 138;
1130
- --ax-sys-color-on-accent6-darkest-surface: 52, 0, 25;
1131
- --ax-sys-color-border-accent6-darkest-surface: 225, 92, 160;
1132
-
1133
- --ax-sys-color-accent7-lightest-surface: 240, 232, 226;
1134
- --ax-sys-color-on-accent7-lightest-surface: 26, 21, 17;
1135
- --ax-sys-color-border-accent7-lightest-surface: 255, 255, 255;
1136
-
1137
- --ax-sys-color-accent7-lighter-surface: 219, 211, 206;
1138
- --ax-sys-color-on-accent7-lighter-surface: 26, 21, 17;
1139
- --ax-sys-color-border-accent7-lighter-surface: 238, 235, 232;
1140
-
1141
- --ax-sys-color-accent7-light-surface: 198, 191, 185;
1142
- --ax-sys-color-on-accent7-light-surface: 26, 21, 17;
1143
- --ax-sys-color-border-accent7-light-surface: 219, 214, 210;
1144
-
1145
- --ax-sys-color-accent7-surface: 158, 151, 146;
1146
- --ax-sys-color-on-accent7-surface: 26, 21, 17;
1147
- --ax-sys-color-border-accent7-surface: 180, 174, 170;
1148
-
1149
- --ax-sys-color-accent7-dark-surface: 139, 132, 127;
1150
- --ax-sys-color-on-accent7-dark-surface: 255, 252, 246;
1151
- --ax-sys-color-border-accent7-dark-surface: 161, 155, 151;
1152
-
1153
- --ax-sys-color-accent7-darker-surface: 120, 113, 108;
1154
- --ax-sys-color-on-accent7-darker-surface: 255, 252, 246;
1155
- --ax-sys-color-border-accent7-darker-surface: 143, 136, 131;
1156
-
1157
- --ax-sys-color-accent7-darkest-surface: 109, 103, 98;
1158
- --ax-sys-color-on-accent7-darkest-surface: 255, 252, 246;
1159
- --ax-sys-color-border-accent7-darkest-surface: 133, 126, 120;
1160
624
  }
1161
625
 
1162
626
  @theme {
@@ -1181,27 +645,27 @@ html.dark {
1181
645
  --color-surface-900: rgba(var(--ax-sys-color-surface-900));
1182
646
  --color-surface-950: rgba(var(--ax-sys-color-surface-950));
1183
647
 
1184
- --color-lightest-surface: rgba(var(--ax-sys-color-lightest-surface));
1185
- --color-on-lightest-surface: rgba(var(--ax-sys-color-on-lightest-surface));
1186
- --color-border-lightest-surface: rgba(var(--ax-sys-color-border-lightest-surface));
1187
- --color-lighter-surface: rgba(var(--ax-sys-color-lighter-surface));
1188
- --color-on-lighter-surface: rgba(var(--ax-sys-color-on-lighter-surface));
1189
- --color-border-lighter-surface: rgba(var(--ax-sys-color-border-lighter-surface));
1190
- --color-light-surface: rgba(var(--ax-sys-color-light-surface));
1191
- --color-on-light-surface: rgba(var(--ax-sys-color-on-light-surface));
1192
- --color-border-light-surface: rgba(var(--ax-sys-color-border-light-surface));
648
+ --color-lightest: rgba(var(--ax-sys-color-lightest-surface));
649
+ --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));
650
+ --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));
651
+ --color-lighter: rgba(var(--ax-sys-color-lighter-surface));
652
+ --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));
653
+ --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));
654
+ --color-light: rgba(var(--ax-sys-color-light-surface));
655
+ --color-on-light: rgba(var(--ax-sys-color-on-light-surface));
656
+ --color-border-light: rgba(var(--ax-sys-color-border-light-surface));
1193
657
  --color-surface: rgba(var(--ax-sys-color-surface));
1194
658
  --color-on-surface: rgba(var(--ax-sys-color-on-surface));
1195
659
  --color-border-surface: rgba(var(--ax-sys-color-border-surface));
1196
- --color-dark-surface: rgba(var(--ax-sys-color-dark-surface));
1197
- --color-on-dark-surface: rgba(var(--ax-sys-color-on-dark-surface));
1198
- --color-border-dark-surface: rgba(var(--ax-sys-color-border-dark-surface));
1199
- --color-darker-surface: rgba(var(--ax-sys-color-darker-surface));
1200
- --color-on-darker-surface: rgba(var(--ax-sys-color-on-darker-surface));
1201
- --color-border-darker-surface: rgba(var(--ax-sys-color-border-darker-surface));
1202
- --color-darkest-surface: rgba(var(--ax-sys-color-darkest-surface));
1203
- --color-on-darkest-surface: rgba(var(--ax-sys-color-on-darkest-surface));
1204
- --color-border-darkest-surface: rgba(var(--ax-sys-color-border-darkest-surface));
660
+ --color-dark: rgba(var(--ax-sys-color-dark-surface));
661
+ --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));
662
+ --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));
663
+ --color-darker: rgba(var(--ax-sys-color-darker-surface));
664
+ --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));
665
+ --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));
666
+ --color-darkest: rgba(var(--ax-sys-color-darkest-surface));
667
+ --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));
668
+ --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));
1205
669
  /* Primary Surfaces */
1206
670
  --color-primary: rgba(var(--ax-sys-color-primary-surface));
1207
671
  --color-primary-50: rgba(var(--ax-sys-color-primary-50));
@@ -1216,27 +680,27 @@ html.dark {
1216
680
  --color-primary-900: rgba(var(--ax-sys-color-primary-900));
1217
681
  --color-primary-950: rgba(var(--ax-sys-color-primary-950));
1218
682
 
1219
- --color-primary-lightest-surface: rgba(var(--ax-sys-color-primary-lightest-surface));
1220
- --color-on-primary-lightest-surface: rgba(var(--ax-sys-color-on-primary-lightest-surface));
1221
- --color-border-primary-lightest-surface: rgba(var(--ax-sys-color-border-primary-lightest-surface));
1222
- --color-primary-lighter-surface: rgba(var(--ax-sys-color-primary-lighter-surface));
1223
- --color-on-primary-lighter-surface: rgba(var(--ax-sys-color-on-primary-lighter-surface));
1224
- --color-border-primary-lighter-surface: rgba(var(--ax-sys-color-border-primary-lighter-surface));
1225
- --color-primary-light-surface: rgba(var(--ax-sys-color-primary-light-surface));
1226
- --color-on-primary-light-surface: rgba(var(--ax-sys-color-on-primary-light-surface));
1227
- --color-border-primary-light-surface: rgba(var(--ax-sys-color-border-primary-light-surface));
1228
- --color-primary-surface: rgba(var(--ax-sys-color-primary-surface));
1229
- --color-on-primary-surface: rgba(var(--ax-sys-color-on-primary-surface));
1230
- --color-border-primary-surface: rgba(var(--ax-sys-color-border-primary-surface));
1231
- --color-primary-dark-surface: rgba(var(--ax-sys-color-primary-dark-surface));
1232
- --color-on-primary-dark-surface: rgba(var(--ax-sys-color-on-primary-dark-surface));
1233
- --color-border-primary-dark-surface: rgba(var(--ax-sys-color-border-primary-dark-surface));
1234
- --color-primary-darker-surface: rgba(var(--ax-sys-color-primary-darker-surface));
1235
- --color-on-primary-darker-surface: rgba(var(--ax-sys-color-on-primary-darker-surface));
1236
- --color-border-primary-darker-surface: rgba(var(--ax-sys-color-border-primary-darker-surface));
1237
- --color-primary-darkest-surface: rgba(var(--ax-sys-color-primary-darkest-surface));
1238
- --color-on-primary-darkest-surface: rgba(var(--ax-sys-color-on-primary-darkest-surface));
1239
- --color-border-primary-darkest-surface: rgba(var(--ax-sys-color-border-primary-darkest-surface));
683
+ --color-primary-lightest: rgba(var(--ax-sys-color-primary-lightest-surface));
684
+ --color-on-primary-lightest: rgba(var(--ax-sys-color-on-primary-lightest-surface));
685
+ --color-border-primary-lightest: rgba(var(--ax-sys-color-border-primary-lightest-surface));
686
+ --color-primary-lighter: rgba(var(--ax-sys-color-primary-lighter-surface));
687
+ --color-on-primary-lighter: rgba(var(--ax-sys-color-on-primary-lighter-surface));
688
+ --color-border-primary-lighter: rgba(var(--ax-sys-color-border-primary-lighter-surface));
689
+ --color-primary-light: rgba(var(--ax-sys-color-primary-light-surface));
690
+ --color-on-primary-light: rgba(var(--ax-sys-color-on-primary-light-surface));
691
+ --color-border-primary-light: rgba(var(--ax-sys-color-border-primary-light-surface));
692
+ --color-primary: rgba(var(--ax-sys-color-primary-surface));
693
+ --color-on-primary: rgba(var(--ax-sys-color-on-primary-surface));
694
+ --color-border-primary: rgba(var(--ax-sys-color-border-primary-surface));
695
+ --color-primary-dark: rgba(var(--ax-sys-color-primary-dark-surface));
696
+ --color-on-primary-dark: rgba(var(--ax-sys-color-on-primary-dark-surface));
697
+ --color-border-primary-dark: rgba(var(--ax-sys-color-border-primary-dark-surface));
698
+ --color-primary-darker: rgba(var(--ax-sys-color-primary-darker-surface));
699
+ --color-on-primary-darker: rgba(var(--ax-sys-color-on-primary-darker-surface));
700
+ --color-border-primary-darker: rgba(var(--ax-sys-color-border-primary-darker-surface));
701
+ --color-primary-darkest: rgba(var(--ax-sys-color-primary-darkest-surface));
702
+ --color-on-primary-darkest: rgba(var(--ax-sys-color-on-primary-darkest-surface));
703
+ --color-border-primary-darkest: rgba(var(--ax-sys-color-border-primary-darkest-surface));
1240
704
  /* Secondary Surfaces */
1241
705
  --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
1242
706
  --color-secondary-50: rgba(var(--ax-sys-color-secondary-50));
@@ -1251,27 +715,27 @@ html.dark {
1251
715
  --color-secondary-900: rgba(var(--ax-sys-color-secondary-900));
1252
716
  --color-secondary-950: rgba(var(--ax-sys-color-secondary-950));
1253
717
 
1254
- --color-secondary-lightest-surface: rgba(var(--ax-sys-color-secondary-lightest-surface));
1255
- --color-on-secondary-lightest-surface: rgba(var(--ax-sys-color-on-secondary-lightest-surface));
1256
- --color-border-secondary-lightest-surface: rgba(var(--ax-sys-color-border-secondary-lightest-surface));
1257
- --color-secondary-lighter-surface: rgba(var(--ax-sys-color-secondary-lighter-surface));
1258
- --color-on-secondary-lighter-surface: rgba(var(--ax-sys-color-on-secondary-lighter-surface));
1259
- --color-border-secondary-lighter-surface: rgba(var(--ax-sys-color-border-secondary-lighter-surface));
1260
- --color-secondary-light-surface: rgba(var(--ax-sys-color-secondary-light-surface));
1261
- --color-on-secondary-light-surface: rgba(var(--ax-sys-color-on-secondary-light-surface));
1262
- --color-border-secondary-light-surface: rgba(var(--ax-sys-color-border-secondary-light-surface));
1263
- --color-secondary-surface: rgba(var(--ax-sys-color-secondary-surface));
1264
- --color-on-secondary-surface: rgba(var(--ax-sys-color-on-secondary-surface));
1265
- --color-border-secondary-surface: rgba(var(--ax-sys-color-border-secondary-surface));
1266
- --color-secondary-dark-surface: rgba(var(--ax-sys-color-secondary-dark-surface));
1267
- --color-on-secondary-dark-surface: rgba(var(--ax-sys-color-on-secondary-dark-surface));
1268
- --color-border-secondary-dark-surface: rgba(var(--ax-sys-color-border-secondary-dark-surface));
1269
- --color-secondary-darker-surface: rgba(var(--ax-sys-color-secondary-darker-surface));
1270
- --color-on-secondary-darker-surface: rgba(var(--ax-sys-color-on-secondary-darker-surface));
1271
- --color-border-secondary-darker-surface: rgba(var(--ax-sys-color-border-secondary-darker-surface));
1272
- --color-secondary-darkest-surface: rgba(var(--ax-sys-color-secondary-darkest-surface));
1273
- --color-on-secondary-darkest-surface: rgba(var(--ax-sys-color-on-secondary-darkest-surface));
1274
- --color-border-secondary-darkest-surface: rgba(var(--ax-sys-color-border-secondary-darkest-surface));
718
+ --color-secondary-lightest: rgba(var(--ax-sys-color-secondary-lightest-surface));
719
+ --color-on-secondary-lightest: rgba(var(--ax-sys-color-on-secondary-lightest-surface));
720
+ --color-border-secondary-lightest: rgba(var(--ax-sys-color-border-secondary-lightest-surface));
721
+ --color-secondary-lighter: rgba(var(--ax-sys-color-secondary-lighter-surface));
722
+ --color-on-secondary-lighter: rgba(var(--ax-sys-color-on-secondary-lighter-surface));
723
+ --color-border-secondary-lighter: rgba(var(--ax-sys-color-border-secondary-lighter-surface));
724
+ --color-secondary-light: rgba(var(--ax-sys-color-secondary-light-surface));
725
+ --color-on-secondary-light: rgba(var(--ax-sys-color-on-secondary-light-surface));
726
+ --color-border-secondary-light: rgba(var(--ax-sys-color-border-secondary-light-surface));
727
+ --color-secondary: rgba(var(--ax-sys-color-secondary-surface));
728
+ --color-on-secondary: rgba(var(--ax-sys-color-on-secondary-surface));
729
+ --color-border-secondary: rgba(var(--ax-sys-color-border-secondary-surface));
730
+ --color-secondary-dark: rgba(var(--ax-sys-color-secondary-dark-surface));
731
+ --color-on-secondary-dark: rgba(var(--ax-sys-color-on-secondary-dark-surface));
732
+ --color-border-secondary-dark: rgba(var(--ax-sys-color-border-secondary-dark-surface));
733
+ --color-secondary-darker: rgba(var(--ax-sys-color-secondary-darker-surface));
734
+ --color-on-secondary-darker: rgba(var(--ax-sys-color-on-secondary-darker-surface));
735
+ --color-border-secondary-darker: rgba(var(--ax-sys-color-border-secondary-darker-surface));
736
+ --color-secondary-darkest: rgba(var(--ax-sys-color-secondary-darkest-surface));
737
+ --color-on-secondary-darkest: rgba(var(--ax-sys-color-on-secondary-darkest-surface));
738
+ --color-border-secondary-darkest: rgba(var(--ax-sys-color-border-secondary-darkest-surface));
1275
739
  /* Success Surfaces */
1276
740
  --color-success: rgba(var(--ax-sys-color-success-surface));
1277
741
  --color-success-50: rgba(var(--ax-sys-color-success-50));
@@ -1286,27 +750,27 @@ html.dark {
1286
750
  --color-success-900: rgba(var(--ax-sys-color-success-900));
1287
751
  --color-success-950: rgba(var(--ax-sys-color-success-950));
1288
752
 
1289
- --color-success-lightest-surface: rgba(var(--ax-sys-color-success-lightest-surface));
1290
- --color-on-success-lightest-surface: rgba(var(--ax-sys-color-on-success-lightest-surface));
1291
- --color-border-success-lightest-surface: rgba(var(--ax-sys-color-border-success-lightest-surface));
1292
- --color-success-lighter-surface: rgba(var(--ax-sys-color-success-lighter-surface));
1293
- --color-on-success-lighter-surface: rgba(var(--ax-sys-color-on-success-lighter-surface));
1294
- --color-border-success-lighter-surface: rgba(var(--ax-sys-color-border-success-lighter-surface));
1295
- --color-success-light-surface: rgba(var(--ax-sys-color-success-light-surface));
1296
- --color-on-success-light-surface: rgba(var(--ax-sys-color-on-success-light-surface));
1297
- --color-border-success-light-surface: rgba(var(--ax-sys-color-border-success-light-surface));
1298
- --color-success-surface: rgba(var(--ax-sys-color-success-surface));
1299
- --color-on-success-surface: rgba(var(--ax-sys-color-on-success-surface));
1300
- --color-border-success-surface: rgba(var(--ax-sys-color-border-success-surface));
1301
- --color-success-dark-surface: rgba(var(--ax-sys-color-success-dark-surface));
1302
- --color-on-success-dark-surface: rgba(var(--ax-sys-color-on-success-dark-surface));
1303
- --color-border-success-dark-surface: rgba(var(--ax-sys-color-border-success-dark-surface));
1304
- --color-success-darker-surface: rgba(var(--ax-sys-color-success-darker-surface));
1305
- --color-on-success-darker-surface: rgba(var(--ax-sys-color-on-success-darker-surface));
1306
- --color-border-success-darker-surface: rgba(var(--ax-sys-color-border-success-darker-surface));
1307
- --color-success-darkest-surface: rgba(var(--ax-sys-color-success-darkest-surface));
1308
- --color-on-success-darkest-surface: rgba(var(--ax-sys-color-on-success-darkest-surface));
1309
- --color-border-success-darkest-surface: rgba(var(--ax-sys-color-border-success-darkest-surface));
753
+ --color-success-lightest: rgba(var(--ax-sys-color-success-lightest-surface));
754
+ --color-on-success-lightest: rgba(var(--ax-sys-color-on-success-lightest-surface));
755
+ --color-border-success-lightest: rgba(var(--ax-sys-color-border-success-lightest-surface));
756
+ --color-success-lighter: rgba(var(--ax-sys-color-success-lighter-surface));
757
+ --color-on-success-lighter: rgba(var(--ax-sys-color-on-success-lighter-surface));
758
+ --color-border-success-lighter: rgba(var(--ax-sys-color-border-success-lighter-surface));
759
+ --color-success-light: rgba(var(--ax-sys-color-success-light-surface));
760
+ --color-on-success-light: rgba(var(--ax-sys-color-on-success-light-surface));
761
+ --color-border-success-light: rgba(var(--ax-sys-color-border-success-light-surface));
762
+ --color-success: rgba(var(--ax-sys-color-success-surface));
763
+ --color-on-success: rgba(var(--ax-sys-color-on-success-surface));
764
+ --color-border-success: rgba(var(--ax-sys-color-border-success-surface));
765
+ --color-success-dark: rgba(var(--ax-sys-color-success-dark-surface));
766
+ --color-on-success-dark: rgba(var(--ax-sys-color-on-success-dark-surface));
767
+ --color-border-success-dark: rgba(var(--ax-sys-color-border-success-dark-surface));
768
+ --color-success-darker: rgba(var(--ax-sys-color-success-darker-surface));
769
+ --color-on-success-darker: rgba(var(--ax-sys-color-on-success-darker-surface));
770
+ --color-border-success-darker: rgba(var(--ax-sys-color-border-success-darker-surface));
771
+ --color-success-darkest: rgba(var(--ax-sys-color-success-darkest-surface));
772
+ --color-on-success-darkest: rgba(var(--ax-sys-color-on-success-darkest-surface));
773
+ --color-border-success-darkest: rgba(var(--ax-sys-color-border-success-darkest-surface));
1310
774
  /* Warning Surfaces */
1311
775
  --color-warning: rgba(var(--ax-sys-color-warning-surface));
1312
776
  --color-warning-50: rgba(var(--ax-sys-color-warning-50));
@@ -1321,27 +785,27 @@ html.dark {
1321
785
  --color-warning-900: rgba(var(--ax-sys-color-warning-900));
1322
786
  --color-warning-950: rgba(var(--ax-sys-color-warning-950));
1323
787
 
1324
- --color-warning-lightest-surface: rgba(var(--ax-sys-color-warning-lightest-surface));
1325
- --color-on-warning-lightest-surface: rgba(var(--ax-sys-color-on-warning-lightest-surface));
1326
- --color-border-warning-lightest-surface: rgba(var(--ax-sys-color-border-warning-lightest-surface));
1327
- --color-warning-lighter-surface: rgba(var(--ax-sys-color-warning-lighter-surface));
1328
- --color-on-warning-lighter-surface: rgba(var(--ax-sys-color-on-warning-lighter-surface));
1329
- --color-border-warning-lighter-surface: rgba(var(--ax-sys-color-border-warning-lighter-surface));
1330
- --color-warning-light-surface: rgba(var(--ax-sys-color-warning-light-surface));
1331
- --color-on-warning-light-surface: rgba(var(--ax-sys-color-on-warning-light-surface));
1332
- --color-border-warning-light-surface: rgba(var(--ax-sys-color-border-warning-light-surface));
1333
- --color-warning-surface: rgba(var(--ax-sys-color-warning-surface));
1334
- --color-on-warning-surface: rgba(var(--ax-sys-color-on-warning-surface));
1335
- --color-border-warning-surface: rgba(var(--ax-sys-color-border-warning-surface));
1336
- --color-warning-dark-surface: rgba(var(--ax-sys-color-warning-dark-surface));
1337
- --color-on-warning-dark-surface: rgba(var(--ax-sys-color-on-warning-dark-surface));
1338
- --color-border-warning-dark-surface: rgba(var(--ax-sys-color-border-warning-dark-surface));
1339
- --color-warning-darker-surface: rgba(var(--ax-sys-color-warning-darker-surface));
1340
- --color-on-warning-darker-surface: rgba(var(--ax-sys-color-on-warning-darker-surface));
1341
- --color-border-warning-darker-surface: rgba(var(--ax-sys-color-border-warning-darker-surface));
1342
- --color-warning-darkest-surface: rgba(var(--ax-sys-color-warning-darkest-surface));
1343
- --color-on-warning-darkest-surface: rgba(var(--ax-sys-color-on-warning-darkest-surface));
1344
- --color-border-warning-darkest-surface: rgba(var(--ax-sys-color-border-warning-darkest-surface));
788
+ --color-warning-lightest: rgba(var(--ax-sys-color-warning-lightest-surface));
789
+ --color-on-warning-lightest: rgba(var(--ax-sys-color-on-warning-lightest-surface));
790
+ --color-border-warning-lightest: rgba(var(--ax-sys-color-border-warning-lightest-surface));
791
+ --color-warning-lighter: rgba(var(--ax-sys-color-warning-lighter-surface));
792
+ --color-on-warning-lighter: rgba(var(--ax-sys-color-on-warning-lighter-surface));
793
+ --color-border-warning-lighter: rgba(var(--ax-sys-color-border-warning-lighter-surface));
794
+ --color-warning-light: rgba(var(--ax-sys-color-warning-light-surface));
795
+ --color-on-warning-light: rgba(var(--ax-sys-color-on-warning-light-surface));
796
+ --color-border-warning-light: rgba(var(--ax-sys-color-border-warning-light-surface));
797
+ --color-warning: rgba(var(--ax-sys-color-warning-surface));
798
+ --color-on-warning: rgba(var(--ax-sys-color-on-warning-surface));
799
+ --color-border-warning: rgba(var(--ax-sys-color-border-warning-surface));
800
+ --color-warning-dark: rgba(var(--ax-sys-color-warning-dark-surface));
801
+ --color-on-warning-dark: rgba(var(--ax-sys-color-on-warning-dark-surface));
802
+ --color-border-warning-dark: rgba(var(--ax-sys-color-border-warning-dark-surface));
803
+ --color-warning-darker: rgba(var(--ax-sys-color-warning-darker-surface));
804
+ --color-on-warning-darker: rgba(var(--ax-sys-color-on-warning-darker-surface));
805
+ --color-border-warning-darker: rgba(var(--ax-sys-color-border-warning-darker-surface));
806
+ --color-warning-darkest: rgba(var(--ax-sys-color-warning-darkest-surface));
807
+ --color-on-warning-darkest: rgba(var(--ax-sys-color-on-warning-darkest-surface));
808
+ --color-border-warning-darkest: rgba(var(--ax-sys-color-border-warning-darkest-surface));
1345
809
  /* Danger Surfaces */
1346
810
  --color-danger: rgba(var(--ax-sys-color-danger-surface));
1347
811
  --color-danger-50: rgba(var(--ax-sys-color-danger-50));
@@ -1356,27 +820,27 @@ html.dark {
1356
820
  --color-danger-900: rgba(var(--ax-sys-color-danger-900));
1357
821
  --color-danger-950: rgba(var(--ax-sys-color-danger-950));
1358
822
 
1359
- --color-danger-lightest-surface: rgba(var(--ax-sys-color-danger-lightest-surface));
1360
- --color-on-danger-lightest-surface: rgba(var(--ax-sys-color-on-danger-lightest-surface));
1361
- --color-border-danger-lightest-surface: rgba(var(--ax-sys-color-border-danger-lightest-surface));
1362
- --color-danger-lighter-surface: rgba(var(--ax-sys-color-danger-lighter-surface));
1363
- --color-on-danger-lighter-surface: rgba(var(--ax-sys-color-on-danger-lighter-surface));
1364
- --color-border-danger-lighter-surface: rgba(var(--ax-sys-color-border-danger-lighter-surface));
1365
- --color-danger-light-surface: rgba(var(--ax-sys-color-danger-light-surface));
1366
- --color-on-danger-light-surface: rgba(var(--ax-sys-color-on-danger-light-surface));
1367
- --color-border-danger-light-surface: rgba(var(--ax-sys-color-border-danger-light-surface));
1368
- --color-danger-surface: rgba(var(--ax-sys-color-danger-surface));
1369
- --color-on-danger-surface: rgba(var(--ax-sys-color-on-danger-surface));
1370
- --color-border-danger-surface: rgba(var(--ax-sys-color-border-danger-surface));
1371
- --color-danger-dark-surface: rgba(var(--ax-sys-color-danger-dark-surface));
1372
- --color-on-danger-dark-surface: rgba(var(--ax-sys-color-on-danger-dark-surface));
1373
- --color-border-danger-dark-surface: rgba(var(--ax-sys-color-border-danger-dark-surface));
1374
- --color-danger-darker-surface: rgba(var(--ax-sys-color-danger-darker-surface));
1375
- --color-on-danger-darker-surface: rgba(var(--ax-sys-color-on-danger-darker-surface));
1376
- --color-border-danger-darker-surface: rgba(var(--ax-sys-color-border-danger-darker-surface));
1377
- --color-danger-darkest-surface: rgba(var(--ax-sys-color-danger-darkest-surface));
1378
- --color-on-danger-darkest-surface: rgba(var(--ax-sys-color-on-danger-darkest-surface));
1379
- --color-border-danger-darkest-surface: rgba(var(--ax-sys-color-border-danger-darkest-surface));
823
+ --color-danger-lightest: rgba(var(--ax-sys-color-danger-lightest-surface));
824
+ --color-on-danger-lightest: rgba(var(--ax-sys-color-on-danger-lightest-surface));
825
+ --color-border-danger-lightest: rgba(var(--ax-sys-color-border-danger-lightest-surface));
826
+ --color-danger-lighter: rgba(var(--ax-sys-color-danger-lighter-surface));
827
+ --color-on-danger-lighter: rgba(var(--ax-sys-color-on-danger-lighter-surface));
828
+ --color-border-danger-lighter: rgba(var(--ax-sys-color-border-danger-lighter-surface));
829
+ --color-danger-light: rgba(var(--ax-sys-color-danger-light-surface));
830
+ --color-on-danger-light: rgba(var(--ax-sys-color-on-danger-light-surface));
831
+ --color-border-danger-light: rgba(var(--ax-sys-color-border-danger-light-surface));
832
+ --color-danger: rgba(var(--ax-sys-color-danger-surface));
833
+ --color-on-danger: rgba(var(--ax-sys-color-on-danger-surface));
834
+ --color-border-danger: rgba(var(--ax-sys-color-border-danger-surface));
835
+ --color-danger-dark: rgba(var(--ax-sys-color-danger-dark-surface));
836
+ --color-on-danger-dark: rgba(var(--ax-sys-color-on-danger-dark-surface));
837
+ --color-border-danger-dark: rgba(var(--ax-sys-color-border-danger-dark-surface));
838
+ --color-danger-darker: rgba(var(--ax-sys-color-danger-darker-surface));
839
+ --color-on-danger-darker: rgba(var(--ax-sys-color-on-danger-darker-surface));
840
+ --color-border-danger-darker: rgba(var(--ax-sys-color-border-danger-darker-surface));
841
+ --color-danger-darkest: rgba(var(--ax-sys-color-danger-darkest-surface));
842
+ --color-on-danger-darkest: rgba(var(--ax-sys-color-on-danger-darkest-surface));
843
+ --color-border-danger-darkest: rgba(var(--ax-sys-color-border-danger-darkest-surface));
1380
844
 
1381
845
  /* Accent Surfaces */
1382
846
  --color-accent: rgba(var(--ax-sys-color-accent-surface));
@@ -1392,201 +856,201 @@ html.dark {
1392
856
  --color-accent-900: rgba(var(--ax-sys-color-accent-900));
1393
857
  --color-accent-950: rgba(var(--ax-sys-color-accent-950));
1394
858
 
1395
- --color-accent-lightest-surface: rgba(var(--ax-sys-color-accent-lightest-surface));
1396
- --color-on-accent-lightest-surface: rgba(var(--ax-sys-color-on-accent-lightest-surface));
1397
- --color-border-accent-lightest-surface: rgba(var(--ax-sys-color-border-accent-lightest-surface));
1398
- --color-accent-lighter-surface: rgba(var(--ax-sys-color-accent-lighter-surface));
1399
- --color-on-accent-lighter-surface: rgba(var(--ax-sys-color-on-accent-lighter-surface));
1400
- --color-border-accent-lighter-surface: rgba(var(--ax-sys-color-border-accent-lighter-surface));
1401
- --color-accent-light-surface: rgba(var(--ax-sys-color-accent-light-surface));
1402
- --color-on-accent-light-surface: rgba(var(--ax-sys-color-on-accent-light-surface));
1403
- --color-border-accent-light-surface: rgba(var(--ax-sys-color-border-accent-light-surface));
1404
- --color-accent-surface: rgba(var(--ax-sys-color-accent-surface));
1405
- --color-on-accent-surface: rgba(var(--ax-sys-color-on-accent-surface));
1406
- --color-border-accent-surface: rgba(var(--ax-sys-color-border-accent-surface));
1407
- --color-accent-dark-surface: rgba(var(--ax-sys-color-accent-dark-surface));
1408
- --color-on-accent-dark-surface: rgba(var(--ax-sys-color-on-accent-dark-surface));
1409
- --color-border-accent-dark-surface: rgba(var(--ax-sys-color-border-accent-dark-surface));
1410
- --color-accent-darker-surface: rgba(var(--ax-sys-color-accent-darker-surface));
1411
- --color-on-accent-darker-surface: rgba(var(--ax-sys-color-on-accent-darker-surface));
1412
- --color-border-accent-darker-surface: rgba(var(--ax-sys-color-border-accent-darker-surface));
1413
- --color-accent-darkest-surface: rgba(var(--ax-sys-color-accent-darkest-surface));
1414
- --color-on-accent-darkest-surface: rgba(var(--ax-sys-color-on-accent-darkest-surface));
1415
- --color-border-accent-darkest-surface: rgba(var(--ax-sys-color-border-accent-darkest-surface));
859
+ --color-accent-lightest: rgba(var(--ax-sys-color-accent-lightest-surface));
860
+ --color-on-accent-lightest: rgba(var(--ax-sys-color-on-accent-lightest-surface));
861
+ --color-border-accent-lightest: rgba(var(--ax-sys-color-border-accent-lightest-surface));
862
+ --color-accent-lighter: rgba(var(--ax-sys-color-accent-lighter-surface));
863
+ --color-on-accent-lighter: rgba(var(--ax-sys-color-on-accent-lighter-surface));
864
+ --color-border-accent-lighter: rgba(var(--ax-sys-color-border-accent-lighter-surface));
865
+ --color-accent-light: rgba(var(--ax-sys-color-accent-light-surface));
866
+ --color-on-accent-light: rgba(var(--ax-sys-color-on-accent-light-surface));
867
+ --color-border-accent-light: rgba(var(--ax-sys-color-border-accent-light-surface));
868
+ --color-accent: rgba(var(--ax-sys-color-accent-surface));
869
+ --color-on-accent: rgba(var(--ax-sys-color-on-accent-surface));
870
+ --color-border-accent: rgba(var(--ax-sys-color-border-accent-surface));
871
+ --color-accent-dark: rgba(var(--ax-sys-color-accent-dark-surface));
872
+ --color-on-accent-dark: rgba(var(--ax-sys-color-on-accent-dark-surface));
873
+ --color-border-accent-dark: rgba(var(--ax-sys-color-border-accent-dark-surface));
874
+ --color-accent-darker: rgba(var(--ax-sys-color-accent-darker-surface));
875
+ --color-on-accent-darker: rgba(var(--ax-sys-color-on-accent-darker-surface));
876
+ --color-border-accent-darker: rgba(var(--ax-sys-color-border-accent-darker-surface));
877
+ --color-accent-darkest: rgba(var(--ax-sys-color-accent-darkest-surface));
878
+ --color-on-accent-darkest: rgba(var(--ax-sys-color-on-accent-darkest-surface));
879
+ --color-border-accent-darkest: rgba(var(--ax-sys-color-border-accent-darkest-surface));
1416
880
  }
1417
881
 
1418
882
  /* Primary Surfaces */
1419
883
 
1420
884
  @utility primary-lightest-surface {
1421
- background-color: var(--color-primary-lightest-surface);
1422
- color: var(--color-on-primary-lightest-surface);
1423
- border-color: var(--color-border-primary-lightest-surface);
885
+ background-color: var(--color-primary-lightest);
886
+ color: var(--color-on-primary-lightest);
887
+ border-color: var(--color-border-primary-lightest);
1424
888
  }
1425
889
 
1426
890
  @utility primary-lighter-surface {
1427
- background-color: var(--color-primary-lighter-surface);
1428
- color: var(--color-on-primary-lighter-surface);
1429
- border-color: var(--color-border-primary-lighter-surface);
891
+ background-color: var(--color-primary-lighter);
892
+ color: var(--color-on-primary-lighter);
893
+ border-color: var(--color-border-primary-lighter);
1430
894
  }
1431
895
 
1432
896
  @utility primary-light-surface {
1433
- background-color: var(--color-primary-light-surface);
1434
- color: var(--color-on-primary-light-surface);
1435
- border-color: var(--color-border-primary-light-surface);
897
+ background-color: var(--color-primary-light);
898
+ color: var(--color-on-primary-light);
899
+ border-color: var(--color-border-primary-light);
1436
900
  }
1437
901
 
1438
902
  @utility primary-surface {
1439
- background-color: var(--color-primary-surface);
1440
- color: var(--color-on-primary-surface);
1441
- border-color: var(--color-border-primary-surface);
903
+ background-color: var(--color-primary);
904
+ color: var(--color-on-primary);
905
+ border-color: var(--color-border-primary);
1442
906
  }
1443
907
 
1444
908
  @utility primary-dark-surface {
1445
- background-color: var(--color-primary-dark-surface);
1446
- color: var(--color-on-primary-dark-surface);
1447
- border-color: var(--color-border-primary-dark-surface);
909
+ background-color: var(--color-primary-dark);
910
+ color: var(--color-on-primary-dark);
911
+ border-color: var(--color-border-primary-dark);
1448
912
  }
1449
913
 
1450
914
  @utility primary-darker-surface {
1451
- background-color: var(--color-primary-darker-surface);
1452
- color: var(--color-on-primary-darker-surface);
1453
- border-color: var(--color-border-primary-darker-surface);
915
+ background-color: var(--color-primary-darker);
916
+ color: var(--color-on-primary-darker);
917
+ border-color: var(--color-border-primary-darker);
1454
918
  }
1455
919
 
1456
920
  @utility primary-darkest-surface {
1457
- background-color: var(--color-primary-darkest-surface);
1458
- color: var(--color-on-primary-darkest-surface);
1459
- border-color: var(--color-border-primary-darkest-surface);
921
+ background-color: var(--color-primary-darkest);
922
+ color: var(--color-on-primary-darkest);
923
+ border-color: var(--color-border-primary-darkest);
1460
924
  }
1461
925
 
1462
926
  @utility ax-primary {
1463
- --ax-comp-bg-lightest: var(--color-primary-lightest-surface);
1464
- --ax-comp-text-lightest: var(--color-on-primary-lightest-surface);
1465
- --ax-comp-border-lightest: var(--color-border-primary-lightest-surface);
1466
- --ax-comp-bg-lighter: var(--color-primary-lighter-surface);
1467
- --ax-comp-text-lighter: var(--color-on-primary-lighter-surface);
1468
- --ax-comp-border-lighter: var(--color-border-primary-lighter-surface);
1469
- --ax-comp-bg-light: var(--color-primary-light-surface);
1470
- --ax-comp-text-light: var(--color-on-primary-light-surface);
1471
- --ax-comp-border-light: var(--color-border-primary-light-surface);
1472
- --ax-comp-bg: var(--color-primary-surface);
1473
- --ax-comp-text: var(--color-on-primary-surface);
1474
- --ax-comp-border: var(--color-border-primary-surface);
1475
- --ax-comp-bg-dark: var(--color-primary-dark-surface);
1476
- --ax-comp-text-dark: var(--color-on-primary-dark-surface);
1477
- --ax-comp-border-dark: var(--color-border-primary-dark-surface);
1478
- --ax-comp-bg-darker: var(--color-primary-darker-surface);
1479
- --ax-comp-text-darker: var(--color-on-primary-darker-surface);
1480
- --ax-comp-border-darker: var(--color-border-primary-darker-surface);
1481
- --ax-comp-bg-darkest: var(--color-primary-darkest-surface);
1482
- --ax-comp-text-darkest: var(--color-on-primary-darkest-surface);
1483
- --ax-comp-border-darkest: var(--color-border-primary-darkest-surface);
927
+ --ax-comp-bg-lightest: var(--color-primary-lightest);
928
+ --ax-comp-text-lightest: var(--color-on-primary-lightest);
929
+ --ax-comp-border-lightest: var(--color-border-primary-lightest);
930
+ --ax-comp-bg-lighter: var(--color-primary-lighter);
931
+ --ax-comp-text-lighter: var(--color-on-primary-lighter);
932
+ --ax-comp-border-lighter: var(--color-border-primary-lighter);
933
+ --ax-comp-bg-light: var(--color-primary-light);
934
+ --ax-comp-text-light: var(--color-on-primary-light);
935
+ --ax-comp-border-light: var(--color-border-primary-light);
936
+ --ax-comp-bg: var(--color-primary);
937
+ --ax-comp-text: var(--color-on-primary);
938
+ --ax-comp-border: var(--color-border-primary);
939
+ --ax-comp-bg-dark: var(--color-primary-dark);
940
+ --ax-comp-text-dark: var(--color-on-primary-dark);
941
+ --ax-comp-border-dark: var(--color-border-primary-dark);
942
+ --ax-comp-bg-darker: var(--color-primary-darker);
943
+ --ax-comp-text-darker: var(--color-on-primary-darker);
944
+ --ax-comp-border-darker: var(--color-border-primary-darker);
945
+ --ax-comp-bg-darkest: var(--color-primary-darkest);
946
+ --ax-comp-text-darkest: var(--color-on-primary-darkest);
947
+ --ax-comp-border-darkest: var(--color-border-primary-darkest);
1484
948
  }
1485
949
 
1486
950
  /* Secondary Surfaces */
1487
951
 
1488
952
  @utility secondary-lightest-surface {
1489
- background-color: var(--color-secondary-lightest-surface);
1490
- color: var(--color-on-secondary-lightest-surface);
1491
- border-color: var(--color-border-secondary-lightest-surface);
953
+ background-color: var(--color-secondary-lightest);
954
+ color: var(--color-on-secondary-lightest);
955
+ border-color: var(--color-border-secondary-lightest);
1492
956
  }
1493
957
 
1494
958
  @utility secondary-lighter-surface {
1495
- background-color: var(--color-secondary-lighter-surface);
1496
- color: var(--color-on-secondary-lighter-surface);
1497
- border-color: var(--color-border-secondary-lighter-surface);
959
+ background-color: var(--color-secondary-lighter);
960
+ color: var(--color-on-secondary-lighter);
961
+ border-color: var(--color-border-secondary-lighter);
1498
962
  }
1499
963
 
1500
964
  @utility secondary-light-surface {
1501
- background-color: var(--color-secondary-light-surface);
1502
- color: var(--color-on-secondary-light-surface);
1503
- border-color: var(--color-border-secondary-light-surface);
965
+ background-color: var(--color-secondary-light);
966
+ color: var(--color-on-secondary-light);
967
+ border-color: var(--color-border-secondary-light);
1504
968
  }
1505
969
 
1506
970
  @utility secondary-surface {
1507
- background-color: var(--color-secondary-surface);
1508
- color: var(--color-on-secondary-surface);
1509
- border-color: var(--color-border-secondary-surface);
971
+ background-color: var(--color-secondary);
972
+ color: var(--color-on-secondary);
973
+ border-color: var(--color-border-secondary);
1510
974
  }
1511
975
 
1512
976
  @utility secondary-dark-surface {
1513
- background-color: var(--color-secondary-dark-surface);
1514
- color: var(--color-on-secondary-dark-surface);
1515
- border-color: var(--color-border-secondary-dark-surface);
977
+ background-color: var(--color-secondary-dark);
978
+ color: var(--color-on-secondary-dark);
979
+ border-color: var(--color-border-secondary-dark);
1516
980
  }
1517
981
 
1518
982
  @utility secondary-darker-surface {
1519
- background-color: var(--color-secondary-darker-surface);
1520
- color: var(--color-on-secondary-darker-surface);
1521
- border-color: var(--color-border-secondary-darker-surface);
983
+ background-color: var(--color-secondary-darker);
984
+ color: var(--color-on-secondary-darker);
985
+ border-color: var(--color-border-secondary-darker);
1522
986
  }
1523
987
 
1524
988
  @utility secondary-darkest-surface {
1525
- background-color: var(--color-secondary-darkest-surface);
1526
- color: var(--color-on-secondary-darkest-surface);
1527
- border-color: var(--color-border-secondary-darkest-surface);
989
+ background-color: var(--color-secondary-darkest);
990
+ color: var(--color-on-secondary-darkest);
991
+ border-color: var(--color-border-secondary-darkest);
1528
992
  }
1529
993
 
1530
994
  @utility ax-secondary {
1531
- --ax-comp-bg-lightest: var(--color-secondary-lightest-surface);
1532
- --ax-comp-text-lightest: var(--color-on-secondary-lightest-surface);
1533
- --ax-comp-border-lightest: var(--color-border-secondary-lightest-surface);
1534
- --ax-comp-bg-lighter: var(--color-secondary-lighter-surface);
1535
- --ax-comp-text-lighter: var(--color-on-secondary-lighter-surface);
1536
- --ax-comp-border-lighter: var(--color-border-secondary-lighter-surface);
1537
- --ax-comp-bg-light: var(--color-secondary-light-surface);
1538
- --ax-comp-text-light: var(--color-on-secondary-light-surface);
1539
- --ax-comp-border-light: var(--color-border-secondary-light-surface);
1540
- --ax-comp-bg: var(--color-secondary-surface);
1541
- --ax-comp-text: var(--color-on-secondary-surface);
1542
- --ax-comp-border: var(--color-border-secondary-surface);
1543
- --ax-comp-bg-dark: var(--color-secondary-dark-surface);
1544
- --ax-comp-text-dark: var(--color-on-secondary-dark-surface);
1545
- --ax-comp-border-dark: var(--color-border-secondary-dark-surface);
1546
- --ax-comp-bg-darker: var(--color-secondary-darker-surface);
1547
- --ax-comp-text-darker: var(--color-on-secondary-darker-surface);
1548
- --ax-comp-border-darker: var(--color-border-secondary-darker-surface);
1549
- --ax-comp-bg-darkest: var(--color-secondary-darkest-surface);
1550
- --ax-comp-text-darkest: var(--color-on-secondary-darkest-surface);
1551
- --ax-comp-border-darkest: var(--color-border-secondary-darkest-surface);
995
+ --ax-comp-bg-lightest: var(--color-secondary-lightest);
996
+ --ax-comp-text-lightest: var(--color-on-secondary-lightest);
997
+ --ax-comp-border-lightest: var(--color-border-secondary-lightest);
998
+ --ax-comp-bg-lighter: var(--color-secondary-lighter);
999
+ --ax-comp-text-lighter: var(--color-on-secondary-lighter);
1000
+ --ax-comp-border-lighter: var(--color-border-secondary-lighter);
1001
+ --ax-comp-bg-light: var(--color-secondary-light);
1002
+ --ax-comp-text-light: var(--color-on-secondary-light);
1003
+ --ax-comp-border-light: var(--color-border-secondary-light);
1004
+ --ax-comp-bg: var(--color-secondary);
1005
+ --ax-comp-text: var(--color-on-secondary);
1006
+ --ax-comp-border: var(--color-border-secondary);
1007
+ --ax-comp-bg-dark: var(--color-secondary-dark);
1008
+ --ax-comp-text-dark: var(--color-on-secondary-dark);
1009
+ --ax-comp-border-dark: var(--color-border-secondary-dark);
1010
+ --ax-comp-bg-darker: var(--color-secondary-darker);
1011
+ --ax-comp-text-darker: var(--color-on-secondary-darker);
1012
+ --ax-comp-border-darker: var(--color-border-secondary-darker);
1013
+ --ax-comp-bg-darkest: var(--color-secondary-darkest);
1014
+ --ax-comp-text-darkest: var(--color-on-secondary-darkest);
1015
+ --ax-comp-border-darkest: var(--color-border-secondary-darkest);
1552
1016
  }
1553
1017
 
1554
1018
  /* Success Surfaces */
1555
1019
 
1556
1020
  @utility success-lightest-surface {
1557
- background-color: var(--color-success-lightest-surface);
1558
- color: var(--color-on-success-lightest-surface);
1559
- border-color: var(--color-border-success-lightest-surface);
1021
+ background-color: var(--color-success-lightest);
1022
+ color: var(--color-on-success-lightest);
1023
+ border-color: var(--color-border-success-lightest);
1560
1024
  }
1561
1025
 
1562
1026
  @utility success-lighter-surface {
1563
- background-color: var(--color-success-lighter-surface);
1564
- color: var(--color-on-success-lighter-surface);
1565
- border-color: var(--color-border-success-lighter-surface);
1027
+ background-color: var(--color-success-lighter);
1028
+ color: var(--color-on-success-lighter);
1029
+ border-color: var(--color-border-success-lighter);
1566
1030
  }
1567
1031
 
1568
1032
  @utility success-light-surface {
1569
- background-color: var(--color-success-light-surface);
1570
- color: var(--color-on-success-light-surface);
1571
- border-color: var(--color-border-success-light-surface);
1033
+ background-color: var(--color-success-light);
1034
+ color: var(--color-on-success-light);
1035
+ border-color: var(--color-border-success-light);
1572
1036
  }
1573
1037
 
1574
1038
  @utility success-surface {
1575
- background-color: var(--color-success-surface);
1576
- color: var(--color-on-success-surface);
1577
- border-color: var(--color-border-success-surface);
1039
+ background-color: var(--color-success);
1040
+ color: var(--color-on-success);
1041
+ border-color: var(--color-border-success);
1578
1042
  }
1579
1043
 
1580
1044
  @utility success-dark-surface {
1581
- background-color: var(--color-success-dark-surface);
1582
- color: var(--color-on-success-dark-surface);
1583
- border-color: var(--color-border-success-dark-surface);
1045
+ background-color: var(--color-success-dark);
1046
+ color: var(--color-on-success-dark);
1047
+ border-color: var(--color-border-success-dark);
1584
1048
  }
1585
1049
 
1586
1050
  @utility success-darker-surface {
1587
- background-color: var(--color-success-darker-surface);
1588
- color: var(--color-on-success-darker-surface);
1589
- border-color: var(--color-border-success-darker-surface);
1051
+ background-color: var(--color-success-darker);
1052
+ color: var(--color-on-success-darker);
1053
+ border-color: var(--color-border-success-darker);
1590
1054
  }
1591
1055
 
1592
1056
  @utility success-darkest-surface {
@@ -1596,183 +1060,183 @@ html.dark {
1596
1060
  }
1597
1061
 
1598
1062
  @utility ax-success {
1599
- --ax-comp-bg-lightest: var(--color-success-lightest-surface);
1600
- --ax-comp-text-lightest: var(--color-on-success-lightest-surface);
1601
- --ax-comp-border-lightest: var(--color-border-success-lightest-surface);
1602
- --ax-comp-bg-lighter: var(--color-success-lighter-surface);
1603
- --ax-comp-text-lighter: var(--color-on-success-lighter-surface);
1604
- --ax-comp-border-lighter: var(--color-border-success-lighter-surface);
1605
- --ax-comp-bg-light: var(--color-success-light-surface);
1606
- --ax-comp-text-light: var(--color-on-success-light-surface);
1607
- --ax-comp-border-light: var(--color-border-success-light-surface);
1608
- --ax-comp-bg: var(--color-success-surface);
1609
- --ax-comp-text: var(--color-on-success-surface);
1610
- --ax-comp-border: var(--color-border-success-surface);
1611
- --ax-comp-bg-dark: var(--color-success-dark-surface);
1612
- --ax-comp-text-dark: var(--color-on-success-dark-surface);
1613
- --ax-comp-border-dark: var(--color-border-success-dark-surface);
1614
- --ax-comp-bg-darker: var(--color-success-darker-surface);
1615
- --ax-comp-text-darker: var(--color-on-success-darker-surface);
1616
- --ax-comp-border-darker: var(--color-border-success-darker-surface);
1617
- --ax-comp-bg-darkest: var(--color-success-darkest-surface);
1618
- --ax-comp-text-darkest: var(--color-on-success-darkest-surface);
1619
- --ax-comp-border-darkest: var(--color-border-success-darkest-surface);
1063
+ --ax-comp-bg-lightest: var(--color-success-lightest);
1064
+ --ax-comp-text-lightest: var(--color-on-success-lightest);
1065
+ --ax-comp-border-lightest: var(--color-border-success-lightest);
1066
+ --ax-comp-bg-lighter: var(--color-success-lighter);
1067
+ --ax-comp-text-lighter: var(--color-on-success-lighter);
1068
+ --ax-comp-border-lighter: var(--color-border-success-lighter);
1069
+ --ax-comp-bg-light: var(--color-success-light);
1070
+ --ax-comp-text-light: var(--color-on-success-light);
1071
+ --ax-comp-border-light: var(--color-border-success-light);
1072
+ --ax-comp-bg: var(--color-success);
1073
+ --ax-comp-text: var(--color-on-success);
1074
+ --ax-comp-border: var(--color-border-success);
1075
+ --ax-comp-bg-dark: var(--color-success-dark);
1076
+ --ax-comp-text-dark: var(--color-on-success-dark);
1077
+ --ax-comp-border-dark: var(--color-border-success-dark);
1078
+ --ax-comp-bg-darker: var(--color-success-darker);
1079
+ --ax-comp-text-darker: var(--color-on-success-darker);
1080
+ --ax-comp-border-darker: var(--color-border-success-darker);
1081
+ --ax-comp-bg-darkest: var(--color-success-darkest);
1082
+ --ax-comp-text-darkest: var(--color-on-success-darkest);
1083
+ --ax-comp-border-darkest: var(--color-border-success-darkest);
1620
1084
  }
1621
1085
 
1622
1086
  /* Warning Surfaces */
1623
1087
 
1624
1088
  @utility warning-lightest-surface {
1625
- background-color: var(--color-warning-lightest-surface);
1626
- color: var(--color-on-warning-lightest-surface);
1627
- border-color: var(--color-border-warning-lightest-surface);
1089
+ background-color: var(--color-warning-lightest);
1090
+ color: var(--color-on-warning-lightest);
1091
+ border-color: var(--color-border-warning-lightest);
1628
1092
  }
1629
1093
 
1630
1094
  @utility warning-lighter-surface {
1631
- background-color: var(--color-warning-lighter-surface);
1632
- color: var(--color-on-warning-lighter-surface);
1633
- border-color: var(--color-border-warning-lighter-surface);
1095
+ background-color: var(--color-warning-lighter);
1096
+ color: var(--color-on-warning-lighter);
1097
+ border-color: var(--color-border-warning-lighter);
1634
1098
  }
1635
1099
 
1636
1100
  @utility warning-light-surface {
1637
- background-color: var(--color-warning-light-surface);
1638
- color: var(--color-on-warning-light-surface);
1639
- border-color: var(--color-border-warning-light-surface);
1101
+ background-color: var(--color-warning-light);
1102
+ color: var(--color-on-warning-light);
1103
+ border-color: var(--color-border-warning-light);
1640
1104
  }
1641
1105
 
1642
1106
  @utility warning-surface {
1643
- background-color: var(--color-warning-surface);
1644
- color: var(--color-on-warning-surface);
1645
- border-color: var(--color-border-warning-surface);
1107
+ background-color: var(--color-warning);
1108
+ color: var(--color-on-warning);
1109
+ border-color: var(--color-border-warning);
1646
1110
  }
1647
1111
 
1648
1112
  @utility warning-dark-surface {
1649
- background-color: var(--color-warning-dark-surface);
1650
- color: var(--color-on-warning-dark-surface);
1651
- border-color: var(--color-border-warning-dark-surface);
1113
+ background-color: var(--color-warning-dark);
1114
+ color: var(--color-on-warning-dark);
1115
+ border-color: var(--color-border-warning-dark);
1652
1116
  }
1653
1117
 
1654
1118
  @utility warning-darker-surface {
1655
- background-color: var(--color-warning-darker-surface);
1656
- color: var(--color-on-warning-darker-surface);
1657
- border-color: var(--color-border-warning-darker-surface);
1119
+ background-color: var(--color-warning-darker);
1120
+ color: var(--color-on-warning-darker);
1121
+ border-color: var(--color-border-warning-darker);
1658
1122
  }
1659
1123
 
1660
1124
  @utility warning-darkest-surface {
1661
- background-color: var(--color-warning-darkest-surface);
1662
- color: var(--color-on-warning-darkest-surface);
1663
- border-color: var(--color-border-warning-darkest-surface);
1125
+ background-color: var(--color-warning-darkest);
1126
+ color: var(--color-on-warning-darkest);
1127
+ border-color: var(--color-border-warning-darkest);
1664
1128
  }
1665
1129
 
1666
1130
  @utility ax-warning {
1667
- --ax-comp-bg-lightest: var(--color-warning-lightest-surface);
1668
- --ax-comp-text-lightest: var(--color-on-warning-lightest-surface);
1669
- --ax-comp-border-lightest: var(--color-border-warning-lightest-surface);
1670
- --ax-comp-bg-lighter: var(--color-warning-lighter-surface);
1671
- --ax-comp-text-lighter: var(--color-on-warning-lighter-surface);
1672
- --ax-comp-border-lighter: var(--color-border-warning-lighter-surface);
1673
- --ax-comp-bg-light: var(--color-warning-light-surface);
1674
- --ax-comp-text-light: var(--color-on-warning-light-surface);
1675
- --ax-comp-border-light: var(--color-border-warning-light-surface);
1676
- --ax-comp-bg: var(--color-warning-surface);
1677
- --ax-comp-text: var(--color-on-warning-surface);
1678
- --ax-comp-border: var(--color-border-warning-surface);
1679
- --ax-comp-bg-dark: var(--color-warning-dark-surface);
1680
- --ax-comp-text-dark: var(--color-on-warning-dark-surface);
1681
- --ax-comp-border-dark: var(--color-border-warning-dark-surface);
1682
- --ax-comp-bg-darker: var(--color-warning-darker-surface);
1683
- --ax-comp-text-darker: var(--color-on-warning-darker-surface);
1684
- --ax-comp-border-darker: var(--color-border-warning-darker-surface);
1685
- --ax-comp-bg-darkest: var(--color-warning-darkest-surface);
1686
- --ax-comp-text-darkest: var(--color-on-warning-darkest-surface);
1687
- --ax-comp-border-darkest: var(--color-border-warning-darkest-surface);
1131
+ --ax-comp-bg-lightest: var(--color-warning-lightest);
1132
+ --ax-comp-text-lightest: var(--color-on-warning-lightest);
1133
+ --ax-comp-border-lightest: var(--color-border-warning-lightest);
1134
+ --ax-comp-bg-lighter: var(--color-warning-lighter);
1135
+ --ax-comp-text-lighter: var(--color-on-warning-lighter);
1136
+ --ax-comp-border-lighter: var(--color-border-warning-lighter);
1137
+ --ax-comp-bg-light: var(--color-warning-light);
1138
+ --ax-comp-text-light: var(--color-on-warning-light);
1139
+ --ax-comp-border-light: var(--color-border-warning-light);
1140
+ --ax-comp-bg: var(--color-warning);
1141
+ --ax-comp-text: var(--color-on-warning);
1142
+ --ax-comp-border: var(--color-border-warning);
1143
+ --ax-comp-bg-dark: var(--color-warning-dark);
1144
+ --ax-comp-text-dark: var(--color-on-warning-dark);
1145
+ --ax-comp-border-dark: var(--color-border-warning-dark);
1146
+ --ax-comp-bg-darker: var(--color-warning-darker);
1147
+ --ax-comp-text-darker: var(--color-on-warning-darker);
1148
+ --ax-comp-border-darker: var(--color-border-warning-darker);
1149
+ --ax-comp-bg-darkest: var(--color-warning-darkest);
1150
+ --ax-comp-text-darkest: var(--color-on-warning-darkest);
1151
+ --ax-comp-border-darkest: var(--color-border-warning-darkest);
1688
1152
  }
1689
1153
 
1690
1154
  /* Danger Surfaces */
1691
1155
 
1692
1156
  @utility danger-lightest-surface {
1693
- background-color: var(--color-danger-lightest-surface);
1694
- color: var(--color-on-danger-lightest-surface);
1695
- border-color: var(--color-border-danger-lightest-surface);
1157
+ background-color: var(--color-danger-lightest);
1158
+ color: var(--color-on-danger-lightest);
1159
+ border-color: var(--color-border-danger-lightest);
1696
1160
  }
1697
1161
 
1698
1162
  @utility danger-lighter-surface {
1699
- background-color: var(--color-danger-lighter-surface);
1700
- color: var(--color-on-danger-lighter-surface);
1701
- border-color: var(--color-border-danger-lighter-surface);
1163
+ background-color: var(--color-danger-lighter);
1164
+ color: var(--color-on-danger-lighter);
1165
+ border-color: var(--color-border-danger-lighter);
1702
1166
  }
1703
1167
 
1704
1168
  @utility danger-light-surface {
1705
- background-color: var(--color-danger-light-surface);
1706
- color: var(--color-on-danger-light-surface);
1707
- border-color: var(--color-border-danger-light-surface);
1169
+ background-color: var(--color-danger-light);
1170
+ color: var(--color-on-danger-light);
1171
+ border-color: var(--color-border-danger-light);
1708
1172
  }
1709
1173
 
1710
1174
  @utility danger-surface {
1711
- background-color: var(--color-danger-surface);
1712
- color: var(--color-on-danger-surface);
1713
- border-color: var(--color-border-danger-surface);
1175
+ background-color: var(--color-danger);
1176
+ color: var(--color-on-danger);
1177
+ border-color: var(--color-border-danger);
1714
1178
  }
1715
1179
 
1716
1180
  @utility danger-dark-surface {
1717
- background-color: var(--color-danger-dark-surface);
1718
- color: var(--color-on-danger-dark-surface);
1719
- border-color: var(--color-border-danger-dark-surface);
1181
+ background-color: var(--color-danger-dark);
1182
+ color: var(--color-on-danger-dark);
1183
+ border-color: var(--color-border-danger-dark);
1720
1184
  }
1721
1185
 
1722
1186
  @utility danger-darker-surface {
1723
- background-color: var(--color-danger-darker-surface);
1724
- color: var(--color-on-danger-darker-surface);
1725
- border-color: var(--color-border-danger-darker-surface);
1187
+ background-color: var(--color-danger-darker);
1188
+ color: var(--color-on-danger-darker);
1189
+ border-color: var(--color-border-danger-darker);
1726
1190
  }
1727
1191
 
1728
1192
  @utility danger-darkest-surface {
1729
- background-color: var(--color-danger-darkest-surface);
1730
- color: var(--color-on-danger-darkest-surface);
1731
- border-color: var(--color-border-danger-darkest-surface);
1193
+ background-color: var(--color-danger-darkest);
1194
+ color: var(--color-on-danger-darkest);
1195
+ border-color: var(--color-border-danger-darkest);
1732
1196
  }
1733
1197
 
1734
1198
  @utility ax-danger {
1735
- --ax-comp-bg-lightest: var(--color-danger-lightest-surface);
1736
- --ax-comp-text-lightest: var(--color-on-danger-lightest-surface);
1737
- --ax-comp-border-lightest: var(--color-border-danger-lightest-surface);
1738
- --ax-comp-bg-lighter: var(--color-danger-lighter-surface);
1739
- --ax-comp-text-lighter: var(--color-on-danger-lighter-surface);
1740
- --ax-comp-border-lighter: var(--color-border-danger-lighter-surface);
1741
- --ax-comp-bg-light: var(--color-danger-light-surface);
1742
- --ax-comp-text-light: var(--color-on-danger-light-surface);
1743
- --ax-comp-border-light: var(--color-border-danger-light-surface);
1744
- --ax-comp-bg: var(--color-danger-surface);
1745
- --ax-comp-text: var(--color-on-danger-surface);
1746
- --ax-comp-border: var(--color-border-danger-surface);
1747
- --ax-comp-bg-dark: var(--color-danger-dark-surface);
1748
- --ax-comp-text-dark: var(--color-on-danger-dark-surface);
1749
- --ax-comp-border-dark: var(--color-border-danger-dark-surface);
1750
- --ax-comp-bg-darker: var(--color-danger-darker-surface);
1751
- --ax-comp-text-darker: var(--color-on-danger-darker-surface);
1752
- --ax-comp-border-darker: var(--color-border-danger-darker-surface);
1753
- --ax-comp-bg-darkest: var(--color-danger-darkest-surface);
1754
- --ax-comp-text-darkest: var(--color-on-danger-darkest-surface);
1755
- --ax-comp-border-darkest: var(--color-border-danger-darkest-surface);
1199
+ --ax-comp-bg-lightest: var(--color-danger-lightest);
1200
+ --ax-comp-text-lightest: var(--color-on-danger-lightest);
1201
+ --ax-comp-border-lightest: var(--color-border-danger-lightest);
1202
+ --ax-comp-bg-lighter: var(--color-danger-lighter);
1203
+ --ax-comp-text-lighter: var(--color-on-danger-lighter);
1204
+ --ax-comp-border-lighter: var(--color-border-danger-lighter);
1205
+ --ax-comp-bg-light: var(--color-danger-light);
1206
+ --ax-comp-text-light: var(--color-on-danger-light);
1207
+ --ax-comp-border-light: var(--color-border-danger-light);
1208
+ --ax-comp-bg: var(--color-danger);
1209
+ --ax-comp-text: var(--color-on-danger);
1210
+ --ax-comp-border: var(--color-border-danger);
1211
+ --ax-comp-bg-dark: var(--color-danger-dark);
1212
+ --ax-comp-text-dark: var(--color-on-danger-dark);
1213
+ --ax-comp-border-dark: var(--color-border-danger-dark);
1214
+ --ax-comp-bg-darker: var(--color-danger-darker);
1215
+ --ax-comp-text-darker: var(--color-on-danger-darker);
1216
+ --ax-comp-border-darker: var(--color-border-danger-darker);
1217
+ --ax-comp-bg-darkest: var(--color-danger-darkest);
1218
+ --ax-comp-text-darkest: var(--color-on-danger-darkest);
1219
+ --ax-comp-border-darkest: var(--color-border-danger-darkest);
1756
1220
  }
1757
1221
 
1758
1222
  /* Surface Surfaces */
1759
1223
 
1760
1224
  @utility lightest-surface {
1761
- background-color: var(--color-lightest-surface);
1762
- color: var(--color-on-lightest-surface);
1763
- border-color: var(--color-border-lightest-surface);
1225
+ background-color: var(--color-lightest);
1226
+ color: var(--color-on-lightest);
1227
+ border-color: var(--color-border-lightest);
1764
1228
  }
1765
1229
 
1766
1230
  @utility lighter-surface {
1767
- background-color: var(--color-lighter-surface);
1768
- color: var(--color-on-lighter-surface);
1769
- border-color: var(--color-border-lighter-surface);
1231
+ background-color: var(--color-lighter);
1232
+ color: var(--color-on-lighter);
1233
+ border-color: var(--color-border-lighter);
1770
1234
  }
1771
1235
 
1772
1236
  @utility light-surface {
1773
- background-color: var(--color-light-surface);
1774
- color: var(--color-on-light-surface);
1775
- border-color: var(--color-border-light-surface);
1237
+ background-color: var(--color-light);
1238
+ color: var(--color-on-light);
1239
+ border-color: var(--color-border-light);
1776
1240
  }
1777
1241
 
1778
1242
  @utility surface {
@@ -1782,113 +1246,113 @@ html.dark {
1782
1246
  }
1783
1247
 
1784
1248
  @utility dark-surface {
1785
- background-color: var(--color-dark-surface);
1786
- color: var(--color-on-dark-surface);
1787
- border-color: var(--color-border-dark-surface);
1249
+ background-color: var(--color-dark);
1250
+ color: var(--color-on-dark);
1251
+ border-color: var(--color-border-dark);
1788
1252
  }
1789
1253
 
1790
1254
  @utility darker-surface {
1791
- background-color: var(--color-darker-surface);
1792
- color: var(--color-on-darker-surface);
1793
- border-color: var(--color-border-darker-surface);
1255
+ background-color: var(--color-darker);
1256
+ color: var(--color-on-darker);
1257
+ border-color: var(--color-border-darker);
1794
1258
  }
1795
1259
 
1796
1260
  @utility darkest-surface {
1797
- background-color: var(--color-darkest-surface);
1798
- color: var(--color-on-darkest-surface);
1799
- border-color: var(--color-border-darkest-surface);
1261
+ background-color: var(--color-darkest);
1262
+ color: var(--color-on-darkest);
1263
+ border-color: var(--color-border-darkest);
1800
1264
  }
1801
1265
 
1802
1266
  @utility ax-surface {
1803
- --ax-comp-bg-lightest: var(--color-lightest-surface);
1804
- --ax-comp-text-lightest: var(--color-on-lightest-surface);
1805
- --ax-comp-border-lightest: var(--color-border-lightest-surface);
1806
- --ax-comp-bg-lighter: var(--color-lighter-surface);
1807
- --ax-comp-text-lighter: var(--color-on-lighter-surface);
1808
- --ax-comp-border-lighter: var(--color-border-lighter-surface);
1809
- --ax-comp-bg-light: var(--color-light-surface);
1810
- --ax-comp-text-light: var(--color-on-light-surface);
1811
- --ax-comp-border-light: var(--color-border-light-surface);
1267
+ --ax-comp-bg-lightest: var(--color-lightest);
1268
+ --ax-comp-text-lightest: var(--color-on-lightest);
1269
+ --ax-comp-border-lightest: var(--color-border-lightest);
1270
+ --ax-comp-bg-lighter: var(--color-lighter);
1271
+ --ax-comp-text-lighter: var(--color-on-lighter);
1272
+ --ax-comp-border-lighter: var(--color-border-lighter);
1273
+ --ax-comp-bg-light: var(--color-light);
1274
+ --ax-comp-text-light: var(--color-on-light);
1275
+ --ax-comp-border-light: var(--color-border-light);
1812
1276
  --ax-comp-bg: var(--color-surface);
1813
1277
  --ax-comp-text: var(--color-on-surface);
1814
1278
  --ax-comp-border: var(--color-border-surface);
1815
- --ax-comp-bg-dark: var(--color-dark-surface);
1816
- --ax-comp-text-dark: var(--color-on-dark-surface);
1817
- --ax-comp-border-dark: var(--color-border-dark-surface);
1818
- --ax-comp-bg-darker: var(--color-darker-surface);
1819
- --ax-comp-text-darker: var(--color-on-darker-surface);
1820
- --ax-comp-border-darker: var(--color-border-darker-surface);
1821
- --ax-comp-bg-darkest: var(--color-darkest-surface);
1822
- --ax-comp-text-darkest: var(--color-on-darkest-surface);
1823
- --ax-comp-border-darkest: var(--color-border-darkest-surface);
1279
+ --ax-comp-bg-dark: var(--color-dark);
1280
+ --ax-comp-text-dark: var(--color-on-dark);
1281
+ --ax-comp-border-dark: var(--color-border-dark);
1282
+ --ax-comp-bg-darker: var(--color-darker);
1283
+ --ax-comp-text-darker: var(--color-on-darker);
1284
+ --ax-comp-border-darker: var(--color-border-darker);
1285
+ --ax-comp-bg-darkest: var(--color-darkest);
1286
+ --ax-comp-text-darkest: var(--color-on-darkest);
1287
+ --ax-comp-border-darkest: var(--color-border-darkest);
1824
1288
  }
1825
1289
 
1826
1290
  /* Accent Surfaces */
1827
1291
 
1828
1292
  @utility accent-lightest-surface {
1829
- background-color: var(--color-accent-lightest-surface);
1830
- color: var(--color-on-accent-lightest-surface);
1831
- border-color: var(--color-border-accent-lightest-surface);
1293
+ background-color: var(--color-accent-lightest);
1294
+ color: var(--color-on-accent-lightest);
1295
+ border-color: var(--color-border-accent-lightest);
1832
1296
  }
1833
1297
 
1834
1298
  @utility accent-lighter-surface {
1835
- background-color: var(--color-accent-lighter-surface);
1836
- color: var(--color-on-accent-lighter-surface);
1837
- border-color: var(--color-border-accent-lighter-surface);
1299
+ background-color: var(--color-accent-lighter);
1300
+ color: var(--color-on-accent-lighter);
1301
+ border-color: var(--color-border-accent-lighter);
1838
1302
  }
1839
1303
 
1840
1304
  @utility accent-light-surface {
1841
- background-color: var(--color-accent-light-surface);
1842
- color: var(--color-on-accent-light-surface);
1843
- border-color: var(--color-border-accent-light-surface);
1305
+ background-color: var(--color-accent-light);
1306
+ color: var(--color-on-accent-light);
1307
+ border-color: var(--color-border-accent-light);
1844
1308
  }
1845
1309
 
1846
1310
  @utility accent-surface {
1847
- background-color: var(--color-accent-surface);
1848
- color: var(--color-on-accent-surface);
1849
- border-color: var(--color-border-accent-surface);
1311
+ background-color: var(--color-accent);
1312
+ color: var(--color-on-accent);
1313
+ border-color: var(--color-border-accent);
1850
1314
  }
1851
1315
 
1852
1316
  @utility accent-dark-surface {
1853
- background-color: var(--color-accent-dark-surface);
1854
- color: var(--color-on-accent-dark-surface);
1855
- border-color: var(--color-border-accent-dark-surface);
1317
+ background-color: var(--color-accent-dark);
1318
+ color: var(--color-on-accent-dark);
1319
+ border-color: var(--color-border-accent-dark);
1856
1320
  }
1857
1321
 
1858
1322
  @utility accent-darker-surface {
1859
- background-color: var(--color-accent-darker-surface);
1860
- color: var(--color-on-accent-darker-surface);
1861
- border-color: var(--color-border-accent-darker-surface);
1323
+ background-color: var(--color-accent-darker);
1324
+ color: var(--color-on-accent-darker);
1325
+ border-color: var(--color-border-accent-darker);
1862
1326
  }
1863
1327
 
1864
1328
  @utility accent-darkest-surface {
1865
- background-color: var(--color-accent-darkest-surface);
1866
- color: var(--color-on-accent-darkest-surface);
1867
- border-color: var(--color-border-accent-darkest-surface);
1329
+ background-color: var(--color-accent-darkest);
1330
+ color: var(--color-on-accent-darkest);
1331
+ border-color: var(--color-border-accent-darkest);
1868
1332
  }
1869
1333
 
1870
1334
  @utility ax-accent {
1871
- --ax-comp-bg-lightest: var(--color-accent-lightest-surface);
1872
- --ax-comp-text-lightest: var(--color-on-accent-lightest-surface);
1873
- --ax-comp-border-lightest: var(--color-border-accent-lightest-surface);
1874
- --ax-comp-bg-lighter: var(--color-accent-lighter-surface);
1875
- --ax-comp-text-lighter: var(--color-on-accent-lighter-surface);
1876
- --ax-comp-border-lighter: var(--color-border-accent-lighter-surface);
1877
- --ax-comp-bg-light: var(--color-accent-light-surface);
1878
- --ax-comp-text-light: var(--color-on-accent-light-surface);
1879
- --ax-comp-border-light: var(--color-border-accent-light-surface);
1880
- --ax-comp-bg: var(--color-accent-surface);
1881
- --ax-comp-text: var(--color-on-accent-surface);
1882
- --ax-comp-border: var(--color-border-accent-surface);
1883
- --ax-comp-bg-dark: var(--color-accent-dark-surface);
1884
- --ax-comp-text-dark: var(--color-on-accent-dark-surface);
1885
- --ax-comp-border-dark: var(--color-border-accent-dark-surface);
1886
- --ax-comp-bg-darker: var(--color-accent-darker-surface);
1887
- --ax-comp-text-darker: var(--color-on-accent-darker-surface);
1888
- --ax-comp-border-darker: var(--color-border-accent-darker-surface);
1889
- --ax-comp-bg-darkest: var(--color-accent-darkest-surface);
1890
- --ax-comp-text-darkest: var(--color-on-accent-darkest-surface);
1891
- --ax-comp-border-darkest: var(--color-border-accent-darkest-surface);
1335
+ --ax-comp-bg-lightest: var(--color-accent-lightest);
1336
+ --ax-comp-text-lightest: var(--color-on-accent-lightest);
1337
+ --ax-comp-border-lightest: var(--color-border-accent-lightest);
1338
+ --ax-comp-bg-lighter: var(--color-accent-lighter);
1339
+ --ax-comp-text-lighter: var(--color-on-accent-lighter);
1340
+ --ax-comp-border-lighter: var(--color-border-accent-lighter);
1341
+ --ax-comp-bg-light: var(--color-accent-light);
1342
+ --ax-comp-text-light: var(--color-on-accent-light);
1343
+ --ax-comp-border-light: var(--color-border-accent-light);
1344
+ --ax-comp-bg: var(--color-accent);
1345
+ --ax-comp-text: var(--color-on-accent);
1346
+ --ax-comp-border: var(--color-border-accent);
1347
+ --ax-comp-bg-dark: var(--color-accent-dark);
1348
+ --ax-comp-text-dark: var(--color-on-accent-dark);
1349
+ --ax-comp-border-dark: var(--color-border-accent-dark);
1350
+ --ax-comp-bg-darker: var(--color-accent-darker);
1351
+ --ax-comp-text-darker: var(--color-on-accent-darker);
1352
+ --ax-comp-border-darker: var(--color-border-accent-darker);
1353
+ --ax-comp-bg-darkest: var(--color-accent-darkest);
1354
+ --ax-comp-text-darkest: var(--color-on-accent-darkest);
1355
+ --ax-comp-border-darkest: var(--color-border-accent-darkest);
1892
1356
  }
1893
1357
 
1894
1358
  @utility max-w-8xl {
@@ -1915,7 +1379,7 @@ html.dark {
1915
1379
  @utility ax-flat {
1916
1380
  @apply rounded-none;
1917
1381
  &.ax-default {
1918
- @apply border-border-lightest-surface dark:border-border-darkest-surface border-b bg-transparent;
1382
+ @apply border-border-lightest dark:border-border-darkest border-b bg-transparent;
1919
1383
  }
1920
1384
  &.ax-editor-container {
1921
1385
  @apply focus-within:border-primary!;
@@ -1923,12 +1387,12 @@ html.dark {
1923
1387
  }
1924
1388
 
1925
1389
  @utility ax-solid {
1926
- @apply bg-(--ax-comp-bg,var(--color-lightest-surface)) text-(--ax-comp-text,var(--color-on-lightest-surface)) dark:bg-(--ax-comp-bg,var(--color-darkest-surface)) dark:text-(--ax-comp-text,var(--color-on-darkest-surface));
1390
+ @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));
1927
1391
  &.ax-default {
1928
1392
  @apply lightest-surface dark:darkest-surface border;
1929
1393
  }
1930
1394
  &.ax-state-selected {
1931
- @apply bg-(--ax-comp-bg-darker,var(--color-light-surface)) text-(--ax-comp-text-darker,var(--color-on-light-surface)) dark:bg-(--ax-comp-bg-darker,var(--color-dark-surface)) dark:text-(--ax-comp-text-darker,var(--color-on-dark-surface));
1395
+ @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));
1932
1396
  }
1933
1397
  &.ax-editor-container {
1934
1398
  @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
@@ -1937,11 +1401,7 @@ html.dark {
1937
1401
 
1938
1402
  @utility ax-solid-interactive {
1939
1403
  @supports (color: color-mix(in lab, red, red)) {
1940
- --ax-comp-ripple-color: color-mix(
1941
- in oklab,
1942
- var(--ax-comp-bg-lightest-surface, var(--color-on-lightest-surface)) 25%,
1943
- transparent
1944
- );
1404
+ --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
1945
1405
  }
1946
1406
  @apply ax-solid transition-colors;
1947
1407
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
@@ -1949,21 +1409,21 @@ html.dark {
1949
1409
  &:focus,
1950
1410
  &:focus-within,
1951
1411
  &:focus-visible {
1952
- @apply bg-(--ax-comp-bg-dark,var(--color-lighter-surface)) text-(--ax-comp-text-dark,var(--color-on-lighter-surface)) dark:bg-(--ax-comp-bg-dark,var(--color-darker-surface)) dark:text-(--ax-comp-text-dark,var(--color-on-darker-surface));
1412
+ @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));
1953
1413
  }
1954
1414
  }
1955
1415
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
1956
- @apply bg-(--ax-comp-bg-darker,var(--color-light-surface)) text-(--ax-comp-text-darker,var(--color-on-light-surface)) dark:bg-(--ax-comp-bg-darker,var(--color-dark-surface)) dark:text-(--ax-comp-text-darker,var(--color-on-dark-surface));
1416
+ @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));
1957
1417
  }
1958
1418
  }
1959
1419
 
1960
1420
  @utility ax-outline {
1961
- @apply border border-(--ax-comp-bg,var(--color-border-lightest-surface)) bg-transparent text-(--ax-comp-bg,var(--color-on-lightest-surface));
1421
+ @apply border border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-lightest));
1962
1422
  &.ax-default {
1963
- @apply border-border-lightest-surface dark:border-border-darkest-surface border;
1423
+ @apply border-border-lightest dark:border-border-darkest border;
1964
1424
  }
1965
1425
  &.ax-state-selected {
1966
- @apply border-(--ax-comp-bg-darker,var(--color-border-light-surface)) text-(--ax-comp-bg-darker,var(--color-on-light-surface));
1426
+ @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
1967
1427
  }
1968
1428
  &.ax-editor-container {
1969
1429
  @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
@@ -1972,7 +1432,7 @@ html.dark {
1972
1432
 
1973
1433
  @utility ax-outline-interactive {
1974
1434
  @supports (color: color-mix(in lab, red, red)) {
1975
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest-surface)) 25%, transparent);
1435
+ --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
1976
1436
  }
1977
1437
  @apply ax-outline transition-colors;
1978
1438
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
@@ -1980,16 +1440,16 @@ html.dark {
1980
1440
  &:focus,
1981
1441
  &:focus-within,
1982
1442
  &:focus-visible {
1983
- @apply border-(--ax-comp-bg-dark,var(--color-border-lighter-surface)) text-(--ax-comp-bg-dark,var(--color-on-lighter-surface));
1443
+ @apply border-(--ax-comp-bg-dark,var(--color-border-lighter)) text-(--ax-comp-bg-dark,var(--color-on-lighter));
1984
1444
  }
1985
1445
  }
1986
1446
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
1987
- @apply border-(--ax-comp-bg-darker,var(--color-border-light-surface)) text-(--ax-comp-bg-darker,var(--color-on-light-surface));
1447
+ @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
1988
1448
  }
1989
1449
  }
1990
1450
 
1991
1451
  @utility ax-twotone {
1992
- @apply bg-(--ax-comp-bg-lightest,var(--color-lighter-surface)) text-(--ax-comp-text-lightest,var(--color-on-lighter-surface)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker-surface)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker-surface));
1452
+ @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));
1993
1453
  &.ax-state-selected {
1994
1454
  @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
1995
1455
  }
@@ -1997,7 +1457,7 @@ html.dark {
1997
1457
 
1998
1458
  @utility ax-twotone-interactive {
1999
1459
  @supports (color: color-mix(in lab, red, red)) {
2000
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest-surface)) 25%, transparent);
1460
+ --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
2001
1461
  }
2002
1462
  @apply ax-twotone transition-colors;
2003
1463
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
@@ -2005,7 +1465,7 @@ html.dark {
2005
1465
  &:focus,
2006
1466
  &:focus-within,
2007
1467
  &:focus-visible {
2008
- @apply bg-(--ax-comp-bg-lighter,var(--color-light-surface)) text-(--ax-comp-text-lighter,var(--color-on-light-surface)) dark:bg-(--ax-comp-bg-lighter,var(--color-dark-surface)) dark:text-(--ax-comp-text-lighter,var(--color-on-dark-surface));
1468
+ @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));
2009
1469
  }
2010
1470
  }
2011
1471
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -2022,7 +1482,7 @@ html.dark {
2022
1482
 
2023
1483
  @utility ax-blank-interactive {
2024
1484
  @supports (color: color-mix(in lab, red, red)) {
2025
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest-surface)) 25%, transparent);
1485
+ --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
2026
1486
  }
2027
1487
  @apply ax-blank transition-colors;
2028
1488
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
@@ -2030,7 +1490,7 @@ html.dark {
2030
1490
  &:focus,
2031
1491
  &:focus-within,
2032
1492
  &:focus-visible {
2033
- @apply bg-(--ax-comp-bg-lightest,var(--color-lighter-surface)) text-(--ax-comp-text-lightest,var(--color-on-lighter-surface)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker-surface)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker-surface));
1493
+ @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));
2034
1494
  }
2035
1495
  }
2036
1496
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -2047,7 +1507,7 @@ html.dark {
2047
1507
 
2048
1508
  @utility links-interactive {
2049
1509
  @supports (color: color-mix(in lab, red, red)) {
2050
- --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest-surface)) 25%, transparent);
1510
+ --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
2051
1511
  }
2052
1512
  @apply links transition-colors;
2053
1513
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {