Skip to content

feat(theme): make the neutral border tokens opaque surface steps - #889

Merged
isaque-bock-azion merged 5 commits into
mainfrom
feat/opaque-border-tokens
Aug 12, 2026
Merged

feat(theme): make the neutral border tokens opaque surface steps#889
isaque-bock-azion merged 5 commits into
mainfrom
feat/opaque-border-tokens

Conversation

@gabriel-lisboa-azion

Copy link
Copy Markdown
Collaborator

Summary

  • --border-default and --border-muted become opaque steps of the surface palette. As alpha they painted a different colour on every backdrop — rgb(26) on --bg-canvas, 35 on --bg-surface, 44 on --bg-surface-raised, 95 on --bg-surface-overlay — and two rules meeting composited into a fifth, brighter value, so any stacked or abutting border read as a double rule.
  • Adds four palette steps (gray 150 / 250 / 750 / 775) because the ramp had none in the range a border needs: it jumped 200 (229) → 300 (178) and 700 (77) → 800 (26), and those bracketing steps are already --bg-selected / --bg-disabled, so an opaque border landed on its own fill and disappeared. The dark background anchors (700 / 800 / 900) keep their values.
  • muted now sits closer to the background than default in both themes — lighter in light, darker in dark — instead of being identical to it in light.

How to test

  1. pnpm storybook:devComponents/Inputs/Checkbox → Disabled, both themes: the control keeps a visible border. Before this change an opaque border here was exactly --bg-disabled and vanished.
  2. Any bordered component on a raised or selected surface (Components/Data/Table, Components/Overlay/Panel, Components/Actions/SegmentedButton): every hairline is visible, and a rule reads the same weight wherever it is drawn.
  3. pnpm --filter @aziontech/theme test → 12 pass.
  4. node packages/theme/src/scripts/build-tokens.mjsdist/v4/globals.css regenerates with no diff, confirming the committed dist matches source.

Notes

  • Not an API change: no token is renamed or removed, only revalued, plus four additive palette steps. It is a visible change to every bordered component — borders read slightly stronger and no longer drift by backdrop — so it wants a design eye as much as a code one.
  • Measured contrast against every surface role, both themes: minimum delta 10, no zeros. Previously four combinations were delta 0 (invisible) once opaque.
  • Blocks feat(webkit): add frame-box, section-gap, section-title and hero-title #880, which needs these tokens for its frame rules and hatch to reach full strength.

`--border-default` and `--border-muted` were alpha (`#FFFFFF1A` / `#FFFFFF0D`
dark, `#14` light), so one token painted a different colour on every
backdrop — measured rgb(26) on `--bg-canvas`, 35 on `--bg-surface`, 44 on
`--bg-surface-raised` and 95 on `--bg-surface-overlay` — and two rules meeting
composited into a fifth, brighter value. A hairline had no fixed identity, and
any stacked or abutting border read as a double rule.

Both now point at opaque steps of the surface palette. The ramp had no step in
the range a border needs — it jumped 200 (229) to 300 (178) and 700 (77) to 800
(26), and the steps bracketing those gaps are already `--bg-selected` /
`--bg-disabled`, so an opaque border landed exactly on its own fill and
vanished. Four steps fill the gaps: gray 150, 250, 750 and 775. The dark
background anchors (700 / 800 / 900) keep their values.

Every border-on-surface pairing now clears zero contrast, minimum delta 10.
`muted` sits closer to the background than `default` in both themes — lighter
in light, darker in dark — so it reads as a subtler rule rather than a
duplicate.
@isaque-bock-azion
isaque-bock-azion merged commit 5595436 into main Aug 12, 2026
23 checks passed
@isaque-bock-azion
isaque-bock-azion deleted the feat/opaque-border-tokens branch August 12, 2026 17:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

4 participants