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

6
changelog.md
View File

@@ -1,5 +1,11 @@
# Changelog # 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) ## 2026-04-04 - 3.55.0 - feat(theme)
centralize theme CSS tokens in theme defaults and add missing interactive color variables centralize theme CSS tokens in theme defaults and add missing interactive color variables

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', 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.' description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
} }

12
ts_web/elements/00group-appui/dees-appui-appbar/styles.ts
View File

@@ -12,8 +12,8 @@ export const appuiAppbarStyles = [
position: relative; position: relative;
width: 100%; width: 100%;
height: var(--appbar-height); height: var(--appbar-height);
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')}; border-bottom: 1px solid var(--dees-color-border-default);
background: ${cssManager.bdTheme('#ffffff', '#000000')}; background: var(--dees-color-bg-primary);
color: ${cssManager.bdTheme('#00000080', '#ffffff80')}; color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
font-size: var(--appbar-font-size); font-size: var(--appbar-font-size);
display: grid; display: grid;
@@ -78,8 +78,8 @@ export const appuiAppbarStyles = [
top: 100%; top: 100%;
left: 0; left: 0;
min-width: 200px; min-width: 200px;
background: ${cssManager.bdTheme('#ffffff', '#000000')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')}; border: 1px solid var(--dees-color-border-default);
border-radius: 4px; 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)')}; 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; margin-top: 4px;
@@ -112,7 +112,7 @@ export const appuiAppbarStyles = [
.dropdown-divider { .dropdown-divider {
height: 1px; height: 1px;
background: ${cssManager.bdTheme('#e0e0e0', '#202020')}; background: var(--dees-color-border-default);
margin: 4px 0; margin: 4px 0;
} }
@@ -215,7 +215,7 @@ export const appuiAppbarStyles = [
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')}; border: 2px solid var(--dees-color-bg-primary);
} }
.user-status.online { .user-status.online {

20
ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts
View File

@@ -52,10 +52,10 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
align-items: center; align-items: center;
padding: 0 8px; padding: 0 8px;
gap: 4px; gap: 4px;
background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')}; background: var(--dees-color-bg-tertiary);
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')}; border-top: 1px solid var(--dees-color-border-default);
font-size: 11px; font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; color: var(--dees-color-text-muted);
} }
.widget { .widget {
@@ -70,8 +70,8 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
} }
.widget:hover { .widget:hover {
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')}; color: var(--dees-color-text-secondary);
} }
.widget dees-icon { .widget dees-icon {
@@ -81,7 +81,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
.widget-separator { .widget-separator {
width: 1px; width: 1px;
height: 14px; height: 14px;
background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')}; background: var(--dees-color-border-strong);
margin: 0 4px; margin: 0 4px;
} }
@@ -124,12 +124,12 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
transition: background 0.15s ease; 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 { .action-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')}; color: var(--dees-color-text-secondary);
} }
.action-button.disabled { .action-button.disabled {
@@ -139,7 +139,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
.action-button.disabled:hover { .action-button.disabled:hover {
background: transparent; background: transparent;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; color: var(--dees-color-text-muted);
} }
`, `,
]; ];

5
ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
View File

@@ -63,14 +63,13 @@ export class DeesAppuiMaincontent extends DeesElement {
themeDefaultStyles, themeDefaultStyles,
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host { :host {
color: ${cssManager.bdTheme('#333', '#fff')}; color: var(--dees-color-text-secondary);
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; background: var(--dees-color-bg-secondary);
} }
.maincontainer { .maincontainer {

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

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

41
ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
View File

@@ -60,7 +60,6 @@ export class DeesAppuiTabs extends DeesElement {
themeDefaultStyles, themeDefaultStyles,
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host { :host {
display: block; display: block;
position: relative; position: relative;
@@ -76,7 +75,7 @@ export class DeesAppuiTabs extends DeesElement {
.tabs-wrapper.horizontal-wrapper { .tabs-wrapper.horizontal-wrapper {
height: 48px; height: 48px;
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; border-bottom: 1px solid var(--dees-color-border-default);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@@ -133,13 +132,13 @@ export class DeesAppuiTabs extends DeesElement {
.tab-actions.left { .tab-actions.left {
padding-left: 12px; padding-left: 12px;
padding-right: 8px; padding-right: 8px;
border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; border-right: 1px solid var(--dees-color-border-default);
} }
.tab-actions.right { .tab-actions.right {
padding-right: 12px; padding-right: 12px;
padding-left: 8px; padding-left: 8px;
border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; border-left: 1px solid var(--dees-color-border-default);
} }
.tab-action-button { .tab-action-button {
@@ -152,17 +151,17 @@ export class DeesAppuiTabs extends DeesElement {
cursor: pointer; cursor: pointer;
transition: background 0.15s ease, color 0.15s ease; transition: background 0.15s ease, color 0.15s ease;
background: transparent; background: transparent;
color: ${cssManager.bdTheme('#71717a', '#71717a')}; color: var(--dees-color-text-muted);
flex-shrink: 0; flex-shrink: 0;
} }
.tab-action-button:hover { .tab-action-button:hover {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')}; background: var(--dees-color-active);
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: var(--dees-color-text-primary);
} }
.tab-action-button:active { .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 { .tab-action-button.disabled {
@@ -172,7 +171,7 @@ export class DeesAppuiTabs extends DeesElement {
.tab-action-button.disabled:hover { .tab-action-button.disabled:hover {
background: transparent; background: transparent;
color: ${cssManager.bdTheme('#71717a', '#71717a')}; color: var(--dees-color-text-muted);
} }
.tab-action-button dees-icon { .tab-action-button dees-icon {
@@ -237,12 +236,12 @@ export class DeesAppuiTabs extends DeesElement {
font-size: 14px; font-size: 14px;
gap: 2px; gap: 2px;
position: relative; position: relative;
background: ${cssManager.bdTheme('#f9fafb', '#18181b')}; background: var(--dees-color-bg-tertiary);
border-radius: 8px; border-radius: 8px;
} }
.tab { .tab {
color: ${cssManager.bdTheme('#71717a', '#71717a')}; color: var(--dees-color-text-muted);
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
transition: color 0.15s ease; transition: color 0.15s ease;
@@ -270,7 +269,7 @@ export class DeesAppuiTabs extends DeesElement {
transform: translateY(-50%); transform: translateY(-50%);
height: 20px; height: 20px;
width: 1px; width: 1px;
background: ${cssManager.bdTheme('#e5e7eb', '#27272a')}; background: var(--dees-color-border-default);
opacity: 0.5; opacity: 0.5;
} }
@@ -291,11 +290,11 @@ export class DeesAppuiTabs extends DeesElement {
} }
.tab:hover { .tab:hover {
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: var(--dees-color-text-primary);
} }
.horizontal .tab:hover { .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, .horizontal .tab:hover::after,
@@ -308,7 +307,7 @@ export class DeesAppuiTabs extends DeesElement {
} }
.horizontal .tab.selectedTab { .horizontal .tab.selectedTab {
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: var(--dees-color-text-primary);
} }
.horizontal .tab.selectedTab::after, .horizontal .tab.selectedTab::after,
@@ -317,7 +316,7 @@ export class DeesAppuiTabs extends DeesElement {
} }
.vertical .tab.selectedTab { .vertical .tab.selectedTab {
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: var(--dees-color-text-primary);
} }
.tab dees-icon { .tab dees-icon {
@@ -337,7 +336,7 @@ export class DeesAppuiTabs extends DeesElement {
.tabs-wrapper .tabIndicator { .tabs-wrapper .tabIndicator {
height: 3px; height: 3px;
bottom: 0; bottom: 0;
background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; background: var(--dees-color-accent-primary);
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
z-index: 3; z-index: 3;
} }
@@ -350,7 +349,7 @@ export class DeesAppuiTabs extends DeesElement {
left: 8px; left: 8px;
right: 8px; right: 8px;
border-radius: 6px; border-radius: 6px;
background: ${cssManager.bdTheme('#ffffff', '#27272a')}; background: var(--dees-color-bg-primary);
z-index: 1; z-index: 1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
} }
@@ -366,7 +365,7 @@ export class DeesAppuiTabs extends DeesElement {
margin-left: 8px; margin-left: 8px;
opacity: 0.4; opacity: 0.4;
transition: opacity 0.15s, background 0.15s; transition: opacity 0.15s, background 0.15s;
color: ${cssManager.bdTheme('#71717a', '#71717a')}; color: var(--dees-color-text-muted);
} }
.tab:hover .tab-close { .tab:hover .tab-close {
@@ -375,8 +374,8 @@ export class DeesAppuiTabs extends DeesElement {
.tab-close:hover { .tab-close:hover {
opacity: 1; opacity: 1;
background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')}; background: var(--dees-color-pressed);
color: ${cssManager.bdTheme('#ef4444', '#f87171')}; color: var(--dees-color-accent-error);
} }
.tab.selectedTab .tab-close { .tab.selectedTab .tab-close {

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

@@ -184,12 +184,11 @@ export class DeesAppui extends DeesElement {
themeDefaultStyles, themeDefaultStyles,
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host { :host {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')}; background: var(--dees-color-bg-tertiary);
} }
.maingrid { .maingrid {
position: absolute; position: absolute;