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

feat(dees-simple-appdash): update color themes for improved UI consistency

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-04 08:38:54 +00:00
parent bee1cafdb4
commit fdccdcdf73
1 changed files with 30 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,8 +102,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('hsl(0 0% 99%)', 'hsl(0 0% 7%)')}; background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')}; border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
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 +114,7 @@ export class DeesSimpleAppDash extends DeesElement {
.sidebar-header { .sidebar-header {
padding: 20px 16px; padding: 20px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')}; border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@@ -127,25 +127,22 @@ export class DeesSimpleAppDash extends DeesElement {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 10px; border-radius: 10px;
background: ${cssManager.bdTheme( background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
)};
box-shadow: ${cssManager.bdTheme( box-shadow: ${cssManager.bdTheme(
'0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)', '0 1px 2px rgb(0 0 0 / 0.05)',
'0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)' '0 1px 2px rgb(0 0 0 / 0.2)'
)}; )};
} }
.header-icon-wrapper dees-icon { .header-icon-wrapper dees-icon {
font-size: 18px; font-size: 18px;
color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
} }
.appName { .appName {
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -181,7 +178,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('hsl(0 0% 50%)', 'hsl(0 0% 50%)')}; color: ${cssManager.bdTheme('#737373', '#737373')};
padding: 8px 12px 8px; padding: 8px 12px 8px;
margin-bottom: 4px; margin-bottom: 4px;
} }
@@ -199,25 +196,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('hsl(0 0% 40%)', 'hsl(0 0% 65%)')}; color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
user-select: none; user-select: none;
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
} }
.viewTab:hover { .viewTab:hover {
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')}; background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')}; color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
} }
.viewTab:active { .viewTab:active {
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')}; background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
transform: scale(0.99); transform: scale(0.99);
} }
.viewTab.selected { .viewTab.selected {
background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')}; background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
font-weight: 500; font-weight: 500;
} }
@@ -229,7 +226,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('hsl(215 70% 50%)', 'hsl(215 70% 60%)')}; background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
} }
.viewTab dees-icon { .viewTab dees-icon {
@@ -243,8 +240,8 @@ export class DeesSimpleAppDash extends DeesElement {
} }
.viewTab.selected dees-icon { .viewTab.selected dees-icon {
opacity: 0.9; opacity: 1;
color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
} }
.viewTab span { .viewTab span {
@@ -256,7 +253,7 @@ export class DeesSimpleAppDash extends DeesElement {
.appActions { .appActions {
padding: 12px 8px; padding: 12px 8px;
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')}; border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
} }
.action { .action {
@@ -267,7 +264,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('hsl(0 0% 40%)', 'hsl(0 0% 65%)')}; color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
} }
.action:hover { .action:hover {
@@ -295,7 +292,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('hsl(0 0% 97%)', 'hsl(0 0% 5%)')}; background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
overscroll-behavior: contain; overscroll-behavior: contain;
} }
@@ -335,14 +332,14 @@ export class DeesSimpleAppDash extends DeesElement {
} }
.controlbar { .controlbar {
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')}; color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
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% 100%)', 'hsl(0 0% 3.9%)')}; background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
z-index: 11; z-index: 11;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@@ -361,9 +358,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% 55%)', 'hsl(0 0% 50%)')}; color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
transition: all 0.15s ease; transition: all 0.15s ease;
border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
} }
@@ -372,8 +369,8 @@ export class DeesSimpleAppDash extends DeesElement {
} }
.control:hover { .control:hover {
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.06)')}; background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')}; color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
} }
.control dees-icon { .control dees-icon {
@@ -381,11 +378,11 @@ export class DeesSimpleAppDash extends DeesElement {
} }
.control.status-connected dees-icon { .control.status-connected dees-icon {
color: hsl(142 70% 50%); color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
} }
.control.status-terminal dees-icon { .control.status-terminal dees-icon {
color: hsl(45 90% 55%); color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
} }
/* Global Message Banners */ /* Global Message Banners */