@astryxdesign/theme-butter 0.7.3 → 0.7.4-canary.39f7153

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 (31) hide show
  1. package/README.md +30 -23
  2. package/dist/butter.d.ts +2 -2
  3. package/dist/butter.js +122 -122
  4. package/dist/butter.variants.d.ts +2 -2
  5. package/dist/butterColorMapping.test.d.ts +2 -0
  6. package/dist/butterColorMapping.test.d.ts.map +1 -0
  7. package/dist/butterPaletteRefs.generated.d.ts +170 -0
  8. package/dist/butterPaletteRefs.generated.d.ts.map +1 -0
  9. package/dist/butterPalettes.generated.d.ts +545 -0
  10. package/dist/butterPalettes.generated.d.ts.map +1 -0
  11. package/dist/butterPalettes.test.d.ts +2 -0
  12. package/dist/butterPalettes.test.d.ts.map +1 -0
  13. package/dist/butterTheme.d.ts +9 -8
  14. package/dist/butterTheme.d.ts.map +1 -1
  15. package/dist/source.d.ts +1 -1
  16. package/dist/source.d.ts.map +1 -1
  17. package/dist/source.js +303 -212
  18. package/dist/source.mjs +303 -212
  19. package/dist/theme.css +122 -122
  20. package/dist/theme.css.d.ts +2 -2
  21. package/package.json +5 -4
  22. package/palette.config.json +484 -0
  23. package/src/__snapshots__/butterPalettes.test.ts.snap +328 -0
  24. package/src/butterColorMapping.test.ts +64 -0
  25. package/src/butterPaletteRefs.generated.ts +54 -0
  26. package/src/butterPalettes.generated.receipt.json +1499 -0
  27. package/src/butterPalettes.generated.ts +550 -0
  28. package/src/butterPalettes.test.ts +66 -0
  29. package/src/butterTheme.test.ts +121 -2
  30. package/src/butterTheme.ts +274 -234
  31. package/src/source.ts +1 -1
package/README.md CHANGED
@@ -22,29 +22,36 @@ function App() {
22
22
 
23
23
  ## Colors
24
24
 
25
- Source palette:
26
-
27
- | Role | Hex |
28
- | ------- | --------- |
29
- | Accent | `#225BFF` |
30
- | Yellow | `#FDEE8C` |
31
- | Error | `#FC473B` |
32
- | Warning | `#FFC502` |
33
- | Success | `#91D143` |
34
- | Info | `#4883FD` |
35
-
36
- Each color (Blue, Cyan, Green, Orange, Pink, Purple, Red, Teal, Yellow,
37
- plus Error / Warning / Success) is published as a smooth 21-step tonal
38
- palette in `butterPalettes`. Categorical badges, cards, and banner text
39
- roles read from these palettes via:
40
-
41
- - `T90` light / `T15` dark: background surfaces
42
- - `T80` light / `T25` dark: borders, dark-mode text
43
- - `T25` light / `T80` dark: light-mode text, icons
44
-
45
- To regenerate the palettes after changing a source color, edit the
46
- `SOURCES` map in `scripts/generate-palettes.mjs`, run the script, and
47
- paste the output back into `src/butterTheme.ts`.
25
+ Butter's approved palette is generated from `palette.config.json`. It contains
26
+ complete light and dark ramps for the warm neutral, signature blue, and nine
27
+ categorical families. `#225BFF` and `#FDEE8C` are exact anchors for Butter's
28
+ signature blue and yellow. Green remains anchorless so its ramp stays smooth.
29
+
30
+ Theme and component roles use semantic tokens backed by the small generated
31
+ `butterPaletteRefs` selection. Components should consume those semantic tokens,
32
+ not raw palette values. Error, warning, and success share Red, Yellow, and Green
33
+ rather than maintaining duplicate ramps. Data-visualization colors remain
34
+ separate and are not overridden by this theme.
35
+
36
+ The existing `butterPalettes` export remains unchanged as a compatibility
37
+ snapshot. The complete reviewed mode-aware palette is private to authoring,
38
+ tests, and selected-reference generation, so adopting it does not change the
39
+ public API shape or force the full candidate into theme evaluation.
40
+
41
+ After changing `palette.config.json`, regenerate the candidate and receipt with:
42
+
43
+ ```bash
44
+ pnpm -F @astryxdesign/theme-butter exec astryx theme palette generate \
45
+ palette.config.json \
46
+ --out src/butterPalettes.generated.ts \
47
+ --preview .tmp-butter-palette-preview.html \
48
+ --overwrite
49
+ ```
50
+
51
+ Keep the standard copyright header on the committed TypeScript candidate, review
52
+ the preview in both modes, remove `.tmp-butter-palette-preview.html`, then run
53
+ `pnpm generate:butter-palette-refs`. Keep the theme package and CLI template
54
+ copies synchronized.
48
55
 
49
56
  ## Typography
50
57
 
package/dist/butter.d.ts CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/butterTheme.ts
4
4
  * Command: astryx theme build src/butterTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.7.3
6
- * Core: @astryxdesign/core@0.7.3
5
+ * CLI: @astryxdesign/cli@0.7.4
6
+ * Core: @astryxdesign/core@0.7.4
7
7
  */
8
8
 
9
9
  /// <reference path="./butter.variants.d.ts" />
package/dist/butter.js CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/butterTheme.ts
4
4
  * Command: astryx theme build src/butterTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.7.3
6
- * Core: @astryxdesign/core@0.7.3
5
+ * CLI: @astryxdesign/cli@0.7.4
6
+ * Core: @astryxdesign/core@0.7.4
7
7
  */
8
8
 
9
9
  import { butterIconRegistry } from "./icons.mjs";
@@ -85,7 +85,7 @@ export const butterTheme = {
85
85
  "--font-family-heading": "Outfit, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
86
86
  "--font-family-code": "\"JetBrains Mono\", \"SF Mono\", Monaco, Consolas, monospace",
87
87
  "--color-syntax-keyword": "light-dark(#52237b, #ddb9f6)",
88
- "--color-syntax-string": "light-dark(#004800, #a5d29d)",
88
+ "--color-syntax-string": "light-dark(#004a05, #a8d4a6)",
89
89
  "--color-syntax-comment": "light-dark(#605f52, #adac9e)",
90
90
  "--color-syntax-number": "light-dark(#622e00, #f2bd81)",
91
91
  "--color-syntax-function": "light-dark(#203a6c, #bdc5eb)",
@@ -93,53 +93,53 @@ export const butterTheme = {
93
93
  "--color-syntax-variable": "light-dark(#605f52, #adac9e)",
94
94
  "--color-syntax-operator": "light-dark(#605f52, #adac9e)",
95
95
  "--color-syntax-constant": "light-dark(#622e00, #f2bd81)",
96
- "--color-syntax-tag": "light-dark(#6d211c, #f4b8ae)",
97
- "--color-syntax-attribute": "light-dark(#413e00, #d6c957)",
96
+ "--color-syntax-tag": "light-dark(#6f1400, #ffb09b)",
97
+ "--color-syntax-attribute": "light-dark(#443c00, #bcae4e)",
98
98
  "--color-syntax-property": "light-dark(#00482d, #94d3bb)",
99
99
  "--color-syntax-punctuation": "light-dark(#605f52, #adac9e)",
100
- "--color-syntax-background": "light-dark(#FDFBE4, #131107)",
100
+ "--color-syntax-background": "light-dark(#fdfbe4, #131107)",
101
101
  "--color-syntax-added": "color-mix(in srgb, var(--color-success-muted) 25%, transparent)",
102
102
  "--color-syntax-removed": "color-mix(in srgb, var(--color-error-muted) 25%, transparent)",
103
103
  "--color-syntax-diff-header": "transparent",
104
104
  "--color-syntax-added-marker": "var(--color-syntax-punctuation)",
105
105
  "--color-syntax-removed-marker": "var(--color-syntax-punctuation)",
106
- "--color-accent": "light-dark(#225BFF, #FDEE8C)",
107
- "--color-accent-muted": "light-dark(#225BFF33, #FDEE8C40)",
108
- "--color-neutral": "light-dark(#1d1c110F, #f3f2e21A)",
109
- "--color-background-surface": "light-dark(#FFFFFF, #2E2117)",
110
- "--color-background-body": "light-dark(#FDFBE4, #261A13)",
111
- "--color-overlay": "light-dark(#1d1c1180, #261A13cc)",
112
- "--color-overlay-hover": "light-dark(#1d1c110D, #f3f2e20D)",
113
- "--color-overlay-pressed": "light-dark(#1d1c111A, #f3f2e21A)",
114
- "--color-background-muted": "light-dark(#f3f2e2, #3A2A1F)",
106
+ "--color-accent": "light-dark(#225bff, #fdee8c)",
107
+ "--color-accent-muted": "light-dark(#225bff33, #fdee8c40)",
108
+ "--color-neutral": "light-dark(#1d1c110f, #f3f2e21a)",
109
+ "--color-background-surface": "light-dark(#ffffff, #2e2117)",
110
+ "--color-background-body": "light-dark(#fdfbe4, #261a13)",
111
+ "--color-overlay": "light-dark(#1d1c1180, #261a13cc)",
112
+ "--color-overlay-hover": "light-dark(#1d1c110d, #f3f2e20d)",
113
+ "--color-overlay-pressed": "light-dark(#1d1c111a, #f3f2e21a)",
114
+ "--color-background-muted": "light-dark(#f3f2e2, #3a2a1f)",
115
115
  "--color-text-primary": "light-dark(#1d1c11, #f3f2e2)",
116
116
  "--color-text-secondary": "light-dark(#605f52, #adac9e)",
117
117
  "--color-text-disabled": "light-dark(#adac9e, #605f52)",
118
- "--color-text-accent": "light-dark(#225BFF, #FDEE8C)",
118
+ "--color-text-accent": "light-dark(#225bff, #fdee8c)",
119
119
  "--color-on-dark": "#ffffff",
120
120
  "--color-on-light": "#1d1c11",
121
121
  "--color-on-accent": "light-dark(#ffffff, #1d1c11)",
122
- "--color-on-success": "light-dark(#ccff88, #0b2e00)",
123
- "--color-on-error": "light-dark(#ffe3de, #600000)",
124
- "--color-on-warning": "light-dark(#ffeec3, #3b2200)",
125
- "--color-icon-accent": "light-dark(#225BFF, #FDEE8C)",
122
+ "--color-on-success": "light-dark(#b6e3b4, #013004)",
123
+ "--color-on-error": "light-dark(#ffece7, #4c0700)",
124
+ "--color-on-warning": "light-dark(#fff7c0, #2c2600)",
125
+ "--color-icon-accent": "light-dark(#225bff, #fdee8c)",
126
126
  "--color-icon-primary": "light-dark(#1d1c11, #f3f2e2)",
127
127
  "--color-icon-secondary": "light-dark(#605f52, #adac9e)",
128
128
  "--color-icon-disabled": "light-dark(#adac9e, #605f52)",
129
- "--color-background-card": "light-dark(#FFFFFF, #3A2A1F)",
130
- "--color-background-popover": "light-dark(#FFFFFF, #3A2A1F)",
131
- "--color-background-inverted": "light-dark(#1d1c11, #FDFBE4)",
132
- "--color-error": "light-dark(#771210, #ffb4a6)",
133
- "--color-error-muted": "light-dark(#77121033, #ffb4a640)",
134
- "--color-warning": "light-dark(#543700, #f7be00)",
135
- "--color-warning-muted": "light-dark(#54370033, #f7be0040)",
136
- "--color-success": "light-dark(#004700, #99d94b)",
137
- "--color-success-muted": "light-dark(#00470033, #99d94b40)",
138
- "--color-border": "light-dark(#e5e3d4, #f3f2e21A)",
139
- "--color-border-emphasized": "light-dark(#C7C4B2, #939184)",
129
+ "--color-background-card": "light-dark(#ffffff, #3a2a1f)",
130
+ "--color-background-popover": "light-dark(#ffffff, #3a2a1f)",
131
+ "--color-background-inverted": "light-dark(#1d1c11, #fdfbe4)",
132
+ "--color-error": "light-dark(#821b00, #ffc5b5)",
133
+ "--color-error-muted": "light-dark(#821b0033, #ffc5b540)",
134
+ "--color-warning": "light-dark(#514700, #cdbe59)",
135
+ "--color-warning-muted": "light-dark(#51470033, #cdbe5940)",
136
+ "--color-success": "light-dark(#004a05, #83bc82)",
137
+ "--color-success-muted": "light-dark(#004a0533, #83bc8240)",
138
+ "--color-border": "light-dark(#e5e3d4, #f3f2e21a)",
139
+ "--color-border-emphasized": "light-dark(#c7c4b2, #939184)",
140
140
  "--color-skeleton": "light-dark(#e5e3d4, #49473b)",
141
- "--color-shadow": "light-dark(#1d1c111A, #0000004D)",
142
- "--color-tint-hover": "light-dark(black, white)",
141
+ "--color-shadow": "light-dark(#1d1c111a, #0000004d)",
142
+ "--color-tint-hover": "light-dark(#000000, #ffffff)",
143
143
  "--size-element-sm": "32px",
144
144
  "--size-element-md": "40px",
145
145
  "--size-element-lg": "48px",
@@ -155,10 +155,10 @@ export const butterTheme = {
155
155
  "--color-border-gray": "light-dark(#d6d3b8, #d6d3b8)",
156
156
  "--color-icon-gray": "light-dark(#4a4732, #4a4732)",
157
157
  "--color-text-gray": "light-dark(#4a4732, #4a4732)",
158
- "--color-background-green": "light-dark(#c1efb8, #c1efb8)",
159
- "--color-border-green": "light-dark(#a5d29d, #a5d29d)",
160
- "--color-icon-green": "light-dark(#004800, #004800)",
161
- "--color-text-green": "light-dark(#004800, #004800)",
158
+ "--color-background-green": "light-dark(#caeec8, #cdedcc)",
159
+ "--color-border-green": "light-dark(#a2d7a0, #a8d4a6)",
160
+ "--color-icon-green": "light-dark(#004a05, #063c0a)",
161
+ "--color-text-green": "light-dark(#004a05, #063c0a)",
162
162
  "--color-background-orange": "light-dark(#ffdcb6, #ffdcb6)",
163
163
  "--color-border-orange": "light-dark(#f2bd81, #f2bd81)",
164
164
  "--color-icon-orange": "light-dark(#622e00, #622e00)",
@@ -171,32 +171,32 @@ export const butterTheme = {
171
171
  "--color-border-purple": "light-dark(#ddb9f6, #ddb9f6)",
172
172
  "--color-icon-purple": "light-dark(#52237b, #52237b)",
173
173
  "--color-text-purple": "light-dark(#52237b, #52237b)",
174
- "--color-background-red": "light-dark(#ffdad3, #ffdad3)",
175
- "--color-border-red": "light-dark(#f4b8ae, #f4b8ae)",
176
- "--color-icon-red": "light-dark(#6d211c, #6d211c)",
177
- "--color-text-red": "light-dark(#6d211c, #6d211c)",
174
+ "--color-background-red": "light-dark(#ffd9cf, #ffd9cf)",
175
+ "--color-border-red": "light-dark(#ffb09b, #ffb09b)",
176
+ "--color-icon-red": "light-dark(#6f1400, #6f1400)",
177
+ "--color-text-red": "light-dark(#6f1400, #6f1400)",
178
178
  "--color-background-teal": "light-dark(#b0f0d7, #b0f0d7)",
179
179
  "--color-border-teal": "light-dark(#94d3bb, #94d3bb)",
180
180
  "--color-icon-teal": "light-dark(#00482d, #00482d)",
181
181
  "--color-text-teal": "light-dark(#00482d, #00482d)",
182
- "--color-background-yellow": "light-dark(#feee7b, #feee7b)",
183
- "--color-border-yellow": "light-dark(#d6c957, #d6c957)",
184
- "--color-icon-yellow": "light-dark(#413e00, #413e00)",
185
- "--color-text-yellow": "light-dark(#413e00, #413e00)",
182
+ "--color-background-yellow": "light-dark(#f0df72, #eedf75)",
183
+ "--color-border-yellow": "light-dark(#bfae35, #bcae4e)",
184
+ "--color-icon-yellow": "light-dark(#443c00, #443c00)",
185
+ "--color-text-yellow": "light-dark(#443c00, #443c00)",
186
186
  "--radius-none": "0px",
187
187
  "--radius-inner": "0.375rem",
188
188
  "--radius-element": "0.5rem",
189
189
  "--radius-container": "0.75rem",
190
190
  "--radius-page": "1.5rem",
191
191
  "--radius-full": "9999px",
192
- "--shadow-low": "0 2px 4px #1d1c110D, 0 4px 8px #1d1c111A",
193
- "--shadow-med": "0 2px 4px #1d1c110D, 0 4px 12px #1d1c111A",
194
- "--shadow-high": "0 4px 6px #1d1c111A, 0 12px 24px #1d1c1126",
192
+ "--shadow-low": "0 2px 4px #1d1c110d, 0 4px 8px #1d1c111a",
193
+ "--shadow-med": "0 2px 4px #1d1c110d, 0 4px 12px #1d1c111a",
194
+ "--shadow-high": "0 4px 6px #1d1c111a, 0 12px 24px #1d1c1126",
195
195
  "--shadow-inset-hover": "inset 0px 0px 0px 2px #79786a30",
196
196
  "--shadow-inset-selected": "inset 0px 0px 0px 2px #79786a50",
197
- "--shadow-inset-success": "inset 0px 0px 0px 2px #00470030",
198
- "--shadow-inset-warning": "inset 0px 0px 0px 2px #54370030",
199
- "--shadow-inset-error": "inset 0px 0px 0px 2px #77121030"
197
+ "--shadow-inset-success": "inset 0px 0px 0px 2px #004a0530",
198
+ "--shadow-inset-warning": "inset 0px 0px 0px 2px #51470030",
199
+ "--shadow-inset-error": "inset 0px 0px 0px 2px #821b0030"
200
200
  },
201
201
  components: {
202
202
  "heading": {
@@ -296,16 +296,16 @@ export const butterTheme = {
296
296
  },
297
297
  "top-nav-heading": {
298
298
  "base": {
299
- "color": "light-dark(#225BFF, #FDEE8C)",
300
- "--color-text-primary": "light-dark(#225BFF, #FDEE8C)"
299
+ "color": "light-dark(#225bff, #fdee8c)",
300
+ "--color-text-primary": "light-dark(#225bff, #fdee8c)"
301
301
  }
302
302
  },
303
303
  "top-nav-item": {
304
304
  "base": {
305
- "color": "light-dark(#6E92FF, #FDEE8CCC)"
305
+ "color": "light-dark(#225bff, #fdee8ccc)"
306
306
  },
307
307
  "selected": {
308
- "color": "light-dark(#225BFF, #FDEE8C)",
308
+ "color": "light-dark(#194ce8, #fdee8c)",
309
309
  "backgroundColor": "transparent",
310
310
  ":hover": {
311
311
  "backgroundColor": "var(--color-overlay-hover)"
@@ -324,18 +324,18 @@ export const butterTheme = {
324
324
  "backgroundColor": "transparent",
325
325
  "borderWidth": "1.5px",
326
326
  "borderStyle": "solid",
327
- "borderColor": "light-dark(#225BFF, #FDEE8C)",
328
- "color": "light-dark(#225BFF, #FDEE8C)",
327
+ "borderColor": "light-dark(#225bff, #fdee8c)",
328
+ "color": "light-dark(#225bff, #fdee8c)",
329
329
  ":hover": {
330
- "backgroundColor": "light-dark(#225BFF14, #FDEE8C14)"
330
+ "backgroundColor": "light-dark(#225bff14, #fdee8c14)"
331
331
  }
332
332
  },
333
333
  "variant:ghost": {
334
- "color": "light-dark(#225BFF, #FDEE8C)"
334
+ "color": "light-dark(#225bff, #fdee8c)"
335
335
  },
336
336
  "variant:destructive": {
337
- "backgroundColor": "light-dark(#ffdad3, #f4b8ae)",
338
- "color": "light-dark(#550000, #6d211c)"
337
+ "backgroundColor": "light-dark(#ffd9cf, #ffb09b)",
338
+ "color": "light-dark(#3b0200, #6f1400)"
339
339
  }
340
340
  },
341
341
  "badge": {
@@ -345,50 +345,50 @@ export const butterTheme = {
345
345
  "paddingInline": "var(--spacing-3)"
346
346
  },
347
347
  "variant:info": {
348
- "backgroundColor": "#4883fd",
349
- "color": "#ffffff"
348
+ "backgroundColor": "#4d82ff",
349
+ "color": "#1d1c11"
350
350
  },
351
351
  "variant:neutral": {
352
- "backgroundColor": "#ffee7b",
353
- "color": "#225BFF"
352
+ "backgroundColor": "#fdee8c",
353
+ "color": "#194ce8"
354
354
  },
355
355
  "variant:success": {
356
- "backgroundColor": "#91D143",
356
+ "backgroundColor": "#7bbf7a",
357
357
  "color": "#1d1c11"
358
358
  },
359
359
  "variant:warning": {
360
- "backgroundColor": "#ffc502",
360
+ "backgroundColor": "#dfcf5b",
361
361
  "color": "#1d1c11"
362
362
  },
363
363
  "variant:error": {
364
- "backgroundColor": "#fc473b",
365
- "color": "#ffffff"
364
+ "backgroundColor": "#e56241",
365
+ "color": "#1d1c11"
366
366
  }
367
367
  },
368
368
  "banner": {
369
369
  "status:info": {
370
- "--color-accent-muted": "#4883fd",
371
- "--color-text-primary": "#ffffff",
372
- "--color-text-secondary": "#ffffff",
373
- "--color-accent": "#ffffff"
370
+ "--color-accent-muted": "#4d82ff",
371
+ "--color-text-primary": "#1d1c11",
372
+ "--color-text-secondary": "#1d1c11",
373
+ "--color-accent": "#1d1c11"
374
374
  },
375
375
  "status:success": {
376
- "--color-success-muted": "#91D143",
376
+ "--color-success-muted": "#7bbf7a",
377
377
  "--color-text-primary": "#1d1c11",
378
378
  "--color-text-secondary": "#1d1c11",
379
379
  "--color-success": "#1d1c11"
380
380
  },
381
381
  "status:warning": {
382
- "--color-warning-muted": "#ffc502",
382
+ "--color-warning-muted": "#dfcf5b",
383
383
  "--color-text-primary": "#1d1c11",
384
384
  "--color-text-secondary": "#1d1c11",
385
385
  "--color-warning": "#1d1c11"
386
386
  },
387
387
  "status:error": {
388
- "--color-error-muted": "#fc473b",
389
- "--color-text-primary": "#ffffff",
390
- "--color-text-secondary": "#ffffff",
391
- "--color-error": "#ffffff"
388
+ "--color-error-muted": "#e56241",
389
+ "--color-text-primary": "#1d1c11",
390
+ "--color-text-secondary": "#1d1c11",
391
+ "--color-error": "#1d1c11"
392
392
  }
393
393
  },
394
394
  "card": {
@@ -469,27 +469,27 @@ export const butterTheme = {
469
469
  },
470
470
  "progress-bar-fill": {
471
471
  "variant:success": {
472
- "backgroundColor": "#91D143"
472
+ "backgroundColor": "#7bbf7a"
473
473
  },
474
474
  "variant:warning": {
475
- "backgroundColor": "#ffc502"
475
+ "backgroundColor": "#dfcf5b"
476
476
  },
477
477
  "variant:error": {
478
- "backgroundColor": "#fc473b"
478
+ "backgroundColor": "#e56241"
479
479
  }
480
480
  },
481
481
  "field-status": {
482
482
  "type:success": {
483
- "backgroundColor": "#91D143",
483
+ "backgroundColor": "#7bbf7a",
484
484
  "color": "#1d1c11"
485
485
  },
486
486
  "type:warning": {
487
- "backgroundColor": "#ffc502",
487
+ "backgroundColor": "#dfcf5b",
488
488
  "color": "#1d1c11"
489
489
  },
490
490
  "type:error": {
491
- "backgroundColor": "#fc473b",
492
- "color": "#ffffff"
491
+ "backgroundColor": "#e56241",
492
+ "color": "#1d1c11"
493
493
  }
494
494
  },
495
495
  "text-input": {
@@ -499,13 +499,13 @@ export const butterTheme = {
499
499
  "borderColor": "var(--color-border)"
500
500
  },
501
501
  "status:success": {
502
- "--color-success": "#91D143"
502
+ "--color-success": "#7bbf7a"
503
503
  },
504
504
  "status:warning": {
505
- "--color-warning": "#ffc502"
505
+ "--color-warning": "#dfcf5b"
506
506
  },
507
507
  "status:error": {
508
- "--color-error": "#fc473b"
508
+ "--color-error": "#e56241"
509
509
  }
510
510
  },
511
511
  "text-area": {
@@ -515,13 +515,13 @@ export const butterTheme = {
515
515
  "borderColor": "var(--color-border)"
516
516
  },
517
517
  "status:success": {
518
- "--color-success": "#91D143"
518
+ "--color-success": "#7bbf7a"
519
519
  },
520
520
  "status:warning": {
521
- "--color-warning": "#ffc502"
521
+ "--color-warning": "#dfcf5b"
522
522
  },
523
523
  "status:error": {
524
- "--color-error": "#fc473b"
524
+ "--color-error": "#e56241"
525
525
  }
526
526
  },
527
527
  "number-input": {
@@ -531,13 +531,13 @@ export const butterTheme = {
531
531
  "borderColor": "var(--color-border)"
532
532
  },
533
533
  "status:success": {
534
- "--color-success": "#91D143"
534
+ "--color-success": "#7bbf7a"
535
535
  },
536
536
  "status:warning": {
537
- "--color-warning": "#ffc502"
537
+ "--color-warning": "#dfcf5b"
538
538
  },
539
539
  "status:error": {
540
- "--color-error": "#fc473b"
540
+ "--color-error": "#e56241"
541
541
  }
542
542
  },
543
543
  "date-input": {
@@ -547,13 +547,13 @@ export const butterTheme = {
547
547
  "borderColor": "var(--color-border)"
548
548
  },
549
549
  "status:success": {
550
- "--color-success": "#91D143"
550
+ "--color-success": "#7bbf7a"
551
551
  },
552
552
  "status:warning": {
553
- "--color-warning": "#ffc502"
553
+ "--color-warning": "#dfcf5b"
554
554
  },
555
555
  "status:error": {
556
- "--color-error": "#fc473b"
556
+ "--color-error": "#e56241"
557
557
  }
558
558
  },
559
559
  "time-input": {
@@ -563,13 +563,13 @@ export const butterTheme = {
563
563
  "borderColor": "var(--color-border)"
564
564
  },
565
565
  "status:success": {
566
- "--color-success": "#91D143"
566
+ "--color-success": "#7bbf7a"
567
567
  },
568
568
  "status:warning": {
569
- "--color-warning": "#ffc502"
569
+ "--color-warning": "#dfcf5b"
570
570
  },
571
571
  "status:error": {
572
- "--color-error": "#fc473b"
572
+ "--color-error": "#e56241"
573
573
  }
574
574
  },
575
575
  "selector": {
@@ -579,24 +579,24 @@ export const butterTheme = {
579
579
  "borderColor": "var(--color-border)"
580
580
  },
581
581
  "status:success": {
582
- "--color-success": "#91D143"
582
+ "--color-success": "#7bbf7a"
583
583
  },
584
584
  "status:warning": {
585
- "--color-warning": "#ffc502"
585
+ "--color-warning": "#dfcf5b"
586
586
  },
587
587
  "status:error": {
588
- "--color-error": "#fc473b"
588
+ "--color-error": "#e56241"
589
589
  },
590
590
  "variant:secondary": {
591
591
  ":not(.astryx-input-group *)": {
592
592
  "backgroundColor": "transparent",
593
593
  "borderWidth": "1.5px",
594
594
  "borderStyle": "solid",
595
- "borderColor": "light-dark(#225BFF, #FDEE8C)",
596
- "color": "light-dark(#225BFF, #FDEE8C)"
595
+ "borderColor": "light-dark(#225bff, #fdee8c)",
596
+ "color": "light-dark(#225bff, #fdee8c)"
597
597
  },
598
598
  ":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": {
599
- "backgroundColor": "light-dark(#225BFF14, #FDEE8C14)"
599
+ "backgroundColor": "light-dark(#225bff14, #fdee8c14)"
600
600
  }
601
601
  }
602
602
  },
@@ -607,24 +607,24 @@ export const butterTheme = {
607
607
  "borderColor": "var(--color-border)"
608
608
  },
609
609
  "status:success": {
610
- "--color-success": "#91D143"
610
+ "--color-success": "#7bbf7a"
611
611
  },
612
612
  "status:warning": {
613
- "--color-warning": "#ffc502"
613
+ "--color-warning": "#dfcf5b"
614
614
  },
615
615
  "status:error": {
616
- "--color-error": "#fc473b"
616
+ "--color-error": "#e56241"
617
617
  },
618
618
  "variant:secondary": {
619
619
  ":not(.astryx-input-group *)": {
620
620
  "backgroundColor": "transparent",
621
621
  "borderWidth": "1.5px",
622
622
  "borderStyle": "solid",
623
- "borderColor": "light-dark(#225BFF, #FDEE8C)",
624
- "color": "light-dark(#225BFF, #FDEE8C)"
623
+ "borderColor": "light-dark(#225bff, #fdee8c)",
624
+ "color": "light-dark(#225bff, #fdee8c)"
625
625
  },
626
626
  ":hover:not([data-disabled], [data-readonly], .astryx-input-group *)": {
627
- "backgroundColor": "light-dark(#225BFF14, #FDEE8C14)"
627
+ "backgroundColor": "light-dark(#225bff14, #fdee8c14)"
628
628
  }
629
629
  }
630
630
  },
@@ -633,10 +633,10 @@ export const butterTheme = {
633
633
  "backgroundColor": "transparent",
634
634
  "borderWidth": "1.5px",
635
635
  "borderStyle": "solid",
636
- "borderColor": "light-dark(#225BFF, #FDEE8C)",
637
- "color": "light-dark(#225BFF, #FDEE8C)",
636
+ "borderColor": "light-dark(#225bff, #fdee8c)",
637
+ "color": "light-dark(#225bff, #fdee8c)",
638
638
  ":hover:not(:has(> :is(:disabled, [aria-disabled=\"true\"])))": {
639
- "backgroundColor": "light-dark(#225BFF14, #FDEE8C14)"
639
+ "backgroundColor": "light-dark(#225bff14, #fdee8c14)"
640
640
  }
641
641
  }
642
642
  },
@@ -647,13 +647,13 @@ export const butterTheme = {
647
647
  "borderColor": "var(--color-border)"
648
648
  },
649
649
  "status:success": {
650
- "--color-success": "#91D143"
650
+ "--color-success": "#7bbf7a"
651
651
  },
652
652
  "status:warning": {
653
- "--color-warning": "#ffc502"
653
+ "--color-warning": "#dfcf5b"
654
654
  },
655
655
  "status:error": {
656
- "--color-error": "#fc473b"
656
+ "--color-error": "#e56241"
657
657
  }
658
658
  },
659
659
  "tokenizer": {
@@ -663,13 +663,13 @@ export const butterTheme = {
663
663
  "borderColor": "var(--color-border)"
664
664
  },
665
665
  "status:success": {
666
- "--color-success": "#91D143"
666
+ "--color-success": "#7bbf7a"
667
667
  },
668
668
  "status:warning": {
669
- "--color-warning": "#ffc502"
669
+ "--color-warning": "#dfcf5b"
670
670
  },
671
671
  "status:error": {
672
- "--color-error": "#fc473b"
672
+ "--color-error": "#e56241"
673
673
  }
674
674
  }
675
675
  },
package/dist/butter.variants.d.ts CHANGED
@@ -2,8 +2,8 @@
2
2
  * @generated by `astryx theme build` — do not edit manually.
3
3
  * Source: src/butterTheme.ts
4
4
  * Command: astryx theme build src/butterTheme.ts --out dist/theme.css
5
- * CLI: @astryxdesign/cli@0.7.3
6
- * Core: @astryxdesign/core@0.7.3
5
+ * CLI: @astryxdesign/cli@0.7.4
6
+ * Core: @astryxdesign/core@0.7.4
7
7
  */
8
8
 
9
9
  // Generated by astryx theme build
package/dist/butterColorMapping.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=butterColorMapping.test.d.ts.map
package/dist/butterColorMapping.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"butterColorMapping.test.d.ts","sourceRoot":"","sources":["../src/butterColorMapping.test.ts"],"names":[],"mappings":""}