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

2
ts_web/00_commitinfo_data.ts
View File

@@ -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.'
}

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,
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;
}

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,
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;
}