mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-11 02:46:16 -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>
61 lines
2.6 KiB
JavaScript
61 lines
2.6 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
// Content paths scoped to the Angular web app and shared libs
|
|
content: [
|
|
'./apps/web/src/**/*.{html,ts,scss}',
|
|
'./libs/**/*.{html,ts,scss}',
|
|
],
|
|
// Match Angular Material's dark theme class strategy
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'Roboto', 'Helvetica Neue', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
// Surface colors wired to the --app-* design tokens
|
|
// (m3-theme.scss) so Tailwind utilities automatically respect
|
|
// the active theme. Never wire these to --mat-sys-* vars: the
|
|
// current Material theme setup does not emit system tokens
|
|
// (see docs/architecture/theme-design-tokens.md).
|
|
surface: 'var(--app-content-bg)',
|
|
'surface-low': 'var(--app-widget-bg)',
|
|
'surface-mid': 'var(--app-widget-bg)',
|
|
'surface-high': 'var(--app-widget-header-bg)',
|
|
'on-surface': 'var(--app-heading-color)',
|
|
'on-surface-variant': 'var(--app-body-color)',
|
|
outline: 'var(--app-separator)',
|
|
'outline-variant': 'var(--app-separator)',
|
|
primary: 'var(--app-selection-color)',
|
|
'on-primary': 'var(--app-selection-on-color)',
|
|
'primary-container': 'var(--app-selection-surface)',
|
|
'on-primary-container': 'var(--app-selection-color)',
|
|
secondary: 'var(--app-body-color)',
|
|
'secondary-container': 'var(--app-hover-overlay)',
|
|
'on-secondary-container': 'var(--app-heading-color)',
|
|
tertiary: 'var(--app-accent-color)',
|
|
'tertiary-container':
|
|
'color-mix(in srgb, var(--app-accent-color) 15%, transparent)',
|
|
error: 'var(--app-error-color)',
|
|
'error-container':
|
|
'color-mix(in srgb, var(--app-error-color) 12%, transparent)',
|
|
},
|
|
borderRadius: {
|
|
widget: '14px',
|
|
pill: '999px',
|
|
card: '18px',
|
|
},
|
|
boxShadow: {
|
|
widget: '0 1px 4px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.04)',
|
|
'widget-hover':
|
|
'0 4px 16px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.06)',
|
|
card: '0 2px 8px rgba(0,0,0,0.15)',
|
|
},
|
|
},
|
|
},
|
|
// CRITICAL: disable preflight to avoid conflicts with Angular Material
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
};
|