elements-kit 0.5.2 → 0.6.0

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 (16) hide show
  1. package/README.md +0 -6
  2. package/dist/ui/badge/badge.css +1 -1
  3. package/dist/ui/button/button.css +30 -30
  4. package/dist/ui/marketing/marketing.css +392 -0
  5. package/dist/ui/styles/base/mauve.css +28 -28
  6. package/dist/ui/styles/base/olive.css +28 -28
  7. package/dist/ui/styles/base/sage.css +28 -28
  8. package/dist/ui/styles/base/sand.css +28 -28
  9. package/dist/ui/styles/base/slate.css +28 -28
  10. package/dist/ui/styles/colors/base.css +28 -28
  11. package/dist/ui/styles/material.css +2 -2
  12. package/dist/ui/styles/palette/base.css +158 -0
  13. package/dist/ui/styles/shadow.css +42 -42
  14. package/dist/ui/styles/theme.css +162 -3
  15. package/package.json +3 -3
  16. package/dist/ui/styles/colors/gray.css +0 -30
package/dist/ui/styles/base/sage.css CHANGED
@@ -1,30 +1,30 @@
1
1
  [data-gray-color="sage"] {
2
- --gray-1: var(--sage-1);
3
- --gray-2: var(--sage-2);
4
- --gray-3: var(--sage-3);
5
- --gray-4: var(--sage-4);
6
- --gray-5: var(--sage-5);
7
- --gray-6: var(--sage-6);
8
- --gray-7: var(--sage-7);
9
- --gray-8: var(--sage-8);
10
- --gray-9: var(--sage-9);
11
- --gray-10: var(--sage-10);
12
- --gray-11: var(--sage-11);
13
- --gray-12: var(--sage-12);
14
- --gray-a1: var(--sage-a1);
15
- --gray-a2: var(--sage-a2);
16
- --gray-a3: var(--sage-a3);
17
- --gray-a4: var(--sage-a4);
18
- --gray-a5: var(--sage-a5);
19
- --gray-a6: var(--sage-a6);
20
- --gray-a7: var(--sage-a7);
21
- --gray-a8: var(--sage-a8);
22
- --gray-a9: var(--sage-a9);
23
- --gray-a10: var(--sage-a10);
24
- --gray-a11: var(--sage-a11);
25
- --gray-a12: var(--sage-a12);
26
- --gray-contrast: var(--sage-contrast);
27
- --gray-surface: var(--sage-surface);
28
- --gray-indicator: var(--sage-indicator);
29
- --gray-track: var(--sage-track);
2
+ --base-color-1: var(--sage-1);
3
+ --base-color-2: var(--sage-2);
4
+ --base-color-3: var(--sage-3);
5
+ --base-color-4: var(--sage-4);
6
+ --base-color-5: var(--sage-5);
7
+ --base-color-6: var(--sage-6);
8
+ --base-color-7: var(--sage-7);
9
+ --base-color-8: var(--sage-8);
10
+ --base-color-9: var(--sage-9);
11
+ --base-color-10: var(--sage-10);
12
+ --base-color-11: var(--sage-11);
13
+ --base-color-12: var(--sage-12);
14
+ --base-color-a1: var(--sage-a1);
15
+ --base-color-a2: var(--sage-a2);
16
+ --base-color-a3: var(--sage-a3);
17
+ --base-color-a4: var(--sage-a4);
18
+ --base-color-a5: var(--sage-a5);
19
+ --base-color-a6: var(--sage-a6);
20
+ --base-color-a7: var(--sage-a7);
21
+ --base-color-a8: var(--sage-a8);
22
+ --base-color-a9: var(--sage-a9);
23
+ --base-color-a10: var(--sage-a10);
24
+ --base-color-a11: var(--sage-a11);
25
+ --base-color-a12: var(--sage-a12);
26
+ --base-color-contrast: var(--sage-contrast);
27
+ --base-color-surface: var(--sage-surface);
28
+ --base-color-indicator: var(--sage-indicator);
29
+ --base-color-track: var(--sage-track);
30
30
  }
package/dist/ui/styles/base/sand.css CHANGED
@@ -1,30 +1,30 @@
1
1
  [data-gray-color="sand"] {
2
- --gray-1: var(--sand-1);
3
- --gray-2: var(--sand-2);
4
- --gray-3: var(--sand-3);
5
- --gray-4: var(--sand-4);
6
- --gray-5: var(--sand-5);
7
- --gray-6: var(--sand-6);
8
- --gray-7: var(--sand-7);
9
- --gray-8: var(--sand-8);
10
- --gray-9: var(--sand-9);
11
- --gray-10: var(--sand-10);
12
- --gray-11: var(--sand-11);
13
- --gray-12: var(--sand-12);
14
- --gray-a1: var(--sand-a1);
15
- --gray-a2: var(--sand-a2);
16
- --gray-a3: var(--sand-a3);
17
- --gray-a4: var(--sand-a4);
18
- --gray-a5: var(--sand-a5);
19
- --gray-a6: var(--sand-a6);
20
- --gray-a7: var(--sand-a7);
21
- --gray-a8: var(--sand-a8);
22
- --gray-a9: var(--sand-a9);
23
- --gray-a10: var(--sand-a10);
24
- --gray-a11: var(--sand-a11);
25
- --gray-a12: var(--sand-a12);
26
- --gray-contrast: var(--sand-contrast);
27
- --gray-surface: var(--sand-surface);
28
- --gray-indicator: var(--sand-indicator);
29
- --gray-track: var(--sand-track);
2
+ --base-color-1: var(--sand-1);
3
+ --base-color-2: var(--sand-2);
4
+ --base-color-3: var(--sand-3);
5
+ --base-color-4: var(--sand-4);
6
+ --base-color-5: var(--sand-5);
7
+ --base-color-6: var(--sand-6);
8
+ --base-color-7: var(--sand-7);
9
+ --base-color-8: var(--sand-8);
10
+ --base-color-9: var(--sand-9);
11
+ --base-color-10: var(--sand-10);
12
+ --base-color-11: var(--sand-11);
13
+ --base-color-12: var(--sand-12);
14
+ --base-color-a1: var(--sand-a1);
15
+ --base-color-a2: var(--sand-a2);
16
+ --base-color-a3: var(--sand-a3);
17
+ --base-color-a4: var(--sand-a4);
18
+ --base-color-a5: var(--sand-a5);
19
+ --base-color-a6: var(--sand-a6);
20
+ --base-color-a7: var(--sand-a7);
21
+ --base-color-a8: var(--sand-a8);
22
+ --base-color-a9: var(--sand-a9);
23
+ --base-color-a10: var(--sand-a10);
24
+ --base-color-a11: var(--sand-a11);
25
+ --base-color-a12: var(--sand-a12);
26
+ --base-color-contrast: var(--sand-contrast);
27
+ --base-color-surface: var(--sand-surface);
28
+ --base-color-indicator: var(--sand-indicator);
29
+ --base-color-track: var(--sand-track);
30
30
  }
package/dist/ui/styles/base/slate.css CHANGED
@@ -1,30 +1,30 @@
1
1
  [data-gray-color="slate"] {
2
- --gray-1: var(--slate-1);
3
- --gray-2: var(--slate-2);
4
- --gray-3: var(--slate-3);
5
- --gray-4: var(--slate-4);
6
- --gray-5: var(--slate-5);
7
- --gray-6: var(--slate-6);
8
- --gray-7: var(--slate-7);
9
- --gray-8: var(--slate-8);
10
- --gray-9: var(--slate-9);
11
- --gray-10: var(--slate-10);
12
- --gray-11: var(--slate-11);
13
- --gray-12: var(--slate-12);
14
- --gray-a1: var(--slate-a1);
15
- --gray-a2: var(--slate-a2);
16
- --gray-a3: var(--slate-a3);
17
- --gray-a4: var(--slate-a4);
18
- --gray-a5: var(--slate-a5);
19
- --gray-a6: var(--slate-a6);
20
- --gray-a7: var(--slate-a7);
21
- --gray-a8: var(--slate-a8);
22
- --gray-a9: var(--slate-a9);
23
- --gray-a10: var(--slate-a10);
24
- --gray-a11: var(--slate-a11);
25
- --gray-a12: var(--slate-a12);
26
- --gray-contrast: var(--slate-contrast);
27
- --gray-surface: var(--slate-surface);
28
- --gray-indicator: var(--slate-indicator);
29
- --gray-track: var(--slate-track);
2
+ --base-color-1: var(--slate-1);
3
+ --base-color-2: var(--slate-2);
4
+ --base-color-3: var(--slate-3);
5
+ --base-color-4: var(--slate-4);
6
+ --base-color-5: var(--slate-5);
7
+ --base-color-6: var(--slate-6);
8
+ --base-color-7: var(--slate-7);
9
+ --base-color-8: var(--slate-8);
10
+ --base-color-9: var(--slate-9);
11
+ --base-color-10: var(--slate-10);
12
+ --base-color-11: var(--slate-11);
13
+ --base-color-12: var(--slate-12);
14
+ --base-color-a1: var(--slate-a1);
15
+ --base-color-a2: var(--slate-a2);
16
+ --base-color-a3: var(--slate-a3);
17
+ --base-color-a4: var(--slate-a4);
18
+ --base-color-a5: var(--slate-a5);
19
+ --base-color-a6: var(--slate-a6);
20
+ --base-color-a7: var(--slate-a7);
21
+ --base-color-a8: var(--slate-a8);
22
+ --base-color-a9: var(--slate-a9);
23
+ --base-color-a10: var(--slate-a10);
24
+ --base-color-a11: var(--slate-a11);
25
+ --base-color-a12: var(--slate-a12);
26
+ --base-color-contrast: var(--slate-contrast);
27
+ --base-color-surface: var(--slate-surface);
28
+ --base-color-indicator: var(--slate-indicator);
29
+ --base-color-track: var(--slate-track);
30
30
  }
package/dist/ui/styles/colors/base.css CHANGED
@@ -1,30 +1,30 @@
1
1
  [data-color="base"] {
2
- --color-1: var(--gray-1);
3
- --color-2: var(--gray-2);
4
- --color-3: var(--gray-3);
5
- --color-4: var(--gray-4);
6
- --color-5: var(--gray-5);
7
- --color-6: var(--gray-6);
8
- --color-7: var(--gray-7);
9
- --color-8: var(--gray-8);
10
- --color-9: var(--gray-9);
11
- --color-10: var(--gray-10);
12
- --color-11: var(--gray-11);
13
- --color-12: var(--gray-12);
14
- --color-a1: var(--gray-a1);
15
- --color-a2: var(--gray-a2);
16
- --color-a3: var(--gray-a3);
17
- --color-a4: var(--gray-a4);
18
- --color-a5: var(--gray-a5);
19
- --color-a6: var(--gray-a6);
20
- --color-a7: var(--gray-a7);
21
- --color-a8: var(--gray-a8);
22
- --color-a9: var(--gray-a9);
23
- --color-a10: var(--gray-a10);
24
- --color-a11: var(--gray-a11);
25
- --color-a12: var(--gray-a12);
26
- --accent-contrast: var(--gray-contrast);
27
- --accent-surface: var(--gray-surface);
28
- --accent-indicator: var(--gray-indicator);
29
- --accent-track: var(--gray-track);
2
+ --color-1: var(--base-color-1);
3
+ --color-2: var(--base-color-2);
4
+ --color-3: var(--base-color-3);
5
+ --color-4: var(--base-color-4);
6
+ --color-5: var(--base-color-5);
7
+ --color-6: var(--base-color-6);
8
+ --color-7: var(--base-color-7);
9
+ --color-8: var(--base-color-8);
10
+ --color-9: var(--base-color-9);
11
+ --color-10: var(--base-color-10);
12
+ --color-11: var(--base-color-11);
13
+ --color-12: var(--base-color-12);
14
+ --color-a1: var(--base-color-a1);
15
+ --color-a2: var(--base-color-a2);
16
+ --color-a3: var(--base-color-a3);
17
+ --color-a4: var(--base-color-a4);
18
+ --color-a5: var(--base-color-a5);
19
+ --color-a6: var(--base-color-a6);
20
+ --color-a7: var(--base-color-a7);
21
+ --color-a8: var(--base-color-a8);
22
+ --color-a9: var(--base-color-a9);
23
+ --color-a10: var(--base-color-a10);
24
+ --color-a11: var(--base-color-a11);
25
+ --color-a12: var(--base-color-a12);
26
+ --accent-contrast: var(--base-color-contrast);
27
+ --accent-surface: var(--base-color-surface);
28
+ --accent-indicator: var(--base-color-indicator);
29
+ --accent-track: var(--base-color-track);
30
30
  }
package/dist/ui/styles/material.css CHANGED
@@ -4,8 +4,8 @@
4
4
  }
5
5
 
6
6
  :is(.dark, .dark-theme) {
7
- --color-material-solid: var(--gray-2);
8
- --color-material-translucent: var(--gray-a2);
7
+ --color-material-solid: var(--base-color-2);
8
+ --color-material-translucent: var(--base-color-a2);
9
9
  }
10
10
 
11
11
  :where([data-material-background="solid"]) {
package/dist/ui/styles/palette/base.css ADDED
@@ -0,0 +1,158 @@
1
+ :root, .light, .light-theme {
2
+ --gray-1: #fcfcfc;
3
+ --gray-2: #f9f9f9;
4
+ --gray-3: #f0f0f0;
5
+ --gray-4: #e8e8e8;
6
+ --gray-5: #e0e0e0;
7
+ --gray-6: #d9d9d9;
8
+ --gray-7: #cecece;
9
+ --gray-8: #bbb;
10
+ --gray-9: #8d8d8d;
11
+ --gray-10: #838383;
12
+ --gray-11: #646464;
13
+ --gray-12: #202020;
14
+ --gray-a1: #00000003;
15
+ --gray-a2: #00000006;
16
+ --gray-a3: #0000000f;
17
+ --gray-a4: #00000017;
18
+ --gray-a5: #0000001f;
19
+ --gray-a6: #00000026;
20
+ --gray-a7: #00000031;
21
+ --gray-a8: #0004;
22
+ --gray-a9: #00000072;
23
+ --gray-a10: #0000007c;
24
+ --gray-a11: #0000009b;
25
+ --gray-a12: #000000df;
26
+ --gray-surface: #fffc;
27
+ --gray-indicator: var(--gray-9);
28
+ --gray-track: var(--gray-9);
29
+ }
30
+
31
+ @supports (color: color(display-p3 1 1 1)) {
32
+ @media (color-gamut: p3) {
33
+ :root, .light, .light-theme {
34
+ --gray-1: color(display-p3 .988 .988 .988);
35
+ --gray-2: color(display-p3 .975 .975 .975);
36
+ --gray-3: color(display-p3 .939 .939 .939);
37
+ --gray-4: color(display-p3 .908 .908 .908);
38
+ --gray-5: color(display-p3 .88 .88 .88);
39
+ --gray-6: color(display-p3 .849 .849 .849);
40
+ --gray-7: color(display-p3 .807 .807 .807);
41
+ --gray-8: color(display-p3 .732 .732 .732);
42
+ --gray-9: color(display-p3 .553 .553 .553);
43
+ --gray-10: color(display-p3 .512 .512 .512);
44
+ --gray-11: color(display-p3 .392 .392 .392);
45
+ --gray-12: color(display-p3 .125 .125 .125);
46
+ --gray-a1: color(display-p3 0 0 0 / .012);
47
+ --gray-a2: color(display-p3 0 0 0 / .024);
48
+ --gray-a3: color(display-p3 0 0 0 / .063);
49
+ --gray-a4: color(display-p3 0 0 0 / .09);
50
+ --gray-a5: color(display-p3 0 0 0 / .122);
51
+ --gray-a6: color(display-p3 0 0 0 / .153);
52
+ --gray-a7: color(display-p3 0 0 0 / .192);
53
+ --gray-a8: color(display-p3 0 0 0 / .267);
54
+ --gray-a9: color(display-p3 0 0 0 / .447);
55
+ --gray-a10: color(display-p3 0 0 0 / .486);
56
+ --gray-a11: color(display-p3 0 0 0 / .608);
57
+ --gray-a12: color(display-p3 0 0 0 / .875);
58
+ --gray-surface: color(display-p3 1 1 1 / .8);
59
+ }
60
+ }
61
+ }
62
+
63
+ .dark, .dark-theme {
64
+ --gray-1: #111;
65
+ --gray-2: #191919;
66
+ --gray-3: #222;
67
+ --gray-4: #2a2a2a;
68
+ --gray-5: #313131;
69
+ --gray-6: #3a3a3a;
70
+ --gray-7: #484848;
71
+ --gray-8: #606060;
72
+ --gray-9: #6e6e6e;
73
+ --gray-10: #7b7b7b;
74
+ --gray-11: #b4b4b4;
75
+ --gray-12: #eee;
76
+ --gray-a1: #0000;
77
+ --gray-a2: #ffffff09;
78
+ --gray-a3: #ffffff12;
79
+ --gray-a4: #ffffff1b;
80
+ --gray-a5: #fff2;
81
+ --gray-a6: #ffffff2c;
82
+ --gray-a7: #ffffff3b;
83
+ --gray-a8: #fff5;
84
+ --gray-a9: #ffffff64;
85
+ --gray-a10: #ffffff72;
86
+ --gray-a11: #ffffffaf;
87
+ --gray-a12: #ffffffed;
88
+ --gray-surface: #21212180;
89
+ --gray-indicator: var(--gray-9);
90
+ --gray-track: var(--gray-9);
91
+ }
92
+
93
+ @supports (color: color(display-p3 1 1 1)) {
94
+ @media (color-gamut: p3) {
95
+ .dark, .dark-theme {
96
+ --gray-1: color(display-p3 .067 .067 .067);
97
+ --gray-2: color(display-p3 .098 .098 .098);
98
+ --gray-3: color(display-p3 .135 .135 .135);
99
+ --gray-4: color(display-p3 .163 .163 .163);
100
+ --gray-5: color(display-p3 .192 .192 .192);
101
+ --gray-6: color(display-p3 .228 .228 .228);
102
+ --gray-7: color(display-p3 .283 .283 .283);
103
+ --gray-8: color(display-p3 .375 .375 .375);
104
+ --gray-9: color(display-p3 .431 .431 .431);
105
+ --gray-10: color(display-p3 .484 .484 .484);
106
+ --gray-11: color(display-p3 .706 .706 .706);
107
+ --gray-12: color(display-p3 .933 .933 .933);
108
+ --gray-a1: color(display-p3 0 0 0 / 0);
109
+ --gray-a2: color(display-p3 1 1 1 / .034);
110
+ --gray-a3: color(display-p3 1 1 1 / .071);
111
+ --gray-a4: color(display-p3 1 1 1 / .105);
112
+ --gray-a5: color(display-p3 1 1 1 / .134);
113
+ --gray-a6: color(display-p3 1 1 1 / .172);
114
+ --gray-a7: color(display-p3 1 1 1 / .231);
115
+ --gray-a8: color(display-p3 1 1 1 / .332);
116
+ --gray-a9: color(display-p3 1 1 1 / .391);
117
+ --gray-a10: color(display-p3 1 1 1 / .445);
118
+ --gray-a11: color(display-p3 1 1 1 / .685);
119
+ --gray-a12: color(display-p3 1 1 1 / .929);
120
+ --gray-surface: color(display-p3 .1255 .1255 .1255 / .5);
121
+ }
122
+ }
123
+ }
124
+
125
+ :root {
126
+ --gray-contrast: white;
127
+ }
128
+
129
+ :root, .light, .light-theme, .dark, .dark-theme {
130
+ --base-color-1: var(--gray-1);
131
+ --base-color-2: var(--gray-2);
132
+ --base-color-3: var(--gray-3);
133
+ --base-color-4: var(--gray-4);
134
+ --base-color-5: var(--gray-5);
135
+ --base-color-6: var(--gray-6);
136
+ --base-color-7: var(--gray-7);
137
+ --base-color-8: var(--gray-8);
138
+ --base-color-9: var(--gray-9);
139
+ --base-color-10: var(--gray-10);
140
+ --base-color-11: var(--gray-11);
141
+ --base-color-12: var(--gray-12);
142
+ --base-color-a1: var(--gray-a1);
143
+ --base-color-a2: var(--gray-a2);
144
+ --base-color-a3: var(--gray-a3);
145
+ --base-color-a4: var(--gray-a4);
146
+ --base-color-a5: var(--gray-a5);
147
+ --base-color-a6: var(--gray-a6);
148
+ --base-color-a7: var(--gray-a7);
149
+ --base-color-a8: var(--gray-a8);
150
+ --base-color-a9: var(--gray-a9);
151
+ --base-color-a10: var(--gray-a10);
152
+ --base-color-a11: var(--gray-a11);
153
+ --base-color-a12: var(--gray-a12);
154
+ --base-color-surface: var(--gray-surface);
155
+ --base-color-indicator: var(--gray-indicator);
156
+ --base-color-track: var(--gray-track);
157
+ --base-color-contrast: var(--gray-contrast);
158
+ }
package/dist/ui/styles/shadow.css CHANGED
@@ -1,76 +1,76 @@
1
1
  :where(:root) {
2
- --shadow-1: inset 0 0 0 1px var(--gray-a5),
3
- inset 0 1.5px 2px 0 var(--gray-a2),
2
+ --shadow-1: inset 0 0 0 1px var(--base-color-a5),
3
+ inset 0 1.5px 2px 0 var(--base-color-a2),
4
4
  inset 0 1.5px 2px 0 var(--black-a2);
5
- --shadow-2: 0 0 0 1px var(--gray-a3),
5
+ --shadow-2: 0 0 0 1px var(--base-color-a3),
6
6
  0 0 0 .5px var(--black-a1),
7
- 0 1px 1px 0 var(--gray-a2),
7
+ 0 1px 1px 0 var(--base-color-a2),
8
8
  0 2px 1px -1px var(--black-a1),
9
9
  0 1px 3px 0 var(--black-a1);
10
- --shadow-3: 0 0 0 1px var(--gray-a3),
11
- 0 2px 3px -2px var(--gray-a3),
10
+ --shadow-3: 0 0 0 1px var(--base-color-a3),
11
+ 0 2px 3px -2px var(--base-color-a3),
12
12
  0 3px 12px -4px var(--black-a2),
13
13
  0 4px 16px -8px var(--black-a2);
14
- --shadow-4: 0 0 0 1px var(--gray-a3),
14
+ --shadow-4: 0 0 0 1px var(--base-color-a3),
15
15
  0 8px 40px var(--black-a1),
16
- 0 12px 32px -16px var(--gray-a3);
17
- --shadow-5: 0 0 0 1px var(--gray-a3),
16
+ 0 12px 32px -16px var(--base-color-a3);
17
+ --shadow-5: 0 0 0 1px var(--base-color-a3),
18
18
  0 12px 60px var(--black-a3),
19
- 0 12px 32px -16px var(--gray-a5);
20
- --shadow-6: 0 0 0 1px var(--gray-a3),
19
+ 0 12px 32px -16px var(--base-color-a5);
20
+ --shadow-6: 0 0 0 1px var(--base-color-a3),
21
21
  0 12px 60px var(--black-a3),
22
- 0 16px 64px var(--gray-a2),
23
- 0 16px 36px -20px var(--gray-a7);
22
+ 0 16px 64px var(--base-color-a2),
23
+ 0 16px 36px -20px var(--base-color-a7);
24
24
  }
25
25
 
26
26
  @supports (color: color-mix(in oklab, white, black)) {
27
27
  :where(:root) {
28
- --shadow-1: inset 0 0 0 1px var(--gray-a5),
29
- inset 0 1.5px 2px 0 var(--gray-a2),
28
+ --shadow-1: inset 0 0 0 1px var(--base-color-a5),
29
+ inset 0 1.5px 2px 0 var(--base-color-a2),
30
30
  inset 0 1.5px 2px 0 var(--black-a2);
31
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
31
+ --shadow-2: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
32
32
  0 0 0 .5px var(--black-a1),
33
- 0 1px 1px 0 var(--gray-a2),
33
+ 0 1px 1px 0 var(--base-color-a2),
34
34
  0 2px 1px -1px var(--black-a1),
35
35
  0 1px 3px 0 var(--black-a1);
36
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
37
- 0 2px 3px -2px var(--gray-a3),
36
+ --shadow-3: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
37
+ 0 2px 3px -2px var(--base-color-a3),
38
38
  0 3px 12px -4px var(--black-a2),
39
39
  0 4px 16px -8px var(--black-a2);
40
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
40
+ --shadow-4: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
41
41
  0 8px 40px var(--black-a1),
42
- 0 12px 32px -16px var(--gray-a3);
43
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
42
+ 0 12px 32px -16px var(--base-color-a3);
43
+ --shadow-5: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
44
44
  0 12px 60px var(--black-a3),
45
- 0 12px 32px -16px var(--gray-a5);
46
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a3), var(--gray-3) 25%),
45
+ 0 12px 32px -16px var(--base-color-a5);
46
+ --shadow-6: 0 0 0 1px color-mix(in oklab, var(--base-color-a3), var(--base-color-3) 25%),
47
47
  0 12px 60px var(--black-a3),
48
- 0 16px 64px var(--gray-a2),
49
- 0 16px 36px -20px var(--gray-a7);
48
+ 0 16px 64px var(--base-color-a2),
49
+ 0 16px 36px -20px var(--base-color-a7);
50
50
  }
51
51
  }
52
52
 
53
53
  :is(.dark, .dark-theme) {
54
- --shadow-1: inset 0 -1px 1px 0 var(--gray-a3),
55
- inset 0 0 0 1px var(--gray-a3),
54
+ --shadow-1: inset 0 -1px 1px 0 var(--base-color-a3),
55
+ inset 0 0 0 1px var(--base-color-a3),
56
56
  inset 0 3px 4px 0 var(--black-a5),
57
- inset 0 0 0 1px var(--gray-a4);
58
- --shadow-2: 0 0 0 1px var(--gray-a6),
57
+ inset 0 0 0 1px var(--base-color-a4);
58
+ --shadow-2: 0 0 0 1px var(--base-color-a6),
59
59
  0 0 0 .5px var(--black-a3),
60
60
  0 1px 1px 0 var(--black-a6),
61
61
  0 2px 1px -1px var(--black-a6),
62
62
  0 1px 3px 0 var(--black-a5);
63
- --shadow-3: 0 0 0 1px var(--gray-a6),
63
+ --shadow-3: 0 0 0 1px var(--base-color-a6),
64
64
  0 2px 3px -2px var(--black-a3),
65
65
  0 3px 8px -2px var(--black-a6),
66
66
  0 4px 12px -4px var(--black-a7);
67
- --shadow-4: 0 0 0 1px var(--gray-a6),
67
+ --shadow-4: 0 0 0 1px var(--base-color-a6),
68
68
  0 8px 40px var(--black-a3),
69
69
  0 12px 32px -16px var(--black-a5);
70
- --shadow-5: 0 0 0 1px var(--gray-a6),
70
+ --shadow-5: 0 0 0 1px var(--base-color-a6),
71
71
  0 12px 60px var(--black-a5),
72
72
  0 12px 32px -16px var(--black-a7);
73
- --shadow-6: 0 0 0 1px var(--gray-a6),
73
+ --shadow-6: 0 0 0 1px var(--base-color-a6),
74
74
  0 12px 60px var(--black-a4),
75
75
  0 16px 64px var(--black-a6),
76
76
  0 16px 36px -20px var(--black-a11);
@@ -78,26 +78,26 @@
78
78
 
79
79
  @supports (color: color-mix(in oklab, white, black)) {
80
80
  :is(.dark, .dark-theme) {
81
- --shadow-1: inset 0 -1px 1px 0 var(--gray-a3),
82
- inset 0 0 0 1px var(--gray-a3),
81
+ --shadow-1: inset 0 -1px 1px 0 var(--base-color-a3),
82
+ inset 0 0 0 1px var(--base-color-a3),
83
83
  inset 0 3px 4px 0 var(--black-a5),
84
- inset 0 0 0 1px var(--gray-a4);
85
- --shadow-2: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
84
+ inset 0 0 0 1px var(--base-color-a4);
85
+ --shadow-2: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
86
86
  0 0 0 .5px var(--black-a3),
87
87
  0 1px 1px 0 var(--black-a6),
88
88
  0 2px 1px -1px var(--black-a6),
89
89
  0 1px 3px 0 var(--black-a5);
90
- --shadow-3: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
90
+ --shadow-3: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
91
91
  0 2px 3px -2px var(--black-a3),
92
92
  0 3px 8px -2px var(--black-a6),
93
93
  0 4px 12px -4px var(--black-a7);
94
- --shadow-4: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
94
+ --shadow-4: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
95
95
  0 8px 40px var(--black-a3),
96
96
  0 12px 32px -16px var(--black-a5);
97
- --shadow-5: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
97
+ --shadow-5: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
98
98
  0 12px 60px var(--black-a5),
99
99
  0 12px 32px -16px var(--black-a7);
100
- --shadow-6: 0 0 0 1px color-mix(in oklab, var(--gray-a6), var(--gray-6) 25%),
100
+ --shadow-6: 0 0 0 1px color-mix(in oklab, var(--base-color-a6), var(--base-color-6) 25%),
101
101
  0 12px 60px var(--black-a4),
102
102
  0 16px 64px var(--black-a6),
103
103
  0 16px 36px -20px var(--black-a11);