From fdccdcdf73234c8971e1c42e6884890e6d51655a Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Sat, 4 Apr 2026 08:38:54 +0000 Subject: [PATCH] feat(dees-simple-appdash): update color themes for improved UI consistency --- .../dees-simple-appdash.ts | 63 +++++++++---------- 1 file changed, 30 insertions(+), 33 deletions(-) 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 7026f27..57fc1c0 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 @@ -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 */