0
? [
{ key: 'app', label: t.app, value: metrics?.memoryAppUsage ?? '-', width: Math.max(0, Math.min(100, (app / total) * 100)) },
@@ -193,7 +196,7 @@ function MemoryMeter({ metrics }: { metrics?: SystemMetrics }) {
key={segment.key}
style={{ width: `${segment.width}%` }}
/>
- )) : }
+ )) : }
{segments.length ? (
@@ -287,9 +290,10 @@ function compactUptimeParts(parts: string[]) {
}
function getMetricTone(percent: number) {
- if (percent >= 85) return 'status-red'
- if (percent >= 60) return 'status-yellow'
- return 'status-green'
+ // Status meters use the shared tone-* classes so dot/fill styling stays aligned.
+ if (percent >= 85) return 'tone-danger'
+ if (percent >= 60) return 'tone-warning'
+ return 'tone-success'
}
function ProcessTable({ rows }: { rows: SystemMetrics['topProcesses'] }) {
diff --git a/apps/desktop/src/renderer/styles/themes/default-dark.css b/apps/desktop/src/renderer/styles/themes/default-dark.css
index d4cefc2..615b071 100644
--- a/apps/desktop/src/renderer/styles/themes/default-dark.css
+++ b/apps/desktop/src/renderer/styles/themes/default-dark.css
@@ -244,21 +244,21 @@
background: var(--metric-kernel);
}
-:root:not([data-theme]) .metric-dot.status-green,
-:root[data-theme='default-dark'] .metric-dot.status-green,
-:root[data-theme='default'] .metric-dot.status-green {
+:root:not([data-theme]) .metric-dot.tone-success,
+:root[data-theme='default-dark'] .metric-dot.tone-success,
+:root[data-theme='default'] .metric-dot.tone-success {
background: var(--metric-status-green);
}
-:root:not([data-theme]) .metric-dot.status-yellow,
-:root[data-theme='default-dark'] .metric-dot.status-yellow,
-:root[data-theme='default'] .metric-dot.status-yellow {
+:root:not([data-theme]) .metric-dot.tone-warning,
+:root[data-theme='default-dark'] .metric-dot.tone-warning,
+:root[data-theme='default'] .metric-dot.tone-warning {
background: var(--metric-status-yellow);
}
-:root:not([data-theme]) .metric-dot.status-red,
-:root[data-theme='default-dark'] .metric-dot.status-red,
-:root[data-theme='default'] .metric-dot.status-red {
+:root:not([data-theme]) .metric-dot.tone-danger,
+:root[data-theme='default-dark'] .metric-dot.tone-danger,
+:root[data-theme='default'] .metric-dot.tone-danger {
background: var(--metric-status-red);
}
@@ -280,15 +280,15 @@
background: var(--meter-track);
}
-:root:not([data-theme]) .meter-fill.green,
-:root[data-theme='default-dark'] .meter-fill.green,
-:root[data-theme='default'] .meter-fill.green {
+:root:not([data-theme]) .meter-fill.tone-success,
+:root[data-theme='default-dark'] .meter-fill.tone-success,
+:root[data-theme='default'] .meter-fill.tone-success {
background: var(--success);
}
-:root:not([data-theme]) .meter-fill.orange,
-:root[data-theme='default-dark'] .meter-fill.orange,
-:root[data-theme='default'] .meter-fill.orange {
+:root:not([data-theme]) .meter-fill.tone-warning,
+:root[data-theme='default-dark'] .meter-fill.tone-warning,
+:root[data-theme='default'] .meter-fill.tone-warning {
background: var(--memory-warn);
}
@@ -298,6 +298,12 @@
background: var(--memory-warn);
}
+:root:not([data-theme]) .meter-fill.tone-danger,
+:root[data-theme='default-dark'] .meter-fill.tone-danger,
+:root[data-theme='default'] .meter-fill.tone-danger {
+ background: var(--metric-status-red);
+}
+
:root:not([data-theme]) .meter-fill.app,
:root[data-theme='default-dark'] .meter-fill.app,
:root[data-theme='default'] .meter-fill.app {
@@ -1693,21 +1699,27 @@
background: #3a3a3a;
}
-:root:not([data-theme]) .meter-fill.green,
-:root[data-theme='default-dark'] .meter-fill.green,
-:root[data-theme='default'] .meter-fill.green {
+:root:not([data-theme]) .meter-fill.tone-success,
+:root[data-theme='default-dark'] .meter-fill.tone-success,
+:root[data-theme='default'] .meter-fill.tone-success {
background: #39d98a;
}
-:root:not([data-theme]) .meter-fill.orange,
-:root[data-theme='default-dark'] .meter-fill.orange,
-:root[data-theme='default'] .meter-fill.orange,
+:root:not([data-theme]) .meter-fill.tone-warning,
+:root[data-theme='default-dark'] .meter-fill.tone-warning,
+:root[data-theme='default'] .meter-fill.tone-warning,
:root:not([data-theme]) .meter-fill.yellow,
:root[data-theme='default-dark'] .meter-fill.yellow,
:root[data-theme='default'] .meter-fill.yellow {
background: var(--memory-warn);
}
+:root:not([data-theme]) .meter-fill.tone-danger,
+:root[data-theme='default-dark'] .meter-fill.tone-danger,
+:root[data-theme='default'] .meter-fill.tone-danger {
+ background: var(--metric-status-red);
+}
+
:root:not([data-theme]) .mini-tabs span,
:root[data-theme='default-dark'] .mini-tabs span,
:root[data-theme='default'] .mini-tabs span {
diff --git a/apps/desktop/src/renderer/styles/themes/default-light.css b/apps/desktop/src/renderer/styles/themes/default-light.css
index d178bdb..2859822 100644
--- a/apps/desktop/src/renderer/styles/themes/default-light.css
+++ b/apps/desktop/src/renderer/styles/themes/default-light.css
@@ -315,15 +315,15 @@
background: var(--metric-kernel);
}
-:root[data-theme='default-light'] .metric-dot.status-green {
+:root[data-theme='default-light'] .metric-dot.tone-success {
background: var(--metric-status-green);
}
-:root[data-theme='default-light'] .metric-dot.status-yellow {
+:root[data-theme='default-light'] .metric-dot.tone-warning {
background: var(--metric-status-yellow);
}
-:root[data-theme='default-light'] .metric-dot.status-red {
+:root[data-theme='default-light'] .metric-dot.tone-danger {
background: var(--metric-status-red);
}
@@ -339,15 +339,19 @@
background: var(--metric-kernel);
}
-:root[data-theme='default-light'] .meter-fill.green {
+:root[data-theme='default-light'] .meter-fill.tone-success {
background: var(--success);
}
:root[data-theme='default-light'] .meter-fill.yellow,
-:root[data-theme='default-light'] .meter-fill.orange {
+:root[data-theme='default-light'] .meter-fill.tone-warning {
background: var(--warning);
}
+:root[data-theme='default-light'] .meter-fill.tone-danger {
+ background: var(--metric-status-red);
+}
+
:root[data-theme='default-light'] .network-select {
border-color: var(--border-light);
background: #f7f8fa;