vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add light theme toggle

Browse source
This commit is contained in:
vince 2026-06-20 00:49:22 +02:00
parent bbc81cea0d
commit cdb269e505
17 changed files with 415 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/lib/ui/components/styles.css
View file

@ -8,8 +8,8 @@
overflow: hidden;
padding: clamp(0.42rem, 0.65vw, 0.62rem);
background:
linear-gradient(90deg, transparent 0 49%, rgba(255, 255, 255, 0.08) 50%, transparent 51%),
rgba(0, 0, 0, 0.18);
linear-gradient(90deg, transparent 0 49%, var(--ui-color-frame-spine) 50%, transparent 51%),
var(--ui-color-frame-wash);
}
.dashboard-frame__header,
@ -26,6 +26,22 @@
padding-bottom: 0.34rem;
}
.dashboard-frame__title {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--ui-space-3);
align-items: start;
min-width: 0;
}
.dashboard-frame__title-copy {
min-width: 0;
}
.dashboard-frame__actions {
justify-self: end;
}
.dashboard-header {
grid-template-columns: minmax(0, 1fr) auto;
padding: var(--ui-space-3);
@ -99,7 +115,7 @@
.panel,
.system-state {
border: var(--ui-border);
background: rgba(3, 4, 3, 0.86);
background: var(--ui-color-surface-panel);
color: var(--ui-color-text);
}
@ -107,7 +123,11 @@
display: grid;
min-height: 5.15rem;
gap: 0.25rem;
background: linear-gradient(180deg, rgba(13, 15, 14, 0.82), rgba(2, 3, 2, 0.92));
background: linear-gradient(
180deg,
var(--ui-color-card-gradient-start),
var(--ui-color-card-gradient-end)
);
padding: 0.45rem 0.55rem 0.42rem;
}
@ -212,7 +232,7 @@
.progress-meter {
height: 0.25rem;
border: var(--ui-border);
background: #030403;
background: var(--ui-color-surface-inset);
}
.telemetry-card__bar span,
@ -271,7 +291,7 @@
align-items: start;
min-width: 0;
min-height: 4.15rem;
background: rgba(6, 8, 7, 0.82);
background: var(--ui-color-surface-module);
padding: 0.5rem;
}
@ -297,7 +317,7 @@
.module-card[data-severity="ok"] .icon-glyph {
background: var(--ui-color-accent);
color: #050605;
color: var(--ui-color-accent-contrast);
}
.module-card[data-severity="warning"] {
@ -348,7 +368,7 @@
.service-row:where(a):hover {
border-bottom-color: var(--ui-color-accent);
background: rgba(244, 244, 244, 0.035);
background: var(--ui-color-hover);
}
.service-row__main {
@ -398,7 +418,7 @@
grid-template-columns: auto minmax(0, 1fr);
min-height: 1.9rem;
align-items: center;
background: rgba(2, 3, 2, 0.92);
background: var(--ui-color-surface-footer);
color: inherit;
text-decoration: none;
}
@ -426,7 +446,7 @@
.footer-cell[data-severity="ok"] strong {
background: var(--ui-color-accent);
color: #060706;
color: var(--ui-color-accent-contrast);
}
.footer-cell[data-severity="warning"] strong {
@ -539,18 +559,48 @@
width: 2.5rem;
height: 2.5rem;
place-items: center;
background: rgba(2, 3, 2, 0.92);
background: var(--ui-color-surface-footer);
color: var(--ui-color-muted);
padding: 0;
}
.theme-toggle {
display: inline-grid;
grid-auto-flow: column;
gap: var(--ui-space-2);
align-items: center;
justify-content: center;
min-width: 6.5rem;
min-height: 2.15rem;
border: var(--ui-border);
background: var(--ui-color-surface-raised);
color: var(--ui-color-text);
cursor: pointer;
font: inherit;
font-size: 0.62rem;
font-weight: 850;
letter-spacing: 0;
padding: 0 var(--ui-space-3);
text-transform: uppercase;
}
.theme-toggle:hover {
border-color: var(--ui-color-accent);
color: var(--ui-color-accent);
}
.theme-toggle span {
line-height: 1;
white-space: nowrap;
}
.icon-glyph {
display: inline-grid;
width: 1.55rem;
height: 1.55rem;
place-items: center;
border: var(--ui-border);
background: #050605;
background: var(--ui-color-surface-icon);
color: currentColor;
line-height: 1;
}
@ -617,6 +667,7 @@
}
.dashboard-frame__header,
.dashboard-frame__title,
.dashboard-header,
.dashboard-frame__modules,
.dashboard-frame__panels {