@common-origin/design-system 3.1.0 → 3.2.0

package/dist/tokens/index.js

@@ -37,7 +37,8 @@ var base = {
 		"4": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
 		"5": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
 		"6": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-		none: "none"
+		none: "none",
+		inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
 	},
 	zIndex: {
 		"0": "0",
@@ -67,7 +68,8 @@ var base = {
 		"80": "0.8",
 		"90": "0.9",
 		"95": "0.95",
-		"100": "1"
+		"100": "1",
+		scrim: "0.5"
 	},
 	dimension: {
 		"0": "0",
@@ -116,6 +118,15 @@ var base = {
 	color: {
 		transparent: "transparent",
 		white: "#ffffff",
+		surface: {
+			page: "#fcfcfc",
+			raised: "#ffffff",
+			overlay: "#ffffff"
+		},
+		ink: {
+			light: "#fcfcfc",
+			dark: "#222222"
+		},
 		gray: {
 			"100": "#fcfcfc",
 			"200": "#f9f9f9",
@@ -144,6 +155,20 @@ var base = {
 			"1100": "rgba(34, 34, 34, 0.706)",
 			"1200": "rgba(34, 34, 34, 1)"
 		},
+		"gray-alpha-inverse": {
+			"100": "rgba(252, 252, 252, 0.014)",
+			"200": "rgba(252, 252, 252, 0.027)",
+			"300": "rgba(252, 252, 252, 0.059)",
+			"400": "rgba(252, 252, 252, 0.09)",
+			"500": "rgba(252, 252, 252, 0.122)",
+			"600": "rgba(252, 252, 252, 0.158)",
+			"700": "rgba(252, 252, 252, 0.208)",
+			"800": "rgba(252, 252, 252, 0.502)",
+			"900": "rgba(252, 252, 252, 0.557)",
+			"1000": "rgba(252, 252, 252, 0.606)",
+			"1100": "rgba(252, 252, 252, 0.706)",
+			"1200": "rgba(252, 252, 252, 1)"
+		},
 		accent: {
 			"100": "#fbfcfd",
 			"200": "#f7f9fc",
@@ -156,7 +181,8 @@ var base = {
 			"900": "#0082fc",
 			"1000": "#0278e7",
 			"1100": "#0162bf",
-			"1200": "#0f2339"
+			"1200": "#0f2339",
+			solid: "#0162bf"
 		},
 		"accent-alpha": {
 			"100": "rgba(5, 68, 130, 0.016)",
@@ -184,7 +210,8 @@ var base = {
 			"900": "#009762",
 			"1000": "#018b5a",
 			"1100": "#017249",
-			"1200": "#12261b"
+			"1200": "#12261b",
+			solid: "#017249"
 		},
 		"success-alpha": {
 			"100": "rgba(5, 172, 47, 0.024)",
@@ -212,7 +239,8 @@ var base = {
 			"900": "#ad7b00",
 			"1000": "#9f7102",
 			"1100": "#835c00",
-			"1200": "#292111"
+			"1200": "#292111",
+			solid: "#835c00"
 		},
 		"warning-alpha": {
 			"100": "rgba(155, 105, 5, 0.02)",
@@ -240,7 +268,8 @@ var base = {
 			"900": "#da5f00",
 			"1000": "#c85701",
 			"1100": "#a54703",
-			"1200": "#341c10"
+			"1200": "#341c10",
+			solid: "#a54703"
 		},
 		"serious-alpha": {
 			"100": "rgba(193, 68, 5, 0.016)",
@@ -268,7 +297,8 @@ var base = {
 			"900": "#ff2b21",
 			"1000": "#f30004",
 			"1100": "#c90002",
-			"1200": "#3d1611"
+			"1200": "#3d1611",
+			solid: "#c90002"
 		},
 		"danger-alpha": {
 			"100": "rgba(172, 5, 5, 0.012)",
@@ -511,7 +541,7 @@ var component = {
 		primary: {
 			backgroundColor: "#222222",
 			textColor: "#fcfcfc",
-			borderRadius: "0.25rem",
+			borderRadius: "0.5rem",
 			font: "500 1rem/1.5rem 'Inter', sans-serif"
 		},
 		hover: {
@@ -524,21 +554,21 @@ var component = {
 			outline: "0.125rem solid #222222"
 		},
 		disabled: {
-			backgroundColor: "#f2f2f2",
+			backgroundColor: "rgba(34, 34, 34, 0.059)",
 			textColor: "rgba(34, 34, 34, 0.208)"
 		},
 		variants: {
 			secondary: {
-				backgroundColor: "#f2f2f2",
+				backgroundColor: "rgba(34, 34, 34, 0.059)",
 				textColor: "#222222",
 				hover: {
-					backgroundColor: "#ebebeb"
+					backgroundColor: "rgba(34, 34, 34, 0.09)"
 				},
 				active: {
-					backgroundColor: "#e4e4e4"
+					backgroundColor: "rgba(34, 34, 34, 0.122)"
 				},
 				disabled: {
-					backgroundColor: "#f2f2f2",
+					backgroundColor: "rgba(34, 34, 34, 0.059)",
 					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
@@ -546,10 +576,10 @@ var component = {
 				backgroundColor: "transparent",
 				textColor: "#222222",
 				hover: {
-					backgroundColor: "#f2f2f2"
+					backgroundColor: "rgba(34, 34, 34, 0.059)"
 				},
 				active: {
-					backgroundColor: "#ebebeb"
+					backgroundColor: "rgba(34, 34, 34, 0.09)"
 				},
 				disabled: {
 					backgroundColor: "transparent",
@@ -566,7 +596,7 @@ var component = {
 					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#f2f2f2",
+					backgroundColor: "rgba(34, 34, 34, 0.059)",
 					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
@@ -580,7 +610,7 @@ var component = {
 					backgroundColor: "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#f2f2f2",
+					backgroundColor: "rgba(34, 34, 34, 0.059)",
 					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			}
@@ -603,16 +633,16 @@ var component = {
 			size: "1.25rem"
 		},
 		"default": {
-			backgroundColor: "#f2f2f2",
+			backgroundColor: "rgba(34, 34, 34, 0.059)",
 			textColor: "#222222",
-			borderRadius: "0.75rem",
+			borderRadius: "10rem",
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
 		focus: {
 			outline: "0.125rem solid #222222"
 		},
 		disabled: {
-			backgroundColor: "#f2f2f2",
+			backgroundColor: "rgba(34, 34, 34, 0.059)",
 			textColor: "rgba(34, 34, 34, 0.208)"
 		},
 		variants: {
@@ -623,7 +653,7 @@ var component = {
 					backgroundColor: "#fcfcfc"
 				},
 				active: {
-					backgroundColor: "#f2f2f2"
+					backgroundColor: "rgba(34, 34, 34, 0.059)"
 				},
 				disabled: {
 					backgroundColor: "#ffffff",
@@ -639,7 +669,7 @@ var component = {
 	},
 	iconButton: {
 		primary: {
-			borderRadius: "0.25rem"
+			borderRadius: "0.5rem"
 		},
 		focus: {
 			outline: "0.125rem solid #222222"
@@ -660,7 +690,7 @@ var component = {
 		}
 	},
 	progressBar: {
-		backgroundColor: "#f2f2f2",
+		backgroundColor: "rgba(34, 34, 34, 0.059)",
 		sizes: {
 			sm: {
 				height: "0.25rem"
@@ -681,7 +711,7 @@ var component = {
 			backgroundColor: "#ffffff",
 			textColor: "#222222",
 			borderColor: "#909090",
-			borderRadius: "0.25rem",
+			borderRadius: "0.5rem",
 			borderWidth: "0.0625rem",
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
@@ -706,7 +736,7 @@ var component = {
 			}
 		},
 		disabled: {
-			backgroundColor: "#f2f2f2",
+			backgroundColor: "rgba(34, 34, 34, 0.059)",
 			textColor: "rgba(34, 34, 34, 0.208)",
 			borderColor: "#d1d1d1"
 		},
@@ -754,19 +784,19 @@ var component = {
 	alert: {
 		severity: {
 			error: {
-				background: "#faf0ee",
+				background: "rgba(180, 31, 1, 0.067)",
 				text: "#c90002"
 			},
 			warning: {
-				background: "#faf1e3",
+				background: "rgba(210, 128, 0, 0.11)",
 				text: "#835c00"
 			},
 			info: {
-				background: "#edf3fa",
+				background: "rgba(1, 86, 185, 0.071)",
 				text: "#0162bf"
 			},
 			success: {
-				background: "#dbf9e8",
+				background: "rgba(1, 213, 93, 0.142)",
 				text: "#017249"
 			}
 		},
@@ -867,7 +897,8 @@ var component = {
 	},
 	checkbox: {
 		box: {
-			size: "1.25rem"
+			size: "1.25rem",
+			borderRadius: "0.25rem"
 		},
 		row: {
 			minHeight: "2rem"
@@ -899,31 +930,34 @@ var component = {
 	status: {
 		pending: {
 			text: "#636363",
-			background: "#f2f2f2"
+			background: "rgba(34, 34, 34, 0.059)"
 		},
 		completed: {
 			text: "#017249",
-			background: "#dbf9e8"
+			background: "rgba(1, 213, 93, 0.142)"
 		},
 		failed: {
 			text: "#c90002",
-			background: "#faf0ee"
+			background: "rgba(180, 31, 1, 0.067)"
 		},
 		cancelled: {
 			text: "#636363",
-			background: "#f2f2f2"
+			background: "rgba(34, 34, 34, 0.059)"
 		},
 		processing: {
 			text: "#0162bf",
-			background: "#edf3fa"
+			background: "rgba(1, 86, 185, 0.071)"
 		},
 		scheduled: {
 			text: "#636363",
-			background: "#f2f2f2"
+			background: "rgba(34, 34, 34, 0.059)"
 		}
 	},
 	track: {
-		background: "#f2f2f2"
+		background: "rgba(34, 34, 34, 0.059)"
+	},
+	overlay: {
+		borderRadius: "1.5rem"
 	}
 };
 var semantic = {
@@ -1062,6 +1096,7 @@ var semantic = {
 		text: {
 			"default": "#222222",
 			inverse: "#fcfcfc",
+			"on-fill": "#fcfcfc",
 			disabled: "rgba(34, 34, 34, 0.208)",
 			success: "#017249",
 			warning: "#835c00",
@@ -1088,6 +1123,7 @@ var semantic = {
 			"default": "#222222",
 			disabled: "rgba(34, 34, 34, 0.208)",
 			inverse: "#fcfcfc",
+			"on-fill": "#fcfcfc",
 			success: "#017249",
 			warning: "#835c00",
 			muted: "#636363",
@@ -1100,53 +1136,53 @@ var semantic = {
 			gray: "#909090",
 			"gray-strong": "#636363",
 			"gray-text": "#636363",
-			"gray-muted": "#f2f2f2",
+			"gray-muted": "rgba(34, 34, 34, 0.059)",
 			olive: "#889903",
 			"olive-strong": "#5d6900",
 			"olive-text": "#5d6900",
-			"olive-muted": "#eff6d4",
+			"olive-muted": "rgba(160, 202, 1, 0.169)",
 			periwinkle: "#7a84ff",
 			"periwinkle-strong": "#533eff",
 			"periwinkle-text": "#533eff",
-			"periwinkle-muted": "#f0f2fa",
+			"periwinkle-muted": "rgba(1, 35, 170, 0.059)",
 			rose: "#ff4989",
 			"rose-strong": "#c4005d",
 			"rose-text": "#c4005d",
-			"rose-muted": "#faeff1",
+			"rose-muted": "rgba(176, 1, 33, 0.063)",
 			magenta: "#fd00fa",
 			"magenta-strong": "#b100af",
 			"magenta-text": "#b100af",
-			"magenta-muted": "#faeff9"
+			"magenta-muted": "rgba(176, 1, 160, 0.063)"
 		},
 		fill: {
 			emphasis: "#222222",
-			muted: "#f2f2f2",
+			muted: "rgba(34, 34, 34, 0.059)",
 			inverse: "#222222",
 			accent: "#0162bf",
-			"accent-muted": "#edf3fa",
-			"accent-muted-hover": "#e3ecf8",
-			"accent-muted-pressed": "#d8e5f6",
+			"accent-muted": "rgba(1, 86, 185, 0.071)",
+			"accent-muted-hover": "rgba(0, 82, 191, 0.11)",
+			"accent-muted-pressed": "rgba(0, 85, 196, 0.153)",
 			"accent-hover": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))",
 			"accent-pressed": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))",
 			danger: "#c90002",
 			"danger-hover": "color-mix(in srgb, #c90002, #fcfcfc calc(0.08 * 100%))",
 			"danger-pressed": "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))",
-			"danger-muted": "#faf0ee",
+			"danger-muted": "rgba(180, 31, 1, 0.067)",
 			success: "#017249",
-			"success-muted": "#dbf9e8",
+			"success-muted": "rgba(1, 213, 93, 0.142)",
 			warning: "#835c00",
-			"warning-muted": "#faf1e3",
-			disabled: "#f2f2f2",
-			"default": "#f2f2f2",
-			"default-hover": "#ebebeb",
-			"default-pressed": "#e4e4e4",
+			"warning-muted": "rgba(210, 128, 0, 0.11)",
+			disabled: "rgba(34, 34, 34, 0.059)",
+			"default": "rgba(34, 34, 34, 0.059)",
+			"default-hover": "rgba(34, 34, 34, 0.09)",
+			"default-pressed": "rgba(34, 34, 34, 0.122)",
 			none: "transparent",
-			"none-hover": "rgba(34, 34, 34, 0.1)",
-			"none-pressed": "rgba(34, 34, 34, 0.15)",
-			"inverse-none-hover": "rgba(255, 255, 255, 0.2)",
+			"none-hover": "rgba(34, 34, 34, 0.09)",
+			"none-pressed": "rgba(34, 34, 34, 0.158)",
+			"inverse-none-hover": "rgba(252, 252, 252, 0.208)",
 			serious: "#a54703",
-			"serious-muted": "#faf0eb",
-			"ai-muted": "#f4f0fa"
+			"serious-muted": "rgba(192, 65, 2, 0.079)",
+			"ai-muted": "rgba(69, 1, 170, 0.059)"
 		},
 		data: {
 			positive: "#009762",
@@ -1263,7 +1299,8 @@ var semantic = {
 	surface: {
 		base: "#fcfcfc",
 		raised: "#ffffff",
-		scrim: "rgba(34, 34, 34, 0.5)"
+		overlay: "#ffffff",
+		scrim: "color-mix(in srgb, #222222 calc(0.5 * 100%), transparent)"
 	}
 };
 var tokensJson = {

package/dist/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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;;;;;"}
+{"version":3,"file":"index.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;;;;;"}