Centralize status colors and overlay tints as CSS variables #47

Closed

Christoph wants to merge 0 commits from refs/pull/47/head into main

Christoph commented

2026-09-18 08:51:07 +00:00

(Migrated from git.cbsk-tech.de)

Key behavior changes (summary of the combined diff):

Introduces centralized status color variables and overlay tints (new --color-/--app- variables) and updates many selectors to use them instead of inline color/rgba values.
Replaces several box-shadow and overlay usages with the new --app-overlay-shadow / --app-menu-shadow / --app-float-shadow variables.
Moves multiple status color occurrences (badges, pills, branch/commit UI, toast and alert styles, file icons) to reference the status variables (e.g. .pill-active, .status-badge.modified, .repo-action.sync-primary.publish-local, .dialog-file-row svg, .prepared-tag, etc.).
Adjusts light-mode tokens and many light-mode-specific color values: gradients replaced by solid fills in several places (app background, panel highlight), borders and hairlines switched to named tokens, scrollbar thumb colors changed, and some hover/active tints tuned for light mode.
Many hover/active backgrounds now use overlay tint variables (for example var(--app-hover-tint), var(--app-raise-tint), var(--app-soft-tint)) instead of repeating rgba literals, improving consistency.

Notes for reviewers / potential issues to check

No test execution results were provided.
There are a couple of declarations that look self-referential (for example --color-success: var(--color-success) and --color-warning: var(--color-warning) earlier in the file before concrete values are defined). Verify these were intentionally ordered (the later definitions override earlier ones) and that no unintended circular references or missing fallbacks remain.
Verify both light and dark color tokens are defined where used. Search for uses of these new variables in components to ensure they resolve correctly in both themes.

Recommended manual checks

Visual diff of core screens in both light and dark modes (titlebar, panels, dialogs, toasts, repo/branch lists, file explorer) to spot regressions in contrast or layout caused by color/shadow changes.
Automated checks: build the CSS and run a linter/search for unresolved/recursive CSS variables (e.g. grep for var(--color-*) referencing the same name). Run a contrast checker on key status colors (success/danger/warning/info) against their background tokens to confirm accessibility ratios.

Compatibility / migration

This is primarily a styling token refactor and light-mode tuning; there are no code API changes. The main risk is visual regression. If any component relied on the old hard-coded values being unique, confirm the new variables produce the intended visuals.

If useful, I can run a targeted grep or list of all changed selectors that now reference the new variables to help validate coverage.

This change centralizes status color tokens and overlay tint/shadow tokens into CSS custom properties and updates usages across src/app.css. Many hard-coded color, background and shadow values have been replaced by new variables (for example --color-success/--color-danger/--color-warning/--color-info and --app-hover-tint/--app-raise-tint/--app-overlay-shadow), and a set of light-mode token values have been added/adjusted (the file now includes light-theme values such as --app-color-scheme: light, --app-bg: #f4f6fa, and lighter shadows/tones). Key behavior changes (summary of the combined diff): - Introduces centralized status color variables and overlay tints (new --color-*/--app-* variables) and updates many selectors to use them instead of inline color/rgba values. - Replaces several box-shadow and overlay usages with the new --app-overlay-shadow / --app-menu-shadow / --app-float-shadow variables. - Moves multiple status color occurrences (badges, pills, branch/commit UI, toast and alert styles, file icons) to reference the status variables (e.g. .pill-active, .status-badge.modified, .repo-action.sync-primary.publish-local, .dialog-file-row svg, .prepared-tag, etc.). - Adjusts light-mode tokens and many light-mode-specific color values: gradients replaced by solid fills in several places (app background, panel highlight), borders and hairlines switched to named tokens, scrollbar thumb colors changed, and some hover/active tints tuned for light mode. - Many hover/active backgrounds now use overlay tint variables (for example var(--app-hover-tint), var(--app-raise-tint), var(--app-soft-tint)) instead of repeating rgba literals, improving consistency. Notes for reviewers / potential issues to check - No test execution results were provided. - There are a couple of declarations that look self-referential (for example --color-success: var(--color-success) and --color-warning: var(--color-warning) earlier in the file before concrete values are defined). Verify these were intentionally ordered (the later definitions override earlier ones) and that no unintended circular references or missing fallbacks remain. - Verify both light and dark color tokens are defined where used. Search for uses of these new variables in components to ensure they resolve correctly in both themes. Recommended manual checks - Visual diff of core screens in both light and dark modes (titlebar, panels, dialogs, toasts, repo/branch lists, file explorer) to spot regressions in contrast or layout caused by color/shadow changes. - Automated checks: build the CSS and run a linter/search for unresolved/recursive CSS variables (e.g. grep for var(--color-*) referencing the same name). Run a contrast checker on key status colors (success/danger/warning/info) against their background tokens to confirm accessibility ratios. Compatibility / migration - This is primarily a styling token refactor and light-mode tuning; there are no code API changes. The main risk is visual regression. If any component relied on the old hard-coded values being unique, confirm the new variables produce the intended visuals. If useful, I can run a targeted grep or list of all changed selectors that now reference the new variables to help validate coverage.