@sixthshift/design-system 0.7.0 → 0.9.0

package/src/components/Steps/Steps.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
+import { Check } from "lucide-react";
+import * as React from "react";
+
+/**
+ * Geometry only. Every colour reads a `--steps-*` component token whose value
+ * is decided by src/components/Steps/steps.recipe.css, selected by the
+ * `data-state` each item renders (`complete`, `current`, `upcoming`).
+ */
+const stepsVariants = cva("steps flex", {
+  variants: {
+    orientation: {
+      horizontal: "w-full flex-row items-start",
+      vertical: "flex-col",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export type StepsOrientation = "horizontal" | "vertical";
+
+/** Where a step sits relative to `current`. Rendered as `data-state`. */
+export type StepState = "complete" | "current" | "upcoming";
+
+export type StepItem = {
+  /** Visible step name. */
+  label: React.ReactNode;
+  /** Secondary line under the label. */
+  description?: React.ReactNode;
+};
+
+export type StepsProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & {
+  /** The steps, in order. */
+  steps: readonly StepItem[];
+  /** Zero-based index of the step in progress. `steps.length` marks every step complete. */
+  current: number;
+  /**
+   * Makes completed steps clickable, for going back in a wizard. Upcoming
+   * steps never are — skipping ahead is the flow's decision, not the
+   * indicator's.
+   */
+  onStepClick?: (index: number) => void;
+  /** Layout direction. `horizontal` collapses labels to the current step's on narrow screens. */
+  orientation?: StepsOrientation;
+};
+
+function stateOf(index: number, current: number): StepState {
+  if (index < current) return "complete";
+  if (index === current) return "current";
+  return "upcoming";
+}
+
+/**
+ * Progress through a fixed sequence — checkout, onboarding, a multi-page
+ * form. Display-only: the step in progress is the `current` prop, owned by
+ * whatever runs the flow, so there is no internal state to control.
+ *
+ * Renders an `<ol>` (pass `aria-label`, e.g. "Checkout progress"); the
+ * current item carries `aria-current="step"`, and each indicator has a
+ * visually hidden status ("completed", "current") so the sequence reads
+ * correctly without the colours.
+ *
+ * With `onStepClick`, completed steps become buttons. Current and upcoming
+ * steps stay plain text: a step indicator that let you jump forward would be
+ * making the flow's validation decisions for it.
+ *
+ * Horizontally, every label shows from `sm` up; below that only the current
+ * step's label does, so four steps still fit a phone.
+ */
+export const Steps = React.forwardRef<HTMLOListElement, StepsProps>(({ className, steps, current, onStepClick, orientation = "horizontal", ...props }, ref) => {
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <ol ref={ref} data-orientation={orientation} className={stepsVariants({ orientation, className })} {...props}>
+      {steps.map((step, index) => {
+        const state = stateOf(index, current);
+        const isLast = index === steps.length - 1;
+        const clickable = state === "complete" && onStepClick !== undefined;
+
+        const indicator = (
+          <span className="steps-indicator border-(color:--steps-indicator-border) relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border-2 bg-(--steps-indicator-bg) font-semibold text-(--steps-indicator-fg) text-sm transition-colors">
+            {state === "complete" ? <Check aria-hidden="true" className="size-4" strokeWidth={3} /> : index + 1}
+          </span>
+        );
+
+        const text = (
+          <span
+            className={cn("flex min-w-0 flex-col", isHorizontal ? "items-center text-center" : "pt-1", isHorizontal && state !== "current" && "max-sm:sr-only")}
+          >
+            <span className="font-medium text-(--steps-label-fg) text-sm">{step.label}</span>
+            {step.description !== undefined && <span className="text-(--steps-description-fg) text-xs">{step.description}</span>}
+            {state !== "upcoming" && <span className="sr-only">{state === "complete" ? "(completed)" : "(current)"}</span>}
+          </span>
+        );
+
+        const body = (
+          <>
+            {indicator}
+            {text}
+          </>
+        );
+
+        const bodyClass = cn("flex gap-2", isHorizontal ? "flex-col items-center" : "flex-row items-start gap-3");
+
+        return (
+          <li
+            // biome-ignore lint/suspicious/noArrayIndexKey: a step is its position — the sequence is fixed and never reorders
+            key={index}
+            data-state={state}
+            aria-current={state === "current" ? "step" : undefined}
+            className={cn("steps-item relative", isHorizontal ? "flex flex-1 justify-center" : "flex pb-6 last:pb-0")}
+          >
+            {!isLast && (
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "steps-connector absolute bg-(--steps-connector-bg)",
+                  isHorizontal ? "top-4 left-1/2 h-0.5 w-full -translate-y-1/2" : "top-8 bottom-0 left-4 w-0.5 -translate-x-1/2"
+                )}
+              />
+            )}
+            {clickable ? (
+              <button
+                type="button"
+                onClick={() => onStepClick(index)}
+                className={cn(
+                  bodyClass,
+                  "focus-visible:ring-(color:--steps-ring) cursor-pointer rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 [&:hover_.steps-indicator]:bg-(--steps-indicator-bg-hovered)"
+                )}
+              >
+                {body}
+              </button>
+            ) : (
+              <span className={bodyClass}>{body}</span>
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+});
+Steps.displayName = "Steps";
+
+export { stepsVariants };

package/src/components/Steps/index.ts

@@ -0,0 +1 @@
+export { type StepItem, type StepState, Steps, type StepsOrientation, type StepsProps, stepsVariants } from "./Steps";

package/src/components/Steps/steps.recipe.css

@@ -0,0 +1,51 @@
+/**
+ * Steps recipe — the component-token layer for Steps.
+ *
+ * One axis, and it is not `intent`: a step's colour says where it sits in the
+ * sequence, which the component renders as `data-state` on each item
+ * (`complete`, `current`, `upcoming`). Same shape as tabs.css keying its
+ * selected cell on `data-selected` rather than a variant.
+ *
+ * The grammar is `--steps-[{part}-]{context}[-{state}]`. Parts are the
+ * `indicator` (the numbered circle), the `connector` (the rule to the next
+ * step), and the `label`/`description` text. `-hovered` on the indicator only
+ * ever applies to a completed step with `onStepClick`, the one clickable case.
+ *
+ * The connector belongs to the step it leaves, so a completed step's
+ * connector takes the brand colour: the line fills up to the current step.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css.
+ */
+
+@layer components {
+  /* The floor, and also the upcoming look: an outlined, quiet step. An item
+     with a state a consumer added but did not style renders like this. */
+  .steps-item {
+    --steps-indicator-bg: var(--bg-normal);
+    --steps-indicator-bg-hovered: var(--steps-indicator-bg);
+    --steps-indicator-fg: var(--fg-subtle);
+    --steps-indicator-border: var(--border-normal);
+    --steps-connector-bg: var(--border-normal);
+    --steps-label-fg: var(--fg-subtle);
+    --steps-description-fg: var(--fg-subtle);
+    --steps-ring: var(--focus-ring);
+  }
+
+  /* current — outlined in brand, the label at full strength. */
+  .steps-item[data-state="current"] {
+    --steps-indicator-bg: var(--bg-brand-subtle);
+    --steps-indicator-fg: var(--fg-on-brand-subtle);
+    --steps-indicator-border: var(--border-brand);
+    --steps-label-fg: var(--fg-normal);
+  }
+
+  /* complete — a filled brand disc with the check reversed out. */
+  .steps-item[data-state="complete"] {
+    --steps-indicator-bg: var(--bg-brand);
+    --steps-indicator-bg-hovered: var(--bg-brand-hovered);
+    --steps-indicator-fg: var(--fg-on-brand);
+    --steps-indicator-border: var(--steps-indicator-bg);
+    --steps-connector-bg: var(--border-brand);
+    --steps-label-fg: var(--fg-normal);
+  }
+}

package/src/components/TagChip/TagChip.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Badge } from "@sixthshift/design-system/badge";
 import { cn } from "@sixthshift/design-system/utils";
 import { X } from "lucide-react";
 import * as React from "react";
@@ -24,20 +23,30 @@ export type TagChipProps = {
  *
  * Two disjoint modes, chosen by whether `onRemove` is passed: navigable (no
  * `onRemove`; the caller wraps it in a link) or removable (`onRemove` renders
- * an × — used by `TagInput` and edit surfaces). Built on `Badge`
- * (`variant="outline" intent="muted"`).
+ * an × — used by `TagInput` and edit surfaces). It looks like an outline
+ * Badge but is not one: the shape is duplicated here and every colour is its
+ * own `--tag-chip-*` token, so importing TagChip pulls in nothing else. A tag
+ * is metadata, not a status, so it takes no intent.
  */
+/** Duplicated from Badge's sizes, which TagChip used to borrow. */
+const sizeStyles = {
+  sm: "px-1.5 py-0 text-[10px]",
+  md: "px-2.5 py-0.5 text-xs",
+} as const;
+
 export const TagChip = React.forwardRef<HTMLSpanElement, TagChipProps>(({ tag, onRemove, size = "sm", className }, ref) => {
   const sep = tag.indexOf(":");
   const namespace = sep > 0 ? tag.slice(0, sep) : null;
   const value = sep > 0 ? tag.slice(sep + 1) : tag;
 
   return (
-    <Badge
+    <span
       ref={ref}
-      variant="outline"
-      intent="muted"
-      className={cn("tag-chip gap-1 font-normal", size === "sm" ? "px-1.5 py-0 text-[10px]" : "px-2 py-0.5 text-xs", className)}
+      className={cn(
+        "tag-chip border-(color:--tag-chip-border) focus:ring-(color:--tag-chip-ring) inline-flex items-center gap-1 rounded-md border bg-(--tag-chip-bg) font-normal text-(--tag-chip-fg) transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
+        sizeStyles[size],
+        className
+      )}
     >
       {namespace && <span className="text-(--tag-chip-namespace-fg)">{namespace}:</span>}
       <span>{value}</span>
@@ -51,7 +60,7 @@ export const TagChip = React.forwardRef<HTMLSpanElement, TagChipProps>(({ tag, o
           <X className="h-3 w-3" />
         </button>
       )}
-    </Badge>
+    </span>
   );
 });
 TagChip.displayName = "TagChip";

package/src/components/TagChip/tag-chip.recipe.css

@@ -1,24 +1,24 @@
 /**
  * TagChip recipe — the component-token layer for TagChip.
  *
- * TagChip's surface (background, border, foreground) is entirely Badge's:
- * it renders `<Badge variant="outline" intent="muted">`, so that colour
- * already comes from `.badge`'s tokens in badge.css — duplicating it here
- * would just be a second name for the same cell. The only colours TagChip
- * contributes itself are the muted namespace prefix and the remove ("×")
- * button, which is why this file covers just those two.
+ * TagChip draws its own chip rather than rendering a Badge, so it owns every
+ * colour it paints: the surface (a resting background and a neutral border,
+ * like an outline badge), the quieter text a tag gets as metadata, the
+ * namespace prefix and the remove ("×") button.
  *
- * The grammar is `--tag-chip-{part}-{context}[-{state}]`. Both tokens live
- * on `.tag-chip` (the root Badge element) and are read by its descendants via
- * ordinary CSS custom-property inheritance — the namespace `<span>` and the
- * remove `<button>` need no class hooks of their own for that.
+ * The grammar is `--tag-chip-[{part}-]{context}[-{state}]`. Every token lives
+ * on `.tag-chip`, the root, and the namespace `<span>` and remove `<button>`
+ * read theirs by ordinary inheritance.
  *
- * `@layer components` is load-bearing, not tidiness — see button.css for the
- * cascade reasoning.
+ * `@layer components` is load-bearing, not tidiness — see button.recipe.css.
  */
 
 @layer components {
   .tag-chip {
+    --tag-chip-bg: var(--bg-normal);
+    --tag-chip-border: var(--border-normal);
+    --tag-chip-ring: var(--border-brand);
+    --tag-chip-fg: var(--fg-subtle);
     --tag-chip-namespace-fg: var(--fg-subtle);
     --tag-chip-remove-fg: var(--fg-subtle);
     --tag-chip-remove-fg-hovered: var(--fg-normal);

package/src/components/Toast/Toast.tsx

@@ -132,7 +132,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
               {children}
               {action && (
                 <div className="mt-2">
-                  <Button variant="link" size="sm" className="h-auto p-0 font-medium" onClick={onAction}>
+                  <Button inline size="sm" className="font-medium" onClick={onAction}>
                     {action}
                   </Button>
                 </div>

package/src/components/Toggle/Toggle.tsx

@@ -2,19 +2,64 @@
 
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
-import type { VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { type ButtonIntent, type ButtonVariant, buttonRecipe, type buttonVariants } from "../Button/Button";
 
 /**
- * `variant` and `intent` are no longer CVA variants on `buttonVariants` — they
- * select a recipe cell in CSS — so they are declared here rather than inherited
- * through `VariantProps`, which now yields `size` alone.
+ * Geometry and behaviour only; every colour reads a `--toggle-*` token decided
+ * by src/components/Toggle/toggle.recipe.css.
+ *
+ * Duplicated from Button on purpose, not shared: a toggle looks like a button
+ * but is its own component, so importing Toggle must not pull in Button. The
+ * two start identical and are free to drift.
  */
+const toggleVariants = cva(
+  // One literal, deliberately — see Button.tsx for the sorter trap.
+  "toggle border-(color:--toggle-border) focus-visible:ring-(color:--toggle-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--toggle-bg) font-medium text-(--toggle-fg) text-sm transition-colors hover:bg-(--toggle-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--toggle-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        xs: "h-7 rounded-md px-2 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        md: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-12 rounded-md px-10 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+/** The non-colour half of `variant` — border width and elevation. */
+const variantStructure: Record<string, string> = {
+  solid: "shadow",
+  outline: "border shadow-xs",
+  ghost: "",
+};
+
+/** Squares the box at whatever size is set, and drops the horizontal padding. */
+const iconOnlyGeometry: Record<string, string> = {
+  xs: "w-7 px-0",
+  sm: "w-8 px-0",
+  md: "w-9 px-0",
+  lg: "w-10 px-0",
+  xl: "w-12 px-0",
+};
+
+/** Widened deliberately, as on every component: a consumer adds a variant or intent in CSS. */
+type Loose<T extends string> = T | (string & {});
+
+export type ToggleVariantName = "solid" | "outline" | "ghost";
+export type ToggleIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
+export type ToggleVariant = Loose<ToggleVariantName>;
+export type ToggleIntent = Loose<ToggleIntentName>;
+
 export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> &
-  VariantProps<typeof buttonVariants> & {
-    variant?: ButtonVariant | undefined;
-    intent?: ButtonIntent | undefined;
+  VariantProps<typeof toggleVariants> & {
+    variant?: ToggleVariant | undefined;
+    intent?: ToggleIntent | undefined;
     /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the toggle follows the nearest `data-brand` ancestor. */
     brand?: string | undefined;
     /** Square the toggle at its current size, for an icon with no label. */
@@ -33,12 +78,12 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
  * for a set of mutually exclusive or multi-select options, use `ToggleGroup`
  * instead.
  *
- * Built directly on Button: it calls `buttonRecipe(...)` and takes the same
- * `variant`/`intent`/`size` axes Button does, plus `iconOnly` for a toolbar
- * toggle whose whole content is an icon. The
- * pressed-state colour mapping lives in `src/components/Toggle/toggle.recipe.css`,
- * keyed off the `data-state="on" | "off"` attribute this component renders
- * alongside `aria-pressed`.
+ * Looks like a Button and takes the same `variant`/`intent`/`size` axes, plus
+ * `iconOnly` for a toolbar toggle whose whole content is an icon — but it is
+ * its own component, with its own classes and `--toggle-*` tokens, and
+ * imports nothing from Button. Every colour, pressed state included, lives in
+ * `src/components/Toggle/toggle.recipe.css`, keyed off the `data-state="on" |
+ * "off"` attribute this component renders alongside `aria-pressed`.
  *
  * Controlled via `pressed`/`defaultPressed`/`onPressedChange`
  * (`useControllableState`).
@@ -47,8 +92,8 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
   (
     {
       className,
-      variant,
-      intent,
+      variant = "solid",
+      intent = "neutral",
       brand,
       size,
       iconOnly = false,
@@ -67,18 +112,19 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
       onChange: onPressedChange,
     });
 
-    const recipe = buttonRecipe({ variant, intent, brand, size, iconOnly });
-
     return (
       <button
         type="button"
         aria-pressed={pressed}
+        // What the recipe selects on; `data-brand` is omitted unless set.
         data-state={pressed ? "on" : "off"}
+        data-variant={variant}
+        data-intent={intent}
+        data-brand={brand}
         disabled={disabled}
         ref={ref}
         onClick={() => setPressed(!pressed)}
-        {...recipe}
-        className={cn(recipe.className, className)}
+        className={cn(variantStructure[variant], toggleVariants({ size, className: cn(iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined, className) }))}
         {...props}
       >
         {children}
@@ -88,4 +134,4 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
 );
 Toggle.displayName = "Toggle";
 
-export { Toggle };
+export { Toggle, toggleVariants };

package/src/components/Toggle/index.ts

@@ -1 +1,9 @@
-export { Toggle, type ToggleProps } from "./Toggle";
+export {
+  Toggle,
+  type ToggleIntent,
+  type ToggleIntentName,
+  type ToggleProps,
+  type ToggleVariant,
+  type ToggleVariantName,
+  toggleVariants,
+} from "./Toggle";

package/src/components/Toggle/toggle.recipe.css

@@ -1,92 +1,64 @@
 /**
- * Toggle recipe — the pressed-state layer for Toggle and ToggleGroupItem.
+ * Toggle recipe — the component-token layer for Toggle.
  *
- * These cells target `.btn`, not a `.toggle` class of their own, because both
- * components render Button's class and read Button's `--button-*` tokens
- * (via `buttonRecipe`) — a toggle is a button with a third axis, `state`, not
- * a different look. Reusing `.btn` here is deliberate, not a shortcut.
+ * Toggle's own `--toggle-*` tokens on its own `.toggle` hook. It looks like a
+ * Button, and these cells start as copies of button.recipe.css's, but it is a
+ * separate component: re-pointing `--button-*` does not reach a toggle, and
+ * re-pointing these does not reach a button. Duplicated on purpose, so each is
+ * free to change without dragging the other.
  *
- * The grammar extends button.css's `(variant, intent)` with a third selector,
- * `[data-state="on"]` — the same attribute Toggle already renders
- * (`data-state={pressed ? "on" : "off"}`) and ToggleGroupItem now renders for
- * `selected`, rather than a new attribute invented for this file. `state`
- * never appears in a token *name* any more than `intent` does — see
- * button.css's header for why: it selects, via the attribute, which existing
- * `--button-bg`/`--button-bg-hovered` values apply.
+ * Every cell paints with the intent slots (src/theming/intents.css), so each
+ * variant works in every intent. The third selector is `[data-state="on"]`,
+ * the attribute Toggle renders alongside `aria-pressed`.
  *
- * Only solid, outline and ghost get cells: a link toggle has no surface to
- * press, so "on" carries no colour change.
- *
- * Every cell repeats its own resting value into `--button-bg-hovered`: the old
- * classes paired `bg-*` with an identical `hover:bg-*`, i.e. a pressed toggle
- * deliberately does not shift on hover. Restating it here (rather than relying
- * on button.css's floor, which chains `-hovered` from `--button-bg`) keeps
- * that "no shift" behaviour explicit and correct regardless of cascade order
- * against the button.css cells these compound with.
+ * `@layer components` is load-bearing, not tidiness — see button.recipe.css.
  */
 
 @layer components {
-  /* solid — the main -pressed background carries through as both resting and
-     hovered, so pressing never lightens or darkens further on hover. */
-  .btn[data-state="on"][data-variant="solid"][data-intent="brand"] {
-    --button-bg: var(--bg-brand-pressed);
-    --button-bg-hovered: var(--bg-brand-pressed);
-  }
-
-  .btn[data-state="on"][data-variant="solid"][data-intent="neutral"] {
-    --button-bg: var(--bg-strong-pressed);
-    --button-bg-hovered: var(--bg-strong-pressed);
-  }
-
-  .btn[data-state="on"][data-variant="solid"][data-intent="danger"] {
-    --button-bg: var(--bg-danger-pressed);
-    --button-bg-hovered: var(--bg-danger-pressed);
-  }
-
-  .btn[data-state="on"][data-variant="solid"][data-intent="success"] {
-    --button-bg: var(--bg-success-pressed);
-    --button-bg-hovered: var(--bg-success-pressed);
-  }
-
-  .btn[data-state="on"][data-variant="solid"][data-intent="warning"] {
-    --button-bg: var(--bg-warning-pressed);
-    --button-bg-hovered: var(--bg-warning-pressed);
+  /* The floor — a plain, legible toggle when no cell below matches. */
+  .toggle {
+    --toggle-bg: transparent;
+    --toggle-bg-hovered: var(--toggle-bg); /* no shift on hover */
+    --toggle-bg-pressed: var(--toggle-bg-hovered);
+    --toggle-fg: var(--fg-normal);
+    --toggle-border: var(--border-normal);
+    --toggle-ring: var(--focus-ring);
   }
 
-  /* outline and ghost — same subtle-pressed background and foreground per
-     intent, matching button.css's own pairing of these two variants. */
-  .btn[data-state="on"][data-variant="outline"][data-intent="neutral"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="neutral"] {
-    --button-bg: var(--bg-subtle-pressed);
-    --button-bg-hovered: var(--bg-subtle-pressed);
-    --button-fg: var(--fg-normal);
+  /* solid — a filled surface, with text read on top of it. */
+  .toggle[data-variant="solid"] {
+    --toggle-bg: var(--intent-solid-bg);
+    --toggle-bg-hovered: var(--intent-solid-bg-hovered);
+    --toggle-bg-pressed: var(--intent-solid-bg-pressed);
+    --toggle-fg: var(--intent-solid-fg);
   }
 
-  .btn[data-state="on"][data-variant="outline"][data-intent="brand"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="brand"] {
-    --button-bg: var(--bg-brand-subtle-pressed);
-    --button-bg-hovered: var(--bg-brand-subtle-pressed);
-    --button-fg: var(--fg-on-brand-subtle-pressed);
+  /* outline and ghost share the family's text colour and its tint wash. */
+  .toggle[data-variant="outline"],
+  .toggle[data-variant="ghost"] {
+    --toggle-bg-hovered: var(--intent-tint-bg-hovered);
+    --toggle-bg-pressed: var(--intent-tint-bg-pressed);
+    --toggle-fg: var(--intent-fg);
   }
 
-  .btn[data-state="on"][data-variant="outline"][data-intent="danger"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="danger"] {
-    --button-bg: var(--bg-danger-subtle-pressed);
-    --button-bg-hovered: var(--bg-danger-subtle-pressed);
-    --button-fg: var(--fg-on-danger-subtle-pressed);
+  /* outline alone carries a resting surface and a border. */
+  .toggle[data-variant="outline"] {
+    --toggle-bg: var(--bg-normal);
+    --toggle-border: var(--intent-border);
   }
 
-  .btn[data-state="on"][data-variant="outline"][data-intent="success"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="success"] {
-    --button-bg: var(--bg-success-subtle-pressed);
-    --button-bg-hovered: var(--bg-success-subtle-pressed);
-    --button-fg: var(--fg-on-success-subtle-pressed);
+  /* On. Every cell repeats its resting value into `-hovered`: a pressed toggle
+     deliberately does not shift on hover. solid holds the fill's -pressed
+     step; outline and ghost hold the tint's, with its text partner. */
+  .toggle[data-state="on"][data-variant="solid"] {
+    --toggle-bg: var(--intent-solid-bg-pressed);
+    --toggle-bg-hovered: var(--intent-solid-bg-pressed);
   }
 
-  .btn[data-state="on"][data-variant="outline"][data-intent="warning"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="warning"] {
-    --button-bg: var(--bg-warning-subtle-pressed);
-    --button-bg-hovered: var(--bg-warning-subtle-pressed);
-    --button-fg: var(--fg-on-warning-subtle-pressed);
+  .toggle[data-state="on"][data-variant="outline"],
+  .toggle[data-state="on"][data-variant="ghost"] {
+    --toggle-bg: var(--intent-tint-bg-pressed);
+    --toggle-bg-hovered: var(--intent-tint-bg-pressed);
+    --toggle-fg: var(--intent-tint-fg-pressed);
   }
 }

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -13,10 +13,10 @@ import type { ToggleGroupProps } from "./toggleGroup.types";
  * `defaultValue`/`onValueChange` follow `type`: a string for single, a
  * string array for multiple (`useControllableState`).
  *
- * Items are built on the same `buttonRecipe` as `Button`/`Toggle` and take
- * the same `variant`/`intent`, with two differences: `variant` excludes
- * `"link"` (no clear pressed state for an underline in a group) and `size`
- * excludes `"xl"` (too large for grouped toggles) — see
+ * Items look like Toggles but carry their own duplicated styling and
+ * `--toggle-group-item-*` tokens (toggle-group.recipe.css), and take
+ * the same `variant`/`intent`, with one difference: `size` excludes `"xl"`
+ * (too large for grouped toggles) — see
  * `toggleGroup.types.ts`. `appearance` chooses `"segmented"` (items joined
  * into one border) or `"separate"` (individually bordered, gapped) rendering.
  */