@design.estate/dees-catalog 3.90.1 → 3.92.0

package/ts_web/elements/00group-input/dees-input-datepicker/datepicker-popup.ts

@@ -106,18 +106,37 @@ export class DeesInputDatepickerPopup extends DeesElement {
         position: fixed;
         pointer-events: auto;
         will-change: transform, opacity;
-        transition: all 0.15s ease;
+        transition:
+          opacity var(--dees-transition-fast) var(--dees-ease-standard),
+          transform var(--dees-transition-fast) var(--dees-ease-standard);
         opacity: 0;
         transform: translateY(-4px);
-        background: var(--dees-color-bg-primary);
+        background: var(--dees-material-regular-bg);
+        -webkit-backdrop-filter: var(--dees-material-regular-filter);
+        backdrop-filter: var(--dees-material-regular-filter);
         border: 1px solid var(--dees-color-border-default);
         box-shadow: var(--dees-shadow-lg);
-        border-radius: 6px;
+        border-radius: var(--dees-radius-xl);
+        corner-shape: var(--dees-corner-shape);
         padding: 12px;
         user-select: none;
         min-width: 280px;
       }
 
+      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+        .calendar-popup {
+          background: var(--dees-material-regular-bg-opaque);
+        }
+      }
+
+      @media (prefers-reduced-transparency: reduce) {
+        .calendar-popup {
+          background: var(--dees-material-regular-bg-opaque);
+          -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+        }
+      }
+
       .calendar-popup.top {
         transform: translateY(4px);
       }
@@ -150,16 +169,18 @@ export class DeesInputDatepickerPopup extends DeesElement {
         border: none;
         background: transparent;
         cursor: pointer;
-        border-radius: 6px;
+        border-radius: var(--dees-radius-md);
         display: flex;
         align-items: center;
         justify-content: center;
-        color: var(--dees-color-text-muted);
-        transition: all 0.2s ease;
+        color: var(--dees-color-text-secondary);
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .nav-button:hover {
-        background: var(--dees-color-badge-default-bg);
+        background: var(--dees-color-hover);
         color: var(--dees-color-text-primary);
       }
 
@@ -191,9 +212,11 @@ export class DeesInputDatepickerPopup extends DeesElement {
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        border-radius: 6px;
-        font-size: 14px;
-        transition: all 0.2s ease;
+        border-radius: var(--dees-radius-full);
+        font-size: var(--dees-font-control-size);
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
         color: var(--dees-color-text-primary);
         border: none;
         width: 36px;
@@ -203,29 +226,27 @@ export class DeesInputDatepickerPopup extends DeesElement {
       }
 
       .day:hover:not(.disabled) {
-        background: var(--dees-color-badge-default-bg);
+        background: var(--dees-color-hover);
       }
 
       .day.other-month {
         color: var(--dees-color-text-muted);
-        opacity: 0.5;
       }
 
       .day.today {
-        background: var(--dees-color-badge-default-bg);
-        font-weight: 500;
+        color: var(--dees-color-accent-primary);
+        font-weight: 600;
       }
 
       .day.selected {
-        background: var(--dees-color-tooltip-bg);
-        color: var(--dees-color-tooltip-fg);
+        background: var(--dees-color-accent-primary);
+        color: var(--dees-color-on-accent);
         font-weight: 500;
       }
 
       .day.disabled {
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-label-quaternary);
         cursor: not-allowed;
-        opacity: 0.3;
       }
 
       /* Event indicators */
@@ -257,9 +278,9 @@ export class DeesInputDatepickerPopup extends DeesElement {
         min-width: 16px;
         height: 16px;
         padding: 0 4px;
-        background: var(--dees-color-text-error);
-        color: white;
-        border-radius: 8px;
+        background: var(--dees-color-accent-error);
+        color: var(--dees-color-on-accent);
+        border-radius: var(--dees-radius-full);
         font-size: 10px;
         font-weight: 600;
         display: flex;
@@ -297,7 +318,7 @@ export class DeesInputDatepickerPopup extends DeesElement {
         font-size: 12px;
         font-weight: 500;
         margin-bottom: 8px;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
       }
 
       .time-inputs {
@@ -308,21 +329,23 @@ export class DeesInputDatepickerPopup extends DeesElement {
 
       .time-input {
         width: 65px;
-        height: 36px;
+        height: var(--dees-control-height-md);
         border: 1px solid var(--dees-color-border-default);
-        border-radius: 6px;
+        border-radius: var(--dees-radius-md);
         padding: 0 12px;
-        font-size: 14px;
+        font-size: var(--dees-font-control-size);
         text-align: center;
         background: var(--dees-color-bg-primary);
         color: var(--dees-color-text-primary);
-        transition: all 0.2s ease;
+        transition:
+          border-color var(--dees-transition-fast) var(--dees-ease-standard),
+          box-shadow var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .time-input:focus {
         outline: none;
-        border-color: var(--dees-color-text-primary);
-        box-shadow: 0 0 0 2px color-mix(in srgb, var(--dees-color-text-primary) 10%, transparent);
+        border-color: var(--dees-color-accent-primary);
+        box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
       }
 
       .time-separator {
@@ -337,22 +360,24 @@ export class DeesInputDatepickerPopup extends DeesElement {
         padding: 6px 12px;
         border: 1px solid var(--dees-color-border-default);
         background: var(--dees-color-bg-primary);
-        border-radius: 6px;
+        border-radius: var(--dees-radius-md);
         font-size: 12px;
         font-weight: 500;
         cursor: pointer;
-        transition: all 0.2s ease;
-        color: var(--dees-color-text-muted);
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
+        color: var(--dees-color-text-secondary);
       }
 
       .am-pm-button.selected {
-        background: var(--dees-color-tooltip-bg);
-        color: var(--dees-color-tooltip-fg);
-        border-color: var(--dees-color-tooltip-bg);
+        background: var(--dees-color-accent-primary);
+        color: var(--dees-color-on-accent);
+        border-color: var(--dees-color-accent-primary);
       }
 
       .am-pm-button:hover:not(.selected) {
-        background: var(--dees-color-badge-default-bg);
+        background: var(--dees-color-hover);
       }
 
       /* Timezone selector */
@@ -366,16 +391,16 @@ export class DeesInputDatepickerPopup extends DeesElement {
         font-size: 12px;
         font-weight: 500;
         margin-bottom: 8px;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
       }
 
       .timezone-select {
         width: 100%;
-        height: 36px;
+        height: var(--dees-control-height-md);
         border: 1px solid var(--dees-color-border-default);
-        border-radius: 6px;
+        border-radius: var(--dees-radius-md);
         padding: 0 12px;
-        font-size: 14px;
+        font-size: var(--dees-font-control-size);
         background: var(--dees-color-bg-primary);
         color: var(--dees-color-text-primary);
         cursor: pointer;
@@ -392,13 +417,15 @@ export class DeesInputDatepickerPopup extends DeesElement {
 
       .action-button {
         flex: 1;
-        height: 36px;
+        height: var(--dees-control-height-md);
         border: none;
-        border-radius: 6px;
-        font-size: 14px;
+        border-radius: var(--dees-radius-md);
+        font-size: var(--dees-font-control-size);
         font-weight: 500;
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -411,13 +438,13 @@ export class DeesInputDatepickerPopup extends DeesElement {
       }
 
       .today-button:hover {
-        background: var(--dees-color-badge-default-bg);
+        background: var(--dees-color-hover);
       }
 
       .clear-action-button {
         background: transparent;
         border: 1px solid transparent;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
       }
 
       .clear-action-button:hover {

package/ts_web/elements/00group-input/dees-input-datepicker/styles.ts

@@ -17,43 +17,42 @@ export const datepickerStyles = [
 
       .date-input {
         width: 100%;
-        height: 40px;
+        height: var(--dees-control-height-lg);
         padding: 0 12px;
         background: var(--dees-color-bg-primary);
         border: 1px solid var(--dees-color-border-default);
-        border-radius: 6px;
-        font-size: 14px;
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        font-size: var(--dees-font-control-size);
         line-height: 1.5;
         color: var(--dees-color-text-primary);
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition:
+          border-color var(--dees-transition-fast) var(--dees-ease-standard),
+          box-shadow var(--dees-transition-fast) var(--dees-ease-standard),
+          background-color var(--dees-transition-fast) var(--dees-ease-standard);
         outline: none;
-        font-family: inherit;
+        font-family: var(--dees-font-family);
       }
 
       .date-input::placeholder {
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-label-quaternary);
       }
 
       .date-input:hover:not(:disabled) {
-        border-color: var(--dees-color-border-default);
-        background: var(--dees-color-badge-default-bg);
+        border-color: var(--dees-color-border-strong);
       }
 
       .date-input:focus,
       .date-input.open {
-        border-color: var(--dees-color-text-primary);
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-        box-shadow: 0 0 0 2px var(--dees-color-bg-primary),
-                    0 0 0 4px color-mix(in srgb, var(--dees-color-text-primary) 10%, transparent);
+        border-color: var(--dees-color-accent-primary);
+        box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
       }
 
       .date-input:disabled {
         background: var(--dees-color-badge-default-bg);
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-label-quaternary);
         cursor: not-allowed;
-        opacity: 0.5;
       }
 
       .icon-container {

package/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts

@@ -200,7 +200,6 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         height: 14px;
         color: var(--dees-color-text-muted);
         flex-shrink: 0;
-        opacity: 0.5;
       }
 
       .drag-handle {
@@ -424,8 +423,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .ghost-completion {
-        color: var(--dees-color-text-muted);
-        opacity: 0.5;
+        color: var(--dees-color-label-quaternary);
       }
     `,
   ];

package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts

@@ -54,10 +54,9 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
     ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         display: block;
-        font-family: system-ui, 'Segoe UI', 'Roboto', sans-serif;
+        font-family: var(--dees-font-family);
       }
 
       .input-wrapper {
@@ -74,7 +73,10 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         background: transparent;
         border: 1px solid var(--dees-color-border-default);
         border-radius: var(--dees-radius-lg);
-        transition: all 0.15s ease;
+        corner-shape: var(--dees-corner-shape);
+        transition:
+          border-color var(--dees-transition-fast) var(--dees-ease-standard),
+          box-shadow var(--dees-transition-fast) var(--dees-ease-standard);
         cursor: text;
       }
 
@@ -102,12 +104,12 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         background: color-mix(in srgb, var(--dees-color-text-primary) 10%, transparent);
         color: var(--dees-color-text-secondary);
         border: 1px solid color-mix(in srgb, var(--dees-color-text-primary) 15%, transparent);
-        border-radius: 4px;
+        border-radius: var(--dees-radius-xs);
         font-size: 13px;
         font-weight: 500;
         line-height: 18px;
         user-select: none;
-        animation: tagAppear 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+        animation: tagAppear var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       @keyframes tagAppear {
@@ -128,9 +130,11 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         width: 14px;
         height: 14px;
         margin-left: 2px;
-        border-radius: 3px;
+        border-radius: var(--dees-radius-xs);
         cursor: pointer;
-        transition: all 0.15s ease;
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
         color: var(--dees-color-text-muted);
       }
 
@@ -158,7 +162,7 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
       }
 
       .tag-input::placeholder {
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-label-quaternary);
       }
 
       .tag-input:disabled {
@@ -176,29 +180,46 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         left: 0;
         right: 0;
         margin-top: 4px;
-        background: var(--dees-color-bg-primary);
+        background: var(--dees-material-regular-bg);
+        -webkit-backdrop-filter: var(--dees-material-regular-filter);
+        backdrop-filter: var(--dees-material-regular-filter);
         border: 1px solid var(--dees-color-border-default);
-        border-radius: 6px;
-        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
+        border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
+        box-shadow: var(--dees-shadow-lg);
         max-height: 200px;
         overflow-y: auto;
         z-index: 1000;
       }
 
+      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+        .suggestions-dropdown {
+          background: var(--dees-material-regular-bg-opaque);
+        }
+      }
+
+      @media (prefers-reduced-transparency: reduce) {
+        .suggestions-dropdown {
+          background: var(--dees-material-regular-bg-opaque);
+          -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+        }
+      }
+
       .suggestion {
         padding: 6px 10px;
         cursor: pointer;
-        transition: all 0.15s ease;
+        transition: background-color var(--dees-transition-fast) var(--dees-ease-standard);
         font-size: 14px;
         color: var(--dees-color-text-primary);
       }
 
       .suggestion:hover {
-        background: var(--dees-color-badge-default-bg);
+        background: var(--dees-color-hover);
       }
 
       .suggestion.highlighted {
-        background: var(--dees-color-badge-default-bg);
+        background: var(--dees-color-active);
         color: var(--dees-color-text-primary);
       }
 

package/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts

@@ -82,8 +82,8 @@ export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
         height: 20px;
         width: 36px;
         border-radius: var(--dees-radius-full);
-        background: var(--dees-color-bg-primary);
-        border: 1px solid var(--dees-color-border-default);
+        background: var(--dees-color-fill-secondary);
+        border: 1px solid var(--dees-color-border-subtle);
         overflow: visible;
         transition: all var(--dees-transition-fast) var(--dees-ease-standard);
         margin-top: 0px;
@@ -109,7 +109,8 @@ export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
         width: 14px;
         height: 14px;
         border-radius: 50%;
-        background: var(--dees-color-text-muted);
+        background: var(--dees-color-control-thumb);
+        box-shadow: var(--dees-shadow-control-thumb);
         transition: left var(--dees-transition-default) var(--dees-ease-snappy), background var(--dees-transition-fast) var(--dees-ease-standard);
         touch-action: none;
       }

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/code.block.ts

@@ -3,7 +3,8 @@ import type { IBlock } from '../../wysiwyg.types.js';
 import { cssManager } from '@design.estate/dees-element';
 import { WysiwygSelection } from '../../wysiwyg.selection.js';
 import type { HLJSApi } from 'highlight.js';
-import { cssGeistFontFamily, cssMonoFontFamily } from '../../../../00fonts.js';
+import { cssMonoFontFamily } from '../../../../00fonts.js';
+import { syntaxPaletteStyles, syntaxScopeStyles } from '../../../../00syntax.js';
 import { PROGRAMMING_LANGUAGES } from '../../wysiwyg.constants.js';
 import { DeesServiceLibLoader } from '../../../../../services/index.js';
 
@@ -447,17 +448,8 @@ export class CodeBlockHandler extends BaseBlockHandler {
   
   getStyles(): string {
     return `
-      /* syntax palette (dark defaults, gobright overrides below) */
-      :host {
-        --wysiwyg-syntax-green: #10b981;
-        --wysiwyg-syntax-purple: #a78bfa;
-        --wysiwyg-syntax-orange: #fb923c;
-      }
-      :host([gobright]) {
-        --wysiwyg-syntax-green: #059669;
-        --wysiwyg-syntax-purple: #7c3aed;
-        --wysiwyg-syntax-orange: #ea580c;
-      }
+      /* shared syntax palette (system code colors, dark defaults + gobright overrides) */
+      ${syntaxPaletteStyles.cssText}
 
       /* Code Block Container - Minimalist shadcn style */
       .code-block-container {
@@ -495,7 +487,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        font-family: ${cssGeistFontFamily};
+        font-family: var(--dees-font-family);
         background: transparent;
         border: 1px solid transparent;
         border-radius: 4px;
@@ -526,7 +518,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         border-radius: 4px;
         color: var(--dees-color-text-muted);
         font-size: 12px;
-        font-family: ${cssGeistFontFamily};
+        font-family: var(--dees-font-family);
         cursor: pointer;
         transition: all 0.15s ease;
         outline: none;
@@ -543,7 +535,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
       }
       
       .copy-button.copied {
-        color: var(--wysiwyg-syntax-green);
+        color: var(--dees-color-text-success);
       }
       
       .copy-icon {
@@ -633,79 +625,8 @@ export class CodeBlockHandler extends BaseBlockHandler {
         color: inherit !important;
       }
       
-      /* Syntax Highlighting - Muted colors */
-      .code-editor .hljs-keyword {
-        color: var(--dees-color-text-error);
-        font-weight: 500;
-      }
-      
-      .code-editor .hljs-string {
-        color: var(--wysiwyg-syntax-green);
-      }
-      
-      .code-editor .hljs-number {
-        color: var(--wysiwyg-syntax-purple);
-      }
-      
-      .code-editor .hljs-function {
-        color: var(--dees-color-link);
-      }
-      
-      .code-editor .hljs-comment {
-        color: var(--dees-color-text-muted);
-        font-style: italic;
-      }
-      
-      .code-editor .hljs-variable,
-      .code-editor .hljs-attr {
-        color: var(--wysiwyg-syntax-orange);
-      }
-      
-      .code-editor .hljs-class,
-      .code-editor .hljs-title {
-        color: var(--dees-color-link);
-        font-weight: 500;
-      }
-      
-      .code-editor .hljs-params {
-        color: var(--dees-color-text-primary);
-      }
-      
-      .code-editor .hljs-built_in {
-        color: var(--wysiwyg-syntax-purple);
-      }
-      
-      .code-editor .hljs-literal {
-        color: var(--wysiwyg-syntax-purple);
-      }
-      
-      .code-editor .hljs-meta {
-        color: var(--dees-color-text-muted);
-      }
-      
-      .code-editor .hljs-punctuation {
-        color: var(--dees-color-text-secondary);
-      }
-      
-      .code-editor .hljs-tag {
-        color: var(--dees-color-text-error);
-      }
-      
-      .code-editor .hljs-attribute {
-        color: var(--dees-color-link);
-      }
-      
-      .code-editor .hljs-selector-tag {
-        color: var(--dees-color-text-error);
-      }
-      
-      .code-editor .hljs-selector-class {
-        color: var(--dees-color-link);
-      }
-      
-      .code-editor .hljs-selector-id {
-        color: var(--wysiwyg-syntax-purple);
-      }
+      /* Syntax highlighting — shared highlight.js scope mapping */
+      ${syntaxScopeStyles.cssText}
       
       /* Selection */
       .code-editor::selection,

package/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts

@@ -859,17 +859,21 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
           <style>
             .link-input {
               width: 100%;
-              padding: 12px;
-              font-size: 16px;
-              border: 1px solid var(--dees-color-line-bright);
-              border-radius: 4px;
-              background: var(--dees-color-input);
-              color: var(--dees-color-text);
+              box-sizing: border-box;
+              height: var(--dees-control-height-lg);
+              padding: 0 12px;
+              font-size: var(--dees-font-control-size);
+              font-family: var(--dees-font-family);
+              border: 1px solid var(--dees-color-border-default);
+              border-radius: var(--dees-radius-lg);
+              background: var(--dees-color-bg-primary);
+              color: var(--dees-color-text-primary);
               margin: 16px 0;
             }
             .link-input:focus {
               outline: none;
-              border-color: var(--dees-color-primary);
+              border-color: var(--dees-color-accent-primary);
+              box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
             }
           </style>
           <input 

package/ts_web/elements/00group-layout/dees-chips/dees-chips.ts

@@ -118,7 +118,7 @@ export class DeesChips extends DeesElement {
         border-radius: 4px;
         font-size: 12px;
         font-weight: 600;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
       }
 
       .chip.selected .chipKey {