@astryxdesign/theme-stone 0.0.0-bootstrap.0 → 0.0.15

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/dist/theme.css ADDED
@@ -0,0 +1,611 @@
1
+ /*
2
+ * @generated by `astryx theme build` — do not edit manually.
3
+ * Source: src/stoneTheme.ts
4
+ * Command: astryx theme build src/stoneTheme.ts --out dist/theme.css
5
+ * Generated: 2026-06-24T18:16:14.109Z
6
+ */
7
+
8
+ @layer reset {
9
+ @scope ([data-astryx-theme="stone"]) to ([data-astryx-theme]) {
10
+ :where(h1, h2, h3, h4, h5, h6) {
11
+ font-family: var(--font-family-heading);
12
+ color: var(--color-text-primary);
13
+ }
14
+
15
+ :where(h1) {
16
+ font-size: var(--font-size-2xl);
17
+ font-weight: var(--font-weight-semibold);
18
+ line-height: 1.3333;
19
+ }
20
+
21
+ :where(h2) {
22
+ font-size: var(--font-size-xl);
23
+ font-weight: var(--font-weight-semibold);
24
+ line-height: 1.4545;
25
+ }
26
+
27
+ :where(h3) {
28
+ font-size: var(--font-size-lg);
29
+ font-weight: var(--font-weight-bold);
30
+ line-height: 1.5556;
31
+ }
32
+
33
+ :where(h4) {
34
+ font-size: var(--font-size-base);
35
+ font-weight: var(--font-weight-bold);
36
+ line-height: 1.4286;
37
+ }
38
+
39
+ :where(h5) {
40
+ font-size: var(--font-size-sm);
41
+ font-weight: var(--font-weight-semibold);
42
+ line-height: 1.4545;
43
+ }
44
+
45
+ :where(h6) {
46
+ font-size: var(--font-size-xs);
47
+ font-weight: var(--font-weight-semibold);
48
+ line-height: 1.7778;
49
+ }
50
+
51
+ :where(p) {
52
+ font-family: var(--font-family-body);
53
+ font-size: var(--font-size-base);
54
+ font-weight: var(--font-weight-normal);
55
+ line-height: 1.4286;
56
+ color: var(--color-text-primary);
57
+ }
58
+
59
+ :where(small) {
60
+ font-size: 12px;
61
+ font-weight: var(--font-weight-normal);
62
+ line-height: 1.4545;
63
+ color: var(--color-text-secondary);
64
+ }
65
+
66
+ :where(code, pre) {
67
+ font-family: var(--font-family-code);
68
+ font-size: var(--font-size-base);
69
+ line-height: 1.4286;
70
+ }
71
+
72
+ :where(hr) {
73
+ border: none;
74
+ border-top: 1px solid var(--color-border);
75
+ }
76
+ }
77
+ }
78
+
79
+ @layer astryx-theme {
80
+ :root { color-scheme: light dark; }
81
+
82
+ @scope ([data-astryx-theme="stone"]) to ([data-astryx-theme]) {
83
+ :scope {
84
+ --font-size-4xs: 0.3125rem;
85
+ --font-size-3xs: 0.375rem;
86
+ --font-size-2xs: 0.4375rem;
87
+ --font-size-xs: 0.5625rem;
88
+ --font-size-sm: 0.6875rem;
89
+ --font-size-base: 0.875rem;
90
+ --font-size-lg: 1.125rem;
91
+ --font-size-xl: 1.375rem;
92
+ --font-size-2xl: 1.6875rem;
93
+ --font-size-3xl: 2.125rem;
94
+ --font-size-4xl: 2.6875rem;
95
+ --font-size-5xl: 3.3125rem;
96
+ --text-heading-1-size: var(--font-size-2xl);
97
+ --text-heading-1-weight: var(--font-weight-semibold);
98
+ --text-heading-1-leading: 1.3333;
99
+ --text-heading-2-size: var(--font-size-xl);
100
+ --text-heading-2-weight: var(--font-weight-semibold);
101
+ --text-heading-2-leading: 1.4545;
102
+ --text-heading-3-size: var(--font-size-lg);
103
+ --text-heading-3-weight: var(--font-weight-bold);
104
+ --text-heading-3-leading: 1.5556;
105
+ --text-heading-4-size: var(--font-size-base);
106
+ --text-heading-4-weight: var(--font-weight-bold);
107
+ --text-heading-4-leading: 1.4286;
108
+ --text-heading-5-size: var(--font-size-sm);
109
+ --text-heading-5-weight: var(--font-weight-semibold);
110
+ --text-heading-5-leading: 1.4545;
111
+ --text-heading-6-size: var(--font-size-xs);
112
+ --text-heading-6-weight: var(--font-weight-semibold);
113
+ --text-heading-6-leading: 1.7778;
114
+ --text-body-size: var(--font-size-base);
115
+ --text-body-weight: var(--font-weight-normal);
116
+ --text-body-leading: 1.4286;
117
+ --text-large-size: var(--font-size-lg);
118
+ --text-large-weight: var(--font-weight-semibold);
119
+ --text-large-leading: 1.5556;
120
+ --text-label-size: var(--font-size-base);
121
+ --text-label-weight: var(--font-weight-medium);
122
+ --text-label-leading: 1.4286;
123
+ --text-code-size: var(--font-size-base);
124
+ --text-code-weight: var(--font-weight-normal);
125
+ --text-code-leading: 1.4286;
126
+ --text-supporting-size: 12px;
127
+ --text-supporting-weight: var(--font-weight-normal);
128
+ --text-supporting-leading: 1.4545;
129
+ --text-display-1-size: var(--font-size-5xl);
130
+ --text-display-1-weight: var(--font-weight-normal);
131
+ --text-display-1-leading: 1.283;
132
+ --text-display-2-size: var(--font-size-4xl);
133
+ --text-display-2-weight: var(--font-weight-normal);
134
+ --text-display-2-leading: 1.2093;
135
+ --text-display-3-size: var(--font-size-3xl);
136
+ --text-display-3-weight: var(--font-weight-normal);
137
+ --text-display-3-leading: 1.2941;
138
+ --duration-fast-min: 95ms;
139
+ --duration-fast: 125ms;
140
+ --duration-fast-max: 165ms;
141
+ --duration-medium-min: 225ms;
142
+ --duration-medium: 300ms;
143
+ --duration-medium-max: 400ms;
144
+ --duration-slow-min: 525ms;
145
+ --duration-slow: 700ms;
146
+ --duration-slow-max: 935ms;
147
+ --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
148
+ --font-family-heading: Montserrat, "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
149
+ --font-family-code: "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;
150
+ --color-syntax-keyword: light-dark(#645a72, #b2a7c1);
151
+ --color-syntax-string: light-dark(#4e6357, #9bb19a);
152
+ --color-syntax-comment: light-dark(#5e5e5e, #ababb0);
153
+ --color-syntax-number: light-dark(#755752, #bea792);
154
+ --color-syntax-function: light-dark(#506072, #99adc6);
155
+ --color-syntax-type: light-dark(#645a72, #b2a7c1);
156
+ --color-syntax-variable: light-dark(#5e5e5e, #ababb0);
157
+ --color-syntax-operator: light-dark(#5e5e5e, #ababb0);
158
+ --color-syntax-constant: light-dark(#755752, #bea792);
159
+ --color-syntax-tag: light-dark(#775751, #c7a39d);
160
+ --color-syntax-attribute: light-dark(#79693f, #b6aa90);
161
+ --color-syntax-property: light-dark(#4e6357, #94b2a0);
162
+ --color-syntax-punctuation: light-dark(#5e5e5e, #ababb0);
163
+ --color-syntax-background: light-dark(#f3f3f5, #171719);
164
+ --color-accent: light-dark(#25252a, #f3f3f5);
165
+ --color-accent-muted: light-dark(#25252a14, #f3f3f5);
166
+ --color-neutral: light-dark(#25252a0f, #f3f3f5);
167
+ --color-background-surface: light-dark(#ffffff, #1b1b1f);
168
+ --color-background-body: light-dark(#f3f3f5, #111015);
169
+ --color-overlay: light-dark(#25252a80, #28282a);
170
+ --color-overlay-hover: light-dark(#25252a0d, #f3f3f5);
171
+ --color-overlay-pressed: light-dark(#25252a1a, #f3f3f5);
172
+ --color-background-muted: light-dark(#e2e2e8, #3b3b3f);
173
+ --color-text-primary: light-dark(#25252a, #f3f3f5);
174
+ --color-text-secondary: light-dark(#83838a, #9d9da3);
175
+ --color-text-disabled: light-dark(#d7d7da, #5e5e61);
176
+ --color-text-accent: light-dark(#25252a, #f3f3f5);
177
+ --color-on-dark: #FFFFFF;
178
+ --color-on-light: light-dark(#25252a, #28282a);
179
+ --color-on-accent: light-dark(#ffffff, #25252a);
180
+ --color-on-success: light-dark(#374c36, #d0e9ce);
181
+ --color-on-error: light-dark(#58413e, #f9dcd7);
182
+ --color-on-warning: light-dark(#524622, #f4e1b7);
183
+ --color-icon-accent: light-dark(#25252a, #f3f3f5);
184
+ --color-icon-primary: light-dark(#25252a, #f3f3f5);
185
+ --color-icon-secondary: light-dark(#83838a, #9d9da3);
186
+ --color-icon-disabled: light-dark(#d7d7da, #5e5e61);
187
+ --color-background-card: light-dark(#FFFFFF, #242325);
188
+ --color-background-popover: light-dark(#ffffff, #25252a);
189
+ --color-background-inverted: light-dark(#25252a, #f3f3f5);
190
+ --color-success: light-dark(#374c36, #b4cdb2);
191
+ --color-success-muted: light-dark(#d0e9ce, #b4cdb2);
192
+ --color-error: light-dark(#58413e, #dcc0bc);
193
+ --color-error-muted: light-dark(#f9dcd7, #dcc0bc);
194
+ --color-warning: light-dark(#524622, #d7c59c);
195
+ --color-warning-muted: light-dark(#f4e1b7, #d7c59c);
196
+ --color-border: light-dark(#e2e2e8, #f3f3f5);
197
+ --color-border-emphasized: light-dark(#83838a, #5e5e61);
198
+ --color-skeleton: light-dark(#d4d4da, #5e5e64);
199
+ --color-shadow: light-dark(#25252a1a, #000000);
200
+ --color-tint-hover: light-dark(black, white);
201
+ --color-background-blue: light-dark(#d7e4f5, #485362);
202
+ --color-border-blue: light-dark(#c9d6e7, #313c4a);
203
+ --color-icon-blue: light-dark(#3c4856, #d7e4f5);
204
+ --color-text-blue: light-dark(#3c4856, #d7e4f5);
205
+ --color-background-cyan: light-dark(#cce8e5, #3e5755);
206
+ --color-border-cyan: light-dark(#bedad7, #28403e);
207
+ --color-icon-cyan: light-dark(#334b49, #cce8e5);
208
+ --color-text-cyan: light-dark(#334b49, #cce8e5);
209
+ --color-background-gray: light-dark(#e2e2e8, #525257);
210
+ --color-border-gray: light-dark(#d4d4da, #3b3b3f);
211
+ --color-icon-gray: light-dark(#46464b, #e2e2e8);
212
+ --color-text-gray: light-dark(#46464b, #e2e2e8);
213
+ --color-background-green: light-dark(#d0e9ce, #425841);
214
+ --color-border-green: light-dark(#c2dbc0, #2b402b);
215
+ --color-icon-green: light-dark(#374c36, #d0e9ce);
216
+ --color-text-green: light-dark(#374c36, #d0e9ce);
217
+ --color-background-orange: light-dark(#ffdcbb, #684d32);
218
+ --color-border-orange: light-dark(#f1ceae, #4f361c);
219
+ --color-icon-orange: light-dark(#5b4227, #ffdcbb);
220
+ --color-text-orange: light-dark(#5b4227, #ffdcbb);
221
+ --color-background-pink: light-dark(#f0dde8, #5e4e57);
222
+ --color-border-pink: light-dark(#e2cfda, #463740);
223
+ --color-icon-pink: light-dark(#52424c, #f0dde8);
224
+ --color-text-pink: light-dark(#52424c, #f0dde8);
225
+ --color-background-purple: light-dark(#e8dff3, #564f60);
226
+ --color-border-purple: light-dark(#d9d1e5, #3f3949);
227
+ --color-icon-purple: light-dark(#4b4454, #e8dff3);
228
+ --color-text-purple: light-dark(#4b4454, #e8dff3);
229
+ --color-background-red: light-dark(#f9dcd7, #644d49);
230
+ --color-border-red: light-dark(#ebcec9, #4c3633);
231
+ --color-icon-red: light-dark(#58413e, #f9dcd7);
232
+ --color-text-red: light-dark(#58413e, #f9dcd7);
233
+ --color-background-teal: light-dark(#d4e7dc, #46564d);
234
+ --color-border-teal: light-dark(#c6d9ce, #303f36);
235
+ --color-icon-teal: light-dark(#3b4a41, #d4e7dc);
236
+ --color-text-teal: light-dark(#3b4a41, #d4e7dc);
237
+ --color-background-yellow: light-dark(#f4e1b7, #5e512d);
238
+ --color-border-yellow: light-dark(#e5d3a9, #463a18);
239
+ --color-icon-yellow: light-dark(#524622, #f4e1b7);
240
+ --color-text-yellow: light-dark(#524622, #f4e1b7);
241
+ --radius-none: 0.125rem;
242
+ --radius-inner: 0.25rem;
243
+ --radius-element: 0.5rem;
244
+ --radius-container: 0.75rem;
245
+ --radius-page: 1.5rem;
246
+ --radius-full: 9999px;
247
+ --shadow-low: 0 2px 4px #28282A0D, 0 4px 8px #28282A1A;
248
+ --shadow-med: 0 2px 4px #28282A0D, 0 4px 12px #28282A1A;
249
+ --shadow-high: 0 4px 6px #28282A1A, 0 12px 24px #28282A26;
250
+ --shadow-inset-hover: inset 0px 0px 0px 2px #28282A30;
251
+ --shadow-inset-selected: inset 0px 0px 0px 2px #28282A50;
252
+ --shadow-inset-success: inset 0px 0px 0px 2px #83838a30;
253
+ --shadow-inset-warning: inset 0px 0px 0px 2px #83838a30;
254
+ --shadow-inset-error: inset 0px 0px 0px 2px #83838a30;
255
+ }
256
+
257
+ .astryx-heading.level-1 {
258
+ font-family: var(--font-family-heading);
259
+ font-size: var(--text-heading-1-size);
260
+ font-weight: var(--text-heading-1-weight);
261
+ line-height: var(--text-heading-1-leading);
262
+ }
263
+
264
+ .astryx-heading.level-2 {
265
+ font-family: var(--font-family-heading);
266
+ font-size: var(--text-heading-2-size);
267
+ font-weight: var(--text-heading-2-weight);
268
+ line-height: var(--text-heading-2-leading);
269
+ }
270
+
271
+ .astryx-heading.level-3 {
272
+ font-family: var(--font-family-heading);
273
+ font-size: var(--text-heading-3-size);
274
+ font-weight: var(--text-heading-3-weight);
275
+ line-height: var(--text-heading-3-leading);
276
+ }
277
+
278
+ .astryx-heading.level-4 {
279
+ font-family: var(--font-family-heading);
280
+ font-size: var(--text-heading-4-size);
281
+ font-weight: var(--text-heading-4-weight);
282
+ line-height: var(--text-heading-4-leading);
283
+ }
284
+
285
+ .astryx-heading.level-5 {
286
+ font-family: var(--font-family-heading);
287
+ font-size: var(--text-heading-5-size);
288
+ font-weight: var(--text-heading-5-weight);
289
+ line-height: var(--text-heading-5-leading);
290
+ }
291
+
292
+ .astryx-heading.level-6 {
293
+ font-family: var(--font-family-heading);
294
+ font-size: var(--text-heading-6-size);
295
+ font-weight: var(--text-heading-6-weight);
296
+ line-height: var(--text-heading-6-leading);
297
+ }
298
+
299
+ .astryx-text.body {
300
+ font-family: var(--font-family-body);
301
+ font-size: var(--text-body-size);
302
+ line-height: var(--text-body-leading);
303
+ }
304
+
305
+ .astryx-text.large {
306
+ font-family: var(--font-family-body);
307
+ font-size: var(--text-large-size);
308
+ line-height: var(--text-large-leading);
309
+ }
310
+
311
+ .astryx-text.label {
312
+ font-family: var(--font-family-body);
313
+ font-size: var(--text-label-size);
314
+ line-height: var(--text-label-leading);
315
+ }
316
+
317
+ .astryx-text.code {
318
+ font-family: var(--font-family-code);
319
+ font-size: var(--text-code-size);
320
+ line-height: var(--text-code-leading);
321
+ }
322
+
323
+ .astryx-text.supporting {
324
+ font-family: var(--font-family-body);
325
+ font-size: var(--text-supporting-size);
326
+ line-height: var(--text-supporting-leading);
327
+ }
328
+
329
+ .astryx-text.display-1 {
330
+ font-family: var(--font-family-heading);
331
+ font-size: var(--text-display-1-size);
332
+ line-height: var(--text-display-1-leading);
333
+ }
334
+
335
+ .astryx-text.display-2 {
336
+ font-family: var(--font-family-heading);
337
+ font-size: var(--text-display-2-size);
338
+ line-height: var(--text-display-2-leading);
339
+ }
340
+
341
+ .astryx-text.display-3 {
342
+ font-family: var(--font-family-heading);
343
+ font-size: var(--text-display-3-size);
344
+ line-height: var(--text-display-3-leading);
345
+ }
346
+
347
+ .astryx-button {
348
+ border-radius: var(--radius-full);
349
+ --_button-radius: var(--radius-full);
350
+ }
351
+
352
+ .astryx-button.secondary {
353
+ background-color: transparent;
354
+ border-width: 1.5px;
355
+ border-style: solid;
356
+ border-color: var(--color-border-emphasized);
357
+ }
358
+
359
+ .astryx-button.secondary:hover {
360
+ background-color: var(--color-neutral);
361
+ }
362
+
363
+ .astryx-button.destructive {
364
+ background-color: var(--color-background-red);
365
+ color: var(--color-text-red);
366
+ }
367
+
368
+ .astryx-badge.info {
369
+ background-color: var(--color-background-blue);
370
+ color: var(--color-text-blue);
371
+ }
372
+
373
+ .astryx-badge.neutral {
374
+ background-color: var(--color-background-gray);
375
+ color: var(--color-text-gray);
376
+ }
377
+
378
+ .astryx-badge.success {
379
+ background-color: var(--color-background-green);
380
+ color: var(--color-text-green);
381
+ }
382
+
383
+ .astryx-badge.warning {
384
+ background-color: var(--color-background-yellow);
385
+ color: var(--color-text-yellow);
386
+ }
387
+
388
+ .astryx-badge.error {
389
+ background-color: var(--color-background-red);
390
+ color: var(--color-text-red);
391
+ }
392
+
393
+ .astryx-banner.info {
394
+ --color-accent-muted: var(--color-background-blue);
395
+ --color-text-primary: var(--color-text-blue);
396
+ --color-text-secondary: var(--color-text-blue);
397
+ --color-accent: var(--color-text-blue);
398
+ }
399
+
400
+ .astryx-banner.success {
401
+ --color-success-muted: var(--color-background-green);
402
+ --color-text-primary: var(--color-text-green);
403
+ --color-text-secondary: var(--color-text-green);
404
+ --color-success: var(--color-text-green);
405
+ }
406
+
407
+ .astryx-banner.warning {
408
+ --color-warning-muted: var(--color-background-yellow);
409
+ --color-text-primary: var(--color-text-yellow);
410
+ --color-text-secondary: var(--color-text-yellow);
411
+ --color-warning: var(--color-text-yellow);
412
+ }
413
+
414
+ .astryx-banner.error {
415
+ --color-error-muted: var(--color-background-red);
416
+ --color-text-primary: var(--color-text-red);
417
+ --color-text-secondary: var(--color-text-red);
418
+ --color-error: var(--color-text-red);
419
+ }
420
+
421
+ .astryx-progressbar-fill.accent {
422
+ background-color: light-dark(#d7e4f5, #a0acbc);
423
+ }
424
+
425
+ .astryx-progressbar-fill.success {
426
+ background-color: light-dark(#d0e9ce, #9ab298);
427
+ }
428
+
429
+ .astryx-progressbar-fill.warning {
430
+ background-color: light-dark(#f4e1b7, #bbaa82);
431
+ }
432
+
433
+ .astryx-progressbar-fill.error {
434
+ background-color: light-dark(#f9dcd7, #c0a5a0);
435
+ }
436
+
437
+ .astryx-progressbar-track {
438
+ background-color: var(--color-skeleton);
439
+ }
440
+
441
+ .astryx-switch {
442
+ --color-background-gray: var(--color-skeleton);
443
+ }
444
+
445
+ .astryx-field-status.success {
446
+ background-color: var(--color-background-green);
447
+ }
448
+
449
+ .astryx-field-status.warning {
450
+ background-color: var(--color-background-yellow);
451
+ }
452
+
453
+ .astryx-field-status.error {
454
+ background-color: var(--color-background-red);
455
+ }
456
+
457
+ .astryx-text-input.success {
458
+ --color-success: light-dark(#7f977e, #99b298);
459
+ }
460
+
461
+ .astryx-text-input.warning {
462
+ --color-warning: light-dark(#9f8f68, #bbaa81);
463
+ }
464
+
465
+ .astryx-text-input.error {
466
+ --color-error: light-dark(#a58b86, #c0a5a1);
467
+ }
468
+
469
+ .astryx-textarea.success {
470
+ --color-success: light-dark(#7f977e, #99b298);
471
+ }
472
+
473
+ .astryx-textarea.warning {
474
+ --color-warning: light-dark(#9f8f68, #bbaa81);
475
+ }
476
+
477
+ .astryx-textarea.error {
478
+ --color-error: light-dark(#a58b86, #c0a5a1);
479
+ }
480
+
481
+ .astryx-number-input.success {
482
+ --color-success: light-dark(#7f977e, #99b298);
483
+ }
484
+
485
+ .astryx-number-input.warning {
486
+ --color-warning: light-dark(#9f8f68, #bbaa81);
487
+ }
488
+
489
+ .astryx-number-input.error {
490
+ --color-error: light-dark(#a58b86, #c0a5a1);
491
+ }
492
+
493
+ .astryx-date-input.success {
494
+ --color-success: light-dark(#7f977e, #99b298);
495
+ }
496
+
497
+ .astryx-date-input.warning {
498
+ --color-warning: light-dark(#9f8f68, #bbaa81);
499
+ }
500
+
501
+ .astryx-date-input.error {
502
+ --color-error: light-dark(#a58b86, #c0a5a1);
503
+ }
504
+
505
+ .astryx-time-input.success {
506
+ --color-success: light-dark(#7f977e, #99b298);
507
+ }
508
+
509
+ .astryx-time-input.warning {
510
+ --color-warning: light-dark(#9f8f68, #bbaa81);
511
+ }
512
+
513
+ .astryx-time-input.error {
514
+ --color-error: light-dark(#a58b86, #c0a5a1);
515
+ }
516
+
517
+ .astryx-selector.success {
518
+ --color-success: light-dark(#7f977e, #99b298);
519
+ }
520
+
521
+ .astryx-selector.warning {
522
+ --color-warning: light-dark(#9f8f68, #bbaa81);
523
+ }
524
+
525
+ .astryx-selector.error {
526
+ --color-error: light-dark(#a58b86, #c0a5a1);
527
+ }
528
+
529
+ .astryx-multi-selector.success {
530
+ --color-success: light-dark(#7f977e, #99b298);
531
+ }
532
+
533
+ .astryx-multi-selector.warning {
534
+ --color-warning: light-dark(#9f8f68, #bbaa81);
535
+ }
536
+
537
+ .astryx-multi-selector.error {
538
+ --color-error: light-dark(#a58b86, #c0a5a1);
539
+ }
540
+
541
+ .astryx-typeahead.success {
542
+ --color-success: light-dark(#7f977e, #99b298);
543
+ }
544
+
545
+ .astryx-typeahead.warning {
546
+ --color-warning: light-dark(#9f8f68, #bbaa81);
547
+ }
548
+
549
+ .astryx-typeahead.error {
550
+ --color-error: light-dark(#a58b86, #c0a5a1);
551
+ }
552
+
553
+ .astryx-tokenizer.success {
554
+ --color-success: light-dark(#7f977e, #99b298);
555
+ }
556
+
557
+ .astryx-tokenizer.warning {
558
+ --color-warning: light-dark(#9f8f68, #bbaa81);
559
+ }
560
+
561
+ .astryx-tokenizer.error {
562
+ --color-error: light-dark(#a58b86, #c0a5a1);
563
+ }
564
+
565
+ .astryx-card {
566
+ --astryx-card-padding: var(--spacing-3);
567
+ }
568
+
569
+ .astryx-section {
570
+ --astryx-section-padding: var(--spacing-3);
571
+ }
572
+
573
+ .astryx-text.primary { color: var(--color-text-primary); }
574
+
575
+ .astryx-heading.primary { color: var(--color-text-primary); }
576
+
577
+ .astryx-text.secondary { color: var(--color-text-secondary); }
578
+
579
+ .astryx-heading.secondary { color: var(--color-text-secondary); }
580
+
581
+ .astryx-text.disabled { color: var(--color-text-disabled); }
582
+
583
+ .astryx-heading.disabled { color: var(--color-text-disabled); }
584
+
585
+ .astryx-text.placeholder { color: var(--color-text-secondary); }
586
+
587
+ .astryx-heading.placeholder { color: var(--color-text-secondary); }
588
+
589
+ .astryx-text.active { color: var(--color-accent); }
590
+
591
+ .astryx-heading.active { color: var(--color-accent); }
592
+ }
593
+ }
594
+
595
+ @layer astryx-theme {
596
+ @scope ([data-astryx-theme="stone"]) to ([data-astryx-theme]) {
597
+ [data-astryx-media="dark"] {
598
+ color-scheme: dark;
599
+ --color-text-primary: var(--color-on-dark);
600
+ --color-icon-primary: var(--color-on-dark);
601
+ --color-accent: var(--color-on-dark);
602
+ }
603
+
604
+ [data-astryx-media="light"] {
605
+ color-scheme: light;
606
+ --color-text-primary: var(--color-on-light);
607
+ --color-icon-primary: var(--color-on-light);
608
+ --color-accent: var(--color-on-light);
609
+ }
610
+ }
611
+ }
package/package.json CHANGED
@@ -1,11 +1,62 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-stone",
3
- "version": "0.0.0-bootstrap.0",
4
- "description": "Placeholder published to claim the npm name during trusted publishing setup. Do not install.",
5
- "homepage": "https://github.com/facebook/astryx",
3
+ "version": "0.0.15",
4
+ "displayName": "Stone Theme",
5
+ "private": false,
6
+ "description": "Warm stone and slate, earthy and understated, with just enough character to feel handcrafted.",
7
+ "author": "Meta Open Source",
6
8
  "license": "MIT",
9
+ "homepage": "https://github.com/facebook/astryx#readme",
7
10
  "repository": {
8
11
  "type": "git",
9
- "url": "git+https://github.com/facebook/astryx.git"
12
+ "url": "git+https://github.com/facebook/astryx.git",
13
+ "directory": "packages/themes/stone"
14
+ },
15
+ "bugs": {
16
+ "url": "https://github.com/facebook/astryx/issues"
17
+ },
18
+ "keywords": [
19
+ "xds",
20
+ "theme",
21
+ "design-system",
22
+ "lucide",
23
+ "design-tokens"
24
+ ],
25
+ "sideEffects": false,
26
+ "main": "./dist/source.js",
27
+ "types": "./dist/source.d.ts",
28
+ "exports": {
29
+ ".": {
30
+ "types": "./dist/source.d.ts",
31
+ "import": "./dist/source.mjs",
32
+ "require": "./dist/source.js"
33
+ },
34
+ "./built": {
35
+ "types": "./dist/stone.d.ts",
36
+ "import": "./dist/stone.js",
37
+ "require": "./dist/stone.js"
38
+ },
39
+ "./theme.css": {
40
+ "types": "./theme.css.d.ts",
41
+ "default": "./dist/theme.css"
42
+ }
43
+ },
44
+ "files": [
45
+ "dist",
46
+ "src"
47
+ ],
48
+ "dependencies": {
49
+ "lucide-react": "^1.18.0"
50
+ },
51
+ "peerDependencies": {
52
+ "@astryxdesign/core": "0.0.15",
53
+ "react": ">=19"
54
+ },
55
+ "devDependencies": {
56
+ "@astryxdesign/cli": "0.0.15"
57
+ },
58
+ "module": "./dist/source.mjs",
59
+ "scripts": {
60
+ "build": "astryx theme build src/stoneTheme.ts -o dist/theme.css && tsup && tsc --project tsconfig.build.json"
10
61
  }
11
- }
62
+ }