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

fix(appui): replace hardcoded app UI theme colors with shared dees CSS variables

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 09:37:06 +00:00
parent cdde25d0b4
commit 130ca68471
9 changed files with 105 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
View File

@@ -73,30 +73,29 @@ export class DeesAppuiSecondarymenu extends DeesElement {
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
--sidebar-width-expanded: 240px;
--sidebar-width-collapsed: 56px;
--sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
--sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
--sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
--sidebar-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
--sidebar-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
--sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
--sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
--sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
--tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
--tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
--sidebar-bg: var(--dees-color-bg-secondary);
--sidebar-fg: var(--dees-color-text-secondary);
--sidebar-fg-muted: var(--dees-color-text-muted);
--sidebar-fg-active: var(--dees-color-text-primary);
--sidebar-border: var(--dees-color-border-subtle);
--sidebar-hover: var(--dees-color-hover);
--sidebar-active: var(--dees-color-active);
--sidebar-accent: var(--dees-color-text-primary);
--tooltip-bg: var(--dees-color-tooltip-bg);
--tooltip-fg: var(--dees-color-tooltip-fg);
/* Badge colors */
--badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
--badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
--badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
--badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
--badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
--badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
--badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
--badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
--badge-default-bg: var(--dees-color-badge-default-bg);
--badge-default-fg: var(--dees-color-badge-default-fg);
--badge-success-bg: var(--dees-color-badge-success-bg);
--badge-success-fg: var(--dees-color-badge-success-fg);
--badge-warning-bg: var(--dees-color-badge-warning-bg);
--badge-warning-fg: var(--dees-color-badge-warning-fg);
--badge-error-bg: var(--dees-color-badge-error-bg);
--badge-error-fg: var(--dees-color-badge-error-fg);
/* Action colors */
--action-primary: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
@@ -136,23 +135,23 @@ export class DeesAppuiSecondarymenu extends DeesElement {
width: 24px;
height: 24px;
border-radius: 50%;
background: ${cssManager.bdTheme('#ffffff', '#27272a')};
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
background: var(--dees-color-bg-primary);
border: 1px solid var(--dees-color-border-strong);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
color: var(--dees-color-text-muted);
opacity: 0;
transition: opacity 0.2s ease, background 0.15s ease;
padding: 0;
}
.collapse-toggle:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
background: var(--dees-color-bg-tertiary);
color: var(--dees-color-text-primary);
}
:host(:hover) .collapse-toggle {
@@ -215,12 +214,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
}
.menuSection::-webkit-scrollbar-thumb {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
background: var(--dees-color-scrollbar-thumb);
border-radius: 3px;
}
.menuSection::-webkit-scrollbar-thumb:hover {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
background: var(--dees-color-scrollbar-thumb-hover);
}
/* Menu Group */
@@ -261,7 +260,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
gap: 8px;
font-size: 11px;
font-weight: 600;
color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
color: var(--dees-color-text-warm);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
@@ -270,13 +269,13 @@ export class DeesAppuiSecondarymenu extends DeesElement {
.groupHeader .groupTitle dees-icon {
font-size: 16px;
color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
color: var(--dees-color-text-warm);
}
.groupHeader .chevron {
font-size: 12px;
transition: transform 0.2s ease;
color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
color: var(--dees-color-text-warm);
}
.groupHeader.collapsed .chevron {