Mercurial

diff design_system/src/styles/semantic.css @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents
children 667156fcd3e3
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/design_system/src/styles/semantic.css	Wed Aug 05 05:25:40 2026 -0700
@@ -0,0 +1,245 @@
+:root {
+  --zenbu-font-editorial: var(--zenbu-ref-font-family-sans);
+  --zenbu-font-playful: var(--zenbu-ref-font-family-sans);
+  --zenbu-sys-font-family-ui: var(--zenbu-ref-font-family-sans);
+  --zenbu-sys-font-family-content: var(--zenbu-ref-font-family-sans);
+  --zenbu-sys-font-family-code: var(--zenbu-ref-font-family-mono);
+  --zenbu-sys-font-weight-regular: var(--zenbu-ref-font-weight-regular);
+  --zenbu-sys-font-weight-medium: var(--zenbu-ref-font-weight-medium);
+  --zenbu-sys-font-weight-strong: var(--zenbu-ref-font-weight-strong);
+  --zenbu-sys-font-weight-bold: var(--zenbu-ref-font-weight-bold);
+  --zenbu-sys-font-weight-display: var(--zenbu-ref-font-weight-bold);
+  --zenbu-sys-font-size-xs: var(--zenbu-ref-font-size-xs);
+  --zenbu-sys-font-size-sm: var(--zenbu-ref-font-size-sm);
+  --zenbu-sys-font-size-md: var(--zenbu-ref-font-size-md);
+  --zenbu-sys-font-size-lg: var(--zenbu-ref-font-size-lg);
+  --zenbu-sys-font-size-xl: var(--zenbu-ref-font-size-xl);
+  --zenbu-sys-font-size-2xl: var(--zenbu-ref-font-size-2xl);
+  --zenbu-sys-font-size-3xl: var(--zenbu-ref-font-size-3xl);
+  --zenbu-sys-line-height-xs: 1.25;
+  --zenbu-sys-line-height-sm: var(--zenbu-ref-line-height-ui);
+  --zenbu-sys-line-height-md: var(--zenbu-ref-line-height-body);
+  --zenbu-sys-line-height-lg: 1.5;
+  --zenbu-sys-line-height-xl: var(--zenbu-ref-line-height-ui);
+
+  --zenbu-sys-type-caption-family: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-type-caption-size: var(--zenbu-ref-font-size-xs);
+  --zenbu-sys-type-caption-weight: var(--zenbu-sys-font-weight-regular);
+  --zenbu-sys-type-caption-line-height: var(--zenbu-ref-line-height-ui);
+  --zenbu-sys-type-label-family: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-type-label-size: var(--zenbu-ref-font-size-sm);
+  --zenbu-sys-type-label-weight: var(--zenbu-sys-font-weight-medium);
+  --zenbu-sys-type-label-line-height: var(--zenbu-ref-line-height-ui);
+  --zenbu-sys-type-body-family: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-type-body-size: var(--zenbu-ref-font-size-md);
+  --zenbu-sys-type-body-weight: var(--zenbu-sys-font-weight-regular);
+  --zenbu-sys-type-body-line-height: var(--zenbu-ref-line-height-body);
+  --zenbu-sys-type-body-large-family: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-type-body-large-size: var(--zenbu-ref-font-size-lg);
+  --zenbu-sys-type-body-large-weight: var(--zenbu-sys-font-weight-regular);
+  --zenbu-sys-type-body-large-line-height: var(--zenbu-ref-line-height-body);
+  --zenbu-sys-type-subtitle-family: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-type-subtitle-size: var(--zenbu-ref-font-size-xl);
+  --zenbu-sys-type-subtitle-weight: var(--zenbu-sys-font-weight-strong);
+  --zenbu-sys-type-subtitle-line-height: var(--zenbu-ref-line-height-heading);
+  --zenbu-sys-type-title-family: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-type-title-size: var(--zenbu-ref-font-size-2xl);
+  --zenbu-sys-type-title-weight: var(--zenbu-sys-font-weight-strong);
+  --zenbu-sys-type-title-line-height: var(--zenbu-ref-line-height-heading);
+  --zenbu-sys-type-page-title-family: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-type-page-title-size:
+    clamp(var(--zenbu-ref-font-size-3xl), 1.5rem + 2cqi, var(--zenbu-ref-font-size-display));
+  --zenbu-sys-type-page-title-weight: var(--zenbu-sys-font-weight-strong);
+  --zenbu-sys-type-page-title-line-height: var(--zenbu-ref-line-height-tight);
+  --zenbu-sys-type-reading-family: var(--zenbu-sys-font-family-content);
+  --zenbu-sys-type-reading-size: var(--zenbu-ref-font-size-md);
+  --zenbu-sys-type-reading-weight: var(--zenbu-sys-font-weight-regular);
+  --zenbu-sys-type-reading-line-height: var(--zenbu-ref-line-height-reading);
+  --zenbu-sys-type-code-family: var(--zenbu-sys-font-family-code);
+  --zenbu-sys-type-code-size: var(--zenbu-ref-font-size-sm);
+  --zenbu-sys-type-code-weight: var(--zenbu-sys-font-weight-regular);
+  --zenbu-sys-type-code-line-height: var(--zenbu-ref-line-height-body);
+
+  --zenbu-sys-space-icon-label: var(--zenbu-ref-space-1);
+  --zenbu-sys-space-related: var(--zenbu-ref-space-2);
+  --zenbu-sys-space-control: var(--zenbu-ref-space-3);
+  --zenbu-sys-space-group: var(--zenbu-ref-space-4);
+  --zenbu-sys-space-container: var(--zenbu-ref-space-6);
+  --zenbu-sys-space-content: var(--zenbu-ref-space-8);
+  --zenbu-sys-space-section: var(--zenbu-ref-space-12);
+  --zenbu-sys-space-page: var(--zenbu-ref-space-16);
+  --zenbu-sys-padding-xs: var(--zenbu-ref-space-2);
+  --zenbu-sys-padding-sm: var(--zenbu-ref-space-3);
+  --zenbu-sys-padding-md: var(--zenbu-ref-space-4);
+  --zenbu-sys-padding-lg: var(--zenbu-ref-space-6);
+  --zenbu-sys-padding-xl: var(--zenbu-ref-space-8);
+
+  --zenbu-sys-radius-control-small: var(--zenbu-ref-radius-1);
+  --zenbu-sys-radius-control: var(--zenbu-ref-radius-2);
+  --zenbu-sys-radius-control-large: var(--zenbu-ref-radius-3);
+  --zenbu-sys-radius-container: var(--zenbu-ref-radius-3);
+  --zenbu-sys-radius-panel: var(--zenbu-ref-radius-4);
+  --zenbu-sys-radius-dialog: var(--zenbu-ref-radius-5);
+  --zenbu-sys-radius-pill: var(--zenbu-ref-radius-round);
+  --zenbu-sys-stroke-width: var(--zenbu-ref-stroke-1);
+  --zenbu-sys-stroke-width-emphasis: var(--zenbu-ref-stroke-2);
+  --zenbu-sys-focus-width: var(--zenbu-ref-stroke-3);
+  --zenbu-sys-focus-offset: var(--zenbu-ref-space-0-5);
+  --zenbu-sys-shadow-rest: none;
+  --zenbu-sys-shadow-subtle: var(--zenbu-ref-shadow-1);
+  --zenbu-sys-shadow-raised: var(--zenbu-ref-shadow-2);
+  --zenbu-sys-shadow-overlay: var(--zenbu-ref-shadow-3);
+  --zenbu-sys-shadow-dialog: var(--zenbu-ref-shadow-4);
+
+  --zenbu-sys-motion-duration-feedback: var(--zenbu-ref-duration-fast);
+  --zenbu-sys-motion-duration-state: var(--zenbu-ref-duration-normal);
+  --zenbu-sys-motion-duration-enter: var(--zenbu-ref-duration-normal);
+  --zenbu-sys-motion-duration-exit: var(--zenbu-ref-duration-fast);
+  --zenbu-sys-motion-duration-layout: var(--zenbu-ref-duration-slow);
+  --zenbu-sys-motion-ease-state: var(--zenbu-ref-ease-standard);
+  --zenbu-sys-motion-ease-enter: var(--zenbu-ref-ease-enter);
+  --zenbu-sys-motion-ease-exit: var(--zenbu-ref-ease-exit);
+  --zenbu-sys-motion-ease-layout: var(--zenbu-ref-ease-emphasized);
+  --zenbu-sys-opacity-disabled: var(--zenbu-ref-opacity-disabled);
+
+  --zenbu-sys-control-height-xs: var(--zenbu-ref-size-control-xs);
+  --zenbu-sys-control-height-sm: var(--zenbu-ref-size-control-sm);
+  --zenbu-sys-control-height-md: var(--zenbu-ref-size-control-md);
+  --zenbu-sys-control-height-lg: var(--zenbu-ref-size-control-lg);
+  --zenbu-sys-control-height-xl: var(--zenbu-ref-size-control-xl);
+  --zenbu-sys-control-padding-block-xs: var(--zenbu-ref-space-1);
+  --zenbu-sys-control-padding-block-sm: var(--zenbu-ref-space-1-5);
+  --zenbu-sys-control-padding-block-md: var(--zenbu-ref-space-2);
+  --zenbu-sys-control-padding-block-lg: var(--zenbu-ref-space-3);
+  --zenbu-sys-control-padding-block-xl: var(--zenbu-ref-space-4);
+  --zenbu-sys-control-padding-inline-xs: var(--zenbu-ref-space-2-5);
+  --zenbu-sys-control-padding-inline-sm: var(--zenbu-ref-space-3);
+  --zenbu-sys-control-padding-inline-md: var(--zenbu-ref-space-4);
+  --zenbu-sys-control-padding-inline-lg: var(--zenbu-ref-space-5);
+  --zenbu-sys-control-padding-inline-xl: var(--zenbu-ref-space-6);
+  --zenbu-sys-control-gap-xs: var(--zenbu-ref-space-1);
+  --zenbu-sys-control-gap-sm: var(--zenbu-ref-space-1-5);
+  --zenbu-sys-control-gap-md: var(--zenbu-ref-space-2);
+  --zenbu-sys-control-gap-lg: var(--zenbu-ref-space-3);
+  --zenbu-sys-control-gap-xl: var(--zenbu-ref-space-4);
+  --zenbu-sys-control-font-size-xs: var(--zenbu-ref-font-size-xs);
+  --zenbu-sys-control-font-size-sm: var(--zenbu-ref-font-size-sm);
+  --zenbu-sys-control-font-size-md: var(--zenbu-ref-font-size-md);
+  --zenbu-sys-control-font-size-lg: var(--zenbu-ref-font-size-lg);
+  --zenbu-sys-control-font-size-xl: var(--zenbu-ref-font-size-xl);
+  --zenbu-sys-control-line-height-xs: 1;
+  --zenbu-sys-control-line-height-sm: 1;
+  --zenbu-sys-control-line-height-md: 1;
+  --zenbu-sys-control-line-height-lg: 1;
+  --zenbu-sys-control-line-height-xl: 1;
+  --zenbu-sys-icon-size-xs: var(--zenbu-ref-size-icon-xs);
+  --zenbu-sys-icon-size-sm: var(--zenbu-ref-size-icon-sm);
+  --zenbu-sys-icon-size-md: var(--zenbu-ref-size-icon-md);
+  --zenbu-sys-icon-size-lg: var(--zenbu-ref-size-icon-lg);
+  --zenbu-sys-icon-size-xl: var(--zenbu-ref-size-icon-xl);
+  --zenbu-sys-size-target-min: var(--zenbu-ref-size-target-min);
+  --zenbu-sys-width-reading: 45rem;
+  --zenbu-sys-width-content: 64rem;
+  --zenbu-sys-width-page: 90rem;
+  --zenbu-sys-z-sticky: var(--zenbu-ref-z-sticky);
+  --zenbu-sys-z-dropdown: var(--zenbu-ref-z-dropdown);
+  --zenbu-sys-z-popover: var(--zenbu-ref-z-popover);
+  --zenbu-sys-z-notification: var(--zenbu-ref-z-notification);
+  --zenbu-sys-z-modal: var(--zenbu-ref-z-modal);
+
+  --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-100);
+  --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-100);
+  --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-50);
+  --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-200);
+  --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-white);
+  --zenbu-sys-color-surface-overlay: var(--zenbu-ref-color-white);
+  --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-200);
+  --zenbu-sys-color-scrim: var(--zenbu-ref-color-black-alpha-60);
+  --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-700);
+  --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-600);
+  --zenbu-sys-color-text-placeholder: var(--zenbu-ref-color-neutral-500);
+  --zenbu-sys-color-text-disabled: var(--zenbu-ref-color-neutral-400);
+  --zenbu-sys-color-text-inverse: var(--zenbu-ref-color-white);
+  --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-600);
+  --zenbu-sys-color-link-decoration: var(--zenbu-ref-color-link-decoration);
+  --zenbu-sys-color-icon-primary: var(--zenbu-ref-color-neutral-900);
+  --zenbu-sys-color-icon-secondary: var(--zenbu-ref-color-neutral-600);
+  --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-300);
+  --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-500);
+  --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-800);
+  --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-accent);
+  --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-accent-hover);
+  --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-accent-pressed);
+  --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-action-primary-border: var(--zenbu-sys-color-border-strong);
+  --zenbu-sys-color-action-neutral-background: var(--zenbu-sys-color-surface-default);
+  --zenbu-sys-color-action-neutral-background-hover: var(--zenbu-sys-color-surface-subtle);
+  --zenbu-sys-color-action-neutral-background-pressed: var(--zenbu-sys-color-surface-sunken);
+  --zenbu-sys-color-action-neutral-foreground: var(--zenbu-sys-color-text-primary);
+  --zenbu-sys-color-action-neutral-border: var(--zenbu-sys-color-border-default);
+  --zenbu-sys-color-action-danger-background: var(--zenbu-ref-color-danger);
+  --zenbu-sys-color-action-danger-background-hover: var(--zenbu-ref-color-danger-700);
+  --zenbu-sys-color-action-danger-background-pressed: var(--zenbu-ref-color-danger-900);
+  --zenbu-sys-color-action-danger-foreground: var(--zenbu-ref-color-white);
+  --zenbu-sys-color-action-danger-border: var(--zenbu-ref-color-danger);
+  --zenbu-sys-color-focus-inner: var(--zenbu-sys-color-surface-default);
+  --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-focus);
+  --zenbu-sys-color-selection-background: var(--zenbu-ref-color-warning-300);
+  --zenbu-sys-color-selection-foreground: var(--zenbu-sys-color-text-primary);
+  --zenbu-sys-color-info-background: var(--zenbu-ref-color-brand-100);
+  --zenbu-sys-color-info-foreground: var(--zenbu-ref-color-brand-700);
+  --zenbu-sys-color-info-border: var(--zenbu-ref-color-brand-400);
+  --zenbu-sys-color-success-background: var(--zenbu-ref-color-success-100);
+  --zenbu-sys-color-success-foreground: var(--zenbu-ref-color-success);
+  --zenbu-sys-color-success-border: var(--zenbu-ref-color-success-500);
+  --zenbu-sys-color-warning-background: var(--zenbu-ref-color-warning-100);
+  --zenbu-sys-color-warning-foreground: var(--zenbu-ref-color-warning);
+  --zenbu-sys-color-warning-border: var(--zenbu-ref-color-warning-500);
+  --zenbu-sys-color-danger-background: var(--zenbu-ref-color-danger-100);
+  --zenbu-sys-color-danger-foreground: var(--zenbu-ref-color-danger);
+  --zenbu-sys-color-danger-border: var(--zenbu-ref-color-danger-500);
+  --zenbu-sys-color-code-surface: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-code-text: var(--zenbu-ref-color-neutral-50);
+  --zenbu-sys-color-gridline: var(--zenbu-ref-color-black-alpha-8);
+  --zenbu-sys-color-data-1: var(--zenbu-ref-color-brand-600);
+  --zenbu-sys-color-data-2: var(--zenbu-ref-color-warning-500);
+  --zenbu-sys-color-data-3: var(--zenbu-ref-color-success-600);
+  --zenbu-sys-color-data-4: var(--zenbu-ref-color-violet-500);
+  --zenbu-sys-color-data-5: var(--zenbu-ref-color-amber-600);
+}
+
+@media (forced-colors: active) {
+  :root {
+    --zenbu-sys-color-surface-page: Canvas;
+    --zenbu-sys-color-surface-canvas: Canvas;
+    --zenbu-sys-color-surface-default: Canvas;
+    --zenbu-sys-color-surface-subtle: Canvas;
+    --zenbu-sys-color-surface-raised: Canvas;
+    --zenbu-sys-color-surface-overlay: Canvas;
+    --zenbu-sys-color-text-primary: CanvasText;
+    --zenbu-sys-color-text-secondary: CanvasText;
+    --zenbu-sys-color-text-tertiary: GrayText;
+    --zenbu-sys-color-text-disabled: GrayText;
+    --zenbu-sys-color-text-link: LinkText;
+    --zenbu-sys-color-border-subtle: CanvasText;
+    --zenbu-sys-color-border-default: CanvasText;
+    --zenbu-sys-color-border-strong: CanvasText;
+    --zenbu-sys-color-focus-inner: Canvas;
+    --zenbu-sys-color-focus-outer: CanvasText;
+    --zenbu-sys-shadow-subtle: none;
+    --zenbu-sys-shadow-raised: none;
+    --zenbu-sys-shadow-overlay: none;
+    --zenbu-sys-shadow-dialog: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --zenbu-sys-motion-duration-feedback: 1ms;
+    --zenbu-sys-motion-duration-state: 1ms;
+    --zenbu-sys-motion-duration-enter: 1ms;
+    --zenbu-sys-motion-duration-exit: 1ms;
+    --zenbu-sys-motion-duration-layout: 1ms;
+  }
+}