/* 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; /* Opacity */ --effect-opacity-low: 0.25; --effect-opacity-medium: 0.5; --effect-opacity-high: 0.75; /* 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-linear: cubic-bezier(0, 0, 1, 1); --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 into reusable motion values. 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} outer layers only --effect-highlight-{name} inset layers only --effect-elevation-{name} combined default for the normal one-element case The public split supports paint hierarchies where an unclipped outer frame carries depth around an inner content region that clips descendants. An element's own overflow does not automatically require separate layers. ───────────────────────────────────────────────────────────────────────── */ /* ── 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 the bottom highlight rim for depressed elevations */ --effect-shadow-depressed-sm: 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-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); }