tyrell-components 1.0.0-TC37 → 1.0.0-TC38

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 (10) hide show
  1. package/css/{tyrell-brand.css → tyrell-theme.css} +8 -3
  2. package/css/tyrell.css +36 -8
  3. package/dist/{tyrell-brand.css → tyrell-theme.css} +8 -3
  4. package/dist/tyrell.css +36 -8
  5. package/dist/tyrell.js +1 -1
  6. package/lib/styles/button.d.ts +1 -1
  7. package/lib/styles/button.js +2 -2
  8. package/lib/version.d.ts +1 -1
  9. package/lib/version.js +1 -1
  10. package/package.json +3 -3
package/css/{tyrell-brand.css → tyrell-theme.css} RENAMED
@@ -1,11 +1,16 @@
1
1
  /* =====================================================================
2
- * tyrell-brand.css — OKLCH-based brand layer for Tyrell Components
2
+ * tyrell-theme.css — the OKLCH theme engine for Tyrell Components
3
3
  * =====================================================================
4
4
  *
5
- * Opt-in. Load AFTER `tyrell.css`. Override a few variables to rebrand.
5
+ * Opt-in. Load AFTER `tyrell.css`. Override a few variables to rebrand —
6
+ * or seed a color directly, declare a named theme, scope one to a
7
+ * subtree. `tyrell.css` alone is correct and accessible without this
8
+ * file; this is what turns it into a theming ENGINE rather than a fixed
9
+ * palette: auto-contrast text, seed ingestion, named/scoped themes,
10
+ * animated theme transitions. See CSS_GUIDE.md → Color Customization.
6
11
  *
7
12
  * <link rel="stylesheet" href=".../tyrell.css">
8
- * <link rel="stylesheet" href=".../tyrell-brand.css">
13
+ * <link rel="stylesheet" href=".../tyrell-theme.css">
9
14
  *
10
15
  * :root {
11
16
  * --ty-brand-hue: 200; // teal. Try 260 indigo, 30 orange, 145 emerald.
package/css/tyrell.css CHANGED
@@ -341,8 +341,8 @@ COMPONENT TOKENS
341
341
  /* =================================================================
342
342
  SOLID BUTTON FILLS — plain default values (the contract). The smart
343
343
  per-state derivation (hover/active/tone via OKLCH) lives in the theme
344
- engines (tyrell-brand.css / tyrell-simple.css), not here. hover/active
345
- alias to -strong as a simple default; a theme overrides them.
344
+ engine (tyrell-theme.css), not here. hover/active alias to -strong as
345
+ a simple default; a theme overrides them.
346
346
  ================================================================= */
347
347
 
348
348
  /* Primary */
@@ -351,7 +351,14 @@ COMPONENT TOKENS
351
351
  --ty-solid-primary-soft: #7ea7d9;
352
352
  --ty-solid-primary-hover: var(--ty-solid-primary-strong);
353
353
  --ty-solid-primary-active: var(--ty-solid-primary-strong);
354
+ /* Per-fill fg, hand-picked (max contrast, tie→white) — this file has no
355
+ computed auto-contrast (that needs tyrell-theme.css's relative color
356
+ support), so each fill's correct fg is a literal, verified value.
357
+ Do NOT collapse back to one --ty-solid-X-fg per flavor: soft/strong
358
+ sit at different lightness and several fail WCAG AA against white. */
354
359
  --ty-solid-primary-fg: white;
360
+ --ty-solid-primary-strong-fg: white;
361
+ --ty-solid-primary-soft-fg: black;
355
362
 
356
363
  /* Success */
357
364
  --ty-solid-success: #3bb68d;
@@ -359,7 +366,9 @@ COMPONENT TOKENS
359
366
  --ty-solid-success-soft: #69b99e;
360
367
  --ty-solid-success-hover: var(--ty-solid-success-strong);
361
368
  --ty-solid-success-active: var(--ty-solid-success-strong);
362
- --ty-solid-success-fg: white;
369
+ --ty-solid-success-fg: black;
370
+ --ty-solid-success-strong-fg: black;
371
+ --ty-solid-success-soft-fg: black;
363
372
 
364
373
  /* Danger */
365
374
  --ty-solid-danger: #df5b5b;
@@ -367,7 +376,9 @@ COMPONENT TOKENS
367
376
  --ty-solid-danger-soft: #d57a7a;
368
377
  --ty-solid-danger-hover: var(--ty-solid-danger-strong);
369
378
  --ty-solid-danger-active: var(--ty-solid-danger-strong);
370
- --ty-solid-danger-fg: white;
379
+ --ty-solid-danger-fg: black;
380
+ --ty-solid-danger-strong-fg: white;
381
+ --ty-solid-danger-soft-fg: black;
371
382
 
372
383
  /* Warning */
373
384
  --ty-solid-warning: #e1a644;
@@ -375,7 +386,9 @@ COMPONENT TOKENS
375
386
  --ty-solid-warning-soft: #fbc56d;
376
387
  --ty-solid-warning-hover: var(--ty-solid-warning-strong);
377
388
  --ty-solid-warning-active: var(--ty-solid-warning-strong);
378
- --ty-solid-warning-fg: white;
389
+ --ty-solid-warning-fg: black;
390
+ --ty-solid-warning-strong-fg: black;
391
+ --ty-solid-warning-soft-fg: black;
379
392
 
380
393
  /* Neutral */
381
394
  --ty-solid-neutral: #414141;
@@ -384,6 +397,8 @@ COMPONENT TOKENS
384
397
  --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
385
398
  --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
386
399
  --ty-solid-neutral-fg: white;
400
+ --ty-solid-neutral-strong-fg: white;
401
+ --ty-solid-neutral-soft-fg: white;
387
402
 
388
403
  /* =================================================================
389
404
  DESIGN SYSTEM TOKENS
@@ -707,7 +722,12 @@ Emphasis logic inverts: lighter = more emphasis
707
722
  --ty-solid-primary-soft: #343f4c;
708
723
  --ty-solid-primary-hover: var(--ty-solid-primary-strong);
709
724
  --ty-solid-primary-active: var(--ty-solid-primary-strong);
725
+ /* Hand-picked per-fill fg — see the light-mode comment above. Dark-mode
726
+ lightness ordering differs from light (soft/strong swap direction),
727
+ so these are independently verified, not mirrored. */
710
728
  --ty-solid-primary-fg: white;
729
+ --ty-solid-primary-strong-fg: white;
730
+ --ty-solid-primary-soft-fg: white;
711
731
 
712
732
 
713
733
  --ty-solid-success: #3bb68d;
@@ -715,21 +735,27 @@ Emphasis logic inverts: lighter = more emphasis
715
735
  --ty-solid-success-soft: #285748;
716
736
  --ty-solid-success-hover: var(--ty-solid-success-strong);
717
737
  --ty-solid-success-active: var(--ty-solid-success-strong);
718
- --ty-solid-success-fg: white;
738
+ --ty-solid-success-fg: black;
739
+ --ty-solid-success-strong-fg: black;
740
+ --ty-solid-success-soft-fg: white;
719
741
 
720
742
  --ty-solid-danger: #df5b5b;
721
743
  --ty-solid-danger-strong: #cc3e3e;
722
744
  --ty-solid-danger-soft: #875656;
723
745
  --ty-solid-danger-hover: var(--ty-solid-danger-strong);
724
746
  --ty-solid-danger-active: var(--ty-solid-danger-strong);
725
- --ty-solid-danger-fg: white;
747
+ --ty-solid-danger-fg: black;
748
+ --ty-solid-danger-strong-fg: white;
749
+ --ty-solid-danger-soft-fg: white;
726
750
 
727
751
  --ty-solid-warning: #e1a644;
728
752
  --ty-solid-warning-strong: #f59e0b;
729
753
  --ty-solid-warning-soft: #8b6334;
730
754
  --ty-solid-warning-hover: var(--ty-solid-warning-strong);
731
755
  --ty-solid-warning-active: var(--ty-solid-warning-strong);
732
- --ty-solid-warning-fg: white;
756
+ --ty-solid-warning-fg: black;
757
+ --ty-solid-warning-strong-fg: black;
758
+ --ty-solid-warning-soft-fg: white;
733
759
 
734
760
  --ty-solid-neutral: #414141;
735
761
  --ty-solid-neutral-strong: #4c4c4c;
@@ -737,6 +763,8 @@ Emphasis logic inverts: lighter = more emphasis
737
763
  --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
738
764
  --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
739
765
  --ty-solid-neutral-fg: white;
766
+ --ty-solid-neutral-strong-fg: white;
767
+ --ty-solid-neutral-soft-fg: white;
740
768
 
741
769
  /* Input component tokens - dark mode */
742
770
  --ty-input-bg: #1b1b1b;
package/dist/{tyrell-brand.css → tyrell-theme.css} RENAMED
@@ -1,11 +1,16 @@
1
1
  /* =====================================================================
2
- * tyrell-brand.css — OKLCH-based brand layer for Tyrell Components
2
+ * tyrell-theme.css — the OKLCH theme engine for Tyrell Components
3
3
  * =====================================================================
4
4
  *
5
- * Opt-in. Load AFTER `tyrell.css`. Override a few variables to rebrand.
5
+ * Opt-in. Load AFTER `tyrell.css`. Override a few variables to rebrand —
6
+ * or seed a color directly, declare a named theme, scope one to a
7
+ * subtree. `tyrell.css` alone is correct and accessible without this
8
+ * file; this is what turns it into a theming ENGINE rather than a fixed
9
+ * palette: auto-contrast text, seed ingestion, named/scoped themes,
10
+ * animated theme transitions. See CSS_GUIDE.md → Color Customization.
6
11
  *
7
12
  * <link rel="stylesheet" href=".../tyrell.css">
8
- * <link rel="stylesheet" href=".../tyrell-brand.css">
13
+ * <link rel="stylesheet" href=".../tyrell-theme.css">
9
14
  *
10
15
  * :root {
11
16
  * --ty-brand-hue: 200; // teal. Try 260 indigo, 30 orange, 145 emerald.
package/dist/tyrell.css CHANGED
@@ -341,8 +341,8 @@ COMPONENT TOKENS
341
341
  /* =================================================================
342
342
  SOLID BUTTON FILLS — plain default values (the contract). The smart
343
343
  per-state derivation (hover/active/tone via OKLCH) lives in the theme
344
- engines (tyrell-brand.css / tyrell-simple.css), not here. hover/active
345
- alias to -strong as a simple default; a theme overrides them.
344
+ engine (tyrell-theme.css), not here. hover/active alias to -strong as
345
+ a simple default; a theme overrides them.
346
346
  ================================================================= */
347
347
 
348
348
  /* Primary */
@@ -351,7 +351,14 @@ COMPONENT TOKENS
351
351
  --ty-solid-primary-soft: #7ea7d9;
352
352
  --ty-solid-primary-hover: var(--ty-solid-primary-strong);
353
353
  --ty-solid-primary-active: var(--ty-solid-primary-strong);
354
+ /* Per-fill fg, hand-picked (max contrast, tie→white) — this file has no
355
+ computed auto-contrast (that needs tyrell-theme.css's relative color
356
+ support), so each fill's correct fg is a literal, verified value.
357
+ Do NOT collapse back to one --ty-solid-X-fg per flavor: soft/strong
358
+ sit at different lightness and several fail WCAG AA against white. */
354
359
  --ty-solid-primary-fg: white;
360
+ --ty-solid-primary-strong-fg: white;
361
+ --ty-solid-primary-soft-fg: black;
355
362
 
356
363
  /* Success */
357
364
  --ty-solid-success: #3bb68d;
@@ -359,7 +366,9 @@ COMPONENT TOKENS
359
366
  --ty-solid-success-soft: #69b99e;
360
367
  --ty-solid-success-hover: var(--ty-solid-success-strong);
361
368
  --ty-solid-success-active: var(--ty-solid-success-strong);
362
- --ty-solid-success-fg: white;
369
+ --ty-solid-success-fg: black;
370
+ --ty-solid-success-strong-fg: black;
371
+ --ty-solid-success-soft-fg: black;
363
372
 
364
373
  /* Danger */
365
374
  --ty-solid-danger: #df5b5b;
@@ -367,7 +376,9 @@ COMPONENT TOKENS
367
376
  --ty-solid-danger-soft: #d57a7a;
368
377
  --ty-solid-danger-hover: var(--ty-solid-danger-strong);
369
378
  --ty-solid-danger-active: var(--ty-solid-danger-strong);
370
- --ty-solid-danger-fg: white;
379
+ --ty-solid-danger-fg: black;
380
+ --ty-solid-danger-strong-fg: white;
381
+ --ty-solid-danger-soft-fg: black;
371
382
 
372
383
  /* Warning */
373
384
  --ty-solid-warning: #e1a644;
@@ -375,7 +386,9 @@ COMPONENT TOKENS
375
386
  --ty-solid-warning-soft: #fbc56d;
376
387
  --ty-solid-warning-hover: var(--ty-solid-warning-strong);
377
388
  --ty-solid-warning-active: var(--ty-solid-warning-strong);
378
- --ty-solid-warning-fg: white;
389
+ --ty-solid-warning-fg: black;
390
+ --ty-solid-warning-strong-fg: black;
391
+ --ty-solid-warning-soft-fg: black;
379
392
 
380
393
  /* Neutral */
381
394
  --ty-solid-neutral: #414141;
@@ -384,6 +397,8 @@ COMPONENT TOKENS
384
397
  --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
385
398
  --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
386
399
  --ty-solid-neutral-fg: white;
400
+ --ty-solid-neutral-strong-fg: white;
401
+ --ty-solid-neutral-soft-fg: white;
387
402
 
388
403
  /* =================================================================
389
404
  DESIGN SYSTEM TOKENS
@@ -707,7 +722,12 @@ Emphasis logic inverts: lighter = more emphasis
707
722
  --ty-solid-primary-soft: #343f4c;
708
723
  --ty-solid-primary-hover: var(--ty-solid-primary-strong);
709
724
  --ty-solid-primary-active: var(--ty-solid-primary-strong);
725
+ /* Hand-picked per-fill fg — see the light-mode comment above. Dark-mode
726
+ lightness ordering differs from light (soft/strong swap direction),
727
+ so these are independently verified, not mirrored. */
710
728
  --ty-solid-primary-fg: white;
729
+ --ty-solid-primary-strong-fg: white;
730
+ --ty-solid-primary-soft-fg: white;
711
731
 
712
732
 
713
733
  --ty-solid-success: #3bb68d;
@@ -715,21 +735,27 @@ Emphasis logic inverts: lighter = more emphasis
715
735
  --ty-solid-success-soft: #285748;
716
736
  --ty-solid-success-hover: var(--ty-solid-success-strong);
717
737
  --ty-solid-success-active: var(--ty-solid-success-strong);
718
- --ty-solid-success-fg: white;
738
+ --ty-solid-success-fg: black;
739
+ --ty-solid-success-strong-fg: black;
740
+ --ty-solid-success-soft-fg: white;
719
741
 
720
742
  --ty-solid-danger: #df5b5b;
721
743
  --ty-solid-danger-strong: #cc3e3e;
722
744
  --ty-solid-danger-soft: #875656;
723
745
  --ty-solid-danger-hover: var(--ty-solid-danger-strong);
724
746
  --ty-solid-danger-active: var(--ty-solid-danger-strong);
725
- --ty-solid-danger-fg: white;
747
+ --ty-solid-danger-fg: black;
748
+ --ty-solid-danger-strong-fg: white;
749
+ --ty-solid-danger-soft-fg: white;
726
750
 
727
751
  --ty-solid-warning: #e1a644;
728
752
  --ty-solid-warning-strong: #f59e0b;
729
753
  --ty-solid-warning-soft: #8b6334;
730
754
  --ty-solid-warning-hover: var(--ty-solid-warning-strong);
731
755
  --ty-solid-warning-active: var(--ty-solid-warning-strong);
732
- --ty-solid-warning-fg: white;
756
+ --ty-solid-warning-fg: black;
757
+ --ty-solid-warning-strong-fg: black;
758
+ --ty-solid-warning-soft-fg: white;
733
759
 
734
760
  --ty-solid-neutral: #414141;
735
761
  --ty-solid-neutral-strong: #4c4c4c;
@@ -737,6 +763,8 @@ Emphasis logic inverts: lighter = more emphasis
737
763
  --ty-solid-neutral-hover: var(--ty-solid-neutral-strong);
738
764
  --ty-solid-neutral-active: var(--ty-solid-neutral-strong);
739
765
  --ty-solid-neutral-fg: white;
766
+ --ty-solid-neutral-strong-fg: white;
767
+ --ty-solid-neutral-soft-fg: white;
740
768
 
741
769
  /* Input component tokens - dark mode */
742
770
  --ty-input-bg: #1b1b1b;