@design.estate/dees-catalog 3.55.0 → 3.55.2

package/dist_bundle/bundle.js

@@ -135831,8 +135831,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;
@@ -135897,8 +135897,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;
@@ -135931,7 +135931,7 @@ var appuiAppbarStyles = [
 
       .dropdown-divider {
         height: 1px;
-        background: ${cssManager.bdTheme("#e0e0e0", "#202020")};
+        background: var(--dees-color-border-default);
         margin: 4px 0;
       }
 
@@ -136034,7 +136034,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 {
@@ -137383,10 +137383,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 {
@@ -137401,8 +137401,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 {
@@ -137412,7 +137412,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;
       }
 
@@ -137455,12 +137455,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 {
@@ -137470,7 +137470,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);
       }
     `
 ]);
@@ -168367,28 +168367,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;
       }
@@ -168406,23 +168405,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 {
@@ -168440,14 +168439,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;
       }
 
@@ -168455,7 +168454,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;
@@ -168490,12 +168489,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 */
@@ -168512,7 +168511,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;
@@ -168550,21 +168549,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 {
@@ -168575,7 +168574,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;
       }
 
@@ -168665,23 +168664,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 {
@@ -168692,7 +168691,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;
@@ -169197,30 +169196,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")};
@@ -169260,23 +169258,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 {
@@ -169339,12 +169337,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 */
@@ -169385,7 +169383,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;
@@ -169394,13 +169392,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 {
@@ -170440,7 +170438,6 @@ __publicField(_DeesAppuiTabs, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         display: block;
         position: relative;
@@ -170456,7 +170453,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;
@@ -170513,13 +170510,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 {
@@ -170532,17 +170529,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 {
@@ -170552,7 +170549,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 {
@@ -170617,12 +170614,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;
@@ -170650,7 +170647,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;
       }
       
@@ -170671,11 +170668,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,
@@ -170688,7 +170685,7 @@ __publicField(_DeesAppuiTabs, "styles", [
       }
 
       .horizontal .tab.selectedTab {
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+        color: var(--dees-color-text-primary);
       }
       
       .horizontal .tab.selectedTab::after,
@@ -170697,7 +170694,7 @@ __publicField(_DeesAppuiTabs, "styles", [
       }
 
       .vertical .tab.selectedTab {
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+        color: var(--dees-color-text-primary);
       }
 
       .tab dees-icon {
@@ -170717,7 +170714,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;
       }
@@ -170730,7 +170727,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);
       }
@@ -170746,7 +170743,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 {
@@ -170755,8 +170752,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 {
@@ -170892,14 +170889,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 {
@@ -171903,12 +171899,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;
@@ -191075,9 +191070,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;
@@ -191101,8 +191095,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;
@@ -191113,7 +191107,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;
@@ -191126,7 +191120,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)"
@@ -191135,13 +191129,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;
@@ -191152,7 +191146,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 {
@@ -191164,12 +191158,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 {
@@ -191177,7 +191171,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;
       }
@@ -191195,25 +191189,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;
       }
 
@@ -191225,7 +191219,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 {
@@ -191240,7 +191234,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
 
       .viewTab.selected dees-icon {
         opacity: 1;
-        color: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
+        color: var(--dees-color-text-primary);
       }
 
       .viewTab span {
@@ -191252,7 +191246,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 {
@@ -191263,7 +191257,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 {
@@ -191291,7 +191285,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;
       }
 
@@ -191331,14 +191325,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;
@@ -191357,9 +191351,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);
 
       }
 
@@ -191368,8 +191362,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 {
@@ -191404,7 +191398,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;
       }
 
@@ -191667,9 +191661,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%;
@@ -191686,7 +191679,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 {
@@ -191719,17 +191712,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;
       }
@@ -197174,7 +197167,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.55.0",
+  version: "3.55.2",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -199141,4 +199134,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775294607587.js.map
+//# sourceMappingURL=bundle-1775295779340.js.map