@ds-mo/tokens 0.1.0

package/dist/dimensions.css

@@ -0,0 +1,165 @@
+/* AUTO-GENERATED. See scripts/generate-dimension-tokens.mjs */
+/* Source: src/json/dimensions/dimensions.tokens.json        */
+
+:root {
+  /* Base — override --dimension-base to scale the entire dimension system */
+  --dimension-base:              8px;
+  --dimension-space-base:        var(--dimension-base);
+  --dimension-radius-base:       var(--dimension-base);
+  --dimension-size-base:         var(--dimension-base);
+  --dimension-stroke-width-base: var(--dimension-base);
+
+  /* Spacing — calc() relative to --dimension-space-base */
+  --dimension-space-100: var(--dimension-space-base);
+  --dimension-space-125: calc(var(--dimension-space-base) * 5 / 4);
+  --dimension-space-150: calc(var(--dimension-space-base) * 3 / 2);
+  --dimension-space-175: calc(var(--dimension-space-base) * 7 / 4);
+  --dimension-space-200: calc(var(--dimension-space-base) * 2);
+  --dimension-space-250: calc(var(--dimension-space-base) * 5 / 2);
+  --dimension-space-300: calc(var(--dimension-space-base) * 3);
+  --dimension-space-400: calc(var(--dimension-space-base) * 4);
+  --dimension-space-600: calc(var(--dimension-space-base) * 6);
+  --dimension-space-800: calc(var(--dimension-space-base) * 8);
+  --dimension-space-000: 0;
+  --dimension-space-012: calc(var(--dimension-space-base) / 8);
+  --dimension-space-025: calc(var(--dimension-space-base) / 4);
+  --dimension-space-050: calc(var(--dimension-space-base) / 2);
+  --dimension-space-075: calc(var(--dimension-space-base) * 3 / 4);
+  --dimension-space-n012: calc(var(--dimension-space-base) * -1 / 8);
+  --dimension-space-n025: calc(var(--dimension-space-base) * -1 / 4);
+  --dimension-space-n050: calc(var(--dimension-space-base) * -1 / 2);
+  --dimension-space-n075: calc(var(--dimension-space-base) * -3 / 4);
+  --dimension-space-n100: calc(var(--dimension-space-base) * -1);
+  --dimension-space-n125: calc(var(--dimension-space-base) * -5 / 4);
+  --dimension-space-n150: calc(var(--dimension-space-base) * -3 / 2);
+  --dimension-space-n175: calc(var(--dimension-space-base) * -7 / 4);
+  --dimension-space-n200: calc(var(--dimension-space-base) * -2);
+  --dimension-space-n250: calc(var(--dimension-space-base) * -5 / 2);
+  --dimension-space-n300: calc(var(--dimension-space-base) * -3);
+  --dimension-space-n400: calc(var(--dimension-space-base) * -4);
+  --dimension-space-n600: calc(var(--dimension-space-base) * -6);
+  --dimension-space-n800: calc(var(--dimension-space-base) * -8);
+
+  /* Radius — calc() relative to --dimension-radius-base */
+  --dimension-radius-100: var(--dimension-radius-base);
+  --dimension-radius-125: calc(var(--dimension-radius-base) * 5 / 4);
+  --dimension-radius-150: calc(var(--dimension-radius-base) * 3 / 2);
+  --dimension-radius-175: calc(var(--dimension-radius-base) * 7 / 4);
+  --dimension-radius-200: calc(var(--dimension-radius-base) * 2);
+  --dimension-radius-250: calc(var(--dimension-radius-base) * 5 / 2);
+  --dimension-radius-275: calc(var(--dimension-radius-base) * 11 / 4);
+  --dimension-radius-300: calc(var(--dimension-radius-base) * 3);
+  --dimension-radius-400: calc(var(--dimension-radius-base) * 4);
+  --dimension-radius-600: calc(var(--dimension-radius-base) * 6);
+  --dimension-radius-000: 0;
+  --dimension-radius-012: calc(var(--dimension-radius-base) / 8);
+  --dimension-radius-025: calc(var(--dimension-radius-base) / 4);
+  --dimension-radius-037: calc(var(--dimension-radius-base) * 3 / 8);
+  --dimension-radius-050: calc(var(--dimension-radius-base) / 2);
+  --dimension-radius-075: calc(var(--dimension-radius-base) * 3 / 4);
+  --dimension-radius-half: 9999px;
+
+  /* Stroke widths — calc() relative to --dimension-stroke-width-base */
+  --dimension-stroke-width-012: calc(var(--dimension-stroke-width-base) / 8);
+  --dimension-stroke-width-015: calc(var(--dimension-stroke-width-base) * 5 / 32);
+  --dimension-stroke-width-018: calc(var(--dimension-stroke-width-base) * 3 / 16);
+  --dimension-stroke-width-025: calc(var(--dimension-stroke-width-base) / 4);
+  --dimension-stroke-width-037: calc(var(--dimension-stroke-width-base) * 3 / 8);
+  --dimension-stroke-width-050: calc(var(--dimension-stroke-width-base) / 2);
+
+  /* Size — element width/height, calc() relative to --dimension-size-base */
+  --dimension-size-100: var(--dimension-size-base);
+  --dimension-size-150: calc(var(--dimension-size-base) * 3 / 2);
+  --dimension-size-200: calc(var(--dimension-size-base) * 2);
+  --dimension-size-250: calc(var(--dimension-size-base) * 5 / 2);
+  --dimension-size-300: calc(var(--dimension-size-base) * 3);
+  --dimension-size-400: calc(var(--dimension-size-base) * 4);
+  --dimension-size-500: calc(var(--dimension-size-base) * 5);
+  --dimension-size-600: calc(var(--dimension-size-base) * 6);
+  --dimension-size-800: calc(var(--dimension-size-base) * 8);
+  --dimension-size-000: 0;
+  --dimension-size-050: calc(var(--dimension-size-base) / 2);
+
+  /* Iconography — semantic icon size aliases, calc() relative to --dimension-size-base */
+  --dimension-iconography-xs: calc(var(--dimension-size-base) * 3 / 2);
+  --dimension-iconography-sm: calc(var(--dimension-size-base) * 2);
+  --dimension-iconography-md: calc(var(--dimension-size-base) * 5 / 2);
+  --dimension-iconography-lg: calc(var(--dimension-size-base) * 3);
+  --dimension-iconography-xl: calc(var(--dimension-size-base) * 4);
+  --dimension-iconography-2xl: calc(var(--dimension-size-base) * 6);
+  --dimension-iconography-3xl: calc(var(--dimension-size-base) * 8);
+
+  /* Card widths */
+  --dimension-card-width-sm: 400px;
+  --dimension-card-width-md: 600px;
+  --dimension-card-width-lg: 800px;
+
+  /* Modal widths */
+  --dimension-modal-width-sm: 400px;
+  --dimension-modal-width-md: 600px;
+  --dimension-modal-width-lg: 800px;
+
+  /* Form widths */
+  --dimension-form-width-sm: 400px;
+  --dimension-form-width-md: 600px;
+  --dimension-form-width-lg: 800px;
+
+  /* Table column widths */
+  --dimension-table-column-width-xs: 100px;
+  --dimension-table-column-width-sm: 200px;
+  --dimension-table-column-width-md: 300px;
+  --dimension-table-column-width-lg: 400px;
+  --dimension-table-column-width-xl: 500px;
+
+  /* Menu widths */
+  --dimension-menu-width-sm: 200px;
+  --dimension-menu-width-md: 400px;
+  --dimension-menu-width-lg: 600px;
+
+  /* Tooltip widths */
+  --dimension-tooltip-width-sm: 200px;
+  --dimension-tooltip-width-md: 400px;
+  --dimension-tooltip-width-lg: 600px;
+
+  /* Panel widths */
+  --dimension-panel-width-xs: 200px;
+  --dimension-panel-width-sm: 300px;
+  --dimension-panel-width-md: 400px;
+  --dimension-panel-width-lg: 500px;
+  --dimension-panel-width-xl: 600px;
+  --dimension-panel-width-fill: 100%;
+
+  /* Offset — for transforms and background-position, calc() relative to --dimension-space-base */
+  --dimension-offset-100: var(--dimension-space-base);
+  --dimension-offset-125: calc(var(--dimension-space-base) * 5 / 4);
+  --dimension-offset-150: calc(var(--dimension-space-base) * 3 / 2);
+  --dimension-offset-175: calc(var(--dimension-space-base) * 7 / 4);
+  --dimension-offset-200: calc(var(--dimension-space-base) * 2);
+  --dimension-offset-250: calc(var(--dimension-space-base) * 5 / 2);
+  --dimension-offset-000: 0;
+  --dimension-offset-025: calc(var(--dimension-space-base) / 4);
+  --dimension-offset-050: calc(var(--dimension-space-base) / 2);
+  --dimension-offset-075: calc(var(--dimension-space-base) * 3 / 4);
+  --dimension-offset-n025: calc(var(--dimension-space-base) * -1 / 4);
+  --dimension-offset-n050: calc(var(--dimension-space-base) * -1 / 2);
+  --dimension-offset-n075: calc(var(--dimension-space-base) * -3 / 4);
+  --dimension-offset-n100: calc(var(--dimension-space-base) * -1);
+  --dimension-offset-n125: calc(var(--dimension-space-base) * -5 / 4);
+  --dimension-offset-n150: calc(var(--dimension-space-base) * -3 / 2);
+  --dimension-offset-n175: calc(var(--dimension-space-base) * -7 / 4);
+  --dimension-offset-n200: calc(var(--dimension-space-base) * -2);
+  --dimension-offset-n250: calc(var(--dimension-space-base) * -5 / 2);
+
+  /* Scale — unitless multipliers for transform: scale() */
+  --dimension-scale-100: 1;
+  --dimension-scale-subtle: 0.99;
+
+  /* Z-index layers */
+  --dimension-z-index-base: 0;
+  --dimension-z-index-raised: 50;
+  --dimension-z-index-overlay: 250;
+  --dimension-z-index-modal: 450;
+  --dimension-z-index-floating: 500;
+  --dimension-z-index-tooltip: 750;
+
+}

package/dist/effects.css

@@ -0,0 +1,241 @@
+/* AUTO-GENERATED + HAND-AUTHORED. See scripts/generate-effects-tokens.mjs */
+/* Generated section: from src/json/effects/effects.tokens.json            */
+
+:root {
+  /* Blur */
+  --effect-blur-sm: 8px;
+  --effect-blur-md: 16px;
+  --effect-blur-lg: 32px;
+
+  /* Animation durations */
+  --effect-animation-duration-instant: 0ms;
+  --effect-animation-duration-short-1: 50ms;
+  --effect-animation-duration-short-2: 100ms;
+  --effect-animation-duration-short-3: 200ms;
+  --effect-animation-duration-medium-1: 300ms;
+  --effect-animation-duration-medium-2: 400ms;
+  --effect-animation-duration-medium-3: 500ms;
+  --effect-animation-duration-long-1: 750ms;
+  --effect-animation-duration-long-2: 1000ms;
+  --effect-animation-duration-long-3: 2000ms;
+
+  /* Animation delays */
+  --effect-animation-delay-instant: 0ms;
+  --effect-animation-delay-short-1: 200ms;
+  --effect-animation-delay-short-2: 300ms;
+  --effect-animation-delay-short-3: 400ms;
+  --effect-animation-delay-medium-1: 500ms;
+  --effect-animation-delay-medium-2: 750ms;
+  --effect-animation-delay-medium-3: 1000ms;
+  --effect-animation-delay-long-1: 2000ms;
+  --effect-animation-delay-long-2: 4000ms;
+  --effect-animation-delay-long-3: 6000ms;
+
+  /* Animation easing curves */
+  --effect-animation-easing-ease-in: cubic-bezier(0.47,0,0.75,0.72);
+  --effect-animation-easing-ease-out: cubic-bezier(0.17,0.84,0.44,1);
+  --effect-animation-easing-ease-in-out: cubic-bezier(0.77,0,0.18,1);
+  --effect-animation-easing-ease-in-out-back: cubic-bezier(0.22, 0.61, 0.01, 1.03);
+
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     HAND-AUTHORED — Motion presets and transition shorthands.
+     These compose duration + easing together for convenience in components.
+     Not representable as Figma variables (they combine multiple primitives).
+     ───────────────────────────────────────────────────────────────────────── */
+
+  /* Motion presets — use like: transition: color var(--effect-motion-short-2);
+     Duration names match Figma: short-1/2/3, medium-1/2/3, long-1/2/3        */
+  --effect-motion-instant:  var(--effect-animation-duration-instant)  var(--effect-animation-easing-ease-in-out);
+  --effect-motion-short-1:  var(--effect-animation-duration-short-1)  var(--effect-animation-easing-ease-in-out);
+  --effect-motion-short-2:  var(--effect-animation-duration-short-2)  var(--effect-animation-easing-ease-in-out);
+  --effect-motion-short-3:  var(--effect-animation-duration-short-3)  var(--effect-animation-easing-ease-in-out);
+  --effect-motion-medium-1: var(--effect-animation-duration-medium-1) var(--effect-animation-easing-ease-in-out);
+  --effect-motion-medium-2: var(--effect-animation-duration-medium-2) var(--effect-animation-easing-ease-in-out);
+  --effect-motion-medium-3: var(--effect-animation-duration-medium-3) var(--effect-animation-easing-ease-in-out);
+  --effect-motion-long-1:   var(--effect-animation-duration-long-1)   var(--effect-animation-easing-ease-in-out);
+  --effect-motion-long-2:   var(--effect-animation-duration-long-2)   var(--effect-animation-easing-ease-in-out);
+  --effect-motion-long-3:   var(--effect-animation-duration-long-3)   var(--effect-animation-easing-ease-in-out);
+
+  /* Interaction transition shorthands — names match Figma duration scale */
+  --effect-transition-interaction-background-instant:  background-color var(--effect-motion-instant);
+  --effect-transition-interaction-background-short-1:  background-color var(--effect-motion-short-1);
+  --effect-transition-interaction-background-short-2:  background-color var(--effect-motion-short-2);
+  --effect-transition-interaction-background-short-3:  background-color var(--effect-motion-short-3);
+  --effect-transition-interaction-background-medium-1: background-color var(--effect-motion-medium-1);
+  --effect-transition-interaction-background-medium-2: background-color var(--effect-motion-medium-2);
+  --effect-transition-interaction-background-medium-3: background-color var(--effect-motion-medium-3);
+  --effect-transition-interaction-background-long-1:   background-color var(--effect-motion-long-1);
+  --effect-transition-interaction-background-long-2:   background-color var(--effect-motion-long-2);
+  --effect-transition-interaction-background-long-3:   background-color var(--effect-motion-long-3);
+
+  --effect-transition-interaction-color-instant:  color var(--effect-motion-instant);
+  --effect-transition-interaction-color-short-1:  color var(--effect-motion-short-1);
+  --effect-transition-interaction-color-short-2:  color var(--effect-motion-short-2);
+  --effect-transition-interaction-color-short-3:  color var(--effect-motion-short-3);
+  --effect-transition-interaction-color-medium-1: color var(--effect-motion-medium-1);
+  --effect-transition-interaction-color-medium-2: color var(--effect-motion-medium-2);
+  --effect-transition-interaction-color-medium-3: color var(--effect-motion-medium-3);
+  --effect-transition-interaction-color-long-1:   color var(--effect-motion-long-1);
+  --effect-transition-interaction-color-long-2:   color var(--effect-motion-long-2);
+  --effect-transition-interaction-color-long-3:   color var(--effect-motion-long-3);
+
+  --effect-transition-interaction-opacity-instant:  opacity var(--effect-motion-instant);
+  --effect-transition-interaction-opacity-short-1:  opacity var(--effect-motion-short-1);
+  --effect-transition-interaction-opacity-short-2:  opacity var(--effect-motion-short-2);
+  --effect-transition-interaction-opacity-short-3:  opacity var(--effect-motion-short-3);
+  --effect-transition-interaction-opacity-medium-1: opacity var(--effect-motion-medium-1);
+  --effect-transition-interaction-opacity-medium-2: opacity var(--effect-motion-medium-2);
+  --effect-transition-interaction-opacity-medium-3: opacity var(--effect-motion-medium-3);
+  --effect-transition-interaction-opacity-long-1:   opacity var(--effect-motion-long-1);
+  --effect-transition-interaction-opacity-long-2:   opacity var(--effect-motion-long-2);
+  --effect-transition-interaction-opacity-long-3:   opacity var(--effect-motion-long-3);
+
+  --effect-transition-interaction-border-color-instant:  border-color var(--effect-motion-instant);
+  --effect-transition-interaction-border-color-short-1:  border-color var(--effect-motion-short-1);
+  --effect-transition-interaction-border-color-short-2:  border-color var(--effect-motion-short-2);
+  --effect-transition-interaction-border-color-short-3:  border-color var(--effect-motion-short-3);
+  --effect-transition-interaction-border-color-medium-1: border-color var(--effect-motion-medium-1);
+  --effect-transition-interaction-border-color-medium-2: border-color var(--effect-motion-medium-2);
+  --effect-transition-interaction-border-color-medium-3: border-color var(--effect-motion-medium-3);
+  --effect-transition-interaction-border-color-long-1:   border-color var(--effect-motion-long-1);
+  --effect-transition-interaction-border-color-long-2:   border-color var(--effect-motion-long-2);
+  --effect-transition-interaction-border-color-long-3:   border-color var(--effect-motion-long-3);
+
+  --effect-transition-interaction-transform-instant:  transform var(--effect-motion-instant);
+  --effect-transition-interaction-transform-short-1:  transform var(--effect-motion-short-1);
+  --effect-transition-interaction-transform-short-2:  transform var(--effect-motion-short-2);
+  --effect-transition-interaction-transform-short-3:  transform var(--effect-motion-short-3);
+  --effect-transition-interaction-transform-medium-1: transform var(--effect-motion-medium-1);
+  --effect-transition-interaction-transform-medium-2: transform var(--effect-motion-medium-2);
+  --effect-transition-interaction-transform-medium-3: transform var(--effect-motion-medium-3);
+  --effect-transition-interaction-transform-long-1:   transform var(--effect-motion-long-1);
+  --effect-transition-interaction-transform-long-2:   transform var(--effect-motion-long-2);
+  --effect-transition-interaction-transform-long-3:   transform var(--effect-motion-long-3);
+
+  /* ─────────────────────────────────────────────────────────────────────────
+     HAND-AUTHORED — Elevation tokens. Source: Figma App Styles — Variables.
+     Multi-layer box-shadows cannot be expressed as Figma number variables.
+
+     Three tokens per elevation level:
+       --effect-shadow-{name}    outset layers only  → apply via box-shadow on the main element
+       --effect-highlight-{name} inset layers only   → apply via box-shadow on an ::after overlay
+       --effect-elevation-{name} combined convenience → only safe when element has no overflow:clip
+
+     The shadow/highlight split exists because inset box-shadows are clipped by overflow:hidden.
+     Components that need overflow:clip (e.g. cards with rounded corners + clipped content)
+     must apply shadow on the root and highlight on a full-size ::after positioned inside.
+     ───────────────────────────────────────────────────────────────────────── */
+
+  /* ── elevated-none ─────────────────────────────────────────────────────── */
+  --effect-shadow-elevated-none:    none;
+  --effect-highlight-elevated-none: none;
+  --effect-elevation-elevated-none: none;
+
+  /* ── elevated-sm ───────────────────────────────────────────────────────── */
+  --effect-shadow-elevated-sm:
+    0px 2px 4px -2px var(--color-elevation-shadow),
+    0px 0px 0px 1px  var(--color-elevation-shadow);
+  --effect-highlight-elevated-sm:
+    inset 0px 4px 2px -4px var(--color-elevation-highlight),
+    inset 0px 0px 0px 1px  var(--color-elevation-highlight);
+  --effect-elevation-elevated-sm:
+    var(--effect-shadow-elevated-sm),
+    var(--effect-highlight-elevated-sm);
+
+  /* ── elevated-md ───────────────────────────────────────────────────────── */
+  --effect-shadow-elevated-md:
+    0px 4px 8px -2px var(--color-elevation-shadow),
+    0px 0px 0px 1px  var(--color-elevation-shadow);
+  --effect-highlight-elevated-md:
+    inset 0px 4px 2px -4px var(--color-elevation-highlight),
+    inset 0px 0px 0px 1px  var(--color-elevation-highlight);
+  --effect-elevation-elevated-md:
+    var(--effect-shadow-elevated-md),
+    var(--effect-highlight-elevated-md);
+
+  /* ── elevated-floating ─────────────────────────────────────────────────── */
+  --effect-shadow-elevated-floating:
+    0px 8px 16px -4px var(--color-elevation-shadow),
+    0px 0px 0px 1px   var(--color-elevation-shadow);
+  --effect-highlight-elevated-floating:
+    inset 0px 4px 2px -4px var(--color-elevation-highlight),
+    inset 0px 0px 0px 1px  var(--color-elevation-highlight);
+  --effect-elevation-elevated-floating:
+    var(--effect-shadow-elevated-floating),
+    var(--effect-highlight-elevated-floating);
+
+  /* ── depressed-sm ──────────────────────────────────────────────────────── */
+  /* Note: outset contains both shadow (top) and highlight (bottom rim) for depressed */
+  --effect-shadow-depressed-sm:
+    0px -4px 2px -4px var(--color-elevation-shadow),
+    0px  4px 2px -4px var(--color-elevation-highlight),
+    0px  0px 0px  1px var(--color-elevation-highlight);
+  --effect-highlight-depressed-sm:
+    inset 0px 2px 4px -2px var(--color-elevation-shadow),
+    inset 0px 0px 0px 1px  var(--color-elevation-shadow);
+  --effect-elevation-depressed-sm:
+    var(--effect-shadow-depressed-sm),
+    var(--effect-highlight-depressed-sm);
+
+  /* ── depressed-md ──────────────────────────────────────────────────────── */
+  --effect-shadow-depressed-md:
+    0px -4px 2px -4px var(--color-elevation-shadow),
+    0px  4px 2px -4px var(--color-elevation-highlight),
+    0px  0px 0px  1px var(--color-elevation-highlight);
+  --effect-highlight-depressed-md:
+    inset 0px 4px 8px -4px var(--color-elevation-shadow),
+    inset 0px 0px 0px 1px  var(--color-elevation-shadow);
+  --effect-elevation-depressed-md:
+    var(--effect-shadow-depressed-md),
+    var(--effect-highlight-depressed-md);
+
+  /* ── elevated-panel-top (shadow casts downward, attaches to bottom of viewport) ── */
+  --effect-shadow-elevated-panel-top:
+    0px 4px 8px 0px var(--color-elevation-shadow),
+    0px 0px 0px 1px var(--color-elevation-shadow);
+  --effect-highlight-elevated-panel-top:
+    inset 0px -4px 2px -4px var(--color-elevation-highlight),
+    inset 0px -1px 0px 0px  var(--color-elevation-highlight);
+  --effect-elevation-elevated-panel-top:
+    var(--effect-shadow-elevated-panel-top),
+    var(--effect-highlight-elevated-panel-top);
+
+  /* ── elevated-panel-right (shadow casts leftward, panel attached to right edge) ── */
+  --effect-shadow-elevated-panel-right:
+    -4px 0px 8px -2px var(--color-elevation-shadow),
+    0px  0px 0px  1px var(--color-elevation-shadow);
+  --effect-highlight-elevated-panel-right:
+    inset 4px 0px 2px -4px var(--color-elevation-highlight),
+    inset 1px 0px 0px 0px  var(--color-elevation-highlight);
+  --effect-elevation-elevated-panel-right:
+    var(--effect-shadow-elevated-panel-right),
+    var(--effect-highlight-elevated-panel-right);
+
+  /* ── elevated-panel-bottom (shadow casts upward, attaches to top of viewport) ── */
+  --effect-shadow-elevated-panel-bottom:
+    0px -4px 8px 0px var(--color-elevation-shadow),
+    0px  0px 0px 1px var(--color-elevation-shadow);
+  --effect-highlight-elevated-panel-bottom:
+    inset 0px 4px 2px -4px var(--color-elevation-highlight),
+    inset 0px 1px 0px 0px  var(--color-elevation-highlight);
+  --effect-elevation-elevated-panel-bottom:
+    var(--effect-shadow-elevated-panel-bottom),
+    var(--effect-highlight-elevated-panel-bottom);
+
+  /* ── elevated-panel-left (shadow casts rightward, panel attached to left edge) ── */
+  --effect-shadow-elevated-panel-left:
+    4px 0px 8px -2px var(--color-elevation-shadow),
+    0px 0px 0px  1px var(--color-elevation-shadow);
+  --effect-highlight-elevated-panel-left:
+    inset -4px 0px 2px -4px var(--color-elevation-highlight),
+    inset -1px 0px 0px 0px  var(--color-elevation-highlight);
+  --effect-elevation-elevated-panel-left:
+    var(--effect-shadow-elevated-panel-left),
+    var(--effect-highlight-elevated-panel-left);
+
+  /* ── focus ring ────────────────────────────────────────────────────────── */
+  --effect-focus-ring:
+    0 0 0 var(--dimension-space-025) transparent,
+    0 0 0 calc(var(--dimension-space-025) + var(--dimension-stroke-width-025)) var(--color-foreground-medium-brand);
+}

package/dist/globals.css

@@ -0,0 +1,112 @@
+/**
+ * TokoMo — Global Styles
+ *
+ * Base styles that consuming apps should import alongside tokens.
+ * Includes font loading, color scheme, reduced-motion support,
+ * focus ring defaults, button press effects, and theme transitions.
+ *
+ * Usage:
+ *   @import '@tokomo/tokens';
+ *   @import '@tokomo/tokens/globals';
+ *   @import '@tokomo/tokens/reset';     // optional
+ *   @import '@tokomo/tokens/utilities'; // optional
+ */
+
+/* Inter font — design system typeface */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block');
+
+:root {
+  color-scheme: light;
+}
+
+/* Honor prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  html,
+  body,
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  color: var(--color-foreground-primary);
+}
+
+/* Global text selection styling */
+*::selection {
+  background-color: var(--color-background-faint-brand);
+  color: var(--color-foreground-bold-brand);
+}
+
+*::-moz-selection {
+  background-color: var(--color-background-faint-brand);
+  color: var(--color-foreground-bold-brand);
+}
+
+/* Disable text selection for buttons and interactive elements */
+button {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* Remove default browser focus outlines */
+*:focus {
+  outline: none;
+}
+
+/* Suppress focus ring when focus came from a keyboard shortcut (not Tab) */
+[data-focus-from-shortcut]:focus,
+[data-focus-from-shortcut]:focus-visible {
+  outline: none !important;
+}
+
+/* Custom focus ring using outline with offset */
+/* Creates: 2px gap (outline-offset) + 2px ring (outline-width) */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+[tabindex]:focus-visible {
+  outline: var(--dimension-stroke-width-025) solid var(--color-foreground-medium-brand);
+  outline-offset: var(--dimension-offset-025);
+  transition: outline var(--effect-motion-short-2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  textarea:focus-visible,
+  select:focus-visible,
+  [tabindex]:focus-visible {
+    transition: none;
+  }
+}
+
+/* Disable color transitions during theme changes for instant updates */
+html.theme-changing,
+html.theme-changing *,
+html.theme-changing *::before,
+html.theme-changing *::after {
+  transition: none !important;
+  transition-duration: 0ms !important;
+  transition-delay: 0ms !important;
+}