@design.estate/dees-catalog 3.91.0 → 3.92.0

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

@@ -28,37 +28,52 @@ export class DeesPagination extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         display: inline-flex;
         align-items: center;
+        gap: 2px;
+        font-family: var(--dees-font-family);
       }
       button {
         background: none;
         border: none;
-        margin: 0 2px;
-        padding: 6px 10px;
-        font-size: 14px;
+        min-width: var(--dees-control-height-sm);
+        height: var(--dees-control-height-sm);
+        padding: 0 6px;
+        font-size: var(--dees-font-control-size);
+        font-variant-numeric: tabular-nums;
         cursor: pointer;
         color: var(--dees-color-text-secondary);
-        border-radius: 3px;
-        transition: background 0.2s;
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard);
       }
       button:hover:not(:disabled) {
-        background: color-mix(in srgb, var(--dees-color-text-primary) 9%, var(--dees-color-bg-primary));
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+      button:active:not(:disabled) {
+        background: var(--dees-color-active);
+      }
+      button:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
       }
       button:disabled {
         cursor: default;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-label-quaternary);
       }
       button.current {
-        background: #0050b9;
-        color: #fff;
+        background: var(--dees-color-accent-primary);
+        color: var(--dees-color-on-accent);
+        font-weight: 600;
         cursor: default;
       }
       span.ellipsis {
         margin: 0 4px;
-        color: var(--dees-color-text-secondary);
+        color: var(--dees-color-text-muted);
       }
     `,
   ];

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

@@ -79,7 +79,7 @@ export class DeesSettings extends DeesElement {
         font-size: 11px;
         text-transform: uppercase;
         letter-spacing: 0.03em;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
       }
 
       .fieldValue {

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

@@ -13,7 +13,6 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { stepperDemo } from './dees-stepper.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
-import { cssGeistFontFamily } from '../../00fonts.js';
 import { zIndexRegistry } from '../../00zindex.js';
 import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
 import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
@@ -137,15 +136,8 @@ export class DeesStepper extends DeesElement {
         position: absolute;
         width: 100%;
         height: 100%;
-        font-family: ${cssGeistFontFamily};
+        font-family: var(--dees-font-family);
         color: var(--dees-color-text-primary);
-              /* floating-tile shadows (dark defaults, bright overrides below) */
-        --tile-shadow-far: hsl(0 0% 0% / 0.5);
-        --tile-shadow-near: hsl(0 0% 0% / 0.25);
-      }
-      :host([gobright]) {
-        --tile-shadow-far: hsl(0 0% 0% / 0.12);
-        --tile-shadow-near: hsl(0 0% 0% / 0.06);
       }
 
       /*
@@ -227,8 +219,7 @@ export class DeesStepper extends DeesElement {
       .stepperContainer.overlay dees-tile.step::part(outer) {
         box-shadow:
           0 0 0 1px color-mix(in srgb, var(--dees-color-text-primary) 3%, transparent),
-          0 8px 40px var(--tile-shadow-far),
-          0 2px 8px var(--tile-shadow-near);
+          var(--dees-shadow-lg);
       }
 
       .stepperContainer:not(.overlay) dees-tile.step {
@@ -261,9 +252,12 @@ export class DeesStepper extends DeesElement {
         border: none;
         background: transparent;
         color: var(--dees-color-text-muted);
-        border-radius: 4px;
+        border-radius: var(--dees-radius-sm);
         cursor: pointer;
-        transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
+        transition:
+          background-color var(--dees-transition-fast) var(--dees-ease-standard),
+          color var(--dees-transition-fast) var(--dees-ease-standard),
+          transform var(--dees-transition-default) var(--dees-ease-standard);
       }
 
       .step-header .goBack:hover {
@@ -277,7 +271,7 @@ export class DeesStepper extends DeesElement {
       }
 
       .step-header .goBack span {
-        transition: transform 0.2s ease;
+        transition: transform var(--dees-transition-default) var(--dees-ease-standard);
         display: inline-block;
       }
 
@@ -296,7 +290,7 @@ export class DeesStepper extends DeesElement {
       .step-body .title {
         text-align: center;
         padding-top: 32px;
-        font-family: 'Geist Sans', sans-serif;
+        font-family: var(--dees-font-family);
         font-size: 24px;
         font-weight: 600;
         letter-spacing: -0.01em;
@@ -335,7 +329,9 @@ export class DeesStepper extends DeesElement {
         font-weight: 500;
         cursor: pointer;
         user-select: none;
-        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);
         background: transparent;
         border: none;
         color: var(--dees-color-text-muted);
@@ -423,7 +419,7 @@ export class DeesStepper extends DeesElement {
             <div slot="header" class="step-header">
               ${showBackButton
                 ? html`<div class="goBack" @click=${this.goBack}>
-                    <span style="font-family: Inter"><-</span> go to previous step
+                    <span><-</span> go to previous step
                   </div>`
                 : html`<div class="goBack-spacer"></div>`}
               <div class="stepCounter">

package/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts

@@ -173,8 +173,8 @@ export class DeesContextmenu extends DeesElement {
         box-shadow: var(--dees-shadow-lg);
         user-select: none;
         padding: var(--dees-spacing-xs) 0;
-        font-size: var(--dees-font-caption1-size);
-        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-control-size-sm);
+        color: var(--dees-color-text-primary);
       }
 
       @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -211,7 +211,7 @@ export class DeesContextmenu extends DeesElement {
         position: absolute;
         right: var(--dees-spacing-sm);
         font-size: 16px;
-        opacity: 0.5;
+        color: var(--dees-color-text-secondary);
       }
 
       .menuitem:active:not(.has-submenu) {
@@ -226,7 +226,7 @@ export class DeesContextmenu extends DeesElement {
 
       .menuitem dees-icon {
         font-size: 14px;
-        opacity: 0.7;
+        color: var(--dees-color-text-secondary);
       }
 
       .menuitem-text {
@@ -235,9 +235,8 @@ export class DeesContextmenu extends DeesElement {
 
       .menuitem-shortcut {
         font-size: var(--dees-font-caption2-size);
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         margin-left: auto;
-        opacity: 0.7;
       }
 
       .menu-divider {

package/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -149,34 +149,19 @@ export class DeesModal extends DeesElement {
         transition: transform var(--dees-transition-slow) var(--dees-ease-spring), opacity var(--dees-transition-default) var(--dees-ease-standard);
         margin: 40px;
         overscroll-behavior: contain;
-        --dees-tile-surface: var(--dees-material-thick-bg);
+        /* Opaque dialog surface (white light / elevated #1c1c1e dark): modals
+           host reading content and forms, where content bleeding through a
+           frosted surface distracts. Translucent materials stay reserved for
+           transient chrome (menus, popovers, toasts). */
+        --dees-tile-surface: var(--dees-material-thick-bg-opaque);
       }
 
       dees-tile::part(outer) {
-        -webkit-backdrop-filter: var(--dees-material-thick-filter);
-        backdrop-filter: var(--dees-material-thick-filter);
         box-shadow:
           0 0 0 1px color-mix(in srgb, var(--dees-color-text-primary) 3%, transparent),
           var(--dees-shadow-xl);
       }
 
-      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-        dees-tile {
-          --dees-tile-surface: var(--dees-material-thick-bg-opaque);
-        }
-      }
-
-      @media (prefers-reduced-transparency: reduce) {
-        dees-tile {
-          --dees-tile-surface: var(--dees-material-thick-bg-opaque);
-        }
-
-        dees-tile::part(outer) {
-          -webkit-backdrop-filter: none;
-          backdrop-filter: none;
-        }
-      }
-
       /* Width variations */
       dees-tile.width-small {
         width: 380px;

package/ts_web/elements/00group-overlay/dees-windowlayer/dees-windowlayer.ts

@@ -1,5 +1,6 @@
-import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
+import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, cssManager, } from '@design.estate/dees-element';
 import { zIndexLayers, zIndexRegistry } from '../../00zindex.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,6 +28,10 @@ export class DeesWindowLayer extends DeesElement {
   public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
   public static demoGroups = ['Overlay'];
 
+  /* Rendered styles are dynamic (z-index, blur options); the static styles
+     only provide the theme tokens the rendered <style> consumes. */
+  public static styles = [themeDefaultStyles, cssManager.defaultStyles];
+
   public static async createAndShow(optionsArg?: IOptions_DeesWindowLayer) {
     const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
     const windowLayer = new DeesWindowLayer();
@@ -109,7 +114,9 @@ export class DeesWindowLayer extends DeesElement {
       ${domtools.elementBasic.styles}
       <style>
         .windowOverlay {
-          transition: all 0.2s;
+          transition:
+            background-color var(--dees-transition-default) var(--dees-ease-standard),
+            backdrop-filter var(--dees-transition-default) var(--dees-ease-standard);
           will-change: transform;
           position: fixed;
           top: 0px;
@@ -141,7 +148,7 @@ export class DeesWindowLayer extends DeesElement {
         }
         
         .visible {
-          background: ${this.options.dimmed === false ? 'transparent' : 'rgba(0, 0, 0, 0.2)'};
+          background: ${this.options.dimmed === false ? 'transparent' : 'var(--dees-color-scrim)'};
           -webkit-backdrop-filter: ${this.options.dimmed === false ? 'none' : `brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''}`};
           backdrop-filter: ${this.options.dimmed === false ? 'none' : `brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''}`};
           pointer-events: all;

package/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts

@@ -157,7 +157,7 @@ export class DeesShoppingProductcard extends DeesElement {
       .product-category {
         font-size: var(--dees-font-caption2-size);
         font-weight: var(--dees-font-control-weight);
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         text-transform: uppercase;
         letter-spacing: 0.05em;
         white-space: nowrap;

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -85,14 +85,15 @@ export class DeesSimpleAppDash extends DeesElement {
         position: relative;
         height: 100%;
         width: 100%;
-        /* scroll-fade gradient pairs (dark defaults, bright override below) */
-        --appdash-fade-strong: hsl(0 0% 0% / 0.4);
-        --appdash-fade-soft: hsl(0 0% 0% / 0.12);
+        /* scroll-fade gradient pairs — neutral shadow tints, stronger in dark
+           (dark defaults, bright override below) */
+        --appdash-fade-strong: rgba(0, 0, 0, 0.4);
+        --appdash-fade-soft: rgba(0, 0, 0, 0.12);
       }
 
       :host([gobright]) {
-        --appdash-fade-strong: hsl(0 0% 0% / 0.08);
-        --appdash-fade-soft: hsl(0 0% 0% / 0.03);
+        --appdash-fade-strong: rgba(0, 0, 0, 0.08);
+        --appdash-fade-soft: rgba(0, 0, 0, 0.03);
       }
 
       .maincontainer {
@@ -184,7 +185,7 @@ export class DeesSimpleAppDash extends DeesElement {
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
         padding: var(--dees-spacing-sm) var(--dees-spacing-md);
         margin-bottom: var(--dees-spacing-xs);
       }
@@ -863,7 +864,7 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.style.opacity = '0';
     terminal.style.transform = 'translateY(8px) scale(0.99)';
     terminal.style.transition = 'all 0.25s var(--dees-ease-standard)';
-    terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
+    terminal.style.boxShadow = 'var(--dees-shadow-xl), 0 0 0 1px var(--dees-color-border-subtle)';
     
     // Add close button to terminal
     terminal.addEventListener('close', () => this.closeTerminal());

package/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts

@@ -731,7 +731,7 @@ testSmartPromise();
       .problem-location {
         margin-top: 2px;
         font-size: var(--dees-font-caption2-size);
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
       }
 
       .problems-empty {

package/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts

@@ -244,8 +244,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
         padding: 4px;
         border-radius: 4px;
         cursor: pointer;
-        opacity: 0.7;
-        transition: opacity 0.15s, background 0.15s;
+        transition: color 0.15s, background 0.15s;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -253,7 +252,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
       }
 
       .toolbar-button:hover {
-        opacity: 1;
+        color: var(--dees-color-text-primary);
         background: var(--dees-color-pressed);
       }
     `,

package/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts

@@ -7,6 +7,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
+import { syntaxPaletteStyles, syntaxScopeStyles } from '../../00syntax.js';
 import { demoFunc } from './dees-workspace-markdownoutlet.demo.js';
 
 declare global {
@@ -26,16 +27,10 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        /* GitHub-flavored palette (dark defaults, bright overrides below) */
+        /* callout accent (dark default, bright override below) */
         --mdoutlet-purple: #a371f7;
-        --mdoutlet-syntax-keyword: #ff7b72;
-        --mdoutlet-syntax-string: #a5d6ff;
-        --mdoutlet-syntax-entity: #d2a8ff;
-        --mdoutlet-syntax-constant: #79c0ff;
-        --mdoutlet-syntax-variable: #ffa657;
-        --mdoutlet-syntax-deleted: #ffa198;
         display: block;
-        font-family: system-ui, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+        font-family: var(--dees-font-family);
         font-size: 16px;
         line-height: 1.6;
         color: var(--dees-color-text-primary);
@@ -43,12 +38,6 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement {
 
       :host([gobright]) {
         --mdoutlet-purple: #8250df;
-        --mdoutlet-syntax-keyword: #d73a49;
-        --mdoutlet-syntax-string: #032f62;
-        --mdoutlet-syntax-entity: #6f42c1;
-        --mdoutlet-syntax-constant: #005cc5;
-        --mdoutlet-syntax-variable: #e36209;
-        --mdoutlet-syntax-deleted: #b31d28;
       }
 
       .outlet {
@@ -90,7 +79,7 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement {
 
       h6 {
         font-size: 0.85em;
-        color: var(--dees-color-text-muted);
+        color: var(--dees-color-text-secondary);
       }
 
       /* Paragraphs and text */
@@ -330,72 +319,13 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement {
         background-color: color-mix(in srgb, var(--dees-color-text-success) 10%, transparent);
       }
 
-      /* Syntax highlighting for code blocks */
-      .hljs-comment,
-      .hljs-quote {
-        color: var(--dees-color-text-muted);
-      }
-
-      .hljs-keyword,
-      .hljs-selector-tag,
-      .hljs-addition {
-        color: var(--mdoutlet-syntax-keyword);
-      }
-
-      .hljs-number,
-      .hljs-string,
-      .hljs-meta .hljs-meta-string,
-      .hljs-literal,
-      .hljs-doctag,
-      .hljs-regexp {
-        color: var(--mdoutlet-syntax-string);
-      }
-
-      .hljs-title,
-      .hljs-section,
-      .hljs-name,
-      .hljs-selector-id,
-      .hljs-selector-class {
-        color: var(--mdoutlet-syntax-entity);
-      }
-
-      .hljs-attribute,
-      .hljs-attr,
-      .hljs-variable,
-      .hljs-template-variable,
-      .hljs-class .hljs-title,
-      .hljs-type {
-        color: var(--mdoutlet-syntax-constant);
-      }
-
-      .hljs-symbol,
-      .hljs-bullet,
-      .hljs-subst,
-      .hljs-meta,
-      .hljs-meta .hljs-keyword,
-      .hljs-selector-attr,
-      .hljs-selector-pseudo,
-      .hljs-link {
-        color: var(--mdoutlet-syntax-variable);
-      }
-
-      .hljs-built_in,
-      .hljs-deletion {
-        color: var(--mdoutlet-syntax-deleted);
-      }
-
       .hljs-formula {
         background-color: var(--dees-color-code-block-bg);
       }
-
-      .hljs-emphasis {
-        font-style: italic;
-      }
-
-      .hljs-strong {
-        font-weight: bold;
-      }
     `,
+    /* Shared system syntax palette + highlight.js scope mapping */
+    syntaxPaletteStyles,
+    syntaxScopeStyles,
   ];
 
   // INSTANCE

package/ts_web/elements/00syntax.ts

@@ -0,0 +1,124 @@
+import { css, unsafeCSS, type CSSResult } from '@design.estate/dees-element';
+
+/**
+ * Shared code-syntax palette — system code colors.
+ *
+ * Single source of truth for syntax highlighting across the catalog
+ * (dees-dataview-codebox, the wysiwyg code block, dees-workspace-markdownoutlet).
+ * Role colors are drawn from the same system palette as the terminal ANSI
+ * colors in 00theme.ts; function/comment/plain roles map onto the shared
+ * label/link tokens so they track the theme automatically.
+ *
+ * Components include both CSSResults in their static styles:
+ * `syntaxPaletteStyles` emits the `--dees-syntax-*` custom properties
+ * (dark defaults on :host, light overrides on :host([gobright])), and
+ * `syntaxScopeStyles` maps highlight.js 11 scope classes onto them.
+ */
+export interface ISyntaxPalette {
+  keyword: string;
+  string: string;
+  number: string;
+  type: string;
+}
+
+/** Dark-theme syntax role colors (system palette). */
+export const syntaxPaletteDark: ISyntaxPalette = {
+  keyword: '#bf5af2',
+  string: '#30d158',
+  number: '#ff9f0a',
+  type: '#64d2ff',
+};
+
+/** Light-theme syntax role colors (accessible-on-light system palette). */
+export const syntaxPaletteLight: ISyntaxPalette = {
+  keyword: '#9f00a7',
+  string: '#248a3d',
+  number: '#b25000',
+  type: '#0071a4',
+};
+
+const paletteVars = (palette: ISyntaxPalette): string =>
+  Object.entries(palette)
+    .map(([role, value]) => `--dees-syntax-${role}: ${value};`)
+    .join('\n    ');
+
+export const syntaxPaletteStyles: CSSResult = css`
+  :host {
+    ${unsafeCSS(paletteVars(syntaxPaletteDark))}
+  }
+
+  :host([gobright]) {
+    ${unsafeCSS(paletteVars(syntaxPaletteLight))}
+  }
+`;
+
+/** highlight.js 11 scope classes → syntax roles + shared theme tokens. */
+export const syntaxScopeStyles: CSSResult = css`
+  .hljs-keyword,
+  .hljs-literal,
+  .hljs-selector-tag,
+  .hljs-doctag,
+  .hljs-template-tag {
+    color: var(--dees-syntax-keyword);
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition {
+    color: var(--dees-syntax-string);
+  }
+
+  .hljs-number,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-meta,
+  .hljs-link {
+    color: var(--dees-syntax-number);
+  }
+
+  .hljs-built_in,
+  .hljs-type,
+  .hljs-title.class_,
+  .hljs-selector-class,
+  .hljs-selector-id,
+  .hljs-selector-pseudo,
+  .hljs-selector-attr,
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-property,
+  .hljs-variable.language_ {
+    color: var(--dees-syntax-type);
+  }
+
+  .hljs-title,
+  .hljs-section,
+  .hljs-name {
+    color: var(--dees-color-link);
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--dees-color-text-secondary);
+  }
+
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-subst,
+  .hljs-operator,
+  .hljs-punctuation,
+  .hljs-params {
+    color: var(--dees-color-text-primary);
+  }
+
+  .hljs-deletion {
+    color: var(--dees-color-text-error);
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: 600;
+  }
+`;

package/ts_web/elements/00theme.ts

@@ -353,22 +353,28 @@ export const themeDefaults: ITheme = {
     dark: {
       thin: { bg: 'rgba(30, 30, 30, 0.55)', filter: 'blur(20px) saturate(180%)', bgOpaque: '#1c1c1e' },
       regular: { bg: 'rgba(30, 30, 30, 0.72)', filter: 'blur(30px) saturate(180%)', bgOpaque: '#1c1c1e' },
-      thick: { bg: 'rgba(20, 20, 20, 0.85)', filter: 'blur(40px) saturate(180%)', bgOpaque: '#000000' },
+      /* Thick = the most substantial surface (modals/sheets). In dark it sits
+         at the elevated card tone (#1c1c1e) so it lifts off the black canvas —
+         the old rgba(20,20,20)/#000000 pair sank below the ladder and dissolved
+         into the scrim, while the brighter #2c2c2e tone read too light. */
+      thick: { bg: 'rgba(28, 28, 30, 0.85)', filter: 'blur(40px) saturate(180%)', bgOpaque: '#1c1c1e' },
     },
   },
   // Control heights. keeps controls that sit together the same height, so
-  // these map to roles rather than to individual components:
-  //   sm (32) — compact toolbar / table-row / dense controls
-  //   md (36) — secondary / tighter contexts
-  //   lg (40) — STANDARD interactive control: text fields, dropdowns, the
+  // these map to roles rather than to individual components. Anchored to
+  // macOS desktop metrics (regular push button ≈ 28px, large ≈ 32px), not
+  // iOS touch targets — touch-first surfaces opt into xl:
+  //   sm (24) — compact toolbar / table-row / dense controls
+  //   md (28) — secondary / tighter contexts (macOS regular control)
+  //   lg (32) — STANDARD interactive control: text fields, dropdowns, the
   //             segmented control and the default button all use this so they
   //             line up when placed alongside each other
-  //   xl (48) — prominent / touch-first CTA
+  //   xl (40) — prominent CTA / touch-first contexts
   controlHeights: {
-    sm: '32px',
-    md: '36px',
-    lg: '40px',
-    xl: '48px',
+    sm: '24px',
+    md: '28px',
+    lg: '32px',
+    xl: '40px',
   },
   // Terminal (xterm) — background/foreground/cursor are composed from `colors`
   // in terminal-tab-manager; only the selection tint + ANSI palette live here.
@@ -491,10 +497,11 @@ export const themeDefaultStyles: CSSResult = css`
     --dees-font-family: ${cssSystemFontFamily};
     --dees-font-family-mono: ${cssMonoFontFamily};
 
-    /* Dense-UI convenience sizes (dashboards/controls; the full design body is 17px). */
-    --dees-font-control-size: 14px;
+    /* Dense-UI convenience sizes (dashboards/controls; the full design body is 17px).
+       13px matches the macOS system control text size. */
+    --dees-font-control-size: 13px;
     --dees-font-control-weight: 500;
-    --dees-font-control-size-sm: 13px;
+    --dees-font-control-size-sm: 12px;
 
     /* ========================================
      * Typography — design scale
@@ -603,6 +610,11 @@ export const themeDefaultStyles: CSSResult = css`
      * ======================================== */
     --dees-color-selection: ${cssManager.bdTheme('rgba(0, 122, 255, 0.2)', 'rgba(10, 132, 255, 0.3)')};
 
+    /* ========================================
+     * Colors — Scrim (the dim behind modals/sheets/overlays)
+     * ======================================== */
+    --dees-color-scrim: ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.4)')};
+
     /* ========================================
      * Colors — Scrollbar
      * ======================================== */