@sixthshift/design-system 0.2.1 → 0.4.0

package/src/theme/recipes/tabs.css

@@ -0,0 +1,41 @@
+/**
+ * TabsTrigger recipe — the component-token layer for TabsTrigger.
+ *
+ * This is the mapping from `selected` to a semantic token. It used to live in
+ * the two branches of a `cva` `selected` variant inside TabsTrigger.tsx,
+ * compiled into class-name literals and unreachable from outside. Here it is
+ * data, so a consumer can re-point a cell or scope a change to a subtree.
+ *
+ * The grammar is `--tabs-trigger-{context}[-{state}]` — the same `context`
+ * and `state` words the semantic layer uses (src/theme/schema.ts). `selected`
+ * never appears in a token name: it selects, via the `data-selected`
+ * attribute below. Putting it in the name (`--tabs-trigger-bg-selected`)
+ * would restore the combinatorial explosion this layer exists to remove.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css for the
+ * cascade reasoning.
+ */
+
+@layer components {
+  /* The floor, and also the unselected look: quiet text on no surface. A
+     trigger a consumer forgot to mark selected renders as a legible inactive
+     tab rather than something broken. */
+  .tabs-trigger {
+    --tabs-trigger-bg: transparent;
+    --tabs-trigger-bg-hovered: var(--bg-subtle-hovered);
+    --tabs-trigger-fg: var(--fg-subtle);
+    --tabs-trigger-fg-hovered: var(--fg-normal);
+    --tabs-trigger-ring: var(--focus-ring);
+  }
+
+  /* selected — a filled surface, reversed text on top of it. The old code
+     emitted no `hover:` classes at all for the selected branch, so the
+     hovered cells here point straight back at the resting ones: no shift on
+     hover, preserved rather than newly invented. */
+  .tabs-trigger[data-selected="true"] {
+    --tabs-trigger-bg: var(--bg-brand-pressed);
+    --tabs-trigger-bg-hovered: var(--tabs-trigger-bg);
+    --tabs-trigger-fg: var(--fg-on-brand-pressed);
+    --tabs-trigger-fg-hovered: var(--tabs-trigger-fg);
+  }
+}

package/src/theme/recipes/tag-chip.css

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css for the
+ * cascade reasoning.
+ */
+
+@layer components {
+  .tag-chip {
+    --tag-chip-namespace-fg: var(--fg-subtle);
+    --tag-chip-remove-fg: var(--fg-subtle);
+    --tag-chip-remove-fg-hovered: var(--fg-normal);
+    --tag-chip-remove-ring: var(--focus-ring);
+  }
+}

package/src/theme/recipes/textarea.css

@@ -0,0 +1,20 @@
+/**
+ * Textarea recipe — the component-token layer for Textarea.
+ *
+ * Same shape as input.css: no variant/intent axis, one floor block. See
+ * button.css's header for why `@layer components` is load-bearing.
+ *
+ * Textarea's background is literal `bg-transparent` in the markup, not a
+ * semantic token today — there is nothing in tier 2 to point a `--textarea-bg`
+ * at, so no such token is introduced here. Border, placeholder and focus ring
+ * are the tokens that existed as semantic classes before this file, and are
+ * the ones made overridable.
+ */
+
+@layer components {
+  .textarea {
+    --textarea-border: var(--border-normal);
+    --textarea-ring: var(--focus-ring);
+    --textarea-placeholder-fg: var(--fg-subtle);
+  }
+}

package/src/theme/recipes/toggle.css

@@ -0,0 +1,92 @@
+/**
+ * Toggle recipe — the pressed-state layer for Toggle and ToggleGroupItem.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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 {
+  /* 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);
+  }
+
+  /* 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);
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+}

package/src/theme/schema.ts

@@ -1,17 +1,30 @@
 /**
  * Theme Schema
  *
- * Type definitions for the PA design system token structure.
- * These types enforce the naming convention: {context}-{semantic}
+ * The naming convention for design tokens, as types and as data:
+ *
+ *   {context}-[on-]{intent}[-{weight}][-{state}]
+ *
+ * src/theme/tokens.css is the only place tokens are defined, and nothing derives
+ * TypeScript from it. These types describe the *shape* a token name can take
+ * rather than enumerating the names that happen to exist today, which is why the
+ * vocabulary below is the thing to edit when the system grows a new axis.
+ *
+ * The trade that makes explicit: the union is complete but permissive. Every real
+ * token is assignable, and a few combinations it accepts are not defined. Keeping
+ * this vocabulary and tokens.css describing the same system is a manual job — a
+ * token whose name falls outside the grid below is unnameable in TypeScript even
+ * though its utility compiles.
+ *
+ * To read a value, read the CSS: `var(--bg-brand)` in a stylesheet, or
+ * `getComputedStyle(document.documentElement).getPropertyValue("--bg-brand")`
+ * at runtime.
  */
 
 // =============================================================================
 // PRIMITIVES
 // =============================================================================
 
-/** HSL color value without wrapper, e.g., "239 84% 67%" */
-export type HSLValue = string;
-
 /** Hex color value, e.g., "#6366f1" */
 export type HexValue = string;
 
@@ -19,7 +32,7 @@ export type HexValue = string;
 export type ColorMode = "light" | "dark";
 
 // =============================================================================
-// TOKEN STRUCTURE
+// VOCABULARY
 // =============================================================================
 
 /** Contexts - what CSS property this affects */
@@ -38,49 +51,62 @@ export type Feedback = (typeof feedback)[number];
 export const semantics = [...hierarchy, ...feedback] as const;
 export type Semantic = (typeof semantics)[number];
 
+/** Every intent a token can carry, including the ones outside the grid above */
+export const intents = [...semantics, "brand", "overlay"] as const;
+export type Intent = (typeof intents)[number];
+
+/** Weight modifiers, applied to brand and feedback intents */
+export const weights = ["subtle", "strong"] as const;
+export type Weight = (typeof weights)[number];
+
+/** Interaction states */
+export const states = ["hovered", "pressed", "disabled"] as const;
+export type State = (typeof states)[number];
+
+/** Tokens that are a category of one, outside the grid */
+export const standaloneTokens = ["focus-ring"] as const;
+export type StandaloneToken = (typeof standaloneTokens)[number];
+
 // =============================================================================
-// TOKEN NAMES (derived types)
+// TOKEN NAMES
 // =============================================================================
 
-/** Background tokens: bg-{semantic} */
-export type BgToken = `bg-${Semantic}`;
+/** Intents that take a weight modifier — the hierarchy trio *is* the weight. */
+type Weightable = Exclude<Intent, Hierarchy>;
+
+/** `brand` | `brand-subtle` | `danger-strong` | ... */
+type WeightedIntent = Intent | `${Weightable}-${Weight}`;
+
+/** Any of the above, optionally in an interaction state */
+type Stateful<T extends string> = T | `${T}-${State}`;
+
+/** Background tokens */
+export type BgToken = Stateful<`bg-${WeightedIntent}`>;
 
-/** Foreground tokens: fg-{semantic} | fg-on-{semantic} */
-export type FgToken = `fg-${Semantic}` | `fg-on-${Semantic}`;
+/** Foreground tokens, including the `fg-on-*` pairs */
+export type FgToken = Stateful<`fg-${WeightedIntent}`> | Stateful<`fg-on-${WeightedIntent}`>;
 
-/** Border tokens: border-{semantic} */
-export type BorderToken = `border-${Semantic}`;
+/** Border tokens */
+export type BorderToken = Stateful<`border-${WeightedIntent}`>;
+
+/** Every token name the convention allows */
+export type TokenName = BgToken | FgToken | BorderToken | StandaloneToken;
 
 /** All color tokens */
-export type ColorToken = BgToken | FgToken | BorderToken;
+export type ColorToken = TokenName;
 
 /** CSS variable name format */
 export type CSSVarName = `--${ColorToken}`;
 
 // =============================================================================
-// THEME SCHEMA
+// THEME SHAPE
 // =============================================================================
 
-/** Background token keys */
-export type BgKey = `bg-${Semantic}`;
-
-/** Foreground token keys */
-export type FgKey = `fg-${Semantic}` | `fg-on-${Semantic}`;
-
-/** Border token keys */
-export type BorderKey = `border-${Semantic}`;
-
-/** All token keys */
-export type TokenKey = BgKey | FgKey | BorderKey;
-
-/** Color mode schema (light or dark) - flat structure */
-export type ColorModeSchema = {
-  [K in TokenKey]: HexValue;
-};
+/** A set of token values for one mode */
+export type ColorModeSchema = Partial<Record<TokenName, HexValue>>;
 
-/** Complete theme schema */
+/** A complete theme */
 export type ThemeSchema = {
-  $schema?: string;
   name: string;
   version: string;
   light: ColorModeSchema;
@@ -91,32 +117,7 @@ export type ThemeSchema = {
 // UTILITIES
 // =============================================================================
 
-/** Get all token names for a context */
-export function getTokenNames(context: "bg"): BgToken[];
-export function getTokenNames(context: "fg"): FgToken[];
-export function getTokenNames(context: "border"): BorderToken[];
-export function getTokenNames(context: Context): ColorToken[] {
-  switch (context) {
-    case "bg":
-      return semantics.map((s) => `bg-${s}` as BgToken);
-    case "fg":
-      return [...semantics.map((s) => `fg-${s}` as FgToken), ...semantics.map((s) => `fg-on-${s}` as FgToken)];
-    case "border":
-      return semantics.map((s) => `border-${s}` as BorderToken);
-  }
-}
-
-/** Get all token names */
-export function getAllTokenNames(): ColorToken[] {
-  return [...getTokenNames("bg"), ...getTokenNames("fg"), ...getTokenNames("border")];
-}
-
 /** Type-safe CSS var reference */
 export function cssVar(token: ColorToken): string {
   return `var(--${token})`;
 }
-
-/** Type-safe HSL wrapper for Tailwind */
-export function hsl(token: ColorToken): string {
-  return `hsl(var(--${token}))`;
-}