@nattstack/ui 0.0.26 → 0.0.28

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.26",
3
+ "version": "0.0.28",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",
@@ -1,37 +0,0 @@
1
- body {
2
- -moz-osx-font-smoothing: grayscale;
3
- -webkit-font-smoothing: antialiased;
4
- background-color: var(--color-bg-secondary);
5
- color: var(--color-text-secondary);
6
- font-family: var(--font-sans);
7
- font-size: 16px;
8
- }
9
-
10
- @media (max-width: 768px) {
11
- body[data-is-app="true"] {
12
- background-color: var(--color-bg-primary);
13
- }
14
- }
15
-
16
- a,
17
- button {
18
- outline-color: var(--color-outline);
19
- outline-offset: -2px;
20
- outline-style: solid;
21
- outline-width: 0;
22
- }
23
-
24
- a:focus-visible,
25
- button:focus-visible {
26
- outline-width: 2px;
27
- }
28
-
29
- h1,
30
- h2,
31
- h3,
32
- h4,
33
- h5,
34
- h6 {
35
- color: var(--color-text-primary);
36
- font-family: var(--font-display);
37
- }
@@ -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
- }