@sixthshift/design-system 0.2.1 → 0.3.0

package/dist/date-time/now.d.ts

@@ -4,22 +4,23 @@
  * Functions that answer "what time/date is it right now?"
  */
 import { Temporal } from "@js-temporal/polyfill";
+import type { ISODate, ISODateTime, ISOInstant } from "./iso.js";
 /**
  * Get the current instant (point in time)
  */
 export declare function now(): Temporal.Instant;
 /**
- * Get the current instant as an ISO 8601 string
+ * Get the current instant as a canonical ISO 8601 string (UTC, `...Z`)
  */
-export declare function nowISO(): string;
+export declare function nowISO(): ISOInstant;
 /**
  * Get today's date in the system timezone
  */
 export declare function today(): Temporal.PlainDate;
 /**
- * Get today's date as an ISO 8601 string
+ * Get today's date as a canonical ISO 8601 string (`YYYY-MM-DD`)
  */
-export declare function todayISO(): string;
+export declare function todayISO(): ISODate;
 /**
  * Get the current time in the system timezone
  */
@@ -29,9 +30,9 @@ export declare function currentTime(): Temporal.PlainTime;
  */
 export declare function nowDateTime(): Temporal.PlainDateTime;
 /**
- * Get the current date/time as an ISO 8601 string (without timezone info)
+ * Get the current date/time as a canonical ISO 8601 string (no timezone)
  */
-export declare function nowDateTimeISO(): string;
+export declare function nowDateTimeISO(): ISODateTime;
 /**
  * Get the current zoned date/time in the system timezone
  */

package/dist/date-time/now.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"now.d.ts","sourceRoot":"","sources":["../../src/date-time/now.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;GAEG;AACH,wBAAgB,GAAG,IAAI,QAAQ,CAAC,OAAO,CAEtC;AAED;;GAEG;AACH,wBAAgB,MAAM,IAAI,MAAM,CAE/B;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,QAAQ,CAAC,SAAS,CAE1C;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,MAAM,CAEjC;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAAC,SAAS,CAEhD;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAAC,aAAa,CAEpD;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAEvC;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,QAAQ,CAAC,aAAa,CAEjD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC,aAAa,CAEtE"}
+{"version":3,"file":"now.d.ts","sourceRoot":"","sources":["../../src/date-time/now.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE9D;;GAEG;AACH,wBAAgB,GAAG,IAAI,QAAQ,CAAC,OAAO,CAEtC;AAED;;GAEG;AACH,wBAAgB,MAAM,IAAI,UAAU,CAEnC;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,QAAQ,CAAC,SAAS,CAE1C;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,OAAO,CAElC;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAAC,SAAS,CAEhD;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAAC,aAAa,CAEpD;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,QAAQ,CAAC,aAAa,CAEjD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC,aAAa,CAEtE"}

package/dist/date-time/now.js

@@ -11,7 +11,7 @@ export function now() {
     return Temporal.Now.instant();
 }
 /**
- * Get the current instant as an ISO 8601 string
+ * Get the current instant as a canonical ISO 8601 string (UTC, `...Z`)
  */
 export function nowISO() {
     return Temporal.Now.instant().toString();
@@ -23,7 +23,7 @@ export function today() {
     return Temporal.Now.plainDateISO();
 }
 /**
- * Get today's date as an ISO 8601 string
+ * Get today's date as a canonical ISO 8601 string (`YYYY-MM-DD`)
  */
 export function todayISO() {
     return Temporal.Now.plainDateISO().toString();
@@ -41,7 +41,7 @@ export function nowDateTime() {
     return Temporal.Now.plainDateTimeISO();
 }
 /**
- * Get the current date/time as an ISO 8601 string (without timezone info)
+ * Get the current date/time as a canonical ISO 8601 string (no timezone)
  */
 export function nowDateTimeISO() {
     return Temporal.Now.plainDateTimeISO().toString();

package/dist/date-time/now.js.map

@@ -1 +1 @@
-{"version":3,"file":"now.js","sourceRoot":"","sources":["../../src/date-time/now.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;GAEG;AACH,MAAM,UAAU,GAAG;IACjB,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;AAChC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,MAAM;IACpB,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC;AAC3C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,QAAQ,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;AACrC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,QAAQ,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,QAAQ,EAAE,CAAC;AAChD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,QAAQ,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;AACrC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,QAAQ,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,QAAQ,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,CAAC;AACpD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,QAAQ,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,QAAgB;IAC5C,OAAO,QAAQ,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AACjD,CAAC"}
+{"version":3,"file":"now.js","sourceRoot":"","sources":["../../src/date-time/now.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD;;GAEG;AACH,MAAM,UAAU,GAAG;IACjB,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;AAChC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,MAAM;IACpB,OAAO,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAgB,CAAC;AACzD,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,QAAQ,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;AACrC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,QAAQ,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,QAAQ,EAAa,CAAC;AAC3D,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,QAAQ,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;AACrC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,QAAQ,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,QAAQ,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,QAAQ,EAAiB,CAAC;AACnE,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,QAAQ,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAAC,QAAgB;IAC5C,OAAO,QAAQ,CAAC,GAAG,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AACjD,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 { BgKey, BgToken, BorderKey, BorderToken, ColorMode, ColorModeSchema, ColorToken, Context, CSSVarName, Feedback, FgKey, FgToken, HexValue, Hierarchy, HSLValue, Intent, Semantic, StandaloneToken, State, ThemeSchema, TokenKey, TokenName, Weight, } from "./schema.js";
+export { contexts, cssVar, feedback, hierarchy, hsl, 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,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,MAAM,EACN,QAAQ,EACR,eAAe,EACf,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,GACP,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,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, hsl, 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;AA4BH,OAAO,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,OAAO,GACR,MAAM,UAAU,CAAC"}

package/dist/theme/schema.d.ts

@@ -1,13 +1,34 @@
 /**
  * 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;
+/**
+ * HSL color value without wrapper, e.g., "239 84% 67%"
+ *
+ * @deprecated Tokens hold hex values and palette references, never bare HSL
+ * triples. Kept only so the export surface stays stable.
+ */
+export type HSLValue = string;
 /** Color mode */
 export type ColorMode = "light" | "dark";
 /** Contexts - what CSS property this affects */
@@ -22,44 +43,61 @@ 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 */
+/** @deprecated Use {@link BgToken}. */
+export type BgKey = BgToken;
+/** @deprecated Use {@link FgToken}. */
+export type FgKey = FgToken;
+/** @deprecated Use {@link BorderToken}. */
+export type BorderKey = BorderToken;
+/** @deprecated Use {@link TokenName}. */
+export type TokenKey = TokenName;
+/** 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 */
+/**
+ * Type-safe HSL wrapper for Tailwind
+ *
+ * @deprecated Token values are hex and palette references, so wrapping one in
+ * `hsl()` yields invalid CSS. Use {@link cssVar}.
+ */
 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,25 +31,27 @@ 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 */
+/**
+ * Type-safe HSL wrapper for Tailwind
+ *
+ * @deprecated Token values are hex and palette references, so wrapping one in
+ * `hsl()` yields invalid CSS. Use {@link cssVar}.
+ */
 export function hsl(token) {
     return `hsl(var(--${token}))`;
 }

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;AAoBH,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;AA0DxD,gFAAgF;AAChF,YAAY;AACZ,gFAAgF;AAEhF,kCAAkC;AAClC,MAAM,UAAU,MAAM,CAAC,KAAiB;IACtC,OAAO,SAAS,KAAK,GAAG,CAAC;AAC3B,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,GAAG,CAAC,KAAiB;IACnC,OAAO,aAAa,KAAK,IAAI,CAAC;AAChC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sixthshift/design-system",
-  "version": "0.2.1",
+  "version": "0.3.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"
@@ -365,21 +362,17 @@
   },
   "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 .",
@@ -441,7 +434,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,6 +1,6 @@
 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";
 
 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",
@@ -52,8 +52,9 @@ const badgeVariants = cva(
 
 export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
 
-export const Badge = ({ className, variant, intent, ...props }: BadgeProps) => {
-  return <span className={cn(badgeVariants({ variant, intent }), className)} {...props} />;
-};
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant, intent, ...props }, ref) => {
+  return <span ref={ref} className={cn(badgeVariants({ variant, intent }), className)} {...props} />;
+});
+Badge.displayName = "Badge";
 
 export { badgeVariants };

package/src/components/BarChart/BarChart.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@sixthshift/design-system/utils";
-import type * as React from "react";
+import * as React from "react";
 
 export type BarChartItem = {
   label: string;
@@ -17,35 +17,30 @@ export type BarChartProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const DEFAULT_COLORS = ["var(--fg-brand)", "var(--fg-success)", "var(--fg-warning)", "var(--fg-danger)", "var(--fg-subtle)"];
 
-export const BarChart = ({
-  data,
-  showValues = true,
-  maxValue: maxValueProp,
-  formatValue = (v) => String(v),
-  barHeight = 24,
-  className,
-  ...rest
-}: BarChartProps) => {
-  const maxValue = maxValueProp ?? Math.max(...data.map((d) => d.value), 1);
+export const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
+  ({ data, showValues = true, maxValue: maxValueProp, formatValue = (v) => String(v), barHeight = 24, className, ...rest }, ref) => {
+    const maxValue = maxValueProp ?? Math.max(...data.map((d) => d.value), 1);
 
-  return (
-    <div {...rest} className={cn("flex flex-col gap-2", className)}>
-      {data.map((item, i) => {
-        // Clamp both ends: a negative value would otherwise emit an invalid
-        // `width: -n%`, whose rendering is undefined.
-        const percent = Math.min(Math.max((item.value / maxValue) * 100, 0), 100);
-        const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+    return (
+      <div ref={ref} {...rest} className={cn("flex flex-col gap-2", className)}>
+        {data.map((item, i) => {
+          // Clamp both ends: a negative value would otherwise emit an invalid
+          // `width: -n%`, whose rendering is undefined.
+          const percent = Math.min(Math.max((item.value / maxValue) * 100, 0), 100);
+          const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
 
-        return (
-          <div key={item.label} className="flex items-center gap-3">
-            <span className="w-20 shrink-0 truncate text-right text-fg-subtle text-sm">{item.label}</span>
-            <div className="flex-1 overflow-hidden rounded-sm bg-bg-subtle" style={{ height: barHeight }}>
-              <div className="h-full rounded-sm transition-all duration-300" style={{ width: `${percent}%`, backgroundColor: color }} />
+          return (
+            <div key={item.label} className="flex items-center gap-3">
+              <span className="w-20 shrink-0 truncate text-right text-fg-subtle text-sm">{item.label}</span>
+              <div className="flex-1 overflow-hidden rounded-sm bg-bg-subtle" style={{ height: barHeight }}>
+                <div className="h-full rounded-sm transition-all duration-300" style={{ width: `${percent}%`, backgroundColor: color }} />
+              </div>
+              {showValues && <span className="w-12 shrink-0 text-right font-medium text-fg-normal text-sm">{formatValue(item.value)}</span>}
             </div>
-            {showValues && <span className="w-12 shrink-0 text-right font-medium text-fg-normal text-sm">{formatValue(item.value)}</span>}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+          );
+        })}
+      </div>
+    );
+  }
+);
+BarChart.displayName = "BarChart";