@hraness/design-kit 0.31.1

package/src/react/fader.stylex.ts

@@ -0,0 +1,71 @@
+import * as stylex from "@stylexjs/stylex";
+
+export const faderStyles = stylex.create({
+  caption: {
+    fontSize: "var(--text-caption)",
+  },
+  compact: {
+    "--hraness-design-fader-thumb-block-size": "0.75rem",
+    "--hraness-design-fader-thumb-inline-size": "1.5rem",
+    "--hraness-design-fader-track-length": "var(--interactive-target-min)",
+  },
+  fillRail: {
+    backgroundColor: "var(--primary)",
+    "block-size": "100%",
+    "inset-block-end": 0,
+  },
+  focusVisible: {
+    outlineColor: "var(--focus)",
+    outlineOffset: 3,
+    outlineStyle: "solid",
+    outlineWidth: 3,
+  },
+  horizontalRoot: {
+    "min-inline-size": "8rem",
+  },
+  horizontalTrack: {
+    "block-size": "var(--interactive-target-min)",
+    "inline-size": "100%",
+  },
+  labelRow: {
+    alignItems: "center",
+    display: "flex",
+    gap: "var(--space-1)",
+  },
+  rail: {
+    borderRadius: "var(--radius-round)",
+    "inline-size": 4,
+    "inset-inline": "calc(50% - 2px)",
+    position: "absolute",
+  },
+  root: {
+    "--hraness-design-fader-thumb-block-size": "1.125rem",
+    "--hraness-design-fader-thumb-inline-size": "1.75rem",
+    "--hraness-design-fader-track-length": "6rem",
+    display: "grid",
+    gap: "var(--space-2)",
+    justifyItems: "center",
+    "min-inline-size": "var(--interactive-target-min)",
+  },
+  thumb: {
+    backgroundColor: "var(--primary)",
+    "block-size": "var(--hraness-design-fader-thumb-block-size)",
+    borderColor: "var(--background)",
+    borderRadius: "var(--radius-sm)",
+    borderStyle: "solid",
+    borderWidth: 2,
+    boxShadow: "0 0 0 1px var(--line)",
+    "inline-size": "var(--hraness-design-fader-thumb-inline-size)",
+    left: "50%",
+    top: "50%",
+  },
+  track: {
+    "block-size": "var(--hraness-design-fader-track-length)",
+    "inline-size": "var(--interactive-target-min)",
+    position: "relative",
+  },
+  trackRail: {
+    backgroundColor: "var(--grid)",
+    "inset-block": 0,
+  },
+});

package/src/react/fader.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import type { ReactNode, Ref, RefObject } from "react";
+import {
+  Label,
+  Slider as AriaSlider,
+  SliderFill,
+  SliderOutput,
+  type SliderProps as AriaSliderProps,
+  SliderThumb,
+  SliderTrack,
+} from "react-aria-components";
+import * as stylex from "@stylexjs/stylex";
+
+import { cn } from "@hraness/ui";
+
+import { faderStyles } from "./fader.stylex.js";
+
+export type FaderProps = Omit<
+  AriaSliderProps<number>,
+  "children" | "className"
+> & {
+  readonly className?: string;
+  readonly density?: "compact" | "default";
+  readonly faderRef?: Ref<HTMLDivElement>;
+  readonly inputRef?: RefObject<HTMLInputElement | null>;
+  readonly label: ReactNode;
+  /** Supplementary action rendered beside the real clickable slider label. */
+  readonly labelAccessory?: ReactNode;
+  readonly showLabel?: boolean;
+  readonly showOutput?: boolean;
+};
+
+/** A single-value vertical slider with a touch-sized track and native keyboard semantics. */
+export function Fader({
+  className,
+  density = "default",
+  faderRef,
+  inputRef,
+  label,
+  labelAccessory,
+  orientation = "vertical",
+  showLabel = false,
+  showOutput = false,
+  ...props
+}: FaderProps) {
+  const rootPresentation = stylex.props(
+    faderStyles.root,
+    density === "compact" && faderStyles.compact,
+    orientation === "horizontal" && faderStyles.horizontalRoot,
+  );
+  const labelRowPresentation = stylex.props(faderStyles.labelRow);
+  const captionPresentation = stylex.props(faderStyles.caption);
+  const trackPresentation = stylex.props(
+    faderStyles.track,
+    orientation === "horizontal" && faderStyles.horizontalTrack,
+  );
+  const trackRailPresentation = stylex.props(
+    faderStyles.rail,
+    faderStyles.trackRail,
+  );
+  const fillRailPresentation = stylex.props(faderStyles.rail, faderStyles.fillRail);
+
+  return (
+    <AriaSlider
+      {...props}
+      className={cn(
+        "hraness-design-fader",
+        rootPresentation.className,
+        className,
+      )}
+      data-density={density}
+      orientation={orientation}
+      ref={faderRef}
+    >
+      {showLabel && labelAccessory !== undefined ? (
+        <div
+          className={cn(
+            "hraness-design-fader__label-row",
+            labelRowPresentation.className,
+          )}
+        >
+          <Label
+            className={cn(
+              "hraness-design-fader__label",
+              captionPresentation.className,
+            )}
+          >
+            {label}
+          </Label>
+          <span className="hraness-design-fader__label-accessory">{labelAccessory}</span>
+        </div>
+      ) : showLabel ? (
+        <Label
+          className={cn(
+            "hraness-design-fader__label",
+            captionPresentation.className,
+          )}
+        >
+          {label}
+        </Label>
+      ) : (
+        <Label className="hraness-design-visually-hidden">{label}</Label>
+      )}
+      {showOutput ? (
+        <SliderOutput
+          className={cn(
+            "hraness-design-fader__output",
+            captionPresentation.className,
+          )}
+        />
+      ) : null}
+      <SliderTrack
+        className={cn(
+          "hraness-design-fader__track",
+          trackPresentation.className,
+        )}
+      >
+        <span
+          aria-hidden="true"
+          className={cn(
+            "hraness-design-fader__track-rail",
+            trackRailPresentation.className,
+          )}
+        />
+        <SliderFill className="hraness-design-fader__fill">
+          <span
+            aria-hidden="true"
+            className={cn(
+              "hraness-design-fader__fill-rail",
+              fillRailPresentation.className,
+            )}
+          />
+        </SliderFill>
+        <SliderThumb
+          className={({ isFocusVisible }) => {
+            const thumbPresentation = stylex.props(
+              faderStyles.thumb,
+              isFocusVisible && faderStyles.focusVisible,
+            );
+            return cn(
+              "hraness-design-fader__thumb",
+              thumbPresentation.className,
+            );
+          }}
+          {...(inputRef === undefined ? {} : { inputRef })}
+        />
+      </SliderTrack>
+    </AriaSlider>
+  );
+}

package/src/react/foil-card-math.ts

@@ -0,0 +1,100 @@
+export interface FoilCardPose {
+  /** Horizontal highlight origin, expressed as a percentage from the inline start. */
+  readonly highlightX: number;
+  /** Vertical highlight origin, expressed as a percentage from the block start. */
+  readonly highlightY: number;
+  /** Rotation around the horizontal axis, in degrees. */
+  readonly rotateX: number;
+  /** Rotation around the vertical axis, in degrees. */
+  readonly rotateY: number;
+  /** Direction of the diffracted spectrum, in degrees. */
+  readonly spectrumAngle?: number;
+}
+
+export interface FoilCardSeedPose extends FoilCardPose {
+  /** Stable gradient phase, in degrees. */
+  readonly spectrumAngle: number;
+}
+
+function normalizedSeed(seed: string): string {
+  const normalized = seed.trim();
+  if (normalized.length === 0) {
+    throw new RangeError("A foil card seed must contain a non-whitespace character.");
+  }
+  return normalized;
+}
+
+function rounded(value: number, places = 3): number {
+  const scale = 10 ** places;
+  const result = Math.round(value * scale) / scale;
+  return result === 0 ? 0 : result;
+}
+
+function unitFromHash(hash: number): number {
+  return hash / 4_294_967_296;
+}
+
+function mixedHash(hash: number, salt: number): number {
+  let value = (hash ^ salt) >>> 0;
+  value = Math.imul(value ^ (value >>> 16), 0x21f0aaad);
+  value = Math.imul(value ^ (value >>> 15), 0x735a2d97);
+  return (value ^ (value >>> 15)) >>> 0;
+}
+
+/**
+ * Produces a stable unsigned 32-bit identity for visual variation. This is a
+ * presentation hash, not a cryptographic or privacy boundary.
+ */
+export function hashFoilCardSeed(seed: string): number {
+  const normalized = normalizedSeed(seed);
+  let hash = 0x811c9dc5;
+  for (let index = 0; index < normalized.length; index += 1) {
+    hash ^= normalized.charCodeAt(index);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return hash >>> 0;
+}
+
+/** Returns deterministic, bounded first-paint geometry for a seeded card. */
+export function createFoilCardSeedPose(seed: string): FoilCardSeedPose {
+  const hash = hashFoilCardSeed(seed);
+  const value = (salt: number): number => unitFromHash(mixedHash(hash, salt));
+
+  return {
+    highlightX: rounded(38 + value(0x243f6a88) * 24),
+    highlightY: rounded(38 + value(0x85a308d3) * 24),
+    rotateX: rounded(-1.2 + value(0x13198a2e) * 2.4),
+    rotateY: rounded(-1.4 + value(0x03707344) * 2.8),
+    spectrumAngle: rounded(value(0xa4093822) * 360),
+  };
+}
+
+function finiteUnit(value: number, label: string): number {
+  if (!Number.isFinite(value)) {
+    throw new RangeError(`${label} must be a finite number.`);
+  }
+  return Math.min(1, Math.max(0, value));
+}
+
+/**
+ * Maps normalized pointer coordinates to bounded highlight and tilt values.
+ * Values outside the card are clamped so event geometry cannot create an
+ * unbounded transform.
+ */
+export function createFoilCardPointerPose(
+  normalizedX: number,
+  normalizedY: number,
+): FoilCardPose {
+  const x = finiteUnit(normalizedX, "Foil card pointer x");
+  const y = finiteUnit(normalizedY, "Foil card pointer y");
+  const rawSpectrumAngle = Math.atan2(y - 0.5, x - 0.5) * 180 / Math.PI + 90;
+  const spectrumAngle = (rawSpectrumAngle + 360) % 360;
+
+  return {
+    highlightX: rounded(x * 100),
+    highlightY: rounded(y * 100),
+    rotateX: rounded((0.5 - y) * 10),
+    rotateY: rounded((x - 0.5) * 12),
+    spectrumAngle: rounded(spectrumAngle),
+  };
+}

package/src/react/foil-card-surface.stylex.ts

@@ -0,0 +1,326 @@
+import * as stylex from "@stylexjs/stylex";
+
+const reducedOrStaticTransform = {
+  default: "none",
+  "@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none)":
+    "perspective(72rem) rotateX(var(--foil-rotate-x, 0deg)) rotateY(var(--foil-rotate-y, 0deg))",
+} as const;
+
+const layerDisplay = {
+  default: "block",
+  "@media (forced-colors: active)": "none",
+} as const;
+
+export const foilCardSurfaceStyles = stylex.create({
+  base: {
+    backgroundColor: {
+      default: "var(--card, var(--surface, #111217))",
+      "@media (forced-colors: active)": "Canvas",
+    },
+    borderRadius: "var(--foil-card-radius, var(--radius-lg, 0.75rem))",
+    boxShadow: {
+      default:
+        "0 1.2rem 3.6rem rgb(4 6 12 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.28)",
+      "@media (forced-colors: active)": "none",
+    },
+    color: "var(--card-foreground, var(--foreground, currentColor))",
+    contain: "paint",
+    display: "grid",
+    isolation: "isolate",
+    outlineColor: "currentColor",
+    outlineOffset: -1,
+    outlineStyle: "solid",
+    outlineWidth: {
+      default: 1,
+      "@media (prefers-contrast: more)": 2,
+    },
+    overflow: "hidden",
+    transformOrigin: "center",
+    transformStyle: "preserve-3d",
+  },
+  interactive: {
+    transform: reducedOrStaticTransform,
+    transitionDuration: {
+      default: "180ms",
+      "@media (prefers-reduced-motion: reduce)": "0ms",
+    },
+    transitionProperty: "transform, box-shadow",
+    transitionTimingFunction: "cubic-bezier(0.2, 0.75, 0.25, 1)",
+    willChange: "auto",
+  },
+  active: {
+    boxShadow:
+      "0 1.75rem 5rem rgb(4 6 12 / 0.32), 0 0 2.4rem rgb(112 177 255 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.34)",
+    willChange: "transform",
+  },
+  static: {
+    transform: "none",
+    transitionDuration: "0ms",
+    transitionProperty: "none",
+    willChange: "auto",
+  },
+  content: {
+    gridColumnEnd: 2,
+    gridColumnStart: 1,
+    gridRowEnd: 2,
+    gridRowStart: 1,
+    zIndex: 2,
+  },
+  layer: {
+    display: layerDisplay,
+    gridColumnEnd: 2,
+    gridColumnStart: 1,
+    gridRowEnd: 2,
+    gridRowStart: 1,
+    pointerEvents: "none",
+  },
+  baseLayer: {
+    backgroundPosition: "var(--foil-light-x, 50%) var(--foil-light-y, 50%)",
+    backgroundSize: "160% 160%",
+    filter: "saturate(1.08)",
+    zIndex: 0,
+  },
+  spectrumLayer: {
+    backgroundPosition: "var(--foil-light-x, 50%) var(--foil-light-y, 50%)",
+    backgroundSize: "180% 180%",
+    mixBlendMode: "screen",
+    transitionDuration: {
+      default: "90ms",
+      "@media (prefers-reduced-motion: reduce)": "0ms",
+    },
+    transitionProperty: "background-position, opacity",
+    transitionTimingFunction: "linear",
+    zIndex: 1,
+  },
+  sheenLayer: {
+    backgroundImage:
+      "radial-gradient(circle at var(--foil-light-x, 50%) var(--foil-light-y, 50%), rgb(255 255 255 / 0.94) 0, rgb(255 255 255 / 0.36) 10%, transparent 36%)",
+    mixBlendMode: "screen",
+    transitionDuration: {
+      default: "90ms",
+      "@media (prefers-reduced-motion: reduce)": "0ms",
+    },
+    transitionProperty: "background-image, opacity",
+    transitionTimingFunction: "linear",
+    zIndex: 1,
+  },
+  textureLayer: {
+    backgroundImage:
+      "repeating-linear-gradient(calc(var(--foil-spectrum-angle, 0deg) + 24deg), transparent 0 3px, rgb(255 255 255 / 0.42) 3px 4px, transparent 4px 9px)",
+    backgroundSize: "18px 18px",
+    mixBlendMode: "soft-light",
+    backgroundPosition: "var(--foil-light-x, 50%) var(--foil-light-y, 50%)",
+    zIndex: 1,
+  },
+  ornamentLayer: {
+    backgroundRepeat: "no-repeat",
+    borderRadius: "inherit",
+    filter: "drop-shadow(0 0 0.35rem rgb(255 255 255 / 0.22))",
+    mixBlendMode: "screen",
+    zIndex: 3,
+  },
+
+  prismBase: {
+    backgroundImage:
+      "conic-gradient(from var(--foil-spectrum-angle, 0deg) at 50% 50%, #ff5f8f, #ffd66e, #71f4d1, #6bb7ff, #b987ff, #ff5f8f)",
+  },
+  prismSpectrum: {
+    backgroundImage:
+      "linear-gradient(calc(var(--foil-spectrum-angle, 0deg) + 112deg), transparent 8%, rgb(255 82 166 / 0.74) 24%, rgb(255 239 132 / 0.76) 39%, rgb(111 245 219 / 0.78) 54%, rgb(106 175 255 / 0.78) 69%, rgb(207 139 255 / 0.72) 84%, transparent 96%)",
+  },
+  prismTexture: {
+    backgroundSize: "14px 14px",
+  },
+
+  auroraBase: {
+    backgroundImage:
+      "radial-gradient(ellipse at 16% 18%, #9cf7de 0, transparent 42%), radial-gradient(ellipse at 82% 22%, #82b5ff 0, transparent 46%), radial-gradient(ellipse at 54% 88%, #c69bff 0, transparent 48%), linear-gradient(145deg, #152743, #2b1841)",
+  },
+  auroraSpectrum: {
+    backgroundImage:
+      "radial-gradient(ellipse at var(--foil-light-x, 50%) var(--foil-light-y, 50%), rgb(167 255 232 / 0.84), rgb(117 169 255 / 0.56) 28%, rgb(208 145 255 / 0.42) 52%, transparent 72%)",
+  },
+  auroraTexture: {
+    backgroundImage:
+      "repeating-radial-gradient(ellipse at 50% 120%, transparent 0 11px, rgb(255 255 255 / 0.34) 12px 13px, transparent 14px 23px)",
+    backgroundSize: "100% 100%",
+  },
+
+  etchedBase: {
+    backgroundImage:
+      "linear-gradient(142deg, #d8dce7 0, #666d7d 22%, #f4f5f8 43%, #4f5563 67%, #c9ced9 100%)",
+  },
+  etchedSpectrum: {
+    backgroundImage:
+      "linear-gradient(calc(var(--foil-spectrum-angle, 0deg) + 96deg), transparent 12%, rgb(144 217 255 / 0.48) 34%, rgb(255 232 164 / 0.52) 48%, rgb(223 175 255 / 0.46) 62%, transparent 86%)",
+    mixBlendMode: "overlay",
+  },
+  etchedTexture: {
+    backgroundImage:
+      "repeating-linear-gradient(calc(var(--foil-spectrum-angle, 0deg) + 18deg), rgb(20 24 31 / 0.48) 0 1px, transparent 1px 5px, rgb(255 255 255 / 0.34) 5px 6px, transparent 6px 11px)",
+    backgroundSize: "12px 12px",
+    mixBlendMode: "overlay",
+  },
+
+  goldBase: {
+    backgroundImage:
+      "conic-gradient(from var(--foil-spectrum-angle, 0deg) at 48% 46%, #6f4213, #e0a72c, #fff0a6, #a96512, #f6ca50, #7b4915, #6f4213)",
+  },
+  goldSpectrum: {
+    backgroundImage:
+      "radial-gradient(ellipse at var(--foil-light-x, 50%) var(--foil-light-y, 50%), rgb(255 252 211 / 0.96) 0, rgb(255 205 78 / 0.62) 25%, rgb(156 85 15 / 0.38) 52%, transparent 74%)",
+  },
+  goldTexture: {
+    backgroundImage:
+      "repeating-linear-gradient(calc(var(--foil-spectrum-angle, 0deg) + 38deg), transparent 0 4px, rgb(255 247 190 / 0.52) 5px 6px, transparent 7px 13px)",
+    backgroundSize: "15px 15px",
+  },
+
+  fastBase: {
+    backgroundImage:
+      "linear-gradient(128deg, #061c32 0, #0c6c96 32%, #8cf5e5 47%, #1684ba 62%, #071d38 100%)",
+  },
+  fastSpectrum: {
+    backgroundImage:
+      "repeating-linear-gradient(calc(var(--foil-spectrum-angle, 0deg) + 116deg), transparent 0 7%, rgb(178 255 247 / 0.72) 8% 10%, transparent 11% 18%, rgb(135 190 255 / 0.64) 19% 21%, transparent 22% 31%)",
+    backgroundSize: "190% 190%",
+  },
+  fastTexture: {
+    backgroundImage:
+      "repeating-linear-gradient(116deg, transparent 0 9px, rgb(226 255 255 / 0.52) 10px 11px, transparent 12px 22px)",
+    backgroundSize: "24px 24px",
+  },
+
+  maxBase: {
+    backgroundImage:
+      "radial-gradient(circle at 18% 16%, #ffcf70 0, transparent 34%), radial-gradient(circle at 88% 26%, #54d9db 0, transparent 42%), radial-gradient(circle at 56% 92%, #a06dff 0, transparent 48%), linear-gradient(138deg, #261044, #081d35 56%, #25102e)",
+  },
+  maxSpectrum: {
+    backgroundImage:
+      "conic-gradient(from var(--foil-spectrum-angle, 0deg) at var(--foil-light-x, 50%) var(--foil-light-y, 50%), transparent 0 8%, rgb(255 201 92 / 0.72) 18%, rgb(106 245 226 / 0.72) 36%, rgb(117 162 255 / 0.68) 52%, rgb(194 116 255 / 0.72) 69%, rgb(255 120 177 / 0.64) 84%, transparent 96%)",
+  },
+  maxTexture: {
+    backgroundImage:
+      "repeating-radial-gradient(circle at 50% 50%, transparent 0 5px, rgb(255 255 255 / 0.38) 6px 7px, transparent 8px 15px)",
+    backgroundSize: "32px 32px",
+  },
+
+  baseSubtle: {
+    opacity: {
+      default: "var(--foil-base-opacity, 0.34)",
+      "@media (prefers-contrast: more)": 0.14,
+    },
+  },
+  baseStandard: {
+    opacity: {
+      default: "var(--foil-base-opacity, 0.44)",
+      "@media (prefers-contrast: more)": 0.18,
+    },
+  },
+  baseVivid: {
+    opacity: {
+      default: "var(--foil-base-opacity, 0.56)",
+      "@media (prefers-contrast: more)": 0.22,
+    },
+  },
+  spectrumSubtle: {
+    opacity: {
+      default: "var(--foil-spectrum-opacity, 0.08)",
+      "@media (prefers-contrast: more)": 0.12,
+    },
+  },
+  spectrumStandard: {
+    opacity: {
+      default: "var(--foil-spectrum-opacity, 0.12)",
+      "@media (prefers-contrast: more)": 0.18,
+    },
+  },
+  spectrumVivid: {
+    opacity: {
+      default: "var(--foil-spectrum-opacity, 0.18)",
+      "@media (prefers-contrast: more)": 0.24,
+    },
+  },
+  sheenSubtle: {
+    opacity: {
+      default: "var(--foil-sheen-opacity, 0.03)",
+      "@media (prefers-contrast: more)": 0.1,
+    },
+  },
+  sheenStandard: {
+    opacity: {
+      default: "var(--foil-sheen-opacity, 0.04)",
+      "@media (prefers-contrast: more)": 0.14,
+    },
+  },
+  sheenVivid: {
+    opacity: {
+      default: "var(--foil-sheen-opacity, 0.06)",
+      "@media (prefers-contrast: more)": 0.2,
+    },
+  },
+  textureSubtle: {
+    opacity: {
+      default: "var(--foil-texture-opacity, 0.04)",
+      "@media (prefers-contrast: more)": 0.04,
+    },
+  },
+  textureStandard: {
+    opacity: {
+      default: "var(--foil-texture-opacity, 0.06)",
+      "@media (prefers-contrast: more)": 0.05,
+    },
+  },
+  textureVivid: {
+    opacity: {
+      default: "var(--foil-texture-opacity, 0.08)",
+      "@media (prefers-contrast: more)": 0.06,
+    },
+  },
+  ornamentSubtle: {
+    opacity: "var(--foil-ornament-opacity, 0.14)",
+  },
+  ornamentStandard: {
+    opacity: "var(--foil-ornament-opacity, 0.2)",
+  },
+  ornamentVivid: {
+    opacity: "var(--foil-ornament-opacity, 0.26)",
+  },
+  ornamentNone: {
+    display: "none",
+  },
+  ornamentCorners: {
+    backgroundImage:
+      "linear-gradient(90deg, transparent, rgb(255 255 255 / 0.88)), linear-gradient(180deg, transparent, rgb(255 255 255 / 0.88)), linear-gradient(270deg, transparent, rgb(255 255 255 / 0.88)), linear-gradient(180deg, rgb(255 255 255 / 0.88), transparent), linear-gradient(90deg, rgb(255 255 255 / 0.88), transparent), linear-gradient(0deg, rgb(255 255 255 / 0.88), transparent), linear-gradient(270deg, rgb(255 255 255 / 0.88), transparent), linear-gradient(0deg, transparent, rgb(255 255 255 / 0.88))",
+    backgroundPosition:
+      "left 0.8rem top 0.8rem, left 0.8rem top 0.8rem, right 0.8rem top 0.8rem, right 0.8rem top 0.8rem, left 0.8rem bottom 0.8rem, left 0.8rem bottom 0.8rem, right 0.8rem bottom 0.8rem, right 0.8rem bottom 0.8rem",
+    backgroundSize:
+      "28% 1px, 1px 20%, 28% 1px, 1px 20%, 28% 1px, 1px 20%, 28% 1px, 1px 20%",
+  },
+  ornamentRails: {
+    backgroundImage:
+      "repeating-linear-gradient(90deg, rgb(255 255 255 / 0.84) 0 0.45rem, transparent 0.45rem 0.78rem), repeating-linear-gradient(90deg, rgb(255 255 255 / 0.84) 0 0.45rem, transparent 0.45rem 0.78rem), repeating-linear-gradient(0deg, rgb(255 255 255 / 0.72) 0 0.45rem, transparent 0.45rem 0.8rem), repeating-linear-gradient(0deg, rgb(255 255 255 / 0.72) 0 0.45rem, transparent 0.45rem 0.8rem)",
+    backgroundPosition: "left 1rem top 0.65rem, left 1rem bottom 0.65rem, left 0.65rem top 1rem, right 0.65rem top 1rem",
+    backgroundSize: "calc(100% - 2rem) 1px, calc(100% - 2rem) 1px, 1px calc(100% - 2rem), 1px calc(100% - 2rem)",
+  },
+  ornamentCircuit: {
+    backgroundImage:
+      "radial-gradient(circle, rgb(255 255 255 / 0.96) 0 1px, transparent 1.5px), linear-gradient(90deg, rgb(255 255 255 / 0.78), transparent), radial-gradient(circle, rgb(255 255 255 / 0.96) 0 1px, transparent 1.5px), linear-gradient(270deg, rgb(255 255 255 / 0.78), transparent), radial-gradient(circle, rgb(255 255 255 / 0.86) 0 1px, transparent 1.5px), linear-gradient(0deg, rgb(255 255 255 / 0.68), transparent), radial-gradient(circle, rgb(255 255 255 / 0.86) 0 1px, transparent 1.5px), linear-gradient(180deg, rgb(255 255 255 / 0.68), transparent)",
+    backgroundPosition:
+      "left 0.7rem top 1.4rem, left 0.75rem top 1.45rem, right 0.7rem bottom 1.4rem, right 0.75rem bottom 1.45rem, left 1.35rem bottom 0.7rem, left 1.4rem bottom 0.75rem, right 1.35rem top 0.7rem, right 1.4rem top 0.75rem",
+    backgroundSize:
+      "5px 5px, 34% 1px, 5px 5px, 34% 1px, 5px 5px, 1px 26%, 5px 5px, 1px 26%",
+  },
+  ornamentRadial: {
+    backgroundImage:
+      "repeating-radial-gradient(circle at 0 0, transparent 0 0.38rem, rgb(255 255 255 / 0.7) 0.42rem 0.46rem, transparent 0.5rem 0.84rem), repeating-radial-gradient(circle at 100% 0, transparent 0 0.38rem, rgb(255 255 255 / 0.7) 0.42rem 0.46rem, transparent 0.5rem 0.84rem), repeating-radial-gradient(circle at 0 100%, transparent 0 0.38rem, rgb(255 255 255 / 0.7) 0.42rem 0.46rem, transparent 0.5rem 0.84rem), repeating-radial-gradient(circle at 100% 100%, transparent 0 0.38rem, rgb(255 255 255 / 0.7) 0.42rem 0.46rem, transparent 0.5rem 0.84rem)",
+    backgroundPosition: "left top, right top, left bottom, right bottom",
+    backgroundSize: "30% 24%, 30% 24%, 30% 24%, 30% 24%",
+  },
+  ornamentFacets: {
+    backgroundImage:
+      "conic-gradient(from 270deg at 0 0, transparent 0 24deg, rgb(255 255 255 / 0.82) 25deg 42deg, transparent 43deg), conic-gradient(from 0deg at 100% 0, transparent 0 24deg, rgb(255 255 255 / 0.82) 25deg 42deg, transparent 43deg), conic-gradient(from 180deg at 0 100%, transparent 0 24deg, rgb(255 255 255 / 0.82) 25deg 42deg, transparent 43deg), conic-gradient(from 90deg at 100% 100%, transparent 0 24deg, rgb(255 255 255 / 0.82) 25deg 42deg, transparent 43deg)",
+    backgroundPosition: "left top, right top, left bottom, right bottom",
+    backgroundSize: "34% 24%, 34% 24%, 34% 24%, 34% 24%",
+  },
+});