@sentropic/design-system-tokens 0.9.0 → 0.10.0

package/dist/anatomy.d.ts

@@ -0,0 +1,154 @@
+/**
+ * ComponentAnatomy — typed, versioned contract for theme-portable component
+ * anatomy (Phase 1 pilot, cf. spec §3.3).
+ *
+ * This is the *schema* (livrable n°1). It is deliberately a strict TypeScript
+ * type — NOT a free `TokenTree` — so that a theme cannot silently drift away
+ * from the shape a component reads. Every leaf is a CSS-ready string (a value
+ * or a `var(--st-*)` reference). When `createComponent` builds the anatomy from
+ * a theme's `semantic` + `foundation`, the result is checked against these
+ * types at compile time.
+ *
+ * Versioning: bump ANATOMY_VERSION (semver-ish) when the *shape* changes so the
+ * matrix / consumers can detect a schema move. Phase 2 rollout MUST NOT begin
+ * while this number is still moving (cf. spec §5).
+ */
+import type { TokenTree } from "./foundation.js";
+export declare const ANATOMY_VERSION = "1.2.0";
+/** A CSS-ready value: a literal or a `var(--st-*)` reference. */
+export type CssValue = string;
+/**
+ * Focus strategy = first-class primitive. `strategy` selects which CSS
+ * technique a shared mixin renders; the rest parametrise it.
+ * - `outline`: native `outline` + `outline-offset` (DSFR-like, offset ring)
+ * - `ring`:    `box-shadow` ring around the box (base default)
+ * - `inset`:   `box-shadow inset` drawn *inside* the box (Carbon)
+ * - `double`:  two-tone outline (outer + inner), DSFR accessibility ring
+ */
+export type FocusStrategy = "outline" | "ring" | "inset" | "double";
+export interface FocusAnatomy {
+    [key: string]: CssValue;
+    strategy: FocusStrategy;
+    width: CssValue;
+    offset: CssValue;
+    color: CssValue;
+    /** Inset distance used by the `inset` / `double` strategies. */
+    inset: CssValue;
+}
+/** Shape = corners + stroke. */
+export interface ShapeAnatomy {
+    [key: string]: CssValue;
+    radius: CssValue;
+    borderWidth: CssValue;
+    borderStyle: CssValue;
+}
+/**
+ * Field style = first-class primitive (v1.2.0). Distinguishes a *boxed* input
+ * (uniform stroke on all four sides, base Sent Tech) from a *filled-underline*
+ * input (filled background + a single bottom rule, no top/right/left stroke) —
+ * the real signature of DSFR « Champ de saisie » and Carbon « Text input ».
+ * Before this primitive, the input anatomy only carried a uniform border, so a
+ * filled-underline theme could not be rendered faithfully (it looked boxed).
+ *
+ * - `outline`:          4 equal borders (`border.subtle`), `fillBg = surface.default`.
+ * - `filled-underline`: filled `fillBg`, top/right/left = none, only `borderBottom`.
+ *
+ * The per-side borders are RESOLVED here (already combining width + style +
+ * color into a CSS-ready shorthand) so a component applies them verbatim with
+ * no per-theme branching.
+ */
+export type FieldStyle = "outline" | "filled-underline";
+export interface FieldAnatomy {
+    [key: string]: CssValue;
+    style: FieldStyle;
+    /** Field background fill (`surface.default` for outline; the fill tone otherwise). */
+    fillBg: CssValue;
+    /** Resolved per-side border shorthands (`<width> <style> <color>` or `none`). */
+    borderTop: CssValue;
+    borderRight: CssValue;
+    borderBottom: CssValue;
+    borderLeft: CssValue;
+}
+/** Density = the geometric envelope of a control for one size. */
+export interface DensityAnatomy {
+    [key: string]: CssValue | undefined;
+    controlHeight: CssValue;
+    paddingBlock: CssValue;
+    paddingInline: CssValue;
+    gap: CssValue;
+    minWidth: CssValue;
+    /**
+     * Font size for this size token (v1.1.0). Density is already per-size
+     * (sm/md/lg), so the label scale rides with the control geometry instead of
+     * a single typography size + per-size CSS escapes. `md` mirrors the role
+     * typography size; sm/lg carry the theme's smaller/larger label sizes.
+     */
+    fontSize?: CssValue;
+}
+/** Typography by role (self-contained, theme-portable). */
+export interface TypographyAnatomy {
+    [key: string]: CssValue | undefined;
+    family: CssValue;
+    size: CssValue;
+    weight: CssValue;
+    lineHeight: CssValue;
+    letterSpacing: CssValue;
+    textTransform: CssValue;
+    textDecoration: CssValue;
+    decorationThickness: CssValue;
+    decorationOffset: CssValue;
+    /**
+     * Decoration line in the hover state (v1.1.0). Source for
+     * `states.hover.decoration` on the link anatomy: DSFR/base stay `underline`
+     * (no-op), Carbon goes from `none` at rest to `underline` on hover.
+     */
+    textDecorationHover?: CssValue;
+}
+export interface IconAnatomy {
+    [key: string]: CssValue;
+    size: CssValue;
+    gap: CssValue;
+}
+/**
+ * Per-state delta. Every field is optional: a state only overrides what it
+ * actually changes. `transform` covers micro-interaction lifts; `opacity`
+ * covers disabled dimming; `decoration` covers underline toggles (links).
+ */
+export interface StateDelta {
+    [key: string]: CssValue | undefined;
+    bg?: CssValue;
+    border?: CssValue;
+    text?: CssValue;
+    decoration?: CssValue;
+    transform?: CssValue;
+    opacity?: CssValue;
+}
+export interface StatesAnatomy {
+    [key: string]: StateDelta | undefined;
+    hover?: StateDelta;
+    active?: StateDelta;
+    focus?: StateDelta;
+    disabled?: StateDelta;
+}
+/**
+ * The anatomy of one component. `shape`, `density`, `typography`, `focus`,
+ * `icon` and `states` describe the theme-portable form; the remaining keys are
+ * the color *roles* the component paints with. Color roles stay loosely keyed
+ * (each component owns its own role names) but the anatomy block is strict.
+ */
+export interface ComponentAnatomy {
+    [key: string]: TokenTree | undefined;
+    shape: ShapeAnatomy;
+    density?: {
+        sm?: Partial<DensityAnatomy>;
+        md?: Partial<DensityAnatomy>;
+        lg?: Partial<DensityAnatomy>;
+    };
+    typography: TypographyAnatomy;
+    focus: FocusAnatomy;
+    icon?: IconAnatomy;
+    states?: StatesAnatomy;
+    /** Field style (v1.2.0) — only meaningful on the input/control anatomy. */
+    field?: FieldAnatomy;
+}
+//# sourceMappingURL=anatomy.d.ts.map

package/dist/anatomy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"anatomy.d.ts","sourceRoot":"","sources":["../src/anatomy.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,eAAO,MAAM,eAAe,UAAU,CAAC;AAEvC,iEAAiE;AACjE,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAE9B;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,YAAY;IAI3B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,QAAQ,CAAC;IAChB,MAAM,EAAE,QAAQ,CAAC;IACjB,KAAK,EAAE,QAAQ,CAAC;IAChB,gEAAgE;IAChE,KAAK,EAAE,QAAQ,CAAC;CACjB;AAED,gCAAgC;AAChC,MAAM,WAAW,YAAY;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,MAAM,EAAE,QAAQ,CAAC;IACjB,WAAW,EAAE,QAAQ,CAAC;IACtB,WAAW,EAAE,QAAQ,CAAC;CACvB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,kBAAkB,CAAC;AAExD,MAAM,WAAW,YAAY;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;IAClB,sFAAsF;IACtF,MAAM,EAAE,QAAQ,CAAC;IACjB,iFAAiF;IACjF,SAAS,EAAE,QAAQ,CAAC;IACpB,WAAW,EAAE,QAAQ,CAAC;IACtB,YAAY,EAAE,QAAQ,CAAC;IACvB,UAAU,EAAE,QAAQ,CAAC;CACtB;AAED,kEAAkE;AAClE,MAAM,WAAW,cAAc;IAE7B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACpC,aAAa,EAAE,QAAQ,CAAC;IACxB,YAAY,EAAE,QAAQ,CAAC;IACvB,aAAa,EAAE,QAAQ,CAAC;IACxB,GAAG,EAAE,QAAQ,CAAC;IACd,QAAQ,EAAE,QAAQ,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,2DAA2D;AAC3D,MAAM,WAAW,iBAAiB;IAEhC,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACpC,MAAM,EAAE,QAAQ,CAAC;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,QAAQ,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC;IACrB,aAAa,EAAE,QAAQ,CAAC;IACxB,aAAa,EAAE,QAAQ,CAAC;IACxB,cAAc,EAAE,QAAQ,CAAC;IACzB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,gBAAgB,EAAE,QAAQ,CAAC;IAC3B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,QAAQ,CAAC;CAChC;AAED,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACpC,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IACtC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,UAAU,CAAC;CACvB;AAED;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACrC,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;QAC7B,EAAE,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;QAC7B,EAAE,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;KAC9B,CAAC;IACF,UAAU,EAAE,iBAAiB,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB"}

package/dist/anatomy.js

@@ -0,0 +1,17 @@
+/**
+ * ComponentAnatomy — typed, versioned contract for theme-portable component
+ * anatomy (Phase 1 pilot, cf. spec §3.3).
+ *
+ * This is the *schema* (livrable n°1). It is deliberately a strict TypeScript
+ * type — NOT a free `TokenTree` — so that a theme cannot silently drift away
+ * from the shape a component reads. Every leaf is a CSS-ready string (a value
+ * or a `var(--st-*)` reference). When `createComponent` builds the anatomy from
+ * a theme's `semantic` + `foundation`, the result is checked against these
+ * types at compile time.
+ *
+ * Versioning: bump ANATOMY_VERSION (semver-ish) when the *shape* changes so the
+ * matrix / consumers can detect a schema move. Phase 2 rollout MUST NOT begin
+ * while this number is still moving (cf. spec §5).
+ */
+export const ANATOMY_VERSION = "1.2.0";
+//# sourceMappingURL=anatomy.js.map

package/dist/anatomy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anatomy.js","sourceRoot":"","sources":["../src/anatomy.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC"}