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
+2 -2
View File
@@ -144,7 +144,7 @@
<style>
.command-palette-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: min(14vh, 120px) 20px 20px; background: color-mix(in srgb, var(--app-dialog-backdrop) 76%, transparent); backdrop-filter: blur(7px) saturate(.82); }
.command-palette { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(720px, 100%); max-height: min(650px, 76vh); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: 14px; background: var(--app-dialog-bg); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.command-palette { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(720px, 100%); max-height: min(650px, 76vh); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: 14px; background: var(--app-dialog-bg); box-shadow: var(--app-overlay-shadow); }
.command-palette-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--color-border); color: var(--color-primary); }
.command-palette-search input { min-width: 0; border: 0; outline: 0; color: var(--color-ink); background: transparent; font: inherit; font-size: 15px; }
.command-palette-search input::placeholder { color: var(--color-ink-dim); }
@@ -155,7 +155,7 @@
.command-palette-item.active:not(:disabled) { border-color: color-mix(in srgb, var(--color-primary) 24%, transparent); background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface-raised)); }
.command-palette-item:disabled { cursor: default; opacity: .48; }
.command-palette-icon { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--color-border-subtle); border-radius: 8px; color: var(--color-ink-muted); background: var(--color-surface-raised); }
.command-palette-icon.branch { color: #65c98b; } .command-palette-icon.file { color: #69a7ff; } .command-palette-icon.commit { color: #ba82ff; }
.command-palette-icon.branch { color: var(--color-success); } .command-palette-icon.file { color: #69a7ff; } .command-palette-icon.commit { color: #ba82ff; }
.command-palette-copy { display: grid; min-width: 0; gap: 2px; } .command-palette-copy strong, .command-palette-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-palette-copy strong { font-size: 12.5px; font-weight: 700; } .command-palette-copy small { color: var(--color-ink-dim); font-size: 10.5px; }
.command-palette-current { color: var(--color-ink-dim); font-family: var(--font-mono); font-size: 9px; font-weight: 700; }