@design.estate/dees-catalog 3.55.1 → 3.55.3

package/dist_bundle/bundle.js

@@ -57478,13 +57478,13 @@ function onChange(cb) {
     _onChangeCb.splice(_onChangeCb.indexOf(cb), 1);
   };
 }
-function insertCss(css5) {
-  if (!css5 || !IS_DOM) {
+function insertCss(css6) {
+  if (!css6 || !IS_DOM) {
     return;
   }
   var style2 = DOCUMENT.createElement("style");
   style2.setAttribute("type", "text/css");
-  style2.innerHTML = css5;
+  style2.innerHTML = css6;
   var headChildren = DOCUMENT.head.childNodes;
   var beforeChild = null;
   for (var i11 = headChildren.length - 1; i11 > -1; i11--) {
@@ -57495,7 +57495,7 @@ function insertCss(css5) {
     }
   }
   DOCUMENT.head.insertBefore(style2, beforeChild);
-  return css5;
+  return css6;
 }
 function nextUniqueId() {
   var size = 12;
@@ -139649,7 +139649,7 @@ __publicField(_DeesTile, "styles", [
         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 --- */
@@ -139657,8 +139657,8 @@ __publicField(_DeesTile, "styles", [
         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;
@@ -139677,7 +139677,7 @@ __publicField(_DeesTile, "styles", [
         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 --- */
@@ -139685,8 +139685,8 @@ __publicField(_DeesTile, "styles", [
         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;
       }
 
@@ -139872,7 +139872,7 @@ __publicField(_DeesModal, "styles", [
       /* 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;
@@ -139974,7 +139974,7 @@ __publicField(_DeesModal, "styles", [
         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;
@@ -139998,12 +139998,12 @@ __publicField(_DeesModal, "styles", [
         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 {
@@ -140021,7 +140021,7 @@ __publicField(_DeesModal, "styles", [
         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;
@@ -140045,8 +140045,8 @@ __publicField(_DeesModal, "styles", [
         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;
@@ -140057,8 +140057,8 @@ __publicField(_DeesModal, "styles", [
       }
 
       .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 {
@@ -140272,9 +140272,9 @@ var _DeesWorkspaceMonaco = class _DeesWorkspaceMonaco extends (_a17 = DeesElemen
       });
       this.editorDeferred.resolve(editor2);
     });
-    const css5 = await (await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`)).text();
+    const css6 = await (await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`)).text();
     const styleElement = document.createElement("style");
-    styleElement.textContent = css5;
+    styleElement.textContent = css6;
     this.shadowRoot.append(styleElement);
     const editor = await this.editorDeferred.promise;
     editor.onDidChangeModelContent(async (eventArg) => {
@@ -140985,16 +140985,16 @@ __publicField(_DeesInputCode, "styles", [
         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 {
@@ -141002,8 +141002,8 @@ __publicField(_DeesInputCode, "styles", [
         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;
@@ -141016,16 +141016,16 @@ __publicField(_DeesInputCode, "styles", [
         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 {
@@ -141038,18 +141038,18 @@ __publicField(_DeesInputCode, "styles", [
         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 {
@@ -141069,7 +141069,7 @@ __publicField(_DeesInputCode, "styles", [
       .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;
       }
 
@@ -143687,7 +143687,7 @@ __publicField(_DeesShoppingProductcard, "styles", [
       }
 
       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);
       }
 
@@ -143768,7 +143768,7 @@ __publicField(_DeesShoppingProductcard, "styles", [
       .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;
@@ -143824,7 +143824,7 @@ __publicField(_DeesShoppingProductcard, "styles", [
       .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 {
@@ -161798,7 +161798,9 @@ var demoFunc28 = /* @__PURE__ */ __name(() => b2`
 
 // ts_web/elements/00group-input/dees-input-richtext/styles.ts
 init_dist_ts30();
+init_theme();
 var richtextStyles = [
+  themeDefaultStyles,
   ...DeesInputBase.baseStyles,
   cssManager.defaultStyles,
   i`
@@ -161817,7 +161819,7 @@ var 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 {
@@ -161825,7 +161827,7 @@ var 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) {
@@ -161865,8 +161867,8 @@ var 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 {
@@ -161882,7 +161884,7 @@ var 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;
       }
 
@@ -161896,7 +161898,7 @@ var 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;
@@ -161946,7 +161948,7 @@ var 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%)")};
@@ -161954,12 +161956,12 @@ var 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 {
@@ -161992,7 +161994,7 @@ var 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;
@@ -162010,8 +162012,8 @@ var 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;
@@ -162025,12 +162027,12 @@ var 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);
       }
 
@@ -162047,19 +162049,19 @@ var 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 {
@@ -163172,7 +163174,7 @@ var tableStyles = [
       }
 
       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;
@@ -163200,7 +163202,7 @@ var tableStyles = [
       .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;
       }
 
@@ -163228,18 +163230,18 @@ var tableStyles = [
         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 {
@@ -163252,8 +163254,8 @@ var tableStyles = [
         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;
       }
 
@@ -163316,7 +163318,7 @@ var tableStyles = [
       
       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;
@@ -163331,7 +163333,7 @@ var tableStyles = [
       
       /* 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 {
@@ -163340,8 +163342,8 @@ var tableStyles = [
       
       /* 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 {
@@ -163349,7 +163351,7 @@ var tableStyles = [
       }
       
       :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 {
@@ -163381,13 +163383,13 @@ var tableStyles = [
       
       /* 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;
       }
@@ -163410,12 +163412,12 @@ var tableStyles = [
       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 {
@@ -163437,18 +163439,18 @@ var tableStyles = [
       }
       
       :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,
@@ -163486,10 +163488,10 @@ var tableStyles = [
         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;
@@ -163514,9 +163516,9 @@ var tableStyles = [
         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;
@@ -163557,7 +163559,7 @@ var tableStyles = [
         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;
       }
@@ -166382,7 +166384,7 @@ __publicField(_DeesStatsGrid, "styles", [
       .grid-title {
         font-size: 16px;
         font-weight: 500;
-        color: ${cssManager.bdTheme("#09090b", "#fafafa")};
+        color: var(--dees-color-text-primary);
         letter-spacing: -0.01em;
       }
 
@@ -166408,7 +166410,7 @@ __publicField(_DeesStatsGrid, "styles", [
       }
 
       .stats-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme("#d0d0d0", "#2a2a2a")};
+        border-color: var(--dees-color-border-strong);
       }
 
       .stats-tile.clickable {
@@ -172924,14 +172926,16 @@ var demoFunc37 = /* @__PURE__ */ __name(() => {
 
 // ts_web/elements/00group-chart/dees-chart-area/styles.ts
 init_dist_ts30();
+init_theme();
 var chartAreaStyles = [
+  themeDefaultStyles,
   cssManager.defaultStyles,
   i`
       :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 {
@@ -172948,7 +172952,7 @@ var 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;
@@ -172960,13 +172964,13 @@ var 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;
@@ -172988,7 +172992,7 @@ var 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;
@@ -172999,15 +173003,15 @@ var 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;
@@ -174417,7 +174421,7 @@ __publicField(_DeesChartLog, "styles", [
         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 {
@@ -174435,7 +174439,7 @@ __publicField(_DeesChartLog, "styles", [
       .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;
       }
 
@@ -174452,10 +174456,10 @@ __publicField(_DeesChartLog, "styles", [
         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;
       }
 
@@ -174464,7 +174468,7 @@ __publicField(_DeesChartLog, "styles", [
       }
 
       .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 {
@@ -174475,35 +174479,35 @@ __publicField(_DeesChartLog, "styles", [
       .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 {
@@ -174519,11 +174523,11 @@ __publicField(_DeesChartLog, "styles", [
       }
 
       .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;
@@ -174531,9 +174535,9 @@ __publicField(_DeesChartLog, "styles", [
       }
 
       .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 {
@@ -174558,7 +174562,7 @@ __publicField(_DeesChartLog, "styles", [
         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;
       }
@@ -174610,7 +174614,7 @@ __publicField(_DeesChartLog, "styles", [
 
       .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 {
@@ -174823,6 +174827,7 @@ data = await processor.process_data([{'id': 1}, {'id': 2}])
 
 // ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
 init_dist_ts30();
+init_theme();
 init_dist_ts11();
 init_dist_ts29();
 init_services();
@@ -174852,11 +174857,11 @@ var _DeesDataviewCodebox = class _DeesDataviewCodebox extends (_a56 = DeesElemen
           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;
@@ -174874,7 +174879,7 @@ var _DeesDataviewCodebox = class _DeesDataviewCodebox extends (_a56 = DeesElemen
         }
 
         .bottomBar {
-          color: ${cssManager.bdTheme("#71717a", "#a1a1aa")};
+          color: var(--dees-color-text-muted);
           height: 28px;
           font-size: 11px;
           line-height: 28px;
@@ -174914,10 +174919,10 @@ var _DeesDataviewCodebox = class _DeesDataviewCodebox extends (_a56 = DeesElemen
         }
 
         .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 {
@@ -175053,6 +175058,10 @@ _DeesDataviewCodebox = __decorateElement(_init57, 0, "DeesDataviewCodebox", _Dee
 __name(_DeesDataviewCodebox, "DeesDataviewCodebox");
 __publicField(_DeesDataviewCodebox, "demo", demoFunc39);
 __publicField(_DeesDataviewCodebox, "demoGroups", ["Data View", "Workspace"]);
+__publicField(_DeesDataviewCodebox, "styles", [
+  themeDefaultStyles,
+  cssManager.defaultStyles
+]);
 __runInitializers(_init57, 1, _DeesDataviewCodebox);
 var DeesDataviewCodebox = _DeesDataviewCodebox;
 
@@ -175335,7 +175344,7 @@ __publicField(_DeesDataviewStatusobject, "styles", [
       }
 
       dees-tile {
-        color: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 98%)")};
+        color: var(--dees-color-text-primary);
         cursor: default;
       }
 
@@ -175354,7 +175363,7 @@ __publicField(_DeesDataviewStatusobject, "styles", [
         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;
       }
 
@@ -175371,21 +175380,21 @@ __publicField(_DeesDataviewStatusobject, "styles", [
       .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 {
@@ -175414,7 +175423,7 @@ __publicField(_DeesDataviewStatusobject, "styles", [
         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;
       }
@@ -175442,7 +175451,7 @@ __publicField(_DeesDataviewStatusobject, "styles", [
       .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;
@@ -175460,7 +175469,7 @@ __publicField(_DeesDataviewStatusobject, "styles", [
       }
 
       .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;
@@ -185508,7 +185517,9 @@ var PdfManager = class {
 
 // ts_web/elements/00group-media/dees-pdf-viewer/styles.ts
 init_dist_ts30();
+init_theme();
 var viewerStyles = [
+  themeDefaultStyles,
   cssManager.defaultStyles,
   i`
     :host {
@@ -185877,7 +185888,7 @@ var 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;
@@ -185891,7 +185902,7 @@ var 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 {
@@ -191070,9 +191081,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;
@@ -191096,8 +191106,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;
@@ -191108,7 +191118,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;
@@ -191121,7 +191131,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)"
@@ -191130,13 +191140,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;
@@ -191147,7 +191157,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 {
@@ -191159,12 +191169,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 {
@@ -191172,7 +191182,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;
       }
@@ -191190,25 +191200,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;
       }
 
@@ -191220,7 +191230,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 {
@@ -191235,7 +191245,7 @@ __publicField(_DeesSimpleAppDash, "styles", [
 
       .viewTab.selected dees-icon {
         opacity: 1;
-        color: ${cssManager.bdTheme("#0a0a0a", "#fafafa")};
+        color: var(--dees-color-text-primary);
       }
 
       .viewTab span {
@@ -191247,7 +191257,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 {
@@ -191258,7 +191268,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 {
@@ -191286,7 +191296,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;
       }
 
@@ -191326,14 +191336,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;
@@ -191352,9 +191362,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);
 
       }
 
@@ -191363,8 +191373,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 {
@@ -191399,7 +191409,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;
       }
 
@@ -191662,9 +191672,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%;
@@ -191681,7 +191690,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 {
@@ -191714,17 +191723,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;
       }
@@ -193467,15 +193476,15 @@ __publicField(_DeesWorkspaceTerminalPreview, "styles", [
         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;
       }
 
@@ -193629,12 +193638,12 @@ __publicField(_DeesWorkspaceTerminalPreview, "styles", [
       }
 
       .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);
       }
     `
 ]);
@@ -197169,7 +197178,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var 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."
 };
 export {
@@ -199136,4 +199145,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1775295441101.js.map
+//# sourceMappingURL=bundle-1775299834255.js.map