@common-origin/design-system 2.17.0 → 2.19.0

package/dist/tokens/index.esm.js

@@ -63,6 +63,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",
@@ -107,6 +143,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",
@@ -811,7 +875,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: {
@@ -823,7 +888,8 @@ var component = {
 	breadcrumbs: {
 		item: {
 			maxWidth: "11.25rem"
-		}
+		},
+		font: "400 0.75rem/1.125rem 'Inter', sans-serif"
 	},
 	cardLarge: {
 		maxWidth: "48rem"
@@ -858,6 +924,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 = {
@@ -879,7 +985,9 @@ var semantic = {
 	},
 	opacity: {
 		disabled: "0.5",
-		full: "1"
+		full: "1",
+		hover: "0.8",
+		pressed: "0.7"
 	},
 	fontFamily: {
 		body: "'Inter', sans-serif",
@@ -936,10 +1044,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",
@@ -1026,7 +1159,7 @@ var semantic = {
 	color: {
 		text: {
 			"default": "#212529",
-			emphasis: "#343a40",
+			emphasis: "#16191C",
 			subdued: "#495057",
 			inverse: "#ffffff",
 			disabled: "#adb5bd",
@@ -1035,7 +1168,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",
@@ -1080,11 +1218,17 @@ 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",
-			emphasis: "#343a40",
+			emphasis: "#16191C",
 			subdued: "#6c757d",
 			disabled: "#adb5bd",
 			inverse: "#ffffff",
@@ -1093,7 +1237,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",
@@ -1105,27 +1254,35 @@ var semantic = {
 		},
 		category: {
 			blue: "#3892F3",
+			"blue-strong": "#0265DC",
 			"blue-emphasis": "#0265DC",
 			"blue-subtle": "#E0F2FF",
 			purple: "#AD5FE8",
+			"purple-strong": "#7E2EBD",
 			"purple-emphasis": "#7E2EBD",
 			"purple-subtle": "#F9F0FF",
 			pink: "#FF42AB",
+			"pink-strong": "#DC007B",
 			"pink-emphasis": "#DC007B",
 			"pink-subtle": "#FFEFF9",
 			yellow: "#D39700",
+			"yellow-strong": "#9D6C00",
 			"yellow-emphasis": "#9D6C00",
 			"yellow-subtle": "#FFF3D6",
 			green: "#15A46E",
+			"green-strong": "#007A4D",
 			"green-emphasis": "#007A4D",
 			"green-subtle": "#CEF8E0",
 			red: "#F75C46",
+			"red-strong": "#D31510",
 			"red-emphasis": "#D31510",
 			"red-subtle": "#FFEBE7",
 			orange: "#E46F00",
+			"orange-strong": "#B14C00",
 			"orange-emphasis": "#B14C00",
 			"orange-subtle": "#FFECCC",
 			gray: "#495057",
+			"gray-strong": "#212529",
 			"gray-emphasis": "#212529",
 			"gray-subtle": "#e9ecef",
 			"blue-text": "#0265DC",
@@ -1135,7 +1292,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",
@@ -1150,6 +1315,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: {
@@ -1175,20 +1369,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 = {
@@ -1197,8 +1450,10 @@ var tokensJson = {
 	semantic: semantic
 };
 
-// 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;
 
 // Tokens-only export for standalone usage

package/dist/tokens/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.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","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.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","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAM,MAAM,GAAW;;ACP9B;;;;"}