@hraness/design-kit 0.31.1

package/src/react/design-palette.stylex.ts

@@ -0,0 +1,124 @@
+import * as stylex from "@stylexjs/stylex";
+
+const forcedColors = "@media (forced-colors: active)";
+const reducedMotion = "@media (prefers-reduced-motion: reduce)";
+const pressed = ":is([data-pressed], :active)";
+
+export const paletteMenuStyles = stylex.create({
+  icon: {
+    alignItems: "center",
+    display: "inline-flex",
+    justifyContent: "center",
+    lineHeight: 0,
+  },
+  root: {
+    display: "inline-flex",
+    position: "relative",
+    "min-inline-size": 0,
+  },
+  trigger: {
+    alignItems: "center",
+    // Lantern tokens exist only inside a data-hraness-material="lantern"
+    // island, so each chain falls through to the palette outside one.
+    backgroundColor: "var(--hraness-material-plane, var(--background, Canvas))",
+    borderColor: {
+      default: "var(--hraness-material-seam, var(--control-border, GrayText))",
+      [forcedColors]: "CanvasText",
+    },
+    borderRadius: "var(--radius-md, 0.5rem)",
+    borderStyle: "solid",
+    borderWidth: 1,
+    boxShadow: {
+      default: "var(--hraness-material-raised, none)",
+      [pressed]: "var(--hraness-material-inset, none)",
+      [forcedColors]: "none",
+    },
+    color: "var(--hraness-material-ink, var(--foreground, CanvasText))",
+    cursor: "pointer",
+    display: "inline-flex",
+    justifyContent: "center",
+    listStyleType: "none",
+    "min-block-size": "var(--interactive-target-compact, 2.75rem)",
+    "min-inline-size": "var(--interactive-target-compact, 2.75rem)",
+    outlineColor: "var(--hraness-material-focus, var(--focus, Highlight))",
+    outlineOffset: 3,
+    paddingBlock: "0.5rem",
+    paddingInline: "0.625rem",
+    transitionDuration: {
+      default: "120ms",
+      [reducedMotion]: "0.01ms",
+    },
+    transitionProperty: "box-shadow",
+    transitionTimingFunction: "cubic-bezier(0.2, 0, 0, 1)",
+    userSelect: "none",
+  },
+  triggerDefault: {
+    "min-block-size": "var(--interactive-target-min, 3rem)",
+    "min-inline-size": "var(--interactive-target-min, 3rem)",
+  },
+  panel: {
+    backgroundColor: "var(--hraness-material-plane, var(--popover, Canvas))",
+    borderColor: {
+      default: "var(--hraness-material-seam, var(--control-border, GrayText))",
+      [forcedColors]: "CanvasText",
+    },
+    borderRadius: "var(--radius-lg, 0.75rem)",
+    borderStyle: "solid",
+    borderWidth: 1,
+    boxShadow: {
+      default:
+        "var(--hraness-material-lift, var(--elevation-overlay, 0 18px 48px -18px rgb(0 0 0 / 32%)))",
+      [forcedColors]: "none",
+    },
+    color: "var(--hraness-material-ink, var(--popover-foreground, CanvasText))",
+    display: "grid",
+    gap: "0.75rem",
+    "inset-block-start": "calc(100% + 0.5rem)",
+    "inset-inline-end": 0,
+    "inline-size": "min(16rem, calc(100vw - 2rem))",
+    "max-block-size": "min(38rem, 75dvh)",
+    overflow: "auto",
+    paddingBlock: "0.75rem",
+    paddingInline: "0.75rem",
+    position: "absolute",
+    "z-index": "var(--z-tooltip, 3000)",
+  },
+  group: {
+    borderWidth: 0,
+    display: "grid",
+    gap: "0.125rem",
+    marginBlock: 0,
+    marginInline: 0,
+    "min-inline-size": 0,
+    paddingBlock: 0,
+    paddingInline: 0,
+  },
+  legend: {
+    color: "var(--muted, GrayText)",
+    fontSize: "0.875rem",
+    fontWeight: 550,
+    lineHeight: 1.5,
+    marginBlockEnd: "0.375rem",
+    paddingInline: "0.5rem",
+  },
+  choice: {
+    alignItems: "center",
+    borderRadius: "var(--radius-md, 0.5rem)",
+    cursor: "pointer",
+    display: "flex",
+    fontSize: "1rem",
+    gap: "0.625rem",
+    lineHeight: 1.4,
+    "min-block-size": "2.75rem",
+    paddingBlock: "0.375rem",
+    paddingInline: "0.5rem",
+  },
+  radio: {
+    accentColor: "var(--primary, Highlight)",
+    flexShrink: 0,
+    "block-size": "1rem",
+    "inline-size": "1rem",
+    marginBlock: 0,
+    marginInline: 0,
+  },
+});

package/src/react/design-palette.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { AppearanceIcon, cn } from "@hraness/ui";
+import * as stylex from "@stylexjs/stylex";
+import { createContext, type ReactNode, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+
+import { designThemeLabel, designThemes, type DesignTheme } from "../appearance.js";
+import { designPaletteSnapshot, initDesignPalette, type DesignPaletteController, type DesignPaletteSnapshot } from "../browser/design-palette.js";
+import { defaultDesignPalettePreference, normalizeDesignPalettePreference, type ConcreteDesignPalettePreference, type DesignPalettePreference } from "../palette-appearance.js";
+import { designPaletteLabels, designPalettes, type DesignPalette } from "../palettes.js";
+import { DesignPortalThemeProvider } from "./design-theme-context.js";
+import { paletteMenuStyles } from "./design-palette.stylex.js";
+import type { ThemeMenuButtonProps } from "./theme.js";
+
+export interface DesignPaletteContextValue extends DesignPaletteSnapshot {
+  readonly ready: boolean;
+  readonly setPreference: (preference: DesignPalettePreference) => void;
+  readonly setPalette: (palette: DesignPalette) => void;
+  readonly setMode: (mode: DesignTheme) => void;
+}
+
+const DesignPaletteContext = createContext<DesignPaletteContextValue | null>(null);
+const noSubscribe = (): (() => void) => () => undefined;
+
+function isNode(target: EventTarget | null): target is Node {
+  return target !== null && "nodeType" in target;
+}
+
+export interface DesignPaletteProviderProps {
+  readonly children: ReactNode;
+  readonly defaultPreference?: DesignPalettePreference;
+  readonly forcedPreference?: ConcreteDesignPalettePreference;
+  readonly storageKey?: string;
+  readonly legacyStorageKey?: string | null;
+}
+
+/** Opt-in appearance boundary. A product may call initDesignPalette in an external head script before hydration. */
+export function DesignPaletteProvider({
+  children,
+  defaultPreference = defaultDesignPalettePreference,
+  forcedPreference,
+  storageKey,
+  legacyStorageKey,
+}: DesignPaletteProviderProps) {
+  const fallback = useMemo(() => normalizeDesignPalettePreference(defaultPreference), [defaultPreference.palette, defaultPreference.mode]);
+  const forced = useMemo(() => forcedPreference === undefined ? undefined : { ...forcedPreference }, [forcedPreference?.palette, forcedPreference?.mode]);
+  const serverSnapshot = useMemo(() => designPaletteSnapshot(forced ?? fallback, false, forced !== undefined), [fallback, forced]);
+  const [controller, setController] = useState<DesignPaletteController | null>(null);
+  useEffect(() => {
+    const current = initDesignPalette({
+      defaultPreference: fallback,
+      ...(forced === undefined ? {} : { forcedPreference: forced }),
+      ...(storageKey === undefined ? {} : { storageKey }),
+      ...(legacyStorageKey === undefined ? {} : { legacyStorageKey }),
+    });
+    setController(current);
+    return () => { current.dispose(); };
+  }, [fallback, forced, storageKey, legacyStorageKey]);
+  const snapshot = useSyncExternalStore(
+    controller?.subscribe ?? noSubscribe,
+    controller?.getSnapshot ?? (() => serverSnapshot),
+    () => serverSnapshot,
+  );
+  const value = useMemo<DesignPaletteContextValue>(() => ({
+    ...snapshot,
+    ready: controller !== null,
+    setPreference: (preference) => { controller?.setPreference(preference); },
+    setPalette: (palette) => { controller?.setPreference({ ...controller.getSnapshot().preference, palette }); },
+    setMode: (mode) => { controller?.setPreference({ ...controller.getSnapshot().preference, mode }); },
+  }), [snapshot, controller]);
+  return <DesignPaletteContext.Provider value={value}>
+    <DesignPortalThemeProvider portalClassName={snapshot.className} theme={snapshot.resolvedMode}>
+      {children}
+    </DesignPortalThemeProvider>
+  </DesignPaletteContext.Provider>;
+}
+
+/** Returns null outside the opt-in provider; legacy appearance remains independent. */
+export function useDesignPalette(): DesignPaletteContextValue | null {
+  return useContext(DesignPaletteContext);
+}
+
+export function DesignPaletteMenuButton({
+  "aria-label": ariaLabel = "Appearance",
+  className,
+  labels,
+  size = "compact",
+  onChange,
+  value: controlledMode,
+}: ThemeMenuButtonProps) {
+  const palette = useDesignPalette();
+  const detailsRef = useRef<HTMLDetailsElement>(null);
+  const pointerInside = useRef(false);
+  const groupId = useId();
+  useEffect(() => {
+    const details = detailsRef.current;
+    if (details === null) return;
+    const document = details.ownerDocument;
+    let settlement: ReturnType<typeof setTimeout> | undefined;
+    const clearSettlement = (): void => { clearTimeout(settlement); settlement = undefined; };
+    const outside = (event: PointerEvent): void => {
+      clearSettlement();
+      pointerInside.current = isNode(event.target) && details.contains(event.target);
+      if (details.open && !pointerInside.current) details.open = false;
+    };
+    const settlePointer = (): void => {
+      if (!pointerInside.current) return;
+      clearSettlement();
+      // A label first focuses its focusable ancestor, then its input during
+      // native activation. Keep the disclosure mounted through that sequence.
+      settlement = setTimeout(() => {
+        settlement = undefined;
+        pointerInside.current = false;
+        if (details.open && !details.contains(document.activeElement)) details.open = false;
+      }, 0);
+    };
+    const releasePointer = (event: PointerEvent): void => {
+      // Touch compatibility mouse events may follow pointerup in a later task.
+      // An inside release stays guarded until native click activation completes.
+      if (event.button !== 0 || !isNode(event.target) || !details.contains(event.target)) settlePointer();
+    };
+    const escape = (event: KeyboardEvent): void => {
+      if (event.key === "Tab") {
+        clearSettlement();
+        pointerInside.current = false;
+        return;
+      }
+      if (event.key !== "Escape" || !details.open) return;
+      event.preventDefault();
+      clearSettlement();
+      pointerInside.current = false;
+      details.open = false;
+      details.querySelector("summary")?.focus();
+    };
+    document.addEventListener("pointerdown", outside, true);
+    document.addEventListener("pointerup", releasePointer, true);
+    document.addEventListener("click", settlePointer, true);
+    document.addEventListener("pointercancel", settlePointer, true);
+    document.defaultView?.addEventListener("blur", settlePointer);
+    details.addEventListener("keydown", escape);
+    return () => {
+      clearSettlement();
+      pointerInside.current = false;
+      document.removeEventListener("pointerdown", outside, true);
+      document.removeEventListener("pointerup", releasePointer, true);
+      document.removeEventListener("click", settlePointer, true);
+      document.removeEventListener("pointercancel", settlePointer, true);
+      document.defaultView?.removeEventListener("blur", settlePointer);
+      details.removeEventListener("keydown", escape);
+    };
+  }, []);
+  if (palette === null) throw new Error("DesignPaletteMenuButton requires DesignPaletteProvider.");
+  const mode = controlledMode ?? palette.preference.mode;
+  const ready = palette.ready && !palette.isForced;
+  const title = `${ariaLabel}: ${designPaletteLabels[palette.preference.palette]}, ${designThemeLabel(mode, labels)}`;
+  return <details
+    {...stylex.props(paletteMenuStyles.root)}
+    className={cn("hraness-design-theme-toggle", "hraness-design-palette-menu", stylex.props(paletteMenuStyles.root).className, className)}
+    data-hraness-appearance-menu=""
+    data-presentation="menu"
+    data-ready={ready ? "true" : "false"}
+    ref={detailsRef}
+    onBlur={(event) => {
+      if (!pointerInside.current && isNode(event.relatedTarget)
+        && !event.currentTarget.contains(event.relatedTarget)) event.currentTarget.open = false;
+    }}
+  >
+    <summary
+      {...stylex.props(paletteMenuStyles.trigger, size === "default" && paletteMenuStyles.triggerDefault)}
+      aria-disabled={!ready || undefined}
+      aria-label={title}
+      onClick={(event) => { if (!ready) event.preventDefault(); }}
+      tabIndex={ready ? 0 : -1}
+      title={title}
+    ><AppearanceIcon name={mode} xstyle={paletteMenuStyles.icon} /></summary>
+    <div {...stylex.props(paletteMenuStyles.panel)}>
+      <fieldset {...stylex.props(paletteMenuStyles.group)} disabled={!ready}>
+        <legend {...stylex.props(paletteMenuStyles.legend)}>Theme</legend>
+        {designPalettes.map((id) => <label {...stylex.props(paletteMenuStyles.choice)} key={id}>
+          <input {...stylex.props(paletteMenuStyles.radio)} checked={palette.preference.palette === id} name={`${groupId}-palette`} onChange={() => palette.setPalette(id)} type="radio" value={id} />
+          <span>{designPaletteLabels[id]}</span>
+        </label>)}
+      </fieldset>
+      <fieldset {...stylex.props(paletteMenuStyles.group)} disabled={!ready}>
+        <legend {...stylex.props(paletteMenuStyles.legend)}>Appearance</legend>
+        {designThemes.map((id) => <label {...stylex.props(paletteMenuStyles.choice)} key={id}>
+          <input {...stylex.props(paletteMenuStyles.radio)} checked={mode === id} name={`${groupId}-mode`} onChange={() => {
+            if (onChange === undefined) palette.setMode(id);
+            else onChange(id);
+          }} type="radio" value={id} />
+          <span>{designThemeLabel(id, labels)}</span>
+        </label>)}
+      </fieldset>
+    </div>
+  </details>;
+}

package/src/react/design-theme-context.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+
+export type PortalDesignTheme = "dark" | "light";
+
+interface DesignThemeContextValue {
+  readonly portalClassName?: string;
+  readonly theme?: PortalDesignTheme;
+}
+
+const DesignThemeContext = createContext<DesignThemeContextValue>({});
+
+/** Keeps portalled overlays in the same explicit theme as their trigger subtree. */
+export function DesignPortalThemeProvider({
+  children,
+  portalClassName,
+  theme,
+}: Readonly<{
+  children: ReactNode;
+  portalClassName?: string;
+  theme: PortalDesignTheme | undefined;
+}>) {
+  const value = useMemo(
+    () => ({
+      ...(portalClassName === undefined ? {} : { portalClassName }),
+      ...(theme === undefined ? {} : { theme }),
+    }),
+    [portalClassName, theme],
+  );
+  return <DesignThemeContext.Provider value={value}>{children}</DesignThemeContext.Provider>;
+}
+
+export function useDesignPortalTheme(): PortalDesignTheme | undefined {
+  return useContext(DesignThemeContext).theme;
+}
+
+/** Reapplies a product palette selector when an overlay leaves its trigger subtree. */
+export function useDesignPortalClassName(): string | undefined {
+  return useContext(DesignThemeContext).portalClassName;
+}

package/src/react/effects.stylex.ts

@@ -0,0 +1,325 @@
+import * as stylex from "@stylexjs/stylex";
+
+const proceduralCloudDrift = stylex.keyframes({
+  "0%": {
+    transform:
+      "translate3d(-50%, -50%, 0) rotate(var(--hraness-design-procedural-layer-rotation))",
+  },
+  "100%": {
+    transform:
+      "translate3d(calc(-50% + var(--hraness-design-procedural-layer-drift-x)), calc(-50% + var(--hraness-design-procedural-layer-drift-y)), 0) rotate(calc(var(--hraness-design-procedural-layer-rotation) + 3deg)) scale(var(--hraness-design-procedural-layer-scale))",
+  },
+});
+
+const proceduralGridDrift = stylex.keyframes({
+  "0%": {
+    backgroundPosition:
+      "var(--hraness-design-procedural-grid-offset-x) var(--hraness-design-procedural-grid-offset-y), var(--hraness-design-procedural-grid-offset-x) var(--hraness-design-procedural-grid-offset-y)",
+  },
+  "100%": {
+    backgroundPosition:
+      "calc(var(--hraness-design-procedural-grid-offset-x) + var(--hraness-design-procedural-grid-size)) calc(var(--hraness-design-procedural-grid-offset-y) + var(--hraness-design-procedural-grid-size)), calc(var(--hraness-design-procedural-grid-offset-x) + var(--hraness-design-procedural-grid-size)) calc(var(--hraness-design-procedural-grid-offset-y) + var(--hraness-design-procedural-grid-size))",
+  },
+});
+
+const proceduralRippleBreathe = stylex.keyframes({
+  "0%": {
+    transform: "translate3d(-50%, -50%, 0) scale(0.98)",
+  },
+  "100%": {
+    transform: "translate3d(-50%, -50%, 0) scale(1.025)",
+  },
+});
+
+const particleHaloDrift = stylex.keyframes({
+  "0%": {
+    transform: "translate3d(-50%, -50%, 0)",
+  },
+  "100%": {
+    transform:
+      "translate3d(calc(-50% + var(--hraness-design-particle-drift-x)), calc(-50% + var(--hraness-design-particle-drift-y)), 0) scale(1.08)",
+  },
+});
+
+export const effectsStyles = stylex.create({
+  auroraBackground: {
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor:
+      "color-mix(in srgb, var(--background) var(--hraness-design-aurora-background-mix, 86%), transparent)",
+    backgroundImage:
+      "radial-gradient(ellipse 54% 40% at 16% 24%, color-mix(in srgb, var(--aurora-cyan) var(--hraness-design-aurora-cyan-mix, 26%), transparent) 0%, transparent 62%), radial-gradient(ellipse 52% 38% at 82% 20%, color-mix(in srgb, var(--aurora-gold) var(--hraness-design-aurora-gold-mix, 24%), transparent) 0%, transparent 60%), radial-gradient(ellipse 58% 42% at 58% 76%, color-mix(in srgb, var(--aurora-violet) var(--hraness-design-aurora-violet-mix, 22%), transparent) 0%, transparent 62%), radial-gradient(ellipse 48% 34% at 24% 78%, color-mix(in srgb, var(--aurora-mint) var(--hraness-design-aurora-mint-mix, 20%), transparent) 0%, transparent 58%), none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto auto",
+    display: {
+      default: null,
+      "@media (forced-colors: active)": "none",
+    },
+    filter: "saturate(1.08)",
+    inset: 0,
+    overflow: "hidden",
+    pointerEvents: "none",
+    position: "fixed",
+    zIndex: 0,
+    "::before": {
+      backgroundAttachment: "scroll",
+      backgroundClip: "border-box",
+      backgroundColor: "transparent",
+      backgroundImage:
+        "radial-gradient(ellipse 44% 78% at 10% 54%, oklch(0.92 0.07 22 / 0.2) 0%, transparent 78%), radial-gradient(ellipse 44% 78% at 32% 44%, oklch(0.95 0.06 80 / 0.18) 0%, transparent 78%), radial-gradient(ellipse 44% 78% at 54% 54%, oklch(0.94 0.07 158 / 0.18) 0%, transparent 78%), radial-gradient(ellipse 44% 78% at 74% 44%, oklch(0.92 0.07 230 / 0.18) 0%, transparent 78%), radial-gradient(ellipse 44% 78% at 92% 54%, oklch(0.9 0.07 304 / 0.18) 0%, transparent 78%)",
+      backgroundOrigin: "padding-box",
+      backgroundPosition: "0% 0%",
+      backgroundRepeat: "repeat",
+      backgroundSize: "auto auto",
+      content: '""',
+      filter: "blur(56px) saturate(0.98)",
+      inset: "-18%",
+      opacity: "var(--hraness-design-aurora-before-opacity, 0.84)",
+      position: "absolute",
+      transform: "translate3d(0, -4vh, 0)",
+    },
+    "::after": {
+      backgroundAttachment: "scroll",
+      backgroundClip: "border-box",
+      backgroundColor: "transparent",
+      backgroundImage:
+        "linear-gradient(136deg, transparent 0%, rgb(255 255 255 / 0.16) 18%, transparent 34%), radial-gradient(ellipse 42% 32% at 76% 26%, color-mix(in srgb, var(--aurora-rose) 16%, transparent) 0%, transparent 62%), radial-gradient(ellipse 46% 32% at 22% 54%, color-mix(in srgb, white 16%, transparent) 0%, transparent 64%)",
+      backgroundOrigin: "padding-box",
+      backgroundPosition: "0% 0%",
+      backgroundRepeat: "repeat",
+      backgroundSize: "auto auto",
+      content: '""',
+      filter: "blur(44px)",
+      inset: "-10%",
+      mixBlendMode: "soft-light",
+      opacity: "var(--hraness-design-aurora-after-opacity, 0.36)",
+      position: "absolute",
+    },
+  },
+  auroraDots: {
+    "--phaser-dots-static-color": "color-mix(in srgb, var(--phaser-dots-accent, oklch(0.572 0.1561 254.537)) 20%, transparent)",
+    "--phaser-dots-static-opacity": "0.3",
+    "--phaser-dots-trail-color": "var(--phaser-dots-accent, oklch(0.572 0.1561 254.537))",
+    "--phaser-dots-trail-opacity": "1",
+    display: {
+      default: null,
+      "@media (forced-colors: active)": "none",
+    },
+    inset: 0,
+    pointerEvents: "none",
+    position: "fixed",
+    zIndex: 0,
+  },
+  phaserSlot: {
+    inset: 0,
+    pointerEvents: "none",
+    position: "absolute",
+  },
+  phaserRoot: {
+    zIndex: 0,
+  },
+  phaserStatic: {
+    backgroundImage: "radial-gradient(currentcolor 1px, transparent 1px)",
+    backgroundSize: "6px 6px",
+  },
+  phaserStaticDefault: {
+    color: "var(--phaser-dots-static-color, var(--foreground))",
+    opacity: "var(--phaser-dots-static-opacity, 0.025)",
+  },
+  phaserTrail: {
+    height: "100%",
+    width: "100%",
+  },
+  phaserTrailDefault: {
+    color: "var(--phaser-dots-trail-color, var(--foreground))",
+    opacity: "var(--phaser-dots-trail-opacity, 0.25)",
+  },
+  proceduralRoot: {
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: "var(--background)",
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto auto",
+    color: "var(--foreground)",
+    inset: 0,
+    isolation: "isolate",
+    overflow: "hidden",
+    pointerEvents: "none",
+    position: "absolute",
+    userSelect: "none",
+    zIndex: 0,
+  },
+  proceduralSlot: {
+    inset: 0,
+    pointerEvents: "none",
+    position: "absolute",
+  },
+  proceduralAtmosphere: {
+    display: {
+      default: null,
+      "@media (forced-colors: active)": "none",
+    },
+    zIndex: 0,
+  },
+  proceduralCloud: {
+    animationDelay: "var(--hraness-design-procedural-layer-delay)",
+    animationDirection: "alternate",
+    animationDuration: "var(--hraness-design-procedural-layer-duration)",
+    animationIterationCount: "infinite",
+    animationFillMode: "none",
+    animationPlayState: "running",
+    animationName: {
+      default: proceduralCloudDrift,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    animationTimingFunction: "var(--motion-easing-emphasized)",
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: "transparent",
+    backgroundImage:
+      "radial-gradient(ellipse at center, color-mix(in srgb, var(--hraness-design-procedural-layer-color) 58%, transparent) 0%, color-mix(in srgb, var(--hraness-design-procedural-layer-color) 24%, transparent) 48%, transparent 74%)",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto auto",
+    borderRadius: "46% 54% 52% 48% / 58% 44% 56% 42%",
+    filter: "blur(var(--hraness-design-procedural-layer-blur))",
+    height: "var(--hraness-design-procedural-layer-height)",
+    left: "var(--hraness-design-procedural-layer-x)",
+    opacity: "var(--hraness-design-procedural-layer-opacity)",
+    position: "absolute",
+    top: "var(--hraness-design-procedural-layer-y)",
+    transform:
+      "translate3d(-50%, -50%, 0) rotate(var(--hraness-design-procedural-layer-rotation))",
+    width: "var(--hraness-design-procedural-layer-width)",
+  },
+  proceduralGrid: {
+    animationDuration: "18s",
+    animationIterationCount: "infinite",
+    animationFillMode: "none",
+    animationPlayState: "running",
+    animationDelay: "0s",
+    animationDirection: "normal",
+    animationName: {
+      default: proceduralGridDrift,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    animationTimingFunction: "linear",
+    backgroundImage:
+      "linear-gradient(color-mix(in srgb, var(--hraness-design-procedural-support) 44%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--hraness-design-procedural-shadow) 38%, transparent) 1px, transparent 1px)",
+    backgroundPosition:
+      "var(--hraness-design-procedural-grid-offset-x) var(--hraness-design-procedural-grid-offset-y), var(--hraness-design-procedural-grid-offset-x) var(--hraness-design-procedural-grid-offset-y)",
+    backgroundSize:
+      "var(--hraness-design-procedural-grid-size) var(--hraness-design-procedural-grid-size)",
+    display: {
+      default: null,
+      "@media (forced-colors: active)": "none",
+    },
+    inset: "-8%",
+    maskImage: "radial-gradient(ellipse at center, black 8%, transparent 78%)",
+    opacity: "var(--hraness-design-procedural-grid-opacity)",
+    transform:
+      "rotate(var(--hraness-design-procedural-grid-rotation)) scale(1.04)",
+    WebkitMaskImage:
+      "radial-gradient(ellipse at center, black 8%, transparent 78%)",
+    zIndex: 1,
+  },
+  proceduralRipples: {
+    display: {
+      default: null,
+      "@media (forced-colors: active)": "none",
+    },
+    transform: "rotate(var(--hraness-design-procedural-ripple-rotation))",
+    zIndex: 2,
+  },
+  proceduralRipple: {
+    borderImageSource: "none",
+    borderImageSlice: "100%",
+    borderImageWidth: "1",
+    borderImageOutset: "0",
+    borderImageRepeat: "stretch",
+    animationDelay: "var(--hraness-design-procedural-ripple-delay)",
+    animationDirection: "alternate",
+    animationDuration: "var(--hraness-design-procedural-ripple-duration)",
+    animationIterationCount: "infinite",
+    animationFillMode: "none",
+    animationPlayState: "running",
+    animationName: {
+      default: proceduralRippleBreathe,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    animationTimingFunction: "var(--motion-easing-standard)",
+    aspectRatio: "1 / var(--hraness-design-procedural-ripple-aspect)",
+    borderColor:
+      "color-mix(in srgb, var(--hraness-design-procedural-ripple-color) 46%, transparent)",
+    borderRadius: "50%",
+    borderStyle: "solid",
+    borderWidth: 1,
+    boxShadow:
+      "inset 0 0 24px color-mix(in srgb, var(--hraness-design-procedural-ripple-color) 8%, transparent), 0 0 28px color-mix(in srgb, var(--hraness-design-procedural-ripple-color) 6%, transparent)",
+    left: "var(--hraness-design-procedural-ripple-x)",
+    opacity: "var(--hraness-design-procedural-ripple-opacity)",
+    position: "absolute",
+    top: "var(--hraness-design-procedural-ripple-y)",
+    transform: "translate3d(-50%, -50%, 0) scale(0.98)",
+    width: "var(--hraness-design-procedural-ripple-size)",
+  },
+  particleRoot: {
+    display: "inline-grid",
+    isolation: "isolate",
+    placeItems: "center",
+    position: "relative",
+  },
+  particleField: {
+    display: {
+      default: null,
+      "@media (forced-colors: active)": "none",
+    },
+    inset: "-18%",
+    overflow: "visible",
+    pointerEvents: "none",
+    position: "absolute",
+    zIndex: 0,
+  },
+  particle: {
+    animationDelay: "var(--hraness-design-particle-delay)",
+    animationDirection: "alternate",
+    animationDuration: "var(--hraness-design-particle-duration)",
+    animationIterationCount: "infinite",
+    animationFillMode: "none",
+    animationPlayState: "running",
+    animationName: {
+      default: particleHaloDrift,
+      "@media (prefers-reduced-motion: reduce)": "none",
+    },
+    animationTimingFunction: "var(--motion-easing-emphasized)",
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: "var(--hraness-design-particle-color)",
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto auto",
+    borderRadius: "var(--radius-round)",
+    boxShadow:
+      "0 0 calc(var(--hraness-design-particle-size) + var(--hraness-design-particle-size)) color-mix(in srgb, var(--hraness-design-particle-color) 34%, transparent)",
+    height: "var(--hraness-design-particle-size)",
+    left: "var(--hraness-design-particle-x)",
+    opacity: "var(--hraness-design-particle-opacity)",
+    position: "absolute",
+    top: "var(--hraness-design-particle-y)",
+    transform: "translate3d(-50%, -50%, 0)",
+    width: "var(--hraness-design-particle-size)",
+  },
+  particleContent: {
+    minWidth: 0,
+    position: "relative",
+    zIndex: 1,
+  },
+});