@trinityui/design-system 2.11.1 → 2.13.1

package/dist/components/AI/tokens.d.ts

@@ -1,23 +1,30 @@
 /**
  * AI Design Tokens
- * Consistent spacing, border radius, color, shadow, and typography tokens
- * for AI components.
+ * Consistent spacing, border radius, color, shadow, typography and motion
+ * tokens for AI components.
  *
- * All rgba values are derived from brand colors via the `alpha()` utility —
- * there is no direct hex/rgb literal in this file. When brand colors change
- * in `src/tokens.ts`, these tokens update automatically.
+ * The colors are a static light-mode facade over the AI color roles
+ * (`semanticTokens.colors.ai`, ADR-03): one color source, same values as
+ * before. They never change with the theme. Components read mode-aware,
+ * brand-aware roles through `useTrinityPalette().ai` or
+ * `getTrinityPalette(theme).ai` instead.
+ */
+/**
+ * Border radius values for AI components, as multiples of `theme.shape.borderRadius`.
+ *
+ * In `sx`, a numeric `borderRadius` multiplies the theme's shape radius, which is 8px in
+ * Trinity themes, so `sm: 1.5` renders 12px. Use {@link aiRadiusPx} for fixed pixel radii.
  */
-/** Standardized border radius values for AI components (MUI spacing units) */
 export declare const aiRadius: {
-    /** Extra small radius for tags, badges - 4px */
+    /** Extra small radius for tags, badges: 1 x shape radius (8px in Trinity themes) */
     readonly xs: 1;
-    /** Small radius for chips, small buttons - 6px */
+    /** Small radius for chips, small buttons: 1.5 x shape radius (12px in Trinity themes) */
     readonly sm: 1.5;
-    /** Medium radius for inputs, small cards - 8px */
+    /** Medium radius for inputs, small cards: 2 x shape radius (16px in Trinity themes) */
     readonly md: 2;
-    /** Large radius for cards, containers - 12px */
+    /** Large radius for cards, containers: 3 x shape radius (24px in Trinity themes) */
     readonly lg: 3;
-    /** Extra large radius for large cards, modals - 16px */
+    /** Extra large radius for large cards, modals: 4 x shape radius (32px in Trinity themes) */
     readonly xl: 4;
     /** Full pill shape - 9999px */
     readonly full: "9999px";
@@ -76,10 +83,19 @@ export declare const aiBoxShadow: {
     readonly popover: `0 8px 32px ${string}`;
 };
 /**
- * Standardized typography values for AI components. Components should reference
- * these named roles rather than hardcoding `variant` or `fontSize`. This keeps
- * AI surfaces visually consistent and makes future type-scale changes a single
- * edit rather than a grep-and-replace across ~20 files.
+ * Typography roles for AI components, each referencing semantic typography tokens (E-14,
+ * ADR-20 §5).
+ *
+ * **Variant first.** AI text takes its size, weight and line height from a Typography
+ * variant, so the presets' type scales reach it: `body2` for body text, `caption` for meta
+ * text, `subtitle2` for emphasis, `overline` for section labels. Use these roles only for
+ * text that no variant fits (`badge`, `code`, `numeric`, `metric`, and the legacy roles
+ * below), never a `fontSize` literal (docs/remediation/E-14-ai-type-map.md lists the sites
+ * still to migrate).
+ *
+ * **Colour is explicit.** A role never carries a colour, and AI text never inherits one from
+ * `caption` or `overline`: set `color: 'text.secondary'` (or a resolver role) next to the
+ * variant (docs/TOKEN_USAGE_RULES.md section 13).
  */
 export declare const aiTypography: {
     /** Tiny meta text — timestamps, source badges (11px) */
@@ -112,8 +128,75 @@ export declare const aiTypography: {
         readonly fontWeight: number;
         readonly lineHeight: number;
     };
+    /**
+     * Badge counts and status labels (10px, `dense.badge`, medium weight).
+     * @since 2.13.0
+     */
+    readonly badge: {
+        readonly fontSize: string;
+        readonly fontWeight: number;
+        readonly lineHeight: number;
+        readonly letterSpacing: string;
+    };
+    /**
+     * Inline code, tool names and identifiers: the `data.code` family at the caption size
+     * (12px). Replaces the `'monospace'` literals.
+     * @since 2.13.0
+     */
+    readonly code: {
+        readonly fontFamily: string;
+        readonly fontSize: string;
+        readonly fontWeight: number;
+        readonly lineHeight: number;
+    };
+    /**
+     * Numbers that line up in columns (tabular figures, `data.numeric`). Size comes from the
+     * variant it is combined with.
+     * @since 2.13.0
+     */
+    readonly numeric: {
+        readonly fontFamily: string;
+        readonly fontWeight: number;
+        readonly fontFeatureSettings: string;
+    };
+    /**
+     * A headline number (20px, `fontSize.xl`, tabular figures). Render it as a Typography with
+     * `data-type="metric"`, so a preset's metric styles apply: the role sets no font family,
+     * because an `sx` family would override the analytics preset's metric font.
+     * @since 2.13.0
+     */
+    readonly metric: {
+        readonly fontFeatureSettings: string;
+        readonly fontSize: string;
+        readonly fontWeight: number;
+        readonly lineHeight: number;
+    };
+};
+/**
+ * Motion roles for AI components, each a reference to `semanticTokens.motion` (E-13). Read
+ * timings from here or from the semantic tokens, never from literals (ADR-22-R7). Under
+ * reduced motion, loops stop and entrances become instant; the helpers that apply this are
+ * internal (`src/components/shared/motion.ts`).
+ *
+ * @since 2.13.0
+ */
+export declare const aiMotion: {
+    /** One cycle of a typing or streaming indicator. */
+    readonly typing: string;
+    /** One sweep of the AI loading shimmer. */
+    readonly shimmer: string;
+    /** A reasoning step, source list or panel expanding into view. */
+    readonly expand: {
+        readonly duration: string;
+        readonly easing: string;
+    };
 };
 export declare const aiTokens: {
+    /**
+     * Static light-mode gradients, coral to purple. For gradients that follow the theme mode and
+     * brand overrides, use `getTrinityPalette(theme).ai.gradient` (or `--trinity-ai-gradient-*`
+     * in CSS).
+     */
     readonly gradient: {
         readonly primary: `linear-gradient(180deg, ${string} 0%, ${string} 100%)`;
         readonly text: `linear-gradient(180deg, ${string} 0%, ${string} 100%)`;
@@ -126,25 +209,47 @@ export declare const aiTokens: {
         readonly presence: `linear-gradient(135deg, ${string} 0%, ${string} 35%, ${string} 65%, ${string} 100%)`;
         readonly presenceConic: `conic-gradient(from 180deg at 50% 50%, ${string}, ${string}, ${string}, ${string}, ${string})`;
     };
+    /**
+     * Static light-mode AI colors (a facade over `semanticTokens.colors.ai`). They do not follow
+     * the theme mode or brand overrides: components use `useTrinityPalette().ai` or
+     * `getTrinityPalette(theme).ai`.
+     */
     readonly colors: {
+        /** Static light value of `ai.primary`. Components: `useTrinityPalette().ai.primary`. */
         readonly aiPrimary: string;
+        /** Static light value of `ai.accent`. Components: `useTrinityPalette().ai.accent`. */
         readonly aiSecondary: string;
+        /** Static light value of `ai.surface`. Components: `useTrinityPalette().ai.surface`. */
         readonly aiBackground: string;
+        /**
+         * @deprecated Removed in v3.0. Use `useTrinityPalette().ai.surface` (resolves the dark
+         * value in dark mode) or, for the light emphasis use, `ai.badgeBackground`.
+         */
         readonly aiBackgroundDark: string;
+        /** Static light value of `ai.border`. Components: `useTrinityPalette().ai.border`. */
         readonly aiBorder: string;
+        /** @deprecated Removed in v3.0. Use `useTrinityPalette().ai.border`. */
         readonly aiBorderDark: string;
+        /** Static light value of `ai.surfaceHover`. Components: `useTrinityPalette().ai.surfaceHover`. */
         readonly aiHover: string;
+        /** @deprecated Removed in v3.0. Use `useTrinityPalette().ai.surfaceEmphasisHover`. */
         readonly aiHoverDark: string;
+        /** Static light gradient start (`ai.accent`). */
         readonly aiGradientStart: string;
+        /** Static light gradient end (`ai.primary`). */
         readonly aiGradientEnd: string;
         readonly aiPresenceBlue: string;
         readonly aiPresenceViolet: string;
         readonly aiPresencePurple: string;
         readonly aiPresenceCoral: string;
         readonly aiPresenceBase: string;
+        /** Static light value of `ai.badgeBackground`. Components: `useTrinityPalette().ai.badgeBackground`. */
         readonly sourceBadgeBg: string;
+        /** @deprecated Removed in v3.0. Use `useTrinityPalette().ai.badgeBackground`. */
         readonly sourceBadgeBgDark: string;
+        /** Static light value of `ai.typingIndicator`. Components: `useTrinityPalette().ai.typingIndicator`. */
         readonly typingDot: string;
+        /** @deprecated Removed in v3.0. Use `useTrinityPalette().ai.typingIndicator`. */
         readonly typingDotDark: string;
     };
     readonly boxShadow: {
@@ -192,17 +297,75 @@ export declare const aiTokens: {
             readonly fontWeight: number;
             readonly lineHeight: number;
         };
+        /**
+         * Badge counts and status labels (10px, `dense.badge`, medium weight).
+         * @since 2.13.0
+         */
+        readonly badge: {
+            readonly fontSize: string;
+            readonly fontWeight: number;
+            readonly lineHeight: number;
+            readonly letterSpacing: string;
+        };
+        /**
+         * Inline code, tool names and identifiers: the `data.code` family at the caption size
+         * (12px). Replaces the `'monospace'` literals.
+         * @since 2.13.0
+         */
+        readonly code: {
+            readonly fontFamily: string;
+            readonly fontSize: string;
+            readonly fontWeight: number;
+            readonly lineHeight: number;
+        };
+        /**
+         * Numbers that line up in columns (tabular figures, `data.numeric`). Size comes from the
+         * variant it is combined with.
+         * @since 2.13.0
+         */
+        readonly numeric: {
+            readonly fontFamily: string;
+            readonly fontWeight: number;
+            readonly fontFeatureSettings: string;
+        };
+        /**
+         * A headline number (20px, `fontSize.xl`, tabular figures). Render it as a Typography with
+         * `data-type="metric"`, so a preset's metric styles apply: the role sets no font family,
+         * because an `sx` family would override the analytics preset's metric font.
+         * @since 2.13.0
+         */
+        readonly metric: {
+            readonly fontFeatureSettings: string;
+            readonly fontSize: string;
+            readonly fontWeight: number;
+            readonly lineHeight: number;
+        };
+    };
+    /**
+     * Motion roles, references to `semanticTokens.motion` (E-13).
+     * @since 2.13.0
+     */
+    readonly motion: {
+        /** One cycle of a typing or streaming indicator. */
+        readonly typing: string;
+        /** One sweep of the AI loading shimmer. */
+        readonly shimmer: string;
+        /** A reasoning step, source list or panel expanding into view. */
+        readonly expand: {
+            readonly duration: string;
+            readonly easing: string;
+        };
     };
     readonly radius: {
-        /** Extra small radius for tags, badges - 4px */
+        /** Extra small radius for tags, badges: 1 x shape radius (8px in Trinity themes) */
         readonly xs: 1;
-        /** Small radius for chips, small buttons - 6px */
+        /** Small radius for chips, small buttons: 1.5 x shape radius (12px in Trinity themes) */
         readonly sm: 1.5;
-        /** Medium radius for inputs, small cards - 8px */
+        /** Medium radius for inputs, small cards: 2 x shape radius (16px in Trinity themes) */
         readonly md: 2;
-        /** Large radius for cards, containers - 12px */
+        /** Large radius for cards, containers: 3 x shape radius (24px in Trinity themes) */
         readonly lg: 3;
-        /** Extra large radius for large cards, modals - 16px */
+        /** Extra large radius for large cards, modals: 4 x shape radius (32px in Trinity themes) */
         readonly xl: 4;
         /** Full pill shape - 9999px */
         readonly full: "9999px";
@@ -245,5 +408,7 @@ export type AIRadiusPx = typeof aiRadiusPx;
 export type AISpacing = typeof aiSpacing;
 export type AIBoxShadow = typeof aiBoxShadow;
 export type AITypography = typeof aiTypography;
+/** @since 2.13.0 */
+export type AIMotion = typeof aiMotion;
 export type AITokens = typeof aiTokens;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/components/AI/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/components/AI/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AASH,8EAA8E;AAC9E,eAAO,MAAM,QAAQ;IACnB,gDAAgD;;IAEhD,kDAAkD;;IAElD,kDAAkD;;IAElD,gDAAgD;;IAEhD,wDAAwD;;IAExD,+BAA+B;;IAE/B,mBAAmB;;CAEX,CAAC;AAEX,4DAA4D;AAC5D,eAAO,MAAM,UAAU;IACrB,+BAA+B;;IAE/B,yBAAyB;;IAEzB,0BAA0B;;IAE1B,0BAA0B;;IAE1B,gCAAgC;;IAEhC,sBAAsB;;IAEtB,mBAAmB;;CAEX,CAAC;AAEX,oDAAoD;AACpD,eAAO,MAAM,SAAS;IACpB,0BAA0B;;IAE1B,0BAA0B;;IAE1B,4BAA4B;;IAE5B,6BAA6B;;IAE7B,2BAA2B;;IAE3B,iCAAiC;;CAEzB,CAAC;AAoBX;;;;GAIG;AACH,eAAO,MAAM,WAAW;IACtB,6EAA6E;;IAE7E,2EAA2E;;IAE3E,sEAAsE;;IAEtE,yDAAyD;;IAEzD,uDAAuD;;IAEvD,qDAAqD;;CAE7C,CAAC;AAMX;;;;;GAKG;AACH,eAAO,MAAM,YAAY;IACvB,wDAAwD;;;;;;IAMxD,4DAA4D;;;;;;IAM5D,wDAAwD;;;;;;IAExD,8EAA8E;;;;;;IAM9E,oEAAoE;;;;;;CAM5D,CAAC;AAMX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAzDnB,6EAA6E;;QAE7E,2EAA2E;;QAE3E,sEAAsE;;QAEtE,yDAAyD;;QAEzD,uDAAuD;;QAEvD,qDAAqD;;;;QAerD,wDAAwD;;;;;;QAMxD,4DAA4D;;;;;;QAM5D,wDAAwD;;;;;;QAExD,8EAA8E;;;;;;QAM9E,oEAAoE;;;;;;;;QAvHpE,gDAAgD;;QAEhD,kDAAkD;;QAElD,kDAAkD;;QAElD,gDAAgD;;QAEhD,wDAAwD;;QAExD,+BAA+B;;QAE/B,mBAAmB;;;;QAMnB,+BAA+B;;QAE/B,yBAAyB;;QAEzB,0BAA0B;;QAE1B,0BAA0B;;QAE1B,gCAAgC;;QAEhC,sBAAsB;;QAEtB,mBAAmB;;;;QAMnB,0BAA0B;;QAE1B,0BAA0B;;QAE1B,4BAA4B;;QAE5B,6BAA6B;;QAE7B,2BAA2B;;QAE3B,iCAAiC;;;CAqJzB,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC;AACvC,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC;AACzC,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC;AAC/C,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/components/AI/tokens.ts"],"names":[],"mappings":"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"}