Skip to content

feat: add CSS custom properties design system#390

Closed
wowitsjack wants to merge 1 commit intoFredolx:mainfrom
wowitsjack:feat/design-system
Closed

feat: add CSS custom properties design system#390
wowitsjack wants to merge 1 commit intoFredolx:mainfrom
wowitsjack:feat/design-system

Conversation

@wowitsjack
Copy link

@wowitsjack wowitsjack commented Mar 7, 2026

Full source available at FredTV-Next, my personal fork with all features integrated.

Summary

  • Introduce centralized CSS custom properties (design tokens) in styles.css
  • Replace all hardcoded color values across 6 component CSS files with variable references
  • Tokens cover: surfaces, borders, text, accent, semantic colors, radius, transitions, shadows
  • Add Material menu, modal animation, and toastr dark theme overrides
  • Visual appearance is unchanged (variables resolve to equivalent or improved dark theme values)

Files changed:

  • src/styles.css - :root custom properties + global overrides
  • src/app/channel-tile/channel-tile.component.css - color variables + favorite star pop animation
  • src/app/download-manager/download-manager.component.css
  • src/app/epg-modal/epg-modal.component.css - + arrow hover effect
  • src/app/epg-modal/epg-modal-item/epg-modal-item.component.css
  • src/app/settings/source-tile/source-tile.component.css
  • src/app/setup/confirm-modal/confirm-modal.component.css

Test plan

  • Verify dark theme appearance is consistent across all views
  • Check channel tiles, EPG modals, download manager, settings source tiles, confirm modals
  • Verify Material context menus have rounded corners and dark background
  • Check toastr notifications match dark theme

@CLAassistant
Copy link

CLAassistant commented Mar 7, 2026

CLA assistant check
All committers have signed the CLA.

Introduce a centralized design token system using CSS custom properties.
All hardcoded color values across component CSS files now reference
shared variables, making theming consistent and future theme changes
trivial.

Tokens cover: surfaces, borders, text, accent, semantic colors, radius,
transitions, and shadows. Also adds Material menu, modal animation,
and toastr dark theme overrides.
@wowitsjack wowitsjack force-pushed the feat/design-system branch from 51d8ae6 to e86f37c Compare March 7, 2026 00:38
@wowitsjack
Copy link
Author

wowitsjack commented Mar 7, 2026

Yep, signed

@wowitsjack wowitsjack force-pushed the feat/design-system branch 2 times, most recently from 1e4a7d6 to e86f37c Compare March 7, 2026 15:54
@wowitsjack
Copy link
Author

Superseded by #396 + #397 which contribute the full FredTV-Next codebase as a proper 2-part stack.

@wowitsjack wowitsjack closed this Mar 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants