@moldable-ai/ui 0.2.29 → 0.2.32

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%);
+}

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

@@ -0,0 +1,140 @@
+/*
+ * Generated source data.
+ * Source: macOS 27.
+ * All 63 variables and both source modes are preserved.
+ */
+[data-ui-platform='macos'][data-ui-platform-version='27'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-ui-appearance='light'] {
+  --m27-source-color-accent-red: #ff383c;
+  --m27-source-color-accent-orange: #ff8d28;
+  --m27-source-color-accent-yellow: #ffcc00;
+  --m27-source-color-accent-green: #34c759;
+  --m27-source-color-accent-mint: #00c8b3;
+  --m27-source-color-accent-teal: #00c3d0;
+  --m27-source-color-accent-cyan: #00c0e8;
+  --m27-source-color-accent-blue: #0088ff;
+  --m27-source-color-accent-indigo: #6155f5;
+  --m27-source-color-accent-purple: #cb30e0;
+  --m27-source-color-accent-pink: #ff2d55;
+  --m27-source-color-accent-brown: #ac7f5e;
+  --m27-source-color-accent-vibrant-red: #f52f32;
+  --m27-source-color-accent-vibrant-orange: #f58625;
+  --m27-source-color-accent-vibrant-yellow: #f5c200;
+  --m27-source-color-accent-vibrant-green: #26bf4d;
+  --m27-source-color-accent-vibrant-mint: #00bda9;
+  --m27-source-color-accent-vibrant-teal: #00b3bf;
+  --m27-source-color-accent-vibrant-cyan: #00abcf;
+  --m27-source-color-accent-vibrant-blue: #0078f0;
+  --m27-source-color-accent-vibrant-indigo: #5c50e6;
+  --m27-source-color-accent-vibrant-purple: #b72bc9;
+  --m27-source-color-accent-vibrant-pink: #f5234b;
+  --m27-source-color-accent-vibrant-brown: #9e7354;
+  --m27-source-color-window-background: #ffffff;
+  --m27-source-color-black: #000000;
+  --m27-source-color-white: #ffffff;
+  --m27-source-color-gray: #8e8e93;
+  --m27-source-color-fill-primary: #0000001a;
+  --m27-source-color-fill-secondary: #00000014;
+  --m27-source-color-fill-tertiary: #0000000d;
+  --m27-source-color-fill-quaternary: #00000008;
+  --m27-source-color-fill-quinary: #00000005;
+  --m27-source-color-label-primary: #000000d9;
+  --m27-source-color-label-secondary: #00000080;
+  --m27-source-color-label-tertiary: #00000040;
+  --m27-source-color-label-quaternary: #0000001a;
+  --m27-source-color-label-quinary: #0000000d;
+  --m27-source-color-label-seximal: #00000008;
+  --m27-source-color-label-white: #ffffff;
+  --m27-source-color-vibrant-fill-primary: #d9d9d9;
+  --m27-source-color-vibrant-fill-secondary: #e6e6e6;
+  --m27-source-color-vibrant-fill-tertiary: #f2f2f2;
+  --m27-source-color-vibrant-fill-quaternary: #f7f7f7;
+  --m27-source-color-vibrant-fill-quinary: #fbfbfb;
+  --m27-source-color-vibrant-label-primary: #1a1a1a;
+  --m27-source-color-vibrant-label-secondary: #727272;
+  --m27-source-color-vibrant-label-tertiary: #bfbfbf;
+  --m27-source-color-vibrant-label-quaternary: #d9d9d9;
+  --m27-source-color-vibrant-label-quinary: #e6e6e6;
+  --m27-source-color-alert-overlay: #ababab99;
+  --m27-source-color-progress-track-stroke: #00000012;
+  --m27-source-color-sidebar-label-inactive: #878787;
+  --m27-source-color-table-alternating-row: #0000000d;
+  --m27-source-color-table-selected-active: #0165e2;
+  --m27-source-color-table-selected-inactive: #00000024;
+  --m27-source-color-table-column-separator: #0000001a;
+  --m27-source-color-tooltip-inner-stroke: #ffffff00;
+  --m27-source-color-tooltip-sidebar-active: #dae6f2;
+  --m27-source-color-tooltip-sidebar-inactive: #edf4fa;
+  --m27-source-color-scrollbar: #00000080;
+  --m27-source-color-mode: 'Light';
+  --m27-source-color-string: 'String value';
+}
+
+[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'] {
+  --m27-source-color-accent-red: #ff4245;
+  --m27-source-color-accent-orange: #ff9230;
+  --m27-source-color-accent-yellow: #ffd600;
+  --m27-source-color-accent-green: #30d158;
+  --m27-source-color-accent-mint: #00dac3;
+  --m27-source-color-accent-teal: #00d2e0;
+  --m27-source-color-accent-cyan: #3cd3fe;
+  --m27-source-color-accent-blue: #0091ff;
+  --m27-source-color-accent-indigo: #6d7cff;
+  --m27-source-color-accent-purple: #db34f2;
+  --m27-source-color-accent-pink: #ff375f;
+  --m27-source-color-accent-brown: #b78a66;
+  --m27-source-color-accent-vibrant-red: #ff4747;
+  --m27-source-color-accent-vibrant-orange: #ff9e33;
+  --m27-source-color-accent-vibrant-yellow: #ffe014;
+  --m27-source-color-accent-vibrant-green: #3bdb63;
+  --m27-source-color-accent-vibrant-mint: #2de0cd;
+  --m27-source-color-accent-vibrant-teal: #2dd7e0;
+  --m27-source-color-accent-vibrant-cyan: #47d8fc;
+  --m27-source-color-accent-vibrant-blue: #0a99ff;
+  --m27-source-color-accent-vibrant-indigo: #7163ff;
+  --m27-source-color-accent-vibrant-purple: #e647fc;
+  --m27-source-color-accent-vibrant-pink: #ff4169;
+  --m27-source-color-accent-vibrant-brown: #c29672;
+  --m27-source-color-window-background: #1e1e1e;
+  --m27-source-color-black: #000000;
+  --m27-source-color-white: #ffffff;
+  --m27-source-color-gray: #98989f;
+  --m27-source-color-fill-primary: #ffffff1a;
+  --m27-source-color-fill-secondary: #ffffff14;
+  --m27-source-color-fill-tertiary: #ffffff0d;
+  --m27-source-color-fill-quaternary: #ffffff08;
+  --m27-source-color-fill-quinary: #ffffff05;
+  --m27-source-color-label-primary: #ffffffd9;
+  --m27-source-color-label-secondary: #ffffff8c;
+  --m27-source-color-label-tertiary: #ffffff40;
+  --m27-source-color-label-quaternary: #ffffff1a;
+  --m27-source-color-label-quinary: #ffffff0d;
+  --m27-source-color-label-seximal: #ffffff08;
+  --m27-source-color-label-white: #ffffff;
+  --m27-source-color-vibrant-fill-primary: #242424;
+  --m27-source-color-vibrant-fill-secondary: #141414;
+  --m27-source-color-vibrant-fill-tertiary: #0d0d0d;
+  --m27-source-color-vibrant-fill-quaternary: #090909;
+  --m27-source-color-vibrant-fill-quinary: #070707;
+  --m27-source-color-vibrant-label-primary: #f5f5f5;
+  --m27-source-color-vibrant-label-secondary: #8a8a8a;
+  --m27-source-color-vibrant-label-tertiary: #404040;
+  --m27-source-color-vibrant-label-quaternary: #262626;
+  --m27-source-color-vibrant-label-quinary: #111111;
+  --m27-source-color-alert-overlay: #1717179e;
+  --m27-source-color-progress-track-stroke: #ffffff0a;
+  --m27-source-color-sidebar-label-inactive: #666666;
+  --m27-source-color-table-alternating-row: #ffffff0d;
+  --m27-source-color-table-selected-active: #0158d2;
+  --m27-source-color-table-selected-inactive: #ffffff2e;
+  --m27-source-color-table-column-separator: #ffffff1a;
+  --m27-source-color-tooltip-inner-stroke: #ffffff26;
+  --m27-source-color-tooltip-sidebar-active: #141517;
+  --m27-source-color-tooltip-sidebar-inactive: #131414;
+  --m27-source-color-scrollbar: #ffffff8c;
+  --m27-source-color-mode: 'Dark';
+  --m27-source-color-string: 'String value';
+}

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

@@ -0,0 +1,18 @@
+/*
+ * Generated source data.
+ * Source: macOS 27.
+ * The one Context variable and both source modes are preserved.
+ */
+[data-ui-platform='macos'][data-ui-platform-version='27'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-material-context='content'] {
+  --m27-source-context-mode: 'Content Area';
+  --m27-source-context: content;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-material-context='over-glass'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-material-context='over-glass'] {
+  --m27-source-context-mode: 'Over-glass';
+  --m27-source-context: over-glass;
+}