@ds-gn/tokens 0.0.0-stage → 0.5.0

package/dist/theme.tailwind.css

@@ -0,0 +1,549 @@
+/* ==========================================================================
+ * theme.tailwind.css
+ *
+ * Input to the Tailwind CLI. Processed at build time.
+ *
+ * Tailwind reads every --color-* entry and generates utilities for it:
+ *   --color-text-primary → text-text-primary, bg-text-primary, border-text-primary…
+ *
+ * Two categories of entries:
+ *
+ * A) Suffixed — generates utilities consumers can use for explicit overrides
+ *      --color-text-primary-on-light → text-text-primary-on-light
+ *      Value references the public token with a hardcoded fallback.
+ *
+ * B) Unsuffixed — generates the utilities components actually use
+ *      --color-text-primary → text-text-primary
+ *      Value is inherit. Tailwind outputs this on :root
+ *      in the compiled CSS, but that :root declaration is dead inside shadow
+ *      roots. Doesn't matter — aliases.css sets --color-text-primary on the
+ *      real :root, and it inherits in.
+ * ========================================================================== */
+
+@theme {
+  /* Typography — font-display utility for heading components */
+  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
+
+  /* Structural breakpoints — compile-time only, not override targets */
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  /* A. Suffixed — consumer override utilities */
+  --color-accent-on-light: var(--accent-on-light, var(--color-orange-600));
+  --color-accent-on-dark: var(--accent-on-dark, var(--color-orange-500));
+  --color-accent-text-on-light: var(--accent-text-on-light, var(--color-orange-700));
+  --color-accent-text-on-dark: var(--accent-text-on-dark, var(--color-orange-500));
+
+  --color-badge-bg-on-light: var(--badge-bg-on-light, var(--color-neutral-100));
+  --color-badge-bg-on-dark: var(--badge-bg-on-dark, var(--color-blue-700));
+  --color-badge-border-on-light: var(--badge-border-on-light, var(--color-neutral-200));
+  --color-badge-border-on-dark: var(--badge-border-on-dark, var(--color-blue-600));
+  --color-badge-brand-text-on-light: var(--badge-brand-text-on-light, var(--color-blue-700));
+  --color-badge-brand-text-on-dark: var(--badge-brand-text-on-dark, var(--color-blue-100));
+  --color-badge-error-text-on-light: var(--badge-error-text-on-light, #b91c1c);
+  --color-badge-error-text-on-dark: var(--badge-error-text-on-dark, #fecaca);
+  --color-badge-text-on-light: var(--badge-text-on-light, var(--color-neutral-700));
+  --color-badge-text-on-dark: var(--badge-text-on-dark, var(--color-neutral-100));
+  --color-badge-warning-text-on-light: var(--badge-warning-text-on-light, var(--color-orange-900));
+  --color-badge-warning-text-on-dark: var(--badge-warning-text-on-dark, var(--color-orange-100));
+
+  --color-brand-on-light: var(--brand-on-light, var(--color-blue-500));
+  --color-brand-on-dark: var(--brand-on-dark, var(--color-blue-400));
+  --color-brand-subtle-on-light: var(--brand-subtle-on-light, var(--color-blue-100));
+  --color-brand-subtle-on-dark: var(--brand-subtle-on-dark, var(--color-blue-800));
+
+  --color-button-ghost-bg-on-light: var(--button-ghost-bg-on-light, transparent);
+  --color-button-ghost-bg-on-dark: var(--button-ghost-bg-on-dark, transparent);
+  --color-button-ghost-bg-hover-on-light: var(--button-ghost-bg-hover-on-light, var(--color-neutral-200));
+  --color-button-ghost-bg-hover-on-dark: var(--button-ghost-bg-hover-on-dark, var(--color-neutral-300));
+  --color-button-ghost-text-on-light: var(--button-ghost-text-on-light, var(--color-neutral-900));
+  --color-button-ghost-text-on-dark: var(--button-ghost-text-on-dark, var(--color-white));
+  --color-button-ghost-text-hover-on-light: var(--button-ghost-text-hover-on-light, var(--color-neutral-900));
+  --color-button-ghost-text-hover-on-dark: var(--button-ghost-text-hover-on-dark, var(--color-neutral-900));
+  --color-button-gradient-text-on-light: var(--button-gradient-text-on-light, var(--color-white));
+  --color-button-gradient-text-on-dark: var(--button-gradient-text-on-dark, var(--color-neutral-900));
+  --color-button-inline-text-on-light: var(--button-inline-text-on-light, var(--color-neutral-900));
+  --color-button-inline-text-on-dark: var(--button-inline-text-on-dark, var(--color-white));
+  --color-button-inline-text-hover-on-light: var(--button-inline-text-hover-on-light, var(--color-orange-500));
+  --color-button-inline-text-hover-on-dark: var(--button-inline-text-hover-on-dark, var(--color-orange-500));
+  --color-button-link-text-on-light: var(--button-link-text-on-light, var(--color-blue-700));
+  --color-button-link-text-on-dark: var(--button-link-text-on-dark, var(--color-blue-400));
+  --color-button-link-text-hover-on-light: var(--button-link-text-hover-on-light, var(--color-blue-800));
+  --color-button-link-text-hover-on-dark: var(--button-link-text-hover-on-dark, var(--color-blue-300));
+  --color-button-mono-outline-bg-on-light: var(--button-mono-outline-bg-on-light, var(--color-transparent));
+  --color-button-mono-outline-bg-on-dark: var(--button-mono-outline-bg-on-dark, var(--color-transparent));
+  --color-button-mono-outline-bg-hover-on-light: var(--button-mono-outline-bg-hover-on-light, var(--color-neutral-900));
+  --color-button-mono-outline-bg-hover-on-dark: var(--button-mono-outline-bg-hover-on-dark, var(--color-white));
+  --color-button-mono-outline-outline-on-light: var(--button-mono-outline-outline-on-light, var(--color-neutral-900));
+  --color-button-mono-outline-outline-on-dark: var(--button-mono-outline-outline-on-dark, var(--color-neutral-100));
+  --color-button-mono-outline-outline-hover-on-light: var(--button-mono-outline-outline-hover-on-light, var(--color-neutral-700));
+  --color-button-mono-outline-outline-hover-on-dark: var(--button-mono-outline-outline-hover-on-dark, var(--color-white));
+  --color-button-mono-outline-text-on-light: var(--button-mono-outline-text-on-light, var(--color-neutral-900));
+  --color-button-mono-outline-text-on-dark: var(--button-mono-outline-text-on-dark, var(--color-neutral-100));
+  --color-button-mono-outline-text-hover-on-light: var(--button-mono-outline-text-hover-on-light, var(--color-white));
+  --color-button-mono-outline-text-hover-on-dark: var(--button-mono-outline-text-hover-on-dark, var(--color-neutral-900));
+  --color-button-mono-solid-bg-on-light: var(--button-mono-solid-bg-on-light, var(--color-neutral-900));
+  --color-button-mono-solid-bg-on-dark: var(--button-mono-solid-bg-on-dark, var(--color-white));
+  --color-button-mono-solid-bg-hover-on-light: var(--button-mono-solid-bg-hover-on-light, var(--color-neutral-700));
+  --color-button-mono-solid-bg-hover-on-dark: var(--button-mono-solid-bg-hover-on-dark, var(--color-neutral-200));
+  --color-button-mono-solid-text-on-light: var(--button-mono-solid-text-on-light, var(--color-white));
+  --color-button-mono-solid-text-on-dark: var(--button-mono-solid-text-on-dark, var(--color-neutral-900));
+  --color-button-outline-bg-on-light: var(--button-outline-bg-on-light, var(--color-transparent));
+  --color-button-outline-bg-on-dark: var(--button-outline-bg-on-dark, var(--color-transparent));
+  --color-button-outline-bg-hover-on-light: var(--button-outline-bg-hover-on-light, var(--color-orange-600));
+  --color-button-outline-bg-hover-on-dark: var(--button-outline-bg-hover-on-dark, var(--color-orange-500));
+  --color-button-outline-outline-on-light: var(--button-outline-outline-on-light, var(--color-orange-500));
+  --color-button-outline-outline-on-dark: var(--button-outline-outline-on-dark, var(--color-orange-600));
+  --color-button-outline-outline-hover-on-light: var(--button-outline-outline-hover-on-light, var(--color-orange-600));
+  --color-button-outline-outline-hover-on-dark: var(--button-outline-outline-hover-on-dark, var(--color-orange-500));
+  --color-button-outline-text-on-light: var(--button-outline-text-on-light, var(--color-neutral-900));
+  --color-button-outline-text-on-dark: var(--button-outline-text-on-dark, var(--color-neutral-100));
+  --color-button-outline-text-hover-on-light: var(--button-outline-text-hover-on-light, var(--color-orange-600));
+  --color-button-outline-text-hover-on-dark: var(--button-outline-text-hover-on-dark, var(--color-orange-500));
+  --color-button-solid-bg-on-light: var(--button-solid-bg-on-light, var(--color-orange-500));
+  --color-button-solid-bg-on-dark: var(--button-solid-bg-on-dark, var(--color-orange-600));
+  --color-button-solid-bg-hover-on-light: var(--button-solid-bg-hover-on-light, var(--color-orange-400));
+  --color-button-solid-bg-hover-on-dark: var(--button-solid-bg-hover-on-dark, var(--color-orange-500));
+  --color-button-solid-text-on-light: var(--button-solid-text-on-light, var(--color-neutral-900));
+  --color-button-solid-text-on-dark: var(--button-solid-text-on-dark, var(--color-neutral-900));
+
+  --color-card-bg-on-light: var(--card-bg-on-light, var(--color-white));
+  --color-card-bg-on-dark: var(--card-bg-on-dark, var(--color-blue-800));
+  --color-card-border-on-light: var(--card-border-on-light, var(--color-neutral-200));
+  --color-card-border-on-dark: var(--card-border-on-dark, rgb(255 255 255 / 0.08));
+
+  --color-disabled-on-light: var(--disabled-on-light, var(--color-neutral-400));
+  --color-disabled-on-dark: var(--disabled-on-dark, var(--color-neutral-600));
+
+  --color-error-on-light: var(--error-on-light, #ef4444);
+  --color-error-on-dark: var(--error-on-dark, #f87171);
+  --color-error-subtle-on-light: var(--error-subtle-on-light, #fee2e2);
+  --color-error-subtle-on-dark: var(--error-subtle-on-dark, #7f1d1d);
+
+  --color-eyebrow-on-light: var(--eyebrow-on-light, var(--color-orange-700));
+  --color-eyebrow-on-dark: var(--eyebrow-on-dark, var(--color-orange-500));
+
+  --color-focus-on-light: var(--focus-on-light, var(--color-blue-500));
+  --color-focus-on-dark: var(--focus-on-dark, var(--color-blue-400));
+
+  --color-gradient-accent-bg-on-light: var(--gradient-accent-bg-on-light, linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400)));
+  --color-gradient-accent-bg-on-dark: var(--gradient-accent-bg-on-dark, linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400)));
+  --color-gradient-accent-bg-hover-on-light: var(--gradient-accent-bg-hover-on-light, linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300)));
+  --color-gradient-accent-bg-hover-on-dark: var(--gradient-accent-bg-hover-on-dark, linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300)));
+
+  --color-info-on-light: var(--info-on-light, var(--color-blue-500));
+  --color-info-on-dark: var(--info-on-dark, var(--color-blue-400));
+  --color-info-subtle-on-light: var(--info-subtle-on-light, var(--color-blue-100));
+  --color-info-subtle-on-dark: var(--info-subtle-on-dark, var(--color-blue-900));
+
+  --color-input-bg-on-light: var(--input-bg-on-light, var(--surface-default-on-light));
+  --color-input-bg-on-dark: var(--input-bg-on-dark, var(--surface-default-on-dark));
+  --color-input-border-on-light: var(--input-border-on-light, var(--color-neutral-300));
+  --color-input-border-on-dark: var(--input-border-on-dark, var(--color-blue-600));
+  --color-input-error-text-on-light: var(--input-error-text-on-light, #b91c1c);
+  --color-input-error-text-on-dark: var(--input-error-text-on-dark, #f87171);
+  --color-input-focus-on-light: var(--input-focus-on-light, var(--color-blue-500));
+  --color-input-focus-on-dark: var(--input-focus-on-dark, var(--color-blue-400));
+  --color-input-placeholder-on-light: var(--input-placeholder-on-light, var(--color-neutral-600));
+  --color-input-placeholder-on-dark: var(--input-placeholder-on-dark, var(--color-neutral-500));
+  --color-input-text-on-light: var(--input-text-on-light, var(--color-neutral-900));
+  --color-input-text-on-dark: var(--input-text-on-dark, var(--color-neutral-100));
+
+  --color-interactive-on-light: var(--interactive-on-light, var(--color-blue-500));
+  --color-interactive-on-dark: var(--interactive-on-dark, var(--color-blue-400));
+  --color-interactive-active-on-light: var(--interactive-active-on-light, var(--color-blue-700));
+  --color-interactive-active-on-dark: var(--interactive-active-on-dark, var(--color-blue-500));
+  --color-interactive-disabled-on-light: var(--interactive-disabled-on-light, var(--color-neutral-300));
+  --color-interactive-disabled-on-dark: var(--interactive-disabled-on-dark, var(--color-neutral-700));
+  --color-interactive-hover-on-light: var(--interactive-hover-on-light, var(--color-blue-600));
+  --color-interactive-hover-on-dark: var(--interactive-hover-on-dark, var(--color-blue-300));
+
+  --color-inverse-on-light: var(--inverse-on-light, var(--color-white));
+  --color-inverse-on-dark: var(--inverse-on-dark, var(--color-neutral-900));
+
+  --color-nav-link-dropdown-text-hover-on-light: var(--nav-link-dropdown-text-hover-on-light, var(--color-orange-700));
+  --color-nav-link-dropdown-text-hover-on-dark: var(--nav-link-dropdown-text-hover-on-dark, var(--color-orange-200));
+
+  --color-outline-on-light: var(--outline-on-light, var(--color-neutral-200));
+  --color-outline-on-dark: var(--outline-on-dark, oklch(24% 0.05 255));
+  --color-outline-strong-on-light: var(--outline-strong-on-light, var(--color-neutral-300));
+  --color-outline-strong-on-dark: var(--outline-strong-on-dark, var(--color-blue-600));
+  --color-outline-subtle-on-light: var(--outline-subtle-on-light, var(--color-neutral-100));
+  --color-outline-subtle-on-dark: var(--outline-subtle-on-dark, var(--color-blue-800));
+
+  --color-page-on-light: var(--page-on-light, oklch(97% 0.01 255));
+  --color-page-on-dark: var(--page-on-dark, oklch(12% 0.05 255));
+
+  --color-pattern-dot-on-light: var(--pattern-dot-on-light, oklch(70% 0.03 255));
+  --color-pattern-dot-on-dark: var(--pattern-dot-on-dark, oklch(40% 0.05 255));
+
+  --color-success-on-light: var(--success-on-light, #047857);
+  --color-success-on-dark: var(--success-on-dark, #34d399);
+  --color-success-subtle-on-light: var(--success-subtle-on-light, #d1fae5);
+  --color-success-subtle-on-dark: var(--success-subtle-on-dark, #064e3b);
+
+  --color-surface-default-on-light: var(--surface-default-on-light, oklch(100% 0 0));
+  --color-surface-default-on-dark: var(--surface-default-on-dark, oklch(18% 0.06 255));
+  --color-surface-elevated-on-light: var(--surface-elevated-on-light, oklch(96% 0.02 255));
+  --color-surface-elevated-on-dark: var(--surface-elevated-on-dark, oklch(0.22 0.08 255));
+  --color-surface-subtle-on-light: var(--surface-subtle-on-light, oklch(94% 0.04 255));
+  --color-surface-subtle-on-dark: var(--surface-subtle-on-dark, oklch(30% 0.12 255));
+
+  --color-terminal-bg: var(--terminal-bg, #09090b);
+  --color-terminal-border: var(--terminal-border, #1a1a1a);
+  --color-terminal-dot-red: var(--terminal-dot-red, #ea580c);
+  --color-terminal-dot-yellow: var(--terminal-dot-yellow, #fbbf24);
+  --color-terminal-muted: var(--terminal-muted, #a1a1aa);
+  --color-terminal-success: var(--terminal-success, #34d399);
+  --color-terminal-text: var(--terminal-text, #e4e4e7);
+  --color-terminal-titlebar: var(--terminal-titlebar, #0d0d0f);
+
+  --color-text-primary-on-light: var(--text-primary-on-light, var(--color-neutral-900));
+  --color-text-primary-on-dark: var(--text-primary-on-dark, var(--color-neutral-50));
+  --color-text-secondary-on-light: var(--text-secondary-on-light, var(--color-neutral-600));
+  --color-text-secondary-on-dark: var(--text-secondary-on-dark, var(--color-neutral-400));
+  --color-text-tertiary-on-light: var(--text-tertiary-on-light, var(--color-neutral-600));
+  --color-text-tertiary-on-dark: var(--text-tertiary-on-dark, var(--color-neutral-400));
+
+  --color-warning-on-light: var(--warning-on-light, var(--color-orange-500));
+  --color-warning-on-dark: var(--warning-on-dark, var(--color-orange-400));
+  --color-warning-subtle-on-light: var(--warning-subtle-on-light, var(--color-orange-100));
+  --color-warning-subtle-on-dark: var(--warning-subtle-on-dark, var(--color-orange-900));
+
+  --duration-moderate: var(--dsgn-src-duration-moderate, 240ms);
+  --duration-quick: var(--dsgn-src-duration-quick, 180ms);
+
+  --ease-emphasized: var(--dsgn-src-ease-emphasized, cubic-bezier(0.16, 1, 0.3, 1));
+
+  --radius-button: var(--dsgn-src-radius-button, calc(infinity * 1px));
+  --radius-card: var(--dsgn-src-radius-card, 1rem);
+  --radius-input: var(--dsgn-src-radius-input, 0.5rem);
+  --radius-surface: var(--dsgn-src-radius-surface, 1rem);
+
+  --shadow-card-on-light: var(--dsgn-src-shadow-card-on-light, 0 10px 30px rgb(15 23 42 / 0.08));
+  --shadow-card-on-dark: var(--dsgn-src-shadow-card-on-dark, 0 12px 32px rgb(2 6 23 / 0.35));
+
+  /* B. Unsuffixed — what components use */
+  --color-accent: inherit;
+  --color-accent-text: inherit;
+
+  --color-badge-bg: inherit;
+  --color-badge-border: inherit;
+  --color-badge-brand-text: inherit;
+  --color-badge-error-text: inherit;
+  --color-badge-text: inherit;
+  --color-badge-warning-text: inherit;
+
+  --color-brand: inherit;
+  --color-brand-subtle: inherit;
+
+  --color-button-ghost-bg: inherit;
+  --color-button-ghost-bg-hover: inherit;
+  --color-button-ghost-text: inherit;
+  --color-button-ghost-text-hover: inherit;
+  --color-button-gradient-text: inherit;
+  --color-button-inline-text: inherit;
+  --color-button-inline-text-hover: inherit;
+  --color-button-link-text: inherit;
+  --color-button-link-text-hover: inherit;
+  --color-button-mono-outline-bg: inherit;
+  --color-button-mono-outline-bg-hover: inherit;
+  --color-button-mono-outline-outline: inherit;
+  --color-button-mono-outline-outline-hover: inherit;
+  --color-button-mono-outline-text: inherit;
+  --color-button-mono-outline-text-hover: inherit;
+  --color-button-mono-solid-bg: inherit;
+  --color-button-mono-solid-bg-hover: inherit;
+  --color-button-mono-solid-text: inherit;
+  --color-button-outline-bg: inherit;
+  --color-button-outline-bg-hover: inherit;
+  --color-button-outline-outline: inherit;
+  --color-button-outline-outline-hover: inherit;
+  --color-button-outline-text: inherit;
+  --color-button-outline-text-hover: inherit;
+  --color-button-solid-bg: inherit;
+  --color-button-solid-bg-hover: inherit;
+  --color-button-solid-text: inherit;
+
+  --color-card-bg: inherit;
+  --color-card-border: inherit;
+
+  --color-disabled: inherit;
+
+  --color-error: inherit;
+  --color-error-subtle: inherit;
+
+  --color-eyebrow: inherit;
+
+  --color-focus: inherit;
+
+  --color-gradient-accent-bg: inherit;
+  --color-gradient-accent-bg-hover: inherit;
+
+  --color-info: inherit;
+  --color-info-subtle: inherit;
+
+  --color-input-bg: inherit;
+  --color-input-border: inherit;
+  --color-input-error-text: inherit;
+  --color-input-focus: inherit;
+  --color-input-placeholder: inherit;
+  --color-input-text: inherit;
+
+  --color-interactive: inherit;
+  --color-interactive-active: inherit;
+  --color-interactive-disabled: inherit;
+  --color-interactive-hover: inherit;
+
+  --color-inverse: inherit;
+
+  --color-nav-link-dropdown-text-hover: inherit;
+
+  --color-outline: inherit;
+  --color-outline-strong: inherit;
+  --color-outline-subtle: inherit;
+
+  --color-page: inherit;
+
+  --color-pattern-dot: inherit;
+
+  --color-success: inherit;
+  --color-success-subtle: inherit;
+
+  --color-surface-default: inherit;
+  --color-surface-elevated: inherit;
+  --color-surface-subtle: inherit;
+
+  --color-text-primary: inherit;
+  --color-text-secondary: inherit;
+  --color-text-tertiary: inherit;
+
+  --color-warning: inherit;
+  --color-warning-subtle: inherit;
+
+  --shadow-card: inherit;
+}
+/* ==========================================================================
+ * Animation Tokens
+ *
+ * Keyframes and --animate-* theme variables for Tailwind utility generation.
+ * Tailwind reads --animate-* entries and generates animate-* utilities:
+ *   --animate-fade-in-a → animate-fade-in-a
+ *
+ * Two identical fade-in keyframes (a/b) allow components to alternate
+ * animation names on each cycle, forcing the browser to restart the animation.
+ *
+ * The @keyframes live INSIDE @theme deliberately. This file is appended to
+ * theme.tailwind.css, which is the input to every component's Tailwind build —
+ * so a keyframe at the top level is copied verbatim into all ~25 component
+ * stylesheets whether or not the component animates. Nested here, Tailwind
+ * emits each one only into the components that actually use its animate-*
+ * utility.
+ *
+ * Duration and easing values are NOT here — they are semantic tokens in
+ * animations.json, so they get the same public/override treatment as every
+ * other token rather than being hand-maintained in this file.
+ * ========================================================================== */
+
+/* --- Registered custom properties ------------------------------------------
+ * An unregistered custom property cannot be interpolated, so a gradient angle
+ * driven by a keyframe needs a real registration with a type. `@property` is
+ * only honoured in document-level stylesheets, never in the adopted stylesheets
+ * components ship — `packages/ui/build/extract-properties.ts` handles that: it
+ * lifts every `@property` out of the compiled component CSS into
+ * `tokens.properties.css`, which consumers load once on the document. This
+ * block therefore sits at the top level so it reaches that compiled CSS, the
+ * same route Tailwind's own `--tw-*` registrations already take.
+ * -------------------------------------------------------------------------- */
+
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@theme {
+  --animate-fade-in-a: fade-in-a 0.3s ease-in;
+  --animate-fade-in-b: fade-in-b 0.3s ease-in;
+
+  @keyframes fade-in-a {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-in-b {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* --- Surface motion primitives -------------------------------------
+   * Enter/exit pairs shared by any surface that animates onto the screen —
+   * modal, sheet, drawer, popover. Enter uses the moderate duration, exit
+   * the quick one, so leaving always feels faster than arriving.
+   *
+   * Consumed through animate-* utilities, so Tailwind emits each keyframe
+   * only into the components that actually reference it. */
+
+  --animate-fade-in: fade-in var(--duration-moderate) var(--ease-emphasized)
+    both;
+  --animate-fade-out: fade-out var(--duration-quick) var(--ease-emphasized) both;
+  --animate-scale-in: scale-in var(--duration-moderate) var(--ease-emphasized)
+    both;
+  --animate-scale-out: scale-out var(--duration-quick) var(--ease-emphasized)
+    both;
+  --animate-slide-in-left: slide-in-left var(--duration-moderate)
+    var(--ease-emphasized) both;
+  --animate-slide-out-left: slide-out-left var(--duration-quick)
+    var(--ease-emphasized) both;
+  --animate-slide-in-right: slide-in-right var(--duration-moderate)
+    var(--ease-emphasized) both;
+  --animate-slide-out-right: slide-out-right var(--duration-quick)
+    var(--ease-emphasized) both;
+  --animate-slide-in-top: slide-in-top var(--duration-moderate)
+    var(--ease-emphasized) both;
+  --animate-slide-out-top: slide-out-top var(--duration-quick)
+    var(--ease-emphasized) both;
+  --animate-slide-in-bottom: slide-in-bottom var(--duration-moderate)
+    var(--ease-emphasized) both;
+  --animate-slide-out-bottom: slide-out-bottom var(--duration-quick)
+    var(--ease-emphasized) both;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes scale-out {
+    from {
+      opacity: 1;
+      transform: none;
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: none;
+    }
+  }
+
+  @keyframes slide-out-left {
+    from {
+      transform: none;
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes slide-in-right {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: none;
+    }
+  }
+
+  @keyframes slide-out-right {
+    from {
+      transform: none;
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes slide-in-top {
+    from {
+      transform: translateY(-100%);
+    }
+    to {
+      transform: none;
+    }
+  }
+
+  @keyframes slide-out-top {
+    from {
+      transform: none;
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes slide-in-bottom {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: none;
+    }
+  }
+
+  @keyframes slide-out-bottom {
+    from {
+      transform: none;
+    }
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  /* --- Border sweep ---------------------------------------------------
+   * Rotates `--dsgn-border-sweep-angle` once, for a conic gradient painted
+   * into a border-box background: the bright stop travels around the edge
+   * and settles. Needs the `@property` registration above to interpolate. */
+
+  --animate-border-sweep: border-sweep 900ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  @keyframes border-sweep {
+    from {
+      --dsgn-border-sweep-angle: 0deg;
+    }
+    to {
+      --dsgn-border-sweep-angle: 360deg;
+    }
+  }
+}