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

63
ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
View File

@@ -55,28 +55,27 @@ export class DeesAppuiMainmenu extends DeesElement {
themeDefaultStyles,
cssManager.defaultStyles,
css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host {
--menu-width-expanded: 200px;
--menu-width-collapsed: 56px;
--tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
--tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
--tooltip-bg: var(--dees-color-tooltip-bg);
--tooltip-fg: var(--dees-color-tooltip-fg);
position: relative;
display: block;
height: 100%;
}
.mainContainer {
color: ${cssManager.bdTheme('#666', '#ccc')};
color: var(--dees-color-text-secondary);
z-index: ${zIndexLayers.fixed.appBar};
display: flex;
flex-direction: column;
position: relative;
width: var(--menu-width-expanded);
height: 100%;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
background: var(--dees-color-bg-secondary);
user-select: none;
border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
border-right: 1px solid var(--dees-color-border-subtle);
font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
transition: width 0.25s ease;
}
@@ -94,23 +93,23 @@ export class DeesAppuiMainmenu 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 {
@@ -128,14 +127,14 @@ export class DeesAppuiMainmenu extends DeesElement {
gap: 10px;
height: 48px;
padding: 0 14px;
border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
border-bottom: 1px solid var(--dees-color-border-subtle);
flex-shrink: 0;
box-sizing: border-box;
}
.logoSection .logoIcon {
font-size: 22px;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: var(--dees-color-text-primary);
flex-shrink: 0;
}
@@ -143,7 +142,7 @@ export class DeesAppuiMainmenu extends DeesElement {
flex: 1;
font-size: 15px;
font-weight: 600;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: var(--dees-color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -178,12 +177,12 @@ export class DeesAppuiMainmenu 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 */
@@ -200,7 +199,7 @@ export class DeesAppuiMainmenu extends DeesElement {
padding: 8px 12px 6px;
font-size: 11px;
font-weight: 600;
color: ${cssManager.bdTheme('#737373', '#737373')};
color: var(--dees-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
@@ -238,21 +237,21 @@ export class DeesAppuiMainmenu extends DeesElement {
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
color: var(--dees-color-text-secondary);
}
.tab:hover {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
background: var(--dees-color-hover);
color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
}
.tab:active {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
background: var(--dees-color-active);
}
.tab.selectedTab {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
background: var(--dees-color-active);
color: var(--dees-color-text-primary);
}
.tab.selectedTab::before {
@@ -263,7 +262,7 @@ export class DeesAppuiMainmenu extends DeesElement {
transform: translateY(-50%);
width: 3px;
height: 16px;
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
background: var(--dees-color-text-primary);
border-radius: 0 2px 2px 0;
}
@@ -353,23 +352,23 @@ export class DeesAppuiMainmenu extends DeesElement {
}
.badge.default {
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
background: var(--dees-color-badge-default-bg);
color: var(--dees-color-badge-default-fg);
}
.badge.success {
background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
color: ${cssManager.bdTheme('#166534', '#4ade80')};
background: var(--dees-color-badge-success-bg);
color: var(--dees-color-badge-success-fg);
}
.badge.warning {
background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
background: var(--dees-color-badge-warning-bg);
color: var(--dees-color-badge-warning-fg);
}
.badge.error {
background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
color: ${cssManager.bdTheme('#991b1b', '#f87171')};
background: var(--dees-color-badge-error-bg);
color: var(--dees-color-badge-error-fg);
}
:host([collapsed]) .badge {
@@ -380,7 +379,7 @@ export class DeesAppuiMainmenu extends DeesElement {
.bottomSection {
flex-shrink: 0;
padding: 8px;
border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
border-top: 1px solid var(--dees-color-border-subtle);
display: flex;
flex-direction: column;
gap: 2px;