@design.estate/dees-catalog 3.55.0 → 3.55.2

package/dist_watch/bundle.js

@@ -141176,8 +141176,8 @@ var appuiAppbarStyles = [
         position: relative;
         width: 100%;
         height: var(--appbar-height);
-        border-bottom: 1px solid ${cssManager.bdTheme("#e0e0e0", "#202020")};
-        background: ${cssManager.bdTheme("#ffffff", "#000000")};
+        border-bottom: 1px solid var(--dees-color-border-default);
+        background: var(--dees-color-bg-primary);
         color: ${cssManager.bdTheme("#00000080", "#ffffff80")};
         font-size: var(--appbar-font-size);
         display: grid;
@@ -141242,8 +141242,8 @@ var appuiAppbarStyles = [
         top: 100%;
         left: 0;
         min-width: 200px;
-        background: ${cssManager.bdTheme("#ffffff", "#000000")};
-        border: 1px solid ${cssManager.bdTheme("#e0e0e0", "#202020")};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         box-shadow: ${cssManager.bdTheme("0 4px 12px rgba(0, 0, 0, 0.15)", "0 4px 12px rgba(0, 0, 0, 0.3)")};
         margin-top: 4px;
@@ -141276,7 +141276,7 @@ var appuiAppbarStyles = [
 
       .dropdown-divider {
         height: 1px;
-        background: ${cssManager.bdTheme("#e0e0e0", "#202020")};
+        background: var(--dees-color-border-default);
         margin: 4px 0;
       }
 
@@ -141379,7 +141379,7 @@ var appuiAppbarStyles = [
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        border: 2px solid ${cssManager.bdTheme("#ffffff", "#000000")};
+        border: 2px solid var(--dees-color-bg-primary);
       }
 
       .user-status.online {
@@ -142728,10 +142728,10 @@ __publicField(_DeesAppuiBottombar, "styles", [
         align-items: center;
         padding: 0 8px;
         gap: 4px;
-        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);
         font-size: 11px;
-        color: ${cssManager.bdTheme("hsl(0 0% 40%)", "hsl(0 0% 60%)")};
+        color: var(--dees-color-text-muted);
       }
 
       .widget {
@@ -142746,8 +142746,8 @@ __publicField(_DeesAppuiBottombar, "styles", [
       }
 
       .widget: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-secondary);
       }
 
       .widget dees-icon {
@@ -142757,7 +142757,7 @@ __publicField(_DeesAppuiBottombar, "styles", [
       .widget-separator {
         width: 1px;
         height: 14px;
-        background: ${cssManager.bdTheme("hsl(0 0% 80%)", "hsl(0 0% 20%)")};
+        background: var(--dees-color-border-strong);
         margin: 0 4px;
       }
 
@@ -142800,12 +142800,12 @@ __publicField(_DeesAppuiBottombar, "styles", [
         border-radius: 3px;
         cursor: pointer;
         transition: background 0.15s ease;
-        color: ${cssManager.bdTheme("hsl(0 0% 40%)", "hsl(0 0% 60%)")};
+        color: var(--dees-color-text-muted);
       }
 
       .action-button: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-secondary);
       }
 
       .action-button.disabled {
@@ -142815,7 +142815,7 @@ __publicField(_DeesAppuiBottombar, "styles", [
 
       .action-button.disabled:hover {
         background: transparent;
-        color: ${cssManager.bdTheme("hsl(0 0% 40%)", "hsl(0 0% 60%)")};
+        color: var(--dees-color-text-muted);
       }
     `
 ]);
@@ -173707,28 +173707,27 @@ __publicField(_DeesAppuiMainmenu, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         --menu-width-expanded: 200px;
         --menu-width-collapsed: 56px;
-        --tooltip-bg: ${cssManager.bdTheme("#18181b", "#fafafa")};
-        --tooltip-fg: ${cssManager.bdTheme("#fafafa", "#18181b")};
+        --tooltip-bg: var(--dees-color-tooltip-bg);
+        --tooltip-fg: var(--dees-color-tooltip-fg);
         position: relative;
         display: block;
         height: 100%;
       }
 
       .mainContainer {
-        color: ${cssManager.bdTheme("#666", "#ccc")};
+        color: var(--dees-color-text-secondary);
         z-index: ${zIndexLayers.fixed.appBar};
         display: flex;
         flex-direction: column;
         position: relative;
         width: var(--menu-width-expanded);
         height: 100%;
-        background: ${cssManager.bdTheme("#fafafa", "#0a0a0a")};
+        background: var(--dees-color-bg-secondary);
         user-select: none;
-        border-right: 1px solid ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
+        border-right: 1px solid var(--dees-color-border-subtle);
         font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         transition: width 0.25s ease;
       }
@@ -173746,23 +173745,23 @@ __publicField(_DeesAppuiMainmenu, "styles", [
         width: 24px;
         height: 24px;
         border-radius: 50%;
-        background: ${cssManager.bdTheme("#ffffff", "#27272a")};
-        border: 1px solid ${cssManager.bdTheme("#e5e5e5", "#3f3f46")};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-strong);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         cursor: pointer;
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: ${cssManager.bdTheme("#737373", "#a1a1aa")};
+        color: var(--dees-color-text-muted);
         opacity: 0;
         transition: opacity 0.2s ease, background 0.15s ease;
         padding: 0;
       }
 
       .collapse-toggle:hover {
-        background: ${cssManager.bdTheme("#f4f4f5", "#3f3f46")};
-        color: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
       }
 
       :host(:hover) .collapse-toggle {
@@ -173780,14 +173779,14 @@ __publicField(_DeesAppuiMainmenu, "styles", [
         gap: 10px;
         height: 48px;
         padding: 0 14px;
-        border-bottom: 1px solid ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
+        border-bottom: 1px solid var(--dees-color-border-subtle);
         flex-shrink: 0;
         box-sizing: border-box;
       }
 
       .logoSection .logoIcon {
         font-size: 22px;
-        color: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
+        color: var(--dees-color-text-primary);
         flex-shrink: 0;
       }
 
@@ -173795,7 +173794,7 @@ __publicField(_DeesAppuiMainmenu, "styles", [
         flex: 1;
         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;
@@ -173830,12 +173829,12 @@ __publicField(_DeesAppuiMainmenu, "styles", [
       }
 
       .menuSection::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme("rgba(0, 0, 0, 0.15)", "rgba(255, 255, 255, 0.15)")};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 3px;
       }
 
       .menuSection::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme("rgba(0, 0, 0, 0.25)", "rgba(255, 255, 255, 0.25)")};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
 
       /* Menu Group */
@@ -173852,7 +173851,7 @@ __publicField(_DeesAppuiMainmenu, "styles", [
         padding: 8px 12px 6px;
         font-size: 11px;
         font-weight: 600;
-        color: ${cssManager.bdTheme("#737373", "#737373")};
+        color: var(--dees-color-text-muted);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         white-space: nowrap;
@@ -173890,21 +173889,21 @@ __publicField(_DeesAppuiMainmenu, "styles", [
         border-radius: 6px;
         cursor: pointer;
         transition: all 0.15s ease;
-        color: ${cssManager.bdTheme("#525252", "#a3a3a3")};
+        color: var(--dees-color-text-secondary);
       }
 
       .tab: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")};
       }
 
       .tab:active {
-        background: ${cssManager.bdTheme("rgba(0, 0, 0, 0.06)", "rgba(255, 255, 255, 0.08)")};
+        background: var(--dees-color-active);
       }
 
       .tab.selectedTab {
-        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);
       }
 
       .tab.selectedTab::before {
@@ -173915,7 +173914,7 @@ __publicField(_DeesAppuiMainmenu, "styles", [
         transform: translateY(-50%);
         width: 3px;
         height: 16px;
-        background: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
+        background: var(--dees-color-text-primary);
         border-radius: 0 2px 2px 0;
       }
 
@@ -174005,23 +174004,23 @@ __publicField(_DeesAppuiMainmenu, "styles", [
       }
 
       .badge.default {
-        background: ${cssManager.bdTheme("#f4f4f5", "#27272a")};
-        color: ${cssManager.bdTheme("#3f3f46", "#a1a1aa")};
+        background: var(--dees-color-badge-default-bg);
+        color: var(--dees-color-badge-default-fg);
       }
 
       .badge.success {
-        background: ${cssManager.bdTheme("#dcfce7", "#14532d")};
-        color: ${cssManager.bdTheme("#166534", "#4ade80")};
+        background: var(--dees-color-badge-success-bg);
+        color: var(--dees-color-badge-success-fg);
       }
 
       .badge.warning {
-        background: ${cssManager.bdTheme("#fef3c7", "#451a03")};
-        color: ${cssManager.bdTheme("#92400e", "#fbbf24")};
+        background: var(--dees-color-badge-warning-bg);
+        color: var(--dees-color-badge-warning-fg);
       }
 
       .badge.error {
-        background: ${cssManager.bdTheme("#fee2e2", "#450a0a")};
-        color: ${cssManager.bdTheme("#991b1b", "#f87171")};
+        background: var(--dees-color-badge-error-bg);
+        color: var(--dees-color-badge-error-fg);
       }
 
       :host([collapsed]) .badge {
@@ -174032,7 +174031,7 @@ __publicField(_DeesAppuiMainmenu, "styles", [
       .bottomSection {
         flex-shrink: 0;
         padding: 8px;
-        border-top: 1px solid ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
+        border-top: 1px solid var(--dees-color-border-subtle);
         display: flex;
         flex-direction: column;
         gap: 2px;
@@ -174537,30 +174536,29 @@ __publicField(_DeesAppuiSecondarymenu, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         --sidebar-width-expanded: 240px;
         --sidebar-width-collapsed: 56px;
-        --sidebar-bg: ${cssManager.bdTheme("#fafafa", "#0a0a0a")};
-        --sidebar-fg: ${cssManager.bdTheme("#525252", "#a3a3a3")};
-        --sidebar-fg-muted: ${cssManager.bdTheme("#737373", "#737373")};
-        --sidebar-fg-active: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
-        --sidebar-border: ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
-        --sidebar-hover: ${cssManager.bdTheme("rgba(0, 0, 0, 0.04)", "rgba(255, 255, 255, 0.06)")};
-        --sidebar-active: ${cssManager.bdTheme("rgba(0, 0, 0, 0.06)", "rgba(255, 255, 255, 0.08)")};
-        --sidebar-accent: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
-        --tooltip-bg: ${cssManager.bdTheme("#18181b", "#fafafa")};
-        --tooltip-fg: ${cssManager.bdTheme("#fafafa", "#18181b")};
+        --sidebar-bg: var(--dees-color-bg-secondary);
+        --sidebar-fg: var(--dees-color-text-secondary);
+        --sidebar-fg-muted: var(--dees-color-text-muted);
+        --sidebar-fg-active: var(--dees-color-text-primary);
+        --sidebar-border: var(--dees-color-border-subtle);
+        --sidebar-hover: var(--dees-color-hover);
+        --sidebar-active: var(--dees-color-active);
+        --sidebar-accent: var(--dees-color-text-primary);
+        --tooltip-bg: var(--dees-color-tooltip-bg);
+        --tooltip-fg: var(--dees-color-tooltip-fg);
 
         /* Badge colors */
-        --badge-default-bg: ${cssManager.bdTheme("#f4f4f5", "#27272a")};
-        --badge-default-fg: ${cssManager.bdTheme("#3f3f46", "#a1a1aa")};
-        --badge-success-bg: ${cssManager.bdTheme("#dcfce7", "#14532d")};
-        --badge-success-fg: ${cssManager.bdTheme("#166534", "#4ade80")};
-        --badge-warning-bg: ${cssManager.bdTheme("#fef3c7", "#451a03")};
-        --badge-warning-fg: ${cssManager.bdTheme("#92400e", "#fbbf24")};
-        --badge-error-bg: ${cssManager.bdTheme("#fee2e2", "#450a0a")};
-        --badge-error-fg: ${cssManager.bdTheme("#991b1b", "#f87171")};
+        --badge-default-bg: var(--dees-color-badge-default-bg);
+        --badge-default-fg: var(--dees-color-badge-default-fg);
+        --badge-success-bg: var(--dees-color-badge-success-bg);
+        --badge-success-fg: var(--dees-color-badge-success-fg);
+        --badge-warning-bg: var(--dees-color-badge-warning-bg);
+        --badge-warning-fg: var(--dees-color-badge-warning-fg);
+        --badge-error-bg: var(--dees-color-badge-error-bg);
+        --badge-error-fg: var(--dees-color-badge-error-fg);
 
         /* Action colors */
         --action-primary: ${cssManager.bdTheme("#2563eb", "#3b82f6")};
@@ -174600,23 +174598,23 @@ __publicField(_DeesAppuiSecondarymenu, "styles", [
         width: 24px;
         height: 24px;
         border-radius: 50%;
-        background: ${cssManager.bdTheme("#ffffff", "#27272a")};
-        border: 1px solid ${cssManager.bdTheme("#e5e5e5", "#3f3f46")};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-strong);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         cursor: pointer;
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: ${cssManager.bdTheme("#737373", "#a1a1aa")};
+        color: var(--dees-color-text-muted);
         opacity: 0;
         transition: opacity 0.2s ease, background 0.15s ease;
         padding: 0;
       }
 
       .collapse-toggle:hover {
-        background: ${cssManager.bdTheme("#f4f4f5", "#3f3f46")};
-        color: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
       }
 
       :host(:hover) .collapse-toggle {
@@ -174679,12 +174677,12 @@ __publicField(_DeesAppuiSecondarymenu, "styles", [
       }
 
       .menuSection::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme("rgba(0, 0, 0, 0.15)", "rgba(255, 255, 255, 0.15)")};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 3px;
       }
 
       .menuSection::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme("rgba(0, 0, 0, 0.25)", "rgba(255, 255, 255, 0.25)")};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
 
       /* Menu Group */
@@ -174725,7 +174723,7 @@ __publicField(_DeesAppuiSecondarymenu, "styles", [
         gap: 8px;
         font-size: 11px;
         font-weight: 600;
-        color: ${cssManager.bdTheme("#78716c", "#b5a99a")};
+        color: var(--dees-color-text-warm);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         white-space: nowrap;
@@ -174734,13 +174732,13 @@ __publicField(_DeesAppuiSecondarymenu, "styles", [
 
       .groupHeader .groupTitle dees-icon {
         font-size: 16px;
-        color: ${cssManager.bdTheme("#78716c", "#b5a99a")};
+        color: var(--dees-color-text-warm);
       }
 
       .groupHeader .chevron {
         font-size: 12px;
         transition: transform 0.2s ease;
-        color: ${cssManager.bdTheme("#78716c", "#b5a99a")};
+        color: var(--dees-color-text-warm);
       }
 
       .groupHeader.collapsed .chevron {
@@ -175780,7 +175778,6 @@ __publicField(_DeesAppuiTabs, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         display: block;
         position: relative;
@@ -175796,7 +175793,7 @@ __publicField(_DeesAppuiTabs, "styles", [
 
       .tabs-wrapper.horizontal-wrapper {
         height: 48px;
-        border-bottom: 1px solid ${cssManager.bdTheme("#e5e7eb", "#27272a")};
+        border-bottom: 1px solid var(--dees-color-border-default);
         box-sizing: border-box;
         overflow: hidden;
         display: flex;
@@ -175853,13 +175850,13 @@ __publicField(_DeesAppuiTabs, "styles", [
       .tab-actions.left {
         padding-left: 12px;
         padding-right: 8px;
-        border-right: 1px solid ${cssManager.bdTheme("#e5e7eb", "#27272a")};
+        border-right: 1px solid var(--dees-color-border-default);
       }
 
       .tab-actions.right {
         padding-right: 12px;
         padding-left: 8px;
-        border-left: 1px solid ${cssManager.bdTheme("#e5e7eb", "#27272a")};
+        border-left: 1px solid var(--dees-color-border-default);
       }
 
       .tab-action-button {
@@ -175872,17 +175869,17 @@ __publicField(_DeesAppuiTabs, "styles", [
         cursor: pointer;
         transition: background 0.15s ease, color 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme("#71717a", "#71717a")};
+        color: var(--dees-color-text-muted);
         flex-shrink: 0;
       }
 
       .tab-action-button:hover {
-        background: ${cssManager.bdTheme("rgba(0, 0, 0, 0.06)", "rgba(255, 255, 255, 0.06)")};
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
       }
 
       .tab-action-button:active {
-        background: ${cssManager.bdTheme("rgba(0, 0, 0, 0.1)", "rgba(255, 255, 255, 0.1)")};
+        background: var(--dees-color-pressed);
       }
 
       .tab-action-button.disabled {
@@ -175892,7 +175889,7 @@ __publicField(_DeesAppuiTabs, "styles", [
 
       .tab-action-button.disabled:hover {
         background: transparent;
-        color: ${cssManager.bdTheme("#71717a", "#71717a")};
+        color: var(--dees-color-text-muted);
       }
 
       .tab-action-button dees-icon {
@@ -175957,12 +175954,12 @@ __publicField(_DeesAppuiTabs, "styles", [
         font-size: 14px;
         gap: 2px;
         position: relative;
-        background: ${cssManager.bdTheme("#f9fafb", "#18181b")};
+        background: var(--dees-color-bg-tertiary);
         border-radius: 8px;
       }
 
       .tab {
-        color: ${cssManager.bdTheme("#71717a", "#71717a")};
+        color: var(--dees-color-text-muted);
         white-space: nowrap;
         cursor: pointer;
         transition: color 0.15s ease;
@@ -175990,7 +175987,7 @@ __publicField(_DeesAppuiTabs, "styles", [
         transform: translateY(-50%);
         height: 20px;
         width: 1px;
-        background: ${cssManager.bdTheme("#e5e7eb", "#27272a")};
+        background: var(--dees-color-border-default);
         opacity: 0.5;
       }
       
@@ -176011,11 +176008,11 @@ __publicField(_DeesAppuiTabs, "styles", [
       }
 
       .tab:hover {
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+        color: var(--dees-color-text-primary);
       }
       
       .horizontal .tab:hover {
-        background: ${cssManager.bdTheme("rgba(0, 0, 0, 0.03)", "rgba(255, 255, 255, 0.03)")};
+        background: var(--dees-color-hover);
       }
       
       .horizontal .tab:hover::after,
@@ -176028,7 +176025,7 @@ __publicField(_DeesAppuiTabs, "styles", [
       }
 
       .horizontal .tab.selectedTab {
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+        color: var(--dees-color-text-primary);
       }
       
       .horizontal .tab.selectedTab::after,
@@ -176037,7 +176034,7 @@ __publicField(_DeesAppuiTabs, "styles", [
       }
 
       .vertical .tab.selectedTab {
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+        color: var(--dees-color-text-primary);
       }
 
       .tab dees-icon {
@@ -176057,7 +176054,7 @@ __publicField(_DeesAppuiTabs, "styles", [
       .tabs-wrapper .tabIndicator {
         height: 3px;
         bottom: 0;
-        background: ${cssManager.bdTheme("#3b82f6", "#3b82f6")};
+        background: var(--dees-color-accent-primary);
         border-radius: 3px 3px 0 0;
         z-index: 3;
       }
@@ -176070,7 +176067,7 @@ __publicField(_DeesAppuiTabs, "styles", [
         left: 8px;
         right: 8px;
         border-radius: 6px;
-        background: ${cssManager.bdTheme("#ffffff", "#27272a")};
+        background: var(--dees-color-bg-primary);
         z-index: 1;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
       }
@@ -176086,7 +176083,7 @@ __publicField(_DeesAppuiTabs, "styles", [
         margin-left: 8px;
         opacity: 0.4;
         transition: opacity 0.15s, background 0.15s;
-        color: ${cssManager.bdTheme("#71717a", "#71717a")};
+        color: var(--dees-color-text-muted);
       }
 
       .tab:hover .tab-close {
@@ -176095,8 +176092,8 @@ __publicField(_DeesAppuiTabs, "styles", [
 
       .tab-close:hover {
         opacity: 1;
-        background: ${cssManager.bdTheme("rgba(0,0,0,0.1)", "rgba(255,255,255,0.1)")};
-        color: ${cssManager.bdTheme("#ef4444", "#f87171")};
+        background: var(--dees-color-pressed);
+        color: var(--dees-color-accent-error);
       }
 
       .tab.selectedTab .tab-close {
@@ -176232,14 +176229,13 @@ __publicField(_DeesAppuiMaincontent, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        color: ${cssManager.bdTheme("#333", "#fff")};
+        color: var(--dees-color-text-secondary);
         display: grid;
         grid-template-rows: auto 1fr;
         width: 100%;
         height: 100%;
-        background: ${cssManager.bdTheme("#fafafa", "#0a0a0a")};
+        background: var(--dees-color-bg-secondary);
       }
 
       .maincontainer {
@@ -177243,12 +177239,11 @@ __publicField(_DeesAppui, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         position: absolute;
         height: 100%;
         width: 100%;
-        background: ${cssManager.bdTheme("#f0f0f0", "#1a1a1a")};
+        background: var(--dees-color-bg-tertiary);
       }
       .maingrid {
         position: absolute;
@@ -196415,9 +196410,8 @@ __publicField(_DeesSimpleAppDash, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* 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;
@@ -196441,8 +196435,8 @@ __publicField(_DeesSimpleAppDash, "styles", [
         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;
@@ -196453,7 +196447,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
 
       .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;
@@ -196466,7 +196460,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
         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)"
@@ -196475,13 +196469,13 @@ __publicField(_DeesSimpleAppDash, "styles", [
 
       .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;
@@ -196492,7 +196486,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
         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 {
@@ -196504,12 +196498,12 @@ __publicField(_DeesSimpleAppDash, "styles", [
       }
 
       .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 {
@@ -196517,7 +196511,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
         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;
       }
@@ -196535,25 +196529,25 @@ __publicField(_DeesSimpleAppDash, "styles", [
         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;
       }
 
@@ -196565,7 +196559,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
         bottom: 8px;
         width: 3px;
         border-radius: 0 2px 2px 0;
-        background: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
+        background: var(--dees-color-text-primary);
       }
 
       .viewTab dees-icon {
@@ -196580,7 +196574,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
 
       .viewTab.selected dees-icon {
         opacity: 1;
-        color: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
+        color: var(--dees-color-text-primary);
       }
 
       .viewTab span {
@@ -196592,7 +196586,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
 
       .appActions {
         padding: 12px 8px;
-        border-top: 1px solid ${cssManager.bdTheme("#e5e5e5", "#1a1a1a")};
+        border-top: 1px solid var(--dees-color-border-default);
       }
 
       .action {
@@ -196603,7 +196597,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
         border-radius: 8px;
         cursor: default;
         transition: all 0.15s ease;
-        color: ${cssManager.bdTheme("#525252", "#a3a3a3")};
+        color: var(--dees-color-text-secondary);
       }
 
       .action:hover {
@@ -196631,7 +196625,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
         bottom: 24px;
         width: calc(100% - 240px);
         overflow: auto;
-        background: ${cssManager.bdTheme("#fafafa", "#0a0a0a")};
+        background: var(--dees-color-bg-secondary);
         overscroll-behavior: contain;
       }
 
@@ -196671,14 +196665,14 @@ __publicField(_DeesSimpleAppDash, "styles", [
       }
 
       .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;
@@ -196697,9 +196691,9 @@ __publicField(_DeesSimpleAppDash, "styles", [
         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);
 
       }
 
@@ -196708,8 +196702,8 @@ __publicField(_DeesSimpleAppDash, "styles", [
       }
 
       .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 {
@@ -196744,7 +196738,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
         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;
       }
 
@@ -197007,9 +197001,8 @@ __publicField(_DeesSimpleLogin, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* 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%;
@@ -197026,7 +197019,7 @@ __publicField(_DeesSimpleLogin, "styles", [
         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 {
@@ -197059,17 +197052,17 @@ __publicField(_DeesSimpleLogin, "styles", [
         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;
       }