@epilot/volt-ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +1 -1
  2. package/dist/styles/colors-semantic-utilities.css +79 -0
  3. package/dist/styles/colors-style-utilities.css +43 -1
  4. package/dist/styles/colors-utilities.css +56 -28
  5. package/dist/styles/colors.css +171 -80
  6. package/dist/styles/colors.scoped.css +1 -1
  7. package/dist/styles/volt-ui.css +1 -1
  8. package/dist/styles/volt-ui.flat.css +1 -1
  9. package/dist/styles/volt-ui.scoped.css +1 -1
  10. package/dist/tokens/colors.d.ts +92 -0
  11. package/dist/tokens/colors.js +94 -1
  12. package/dist/tokens/colors.js.map +1 -1
  13. package/dist/types/tokens/colors.d.ts +92 -0
  14. package/package.json +1 -1
  15. package/CHANGELOG.md +0 -72
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A clean, lightweight, and tree-shakeable design system library for React applications. Built with Tailwind CSS v4, Radix UI primitives, and TypeScript.
4
4
 
5
- 📖 [View Storybook Documentation](https://v2--67c6bdb2c8953d85ee8fc349.chromatic.com/)
5
+ 📖 [View Storybook Documentation](https://main--68f5f302db3229e0eb83856e.chromatic.com/)
6
6
 
7
7
  ## Features
8
8
 
package/dist/styles/colors-semantic-utilities.css CHANGED
@@ -2,6 +2,85 @@
2
2
 
3
3
  /* PALETTE COLORS */
4
4
 
5
+ /* eblue background utilities */
6
+ @utility bg-eblue-level-1 {
7
+ background-color: var(--eblue-1);
8
+ }
9
+
10
+ @utility bg-eblue-level-2 {
11
+ background-color: var(--eblue-2);
12
+ }
13
+
14
+ @utility bg-eblue-soft {
15
+ background-color: var(--eblue-a3);
16
+ }
17
+
18
+ @utility bg-eblue-soft-hover {
19
+ background-color: var(--eblue-a2);
20
+ }
21
+
22
+ @utility bg-eblue-surface {
23
+ background-color: var(--eblue-surface);
24
+ }
25
+
26
+ @utility bg-eblue-solid {
27
+ background-color: var(--eblue-a9);
28
+ }
29
+
30
+ @utility bg-eblue-solid-hover {
31
+ background-color: var(--eblue-a10);
32
+ }
33
+
34
+ @utility bg-eblue-contrast {
35
+ background-color: var(--eblue-contrast);
36
+ }
37
+
38
+ @utility bg-eblue-high-contrast {
39
+ background-color: var(--eblue-a12);
40
+ }
41
+
42
+ /* eblue text utilities */
43
+ @utility text-eblue-default {
44
+ color: var(--eblue-a12);
45
+ }
46
+
47
+ @utility text-eblue-light {
48
+ color: var(--eblue-a11);
49
+ }
50
+
51
+ @utility text-eblue-disabled {
52
+ color: var(--eblue-a8);
53
+ }
54
+
55
+ @utility text-eblue-contrast {
56
+ color: var(--eblue-contrast);
57
+ }
58
+
59
+ @utility text-eblue-high-contrast {
60
+ color: var(--eblue-1);
61
+ }
62
+
63
+ /* eblue border utilities */
64
+ @utility border-eblue-default {
65
+ border-color: var(--eblue-a6);
66
+ }
67
+
68
+ @utility border-eblue-ui {
69
+ border-color: var(--eblue-a7);
70
+ }
71
+
72
+ @utility border-eblue-ui-hover {
73
+ border-color: var(--eblue-a8);
74
+ }
75
+
76
+ @utility border-eblue-contrast {
77
+ border-color: var(--eblue-contrast);
78
+ }
79
+
80
+ @utility border-eblue-high-contrast {
81
+ border-color: var(--eblue-1);
82
+ }
83
+
5
84
  /* mauve background utilities */
6
85
  @utility bg-mauve-level-1 {
7
86
  background-color: var(--mauve-1);
package/dist/styles/colors-style-utilities.css CHANGED
@@ -1,8 +1,50 @@
1
1
  /* Auto-generated style utilities from src/tokens/colors.ts */
2
- /* Generated on 2025-09-29T09:48:24.895Z */
2
+ /* Generated on 2025-10-27T08:17:51.400Z */
3
3
 
4
4
  /* PALETTE COLORS STYLE UTILITIES */
5
5
 
6
+ /* eblue style utilities */
7
+ @utility style-eblue-solid {
8
+ background-color: var(--eblue-a9);
9
+ color: var(--eblue-contrast);
10
+ }
11
+
12
+ @utility style-eblue-solid-hover {
13
+ background-color: var(--eblue-a10);
14
+ color: var(--eblue-contrast);
15
+ }
16
+
17
+ @utility style-eblue-soft {
18
+ background-color: var(--eblue-a3);
19
+ color: var(--eblue-12);
20
+ }
21
+
22
+ @utility style-eblue-soft-hover {
23
+ background-color: var(--eblue-a4);
24
+ color: var(--eblue-12);
25
+ }
26
+
27
+ @utility style-eblue-surface {
28
+ background-color: var(--eblue-surface);
29
+ color: var(--eblue-12);
30
+ border-color: var(--eblue-a6);
31
+ border-width: 1px;
32
+ border-style: solid;
33
+ }
34
+
35
+ @utility style-eblue-surface-hover {
36
+ background-color: var(--eblue-a3);
37
+ color: var(--eblue-12);
38
+ border-color: var(--eblue-a7);
39
+ border-width: 1px;
40
+ border-style: solid;
41
+ }
42
+
43
+ @utility style-eblue-high-contrast {
44
+ background-color: var(--eblue-a12);
45
+ color: var(--eblue-1);
46
+ }
47
+
6
48
  /* mauve style utilities */
7
49
  @utility style-mauve-solid {
8
50
  background-color: var(--mauve-a9);
package/dist/styles/colors-utilities.css CHANGED
@@ -7,6 +7,34 @@
7
7
  @theme {
8
8
  --color-white: #ffffff;
9
9
  --color-black: #000000;
10
+ --color-eblue-1: var(--eblue-1);
11
+ --color-eblue-2: var(--eblue-2);
12
+ --color-eblue-3: var(--eblue-3);
13
+ --color-eblue-4: var(--eblue-4);
14
+ --color-eblue-5: var(--eblue-5);
15
+ --color-eblue-6: var(--eblue-6);
16
+ --color-eblue-7: var(--eblue-7);
17
+ --color-eblue-8: var(--eblue-8);
18
+ --color-eblue-9: var(--eblue-9);
19
+ --color-eblue-10: var(--eblue-10);
20
+ --color-eblue-11: var(--eblue-11);
21
+ --color-eblue-12: var(--eblue-12);
22
+ --color-eblue-a1: var(--eblue-a1);
23
+ --color-eblue-a2: var(--eblue-a2);
24
+ --color-eblue-a3: var(--eblue-a3);
25
+ --color-eblue-a4: var(--eblue-a4);
26
+ --color-eblue-a5: var(--eblue-a5);
27
+ --color-eblue-a6: var(--eblue-a6);
28
+ --color-eblue-a7: var(--eblue-a7);
29
+ --color-eblue-a8: var(--eblue-a8);
30
+ --color-eblue-a9: var(--eblue-a9);
31
+ --color-eblue-a10: var(--eblue-a10);
32
+ --color-eblue-a11: var(--eblue-a11);
33
+ --color-eblue-a12: var(--eblue-a12);
34
+ --color-eblue-contrast: var(--eblue-contrast);
35
+ --color-eblue-surface: var(--eblue-surface);
36
+ --color-eblue-indicator: var(--eblue-indicator);
37
+ --color-eblue-track: var(--eblue-track);
10
38
  --color-mauve-1: var(--mauve-1);
11
39
  --color-mauve-2: var(--mauve-2);
12
40
  --color-mauve-3: var(--mauve-3);
@@ -432,34 +460,34 @@
432
460
  /* Auto-generated color utilities for system color palette */
433
461
 
434
462
  @theme inline {
435
- --color-accent-1: var(--indigo-1);
436
- --color-accent-2: var(--indigo-2);
437
- --color-accent-3: var(--indigo-3);
438
- --color-accent-4: var(--indigo-4);
439
- --color-accent-5: var(--indigo-5);
440
- --color-accent-6: var(--indigo-6);
441
- --color-accent-7: var(--indigo-7);
442
- --color-accent-8: var(--indigo-8);
443
- --color-accent-9: var(--indigo-9);
444
- --color-accent-10: var(--indigo-10);
445
- --color-accent-11: var(--indigo-11);
446
- --color-accent-12: var(--indigo-12);
447
- --color-accent-a1: var(--indigo-a1);
448
- --color-accent-a2: var(--indigo-a2);
449
- --color-accent-a3: var(--indigo-a3);
450
- --color-accent-a4: var(--indigo-a4);
451
- --color-accent-a5: var(--indigo-a5);
452
- --color-accent-a6: var(--indigo-a6);
453
- --color-accent-a7: var(--indigo-a7);
454
- --color-accent-a8: var(--indigo-a8);
455
- --color-accent-a9: var(--indigo-a9);
456
- --color-accent-a10: var(--indigo-a10);
457
- --color-accent-a11: var(--indigo-a11);
458
- --color-accent-a12: var(--indigo-a12);
459
- --color-accent-contrast: var(--indigo-contrast);
460
- --color-accent-surface: var(--indigo-surface);
461
- --color-accent-indicator: var(--indigo-indicator);
462
- --color-accent-track: var(--indigo-track);
463
+ --color-accent-1: var(--eblue-1);
464
+ --color-accent-2: var(--eblue-2);
465
+ --color-accent-3: var(--eblue-3);
466
+ --color-accent-4: var(--eblue-4);
467
+ --color-accent-5: var(--eblue-5);
468
+ --color-accent-6: var(--eblue-6);
469
+ --color-accent-7: var(--eblue-7);
470
+ --color-accent-8: var(--eblue-8);
471
+ --color-accent-9: var(--eblue-9);
472
+ --color-accent-10: var(--eblue-10);
473
+ --color-accent-11: var(--eblue-11);
474
+ --color-accent-12: var(--eblue-12);
475
+ --color-accent-a1: var(--eblue-a1);
476
+ --color-accent-a2: var(--eblue-a2);
477
+ --color-accent-a3: var(--eblue-a3);
478
+ --color-accent-a4: var(--eblue-a4);
479
+ --color-accent-a5: var(--eblue-a5);
480
+ --color-accent-a6: var(--eblue-a6);
481
+ --color-accent-a7: var(--eblue-a7);
482
+ --color-accent-a8: var(--eblue-a8);
483
+ --color-accent-a9: var(--eblue-a9);
484
+ --color-accent-a10: var(--eblue-a10);
485
+ --color-accent-a11: var(--eblue-a11);
486
+ --color-accent-a12: var(--eblue-a12);
487
+ --color-accent-contrast: var(--eblue-contrast);
488
+ --color-accent-surface: var(--eblue-surface);
489
+ --color-accent-indicator: var(--eblue-indicator);
490
+ --color-accent-track: var(--eblue-track);
463
491
  --color-gray-1: var(--mauve-1);
464
492
  --color-gray-2: var(--mauve-2);
465
493
  --color-gray-3: var(--mauve-3);
package/dist/styles/colors.css CHANGED
@@ -4,6 +4,34 @@
4
4
  .light,
5
5
  .light-theme,
6
6
  [data-theme="light"] {
7
+ --eblue-1: #fcfdfe;
8
+ --eblue-2: #f6fafe;
9
+ --eblue-3: #ebf3fd;
10
+ --eblue-4: #dcebfe;
11
+ --eblue-5: #cbe1fe;
12
+ --eblue-6: #b6d5fc;
13
+ --eblue-7: #9dc3f2;
14
+ --eblue-8: #7aabe7;
15
+ --eblue-9: #005eb4;
16
+ --eblue-10: #004fa3;
17
+ --eblue-11: #0f65bc;
18
+ --eblue-12: #113157;
19
+ --eblue-a1: #0055aa03;
20
+ --eblue-a2: #0072e309;
21
+ --eblue-a3: #0066e614;
22
+ --eblue-a4: #006ef823;
23
+ --eblue-a5: #006cfb34;
24
+ --eblue-a6: #006df549;
25
+ --eblue-a7: #0063de62;
26
+ --eblue-a8: #005ed185;
27
+ --eblue-a9: #005eb4;
28
+ --eblue-a10: #004fa3;
29
+ --eblue-a11: #005bb8f0;
30
+ --eblue-a12: #00224bee;
31
+ --eblue-contrast: #fff;
32
+ --eblue-surface: #f4f9fecc;
33
+ --eblue-indicator: #005eb4;
34
+ --eblue-track: #005eb4;
7
35
  --mauve-1: #fdfcfd;
8
36
  --mauve-2: #faf9fb;
9
37
  --mauve-3: #f2eff3;
@@ -424,34 +452,34 @@
424
452
  --orange-surface: #fff5e9cc;
425
453
  --orange-indicator: #f76b15;
426
454
  --orange-track: #f76b15;
427
- --accent-1: #fdfdfe;
428
- --accent-2: #f7f9ff;
429
- --accent-3: #edf2fe;
430
- --accent-4: #e1e9ff;
431
- --accent-5: #d2deff;
432
- --accent-6: #c1d0ff;
433
- --accent-7: #abbdf9;
434
- --accent-8: #8da4ef;
435
- --accent-9: #3e63dd;
436
- --accent-10: #3358d4;
437
- --accent-11: #3a5bc7;
438
- --accent-12: #1f2d5c;
439
- --accent-a1: #00008002;
440
- --accent-a2: #0040ff08;
441
- --accent-a3: #0047f112;
442
- --accent-a4: #0044ff1e;
443
- --accent-a5: #0044ff2d;
444
- --accent-a6: #003eff3e;
445
- --accent-a7: #0037ed54;
446
- --accent-a8: #0034dc72;
447
- --accent-a9: #0031d2c1;
448
- --accent-a10: #002ec9cc;
449
- --accent-a11: #002bb7c5;
450
- --accent-a12: #001046e0;
451
- --accent-contrast: #ffffff;
452
- --accent-surface: #f5f8ffcc;
453
- --accent-indicator: #3e63dd;
454
- --accent-track: #3e63dd;
455
+ --accent-1: #fcfdfe;
456
+ --accent-2: #f6fafe;
457
+ --accent-3: #ebf3fd;
458
+ --accent-4: #dcebfe;
459
+ --accent-5: #cbe1fe;
460
+ --accent-6: #b6d5fc;
461
+ --accent-7: #9dc3f2;
462
+ --accent-8: #7aabe7;
463
+ --accent-9: #005eb4;
464
+ --accent-10: #004fa3;
465
+ --accent-11: #0f65bc;
466
+ --accent-12: #113157;
467
+ --accent-a1: #0055aa03;
468
+ --accent-a2: #0072e309;
469
+ --accent-a3: #0066e614;
470
+ --accent-a4: #006ef823;
471
+ --accent-a5: #006cfb34;
472
+ --accent-a6: #006df549;
473
+ --accent-a7: #0063de62;
474
+ --accent-a8: #005ed185;
475
+ --accent-a9: #005eb4;
476
+ --accent-a10: #004fa3;
477
+ --accent-a11: #005bb8f0;
478
+ --accent-a12: #00224bee;
479
+ --accent-contrast: #fff;
480
+ --accent-surface: #f4f9fecc;
481
+ --accent-indicator: #005eb4;
482
+ --accent-track: #005eb4;
455
483
  --gray-1: #fdfcfd;
456
484
  --gray-2: #faf9fb;
457
485
  --gray-3: #f2eff3;
@@ -596,6 +624,41 @@
596
624
 
597
625
  @supports (color: color(display-p3 1 1 1)) {
598
626
  @media (color-gamut: p3) {
627
+ :root,
628
+ .light,
629
+ .light-theme,
630
+ [data-theme="light"] {
631
+ --eblue-1: oklch(99.4% 0.0013 254.2);
632
+ --eblue-2: oklch(98.3% 0.0072 254.2);
633
+ --eblue-3: oklch(96.1% 0.0155 254.2);
634
+ --eblue-4: oklch(93.5% 0.0304 254.2);
635
+ --eblue-5: oklch(90.3% 0.046 254.2);
636
+ --eblue-6: oklch(86.3% 0.0643 254.2);
637
+ --eblue-7: oklch(80.7% 0.0782 254.2);
638
+ --eblue-8: oklch(73% 0.102 254.2);
639
+ --eblue-9: oklch(48.6% 0.1556 254.2);
640
+ --eblue-10: oklch(43.5% 0.1556 254.2);
641
+ --eblue-11: oklch(51% 0.1556 254.2);
642
+ --eblue-12: oklch(31.3% 0.077 254.2);
643
+ }
644
+
645
+ .dark,
646
+ .dark-theme,
647
+ [data-theme="dark"] {
648
+ --eblue-1: oklch(17.8% 0.0326 254.2);
649
+ --eblue-2: oklch(20.9% 0.0382 254.2);
650
+ --eblue-3: oklch(27.2% 0.0872 254.2);
651
+ --eblue-4: oklch(31.7% 0.126 254.2);
652
+ --eblue-5: oklch(36.4% 0.1378 254.2);
653
+ --eblue-6: oklch(41.2% 0.144 254.2);
654
+ --eblue-7: oklch(46.8% 0.1556 254.2);
655
+ --eblue-8: oklch(53% 0.1789 254.2);
656
+ --eblue-9: oklch(48.6% 0.1556 254.2);
657
+ --eblue-10: oklch(43.5% 0.144 254.2);
658
+ --eblue-11: oklch(77.1% 0.1674 254.2);
659
+ --eblue-12: oklch(90.8% 0.0614 254.2);
660
+ }
661
+
599
662
  :root,
600
663
  .light,
601
664
  .light-theme,
@@ -1125,35 +1188,35 @@
1125
1188
  .light,
1126
1189
  .light-theme,
1127
1190
  [data-theme="light"] {
1128
- --accent-1: color(display-p3 0.992 0.992 0.996);
1129
- --accent-2: color(display-p3 0.971 0.977 0.998);
1130
- --accent-3: color(display-p3 0.933 0.948 0.992);
1131
- --accent-4: color(display-p3 0.885 0.914 1);
1132
- --accent-5: color(display-p3 0.831 0.87 1);
1133
- --accent-6: color(display-p3 0.767 0.814 0.995);
1134
- --accent-7: color(display-p3 0.685 0.74 0.957);
1135
- --accent-8: color(display-p3 0.569 0.639 0.916);
1136
- --accent-9: color(display-p3 0.276 0.384 0.837);
1137
- --accent-10: color(display-p3 0.234 0.343 0.801);
1138
- --accent-11: color(display-p3 0.256 0.354 0.755);
1139
- --accent-12: color(display-p3 0.133 0.175 0.348);
1191
+ --accent-1: oklch(99.4% 0.0013 254.2);
1192
+ --accent-2: oklch(98.3% 0.0072 254.2);
1193
+ --accent-3: oklch(96.1% 0.0155 254.2);
1194
+ --accent-4: oklch(93.5% 0.0304 254.2);
1195
+ --accent-5: oklch(90.3% 0.046 254.2);
1196
+ --accent-6: oklch(86.3% 0.0643 254.2);
1197
+ --accent-7: oklch(80.7% 0.0782 254.2);
1198
+ --accent-8: oklch(73% 0.102 254.2);
1199
+ --accent-9: oklch(48.6% 0.1556 254.2);
1200
+ --accent-10: oklch(43.5% 0.1556 254.2);
1201
+ --accent-11: oklch(51% 0.1556 254.2);
1202
+ --accent-12: oklch(31.3% 0.077 254.2);
1140
1203
  }
1141
1204
 
1142
1205
  .dark,
1143
1206
  .dark-theme,
1144
1207
  [data-theme="dark"] {
1145
- --accent-1: color(display-p3 0.068 0.074 0.118);
1146
- --accent-2: color(display-p3 0.081 0.089 0.144);
1147
- --accent-3: color(display-p3 0.105 0.141 0.275);
1148
- --accent-4: color(display-p3 0.129 0.18 0.369);
1149
- --accent-5: color(display-p3 0.163 0.22 0.439);
1150
- --accent-6: color(display-p3 0.203 0.262 0.5);
1151
- --accent-7: color(display-p3 0.245 0.309 0.575);
1152
- --accent-8: color(display-p3 0.285 0.362 0.674);
1153
- --accent-9: color(display-p3 0.276 0.384 0.837);
1154
- --accent-10: color(display-p3 0.354 0.445 0.866);
1155
- --accent-11: color(display-p3 0.63 0.69 1);
1156
- --accent-12: color(display-p3 0.848 0.881 0.99);
1208
+ --accent-1: oklch(17.8% 0.0326 254.2);
1209
+ --accent-2: oklch(20.9% 0.0382 254.2);
1210
+ --accent-3: oklch(27.2% 0.0872 254.2);
1211
+ --accent-4: oklch(31.7% 0.126 254.2);
1212
+ --accent-5: oklch(36.4% 0.1378 254.2);
1213
+ --accent-6: oklch(41.2% 0.144 254.2);
1214
+ --accent-7: oklch(46.8% 0.1556 254.2);
1215
+ --accent-8: oklch(53% 0.1789 254.2);
1216
+ --accent-9: oklch(48.6% 0.1556 254.2);
1217
+ --accent-10: oklch(43.5% 0.144 254.2);
1218
+ --accent-11: oklch(77.1% 0.1674 254.2);
1219
+ --accent-12: oklch(90.8% 0.0614 254.2);
1157
1220
  }
1158
1221
 
1159
1222
  :root,
@@ -1337,6 +1400,34 @@
1337
1400
  .dark,
1338
1401
  .dark-theme,
1339
1402
  [data-theme="dark"] {
1403
+ --eblue-1: #07121f;
1404
+ --eblue-2: #0b1929;
1405
+ --eblue-3: #002650;
1406
+ --eblue-4: #002f6f;
1407
+ --eblue-5: #003b83;
1408
+ --eblue-6: #004996;
1409
+ --eblue-7: #0058ae;
1410
+ --eblue-8: #0069cf;
1411
+ --eblue-9: #005eb4;
1412
+ --eblue-10: #00509d;
1413
+ --eblue-11: #71b8ff;
1414
+ --eblue-12: #c5e4ff;
1415
+ --eblue-a1: #0022ff0f;
1416
+ --eblue-a2: #0060fd1a;
1417
+ --eblue-a3: #0060fe44;
1418
+ --eblue-a4: #005dff65;
1419
+ --eblue-a5: #0068fd7b;
1420
+ --eblue-a6: #0075ff8f;
1421
+ --eblue-a7: #007cfea9;
1422
+ --eblue-a8: #007fffcc;
1423
+ --eblue-a9: #0082ffaf;
1424
+ --eblue-a10: #007cff96;
1425
+ --eblue-a11: #71b8ff;
1426
+ --eblue-a12: #c5e4ff;
1427
+ --eblue-contrast: #fff;
1428
+ --eblue-surface: #06214180;
1429
+ --eblue-indicator: #005eb4;
1430
+ --eblue-track: #005eb4;
1340
1431
  --mauve-1: #121113;
1341
1432
  --mauve-2: #1a191b;
1342
1433
  --mauve-3: #232225;
@@ -1757,34 +1848,34 @@
1757
1848
  --orange-surface: #271d1380;
1758
1849
  --orange-indicator: #f76b15;
1759
1850
  --orange-track: #f76b15;
1760
- --accent-1: #11131f;
1761
- --accent-2: #141726;
1762
- --accent-3: #182449;
1763
- --accent-4: #1d2e62;
1764
- --accent-5: #253974;
1765
- --accent-6: #304384;
1766
- --accent-7: #3a4f97;
1767
- --accent-8: #435db1;
1768
- --accent-9: #3e63dd;
1769
- --accent-10: #5472e4;
1770
- --accent-11: #9eb1ff;
1771
- --accent-12: #d6e1ff;
1772
- --accent-a1: #1133ff0f;
1773
- --accent-a2: #3354fa17;
1774
- --accent-a3: #2f62ff3c;
1775
- --accent-a4: #3566ff57;
1776
- --accent-a5: #4171fd6b;
1777
- --accent-a6: #5178fd7c;
1778
- --accent-a7: #5a7fff90;
1779
- --accent-a8: #5b81feac;
1780
- --accent-a9: #4671ffdb;
1781
- --accent-a10: #5c7efee3;
1782
- --accent-a11: #9eb1ff;
1783
- --accent-a12: #d6e1ff;
1784
- --accent-contrast: #ffffff;
1785
- --accent-surface: #171d3b80;
1786
- --accent-indicator: #3e63dd;
1787
- --accent-track: #3e63dd;
1851
+ --accent-1: #07121f;
1852
+ --accent-2: #0b1929;
1853
+ --accent-3: #002650;
1854
+ --accent-4: #002f6f;
1855
+ --accent-5: #003b83;
1856
+ --accent-6: #004996;
1857
+ --accent-7: #0058ae;
1858
+ --accent-8: #0069cf;
1859
+ --accent-9: #005eb4;
1860
+ --accent-10: #00509d;
1861
+ --accent-11: #71b8ff;
1862
+ --accent-12: #c5e4ff;
1863
+ --accent-a1: #0022ff0f;
1864
+ --accent-a2: #0060fd1a;
1865
+ --accent-a3: #0060fe44;
1866
+ --accent-a4: #005dff65;
1867
+ --accent-a5: #0068fd7b;
1868
+ --accent-a6: #0075ff8f;
1869
+ --accent-a7: #007cfea9;
1870
+ --accent-a8: #007fffcc;
1871
+ --accent-a9: #0082ffaf;
1872
+ --accent-a10: #007cff96;
1873
+ --accent-a11: #71b8ff;
1874
+ --accent-a12: #c5e4ff;
1875
+ --accent-contrast: #fff;
1876
+ --accent-surface: #06214180;
1877
+ --accent-indicator: #005eb4;
1878
+ --accent-track: #005eb4;
1788
1879
  --gray-1: #121113;
1789
1880
  --gray-2: #1a191b;
1790
1881
  --gray-3: #232225;