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

35
ts_web/elements/dees-appui-activitylog.ts
View File

@ -22,15 +22,15 @@ export class DeesAppuiActivitylog extends DeesElement {
cssManager.defaultStyles,
css`
:host {
color: #fff;
color: ${cssManager.bdTheme('#333', '#fff')};
position: relative;
display: block;
width: 100%;
max-width: 300px;
height: 100%;
background: #111c28;
background: ${cssManager.bdTheme('#f8f8f8', '#111c28')};
font-family: 'Intel One Mono', sans-serif;
border-left: 1px solid #202020;
border-left: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
cursor: default;
}
.maincontainer {
@ -47,7 +47,8 @@ export class DeesAppuiActivitylog extends DeesElement {
height: 32px;
width: 100%;
padding: 0px 12px 0px 12px;
background: #0e151f;
background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
}
.topbar .heading {
@ -57,6 +58,7 @@ export class DeesAppuiActivitylog extends DeesElement {
font-weight: 500;
font-size: 14px;
font-family: 'Geist Sans', sans-serif;
color: ${cssManager.bdTheme('#666', '#ccc')};
}
.activityContainer {
@ -73,7 +75,7 @@ export class DeesAppuiActivitylog extends DeesElement {
font-size: 12px;
text-align: center;
padding-top: 16px;
color: #888
color: ${cssManager.bdTheme('#666', '#888')}
}
.streamingIndicator.bottom {
@ -85,19 +87,19 @@ export class DeesAppuiActivitylog extends DeesElement {
min-height: 30px;
font-size: 12px;
padding: 8px 16px;
border-bottom: 1px dotted #ffffff20;
border-bottom: 1px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
}
.activityentry:last-of-type {
border-bottom: 1px solid #ffffff00;
border-bottom: 1px solid transparent;
}
.activityentry:hover {
background: #00000080;
background: ${cssManager.bdTheme('#00000005', '#00000080')};
}
.timestamp {
color: #ff8787;
color: ${cssManager.bdTheme('#e57373', '#ff8787')};
}
.searchbox {
@ -105,10 +107,11 @@ export class DeesAppuiActivitylog extends DeesElement {
bottom: 0px;
width: 100%;
height: 40px;
background: #0e151f;
background: ${cssManager.bdTheme('#ffffff', '#0e151f')};
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
}
.searchbox input {
color: #fff;
color: ${cssManager.bdTheme('#333', '#fff')};
background: none;
width: 100%;
height: 40px;
@ -127,7 +130,10 @@ export class DeesAppuiActivitylog extends DeesElement {
width: 100%;
height: 32px;
bottom: 40px;
background: linear-gradient(180deg, #111c2800 0%, #0e151f 100%);
background: ${cssManager.bdTheme(
'linear-gradient(180deg, #f8f8f800 0%, #ffffff 100%)',
'linear-gradient(180deg, #111c2800 0%, #0e151f 100%)'
)};
pointer-events: none;
}
.topShadow {
@ -135,7 +141,10 @@ export class DeesAppuiActivitylog extends DeesElement {
width: 100%;
height: 32px;
top: 32px;
background: linear-gradient(0deg, #111c2800 0%, #0e151f 100%);
background: ${cssManager.bdTheme(
'linear-gradient(0deg, #f8f8f800 0%, #ffffff 100%)',
'linear-gradient(0deg, #111c2800 0%, #0e151f 100%)'
)};
pointer-events: none;
}
`,

9
ts_web/elements/dees-appui-appbar.demo.ts
View File

@ -71,15 +71,6 @@ export const demoFunc = () => {
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
const appbar = elementArg.querySelector('#appbar') as DeesAppuiBar;
// Set up theme toggle
const themeButtons = elementArg.querySelectorAll('.theme-toggle dees-button');
themeButtons[0].addEventListener('click', () => {
appbar.theme = 'dark';
});
themeButtons[1].addEventListener('click', () => {
appbar.theme = 'light';
});
// Set up status toggle
const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button');
statusButtons[0].addEventListener('click', () => {

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 {

66
ts_web/elements/dees-appui-base.demo.ts
View File

@ -87,38 +87,7 @@ export const demoFunc = () => {
];
return html`
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
const appuiBase = elementArg.querySelector('dees-appui-base') as DeesAppuiBase;
// Add event listeners for theme toggle
const themeButtons = elementArg.querySelectorAll('.theme-toggle dees-button');
themeButtons[0].addEventListener('click', () => {
if (appuiBase.appbar) {
appuiBase.appbar.theme = 'dark';
}
});
themeButtons[1].addEventListener('click', () => {
if (appuiBase.appbar) {
appuiBase.appbar.theme = 'light';
}
});
// Update breadcrumbs dynamically
const updateBreadcrumbs = (path: string) => {
if (appuiBase.appbar) {
appuiBase.appbar.breadcrumbs = path;
}
};
// Simulate navigation
setTimeout(() => {
updateBreadcrumbs('Dashboard > Overview');
}, 2000);
setTimeout(() => {
updateBreadcrumbs('Dashboard > Projects > my-app > src > index.ts');
}, 4000);
}}>
<dees-demowrapper>
<style>
${css`
.demo-container {
@ -128,28 +97,6 @@ export const demoFunc = () => {
overflow: hidden;
}
.controls {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
padding: 16px;
border-radius: 8px;
display: flex;
gap: 12px;
}
.control-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.control-group label {
font-size: 12px;
color: #888;
}
`}
</style>
@ -157,7 +104,6 @@ export const demoFunc = () => {
<dees-appui-base
.appbarMenuItems=${menuItems}
.appbarBreadcrumbs=${'Dashboard'}
.appbarTheme=${'dark'}
.appbarUser=${{
name: 'Jane Smith',
status: 'online' as 'online' | 'offline' | 'busy' | 'away'
@ -187,16 +133,6 @@ export const demoFunc = () => {
</ul>
</div>
</dees-appui-base>
<div class="controls">
<div class="control-group">
<label>Theme</label>
<dees-button-group class="theme-toggle">
<dees-button>Dark</dees-button>
<dees-button>Light</dees-button>
</dees-button-group>
</div>
</div>
</div>
</dees-demowrapper>
`;

5
ts_web/elements/dees-appui-base.ts
View File

@ -40,8 +40,6 @@ export class DeesAppuiBase extends DeesElement {
@property({ type: Boolean })
public appbarShowWindowControls: boolean = true;
@property({ type: String })
public appbarTheme: 'light' | 'dark' = 'dark';
@property({ type: Object })
public appbarUser?: {
@ -94,7 +92,7 @@ export class DeesAppuiBase extends DeesElement {
position: absolute;
height: 100%;
width: 100%;
background: var(--dees-color-appui-background, #1a1a1a);
background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
}
.maingrid {
position: absolute;
@ -116,7 +114,6 @@ export class DeesAppuiBase extends DeesElement {
.breadcrumbs=${this.appbarBreadcrumbs}
.breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
.showWindowControls=${this.appbarShowWindowControls}
.theme=${this.appbarTheme}
.user=${this.appbarUser}
.showSearch=${this.appbarShowSearch}
@menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}

4
ts_web/elements/dees-appui-maincontent.ts
View File

@ -46,12 +46,12 @@ export class DeesAppuiMaincontent extends DeesElement {
cssManager.defaultStyles,
css`
:host {
color: #fff;
color: ${cssManager.bdTheme('#333', '#fff')};
display: block;
width: 100%;
height: 100%;
position: relative;
background: #161616;
background: ${cssManager.bdTheme('#ffffff', '#161616')};
}
.maincontainer {
position: absolute;

16
ts_web/elements/dees-appui-mainmenu.ts
View File

@ -45,16 +45,16 @@ export class DeesAppuiMainmenu extends DeesElement {
css`
.mainContainer {
--menuSize: 60px;
color: #ccc;
color: ${cssManager.bdTheme('#666', '#ccc')};
z-index: 10;
display: block;
position: relative;
width: var(--menuSize);
height: 100%;
background: #000000;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
background: ${cssManager.bdTheme('#f5f5f5', '#000000')};
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0, 0, 0, 0.1)', '0px 0px 5px rgba(0, 0, 0, 0.5)')};
user-select: none;
border-right: 1px solid #202020;
border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
}
.tabsContainer {
@ -70,17 +70,17 @@ export class DeesAppuiMainmenu extends DeesElement {
}
.tab:hover {
background: rgba(255, 255, 255, 0.15);
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.15)')};
}
.tab.selectedTab {
color: #fff;
background: rgba(255, 255, 255, 0.1);
color: ${cssManager.bdTheme('#000', '#fff')};
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.tabIndicator {
opacity: 0;
background: #4e729a;
background: ${cssManager.bdTheme('#2196f3', '#4e729a')};
position: absolute;
width: 5px;
height: calc((var(--menuSize) / 3) * 2);

11
ts_web/elements/dees-appui-mainselector.ts
View File

@ -44,14 +44,14 @@ export class DeesAppuiMainselector extends DeesElement {
cssManager.defaultStyles,
css`
:host {
color: #fff;
color: ${cssManager.bdTheme('#333', '#fff')};
position: relative;
display: block;
width: 100%;
max-width: 300px;
height: 100%;
background: #000000;
border-right: 1px solid #222222;
background: ${cssManager.bdTheme('#fafafa', '#000000')};
border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#222222')};
}
.maincontainer {
position: absolute;
@ -74,6 +74,7 @@ export class DeesAppuiMainselector extends DeesElement {
font-family: 'Geist Sans', sans-serif;
font-weight: 600;
font-size: 14px;
color: ${cssManager.bdTheme('#666', '#ccc')};
}
.selectionOptions {
@ -92,7 +93,7 @@ export class DeesAppuiMainselector extends DeesElement {
margin-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
border-top: 1px dotted #303030;
border-top: 1px dotted ${cssManager.bdTheme('#e0e0e0', '#303030')};
border-left: 0px solid rgba(0, 0, 0, 0);
transition: all 0.1s;
}
@ -100,6 +101,7 @@ export class DeesAppuiMainselector extends DeesElement {
.selectionOptions .selectionOption:hover {
border-left: 2px solid #26a69a50;
padding-left: 8px;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
}
.selectionOptions .selectionOption:first-child {
@ -109,6 +111,7 @@ export class DeesAppuiMainselector extends DeesElement {
.selectionOptions .selectionOption.selectedOption {
border-left: 4px solid #26a69a;
padding-left: 10px;
background: ${cssManager.bdTheme('rgba(38, 166, 154, 0.05)', 'rgba(38, 166, 154, 0.1)')};
}
`,
];

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 {