@sixthshift/design-system 0.8.0 → 0.9.0

package/src/components/ToggleGroup/toggleGroup.types.ts

@@ -1,9 +1,17 @@
 import type * as React from "react";
-import type { ButtonIntentName, ButtonVariantName } from "../Button/Button";
-import type { ToggleProps } from "../Toggle/Toggle";
 
-/** 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 */
@@ -23,24 +31,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/src/theme/linen/theme.css

@@ -1,12 +1,33 @@
 /*
  * Linen — the semantic layer (layer 1). This file is the theme.
  *
+ * What a theme defines, and so what any theme replacing this one must define:
+ *   - the radius scale, `--border-radius-{xs,sm,md,lg,xl}`, in a mode-free
+ *     `:root` block — miss a step and every corner on it renders square;
+ *   - the semantic colour tokens, the same names in both mode blocks.
+ * Everything else — recipes, intent slots, the Tailwind bridge — is
+ * theme-independent and comes from src/theming/tailwind.css.
+ *
  * Trade-off, accepted: the warm cast is a commitment. A consumer whose brand
  * fights the temperature replaces the neutral, not just the accent.
  */
 
 @import "./palette.css";
 
+/* Corner radius — five steps, `md` the middle and the default. Mode-free: a
+   corner is the same shape in light and dark. Tailwind's `rounded-*`
+   utilities read these (src/theming/tailwind.css), so a theme reshapes every
+   corner in the library here. The values are Tailwind's own, unchanged.
+   `rounded-none` and `rounded-full` are geometry, not steps, and are not
+   themed; `bun run check:radius` keeps component source on the scale. */
+:root {
+  --border-radius-xs: 0.125rem;
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 0.75rem;
+}
+
 :root:not([data-theme]),
 :root[data-theme="light"] {
   --bg-strong: var(--color-sand-800);

package/src/theming/intents.css

@@ -0,0 +1,112 @@
+/**
+ * Intent slots — each intent defined once, for every component.
+ *
+ * `intent` and `variant` are independent axes (docs/component-axes.md, rule 3),
+ * but a recipe that writes one cell per `(variant, intent)` pair couples them
+ * again: every component repeats the intent list, and adding an intent means
+ * editing every recipe. This layer sits between the semantic tokens and the
+ * recipes and breaks that product apart:
+ *
+ *   - here, each intent names its colour family once, as a fixed set of slots;
+ *   - in a recipe, each variant picks which slots it paints with.
+ *
+ * A new intent is one block below and every component picks it up. A new
+ * variant is one cell per component, and works in every intent.
+ *
+ * Slots are named for the treatment they serve, not for a weight:
+ *
+ *   --intent-solid-bg[-hovered|-pressed]   a filled surface in the family
+ *   --intent-solid-fg                      text read on that fill
+ *   --intent-tint-bg[-hovered|-pressed]    a light wash of the family
+ *   --intent-tint-fg[-pressed]             text read on that wash
+ *   --intent-fg                            the family's text on a resting surface
+ *   --intent-border                        the family's border
+ *
+ * The slots are declared on the element carrying `data-intent`, which every
+ * intent-bearing component renders on its own element. That matters twice over.
+ * A `var()` inside a custom property resolves on the element that declares it,
+ * so `--intent-solid-bg: var(--bg-brand)` sees that element's own `data-brand`
+ * mapping (see the Scoped brands docs). And each intent-bearing element resets
+ * the whole set, so a component never inherits its parent's intent — a
+ * neutral Badge inside a danger Message stays neutral.
+ *
+ * `@layer components`, like the recipes: a consumer's unlayered
+ * `[data-intent="info"] { … }` outranks everything here without `!important`.
+ */
+
+@layer components {
+  /* neutral — no colour family, the grey ramp. It is also the floor: this
+     selector matches any `data-intent`, so an intent a consumer has named but
+     not yet defined renders as neutral, legibly, rather than unstyled. The
+     `neutral` spelling is listed too so tooling can find it by name. */
+  [data-intent],
+  [data-intent="neutral"] {
+    --intent-solid-bg: var(--bg-strong);
+    --intent-solid-bg-hovered: var(--bg-strong-hovered);
+    --intent-solid-bg-pressed: var(--bg-strong-pressed);
+    --intent-solid-fg: var(--fg-on-strong);
+    --intent-tint-bg: var(--bg-subtle);
+    --intent-tint-bg-hovered: var(--bg-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-subtle-pressed);
+    --intent-tint-fg: var(--fg-normal);
+    --intent-tint-fg-pressed: var(--fg-normal);
+    --intent-fg: var(--fg-normal);
+    --intent-border: var(--border-normal);
+  }
+
+  [data-intent="brand"] {
+    --intent-solid-bg: var(--bg-brand);
+    --intent-solid-bg-hovered: var(--bg-brand-hovered);
+    --intent-solid-bg-pressed: var(--bg-brand-pressed);
+    --intent-solid-fg: var(--fg-on-brand);
+    --intent-tint-bg: var(--bg-brand-subtle);
+    --intent-tint-bg-hovered: var(--bg-brand-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-brand-subtle-pressed);
+    --intent-tint-fg: var(--fg-on-brand-subtle);
+    --intent-tint-fg-pressed: var(--fg-on-brand-subtle-pressed);
+    --intent-fg: var(--fg-brand);
+    --intent-border: var(--border-brand);
+  }
+
+  [data-intent="danger"] {
+    --intent-solid-bg: var(--bg-danger);
+    --intent-solid-bg-hovered: var(--bg-danger-hovered);
+    --intent-solid-bg-pressed: var(--bg-danger-pressed);
+    --intent-solid-fg: var(--fg-on-danger);
+    --intent-tint-bg: var(--bg-danger-subtle);
+    --intent-tint-bg-hovered: var(--bg-danger-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-danger-subtle-pressed);
+    --intent-tint-fg: var(--fg-on-danger-subtle);
+    --intent-tint-fg-pressed: var(--fg-on-danger-subtle-pressed);
+    --intent-fg: var(--fg-danger);
+    --intent-border: var(--border-danger);
+  }
+
+  [data-intent="success"] {
+    --intent-solid-bg: var(--bg-success);
+    --intent-solid-bg-hovered: var(--bg-success-hovered);
+    --intent-solid-bg-pressed: var(--bg-success-pressed);
+    --intent-solid-fg: var(--fg-on-success);
+    --intent-tint-bg: var(--bg-success-subtle);
+    --intent-tint-bg-hovered: var(--bg-success-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-success-subtle-pressed);
+    --intent-tint-fg: var(--fg-on-success-subtle);
+    --intent-tint-fg-pressed: var(--fg-on-success-subtle-pressed);
+    --intent-fg: var(--fg-success);
+    --intent-border: var(--border-success);
+  }
+
+  [data-intent="warning"] {
+    --intent-solid-bg: var(--bg-warning);
+    --intent-solid-bg-hovered: var(--bg-warning-hovered);
+    --intent-solid-bg-pressed: var(--bg-warning-pressed);
+    --intent-solid-fg: var(--fg-on-warning);
+    --intent-tint-bg: var(--bg-warning-subtle);
+    --intent-tint-bg-hovered: var(--bg-warning-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-warning-subtle-pressed);
+    --intent-tint-fg: var(--fg-on-warning-subtle);
+    --intent-tint-fg-pressed: var(--fg-on-warning-subtle-pressed);
+    --intent-fg: var(--fg-warning);
+    --intent-border: var(--border-warning);
+  }
+}

package/src/theming/tailwind.css

@@ -3,7 +3,8 @@
  * folder does NOT contain. A theme imports its own theme.css plus this file,
  * and is complete:
  *
- *   - the component recipes (layer 2), imported first: every component's
+ *   - the intent slots (intents.css), then the component recipes (layer 2),
+ *     imported first: every component's
  *     `*.recipe.css`, each inside `@layer components`. Adding a component
  *     adds one import line here; `check:recipes` fails the build on a recipe
  *     nobody imports, or an import pointing at nothing.
@@ -23,12 +24,16 @@
 
 @layer theme, base, components, utilities, overrides;
 
+/* The intent slots every recipe paints with — one block per intent. */
+@import "./intents.css";
+
 @import "../components/Button/button.recipe.css";
 @import "../components/Badge/badge.recipe.css";
 @import "../components/Message/message.recipe.css";
 @import "../components/Spinner/spinner.recipe.css";
 @import "../components/Tabs/tabs.recipe.css";
 @import "../components/Toggle/toggle.recipe.css";
+@import "../components/ToggleGroup/toggle-group.recipe.css";
 @import "../components/Input/input.recipe.css";
 @import "../components/Textarea/textarea.recipe.css";
 @import "../components/SearchInput/search-input.recipe.css";
@@ -46,6 +51,7 @@
 @import "../components/ImageGallery/image-gallery.recipe.css";
 @import "../components/DataTable/data-table.recipe.css";
 @import "../components/FileDropzone/file-dropzone.recipe.css";
+@import "../components/ProgressBar/progress-bar.recipe.css";
 
 /* =============================================================================
    3. TAILWIND THEME
@@ -62,6 +68,16 @@
   --color-white: #ffffff;
   --color-black: #000000;
 
+  /* Radius — the theme's five steps, and only those. Resetting Tailwind's own
+     scale first means `rounded-2xl` generates nothing instead of a corner no
+     theme can reach; `check:radius` turns that silence into a failure. */
+  --radius-*: initial;
+  --radius-xs: var(--border-radius-xs);
+  --radius-sm: var(--border-radius-sm);
+  --radius-md: var(--border-radius-md);
+  --radius-lg: var(--border-radius-lg);
+  --radius-xl: var(--border-radius-xl);
+
   /* Background */
   --color-bg-strong: var(--bg-strong);
   --color-bg-strong-hovered: var(--bg-strong-hovered);

package/src/typography/Code.tsx

@@ -3,6 +3,6 @@ import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 
 export const Code = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
-  <Text ref={ref} as="code" className={cn("rounded bg-bg-subtle px-1.5 py-0.5 font-mono text-sm", className)} {...props} />
+  <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";