@moldable-ai/ui 0.2.29 → 0.2.32

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

@@ -0,0 +1,764 @@
+/*
+ * Generated control recipes from macOS 27.
+ * Source values only. No source artwork, symbols, vectors, or image assets.
+ *
+ * Appearance, window activation, material context, control size, and
+ * interaction state remain independent axes. Missing source values are not
+ * synthesized here.
+ */
+
+/*
+ * The platform/version pair is the immutable pack boundary. Axis attributes
+ * may live on that boundary or on an inheriting control subtree.
+ */
+[data-ui-platform='macos'][data-ui-platform-version='27'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-window-active='true'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-window-active='true'] {
+  --m27-source-control-window-active: 1;
+
+  /*
+   * Canonical button paint recipes. Geometry remains on the control-size
+   * axis below; these values are shared by all five sizes.
+   */
+  --m27-source-button-bordered-fill-idle: var(
+    --m27-source-color-fill-secondary
+  );
+  --m27-source-button-bordered-fill-pressed: color-mix(
+    in srgb,
+    var(--m27-source-color-label-primary) 16%,
+    transparent
+  );
+  --m27-source-button-bordered-fill-disabled: var(
+    --m27-source-color-fill-quaternary
+  );
+  --m27-source-button-bordered-label-idle: var(
+    --m27-source-color-label-primary
+  );
+  --m27-source-button-bordered-label-disabled: var(
+    --m27-source-color-label-tertiary
+  );
+
+  --m27-source-button-tinted-fill-idle: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-blue) 20%,
+    transparent
+  );
+  --m27-source-button-tinted-fill-pressed: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-blue) 28%,
+    transparent
+  );
+  --m27-source-button-tinted-fill-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-blue) 12%,
+    transparent
+  );
+  --m27-source-button-tinted-label: var(--m27-source-color-accent-blue);
+  --m27-source-button-tinted-label-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-blue) 40%,
+    transparent
+  );
+
+  --m27-source-button-prominent-fill-idle: var(--m27-source-color-accent-blue);
+  --m27-source-button-prominent-fill-pressed: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-blue) 90%,
+    black
+  );
+  --m27-source-button-prominent-fill-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-blue) 40%,
+    transparent
+  );
+  --m27-source-button-prominent-label-idle: var(--m27-source-color-label-white);
+  --m27-source-button-prominent-label-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-label-white) 50%,
+    transparent
+  );
+
+  --m27-source-button-destructive-fill-idle: var(--m27-source-color-accent-red);
+  --m27-source-button-destructive-fill-pressed: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-red) 90%,
+    black
+  );
+  --m27-source-button-destructive-fill-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-red) 40%,
+    transparent
+  );
+  --m27-source-button-destructive-label-idle: var(
+    --m27-source-color-label-white
+  );
+  --m27-source-button-destructive-label-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-label-white) 50%,
+    transparent
+  );
+
+  --m27-source-button-destructive-tinted-fill-idle: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-red) 20%,
+    transparent
+  );
+  --m27-source-button-destructive-tinted-fill-pressed: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-red) 28%,
+    transparent
+  );
+  --m27-source-button-destructive-tinted-fill-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-red) 10%,
+    transparent
+  );
+  --m27-source-button-destructive-tinted-label: var(
+    --m27-source-color-accent-red
+  );
+  --m27-source-button-destructive-tinted-label-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-red) 40%,
+    transparent
+  );
+
+  --m27-source-button-borderless-label-idle: var(
+    --m27-source-color-accent-blue
+  );
+  --m27-source-button-borderless-label-pressed: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-blue) 82%,
+    black
+  );
+  --m27-source-button-borderless-label-disabled: color-mix(
+    in srgb,
+    var(--m27-source-color-accent-blue) 50%,
+    transparent
+  );
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-window-active='false'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-window-active='false'] {
+  --m27-source-control-window-active: 0;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-material-context='content'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-material-context='content'] {
+  --m27-source-control-material-context: content-area;
+}
+
+[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-control-material-context: over-glass;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-state='idle'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-state='idle'] {
+  --m27-source-control-state: idle;
+  --m27-source-control-label-neutral: var(--m27-source-color-label-primary);
+  --m27-source-image-well-opacity: 1;
+  --m27-source-switch-off-track-opacity: 0.1;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-state='pressed'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-state='pressed'] {
+  --m27-source-control-state: pressed;
+  --m27-source-control-label-neutral: var(--m27-source-color-label-primary);
+  --m27-source-image-well-opacity: 1;
+  --m27-source-switch-off-track-opacity: 0.19;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-state='disabled'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-state='disabled'] {
+  --m27-source-control-state: disabled;
+  --m27-source-control-label-neutral: var(--m27-source-color-label-tertiary);
+  --m27-source-image-well-opacity: 0.5;
+  --m27-source-switch-off-track-opacity: 0.06;
+}
+
+/*
+ * Five-size control geometry.
+ * Medium is the source default.
+ */
+[data-ui-platform='macos'][data-ui-platform-version='27'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='medium'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-size='medium'] {
+  --m27-source-control-font-size: 13px;
+  --m27-source-control-label-line-height: 16px;
+
+  --m27-source-button-height: var(--m27-source-size-control-height);
+  --m27-source-button-radius: var(--m27-source-size-button-radius);
+  --m27-source-button-padding-inline: var(
+    --m27-source-size-button-padding-inline
+  );
+  --m27-source-arrow-button-size: 24px;
+  --m27-source-arrow-button-font-size: 13px;
+
+  --m27-source-color-well-width: 48px;
+  --m27-source-color-well-height: 24px;
+
+  --m27-source-combo-button-inset: 2px;
+  --m27-source-combo-button-width: 24px;
+  --m27-source-combo-button-radius: 4.5px;
+  --m27-source-combo-field-padding-inline-start: 8px;
+  --m27-source-combo-field-padding-inline-end: 28px;
+  --m27-source-combo-chevron-font-size: 11px;
+
+  --m27-source-disclosure-size: 24px;
+  --m27-source-disclosure-radius: 6px;
+  --m27-source-disclosure-font-size: 13px;
+  --m27-source-disclosure-symbol-height: 25px;
+
+  --m27-source-field-height: var(--m27-source-size-control-height);
+  --m27-source-field-inset-inline-start: 8px;
+  --m27-source-field-inset-inline-end: 8px;
+  --m27-source-field-search-glyph-size: 13px;
+  --m27-source-field-search-glyph-leading: 15px;
+  --m27-source-field-cursor-height: 18px;
+
+  --m27-source-popup-height: var(--m27-source-size-control-height);
+  --m27-source-popup-inset-inline-start: 12px;
+  --m27-source-popup-chevron-font-size: 11px;
+
+  --m27-source-segmented-height: var(--m27-source-size-control-height);
+  --m27-source-segmented-radius: var(--m27-source-size-control-radius);
+  --m27-source-segmented-margin: 10px;
+  --m27-source-segmented-separator-height: 14px;
+
+  --m27-source-radio-size: 16px;
+  --m27-source-radio-dot-size: 4.8px;
+  --m27-source-radio-dash-width: 6.5px;
+  --m27-source-radio-dash-height: 2px;
+  --m27-source-radio-label-gap: 3px;
+
+  --m27-source-checkbox-size: 16px;
+  --m27-source-checkbox-radius: 5.5px;
+  --m27-source-checkbox-checkmark-width: 9.3100004196167px;
+  --m27-source-checkbox-checkmark-height: 8.930000305175781px;
+
+  --m27-source-slider-track-inset-block: 1px;
+  --m27-source-slider-track-inset-inline: 1px;
+  --m27-source-slider-tick-spacing: 2px;
+  --m27-source-slider-knob-width: 20px;
+  --m27-source-slider-knob-height: 16px;
+  --m27-source-slider-knob-pressed-width: 25px;
+  --m27-source-slider-knob-pressed-height: 20px;
+  --m27-source-slider-ticked-knob-width: 20px;
+  --m27-source-slider-ticked-knob-height: 16px;
+  --m27-source-slider-ticked-knob-pressed-width: 25px;
+  --m27-source-slider-ticked-knob-pressed-height: 20px;
+  --m27-source-dial-knob-height: 6px;
+  --m27-source-dial-knob-inset: 3px;
+
+  --m27-source-stepper-width: 20px;
+  --m27-source-stepper-radius: 6px;
+  --m27-source-stepper-font-size: 12px;
+  --m27-source-stepper-separator-width: 14px;
+
+  --m27-source-switch-track-width: var(--m27-source-size-toggle-track-width);
+  --m27-source-switch-track-height: var(--m27-source-size-control-height);
+  --m27-source-switch-knob-width: var(--m27-source-size-toggle-knob-width);
+  --m27-source-switch-knob-height: var(--m27-source-size-toggle-knob-height);
+  --m27-source-switch-knob-pressed-width: 50px;
+  --m27-source-switch-knob-pressed-height: 31px;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='mini'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-size='mini'] {
+  --m27-source-control-font-size: 10px;
+
+  --m27-source-button-height: var(--m27-source-size-control-height);
+  --m27-source-button-radius: var(--m27-source-size-button-radius);
+  --m27-source-button-padding-inline: var(
+    --m27-source-size-button-padding-inline
+  );
+  --m27-source-arrow-button-size: 16px;
+  --m27-source-arrow-button-font-size: 11px;
+
+  --m27-source-color-well-width: 32px;
+  --m27-source-color-well-height: 16px;
+
+  --m27-source-combo-button-inset: 2px;
+  --m27-source-combo-button-width: 16px;
+  --m27-source-combo-button-radius: 2.5px;
+  --m27-source-combo-field-padding-inline-start: 6px;
+  --m27-source-combo-field-padding-inline-end: 20px;
+  --m27-source-combo-chevron-font-size: 9px;
+
+  --m27-source-disclosure-size: 16px;
+  --m27-source-disclosure-radius: 4px;
+  --m27-source-disclosure-font-size: 10px;
+  --m27-source-disclosure-symbol-height: 16px;
+
+  --m27-source-field-height: var(--m27-source-size-control-height);
+  --m27-source-field-inset-inline-start: 6px;
+  --m27-source-field-inset-inline-end: 6px;
+  --m27-source-field-search-glyph-size: 11px;
+  --m27-source-field-search-glyph-leading: 13px;
+  --m27-source-field-cursor-height: 14px;
+
+  --m27-source-popup-height: var(--m27-source-size-control-height);
+  --m27-source-popup-inset-inline-start: 7px;
+  --m27-source-popup-chevron-font-size: 10px;
+
+  --m27-source-segmented-height: var(--m27-source-size-control-height);
+  --m27-source-segmented-radius: var(--m27-source-size-control-radius);
+  --m27-source-segmented-margin: 6px;
+  --m27-source-segmented-separator-height: 10px;
+
+  --m27-source-radio-size: 12px;
+  --m27-source-radio-dot-size: 4px;
+  --m27-source-radio-dash-width: 5.5px;
+  --m27-source-radio-dash-height: 1.7000000476837158px;
+  --m27-source-radio-label-gap: 3px;
+
+  --m27-source-checkbox-size: 12px;
+  --m27-source-checkbox-radius: 3.5px;
+  --m27-source-checkbox-checkmark-width: 7.78000020980835px;
+  --m27-source-checkbox-checkmark-height: 7.550000190734863px;
+
+  --m27-source-slider-track-inset-block: 1px;
+  --m27-source-slider-track-inset-inline: 1px;
+  --m27-source-slider-tick-spacing: 2px;
+  --m27-source-slider-knob-width: 16px;
+  --m27-source-slider-knob-height: 12px;
+  --m27-source-slider-knob-pressed-width: 20px;
+  --m27-source-slider-knob-pressed-height: 15px;
+  --m27-source-slider-ticked-knob-width: 8px;
+  --m27-source-slider-ticked-knob-height: 16px;
+  --m27-source-slider-ticked-knob-pressed-width: 10px;
+  --m27-source-slider-ticked-knob-pressed-height: 20px;
+  --m27-source-dial-knob-height: 4px;
+  --m27-source-dial-knob-inset: 2px;
+
+  --m27-source-stepper-width: 13px;
+  --m27-source-stepper-radius: 4px;
+  --m27-source-stepper-font-size: 8px;
+  --m27-source-stepper-separator-width: 9px;
+
+  --m27-source-switch-track-width: var(--m27-source-size-toggle-track-width);
+  --m27-source-switch-track-height: var(--m27-source-size-control-height);
+  --m27-source-switch-knob-width: var(--m27-source-size-toggle-knob-width);
+  --m27-source-switch-knob-height: var(--m27-source-size-toggle-knob-height);
+  --m27-source-switch-knob-pressed-width: 33px;
+  --m27-source-switch-knob-pressed-height: 20px;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='small'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-size='small'] {
+  --m27-source-control-font-size: 11px;
+
+  --m27-source-button-height: var(--m27-source-size-control-height);
+  --m27-source-button-radius: var(--m27-source-size-button-radius);
+  --m27-source-button-padding-inline: var(
+    --m27-source-size-button-padding-inline
+  );
+  --m27-source-arrow-button-size: 20px;
+  --m27-source-arrow-button-font-size: 13px;
+
+  --m27-source-color-well-width: 40px;
+  --m27-source-color-well-height: 20px;
+
+  --m27-source-combo-button-inset: 2px;
+  --m27-source-combo-button-width: 20px;
+  --m27-source-combo-button-radius: 3.5px;
+  --m27-source-combo-field-padding-inline-start: 6px;
+  --m27-source-combo-field-padding-inline-end: 24px;
+  --m27-source-combo-chevron-font-size: 10px;
+
+  --m27-source-disclosure-size: 20px;
+  --m27-source-disclosure-radius: 5px;
+  --m27-source-disclosure-font-size: 10px;
+  --m27-source-disclosure-symbol-height: 21px;
+
+  --m27-source-field-height: var(--m27-source-size-control-height);
+  --m27-source-field-inset-inline-start: 6px;
+  --m27-source-field-inset-inline-end: 6px;
+  --m27-source-field-search-glyph-size: 13px;
+  --m27-source-field-search-glyph-leading: 15px;
+  --m27-source-field-cursor-height: 16px;
+
+  --m27-source-popup-height: var(--m27-source-size-control-height);
+  --m27-source-popup-inset-inline-start: 10px;
+  --m27-source-popup-chevron-font-size: 11px;
+
+  --m27-source-segmented-height: var(--m27-source-size-control-height);
+  --m27-source-segmented-radius: var(--m27-source-size-control-radius);
+  --m27-source-segmented-margin: 8px;
+  --m27-source-segmented-separator-height: 12px;
+
+  --m27-source-radio-size: 14px;
+  --m27-source-radio-dot-size: 4.800000190734863px;
+  --m27-source-radio-dash-width: 6.5px;
+  --m27-source-radio-dash-height: 2px;
+  --m27-source-radio-label-gap: 3px;
+
+  --m27-source-checkbox-size: 14px;
+  --m27-source-checkbox-radius: 4.5px;
+  --m27-source-checkbox-checkmark-width: 9.3100004196167px;
+  --m27-source-checkbox-checkmark-height: 8.930000305175781px;
+
+  --m27-source-slider-track-inset-block: 1px;
+  --m27-source-slider-track-inset-inline: 1px;
+  --m27-source-slider-tick-spacing: 2px;
+  --m27-source-slider-knob-width: 18px;
+  --m27-source-slider-knob-height: 14px;
+  --m27-source-slider-knob-pressed-width: 23px;
+  --m27-source-slider-knob-pressed-height: 18px;
+  --m27-source-slider-ticked-knob-width: 10px;
+  --m27-source-slider-ticked-knob-height: 18px;
+  --m27-source-slider-ticked-knob-pressed-width: 13px;
+  --m27-source-slider-ticked-knob-pressed-height: 23px;
+  --m27-source-dial-knob-height: 5px;
+  --m27-source-dial-knob-inset: 2.5px;
+
+  --m27-source-stepper-width: 17px;
+  --m27-source-stepper-radius: 5px;
+  --m27-source-stepper-font-size: 9px;
+  --m27-source-stepper-separator-width: 11px;
+
+  --m27-source-switch-track-width: var(--m27-source-size-toggle-track-width);
+  --m27-source-switch-track-height: var(--m27-source-size-control-height);
+  --m27-source-switch-knob-width: var(--m27-source-size-toggle-knob-width);
+  --m27-source-switch-knob-height: var(--m27-source-size-toggle-knob-height);
+  --m27-source-switch-knob-pressed-width: 40px;
+  --m27-source-switch-knob-pressed-height: 26px;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='large'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-size='large'] {
+  --m27-source-control-font-size: 13px;
+
+  --m27-source-button-height: var(--m27-source-size-control-height);
+  --m27-source-button-radius: 1000px;
+  --m27-source-button-padding-inline: var(
+    --m27-source-size-button-padding-inline
+  );
+  --m27-source-arrow-button-size: 28px;
+  --m27-source-arrow-button-font-size: 13px;
+
+  --m27-source-color-well-width: 56px;
+  --m27-source-color-well-height: 28px;
+
+  --m27-source-combo-button-inset: 2px;
+  --m27-source-combo-button-width: 24px;
+  --m27-source-combo-button-radius: 5.5px;
+  --m27-source-combo-field-padding-inline-start: 8px;
+  --m27-source-combo-field-padding-inline-end: 28px;
+  --m27-source-combo-chevron-font-size: 12.5px;
+
+  --m27-source-disclosure-size: 28px;
+  --m27-source-disclosure-radius: 1000px;
+  --m27-source-disclosure-font-size: 13px;
+  --m27-source-disclosure-symbol-height: 29px;
+
+  --m27-source-field-height: var(--m27-source-size-control-height);
+  --m27-source-field-inset-inline-start: 8px;
+  --m27-source-field-inset-inline-end: 8px;
+  --m27-source-field-search-glyph-size: 13px;
+  --m27-source-field-search-glyph-leading: 15px;
+  --m27-source-field-cursor-height: 18px;
+
+  --m27-source-popup-height: var(--m27-source-size-control-height);
+  --m27-source-popup-inset-inline-start: 14px;
+  --m27-source-popup-chevron-font-size: 13px;
+
+  --m27-source-segmented-height: var(--m27-source-size-control-height);
+  --m27-source-segmented-radius: var(--m27-source-size-control-radius);
+  --m27-source-segmented-margin: 12px;
+  --m27-source-segmented-separator-height: 18px;
+
+  --m27-source-radio-size: 18px;
+  --m27-source-radio-dot-size: 5px;
+  --m27-source-radio-dash-width: 8px;
+  --m27-source-radio-dash-height: 2px;
+  --m27-source-radio-label-gap: 5px;
+
+  --m27-source-checkbox-size: 18px;
+  --m27-source-checkbox-radius: 6.5px;
+  --m27-source-checkbox-checkmark-width: 11.720000267028809px;
+  --m27-source-checkbox-checkmark-height: 11.300000190734863px;
+
+  --m27-source-slider-track-inset-block: 0px;
+  --m27-source-slider-track-inset-inline: 0px;
+  --m27-source-slider-tick-spacing: 3px;
+  --m27-source-slider-knob-width: 24px;
+  --m27-source-slider-knob-height: 20px;
+  --m27-source-slider-knob-pressed-width: 30px;
+  --m27-source-slider-knob-pressed-height: 25px;
+  --m27-source-slider-ticked-knob-width: 24px;
+  --m27-source-slider-ticked-knob-height: 20px;
+  --m27-source-slider-ticked-knob-pressed-width: 30px;
+  --m27-source-slider-ticked-knob-pressed-height: 25px;
+  --m27-source-dial-knob-height: 6px;
+  --m27-source-dial-knob-inset: 3px;
+
+  --m27-source-stepper-width: 23px;
+  --m27-source-stepper-radius: 7px;
+  --m27-source-stepper-font-size: 12px;
+  --m27-source-stepper-separator-width: 15px;
+
+  --m27-source-switch-track-width: var(--m27-source-size-toggle-track-width);
+  --m27-source-switch-track-height: var(--m27-source-size-control-height);
+  --m27-source-switch-knob-width: var(--m27-source-size-toggle-knob-width);
+  --m27-source-switch-knob-height: var(--m27-source-size-toggle-knob-height);
+  --m27-source-switch-knob-pressed-width: 59px;
+  --m27-source-switch-knob-pressed-height: 37px;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='xl'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-size='xl'] {
+  --m27-source-control-font-size: 13px;
+
+  --m27-source-button-height: var(--m27-source-size-control-height);
+  --m27-source-button-radius: 1000px;
+  --m27-source-button-padding-inline: var(
+    --m27-source-size-button-padding-inline
+  );
+  --m27-source-arrow-button-size: 36px;
+  --m27-source-arrow-button-font-size: 13px;
+
+  --m27-source-color-well-width: 72px;
+  --m27-source-color-well-height: 36px;
+
+  --m27-source-combo-button-inset: 3px;
+  --m27-source-combo-button-width: 30px;
+  --m27-source-combo-button-radius: 6.5px;
+  --m27-source-combo-field-padding-inline-start: 10px;
+  --m27-source-combo-field-padding-inline-end: 34px;
+  --m27-source-combo-chevron-font-size: 13px;
+
+  --m27-source-disclosure-size: 36px;
+  --m27-source-disclosure-radius: 1000px;
+  --m27-source-disclosure-font-size: 13px;
+  --m27-source-disclosure-symbol-height: 38px;
+
+  --m27-source-field-height: var(--m27-source-size-control-height);
+  --m27-source-field-inset-inline-start: 10px;
+  --m27-source-field-inset-inline-end: 10px;
+  --m27-source-field-search-glyph-size: 13px;
+  --m27-source-field-search-glyph-leading: 15px;
+  --m27-source-field-cursor-height: 18px;
+
+  --m27-source-popup-height: var(--m27-source-size-control-height);
+  --m27-source-popup-inset-inline-start: 18px;
+  --m27-source-popup-chevron-font-size: 13px;
+
+  --m27-source-segmented-height: var(--m27-source-size-control-height);
+  --m27-source-segmented-radius: var(--m27-source-size-control-radius);
+  --m27-source-segmented-margin: 14px;
+  --m27-source-segmented-separator-height: 20px;
+
+  --m27-source-radio-size: 18px;
+  --m27-source-radio-dot-size: 5px;
+  --m27-source-radio-dash-width: 8px;
+  --m27-source-radio-dash-height: 2px;
+  --m27-source-radio-label-gap: 7px;
+
+  --m27-source-checkbox-size: 18px;
+  --m27-source-checkbox-radius: 6.5px;
+  --m27-source-checkbox-checkmark-width: 11.720000267028809px;
+  --m27-source-checkbox-checkmark-height: 11.300000190734863px;
+
+  --m27-source-slider-track-inset-block: 0px;
+  --m27-source-slider-track-inset-inline: 0px;
+  --m27-source-slider-tick-spacing: 3px;
+  --m27-source-slider-knob-width: 24px;
+  --m27-source-slider-knob-height: 20px;
+  --m27-source-slider-knob-pressed-width: 30px;
+  --m27-source-slider-knob-pressed-height: 25px;
+  --m27-source-slider-ticked-knob-width: 24px;
+  --m27-source-slider-ticked-knob-height: 20px;
+  --m27-source-slider-ticked-knob-pressed-width: 30px;
+  --m27-source-slider-ticked-knob-pressed-height: 25px;
+  --m27-source-dial-knob-height: 7px;
+  --m27-source-dial-knob-inset: 3px;
+
+  --m27-source-stepper-width: 30px;
+  --m27-source-stepper-radius: 9px;
+  --m27-source-stepper-font-size: 12px;
+  --m27-source-stepper-separator-width: 20px;
+
+  --m27-source-switch-track-width: var(--m27-source-size-toggle-track-width);
+  --m27-source-switch-track-height: var(--m27-source-size-control-height);
+  --m27-source-switch-knob-width: var(--m27-source-size-toggle-knob-width);
+  --m27-source-switch-knob-height: var(--m27-source-size-toggle-knob-height);
+  --m27-source-switch-knob-pressed-width: 73px;
+  --m27-source-switch-knob-pressed-height: 46px;
+}
+
+/* Button family. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-button-reference-label-width: 35px;
+  --m27-source-button-reference-width: 67px;
+  --m27-source-button-stroke-width: 0.5px;
+  --m27-source-button-label-standard: var(--m27-source-color-label-primary);
+  --m27-source-button-label-disabled: var(--m27-source-color-label-tertiary);
+  --m27-source-button-label-tinted: var(--m27-source-color-accent-blue);
+  --m27-source-button-label-destructive: var(--m27-source-color-accent-red);
+  --m27-source-button-label-prominent: var(--m27-source-color-white);
+  --m27-source-button-label-borderless-disabled-opacity: 0.5;
+  --m27-source-button-label-tinted-disabled-opacity: 0.4;
+  --m27-source-button-label-destructive-disabled-opacity: 0.4;
+  --m27-source-button-label-prominent-disabled-opacity: 0.5;
+  --m27-source-toggle-button-label-selected-disabled-opacity: 0.3;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-button-role='normal'][data-button-emphasis='standard'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-button-role='normal'][data-button-emphasis='standard'] {
+  --m27-source-button-current-label: var(--m27-source-button-label-standard);
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-button-emphasis='tinted'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-button-selected='true'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-button-emphasis='tinted'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-button-selected='true'] {
+  --m27-source-button-current-label: var(--m27-source-button-label-tinted);
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-button-role='destructive'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-button-role='destructive'] {
+  --m27-source-button-current-label: var(--m27-source-button-label-destructive);
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-button-emphasis='prominent'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-button-emphasis='prominent'] {
+  --m27-source-button-current-label: var(--m27-source-button-label-prominent);
+}
+
+/* Color wells. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-color-wheel-button-size: 28px;
+  --m27-source-color-wheel-color-size: 18px;
+  --m27-source-color-wheel-radius: 100px;
+  --m27-source-color-well-medium-swatch-inset: 3px;
+  --m27-source-color-well-swatch-radius: 100px;
+  --m27-source-color-well-swatch-selected-opacity: 0.5;
+}
+
+/* Combo boxes. Reference width is illustrative; height and insets are fixed. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-combo-reference-width: 100px;
+  --m27-source-combo-stroke-width: 0.5px;
+  --m27-source-combo-label-font-weight: 500;
+  --m27-source-combo-chevron-font-weight: 700;
+}
+
+/* Disclosure controls. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-disclosure-stroke-width: 0.5px;
+  --m27-source-disclosure-symbol-font-weight: 700;
+}
+
+/* Form compositions. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-form-title-subtitle-gap: 2px;
+  --m27-source-form-symbol-label-gap: 6px;
+  --m27-source-form-control-content-gap: 8px;
+  --m27-source-form-radio-stack-gap: 6px;
+}
+
+/* Image wells. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-image-well-size: 30px;
+  --m27-source-image-well-image-size: 24px;
+  --m27-source-image-well-radius: 3px;
+  --m27-source-image-well-fill: var(--m27-source-color-fill-quinary);
+  --m27-source-image-well-outer-shadow: 0 0 0 0.5px rgb(0 0 0 / 5%);
+  --m27-source-image-well-inner-dark-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 5%);
+  --m27-source-image-well-inner-highlight: inset 0 0 0 1px
+    rgb(255 255 255 / 100%);
+}
+
+/* Pop-up and pull-down buttons. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-popup-reference-width: 100px;
+  --m27-source-popup-icon-only-width: 24px;
+  --m27-source-popup-radius: 6px;
+  --m27-source-popup-item-gap: 8px;
+  --m27-source-popup-stroke-width: 0.5px;
+  --m27-source-popup-label-font-weight: 500;
+  --m27-source-popup-chevron-font-weight: 700;
+}
+
+/* Search and text fields. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-field-reference-width: 120px;
+  --m27-source-field-radius: 6px;
+  --m27-source-field-item-gap: 2px;
+  --m27-source-field-idle-stroke-width: 0.5px;
+  --m27-source-field-focus-stroke-width: 3px;
+  --m27-source-field-cursor-width: 2px;
+  --m27-source-field-cursor-radius: 100px;
+  --m27-source-field-cursor-color: var(--m27-source-color-accent-blue);
+  --m27-source-field-value-color: var(--m27-source-color-label-primary);
+  --m27-source-field-placeholder-color: var(--m27-source-color-label-secondary);
+  --m27-source-search-accessory-width: 16px;
+  --m27-source-search-accessory-height: 15px;
+}
+
+/* Segmented controls. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-segmented-reference-width: 267px;
+  --m27-source-segmented-fill: var(--m27-source-color-fill-quinary);
+  --m27-source-segmented-item-overlap: -1px;
+  --m27-source-segmented-minimum-segments: 3;
+  --m27-source-segmented-label: var(--m27-source-color-label-primary);
+  --m27-source-segmented-selected-label: var(--m27-source-color-white);
+}
+
+/* Sliders and dials. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-slider-reference-width: 100px;
+  --m27-source-slider-height: 24px;
+  --m27-source-slider-half-track-width: 50px;
+  --m27-source-slider-track-layout-height: 6px;
+  --m27-source-slider-knob-radius: 100px;
+  --m27-source-slider-knob-fill: var(--m27-source-color-white);
+  --m27-source-slider-knob-shadow: 0 0.5px 6px 0 rgb(0 0 0 / 12%);
+  --m27-source-dial-size: 24px;
+  --m27-source-dial-radius: 100px;
+  --m27-source-dial-stroke-width: 0.5px;
+}
+
+/* Steppers. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-stepper-height: 24px;
+  --m27-source-stepper-stroke-width: 0.5px;
+  --m27-source-stepper-inside-field-reference-width: 62px;
+  --m27-source-stepper-outside-field-reference-width: 66px;
+  --m27-source-stepper-outside-field-input-width: 42px;
+  --m27-source-stepper-outside-field-gap: 4px;
+}
+
+/* Toggle family. */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m27-source-switch-radius: 1000px;
+  --m27-source-switch-track-on: var(--m27-source-color-accent-blue);
+  --m27-source-switch-track-off: var(--m27-source-color-label-primary);
+  --m27-source-switch-track-pressed-overlay: var(
+    --m27-source-color-fill-quaternary
+  );
+  --m27-source-radio-radius: 100px;
+  --m27-source-toggle-label: var(--m27-source-color-label-primary);
+  --m27-source-toggle-label-disabled: var(--m27-source-color-label-tertiary);
+}