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/BranchPanel.svelte
+14 -14
View File
@@ -841,17 +841,17 @@
width: 100%;
min-height: 0;
padding: 6px 8px;
border: 1px solid color-mix(in srgb, #4eca76 26%, transparent);
border: 1px solid color-mix(in srgb, var(--color-success) 26%, transparent);
border-radius: 7px;
background: linear-gradient(90deg, color-mix(in srgb, #4eca76 11%, transparent), transparent 85%);
background: linear-gradient(90deg, color-mix(in srgb, var(--color-success) 11%, transparent), transparent 85%);
color: var(--color-ink);
text-align: left;
}
.bp-current:hover:not(:disabled) {
border-color: color-mix(in srgb, #4eca76 42%, transparent);
background: linear-gradient(90deg, color-mix(in srgb, #4eca76 17%, transparent), transparent 90%);
border-color: color-mix(in srgb, var(--color-success) 42%, transparent);
background: linear-gradient(90deg, color-mix(in srgb, var(--color-success) 17%, transparent), transparent 90%);
}
.bp-current-icon { display: grid; place-items: center; color: #4eca76; }
.bp-current-icon { display: grid; place-items: center; color: var(--color-success); }
.bp-current-text { display: grid; min-width: 0; gap: 1px; }
.bp-current-text strong,
.bp-current-text small {
@@ -1037,7 +1037,7 @@
width: 6px;
height: 6px;
border-radius: 999px;
background: #4eca76;
background: var(--color-success);
}
/* Branch rows */
@@ -1059,8 +1059,8 @@
.bp-head-tag {
padding: 1px 5px;
border-radius: 4px;
color: #4eca76;
background: color-mix(in srgb, #4eca76 14%, transparent);
color: var(--color-success);
background: color-mix(in srgb, var(--color-success) 14%, transparent);
font: 700 9px/1.3 var(--font-mono);
letter-spacing: 0.04em;
}
@@ -1087,15 +1087,15 @@
.bp-branch.current {
color: var(--color-ink);
font-weight: 700;
background: color-mix(in srgb, #4eca76 9%, transparent);
box-shadow: inset 2px 0 0 #4eca76;
background: color-mix(in srgb, var(--color-success) 9%, transparent);
box-shadow: inset 2px 0 0 var(--color-success);
}
.bp-branch.current .bp-icon { color: #4eca76; }
.bp-branch.current:hover { background: color-mix(in srgb, #4eca76 14%, transparent); }
.bp-branch.current .bp-icon { color: var(--color-success); }
.bp-branch.current:hover { background: color-mix(in srgb, var(--color-success) 14%, transparent); }
.bp-branch.flash { animation: bp-flash 900ms ease-out; }
@keyframes bp-flash {
0%, 30% { background: color-mix(in srgb, #4eca76 30%, transparent); }
100% { background: color-mix(in srgb, #4eca76 9%, transparent); }
0%, 30% { background: color-mix(in srgb, var(--color-success) 30%, transparent); }
100% { background: color-mix(in srgb, var(--color-success) 9%, transparent); }
}
</style>