Skip to content

v0.138.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 14 May 09:06
· 46 commits to main since this release
v0.138.0
48091e1

Minor Changes

  • #1145 20424549 Thanks @tenphi! - Color system: migrate to @tenphi/glaze and add built-in dark + high-contrast schemes.

    The color palette is now generated by Glaze (OKHSL-based, contrast-aware) and emits three variants per token — light, dark, and high-contrast — wired through tasty's state aliases (@dark, @hc). Schemes activate from data-schema="dark" | "light" and data-contrast="more" | "less" on <html>, with prefers-color-scheme / prefers-contrast media-query fallbacks, so apps that opt in get adaptive theming with no per-component changes.

    • New surface tokens: #surface, #surface-2, #surface-3 for backgrounds; #surface-text, #surface-text-soft, #surface-text-soft-2, #surface-2-text, #surface-2-text-soft, #surface-3-text, #surface-3-text-soft for text. The darkest text tokens are anchored at the bottom of Glaze's lightness window so they match the legacy #dark (OKHSL L≈12) in light mode and invert cleanly in dark/HC.
    • New per-theme accent tokens: #primary-accent-surface, #primary-accent-text, #primary-accent-text-soft, #primary-accent-icon, #primary-accent-surface-hover, #primary-accent-surface-2/3, plus matching success-* / danger-* / warning-* / note-* (and purple-* as a primary alias). Used by buttons, banners, tags, etc. The *-text-soft variants (#primary-text-soft, #danger-text-soft, …) are adaptive (mode auto) at AA-floor contrast (cr 4.5/7) — the right anchor for a less-prominent foreground that still meets AA in BOTH light and dark schemes (used as the LINK base color, with *-text taking over on hover).
    • Other new tokens: #border, #focus, #placeholder, #disabled, #disabled-surface, #disabled-surface-text, #overlay, #shadow-sm / #shadow-md / #shadow-lg, and #surface-inverse (fixed-mode "always dark" surface for tooltips and other elements that intentionally don't invert). #disabled-surface and #disabled-surface-text are adaptive contrast-driven tokens (cr ≈ 1.4 / 2.0 vs #surface) so the disabled state has perceptually identical "washed-out" look in light, dark, and HC schemes — replacing legacy #dark.04 / #dark-04 / #white.6 patterns that became too contrasty in dark mode.
    • PrismCode theme: a new #code-* palette (code-comment, code-punctuation, code-keyword, code-string, code-number, code-function, code-attribute) with WCAG AA contrast against #surface in every scheme; diff insertion / deletion reuse #success-* / #danger-*.
    • Backward compatibility: every legacy color token (#dark, #dark-01…#dark-05, #text, #minor, #shadow, #light, #dark-bg, #primary, #primary-text, #primary-bg, #primary-icon, #primary-hover, #primary-desaturated, #primary-disabled, #purple-01…#purple-04, the full #danger-* / #success-* / #warning-* / #note-* families, #disabled-surface-text, #disabled-surface, #focus, #pink, #clear) keeps working and now adapts to dark/HC for free via the underlying Glaze tokens.
    • Removed: #white and #black as explicit token definitions — they are tasty built-ins and resolve automatically. The Storybook Playground story was removed (use the dedicated playground).
    • Storybook helpers: withDarkScheme() and withHighContrast() decorators in src/stories/decorators/withColorScheme.tsx for previewing components in alternate schemes.
    • Dependencies: adds @tenphi/glaze; updates @tenphi/tasty to a build that emits data-schema / data-contrast predefined states; updates Storybook to 10.3.6.

    Existing apps and components keep rendering identically in light mode (legacy aliases preserve current colors). To opt into dark mode, set <html data-schema="dark"> (or rely on the user's system preference). Apps using hardcoded #white as a "page background" should switch to #surface so the body adapts with the scheme.

Assets 2
Loading