mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-13 20:56:19 -08:00
4grayandClaude Fable 5
eac1dfa09e
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>
58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
/**
|
|
* Fails when new `var(--mat-sys-*)` references are added anywhere in
|
|
* apps/ or libs/. The current Material theme (m3-theme.scss, older M3 API)
|
|
* never emits `--mat-sys-*` system tokens, so such references are silent
|
|
* no-ops: the declaration is invalid at computed-value time and falls back
|
|
* to inherited/initial values. Use the `--app-*` design tokens from
|
|
* apps/web/src/m3-theme.scss instead.
|
|
*
|
|
* Pre-existing usages are grandfathered in tools/styles/mat-sys-baseline.mjs
|
|
* (regenerate with `node tools/styles/generate-mat-sys-baseline.mjs` after
|
|
* migrating a file — the baseline should only shrink).
|
|
*
|
|
* Usage: node tools/styles/check-mat-sys-usage.mjs
|
|
*/
|
|
|
|
import process from 'node:process';
|
|
|
|
import { matSysBaseline } from './mat-sys-baseline.mjs';
|
|
import { scanMatSysUsages } from './mat-sys-usage.shared.mjs';
|
|
|
|
const usages = scanMatSysUsages(process.cwd());
|
|
|
|
const violations = usages.filter(
|
|
({ file, count }) => count > (matSysBaseline.get(file) ?? 0)
|
|
);
|
|
|
|
if (violations.length > 0) {
|
|
console.error(
|
|
'New var(--mat-sys-*) references detected. These tokens are never\n' +
|
|
'emitted by the current Material theme setup and resolve to\n' +
|
|
'nothing — use the --app-* design tokens from\n' +
|
|
'apps/web/src/m3-theme.scss instead\n' +
|
|
'(see docs/architecture/theme-design-tokens.md).\n'
|
|
);
|
|
for (const { file, count } of violations) {
|
|
const baselined = matSysBaseline.get(file) ?? 0;
|
|
console.error(` ${file}: ${count} usages (baseline: ${baselined})`);
|
|
}
|
|
process.exit(1);
|
|
}
|
|
|
|
const stale = [...matSysBaseline.keys()].filter(
|
|
(file) => !usages.some((usage) => usage.file === file)
|
|
);
|
|
const shrunk = usages.filter(
|
|
({ file, count }) => count < (matSysBaseline.get(file) ?? 0)
|
|
);
|
|
if (stale.length > 0 || shrunk.length > 0) {
|
|
console.log(
|
|
'Baseline is stale (files were migrated). Consider running\n' +
|
|
'`node tools/styles/generate-mat-sys-baseline.mjs` to shrink it.'
|
|
);
|
|
}
|
|
|
|
console.log('No new var(--mat-sys-*) references. OK.');
|