@moldable-ai/ui 0.2.26 → 0.2.31

package/src/tokens/macos-27/compatibility.css

@@ -0,0 +1,212 @@
+/*
+ * Complete compatibility surface for components that still consume the
+ * pre-platform Moldable/shadcn semantic contract.
+ *
+ * This adapter is intentionally part of the versioned platform pack. It
+ * prevents :root, .dark, Tailwind theme, and application defaults from
+ * leaking into the raw macOS 27 profile while components migrate to
+ * --m-ui-* roles.
+ */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  /* Typography */
+  --font-family-ui: var(--m27-source-font-family-ui);
+  --type-display-size: var(--m27-source-type-large-title-size);
+  --type-display-line-height: var(--m27-source-type-large-title-line-height);
+  --type-display-weight: var(--m27-source-type-large-title-emphasized-weight);
+  --type-display-tracking: 0;
+  --type-heading-size: var(--m27-source-type-title-2-size);
+  --type-heading-line-height: var(--m27-source-type-title-2-line-height);
+  --type-heading-weight: var(--m27-source-type-title-2-emphasized-weight);
+  --type-heading-tracking: 0;
+  --type-title-size: var(--m27-source-type-title-3-size);
+  --type-title-line-height: var(--m27-source-type-title-3-line-height);
+  --type-title-weight: var(--m27-source-type-title-3-emphasized-weight);
+  --type-title-tracking: 0;
+  --type-body-size: var(--m27-source-type-body-size);
+  --type-body-line-height: var(--m27-source-type-body-line-height);
+  --type-label-size: var(--m27-source-type-headline-size);
+  --type-label-line-height: var(--m27-source-type-headline-line-height);
+  --type-caption-size: var(--m27-source-type-caption-1-size);
+  --type-caption-line-height: var(--m27-source-type-caption-1-line-height);
+  --type-badge-size: var(--m27-source-type-caption-1-size);
+  --type-badge-line-height: var(--m27-source-type-caption-1-line-height);
+
+  /* Density and geometry */
+  --density-control-height-xs: 16px;
+  --density-control-height-sm: 20px;
+  --density-control-height-md: 24px;
+  --density-control-height-lg: 28px;
+  --density-control-height-xl: 36px;
+  --density-control-gap: var(--m27-source-chrome-toolbar-control-group-gap);
+  --density-control-padding-inline: var(
+    --m27-source-size-button-padding-inline
+  );
+  --density-badge-height: 18px;
+  --density-badge-padding-inline: 6px;
+  --density-row-height: var(--m27-source-chrome-sidebar-medium-row-height);
+  --density-toolbar-height: var(--m27-source-chrome-toolbar-unified-height);
+  --density-pane-padding: var(--m27-source-chrome-menu-padding-inline);
+  --density-section-gap: var(--m27-source-chrome-toolbar-unified-padding-block);
+
+  --shape-control: var(--m27-source-size-control-radius);
+  --shape-checkbox: var(--m27-source-size-checkboxes-radius);
+  --shape-popover: var(--m27-source-popover-radius);
+  --shape-card: var(--m27-source-chrome-menu-radius);
+  --shape-group: var(--m27-source-chrome-menu-radius);
+  --shape-panel: var(--m27-source-chrome-window-radius);
+  --shape-dialog: var(--m27-source-dialog-radius);
+  --shape-pill: 9999px;
+  --shape-container: var(--shape-card);
+  --shape-overlay: var(--shape-popover);
+  --radius: var(--shape-card);
+
+  /* Foundational colors */
+  --background: var(--m27-source-color-window-background);
+  --foreground: var(--m27-source-color-label-primary);
+  --card: var(--m27-source-color-window-background);
+  --card-foreground: var(--m27-source-color-label-primary);
+  --popover: var(--m27-source-color-window-background);
+  --popover-foreground: var(--m27-source-color-label-primary);
+  --primary: var(--m27-source-color-accent-blue);
+  --primary-foreground: var(--m27-source-color-label-white);
+  --prominent: var(--m27-source-color-accent-blue);
+  --prominent-foreground: var(--m27-source-color-label-white);
+  --secondary: var(--m27-source-color-fill-secondary);
+  --secondary-foreground: var(--m27-source-color-label-primary);
+  --muted: var(--m27-source-color-fill-quinary);
+  --muted-foreground: var(--m27-source-color-label-secondary);
+  --accent: var(--m27-source-color-fill-primary);
+  --accent-foreground: var(--m27-source-color-label-primary);
+  --destructive: var(--m27-source-color-accent-red);
+  --destructive-foreground: var(--m27-source-color-label-white);
+  --border: var(--m27-source-color-fill-primary);
+  --input: var(--m27-source-color-fill-primary);
+  --ring: var(--m27-source-color-accent-blue);
+
+  --info: var(--m27-source-color-accent-blue);
+  --info-foreground: var(--m27-source-color-accent-blue);
+  --neutral: var(--m27-source-color-gray);
+  --neutral-foreground: var(--m27-source-color-label-secondary);
+  --pending: var(--m27-source-color-accent-yellow);
+  --pending-foreground: var(--m27-source-color-accent-yellow);
+  --warning: var(--m27-source-color-accent-orange);
+  --warning-foreground: var(--m27-source-color-accent-orange);
+  --success: var(--m27-source-color-accent-green);
+  --success-foreground: var(--m27-source-color-accent-green);
+  --status-running: var(--m27-source-color-accent-green);
+  --status-stopped: var(--m27-source-color-gray);
+  --status-pending: var(--m27-source-color-accent-yellow);
+  --status-error: var(--m27-source-color-accent-red);
+
+  /* Stable semantic roles */
+  --text-primary: var(--m27-source-color-label-primary);
+  --text-secondary: var(--m27-source-color-label-secondary);
+  --text-tertiary: var(--m27-source-color-label-tertiary);
+  --text-disabled: var(--m27-source-color-label-tertiary);
+  --surface-canvas: var(--m27-source-color-window-background);
+  --surface-raised: var(--m27-source-color-window-background);
+  --surface-recessed: var(--m27-source-color-fill-quinary);
+  --surface-sidebar: var(--m-ui-sidebar-material-fill);
+  --surface-toolbar: var(--m27-source-material-medium-fill);
+  --surface-overlay: var(--m27-source-material-medium-fill);
+  --surface-selected: var(--m27-source-color-fill-primary);
+  --separator: var(--m27-source-color-fill-primary);
+  --separator-strong: var(--m27-source-color-table-column-separator);
+  --control-hover: var(--m27-source-color-fill-quinary);
+  --control-pressed: var(--m27-source-color-fill-primary);
+  --control-selected: var(--m27-source-color-fill-primary);
+  --control-selected-foreground: var(--m27-source-color-label-primary);
+  --control-disabled: var(--m27-source-color-fill-quinary);
+  --control-focus: var(--m27-source-color-accent-blue);
+  --control-invalid: var(--m27-source-color-accent-red);
+
+  /* Sidebar and collection compatibility */
+  --sidebar: var(--m-ui-sidebar-material-fill);
+  --sidebar-foreground: var(--m27-source-color-label-primary);
+  --sidebar-primary: var(--m27-source-color-accent-blue);
+  --sidebar-primary-foreground: var(--m27-source-color-label-white);
+  --sidebar-accent: var(--m27-source-color-fill-primary);
+  --sidebar-accent-foreground: var(--m27-source-color-label-primary);
+  --sidebar-border: var(--m27-source-color-table-column-separator);
+  --sidebar-ring: var(--m27-source-color-accent-blue);
+
+  /* Toolbar and window chrome */
+  --toolbar-control-background: var(--m27-source-color-fill-quinary);
+  --toolbar-control-hover: var(--m27-source-color-fill-secondary);
+  --toolbar-control-pressed: var(--m27-source-color-fill-primary);
+  --toolbar-control-border: var(--m27-source-color-fill-primary);
+  --toolbar-control-shadow: none;
+  --window-corner-radius: var(--m27-source-chrome-window-radius);
+  --window-chrome-background: var(--m27-source-material-medium-fill);
+  --window-chrome-foreground: var(--m27-source-color-label-primary);
+  --window-chrome-muted-foreground: var(--m27-source-color-label-secondary);
+  --window-border: var(--m27-source-color-fill-primary);
+
+  /* Materials */
+  --material-blur-toolbar: var(--m27-source-material-standard-blur);
+  --material-blur-overlay: var(--m27-source-material-standard-blur);
+  --material-saturation: 1;
+  --material-ultra-thick-fill: var(--m27-source-material-ultra-thick-fill);
+  --material-thick-fill: var(--m27-source-material-thick-fill);
+  --material-medium-fill: var(--m27-source-material-medium-fill);
+  --material-thin-fill: var(--m27-source-material-thin-fill);
+  --material-ultra-thin-fill: var(--m27-source-material-ultra-thin-fill);
+  --material-ultra-thick-fallback: var(
+    --m27-source-material-ultra-thick-layer-1-color
+  );
+  --material-thick-fallback: var(--m27-source-material-thick-layer-1-color);
+  --material-medium-fallback: var(--m27-source-material-medium-layer-1-color);
+  --material-thin-fallback: var(--m27-source-material-thin-layer-1-color);
+  --material-ultra-thin-fallback: var(
+    --m27-source-material-ultra-thin-layer-1-color
+  );
+  --material-standard-blur: var(--m27-source-material-standard-blur);
+  --material-regular-fill: var(--m27-source-material-medium-fill);
+  --material-regular-fallback: var(--m27-source-material-medium-layer-1-color);
+  --material-regular-border: var(--m27-source-color-fill-primary);
+  --material-regular-highlight: var(--m27-source-color-label-quaternary);
+  --material-regular-blur: var(--m27-source-material-standard-blur);
+  --material-regular-saturation: 1;
+  --material-clear-fill: var(--m27-source-material-ultra-thin-fill);
+  --material-clear-fallback: var(
+    --m27-source-material-ultra-thin-layer-1-color
+  );
+  --material-clear-border: var(--m27-source-color-fill-primary);
+  --material-clear-highlight: var(--m27-source-color-label-quaternary);
+  --material-clear-blur: var(--m27-source-material-standard-blur);
+  --material-clear-saturation: 1;
+  /*
+   * Structural cards live in the content layer. They deliberately do not
+   * inherit the source Liquid Glass effects used by floating panels.
+  */
+  --material-shadow-card: 0 1px 2px rgb(0 0 0 / 8%);
+  --material-shadow-sidebar:
+    0 1px 2px rgb(0 0 0 / 5%), 0 3px 10px rgb(0 0 0 / 4%);
+  --material-shadow-panel: var(--m27-source-effect-liquid-glass-medium);
+  --material-shadow-overlay: var(--m27-source-effect-liquid-glass-large);
+  --material-shadow-dialog: var(--m-ui-dialog-shadow), var(--m-ui-dialog-halo);
+  --material-shadow-window: var(--m27-source-effect-window-active);
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-ui-appearance='dark'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-ui-appearance='dark'] {
+  --material-shadow-card: 0 1px 2px rgb(0 0 0 / 28%);
+  --material-shadow-sidebar:
+    0 1px 2px rgb(0 0 0 / 20%), 0 3px 10px rgb(0 0 0 / 14%);
+}
+
+/*
+ * A component-level edge-to-edge override can live beneath a root using the
+ * Moldable floating-sidebar recipe. Reassert the joined-canvas contract at
+ * the sidebar boundary so floating brand colors and perimeter styling never
+ * leak into this anatomy.
+ */
+[data-ui-sidebar-style='edge-to-edge'][data-slot='sidebar'] {
+  --m-ui-sidebar-material-fill: transparent;
+  --m-ui-sidebar-border-width: 0px;
+  --m-ui-sidebar-border-color: transparent;
+  --sidebar: transparent;
+  --sidebar-border: transparent;
+  --surface-sidebar: transparent;
+}

package/src/tokens/macos-27/index.css

@@ -0,0 +1,15 @@
+@import './source/colors.generated.css';
+@import './source/sizes.generated.css';
+@import './source/text-styles.generated.css';
+@import './source/paint-styles.generated.css';
+@import './source/kit.generated.css';
+@import './source/effects.generated.css';
+@import './source/context.generated.css';
+@import './source/chrome.generated.css';
+@import './source/controls.generated.css';
+@import './source/overlays-status.generated.css';
+@import './web-adaptations.css';
+@import './aliases.css';
+@import './compatibility.css';
+@import './recipes.css';
+@import './accessibility.css';

package/src/tokens/macos-27/recipes.css

@@ -0,0 +1,23 @@
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m-ui-window-radius: 16px;
+  --m-ui-window-shadow-active: var(--m27-source-effect-window-active);
+  --m-ui-window-shadow-inactive: var(--m27-source-effect-window-inactive);
+  --m-ui-toolbar-padding-block: 8px;
+  --m-ui-toolbar-padding-inline-start: 18px;
+  --m-ui-toolbar-padding-inline-end: 8px;
+  --m-ui-toolbar-gap: 8px;
+  --m-ui-toolbar-control-group-height: 24px;
+  --m-ui-toolbar-control-group-padding: 2px;
+  --m-ui-toolbar-control-group-gap: 4px;
+  --m-ui-toolbar-control-height: 20px;
+  --m-ui-toolbar-title-size: 13px;
+  --m-ui-toolbar-title-line-height: 15px;
+  --m-ui-toolbar-title-weight: 700;
+  --m-ui-traffic-light-size: 14px;
+  --m-ui-traffic-light-gap: 9px;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='xl'] {
+  --m-ui-toolbar-control-group-height: 36px;
+  --m-ui-toolbar-control-height: 28px;
+}

package/src/tokens/macos-27/source/chrome.generated.css

@@ -0,0 +1,338 @@
+/*
+ * Generated from the macOS 27 chrome and navigation specification.
+ * Values only. No source artwork, symbols, vectors, or image assets.
+ *
+ * State axes remain independent:
+ * - appearance: light | dark
+ * - window activity: active | inactive
+ * - control state: idle | selected | disabled | focused | typing
+ * - selection state: selected-active | selected-inactive | unselected
+ */
+
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  /* Window geometry */
+  --m27-source-chrome-window-radius: 16px;
+  --m27-source-chrome-window-reference-width: 840px;
+  --m27-source-chrome-window-reference-width-with-sidebar: 870px;
+  --m27-source-chrome-window-reference-height: 400px;
+  --m27-source-chrome-window-sidebar-pane-width: 240px;
+  --m27-source-chrome-window-content-pane-width: 600px;
+  --m27-source-chrome-window-content-pane-width-with-sidebar: 630px;
+
+  /* Titlebar and toolbar modes */
+  --m27-source-chrome-titlebar-default-height: 30px;
+  --m27-source-chrome-titlebar-titled-height: 31px;
+  --m27-source-chrome-toolbar-unified-compact-height: 40px;
+  --m27-source-chrome-toolbar-separated-height: 44px;
+  --m27-source-chrome-toolbar-unified-height: 52px;
+  --m27-source-chrome-toolbar-expanded-height: 52px;
+  --m27-source-chrome-toolbar-gap: 8px;
+  --m27-source-chrome-toolbar-separated-padding-block-start: 0px;
+  --m27-source-chrome-toolbar-separated-padding-inline-end: 8px;
+  --m27-source-chrome-toolbar-separated-padding-block-end: 8px;
+  --m27-source-chrome-toolbar-separated-padding-inline-start: 8px;
+  --m27-source-chrome-toolbar-unified-padding-block: 8px;
+  --m27-source-chrome-toolbar-unified-padding-inline-end: 8px;
+  --m27-source-chrome-toolbar-unified-padding-inline-start: 18px;
+
+  /* Standard window controls */
+  --m27-source-chrome-stoplight-size: 14px;
+  --m27-source-chrome-stoplight-gap: 9px;
+  --m27-source-chrome-stoplight-pitch: 23px;
+  --m27-source-chrome-stoplight-group-width: 68px;
+  --m27-source-chrome-stoplight-group-height: 14px;
+  --m27-source-chrome-stoplight-radius: 9999px;
+  --m27-source-chrome-stoplight-close: #ff5c60;
+  --m27-source-chrome-stoplight-minimize: #fac800;
+  --m27-source-chrome-stoplight-zoom: #35c759;
+  --m27-source-chrome-stoplight-active-edge: rgb(0 0 0 / 45%);
+  --m27-source-chrome-stoplight-default-inline-start: 8px;
+  --m27-source-chrome-stoplight-default-block-start: 8px;
+  --m27-source-chrome-stoplight-titled-inline-start: 8px;
+  --m27-source-chrome-stoplight-titled-block-start: 8.5px;
+  --m27-source-chrome-stoplight-unified-compact-inline-start: 18px;
+  --m27-source-chrome-stoplight-unified-compact-block-start: 13px;
+  --m27-source-chrome-stoplight-unified-inline-start: 18px;
+  --m27-source-chrome-stoplight-unified-block-start: 19px;
+  --m27-source-chrome-stoplight-expanded-inline-start: 18px;
+  --m27-source-chrome-stoplight-expanded-block-start: 19px;
+
+  /* Utility-panel window controls */
+  --m27-source-chrome-utility-stoplight-size: 10px;
+  --m27-source-chrome-utility-stoplight-gap: 7px;
+  --m27-source-chrome-utility-stoplight-pitch: 17px;
+  --m27-source-chrome-utility-stoplight-group-width: 44px;
+  --m27-source-chrome-utility-stoplight-group-height: 10px;
+  --m27-source-chrome-utility-panel-radius: 15px;
+
+  /* Window title */
+  --m27-source-chrome-window-title-reference-width: 111px;
+  --m27-source-chrome-window-title-height: 30px;
+  --m27-source-chrome-window-title-gap: 3px;
+  --m27-source-chrome-window-title-symbol-width: 17px;
+  --m27-source-chrome-window-title-symbol-height: 15px;
+  --m27-source-chrome-window-title-stack-width: 91px;
+  --m27-source-chrome-window-title-stack-height: 30px;
+  --m27-source-chrome-window-title-stack-gap: 2px;
+  --m27-source-chrome-window-title-font-size: 13px;
+  --m27-source-chrome-window-title-line-height: 15px;
+  --m27-source-chrome-window-title-font-weight: 700;
+  --m27-source-chrome-window-title-with-sidebar-font-size: 15px;
+  --m27-source-chrome-window-title-with-sidebar-line-height: 15px;
+  --m27-source-chrome-window-title-symbol-font-size: 15px;
+  --m27-source-chrome-window-title-symbol-line-height: 15px;
+  --m27-source-chrome-window-title-symbol-font-weight: 600;
+  --m27-source-chrome-window-subtitle-font-size: 11px;
+  --m27-source-chrome-window-subtitle-line-height: 13px;
+  --m27-source-chrome-window-subtitle-font-weight: 500;
+  --m27-source-chrome-utility-title-height: 16px;
+  --m27-source-chrome-utility-title-gap: 3px;
+  --m27-source-chrome-utility-title-font-size: 13px;
+  --m27-source-chrome-utility-title-font-weight: 700;
+
+  /* Toolbar size axis */
+  --m27-source-chrome-toolbar-medium-control-height: 24px;
+  --m27-source-chrome-toolbar-large-control-height: 36px;
+  --m27-source-chrome-toolbar-medium-inset: 2px;
+  --m27-source-chrome-toolbar-large-inset: 4px;
+  --m27-source-chrome-toolbar-control-group-gap: 4px;
+  --m27-source-chrome-toolbar-medium-icon-button-size: 24px;
+  --m27-source-chrome-toolbar-large-icon-button-size: 36px;
+  --m27-source-chrome-toolbar-medium-icon-content-width: 24px;
+  --m27-source-chrome-toolbar-medium-icon-content-height: 20px;
+  --m27-source-chrome-toolbar-large-icon-content-width: 32px;
+  --m27-source-chrome-toolbar-large-icon-content-height: 28px;
+
+  /* Toolbar control compositions */
+  --m27-source-chrome-toolbar-medium-segmented-reference-width: 121px;
+  --m27-source-chrome-toolbar-large-segmented-reference-width: 145px;
+  --m27-source-chrome-toolbar-medium-group-reference-width: 72px;
+  --m27-source-chrome-toolbar-large-group-reference-width: 100px;
+  --m27-source-chrome-toolbar-search-width: 130px;
+  --m27-source-chrome-toolbar-search-medium-gap: 4px;
+  --m27-source-chrome-toolbar-search-large-gap: 6px;
+  --m27-source-chrome-toolbar-search-medium-padding-inline: 6px;
+  --m27-source-chrome-toolbar-search-large-padding-inline: 10px;
+  --m27-source-chrome-toolbar-search-radius: 9999px;
+  --m27-source-chrome-toolbar-medium-pull-down-width: 39px;
+  --m27-source-chrome-toolbar-large-pull-down-width: 50px;
+  --m27-source-chrome-toolbar-medium-pop-up-width: 57px;
+  --m27-source-chrome-toolbar-large-pop-up-width: 63px;
+  --m27-source-chrome-toolbar-pull-down-gap: 2px;
+  --m27-source-chrome-toolbar-pull-down-medium-padding-inline: 6px;
+  --m27-source-chrome-toolbar-pull-down-large-padding-inline: 8px;
+  --m27-source-chrome-toolbar-separator-width: 3px;
+  --m27-source-chrome-toolbar-medium-separator-height: 16px;
+  --m27-source-chrome-toolbar-large-separator-height: 20px;
+  --m27-source-chrome-toolbar-utility-tab-bar-width: 220px;
+  --m27-source-chrome-toolbar-utility-tab-bar-height: 30px;
+  --m27-source-chrome-toolbar-utility-tab-width: 44px;
+  --m27-source-chrome-toolbar-utility-tab-height: 30px;
+  --m27-source-chrome-toolbar-utility-tab-radius: 6px;
+
+  /* Sidebar */
+  --m27-source-chrome-sidebar-width: 240px;
+  --m27-source-chrome-sidebar-reference-height: 560px;
+  --m27-source-chrome-sidebar-stoplight-row-height: 52px;
+  --m27-source-chrome-sidebar-padding-block-end: 10px;
+  --m27-source-chrome-sidebar-large-row-height: 36px;
+  --m27-source-chrome-sidebar-medium-row-height: 32px;
+  --m27-source-chrome-sidebar-small-row-height: 24px;
+  --m27-source-chrome-sidebar-large-selection-radius: 8px;
+  --m27-source-chrome-sidebar-medium-selection-radius: 5px;
+  --m27-source-chrome-sidebar-small-selection-radius: 5px;
+  --m27-source-chrome-sidebar-indent: 12px;
+  --m27-source-chrome-sidebar-level-0-inset: 0px;
+  --m27-source-chrome-sidebar-level-1-inset: 12px;
+  --m27-source-chrome-sidebar-level-2-inset: 24px;
+  --m27-source-chrome-sidebar-level-3-inset: 36px;
+  --m27-source-chrome-sidebar-level-4-inset: 48px;
+  --m27-source-chrome-sidebar-disclosure-width: 12px;
+  --m27-source-chrome-sidebar-item-gap: 4px;
+  --m27-source-chrome-sidebar-selection-bleed-inline: 4px;
+  --m27-source-chrome-sidebar-item-padding-inline-end: 2px;
+  --m27-source-chrome-sidebar-large-detail-width: 42px;
+  --m27-source-chrome-sidebar-large-detail-height: 20px;
+  --m27-source-chrome-sidebar-medium-detail-width: 37px;
+  --m27-source-chrome-sidebar-medium-detail-height: 14px;
+  --m27-source-chrome-sidebar-small-detail-width: 31px;
+  --m27-source-chrome-sidebar-small-detail-height: 14px;
+  --m27-source-chrome-sidebar-section-width: 210px;
+  --m27-source-chrome-sidebar-section-small-later-padding-block-start: 15px;
+  --m27-source-chrome-sidebar-section-medium-later-padding-block-start: 17px;
+  --m27-source-chrome-sidebar-section-large-later-padding-block-start: 18px;
+  --m27-source-chrome-sidebar-section-small-padding-block-end: 5px;
+  --m27-source-chrome-sidebar-section-medium-padding-block-end: 8px;
+  --m27-source-chrome-sidebar-section-large-padding-block-end: 9px;
+  --m27-source-chrome-sidebar-large-font-size: 15px;
+  --m27-source-chrome-sidebar-large-line-height: 20px;
+  --m27-source-chrome-sidebar-medium-font-size: 13px;
+  --m27-source-chrome-sidebar-medium-line-height: 16px;
+  --m27-source-chrome-sidebar-small-font-size: 11px;
+  --m27-source-chrome-sidebar-small-line-height: 14px;
+  --m27-source-chrome-sidebar-section-font-size: 11px;
+  --m27-source-chrome-sidebar-section-line-height: 14px;
+
+  /* Menu geometry */
+  --m27-source-chrome-menu-radius: 12px;
+  --m27-source-chrome-menu-reference-width: 244px;
+  --m27-source-chrome-menu-reference-height: 284px;
+  --m27-source-chrome-menu-padding-block: 5px;
+  --m27-source-chrome-menu-padding-inline: 12px;
+  --m27-source-chrome-menu-content-reference-width: 220px;
+  --m27-source-chrome-menu-content-reference-height: 274px;
+  --m27-source-chrome-menu-item-reference-width: 160px;
+  --m27-source-chrome-menu-item-height: 24px;
+  --m27-source-chrome-menu-item-radius: 8px;
+  --m27-source-chrome-menu-item-gap: 8px;
+  --m27-source-chrome-menu-item-selection-inset: 12px;
+  --m27-source-chrome-menu-header-reference-width: 100px;
+  --m27-source-chrome-menu-header-height: 25px;
+  --m27-source-chrome-menu-header-padding-block-start: 5px;
+  --m27-source-chrome-menu-header-padding-block-end: 4px;
+  --m27-source-chrome-menu-header-inset: 20px;
+  --m27-source-chrome-menu-separator-reference-width: 100px;
+  --m27-source-chrome-menu-separator-height: 11px;
+  --m27-source-chrome-menu-separator-padding-block: 5px;
+  --m27-source-chrome-menu-shortcut-reference-width: 25px;
+  --m27-source-chrome-menu-shortcut-height: 16px;
+  --m27-source-chrome-menu-shortcut-gap: 1px;
+  --m27-source-chrome-menu-item-font-size: 13px;
+  --m27-source-chrome-menu-item-font-weight: 500;
+  --m27-source-chrome-menu-header-font-size: 10px;
+  --m27-source-chrome-menu-header-line-height: 16px;
+  --m27-source-chrome-menu-header-font-weight: 700;
+  --m27-source-chrome-menu-shortcut-font-size-min: 10px;
+  --m27-source-chrome-menu-shortcut-font-size-max: 11px;
+
+  /* Menu glass-effect source parameters */
+  --m27-source-chrome-menu-glass-radius: 25px;
+  --m27-source-chrome-menu-glass-refraction: 0.7;
+  --m27-source-chrome-menu-glass-depth: 40;
+  --m27-source-chrome-menu-glass-light-angle: 0;
+  --m27-source-chrome-menu-glass-light-intensity: 0.2;
+  --m27-source-chrome-menu-glass-dispersion: 0.4;
+  --m27-source-chrome-menu-glass-splay: 0.2;
+  --m27-source-chrome-menu-shadow-offset-x: 0px;
+  --m27-source-chrome-menu-shadow-offset-y: 8px;
+  --m27-source-chrome-menu-shadow-radius: 48px;
+  --m27-source-chrome-menu-perimeter-spread: 0.5px;
+  --m27-source-chrome-menu-side-edge-offset: 1.25px;
+  --m27-source-chrome-menu-side-edge-spread: -0.75px;
+
+  /* Lists and tables */
+  --m27-source-chrome-table-reference-width: 600px;
+  --m27-source-chrome-table-row-height: 20px;
+  --m27-source-chrome-table-row-gap: 3px;
+  --m27-source-chrome-table-selection-radius: 8px;
+  --m27-source-chrome-table-indent: 15px;
+  --m27-source-chrome-table-level-0-inset: 0px;
+  --m27-source-chrome-table-level-1-inset: 15px;
+  --m27-source-chrome-table-level-2-inset: 30px;
+  --m27-source-chrome-table-level-3-inset: 45px;
+  --m27-source-chrome-table-level-4-inset: 60px;
+  --m27-source-chrome-table-column-reference-width: 150px;
+  --m27-source-chrome-table-column-label-height: 19px;
+  --m27-source-chrome-table-column-first-inset: 50px;
+  --m27-source-chrome-table-column-inset: 8px;
+  --m27-source-chrome-table-column-padding-inline-end: 6px;
+  --m27-source-chrome-table-header-height: 28px;
+  --m27-source-chrome-table-header-padding-block-start: 4px;
+  --m27-source-chrome-table-header-padding-block-end: 5px;
+  --m27-source-chrome-table-sort-indicator-width: 13px;
+  --m27-source-chrome-table-sort-indicator-height: 19px;
+  --m27-source-chrome-table-disclosure-width: 5px;
+  --m27-source-chrome-table-disclosure-height: 20px;
+  --m27-source-chrome-table-icon-size: 18px;
+  --m27-source-chrome-table-icon-inset: 2px;
+  --m27-source-chrome-table-group-title-width: 150px;
+  --m27-source-chrome-table-group-title-height: 45px;
+  --m27-source-chrome-table-group-title-padding-block-start: 24px;
+  --m27-source-chrome-table-group-title-padding-inline-end: 8px;
+  --m27-source-chrome-table-group-title-padding-block-end: 7px;
+  --m27-source-chrome-table-group-title-padding-inline-start: 50px;
+  --m27-source-chrome-outline-reference-width: 900px;
+  --m27-source-chrome-outline-reference-height: 450px;
+  --m27-source-chrome-table-primary-font-size: 11px;
+  --m27-source-chrome-table-primary-line-height: 14px;
+  --m27-source-chrome-table-secondary-font-size: 9px;
+  --m27-source-chrome-table-secondary-line-height: 13px;
+  --m27-source-chrome-table-indicator-font-size: 9px;
+  --m27-source-chrome-table-indicator-line-height: 9px;
+
+  /* Overlay scrollbar fallback */
+  --m27-source-chrome-scrollbar-cross-size: 12px;
+  --m27-source-chrome-scrollbar-inset: 3px;
+  --m27-source-chrome-scrollbar-travel-cross-size: 6px;
+  --m27-source-chrome-scrollbar-reference-length: 64px;
+  --m27-source-chrome-scrollbar-travel-length: 58px;
+  --m27-source-chrome-scrollbar-thumb-cross-size: 6px;
+  --m27-source-chrome-scrollbar-thumb-radius: 9999px;
+  --m27-source-chrome-scrollbar-page-factor-2-thumb-length: 29px;
+  --m27-source-chrome-scrollbar-page-factor-4-thumb-length: 15px;
+  --m27-source-chrome-scrollbar-page-factor-8-thumb-length: 8px;
+  --m27-source-chrome-scrollbar-thumb-min-length: 8px;
+
+  /* Menu bar and Dock are native-host reference metrics */
+  --m27-source-chrome-menu-bar-height: 34px;
+  --m27-source-chrome-menu-bar-padding-block: 5px;
+  --m27-source-chrome-menu-bar-padding-inline-start: 10px;
+  --m27-source-chrome-menu-bar-padding-inline-end: 20px;
+  --m27-source-chrome-menu-bar-item-height: 24px;
+  --m27-source-chrome-menu-bar-item-radius: 4px;
+  --m27-source-chrome-menu-bar-item-padding-inline: 9px;
+  --m27-source-chrome-menu-bar-app-name-padding-inline-start: 11px;
+  --m27-source-chrome-menu-bar-system-item-width: 33px;
+  --m27-source-chrome-menu-bar-app-name-reference-width: 90px;
+  --m27-source-chrome-menu-bar-item-reference-width: 47px;
+  --m27-source-chrome-dock-height: 55px;
+  --m27-source-chrome-dock-gap: 9px;
+  --m27-source-chrome-dock-padding-block-start: 8px;
+  --m27-source-chrome-dock-padding-inline: 8px;
+  --m27-source-chrome-dock-padding-block-end: 0px;
+  --m27-source-chrome-dock-item-width: 36px;
+  --m27-source-chrome-dock-item-height: 47px;
+  --m27-source-chrome-dock-indicator-gap: 3px;
+  --m27-source-chrome-dock-item-padding-block-end: 4px;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-ui-appearance='light'] {
+  /* Active and inactive window surfaces stay separate. */
+  --m27-source-chrome-window-surface: #ffffff;
+  --m27-source-chrome-window-border: transparent;
+  --m27-source-chrome-window-active-shadow:
+    0 0 1px rgb(0 0 0 / 80%), 0 18px 54px rgb(0 0 0 / 30%);
+  --m27-source-chrome-window-inactive-shadow:
+    0 0 1px rgb(0 0 0 / 80%), 0 7px 21px rgb(0 0 0 / 20%);
+
+  --m27-source-chrome-stoplight-inactive-fill: rgb(0 0 0 / 15%);
+  --m27-source-chrome-stoplight-inactive-edge: rgb(0 0 0 / 6%);
+
+  --m27-source-chrome-menu-fill-primary: rgb(217 217 217 / 55%);
+  --m27-source-chrome-menu-fill-secondary: rgb(217 217 217 / 40%);
+  --m27-source-chrome-menu-shadow: 0 8px 48px rgb(0 0 0 / 25%);
+  --m27-source-chrome-menu-perimeter-color: #dbdbdb;
+  --m27-source-chrome-menu-glass-inner-keyline-color: #262626;
+  --m27-source-chrome-scrollbar-thumb-color: rgb(0 0 0 / 50%);
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-ui-appearance='dark'] {
+  /* Active and inactive window surfaces stay separate. */
+  --m27-source-chrome-window-surface: #1e1e1e;
+  --m27-source-chrome-window-border: rgb(255 255 255 / 20%);
+  --m27-source-chrome-window-active-shadow:
+    0 0 1px rgb(0 0 0 / 80%), 0 18px 54px rgb(0 0 0 / 57%);
+  --m27-source-chrome-window-inactive-shadow:
+    0 0 1px rgb(0 0 0 / 80%), 0 7px 21px rgb(0 0 0 / 35%);
+
+  --m27-source-chrome-stoplight-inactive-fill: rgb(255 255 255 / 17%);
+  --m27-source-chrome-stoplight-inactive-edge: rgb(255 255 255 / 3%);
+
+  --m27-source-chrome-menu-fill-primary: rgb(255 255 255 / 20%);
+  --m27-source-chrome-menu-fill-secondary: rgb(64 64 64 / 80%);
+  --m27-source-chrome-menu-shadow: 0 8px 48px rgb(0 0 0 / 45%);
+  --m27-source-chrome-menu-perimeter-color: #a6a6a6;
+  --m27-source-chrome-menu-glass-inner-keyline-color: #404040;
+  --m27-source-chrome-scrollbar-thumb-color: rgb(255 255 255 / 55%);
+}