@astryxdesign/theme-neutral 0.4.2 → 0.4.3-canary.00bed29

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 (9) hide show
  1. package/dist/neutral.d.ts +2 -2
  2. package/dist/neutral.js +252 -2
  3. package/dist/neutral.variants.d.ts +2 -2
  4. package/dist/neutralTheme.d.ts.map +1 -1
  5. package/dist/source.js +6 -4
  6. package/dist/source.mjs +6 -4
  7. package/dist/theme.css +3 -4
  8. package/package.json +4 -4
  9. package/src/neutralTheme.ts +6 -4
package/dist/neutral.d.ts CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/neutralTheme.ts
4
4
  * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.4.2
6
- * Core: @astryxdesign/core@0.4.2
5
+ * CLI: @astryxdesign/cli@0.4.3
6
+ * Core: @astryxdesign/core@0.4.3
7
7
  */
8
8
 
9
9
  /// <reference path="./neutral.variants.d.ts" />
package/dist/neutral.js CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/neutralTheme.ts
4
4
  * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.4.2
6
- * Core: @astryxdesign/core@0.4.2
5
+ * CLI: @astryxdesign/cli@0.4.3
6
+ * Core: @astryxdesign/core@0.4.3
7
7
  */
8
8
 
9
9
  import { neutralIconRegistry } from "./icons.mjs";
@@ -189,6 +189,256 @@ export const neutralTheme = {
189
189
  "--shadow-inset-warning": "inset 0px 0px 0px 2px #ffce2f4D",
190
190
  "--shadow-inset-error": "inset 0px 0px 0px 2px #e33f4a4D"
191
191
  },
192
+ components: {
193
+ "heading": {
194
+ "level:1": {
195
+ "fontFamily": "var(--font-family-heading)",
196
+ "fontSize": "var(--text-heading-1-size)",
197
+ "fontWeight": "var(--text-heading-1-weight)",
198
+ "lineHeight": "var(--text-heading-1-leading)"
199
+ },
200
+ "level:2": {
201
+ "fontFamily": "var(--font-family-heading)",
202
+ "fontSize": "var(--text-heading-2-size)",
203
+ "fontWeight": "var(--text-heading-2-weight)",
204
+ "lineHeight": "var(--text-heading-2-leading)"
205
+ },
206
+ "level:3": {
207
+ "fontFamily": "var(--font-family-heading)",
208
+ "fontSize": "var(--text-heading-3-size)",
209
+ "fontWeight": "var(--text-heading-3-weight)",
210
+ "lineHeight": "var(--text-heading-3-leading)"
211
+ },
212
+ "level:4": {
213
+ "fontFamily": "var(--font-family-heading)",
214
+ "fontSize": "var(--text-heading-4-size)",
215
+ "fontWeight": "var(--text-heading-4-weight)",
216
+ "lineHeight": "var(--text-heading-4-leading)"
217
+ },
218
+ "level:5": {
219
+ "fontFamily": "var(--font-family-heading)",
220
+ "fontSize": "var(--text-heading-5-size)",
221
+ "fontWeight": "var(--text-heading-5-weight)",
222
+ "lineHeight": "var(--text-heading-5-leading)"
223
+ },
224
+ "level:6": {
225
+ "fontFamily": "var(--font-family-heading)",
226
+ "fontSize": "var(--text-heading-6-size)",
227
+ "fontWeight": "var(--text-heading-6-weight)",
228
+ "lineHeight": "var(--text-heading-6-leading)"
229
+ },
230
+ "type:display-1": {
231
+ "fontFamily": "var(--font-family-heading)",
232
+ "fontSize": "var(--text-display-1-size)",
233
+ "lineHeight": "var(--text-display-1-leading)"
234
+ },
235
+ "type:display-2": {
236
+ "fontFamily": "var(--font-family-heading)",
237
+ "fontSize": "var(--text-display-2-size)",
238
+ "lineHeight": "var(--text-display-2-leading)"
239
+ },
240
+ "type:display-3": {
241
+ "fontFamily": "var(--font-family-heading)",
242
+ "fontSize": "var(--text-display-3-size)",
243
+ "lineHeight": "var(--text-display-3-leading)"
244
+ }
245
+ },
246
+ "text": {
247
+ "type:body": {
248
+ "fontFamily": "var(--font-family-body)",
249
+ "fontSize": "var(--text-body-size)",
250
+ "lineHeight": "var(--text-body-leading)"
251
+ },
252
+ "type:large": {
253
+ "fontFamily": "var(--font-family-body)",
254
+ "fontSize": "var(--text-large-size)",
255
+ "lineHeight": "var(--text-large-leading)"
256
+ },
257
+ "type:label": {
258
+ "fontFamily": "var(--font-family-body)",
259
+ "fontSize": "var(--text-label-size)",
260
+ "lineHeight": "var(--text-label-leading)"
261
+ },
262
+ "type:code": {
263
+ "fontFamily": "var(--font-family-code)",
264
+ "fontSize": "var(--text-code-size)",
265
+ "lineHeight": "var(--text-code-leading)"
266
+ },
267
+ "type:supporting": {
268
+ "fontFamily": "var(--font-family-body)",
269
+ "fontSize": "var(--text-supporting-size)",
270
+ "lineHeight": "var(--text-supporting-leading)"
271
+ },
272
+ "type:display-1": {
273
+ "fontFamily": "var(--font-family-heading)",
274
+ "fontSize": "var(--text-display-1-size)",
275
+ "lineHeight": "var(--text-display-1-leading)"
276
+ },
277
+ "type:display-2": {
278
+ "fontFamily": "var(--font-family-heading)",
279
+ "fontSize": "var(--text-display-2-size)",
280
+ "lineHeight": "var(--text-display-2-leading)"
281
+ },
282
+ "type:display-3": {
283
+ "fontFamily": "var(--font-family-heading)",
284
+ "fontSize": "var(--text-display-3-size)",
285
+ "lineHeight": "var(--text-display-3-leading)"
286
+ }
287
+ },
288
+ "button": {
289
+ "variant:destructive": {
290
+ "backgroundColor": "var(--color-error-muted)",
291
+ "color": "var(--color-error)"
292
+ }
293
+ },
294
+ "badge": {
295
+ "variant:info": {
296
+ "backgroundColor": "light-dark(#0074e2, #6d9cfe)",
297
+ "color": "light-dark(#ffffff, #171717)"
298
+ },
299
+ "variant:neutral": {
300
+ "backgroundColor": "var(--color-background-gray)",
301
+ "color": "var(--color-text-gray)"
302
+ },
303
+ "variant:success": {
304
+ "backgroundColor": "light-dark(#198100, #64af4c)",
305
+ "color": "light-dark(#ffffff, #171717)"
306
+ },
307
+ "variant:warning": {
308
+ "backgroundColor": "#ffce2f",
309
+ "color": "#171717"
310
+ },
311
+ "variant:error": {
312
+ "backgroundColor": "light-dark(#e33f4a, #ff705d)",
313
+ "color": "light-dark(#ffffff, #171717)"
314
+ },
315
+ "variant:red": {
316
+ "backgroundColor": "var(--color-background-red)",
317
+ "color": "var(--color-text-red)"
318
+ },
319
+ "variant:orange": {
320
+ "backgroundColor": "var(--color-background-orange)",
321
+ "color": "var(--color-text-orange)"
322
+ },
323
+ "variant:yellow": {
324
+ "backgroundColor": "var(--color-background-yellow)",
325
+ "color": "var(--color-text-yellow)"
326
+ },
327
+ "variant:green": {
328
+ "backgroundColor": "var(--color-background-green)",
329
+ "color": "var(--color-text-green)"
330
+ },
331
+ "variant:teal": {
332
+ "backgroundColor": "var(--color-background-teal)",
333
+ "color": "var(--color-text-teal)"
334
+ },
335
+ "variant:cyan": {
336
+ "backgroundColor": "var(--color-background-cyan)",
337
+ "color": "var(--color-text-cyan)"
338
+ },
339
+ "variant:blue": {
340
+ "backgroundColor": "var(--color-background-blue)",
341
+ "color": "var(--color-text-blue)"
342
+ },
343
+ "variant:purple": {
344
+ "backgroundColor": "var(--color-background-purple)",
345
+ "color": "var(--color-text-purple)"
346
+ },
347
+ "variant:pink": {
348
+ "backgroundColor": "var(--color-background-pink)",
349
+ "color": "var(--color-text-pink)"
350
+ },
351
+ "variant:gray": {
352
+ "backgroundColor": "var(--color-background-gray)",
353
+ "color": "var(--color-text-gray)"
354
+ }
355
+ },
356
+ "statusdot": {
357
+ "variant:success": {
358
+ "backgroundColor": "light-dark(#198100, #64af4c)"
359
+ },
360
+ "variant:warning": {
361
+ "backgroundColor": "#ffce2f"
362
+ },
363
+ "variant:error": {
364
+ "backgroundColor": "light-dark(#e33f4a, #ff705d)"
365
+ },
366
+ "variant:accent": {
367
+ "backgroundColor": "light-dark(#0074e2, #6d9cfe)"
368
+ }
369
+ },
370
+ "banner": {
371
+ "status:info": {
372
+ "--color-accent-muted": "var(--color-background-blue)",
373
+ "--color-text-primary": "var(--color-text-blue)",
374
+ "--color-text-secondary": "var(--color-text-blue)",
375
+ "--color-accent": "var(--color-text-blue)"
376
+ },
377
+ "status:success": {
378
+ "--color-text-primary": "var(--color-text-green)",
379
+ "--color-text-secondary": "var(--color-text-green)",
380
+ "--color-success": "var(--color-text-green)"
381
+ },
382
+ "status:warning": {
383
+ "--color-text-primary": "var(--color-text-yellow)",
384
+ "--color-text-secondary": "var(--color-text-yellow)",
385
+ "--color-warning": "var(--color-text-yellow)"
386
+ },
387
+ "status:error": {
388
+ "--color-text-primary": "var(--color-text-red)",
389
+ "--color-text-secondary": "var(--color-text-red)",
390
+ "--color-error": "var(--color-text-red)"
391
+ }
392
+ },
393
+ "switch": {
394
+ "base": {
395
+ "--color-background-gray": "var(--color-border-emphasized)"
396
+ }
397
+ },
398
+ "progressbar": {
399
+ "base": {
400
+ "--color-background-muted": "var(--color-border-emphasized)"
401
+ },
402
+ "variant:accent": {
403
+ "--color-accent": "#0074e2"
404
+ },
405
+ "variant:success": {
406
+ "--color-success": "#198100"
407
+ },
408
+ "variant:warning": {
409
+ "--color-warning": "#ffce2f"
410
+ },
411
+ "variant:error": {
412
+ "--color-error": "#e33f4a"
413
+ }
414
+ },
415
+ "card": {
416
+ "base": {
417
+ "padding": "var(--spacing-3)"
418
+ }
419
+ },
420
+ "section": {
421
+ "base": {
422
+ "padding": "var(--spacing-3)"
423
+ }
424
+ }
425
+ },
426
+ __onDark: {
427
+ "tokens": {
428
+ "color-scheme": "dark",
429
+ "--color-text-primary": "var(--color-on-dark)",
430
+ "--color-icon-primary": "var(--color-on-dark)",
431
+ "--color-accent": "var(--color-on-dark)"
432
+ }
433
+ },
434
+ __onLight: {
435
+ "tokens": {
436
+ "color-scheme": "light",
437
+ "--color-text-primary": "var(--color-on-light)",
438
+ "--color-icon-primary": "var(--color-on-light)",
439
+ "--color-accent": "var(--color-on-light)"
440
+ }
441
+ },
192
442
  icons: neutralIconRegistry,
193
443
  };
194
444
 
package/dist/neutral.variants.d.ts CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/neutralTheme.ts
4
4
  * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.4.2
6
- * Core: @astryxdesign/core@0.4.2
5
+ * CLI: @astryxdesign/cli@0.4.3
6
+ * Core: @astryxdesign/core@0.4.3
7
7
  */
8
8
 
9
9
  // Generated by astryx theme build
package/dist/neutralTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AA0DA,eAAO,MAAM,YAAY,iDAqkBvB,CAAC"}
1
+ {"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AA0DA,eAAO,MAAM,YAAY,iDAukBvB,CAAC"}
package/dist/source.js CHANGED
@@ -530,15 +530,17 @@ var neutralTheme = (0, import_theme.defineTheme)({
530
530
  // to a deep tinted bg + light text rather than locking the
531
531
  // light-mode pastel.
532
532
  //
533
- // The inner-header *-muted token is forced transparent so the outer
534
- // tinted background shows through cleanly.
533
+ // The inner-header *-muted token carries the tinted background for every
534
+ // status, info included. A theme override that sets a plain CSS property
535
+ // instead lands in @layer astryx-theme, which StyleX's @layer priority4
536
+ // outranks, so `backgroundColor` here would silently do nothing and the
537
+ // info banner would paint no background at all.
535
538
  //
536
539
  // Status overrides reference --color-text-{hue} so text/icon colors
537
540
  // stay in sync with the palette anchors automatically.
538
541
  banner: {
539
542
  "status:info": {
540
- backgroundColor: "var(--color-background-blue)",
541
- "--color-accent-muted": "transparent",
543
+ "--color-accent-muted": "var(--color-background-blue)",
542
544
  "--color-text-primary": "var(--color-text-blue)",
543
545
  "--color-text-secondary": "var(--color-text-blue)",
544
546
  "--color-accent": "var(--color-text-blue)"
package/dist/source.mjs CHANGED
@@ -467,15 +467,17 @@ var neutralTheme = defineTheme({
467
467
  // to a deep tinted bg + light text rather than locking the
468
468
  // light-mode pastel.
469
469
  //
470
- // The inner-header *-muted token is forced transparent so the outer
471
- // tinted background shows through cleanly.
470
+ // The inner-header *-muted token carries the tinted background for every
471
+ // status, info included. A theme override that sets a plain CSS property
472
+ // instead lands in @layer astryx-theme, which StyleX's @layer priority4
473
+ // outranks, so `backgroundColor` here would silently do nothing and the
474
+ // info banner would paint no background at all.
472
475
  //
473
476
  // Status overrides reference --color-text-{hue} so text/icon colors
474
477
  // stay in sync with the palette anchors automatically.
475
478
  banner: {
476
479
  "status:info": {
477
- backgroundColor: "var(--color-background-blue)",
478
- "--color-accent-muted": "transparent",
480
+ "--color-accent-muted": "var(--color-background-blue)",
479
481
  "--color-text-primary": "var(--color-text-blue)",
480
482
  "--color-text-secondary": "var(--color-text-blue)",
481
483
  "--color-accent": "var(--color-text-blue)"
package/dist/theme.css CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/neutralTheme.ts
4
4
  * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.4.2
6
- * Core: @astryxdesign/core@0.4.2
5
+ * CLI: @astryxdesign/cli@0.4.3
6
+ * Core: @astryxdesign/core@0.4.3
7
7
  */
8
8
 
9
9
  @layer reset {
@@ -461,8 +461,7 @@
461
461
  }
462
462
 
463
463
  .astryx-banner.info {
464
- background-color: var(--color-background-blue);
465
- --color-accent-muted: transparent;
464
+ --color-accent-muted: var(--color-background-blue);
466
465
  --color-text-primary: var(--color-text-blue);
467
466
  --color-text-secondary: var(--color-text-blue);
468
467
  --color-accent: var(--color-text-blue);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-neutral",
3
- "version": "0.4.2",
3
+ "version": "0.4.3-canary.00bed29",
4
4
  "displayName": "Neutral Theme",
5
5
  "private": false,
6
6
  "description": "Restrained warm grays. Minimal and quiet, so the content stays the focus.",
@@ -49,14 +49,14 @@
49
49
  "lucide-react": "^1.18.0"
50
50
  },
51
51
  "peerDependencies": {
52
- "@astryxdesign/core": "0.4.2",
52
+ "@astryxdesign/core": "0.4.3-canary.00bed29",
53
53
  "react": ">=19"
54
54
  },
55
55
  "devDependencies": {
56
- "@astryxdesign/cli": "0.4.2"
56
+ "@astryxdesign/cli": "0.4.3-canary.00bed29"
57
57
  },
58
58
  "module": "./dist/source.mjs",
59
59
  "scripts": {
60
- "build": "astryx theme build src/neutralTheme.ts -o dist/theme.css --icons-specifier ./icons.mjs && tsup && tsc --project tsconfig.build.json"
60
+ "build": "astryx theme build src/neutralTheme.ts -o dist/theme.css --icons-specifier ./icons.mjs && tsup && tsc --project tsconfig.build.json && node ../../../scripts/check-fully-specified.mjs"
61
61
  }
62
62
  }
package/src/neutralTheme.ts CHANGED
@@ -528,15 +528,17 @@ export const neutralTheme = defineTheme({
528
528
  // to a deep tinted bg + light text rather than locking the
529
529
  // light-mode pastel.
530
530
  //
531
- // The inner-header *-muted token is forced transparent so the outer
532
- // tinted background shows through cleanly.
531
+ // The inner-header *-muted token carries the tinted background for every
532
+ // status, info included. A theme override that sets a plain CSS property
533
+ // instead lands in @layer astryx-theme, which StyleX's @layer priority4
534
+ // outranks, so `backgroundColor` here would silently do nothing and the
535
+ // info banner would paint no background at all.
533
536
  //
534
537
  // Status overrides reference --color-text-{hue} so text/icon colors
535
538
  // stay in sync with the palette anchors automatically.
536
539
  banner: {
537
540
  'status:info': {
538
- backgroundColor: 'var(--color-background-blue)',
539
- '--color-accent-muted': 'transparent',
541
+ '--color-accent-muted': 'var(--color-background-blue)',
540
542
  '--color-text-primary': 'var(--color-text-blue)',
541
543
  '--color-text-secondary': 'var(--color-text-blue)',
542
544
  '--color-accent': 'var(--color-text-blue)',