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

fix(theme): align component styles with shared theme CSS variables

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 10:50:19 +00:00
parent dcef6faa66
commit ca290d1267
15 changed files with 159 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ts_web/elements/00group-chart/dees-chart-area/styles.ts
View File

@@ -1,13 +1,15 @@
import { css, cssManager } from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
export const chartAreaStyles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
:host {
display: block;
height: 400px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
color: var(--dees-color-text-primary);
font-size: 14px;
}
dees-tile {
@@ -24,7 +26,7 @@ export const chartAreaStyles = [
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
color: var(--dees-color-text-secondary);
}
.expandBtn {
display: flex;
@@ -36,13 +38,13 @@ export const chartAreaStyles = [
border-radius: 4px;
background: transparent;
cursor: pointer;
color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
color: var(--dees-color-text-muted);
transition: all 0.15s ease;
padding: 0;
}
.expandBtn:hover {
background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
background: var(--dees-color-hover);
color: var(--dees-color-text-secondary);
}
.chartContainer {
position: absolute;
@@ -64,7 +66,7 @@ export const chartAreaStyles = [
}
.statsSeries + .statsSeries {
padding-left: 24px;
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-left: 1px solid var(--dees-color-border-default);
}
.statsColor {
width: 8px;
@@ -75,15 +77,15 @@ export const chartAreaStyles = [
.statsName {
font-weight: 500;
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
color: var(--dees-color-text-secondary);
margin-right: 4px;
}
.statsItem {
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
color: var(--dees-color-text-muted);
}
.statsItem strong {
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
color: var(--dees-color-text-primary);
}
.lw-tooltip {
position: absolute;

48
ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
View File

@@ -106,7 +106,7 @@ export class DeesChartLog extends DeesElement {
display: block;
height: 400px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
color: var(--dees-color-text-primary);
}
dees-tile {
@@ -124,7 +124,7 @@ export class DeesChartLog extends DeesElement {
.title {
font-weight: 500;
font-size: 14px;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
color: var(--dees-color-text-primary);
white-space: nowrap;
}
@@ -141,10 +141,10 @@ export class DeesChartLog extends DeesElement {
flex: 1;
padding: 4px 8px;
font-size: 12px;
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border: 1px solid var(--dees-color-border-default);
border-radius: 4px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
background: var(--dees-color-bg-primary);
color: var(--dees-color-text-primary);
outline: none;
}
@@ -153,7 +153,7 @@ export class DeesChartLog extends DeesElement {
}
.search-box input::placeholder {
color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
color: var(--dees-color-text-muted);
}
.search-nav {
@@ -164,35 +164,35 @@ export class DeesChartLog extends DeesElement {
.search-nav button {
padding: 4px 6px;
font-size: 11px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
background: var(--dees-color-bg-primary);
border: 1px solid var(--dees-color-border-default);
border-radius: 3px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
color: var(--dees-color-text-muted);
cursor: pointer;
line-height: 1;
}
.search-nav button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.filter-toggle {
padding: 4px 8px;
font-size: 11px;
font-weight: 500;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
background: var(--dees-color-bg-primary);
border: 1px solid var(--dees-color-border-default);
border-radius: 4px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
color: var(--dees-color-text-muted);
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.filter-toggle:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.filter-toggle.active {
@@ -208,11 +208,11 @@ export class DeesChartLog extends DeesElement {
}
.control-button {
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
background: var(--dees-color-bg-primary);
border: 1px solid var(--dees-color-border-default);
border-radius: 4px;
padding: 4px 10px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
color: var(--dees-color-text-muted);
cursor: pointer;
font-size: 12px;
font-weight: 500;
@@ -220,9 +220,9 @@ export class DeesChartLog extends DeesElement {
}
.control-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 25%)')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
background: var(--dees-color-hover);
border-color: var(--dees-color-border-strong);
color: var(--dees-color-text-primary);
}
.control-button.active {
@@ -247,7 +247,7 @@ export class DeesChartLog extends DeesElement {
align-items: center;
justify-content: center;
height: 100%;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
color: var(--dees-color-text-muted);
font-style: italic;
font-size: 13px;
}
@@ -299,7 +299,7 @@ export class DeesChartLog extends DeesElement {
.metric.rate {
margin-left: auto;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
color: var(--dees-color-text-muted);
}
.metric.rate::before {