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
## 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

2
ts_web/00_commitinfo_data.ts
View File

@@ -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.'
}

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

@@ -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 {

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;
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);
}
`,
];

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,
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 {

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;

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 {

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,
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 {

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

@@ -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;