Skip to content

@saasflare/ui@3.1.2

Choose a tag to compare

View all tags
@github-actions github-actions released this 07 May 13:51
@saasflare/ui@3.1.2
7b9ebef
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

TL;DR

Fix: `intent="neutral"` rendered illegibly on transparent-bg variants (Button soft/outline/ghost/link/glass; Badge soft/outline). Also fixes a parallel bug where Button outline/ghost/link with colored intents rendered white text on white pages. Adds a third intent token `--intent-text` to disambiguate the two roles `--intent` was overloaded with.

What was wrong

The `--intent` / `--intent-fg` pair carried two incompatible meanings depending on intent class:

Intent class `--intent` `--intent-fg`
primary, success, warning, danger, info saturated brand color (red, blue, …) white
neutral light gray surface (`--secondary`) dark gray text

This made transparent-bg variants illegible for at least one class:

  • Button soft / glass + neutral → text used `--intent` = light gray on near-white background, invisible.
  • Button outline / ghost / link + colored → text used `--intent-fg` = white on white page, invisible.
  • Badge soft / outline + neutral → text + border used `--intent` = light gray, invisible.

What changed

Three tokens per intent now, in `theme.css`:

Token Role
`--intent` fill color (used as background in solid/shadow)
`--intent-fg` paired text color readable on top of `--intent`
`--intent-text` text color when rendered without a fill (transparent bg)

For colored intents `--intent-text` equals `--intent` (the saturated color is itself readable as text on a page background) — zero visual change for solid/soft/shadow variants.

For `neutral`, `--intent-text` falls back to `--secondary-foreground` (dark gray), so transparent-bg variants stay legible.

Variants updated to use `--intent-text` for text/border on transparent or tinted backgrounds:

  • `Button`: soft, outline, ghost, link, glass
  • `Badge`: soft, outline

`solid` and `shadow` variants are unchanged.

Public API

Untouched. `Intent` type and `data-intent` attribute work exactly as before.

Verification

  • npm provenance: ✓ Sigstore SLSA Provenance v1
  • npm trusted publishing: ✓ OIDC-signed
  • Visual matrix in apps/ui: every (variant × intent) combination now renders legibly
  • WCAG AA contrast: passing for both colored intents (e.g. danger outline ≈ 4.6 : 1) and neutral (≈ 6.8 : 1 against light page)
Assets 2
Loading