@sixthshift/design-system 0.2.1 → 0.4.0

package/dist/internal/index.js

@@ -1,2 +1,4 @@
+export { PickerField } from "./PickerField.js";
+export { SegmentedField } from "./SegmentedField.js";
 export { Slot } from "./Slot.js";
 //# sourceMappingURL=index.js.map

package/dist/internal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/internal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAkE,MAAM,kBAAkB,CAAC;AAClH,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC"}

package/dist/theme/index.d.ts

@@ -1,8 +1,9 @@
 /**
  * Theme Exports
  *
- * Re-exports schema types and utilities for use in other packages.
+ * The token naming vocabulary and its types. Token *values* live in
+ * src/theme/tokens.css and are read from the stylesheet, not from here.
  */
-export type { BgKey, BgToken, BorderKey, BorderToken, ColorMode, ColorModeSchema, ColorToken, Context, CSSVarName, Feedback, FgKey, FgToken, HexValue, Hierarchy, HSLValue, Semantic, ThemeSchema, TokenKey, } from "./schema.js";
-export { contexts, cssVar, feedback, getAllTokenNames, getTokenNames, hierarchy, hsl, semantics, } from "./schema.js";
+export type { BgToken, BorderToken, ColorMode, ColorModeSchema, ColorToken, Context, CSSVarName, Feedback, FgToken, HexValue, Hierarchy, Intent, Semantic, StandaloneToken, State, ThemeSchema, TokenName, Weight, } from "./schema.js";
+export { contexts, cssVar, feedback, hierarchy, intents, semantics, standaloneTokens, states, weights, } from "./schema.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,YAAY,EACV,KAAK,EACL,OAAO,EACP,SAAS,EACT,WAAW,EACX,SAAS,EACT,eAAe,EACf,UAAU,EACV,OAAO,EACP,UAAU,EACV,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,GACT,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,SAAS,EACT,GAAG,EACH,SAAS,GACV,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,YAAY,EACV,OAAO,EACP,WAAW,EACX,SAAS,EACT,eAAe,EACf,UAAU,EACV,OAAO,EACP,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,EACf,KAAK,EACL,WAAW,EACX,SAAS,EACT,MAAM,GACP,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,MAAM,UAAU,CAAC"}

package/dist/theme/index.js

@@ -1,7 +1,8 @@
 /**
  * Theme Exports
  *
- * Re-exports schema types and utilities for use in other packages.
+ * The token naming vocabulary and its types. Token *values* live in
+ * src/theme/tokens.css and are read from the stylesheet, not from here.
  */
-export { contexts, cssVar, feedback, getAllTokenNames, getTokenNames, hierarchy, hsl, semantics, } from "./schema.js";
+export { contexts, cssVar, feedback, hierarchy, intents, semantics, standaloneTokens, states, weights, } from "./schema.js";
 //# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAuBH,OAAO,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,SAAS,EACT,GAAG,EACH,SAAS,GACV,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,MAAM,UAAU,CAAC"}

package/dist/theme/schema.d.ts

@@ -1,11 +1,25 @@
 /**
  * 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.
  */
-/** HSL color value without wrapper, e.g., "239 84% 67%" */
-export type HSLValue = string;
 /** Hex color value, e.g., "#6366f1" */
 export type HexValue = string;
 /** Color mode */
@@ -22,44 +36,46 @@ export type Feedback = (typeof feedback)[number];
 /** All semantics */
 export declare const semantics: readonly ["strong", "normal", "subtle", "success", "warning", "danger"];
 export type Semantic = (typeof semantics)[number];
-/** Background tokens: bg-{semantic} */
-export type BgToken = `bg-${Semantic}`;
-/** Foreground tokens: fg-{semantic} | fg-on-{semantic} */
-export type FgToken = `fg-${Semantic}` | `fg-on-${Semantic}`;
-/** Border tokens: border-{semantic} */
-export type BorderToken = `border-${Semantic}`;
+/** Every intent a token can carry, including the ones outside the grid above */
+export declare const intents: readonly ["strong", "normal", "subtle", "success", "warning", "danger", "brand", "overlay"];
+export type Intent = (typeof intents)[number];
+/** Weight modifiers, applied to brand and feedback intents */
+export declare const weights: readonly ["subtle", "strong"];
+export type Weight = (typeof weights)[number];
+/** Interaction states */
+export declare const states: readonly ["hovered", "pressed", "disabled"];
+export type State = (typeof states)[number];
+/** Tokens that are a category of one, outside the grid */
+export declare const standaloneTokens: readonly ["focus-ring"];
+export type StandaloneToken = (typeof standaloneTokens)[number];
+/** 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, including the `fg-on-*` pairs */
+export type FgToken = Stateful<`fg-${WeightedIntent}`> | Stateful<`fg-on-${WeightedIntent}`>;
+/** 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}`;
-/** 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;
-};
-/** Complete theme schema */
+/** A set of token values for one mode */
+export type ColorModeSchema = Partial<Record<TokenName, HexValue>>;
+/** A complete theme */
 export type ThemeSchema = {
-    $schema?: string;
     name: string;
     version: string;
     light: ColorModeSchema;
     dark: ColorModeSchema;
 };
-/** Get all token names for a context */
-export declare function getTokenNames(context: "bg"): BgToken[];
-export declare function getTokenNames(context: "fg"): FgToken[];
-export declare function getTokenNames(context: "border"): BorderToken[];
-/** Get all token names */
-export declare function getAllTokenNames(): ColorToken[];
 /** Type-safe CSS var reference */
 export declare function cssVar(token: ColorToken): string;
-/** Type-safe HSL wrapper for Tailwind */
-export declare function hsl(token: ColorToken): string;
+export {};
 //# sourceMappingURL=schema.d.ts.map

package/dist/theme/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/theme/schema.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,2DAA2D;AAC3D,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,uCAAuC;AACvC,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B,iBAAiB;AACjB,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAMzC,gDAAgD;AAChD,eAAO,MAAM,QAAQ,iCAAkC,CAAC;AACxD,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,0CAA0C;AAC1C,eAAO,MAAM,SAAS,yCAA0C,CAAC;AACjE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnD,mCAAmC;AACnC,eAAO,MAAM,QAAQ,2CAA4C,CAAC;AAClE,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,oBAAoB;AACpB,eAAO,MAAM,SAAS,yEAAuC,CAAC;AAC9D,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAMlD,uCAAuC;AACvC,MAAM,MAAM,OAAO,GAAG,MAAM,QAAQ,EAAE,CAAC;AAEvC,0DAA0D;AAC1D,MAAM,MAAM,OAAO,GAAG,MAAM,QAAQ,EAAE,GAAG,SAAS,QAAQ,EAAE,CAAC;AAE7D,uCAAuC;AACvC,MAAM,MAAM,WAAW,GAAG,UAAU,QAAQ,EAAE,CAAC;AAE/C,uBAAuB;AACvB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;AAEzD,+BAA+B;AAC/B,MAAM,MAAM,UAAU,GAAG,KAAK,UAAU,EAAE,CAAC;AAM3C,4BAA4B;AAC5B,MAAM,MAAM,KAAK,GAAG,MAAM,QAAQ,EAAE,CAAC;AAErC,4BAA4B;AAC5B,MAAM,MAAM,KAAK,GAAG,MAAM,QAAQ,EAAE,GAAG,SAAS,QAAQ,EAAE,CAAC;AAE3D,wBAAwB;AACxB,MAAM,MAAM,SAAS,GAAG,UAAU,QAAQ,EAAE,CAAC;AAE7C,qBAAqB;AACrB,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,CAAC;AAEjD,yDAAyD;AACzD,MAAM,MAAM,eAAe,GAAG;KAC3B,CAAC,IAAI,QAAQ,GAAG,QAAQ;CAC1B,CAAC;AAEF,4BAA4B;AAC5B,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC;CACvB,CAAC;AAMF,wCAAwC;AACxC,wBAAgB,aAAa,CAAC,OAAO,EAAE,IAAI,GAAG,OAAO,EAAE,CAAC;AACxD,wBAAgB,aAAa,CAAC,OAAO,EAAE,IAAI,GAAG,OAAO,EAAE,CAAC;AACxD,wBAAgB,aAAa,CAAC,OAAO,EAAE,QAAQ,GAAG,WAAW,EAAE,CAAC;AAYhE,0BAA0B;AAC1B,wBAAgB,gBAAgB,IAAI,UAAU,EAAE,CAE/C;AAED,kCAAkC;AAClC,wBAAgB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAEhD;AAED,yCAAyC;AACzC,wBAAgB,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAE7C"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/theme/schema.ts"],"names":[],"mappings":"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"}

package/dist/theme/schema.js

@@ -1,11 +1,27 @@
 /**
  * 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.
  */
 // =============================================================================
-// TOKEN STRUCTURE
+// VOCABULARY
 // =============================================================================
 /** Contexts - what CSS property this affects */
 export const contexts = ["bg", "fg", "border"];
@@ -15,26 +31,19 @@ export const hierarchy = ["strong", "normal", "subtle"];
 export const feedback = ["success", "warning", "danger"];
 /** All semantics */
 export const semantics = [...hierarchy, ...feedback];
-export function getTokenNames(context) {
-    switch (context) {
-        case "bg":
-            return semantics.map((s) => `bg-${s}`);
-        case "fg":
-            return [...semantics.map((s) => `fg-${s}`), ...semantics.map((s) => `fg-on-${s}`)];
-        case "border":
-            return semantics.map((s) => `border-${s}`);
-    }
-}
-/** Get all token names */
-export function getAllTokenNames() {
-    return [...getTokenNames("bg"), ...getTokenNames("fg"), ...getTokenNames("border")];
-}
+/** Every intent a token can carry, including the ones outside the grid above */
+export const intents = [...semantics, "brand", "overlay"];
+/** Weight modifiers, applied to brand and feedback intents */
+export const weights = ["subtle", "strong"];
+/** Interaction states */
+export const states = ["hovered", "pressed", "disabled"];
+/** Tokens that are a category of one, outside the grid */
+export const standaloneTokens = ["focus-ring"];
+// =============================================================================
+// UTILITIES
+// =============================================================================
 /** Type-safe CSS var reference */
 export function cssVar(token) {
     return `var(--${token})`;
 }
-/** Type-safe HSL wrapper for Tailwind */
-export function hsl(token) {
-    return `hsl(var(--${token}))`;
-}
 //# sourceMappingURL=schema.js.map

package/dist/theme/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../src/theme/schema.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,gFAAgF;AAChF,kBAAkB;AAClB,gFAAgF;AAEhF,gDAAgD;AAChD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAU,CAAC;AAGxD,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAGjE,mCAAmC;AACnC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAGlE,oBAAoB;AACpB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC;AA4D9D,MAAM,UAAU,aAAa,CAAC,OAAgB;IAC5C,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,IAAI;YACP,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAa,CAAC,CAAC;QACpD,KAAK,IAAI;YACP,OAAO,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAa,CAAC,EAAE,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,EAAa,CAAC,CAAC,CAAC;QAC3G,KAAK,QAAQ;YACX,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,EAAiB,CAAC,CAAC;IAC9D,CAAC;AACH,CAAC;AAED,0BAA0B;AAC1B,MAAM,UAAU,gBAAgB;IAC9B,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AACtF,CAAC;AAED,kCAAkC;AAClC,MAAM,UAAU,MAAM,CAAC,KAAiB;IACtC,OAAO,SAAS,KAAK,GAAG,CAAC;AAC3B,CAAC;AAED,yCAAyC;AACzC,MAAM,UAAU,GAAG,CAAC,KAAiB;IACnC,OAAO,aAAa,KAAK,IAAI,CAAC;AAChC,CAAC"}
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../src/theme/schema.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAYH,gFAAgF;AAChF,aAAa;AACb,gFAAgF;AAEhF,gDAAgD;AAChD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAU,CAAC;AAGxD,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAGjE,mCAAmC;AACnC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAGlE,oBAAoB;AACpB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAU,CAAC;AAG9D,gFAAgF;AAChF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,GAAG,SAAS,EAAE,OAAO,EAAE,SAAS,CAAU,CAAC;AAGnE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAGrD,yBAAyB;AACzB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAU,CAAC;AAGlE,0DAA0D;AAC1D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,YAAY,CAAU,CAAC;AAiDxD,gFAAgF;AAChF,YAAY;AACZ,gFAAgF;AAEhF,kCAAkC;AAClC,MAAM,UAAU,MAAM,CAAC,KAAiB;IACtC,OAAO,SAAS,KAAK,GAAG,CAAC;AAC3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sixthshift/design-system",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Personal design system - tokens, theme, and component library",
   "license": "MIT",
   "publishConfig": {
@@ -29,7 +29,6 @@
   "files": [
     "src",
     "dist",
-    "tailwind.config.ts",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
     "!src/**/__tests__",
@@ -39,13 +38,11 @@
     "!src/testing"
   ],
   "exports": {
-    "./styles.css": "./dist/styles.css",
-    "./theme.css": "./dist/theme.generated.css",
+    "./theme.css": "./src/theme/tokens.css",
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.js"
     },
-    "./tailwind.config": "./tailwind.config.ts",
     "./utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
@@ -106,10 +103,6 @@
       "types": "./dist/components/Badge/index.d.ts",
       "import": "./dist/components/Badge/index.js"
     },
-    "./color-dot": {
-      "types": "./dist/components/ColorDot/index.d.ts",
-      "import": "./dist/components/ColorDot/index.js"
-    },
     "./tag-chip": {
       "types": "./dist/components/TagChip/index.d.ts",
       "import": "./dist/components/TagChip/index.js"
@@ -122,42 +115,18 @@
       "types": "./dist/components/Field/index.d.ts",
       "import": "./dist/components/Field/index.js"
     },
-    "./breadcrumb": {
-      "types": "./dist/components/Breadcrumb/index.d.ts",
-      "import": "./dist/components/Breadcrumb/index.js"
-    },
     "./card": {
       "types": "./dist/components/Card/index.d.ts",
       "import": "./dist/components/Card/index.js"
     },
-    "./avatar": {
-      "types": "./dist/components/Avatar/index.d.ts",
-      "import": "./dist/components/Avatar/index.js"
-    },
     "./separator": {
       "types": "./dist/components/Separator/index.d.ts",
       "import": "./dist/components/Separator/index.js"
     },
-    "./skeleton": {
-      "types": "./dist/components/Skeleton/index.d.ts",
-      "import": "./dist/components/Skeleton/index.js"
-    },
     "./spinner": {
       "types": "./dist/components/Spinner/index.d.ts",
       "import": "./dist/components/Spinner/index.js"
     },
-    "./stats-card": {
-      "types": "./dist/components/StatsCard/index.d.ts",
-      "import": "./dist/components/StatsCard/index.js"
-    },
-    "./metric-list": {
-      "types": "./dist/components/MetricList/index.d.ts",
-      "import": "./dist/components/MetricList/index.js"
-    },
-    "./empty-state": {
-      "types": "./dist/components/EmptyState/index.d.ts",
-      "import": "./dist/components/EmptyState/index.js"
-    },
     "./text": {
       "types": "./dist/components/Text/index.d.ts",
       "import": "./dist/components/Text/index.js"
@@ -234,10 +203,6 @@
       "types": "./dist/components/SearchInput/index.d.ts",
       "import": "./dist/components/SearchInput/index.js"
     },
-    "./pagination": {
-      "types": "./dist/components/Pagination/index.d.ts",
-      "import": "./dist/components/Pagination/index.js"
-    },
     "./code-editor": {
       "types": "./dist/components/Code/Editor/index.d.ts",
       "import": "./dist/components/Code/Editor/index.js"
@@ -246,14 +211,6 @@
       "types": "./dist/components/Code/Workspace/index.d.ts",
       "import": "./dist/components/Code/Workspace/index.js"
     },
-    "./nav-side": {
-      "types": "./dist/components/NavSide/index.d.ts",
-      "import": "./dist/components/NavSide/index.js"
-    },
-    "./nav-bottom": {
-      "types": "./dist/components/NavBottom/index.d.ts",
-      "import": "./dist/components/NavBottom/index.js"
-    },
     "./heading": {
       "types": "./dist/typography/Heading.d.ts",
       "import": "./dist/typography/Heading.js"
@@ -357,29 +314,21 @@
     "./bar-chart": {
       "types": "./dist/components/BarChart/index.d.ts",
       "import": "./dist/components/BarChart/index.js"
-    },
-    "./heat-map": {
-      "types": "./dist/components/HeatMap/index.d.ts",
-      "import": "./dist/components/HeatMap/index.js"
     }
   },
   "scripts": {
     "prepare": "bun run build",
-    "build": "bun run clean:dist && bun run build:js && bun run build:theme && bun run build:css && bun run scripts/check-exports.ts",
+    "build": "bun run clean:dist && bun run build:js && bun run scripts/check-exports.ts",
     "build:js": "tsc -p tsconfig.build.json && bun run scripts/fix-extensions.ts",
-    "build:theme": "bun run scripts/generate-theme.ts -i src/theme/theme.json -p src/theme/palette.json -t src/theme/typography.json -o dist/theme.generated.css",
-    "build:css": "tailwindcss -i src/styles/base.css -o dist/styles.css --minify",
-    "dev": "bun run dev:css & bun run dev:theme",
-    "dev:css": "tailwindcss -i src/styles/base.css -o dist/styles.css --watch",
-    "dev:theme": "bun run scripts/watch-theme.ts",
-    "storybook": "storybook dev -p 6006 --no-open",
-    "build-storybook": "storybook build",
+    "dev": "storybook dev -p 6006 --no-open",
+    "build:storybook": "storybook build",
     "test": "vitest run --project unit --project date-time --reporter=dot",
     "test:verbose": "vitest run --project unit --project date-time",
     "test:watch": "vitest --project unit --project date-time",
     "test:visual": "vitest run --project visual",
     "test:visual:update": "vitest run --project visual --update",
-    "test:stories": "vitest run --project storybook",
+    "test:stories": "vitest run --project storybook --project storybook-dark",
+    "test:stories:dark": "vitest run --project storybook-dark",
     "test:ui": "bunx vitest --ui",
     "type-check": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.test.json",
     "lint": "biome lint .",
@@ -388,6 +337,8 @@
     "format:check": "biome format .",
     "check": "biome check .",
     "check:fix": "biome check --write .",
+    "check:recipes": "bun run scripts/check-recipes.ts",
+    "check:contrast": "bun run scripts/check-contrast.ts",
     "clean": "rm -rf dist node_modules *.tsbuildinfo",
     "clean:dist": "rm -rf dist"
   },
@@ -441,7 +392,8 @@
     "monaco-editor": "^0.55.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@fontsource-variable/inter": {

package/src/components/Badge/Badge.tsx

@@ -1,59 +1,97 @@
 import { cn } from "@sixthshift/design-system/utils";
 import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * as React from "react";
 
+/**
+ * Geometry and behaviour only.
+ *
+ * Every colour reads a `--badge-*` component token whose value is decided by
+ * src/theme/recipes/badge.css. That file is the mapping from
+ * `(variant, intent)` to a semantic token — 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.
+ */
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-brand focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        solid: "border-transparent shadow",
-        soft: "border-transparent",
-        outline: "",
-      },
-      intent: {
-        neutral: "",
-        primary: "",
-        danger: "",
-        success: "",
-        warning: "",
-        muted: "",
-      },
-    },
-    compoundVariants: [
-      // Solid variants
-      { variant: "solid", intent: "neutral", className: "bg-bg-strong text-fg-on-strong" },
-      { variant: "solid", intent: "primary", className: "bg-bg-brand text-fg-on-brand" },
-      { variant: "solid", intent: "danger", className: "bg-bg-danger text-fg-on-danger" },
-      { variant: "solid", intent: "success", className: "bg-bg-success text-fg-on-success" },
-      { variant: "solid", intent: "warning", className: "bg-bg-warning text-fg-on-warning" },
-      { variant: "solid", intent: "muted", className: "bg-bg-subtle text-fg-subtle" },
-      // Soft variants
-      { variant: "soft", intent: "neutral", className: "bg-bg-subtle text-fg-normal" },
-      { variant: "soft", intent: "primary", className: "bg-bg-brand-subtle text-fg-on-brand-subtle" },
-      { variant: "soft", intent: "danger", className: "bg-bg-danger-subtle text-fg-on-danger-subtle" },
-      { variant: "soft", intent: "success", className: "bg-bg-success-subtle text-fg-on-success-subtle" },
-      { variant: "soft", intent: "warning", className: "bg-bg-warning-subtle text-fg-on-warning-subtle" },
-      { variant: "soft", intent: "muted", className: "bg-bg-subtle text-fg-subtle" },
-      // Outline variants
-      { variant: "outline", intent: "neutral", className: "border-border-normal bg-bg-normal text-fg-normal" },
-      { variant: "outline", intent: "primary", className: "border-border-brand bg-bg-normal text-fg-brand" },
-      { variant: "outline", intent: "danger", className: "border-border-danger bg-bg-normal text-fg-danger" },
-      { variant: "outline", intent: "success", className: "border-border-success bg-bg-normal text-fg-success" },
-      { variant: "outline", intent: "warning", className: "border-border-warning bg-bg-normal text-fg-warning" },
-      { variant: "outline", intent: "muted", className: "border-border-normal bg-bg-normal text-fg-subtle" },
-    ],
-    defaultVariants: {
-      variant: "solid",
-      intent: "primary",
-    },
-  }
+  // One literal, deliberately: `useSortedClasses --unsafe` strips the trailing
+  // 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: {} }
 );
 
-export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
+/**
+ * The non-colour half of `variant` — elevation only, for Badge. 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
+ * define it. `intent` needs no equivalent: it was never anything but colour.
+ */
+const variantStructure: Record<string, string> = {
+  solid: "shadow",
+  soft: "",
+  outline: "",
+};
+
+/**
+ * Widened deliberately. Adding a variant or an intent is a CSS change in the
+ * consuming app, not a release here — so the type has to admit values this
+ * file has never heard of, while still autocompleting the ones it ships.
+ */
+type Loose<T extends string> = T | (string & {});
 
-export const Badge = ({ className, variant, intent, ...props }: BadgeProps) => {
-  return <span className={cn(badgeVariants({ variant, intent }), className)} {...props} />;
+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";
+export type BadgeVariant = Loose<BadgeVariantName>;
+export type BadgeIntent = Loose<BadgeIntentName>;
+
+export type BadgeRecipeProps = VariantProps<typeof badgeVariants> & {
+  variant?: BadgeVariant | undefined;
+  intent?: BadgeIntent | undefined;
+  className?: string | undefined;
 };
 
+/**
+ * The class string plus the two attributes the recipe selects on.
+ */
+export function badgeRecipe({ variant = "solid", intent = "brand", className }: BadgeRecipeProps) {
+  return {
+    className: cn(variantStructure[variant], badgeVariants({ className })),
+    "data-variant": variant,
+    "data-intent": intent,
+  };
+}
+
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+  variant?: BadgeVariant | undefined;
+  intent?: BadgeIntent | 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.
+ * 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/theme/recipes/badge.css), the
+ * same seam Button uses, so a consumer can re-point a cell without a
+ * release.
+ */
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant = "solid", intent = "brand", ...props }, ref) => {
+  return <span ref={ref} {...badgeRecipe({ variant, intent, className })} {...props} />;
+});
+Badge.displayName = "Badge";
+
 export { badgeVariants };

package/src/components/Badge/index.ts

@@ -1 +1,10 @@
-export { Badge, type BadgeProps, badgeVariants } from "./Badge";
+export {
+  Badge,
+  type BadgeIntent,
+  type BadgeIntentName,
+  type BadgeProps,
+  type BadgeVariant,
+  type BadgeVariantName,
+  badgeRecipe,
+  badgeVariants,
+} from "./Badge";