From fe9eb21fe0b534b246c045427238283813c8605f Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Sat, 4 Apr 2026 09:42:44 +0000 Subject: [PATCH] fix(dees-simple-appdash,dees-simple-login): migrate app dashboard and login styles to shared theme CSS variables --- changelog.md | 6 ++ ts_web/00_commitinfo_data.ts | 2 +- .../dees-simple-appdash.ts | 59 +++++++++---------- .../dees-simple-login/dees-simple-login.ts | 13 ++-- 4 files changed, 42 insertions(+), 38 deletions(-) diff --git a/changelog.md b/changelog.md index 29d059d..3e84f10 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,11 @@ # 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) replace hardcoded app UI theme colors with shared dees CSS variables diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 3909133..93b4acb 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { 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.' } diff --git a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts index 57fc1c0..ba8ae4d 100644 --- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts +++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts @@ -76,9 +76,8 @@ export class DeesSimpleAppDash extends DeesElement { themeDefaultStyles, cssManager.defaultStyles, css` - /* TODO: Migrate hardcoded values to --dees-* CSS variables */ :host { - color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')}; + color: var(--dees-color-text-primary); user-select: none; display: block; overflow: hidden; @@ -102,8 +101,8 @@ export class DeesSimpleAppDash extends DeesElement { left: 0px; height: calc(100% - 24px); width: 240px; - background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; - border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')}; + background: var(--dees-color-bg-secondary); + border-right: 1px solid var(--dees-color-border-default); font-size: 13px; font-family: 'Geist Sans', sans-serif; z-index: 2; @@ -114,7 +113,7 @@ export class DeesSimpleAppDash extends DeesElement { .sidebar-header { padding: 20px 16px; - border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')}; + border-bottom: 1px solid var(--dees-color-border-default); display: flex; align-items: center; gap: 12px; @@ -127,7 +126,7 @@ export class DeesSimpleAppDash extends DeesElement { width: 36px; height: 36px; border-radius: 10px; - background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')}; + background: var(--dees-color-bg-tertiary); box-shadow: ${cssManager.bdTheme( '0 1px 2px rgb(0 0 0 / 0.05)', '0 1px 2px rgb(0 0 0 / 0.2)' @@ -136,13 +135,13 @@ export class DeesSimpleAppDash extends DeesElement { .header-icon-wrapper dees-icon { font-size: 18px; - color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + color: var(--dees-color-text-primary); } .appName { font-size: 15px; font-weight: 600; - color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + color: var(--dees-color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -153,7 +152,7 @@ export class DeesSimpleAppDash extends DeesElement { overflow-y: auto; padding: 12px 8px; 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 { @@ -165,12 +164,12 @@ export class DeesSimpleAppDash extends DeesElement { } .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; } .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 { @@ -178,7 +177,7 @@ export class DeesSimpleAppDash extends DeesElement { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: ${cssManager.bdTheme('#737373', '#737373')}; + color: var(--dees-color-text-muted); padding: 8px 12px 8px; margin-bottom: 4px; } @@ -196,25 +195,25 @@ export class DeesSimpleAppDash extends DeesElement { padding: 10px 12px; cursor: default; transition: all 0.15s ease; - color: ${cssManager.bdTheme('#525252', '#a3a3a3')}; + color: var(--dees-color-text-secondary); user-select: none; position: relative; border-radius: 8px; } .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')}; } .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); } .viewTab.selected { - background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')}; - color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + background: var(--dees-color-active); + color: var(--dees-color-text-primary); font-weight: 500; } @@ -226,7 +225,7 @@ export class DeesSimpleAppDash extends DeesElement { bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; - background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + background: var(--dees-color-text-primary); } .viewTab dees-icon { @@ -241,7 +240,7 @@ export class DeesSimpleAppDash extends DeesElement { .viewTab.selected dees-icon { opacity: 1; - color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + color: var(--dees-color-text-primary); } .viewTab span { @@ -253,7 +252,7 @@ export class DeesSimpleAppDash extends DeesElement { .appActions { padding: 12px 8px; - border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')}; + border-top: 1px solid var(--dees-color-border-default); } .action { @@ -264,7 +263,7 @@ export class DeesSimpleAppDash extends DeesElement { border-radius: 8px; cursor: default; transition: all 0.15s ease; - color: ${cssManager.bdTheme('#525252', '#a3a3a3')}; + color: var(--dees-color-text-secondary); } .action:hover { @@ -292,7 +291,7 @@ export class DeesSimpleAppDash extends DeesElement { bottom: 24px; width: calc(100% - 240px); overflow: auto; - background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; + background: var(--dees-color-bg-secondary); overscroll-behavior: contain; } @@ -332,14 +331,14 @@ export class DeesSimpleAppDash extends DeesElement { } .controlbar { - color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; + color: var(--dees-color-text-muted); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 24px; - background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')}; - border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')}; + background: var(--dees-color-bg-tertiary); + border-top: 1px solid var(--dees-color-border-default); z-index: 11; display: flex; justify-content: flex-end; @@ -358,9 +357,9 @@ export class DeesSimpleAppDash extends DeesElement { height: 100%; white-space: nowrap; cursor: default; - color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')}; + color: var(--dees-color-text-muted); 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 { - background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')}; - color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')}; + background: var(--dees-color-hover); + color: var(--dees-color-text-primary); } .control dees-icon { @@ -405,7 +404,7 @@ export class DeesSimpleAppDash extends DeesElement { font-size: 13px; font-family: 'Geist Sans', sans-serif; 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; } diff --git a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts index d4201bf..6400f6e 100644 --- a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts +++ b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts @@ -31,9 +31,8 @@ export class DeesSimpleLogin extends DeesElement { themeDefaultStyles, cssManager.defaultStyles, css` - /* TODO: Migrate hardcoded values to --dees-* CSS variables */ :host { - color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; + color: var(--dees-color-text-primary); user-select: none; display: block; width: 100%; @@ -50,7 +49,7 @@ export class DeesSimpleLogin extends DeesElement { height: 100%; top: 0; left: 0; - background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')}; + background: var(--dees-color-bg-primary); } .slotContainer { @@ -83,17 +82,17 @@ export class DeesSimpleLogin extends DeesElement { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; - color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; + color: var(--dees-color-text-primary); } .subheader { font-size: 14px; - color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; + color: var(--dees-color-text-muted); } .login-card { - background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; - border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; + background: var(--dees-color-bg-primary); + border: 1px solid var(--dees-color-border-default); border-radius: 8px; padding: 24px; }