design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Refactor theming in app components to use dynamic CSS variables

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-17 08:58:47 +00:00
parent 5b4319432c
commit cd3c7c8e63
9 changed files with 68 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ts_web/elements/dees-appui-tabs.ts
View File

@@ -50,7 +50,7 @@ export class DeesAppuiTabs extends DeesElement {
.tabs-wrapper {
position: relative;
background: #000000;
background: ${cssManager.bdTheme('#f5f5f5', '#000000')};
height: 56px;
}
@@ -76,7 +76,7 @@ export class DeesAppuiTabs extends DeesElement {
}
.tab {
color: #a0a0a0;
color: ${cssManager.bdTheme('#666', '#a0a0a0')};
white-space: nowrap;
cursor: pointer;
transition: color 0.1s;
@@ -99,20 +99,20 @@ export class DeesAppuiTabs extends DeesElement {
}
.tab:hover {
color: #ffffff;
color: ${cssManager.bdTheme('#000', '#ffffff')};
}
.vertical .tab:hover {
background: rgba(255, 255, 255, 0.05);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
}
.tab.selectedTab {
color: #e0e0e0;
color: ${cssManager.bdTheme('#333', '#e0e0e0')};
}
.vertical .tab.selectedTab {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
color: ${cssManager.bdTheme('#000', '#ffffff')};
}
.tab dees-icon {
@@ -126,11 +126,11 @@ export class DeesAppuiTabs extends DeesElement {
bottom: 0px;
height: 40px;
width: 40px;
background: #161616;
background: ${cssManager.bdTheme('#ffffff', '#161616')};
transition: all 0.1s;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top: 1px solid #444444;
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444444')};
}
.vertical .tabIndicator {