@astryxdesign/theme-butter 0.5.3 → 0.5.4-canary.0fee3bc

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 (7) hide show
  1. package/dist/butter.d.ts +2 -2
  2. package/dist/butter.js +42 -2
  3. package/dist/butter.variants.d.ts +2 -18
  4. package/dist/butterTheme.d.ts +1 -1
  5. package/dist/butterTheme.d.ts.map +1 -1
  6. package/dist/theme.css +138 -130
  7. package/package.json +3 -3
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.5.3
6
- * Core: @astryxdesign/core@0.5.3
5
+ * CLI: @astryxdesign/cli@0.5.4
6
+ * Core: @astryxdesign/core@0.5.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.5.3
6
- * Core: @astryxdesign/core@0.5.3
5
+ * CLI: @astryxdesign/cli@0.5.4
6
+ * Core: @astryxdesign/core@0.5.4
7
7
  */
8
8
 
9
9
  import { butterIconRegistry } from "./icons.mjs";
@@ -648,6 +648,46 @@ export const butterTheme = {
648
648
  "--color-accent": "var(--color-on-light)"
649
649
  }
650
650
  },
651
+ __adaptations: {
652
+ "widthBreakpoints": {
653
+ "sm": 640,
654
+ "md": 768,
655
+ "lg": 1024,
656
+ "xl": 1280,
657
+ "2xl": 1536
658
+ },
659
+ "rules": []
660
+ },
661
+ __axes: {
662
+ "typography": {
663
+ "scale": {
664
+ "base": 14,
665
+ "ratio": 1.25
666
+ },
667
+ "body": {
668
+ "family": "Outfit",
669
+ "fallbacks": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
670
+ },
671
+ "heading": {
672
+ "family": "Outfit",
673
+ "fallbacks": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
674
+ "weights": {
675
+ "3": "bold",
676
+ "4": "bold"
677
+ }
678
+ },
679
+ "code": {
680
+ "family": "JetBrains Mono",
681
+ "fallbacks": "\"SF Mono\", Monaco, Consolas, monospace"
682
+ }
683
+ },
684
+ "motion": {
685
+ "fast": 125,
686
+ "medium": 300,
687
+ "slow": 700,
688
+ "ratio": 0.75
689
+ }
690
+ },
651
691
  icons: butterIconRegistry,
652
692
  };
653
693
 
package/dist/butter.variants.d.ts CHANGED
@@ -2,21 +2,13 @@
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.5.3
6
- * Core: @astryxdesign/core@0.5.3
5
+ * CLI: @astryxdesign/cli@0.5.4
6
+ * Core: @astryxdesign/core@0.5.4
7
7
  */
8
8
 
9
9
  // Generated by astryx theme build
10
10
  export {};
11
11
 
12
- declare module '@astryxdesign/core/Heading' {
13
- interface HeadingTypeMap {
14
- 'display-1': true;
15
- 'display-2': true;
16
- 'display-3': true;
17
- }
18
- }
19
-
20
12
  declare module '@astryxdesign/core/Card' {
21
13
  interface CardVariantMap {
22
14
  'info': true;
@@ -25,11 +17,3 @@ declare module '@astryxdesign/core/Card' {
25
17
  'error': true;
26
18
  }
27
19
  }
28
-
29
- declare module '@astryxdesign/core/ProgressBar' {
30
- interface ProgressBarVariantMap {
31
- 'success': true;
32
- 'warning': true;
33
- 'error': true;
34
- }
35
- }
package/dist/butterTheme.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const butterTheme: import("@astryxdesign/core/theme").DefinedTheme;
1
+ export declare const butterTheme: import("@astryxdesign/core/theme").ResolvedDefinedTheme;
2
2
  /**
3
3
  * Raw tonal palettes — generated from design-spec source hexes via the
4
4
  * same CIELab algorithm `ThemePalettePreview` uses for the displayed
package/dist/butterTheme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"butterTheme.d.ts","sourceRoot":"","sources":["../src/butterTheme.ts"],"names":[],"mappings":"AA6CA,eAAO,MAAM,WAAW,iDAkhBtB,CAAC;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmUjB,CAAC"}
1
+ {"version":3,"file":"butterTheme.d.ts","sourceRoot":"","sources":["../src/butterTheme.ts"],"names":[],"mappings":"AA6CA,eAAO,MAAM,WAAW,yDAkhBtB,CAAC;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmUjB,CAAC"}
package/dist/theme.css 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.5.3
6
- * Core: @astryxdesign/core@0.5.3
5
+ * CLI: @astryxdesign/cli@0.5.4
6
+ * Core: @astryxdesign/core@0.5.4
7
7
  */
8
8
 
9
9
  @layer reset {
@@ -14,60 +14,60 @@
14
14
  }
15
15
 
16
16
  :where(h1) {
17
- font-size: var(--font-size-2xl);
18
- font-weight: var(--font-weight-semibold);
19
- line-height: 1.3333;
17
+ font-size: var(--text-heading-1-size);
18
+ font-weight: var(--text-heading-1-weight);
19
+ line-height: var(--text-heading-1-leading);
20
20
  }
21
21
 
22
22
  :where(h2) {
23
- font-size: var(--font-size-xl);
24
- font-weight: var(--font-weight-semibold);
25
- line-height: 1.4545;
23
+ font-size: var(--text-heading-2-size);
24
+ font-weight: var(--text-heading-2-weight);
25
+ line-height: var(--text-heading-2-leading);
26
26
  }
27
27
 
28
28
  :where(h3) {
29
- font-size: var(--font-size-lg);
30
- font-weight: var(--font-weight-bold);
31
- line-height: 1.5556;
29
+ font-size: var(--text-heading-3-size);
30
+ font-weight: var(--text-heading-3-weight);
31
+ line-height: var(--text-heading-3-leading);
32
32
  }
33
33
 
34
34
  :where(h4) {
35
- font-size: var(--font-size-base);
36
- font-weight: var(--font-weight-bold);
37
- line-height: 1.4286;
35
+ font-size: var(--text-heading-4-size);
36
+ font-weight: var(--text-heading-4-weight);
37
+ line-height: var(--text-heading-4-leading);
38
38
  }
39
39
 
40
40
  :where(h5) {
41
- font-size: var(--font-size-sm);
42
- font-weight: var(--font-weight-semibold);
43
- line-height: 1.4545;
41
+ font-size: var(--text-heading-5-size);
42
+ font-weight: var(--text-heading-5-weight);
43
+ line-height: var(--text-heading-5-leading);
44
44
  }
45
45
 
46
46
  :where(h6) {
47
- font-size: var(--font-size-xs);
48
- font-weight: var(--font-weight-semibold);
49
- line-height: 1.7778;
47
+ font-size: var(--text-heading-6-size);
48
+ font-weight: var(--text-heading-6-weight);
49
+ line-height: var(--text-heading-6-leading);
50
50
  }
51
51
 
52
52
  :where(p) {
53
53
  font-family: var(--font-family-body);
54
- font-size: var(--font-size-base);
55
- font-weight: var(--font-weight-normal);
56
- line-height: 1.4286;
54
+ font-size: var(--text-body-size);
55
+ font-weight: var(--text-body-weight);
56
+ line-height: var(--text-body-leading);
57
57
  color: var(--color-text-primary);
58
58
  }
59
59
 
60
60
  :where(small) {
61
- font-size: 12px;
62
- font-weight: var(--font-weight-normal);
63
- line-height: 1.4545;
61
+ font-size: var(--text-supporting-size);
62
+ font-weight: var(--text-supporting-weight);
63
+ line-height: var(--text-supporting-leading);
64
64
  color: var(--color-text-secondary);
65
65
  }
66
66
 
67
67
  :where(code, pre) {
68
68
  font-family: var(--font-family-code);
69
- font-size: var(--font-size-base);
70
- line-height: 1.4286;
69
+ font-size: var(--text-code-size);
70
+ line-height: var(--text-code-leading);
71
71
  }
72
72
 
73
73
  :where(hr) {
@@ -321,109 +321,109 @@
321
321
  --shadow-inset-error: inset 0px 0px 0px 2px #77121030;
322
322
  }
323
323
 
324
- .astryx-heading.level-1 {
324
+ .astryx-heading[data-level="1"] {
325
325
  font-family: var(--font-family-heading);
326
326
  font-size: var(--text-heading-1-size);
327
327
  font-weight: var(--text-heading-1-weight);
328
328
  line-height: var(--text-heading-1-leading);
329
329
  }
330
330
 
331
- .astryx-heading.level-2 {
331
+ .astryx-heading[data-level="2"] {
332
332
  font-family: var(--font-family-heading);
333
333
  font-size: var(--text-heading-2-size);
334
334
  font-weight: var(--text-heading-2-weight);
335
335
  line-height: var(--text-heading-2-leading);
336
336
  }
337
337
 
338
- .astryx-heading.level-3 {
338
+ .astryx-heading[data-level="3"] {
339
339
  font-family: var(--font-family-heading);
340
340
  font-size: var(--text-heading-3-size);
341
341
  font-weight: var(--text-heading-3-weight);
342
342
  line-height: var(--text-heading-3-leading);
343
343
  }
344
344
 
345
- .astryx-heading.level-4 {
345
+ .astryx-heading[data-level="4"] {
346
346
  font-family: var(--font-family-heading);
347
347
  font-size: var(--text-heading-4-size);
348
348
  font-weight: var(--text-heading-4-weight);
349
349
  line-height: var(--text-heading-4-leading);
350
350
  }
351
351
 
352
- .astryx-heading.level-5 {
352
+ .astryx-heading[data-level="5"] {
353
353
  font-family: var(--font-family-heading);
354
354
  font-size: var(--text-heading-5-size);
355
355
  font-weight: var(--text-heading-5-weight);
356
356
  line-height: var(--text-heading-5-leading);
357
357
  }
358
358
 
359
- .astryx-heading.level-6 {
359
+ .astryx-heading[data-level="6"] {
360
360
  font-family: var(--font-family-heading);
361
361
  font-size: var(--text-heading-6-size);
362
362
  font-weight: var(--text-heading-6-weight);
363
363
  line-height: var(--text-heading-6-leading);
364
364
  }
365
365
 
366
- .astryx-heading.display-1 {
366
+ .astryx-heading[data-type="display-1"] {
367
367
  font-family: var(--font-family-heading);
368
368
  font-size: var(--text-display-1-size);
369
369
  line-height: var(--text-display-1-leading);
370
370
  }
371
371
 
372
- .astryx-heading.display-2 {
372
+ .astryx-heading[data-type="display-2"] {
373
373
  font-family: var(--font-family-heading);
374
374
  font-size: var(--text-display-2-size);
375
375
  line-height: var(--text-display-2-leading);
376
376
  }
377
377
 
378
- .astryx-heading.display-3 {
378
+ .astryx-heading[data-type="display-3"] {
379
379
  font-family: var(--font-family-heading);
380
380
  font-size: var(--text-display-3-size);
381
381
  line-height: var(--text-display-3-leading);
382
382
  }
383
383
 
384
- .astryx-text.body {
384
+ .astryx-text[data-type="body"] {
385
385
  font-family: var(--font-family-body);
386
386
  font-size: var(--text-body-size);
387
387
  line-height: var(--text-body-leading);
388
388
  }
389
389
 
390
- .astryx-text.large {
390
+ .astryx-text[data-type="large"] {
391
391
  font-family: var(--font-family-body);
392
392
  font-size: var(--text-large-size);
393
393
  line-height: var(--text-large-leading);
394
394
  }
395
395
 
396
- .astryx-text.label {
396
+ .astryx-text[data-type="label"] {
397
397
  font-family: var(--font-family-body);
398
398
  font-size: var(--text-label-size);
399
399
  line-height: var(--text-label-leading);
400
400
  }
401
401
 
402
- .astryx-text.code {
402
+ .astryx-text[data-type="code"] {
403
403
  font-family: var(--font-family-code);
404
404
  font-size: var(--text-code-size);
405
405
  line-height: var(--text-code-leading);
406
406
  }
407
407
 
408
- .astryx-text.supporting {
408
+ .astryx-text[data-type="supporting"] {
409
409
  font-family: var(--font-family-body);
410
410
  font-size: var(--text-supporting-size);
411
411
  line-height: var(--text-supporting-leading);
412
412
  }
413
413
 
414
- .astryx-text.display-1 {
414
+ .astryx-text[data-type="display-1"] {
415
415
  font-family: Sarina, "Brush Script MT", "Snell Roundhand", cursive;
416
416
  font-size: var(--text-display-1-size);
417
417
  line-height: var(--text-display-1-leading);
418
418
  }
419
419
 
420
- .astryx-text.display-2 {
420
+ .astryx-text[data-type="display-2"] {
421
421
  font-family: Sarina, "Brush Script MT", "Snell Roundhand", cursive;
422
422
  font-size: var(--text-display-2-size);
423
423
  line-height: var(--text-display-2-leading);
424
424
  }
425
425
 
426
- .astryx-text.display-3 {
426
+ .astryx-text[data-type="display-3"] {
427
427
  font-family: Sarina, "Brush Script MT", "Snell Roundhand", cursive;
428
428
  font-size: var(--text-display-3-size);
429
429
  line-height: var(--text-display-3-leading);
@@ -438,16 +438,16 @@
438
438
  color: light-dark(#6E92FF, #FDEE8CCC);
439
439
  }
440
440
 
441
- .astryx-top-nav-item.selected {
441
+ .astryx-top-nav-item[data-selected="selected"] {
442
442
  color: light-dark(#225BFF, #FDEE8C);
443
443
  background-color: transparent;
444
444
  }
445
445
 
446
- .astryx-top-nav-item.selected:hover:where(:not(:disabled,[aria-disabled="true"])) {
446
+ .astryx-top-nav-item[data-selected="selected"]:hover:where(:not(:disabled,[aria-disabled="true"])) {
447
447
  background-color: var(--color-overlay-hover);
448
448
  }
449
449
 
450
- .astryx-top-nav-item.selected:active {
450
+ .astryx-top-nav-item[data-selected="selected"]:active {
451
451
  background-color: var(--color-overlay-pressed);
452
452
  }
453
453
 
@@ -456,7 +456,7 @@
456
456
  padding-inline: var(--spacing-4);
457
457
  }
458
458
 
459
- .astryx-button.secondary {
459
+ .astryx-button[data-variant="secondary"] {
460
460
  background-color: transparent;
461
461
  border-width: 1.5px;
462
462
  border-style: solid;
@@ -464,15 +464,15 @@
464
464
  color: light-dark(#225BFF, #FDEE8C);
465
465
  }
466
466
 
467
- .astryx-button.secondary:hover:where(:not(:disabled,[aria-disabled="true"])) {
467
+ .astryx-button[data-variant="secondary"]:hover:where(:not(:disabled,[aria-disabled="true"])) {
468
468
  background-color: light-dark(#225BFF14, #FDEE8C14);
469
469
  }
470
470
 
471
- .astryx-button.ghost {
471
+ .astryx-button[data-variant="ghost"] {
472
472
  color: light-dark(#225BFF, #FDEE8C);
473
473
  }
474
474
 
475
- .astryx-button.destructive {
475
+ .astryx-button[data-variant="destructive"] {
476
476
  background-color: light-dark(#ffdad3, #f4b8ae);
477
477
  color: light-dark(#550000, #6d211c);
478
478
  }
@@ -483,53 +483,53 @@
483
483
  padding-inline: var(--spacing-3);
484
484
  }
485
485
 
486
- .astryx-badge.info {
486
+ .astryx-badge[data-variant="info"] {
487
487
  background-color: #4883fd;
488
488
  color: #ffffff;
489
489
  }
490
490
 
491
- .astryx-badge.neutral {
491
+ .astryx-badge[data-variant="neutral"] {
492
492
  background-color: #ffee7b;
493
493
  color: #225BFF;
494
494
  }
495
495
 
496
- .astryx-badge.success {
496
+ .astryx-badge[data-variant="success"] {
497
497
  background-color: #91D143;
498
498
  color: #1d1c11;
499
499
  }
500
500
 
501
- .astryx-badge.warning {
501
+ .astryx-badge[data-variant="warning"] {
502
502
  background-color: #ffc502;
503
503
  color: #1d1c11;
504
504
  }
505
505
 
506
- .astryx-badge.error {
506
+ .astryx-badge[data-variant="error"] {
507
507
  background-color: #fc473b;
508
508
  color: #ffffff;
509
509
  }
510
510
 
511
- .astryx-banner.info {
511
+ .astryx-banner[data-status="info"] {
512
512
  --color-accent-muted: #4883fd;
513
513
  --color-text-primary: #ffffff;
514
514
  --color-text-secondary: #ffffff;
515
515
  --color-accent: #ffffff;
516
516
  }
517
517
 
518
- .astryx-banner.success {
518
+ .astryx-banner[data-status="success"] {
519
519
  --color-success-muted: #91D143;
520
520
  --color-text-primary: #1d1c11;
521
521
  --color-text-secondary: #1d1c11;
522
522
  --color-success: #1d1c11;
523
523
  }
524
524
 
525
- .astryx-banner.warning {
525
+ .astryx-banner[data-status="warning"] {
526
526
  --color-warning-muted: #ffc502;
527
527
  --color-text-primary: #1d1c11;
528
528
  --color-text-secondary: #1d1c11;
529
529
  --color-warning: #1d1c11;
530
530
  }
531
531
 
532
- .astryx-banner.error {
532
+ .astryx-banner[data-status="error"] {
533
533
  --color-error-muted: #fc473b;
534
534
  --color-text-primary: #ffffff;
535
535
  --color-text-secondary: #ffffff;
@@ -542,77 +542,77 @@
542
542
  --_card-radius: var(--radius-container);
543
543
  }
544
544
 
545
- .astryx-card.info {
545
+ .astryx-card[data-variant="info"] {
546
546
  --color-text-primary: #1d1c11;
547
547
  --color-text-secondary: #605f52;
548
548
  }
549
549
 
550
- .astryx-card.success {
550
+ .astryx-card[data-variant="success"] {
551
551
  --color-text-primary: #1d1c11;
552
552
  --color-text-secondary: #605f52;
553
553
  }
554
554
 
555
- .astryx-card.warning {
555
+ .astryx-card[data-variant="warning"] {
556
556
  --color-text-primary: #1d1c11;
557
557
  --color-text-secondary: #605f52;
558
558
  }
559
559
 
560
- .astryx-card.error {
560
+ .astryx-card[data-variant="error"] {
561
561
  --color-text-primary: #1d1c11;
562
562
  --color-text-secondary: #605f52;
563
563
  }
564
564
 
565
- .astryx-card.blue {
565
+ .astryx-card[data-variant="blue"] {
566
566
  --color-text-primary: #1d1c11;
567
567
  --color-text-secondary: #605f52;
568
568
  }
569
569
 
570
- .astryx-card.cyan {
570
+ .astryx-card[data-variant="cyan"] {
571
571
  --color-text-primary: #1d1c11;
572
572
  --color-text-secondary: #605f52;
573
573
  }
574
574
 
575
- .astryx-card.gray {
575
+ .astryx-card[data-variant="gray"] {
576
576
  --color-text-primary: #1d1c11;
577
577
  --color-text-secondary: #605f52;
578
578
  }
579
579
 
580
- .astryx-card.green {
580
+ .astryx-card[data-variant="green"] {
581
581
  --color-text-primary: #1d1c11;
582
582
  --color-text-secondary: #605f52;
583
583
  }
584
584
 
585
- .astryx-card.orange {
585
+ .astryx-card[data-variant="orange"] {
586
586
  --color-text-primary: #1d1c11;
587
587
  --color-text-secondary: #605f52;
588
588
  }
589
589
 
590
- .astryx-card.pink {
590
+ .astryx-card[data-variant="pink"] {
591
591
  --color-text-primary: #1d1c11;
592
592
  --color-text-secondary: #605f52;
593
593
  }
594
594
 
595
- .astryx-card.purple {
595
+ .astryx-card[data-variant="purple"] {
596
596
  --color-text-primary: #1d1c11;
597
597
  --color-text-secondary: #605f52;
598
598
  }
599
599
 
600
- .astryx-card.red {
600
+ .astryx-card[data-variant="red"] {
601
601
  --color-text-primary: #1d1c11;
602
602
  --color-text-secondary: #605f52;
603
603
  }
604
604
 
605
- .astryx-card.teal {
605
+ .astryx-card[data-variant="teal"] {
606
606
  --color-text-primary: #1d1c11;
607
607
  --color-text-secondary: #605f52;
608
608
  }
609
609
 
610
- .astryx-card.yellow {
610
+ .astryx-card[data-variant="yellow"] {
611
611
  --color-text-primary: #1d1c11;
612
612
  --color-text-secondary: #605f52;
613
613
  }
614
614
 
615
- .astryx-card.muted {
615
+ .astryx-card[data-variant="muted"] {
616
616
  --color-text-primary: #1d1c11;
617
617
  --color-text-secondary: #605f52;
618
618
  }
@@ -625,29 +625,29 @@
625
625
  background-color: light-dark(#e5e3d4, #725538);
626
626
  }
627
627
 
628
- .astryx-progressbar-fill.success {
628
+ .astryx-progressbar-fill[data-variant="success"] {
629
629
  background-color: #91D143;
630
630
  }
631
631
 
632
- .astryx-progressbar-fill.warning {
632
+ .astryx-progressbar-fill[data-variant="warning"] {
633
633
  background-color: #ffc502;
634
634
  }
635
635
 
636
- .astryx-progressbar-fill.error {
636
+ .astryx-progressbar-fill[data-variant="error"] {
637
637
  background-color: #fc473b;
638
638
  }
639
639
 
640
- .astryx-field-status.success {
640
+ .astryx-field-status[data-type="success"] {
641
641
  background-color: #91D143;
642
642
  color: #1d1c11;
643
643
  }
644
644
 
645
- .astryx-field-status.warning {
645
+ .astryx-field-status[data-type="warning"] {
646
646
  background-color: #ffc502;
647
647
  color: #1d1c11;
648
648
  }
649
649
 
650
- .astryx-field-status.error {
650
+ .astryx-field-status[data-type="error"] {
651
651
  background-color: #fc473b;
652
652
  color: #ffffff;
653
653
  }
@@ -658,15 +658,15 @@
658
658
  border-color: var(--color-border);
659
659
  }
660
660
 
661
- .astryx-text-input.success {
661
+ .astryx-text-input[data-status="success"] {
662
662
  --color-success: #91D143;
663
663
  }
664
664
 
665
- .astryx-text-input.warning {
665
+ .astryx-text-input[data-status="warning"] {
666
666
  --color-warning: #ffc502;
667
667
  }
668
668
 
669
- .astryx-text-input.error {
669
+ .astryx-text-input[data-status="error"] {
670
670
  --color-error: #fc473b;
671
671
  }
672
672
 
@@ -676,15 +676,15 @@
676
676
  --_textarea-inline-padding: var(--spacing-3);
677
677
  }
678
678
 
679
- .astryx-textarea.success {
679
+ .astryx-textarea[data-status="success"] {
680
680
  --color-success: #91D143;
681
681
  }
682
682
 
683
- .astryx-textarea.warning {
683
+ .astryx-textarea[data-status="warning"] {
684
684
  --color-warning: #ffc502;
685
685
  }
686
686
 
687
- .astryx-textarea.error {
687
+ .astryx-textarea[data-status="error"] {
688
688
  --color-error: #fc473b;
689
689
  }
690
690
 
@@ -695,15 +695,15 @@
695
695
  --astryx-number-input-padding-block-end: var(--spacing-2);
696
696
  }
697
697
 
698
- .astryx-number-input.success {
698
+ .astryx-number-input[data-status="success"] {
699
699
  --color-success: #91D143;
700
700
  }
701
701
 
702
- .astryx-number-input.warning {
702
+ .astryx-number-input[data-status="warning"] {
703
703
  --color-warning: #ffc502;
704
704
  }
705
705
 
706
- .astryx-number-input.error {
706
+ .astryx-number-input[data-status="error"] {
707
707
  --color-error: #fc473b;
708
708
  }
709
709
 
@@ -713,15 +713,15 @@
713
713
  border-color: var(--color-border);
714
714
  }
715
715
 
716
- .astryx-date-input.success {
716
+ .astryx-date-input[data-status="success"] {
717
717
  --color-success: #91D143;
718
718
  }
719
719
 
720
- .astryx-date-input.warning {
720
+ .astryx-date-input[data-status="warning"] {
721
721
  --color-warning: #ffc502;
722
722
  }
723
723
 
724
- .astryx-date-input.error {
724
+ .astryx-date-input[data-status="error"] {
725
725
  --color-error: #fc473b;
726
726
  }
727
727
 
@@ -731,15 +731,15 @@
731
731
  border-color: var(--color-border);
732
732
  }
733
733
 
734
- .astryx-time-input.success {
734
+ .astryx-time-input[data-status="success"] {
735
735
  --color-success: #91D143;
736
736
  }
737
737
 
738
- .astryx-time-input.warning {
738
+ .astryx-time-input[data-status="warning"] {
739
739
  --color-warning: #ffc502;
740
740
  }
741
741
 
742
- .astryx-time-input.error {
742
+ .astryx-time-input[data-status="error"] {
743
743
  --color-error: #fc473b;
744
744
  }
745
745
 
@@ -749,15 +749,15 @@
749
749
  border-color: var(--color-border);
750
750
  }
751
751
 
752
- .astryx-selector.success {
752
+ .astryx-selector[data-status="success"] {
753
753
  --color-success: #91D143;
754
754
  }
755
755
 
756
- .astryx-selector.warning {
756
+ .astryx-selector[data-status="warning"] {
757
757
  --color-warning: #ffc502;
758
758
  }
759
759
 
760
- .astryx-selector.error {
760
+ .astryx-selector[data-status="error"] {
761
761
  --color-error: #fc473b;
762
762
  }
763
763
 
@@ -767,15 +767,15 @@
767
767
  border-color: var(--color-border);
768
768
  }
769
769
 
770
- .astryx-multi-selector.success {
770
+ .astryx-multi-selector[data-status="success"] {
771
771
  --color-success: #91D143;
772
772
  }
773
773
 
774
- .astryx-multi-selector.warning {
774
+ .astryx-multi-selector[data-status="warning"] {
775
775
  --color-warning: #ffc502;
776
776
  }
777
777
 
778
- .astryx-multi-selector.error {
778
+ .astryx-multi-selector[data-status="error"] {
779
779
  --color-error: #fc473b;
780
780
  }
781
781
 
@@ -785,15 +785,15 @@
785
785
  border-color: var(--color-border);
786
786
  }
787
787
 
788
- .astryx-typeahead.success {
788
+ .astryx-typeahead[data-status="success"] {
789
789
  --color-success: #91D143;
790
790
  }
791
791
 
792
- .astryx-typeahead.warning {
792
+ .astryx-typeahead[data-status="warning"] {
793
793
  --color-warning: #ffc502;
794
794
  }
795
795
 
796
- .astryx-typeahead.error {
796
+ .astryx-typeahead[data-status="error"] {
797
797
  --color-error: #fc473b;
798
798
  }
799
799
 
@@ -803,59 +803,67 @@
803
803
  border-color: var(--color-border);
804
804
  }
805
805
 
806
- .astryx-tokenizer.success {
806
+ .astryx-tokenizer[data-status="success"] {
807
807
  --color-success: #91D143;
808
808
  }
809
809
 
810
- .astryx-tokenizer.warning {
810
+ .astryx-tokenizer[data-status="warning"] {
811
811
  --color-warning: #ffc502;
812
812
  }
813
813
 
814
- .astryx-tokenizer.error {
814
+ .astryx-tokenizer[data-status="error"] {
815
815
  --color-error: #fc473b;
816
816
  }
817
817
 
818
- .astryx-text.primary { color: var(--color-text-primary); }
818
+ .astryx-text[data-color="primary"] { color: var(--color-text-primary); }
819
+
820
+ .astryx-heading[data-color="primary"] { color: var(--color-text-primary); }
821
+
822
+ .astryx-text[data-color="secondary"] { color: var(--color-text-secondary); }
823
+
824
+ .astryx-heading[data-color="secondary"] { color: var(--color-text-secondary); }
825
+
826
+ .astryx-text[data-color="disabled"] { color: var(--color-text-disabled); }
819
827
 
820
- .astryx-heading.primary { color: var(--color-text-primary); }
828
+ .astryx-heading[data-color="disabled"] { color: var(--color-text-disabled); }
821
829
 
822
- .astryx-text.secondary { color: var(--color-text-secondary); }
830
+ .astryx-text[data-color="placeholder"] { color: var(--color-text-secondary); }
823
831
 
824
- .astryx-heading.secondary { color: var(--color-text-secondary); }
832
+ .astryx-heading[data-color="placeholder"] { color: var(--color-text-secondary); }
825
833
 
826
- .astryx-text.disabled { color: var(--color-text-disabled); }
834
+ .astryx-text[data-color="accent"] { color: var(--color-text-accent); }
827
835
 
828
- .astryx-heading.disabled { color: var(--color-text-disabled); }
836
+ .astryx-heading[data-color="accent"] { color: var(--color-text-accent); }
829
837
 
830
- .astryx-text.placeholder { color: var(--color-text-secondary); }
838
+ .astryx-text[data-size="4xs"] { font-size: var(--font-size-4xs); }
831
839
 
832
- .astryx-heading.placeholder { color: var(--color-text-secondary); }
840
+ .astryx-text[data-size="3xs"] { font-size: var(--font-size-3xs); }
833
841
 
834
- .astryx-text.accent { color: var(--color-text-accent); }
842
+ .astryx-text[data-size="2xs"] { font-size: var(--font-size-2xs); }
835
843
 
836
- .astryx-heading.accent { color: var(--color-text-accent); }
844
+ .astryx-text[data-size="xsm"] { font-size: var(--font-size-xs); }
837
845
 
838
- .astryx-text.size-4xs { font-size: var(--font-size-4xs); }
846
+ .astryx-text[data-size="sm"] { font-size: var(--font-size-sm); }
839
847
 
840
- .astryx-text.size-3xs { font-size: var(--font-size-3xs); }
848
+ .astryx-text[data-size="base"] { font-size: var(--font-size-base); }
841
849
 
842
- .astryx-text.size-2xs { font-size: var(--font-size-2xs); }
850
+ .astryx-text[data-size="lg"] { font-size: var(--font-size-lg); }
843
851
 
844
- .astryx-text.xsm { font-size: var(--font-size-xs); }
852
+ .astryx-text[data-size="xl"] { font-size: var(--font-size-xl); }
845
853
 
846
- .astryx-text.sm { font-size: var(--font-size-sm); }
854
+ .astryx-text[data-size="2xl"] { font-size: var(--font-size-2xl); }
847
855
 
848
- .astryx-text.base { font-size: var(--font-size-base); }
856
+ .astryx-text[data-size="3xl"] { font-size: var(--font-size-3xl); }
849
857
 
850
- .astryx-text.lg { font-size: var(--font-size-lg); }
858
+ .astryx-text[data-size="4xl"] { font-size: var(--font-size-4xl); }
851
859
 
852
- .astryx-text.xl { font-size: var(--font-size-xl); }
860
+ .astryx-heading[data-weight="normal"] { font-weight: var(--font-weight-normal); }
853
861
 
854
- .astryx-text.size-2xl { font-size: var(--font-size-2xl); }
862
+ .astryx-heading[data-weight="medium"] { font-weight: var(--font-weight-medium); }
855
863
 
856
- .astryx-text.size-3xl { font-size: var(--font-size-3xl); }
864
+ .astryx-heading[data-weight="semibold"] { font-weight: var(--font-weight-semibold); }
857
865
 
858
- .astryx-text.size-4xl { font-size: var(--font-size-4xl); }
866
+ .astryx-heading[data-weight="bold"] { font-weight: var(--font-weight-bold); }
859
867
  }
860
868
  }
861
869
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astryxdesign/theme-butter",
3
- "version": "0.5.3",
3
+ "version": "0.5.4-canary.0fee3bc",
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.",
@@ -49,11 +49,11 @@
49
49
  "lucide-react": "^1.18.0"
50
50
  },
51
51
  "peerDependencies": {
52
- "@astryxdesign/core": "0.5.3",
52
+ "@astryxdesign/core": "0.5.4-canary.0fee3bc",
53
53
  "react": ">=19"
54
54
  },
55
55
  "devDependencies": {
56
- "@astryxdesign/cli": "0.5.3"
56
+ "@astryxdesign/cli": "0.5.4-canary.0fee3bc"
57
57
  },
58
58
  "module": "./dist/source.mjs",
59
59
  "scripts": {