v3.55.3

changelog.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 2026-04-04 - 3.55.3 - fix(theme)
+align component styles with shared theme CSS variables
+
+- replace hardcoded bdTheme color usages across chart, dataview, input, layout, modal, media, simple, and workspace components with shared --dees-* theme tokens
+- add themeDefaultStyles to components and style modules that were not yet inheriting the shared theme defaults
+- standardize hover, border, background, text, and scrollbar colors for more consistent theming across the catalog
+
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.55.1",
+  "version": "3.55.3",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

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.3',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-chart/dees-chart-area/styles.ts

@@ -1,13 +1,15 @@
 import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const chartAreaStyles = [
+    themeDefaultStyles,
     cssManager.defaultStyles,
     css`
       :host {
         display: block;
         height: 400px;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         font-size: 14px;
       }
       dees-tile {
@@ -24,7 +26,7 @@ export const chartAreaStyles = [
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
       }
       .expandBtn {
         display: flex;
@@ -36,13 +38,13 @@ export const chartAreaStyles = [
         border-radius: 4px;
         background: transparent;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
+        color: var(--dees-color-text-muted);
         transition: all 0.15s ease;
         padding: 0;
       }
       .expandBtn:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
       .chartContainer {
         position: absolute;
@@ -64,7 +66,7 @@ export const chartAreaStyles = [
       }
       .statsSeries + .statsSeries {
         padding-left: 24px;
-        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: 1px solid var(--dees-color-border-default);
       }
       .statsColor {
         width: 8px;
@@ -75,15 +77,15 @@ export const chartAreaStyles = [
       .statsName {
         font-weight: 500;
         font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        color: var(--dees-color-text-secondary);
         margin-right: 4px;
       }
       .statsItem {
         font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        color: var(--dees-color-text-muted);
       }
       .statsItem strong {
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-primary);
       }
       .lw-tooltip {
         position: absolute;

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts

@@ -106,7 +106,7 @@ export class DeesChartLog extends DeesElement {
         display: block;
         height: 400px;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
       }
 
       dees-tile {
@@ -124,7 +124,7 @@ export class DeesChartLog extends DeesElement {
       .title {
         font-weight: 500;
         font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: var(--dees-color-text-primary);
         white-space: nowrap;
       }
 
@@ -141,10 +141,10 @@ export class DeesChartLog extends DeesElement {
         flex: 1;
         padding: 4px 8px;
         font-size: 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
         outline: none;
       }
 
@@ -153,7 +153,7 @@ export class DeesChartLog extends DeesElement {
       }
 
       .search-box input::placeholder {
-        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .search-nav {
@@ -164,35 +164,35 @@ export class DeesChartLog extends DeesElement {
       .search-nav button {
         padding: 4px 6px;
         font-size: 11px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.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: 3px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         line-height: 1;
       }
 
       .search-nav button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .filter-toggle {
         padding: 4px 8px;
         font-size: 11px;
         font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.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: 4px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         transition: all 0.15s;
         white-space: nowrap;
       }
 
       .filter-toggle:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .filter-toggle.active {
@@ -208,11 +208,11 @@ export class DeesChartLog extends DeesElement {
       }
 
       .control-button {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.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: 4px;
         padding: 4px 10px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         font-size: 12px;
         font-weight: 500;
@@ -220,9 +220,9 @@ export class DeesChartLog extends DeesElement {
       }
 
       .control-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 25%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
       }
 
       .control-button.active {
@@ -247,7 +247,7 @@ export class DeesChartLog extends DeesElement {
         align-items: center;
         justify-content: center;
         height: 100%;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         font-style: italic;
         font-size: 13px;
       }
@@ -299,7 +299,7 @@ export class DeesChartLog extends DeesElement {
 
       .metric.rate {
         margin-left: auto;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .metric.rate::before {

ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -2,6 +2,7 @@ import { demoFunc } from './dees-dataview-codebox.demo.js';
 import {
   DeesElement,
   html,
+  css,
   customElement,
   type TemplateResult,
   property,
@@ -9,6 +10,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 import type { HLJSApi } from 'highlight.js';
 
@@ -39,6 +41,11 @@ export class DeesDataviewCodebox extends DeesElement {
   })
   accessor codeToDisplay: string = '';
 
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+  ];
+
   constructor() {
     super();
   }
@@ -56,11 +63,11 @@ export class DeesDataviewCodebox extends DeesElement {
           box-sizing: border-box;
         }
         dees-tile {
-          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+          color: var(--dees-color-text-primary);
         }
 
         .appbar {
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          color: var(--dees-color-text-muted);
           height: 32px;
           display: flex;
           font-size: 13px;
@@ -78,7 +85,7 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          color: var(--dees-color-text-muted);
           height: 28px;
           font-size: 11px;
           line-height: 28px;
@@ -118,10 +125,10 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .lineNumbers {
-          color: ${cssManager.bdTheme('#71717a', '#52525b')};
+          color: var(--dees-color-text-muted);
           padding: 24px 16px 0px 0px;
           text-align: right;
-          border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-right: 1px solid var(--dees-color-border-default);
         }
 
         .lineCounter:last-child {

ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

@@ -42,7 +42,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       dees-tile {
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         cursor: default;
       }
 
@@ -61,7 +61,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
         flex: 1;
       }
 
@@ -78,21 +78,21 @@ export class DeesDataviewStatusobject extends DeesElement {
       .copyMain {
         font-size: 11px;
         font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.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);
         text-align: center;
         padding: 4px 10px;
         border-radius: 4px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         user-select: none;
         cursor: pointer;
         transition: all 0.15s ease;
       }
 
       .copyMain:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
       }
 
       .copyMain:active {
@@ -121,7 +121,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         gap: 10px;
         height: 36px;
         padding: 0 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
+        border-bottom: 1px solid var(--dees-color-border-subtle);
         transition: background-color 0.15s ease;
         cursor: context-menu;
       }
@@ -149,7 +149,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       .detail .detailsText .label {
         font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         letter-spacing: -0.01em;
         white-space: nowrap;
         flex-shrink: 0;
@@ -167,7 +167,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .bottomBar {
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         height: 28px;
         font-size: 11px;
         line-height: 28px;

ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts

@@ -160,7 +160,7 @@ export class DeesStatsGrid extends DeesElement {
       .grid-title {
         font-size: 16px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
         letter-spacing: -0.01em;
       }
 
@@ -186,7 +186,7 @@ export class DeesStatsGrid extends DeesElement {
       }
 
       .stats-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
+        border-color: var(--dees-color-border-strong);
       }
 
       .stats-tile.clickable {

ts_web/elements/00group-dataview/dees-table/styles.ts

@@ -13,7 +13,7 @@ export const tableStyles: CSSResult[] = [
       }
 
       dees-tile {
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         font-family: ${cssGeistFontFamily};
         font-weight: 400;
         font-size: 14px;
@@ -41,7 +41,7 @@ export const tableStyles: CSSResult[] = [
       .heading1 {
         font-size: 14px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
         letter-spacing: -0.01em;
       }
 
@@ -69,18 +69,18 @@ export const tableStyles: CSSResult[] = [
         padding: 4px 10px;
         font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         background: transparent;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         cursor: pointer;
         transition: all 0.15s ease;
       }
 
       .headerAction:hover {
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        color: var(--dees-color-text-primary);
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
       }
 
       .headerAction dees-icon {
@@ -93,8 +93,8 @@ export const tableStyles: CSSResult[] = [
         grid-gap: 16px;
         grid-template-columns: 1fr max-content;
         padding: 16px 24px;
-        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-secondary);
+        border-bottom: 1px solid var(--dees-color-border-default);
         transition: all 0.2s ease;
       }
 
@@ -157,7 +157,7 @@ export const tableStyles: CSSResult[] = [
       
       thead {
         background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-strong);
       }
       :host([sticky-header]) thead th {
         position: sticky;
@@ -172,7 +172,7 @@ export const tableStyles: CSSResult[] = [
       
       /* Default horizontal lines (bottom border only) */
       tbody tr {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       tbody tr:last-child {
@@ -181,8 +181,8 @@ export const tableStyles: CSSResult[] = [
       
       /* Full horizontal lines when enabled */
       :host([show-horizontal-lines]) tbody tr {
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-top: 1px solid var(--dees-color-border-default);
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       :host([show-horizontal-lines]) tbody tr:first-child {
@@ -190,7 +190,7 @@ export const tableStyles: CSSResult[] = [
       }
       
       :host([show-horizontal-lines]) tbody tr:last-child {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       tbody tr:hover {
@@ -222,13 +222,13 @@ export const tableStyles: CSSResult[] = [
       
       /* Grid mode - shows both vertical and horizontal lines */
       :host([show-grid]) th {
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-left: none;
         border-top: none;
       }
       
       :host([show-grid]) td {
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-left: none;
         border-top: none;
       }
@@ -251,12 +251,12 @@ export const tableStyles: CSSResult[] = [
       tbody td.actionsCol {
         position: sticky;
         right: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        background: var(--dees-color-bg-primary);
       }
       thead th.actionsCol { z-index: 3; }
       tbody td.actionsCol {
         z-index: 1;
-        box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        box-shadow: -1px 0 0 0 var(--dees-color-border-default);
       }
       
       tbody tr.selected {
@@ -278,18 +278,18 @@ export const tableStyles: CSSResult[] = [
       }
       
       :host([show-vertical-lines]) th {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-right: 1px solid var(--dees-color-border-default);
       }
       
       td {
         padding: 8px 16px;
         vertical-align: middle;
         font-size: 13px;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
       }
       
       :host([show-vertical-lines]) td {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-right: 1px solid var(--dees-color-border-default);
       }
       
       th:first-child,
@@ -327,10 +327,10 @@ export const tableStyles: CSSResult[] = [
         height: calc(100% - 8px);
         padding: 0 12px;
         outline: none;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
@@ -355,9 +355,9 @@ export const tableStyles: CSSResult[] = [
         padding: 6px 8px;
         font-size: 13px;
         border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
       }
       .actionsContainer {
         display: flex;
@@ -398,7 +398,7 @@ export const tableStyles: CSSResult[] = [
         height: 32px;
         padding: 0 16px;
         font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        color: var(--dees-color-text-muted);
         width: 100%;
         box-sizing: border-box;
       }

ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -142,16 +142,16 @@ export class DeesInputCode extends DeesInputBase<string> {
         padding: 4px 10px;
         font-size: 12px;
         font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 12%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-secondary);
         transition: all 0.15s ease;
       }
 
       .language-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-hover);
       }
 
       .language-dropdown {
@@ -159,8 +159,8 @@ export class DeesInputCode extends DeesInputBase<string> {
         top: 100%;
         left: 0;
         margin-top: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         z-index: 100;
@@ -173,16 +173,16 @@ export class DeesInputCode extends DeesInputBase<string> {
         padding: 8px 12px;
         font-size: 12px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-secondary);
         transition: background 0.15s ease;
       }
 
       .language-option:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-hover);
       }
 
       .language-option.selected {
-        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-active);
       }
 
       .toolbar-button {
@@ -195,18 +195,18 @@ export class DeesInputCode extends DeesInputBase<string> {
         border: none;
         border-radius: 4px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
         transition: all 0.15s ease;
       }
 
       .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
       .toolbar-button.active {
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-secondary);
       }
 
       .toolbar-button.success {
@@ -226,7 +226,7 @@ export class DeesInputCode extends DeesInputBase<string> {
       .toolbar-divider {
         width: 1px;
         height: 20px;
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-border-default);
         margin: 0 4px;
       }
 

ts_web/elements/00group-input/dees-input-richtext/styles.ts

@@ -1,7 +1,9 @@
 import { css, cssManager } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const richtextStyles = [
+    themeDefaultStyles,
     ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
@@ -20,7 +22,7 @@ export const richtextStyles = [
         margin-bottom: 8px;
         font-size: 14px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-primary);
       }
 
       dees-tile {
@@ -28,7 +30,7 @@ export const richtextStyles = [
       }
 
       dees-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        border-color: var(--dees-color-border-strong);
       }
 
       dees-tile.focused::part(outer) {
@@ -68,8 +70,8 @@ export const richtextStyles = [
       }
 
       .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .toolbar-button.active {
@@ -85,7 +87,7 @@ export const richtextStyles = [
       .toolbar-divider {
         width: 1px;
         height: 24px;
-        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-border-default);
         margin: 0 4px;
       }
 
@@ -99,7 +101,7 @@ export const richtextStyles = [
       .editor-content .ProseMirror {
         outline: none;
         line-height: 1.6;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         min-height: 100%;
         white-space: pre-wrap;
         word-wrap: break-word;
@@ -149,7 +151,7 @@ export const richtextStyles = [
       }
 
       .editor-content .ProseMirror blockquote {
-        border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: 4px solid var(--dees-color-border-default);
         margin: 1em 0;
         padding-left: 1em;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
@@ -157,12 +159,12 @@ export const richtextStyles = [
       }
 
       .editor-content .ProseMirror code {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-tertiary);
         border-radius: 3px;
         padding: 0.2em 0.4em;
         font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
         font-size: 0.9em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-primary);
       }
 
       .editor-content .ProseMirror pre {
@@ -195,7 +197,7 @@ export const richtextStyles = [
         padding: 0 12px;
         height: 28px;
         font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        color: var(--dees-color-text-muted);
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -213,8 +215,8 @@ export const richtextStyles = [
         top: 100%;
         left: 0;
         right: 0;
-        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: 6px;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         padding: 12px;
@@ -228,12 +230,12 @@ export const richtextStyles = [
       .link-input input {
         width: 100%;
         padding: 8px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         outline: none;
         font-size: 14px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
         transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
@@ -250,19 +252,19 @@ export const richtextStyles = [
 
       .link-input-buttons button {
         padding: 6px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        background: var(--dees-color-bg-primary);
         cursor: pointer;
         font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         transition: all 0.15s ease;
         font-weight: 500;
       }
 
       .link-input-buttons button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .link-input-buttons button.primary {

ts_web/elements/00group-layout/dees-tile/dees-tile.ts

@@ -56,7 +56,7 @@ export class DeesTile extends DeesElement {
         display: flex;
         flex-direction: column;
         font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
       }
 
       /* --- The frame --- */
@@ -64,8 +64,8 @@ export class DeesTile extends DeesElement {
         position: relative;
         flex: 1;
         min-height: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.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;
         overflow: hidden;
         display: flex;
@@ -84,7 +84,7 @@ export class DeesTile extends DeesElement {
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
       }
 
       /* --- Content: the rounded inset --- */
@@ -92,8 +92,8 @@ export class DeesTile extends DeesElement {
         flex: 1;
         position: relative;
         border-radius: 8px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        border-top: 1px solid var(--dees-color-border-subtle);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
         overflow: hidden;
       }
 

ts_web/elements/00group-media/dees-pdf-viewer/styles.ts

@@ -1,6 +1,8 @@
 import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const viewerStyles = [
+  themeDefaultStyles,
   cssManager.defaultStyles,
   css`
     :host {
@@ -369,7 +371,7 @@ export const viewerStyles = [
       display: flex;
       align-items: center;
       font-size: 11px;
-      color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+      color: var(--dees-color-text-muted);
       width: 100%;
       box-sizing: border-box;
       position: relative;
@@ -383,7 +385,7 @@ export const viewerStyles = [
 
     .pdf-footer-left .pdf-footer-item + .pdf-footer-item {
       padding-left: 12px;
-      border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      border-left: 1px solid var(--dees-color-border-default);
     }
 
     .pdf-footer-center {

ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -129,7 +129,7 @@ export class DeesModal extends DeesElement {
       /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: var(--dees-color-text-primary);
       }
       .modalContainer {
         display: flex;
@@ -231,7 +231,7 @@ export class DeesModal extends DeesElement {
         font-weight: 500;
         font-size: 13px;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -255,12 +255,12 @@ export class DeesModal extends DeesElement {
         cursor: pointer;
         transition: all 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .heading .header-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
       .heading .header-button:active {
@@ -278,7 +278,7 @@ export class DeesModal extends DeesElement {
         overflow-x: hidden;
         overscroll-behavior: contain;
         scrollbar-width: thin;
-        scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
       }
       .bottomButtons {
         display: flex;
@@ -302,8 +302,8 @@ export class DeesModal extends DeesElement {
         transition: all 0.15s ease;
         background: transparent;
         border: none;
-        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
         white-space: nowrap;
         display: flex;
         align-items: center;
@@ -314,8 +314,8 @@ export class DeesModal extends DeesElement {
       }
 
       .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .bottomButtons .bottomButton:active {

ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts

@@ -67,7 +67,7 @@ export class DeesShoppingProductcard extends DeesElement {
       }
 
       dees-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        border-color: var(--dees-color-border-strong);
         box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
       }
 
@@ -148,7 +148,7 @@ export class DeesShoppingProductcard extends DeesElement {
       .product-name {
         font-size: 14px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -204,7 +204,7 @@ export class DeesShoppingProductcard extends DeesElement {
       .price-current {
         font-size: 20px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: var(--dees-color-text-primary);
       }
 
       .price-original {

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

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

ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts

@@ -81,15 +81,15 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
         height: 32px;
         font-size: 12px;
         font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .terminal-header-icon {
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .terminal-header-command {
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        color: var(--dees-color-text-secondary);
         font-weight: 500;
       }
 
@@ -243,12 +243,12 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
       }
 
       .xterm .xterm-viewport::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 25%)')};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 4px;
       }
 
       .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 35%)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
     `,
   ];