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;