@ds-mo/tokens 2.13.2 → 2.15.0

package/dist/agent.d.ts

@@ -0,0 +1,20 @@
+export interface TokenFamilyAgentEntry {
+  id: string;
+  status: 'experimental' | 'stable' | 'deprecated' | 'removed';
+  summary: string;
+  tokenPatterns: string[];
+  useWhen: string[];
+  avoidWhen: string[];
+  constraints: string[];
+}
+
+export interface TokenAgentManifest {
+  schemaVersion: '1.0.0';
+  package: '@ds-mo/tokens';
+  packageVersion: string;
+  kind: 'tokens';
+  entries: TokenFamilyAgentEntry[];
+}
+
+declare const manifest: TokenAgentManifest;
+export default manifest;

package/dist/agent.json

@@ -0,0 +1,80 @@
+{
+  "schemaVersion": "1.0.0",
+  "package": "@ds-mo/tokens",
+  "packageVersion": "2.15.0",
+  "kind": "tokens",
+  "entries": [
+    {
+      "id": "token-family:color.background",
+      "status": "stable",
+      "summary": "Semantic fills for page, component, interaction, and contrast surfaces.",
+      "tokenPatterns": [
+        "--color-background-*"
+      ],
+      "useWhen": [
+        "Setting the fill of a page, panel, control, selected state, or semantic surface."
+      ],
+      "avoidWhen": [
+        "Coloring text, icons, borders, or data marks.",
+        "A reference palette value appears visually similar."
+      ],
+      "constraints": [
+        "Pair content with a foreground token intended for the resulting surface contrast.",
+        "Use semantic tokens in product UI; reference colors are foundation inputs only."
+      ]
+    },
+    {
+      "id": "token-family:dimension.space",
+      "status": "stable",
+      "summary": "Spacing scale for gaps, padding, margins, and layout separation.",
+      "tokenPatterns": [
+        "--dimension-space-*"
+      ],
+      "useWhen": [
+        "Separating or padding layout elements on the design-system spacing grid."
+      ],
+      "avoidWhen": [
+        "Sizing controls, icons, strokes, or semantic component dimensions."
+      ],
+      "constraints": [
+        "Prefer the smallest scale step that preserves the intended hierarchy.",
+        "Use component-specific dimension tokens when one exists."
+      ]
+    },
+    {
+      "id": "token-family:typography.text",
+      "status": "stable",
+      "summary": "Font, size, weight, line-height, and text recipe tokens.",
+      "tokenPatterns": [
+        "--typography-*"
+      ],
+      "useWhen": [
+        "Implementing typography through a documented ds-text recipe or component-owned text style."
+      ],
+      "avoidWhen": [
+        "Inventing a one-off type scale or using viewport width to scale text."
+      ],
+      "constraints": [
+        "Prefer ds-text variants over assembling individual font tokens in application code."
+      ]
+    },
+    {
+      "id": "token-family:effect.motion",
+      "status": "stable",
+      "summary": "Combined interaction duration and easing recipes.",
+      "tokenPatterns": [
+        "--effect-motion-*"
+      ],
+      "useWhen": [
+        "Defining a CSS transition that needs both a system duration and easing curve."
+      ],
+      "avoidWhen": [
+        "JavaScript needs a numeric duration; use an animation-duration token and resolve it at runtime."
+      ],
+      "constraints": [
+        "Use short motion for direct interactions and medium motion for larger structural changes.",
+        "Respect the global reduced-motion behavior."
+      ]
+    }
+  ]
+}

package/dist/agent.mjs

@@ -0,0 +1,81 @@
+const manifest = {
+  "schemaVersion": "1.0.0",
+  "package": "@ds-mo/tokens",
+  "packageVersion": "2.15.0",
+  "kind": "tokens",
+  "entries": [
+    {
+      "id": "token-family:color.background",
+      "status": "stable",
+      "summary": "Semantic fills for page, component, interaction, and contrast surfaces.",
+      "tokenPatterns": [
+        "--color-background-*"
+      ],
+      "useWhen": [
+        "Setting the fill of a page, panel, control, selected state, or semantic surface."
+      ],
+      "avoidWhen": [
+        "Coloring text, icons, borders, or data marks.",
+        "A reference palette value appears visually similar."
+      ],
+      "constraints": [
+        "Pair content with a foreground token intended for the resulting surface contrast.",
+        "Use semantic tokens in product UI; reference colors are foundation inputs only."
+      ]
+    },
+    {
+      "id": "token-family:dimension.space",
+      "status": "stable",
+      "summary": "Spacing scale for gaps, padding, margins, and layout separation.",
+      "tokenPatterns": [
+        "--dimension-space-*"
+      ],
+      "useWhen": [
+        "Separating or padding layout elements on the design-system spacing grid."
+      ],
+      "avoidWhen": [
+        "Sizing controls, icons, strokes, or semantic component dimensions."
+      ],
+      "constraints": [
+        "Prefer the smallest scale step that preserves the intended hierarchy.",
+        "Use component-specific dimension tokens when one exists."
+      ]
+    },
+    {
+      "id": "token-family:typography.text",
+      "status": "stable",
+      "summary": "Font, size, weight, line-height, and text recipe tokens.",
+      "tokenPatterns": [
+        "--typography-*"
+      ],
+      "useWhen": [
+        "Implementing typography through a documented ds-text recipe or component-owned text style."
+      ],
+      "avoidWhen": [
+        "Inventing a one-off type scale or using viewport width to scale text."
+      ],
+      "constraints": [
+        "Prefer ds-text variants over assembling individual font tokens in application code."
+      ]
+    },
+    {
+      "id": "token-family:effect.motion",
+      "status": "stable",
+      "summary": "Combined interaction duration and easing recipes.",
+      "tokenPatterns": [
+        "--effect-motion-*"
+      ],
+      "useWhen": [
+        "Defining a CSS transition that needs both a system duration and easing curve."
+      ],
+      "avoidWhen": [
+        "JavaScript needs a numeric duration; use an animation-duration token and resolve it at runtime."
+      ],
+      "constraints": [
+        "Use short motion for direct interactions and medium motion for larger structural changes.",
+        "Respect the global reduced-motion behavior."
+      ]
+    }
+  ]
+};
+export default manifest;

package/dist/dimensions.css

@@ -139,6 +139,19 @@
   --dimension-panel-width-2xl: 800px;
   --dimension-panel-width-fill: 100%;
 
+  /* Card heights */
+  --dimension-card-height-xs: 300px;
+  --dimension-card-height-sm: 400px;
+  --dimension-card-height-md: 500px;
+  --dimension-card-height-lg: 600px;
+
+  /* Modal heights */
+  --dimension-modal-height-xs: 300px;
+  --dimension-modal-height-sm: 400px;
+  --dimension-modal-height-md: 500px;
+  --dimension-modal-height-lg: 600px;
+  --dimension-modal-height-fill: 100%;
+
   /* Offset — for transforms and background-position, calc() relative to --dimension-space-base */
   --dimension-offset-100: var(--dimension-space-base);
   --dimension-offset-125: calc(var(--dimension-space-base) * 5 / 4);

package/dist/index.cjs

@@ -725,6 +725,10 @@ exports.colorSettingsProfileForeground = '--color-settings-profile-foreground';
 exports.colorShimmerFade = '--color-shimmer-fade';
 exports.colorShimmerHighlight = '--color-shimmer-highlight';
 exports.dimensionBase = '--dimension-base';
+exports.dimensionCardHeightLg = '--dimension-card-height-lg';
+exports.dimensionCardHeightMd = '--dimension-card-height-md';
+exports.dimensionCardHeightSm = '--dimension-card-height-sm';
+exports.dimensionCardHeightXs = '--dimension-card-height-xs';
 exports.dimensionCardWidthLg = '--dimension-card-width-lg';
 exports.dimensionCardWidthMd = '--dimension-card-width-md';
 exports.dimensionCardWidthSm = '--dimension-card-width-sm';
@@ -745,6 +749,11 @@ exports.dimensionMenuWidthLg = '--dimension-menu-width-lg';
 exports.dimensionMenuWidthMd = '--dimension-menu-width-md';
 exports.dimensionMenuWidthSm = '--dimension-menu-width-sm';
 exports.dimensionMenuWidthXs = '--dimension-menu-width-xs';
+exports.dimensionModalHeightFill = '--dimension-modal-height-fill';
+exports.dimensionModalHeightLg = '--dimension-modal-height-lg';
+exports.dimensionModalHeightMd = '--dimension-modal-height-md';
+exports.dimensionModalHeightSm = '--dimension-modal-height-sm';
+exports.dimensionModalHeightXs = '--dimension-modal-height-xs';
 exports.dimensionModalWidth2xl = '--dimension-modal-width-2xl';
 exports.dimensionModalWidthFill = '--dimension-modal-width-fill';
 exports.dimensionModalWidthLg = '--dimension-modal-width-lg';

package/dist/index.d.ts

@@ -725,6 +725,10 @@ export declare const colorSettingsProfileForeground: '--color-settings-profile-f
 export declare const colorShimmerFade: '--color-shimmer-fade';
 export declare const colorShimmerHighlight: '--color-shimmer-highlight';
 export declare const dimensionBase: '--dimension-base';
+export declare const dimensionCardHeightLg: '--dimension-card-height-lg';
+export declare const dimensionCardHeightMd: '--dimension-card-height-md';
+export declare const dimensionCardHeightSm: '--dimension-card-height-sm';
+export declare const dimensionCardHeightXs: '--dimension-card-height-xs';
 export declare const dimensionCardWidthLg: '--dimension-card-width-lg';
 export declare const dimensionCardWidthMd: '--dimension-card-width-md';
 export declare const dimensionCardWidthSm: '--dimension-card-width-sm';
@@ -745,6 +749,11 @@ export declare const dimensionMenuWidthLg: '--dimension-menu-width-lg';
 export declare const dimensionMenuWidthMd: '--dimension-menu-width-md';
 export declare const dimensionMenuWidthSm: '--dimension-menu-width-sm';
 export declare const dimensionMenuWidthXs: '--dimension-menu-width-xs';
+export declare const dimensionModalHeightFill: '--dimension-modal-height-fill';
+export declare const dimensionModalHeightLg: '--dimension-modal-height-lg';
+export declare const dimensionModalHeightMd: '--dimension-modal-height-md';
+export declare const dimensionModalHeightSm: '--dimension-modal-height-sm';
+export declare const dimensionModalHeightXs: '--dimension-modal-height-xs';
 export declare const dimensionModalWidth2xl: '--dimension-modal-width-2xl';
 export declare const dimensionModalWidthFill: '--dimension-modal-width-fill';
 export declare const dimensionModalWidthLg: '--dimension-modal-width-lg';

package/dist/index.mjs

@@ -725,6 +725,10 @@ export const colorSettingsProfileForeground = '--color-settings-profile-foregrou
 export const colorShimmerFade = '--color-shimmer-fade';
 export const colorShimmerHighlight = '--color-shimmer-highlight';
 export const dimensionBase = '--dimension-base';
+export const dimensionCardHeightLg = '--dimension-card-height-lg';
+export const dimensionCardHeightMd = '--dimension-card-height-md';
+export const dimensionCardHeightSm = '--dimension-card-height-sm';
+export const dimensionCardHeightXs = '--dimension-card-height-xs';
 export const dimensionCardWidthLg = '--dimension-card-width-lg';
 export const dimensionCardWidthMd = '--dimension-card-width-md';
 export const dimensionCardWidthSm = '--dimension-card-width-sm';
@@ -745,6 +749,11 @@ export const dimensionMenuWidthLg = '--dimension-menu-width-lg';
 export const dimensionMenuWidthMd = '--dimension-menu-width-md';
 export const dimensionMenuWidthSm = '--dimension-menu-width-sm';
 export const dimensionMenuWidthXs = '--dimension-menu-width-xs';
+export const dimensionModalHeightFill = '--dimension-modal-height-fill';
+export const dimensionModalHeightLg = '--dimension-modal-height-lg';
+export const dimensionModalHeightMd = '--dimension-modal-height-md';
+export const dimensionModalHeightSm = '--dimension-modal-height-sm';
+export const dimensionModalHeightXs = '--dimension-modal-height-xs';
 export const dimensionModalWidth2xl = '--dimension-modal-width-2xl';
 export const dimensionModalWidthFill = '--dimension-modal-width-fill';
 export const dimensionModalWidthLg = '--dimension-modal-width-lg';