fix(theme): replace no-op --mat-sys-* tokens with --app-* design tokens#1181
Open
4gray wants to merge 1 commit into
Open
fix(theme): replace no-op --mat-sys-* tokens with --app-* design tokens#11814gray wants to merge 1 commit into
4gray wants to merge 1 commit into
Conversation
The Material theme setup in apps/web/src/m3-theme.scss uses the older M3 API (mat.define-theme + mat.all-component-themes), which emits component tokens but never emits the --mat-sys-* system tokens. As a result ~540 var(--mat-sys-*) references across the app were silent no-ops: the declarations were invalid at computed-value time and fell back to inherited/initial values, so many backgrounds, borders and dividers never rendered and several text/icon colors sat at the wrong contrast. Rather than migrate to mat.theme() (which would flip every no-op at once with M3 azure-palette values foreign to the hand-tuned design), remap the high-visibility usages to the existing --app-* design tokens defined for both themes in m3-theme.scss, verified screenshot-driven in light and dark via Electron CDP. Changes: - Add --app-error-color and --app-accent-color tokens (light + dark). - Fix high-visibility surfaces: settings area, workspace shell header, playlist switcher, downloads, channel-details dialog, account-info, group/category management dialogs, sources context/filters panels, nav-list, and the .dark-theme app background. - Point the Tailwind color palette at --app-* tokens instead of --mat-sys-*. - Strip ~150 dead var(--app-x, var(--mat-sys-y)) fallbacks repo-wide (the fallback can never be taken). - UI polish surfaced by the remap: suppress Material's circular icon-button state layer in the header (keep the rounded-rectangle hover), remove the orphan divider before the download button, remove the redundant right-edge accent bar on active rail items (the filled chip is enough), and raise the header/switcher control icons from the muted tier to --app-body-color so they no longer read as disabled. Guard against regressions: - tools/styles/check-mat-sys-usage.mjs fails on any new var(--mat-sys-*) reference; legacy usages are grandfathered in a shrink-only baseline (tools/styles/mat-sys-baseline.mjs). Wired into the CI Lint job and exposed as `pnpm run lint:styles`. Docs: - docs/architecture/theme-design-tokens.md documents why the tokens are no-ops, the --app-* mapping table, and the screenshot-driven migration protocol. CLAUDE.md updated with the token policy and the new lint check. Scrollbar-related --mat-sys-* usages are intentionally left untouched here; they belong to the separate branch claude/iptvnator-dark-scrollbar-2600aa. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Greptile SummaryThis PR moves high-visibility theme styling from unavailable Material system tokens to app design tokens. The main changes are:
Confidence Score: 5/5This looks safe to merge.
Important Files Changed
Reviews (1): Last reviewed commit: "fix(theme): replace no-op --mat-sys-* to..." | Re-trigger Greptile |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: eac1dfa09e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+25
to
+27
| const violations = usages.filter( | ||
| ({ file, count }) => count > (matSysBaseline.get(file) ?? 0) | ||
| ); |
There was a problem hiding this comment.
When a file already has a baseline entry, this only compares the total usage count. If a migration deletes one old var(--mat-sys-*) reference and adds a new one in the same file, the count stays at or below the baseline, so CI accepts the new no-op token as grandfathered; leaving a shrunk baseline stale creates the same headroom. Since this guard is meant to fail any new usages, track exact occurrences or fail until reduced counts are regenerated into the baseline.
Useful? React with 👍 / 👎.
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
1 participant
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 & why
apps/web/src/m3-theme.scssuses Angular Material's older M3 API (mat.define-theme+mat.all-component-themes), which emits component tokens but never emits the--mat-sys-*system tokens. So ~540var(--mat-sys-*)references across the app were silent no-ops — invalid at computed-value time, falling back to inherited/initial values. Many backgrounds, borders and dividers never rendered, and several text/icon colors sat at the wrong contrast (verified empirically via CDP: no stylesheet rule defines any--mat-sys-*variable).Strategy: rather than migrate to
mat.theme()(v19+) — which would flip every no-op at once with M3 azure-palette values foreign to the hand-tuned design — this remaps the high-visibility usages to the existing--app-*design tokens defined for both themes inm3-theme.scss. Every change was screenshot-verified in light and dark via Electron CDP. Seedocs/architecture/theme-design-tokens.mdfor the full rationale and mapping table.Changes
--app-error-color,--app-accent-color(light + dark).nav-list, and the.dark-themeapp background.--app-*tokens instead of--mat-sys-*.var(--app-x, var(--mat-sys-y))→var(--app-x)— the fallback can never be taken)..is-activechip).--app-body-colorso they no longer read as disabled.Regression guard
tools/styles/check-mat-sys-usage.mjsfails on any newvar(--mat-sys-*)reference; the ~180 remaining legacy usages are grandfathered in a shrink-only baseline (tools/styles/mat-sys-baseline.mjs).pnpm run lint:styles.Docs
docs/architecture/theme-design-tokens.md— why the tokens are no-ops, the--app-*mapping table, and the screenshot-driven migration protocol.CLAUDE.md— token policy + the new lint check.Notes for reviewers
--mat-sys-*usages are intentionally left untouched — they belong to the separate branchclaude/iptvnator-dark-scrollbar-2600aa.🤖 Generated with Claude Code