feat(theme): make the neutral border tokens opaque surface steps - #889
Merged
Conversation
`--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
previously approved these changes
Aug 12, 2026
guilherme-santana-azion
previously approved these changes
Aug 12, 2026
gabriel-lisboa-azion
dismissed stale reviews from guilherme-santana-azion and isaque-bock-azion
via
August 12, 2026 14:49
05b96f5
isaque-bock-azion
approved these changes
Aug 12, 2026
guilherme-santana-azion
approved these changes
Aug 12, 2026
herbert-julio-azion
approved these changes
Aug 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--border-defaultand--border-mutedbecome 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.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.mutednow sits closer to the background thandefaultin both themes — lighter in light, darker in dark — instead of being identical to it in light.How to test
pnpm storybook:dev→ Components/Inputs/Checkbox → Disabled, both themes: the control keeps a visible border. Before this change an opaque border here was exactly--bg-disabledand vanished.pnpm --filter @aziontech/theme test→ 12 pass.node packages/theme/src/scripts/build-tokens.mjs→dist/v4/globals.cssregenerates with no diff, confirming the committed dist matches source.Notes