@astryxdesign/theme-neutral 0.4.7 → 0.5.0-canary.055e75f

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 +6 -6
  3. package/dist/neutral.variants.d.ts +2 -2
  4. package/dist/neutralTheme.d.ts.map +1 -1
  5. package/dist/source.js +15 -9
  6. package/dist/source.mjs +15 -9
  7. package/dist/theme.css +6 -6
  8. package/package.json +3 -3
  9. package/src/neutralTheme.ts +16 -9
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";
@@ -96,7 +96,7 @@ export const neutralTheme = {
96
96
  "--color-syntax-tag": "light-dark(#89001a, #ffaeaa)",
97
97
  "--color-syntax-attribute": "light-dark(#584400, #eec12f)",
98
98
  "--color-syntax-property": "light-dark(#005348, #83dac9)",
99
- "--color-syntax-punctuation": "light-dark(#a3a3a3, #525252)",
99
+ "--color-syntax-punctuation": "light-dark(#6e6e6e, #a0a0a0)",
100
100
  "--color-syntax-background": "light-dark(#fafafa, #0a0a0a)",
101
101
  "--color-background-surface": "light-dark(#ffffff, #262626)",
102
102
  "--color-background-body": "light-dark(#f1f1f1, #1b1b1b)",
@@ -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":"AA6DA,eAAO,MAAM,YAAY,iDA2kBvB,CAAC"}
package/dist/source.js CHANGED
@@ -94,8 +94,10 @@ var neutralSyntax = (0, import_theme.defineSyntaxTheme)({
94
94
  // yellow
95
95
  property: ["#005348", "#83dac9"],
96
96
  // teal
97
- punctuation: ["#a3a3a3", "#525252"],
98
- // neutral
97
+ // #a3a3a3/#525252 (this pair's own disabled-text tone) failed WCAG AA
98
+ // against the syntax background: 2.42:1 light, 2.53:1 dark. #5386.
99
+ punctuation: ["#6e6e6e", "#a0a0a0"],
100
+ // neutral, 4.89:1 / 7.57:1
99
101
  background: ["#fafafa", "#0a0a0a"]
100
102
  }
101
103
  });
@@ -437,10 +439,14 @@ var neutralTheme = (0, import_theme.defineTheme)({
437
439
  color: "#171717"
438
440
  },
439
441
  "variant:error": {
440
- // Light: T55 #e33f4a (palette saturated stop)
442
+ // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
443
+ // 4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
444
+ // large-text allowance. One tonal step down holds the hue
445
+ // (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
441
446
  // 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)",
447
+ // source #dc2626 (kept on H=27 alarm-red rather than coral).
448
+ // Dark text on it is 6.60:1 and unchanged.
449
+ backgroundColor: "light-dark(#c9303a, #ff705d)",
444
450
  color: "light-dark(#ffffff, #171717)"
445
451
  },
446
452
  // Categorical — bg + text reference the per-hue tokens, so behavior
@@ -503,7 +509,7 @@ var neutralTheme = (0, import_theme.defineTheme)({
503
509
  //
504
510
  // success → badge success bg (green T45 / dark-ramp T60)
505
511
  // warning → badge warning bg (yellow T85, same hex both modes)
506
- // error → badge error bg (red T55 / dark-ramp T60)
512
+ // error → badge error bg (red T58 / dark-ramp T60)
507
513
  // accent → badge info bg (blue T50 / dark-ramp T60) — the
508
514
  // StatusDot "accent" is the info/attention color, so it
509
515
  // pairs with the info badge rather than --color-accent
@@ -518,7 +524,7 @@ var neutralTheme = (0, import_theme.defineTheme)({
518
524
  statusdot: {
519
525
  "variant:success": { backgroundColor: "light-dark(#198100, #64af4c)" },
520
526
  "variant:warning": { backgroundColor: "#ffce2f" },
521
- "variant:error": { backgroundColor: "light-dark(#e33f4a, #ff705d)" },
527
+ "variant:error": { backgroundColor: "light-dark(#c9303a, #ff705d)" },
522
528
  "variant:accent": { backgroundColor: "light-dark(#0074e2, #6d9cfe)" }
523
529
  },
524
530
  // =========================================================================
@@ -610,8 +616,8 @@ var neutralTheme = (0, import_theme.defineTheme)({
610
616
  "--color-warning": "#ffce2f"
611
617
  },
612
618
  "variant:error": {
613
- // Red T55 saturated stop (= variant:error badge bg)
614
- "--color-error": "#e33f4a"
619
+ // Red T58 saturated stop (= variant:error badge bg)
620
+ "--color-error": "#c9303a"
615
621
  }
616
622
  },
617
623
  // =========================================================================
package/dist/source.mjs CHANGED
@@ -31,8 +31,10 @@ var neutralSyntax = defineSyntaxTheme({
31
31
  // yellow
32
32
  property: ["#005348", "#83dac9"],
33
33
  // teal
34
- punctuation: ["#a3a3a3", "#525252"],
35
- // neutral
34
+ // #a3a3a3/#525252 (this pair's own disabled-text tone) failed WCAG AA
35
+ // against the syntax background: 2.42:1 light, 2.53:1 dark. #5386.
36
+ punctuation: ["#6e6e6e", "#a0a0a0"],
37
+ // neutral, 4.89:1 / 7.57:1
36
38
  background: ["#fafafa", "#0a0a0a"]
37
39
  }
38
40
  });
@@ -374,10 +376,14 @@ var neutralTheme = defineTheme({
374
376
  color: "#171717"
375
377
  },
376
378
  "variant:error": {
377
- // Light: T55 #e33f4a (palette saturated stop)
379
+ // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
380
+ // 4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
381
+ // large-text allowance. One tonal step down holds the hue
382
+ // (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
378
383
  // 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)",
384
+ // source #dc2626 (kept on H=27 alarm-red rather than coral).
385
+ // Dark text on it is 6.60:1 and unchanged.
386
+ backgroundColor: "light-dark(#c9303a, #ff705d)",
381
387
  color: "light-dark(#ffffff, #171717)"
382
388
  },
383
389
  // Categorical — bg + text reference the per-hue tokens, so behavior
@@ -440,7 +446,7 @@ var neutralTheme = defineTheme({
440
446
  //
441
447
  // success → badge success bg (green T45 / dark-ramp T60)
442
448
  // warning → badge warning bg (yellow T85, same hex both modes)
443
- // error → badge error bg (red T55 / dark-ramp T60)
449
+ // error → badge error bg (red T58 / dark-ramp T60)
444
450
  // accent → badge info bg (blue T50 / dark-ramp T60) — the
445
451
  // StatusDot "accent" is the info/attention color, so it
446
452
  // pairs with the info badge rather than --color-accent
@@ -455,7 +461,7 @@ var neutralTheme = defineTheme({
455
461
  statusdot: {
456
462
  "variant:success": { backgroundColor: "light-dark(#198100, #64af4c)" },
457
463
  "variant:warning": { backgroundColor: "#ffce2f" },
458
- "variant:error": { backgroundColor: "light-dark(#e33f4a, #ff705d)" },
464
+ "variant:error": { backgroundColor: "light-dark(#c9303a, #ff705d)" },
459
465
  "variant:accent": { backgroundColor: "light-dark(#0074e2, #6d9cfe)" }
460
466
  },
461
467
  // =========================================================================
@@ -547,8 +553,8 @@ var neutralTheme = defineTheme({
547
553
  "--color-warning": "#ffce2f"
548
554
  },
549
555
  "variant:error": {
550
- // Red T55 saturated stop (= variant:error badge bg)
551
- "--color-error": "#e33f4a"
556
+ // Red T58 saturated stop (= variant:error badge bg)
557
+ "--color-error": "#c9303a"
552
558
  }
553
559
  },
554
560
  // =========================================================================
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 {
@@ -162,7 +162,7 @@
162
162
  --color-syntax-tag: light-dark(#89001a, #ffaeaa);
163
163
  --color-syntax-attribute: light-dark(#584400, #eec12f);
164
164
  --color-syntax-property: light-dark(#005348, #83dac9);
165
- --color-syntax-punctuation: light-dark(#a3a3a3, #525252);
165
+ --color-syntax-punctuation: light-dark(#6e6e6e, #a0a0a0);
166
166
  --color-syntax-background: light-dark(#fafafa, #0a0a0a);
167
167
  --color-background-surface: light-dark(#ffffff, #262626);
168
168
  --color-background-body: light-dark(#f1f1f1, #1b1b1b);
@@ -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.055e75f",
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.055e75f",
53
53
  "react": ">=19"
54
54
  },
55
55
  "devDependencies": {
56
- "@astryxdesign/cli": "0.4.7",
56
+ "@astryxdesign/cli": "0.5.0-canary.055e75f",
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
  */
@@ -51,7 +52,9 @@ const neutralSyntax = defineSyntaxTheme({
51
52
  tag: ['#89001a', '#ffaeaa'], // red
52
53
  attribute: ['#584400', '#eec12f'], // yellow
53
54
  property: ['#005348', '#83dac9'], // teal
54
- punctuation: ['#a3a3a3', '#525252'], // neutral
55
+ // #a3a3a3/#525252 (this pair's own disabled-text tone) failed WCAG AA
56
+ // against the syntax background: 2.42:1 light, 2.53:1 dark. #5386.
57
+ punctuation: ['#6e6e6e', '#a0a0a0'], // neutral, 4.89:1 / 7.57:1
55
58
  background: ['#fafafa', '#0a0a0a'],
56
59
  },
57
60
  });
@@ -432,10 +435,14 @@ export const neutralTheme = defineTheme({
432
435
  color: '#171717',
433
436
  },
434
437
  'variant:error': {
435
- // Light: T55 #e33f4a (palette saturated stop)
438
+ // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
439
+ // 4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
440
+ // large-text allowance. One tonal step down holds the hue
441
+ // (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
436
442
  // 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)',
443
+ // source #dc2626 (kept on H=27 alarm-red rather than coral).
444
+ // Dark text on it is 6.60:1 and unchanged.
445
+ backgroundColor: 'light-dark(#c9303a, #ff705d)',
439
446
  color: 'light-dark(#ffffff, #171717)',
440
447
  },
441
448
 
@@ -500,7 +507,7 @@ export const neutralTheme = defineTheme({
500
507
  //
501
508
  // success → badge success bg (green T45 / dark-ramp T60)
502
509
  // warning → badge warning bg (yellow T85, same hex both modes)
503
- // error → badge error bg (red T55 / dark-ramp T60)
510
+ // error → badge error bg (red T58 / dark-ramp T60)
504
511
  // accent → badge info bg (blue T50 / dark-ramp T60) — the
505
512
  // StatusDot "accent" is the info/attention color, so it
506
513
  // pairs with the info badge rather than --color-accent
@@ -515,7 +522,7 @@ export const neutralTheme = defineTheme({
515
522
  statusdot: {
516
523
  'variant:success': {backgroundColor: 'light-dark(#198100, #64af4c)'},
517
524
  'variant:warning': {backgroundColor: '#ffce2f'},
518
- 'variant:error': {backgroundColor: 'light-dark(#e33f4a, #ff705d)'},
525
+ 'variant:error': {backgroundColor: 'light-dark(#c9303a, #ff705d)'},
519
526
  'variant:accent': {backgroundColor: 'light-dark(#0074e2, #6d9cfe)'},
520
527
  },
521
528
 
@@ -611,8 +618,8 @@ export const neutralTheme = defineTheme({
611
618
  '--color-warning': '#ffce2f',
612
619
  },
613
620
  'variant:error': {
614
- // Red T55 saturated stop (= variant:error badge bg)
615
- '--color-error': '#e33f4a',
621
+ // Red T58 saturated stop (= variant:error badge bg)
622
+ '--color-error': '#c9303a',
616
623
  },
617
624
  },
618
625