fix(styles): tokenise editor chrome colours and guard component styles - #20
Merged
Merged
Conversation
The slash palette painted a near-opaque dark gradient over the shipped light surface, so its search input and command labels measured 1.00:1 and 1.23:1 in the theme this package ships. The palette is light chrome now: the gradient and its shadow go, the surface, field, border and text tokens take over, and the root sets the text colour explicitly so the items' `color: inherit` cannot take the host page's text colour. The two blue alphas become `--nightfire-color-selection`, one named token used for the selected item's border and background at the alphas the component already used. The multi-block item's three red literals use the existing `--nightfire-color-danger` the same way. `check:style-literals` reads every `ts/src/**/*.svelte` style block and fails on a colour literal, with `transparent`, `currentColor` and `inherit` as the only exceptions, and runs in `health`. Radii, spacing and font literals remain unguarded. Both documents that state the token count read 25, and `PROVENANCE.md` records the new token as locally authored beside `--nightfire-color-focus`.
Contributor
Author
|
Approved for merge at exact head beb9cca. Findings: none. Review scope:
Validation:
The three svelte-check warnings in VideoEditor.svelte are pre-existing and unrelated to this PR. Radii, spacing, and font literals remain explicitly outside this lane's guard and are not merge blockers here. |
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.
What
The slash palette painted
linear-gradient(rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94))overvar(--nightfire-color-surface)and let the shipped light theme's dark text sit on top. Measuredfrom the composited layers in the triage note, the search input was 1.00:1 and the command labels
1.23:1 — illegible in the theme this package ships, in a published release.
This makes the palette light chrome, as contract 003 already described the editor layer, and adds
the guard that stops the next literal.
SlashCommandPalette.svelte: the gradient, itsbox-shadow rgba(15, 23, 42, 0.28), the input backgroundrgba(15, 23, 42, 0.82), and theselection pair
rgba(96, 165, 250, 0.32)/rgba(59, 130, 246, 0.14).editor/NightfireMultiBlockItem.svelte:#f87171,rgba(239, 68, 68, 0.15),rgba(239, 68, 68, 0.4).--nightfire-color-selection: #3b82f6ints/src/styles.css, used for theselected item's border and background at the alphas the component already used
(
color-mix(... 32%, transparent)and... 14% ...). The danger state reuses the existing--nightfire-color-dangerthe same way. The palette root setscolor: var(--nightfire-color-text)explicitly, so the items'color: inheritcannot take thehost page's text colour.
ts/scripts/check-style-literals.tsfails on a colour literal (hex, functionalnotation with literal arguments, CSS named colours) in any
ts/src/**/*.sveltestyle block.Exceptions:
transparent,currentColor,inherit. Wired intohealthascheck:style-literals, so every lane runs it.ts/tests/nightfire/style-literals.test.tsholdsthe guard biting and the shipped tree passing.
docs/architecture/core-package-vocabulary.mdanddocs/contracts/003-styling-and-restyling.mdread 25, and the test fails if either disagreeswith
styles.css.PROVENANCE.mdrecords the token as locally authored beside--nightfire-color-focus. Radii, spacing and font literals remain unguarded; the triage notekeeps that gap open.
Interaction oracle
#ff0000,rgb(15 23 42)andrebeccapurpleare all reported, exit 1; the shipped head passes--nightfire-color-dangerjsdom does not composite backgrounds, so the component suite cannot assert rendered contrast; the
token-reference assertion plus the no-literal check is the honest floor here. Computed from the
declared values:
--nightfire-color-texton--nightfire-color-surface17.74:1, the muted token onit 4.83:1, and
--nightfire-color-texton the selected item's 14% tint 15.17:1. The danger icon'shover tint gives
--nightfire-color-danger3.10:1, above the 3:1 WCAG non-text floor.effigy qaeffigy qapassed (exit 0) atbeb9ccaa5387974945c0c03bc8875afeb76f8cf0:export proof passed: 23 explicit subpaths resolveboundary proof passed: forbidden graph absent; core 3995 bytes; validation 3977 bytes; renderer 5716 bytes/4 inputs and editor-freeschema proof passed: 11 documents, 7 core payloads, 4 positive cases, 3 negative casesstyle literal proof passed: no colour literal in any ts/src/**/*.svelte style blockversion sync passed: npm and Cargo 0.2.0; both languages and Cargo packaging consume root wire v1pack proof passed: 87 files, 56125 bytesCargo package proof passed: unpacked nightfire 0.2.0 tests consume the root fixturenpm Git-consumer proof passed at beb9ccaa5387974945c0c03bc8875afeb76f8cf0cargo Git-consumer proof passed at beb9ccaa5387974945c0c03bc8875afeb76f8cf0release-automationverifiedsvelte-check: 0 errors, 3 pre-existing warnings ints/src/video/VideoEditor.svelteUnit, component, sanitization and Rust suites passed. The palette's existing component suite is
untouched.
Out of scope
No renderer, schema, payload, export map, version or consumer change. No merge, tag or publish.