refactor(theme): centralize status colors and overlay tints in CSS vars

Introduce semantic theme variables (e.g. --color-success, --color-danger,
--color-warning, --color-info) and a set of overlay/tint/shadow variables
(--app-hover-tint, --app-raise-tint, --app-soft-tint, --app-overlay-shadow,
--app-menu-shadow, --app-float-shadow, etc.) and use them throughout
app.css in place of many hard-coded color, background and shadow values.

This change:
- replaces literal color tokens used for badges, pills, buttons, menus,
  toasts, borders and file icons with the new semantic variables
- switches several box-shadow and overlay usages to the new shadow vars
- harmonizes light-theme surface, border and scrollbar values to explicit
  variables for easier maintenance

No structural or behavioral changes; this is purely a visual/theming
refactor to make future theme adjustments and dark/light parity simpler.
This commit is contained in:
2026-09-18 10:50:32 +02:00
parent f00ed86472
commit 7ee02e8652
18 changed files with 432 additions and 371 deletions
@@ -536,7 +536,7 @@
.repository-state, .integration-empty { display: grid; place-items: center; align-content: center; min-height: 188px; padding: 20px; color: var(--color-ink-faint); text-align: center; }
.repository-state { gap: 7px; font-size: 10.5px; }
.repository-state strong, .integration-empty strong { color: var(--color-ink); font-size: 11px; }
.repository-state-error strong { color: #e86060; }
.repository-state-error strong { color: var(--color-danger); }
.repository-state-error span { max-width: 520px; line-height: 1.45; }
.integration-empty { min-height: 260px; gap: 8px; }
.integration-empty :global(svg) { color: var(--color-accent); }