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

fix(dees-simple-appdash,dees-simple-login): migrate app dashboard and login styles to shared theme CSS variables

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 09:42:44 +00:00
parent f352314971
commit fe9eb21fe0
4 changed files with 42 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
changelog.md
View File

@@ -1,5 +1,11 @@
# Changelog # Changelog
## 2026-04-04 - 3.55.2 - fix(dees-simple-appdash,dees-simple-login)
migrate app dashboard and login styles to shared theme CSS variables
- Replaces hardcoded bdTheme color values with --dees-* design tokens across dashboard and login components
- Aligns backgrounds, borders, text, hover, active, and scrollbar colors with the shared theming system
## 2026-04-04 - 3.55.1 - fix(appui) ## 2026-04-04 - 3.55.1 - fix(appui)
replace hardcoded app UI theme colors with shared dees CSS variables replace hardcoded app UI theme colors with shared dees CSS variables

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '3.55.1', version: '3.55.2',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
} }

59
ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
View File

@@ -76,9 +76,8 @@ export class DeesSimpleAppDash extends DeesElement {
themeDefaultStyles, themeDefaultStyles,
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host { :host {
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')}; color: var(--dees-color-text-primary);
user-select: none; user-select: none;
display: block; display: block;
overflow: hidden; overflow: hidden;
@@ -102,8 +101,8 @@ export class DeesSimpleAppDash extends DeesElement {
left: 0px; left: 0px;
height: calc(100% - 24px); height: calc(100% - 24px);
width: 240px; width: 240px;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; background: var(--dees-color-bg-secondary);
border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')}; border-right: 1px solid var(--dees-color-border-default);
font-size: 13px; font-size: 13px;
font-family: 'Geist Sans', sans-serif; font-family: 'Geist Sans', sans-serif;
z-index: 2; z-index: 2;
@@ -114,7 +113,7 @@ export class DeesSimpleAppDash extends DeesElement {
.sidebar-header { .sidebar-header {
padding: 20px 16px; padding: 20px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')}; border-bottom: 1px solid var(--dees-color-border-default);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@@ -127,7 +126,7 @@ export class DeesSimpleAppDash extends DeesElement {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 10px; border-radius: 10px;
background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')}; background: var(--dees-color-bg-tertiary);
box-shadow: ${cssManager.bdTheme( box-shadow: ${cssManager.bdTheme(
'0 1px 2px rgb(0 0 0 / 0.05)', '0 1px 2px rgb(0 0 0 / 0.05)',
'0 1px 2px rgb(0 0 0 / 0.2)' '0 1px 2px rgb(0 0 0 / 0.2)'
@@ -136,13 +135,13 @@ export class DeesSimpleAppDash extends DeesElement {
.header-icon-wrapper dees-icon { .header-icon-wrapper dees-icon {
font-size: 18px; font-size: 18px;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: var(--dees-color-text-primary);
} }
.appName { .appName {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: var(--dees-color-text-primary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -153,7 +152,7 @@ export class DeesSimpleAppDash extends DeesElement {
overflow-y: auto; overflow-y: auto;
padding: 12px 8px; padding: 12px 8px;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent; scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
} }
.viewTabs-container::-webkit-scrollbar { .viewTabs-container::-webkit-scrollbar {
@@ -165,12 +164,12 @@ export class DeesSimpleAppDash extends DeesElement {
} }
.viewTabs-container::-webkit-scrollbar-thumb { .viewTabs-container::-webkit-scrollbar-thumb {
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')}; background: var(--dees-color-scrollbar-thumb);
border-radius: 3px; border-radius: 3px;
} }
.viewTabs-container::-webkit-scrollbar-thumb:hover { .viewTabs-container::-webkit-scrollbar-thumb:hover {
background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 30%)')}; background: var(--dees-color-scrollbar-thumb-hover);
} }
.section-label { .section-label {
@@ -178,7 +177,7 @@ export class DeesSimpleAppDash extends DeesElement {
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: ${cssManager.bdTheme('#737373', '#737373')}; color: var(--dees-color-text-muted);
padding: 8px 12px 8px; padding: 8px 12px 8px;
margin-bottom: 4px; margin-bottom: 4px;
} }
@@ -196,25 +195,25 @@ export class DeesSimpleAppDash extends DeesElement {
padding: 10px 12px; padding: 10px 12px;
cursor: default; cursor: default;
transition: all 0.15s ease; transition: all 0.15s ease;
color: ${cssManager.bdTheme('#525252', '#a3a3a3')}; color: var(--dees-color-text-secondary);
user-select: none; user-select: none;
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
} }
.viewTab:hover { .viewTab: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')}; color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
} }
.viewTab:active { .viewTab:active {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')}; background: var(--dees-color-active);
transform: scale(0.99); transform: scale(0.99);
} }
.viewTab.selected { .viewTab.selected {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')}; background: var(--dees-color-active);
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: var(--dees-color-text-primary);
font-weight: 500; font-weight: 500;
} }
@@ -226,7 +225,7 @@ export class DeesSimpleAppDash extends DeesElement {
bottom: 8px; bottom: 8px;
width: 3px; width: 3px;
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; background: var(--dees-color-text-primary);
} }
.viewTab dees-icon { .viewTab dees-icon {
@@ -241,7 +240,7 @@ export class DeesSimpleAppDash extends DeesElement {
.viewTab.selected dees-icon { .viewTab.selected dees-icon {
opacity: 1; opacity: 1;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: var(--dees-color-text-primary);
} }
.viewTab span { .viewTab span {
@@ -253,7 +252,7 @@ export class DeesSimpleAppDash extends DeesElement {
.appActions { .appActions {
padding: 12px 8px; padding: 12px 8px;
border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')}; border-top: 1px solid var(--dees-color-border-default);
} }
.action { .action {
@@ -264,7 +263,7 @@ export class DeesSimpleAppDash extends DeesElement {
border-radius: 8px; border-radius: 8px;
cursor: default; cursor: default;
transition: all 0.15s ease; transition: all 0.15s ease;
color: ${cssManager.bdTheme('#525252', '#a3a3a3')}; color: var(--dees-color-text-secondary);
} }
.action:hover { .action:hover {
@@ -292,7 +291,7 @@ export class DeesSimpleAppDash extends DeesElement {
bottom: 24px; bottom: 24px;
width: calc(100% - 240px); width: calc(100% - 240px);
overflow: auto; overflow: auto;
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; background: var(--dees-color-bg-secondary);
overscroll-behavior: contain; overscroll-behavior: contain;
} }
@@ -332,14 +331,14 @@ export class DeesSimpleAppDash extends DeesElement {
} }
.controlbar { .controlbar {
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; color: var(--dees-color-text-muted);
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 24px; height: 24px;
background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')}; background: var(--dees-color-bg-tertiary);
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')}; border-top: 1px solid var(--dees-color-border-default);
z-index: 11; z-index: 11;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@@ -358,9 +357,9 @@ export class DeesSimpleAppDash extends DeesElement {
height: 100%; height: 100%;
white-space: nowrap; white-space: nowrap;
cursor: default; cursor: default;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; color: var(--dees-color-text-muted);
transition: all 0.15s ease; transition: all 0.15s ease;
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')}; border-left: 1px solid var(--dees-color-border-strong);
} }
@@ -369,8 +368,8 @@ export class DeesSimpleAppDash extends DeesElement {
} }
.control:hover { .control:hover {
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')}; color: var(--dees-color-text-primary);
} }
.control dees-icon { .control dees-icon {
@@ -405,7 +404,7 @@ export class DeesSimpleAppDash extends DeesElement {
font-size: 13px; font-size: 13px;
font-family: 'Geist Sans', sans-serif; font-family: 'Geist Sans', sans-serif;
font-weight: 500; font-weight: 500;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')}; border-bottom: 1px solid var(--dees-color-border-default);
animation: bannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: bannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
} }

13
ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
View File

@@ -31,9 +31,8 @@ export class DeesSimpleLogin extends DeesElement {
themeDefaultStyles, themeDefaultStyles,
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
/* TODO: Migrate hardcoded values to --dees-* CSS variables */
:host { :host {
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
user-select: none; user-select: none;
display: block; display: block;
width: 100%; width: 100%;
@@ -50,7 +49,7 @@ export class DeesSimpleLogin extends DeesElement {
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')}; background: var(--dees-color-bg-primary);
} }
.slotContainer { .slotContainer {
@@ -83,17 +82,17 @@ export class DeesSimpleLogin extends DeesElement {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
letter-spacing: -0.025em; letter-spacing: -0.025em;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; color: var(--dees-color-text-primary);
} }
.subheader { .subheader {
font-size: 14px; font-size: 14px;
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; color: var(--dees-color-text-muted);
} }
.login-card { .login-card {
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: var(--dees-color-bg-primary);
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border: 1px solid var(--dees-color-border-default);
border-radius: 8px; border-radius: 8px;
padding: 24px; padding: 24px;
} }