From 130ca6847108b25147482e0e61ad588c6db82e70 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Sat, 4 Apr 2026 09:37:06 +0000 Subject: [PATCH] fix(appui): replace hardcoded app UI theme colors with shared dees CSS variables --- changelog.md | 6 ++ ts_web/00_commitinfo_data.ts | 2 +- .../00group-appui/dees-appui-appbar/styles.ts | 12 ++-- .../dees-appui-bottombar.ts | 20 +++--- .../dees-appui-maincontent.ts | 5 +- .../dees-appui-mainmenu.ts | 63 +++++++++---------- .../dees-appui-secondarymenu.ts | 57 +++++++++-------- .../dees-appui-tabs/dees-appui-tabs.ts | 41 ++++++------ .../00group-appui/dees-appui/dees-appui.ts | 3 +- 9 files changed, 105 insertions(+), 104 deletions(-) diff --git a/changelog.md b/changelog.md index 7fec8c4..29d059d 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,11 @@ # Changelog +## 2026-04-04 - 3.55.1 - fix(appui) +replace hardcoded app UI theme colors with shared dees CSS variables + +- Standardizes app UI component styling on shared --dees-* theme tokens across app bar, menus, tabs, main content, and bottom bar +- Removes remaining hardcoded light/dark color values in favor of centralized background, border, text, badge, tooltip, scrollbar, and accent variables + ## 2026-04-04 - 3.55.0 - feat(theme) centralize theme CSS tokens in theme defaults and add missing interactive color variables diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 7543524..3909133 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.55.0', + version: '3.55.1', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-appui/dees-appui-appbar/styles.ts b/ts_web/elements/00group-appui/dees-appui-appbar/styles.ts index c157b74..6fffe1c 100644 --- a/ts_web/elements/00group-appui/dees-appui-appbar/styles.ts +++ b/ts_web/elements/00group-appui/dees-appui-appbar/styles.ts @@ -12,8 +12,8 @@ export const appuiAppbarStyles = [ position: relative; width: 100%; height: var(--appbar-height); - border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')}; - background: ${cssManager.bdTheme('#ffffff', '#000000')}; + border-bottom: 1px solid var(--dees-color-border-default); + background: var(--dees-color-bg-primary); color: ${cssManager.bdTheme('#00000080', '#ffffff80')}; font-size: var(--appbar-font-size); display: grid; @@ -78,8 +78,8 @@ export const appuiAppbarStyles = [ top: 100%; left: 0; min-width: 200px; - background: ${cssManager.bdTheme('#ffffff', '#000000')}; - border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')}; + background: var(--dees-color-bg-primary); + border: 1px solid var(--dees-color-border-default); border-radius: 4px; box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')}; margin-top: 4px; @@ -112,7 +112,7 @@ export const appuiAppbarStyles = [ .dropdown-divider { height: 1px; - background: ${cssManager.bdTheme('#e0e0e0', '#202020')}; + background: var(--dees-color-border-default); margin: 4px 0; } @@ -215,7 +215,7 @@ export const appuiAppbarStyles = [ width: 8px; height: 8px; border-radius: 50%; - border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')}; + border: 2px solid var(--dees-color-bg-primary); } .user-status.online { diff --git a/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts b/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts index 6ab1f70..f5cb20f 100644 --- a/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts +++ b/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts @@ -52,10 +52,10 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI { align-items: center; padding: 0 8px; gap: 4px; - background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')}; - border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')}; + background: var(--dees-color-bg-tertiary); + border-top: 1px solid var(--dees-color-border-default); font-size: 11px; - color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; + color: var(--dees-color-text-muted); } .widget { @@ -70,8 +70,8 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI { } .widget:hover { - background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')}; - color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')}; + background: var(--dees-color-hover); + color: var(--dees-color-text-secondary); } .widget dees-icon { @@ -81,7 +81,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI { .widget-separator { width: 1px; height: 14px; - background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')}; + background: var(--dees-color-border-strong); margin: 0 4px; } @@ -124,12 +124,12 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI { border-radius: 3px; cursor: pointer; transition: background 0.15s ease; - color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; + color: var(--dees-color-text-muted); } .action-button:hover { - background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')}; - color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')}; + background: var(--dees-color-hover); + color: var(--dees-color-text-secondary); } .action-button.disabled { @@ -139,7 +139,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI { .action-button.disabled:hover { background: transparent; - color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; + color: var(--dees-color-text-muted); } `, ]; diff --git a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts index ccc4584..0be1534 100644 --- a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts +++ b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts @@ -63,14 +63,13 @@ export class DeesAppuiMaincontent extends DeesElement { themeDefaultStyles, cssManager.defaultStyles, css` - /* TODO: Migrate hardcoded values to --dees-* CSS variables */ :host { - color: ${cssManager.bdTheme('#333', '#fff')}; + color: var(--dees-color-text-secondary); display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; - background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; + background: var(--dees-color-bg-secondary); } .maincontainer { diff --git a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts index aa72f23..601df1b 100644 --- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts +++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts @@ -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; diff --git a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts index a5b4394..7e1ef5b 100644 --- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts +++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts @@ -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 { diff --git a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts index 64c8106..25e690e 100644 --- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts +++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts @@ -60,7 +60,6 @@ export class DeesAppuiTabs extends DeesElement { themeDefaultStyles, cssManager.defaultStyles, css` - /* TODO: Migrate hardcoded values to --dees-* CSS variables */ :host { display: block; position: relative; @@ -76,7 +75,7 @@ export class DeesAppuiTabs extends DeesElement { .tabs-wrapper.horizontal-wrapper { height: 48px; - border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; + border-bottom: 1px solid var(--dees-color-border-default); box-sizing: border-box; overflow: hidden; display: flex; @@ -133,13 +132,13 @@ export class DeesAppuiTabs extends DeesElement { .tab-actions.left { padding-left: 12px; padding-right: 8px; - border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; + border-right: 1px solid var(--dees-color-border-default); } .tab-actions.right { padding-right: 12px; padding-left: 8px; - border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; + border-left: 1px solid var(--dees-color-border-default); } .tab-action-button { @@ -152,17 +151,17 @@ export class DeesAppuiTabs extends DeesElement { cursor: pointer; transition: background 0.15s ease, color 0.15s ease; background: transparent; - color: ${cssManager.bdTheme('#71717a', '#71717a')}; + color: var(--dees-color-text-muted); flex-shrink: 0; } .tab-action-button:hover { - background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')}; - color: ${cssManager.bdTheme('#09090b', '#fafafa')}; + background: var(--dees-color-active); + color: var(--dees-color-text-primary); } .tab-action-button:active { - background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')}; + background: var(--dees-color-pressed); } .tab-action-button.disabled { @@ -172,7 +171,7 @@ export class DeesAppuiTabs extends DeesElement { .tab-action-button.disabled:hover { background: transparent; - color: ${cssManager.bdTheme('#71717a', '#71717a')}; + color: var(--dees-color-text-muted); } .tab-action-button dees-icon { @@ -237,12 +236,12 @@ export class DeesAppuiTabs extends DeesElement { font-size: 14px; gap: 2px; position: relative; - background: ${cssManager.bdTheme('#f9fafb', '#18181b')}; + background: var(--dees-color-bg-tertiary); border-radius: 8px; } .tab { - color: ${cssManager.bdTheme('#71717a', '#71717a')}; + color: var(--dees-color-text-muted); white-space: nowrap; cursor: pointer; transition: color 0.15s ease; @@ -270,7 +269,7 @@ export class DeesAppuiTabs extends DeesElement { transform: translateY(-50%); height: 20px; width: 1px; - background: ${cssManager.bdTheme('#e5e7eb', '#27272a')}; + background: var(--dees-color-border-default); opacity: 0.5; } @@ -291,11 +290,11 @@ export class DeesAppuiTabs extends DeesElement { } .tab:hover { - color: ${cssManager.bdTheme('#09090b', '#fafafa')}; + color: var(--dees-color-text-primary); } .horizontal .tab:hover { - background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)')}; + background: var(--dees-color-hover); } .horizontal .tab:hover::after, @@ -308,7 +307,7 @@ export class DeesAppuiTabs extends DeesElement { } .horizontal .tab.selectedTab { - color: ${cssManager.bdTheme('#09090b', '#fafafa')}; + color: var(--dees-color-text-primary); } .horizontal .tab.selectedTab::after, @@ -317,7 +316,7 @@ export class DeesAppuiTabs extends DeesElement { } .vertical .tab.selectedTab { - color: ${cssManager.bdTheme('#09090b', '#fafafa')}; + color: var(--dees-color-text-primary); } .tab dees-icon { @@ -337,7 +336,7 @@ export class DeesAppuiTabs extends DeesElement { .tabs-wrapper .tabIndicator { height: 3px; bottom: 0; - background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; + background: var(--dees-color-accent-primary); border-radius: 3px 3px 0 0; z-index: 3; } @@ -350,7 +349,7 @@ export class DeesAppuiTabs extends DeesElement { left: 8px; right: 8px; border-radius: 6px; - background: ${cssManager.bdTheme('#ffffff', '#27272a')}; + background: var(--dees-color-bg-primary); z-index: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } @@ -366,7 +365,7 @@ export class DeesAppuiTabs extends DeesElement { margin-left: 8px; opacity: 0.4; transition: opacity 0.15s, background 0.15s; - color: ${cssManager.bdTheme('#71717a', '#71717a')}; + color: var(--dees-color-text-muted); } .tab:hover .tab-close { @@ -375,8 +374,8 @@ export class DeesAppuiTabs extends DeesElement { .tab-close:hover { opacity: 1; - background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')}; - color: ${cssManager.bdTheme('#ef4444', '#f87171')}; + background: var(--dees-color-pressed); + color: var(--dees-color-accent-error); } .tab.selectedTab .tab-close { diff --git a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts index 87c6a15..1dbb99f 100644 --- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts +++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts @@ -184,12 +184,11 @@ export class DeesAppui extends DeesElement { themeDefaultStyles, cssManager.defaultStyles, css` - /* TODO: Migrate hardcoded values to --dees-* CSS variables */ :host { position: absolute; height: 100%; width: 100%; - background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')}; + background: var(--dees-color-bg-tertiary); } .maingrid { position: absolute;