design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dees-statsgrid): update styles to use shared theme CSS variables

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 10:53:53 +00:00
parent 31d728ec49
commit 4dba14060e
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
View File

@@ -281,7 +281,7 @@ export class DeesStatsGrid extends DeesElement {
.gauge-background { .gauge-background {
fill: none; fill: none;
stroke: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')}; stroke: var(--dees-color-border-default);
stroke-width: 6; stroke-width: 6;
} }
@@ -329,7 +329,7 @@ export class DeesStatsGrid extends DeesElement {
.percentage-bar { .percentage-bar {
width: 100%; width: 100%;
height: 6px; height: 6px;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')}; background: var(--dees-color-border-default);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
margin-top: auto; margin-top: auto;
@@ -337,7 +337,7 @@ export class DeesStatsGrid extends DeesElement {
.percentage-fill { .percentage-fill {
height: 100%; height: 100%;
background: ${cssManager.bdTheme('#333333', '#e0e0e0')}; background: var(--dees-color-text-muted);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px; border-radius: 3px;
} }
@@ -386,14 +386,14 @@ export class DeesStatsGrid extends DeesElement {
.multi-percentage-bar { .multi-percentage-bar {
width: 100%; width: 100%;
height: 4px; height: 4px;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')}; background: var(--dees-color-border-default);
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
} }
.multi-percentage-fill { .multi-percentage-fill {
height: 100%; height: 100%;
background: ${cssManager.bdTheme('#333333', '#e0e0e0')}; background: var(--dees-color-text-muted);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px; border-radius: 2px;
} }
@@ -464,7 +464,7 @@ export class DeesStatsGrid extends DeesElement {
.cpu-core-bar-wrapper { .cpu-core-bar-wrapper {
flex: 1; flex: 1;
width: 100%; width: 100%;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')}; background: var(--dees-color-border-default);
border-radius: 2px; border-radius: 2px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -477,21 +477,21 @@ export class DeesStatsGrid extends DeesElement {
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
background: ${cssManager.bdTheme('#666666', '#888888')}; background: var(--dees-color-text-muted);
transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease; transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
} }
.cpu-core-bar-fill.low { .cpu-core-bar-fill.low {
background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')}; background: var(--dees-color-accent-success);
} }
.cpu-core-bar-fill.medium { .cpu-core-bar-fill.medium {
background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')}; background: var(--dees-color-accent-warning);
} }
.cpu-core-bar-fill.high { .cpu-core-bar-fill.high {
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')}; background: var(--dees-color-accent-error);
} }
.cpu-core-label { .cpu-core-label {
@@ -531,24 +531,24 @@ export class DeesStatsGrid extends DeesElement {
.partition-bar { .partition-bar {
width: 100%; width: 100%;
height: 6px; height: 6px;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')}; background: var(--dees-color-border-default);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
} }
.partition-bar-fill { .partition-bar-fill {
height: 100%; height: 100%;
background: ${cssManager.bdTheme('#333333', '#e0e0e0')}; background: var(--dees-color-text-muted);
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px; border-radius: 3px;
} }
.partition-bar-fill.warning { .partition-bar-fill.warning {
background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')}; background: var(--dees-color-accent-warning);
} }
.partition-bar-fill.critical { .partition-bar-fill.critical {
background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')}; background: var(--dees-color-accent-error);
} }
.partition-stats { .partition-stats {
@@ -695,7 +695,7 @@ export class DeesStatsGrid extends DeesElement {
.disk-health-bar { .disk-health-bar {
width: 100%; width: 100%;
height: 4px; height: 4px;
background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')}; background: var(--dees-color-border-default);
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
} }
@@ -771,7 +771,7 @@ export class DeesStatsGrid extends DeesElement {
.trend-line { .trend-line {
fill: none; fill: none;
stroke: ${cssManager.bdTheme('#999999', '#666666')}; stroke: var(--dees-color-text-muted);
stroke-width: 1.5; stroke-width: 1.5;
stroke-linejoin: round; stroke-linejoin: round;
stroke-linecap: round; stroke-linecap: round;