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
@@ -281,7 +281,7 @@
.azure-organization-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-faint); }
.azure-organization-row i.configured { background: var(--color-success); }
.azure-remove { min-height: 30px; align-self: center; padding: 0; border: 0; color: var(--color-ink-faint); background: transparent; }
.azure-remove:hover { color: #e86060; background: color-mix(in srgb, #e86060 8%, transparent); }
.azure-remove:hover { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, transparent); }
.azure-organizations-empty { display: grid; place-items: center; gap: 7px; padding: 14px; color: var(--color-ink-faint); text-align: center; }
.azure-organizations-empty > :global(svg) { color: var(--color-accent); }
.azure-organizations-empty span { font-size: 9.5px; }
@@ -297,7 +297,7 @@
.integration-enabled strong { color: var(--color-ink); font-size: 10.5px; }
.integration-enabled small { color: var(--color-ink-faint); font-size: 9px; }
.integration-enabled input { width: 32px; height: 18px; accent-color: var(--color-accent); }
.forget-token { justify-self: start; min-height: 28px; color: #e86060; font-size: 10px; }
.forget-token { justify-self: start; min-height: 28px; color: var(--color-danger); font-size: 10px; }
@media (max-width: 680px) { .integration-layout { grid-template-columns: 1fr; min-height: 0; } .integration-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .integration-providers > button { min-height: 54px; } .provider-copy small { display: none; } }
@media (max-width: 430px) { .integration-providers { grid-template-columns: 1fr; } .integration-summary { grid-template-columns: auto minmax(0, 1fr); } .integration-status { grid-column: 1 / -1; justify-self: start; } .azure-organizations-head { align-items: stretch; flex-direction: column; } .azure-organizations-head button { align-self: start; } }
</style>