@astryxdesign/theme-butter 0.7.5-canary.fccd771 → 0.7.5

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/dist/butter.js +69 -40
  2. package/dist/butterPaletteRefs.generated.d.ts +5 -0
  3. package/dist/butterPaletteRefs.generated.d.ts.map +1 -1
  4. package/dist/butterTheme.d.ts +1 -1
  5. package/dist/butterTheme.d.ts.map +1 -1
  6. package/dist/source.js +44 -47
  7. package/dist/source.mjs +44 -47
  8. package/dist/theme.css +78 -40
  9. package/package.json +6 -6
  10. package/src/butterPaletteRefs.generated.ts +3 -2
  11. package/src/butterTheme.test.ts +36 -7
  12. package/src/butterTheme.ts +47 -44
package/dist/butter.js CHANGED
@@ -122,6 +122,16 @@ export const butterTheme = {
122
122
  "--color-on-success": "light-dark(#b6e3b4, #013004)",
123
123
  "--color-on-error": "light-dark(#ffece7, #4c0700)",
124
124
  "--color-on-warning": "light-dark(#fff7c0, #2c2600)",
125
+ "--color-info": "light-dark(#225bff, #81a9ff)",
126
+ "--color-info-muted": "var(--color-background-blue)",
127
+ "--color-text-info": "light-dark(#225bff, #81a9ff)",
128
+ "--color-text-success": "light-dark(#004a05, #a8d4a6)",
129
+ "--color-text-warning": "light-dark(#443c00, #eedf75)",
130
+ "--color-text-error": "light-dark(#6f1400, #ffb09b)",
131
+ "--color-on-info-muted": "var(--color-text-blue)",
132
+ "--color-on-success-muted": "light-dark(#004a05, #a8d4a6)",
133
+ "--color-on-warning-muted": "light-dark(#443c00, #eedf75)",
134
+ "--color-on-error-muted": "light-dark(#6f1400, #ffd9cf)",
125
135
  "--color-icon-accent": "light-dark(#225bff, #fdee8c)",
126
136
  "--color-icon-primary": "light-dark(#1d1c11, #f3f2e2)",
127
137
  "--color-icon-secondary": "light-dark(#605f52, #adac9e)",
@@ -367,28 +377,20 @@ export const butterTheme = {
367
377
  },
368
378
  "banner": {
369
379
  "status:info": {
370
- "--color-accent-muted": "#4d82ff",
371
- "--color-text-primary": "#1d1c11",
372
- "--color-text-secondary": "#1d1c11",
373
- "--color-accent": "#1d1c11"
380
+ "--color-info-muted": "#4d82ff",
381
+ "--color-on-info-muted": "#1d1c11"
374
382
  },
375
383
  "status:success": {
376
384
  "--color-success-muted": "#7bbf7a",
377
- "--color-text-primary": "#1d1c11",
378
- "--color-text-secondary": "#1d1c11",
379
- "--color-success": "#1d1c11"
385
+ "--color-on-success-muted": "#1d1c11"
380
386
  },
381
387
  "status:warning": {
382
388
  "--color-warning-muted": "#dfcf5b",
383
- "--color-text-primary": "#1d1c11",
384
- "--color-text-secondary": "#1d1c11",
385
- "--color-warning": "#1d1c11"
389
+ "--color-on-warning-muted": "#1d1c11"
386
390
  },
387
391
  "status:error": {
388
392
  "--color-error-muted": "#e56241",
389
- "--color-text-primary": "#1d1c11",
390
- "--color-text-secondary": "#1d1c11",
391
- "--color-error": "#1d1c11"
393
+ "--color-on-error-muted": "#1d1c11"
392
394
  }
393
395
  },
394
396
  "card": {
@@ -499,13 +501,16 @@ export const butterTheme = {
499
501
  "borderColor": "var(--color-border)"
500
502
  },
501
503
  "status:success": {
502
- "--color-success": "#7bbf7a"
504
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
505
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
503
506
  },
504
507
  "status:warning": {
505
- "--color-warning": "#dfcf5b"
508
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
509
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
506
510
  },
507
511
  "status:error": {
508
- "--color-error": "#e56241"
512
+ "--color-border-error": "#e56241",
513
+ "--color-icon-error": "#e56241"
509
514
  }
510
515
  },
511
516
  "text-area": {
@@ -515,13 +520,16 @@ export const butterTheme = {
515
520
  "borderColor": "var(--color-border)"
516
521
  },
517
522
  "status:success": {
518
- "--color-success": "#7bbf7a"
523
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
524
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
519
525
  },
520
526
  "status:warning": {
521
- "--color-warning": "#dfcf5b"
527
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
528
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
522
529
  },
523
530
  "status:error": {
524
- "--color-error": "#e56241"
531
+ "--color-border-error": "#e56241",
532
+ "--color-icon-error": "#e56241"
525
533
  }
526
534
  },
527
535
  "number-input": {
@@ -531,13 +539,16 @@ export const butterTheme = {
531
539
  "borderColor": "var(--color-border)"
532
540
  },
533
541
  "status:success": {
534
- "--color-success": "#7bbf7a"
542
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
543
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
535
544
  },
536
545
  "status:warning": {
537
- "--color-warning": "#dfcf5b"
546
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
547
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
538
548
  },
539
549
  "status:error": {
540
- "--color-error": "#e56241"
550
+ "--color-border-error": "#e56241",
551
+ "--color-icon-error": "#e56241"
541
552
  }
542
553
  },
543
554
  "date-input": {
@@ -547,13 +558,16 @@ export const butterTheme = {
547
558
  "borderColor": "var(--color-border)"
548
559
  },
549
560
  "status:success": {
550
- "--color-success": "#7bbf7a"
561
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
562
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
551
563
  },
552
564
  "status:warning": {
553
- "--color-warning": "#dfcf5b"
565
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
566
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
554
567
  },
555
568
  "status:error": {
556
- "--color-error": "#e56241"
569
+ "--color-border-error": "#e56241",
570
+ "--color-icon-error": "#e56241"
557
571
  }
558
572
  },
559
573
  "time-input": {
@@ -563,13 +577,16 @@ export const butterTheme = {
563
577
  "borderColor": "var(--color-border)"
564
578
  },
565
579
  "status:success": {
566
- "--color-success": "#7bbf7a"
580
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
581
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
567
582
  },
568
583
  "status:warning": {
569
- "--color-warning": "#dfcf5b"
584
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
585
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
570
586
  },
571
587
  "status:error": {
572
- "--color-error": "#e56241"
588
+ "--color-border-error": "#e56241",
589
+ "--color-icon-error": "#e56241"
573
590
  }
574
591
  },
575
592
  "selector": {
@@ -579,13 +596,16 @@ export const butterTheme = {
579
596
  "borderColor": "var(--color-border)"
580
597
  },
581
598
  "status:success": {
582
- "--color-success": "#7bbf7a"
599
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
600
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
583
601
  },
584
602
  "status:warning": {
585
- "--color-warning": "#dfcf5b"
603
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
604
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
586
605
  },
587
606
  "status:error": {
588
- "--color-error": "#e56241"
607
+ "--color-border-error": "#e56241",
608
+ "--color-icon-error": "#e56241"
589
609
  },
590
610
  "variant:secondary": {
591
611
  ":not(.astryx-input-group *)": {
@@ -607,13 +627,16 @@ export const butterTheme = {
607
627
  "borderColor": "var(--color-border)"
608
628
  },
609
629
  "status:success": {
610
- "--color-success": "#7bbf7a"
630
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
631
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
611
632
  },
612
633
  "status:warning": {
613
- "--color-warning": "#dfcf5b"
634
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
635
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
614
636
  },
615
637
  "status:error": {
616
- "--color-error": "#e56241"
638
+ "--color-border-error": "#e56241",
639
+ "--color-icon-error": "#e56241"
617
640
  },
618
641
  "variant:secondary": {
619
642
  ":not(.astryx-input-group *)": {
@@ -647,13 +670,16 @@ export const butterTheme = {
647
670
  "borderColor": "var(--color-border)"
648
671
  },
649
672
  "status:success": {
650
- "--color-success": "#7bbf7a"
673
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
674
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
651
675
  },
652
676
  "status:warning": {
653
- "--color-warning": "#dfcf5b"
677
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
678
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
654
679
  },
655
680
  "status:error": {
656
- "--color-error": "#e56241"
681
+ "--color-border-error": "#e56241",
682
+ "--color-icon-error": "#e56241"
657
683
  }
658
684
  },
659
685
  "tokenizer": {
@@ -663,13 +689,16 @@ export const butterTheme = {
663
689
  "borderColor": "var(--color-border)"
664
690
  },
665
691
  "status:success": {
666
- "--color-success": "#7bbf7a"
692
+ "--color-border-success": "light-dark(#4a984a, #7bbf7a)",
693
+ "--color-icon-success": "light-dark(#4a984a, #7bbf7a)"
667
694
  },
668
695
  "status:warning": {
669
- "--color-warning": "#dfcf5b"
696
+ "--color-border-warning": "light-dark(#958500, #dfcf5b)",
697
+ "--color-icon-warning": "light-dark(#958500, #dfcf5b)"
670
698
  },
671
699
  "status:error": {
672
- "--color-error": "#e56241"
700
+ "--color-border-error": "#e56241",
701
+ "--color-icon-error": "#e56241"
673
702
  }
674
703
  }
675
704
  },
package/dist/butterPaletteRefs.generated.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare const butterPaletteRefs: {
14
14
  readonly green: {
15
15
  readonly light: {
16
16
  readonly 25: "#004a05";
17
+ readonly 55: "#4a984a";
17
18
  readonly 70: "#7bbf7a";
18
19
  readonly 80: "#a2d7a0";
19
20
  readonly 85: "#b6e3b4";
@@ -107,6 +108,7 @@ export declare const butterPaletteRefs: {
107
108
  readonly light: {
108
109
  readonly 25: "#443c00";
109
110
  readonly 30: "#514700";
111
+ readonly 55: "#958500";
110
112
  readonly 70: "#bfae35";
111
113
  readonly 80: "#dfcf5b";
112
114
  readonly 85: "#f0df72";
@@ -140,6 +142,9 @@ export declare const butterPaletteRefs: {
140
142
  readonly 40: "#225bff";
141
143
  readonly 55: "#4d82ff";
142
144
  };
145
+ readonly dark: {
146
+ readonly 70: "#81a9ff";
147
+ };
143
148
  };
144
149
  readonly cyan: {
145
150
  readonly light: {
package/dist/butterPaletteRefs.generated.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"butterPaletteRefs.generated.d.ts","sourceRoot":"","sources":["../src/butterPaletteRefs.generated.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CpB,CAAC;AAEX,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"butterPaletteRefs.generated.d.ts","sourceRoot":"","sources":["../src/butterPaletteRefs.generated.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CpB,CAAC;AAEX,eAAe,iBAAiB,CAAC"}
package/dist/butterTheme.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const butterTheme: import("@astryxdesign/core/theme").ResolvedDefinedTheme;
1
+ export declare const butterTheme: import("@astryxdesign/core/theme").ResolvedDefinedTheme<never>;
2
2
  /**
3
3
  * Frozen released compatibility palettes. These ramps preserve the public
4
4
  * `butterPalettes` shape and values for existing consumers; the maintained
package/dist/butterTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"butterTheme.d.ts","sourceRoot":"","sources":["../src/butterTheme.ts"],"names":[],"mappings":"AA6GA,eAAO,MAAM,WAAW,yDAijBtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmUjB,CAAC"}
1
+ {"version":3,"file":"butterTheme.d.ts","sourceRoot":"","sources":["../src/butterTheme.ts"],"names":[],"mappings":"AAgIA,eAAO,MAAM,WAAW,gEAiiBtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmUjB,CAAC"}
package/dist/source.js CHANGED
@@ -75,7 +75,7 @@ var butterPaletteRefs = {
75
75
  dark: { 25: "#52237b", 80: "#ddb9f6", 90: "#f2daff" }
76
76
  },
77
77
  green: {
78
- light: { 25: "#004a05", 70: "#7bbf7a", 80: "#a2d7a0", 85: "#b6e3b4", 90: "#caeec8" },
78
+ light: { 25: "#004a05", 55: "#4a984a", 70: "#7bbf7a", 80: "#a2d7a0", 85: "#b6e3b4", 90: "#caeec8" },
79
79
  dark: { 15: "#013004", 20: "#063c0a", 70: "#83bc82", 80: "#a8d4a6", 90: "#cdedcc" }
80
80
  },
81
81
  neutral: {
@@ -95,7 +95,7 @@ var butterPaletteRefs = {
95
95
  dark: { 15: "#4c0700", 25: "#6f1400", 80: "#ffb09b", 85: "#ffc5b5", 90: "#ffd9cf" }
96
96
  },
97
97
  yellow: {
98
- light: { 25: "#443c00", 30: "#514700", 70: "#bfae35", 80: "#dfcf5b", 85: "#f0df72", 90: "#fdee8c", 95: "#fff7c0" },
98
+ light: { 25: "#443c00", 30: "#514700", 55: "#958500", 70: "#bfae35", 80: "#dfcf5b", 85: "#f0df72", 90: "#fdee8c", 95: "#fff7c0" },
99
99
  dark: { 15: "#2c2600", 25: "#443c00", 70: "#bcae4e", 75: "#cdbe59", 85: "#eedf75", 90: "#fdee8c" }
100
100
  },
101
101
  teal: {
@@ -103,7 +103,8 @@ var butterPaletteRefs = {
103
103
  dark: { 25: "#00482d", 80: "#94d3bb", 90: "#b0f0d7" }
104
104
  },
105
105
  accent: {
106
- light: { 35: "#194ce8", 40: "#225bff", 55: "#4d82ff" }
106
+ light: { 35: "#194ce8", 40: "#225bff", 55: "#4d82ff" },
107
+ dark: { 70: "#81a9ff" }
107
108
  },
108
109
  cyan: {
109
110
  light: { 25: "#004649", 80: "#8dd2d3", 90: "#a9eff0" },
@@ -189,6 +190,20 @@ var SECONDARY_COMPLEX_SELECTOR = {
189
190
  color: SECONDARY_BUTTON.color,
190
191
  ':hover:not(:has(> :is(:disabled, [aria-disabled="true"])))': SECONDARY_BUTTON[":hover"]
191
192
  };
193
+ var INPUT_STATUS_VARS = {
194
+ "status:success": {
195
+ "--color-border-success": lightDark(green.light[55], green.light[70]),
196
+ "--color-icon-success": lightDark(green.light[55], green.light[70])
197
+ },
198
+ "status:warning": {
199
+ "--color-border-warning": lightDark(yellow.light[55], yellow.light[80]),
200
+ "--color-icon-warning": lightDark(yellow.light[55], yellow.light[80])
201
+ },
202
+ "status:error": {
203
+ "--color-border-error": red.light[60],
204
+ "--color-icon-error": red.light[60]
205
+ }
206
+ };
192
207
  var butterTheme = (0, import_theme.defineTheme)({
193
208
  name: "butter",
194
209
  typography: {
@@ -260,6 +275,17 @@ var butterTheme = (0, import_theme.defineTheme)({
260
275
  "--color-on-success": [green.light[85], green.dark[15]],
261
276
  "--color-on-error": [red.light[95], red.dark[15]],
262
277
  "--color-on-warning": [yellow.light[95], yellow.dark[15]],
278
+ // Info is its own blue status, independent of the accent.
279
+ "--color-info": [accent.light[40], accent.dark[70]],
280
+ "--color-info-muted": "var(--color-background-blue)",
281
+ "--color-text-info": [accent.light[40], accent.dark[70]],
282
+ "--color-text-success": [green.light[25], green.dark[80]],
283
+ "--color-text-warning": [yellow.light[25], yellow.dark[85]],
284
+ "--color-text-error": [red.light[25], red.dark[80]],
285
+ "--color-on-info-muted": "var(--color-text-blue)",
286
+ "--color-on-success-muted": [green.light[25], green.dark[80]],
287
+ "--color-on-warning-muted": [yellow.light[25], yellow.dark[85]],
288
+ "--color-on-error-muted": [red.light[25], red.dark[90]],
263
289
  // Icon
264
290
  "--color-icon-accent": [accent.light[40], yellow.dark[90]],
265
291
  "--color-icon-primary": [neutral.light[15], neutral.dark[90]],
@@ -463,34 +489,23 @@ var butterTheme = (0, import_theme.defineTheme)({
463
489
  color: neutral.light[15]
464
490
  }
465
491
  },
466
- // Banner backgrounds match the semantic badge fills.
467
- // Banner status colors — override the muted tokens locally so the
468
- // header (which reads --color-*-muted via StyleX) renders vivid fills
469
- // matching the badge palette. Scoped to the banner root, doesn't leak.
492
+ // Banner status surfaces and content use the reviewed vivid pair.
470
493
  banner: {
471
494
  "status:info": {
472
- "--color-accent-muted": accent.light[55],
473
- "--color-text-primary": neutral.light[15],
474
- "--color-text-secondary": neutral.light[15],
475
- "--color-accent": neutral.light[15]
495
+ "--color-info-muted": accent.light[55],
496
+ "--color-on-info-muted": neutral.light[15]
476
497
  },
477
498
  "status:success": {
478
499
  "--color-success-muted": green.light[70],
479
- "--color-text-primary": neutral.light[15],
480
- "--color-text-secondary": neutral.light[15],
481
- "--color-success": neutral.light[15]
500
+ "--color-on-success-muted": neutral.light[15]
482
501
  },
483
502
  "status:warning": {
484
503
  "--color-warning-muted": yellow.light[80],
485
- "--color-text-primary": neutral.light[15],
486
- "--color-text-secondary": neutral.light[15],
487
- "--color-warning": neutral.light[15]
504
+ "--color-on-warning-muted": neutral.light[15]
488
505
  },
489
506
  "status:error": {
490
507
  "--color-error-muted": red.light[60],
491
- "--color-text-primary": neutral.light[15],
492
- "--color-text-secondary": neutral.light[15],
493
- "--color-error": neutral.light[15]
508
+ "--color-on-error-muted": neutral.light[15]
494
509
  }
495
510
  },
496
511
  card: {
@@ -609,9 +624,7 @@ var butterTheme = (0, import_theme.defineTheme)({
609
624
  paddingInline: "var(--spacing-3)",
610
625
  borderColor: "var(--color-border)"
611
626
  },
612
- "status:success": { "--color-success": green.light[70] },
613
- "status:warning": { "--color-warning": yellow.light[80] },
614
- "status:error": { "--color-error": red.light[60] }
627
+ ...INPUT_STATUS_VARS
615
628
  },
616
629
  "text-area": {
617
630
  base: {
@@ -619,9 +632,7 @@ var butterTheme = (0, import_theme.defineTheme)({
619
632
  paddingInline: "var(--spacing-3)",
620
633
  borderColor: "var(--color-border)"
621
634
  },
622
- "status:success": { "--color-success": green.light[70] },
623
- "status:warning": { "--color-warning": yellow.light[80] },
624
- "status:error": { "--color-error": red.light[60] }
635
+ ...INPUT_STATUS_VARS
625
636
  },
626
637
  "number-input": {
627
638
  base: {
@@ -629,9 +640,7 @@ var butterTheme = (0, import_theme.defineTheme)({
629
640
  paddingInline: "var(--spacing-3)",
630
641
  borderColor: "var(--color-border)"
631
642
  },
632
- "status:success": { "--color-success": green.light[70] },
633
- "status:warning": { "--color-warning": yellow.light[80] },
634
- "status:error": { "--color-error": red.light[60] }
643
+ ...INPUT_STATUS_VARS
635
644
  },
636
645
  "date-input": {
637
646
  base: {
@@ -639,9 +648,7 @@ var butterTheme = (0, import_theme.defineTheme)({
639
648
  paddingInline: "var(--spacing-3)",
640
649
  borderColor: "var(--color-border)"
641
650
  },
642
- "status:success": { "--color-success": green.light[70] },
643
- "status:warning": { "--color-warning": yellow.light[80] },
644
- "status:error": { "--color-error": red.light[60] }
651
+ ...INPUT_STATUS_VARS
645
652
  },
646
653
  "time-input": {
647
654
  base: {
@@ -649,9 +656,7 @@ var butterTheme = (0, import_theme.defineTheme)({
649
656
  paddingInline: "var(--spacing-3)",
650
657
  borderColor: "var(--color-border)"
651
658
  },
652
- "status:success": { "--color-success": green.light[70] },
653
- "status:warning": { "--color-warning": yellow.light[80] },
654
- "status:error": { "--color-error": red.light[60] }
659
+ ...INPUT_STATUS_VARS
655
660
  },
656
661
  selector: {
657
662
  base: {
@@ -659,9 +664,7 @@ var butterTheme = (0, import_theme.defineTheme)({
659
664
  paddingInline: "var(--spacing-3)",
660
665
  borderColor: "var(--color-border)"
661
666
  },
662
- "status:success": { "--color-success": green.light[70] },
663
- "status:warning": { "--color-warning": yellow.light[80] },
664
- "status:error": { "--color-error": red.light[60] },
667
+ ...INPUT_STATUS_VARS,
665
668
  "variant:secondary": SECONDARY_SELECTOR
666
669
  },
667
670
  "multi-selector": {
@@ -670,9 +673,7 @@ var butterTheme = (0, import_theme.defineTheme)({
670
673
  paddingInline: "var(--spacing-3)",
671
674
  borderColor: "var(--color-border)"
672
675
  },
673
- "status:success": { "--color-success": green.light[70] },
674
- "status:warning": { "--color-warning": yellow.light[80] },
675
- "status:error": { "--color-error": red.light[60] },
676
+ ...INPUT_STATUS_VARS,
676
677
  "variant:secondary": SECONDARY_SELECTOR
677
678
  },
678
679
  "complex-selector": { "variant:secondary": SECONDARY_COMPLEX_SELECTOR },
@@ -682,9 +683,7 @@ var butterTheme = (0, import_theme.defineTheme)({
682
683
  paddingInline: "var(--spacing-3)",
683
684
  borderColor: "var(--color-border)"
684
685
  },
685
- "status:success": { "--color-success": green.light[70] },
686
- "status:warning": { "--color-warning": yellow.light[80] },
687
- "status:error": { "--color-error": red.light[60] }
686
+ ...INPUT_STATUS_VARS
688
687
  },
689
688
  tokenizer: {
690
689
  base: {
@@ -692,9 +691,7 @@ var butterTheme = (0, import_theme.defineTheme)({
692
691
  paddingInline: "var(--spacing-3)",
693
692
  borderColor: "var(--color-border)"
694
693
  },
695
- "status:success": { "--color-success": green.light[70] },
696
- "status:warning": { "--color-warning": yellow.light[80] },
697
- "status:error": { "--color-error": red.light[60] }
694
+ ...INPUT_STATUS_VARS
698
695
  },
699
696
  // Display sizes use Sarina — the signature buttery display
700
697
  // cursive, reserved for hero/marketing-scale text only.
package/dist/source.mjs CHANGED
@@ -77,7 +77,7 @@ var butterPaletteRefs = {
77
77
  dark: { 25: "#52237b", 80: "#ddb9f6", 90: "#f2daff" }
78
78
  },
79
79
  green: {
80
- light: { 25: "#004a05", 70: "#7bbf7a", 80: "#a2d7a0", 85: "#b6e3b4", 90: "#caeec8" },
80
+ light: { 25: "#004a05", 55: "#4a984a", 70: "#7bbf7a", 80: "#a2d7a0", 85: "#b6e3b4", 90: "#caeec8" },
81
81
  dark: { 15: "#013004", 20: "#063c0a", 70: "#83bc82", 80: "#a8d4a6", 90: "#cdedcc" }
82
82
  },
83
83
  neutral: {
@@ -97,7 +97,7 @@ var butterPaletteRefs = {
97
97
  dark: { 15: "#4c0700", 25: "#6f1400", 80: "#ffb09b", 85: "#ffc5b5", 90: "#ffd9cf" }
98
98
  },
99
99
  yellow: {
100
- light: { 25: "#443c00", 30: "#514700", 70: "#bfae35", 80: "#dfcf5b", 85: "#f0df72", 90: "#fdee8c", 95: "#fff7c0" },
100
+ light: { 25: "#443c00", 30: "#514700", 55: "#958500", 70: "#bfae35", 80: "#dfcf5b", 85: "#f0df72", 90: "#fdee8c", 95: "#fff7c0" },
101
101
  dark: { 15: "#2c2600", 25: "#443c00", 70: "#bcae4e", 75: "#cdbe59", 85: "#eedf75", 90: "#fdee8c" }
102
102
  },
103
103
  teal: {
@@ -105,7 +105,8 @@ var butterPaletteRefs = {
105
105
  dark: { 25: "#00482d", 80: "#94d3bb", 90: "#b0f0d7" }
106
106
  },
107
107
  accent: {
108
- light: { 35: "#194ce8", 40: "#225bff", 55: "#4d82ff" }
108
+ light: { 35: "#194ce8", 40: "#225bff", 55: "#4d82ff" },
109
+ dark: { 70: "#81a9ff" }
109
110
  },
110
111
  cyan: {
111
112
  light: { 25: "#004649", 80: "#8dd2d3", 90: "#a9eff0" },
@@ -191,6 +192,20 @@ var SECONDARY_COMPLEX_SELECTOR = {
191
192
  color: SECONDARY_BUTTON.color,
192
193
  ':hover:not(:has(> :is(:disabled, [aria-disabled="true"])))': SECONDARY_BUTTON[":hover"]
193
194
  };
195
+ var INPUT_STATUS_VARS = {
196
+ "status:success": {
197
+ "--color-border-success": lightDark(green.light[55], green.light[70]),
198
+ "--color-icon-success": lightDark(green.light[55], green.light[70])
199
+ },
200
+ "status:warning": {
201
+ "--color-border-warning": lightDark(yellow.light[55], yellow.light[80]),
202
+ "--color-icon-warning": lightDark(yellow.light[55], yellow.light[80])
203
+ },
204
+ "status:error": {
205
+ "--color-border-error": red.light[60],
206
+ "--color-icon-error": red.light[60]
207
+ }
208
+ };
194
209
  var butterTheme = defineTheme({
195
210
  name: "butter",
196
211
  typography: {
@@ -262,6 +277,17 @@ var butterTheme = defineTheme({
262
277
  "--color-on-success": [green.light[85], green.dark[15]],
263
278
  "--color-on-error": [red.light[95], red.dark[15]],
264
279
  "--color-on-warning": [yellow.light[95], yellow.dark[15]],
280
+ // Info is its own blue status, independent of the accent.
281
+ "--color-info": [accent.light[40], accent.dark[70]],
282
+ "--color-info-muted": "var(--color-background-blue)",
283
+ "--color-text-info": [accent.light[40], accent.dark[70]],
284
+ "--color-text-success": [green.light[25], green.dark[80]],
285
+ "--color-text-warning": [yellow.light[25], yellow.dark[85]],
286
+ "--color-text-error": [red.light[25], red.dark[80]],
287
+ "--color-on-info-muted": "var(--color-text-blue)",
288
+ "--color-on-success-muted": [green.light[25], green.dark[80]],
289
+ "--color-on-warning-muted": [yellow.light[25], yellow.dark[85]],
290
+ "--color-on-error-muted": [red.light[25], red.dark[90]],
265
291
  // Icon
266
292
  "--color-icon-accent": [accent.light[40], yellow.dark[90]],
267
293
  "--color-icon-primary": [neutral.light[15], neutral.dark[90]],
@@ -465,34 +491,23 @@ var butterTheme = defineTheme({
465
491
  color: neutral.light[15]
466
492
  }
467
493
  },
468
- // Banner backgrounds match the semantic badge fills.
469
- // Banner status colors — override the muted tokens locally so the
470
- // header (which reads --color-*-muted via StyleX) renders vivid fills
471
- // matching the badge palette. Scoped to the banner root, doesn't leak.
494
+ // Banner status surfaces and content use the reviewed vivid pair.
472
495
  banner: {
473
496
  "status:info": {
474
- "--color-accent-muted": accent.light[55],
475
- "--color-text-primary": neutral.light[15],
476
- "--color-text-secondary": neutral.light[15],
477
- "--color-accent": neutral.light[15]
497
+ "--color-info-muted": accent.light[55],
498
+ "--color-on-info-muted": neutral.light[15]
478
499
  },
479
500
  "status:success": {
480
501
  "--color-success-muted": green.light[70],
481
- "--color-text-primary": neutral.light[15],
482
- "--color-text-secondary": neutral.light[15],
483
- "--color-success": neutral.light[15]
502
+ "--color-on-success-muted": neutral.light[15]
484
503
  },
485
504
  "status:warning": {
486
505
  "--color-warning-muted": yellow.light[80],
487
- "--color-text-primary": neutral.light[15],
488
- "--color-text-secondary": neutral.light[15],
489
- "--color-warning": neutral.light[15]
506
+ "--color-on-warning-muted": neutral.light[15]
490
507
  },
491
508
  "status:error": {
492
509
  "--color-error-muted": red.light[60],
493
- "--color-text-primary": neutral.light[15],
494
- "--color-text-secondary": neutral.light[15],
495
- "--color-error": neutral.light[15]
510
+ "--color-on-error-muted": neutral.light[15]
496
511
  }
497
512
  },
498
513
  card: {
@@ -611,9 +626,7 @@ var butterTheme = defineTheme({
611
626
  paddingInline: "var(--spacing-3)",
612
627
  borderColor: "var(--color-border)"
613
628
  },
614
- "status:success": { "--color-success": green.light[70] },
615
- "status:warning": { "--color-warning": yellow.light[80] },
616
- "status:error": { "--color-error": red.light[60] }
629
+ ...INPUT_STATUS_VARS
617
630
  },
618
631
  "text-area": {
619
632
  base: {
@@ -621,9 +634,7 @@ var butterTheme = defineTheme({
621
634
  paddingInline: "var(--spacing-3)",
622
635
  borderColor: "var(--color-border)"
623
636
  },
624
- "status:success": { "--color-success": green.light[70] },
625
- "status:warning": { "--color-warning": yellow.light[80] },
626
- "status:error": { "--color-error": red.light[60] }
637
+ ...INPUT_STATUS_VARS
627
638
  },
628
639
  "number-input": {
629
640
  base: {
@@ -631,9 +642,7 @@ var butterTheme = defineTheme({
631
642
  paddingInline: "var(--spacing-3)",
632
643
  borderColor: "var(--color-border)"
633
644
  },
634
- "status:success": { "--color-success": green.light[70] },
635
- "status:warning": { "--color-warning": yellow.light[80] },
636
- "status:error": { "--color-error": red.light[60] }
645
+ ...INPUT_STATUS_VARS
637
646
  },
638
647
  "date-input": {
639
648
  base: {
@@ -641,9 +650,7 @@ var butterTheme = defineTheme({
641
650
  paddingInline: "var(--spacing-3)",
642
651
  borderColor: "var(--color-border)"
643
652
  },
644
- "status:success": { "--color-success": green.light[70] },
645
- "status:warning": { "--color-warning": yellow.light[80] },
646
- "status:error": { "--color-error": red.light[60] }
653
+ ...INPUT_STATUS_VARS
647
654
  },
648
655
  "time-input": {
649
656
  base: {
@@ -651,9 +658,7 @@ var butterTheme = defineTheme({
651
658
  paddingInline: "var(--spacing-3)",
652
659
  borderColor: "var(--color-border)"
653
660
  },
654
- "status:success": { "--color-success": green.light[70] },
655
- "status:warning": { "--color-warning": yellow.light[80] },
656
- "status:error": { "--color-error": red.light[60] }
661
+ ...INPUT_STATUS_VARS
657
662
  },
658
663
  selector: {
659
664
  base: {
@@ -661,9 +666,7 @@ var butterTheme = defineTheme({
661
666
  paddingInline: "var(--spacing-3)",
662
667
  borderColor: "var(--color-border)"
663
668
  },
664
- "status:success": { "--color-success": green.light[70] },
665
- "status:warning": { "--color-warning": yellow.light[80] },
666
- "status:error": { "--color-error": red.light[60] },
669
+ ...INPUT_STATUS_VARS,
667
670
  "variant:secondary": SECONDARY_SELECTOR
668
671
  },
669
672
  "multi-selector": {
@@ -672,9 +675,7 @@ var butterTheme = defineTheme({
672
675
  paddingInline: "var(--spacing-3)",
673
676
  borderColor: "var(--color-border)"
674
677
  },
675
- "status:success": { "--color-success": green.light[70] },
676
- "status:warning": { "--color-warning": yellow.light[80] },
677
- "status:error": { "--color-error": red.light[60] },
678
+ ...INPUT_STATUS_VARS,
678
679
  "variant:secondary": SECONDARY_SELECTOR
679
680
  },
680
681
  "complex-selector": { "variant:secondary": SECONDARY_COMPLEX_SELECTOR },
@@ -684,9 +685,7 @@ var butterTheme = defineTheme({
684
685
  paddingInline: "var(--spacing-3)",
685
686
  borderColor: "var(--color-border)"
686
687
  },
687
- "status:success": { "--color-success": green.light[70] },
688
- "status:warning": { "--color-warning": yellow.light[80] },
689
- "status:error": { "--color-error": red.light[60] }
688
+ ...INPUT_STATUS_VARS
690
689
  },
691
690
  tokenizer: {
692
691
  base: {
@@ -694,9 +693,7 @@ var butterTheme = defineTheme({
694
693
  paddingInline: "var(--spacing-3)",
695
694
  borderColor: "var(--color-border)"
696
695
  },
697
- "status:success": { "--color-success": green.light[70] },
698
- "status:warning": { "--color-warning": yellow.light[80] },
699
- "status:error": { "--color-error": red.light[60] }
696
+ ...INPUT_STATUS_VARS
700
697
  },
701
698
  // Display sizes use Sarina — the signature buttery display
702
699
  // cursive, reserved for hero/marketing-scale text only.
package/dist/theme.css CHANGED
@@ -190,6 +190,16 @@
190
190
  --color-on-success: light-dark(#b6e3b4, #013004);
191
191
  --color-on-error: light-dark(#ffece7, #4c0700);
192
192
  --color-on-warning: light-dark(#fff7c0, #2c2600);
193
+ --color-info: light-dark(#225bff, #81a9ff);
194
+ --color-info-muted: var(--color-background-blue);
195
+ --color-text-info: light-dark(#225bff, #81a9ff);
196
+ --color-text-success: light-dark(#004a05, #a8d4a6);
197
+ --color-text-warning: light-dark(#443c00, #eedf75);
198
+ --color-text-error: light-dark(#6f1400, #ffb09b);
199
+ --color-on-info-muted: var(--color-text-blue);
200
+ --color-on-success-muted: light-dark(#004a05, #a8d4a6);
201
+ --color-on-warning-muted: light-dark(#443c00, #eedf75);
202
+ --color-on-error-muted: light-dark(#6f1400, #ffd9cf);
193
203
  --color-icon-accent: light-dark(#225bff, #fdee8c);
194
204
  --color-icon-primary: light-dark(#1d1c11, #f3f2e2);
195
205
  --color-icon-secondary: light-dark(#605f52, #adac9e);
@@ -265,6 +275,15 @@
265
275
  --shadow-inset-success: inset 0px 0px 0px 2px #004a0530;
266
276
  --shadow-inset-warning: inset 0px 0px 0px 2px #51470030;
267
277
  --shadow-inset-error: inset 0px 0px 0px 2px #821b0030;
278
+ --color-on-info: light-dark(#FFFFFF, #1D1C11);
279
+ --color-icon-info: var(--color-text-info);
280
+ --color-icon-success: var(--color-text-success);
281
+ --color-icon-warning: var(--color-text-warning);
282
+ --color-icon-error: var(--color-text-error);
283
+ --color-border-info: var(--color-text-info);
284
+ --color-border-success: var(--color-text-success);
285
+ --color-border-warning: var(--color-text-warning);
286
+ --color-border-error: var(--color-text-error);
268
287
  }
269
288
 
270
289
  :scope {
@@ -459,31 +478,23 @@
459
478
  }
460
479
 
461
480
  .astryx-banner[data-status="info"] {
462
- --color-accent-muted: #4d82ff;
463
- --color-text-primary: #1d1c11;
464
- --color-text-secondary: #1d1c11;
465
- --color-accent: #1d1c11;
481
+ --color-info-muted: #4d82ff;
482
+ --color-on-info-muted: #1d1c11;
466
483
  }
467
484
 
468
485
  .astryx-banner[data-status="success"] {
469
486
  --color-success-muted: #7bbf7a;
470
- --color-text-primary: #1d1c11;
471
- --color-text-secondary: #1d1c11;
472
- --color-success: #1d1c11;
487
+ --color-on-success-muted: #1d1c11;
473
488
  }
474
489
 
475
490
  .astryx-banner[data-status="warning"] {
476
491
  --color-warning-muted: #dfcf5b;
477
- --color-text-primary: #1d1c11;
478
- --color-text-secondary: #1d1c11;
479
- --color-warning: #1d1c11;
492
+ --color-on-warning-muted: #1d1c11;
480
493
  }
481
494
 
482
495
  .astryx-banner[data-status="error"] {
483
496
  --color-error-muted: #e56241;
484
- --color-text-primary: #1d1c11;
485
- --color-text-secondary: #1d1c11;
486
- --color-error: #1d1c11;
497
+ --color-on-error-muted: #1d1c11;
487
498
  }
488
499
 
489
500
  .astryx-card {
@@ -609,15 +620,18 @@
609
620
  }
610
621
 
611
622
  .astryx-text-input[data-status="success"] {
612
- --color-success: #7bbf7a;
623
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
624
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
613
625
  }
614
626
 
615
627
  .astryx-text-input[data-status="warning"] {
616
- --color-warning: #dfcf5b;
628
+ --color-border-warning: light-dark(#958500, #dfcf5b);
629
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
617
630
  }
618
631
 
619
632
  .astryx-text-input[data-status="error"] {
620
- --color-error: #e56241;
633
+ --color-border-error: #e56241;
634
+ --color-icon-error: #e56241;
621
635
  }
622
636
 
623
637
  .astryx-text-area {
@@ -627,15 +641,18 @@
627
641
  }
628
642
 
629
643
  .astryx-text-area[data-status="success"] {
630
- --color-success: #7bbf7a;
644
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
645
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
631
646
  }
632
647
 
633
648
  .astryx-text-area[data-status="warning"] {
634
- --color-warning: #dfcf5b;
649
+ --color-border-warning: light-dark(#958500, #dfcf5b);
650
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
635
651
  }
636
652
 
637
653
  .astryx-text-area[data-status="error"] {
638
- --color-error: #e56241;
654
+ --color-border-error: #e56241;
655
+ --color-icon-error: #e56241;
639
656
  }
640
657
 
641
658
  .astryx-number-input {
@@ -646,15 +663,18 @@
646
663
  }
647
664
 
648
665
  .astryx-number-input[data-status="success"] {
649
- --color-success: #7bbf7a;
666
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
667
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
650
668
  }
651
669
 
652
670
  .astryx-number-input[data-status="warning"] {
653
- --color-warning: #dfcf5b;
671
+ --color-border-warning: light-dark(#958500, #dfcf5b);
672
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
654
673
  }
655
674
 
656
675
  .astryx-number-input[data-status="error"] {
657
- --color-error: #e56241;
676
+ --color-border-error: #e56241;
677
+ --color-icon-error: #e56241;
658
678
  }
659
679
 
660
680
  .astryx-date-input {
@@ -664,15 +684,18 @@
664
684
  }
665
685
 
666
686
  .astryx-date-input[data-status="success"] {
667
- --color-success: #7bbf7a;
687
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
688
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
668
689
  }
669
690
 
670
691
  .astryx-date-input[data-status="warning"] {
671
- --color-warning: #dfcf5b;
692
+ --color-border-warning: light-dark(#958500, #dfcf5b);
693
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
672
694
  }
673
695
 
674
696
  .astryx-date-input[data-status="error"] {
675
- --color-error: #e56241;
697
+ --color-border-error: #e56241;
698
+ --color-icon-error: #e56241;
676
699
  }
677
700
 
678
701
  .astryx-time-input {
@@ -682,15 +705,18 @@
682
705
  }
683
706
 
684
707
  .astryx-time-input[data-status="success"] {
685
- --color-success: #7bbf7a;
708
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
709
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
686
710
  }
687
711
 
688
712
  .astryx-time-input[data-status="warning"] {
689
- --color-warning: #dfcf5b;
713
+ --color-border-warning: light-dark(#958500, #dfcf5b);
714
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
690
715
  }
691
716
 
692
717
  .astryx-time-input[data-status="error"] {
693
- --color-error: #e56241;
718
+ --color-border-error: #e56241;
719
+ --color-icon-error: #e56241;
694
720
  }
695
721
 
696
722
  .astryx-selector {
@@ -700,15 +726,18 @@
700
726
  }
701
727
 
702
728
  .astryx-selector[data-status="success"] {
703
- --color-success: #7bbf7a;
729
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
730
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
704
731
  }
705
732
 
706
733
  .astryx-selector[data-status="warning"] {
707
- --color-warning: #dfcf5b;
734
+ --color-border-warning: light-dark(#958500, #dfcf5b);
735
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
708
736
  }
709
737
 
710
738
  .astryx-selector[data-status="error"] {
711
- --color-error: #e56241;
739
+ --color-border-error: #e56241;
740
+ --color-icon-error: #e56241;
712
741
  }
713
742
 
714
743
  .astryx-selector[data-variant="secondary"]:not(.astryx-input-group *) {
@@ -730,15 +759,18 @@
730
759
  }
731
760
 
732
761
  .astryx-multi-selector[data-status="success"] {
733
- --color-success: #7bbf7a;
762
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
763
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
734
764
  }
735
765
 
736
766
  .astryx-multi-selector[data-status="warning"] {
737
- --color-warning: #dfcf5b;
767
+ --color-border-warning: light-dark(#958500, #dfcf5b);
768
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
738
769
  }
739
770
 
740
771
  .astryx-multi-selector[data-status="error"] {
741
- --color-error: #e56241;
772
+ --color-border-error: #e56241;
773
+ --color-icon-error: #e56241;
742
774
  }
743
775
 
744
776
  .astryx-multi-selector[data-variant="secondary"]:not(.astryx-input-group *) {
@@ -772,15 +804,18 @@
772
804
  }
773
805
 
774
806
  .astryx-typeahead[data-status="success"] {
775
- --color-success: #7bbf7a;
807
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
808
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
776
809
  }
777
810
 
778
811
  .astryx-typeahead[data-status="warning"] {
779
- --color-warning: #dfcf5b;
812
+ --color-border-warning: light-dark(#958500, #dfcf5b);
813
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
780
814
  }
781
815
 
782
816
  .astryx-typeahead[data-status="error"] {
783
- --color-error: #e56241;
817
+ --color-border-error: #e56241;
818
+ --color-icon-error: #e56241;
784
819
  }
785
820
 
786
821
  .astryx-tokenizer {
@@ -790,15 +825,18 @@
790
825
  }
791
826
 
792
827
  .astryx-tokenizer[data-status="success"] {
793
- --color-success: #7bbf7a;
828
+ --color-border-success: light-dark(#4a984a, #7bbf7a);
829
+ --color-icon-success: light-dark(#4a984a, #7bbf7a);
794
830
  }
795
831
 
796
832
  .astryx-tokenizer[data-status="warning"] {
797
- --color-warning: #dfcf5b;
833
+ --color-border-warning: light-dark(#958500, #dfcf5b);
834
+ --color-icon-warning: light-dark(#958500, #dfcf5b);
798
835
  }
799
836
 
800
837
  .astryx-tokenizer[data-status="error"] {
801
- --color-error: #e56241;
838
+ --color-border-error: #e56241;
839
+ --color-icon-error: #e56241;
802
840
  }
803
841
 
804
842
  .astryx-text[data-color="primary"] { color: var(--color-text-primary); }
package/package.json CHANGED
@@ -1,19 +1,19 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-butter",
3
- "version": "0.7.5-canary.fccd771",
3
+ "version": "0.7.5",
4
4
  "displayName": "Butter Theme",
5
5
  "private": false,
6
6
  "description": "Warm, creamy yellows with a friendly blue accent. Playful enough for consumer surfaces, soft enough to stay readable.",
7
7
  "author": "Meta Open Source",
8
8
  "license": "MIT",
9
- "homepage": "https://github.com/facebook/astryx#readme",
9
+ "homepage": "https://github.com/meta/astryx#readme",
10
10
  "repository": {
11
11
  "type": "git",
12
- "url": "git+https://github.com/facebook/astryx.git",
12
+ "url": "git+https://github.com/meta/astryx.git",
13
13
  "directory": "packages/themes/butter"
14
14
  },
15
15
  "bugs": {
16
- "url": "https://github.com/facebook/astryx/issues"
16
+ "url": "https://github.com/meta/astryx/issues"
17
17
  },
18
18
  "keywords": [
19
19
  "astryx",
@@ -58,11 +58,11 @@
58
58
  "lucide-react": "^1.18.0"
59
59
  },
60
60
  "peerDependencies": {
61
- "@astryxdesign/core": "0.7.5-canary.fccd771",
61
+ "@astryxdesign/core": "0.7.5",
62
62
  "react": ">=19"
63
63
  },
64
64
  "devDependencies": {
65
- "@astryxdesign/cli": "0.7.5-canary.fccd771"
65
+ "@astryxdesign/cli": "0.7.5"
66
66
  },
67
67
  "module": "./dist/source.mjs",
68
68
  "scripts": {
package/src/butterPaletteRefs.generated.ts CHANGED
@@ -11,7 +11,7 @@ export const butterPaletteRefs = {
11
11
  dark: {25: '#52237b', 80: '#ddb9f6', 90: '#f2daff'},
12
12
  },
13
13
  green: {
14
- light: {25: '#004a05', 70: '#7bbf7a', 80: '#a2d7a0', 85: '#b6e3b4', 90: '#caeec8'},
14
+ light: {25: '#004a05', 55: '#4a984a', 70: '#7bbf7a', 80: '#a2d7a0', 85: '#b6e3b4', 90: '#caeec8'},
15
15
  dark: {15: '#013004', 20: '#063c0a', 70: '#83bc82', 80: '#a8d4a6', 90: '#cdedcc'},
16
16
  },
17
17
  neutral: {
@@ -31,7 +31,7 @@ export const butterPaletteRefs = {
31
31
  dark: {15: '#4c0700', 25: '#6f1400', 80: '#ffb09b', 85: '#ffc5b5', 90: '#ffd9cf'},
32
32
  },
33
33
  yellow: {
34
- light: {25: '#443c00', 30: '#514700', 70: '#bfae35', 80: '#dfcf5b', 85: '#f0df72', 90: '#fdee8c', 95: '#fff7c0'},
34
+ light: {25: '#443c00', 30: '#514700', 55: '#958500', 70: '#bfae35', 80: '#dfcf5b', 85: '#f0df72', 90: '#fdee8c', 95: '#fff7c0'},
35
35
  dark: {15: '#2c2600', 25: '#443c00', 70: '#bcae4e', 75: '#cdbe59', 85: '#eedf75', 90: '#fdee8c'},
36
36
  },
37
37
  teal: {
@@ -40,6 +40,7 @@ export const butterPaletteRefs = {
40
40
  },
41
41
  accent: {
42
42
  light: {35: '#194ce8', 40: '#225bff', 55: '#4d82ff'},
43
+ dark: {70: '#81a9ff'},
43
44
  },
44
45
  cyan: {
45
46
  light: {25: '#004649', 80: '#8dd2d3', 90: '#a9eff0'},
package/src/butterTheme.test.ts CHANGED
@@ -58,6 +58,39 @@ describe('butter touch + narrow type pin', () => {
58
58
  });
59
59
  });
60
60
 
61
+ describe('butter input status roles', () => {
62
+ it('keeps bright per-input status rims and glyphs on the border and icon roles', () => {
63
+ const inputs = [
64
+ 'text-input',
65
+ 'text-area',
66
+ 'number-input',
67
+ 'date-input',
68
+ 'time-input',
69
+ 'selector',
70
+ 'multi-selector',
71
+ 'typeahead',
72
+ 'tokenizer',
73
+ ];
74
+
75
+ const {green, red, yellow} = butterModePalettes;
76
+ for (const input of inputs) {
77
+ const component = butterTheme.components![input];
78
+ expect(component['status:success']).toMatchObject({
79
+ '--color-border-success': `light-dark(${green.light[55]}, ${green.light[70]})`,
80
+ '--color-icon-success': `light-dark(${green.light[55]}, ${green.light[70]})`,
81
+ });
82
+ expect(component['status:warning']).toMatchObject({
83
+ '--color-border-warning': `light-dark(${yellow.light[55]}, ${yellow.light[80]})`,
84
+ '--color-icon-warning': `light-dark(${yellow.light[55]}, ${yellow.light[80]})`,
85
+ });
86
+ expect(component['status:error']).toMatchObject({
87
+ '--color-border-error': red.light[60],
88
+ '--color-icon-error': red.light[60],
89
+ });
90
+ }
91
+ });
92
+ });
93
+
61
94
  describe('butter secondary ComplexSelector', () => {
62
95
  it('keeps the hover fill off a disabled trigger in either form', () => {
63
96
  expect(generateThemeCSS(butterTheme).component).toMatch(
@@ -125,16 +158,12 @@ describe('butter color token mapping completeness', () => {
125
158
  });
126
159
  expect(butterTheme.components?.banner).toMatchObject({
127
160
  'status:info': {
128
- '--color-accent-muted': accent.light[55],
129
- '--color-text-primary': neutral.light[15],
130
- '--color-text-secondary': neutral.light[15],
131
- '--color-accent': neutral.light[15],
161
+ '--color-info-muted': accent.light[55],
162
+ '--color-on-info-muted': neutral.light[15],
132
163
  },
133
164
  'status:error': {
134
165
  '--color-error-muted': red.light[60],
135
- '--color-text-primary': neutral.light[15],
136
- '--color-text-secondary': neutral.light[15],
137
- '--color-error': neutral.light[15],
166
+ '--color-on-error-muted': neutral.light[15],
138
167
  },
139
168
  });
140
169
  expect(
package/src/butterTheme.ts CHANGED
@@ -107,6 +107,25 @@ const SECONDARY_COMPLEX_SELECTOR = {
107
107
  SECONDARY_BUTTON[':hover'],
108
108
  } as const;
109
109
 
110
+ /**
111
+ * Butter's bright status rims and glyphs in input status scopes. Light mode
112
+ * uses mid-ramp stops so a rim reaches 3:1 on the field (theme-tokens INV11).
113
+ */
114
+ const INPUT_STATUS_VARS = {
115
+ 'status:success': {
116
+ '--color-border-success': lightDark(green.light[55], green.light[70]),
117
+ '--color-icon-success': lightDark(green.light[55], green.light[70]),
118
+ },
119
+ 'status:warning': {
120
+ '--color-border-warning': lightDark(yellow.light[55], yellow.light[80]),
121
+ '--color-icon-warning': lightDark(yellow.light[55], yellow.light[80]),
122
+ },
123
+ 'status:error': {
124
+ '--color-border-error': red.light[60],
125
+ '--color-icon-error': red.light[60],
126
+ },
127
+ } as const;
128
+
110
129
  export const butterTheme = defineTheme({
111
130
  name: 'butter',
112
131
 
@@ -187,6 +206,19 @@ export const butterTheme = defineTheme({
187
206
  '--color-on-error': [red.light[95], red.dark[15]],
188
207
  '--color-on-warning': [yellow.light[95], yellow.dark[15]],
189
208
 
209
+ // Info is its own blue status, independent of the accent.
210
+ '--color-info': [accent.light[40], accent.dark[70]],
211
+ '--color-info-muted': 'var(--color-background-blue)',
212
+
213
+ '--color-text-info': [accent.light[40], accent.dark[70]],
214
+ '--color-text-success': [green.light[25], green.dark[80]],
215
+ '--color-text-warning': [yellow.light[25], yellow.dark[85]],
216
+ '--color-text-error': [red.light[25], red.dark[80]],
217
+ '--color-on-info-muted': 'var(--color-text-blue)',
218
+ '--color-on-success-muted': [green.light[25], green.dark[80]],
219
+ '--color-on-warning-muted': [yellow.light[25], yellow.dark[85]],
220
+ '--color-on-error-muted': [red.light[25], red.dark[90]],
221
+
190
222
  // Icon
191
223
  '--color-icon-accent': [accent.light[40], yellow.dark[90]],
192
224
  '--color-icon-primary': [neutral.light[15], neutral.dark[90]],
@@ -410,34 +442,23 @@ export const butterTheme = defineTheme({
410
442
  },
411
443
  },
412
444
 
413
- // Banner backgrounds match the semantic badge fills.
414
- // Banner status colors — override the muted tokens locally so the
415
- // header (which reads --color-*-muted via StyleX) renders vivid fills
416
- // matching the badge palette. Scoped to the banner root, doesn't leak.
445
+ // Banner status surfaces and content use the reviewed vivid pair.
417
446
  banner: {
418
447
  'status:info': {
419
- '--color-accent-muted': accent.light[55],
420
- '--color-text-primary': neutral.light[15],
421
- '--color-text-secondary': neutral.light[15],
422
- '--color-accent': neutral.light[15],
448
+ '--color-info-muted': accent.light[55],
449
+ '--color-on-info-muted': neutral.light[15],
423
450
  },
424
451
  'status:success': {
425
452
  '--color-success-muted': green.light[70],
426
- '--color-text-primary': neutral.light[15],
427
- '--color-text-secondary': neutral.light[15],
428
- '--color-success': neutral.light[15],
453
+ '--color-on-success-muted': neutral.light[15],
429
454
  },
430
455
  'status:warning': {
431
456
  '--color-warning-muted': yellow.light[80],
432
- '--color-text-primary': neutral.light[15],
433
- '--color-text-secondary': neutral.light[15],
434
- '--color-warning': neutral.light[15],
457
+ '--color-on-warning-muted': neutral.light[15],
435
458
  },
436
459
  'status:error': {
437
460
  '--color-error-muted': red.light[60],
438
- '--color-text-primary': neutral.light[15],
439
- '--color-text-secondary': neutral.light[15],
440
- '--color-error': neutral.light[15],
461
+ '--color-on-error-muted': neutral.light[15],
441
462
  },
442
463
  },
443
464
 
@@ -561,9 +582,7 @@ export const butterTheme = defineTheme({
561
582
  paddingInline: 'var(--spacing-3)',
562
583
  borderColor: 'var(--color-border)',
563
584
  },
564
- 'status:success': {'--color-success': green.light[70]},
565
- 'status:warning': {'--color-warning': yellow.light[80]},
566
- 'status:error': {'--color-error': red.light[60]},
585
+ ...INPUT_STATUS_VARS,
567
586
  },
568
587
  'text-area': {
569
588
  base: {
@@ -571,9 +590,7 @@ export const butterTheme = defineTheme({
571
590
  paddingInline: 'var(--spacing-3)',
572
591
  borderColor: 'var(--color-border)',
573
592
  },
574
- 'status:success': {'--color-success': green.light[70]},
575
- 'status:warning': {'--color-warning': yellow.light[80]},
576
- 'status:error': {'--color-error': red.light[60]},
593
+ ...INPUT_STATUS_VARS,
577
594
  },
578
595
  'number-input': {
579
596
  base: {
@@ -581,9 +598,7 @@ export const butterTheme = defineTheme({
581
598
  paddingInline: 'var(--spacing-3)',
582
599
  borderColor: 'var(--color-border)',
583
600
  },
584
- 'status:success': {'--color-success': green.light[70]},
585
- 'status:warning': {'--color-warning': yellow.light[80]},
586
- 'status:error': {'--color-error': red.light[60]},
601
+ ...INPUT_STATUS_VARS,
587
602
  },
588
603
  'date-input': {
589
604
  base: {
@@ -591,9 +606,7 @@ export const butterTheme = defineTheme({
591
606
  paddingInline: 'var(--spacing-3)',
592
607
  borderColor: 'var(--color-border)',
593
608
  },
594
- 'status:success': {'--color-success': green.light[70]},
595
- 'status:warning': {'--color-warning': yellow.light[80]},
596
- 'status:error': {'--color-error': red.light[60]},
609
+ ...INPUT_STATUS_VARS,
597
610
  },
598
611
  'time-input': {
599
612
  base: {
@@ -601,9 +614,7 @@ export const butterTheme = defineTheme({
601
614
  paddingInline: 'var(--spacing-3)',
602
615
  borderColor: 'var(--color-border)',
603
616
  },
604
- 'status:success': {'--color-success': green.light[70]},
605
- 'status:warning': {'--color-warning': yellow.light[80]},
606
- 'status:error': {'--color-error': red.light[60]},
617
+ ...INPUT_STATUS_VARS,
607
618
  },
608
619
  selector: {
609
620
  base: {
@@ -611,9 +622,7 @@ export const butterTheme = defineTheme({
611
622
  paddingInline: 'var(--spacing-3)',
612
623
  borderColor: 'var(--color-border)',
613
624
  },
614
- 'status:success': {'--color-success': green.light[70]},
615
- 'status:warning': {'--color-warning': yellow.light[80]},
616
- 'status:error': {'--color-error': red.light[60]},
625
+ ...INPUT_STATUS_VARS,
617
626
  'variant:secondary': SECONDARY_SELECTOR,
618
627
  },
619
628
  'multi-selector': {
@@ -622,9 +631,7 @@ export const butterTheme = defineTheme({
622
631
  paddingInline: 'var(--spacing-3)',
623
632
  borderColor: 'var(--color-border)',
624
633
  },
625
- 'status:success': {'--color-success': green.light[70]},
626
- 'status:warning': {'--color-warning': yellow.light[80]},
627
- 'status:error': {'--color-error': red.light[60]},
634
+ ...INPUT_STATUS_VARS,
628
635
  'variant:secondary': SECONDARY_SELECTOR,
629
636
  },
630
637
  'complex-selector': {'variant:secondary': SECONDARY_COMPLEX_SELECTOR},
@@ -634,9 +641,7 @@ export const butterTheme = defineTheme({
634
641
  paddingInline: 'var(--spacing-3)',
635
642
  borderColor: 'var(--color-border)',
636
643
  },
637
- 'status:success': {'--color-success': green.light[70]},
638
- 'status:warning': {'--color-warning': yellow.light[80]},
639
- 'status:error': {'--color-error': red.light[60]},
644
+ ...INPUT_STATUS_VARS,
640
645
  },
641
646
  tokenizer: {
642
647
  base: {
@@ -644,9 +649,7 @@ export const butterTheme = defineTheme({
644
649
  paddingInline: 'var(--spacing-3)',
645
650
  borderColor: 'var(--color-border)',
646
651
  },
647
- 'status:success': {'--color-success': green.light[70]},
648
- 'status:warning': {'--color-warning': yellow.light[80]},
649
- 'status:error': {'--color-error': red.light[60]},
652
+ ...INPUT_STATUS_VARS,
650
653
  },
651
654
 
652
655
  // Display sizes use Sarina — the signature buttery display