@sixthshift/design-system 0.8.0 → 0.9.0

package/dist/components/ToggleGroup/toggleGroup.types.d.ts

@@ -1,8 +1,16 @@
 import type * as React from "react";
-import type { ButtonIntentName, ButtonVariantName } from "../Button/Button.js";
-import type { ToggleProps } from "../Toggle/Toggle.js";
-/** Extract a prop's union type from ToggleProps, stripping null added by CVA */
-type ToggleProp<K extends keyof ToggleProps> = NonNullable<ToggleProps[K]>;
+/**
+ * ToggleGroup's own axes. They match Toggle's and Button's, deliberately
+ * duplicated rather than imported: a group of toggle buttons is its own
+ * component, and importing it must not pull in either.
+ */
+type Loose<T extends string> = T | (string & {});
+export type ToggleGroupVariantName = "solid" | "outline" | "ghost";
+export type ToggleGroupIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
+export type ToggleGroupVariant = Loose<ToggleGroupVariantName>;
+export type ToggleGroupIntent = Loose<ToggleGroupIntentName>;
+/** `xl` is left out — too large for grouped toggles. */
+export type ToggleGroupSize = "xs" | "sm" | "md" | "lg";
 export type ToggleGroupOption = {
     /** Unique value for the option */
     value: string;
@@ -20,24 +28,18 @@ export type ToggleGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "o
     appearance?: "segmented" | "separate";
     /** Layout orientation */
     orientation?: "vertical" | "horizontal";
-    /**
-     * Button variant (link excluded as it has no clear pressed state in groups).
-     *
-     * Deliberately the closed union, not Button's widened `ButtonVariant`: an
-     * `Exclude` cannot remove `link` from a type that already admits any string,
-     * so narrowing here requires narrowing from the closed names.
-     */
-    variant?: Exclude<ButtonVariantName, "link">;
-    /** Color intent */
-    intent?: ButtonIntentName;
+    /** The items' treatment. */
+    variant?: ToggleGroupVariant;
+    /** Colour intent — widened, so a consumer-defined intent reaches the group. */
+    intent?: ToggleGroupIntent;
     /**
      * Name of a brand the theme defines. Rendered once, as `data-brand` on the
      * group element, so every item inherits it. Omitted, the group follows the
      * nearest `data-brand` ancestor.
      */
     brand?: string | undefined;
-    /** Button size (xl excluded — too large for grouped toggles) */
-    size?: Exclude<ToggleProp<"size">, "xl">;
+    /** Item size (xl excluded — too large for grouped toggles) */
+    size?: ToggleGroupSize;
     /** Square every item at the current size, for icon-only options */
     iconOnly?: boolean;
     /** Disable all options */

package/dist/components/ToggleGroup/toggleGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggleGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/toggleGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,gFAAgF;AAChF,KAAK,UAAU,CAAC,CAAC,SAAS,MAAM,WAAW,IAAI,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1F,wBAAwB;IACxB,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,wBAAwB;IACxB,UAAU,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACtC,yBAAyB;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IAC7C,mBAAmB;IACnB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;IACzC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG;IAC1D,IAAI,EAAE,QAAQ,CAAC;IACf,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,GAAG;IAC5D,IAAI,EAAE,UAAU,CAAC;IACjB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC"}
+{"version":3,"file":"toggleGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/toggleGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;;;GAIG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACjD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAC3F,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC;AAC/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC;AAC7D,wDAAwD;AACxD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1F,wBAAwB;IACxB,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACtC,wBAAwB;IACxB,UAAU,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACtC,yBAAyB;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,8DAA8D;IAC9D,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG;IAC1D,IAAI,EAAE,QAAQ,CAAC;IACf,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,GAAG;IAC5D,IAAI,EAAE,UAAU,CAAC;IACjB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC"}

package/dist/typography/Code.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "@sixthshift/design-system/text";
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
-export const Code = React.forwardRef(({ className, ...props }, ref) => (_jsx(Text, { ref: ref, as: "code", className: cn("rounded bg-bg-subtle px-1.5 py-0.5 font-mono text-sm", className), ...props })));
+export const Code = React.forwardRef(({ className, ...props }, ref) => (_jsx(Text, { ref: ref, as: "code", className: cn("rounded-sm bg-bg-subtle px-1.5 py-0.5 font-mono text-sm", className), ...props })));
 Code.displayName = "Code";
 //# sourceMappingURL=Code.js.map

package/dist/typography/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/typography/Code.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7F,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,sDAAsD,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC1H,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/typography/Code.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7F,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAC,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,yDAAyD,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC7H,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sixthshift/design-system",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Personal design system - tokens, theme, and component library",
   "license": "MIT",
   "publishConfig": {
@@ -361,6 +361,7 @@
     "check:fix": "biome check --write .",
     "check:recipes": "bun run scripts/check-recipes.ts",
     "check:contrast": "bun run scripts/check-contrast.ts",
+    "check:radius": "bun run scripts/check-radius.ts",
     "check:api": "bun run scripts/api-snapshot.ts --check",
     "check:size": "bun run scripts/check-size.ts",
     "api:update": "bun run scripts/api-snapshot.ts",

package/src/components/Badge/Badge.tsx

@@ -7,7 +7,7 @@ import * as React from "react";
  *
  * Every colour reads a `--badge-*` component token whose value is decided by
  * src/components/Badge/badge.recipe.css. That file is the mapping from
- * `(variant, intent)` to a semantic token — the layer that used to be
+ * `variant` to the intent slots — the layer that used to be
  * `compoundVariants` here, where it was compiled into class-name literals and
  * unreachable from outside. Nothing in this file names a colour, which is the
  * point: the semantics are now configurable without a release.
@@ -17,8 +17,16 @@ const badgeVariants = cva(
   // space before a `+`, silently welding the last class of one fragment to the
   // first of the next. The screenshots catch it, but a single string means the
   // sorter has nothing to break.
-  "badge border-(color:--badge-border) focus:ring-(color:--badge-ring) inline-flex items-center rounded-md border bg-(--badge-bg) px-2.5 py-0.5 font-semibold text-(--badge-fg) text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
-  { variants: {} }
+  "badge border-(color:--badge-border) focus:ring-(color:--badge-ring) inline-flex items-center rounded-md border bg-(--badge-bg) font-semibold text-(--badge-fg) transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 py-0 text-[10px]",
+        md: "px-2.5 py-0.5 text-xs",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
 );
 
 /**
@@ -41,62 +49,47 @@ const variantStructure: Record<string, string> = {
 type Loose<T extends string> = T | (string & {});
 
 export type BadgeVariantName = "solid" | "soft" | "outline";
-/**
- * `primary` was this component's name for the brand colour, and nothing else in
- * the system used it — the token is `--bg-brand`, and
- * docs/modals.md already told callers to write `intent="brand"`. It is off the
- * closed union as of this release but still resolves, via an aliased selector in
- * badge.css; `BadgeIntent` is widened, so it also still type-checks.
- */
-export type BadgeIntentName = "neutral" | "brand" | "danger" | "success" | "warning" | "muted";
+/** The system's intent set — the families src/theming/intents.css defines. */
+export type BadgeIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
 export type BadgeVariant = Loose<BadgeVariantName>;
 export type BadgeIntent = Loose<BadgeIntentName>;
 
-export type BadgeRecipeProps = VariantProps<typeof badgeVariants> & {
-  variant?: BadgeVariant | undefined;
-  intent?: BadgeIntent | undefined;
-  /** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
-  brand?: string | undefined;
-  className?: string | undefined;
-};
-
-/**
- * The class string plus the attributes the recipe selects on. `data-brand` is
- * omitted unless `brand` is set, same as `buttonRecipe`.
- */
-export function badgeRecipe({ variant = "solid", intent = "brand", brand, className }: BadgeRecipeProps) {
-  return {
-    className: cn(variantStructure[variant], badgeVariants({ className })),
-    "data-variant": variant,
-    "data-intent": intent,
-    "data-brand": brand,
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof badgeVariants> & {
+    variant?: BadgeVariant | undefined;
+    intent?: BadgeIntent | undefined;
+    /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the badge follows the nearest `data-brand` ancestor. */
+    brand?: string | undefined;
   };
-}
-
-export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
-  variant?: BadgeVariant | undefined;
-  intent?: BadgeIntent | undefined;
-  /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the badge follows the nearest `data-brand` ancestor. */
-  brand?: string | undefined;
-};
 
 /**
  * Small label for status, category, or count.
  *
  * Two independent axes, same split as Button: `variant` is the fill
  * (`solid`, `soft`, `outline`), `intent` is what it signals (`neutral`,
- * `brand`, `danger`, `success`, `warning`, `muted`) — `muted` has no
- * Button equivalent, for de-emphasized metadata rather than a status.
+ * `brand`, `danger`, `success`, `warning`). `neutral`, the default, is the
+ * grey family; a brand-coloured badge says `intent="brand"`. `size` is `sm`
+ * or `md` (the default).
  * Renders a `<span>`; purely presentational, so give it visible text — it
  * does not manage an accessible name of its own.
  *
- * Colour is not decided here: each `(variant, intent)` pairing resolves
- * through a `--badge-*` component token (src/components/Badge/badge.recipe.css), the
- * same seam Button uses, so a consumer can re-point a cell without a
- * release.
+ * Colour is not decided here: each variant resolves through a `--badge-*`
+ * component token (src/components/Badge/badge.recipe.css) that paints with the
+ * intent slots, the same seam Button uses, so a consumer can re-point a cell
+ * or add an intent without a release.
  */
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant = "solid", intent = "brand", brand, ...props }, ref) => {
-  return <span ref={ref} {...badgeRecipe({ variant, intent, brand, className })} {...props} />;
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant = "solid", intent = "neutral", brand, size, ...props }, ref) => {
+  return (
+    <span
+      ref={ref}
+      className={cn(variantStructure[variant], badgeVariants({ size, className }))}
+      // What the recipe selects on; `data-brand` is omitted unless set.
+      data-variant={variant}
+      data-intent={intent}
+      data-brand={brand}
+      {...props}
+    />
+  );
 });
 Badge.displayName = "Badge";
 

package/src/components/Badge/badge.recipe.css

@@ -1,11 +1,12 @@
 /**
  * Badge recipe — the component-token layer for Badge.
  *
- * This is the mapping from `(variant, intent)` to a semantic token. It used
- * to live in `compoundVariants` inside Badge.tsx, where it was compiled into
- * class-name literals and no consumer could reach it. Here it is data, so a
- * consumer can re-point a cell, scope a change to a subtree, or add an intent
- * the library never shipped.
+ * This is the mapping from `variant` to a colour. It used to live in
+ * `compoundVariants` inside Badge.tsx, where it was compiled into class-name
+ * literals and no consumer could reach it. Here it is data, so a consumer can
+ * re-point a cell, scope a change to a subtree, or add a variant the library
+ * never shipped. Each cell paints with the intent slots from
+ * src/theming/intents.css, so every variant works in every intent.
  *
  * The grammar is `--badge-{context}`, context one of bg, fg, border, ring.
  * Note what is deliberately *absent*: intent and variant never appear in a
@@ -34,107 +35,25 @@
     --badge-ring: var(--border-brand);
   }
 
-  /* solid — a filled surface, with text read on top of it. The `fg-on-*`
-     partner is the pairing check-contrast.ts verifies, so these cells inherit
-     that guarantee rather than restating it. Border stays transparent (the
-     floor already sets it); only bg/fg vary. */
-  .badge[data-variant="solid"][data-intent="neutral"] {
-    --badge-bg: var(--bg-strong);
-    --badge-fg: var(--fg-on-strong);
+  /* solid — a filled surface, with text read on top of it. The slot pair is
+     a `bg-*` / `fg-on-*` partnership, which check-contrast.ts verifies. Border
+     stays transparent (the floor already sets it). */
+  .badge[data-variant="solid"] {
+    --badge-bg: var(--intent-solid-bg);
+    --badge-fg: var(--intent-solid-fg);
   }
 
-  .badge[data-variant="solid"][data-intent="brand"] {
-    --badge-bg: var(--bg-brand);
-    --badge-fg: var(--fg-on-brand);
+  /* soft — the family's tint, with its own text partner. */
+  .badge[data-variant="soft"] {
+    --badge-bg: var(--intent-tint-bg);
+    --badge-fg: var(--intent-tint-fg);
   }
 
-  .badge[data-variant="solid"][data-intent="danger"] {
-    --badge-bg: var(--bg-danger);
-    --badge-fg: var(--fg-on-danger);
-  }
-
-  .badge[data-variant="solid"][data-intent="success"] {
-    --badge-bg: var(--bg-success);
-    --badge-fg: var(--fg-on-success);
-  }
-
-  .badge[data-variant="solid"][data-intent="warning"] {
-    --badge-bg: var(--bg-warning);
-    --badge-fg: var(--fg-on-warning);
-  }
-
-  .badge[data-variant="solid"][data-intent="muted"] {
-    --badge-bg: var(--bg-subtle);
-    --badge-fg: var(--fg-subtle);
-  }
-
-  /* soft — a subdued surface, text read on top of it. Border stays
-     transparent, same as solid. */
-  .badge[data-variant="soft"][data-intent="neutral"] {
-    --badge-bg: var(--bg-subtle);
-    --badge-fg: var(--fg-normal);
-  }
-
-  .badge[data-variant="soft"][data-intent="brand"] {
-    --badge-bg: var(--bg-brand-subtle);
-    --badge-fg: var(--fg-on-brand-subtle);
-  }
-
-  .badge[data-variant="soft"][data-intent="danger"] {
-    --badge-bg: var(--bg-danger-subtle);
-    --badge-fg: var(--fg-on-danger-subtle);
-  }
-
-  .badge[data-variant="soft"][data-intent="success"] {
-    --badge-bg: var(--bg-success-subtle);
-    --badge-fg: var(--fg-on-success-subtle);
-  }
-
-  .badge[data-variant="soft"][data-intent="warning"] {
-    --badge-bg: var(--bg-warning-subtle);
-    --badge-fg: var(--fg-on-warning-subtle);
-  }
-
-  .badge[data-variant="soft"][data-intent="muted"] {
-    --badge-bg: var(--bg-subtle);
-    --badge-fg: var(--fg-subtle);
-  }
-
-  /* outline — a resting surface (bg-normal, shared across every intent) with
-     the text and border colour carrying the intent. `neutral` and `muted`
-     both land on `border-normal`, but differ in foreground, so they stay
-     separate cells rather than merged into one selector list. */
+  /* outline — a resting surface shared across every intent, with the text and
+     border carrying the family. */
   .badge[data-variant="outline"] {
     --badge-bg: var(--bg-normal);
-  }
-
-  .badge[data-variant="outline"][data-intent="neutral"] {
-    --badge-border: var(--border-normal);
-    --badge-fg: var(--fg-normal);
-  }
-
-  .badge[data-variant="outline"][data-intent="brand"] {
-    --badge-border: var(--border-brand);
-    --badge-fg: var(--fg-brand);
-  }
-
-  .badge[data-variant="outline"][data-intent="danger"] {
-    --badge-border: var(--border-danger);
-    --badge-fg: var(--fg-danger);
-  }
-
-  .badge[data-variant="outline"][data-intent="success"] {
-    --badge-border: var(--border-success);
-    --badge-fg: var(--fg-success);
-  }
-
-  .badge[data-variant="outline"][data-intent="warning"] {
-    --badge-border: var(--border-warning);
-    --badge-fg: var(--fg-warning);
-  }
-
-  .badge[data-variant="outline"][data-intent="muted"] {
-    --badge-border: var(--border-normal);
-    --badge-fg: var(--fg-subtle);
+    --badge-border: var(--intent-border);
+    --badge-fg: var(--intent-fg);
   }
 }

package/src/components/Badge/index.ts

@@ -5,6 +5,5 @@ export {
   type BadgeProps,
   type BadgeVariant,
   type BadgeVariantName,
-  badgeRecipe,
   badgeVariants,
 } from "./Badge";

package/src/components/Button/Button.tsx

@@ -8,7 +8,7 @@ import { Slot } from "../../internal/Slot";
  *
  * Every colour reads a `--button-*` component token whose value is decided by
  * src/components/Button/button.recipe.css. That file is the mapping from
- * `(variant, intent, state)` to a semantic token — the layer that used to be
+ * `(variant, state)` to the intent slots — the layer that used to be
  * `compoundVariants` here, where it was compiled into class-name literals and
  * unreachable from outside. Nothing in this file names a colour, which is the
  * point: the semantics are now configurable without a release.
@@ -36,7 +36,7 @@ const buttonVariants = cva(
 );
 
 /**
- * The non-colour half of `variant` — border width, elevation, underline.
+ * The non-colour half of `variant` — border width, elevation.
  *
  * A plain lookup rather than a CVA variant so an unrecognised variant stays a
  * legal value that contributes no structure, leaving a consumer's CSS free to
@@ -46,9 +46,15 @@ const variantStructure: Record<string, string> = {
   solid: "shadow",
   outline: "border shadow-xs",
   ghost: "",
-  link: "underline-offset-4 hover:underline",
 };
 
+/**
+ * `inline` — inline text, no button box. Not a variant: it is different
+ * geometry, not a quieter fill, so it replaces the box rather than joining the
+ * variant axis. The size's text scale stays; its height and padding go.
+ */
+const inlineGeometry = "h-auto px-0 py-0 underline-offset-4 hover:underline";
+
 /**
  * Squares the box at whatever size is set, and drops the horizontal padding.
  *
@@ -72,49 +78,16 @@ const iconOnlyGeometry: Record<string, string> = {
  * has never heard of, while still autocompleting the ones it ships.
  *
  * The closed unions are exported alongside, because widening a type gives up the
- * ability to narrow it downstream: once `string` is in the union,
- * `Exclude<ButtonVariant, "link">` can no longer remove `link`. ToggleGroup
- * relies on exactly that exclusion, so it builds on the closed names.
+ * ability to narrow it downstream: once `string` is in the union, an `Exclude`
+ * can no longer remove anything. Code that must narrow builds on the closed names.
  */
 type Loose<T extends string> = T | (string & {});
 
-export type ButtonVariantName = "solid" | "outline" | "ghost" | "link";
+export type ButtonVariantName = "solid" | "outline" | "ghost";
 export type ButtonIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
 export type ButtonVariant = Loose<ButtonVariantName>;
 export type ButtonIntent = Loose<ButtonIntentName>;
 
-export type ButtonRecipeProps = VariantProps<typeof buttonVariants> & {
-  variant?: ButtonVariant | undefined;
-  intent?: ButtonIntent | undefined;
-  /** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
-  brand?: string | undefined;
-  iconOnly?: boolean | undefined;
-  className?: string | undefined;
-};
-
-/**
- * The class string plus the attributes the recipe selects on.
- *
- * `data-brand` is only emitted when `brand` is set: `undefined` makes React
- * omit the attribute, so the element takes its brand from its surroundings.
- *
- * Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
- * data attributes are half the contract now, so anything reusing that look has
- * to emit them as well or it lands on the recipe's floor instead of a cell.
- */
-export function buttonRecipe({ variant = "solid", intent = "neutral", brand, size, iconOnly = false, className }: ButtonRecipeProps) {
-  return {
-    className: cn(
-      variantStructure[variant],
-      // `className` stays last so a caller still outranks the icon geometry.
-      buttonVariants({ size, className: cn(iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined, className) })
-    ),
-    "data-variant": variant,
-    "data-intent": intent,
-    "data-brand": brand,
-  };
-}
-
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof buttonVariants> & {
     variant?: ButtonVariant | undefined;
@@ -127,6 +100,8 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
     brand?: string | undefined;
     /** Square the button at its current size, for an icon with no label. */
     iconOnly?: boolean;
+    /** Render as inline text with no button box — a link-styled action. Ignores `variant`. */
+    inline?: boolean;
     asChild?: boolean;
     loading?: boolean;
   };
@@ -135,9 +110,9 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  * A single action the user can take.
  *
  * Appearance is three independent axes, so every combination is expressible:
- * `variant` is the fill and shape (`solid`, `outline`, `ghost`, `link`),
- * `intent` is what the action *means* (`brand` — the default — plus `neutral`,
- * `danger`, `success`, `warning`), and `size` is the height scale. Reach for
+ * `variant` is the treatment (`solid`, `outline`, `ghost`), `intent` is what
+ * the action *means* (`neutral` — the default — plus `brand`, `danger`,
+ * `success`, `warning`), and `size` is the height scale. Reach for
  * `intent="danger"` on a destructive action rather than a red `variant` — that
  * is the distinction that keeps "outline danger" possible.
  *
@@ -145,14 +120,17 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  * means on Badge and Message. A brand-coloured button is
  * `intent="brand"` — an affirmative choice, which is why `neutral` is the
  * default: omitting the prop means "no particular meaning", so it should not
- * quietly hand back the brand colour. Button used to spell brand as `neutral`
- * for `solid` and `link` while `outline` and `ghost` were already grey, so a
- * primary action now needs `intent="brand"` said out loud.
+ * quietly hand back the brand colour. A primary action says `intent="brand"`
+ * out loud.
+ *
+ * Colour is not decided here. Each variant resolves through a `--button-*`
+ * component token painted from the intent slots, so a consumer can re-point
+ * any cell — or add an intent this library never shipped — from their own
+ * stylesheet. See the Component tokens story below.
  *
- * Colour is not decided here. Each pairing resolves through a `--button-*`
- * component token, so a consumer can re-point any cell — or add an intent this
- * library never shipped — from their own stylesheet. See the Component tokens
- * story below.
+ * `inline` renders the action as inline text with no box — underline on
+ * hover, colour from `intent` — for an action that sits in a line of text or a
+ * toast. It is terminal: `variant` is ignored.
  *
  * `iconOnly` squares the box at whatever `size` is set and drops the
  * horizontal padding, for a button whose whole content is an icon — give it an
@@ -170,12 +148,40 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    { className, variant = "solid", intent = "neutral", brand, size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props },
+    {
+      className,
+      variant = "solid",
+      intent = "neutral",
+      brand,
+      size,
+      iconOnly = false,
+      inline = false,
+      asChild = false,
+      loading = false,
+      children,
+      disabled,
+      ...props
+    },
     ref
   ) => {
     const Comp = asChild ? Slot : "button";
+    const shape = inline ? inlineGeometry : iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined;
     return (
-      <Comp {...buttonRecipe({ variant, intent, brand, size, iconOnly, className })} ref={ref} disabled={disabled || loading} {...props}>
+      <Comp
+        // `className` stays last so a caller still outranks the shape geometry.
+        className={cn(inline ? undefined : variantStructure[variant], buttonVariants({ size, className: cn(shape, className) }))}
+        // What the recipe selects on. `inline` is terminal: it drops
+        // `data-variant`, so no variant cell can match. `data-brand` is
+        // `undefined` unless set, so React omits it and the element takes its
+        // brand from its surroundings.
+        data-variant={inline ? undefined : variant}
+        data-inline={inline ? "true" : undefined}
+        data-intent={intent}
+        data-brand={brand}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
         {loading ? (
           <>
             <svg className="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">