v0.139.0

Minor Changes

• #1179 658f0b94 Thanks @tenphi! - Added a new outline-2 type. It mirrors outline but paints over #surface-3 instead of #surface-2, so the component stays visually distinct when placed inside a #surface-2 container. The matching theme constants (DEFAULT_OUTLINE_2_STYLES, DANGER_OUTLINE_2_STYLES, SUCCESS_OUTLINE_2_STYLES, WARNING_OUTLINE_2_STYLES, NOTE_OUTLINE_2_STYLES) are exported from data/item-themes. outline-2 is wired into Button, Item (and every component that goes through Item — ItemButton, ItemAction, ItemBadge, Select, FilterPicker, Picker, Menu, etc.). The special theme intentionally has no outline-2 variant (it paints over #special-surface); pairing theme="special" with type="outline-2" falls back to outline.

• #1179 658f0b94 Thanks @tenphi! - Breaking: Removed the neutral and secondary values from the type prop on Button, ButtonSplit, Item, ItemAction, ItemBadge, and ItemButton, and from buttonType on RadioGroup. Their visuals are now expressed through the existing clear and outline types combined with isSelected:

  • type="neutral" → type="clear"
  • type="clear" (selected look) → type="clear" isSelected
  • type="secondary" → type="outline" isSelected

  Default type for ItemAction, ItemBadge, and ItemButton changed from neutral to clear. ItemBadge now accepts the full 'primary' | 'outline' | 'clear' | 'link' union and supports isSelected.

• #1179 658f0b94 Thanks @tenphi! - RadioGroup with type="button" now groups its buttons like ButtonSplit: zero gap, shared corner radius (only the first/last items keep their outer-side radius), overlapping borders, and the selected button is lifted via z-index so its brand-tinted border is visible from all four sides. Hover / focus-visible bump higher still so they always read on top.

  Outline-style selected borders no longer use the alpha-blended #<theme>-text.15 (which doubled up at every overlap into a darker stripe) — they now use the new opaque #<theme>-border token. The token comes from the existing neutral border ramp re-resolved per colored theme at saturation: 0.5, giving each theme a subtly hue-tinted border with no extra palette bookkeeping. This affects DEFAULT_OUTLINE_STYLES, DANGER_OUTLINE_STYLES, SUCCESS_OUTLINE_STYLES, WARNING_OUTLINE_STYLES, and NOTE_OUTLINE_STYLES.

• #1179 658f0b94 Thanks @tenphi! - Breaking: Renamed the special icon string from 'checkbox' to 'checkmark' on Item, ItemAction, and ItemBadge since the rendered glyph is a checkmark, not a checkbox. Replace icon="checkbox" with icon="checkmark". The associated checkbox style modifier was renamed to checkmark accordingly.

Patch Changes

• #1179 658f0b94 Thanks @tenphi! - Fixed special theme outline and clear fills resolving to the wrong layer for selected & hovered, selected & focused and selected & hovered & pressed states. Two state entries within the same fill map shared the same #white.X value (hovered ↔ disabled for outline; 'hovered | focused' ↔ 'selected & disabled' for clear). Tasty's mergeEntriesByValue pass coalesced them into a single high-priority OR-condition entry that then negated against the lower-priority 'selected & (hovered | focused)' rule, making it resolve to FALSE for selected-hover/focus. Each alpha step now uses a unique value string, restoring the intended monotonic-contrast progression. See src/data/Claude.md for the underlying pitfall.

• #1179 658f0b94 Thanks @tenphi! - Fixed ItemAction and ItemBadge rendering without variant styles when nested inside an Item / ItemButton with type="outline-2". ItemActionContext now collapses 'outline-2' to 'clear' for child actions, matching the existing behavior for 'outline' / 'item' / 'header' / 'card'.

• #1179 658f0b94 Thanks @tenphi! - Internal: migrated every color reference in src/data/item-themes.ts to use Glaze palette tokens directly, removing all dependencies on the legacy alias layer in src/tokens/colors.ts (e.g. #dark → #surface-text, #dark-02 → #surface-text-soft, #primary-text → #primary-accent-text, #primary-hover → #primary-accent-surface-hover, #primary brand fill → #primary-accent-surface, #light → #surface-3, #clear → transparent, and the matching danger / success / warning / note ramps). Resolved values are unchanged — every alias was a direct re-export of the same Glaze token — so component visuals are identical. The legacy aliases in colors.ts are still exported for backwards compatibility with consumer code.

• #1179 658f0b94 Thanks @tenphi! - Unified the primary-type fill ramp across all themes. DANGER, SUCCESS, WARNING, NOTE and SPECIAL now follow the same monotonically-darkening accent-surface → -2 → -3 (default → hover → pressed) ramp already used by the default theme, so contrast against the app background increases consistently with each interaction step in both light and dark schemes. Previously the colored themes used a default → -hover → default shape (no press feedback) and the special theme used a separate accent-fill / accent-fill-hover / accent-fill ramp.

  The special theme palette was renamed for consistency: accent-fill → accent-surface, accent-fill-text → accent-surface-text, accent-fill-hover → accent-surface-hover, plus new accent-surface-2 and accent-surface-3 steps. The legacy accent-surface-hover token is retained for the #primary-hover / #<theme>-hover color aliases consumed by external code.

  Breaking (special theme tokens only): #special-accent-fill, #special-accent-fill-text, and #special-accent-fill-hover were renamed to #special-accent-surface, #special-accent-surface-text, and #special-accent-surface-hover respectively. External consumers referencing these by name should update their references.

• #1179 658f0b94 Thanks @tenphi! - Fixed keyboard focus ring on RadioGroup:

  • Classic RadioGroup (default type="radio") — removed the redundant per-item wrapper outline; the inner radio circle already shows a focused-mod ring, and the duplicate wrapper ring driven by :focus-within also fired on mouse clicks.
  • Button / Tabs RadioGroup (type="button" / type="tabs") — added a keyboard-only focus ring on the group container itself (none was rendered before, since the per-item Item themes only swap the border color on focus). Implemented via React Aria's useFocusRing({ within: true }) reading isFocusVisible (not isFocused), so mouse clicks don't trigger it.

• #1179 658f0b94 Thanks @tenphi! - RadioGroup with type="tabs": the selected tab no longer looks active when the group is disabled. The selected-tab override now dims fill (#surface → #surface.6) and text (#dark → #dark.3) and drops $item-shadow for the tabs & selected & disabled state.

• #1179 658f0b94 Thanks @tenphi! - Fixed a brief surface-color flash that appeared when toggling isSelected on outline / outline-2 buttons (most visible inside RadioGroup type="button") and when toggling isDisabled on primary buttons (e.g. on form submit). The flash came from a CSS-transition layer-count mismatch: tasty's fill renders single-color values as background-color only and two-color values as background-color + --tasty-second-fill-color + background-image: linear-gradient(...). When a state with two layers transitioned to a state with one (or vice-versa), the gradient overlay snapped on/off instantly while background-color interpolated, exposing the base layer mid-transition.

  Every fill state map in src/data/item-themes.ts now uses the same two-layer shape across non-selected, selected, and disabled states, with the same opaque base color (#surface, #surface-2, #surface-3, or #special-surface per variant). Only the overlay tint changes between states, so background-color, --tasty-second-fill-color, and background-image all interpolate smoothly. Visuals are essentially unchanged — the brand-tinted overlays now composite over the variant's own base instead of the body surface, producing a sub-1-OKHSL-point lightness shift that's imperceptible in side-by-side comparisons.