@design.estate/dees-catalog 3.55.2 → 3.55.3

package/dist_watch/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;
@@ -144989,7 +144989,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 --- */
@@ -144997,8 +144997,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;
@@ -145017,7 +145017,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 --- */
@@ -145025,8 +145025,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;
       }
 
@@ -145212,7 +145212,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;
@@ -145314,7 +145314,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;
@@ -145338,12 +145338,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 {
@@ -145361,7 +145361,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;
@@ -145385,8 +145385,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;
@@ -145397,8 +145397,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 {
@@ -145612,9 +145612,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) => {
@@ -146325,16 +146325,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 {
@@ -146342,8 +146342,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;
@@ -146356,16 +146356,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 {
@@ -146378,18 +146378,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 {
@@ -146409,7 +146409,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;
       }
 
@@ -149027,7 +149027,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);
       }
 
@@ -149108,7 +149108,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;
@@ -149164,7 +149164,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 {
@@ -167138,7 +167138,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`
@@ -167157,7 +167159,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 {
@@ -167165,7 +167167,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) {
@@ -167205,8 +167207,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 {
@@ -167222,7 +167224,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;
       }
 
@@ -167236,7 +167238,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;
@@ -167286,7 +167288,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%)")};
@@ -167294,12 +167296,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 {
@@ -167332,7 +167334,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;
@@ -167350,8 +167352,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;
@@ -167365,12 +167367,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);
       }
 
@@ -167387,19 +167389,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 {
@@ -168512,7 +168514,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;
@@ -168540,7 +168542,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;
       }
 
@@ -168568,18 +168570,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 {
@@ -168592,8 +168594,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;
       }
 
@@ -168656,7 +168658,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;
@@ -168671,7 +168673,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 {
@@ -168680,8 +168682,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 {
@@ -168689,7 +168691,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 {
@@ -168721,13 +168723,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;
       }
@@ -168750,12 +168752,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 {
@@ -168777,18 +168779,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,
@@ -168826,10 +168828,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;
@@ -168854,9 +168856,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;
@@ -168897,7 +168899,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;
       }
@@ -171722,7 +171724,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;
       }
 
@@ -171748,7 +171750,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 {
@@ -178264,14 +178266,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 {
@@ -178288,7 +178292,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;
@@ -178300,13 +178304,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;
@@ -178328,7 +178332,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;
@@ -178339,15 +178343,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;
@@ -179757,7 +179761,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 {
@@ -179775,7 +179779,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;
       }
 
@@ -179792,10 +179796,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;
       }
 
@@ -179804,7 +179808,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 {
@@ -179815,35 +179819,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 {
@@ -179859,11 +179863,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;
@@ -179871,9 +179875,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 {
@@ -179898,7 +179902,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;
       }
@@ -179950,7 +179954,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 {
@@ -180163,6 +180167,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();
@@ -180192,11 +180197,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;
@@ -180214,7 +180219,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;
@@ -180254,10 +180259,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 {
@@ -180393,6 +180398,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;
 
@@ -180675,7 +180684,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;
       }
 
@@ -180694,7 +180703,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;
       }
 
@@ -180711,21 +180720,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 {
@@ -180754,7 +180763,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;
       }
@@ -180782,7 +180791,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;
@@ -180800,7 +180809,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;
@@ -190848,7 +190857,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 {
@@ -191217,7 +191228,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;
@@ -191231,7 +191242,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 {
@@ -198805,15 +198816,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;
       }
 
@@ -198967,12 +198978,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);
       }
     `
 ]);