@common-origin/design-system 2.18.0 → 2.19.0

package/dist/data.js

@@ -65,6 +65,42 @@ var base = {
 		"95": "0.95",
 		"100": "1"
 	},
+	dimension: {
+		"0": "0",
+		"1": "0.25rem",
+		"2": "0.5rem",
+		"3": "0.75rem",
+		"4": "1rem",
+		"5": "1.25rem",
+		"6": "1.5rem",
+		"7": "1.75rem",
+		"8": "2rem",
+		"9": "2.25rem",
+		"10": "2.5rem",
+		"11": "2.75rem",
+		"12": "3rem",
+		"14": "3.5rem",
+		"15": "3.75rem",
+		"16": "4rem",
+		"18": "4.5rem",
+		"20": "5rem",
+		"24": "6rem",
+		"28": "7rem",
+		"30": "7.5rem",
+		"32": "8rem",
+		"40": "10rem",
+		"45": "11.25rem",
+		"48": "12rem",
+		"50": "12.5rem",
+		"56": "14rem",
+		"64": "16rem",
+		"75": "18.75rem",
+		"90": "22.5rem",
+		"100": "25rem",
+		"140": "35rem",
+		"180": "45rem",
+		"192": "48rem"
+	},
 	size: {
 		"0": "0",
 		"1": "0.25rem",
@@ -109,6 +145,34 @@ var base = {
 	},
 	color: {
 		transparent: "transparent",
+		gray: {
+			"100": "#fcfcfc",
+			"200": "#f9f9f9",
+			"300": "#f2f2f2",
+			"400": "#ebebeb",
+			"500": "#e4e4e4",
+			"600": "#dcdcdc",
+			"700": "#d1d1d1",
+			"800": "#909090",
+			"900": "#848484",
+			"1000": "#797979",
+			"1100": "#636363",
+			"1200": "#222222"
+		},
+		"gray-alpha": {
+			"100": "rgba(34, 34, 34, 0.014)",
+			"200": "rgba(34, 34, 34, 0.027)",
+			"300": "rgba(34, 34, 34, 0.059)",
+			"400": "rgba(34, 34, 34, 0.09)",
+			"500": "rgba(34, 34, 34, 0.122)",
+			"600": "rgba(34, 34, 34, 0.158)",
+			"700": "rgba(34, 34, 34, 0.208)",
+			"800": "rgba(34, 34, 34, 0.502)",
+			"900": "rgba(34, 34, 34, 0.557)",
+			"1000": "rgba(34, 34, 34, 0.606)",
+			"1100": "rgba(34, 34, 34, 0.706)",
+			"1200": "rgba(34, 34, 34, 1)"
+		},
 		neutral: {
 			"100": "#f8f9fa",
 			"200": "#e9ecef",
@@ -813,7 +877,8 @@ var component = {
 				"default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
 				hover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
 				active: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
-			}
+			},
+			background: "#ffffff"
 		}
 	},
 	accountCard: {
@@ -825,7 +890,8 @@ var component = {
 	breadcrumbs: {
 		item: {
 			maxWidth: "11.25rem"
-		}
+		},
+		font: "400 0.75rem/1.125rem 'Inter', sans-serif"
 	},
 	cardLarge: {
 		maxWidth: "48rem"
@@ -860,6 +926,46 @@ var component = {
 	},
 	transactionListItem: {
 		minHeight: "4.5rem"
+	},
+	status: {
+		pending: {
+			text: "#825800",
+			background: "#FFF3D6"
+		},
+		completed: {
+			text: "#007A4D",
+			background: "#CEF8E0"
+		},
+		failed: {
+			text: "#D31510",
+			background: "#FFEBE7"
+		},
+		cancelled: {
+			text: "#495057",
+			background: "#e9ecef"
+		},
+		processing: {
+			text: "#0265DC",
+			background: "#E0F2FF"
+		},
+		scheduled: {
+			text: "#7E2EBD",
+			background: "#F9F0FF"
+		}
+	},
+	transaction: {
+		credit: "#15A46E",
+		"credit-hover": "#008F5D",
+		debit: "#D31510",
+		"debit-hover": "#B40000",
+		pending: "#F68511",
+		neutral: "#6c757d"
+	},
+	track: {
+		background: "#dee2e6"
+	},
+	tooltip: {
+		border: "0.125rem dotted #dee2e6"
 	}
 };
 var semantic = {
@@ -881,7 +987,9 @@ var semantic = {
 	},
 	opacity: {
 		disabled: "0.5",
-		full: "1"
+		full: "1",
+		hover: "0.8",
+		pressed: "0.7"
 	},
 	fontFamily: {
 		body: "'Inter', sans-serif",
@@ -938,10 +1046,35 @@ var semantic = {
 			"2xl": "1.5rem",
 			"3xl": "2rem",
 			circle: "10rem"
-		}
+		},
+		emphasis: "0.0625rem solid #dee2e6",
+		"input-hover": "0.0625rem solid #343a40"
 	},
 	size: {
+		"100": "0.25rem",
+		"200": "0.5rem",
+		"400": "1rem",
+		"500": "1.25rem",
+		"600": "1.5rem",
+		"800": "2rem",
+		"1200": "3rem",
+		"1500": "3.75rem",
+		"1800": "4.5rem",
+		"2000": "5rem",
+		"3000": "7.5rem",
+		"4500": "11.25rem",
+		"5000": "12.5rem",
+		"7500": "18.75rem",
+		"9000": "22.5rem",
+		"10000": "25rem",
+		"19200": "48rem",
+		pointerTarget: "1.5rem",
 		touchTarget: "2.75rem",
+		control: {
+			sm: "2rem",
+			md: "2.5rem",
+			lg: "3rem"
+		},
 		overlay: {
 			sm: "25rem",
 			md: "35rem",
@@ -1037,7 +1170,12 @@ var semantic = {
 			"interactive-active": "#004491",
 			error: "#D31510",
 			success: "#007A4D",
-			warning: "#B14C00"
+			warning: "#B14C00",
+			muted: "#495057",
+			accent: "#0265DC",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510"
 		},
 		background: {
 			"default": "#f8f9fa",
@@ -1082,7 +1220,13 @@ var semantic = {
 			error: "#D31510",
 			success: "#007A4D",
 			warning: "#B14C00",
-			none: "transparent"
+			none: "transparent",
+			emphasis: "#dee2e6",
+			input: "#6c757d",
+			"input-hover": "#343a40",
+			focus: "#343a40",
+			accent: "#0265DC",
+			danger: "#D31510"
 		},
 		icon: {
 			"default": "#212529",
@@ -1095,7 +1239,12 @@ var semantic = {
 			"interactive-active": "#004491",
 			error: "#D31510",
 			success: "#007A4D",
-			warning: "#B14C00"
+			warning: "#B14C00",
+			muted: "#6c757d",
+			accent: "#0265DC",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510"
 		},
 		financial: {
 			credit: "#15A46E",
@@ -1145,7 +1294,15 @@ var semantic = {
 			"green-text": "#007A4D",
 			"red-text": "#D31510",
 			"orange-text": "#B14C00",
-			"gray-text": "#212529"
+			"gray-text": "#212529",
+			"blue-muted": "#E0F2FF",
+			"purple-muted": "#F9F0FF",
+			"pink-muted": "#FFEFF9",
+			"yellow-muted": "#FFF3D6",
+			"green-muted": "#CEF8E0",
+			"red-muted": "#FFEBE7",
+			"orange-muted": "#FFECCC",
+			"gray-muted": "#e9ecef"
 		},
 		status: {
 			pending: "#825800",
@@ -1160,6 +1317,35 @@ var semantic = {
 			"processing-bg": "#E0F2FF",
 			scheduled: "#7E2EBD",
 			"scheduled-bg": "#F9F0FF"
+		},
+		fill: {
+			emphasis: "#212529",
+			"emphasis-hover": "#343a40",
+			"emphasis-pressed": "#16191C",
+			muted: "#e9ecef",
+			inverse: "#343a40",
+			accent: "#0265DC",
+			"accent-muted": "#E0F2FF",
+			"accent-muted-hover": "#CAE8FF",
+			"accent-muted-pressed": "#B5DEFF",
+			"accent-hover": "#0054B6",
+			"accent-pressed": "#004491",
+			danger: "#D31510",
+			"danger-hover": "#B40000",
+			"danger-pressed": "#930000",
+			"danger-muted": "#FFEBE7",
+			success: "#007A4D",
+			"success-muted": "#CEF8E0",
+			warning: "#B14C00",
+			"warning-muted": "#FFECCC",
+			disabled: "#dee2e6",
+			"default": "#dee2e6",
+			"default-hover": "#ced4da",
+			"default-pressed": "#adb5bd",
+			none: "transparent",
+			"none-hover": "rgba(33, 37, 41, 0.1)",
+			"none-pressed": "rgba(33, 37, 41, 0.15)",
+			"inverse-none-hover": "rgba(255, 255, 255, 0.2)"
 		}
 	},
 	typography: {
@@ -1185,20 +1371,79 @@ var semantic = {
 		duration: {
 			normal: "200ms",
 			fast: "150ms",
-			slow: "300ms"
+			slow: "300ms",
+			instant: "0ms",
+			moderate: "200ms"
 		},
 		easing: {
 			easeInOut: "ease-in-out",
-			easeOut: "ease-out"
+			easeOut: "ease-out",
+			standard: "ease-in-out",
+			decelerate: "ease-out",
+			accelerate: "ease-in"
 		},
 		transition: {
 			fast: "all 150ms ease-out",
 			normal: "all 200ms ease-in-out",
-			slow: "all 300ms ease-in-out"
+			slow: "all 300ms ease-in-out",
+			feedback: "background-color 150ms ease-out, color 150ms ease-out",
+			focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
+			press: "transform 150ms ease-out, opacity 150ms ease-out"
 		},
 		hover: "background-color 150ms ease-out, color 150ms ease-out",
 		focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
-		interactive: "transform 150ms ease-out, opacity 150ms ease-out"
+		interactive: "transform 150ms ease-out, opacity 150ms ease-out",
+		distance: {
+			sm: "0.5rem"
+		}
+	},
+	layer: {
+		sticky: "10",
+		dropdown: "1000",
+		overlay: "1010",
+		modal: "1020"
+	},
+	radius: {
+		none: "0",
+		xs: "0.125rem",
+		sm: "0.25rem",
+		md: "0.5rem",
+		lg: "0.75rem",
+		xl: "1rem",
+		"2xl": "1.5rem",
+		"3xl": "2rem",
+		full: "10rem"
+	},
+	space: {
+		"0": "0",
+		"100": "0.25rem",
+		"200": "0.5rem",
+		"300": "0.75rem",
+		"400": "1rem",
+		"500": "1.25rem",
+		"600": "1.5rem",
+		"700": "1.75rem",
+		"800": "2rem",
+		"900": "2.25rem",
+		"1000": "2.5rem",
+		"1200": "3rem",
+		"1400": "3.5rem",
+		"1600": "4rem",
+		"2000": "5rem",
+		"2400": "6rem",
+		inset: {
+			xs: "0.25rem",
+			sm: "0.5rem",
+			md: "0.75rem",
+			lg: "1rem",
+			xl: "1.25rem",
+			"2xl": "1.5rem"
+		}
+	},
+	surface: {
+		base: "#f8f9fa",
+		raised: "#ffffff",
+		scrim: "rgba(33, 37, 41, 0.5)"
 	}
 };
 var tokensJson = {
@@ -1999,8 +2244,10 @@ var iconsJson = {
 	move: move
 };
 
-// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,
-// which consumers can only resolve with `resolveJsonModule`.
+// The published types come from the generated `src/styles/tokens.ts`, which carries each token's
+// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the
+// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can
+// only resolve with `resolveJsonModule`.
 var tokens = tokensJson;
 
 // Icon type definitions for external consumption

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAMA,MAAM,GAAGC;;ACJtB;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}
+{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAWC;;ACP9B;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}

package/dist/lib/cssTokens.d.ts

@@ -0,0 +1,14 @@
+import type { Tokens } from '../styles/tokens';
+/**
+ * The tokens as components read them (decision 0041): the same shape and type as `tokens.json`,
+ * with every value a CSS variable that falls back to the resolved value, so a region can change a
+ * token through tokens.css. Breakpoints stay values.
+ *
+ * Use the resolved values from `tokens.json` instead where a value is read as data rather than
+ * CSS, such as a duration parsed for a timer.
+ *
+ * Jest maps this module to `tokens.json` (jest.config.js), so unit tests assert resolved values;
+ * the browser specs check the variables.
+ */
+declare const tokens: Tokens;
+export default tokens;

package/dist/lib/cssVariables.d.ts

@@ -0,0 +1,15 @@
+/**
+ * The CSS variable tokens.css declares for a token path: Style Dictionary's `name/kebab` with the
+ * `co` prefix. `semantic.color.text.default` is `--co-semantic-color-text-default`, and
+ * `semantic.border.focusOffset` is `--co-semantic-border-focus-offset`.
+ */
+export declare function cssVariableName(path: string[]): string;
+type Tree = {
+    [key: string]: string | Tree;
+};
+/**
+ * A copy of a token tree with the same shape, where every value reads its CSS variable and falls
+ * back to the resolved value: `var(--co-semantic-color-text-default, #212529)`.
+ */
+export declare function withCssVariables<T extends Tree>(tree: T, path?: string[]): T;
+export {};

package/dist/lib/styleUtils.d.ts

@@ -14,6 +14,29 @@ export declare const media: {
     xl: string;
     '2xl': string;
 };
+export declare const forcedColors = "@media (forced-colors: active)";
+/** A control's edge in forced colours, for a control that shows its edge with a fill alone. The
+ * border follows the text colour the browser picks: ButtonText, LinkText, or GrayText when disabled. */
+export declare const forcedColorsEdge: string;
 export declare const reducedMotion = "@media (prefers-reduced-motion: reduce)";
 export declare const exitAnimation: import("styled-components").RuleSet<object>;
 export declare const visuallyHidden: import("styled-components").RuleSet<object>;
+export interface RowState {
+    background: string;
+    text?: string;
+}
+export declare const rowStates: Record<'unselected' | 'selected', Record<'rest' | 'hover' | 'pressed', RowState>>;
+/**
+ * The background (and, when selected, text) of an interactive row in every state.
+ * - `focused`: keyboard focus that isn't DOM focus, such as a listbox option under
+ *   aria-activedescendant. It shows the hover state.
+ * - `disabled`: shows the resting state, with no hover or press.
+ * - `textSelector`: a descendant to colour when the row's text isn't the row itself, for example
+ *   text set by Typography. Pass it without `&`.
+ */
+export declare const interactiveRow: ({ selected, focused, disabled, textSelector, }?: {
+    selected?: boolean;
+    focused?: boolean;
+    disabled?: boolean;
+    textSelector?: string;
+}) => string;

package/dist/lib/tokenAliases.d.ts

@@ -0,0 +1,13 @@
+import type { Tokens } from '../types/tokens';
+type Semantic = Tokens['semantic'];
+/** Box's spacing props (`p`, `m`, `gap`…): the old layout scale's keys, read from `space`. */
+export declare const spaceByLayoutKey: Record<keyof Semantic['spacing']['layout'], string>;
+/** Box's `borderRadius` prop: the old radius keys, read from `radius`. */
+export declare const radiusByKey: Record<keyof Semantic['border']['radius'], string>;
+/** Box's `bg` prop: the old background keys, read from `surface` and `color.fill`. */
+export declare const backgroundByKey: Record<keyof Semantic['color']['background'], string>;
+/** Box's `color` prop: text colours, old and new keys. */
+export declare const textColorByKey: Record<keyof Semantic['color']['text'], string>;
+/** Box's border props: border colours, old and new keys. */
+export declare const borderColorByKey: Record<keyof Semantic['color']['border'], string>;
+export {};