Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases 46 Wiki Activity

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

Browse Source 
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:
Christoph
2026-09-18 10:50:32 +02:00
parent f00ed86472
commit 7ee02e8652
18 changed files with 432 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/BisectDialog.svelte
+11 -11
View File
@@ -111,16 +111,16 @@
.commit-field{display:grid;gap:6px;padding:10px;border:1px solid var(--color-border-subtle);border-radius:7px;background:var(--color-surface-raised)}
.field-title{display:flex;align-items:center;gap:6px;color:var(--color-ink);font-size:11px;font-weight:700}
.field-title em{margin-left:auto;padding:1px 5px;border-radius:4px;font-size:9px;font-style:normal;font-weight:800;text-transform:uppercase}
.good-field .field-title :global(svg),.good-field .field-title em{color:#69c986}
.good-field .field-title em{background:color-mix(in srgb,#69c986 10%,transparent)}
.bad-field .field-title :global(svg),.bad-field .field-title em{color:#ef737b}
.bad-field .field-title em{background:color-mix(in srgb,#ef737b 10%,transparent)}
.good-field .field-title :global(svg),.good-field .field-title em{color:var(--color-success)}
.good-field .field-title em{background:color-mix(in srgb,var(--color-success) 10%,transparent)}
.bad-field .field-title :global(svg),.bad-field .field-title em{color:var(--color-danger)}
.bad-field .field-title em{background:color-mix(in srgb,var(--color-danger) 10%,transparent)}
.bisect-fields input{height:32px;font-family:var(--font-mono);font-size:11.5px}
.bisect-fields small{color:var(--color-ink-faint);font-size:9.5px;line-height:1.35}
.bisect-notice{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid color-mix(in srgb,#e2ad4e 28%,var(--color-border));border-radius:7px;color:var(--color-ink-muted);background:color-mix(in srgb,#e2ad4e 6%,var(--color-surface));font-size:11.5px;line-height:1.4}
.bisect-notice :global(svg){flex:0 0 auto;color:#e2ad4e}
.bisect-notice.error{border-color:color-mix(in srgb,#e45c65 40%,var(--color-border));color:#ef979d;background:color-mix(in srgb,#c92f3a 8%,var(--color-surface))}
.bisect-notice.error :global(svg){color:#ef6972}
.bisect-notice{display:flex;align-items:flex-start;gap:8px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--color-warning) 28%,var(--color-border));border-radius:7px;color:var(--color-ink-muted);background:color-mix(in srgb,var(--color-warning) 6%,var(--color-surface));font-size:11.5px;line-height:1.4}
.bisect-notice :global(svg){flex:0 0 auto;color:var(--color-warning)}
.bisect-notice.error{border-color:color-mix(in srgb,var(--color-danger) 40%,var(--color-border));color:#ef979d;background:color-mix(in srgb,var(--color-danger) 8%,var(--color-surface))}
.bisect-notice.error :global(svg){color:var(--color-danger)}
.bisect-progress{display:flex;align-items:center;justify-content:space-between;color:var(--color-ink-muted);font-size:11px}
.bisect-progress strong{color:var(--color-primary)}
.bisect-current{padding:14px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}
@@ -133,9 +133,9 @@
.verdict{min-height:58px;justify-content:flex-start;padding:8px 11px;text-align:left}
.verdict>span{display:grid;gap:2px}
.verdict small{color:var(--color-ink-faint);font-size:9.5px}
.verdict.good{color:#69c986}.verdict.bad{color:#ef737b}.verdict.skip{color:#ddb45c}
.bisect-result{padding:16px;border:1px solid color-mix(in srgb,#ef737b 36%,var(--color-border));border-radius:8px;background:color-mix(in srgb,#c92f3a 7%,var(--color-surface))}
.bisect-result>div:last-child>span{color:#ef838b;font-size:10px;font-weight:800;text-transform:uppercase}
.verdict.good{color:var(--color-success)}.verdict.bad{color:var(--color-danger)}.verdict.skip{color:var(--color-warning)}
.bisect-result{padding:16px;border:1px solid color-mix(in srgb,var(--color-danger) 36%,var(--color-border));border-radius:8px;background:color-mix(in srgb,var(--color-danger) 7%,var(--color-surface))}
.bisect-result>div:last-child>span{color:var(--color-danger);font-size:10px;font-weight:800;text-transform:uppercase}
.result-copy{margin:0}
.bisect-footer{justify-content:flex-end;padding-block:9px}
.bisect-footer .reset{margin-right:auto}