@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/dist/index.js

@@ -13,10 +13,11 @@ var cn = (...inputs) => twMerge(clsx(inputs));
 import { jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   [
-    "inline-flex items-center justify-center gap-[var(--space-xs)] whitespace-nowrap",
-    "font-[family-name:var(--font-body)] cursor-pointer appearance-none",
-    "transition-[background,color,box-shadow,transform,filter] duration-150 ease-out",
-    "outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+    "relative inline-flex max-w-full items-center justify-center gap-[var(--space-xs)] text-center text-balance no-underline",
+    "font-[family-name:var(--font-body)] font-semibold cursor-pointer appearance-none",
+    "motion-safe:transition-[background-color,color,box-shadow,transform,filter] motion-safe:duration-150 motion-safe:ease-out",
+    "focus-visible:outline-solid focus-visible:outline-[length:var(--ws-focus-width)] focus-visible:outline-[color:var(--ws-focus-color)] focus-visible:outline-offset-[var(--ws-focus-offset)]",
+    "[&_svg]:size-[var(--ws-icon)] [&_svg]:shrink-0",
     "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
     "aria-disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none"
   ],
@@ -25,42 +26,57 @@ var buttonVariants = cva(
       variant: {
         primary: [
           "bg-[image:var(--gradient-btn-primary)] text-[color:var(--color-white)]",
-          "border-0 border-b-[3px] border-b-[var(--color-border-btn)]",
+          "border-0 border-b-[length:calc(var(--space-xxs)*0.75)] border-b-[color:var(--color-button-border)]",
           "hover:brightness-[1.04]",
-          "active:translate-y-[2px] active:border-b-transparent"
+          "active:translate-y-[calc(var(--space-xxs)/2)] active:border-b-transparent"
         ],
         secondary: [
-          "bg-[var(--color-background)] text-[color:var(--color-text-interactive)]",
-          "border border-[var(--color-border-hairline)] font-semibold",
-          "hover:bg-[var(--color-nav-hover-bg)]"
+          "bg-[color:var(--color-bg-page)] text-[color:var(--color-text-interactive)]",
+          "border border-[color:var(--color-border-hairline)]",
+          "hover:bg-[image:linear-gradient(var(--color-nav-hover-bg),var(--color-nav-hover-bg))]"
         ],
         navy: [
-          "bg-[linear-gradient(180deg,var(--color-brand-mid-blue),color-mix(in_srgb,var(--color-brand-navy)_35%,var(--color-brand-mid-blue)))]",
-          "text-[color:var(--color-white)] border-0 border-b-[3px] border-b-[var(--color-brand-navy)]",
-          "shadow-[var(--shadow-btn)] hover:shadow-[var(--shadow-btn-hover)]",
-          "active:translate-y-[2px] active:border-b-transparent active:shadow-none"
+          "bg-[image:linear-gradient(180deg,var(--color-brand-mid-blue),color-mix(in_srgb,var(--color-brand-navy)_35%,var(--color-brand-mid-blue)))]",
+          "text-[color:var(--color-white)] border-0 border-b-[length:calc(var(--space-xxs)*0.75)] border-b-[color:var(--color-brand-navy)]",
+          "shadow-[var(--shadow-btn)] hover:shadow-[var(--shadow-btn-hover)] hover:brightness-[1.04]",
+          "active:translate-y-[calc(var(--space-xxs)/2)] active:border-b-transparent active:shadow-none"
         ],
         tertiary: [
-          "bg-transparent text-[color:var(--color-brand-navy)]",
-          "border border-[var(--color-brand-navy)]",
-          "hover:bg-[var(--color-brand-navy)] hover:text-[color:var(--color-white)]"
+          "bg-transparent text-[color:var(--color-text-heading)]",
+          "border border-[color:var(--color-text-heading)]",
+          "hover:bg-[color:var(--color-text-heading)] hover:text-[color:var(--ws-on-act)]"
         ],
-        clean: [
-          "border-0 bg-transparent text-[color:var(--color-brand-navy)] min-w-0 px-0",
-          "hover:text-[color:var(--color-brand-salmon)]"
-        ]
+        // Underlines on hover: a salmon word would be 2.7:1, under AA. Its no-sides and no-floor width are a compound
+        // variant below: here, tailwind-merge drops them for the size's own padding and min-width, which come later.
+        clean: "border-0 bg-transparent text-[color:var(--color-text-heading)] hover:underline"
       },
       size: {
-        // Heights and type are the Figma dimensions table, not a guess.
-        large: "h-[45px] px-[20px] min-w-[100px] text-[length:var(--font-size-md)] font-semibold rounded-[var(--radius-lg)] leading-none",
-        medium: "h-[36px] px-[var(--space-md)] min-w-[80px] text-[length:var(--font-size-sm)] font-semibold rounded-[var(--radius-lg)] leading-none",
-        small: "h-[28px] px-[12px] min-w-[60px] text-[length:var(--font-size-2xs)] font-medium rounded-[var(--radius-md)] leading-none"
+        // Heights and type are the Figma dimensions table (45, 36, 28), as floors.
+        large: [
+          "min-h-[calc(var(--space-2xl)+var(--space-xxs)+var(--ws-line))] min-w-[calc(var(--space-5xl)+var(--space-md)+var(--space-xxs))]",
+          "px-[calc(var(--space-md)+var(--space-xxs))] py-[var(--space-xs)] rounded-[var(--ws-radius-card)]",
+          "text-[length:var(--font-size-md)] leading-[calc(var(--space-md)+var(--space-xxs))]"
+        ],
+        medium: [
+          "min-h-[calc(var(--space-xl)+var(--space-xxs))] min-w-[var(--space-5xl)]",
+          "px-[var(--space-md)] py-[var(--space-xxs-plus)] rounded-[var(--ws-radius-card)]",
+          "text-[length:var(--font-size-sm)] leading-[var(--ws-leading-control)]",
+          "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:inset-y-[min(0px,calc((100%-var(--ws-touch-public))/2))] pointer-coarse:after:content-['']"
+        ],
+        small: [
+          "min-h-[calc(var(--space-lg)+var(--space-xxs))] min-w-[calc(var(--space-3xl)+var(--space-sm))]",
+          "px-[var(--space-sm)] py-[var(--space-xxs)] rounded-[var(--ws-radius-row)]",
+          "text-[length:var(--font-size-2xs)] leading-[var(--space-md)] font-medium [&_svg]:size-[var(--ws-icon-sm)]",
+          "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:inset-y-[min(0px,calc((100%-var(--ws-touch-public))/2))] pointer-coarse:after:content-['']"
+        ]
       },
       /** Elevation. Primary and navy carry their own lift; this adds the stack. */
       shadow: { true: "", false: "" },
       fullWidth: { true: "w-full", false: "" }
     },
     compoundVariants: [
+      // `clean` has no sides and no width floor at any size, as `.ws-kit-button--clean`.
+      { variant: "clean", class: "min-w-0 px-0" },
       {
         shadow: true,
         variant: ["primary", "secondary", "navy", "tertiary"],
@@ -92,16 +108,16 @@ import { forwardRef as forwardRef2 } from "react";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var badgeVariants = cva2(
-  "inline-flex items-center gap-[var(--space-xxs)] rounded-[var(--radius-full)] px-[10px] py-[2px] text-[length:var(--font-size-2xs)] font-medium leading-[18px] whitespace-nowrap",
+  "inline-flex h-[var(--space-lg)] items-center gap-[var(--space-xxs)] rounded-[var(--radius-full)] px-[var(--space-xs-plus)] py-0 text-[length:var(--font-size-2xs)] font-medium leading-[var(--space-md)] whitespace-nowrap",
   {
     variants: {
       tone: {
-        neutral: "bg-[var(--color-gray-2)] text-[color:var(--color-gray-8)]",
+        neutral: "bg-[color:var(--ws-track)] text-[color:var(--color-text-heading)]",
         brand: "bg-[color-mix(in_srgb,var(--color-brand-salmon)_12%,transparent)] text-[color:var(--color-text-brand-strong)]",
-        navy: "bg-[color-mix(in_srgb,var(--color-brand-navy)_10%,transparent)] text-[color:var(--color-brand-navy)]",
+        navy: "bg-[color-mix(in_srgb,var(--color-text-heading)_10%,transparent)] text-[color:var(--color-text-heading)]",
         success: "bg-[var(--color-feedback-success-bg)] text-[color:var(--color-text-success-strong)]",
         error: "bg-[color-mix(in_srgb,var(--color-feedback-error)_14%,transparent)] text-[color:var(--color-text-error-strong)]",
-        outline: "border border-[var(--color-border-hairline)] text-[color:var(--color-text-body)]"
+        outline: "shadow-[inset_0_0_0_var(--ws-line)_var(--color-border-hairline)] text-[color:var(--color-text-body)]"
       }
     },
     defaultVariants: { tone: "neutral" }
@@ -115,15 +131,18 @@ var Badge = forwardRef2(function Badge2({ className, tone, ...props }, ref) {
 import { forwardRef as forwardRef3 } from "react";
 import { cva as cva3 } from "class-variance-authority";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var cardVariants = cva3("rounded-[var(--radius-sm)] border", {
+var cardVariants = cva3("min-w-0 rounded-[var(--ws-radius-control)] border", {
   variants: {
     surface: {
-      white: "bg-[var(--color-white)] border-[var(--color-border-default)]",
-      tinted: "bg-[var(--color-gray-1)] border-[var(--color-border-default)]",
-      transparent: "bg-transparent border-[var(--color-border-hairline)]"
+      white: "bg-[color:var(--color-surface)] border-[color:var(--color-border-default)]",
+      tinted: "bg-[color:var(--ws-surface-sunk)] border-[color:var(--color-border-default)]",
+      transparent: "bg-transparent border-[color:var(--color-border-hairline)]"
     },
     interactive: {
-      true: "transition-shadow duration-200 hover:shadow-[var(--shadow-card-default)]",
+      true: [
+        "block cursor-pointer text-[color:inherit] no-underline hover:bg-[image:linear-gradient(var(--color-nav-hover-bg),var(--color-nav-hover-bg))]",
+        "focus-visible:outline-solid focus-visible:outline-[length:var(--ws-focus-width)] focus-visible:outline-[color:var(--ws-focus-color)] focus-visible:outline-offset-[var(--ws-focus-offset)]"
+      ],
       false: ""
     }
   },
@@ -151,7 +170,7 @@ var CardTitle = forwardRef3(
       {
         ref,
         className: cn(
-          "text-[length:var(--font-size-2xl)] font-medium leading-[32px] text-[color:var(--color-text-heading)]",
+          "text-[length:var(--font-size-2xl)] font-medium leading-[var(--space-xl)] text-[color:var(--color-text-heading)] text-balance wrap-break-word hyphens-auto",
           className
         ),
         ...props
@@ -165,7 +184,7 @@ var CardDescription = forwardRef3(function CardDescription2({ className, ...prop
     {
       ref,
       className: cn(
-        "text-[length:var(--font-size-sm)] leading-[20px] text-[color:var(--color-text-muted)]",
+        "text-[length:var(--font-size-sm)] leading-[calc(var(--space-md)+var(--space-xxs))] text-[color:var(--color-text-muted)]",
         className
       ),
       ...props
@@ -183,7 +202,7 @@ var CardFooter = forwardRef3(
       "div",
       {
         ref,
-        className: cn("flex items-center gap-[var(--space-sm)] p-[var(--space-lg)] pt-0", className),
+        className: cn("flex flex-wrap items-center gap-[var(--space-sm)] p-[var(--space-lg)] pt-0", className),
         ...props
       }
     );
@@ -197,8 +216,8 @@ var Checkbox = forwardRef4(function Checkbox2({ className, label, description, i
   const generated = useId();
   const inputId = id ?? generated;
   const descriptionId = `${inputId}-description`;
-  return /* @__PURE__ */ jsxs2("div", { className: "flex gap-[var(--space-sm)]", children: [
-    /* @__PURE__ */ jsxs2("span", { className: "relative mt-[1px] inline-flex h-[18px] w-[18px] shrink-0", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "relative flex gap-[var(--space-xs-plus)]", children: [
+    /* @__PURE__ */ jsxs2("span", { className: "relative mt-[var(--ws-line)] inline-flex size-[calc(var(--space-md)+var(--space-3xs))] shrink-0", children: [
       /* @__PURE__ */ jsx3(
         "input",
         {
@@ -209,11 +228,14 @@ var Checkbox = forwardRef4(function Checkbox2({ className, label, description, i
           "aria-describedby": description ? descriptionId : void 0,
           className: cn(
             "peer h-full w-full cursor-pointer appearance-none",
-            "rounded-[var(--radius-xs)] border border-[var(--color-border-hairline)] bg-[var(--color-white)]",
-            "transition-[background-color,border-color,box-shadow] duration-150 ease-out",
-            "hover:border-[var(--color-gray-5)]",
-            "checked:border-[var(--color-brand-salmon)] checked:bg-[var(--color-brand-salmon)]",
-            "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+            "rounded-[var(--ws-radius-control)] border-0 bg-[color:var(--color-bg-page)]",
+            "shadow-[inset_0_0_0_calc(var(--ws-line)*1.5)_var(--color-text-heading)]",
+            "aria-[invalid=true]:not-checked:shadow-[inset_0_0_0_calc(var(--ws-line)*1.5)_var(--ws-word-needs)]",
+            "motion-safe:transition-[background-color,box-shadow] motion-safe:duration-150 motion-safe:ease-out",
+            // Hover washes an empty, enabled box only, where the pointer really hovers: the chosen one stays navy.
+            "enabled:not-checked:hover:bg-[image:linear-gradient(var(--ws-hover-strong),var(--ws-hover-strong))]",
+            "checked:bg-[color:var(--color-text-heading)] checked:shadow-none",
+            "focus-visible:outline-solid focus-visible:outline-[length:var(--ws-focus-width)] focus-visible:outline-[color:var(--ws-focus-color)] focus-visible:outline-offset-[var(--ws-focus-offset)]",
             "disabled:cursor-not-allowed disabled:opacity-50",
             className
           ),
@@ -226,12 +248,12 @@ var Checkbox = forwardRef4(function Checkbox2({ className, label, description, i
           "aria-hidden": true,
           viewBox: "0 0 16 16",
           fill: "none",
-          className: "pointer-events-none absolute inset-0 h-full w-full scale-90 opacity-0 transition-opacity duration-150 peer-checked:opacity-100",
+          className: "pointer-events-none absolute inset-0 m-auto size-[var(--ws-icon-sm)] text-[color:var(--ws-on-act)] opacity-0 motion-safe:transition-opacity motion-safe:duration-150 peer-checked:opacity-100",
           children: /* @__PURE__ */ jsx3(
             "path",
             {
               d: "M3.5 8.5l3 3 6-6",
-              stroke: "var(--color-white)",
+              stroke: "currentColor",
               strokeWidth: "2",
               strokeLinecap: "round",
               strokeLinejoin: "round"
@@ -246,7 +268,9 @@ var Checkbox = forwardRef4(function Checkbox2({ className, label, description, i
         {
           htmlFor: inputId,
           className: cn(
-            "block text-[length:var(--font-size-sm)] leading-[20px] text-[color:var(--color-text-heading)]",
+            "block text-[length:var(--ws-text-body)] leading-[calc(var(--space-md)+var(--space-xxs))] font-medium text-[color:var(--color-text-heading)]",
+            // Touch: the label's hit area covers the whole row, box included, 44px tall (the public floor).
+            "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:inset-y-[min(0px,calc((100%-var(--ws-touch-public))/2))] pointer-coarse:after:content-['']",
             disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
           ),
           children: label
@@ -257,7 +281,7 @@ var Checkbox = forwardRef4(function Checkbox2({ className, label, description, i
         {
           id: descriptionId,
           className: cn(
-            "m-0 text-[length:var(--font-size-2xs)] leading-[16px] text-[color:var(--color-text-muted)]",
+            "m-0 text-[length:var(--font-size-2xs)] leading-[var(--space-md)] text-[color:var(--color-text-muted)]",
             disabled && "opacity-50"
           ),
           children: description
@@ -280,7 +304,7 @@ var Label = forwardRef5(
       {
         ref,
         className: cn(
-          "text-[length:var(--font-size-2xs)] font-medium leading-[16px] text-[color:var(--color-gray-7)]",
+          "text-[length:var(--font-size-2xs)] font-medium leading-[var(--space-md)] text-[color:var(--color-text-body)]",
           "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
           className
         ),
@@ -297,7 +321,7 @@ var Input = forwardRef6(function Input2({ className, label, error, hint, id, ...
   const inputId = id ?? generated;
   const messageId = `${inputId}-message`;
   const message = error ?? hint;
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-[var(--space-xxs)]", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-[var(--space-xxs)]", children: [
     label && /* @__PURE__ */ jsx5(Label, { htmlFor: inputId, children: label }),
     /* @__PURE__ */ jsx5(
       "input",
@@ -307,15 +331,16 @@ var Input = forwardRef6(function Input2({ className, label, error, hint, id, ...
         "aria-invalid": error ? true : void 0,
         "aria-describedby": message ? messageId : void 0,
         className: cn(
-          "h-[40px] w-full rounded-[var(--radius-md)] px-[12px] py-[9px]",
-          "bg-[var(--color-white)] text-[length:var(--font-size-sm)] text-[color:var(--color-gray-8)]",
-          "border border-[var(--color-border-default)]",
+          "h-[var(--space-2xl)] w-full rounded-[var(--ws-radius-row)] px-[var(--space-sm)] py-0",
+          "bg-[color:var(--ws-field)] text-[length:var(--font-size-sm)] text-[color:var(--ws-field-ink)]",
+          "border border-[color:var(--color-border-default)]",
           "placeholder:text-[color:var(--color-text-placeholder)]",
-          "transition-[border-color,box-shadow] duration-150 ease-out",
-          "hover:border-[var(--color-gray-5)]",
-          "outline-none focus-visible:border-[var(--color-brand-salmon)] focus-visible:shadow-[var(--shadow-focus-ring)]",
+          "motion-safe:transition-[border-color] motion-safe:duration-150 motion-safe:ease-out",
+          "enabled:hover:border-[color:var(--ws-edge-hover)]",
+          "focus-visible:outline-solid focus-visible:outline-[length:var(--ws-focus-width)] focus-visible:outline-[color:var(--ws-focus-color)] focus-visible:outline-offset-[var(--ws-focus-offset)]",
+          "pointer-coarse:h-[var(--ws-touch-public)] pointer-coarse:text-[length:var(--font-size-md)]",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          error && "border-[var(--color-brand-salmon)]",
+          error && "border-[color:var(--color-brand-salmon)] enabled:hover:border-[color:var(--color-brand-salmon)]",
           className
         ),
         ...props
@@ -326,7 +351,7 @@ var Input = forwardRef6(function Input2({ className, label, error, hint, id, ...
       {
         id: messageId,
         className: cn(
-          "text-[length:var(--font-size-2xs)] leading-[16px]",
+          "m-0 text-[length:var(--font-size-2xs)] leading-[var(--space-md)]",
           error ? "text-[color:var(--color-text-error-strong)]" : "text-[color:var(--color-text-muted)]"
         ),
         children: message
@@ -347,8 +372,8 @@ var Radio = forwardRef7(function Radio2({ className, label, description, id, dis
   const isDisabled = disabled ?? group?.disabled;
   const resolvedName = name ?? group?.name;
   const resolvedChecked = checked ?? (group && value !== void 0 ? group.value === value : void 0);
-  return /* @__PURE__ */ jsxs4("div", { className: "flex gap-[var(--space-sm)]", children: [
-    /* @__PURE__ */ jsxs4("span", { className: "relative mt-[1px] inline-flex h-[18px] w-[18px] shrink-0", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "relative flex gap-[var(--space-sm)]", children: [
+    /* @__PURE__ */ jsxs4("span", { className: "relative mt-[var(--ws-line)] inline-flex size-[calc(var(--space-md)+var(--space-3xs))] shrink-0", children: [
       /* @__PURE__ */ jsx6(
         "input",
         {
@@ -366,11 +391,12 @@ var Radio = forwardRef7(function Radio2({ className, label, description, id, dis
           },
           className: cn(
             "peer h-full w-full cursor-pointer appearance-none",
-            "rounded-[var(--radius-full)] border border-[var(--color-border-hairline)] bg-[var(--color-white)]",
-            "transition-[border-color,box-shadow] duration-150 ease-out",
-            "hover:border-[var(--color-gray-5)]",
-            "checked:border-[var(--color-brand-salmon)]",
-            "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+            "rounded-[var(--radius-full)] border border-[color:var(--ws-edge-card)] bg-[color:var(--ws-field)]",
+            "motion-safe:transition-[border-color] motion-safe:duration-150 motion-safe:ease-out",
+            // Hover firms an empty, enabled box only: the chosen one keeps its navy edge under the pointer.
+            "enabled:not-checked:hover:border-[color:var(--ws-edge-hover)]",
+            "checked:border-[color:var(--color-text-heading)]",
+            "focus-visible:outline-solid focus-visible:outline-[length:var(--ws-focus-width)] focus-visible:outline-[color:var(--ws-focus-color)] focus-visible:outline-offset-[var(--ws-focus-offset)]",
             "disabled:cursor-not-allowed disabled:opacity-50",
             className
           ),
@@ -381,7 +407,7 @@ var Radio = forwardRef7(function Radio2({ className, label, description, id, dis
         "span",
         {
           "aria-hidden": true,
-          className: "pointer-events-none absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-1/2 scale-50 rounded-[var(--radius-full)] bg-[var(--color-brand-salmon)] opacity-0 transition-[opacity,transform] duration-150 peer-checked:scale-100 peer-checked:opacity-100"
+          className: "pointer-events-none absolute left-1/2 top-1/2 size-[var(--space-xs)] -translate-x-1/2 -translate-y-1/2 scale-50 rounded-[var(--radius-full)] bg-[color:var(--color-text-heading)] opacity-0 motion-safe:transition-[opacity,transform] motion-safe:duration-150 peer-checked:scale-100 peer-checked:opacity-100"
         }
       )
     ] }),
@@ -391,7 +417,9 @@ var Radio = forwardRef7(function Radio2({ className, label, description, id, dis
         {
           htmlFor: inputId,
           className: cn(
-            "block text-[length:var(--font-size-sm)] leading-[20px] text-[color:var(--color-text-heading)]",
+            "block text-[length:var(--font-size-sm)] leading-[calc(var(--space-md)+var(--space-xxs))] text-[color:var(--color-text-heading)]",
+            // Touch: the label's hit area covers the whole row, box included, 44px tall (the public floor).
+            "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:inset-y-[min(0px,calc((100%-var(--ws-touch-public))/2))] pointer-coarse:after:content-['']",
             isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
           ),
           children: label
@@ -402,7 +430,7 @@ var Radio = forwardRef7(function Radio2({ className, label, description, id, dis
         {
           id: descriptionId,
           className: cn(
-            "m-0 text-[length:var(--font-size-2xs)] leading-[16px] text-[color:var(--color-text-muted)]",
+            "m-0 text-[length:var(--font-size-2xs)] leading-[var(--space-md)] text-[color:var(--color-text-muted)]",
             isDisabled && "opacity-50"
           ),
           children: description
@@ -420,8 +448,8 @@ var RadioGroup = forwardRef7(function RadioGroup2({ className, name, legend, val
       disabled,
       ...props,
       children: [
-        legend && /* @__PURE__ */ jsx6("legend", { className: "mb-[var(--space-sm)] p-0 text-[length:var(--font-size-2xs)] font-medium leading-[16px] text-[color:var(--color-gray-7)]", children: legend }),
-        /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-[var(--space-sm)]", children })
+        legend && /* @__PURE__ */ jsx6("legend", { className: "mb-[var(--space-sm)] p-0 text-[length:var(--font-size-2xs)] font-medium leading-[var(--space-md)] text-[color:var(--color-text-body)]", children: legend }),
+        /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-[var(--space-sm)] pointer-coarse:gap-[var(--space-lg)]", children })
       ]
     }
   ) });
@@ -444,8 +472,8 @@ var TabsList = forwardRef8(function TabsList2({ className, ...props }, ref) {
     {
       ref,
       className: cn(
-        "flex items-center",
-        variant === "underline" ? "gap-[var(--space-lg)] border-b border-[var(--color-border-default)]" : "gap-[2px] rounded-[var(--radius-full)] bg-[var(--color-gray-1)] p-[3px]",
+        "items-center",
+        variant === "underline" ? "flex gap-[var(--space-md)] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden shadow-[inset_0_calc(var(--ws-line)*-1)_0_var(--ws-edge-slot)]" : "inline-flex max-w-full gap-[var(--space-3xs)] rounded-[var(--radius-full)] bg-[color:var(--ws-surface-sunk)] p-[var(--ws-halo)]",
         className
       ),
       ...props
@@ -459,23 +487,31 @@ var TabsTrigger = forwardRef8(function TabsTrigger2({ className, ...props }, ref
     {
       ref,
       className: cn(
-        "cursor-pointer whitespace-nowrap border-0 bg-transparent font-medium",
-        "text-[length:var(--font-size-sm)] text-[color:var(--color-text-muted)]",
-        "transition-[color,background-color,border-color] duration-150 ease-out",
+        "inline-flex shrink-0 cursor-pointer items-center whitespace-nowrap border-0 bg-transparent font-medium",
+        "text-[length:var(--font-size-sm)] text-[color:var(--color-text-body)]",
+        "motion-safe:transition-[color,background-color,border-color] motion-safe:duration-150 motion-safe:ease-out",
         "hover:text-[color:var(--color-text-heading)]",
-        "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+        "focus-visible:outline-solid focus-visible:outline-[length:var(--ws-focus-width)] focus-visible:outline-[color:var(--ws-focus-color)] focus-visible:outline-offset-[calc(var(--ws-focus-width)*-1)]",
+        "pointer-coarse:min-h-[var(--ws-touch-public)]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         variant === "underline" ? [
           // The transparent border is load-bearing: it reserves the 2px so
-          // selecting a tab does not shift the row by two pixels.
-          "border-b-2 border-b-transparent px-0 pb-[10px] -mb-px",
-          "data-[state=active]:border-b-[var(--color-brand-salmon)]",
+          // selecting a tab does not shift the row by two pixels. It sits
+          // over the list's hairline (an inset shadow, not a border, so the
+          // rule stays inside the scroller and is not clipped). The 4px
+          // sides hold the inset focus ring off the words, as .ws-tabs__tab.
+          "border-b-[length:var(--ws-ring)] border-b-transparent px-[var(--space-xxs)] pb-[var(--space-xs-plus)]",
+          "data-[state=active]:border-b-[color:var(--color-text-heading)]",
           "data-[state=active]:text-[color:var(--color-text-heading)]"
         ] : [
-          "rounded-[var(--radius-full)] px-[14px] py-[6px]",
-          "data-[state=active]:bg-[var(--color-white)]",
-          "data-[state=active]:text-[color:var(--color-text-heading)]",
-          "data-[state=active]:shadow-[var(--shadow-card-default)]"
+          "rounded-[var(--radius-full)] px-[var(--space-sm-plus)] py-[var(--space-xxs-plus)]",
+          // The chosen tab is the navy thumb with the act's word, as `.ws-segmented__item`: a white thumb was
+          // the surface on the sunk track, 1.05:1 in dark, with a shadow that does not show there.
+          "data-[state=active]:bg-[color:var(--color-text-heading)]",
+          "data-[state=active]:text-[color:var(--ws-on-act)]",
+          // The focused tab is the chosen one (Radix moves both together), so the ring stands 2px off the navy
+          // thumb instead of inside it, where it would be navy on navy. A pill set does not scroll, so nothing clips it.
+          "focus-visible:outline-offset-[var(--ws-focus-offset)]"
         ],
         className
       ),
@@ -489,7 +525,7 @@ var TabsContent = forwardRef8(function TabsContent2({ className, ...props }, ref
     {
       ref,
       className: cn(
-        "mt-[var(--space-lg)] focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus-ring)]",
+        "mt-[var(--space-lg)] focus-visible:outline-solid focus-visible:outline-[length:var(--ws-focus-width)] focus-visible:outline-[color:var(--ws-focus-color)] focus-visible:outline-offset-[var(--ws-focus-offset)]",
         className
       ),
       ...props
@@ -505,7 +541,7 @@ function Skeleton({ className, ...props }) {
     {
       "aria-hidden": true,
       className: cn(
-        "animate-pulse rounded-[var(--radius-md)] bg-[var(--color-gray-2)] motion-reduce:animate-none",
+        "ws-shimmer rounded-[var(--ws-radius-control)] bg-[image:var(--ws-shimmer)] bg-[length:300%_100%]",
         className
       ),
       ...props
@@ -519,22 +555,666 @@ function Stat({ label, value, note, tone = "default", pending = false, className
   const toneColor = {
     default: "text-[color:var(--color-text-heading)]",
     positive: "text-[color:var(--color-stat-positive)]",
-    brand: "text-[color:var(--color-brand-salmon)]",
+    brand: "text-[color:var(--color-text-brand-strong)]",
     muted: "text-[color:var(--color-text-muted)]"
   }[tone];
   return /* @__PURE__ */ jsxs5("div", { className: cn("min-w-0", className), children: [
-    /* @__PURE__ */ jsx9("div", { className: "text-[length:var(--font-size-3xs)] font-semibold uppercase tracking-[var(--letter-spacing-overline)] text-[color:var(--color-text-muted)]", children: label }),
-    /* @__PURE__ */ jsx9("div", { className: cn("mt-[var(--space-xxs)] text-[length:var(--font-size-2xl)] font-semibold leading-[1.05] tabular-nums", toneColor), children: pending ? /* @__PURE__ */ jsx9("span", { className: "block h-[29px] w-20 animate-pulse rounded-[var(--radius-md)] bg-[var(--color-gray-2)] motion-reduce:animate-none", children: /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Loading" }) }) : value === null ? (
-      // Real text, not an aria-label: a screen reader should hear the same
-      // "no data" the sighted reader sees.
-      /* @__PURE__ */ jsxs5("span", { className: "text-[color:var(--color-gray-5)]", children: [
-        /* @__PURE__ */ jsx9("span", { "aria-hidden": true, children: "\u2013" }),
-        /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "No data" })
-      ] })
-    ) : value }),
-    note && /* @__PURE__ */ jsx9("div", { className: "mt-[var(--space-xxs)] text-[length:var(--font-size-2xs)] leading-[16px] text-[color:var(--color-text-muted)]", children: note })
+    /* @__PURE__ */ jsx9("div", { className: "text-[length:var(--font-size-2xs)] leading-[var(--space-md)] font-semibold uppercase tracking-[var(--letter-spacing-overline)] text-[color:var(--color-text-muted)]", children: label }),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: cn(
+          "mt-[var(--space-xxs)] text-[length:var(--ws-text-figure-row)] leading-[var(--ws-leading-figure-row)] font-semibold tabular-nums",
+          toneColor
+        ),
+        "aria-busy": pending || void 0,
+        children: pending ? /* @__PURE__ */ jsx9("span", { className: "ws-shimmer block h-[var(--ws-leading-figure-row)] w-[var(--space-5xl)] rounded-[var(--ws-radius-row)] bg-[image:var(--ws-shimmer)] bg-[length:300%_100%]", children: /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Loading" }) }) : value === null ? (
+          // Real text, not an aria-label: a screen reader should hear the same
+          // "no data" the sighted reader sees.
+          /* @__PURE__ */ jsxs5("span", { className: "text-[color:var(--color-text-muted)]", children: [
+            /* @__PURE__ */ jsx9("span", { "aria-hidden": true, children: "\u2013" }),
+            /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "No data" })
+          ] })
+        ) : value
+      }
+    ),
+    note && /* @__PURE__ */ jsx9("div", { className: "mt-[var(--space-xxs)] text-[length:var(--font-size-2xs)] leading-[var(--space-md)] text-[color:var(--color-text-muted)]", children: note })
   ] });
 }
+
+// src/lib/motion.ts
+var reduced = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+var last = 0;
+var lifted = /* @__PURE__ */ new WeakMap();
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [tabindex]:not([tabindex="-1"])';
+function place(el, close) {
+  const was = lifted.get(el);
+  if (was) {
+    lifted.delete(el);
+    el.removeEventListener("keydown", was.onKey);
+    if (el.matches(":popover-open")) el.hidePopover();
+    el.removeAttribute("popover");
+    delete el.dataset.wsLifted;
+  }
+  if (getComputedStyle(el).position === "fixed" && typeof el.showPopover === "function") {
+    const onKey = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented || el.querySelector(":popover-open, dialog[open]")) return;
+      e.preventDefault();
+      void morph(close, { as: "full", el, close });
+    };
+    el.dataset.wsLifted = "";
+    el.popover = "manual";
+    el.showPopover();
+    el.addEventListener("keydown", onKey);
+    lifted.set(el, { opener: was ? was.opener : document.activeElement, onKey });
+    if (!el.contains(document.activeElement)) {
+      const to = el.querySelector("[autofocus]") ?? el.querySelector(FOCUSABLE) ?? el;
+      if (to === el && !el.hasAttribute("tabindex")) el.tabIndex = -1;
+      to.focus({ preventScroll: true });
+    }
+  } else if (was) {
+    const opener = was.opener, here = document.activeElement;
+    if (opener?.isConnected && opener !== here && (!here || here === document.body || el.contains(here))) opener.focus({ preventScroll: true });
+  }
+}
+function morph(update, { as = "full", el, close } = {}) {
+  const run = as === "full" && el ? async () => {
+    await update();
+    place(el, close ?? update);
+  } : update;
+  if (typeof document === "undefined" || !("startViewTransition" in document) || reduced()) {
+    try {
+      return Promise.resolve(run()).then(() => {
+      });
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }
+  const root = document.documentElement;
+  const id = ++last;
+  if (el) {
+    const s = getComputedStyle(el);
+    root.style.setProperty("--ws-morph-ground", s.backgroundColor);
+    root.style.setProperty("--ws-morph-radius", s.borderRadius);
+    root.style.setProperty("--ws-morph-backdrop", s.backdropFilter || "none");
+    el.style.viewTransitionName = "ws-morph";
+  }
+  root.dataset.wsMorph = as;
+  const move = document.startViewTransition(run);
+  move.ready.catch(() => {
+  });
+  return move.finished.finally(() => {
+    if (el) el.style.viewTransitionName = "";
+    if (id !== last) return;
+    delete root.dataset.wsMorph;
+    for (const p of ["--ws-morph-ground", "--ws-morph-radius", "--ws-morph-backdrop"]) root.style.removeProperty(p);
+  });
+}
+function rollPlaceholder(roll, every = 3400) {
+  const lines = [...roll.children];
+  let at = 0;
+  lines[0]?.setAttribute("data-on", "");
+  if (lines.length < 2 || reduced()) return () => {
+  };
+  const timer = setInterval(() => {
+    const was = lines[at];
+    at = (at + 1) % lines.length;
+    const next = lines[at];
+    for (const l of lines) l.removeAttribute("data-off");
+    next.removeAttribute("data-on");
+    void next.offsetWidth;
+    was.removeAttribute("data-on");
+    was.setAttribute("data-off", "");
+    next.setAttribute("data-on", "");
+  }, every);
+  return () => clearInterval(timer);
+}
+
+// src/lib/reorder.ts
+var ROWS = ".ws-kanban-board__card, .ws-list-detail__rows > li, .ws-side-list__picks > li";
+function spring() {
+  const s = getComputedStyle(document.documentElement);
+  const easing = s.getPropertyValue("--ws-spring-reorder").trim(), duration = parseFloat(s.getPropertyValue("--ws-spring-reorder-duration"));
+  return easing && duration > 0 ? { duration, easing } : null;
+}
+var ids = /* @__PURE__ */ new WeakMap();
+var count = 0;
+function inView(el) {
+  const r = el.getBoundingClientRect();
+  if (r.bottom < 0 || r.right < 0 || r.top > innerHeight || r.left > innerWidth) return false;
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const s = getComputedStyle(p);
+    if (s.overflowX === "visible" && s.overflowY === "visible") continue;
+    const c = p.getBoundingClientRect(), top = c.top + p.clientTop, left = c.left + p.clientLeft;
+    if (r.top < top - 1 || r.left < left - 1 || r.bottom > top + p.clientHeight + 1 || r.right > left + p.clientWidth + 1) return false;
+  }
+  return true;
+}
+function reorder(update, within = document, rows = ROWS) {
+  const d = typeof document === "undefined" ? null : document;
+  if (!d?.startViewTransition || matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve(update()).then(() => {
+  });
+  const kept = /* @__PURE__ */ new Map(), from = /* @__PURE__ */ new Map(), raised = [];
+  const name = (after) => within.querySelectorAll(rows).forEach((el) => {
+    if (!kept.has(el)) kept.set(el, el.style.viewTransitionName);
+    if (!ids.has(el)) ids.set(el, `ws-row-${el.dataset.key || el.id || `auto-${++count}`}`);
+    const id = CSS.escape(ids.get(el));
+    el.style.viewTransitionName = inView(el) ? id : kept.get(el);
+    if (!after) from.set(id, el.parentElement);
+    else if (from.has(id) && from.get(id) !== el.parentElement) raised.push(id);
+  });
+  name(false);
+  const t = d.startViewTransition(async () => {
+    await update();
+    name(true);
+  });
+  t.ready.then(() => {
+    const timing = spring();
+    for (const a of d.getAnimations()) {
+      const fx = a.effect;
+      if (timing && fx?.pseudoElement?.startsWith("::view-transition-group(") && fx.pseudoElement !== "::view-transition-group(root)") fx.updateTiming(timing);
+    }
+    for (const id of raised) d.documentElement.animate({ zIndex: [1, 1] }, { duration: timing?.duration ?? 250, pseudoElement: `::view-transition-group(${id})` });
+  }, () => {
+  });
+  const restore = () => kept.forEach((v, el) => {
+    el.style.viewTransitionName = v;
+  });
+  t.finished.then(restore, restore);
+  return t.updateCallbackDone;
+}
+
+// tokens/palettes.ts
+var contract = [
+  {
+    "name": "--color-bg-page",
+    "group": "ground",
+    "meaning": "The page and every card's surface: the cream most words sit on."
+  },
+  {
+    "name": "--ws-frame-top",
+    "group": "ground",
+    "meaning": "The top of the page wash behind a glass stage, fading into the page by 640 px; in dark the frame is flat and paints it (the shell, unless a palette says)."
+  },
+  {
+    "name": "--ws-stage-foot",
+    "group": "ground",
+    "meaning": "The foot of a washed stage, whose gradient starts at the page (light only)."
+  },
+  {
+    "name": "--color-surface",
+    "group": "ground",
+    "meaning": "What is white: a marketing card, a well row under the pointer, a chat bubble, the glass of the stage."
+  },
+  {
+    "name": "--ws-raised",
+    "group": "ground",
+    "meaning": "What floats off the page: a menu, a popover, a tooltip, a dialog, a panel, a toast."
+  },
+  {
+    "name": "--ws-tray",
+    "group": "ground",
+    "meaning": "The rim and foot of a rimmed card, and the well behind rows."
+  },
+  {
+    "name": "--ws-edge-card",
+    "group": "edge",
+    "meaning": "A card's and an outlined control's 0.5 px edge."
+  },
+  {
+    "name": "--ws-edge",
+    "group": "edge",
+    "meaning": "A divider between rows; a quiet line."
+  },
+  {
+    "name": "--ws-edge-hover",
+    "group": "edge",
+    "meaning": "An outlined control's edge under the pointer."
+  },
+  {
+    "name": "--ws-well-hover",
+    "group": "edge",
+    "meaning": "A rimmed card's rim under the pointer."
+  },
+  {
+    "name": "--color-text-heading",
+    "group": "word",
+    "meaning": "Titles, names, figures, navy marks, and the act fill (the primary button, a thumb, a checked box)."
+  },
+  {
+    "name": "--color-text-body",
+    "group": "word",
+    "meaning": "Body words: a card's line, a row."
+  },
+  {
+    "name": "--color-text-muted",
+    "group": "word",
+    "meaning": "Meta, labels, captions."
+  },
+  {
+    "name": "--color-text-interactive",
+    "group": "word",
+    "meaning": 'Links and words that go somewhere, a falling number, "working".'
+  },
+  {
+    "name": "--ws-on-act",
+    "group": "act",
+    "meaning": "Words and marks on the act fill."
+  },
+  {
+    "name": "--ws-act-hover",
+    "group": "act",
+    "meaning": "The act fill under the pointer."
+  },
+  {
+    "name": "--ws-word-needs",
+    "group": "accent",
+    "meaning": "Needs you, in words: the current page, something to fix (the accent's AA step)."
+  },
+  {
+    "name": "--ws-focus-color",
+    "group": "focus",
+    "meaning": "The 2 px focus ring, outside or inset."
+  },
+  {
+    "name": "--ws-word-positive",
+    "group": "status",
+    "meaning": "Good news in words."
+  },
+  {
+    "name": "--ws-word-alert",
+    "group": "status",
+    "meaning": "Something wrong now, in words."
+  },
+  {
+    "name": "--ws-chart-finished",
+    "group": "chart",
+    "meaning": "Tone 1: done, passed, positive marks."
+  },
+  {
+    "name": "--ws-chart-past-half",
+    "group": "chart",
+    "meaning": "Tone 2: past halfway marks."
+  },
+  {
+    "name": "--ws-chart-under-half",
+    "group": "chart",
+    "meaning": "Tone 3: under halfway marks and needs-you dots."
+  },
+  {
+    "name": "--ws-chart-navy-light",
+    "group": "chart",
+    "meaning": "Tone 4: a second navy, for a series beside the heading navy."
+  },
+  {
+    "name": "--ws-chart-needs-work",
+    "group": "chart",
+    "meaning": "Tone 5: needs work marks."
+  },
+  {
+    "name": "--ws-chart-alert",
+    "group": "chart",
+    "meaning": "Tone 6: alert marks."
+  },
+  {
+    "name": "--ws-rating-strong",
+    "group": "rating",
+    "meaning": "Strong: its marks."
+  },
+  {
+    "name": "--ws-rating-middle",
+    "group": "rating",
+    "meaning": "Getting there (the middle band): its marks."
+  },
+  {
+    "name": "--ws-rating-needs-work",
+    "group": "rating",
+    "meaning": "Needs work: its marks."
+  },
+  {
+    "name": "--ws-agent-coach",
+    "group": "agent",
+    "meaning": "The coaching assistant's mark."
+  },
+  {
+    "name": "--ws-agent-growth",
+    "group": "agent",
+    "meaning": "The growth assistant's mark."
+  },
+  {
+    "name": "--ws-agent-recruit",
+    "group": "agent",
+    "meaning": "The recruiting assistant's mark."
+  },
+  {
+    "name": "--ws-agent-tally",
+    "group": "agent",
+    "meaning": "The money assistant's mark, and a softer act (a figure tab's current cell, a seat meter, a hatch)."
+  }
+];
+var palettes = {
+  "default": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#ebf0f5",
+      "--ws-stage-foot": "#fef9f6",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e8e8e8",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#495883",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  },
+  "cool": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#ebf0f5",
+      "--ws-stage-foot": "#fefbf9",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e2e2e2",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#093555",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#e8edf3",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#e8edf3",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#ffffff",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#ffffff",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  },
+  "warm": {
+    "light": {
+      "--color-bg-page": "#fefbf9",
+      "--ws-frame-top": "#fefbf9",
+      "--ws-stage-foot": "#fef9f6",
+      "--color-surface": "#ffffff",
+      "--ws-raised": "#fefbf9",
+      "--ws-tray": "#ededed",
+      "--ws-edge-card": "#d3d3d3",
+      "--ws-edge": "#e8e8e8",
+      "--ws-edge-hover": "#aaa49d",
+      "--ws-well-hover": "#e4e2df",
+      "--color-text-heading": "#093555",
+      "--color-text-body": "#545454",
+      "--color-text-muted": "#666666",
+      "--color-text-interactive": "#495883",
+      "--ws-on-act": "#ffffff",
+      "--ws-act-hover": "#0f4a73",
+      "--ws-word-needs": "#a84b3c",
+      "--ws-focus-color": "#093555",
+      "--ws-word-positive": "#09717a",
+      "--ws-word-alert": "#b1042f",
+      "--ws-chart-finished": "#098486",
+      "--ws-chart-past-half": "#6d4fc2",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#2e6088",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#b1042f",
+      "--ws-rating-strong": "#098486",
+      "--ws-rating-middle": "#495883",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#098486",
+      "--ws-agent-growth": "#6d4fc2",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#2c4870"
+    },
+    "dark": {
+      "--color-bg-page": "#0f1922",
+      "--ws-frame-top": "#0a1118",
+      "--ws-stage-foot": "#0f1922",
+      "--color-surface": "#131e28",
+      "--ws-raised": "#16222d",
+      "--ws-tray": "#1e2b38",
+      "--ws-edge-card": "#273544",
+      "--ws-edge": "#1e2a36",
+      "--ws-edge-hover": "#8494a5",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#e8edf3",
+      "--color-text-body": "#b0bbc7",
+      "--color-text-muted": "#8494a5",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#0f1922",
+      "--ws-act-hover": "#d7dce2",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#e8edf3",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff5470",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#e8edf3"
+    },
+    "navy": {
+      "--color-bg-page": "#021a32",
+      "--ws-frame-top": "#021a32",
+      "--ws-stage-foot": "#021a32",
+      "--color-surface": "#0f253c",
+      "--ws-raised": "#162c42",
+      "--ws-tray": "#2a3f53",
+      "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
+      "--ws-edge": "rgba(255, 255, 255, 0.1)",
+      "--ws-edge-hover": "#a9a9a9",
+      "--ws-well-hover": "#273544",
+      "--color-text-heading": "#ffffff",
+      "--color-text-body": "#d3d3d3",
+      "--color-text-muted": "#a9a9a9",
+      "--color-text-interactive": "#93a6dc",
+      "--ws-on-act": "#021a32",
+      "--ws-act-hover": "#ebedef",
+      "--ws-word-needs": "#ff8b78",
+      "--ws-focus-color": "#ffffff",
+      "--ws-word-positive": "#4fc7be",
+      "--ws-word-alert": "#ff8282",
+      "--ws-chart-finished": "#23a8a3",
+      "--ws-chart-past-half": "#9a84ee",
+      "--ws-chart-under-half": "#ff725c",
+      "--ws-chart-navy-light": "#6e9cc4",
+      "--ws-chart-needs-work": "#f370a4",
+      "--ws-chart-alert": "#ff5470",
+      "--ws-rating-strong": "#3bb8b2",
+      "--ws-rating-middle": "#93a6dc",
+      "--ws-rating-needs-work": "#f370a4",
+      "--ws-agent-coach": "#3bb8b2",
+      "--ws-agent-growth": "#9a84ee",
+      "--ws-agent-recruit": "#ff725c",
+      "--ws-agent-tally": "#ffffff"
+    }
+  }
+};
 export {
   Badge,
   Button,
@@ -558,5 +1238,10 @@ export {
   badgeVariants,
   buttonVariants,
   cardVariants,
-  cn
+  cn,
+  contract,
+  morph,
+  palettes,
+  reorder,
+  rollPlaceholder
 };