design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions 1 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;
height: calc(100% - 24px);
width: 240px;
background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
font-size: 13px;
font-family: 'Geist Sans', sans-serif;
z-index: 2;
@@ -114,7 +114,7 @@ export class DeesSimpleAppDash extends DeesElement {
.sidebar-header {
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;
align-items: center;
gap: 12px;
@@ -127,25 +127,22 @@ export class DeesSimpleAppDash extends DeesElement {
width: 36px;
height: 36px;
border-radius: 10px;
background: ${cssManager.bdTheme(
'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%)'
)};
background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
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.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
'0 1px 2px rgb(0 0 0 / 0.05)',
'0 1px 2px rgb(0 0 0 / 0.2)'
)};
}
.header-icon-wrapper dees-icon {
font-size: 18px;
color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
}
.appName {
font-size: 15px;
font-weight: 600;
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -181,7 +178,7 @@ export class DeesSimpleAppDash extends DeesElement {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
color: ${cssManager.bdTheme('#737373', '#737373')};
padding: 8px 12px 8px;
margin-bottom: 4px;
}
@@ -199,25 +196,25 @@ export class DeesSimpleAppDash extends DeesElement {
padding: 10px 12px;
cursor: default;
transition: all 0.15s ease;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
user-select: none;
position: relative;
border-radius: 8px;
}
.viewTab:hover {
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
}
.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);
}
.viewTab.selected {
background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
font-weight: 500;
}
@@ -229,7 +226,7 @@ export class DeesSimpleAppDash extends DeesElement {
bottom: 8px;
width: 3px;
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 {
@@ -243,8 +240,8 @@ export class DeesSimpleAppDash extends DeesElement {
}
.viewTab.selected dees-icon {
opacity: 0.9;
color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
opacity: 1;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
}
.viewTab span {
@@ -256,7 +253,7 @@ export class DeesSimpleAppDash extends DeesElement {
.appActions {
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 {
@@ -267,7 +264,7 @@ export class DeesSimpleAppDash extends DeesElement {
border-radius: 8px;
cursor: default;
transition: all 0.15s ease;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
}
.action:hover {
@@ -295,7 +292,7 @@ export class DeesSimpleAppDash extends DeesElement {
bottom: 24px;
width: calc(100% - 240px);
overflow: auto;
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
overscroll-behavior: contain;
}
@@ -335,14 +332,14 @@ export class DeesSimpleAppDash extends DeesElement {
}
.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;
bottom: 0px;
left: 0px;
width: 100%;
height: 24px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
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%)')};
z-index: 11;
display: flex;
justify-content: flex-end;
@@ -361,9 +358,9 @@ export class DeesSimpleAppDash extends DeesElement {
height: 100%;
white-space: nowrap;
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;
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 {
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.06)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
}
.control dees-icon {
@@ -381,11 +378,11 @@ export class DeesSimpleAppDash extends DeesElement {
}
.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 {
color: hsl(45 90% 55%);
color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
}
/* Global Message Banners */