@common-origin/design-system 2.22.0 → 3.0.0

package/dist/tokens/index.js

@@ -106,40 +106,6 @@ var base = {
 		"192": "48rem"
 	},
 	size: {
-		"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",
 		auto: "auto",
 		full: "100%",
 		screen: "100vh",
@@ -149,6 +115,7 @@ var base = {
 	},
 	color: {
 		transparent: "transparent",
+		white: "#ffffff",
 		gray: {
 			"100": "#fcfcfc",
 			"200": "#f9f9f9",
@@ -456,149 +423,9 @@ var base = {
 			"1000": "rgba(215, 0, 212, 1)",
 			"1100": "rgba(177, 0, 175, 1)",
 			"1200": "rgba(37, 0, 35, 0.918)"
-		},
-		neutral: {
-			"100": "#f8f9fa",
-			"200": "#e9ecef",
-			"300": "#dee2e6",
-			"400": "#ced4da",
-			"500": "#adb5bd",
-			"600": "#6c757d",
-			"700": "#495057",
-			"800": "#343a40",
-			"900": "#212529",
-			"1000": "#16191C",
-			"000": "#ffffff"
-		},
-		green: {
-			"100": "#CEF8E0",
-			"200": "#ADF4CE",
-			"300": "#89ECBC",
-			"400": "#67DEA8",
-			"500": "#49CC93",
-			"600": "#2FB880",
-			"700": "#15A46E",
-			"800": "#008F5D",
-			"900": "#007A4D",
-			"1000": "#00653E",
-			"1100": "#005132",
-			"1200": "#053F27",
-			"1300": "#0A2E1D"
-		},
-		orange: {
-			"100": "#FFECCC",
-			"200": "#FFDFAD",
-			"300": "#FDD291",
-			"400": "#FFBB63",
-			"500": "#FFA037",
-			"600": "#F68511",
-			"700": "#E46F00",
-			"800": "#CB5D00",
-			"900": "#B14C00",
-			"1000": "#953D00",
-			"1100": "#7A2F00",
-			"1200": "#612300",
-			"1300": "#491901"
-		},
-		red: {
-			"100": "#FFEBE7",
-			"200": "#FFDDD6",
-			"300": "#FFCDC3",
-			"400": "#FFB7A9",
-			"500": "#FF9B88",
-			"600": "#FF7C65",
-			"700": "#F75C46",
-			"800": "#EA3829",
-			"900": "#D31510",
-			"1000": "#B40000",
-			"1100": "#930000",
-			"1200": "#740000",
-			"1300": "#590000"
-		},
-		blue: {
-			"100": "#E0F2FF",
-			"200": "#CAE8FF",
-			"300": "#B5DEFF",
-			"400": "#96CEFD",
-			"500": "#78BBFA",
-			"600": "#59A7F6",
-			"700": "#3892F3",
-			"800": "#147AF3",
-			"900": "#0265DC",
-			"1000": "#0054B6",
-			"1100": "#004491",
-			"1200": "#003571",
-			"1300": "#002754"
-		},
-		purple: {
-			"100": "#F9F0FF",
-			"200": "#F4E1FF",
-			"300": "#EDD0FF",
-			"400": "#E3B8FF",
-			"500": "#D59DFF",
-			"600": "#C27EF7",
-			"700": "#AD5FE8",
-			"800": "#9644D4",
-			"900": "#7E2EBD",
-			"1000": "#67229F",
-			"1100": "#511882",
-			"1200": "#3D1066",
-			"1300": "#2B0A4D"
-		},
-		pink: {
-			"100": "#FFEFF9",
-			"200": "#FFDFF4",
-			"300": "#FFCBED",
-			"400": "#FFB0E3",
-			"500": "#FF8ED4",
-			"600": "#FF69C1",
-			"700": "#FF42AB",
-			"800": "#F31A93",
-			"900": "#DC007B",
-			"1000": "#B90064",
-			"1100": "#97004E",
-			"1200": "#78003A",
-			"1300": "#5C0029"
-		},
-		yellow: {
-			"100": "#FFF3D6",
-			"200": "#FFE9B3",
-			"300": "#FFDE8F",
-			"400": "#FFD162",
-			"500": "#FFC233",
-			"600": "#EDAD0A",
-			"700": "#D39700",
-			"800": "#B88100",
-			"900": "#9D6C00",
-			"1000": "#825800",
-			"1100": "#694600",
-			"1200": "#523600",
-			"1300": "#3D2800"
 		}
 	},
 	spacing: {
-		"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",
-		"12": "3rem",
-		"14": "3.5rem",
-		"16": "4rem",
-		"20": "5rem",
-		"24": "6rem",
-		"28": "7rem",
-		"32": "8rem",
-		"40": "10rem",
-		"48": "12rem",
-		"56": "14rem",
-		"64": "16rem",
 		auto: "auto"
 	},
 	fontFamily: {
@@ -683,20 +510,18 @@ var component = {
 	button: {
 		primary: {
 			backgroundColor: "#222222",
-			textColor: "#ffffff",
+			textColor: "#fcfcfc",
 			borderRadius: "0.25rem",
-			padding: "0.75rem 1rem",
 			font: "500 1rem/1.5rem 'Inter', sans-serif"
 		},
 		hover: {
-			backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.08 * 100%))"
+			backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.08 * 100%))"
 		},
 		active: {
-			backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.12 * 100%))"
+			backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.12 * 100%))"
 		},
 		focus: {
-			outline: "0.125rem solid #222222",
-			outlineOffset: "2px"
+			outline: "0.125rem solid #222222"
 		},
 		disabled: {
 			backgroundColor: "#f2f2f2",
@@ -733,26 +558,12 @@ var component = {
 			},
 			accent: {
 				backgroundColor: "#0162bf",
-				textColor: "#ffffff",
+				textColor: "#fcfcfc",
 				hover: {
-					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))"
+					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))"
-				},
-				disabled: {
-					backgroundColor: "#f2f2f2",
-					textColor: "rgba(34, 34, 34, 0.208)"
-				}
-			},
-			emphasis: {
-				backgroundColor: "#0162bf",
-				textColor: "#ffffff",
-				hover: {
-					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))"
-				},
-				active: {
-					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))"
+					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
 					backgroundColor: "#f2f2f2",
@@ -761,12 +572,12 @@ var component = {
 			},
 			danger: {
 				backgroundColor: "#c90002",
-				textColor: "#ffffff",
+				textColor: "#fcfcfc",
 				hover: {
-					backgroundColor: "color-mix(in srgb, #c90002, #ffffff calc(0.08 * 100%))"
+					backgroundColor: "color-mix(in srgb, #c90002, #fcfcfc calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "color-mix(in srgb, #c90002, #ffffff calc(0.12 * 100%))"
+					backgroundColor: "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
 					backgroundColor: "#f2f2f2",
@@ -776,16 +587,13 @@ var component = {
 		},
 		sizes: {
 			small: {
-				padding: "0.5rem 0.75rem",
 				font: "400 0.75rem/1rem 'Inter', sans-serif",
 				fontWeight: "500"
 			},
 			medium: {
-				padding: "0.5rem 1rem",
 				font: "500 0.875rem/1.5rem 'Inter', sans-serif"
 			},
 			large: {
-				padding: "0.75rem 1rem",
 				font: "500 1rem/1.5rem 'Inter', sans-serif"
 			}
 		}
@@ -798,38 +606,16 @@ var component = {
 			backgroundColor: "#f2f2f2",
 			textColor: "#222222",
 			borderRadius: "0.75rem",
-			padding: "2px 0.5rem",
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
-		hover: {
-			backgroundColor: "#ebebeb"
-		},
-		active: {
-			backgroundColor: "#e4e4e4"
-		},
 		focus: {
-			outline: "0.125rem solid #222222",
-			outlineOffset: "2px"
+			outline: "0.125rem solid #222222"
 		},
 		disabled: {
 			backgroundColor: "#f2f2f2",
 			textColor: "rgba(34, 34, 34, 0.208)"
 		},
 		variants: {
-			emphasis: {
-				backgroundColor: "#222222",
-				textColor: "#ffffff",
-				hover: {
-					backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.08 * 100%))"
-				},
-				active: {
-					backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.12 * 100%))"
-				},
-				disabled: {
-					backgroundColor: "#f2f2f2",
-					textColor: "rgba(34, 34, 34, 0.208)"
-				}
-			},
 			subtle: {
 				backgroundColor: "#ffffff",
 				textColor: "#222222",
@@ -843,139 +629,38 @@ var component = {
 					backgroundColor: "#ffffff",
 					textColor: "rgba(34, 34, 34, 0.208)"
 				}
-			},
-			interactive: {
-				backgroundColor: "#0162bf",
-				textColor: "#ffffff",
-				hover: {
-					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))"
-				},
-				active: {
-					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))"
-				},
-				disabled: {
-					backgroundColor: "#f2f2f2",
-					textColor: "rgba(34, 34, 34, 0.208)"
-				}
 			}
 		},
 		sizes: {
-			small: {
-				padding: "2px 0.5rem",
-				font: "400 0.75rem/1rem 'Inter', sans-serif"
-			},
 			medium: {
-				padding: "2px 0.5rem",
 				font: "400 0.875rem/1.25rem 'Inter', sans-serif"
-			},
-			large: {
-				padding: "0.5rem 0.75rem",
-				font: "400 1rem/1.5rem 'Inter', sans-serif"
 			}
 		}
 	},
 	iconButton: {
 		primary: {
-			backgroundColor: "#222222",
-			borderRadius: "0.25rem",
-			minWidth: "40px",
-			minHeight: "40px",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center"
-		},
-		hover: {
-			backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.08 * 100%))"
-		},
-		active: {
-			backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.12 * 100%))"
+			borderRadius: "0.25rem"
 		},
 		focus: {
-			outline: "0.125rem solid #222222",
-			outlineOffset: "2px"
-		},
-		disabled: {
-			backgroundColor: "#f2f2f2"
-		},
-		variants: {
-			secondary: {
-				backgroundColor: "#f2f2f2",
-				hover: {
-					backgroundColor: "#f2f2f2"
-				},
-				active: {
-					backgroundColor: "#fcfcfc"
-				},
-				disabled: {
-					backgroundColor: "#f2f2f2"
-				}
-			},
-			naked: {
-				backgroundColor: "transparent",
-				hover: {
-					backgroundColor: "#f2f2f2"
-				},
-				active: {
-					backgroundColor: "#f2f2f2"
-				},
-				disabled: {
-					backgroundColor: "transparent"
-				}
-			}
-		},
-		sizes: {
-			small: {
-				minWidth: "32px",
-				minHeight: "32px",
-				padding: "0.25rem"
-			},
-			medium: {
-				minWidth: "40px",
-				minHeight: "40px",
-				padding: "0.5rem"
-			},
-			large: {
-				minWidth: "48px",
-				minHeight: "48px",
-				padding: "0.75rem"
-			}
+			outline: "0.125rem solid #222222"
 		}
 	},
 	separator: {
 		border: "0.0625rem solid #d1d1d1",
-		margin: "2rem 0",
 		variants: {
 			"default": {
-				border: "0.0625rem solid #d1d1d1",
-				margin: "2rem 0"
+				border: "0.0625rem solid #d1d1d1"
 			},
 			strong: {
-				border: "0.0625rem solid #636363",
-				margin: "2rem 0"
+				border: "0.0625rem solid #636363"
 			},
 			minimal: {
-				border: "0.0625rem solid #d1d1d1",
-				margin: "1.5rem 0"
-			}
-		},
-		sizes: {
-			small: {
-				margin: "1rem 0"
-			},
-			medium: {
-				margin: "1.5rem 0"
-			},
-			large: {
-				margin: "2rem 0"
-			},
-			xlarge: {
-				margin: "3rem 0"
+				border: "0.0625rem solid #d1d1d1"
 			}
 		}
 	},
 	progressBar: {
 		backgroundColor: "#f2f2f2",
-		borderRadius: "0.25rem",
 		sizes: {
 			sm: {
 				height: "0.25rem"
@@ -998,8 +683,6 @@ var component = {
 			borderColor: "#909090",
 			borderRadius: "0.25rem",
 			borderWidth: "0.0625rem",
-			paddingY: "11px",
-			paddingX: "1rem",
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
 		placeholder: {
@@ -1010,15 +693,13 @@ var component = {
 		},
 		focus: {
 			borderColor: "#222222",
-			outline: "0.125rem solid #222222",
-			outlineOffset: "2px"
+			outline: "0.125rem solid #222222"
 		},
 		error: {
 			borderColor: "#ff5444",
 			focus: {
 				borderColor: "#ff5444",
-				outline: "0.125rem solid #222222",
-				outlineOffset: "2px"
+				outline: "0.125rem solid #222222"
 			},
 			hover: {
 				borderColor: "#ff5444"
@@ -1027,8 +708,7 @@ var component = {
 		disabled: {
 			backgroundColor: "#f2f2f2",
 			textColor: "rgba(34, 34, 34, 0.208)",
-			borderColor: "#d1d1d1",
-			cursor: "not-allowed"
+			borderColor: "#d1d1d1"
 		},
 		textarea: {
 			minHeight: "7.5rem"
@@ -1041,7 +721,6 @@ var component = {
 		count: {
 			minWidth: "1rem",
 			height: "1rem",
-			paddingX: "0.25rem",
 			lineHeight: "1"
 		},
 		ring: {
@@ -1057,12 +736,10 @@ var component = {
 		}
 	},
 	field: {
-		gap: "0.5rem",
 		label: {
 			typography: "600 0.875rem/1.25rem 'Inter', sans-serif",
 			color: "#222222",
-			colorDisabled: "rgba(34, 34, 34, 0.208)",
-			gap: "0.25rem"
+			colorDisabled: "rgba(34, 34, 34, 0.208)"
 		},
 		requiredIndicator: {
 			color: "#c90002",
@@ -1175,8 +852,7 @@ var component = {
 	breadcrumbs: {
 		item: {
 			maxWidth: "11.25rem"
-		},
-		font: "400 0.75rem/1rem 'Inter', sans-serif"
+		}
 	},
 	cardLarge: {
 		maxWidth: "48rem"
@@ -1238,19 +914,8 @@ var component = {
 			background: "#f2f2f2"
 		}
 	},
-	transaction: {
-		credit: "#009762",
-		"credit-hover": "#009762",
-		debit: "#ff2b21",
-		"debit-hover": "#ff2b21",
-		pending: "#636363",
-		neutral: "#636363"
-	},
 	track: {
 		background: "#f2f2f2"
-	},
-	tooltip: {
-		border: "0.0625rem solid #d1d1d1"
 	}
 };
 var semantic = {
@@ -1308,35 +973,14 @@ var semantic = {
 		semibold: "600",
 		bold: "700"
 	},
-	zIndex: {
-		sticky: "10",
-		dropdown: "1000",
-		overlay: "1010",
-		modal: "1020"
-	},
 	border: {
 		"default": "0.0625rem solid #d1d1d1",
-		subtle: "0.0625rem solid #d1d1d1",
-		strong: "0.0625rem solid #636363",
 		focus: "0.125rem solid #222222",
-		tooltip: "0.0625rem solid #d1d1d1",
 		width: {
 			thin: "0.0625rem",
 			thick: "0.125rem"
 		},
 		focusOffset: "0.125rem",
-		radius: {
-			none: "0",
-			xs: "0.125rem",
-			sm: "0.25rem",
-			md: "0.5rem",
-			lg: "0.75rem",
-			xl: "1rem",
-			"2xl": "1.5rem",
-			"3xl": "2rem",
-			circle: "10rem"
-		},
-		emphasis: "0.0625rem solid #d1d1d1",
 		"input-hover": "0.0625rem solid #636363"
 	},
 	size: {
@@ -1377,25 +1021,6 @@ var semantic = {
 		menu: {
 			maxHeight: "18.75rem"
 		},
-		dimension: {
-			"1": "0.25rem",
-			"2": "0.5rem",
-			"4": "1rem",
-			"5": "1.25rem",
-			"6": "1.5rem",
-			"8": "2rem",
-			"12": "3rem",
-			"15": "3.75rem",
-			"18": "4.5rem",
-			"20": "5rem",
-			"30": "7.5rem",
-			"45": "11.25rem",
-			"50": "12.5rem",
-			"75": "18.75rem",
-			"90": "22.5rem",
-			"100": "25rem",
-			"192": "48rem"
-		},
 		icon: {
 			xs: "0.75rem",
 			sm: "1rem",
@@ -1413,106 +1038,28 @@ var semantic = {
 		}
 	},
 	spacing: {
-		separator: {
-			sm: "1rem",
-			md: "1.5rem",
-			lg: "2rem",
-			xl: "3rem"
-		},
-		component: {
-			xs: "0.25rem",
-			sm: "0.5rem",
-			md: "0.75rem",
-			lg: "1rem",
-			xl: "1.25rem",
-			"2xl": "1.5rem"
-		},
 		layout: {
-			none: "0",
-			xs: "0.25rem",
-			sm: "0.5rem",
-			md: "0.75rem",
-			lg: "1rem",
-			xl: "1.25rem",
-			"2xl": "1.5rem",
-			"3xl": "1.75rem",
-			"4xl": "2rem",
-			"5xl": "2.25rem",
-			"6xl": "2.5rem",
-			"7xl": "3rem",
-			"8xl": "3.5rem",
-			"9xl": "4rem",
-			"10xl": "5rem",
-			"11xl": "6rem",
 			auto: "auto"
 		}
 	},
 	color: {
 		text: {
 			"default": "#222222",
-			emphasis: "#222222",
-			subdued: "#636363",
-			inverse: "#ffffff",
+			inverse: "#fcfcfc",
 			disabled: "rgba(34, 34, 34, 0.208)",
-			interactive: "#0162bf",
-			"interactive-hover": "#0162bf",
-			"interactive-active": "#0162bf",
-			error: "#c90002",
 			success: "#017249",
 			warning: "#835c00",
 			muted: "#636363",
 			accent: "#0162bf",
-			"accent-hover": "#0162bf",
-			"accent-pressed": "#0162bf",
 			danger: "#c90002",
 			ai: "#9602eb",
 			serious: "#a54703"
 		},
-		background: {
-			"default": "#fcfcfc",
-			subtle: "#ffffff",
-			emphasis: "#222222",
-			"emphasis-hover": "#343a40",
-			"emphasis-active": "#16191C",
-			surface: "#f2f2f2",
-			inverse: "#222222",
-			interactive: "#0162bf",
-			"interactive-subtle": "#edf3fa",
-			"interactive-subtle-hover": "#e3ecf8",
-			"interactive-subtle-active": "#d8e5f6",
-			"interactive-hover": "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))",
-			"interactive-active": "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))",
-			error: "#c90002",
-			"error-hover": "color-mix(in srgb, #c90002, #ffffff calc(0.08 * 100%))",
-			"error-active": "color-mix(in srgb, #c90002, #ffffff calc(0.12 * 100%))",
-			"error-subtle": "#faf0ee",
-			success: "#017249",
-			"success-subtle": "#dbf9e8",
-			warning: "#835c00",
-			"warning-subtle": "#faf1e3",
-			disabled: "#f2f2f2",
-			neutral: "#f2f2f2",
-			"neutral-hover": "#ebebeb",
-			"neutral-active": "#e4e4e4",
-			transparent: "transparent",
-			progressTrack: "#f2f2f2",
-			page: "#fcfcfc",
-			overlay: "rgba(34, 34, 34, 0.5)",
-			"hover-overlay": "rgba(34, 34, 34, 0.1)",
-			"active-overlay": "rgba(34, 34, 34, 0.15)",
-			"inverse-overlay": "rgba(255, 255, 255, 0.2)"
-		},
 		border: {
 			"default": "#d1d1d1",
-			subtle: "#d1d1d1",
-			control: "#909090",
-			strong: "#343a40",
-			interactive: "#3190fe",
-			error: "#ff5444",
 			success: "#02a56c",
 			warning: "#bd8600",
 			none: "transparent",
-			emphasis: "#d1d1d1",
 			input: "#909090",
 			"input-hover": "#636363",
 			focus: "#222222",
@@ -1523,80 +1070,20 @@ var semantic = {
 		},
 		icon: {
 			"default": "#222222",
-			emphasis: "#222222",
-			subdued: "#636363",
 			disabled: "rgba(34, 34, 34, 0.208)",
-			inverse: "#ffffff",
-			interactive: "#0162bf",
-			"interactive-hover": "#0162bf",
-			"interactive-active": "#0162bf",
-			error: "#c90002",
+			inverse: "#fcfcfc",
 			success: "#017249",
 			warning: "#835c00",
 			muted: "#636363",
 			accent: "#0162bf",
-			"accent-hover": "#0162bf",
-			"accent-pressed": "#0162bf",
 			danger: "#c90002",
 			ai: "#9602eb",
 			serious: "#a54703"
 		},
-		financial: {
-			credit: "#009762",
-			"credit-hover": "#009762",
-			debit: "#ff2b21",
-			"debit-hover": "#ff2b21",
-			pending: "#636363",
-			neutral: "#636363"
-		},
 		category: {
-			blue: "#7a84ff",
-			"blue-strong": "#533eff",
-			"blue-emphasis": "#533eff",
-			"blue-subtle": "#f0f2fa",
-			purple: "#fd00fa",
-			"purple-strong": "#b100af",
-			"purple-emphasis": "#b100af",
-			"purple-subtle": "#faeff9",
-			pink: "#ff4989",
-			"pink-strong": "#c4005d",
-			"pink-emphasis": "#c4005d",
-			"pink-subtle": "#faeff1",
-			yellow: "#889903",
-			"yellow-strong": "#5d6900",
-			"yellow-emphasis": "#5d6900",
-			"yellow-subtle": "#eff6d4",
-			green: "#889903",
-			"green-strong": "#5d6900",
-			"green-emphasis": "#5d6900",
-			"green-subtle": "#eff6d4",
-			red: "#ff4989",
-			"red-strong": "#c4005d",
-			"red-emphasis": "#c4005d",
-			"red-subtle": "#faeff1",
-			orange: "#ff4989",
-			"orange-strong": "#c4005d",
-			"orange-emphasis": "#c4005d",
-			"orange-subtle": "#faeff1",
 			gray: "#909090",
 			"gray-strong": "#636363",
-			"gray-emphasis": "#636363",
-			"gray-subtle": "#f2f2f2",
-			"blue-text": "#533eff",
-			"purple-text": "#b100af",
-			"pink-text": "#c4005d",
-			"yellow-text": "#5d6900",
-			"green-text": "#5d6900",
-			"red-text": "#c4005d",
-			"orange-text": "#c4005d",
 			"gray-text": "#636363",
-			"blue-muted": "#f0f2fa",
-			"purple-muted": "#faeff9",
-			"pink-muted": "#faeff1",
-			"yellow-muted": "#eff6d4",
-			"green-muted": "#eff6d4",
-			"red-muted": "#faeff1",
-			"orange-muted": "#faeff1",
 			"gray-muted": "#f2f2f2",
 			olive: "#889903",
 			"olive-strong": "#5d6900",
@@ -1615,35 +1102,19 @@ var semantic = {
 			"magenta-text": "#b100af",
 			"magenta-muted": "#faeff9"
 		},
-		status: {
-			pending: "#636363",
-			"pending-bg": "#f2f2f2",
-			completed: "#017249",
-			"completed-bg": "#dbf9e8",
-			failed: "#c90002",
-			"failed-bg": "#faf0ee",
-			cancelled: "#636363",
-			"cancelled-bg": "#f2f2f2",
-			processing: "#0162bf",
-			"processing-bg": "#edf3fa",
-			scheduled: "#636363",
-			"scheduled-bg": "#f2f2f2"
-		},
 		fill: {
 			emphasis: "#222222",
-			"emphasis-hover": "#343a40",
-			"emphasis-pressed": "#16191C",
 			muted: "#f2f2f2",
 			inverse: "#222222",
 			accent: "#0162bf",
 			"accent-muted": "#edf3fa",
 			"accent-muted-hover": "#e3ecf8",
 			"accent-muted-pressed": "#d8e5f6",
-			"accent-hover": "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))",
-			"accent-pressed": "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))",
+			"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, #ffffff calc(0.08 * 100%))",
-			"danger-pressed": "color-mix(in srgb, #c90002, #ffffff calc(0.12 * 100%))",
+			"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",
 			success: "#017249",
 			"success-muted": "#dbf9e8",
@@ -1704,38 +1175,25 @@ var semantic = {
 		small: "400 0.875rem/1.25rem 'Inter', sans-serif",
 		overline: "700 0.75rem/1rem 'Inter', sans-serif",
 		caption: "400 0.75rem/1rem 'Inter', sans-serif",
-		button1: "500 1rem/1.5rem 'Inter', sans-serif",
-		button2: "500 0.875rem/1.5rem 'Inter', sans-serif",
-		button3: "400 0.75rem/1rem 'Inter', sans-serif",
-		label: "600 0.875rem/1.25rem 'Inter', sans-serif",
-		breadcrumb: "400 0.75rem/1rem 'Inter', sans-serif"
+		label: "600 0.875rem/1.25rem 'Inter', sans-serif"
 	},
 	motion: {
 		duration: {
-			normal: "200ms",
 			fast: "150ms",
 			slow: "300ms",
 			instant: "0ms",
 			moderate: "200ms"
 		},
 		easing: {
-			easeInOut: "ease-in-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",
 			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",
 		distance: {
 			sm: "0.5rem"
 		}