design.estate/dees-catalog
2
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:
Juergen 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

54
ts_web/elements/dees-appui-appbar.ts
View File

@ -40,8 +40,6 @@ export class DeesAppuiBar extends DeesElement {
@property({ type: Boolean })
public showWindowControls: boolean = true;
@property({ type: String })
public theme: 'light' | 'dark' = 'dark';
@property({ type: Object })
public user?: {
@ -72,21 +70,15 @@ export class DeesAppuiBar extends DeesElement {
:host {
/* CSS Variables for theming */
--appbar-height: 40px;
--appbar-bg: var(--dees-color-appbar-bg, #000000);
--appbar-text: var(--dees-color-appbar-text, #ffffff80);
--appbar-text-hover: var(--dees-color-appbar-text-hover, #ffffff);
--appbar-border: var(--dees-color-appbar-border, #202020);
--appbar-hover: var(--dees-color-appbar-hover, #ffffff20);
--appbar-active: var(--dees-color-appbar-active, #ffffff30);
--appbar-font-size: 12px;
display: block;
position: relative;
width: 100%;
height: var(--appbar-height);
border-bottom: 1px solid var(--appbar-border);
background: var(--appbar-bg);
color: var(--appbar-text);
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
background: ${cssManager.bdTheme('#ffffff', '#000000')};
color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
font-size: var(--appbar-font-size);
display: grid;
grid-template-columns: ${cssManager.cssGridColumns(3, 20)};
@ -94,16 +86,6 @@ export class DeesAppuiBar extends DeesElement {
user-select: none;
}
/* Light theme */
:host([theme="light"]) {
--appbar-bg: #ffffff;
--appbar-text: #00000080;
--appbar-text-hover: #000000;
--appbar-border: #e0e0e0;
--appbar-hover: #00000010;
--appbar-active: #00000020;
}
.menus {
display: flex;
align-items: center;
@ -134,13 +116,13 @@ export class DeesAppuiBar extends DeesElement {
}
.menuItem:hover {
background: var(--appbar-hover);
color: var(--appbar-text-hover);
background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
color: ${cssManager.bdTheme('#000000', '#ffffff')};
}
.menuItem.active {
background: var(--appbar-active);
color: var(--appbar-text-hover);
background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
color: ${cssManager.bdTheme('#000000', '#ffffff')};
}
.menuItem[disabled] {
@ -150,7 +132,7 @@ export class DeesAppuiBar extends DeesElement {
}
.menuItem:focus-visible {
box-shadow: 0 0 0 2px var(--appbar-text);
box-shadow: 0 0 0 2px ${cssManager.bdTheme('#00000080', '#ffffff80')};
}
@ -160,10 +142,10 @@ export class DeesAppuiBar extends DeesElement {
top: 100%;
left: 0;
min-width: 200px;
background: var(--appbar-bg);
border: 1px solid var(--appbar-border);
background: ${cssManager.bdTheme('#ffffff', '#000000')};
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
border-radius: 4px;
box-shadow: 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;
z-index: 1000;
opacity: 0;
@ -189,12 +171,12 @@ export class DeesAppuiBar extends DeesElement {
.dropdown-item:hover,
.dropdown-item.focused {
background: var(--appbar-hover);
background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
}
.dropdown-divider {
height: 1px;
background: var(--appbar-border);
background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
margin: 4px 0;
}
@ -223,13 +205,13 @@ export class DeesAppuiBar extends DeesElement {
}
.breadcrumb-item {
color: var(--appbar-text);
color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
cursor: pointer;
transition: color 0.2s;
}
.breadcrumb-item:hover {
color: var(--appbar-text-hover);
color: ${cssManager.bdTheme('#000000', '#ffffff')};
}
.breadcrumb-separator {
@ -267,7 +249,7 @@ export class DeesAppuiBar extends DeesElement {
}
.user-info:hover {
background: var(--appbar-hover);
background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
}
.user-avatar {
@ -275,7 +257,7 @@ export class DeesAppuiBar extends DeesElement {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--appbar-active);
background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
display: flex;
align-items: center;
justify-content: center;
@ -297,7 +279,7 @@ export class DeesAppuiBar extends DeesElement {
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid var(--appbar-bg);
border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
}
.user-status.online {