@nattstack/ui 0.1.2 → 0.1.3

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 (80) hide show
  1. package/README.md +1 -1
  2. package/dist/baseline/index.css +4 -9
  3. package/dist/colors/accent/amber.css +61 -0
  4. package/dist/colors/accent/blue.css +64 -0
  5. package/dist/colors/accent/bronze.css +67 -0
  6. package/dist/colors/accent/brown.css +67 -0
  7. package/dist/colors/accent/crimson.css +67 -0
  8. package/dist/colors/accent/cyan.css +67 -0
  9. package/dist/colors/accent/gold.css +67 -0
  10. package/dist/colors/accent/grass.css +67 -0
  11. package/dist/colors/accent/green.css +67 -0
  12. package/dist/colors/accent/index.css +25 -0
  13. package/dist/colors/accent/indigo.css +67 -0
  14. package/dist/colors/accent/iris.css +67 -0
  15. package/dist/colors/accent/jade.css +67 -0
  16. package/dist/colors/accent/lime.css +67 -0
  17. package/dist/colors/accent/mint.css +67 -0
  18. package/dist/colors/accent/orange.css +58 -0
  19. package/dist/colors/accent/pink.css +67 -0
  20. package/dist/colors/accent/plum.css +67 -0
  21. package/dist/colors/accent/purple.css +67 -0
  22. package/dist/colors/accent/red.css +67 -0
  23. package/dist/colors/accent/ruby.css +67 -0
  24. package/dist/colors/accent/sky.css +67 -0
  25. package/dist/colors/accent/teal.css +67 -0
  26. package/dist/colors/accent/tomato.css +67 -0
  27. package/dist/colors/accent/violet.css +67 -0
  28. package/dist/colors/accent/yellow.css +61 -0
  29. package/dist/colors/color-scheme.css +7 -0
  30. package/dist/colors/index.css +4 -5
  31. package/dist/colors/neutral/gray.css +67 -0
  32. package/dist/colors/neutral/index.css +6 -0
  33. package/dist/colors/neutral/mauve.css +67 -0
  34. package/dist/colors/neutral/olive.css +67 -0
  35. package/dist/colors/neutral/sage.css +67 -0
  36. package/dist/colors/neutral/sand.css +67 -0
  37. package/dist/colors/neutral/slate.css +67 -0
  38. package/dist/colors/semantic/index.css +2 -0
  39. package/dist/colors/semantic/neutral-on-accent.css +11 -0
  40. package/dist/colors/semantic/semantic.css +26 -0
  41. package/dist/components/button/button.d.ts +1 -1
  42. package/dist/components/button/button.stylex.js +12 -6
  43. package/dist/components/checkbox/checkbox.stylex.js +4 -4
  44. package/dist/components/colors/palette.d.ts +74 -0
  45. package/dist/components/colors/palette.js +74 -0
  46. package/dist/components/combobox/combobox-input.stylex.js +4 -4
  47. package/dist/components/combobox/combobox-search.stylex.js +2 -2
  48. package/dist/components/combobox/combobox-value.stylex.js +1 -1
  49. package/dist/components/dialog-responsive/dialog-responsive-backdrop.stylex.js +1 -1
  50. package/dist/components/dialog-responsive/dialog-responsive-bar.stylex.js +1 -1
  51. package/dist/components/dialog-responsive/dialog-responsive-popup.stylex.js +2 -2
  52. package/dist/components/index.d.ts +2 -1
  53. package/dist/components/index.js +2 -1
  54. package/dist/components/input/input.stylex.js +2 -2
  55. package/dist/components/menu/menu-submenu-trigger.stylex.js +1 -1
  56. package/dist/components/otp-field/otp-field-input.stylex.js +2 -2
  57. package/dist/components/picker/picker-item.stylex.js +2 -2
  58. package/dist/components/picker/picker-popup.stylex.js +1 -1
  59. package/dist/components/picker/picker-trigger.stylex.js +3 -3
  60. package/dist/components/select/select-value.stylex.js +1 -1
  61. package/dist/components/stylex.css +94 -86
  62. package/dist/components/switch/switch.stylex.js +2 -2
  63. package/dist/components/tabs/tabs-panel.stylex.js +1 -1
  64. package/dist/components/tabs-pill/tabs-pill-indicator.stylex.js +1 -1
  65. package/dist/components/tabs-pill/tabs-pill-tab.stylex.js +4 -4
  66. package/dist/components/tabs-segmented/tabs-segmented-indicator.stylex.js +1 -1
  67. package/dist/components/tabs-segmented/tabs-segmented-list.stylex.js +1 -1
  68. package/dist/components/tabs-segmented/tabs-segmented-tab.stylex.js +2 -2
  69. package/dist/components/tabs-underline/tabs-underline-indicator.stylex.js +1 -1
  70. package/dist/components/tabs-underline/tabs-underline-list.stylex.js +1 -1
  71. package/dist/components/tabs-underline/tabs-underline-tab.stylex.js +2 -2
  72. package/dist/components/toggle-group/toggle-group-item.stylex.js +2 -2
  73. package/dist/components/tooltip/tooltip-popup.stylex.js +2 -2
  74. package/dist/tailwind-colors/color.css +48 -83
  75. package/dist/tailwind-colors/root.css +1 -26
  76. package/package.json +10 -5
  77. package/dist/colors/gray.css +0 -335
  78. package/dist/colors/primary.css +0 -1399
  79. package/dist/colors/root-p3.css +0 -904
  80. package/dist/colors/root.css +0 -900
@@ -1,34 +1,9 @@
1
1
  :root {
2
- --color-gray: var(--color-gray-9);
3
- --color-primary: var(--color-primary-9);
4
-
5
- --color-bg-primary: var(--color-gray-1);
6
- --color-bg-secondary: var(--color-gray-2);
7
- --color-bg-shell-outer: var(--color-gray-2);
8
- --color-bg-shell-inner: var(--color-gray-1);
9
-
10
- --color-border: var(--color-gray-4);
11
- --color-outline: var(--color-primary-9);
12
-
13
- --color-text-primary: var(--color-gray-12);
14
- --color-text-secondary: var(--color-gray-11);
15
-
16
- --color-success: var(--color-primitive-green-9);
17
- --color-warning: var(--color-primitive-yellow-9);
18
- --color-error: var(--color-primitive-red-9);
19
-
20
- --color-tooltip: var(--color-gray-dark-12);
21
- --color-tooltip-bg: var(--color-gray-dark-1);
22
-
23
2
  --opacity-dialog-backdrop: 0.25;
24
3
  --opacity-picker-disabled: 0.5;
25
4
  }
26
5
 
27
- .dark {
28
- --color-bg-shell-outer: var(--color-gray-1);
29
- --color-bg-shell-inner: var(--color-gray-2);
30
- --color-tooltip: var(--color-gray-light-12);
31
- --color-tooltip-bg: var(--color-gray-light-1);
6
+ [data-color-theme="dark"] {
32
7
  --opacity-dialog-backdrop: 0.75;
33
8
  --opacity-picker-disabled: 0.25;
34
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "A collection of reusable React components built with Base UI and StyleX",
5
5
  "keywords": [
6
6
  "base-ui",
@@ -55,13 +55,18 @@
55
55
  "devDependencies": {
56
56
  "@stylexjs/unplugin": "0.19.0",
57
57
  "@tsdown/css": "0.22.14",
58
- "@types/bun": "1.3.14",
58
+ "@types/bun": "1.4.0",
59
59
  "tsdown": "0.22.14",
60
- "typescript": "6.0.3"
60
+ "typescript": "7.0.2"
61
61
  },
62
62
  "peerDependencies": {
63
63
  "@types/react": "^18 || ^19",
64
- "react": "^19.2.8",
65
- "react-dom": "^19.2.8"
64
+ "react": "^18 || ^19",
65
+ "react-dom": "^18 || ^19"
66
+ },
67
+ "peerDependenciesMeta": {
68
+ "@types/react": {
69
+ "optional": true
70
+ }
66
71
  }
67
72
  }
@@ -1,335 +0,0 @@
1
- .color-gray-gray {
2
- --color-gray-1: var(--color-primitive-gray-1);
3
- --color-gray-2: var(--color-primitive-gray-2);
4
- --color-gray-3: var(--color-primitive-gray-3);
5
- --color-gray-4: var(--color-primitive-gray-4);
6
- --color-gray-5: var(--color-primitive-gray-5);
7
- --color-gray-6: var(--color-primitive-gray-6);
8
- --color-gray-7: var(--color-primitive-gray-7);
9
- --color-gray-8: var(--color-primitive-gray-8);
10
- --color-gray-9: var(--color-primitive-gray-9);
11
- --color-gray-10: var(--color-primitive-gray-10);
12
- --color-gray-11: var(--color-primitive-gray-11);
13
- --color-gray-12: var(--color-primitive-gray-12);
14
-
15
- --color-gray-light-1: var(--color-primitive-gray-1);
16
- --color-gray-light-2: var(--color-primitive-gray-2);
17
- --color-gray-light-3: var(--color-primitive-gray-3);
18
- --color-gray-light-4: var(--color-primitive-gray-4);
19
- --color-gray-light-5: var(--color-primitive-gray-5);
20
- --color-gray-light-6: var(--color-primitive-gray-6);
21
- --color-gray-light-7: var(--color-primitive-gray-7);
22
- --color-gray-light-8: var(--color-primitive-gray-8);
23
- --color-gray-light-9: var(--color-primitive-gray-9);
24
- --color-gray-light-10: var(--color-primitive-gray-10);
25
- --color-gray-light-11: var(--color-primitive-gray-11);
26
- --color-gray-light-12: var(--color-primitive-gray-12);
27
-
28
- --color-gray-dark-1: var(--color-primitive-gray-dark-1);
29
- --color-gray-dark-2: var(--color-primitive-gray-dark-2);
30
- --color-gray-dark-3: var(--color-primitive-gray-dark-3);
31
- --color-gray-dark-4: var(--color-primitive-gray-dark-4);
32
- --color-gray-dark-5: var(--color-primitive-gray-dark-5);
33
- --color-gray-dark-6: var(--color-primitive-gray-dark-6);
34
- --color-gray-dark-7: var(--color-primitive-gray-dark-7);
35
- --color-gray-dark-8: var(--color-primitive-gray-dark-8);
36
- --color-gray-dark-9: var(--color-primitive-gray-dark-9);
37
- --color-gray-dark-10: var(--color-primitive-gray-dark-10);
38
- --color-gray-dark-11: var(--color-primitive-gray-dark-11);
39
- --color-gray-dark-12: var(--color-primitive-gray-dark-12);
40
- }
41
-
42
- .dark.color-gray-gray {
43
- --color-gray-1: var(--color-primitive-gray-dark-1);
44
- --color-gray-2: var(--color-primitive-gray-dark-2);
45
- --color-gray-3: var(--color-primitive-gray-dark-3);
46
- --color-gray-4: var(--color-primitive-gray-dark-4);
47
- --color-gray-5: var(--color-primitive-gray-dark-5);
48
- --color-gray-6: var(--color-primitive-gray-dark-6);
49
- --color-gray-7: var(--color-primitive-gray-dark-7);
50
- --color-gray-8: var(--color-primitive-gray-dark-8);
51
- --color-gray-9: var(--color-primitive-gray-dark-9);
52
- --color-gray-10: var(--color-primitive-gray-dark-10);
53
- --color-gray-11: var(--color-primitive-gray-dark-11);
54
- --color-gray-12: var(--color-primitive-gray-dark-12);
55
- }
56
-
57
- .color-gray-mauve {
58
- --color-gray-1: var(--color-primitive-mauve-1);
59
- --color-gray-2: var(--color-primitive-mauve-2);
60
- --color-gray-3: var(--color-primitive-mauve-3);
61
- --color-gray-4: var(--color-primitive-mauve-4);
62
- --color-gray-5: var(--color-primitive-mauve-5);
63
- --color-gray-6: var(--color-primitive-mauve-6);
64
- --color-gray-7: var(--color-primitive-mauve-7);
65
- --color-gray-8: var(--color-primitive-mauve-8);
66
- --color-gray-9: var(--color-primitive-mauve-9);
67
- --color-gray-10: var(--color-primitive-mauve-10);
68
- --color-gray-11: var(--color-primitive-mauve-11);
69
- --color-gray-12: var(--color-primitive-mauve-12);
70
-
71
- --color-gray-light-1: var(--color-primitive-mauve-1);
72
- --color-gray-light-2: var(--color-primitive-mauve-2);
73
- --color-gray-light-3: var(--color-primitive-mauve-3);
74
- --color-gray-light-4: var(--color-primitive-mauve-4);
75
- --color-gray-light-5: var(--color-primitive-mauve-5);
76
- --color-gray-light-6: var(--color-primitive-mauve-6);
77
- --color-gray-light-7: var(--color-primitive-mauve-7);
78
- --color-gray-light-8: var(--color-primitive-mauve-8);
79
- --color-gray-light-9: var(--color-primitive-mauve-9);
80
- --color-gray-light-10: var(--color-primitive-mauve-10);
81
- --color-gray-light-11: var(--color-primitive-mauve-11);
82
- --color-gray-light-12: var(--color-primitive-mauve-12);
83
-
84
- --color-gray-dark-1: var(--color-primitive-mauve-dark-1);
85
- --color-gray-dark-2: var(--color-primitive-mauve-dark-2);
86
- --color-gray-dark-3: var(--color-primitive-mauve-dark-3);
87
- --color-gray-dark-4: var(--color-primitive-mauve-dark-4);
88
- --color-gray-dark-5: var(--color-primitive-mauve-dark-5);
89
- --color-gray-dark-6: var(--color-primitive-mauve-dark-6);
90
- --color-gray-dark-7: var(--color-primitive-mauve-dark-7);
91
- --color-gray-dark-8: var(--color-primitive-mauve-dark-8);
92
- --color-gray-dark-9: var(--color-primitive-mauve-dark-9);
93
- --color-gray-dark-10: var(--color-primitive-mauve-dark-10);
94
- --color-gray-dark-11: var(--color-primitive-mauve-dark-11);
95
- --color-gray-dark-12: var(--color-primitive-mauve-dark-12);
96
- }
97
-
98
- .dark.color-gray-mauve {
99
- --color-gray-1: var(--color-primitive-mauve-dark-1);
100
- --color-gray-2: var(--color-primitive-mauve-dark-2);
101
- --color-gray-3: var(--color-primitive-mauve-dark-3);
102
- --color-gray-4: var(--color-primitive-mauve-dark-4);
103
- --color-gray-5: var(--color-primitive-mauve-dark-5);
104
- --color-gray-6: var(--color-primitive-mauve-dark-6);
105
- --color-gray-7: var(--color-primitive-mauve-dark-7);
106
- --color-gray-8: var(--color-primitive-mauve-dark-8);
107
- --color-gray-9: var(--color-primitive-mauve-dark-9);
108
- --color-gray-10: var(--color-primitive-mauve-dark-10);
109
- --color-gray-11: var(--color-primitive-mauve-dark-11);
110
- --color-gray-12: var(--color-primitive-mauve-dark-12);
111
- }
112
-
113
- .color-gray-slate {
114
- --color-gray-1: var(--color-primitive-slate-1);
115
- --color-gray-2: var(--color-primitive-slate-2);
116
- --color-gray-3: var(--color-primitive-slate-3);
117
- --color-gray-4: var(--color-primitive-slate-4);
118
- --color-gray-5: var(--color-primitive-slate-5);
119
- --color-gray-6: var(--color-primitive-slate-6);
120
- --color-gray-7: var(--color-primitive-slate-7);
121
- --color-gray-8: var(--color-primitive-slate-8);
122
- --color-gray-9: var(--color-primitive-slate-9);
123
- --color-gray-10: var(--color-primitive-slate-10);
124
- --color-gray-11: var(--color-primitive-slate-11);
125
- --color-gray-12: var(--color-primitive-slate-12);
126
-
127
- --color-gray-light-1: var(--color-primitive-slate-1);
128
- --color-gray-light-2: var(--color-primitive-slate-2);
129
- --color-gray-light-3: var(--color-primitive-slate-3);
130
- --color-gray-light-4: var(--color-primitive-slate-4);
131
- --color-gray-light-5: var(--color-primitive-slate-5);
132
- --color-gray-light-6: var(--color-primitive-slate-6);
133
- --color-gray-light-7: var(--color-primitive-slate-7);
134
- --color-gray-light-8: var(--color-primitive-slate-8);
135
- --color-gray-light-9: var(--color-primitive-slate-9);
136
- --color-gray-light-10: var(--color-primitive-slate-10);
137
- --color-gray-light-11: var(--color-primitive-slate-11);
138
- --color-gray-light-12: var(--color-primitive-slate-12);
139
-
140
- --color-gray-dark-1: var(--color-primitive-slate-dark-1);
141
- --color-gray-dark-2: var(--color-primitive-slate-dark-2);
142
- --color-gray-dark-3: var(--color-primitive-slate-dark-3);
143
- --color-gray-dark-4: var(--color-primitive-slate-dark-4);
144
- --color-gray-dark-5: var(--color-primitive-slate-dark-5);
145
- --color-gray-dark-6: var(--color-primitive-slate-dark-6);
146
- --color-gray-dark-7: var(--color-primitive-slate-dark-7);
147
- --color-gray-dark-8: var(--color-primitive-slate-dark-8);
148
- --color-gray-dark-9: var(--color-primitive-slate-dark-9);
149
- --color-gray-dark-10: var(--color-primitive-slate-dark-10);
150
- --color-gray-dark-11: var(--color-primitive-slate-dark-11);
151
- --color-gray-dark-12: var(--color-primitive-slate-dark-12);
152
- }
153
-
154
- .dark.color-gray-slate {
155
- --color-gray-1: var(--color-primitive-slate-dark-1);
156
- --color-gray-2: var(--color-primitive-slate-dark-2);
157
- --color-gray-3: var(--color-primitive-slate-dark-3);
158
- --color-gray-4: var(--color-primitive-slate-dark-4);
159
- --color-gray-5: var(--color-primitive-slate-dark-5);
160
- --color-gray-6: var(--color-primitive-slate-dark-6);
161
- --color-gray-7: var(--color-primitive-slate-dark-7);
162
- --color-gray-8: var(--color-primitive-slate-dark-8);
163
- --color-gray-9: var(--color-primitive-slate-dark-9);
164
- --color-gray-10: var(--color-primitive-slate-dark-10);
165
- --color-gray-11: var(--color-primitive-slate-dark-11);
166
- --color-gray-12: var(--color-primitive-slate-dark-12);
167
- }
168
-
169
- .color-gray-sage {
170
- --color-gray-1: var(--color-primitive-sage-1);
171
- --color-gray-2: var(--color-primitive-sage-2);
172
- --color-gray-3: var(--color-primitive-sage-3);
173
- --color-gray-4: var(--color-primitive-sage-4);
174
- --color-gray-5: var(--color-primitive-sage-5);
175
- --color-gray-6: var(--color-primitive-sage-6);
176
- --color-gray-7: var(--color-primitive-sage-7);
177
- --color-gray-8: var(--color-primitive-sage-8);
178
- --color-gray-9: var(--color-primitive-sage-9);
179
- --color-gray-10: var(--color-primitive-sage-10);
180
- --color-gray-11: var(--color-primitive-sage-11);
181
- --color-gray-12: var(--color-primitive-sage-12);
182
-
183
- --color-gray-light-1: var(--color-primitive-sage-1);
184
- --color-gray-light-2: var(--color-primitive-sage-2);
185
- --color-gray-light-3: var(--color-primitive-sage-3);
186
- --color-gray-light-4: var(--color-primitive-sage-4);
187
- --color-gray-light-5: var(--color-primitive-sage-5);
188
- --color-gray-light-6: var(--color-primitive-sage-6);
189
- --color-gray-light-7: var(--color-primitive-sage-7);
190
- --color-gray-light-8: var(--color-primitive-sage-8);
191
- --color-gray-light-9: var(--color-primitive-sage-9);
192
- --color-gray-light-10: var(--color-primitive-sage-10);
193
- --color-gray-light-11: var(--color-primitive-sage-11);
194
- --color-gray-light-12: var(--color-primitive-sage-12);
195
-
196
- --color-gray-dark-1: var(--color-primitive-sage-dark-1);
197
- --color-gray-dark-2: var(--color-primitive-sage-dark-2);
198
- --color-gray-dark-3: var(--color-primitive-sage-dark-3);
199
- --color-gray-dark-4: var(--color-primitive-sage-dark-4);
200
- --color-gray-dark-5: var(--color-primitive-sage-dark-5);
201
- --color-gray-dark-6: var(--color-primitive-sage-dark-6);
202
- --color-gray-dark-7: var(--color-primitive-sage-dark-7);
203
- --color-gray-dark-8: var(--color-primitive-sage-dark-8);
204
- --color-gray-dark-9: var(--color-primitive-sage-dark-9);
205
- --color-gray-dark-10: var(--color-primitive-sage-dark-10);
206
- --color-gray-dark-11: var(--color-primitive-sage-dark-11);
207
- --color-gray-dark-12: var(--color-primitive-sage-dark-12);
208
- }
209
-
210
- .dark.color-gray-sage {
211
- --color-gray-1: var(--color-primitive-sage-dark-1);
212
- --color-gray-2: var(--color-primitive-sage-dark-2);
213
- --color-gray-3: var(--color-primitive-sage-dark-3);
214
- --color-gray-4: var(--color-primitive-sage-dark-4);
215
- --color-gray-5: var(--color-primitive-sage-dark-5);
216
- --color-gray-6: var(--color-primitive-sage-dark-6);
217
- --color-gray-7: var(--color-primitive-sage-dark-7);
218
- --color-gray-8: var(--color-primitive-sage-dark-8);
219
- --color-gray-9: var(--color-primitive-sage-dark-9);
220
- --color-gray-10: var(--color-primitive-sage-dark-10);
221
- --color-gray-11: var(--color-primitive-sage-dark-11);
222
- --color-gray-12: var(--color-primitive-sage-dark-12);
223
- }
224
-
225
- .color-gray-olive {
226
- --color-gray-1: var(--color-primitive-olive-1);
227
- --color-gray-2: var(--color-primitive-olive-2);
228
- --color-gray-3: var(--color-primitive-olive-3);
229
- --color-gray-4: var(--color-primitive-olive-4);
230
- --color-gray-5: var(--color-primitive-olive-5);
231
- --color-gray-6: var(--color-primitive-olive-6);
232
- --color-gray-7: var(--color-primitive-olive-7);
233
- --color-gray-8: var(--color-primitive-olive-8);
234
- --color-gray-9: var(--color-primitive-olive-9);
235
- --color-gray-10: var(--color-primitive-olive-10);
236
- --color-gray-11: var(--color-primitive-olive-11);
237
- --color-gray-12: var(--color-primitive-olive-12);
238
-
239
- --color-gray-light-1: var(--color-primitive-olive-1);
240
- --color-gray-light-2: var(--color-primitive-olive-2);
241
- --color-gray-light-3: var(--color-primitive-olive-3);
242
- --color-gray-light-4: var(--color-primitive-olive-4);
243
- --color-gray-light-5: var(--color-primitive-olive-5);
244
- --color-gray-light-6: var(--color-primitive-olive-6);
245
- --color-gray-light-7: var(--color-primitive-olive-7);
246
- --color-gray-light-8: var(--color-primitive-olive-8);
247
- --color-gray-light-9: var(--color-primitive-olive-9);
248
- --color-gray-light-10: var(--color-primitive-olive-10);
249
- --color-gray-light-11: var(--color-primitive-olive-11);
250
- --color-gray-light-12: var(--color-primitive-olive-12);
251
-
252
- --color-gray-dark-1: var(--color-primitive-olive-dark-1);
253
- --color-gray-dark-2: var(--color-primitive-olive-dark-2);
254
- --color-gray-dark-3: var(--color-primitive-olive-dark-3);
255
- --color-gray-dark-4: var(--color-primitive-olive-dark-4);
256
- --color-gray-dark-5: var(--color-primitive-olive-dark-5);
257
- --color-gray-dark-6: var(--color-primitive-olive-dark-6);
258
- --color-gray-dark-7: var(--color-primitive-olive-dark-7);
259
- --color-gray-dark-8: var(--color-primitive-olive-dark-8);
260
- --color-gray-dark-9: var(--color-primitive-olive-dark-9);
261
- --color-gray-dark-10: var(--color-primitive-olive-dark-10);
262
- --color-gray-dark-11: var(--color-primitive-olive-dark-11);
263
- --color-gray-dark-12: var(--color-primitive-olive-dark-12);
264
- }
265
-
266
- .dark.color-gray-olive {
267
- --color-gray-1: var(--color-primitive-olive-dark-1);
268
- --color-gray-2: var(--color-primitive-olive-dark-2);
269
- --color-gray-3: var(--color-primitive-olive-dark-3);
270
- --color-gray-4: var(--color-primitive-olive-dark-4);
271
- --color-gray-5: var(--color-primitive-olive-dark-5);
272
- --color-gray-6: var(--color-primitive-olive-dark-6);
273
- --color-gray-7: var(--color-primitive-olive-dark-7);
274
- --color-gray-8: var(--color-primitive-olive-dark-8);
275
- --color-gray-9: var(--color-primitive-olive-dark-9);
276
- --color-gray-10: var(--color-primitive-olive-dark-10);
277
- --color-gray-11: var(--color-primitive-olive-dark-11);
278
- --color-gray-12: var(--color-primitive-olive-dark-12);
279
- }
280
-
281
- .color-gray-sand {
282
- --color-gray-1: var(--color-primitive-sand-1);
283
- --color-gray-2: var(--color-primitive-sand-2);
284
- --color-gray-3: var(--color-primitive-sand-3);
285
- --color-gray-4: var(--color-primitive-sand-4);
286
- --color-gray-5: var(--color-primitive-sand-5);
287
- --color-gray-6: var(--color-primitive-sand-6);
288
- --color-gray-7: var(--color-primitive-sand-7);
289
- --color-gray-8: var(--color-primitive-sand-8);
290
- --color-gray-9: var(--color-primitive-sand-9);
291
- --color-gray-10: var(--color-primitive-sand-10);
292
- --color-gray-11: var(--color-primitive-sand-11);
293
- --color-gray-12: var(--color-primitive-sand-12);
294
-
295
- --color-gray-light-1: var(--color-primitive-sand-1);
296
- --color-gray-light-2: var(--color-primitive-sand-2);
297
- --color-gray-light-3: var(--color-primitive-sand-3);
298
- --color-gray-light-4: var(--color-primitive-sand-4);
299
- --color-gray-light-5: var(--color-primitive-sand-5);
300
- --color-gray-light-6: var(--color-primitive-sand-6);
301
- --color-gray-light-7: var(--color-primitive-sand-7);
302
- --color-gray-light-8: var(--color-primitive-sand-8);
303
- --color-gray-light-9: var(--color-primitive-sand-9);
304
- --color-gray-light-10: var(--color-primitive-sand-10);
305
- --color-gray-light-11: var(--color-primitive-sand-11);
306
- --color-gray-light-12: var(--color-primitive-sand-12);
307
-
308
- --color-gray-dark-1: var(--color-primitive-sand-dark-1);
309
- --color-gray-dark-2: var(--color-primitive-sand-dark-2);
310
- --color-gray-dark-3: var(--color-primitive-sand-dark-3);
311
- --color-gray-dark-4: var(--color-primitive-sand-dark-4);
312
- --color-gray-dark-5: var(--color-primitive-sand-dark-5);
313
- --color-gray-dark-6: var(--color-primitive-sand-dark-6);
314
- --color-gray-dark-7: var(--color-primitive-sand-dark-7);
315
- --color-gray-dark-8: var(--color-primitive-sand-dark-8);
316
- --color-gray-dark-9: var(--color-primitive-sand-dark-9);
317
- --color-gray-dark-10: var(--color-primitive-sand-dark-10);
318
- --color-gray-dark-11: var(--color-primitive-sand-dark-11);
319
- --color-gray-dark-12: var(--color-primitive-sand-dark-12);
320
- }
321
-
322
- .dark.color-gray-sand {
323
- --color-gray-1: var(--color-primitive-sand-dark-1);
324
- --color-gray-2: var(--color-primitive-sand-dark-2);
325
- --color-gray-3: var(--color-primitive-sand-dark-3);
326
- --color-gray-4: var(--color-primitive-sand-dark-4);
327
- --color-gray-5: var(--color-primitive-sand-dark-5);
328
- --color-gray-6: var(--color-primitive-sand-dark-6);
329
- --color-gray-7: var(--color-primitive-sand-dark-7);
330
- --color-gray-8: var(--color-primitive-sand-dark-8);
331
- --color-gray-9: var(--color-primitive-sand-dark-9);
332
- --color-gray-10: var(--color-primitive-sand-dark-10);
333
- --color-gray-11: var(--color-primitive-sand-dark-11);
334
- --color-gray-12: var(--color-primitive-sand-dark-12);
335
- }