@nattstack/ui 0.0.6 → 0.0.8

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 (12) hide show
  1. package/README.md +38 -0
  2. package/dist/colors/gray.css +335 -0
  3. package/dist/colors/index.css +2 -0
  4. package/dist/colors/primary.css +1399 -0
  5. package/dist/tailwind-colors/color.css +2 -0
  6. package/dist/tailwind-colors/index.css +1 -4
  7. package/dist/tailwind-colors-semantic/color.css +9 -0
  8. package/dist/tailwind-colors-semantic/index.css +2 -0
  9. package/dist/tailwind-colors-semantic/root.css +14 -0
  10. package/dist/tailwind-tokenless/10/index.css +4 -0
  11. package/dist/tailwind-tokenless/16/index.css +1 -0
  12. package/package.json +2 -1
package/README.md ADDED
@@ -0,0 +1,38 @@
1
+ # @nattstack/ui
2
+
3
+ A collection of reusable React components built with Base UI, TypeScript, and CSS Modules.
4
+
5
+ ## Links
6
+
7
+ - Website: [https://nui-web.vercel.app](https://nui-web.vercel.app)
8
+ - Storybook: [https://ui-storybook.vercel.app](https://ui-storybook.vercel.app)
9
+
10
+ ## Installation
11
+
12
+ ```bash
13
+ bun add @nattstack/ui
14
+ ```
15
+
16
+ ## Usage
17
+
18
+ ```css
19
+ /* global.css */
20
+
21
+ @import "tailwindcss";
22
+ @import "@nattstack/ui/tailwind-colors";
23
+ @import "@nattstack/ui/tailwind-tokenless-10";
24
+ ```
25
+
26
+ ```tsx
27
+ // app.tsx
28
+
29
+ import { Button } from "@nattstack/ui"
30
+
31
+ function App() {
32
+ return (
33
+ <body className="color-gray-slate color-primary-blue">
34
+ <Button>Click me</Button>
35
+ </body>
36
+ )
37
+ }
38
+ ```
package/dist/colors/gray.css ADDED
@@ -0,0 +1,335 @@
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
+ }
package/dist/colors/index.css CHANGED
@@ -1,3 +1,5 @@
1
1
  /* Order matters */
2
2
  @import "./root.css";
3
3
  @import "./root-p3.css";
4
+ @import "./gray.css";
5
+ @import "./primary.css";