@astryxdesign/theme-neutral 0.4.7 → 0.5.0-canary.07f6c33

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 +5 -5
  3. package/dist/neutral.variants.d.ts +2 -2
  4. package/dist/neutralTheme.d.ts.map +1 -1
  5. package/dist/source.js +11 -7
  6. package/dist/source.mjs +11 -7
  7. package/dist/theme.css +5 -5
  8. package/package.json +3 -3
  9. package/src/neutralTheme.ts +13 -8
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.7
6
- * Core: @astryxdesign/core@0.4.7
5
+ * CLI: @astryxdesign/cli@0.5.0
6
+ * Core: @astryxdesign/core@0.5.0
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.7
6
- * Core: @astryxdesign/core@0.4.7
5
+ * CLI: @astryxdesign/cli@0.5.0
6
+ * Core: @astryxdesign/core@0.5.0
7
7
  */
8
8
 
9
9
  import { neutralIconRegistry } from "./icons.mjs";
@@ -309,7 +309,7 @@ export const neutralTheme = {
309
309
  "color": "#171717"
310
310
  },
311
311
  "variant:error": {
312
- "backgroundColor": "light-dark(#e33f4a, #ff705d)",
312
+ "backgroundColor": "light-dark(#c9303a, #ff705d)",
313
313
  "color": "light-dark(#ffffff, #171717)"
314
314
  },
315
315
  "variant:red": {
@@ -361,7 +361,7 @@ export const neutralTheme = {
361
361
  "backgroundColor": "#ffce2f"
362
362
  },
363
363
  "variant:error": {
364
- "backgroundColor": "light-dark(#e33f4a, #ff705d)"
364
+ "backgroundColor": "light-dark(#c9303a, #ff705d)"
365
365
  },
366
366
  "variant:accent": {
367
367
  "backgroundColor": "light-dark(#0074e2, #6d9cfe)"
@@ -409,7 +409,7 @@ export const neutralTheme = {
409
409
  "--color-warning": "#ffce2f"
410
410
  },
411
411
  "variant:error": {
412
- "--color-error": "#e33f4a"
412
+ "--color-error": "#c9303a"
413
413
  }
414
414
  },
415
415
  "card": {
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.7
6
- * Core: @astryxdesign/core@0.4.7
5
+ * CLI: @astryxdesign/cli@0.5.0
6
+ * Core: @astryxdesign/core@0.5.0
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,iDAukBvB,CAAC"}
1
+ {"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AA2DA,eAAO,MAAM,YAAY,iDA2kBvB,CAAC"}
package/dist/source.js CHANGED
@@ -437,10 +437,14 @@ var neutralTheme = (0, import_theme.defineTheme)({
437
437
  color: "#171717"
438
438
  },
439
439
  "variant:error": {
440
- // Light: T55 #e33f4a (palette saturated stop)
440
+ // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
441
+ // 4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
442
+ // large-text allowance. One tonal step down holds the hue
443
+ // (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
441
444
  // Dark : T60 stop from dark-mode tonal palette of Tailwind red-600
442
- // source #dc2626 (kept on H=27 alarm-red rather than coral)
443
- backgroundColor: "light-dark(#e33f4a, #ff705d)",
445
+ // source #dc2626 (kept on H=27 alarm-red rather than coral).
446
+ // Dark text on it is 6.60:1 and unchanged.
447
+ backgroundColor: "light-dark(#c9303a, #ff705d)",
444
448
  color: "light-dark(#ffffff, #171717)"
445
449
  },
446
450
  // Categorical — bg + text reference the per-hue tokens, so behavior
@@ -503,7 +507,7 @@ var neutralTheme = (0, import_theme.defineTheme)({
503
507
  //
504
508
  // success → badge success bg (green T45 / dark-ramp T60)
505
509
  // warning → badge warning bg (yellow T85, same hex both modes)
506
- // error → badge error bg (red T55 / dark-ramp T60)
510
+ // error → badge error bg (red T58 / dark-ramp T60)
507
511
  // accent → badge info bg (blue T50 / dark-ramp T60) — the
508
512
  // StatusDot "accent" is the info/attention color, so it
509
513
  // pairs with the info badge rather than --color-accent
@@ -518,7 +522,7 @@ var neutralTheme = (0, import_theme.defineTheme)({
518
522
  statusdot: {
519
523
  "variant:success": { backgroundColor: "light-dark(#198100, #64af4c)" },
520
524
  "variant:warning": { backgroundColor: "#ffce2f" },
521
- "variant:error": { backgroundColor: "light-dark(#e33f4a, #ff705d)" },
525
+ "variant:error": { backgroundColor: "light-dark(#c9303a, #ff705d)" },
522
526
  "variant:accent": { backgroundColor: "light-dark(#0074e2, #6d9cfe)" }
523
527
  },
524
528
  // =========================================================================
@@ -610,8 +614,8 @@ var neutralTheme = (0, import_theme.defineTheme)({
610
614
  "--color-warning": "#ffce2f"
611
615
  },
612
616
  "variant:error": {
613
- // Red T55 saturated stop (= variant:error badge bg)
614
- "--color-error": "#e33f4a"
617
+ // Red T58 saturated stop (= variant:error badge bg)
618
+ "--color-error": "#c9303a"
615
619
  }
616
620
  },
617
621
  // =========================================================================
package/dist/source.mjs CHANGED
@@ -374,10 +374,14 @@ var neutralTheme = defineTheme({
374
374
  color: "#171717"
375
375
  },
376
376
  "variant:error": {
377
- // Light: T55 #e33f4a (palette saturated stop)
377
+ // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
378
+ // 4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
379
+ // large-text allowance. One tonal step down holds the hue
380
+ // (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
378
381
  // Dark : T60 stop from dark-mode tonal palette of Tailwind red-600
379
- // source #dc2626 (kept on H=27 alarm-red rather than coral)
380
- backgroundColor: "light-dark(#e33f4a, #ff705d)",
382
+ // source #dc2626 (kept on H=27 alarm-red rather than coral).
383
+ // Dark text on it is 6.60:1 and unchanged.
384
+ backgroundColor: "light-dark(#c9303a, #ff705d)",
381
385
  color: "light-dark(#ffffff, #171717)"
382
386
  },
383
387
  // Categorical — bg + text reference the per-hue tokens, so behavior
@@ -440,7 +444,7 @@ var neutralTheme = defineTheme({
440
444
  //
441
445
  // success → badge success bg (green T45 / dark-ramp T60)
442
446
  // warning → badge warning bg (yellow T85, same hex both modes)
443
- // error → badge error bg (red T55 / dark-ramp T60)
447
+ // error → badge error bg (red T58 / dark-ramp T60)
444
448
  // accent → badge info bg (blue T50 / dark-ramp T60) — the
445
449
  // StatusDot "accent" is the info/attention color, so it
446
450
  // pairs with the info badge rather than --color-accent
@@ -455,7 +459,7 @@ var neutralTheme = defineTheme({
455
459
  statusdot: {
456
460
  "variant:success": { backgroundColor: "light-dark(#198100, #64af4c)" },
457
461
  "variant:warning": { backgroundColor: "#ffce2f" },
458
- "variant:error": { backgroundColor: "light-dark(#e33f4a, #ff705d)" },
462
+ "variant:error": { backgroundColor: "light-dark(#c9303a, #ff705d)" },
459
463
  "variant:accent": { backgroundColor: "light-dark(#0074e2, #6d9cfe)" }
460
464
  },
461
465
  // =========================================================================
@@ -547,8 +551,8 @@ var neutralTheme = defineTheme({
547
551
  "--color-warning": "#ffce2f"
548
552
  },
549
553
  "variant:error": {
550
- // Red T55 saturated stop (= variant:error badge bg)
551
- "--color-error": "#e33f4a"
554
+ // Red T58 saturated stop (= variant:error badge bg)
555
+ "--color-error": "#c9303a"
552
556
  }
553
557
  },
554
558
  // =========================================================================
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.7
6
- * Core: @astryxdesign/core@0.4.7
5
+ * CLI: @astryxdesign/cli@0.5.0
6
+ * Core: @astryxdesign/core@0.5.0
7
7
  */
8
8
 
9
9
  @layer reset {
@@ -390,7 +390,7 @@
390
390
  }
391
391
 
392
392
  .astryx-badge.error {
393
- background-color: light-dark(#e33f4a, #ff705d);
393
+ background-color: light-dark(#c9303a, #ff705d);
394
394
  color: light-dark(#ffffff, #171717);
395
395
  }
396
396
 
@@ -453,7 +453,7 @@
453
453
  }
454
454
 
455
455
  .astryx-statusdot.error {
456
- background-color: light-dark(#e33f4a, #ff705d);
456
+ background-color: light-dark(#c9303a, #ff705d);
457
457
  }
458
458
 
459
459
  .astryx-statusdot.accent {
@@ -506,7 +506,7 @@
506
506
  }
507
507
 
508
508
  .astryx-progressbar.error {
509
- --color-error: #e33f4a;
509
+ --color-error: #c9303a;
510
510
  }
511
511
 
512
512
  .astryx-card {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-neutral",
3
- "version": "0.4.7",
3
+ "version": "0.5.0-canary.07f6c33",
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,11 +49,11 @@
49
49
  "lucide-react": "^1.18.0"
50
50
  },
51
51
  "peerDependencies": {
52
- "@astryxdesign/core": "0.4.7",
52
+ "@astryxdesign/core": "0.5.0-canary.07f6c33",
53
53
  "react": ">=19"
54
54
  },
55
55
  "devDependencies": {
56
- "@astryxdesign/cli": "0.4.7",
56
+ "@astryxdesign/cli": "0.5.0-canary.07f6c33",
57
57
  "rimraf": "^6.0.1"
58
58
  },
59
59
  "module": "./dist/source.mjs",
package/src/neutralTheme.ts CHANGED
@@ -24,7 +24,8 @@
24
24
  * icon = T30 / T80
25
25
  * text = T30 / T80
26
26
  *
27
- * All 9 saturated badge values pass WCAG AA (5.6–9.6 contrast range).
27
+ * All 9 saturated badge values pass WCAG AA against their label (>= 4.5:1);
28
+ * `scripts/check-badge-contrast.test.mjs` holds every theme to that.
28
29
  *
29
30
  * Only overrides tokens that differ from the defaults.
30
31
  */
@@ -432,10 +433,14 @@ export const neutralTheme = defineTheme({
432
433
  color: '#171717',
433
434
  },
434
435
  'variant:error': {
435
- // Light: T55 #e33f4a (palette saturated stop)
436
+ // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
437
+ // 4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
438
+ // large-text allowance. One tonal step down holds the hue
439
+ // (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
436
440
  // Dark : T60 stop from dark-mode tonal palette of Tailwind red-600
437
- // source #dc2626 (kept on H=27 alarm-red rather than coral)
438
- backgroundColor: 'light-dark(#e33f4a, #ff705d)',
441
+ // source #dc2626 (kept on H=27 alarm-red rather than coral).
442
+ // Dark text on it is 6.60:1 and unchanged.
443
+ backgroundColor: 'light-dark(#c9303a, #ff705d)',
439
444
  color: 'light-dark(#ffffff, #171717)',
440
445
  },
441
446
 
@@ -500,7 +505,7 @@ export const neutralTheme = defineTheme({
500
505
  //
501
506
  // success → badge success bg (green T45 / dark-ramp T60)
502
507
  // warning → badge warning bg (yellow T85, same hex both modes)
503
- // error → badge error bg (red T55 / dark-ramp T60)
508
+ // error → badge error bg (red T58 / dark-ramp T60)
504
509
  // accent → badge info bg (blue T50 / dark-ramp T60) — the
505
510
  // StatusDot "accent" is the info/attention color, so it
506
511
  // pairs with the info badge rather than --color-accent
@@ -515,7 +520,7 @@ export const neutralTheme = defineTheme({
515
520
  statusdot: {
516
521
  'variant:success': {backgroundColor: 'light-dark(#198100, #64af4c)'},
517
522
  'variant:warning': {backgroundColor: '#ffce2f'},
518
- 'variant:error': {backgroundColor: 'light-dark(#e33f4a, #ff705d)'},
523
+ 'variant:error': {backgroundColor: 'light-dark(#c9303a, #ff705d)'},
519
524
  'variant:accent': {backgroundColor: 'light-dark(#0074e2, #6d9cfe)'},
520
525
  },
521
526
 
@@ -611,8 +616,8 @@ export const neutralTheme = defineTheme({
611
616
  '--color-warning': '#ffce2f',
612
617
  },
613
618
  'variant:error': {
614
- // Red T55 saturated stop (= variant:error badge bg)
615
- '--color-error': '#e33f4a',
619
+ // Red T58 saturated stop (= variant:error badge bg)
620
+ '--color-error': '#c9303a',
616
621
  },
617
622
  },
618
623