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

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 {