fix(appearance): paint the editor gutter from the active skin - #1184
Merged
Conversation
The base sheets declare `--cm-editor-gutter-bg: var(--cm-editor-background)` at `:root`. A custom property declared as an alias has its `var()` substituted on the element it is declared on, and descendants inherit the substituted result, so overriding the editor background on `<body>` never moved the gutter: the line-number column kept the stylesheet's background while the code beside it took the skin's. Emit the gutter background alongside the editor background so both land in the same scope, and add a test that reads the shipped stylesheets and fails on any `:root` alias pointing at a skin-owned token. Also rename the Codex skin to "Constantly Reset", matching the joke Codex makes with its Claude-flavoured "Absolutely".
Harry19081
added
UX
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
2 participants
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.
Problem
On any non-baseline skin, the file viewer's line-number column kept the base
stylesheet's background while the code beside it took the skin's. Two surfaces
meant to share one colour visibly did not.
The base sheets declare, at
:root:A custom property declared as an alias has its
var()substituted on theelement where it is declared — here
:root— and descendants inherit thealready-substituted result. Skin tokens are written as inline properties on
<body>, so overriding--cm-editor-backgroundthere never moved the gutter.This is structural rather than a typo: it applies to any
:rootalias whosereferent a skin overrides, and it is invisible until someone notices a
mismatched strip on screen.
Solution
Emit
--cm-editor-gutter-bgfromderiveSkinTokensalongside--cm-editor-background, so both land in the same scope and move together.Add
rootAliasParity.test.ts, which parses the shipped stylesheets, finds every:rootdeclaration that aliases another token, and fails when the referent isskin-owned but the alias is not — and is not redeclared in the
bodyscope,where it would resolve correctly anyway. Reading the stylesheets rather than a
hand-maintained list means the next such alias is caught when it is added.
Auditing the current sheets found exactly one offender. The other three aliases
(
--cm-font-family,--diff-added-chunk,--diff-deleted-chunk) point attokens no skin overrides.
Also renames the Codex skin's display label to Constantly Reset, returning
the joke Codex makes with its Claude-flavoured "Absolutely". The rename lives in
a
SKIN_LABEL_OVERRIDESmap in the hand-writtenregistry.ts, not in thegenerated
codexSkins.ts, for two reasons: the generated module stays afaithful record of what Codex actually ships, so regenerating it cannot quietly
revert the label; and only the label changes. The id
codex-codexis whatgeneral.lightSkin/general.darkSkinpersist, so renaming it would fail thesettings enum and silently reset every install that had this skin selected.
This PR carries a bug fix and a rename together at the author's request. They
are independent — the gutter fix stands whether or not the new name does.
Potential risks
light and dark designs keep resolving the alias through the stylesheet exactly
as before. The change is only observable on a Codex skin.
public/orgii_*.cssfrom disk. Moving or renaming thosefiles breaks the test rather than failing silently, which is the intended
direction, but it is a build-time coupling to a path.
:rootandbodyscopes. An alias declared under anarrower selector would not be checked; none exist today.
user-visible label for anyone already running the Codex skin, who will see the
entry rename itself without their selection changing.
Verification
Verified in a clean
git worktreechecked out atorigin/develop(57c8ffd47)with only this branch's four files applied, rather than in the working checkout,
which carries unrelated in-flight work:
npx tsc --noEmit --pretty false— exit 0npx eslint src/config/appearance --ext .ts --max-warnings 0 --report-unused-disable-directives— exit 0npx vitest run --config config/vitest.config.ts src/config/appearance src/config/settingsSchema— exit 0, 12 files / 83 tests passedThe new guard was checked for vacuity: reverting the one-line fix makes it fail
with
--cm-editor-gutter-bg -> var(--cm-editor-background), and restoring itpasses.
Not verified: no screenshot of the corrected gutter across skins, and the full
test suite was not re-run for this change — the diff is confined to the skin
registry and its own tests, and CI runs it.