@common-origin/design-system 2.21.0 → 2.22.0

package/dist/data.js

@@ -51,7 +51,9 @@ var base = {
 	opacity: {
 		"0": "0",
 		"5": "0.05",
+		"8": "0.08",
 		"10": "0.1",
+		"12": "0.12",
 		"20": "0.2",
 		"25": "0.25",
 		"30": "0.3",
@@ -678,102 +680,103 @@ var base = {
 var component = {
 	button: {
 		primary: {
-			backgroundColor: "#212529",
+			backgroundColor: "#222222",
 			textColor: "#ffffff",
 			borderRadius: "0.25rem",
 			padding: "0.75rem 1rem",
 			font: "500 1rem/1.5rem 'Inter', sans-serif"
 		},
 		hover: {
-			backgroundColor: "#343a40"
+			backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.08 * 100%))"
 		},
 		active: {
-			backgroundColor: "#16191C"
+			backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.12 * 100%))"
 		},
 		focus: {
-			outline: "0.125rem solid #343a40",
+			outline: "0.125rem solid #222222",
 			outlineOffset: "2px"
 		},
 		disabled: {
-			backgroundColor: "#dee2e6",
-			textColor: "#adb5bd"
+			backgroundColor: "#f2f2f2",
+			textColor: "rgba(34, 34, 34, 0.208)"
 		},
 		variants: {
 			secondary: {
-				backgroundColor: "#dee2e6",
-				textColor: "#212529",
+				backgroundColor: "#f2f2f2",
+				textColor: "#222222",
 				hover: {
-					backgroundColor: "#ced4da"
+					backgroundColor: "#ebebeb"
 				},
 				active: {
-					backgroundColor: "#adb5bd"
+					backgroundColor: "#e4e4e4"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
 			naked: {
 				backgroundColor: "transparent",
-				textColor: "#212529",
+				textColor: "#222222",
 				hover: {
-					backgroundColor: "#e9ecef"
+					backgroundColor: "#f2f2f2"
 				},
 				active: {
-					backgroundColor: "#dee2e6"
+					backgroundColor: "#ebebeb"
 				},
 				disabled: {
 					backgroundColor: "transparent",
-					textColor: "#adb5bd"
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
 			accent: {
-				backgroundColor: "#0265DC",
+				backgroundColor: "#0162bf",
 				textColor: "#ffffff",
 				hover: {
-					backgroundColor: "#0054B6"
+					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#004491"
+					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
 			emphasis: {
-				backgroundColor: "#0265DC",
+				backgroundColor: "#0162bf",
 				textColor: "#ffffff",
 				hover: {
-					backgroundColor: "#0054B6"
+					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#004491"
+					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
 			danger: {
-				backgroundColor: "#D31510",
+				backgroundColor: "#c90002",
 				textColor: "#ffffff",
 				hover: {
-					backgroundColor: "#B40000"
+					backgroundColor: "color-mix(in srgb, #c90002, #ffffff calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#930000"
+					backgroundColor: "color-mix(in srgb, #c90002, #ffffff calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			}
 		},
 		sizes: {
 			small: {
 				padding: "0.5rem 0.75rem",
-				font: "500 0.75rem/1rem 'Inter', sans-serif"
+				font: "400 0.75rem/1rem 'Inter', sans-serif",
+				fontWeight: "500"
 			},
 			medium: {
 				padding: "0.5rem 1rem",
@@ -790,67 +793,67 @@ var component = {
 			size: "1.25rem"
 		},
 		"default": {
-			backgroundColor: "#e9ecef",
-			textColor: "#212529",
+			backgroundColor: "#f2f2f2",
+			textColor: "#222222",
 			borderRadius: "0.75rem",
 			padding: "2px 0.5rem",
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
 		hover: {
-			backgroundColor: "#dee2e6"
+			backgroundColor: "#ebebeb"
 		},
 		active: {
-			backgroundColor: "#ced4da"
+			backgroundColor: "#e4e4e4"
 		},
 		focus: {
-			outline: "0.125rem solid #343a40",
+			outline: "0.125rem solid #222222",
 			outlineOffset: "2px"
 		},
 		disabled: {
-			backgroundColor: "#e9ecef",
-			textColor: "#adb5bd"
+			backgroundColor: "#f2f2f2",
+			textColor: "rgba(34, 34, 34, 0.208)"
 		},
 		variants: {
 			emphasis: {
-				backgroundColor: "#212529",
+				backgroundColor: "#222222",
 				textColor: "#ffffff",
 				hover: {
-					backgroundColor: "#343a40"
+					backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#16191C"
+					backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
 			subtle: {
 				backgroundColor: "#ffffff",
-				textColor: "#212529",
+				textColor: "#222222",
 				hover: {
-					backgroundColor: "#f8f9fa"
+					backgroundColor: "#fcfcfc"
 				},
 				active: {
-					backgroundColor: "#e9ecef"
+					backgroundColor: "#f2f2f2"
 				},
 				disabled: {
 					backgroundColor: "#ffffff",
-					textColor: "#adb5bd"
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
 			interactive: {
-				backgroundColor: "#0265DC",
+				backgroundColor: "#0162bf",
 				textColor: "#ffffff",
 				hover: {
-					backgroundColor: "#0054B6"
+					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#004491"
+					backgroundColor: "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			}
 		},
@@ -871,7 +874,7 @@ var component = {
 	},
 	iconButton: {
 		primary: {
-			backgroundColor: "#212529",
+			backgroundColor: "#222222",
 			borderRadius: "0.25rem",
 			minWidth: "40px",
 			minHeight: "40px",
@@ -880,38 +883,38 @@ var component = {
 			justifyContent: "center"
 		},
 		hover: {
-			backgroundColor: "#343a40"
+			backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.08 * 100%))"
 		},
 		active: {
-			backgroundColor: "#16191C"
+			backgroundColor: "color-mix(in srgb, #222222, #ffffff calc(0.12 * 100%))"
 		},
 		focus: {
-			outline: "0.125rem solid #343a40",
+			outline: "0.125rem solid #222222",
 			outlineOffset: "2px"
 		},
 		disabled: {
-			backgroundColor: "#dee2e6"
+			backgroundColor: "#f2f2f2"
 		},
 		variants: {
 			secondary: {
-				backgroundColor: "#e9ecef",
+				backgroundColor: "#f2f2f2",
 				hover: {
-					backgroundColor: "#dee2e6"
+					backgroundColor: "#f2f2f2"
 				},
 				active: {
-					backgroundColor: "#f8f9fa"
+					backgroundColor: "#fcfcfc"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6"
+					backgroundColor: "#f2f2f2"
 				}
 			},
 			naked: {
 				backgroundColor: "transparent",
 				hover: {
-					backgroundColor: "#e9ecef"
+					backgroundColor: "#f2f2f2"
 				},
 				active: {
-					backgroundColor: "#dee2e6"
+					backgroundColor: "#f2f2f2"
 				},
 				disabled: {
 					backgroundColor: "transparent"
@@ -937,19 +940,19 @@ var component = {
 		}
 	},
 	separator: {
-		border: "0.0625rem solid #dee2e6",
+		border: "0.0625rem solid #d1d1d1",
 		margin: "2rem 0",
 		variants: {
 			"default": {
-				border: "0.0625rem solid #dee2e6",
+				border: "0.0625rem solid #d1d1d1",
 				margin: "2rem 0"
 			},
 			strong: {
-				border: "0.0625rem solid #343a40",
+				border: "0.0625rem solid #636363",
 				margin: "2rem 0"
 			},
 			minimal: {
-				border: "0.0625rem solid #dee2e6",
+				border: "0.0625rem solid #d1d1d1",
 				margin: "1.5rem 0"
 			}
 		},
@@ -969,7 +972,7 @@ var component = {
 		}
 	},
 	progressBar: {
-		backgroundColor: "#dee2e6",
+		backgroundColor: "#f2f2f2",
 		borderRadius: "0.25rem",
 		sizes: {
 			sm: {
@@ -989,8 +992,8 @@ var component = {
 	input: {
 		"default": {
 			backgroundColor: "#ffffff",
-			textColor: "#212529",
-			borderColor: "#6c757d",
+			textColor: "#222222",
+			borderColor: "#909090",
 			borderRadius: "0.25rem",
 			borderWidth: "0.0625rem",
 			paddingY: "11px",
@@ -998,31 +1001,31 @@ var component = {
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
 		placeholder: {
-			textColor: "#495057"
+			textColor: "#636363"
 		},
 		hover: {
-			borderColor: "#343a40"
+			borderColor: "#636363"
 		},
 		focus: {
-			borderColor: "#343a40",
-			outline: "0.125rem solid #343a40",
+			borderColor: "#222222",
+			outline: "0.125rem solid #222222",
 			outlineOffset: "2px"
 		},
 		error: {
-			borderColor: "#D31510",
+			borderColor: "#ff5444",
 			focus: {
-				borderColor: "#D31510",
-				outline: "0.125rem solid #343a40",
+				borderColor: "#ff5444",
+				outline: "0.125rem solid #222222",
 				outlineOffset: "2px"
 			},
 			hover: {
-				borderColor: "#D31510"
+				borderColor: "#ff5444"
 			}
 		},
 		disabled: {
-			backgroundColor: "#dee2e6",
-			textColor: "#adb5bd",
-			borderColor: "#dee2e6",
+			backgroundColor: "#f2f2f2",
+			textColor: "rgba(34, 34, 34, 0.208)",
+			borderColor: "#d1d1d1",
 			cursor: "not-allowed"
 		},
 		textarea: {
@@ -1055,46 +1058,46 @@ var component = {
 		gap: "0.5rem",
 		label: {
 			typography: "600 0.875rem/1.25rem 'Inter', sans-serif",
-			color: "#212529",
-			colorDisabled: "#adb5bd",
+			color: "#222222",
+			colorDisabled: "rgba(34, 34, 34, 0.208)",
 			gap: "0.25rem"
 		},
 		requiredIndicator: {
-			color: "#D31510",
+			color: "#c90002",
 			fontWeight: "700"
 		},
 		helperText: {
 			typography: "400 0.75rem/1rem 'Inter', sans-serif",
-			color: "#495057",
-			colorError: "#D31510"
+			color: "#636363",
+			colorError: "#c90002"
 		}
 	},
 	alert: {
 		severity: {
 			error: {
-				background: "#FFEBE7",
-				text: "#D31510"
+				background: "#faf0ee",
+				text: "#c90002"
 			},
 			warning: {
-				background: "#FFECCC",
-				text: "#B14C00"
+				background: "#faf1e3",
+				text: "#835c00"
 			},
 			info: {
-				background: "#E0F2FF",
-				text: "#0265DC"
+				background: "#edf3fa",
+				text: "#0162bf"
 			},
 			success: {
-				background: "#CEF8E0",
-				text: "#007A4D"
+				background: "#dbf9e8",
+				text: "#017249"
 			}
 		},
 		appearance: {
 			outlined: {
 				borderColor: {
-					error: "#D31510",
-					warning: "#B14C00",
-					info: "#0265DC",
-					success: "#007A4D"
+					error: "#ff5444",
+					warning: "#bd8600",
+					info: "#3190fe",
+					success: "#02a56c"
 				}
 			},
 			borderless: {
@@ -1171,7 +1174,7 @@ var component = {
 		item: {
 			maxWidth: "11.25rem"
 		},
-		font: "400 0.75rem/1.125rem 'Inter', sans-serif"
+		font: "400 0.75rem/1rem 'Inter', sans-serif"
 	},
 	cardLarge: {
 		maxWidth: "48rem"
@@ -1209,43 +1212,43 @@ var component = {
 	},
 	status: {
 		pending: {
-			text: "#825800",
-			background: "#FFF3D6"
+			text: "#636363",
+			background: "#f2f2f2"
 		},
 		completed: {
-			text: "#007A4D",
-			background: "#CEF8E0"
+			text: "#017249",
+			background: "#dbf9e8"
 		},
 		failed: {
-			text: "#D31510",
-			background: "#FFEBE7"
+			text: "#c90002",
+			background: "#faf0ee"
 		},
 		cancelled: {
-			text: "#495057",
-			background: "#e9ecef"
+			text: "#636363",
+			background: "#f2f2f2"
 		},
 		processing: {
-			text: "#0265DC",
-			background: "#E0F2FF"
+			text: "#0162bf",
+			background: "#edf3fa"
 		},
 		scheduled: {
-			text: "#7E2EBD",
-			background: "#F9F0FF"
+			text: "#636363",
+			background: "#f2f2f2"
 		}
 	},
 	transaction: {
-		credit: "#15A46E",
-		"credit-hover": "#008F5D",
-		debit: "#D31510",
-		"debit-hover": "#B40000",
-		pending: "#F68511",
-		neutral: "#6c757d"
+		credit: "#009762",
+		"credit-hover": "#009762",
+		debit: "#ff2b21",
+		"debit-hover": "#ff2b21",
+		pending: "#636363",
+		neutral: "#636363"
 	},
 	track: {
-		background: "#dee2e6"
+		background: "#f2f2f2"
 	},
 	tooltip: {
-		border: "0.125rem dotted #dee2e6"
+		border: "0.0625rem solid #d1d1d1"
 	}
 };
 var semantic = {
@@ -1269,7 +1272,11 @@ var semantic = {
 		disabled: "0.5",
 		full: "1",
 		hover: "0.8",
-		pressed: "0.7"
+		pressed: "0.7",
+		state: {
+			hover: "0.08",
+			pressed: "0.12"
+		}
 	},
 	fontFamily: {
 		body: "'Inter', sans-serif",
@@ -1306,11 +1313,11 @@ var semantic = {
 		modal: "1020"
 	},
 	border: {
-		"default": "0.0625rem solid #e9ecef",
-		subtle: "0.0625rem solid #dee2e6",
-		strong: "0.0625rem solid #343a40",
-		focus: "0.125rem solid #343a40",
-		tooltip: "0.125rem dotted #dee2e6",
+		"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"
@@ -1327,8 +1334,8 @@ var semantic = {
 			"3xl": "2rem",
 			circle: "10rem"
 		},
-		emphasis: "0.0625rem solid #dee2e6",
-		"input-hover": "0.0625rem solid #343a40"
+		emphasis: "0.0625rem solid #d1d1d1",
+		"input-hover": "0.0625rem solid #636363"
 	},
 	size: {
 		"100": "0.25rem",
@@ -1440,194 +1447,246 @@ var semantic = {
 	},
 	color: {
 		text: {
-			"default": "#212529",
-			emphasis: "#16191C",
-			subdued: "#495057",
+			"default": "#222222",
+			emphasis: "#222222",
+			subdued: "#636363",
 			inverse: "#ffffff",
-			disabled: "#adb5bd",
-			interactive: "#0265DC",
-			"interactive-hover": "#0054B6",
-			"interactive-active": "#004491",
-			error: "#D31510",
-			success: "#007A4D",
-			warning: "#B14C00",
-			muted: "#495057",
-			accent: "#0265DC",
-			"accent-hover": "#0054B6",
-			"accent-pressed": "#004491",
-			danger: "#D31510",
-			ai: "#9602eb"
+			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": "#f8f9fa",
+			"default": "#fcfcfc",
 			subtle: "#ffffff",
-			emphasis: "#212529",
+			emphasis: "#222222",
 			"emphasis-hover": "#343a40",
 			"emphasis-active": "#16191C",
-			surface: "#e9ecef",
-			inverse: "#343a40",
-			interactive: "#0265DC",
-			"interactive-subtle": "#E0F2FF",
-			"interactive-subtle-hover": "#CAE8FF",
-			"interactive-subtle-active": "#B5DEFF",
-			"interactive-hover": "#0054B6",
-			"interactive-active": "#004491",
-			error: "#D31510",
-			"error-hover": "#B40000",
-			"error-active": "#930000",
-			"error-subtle": "#FFEBE7",
-			success: "#007A4D",
-			"success-subtle": "#CEF8E0",
-			warning: "#B14C00",
-			"warning-subtle": "#FFECCC",
-			disabled: "#dee2e6",
-			neutral: "#dee2e6",
-			"neutral-hover": "#ced4da",
-			"neutral-active": "#adb5bd",
+			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: "#dee2e6",
-			page: "#f8f9fa",
-			overlay: "rgba(33, 37, 41, 0.5)",
-			"hover-overlay": "rgba(33, 37, 41, 0.1)",
-			"active-overlay": "rgba(33, 37, 41, 0.15)",
+			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": "#e9ecef",
-			subtle: "#dee2e6",
-			control: "#6c757d",
+			"default": "#d1d1d1",
+			subtle: "#d1d1d1",
+			control: "#909090",
 			strong: "#343a40",
-			interactive: "#0265DC",
-			error: "#D31510",
-			success: "#007A4D",
-			warning: "#B14C00",
+			interactive: "#3190fe",
+			error: "#ff5444",
+			success: "#02a56c",
+			warning: "#bd8600",
 			none: "transparent",
-			emphasis: "#dee2e6",
-			input: "#6c757d",
-			"input-hover": "#343a40",
-			focus: "#343a40",
-			accent: "#0265DC",
-			danger: "#D31510"
+			emphasis: "#d1d1d1",
+			input: "#909090",
+			"input-hover": "#636363",
+			focus: "#222222",
+			accent: "#3190fe",
+			danger: "#ff5444",
+			serious: "#ed6800",
+			ai: "#b76bff"
 		},
 		icon: {
-			"default": "#212529",
-			emphasis: "#16191C",
-			subdued: "#6c757d",
-			disabled: "#adb5bd",
+			"default": "#222222",
+			emphasis: "#222222",
+			subdued: "#636363",
+			disabled: "rgba(34, 34, 34, 0.208)",
 			inverse: "#ffffff",
-			interactive: "#0265DC",
-			"interactive-hover": "#0054B6",
-			"interactive-active": "#004491",
-			error: "#D31510",
-			success: "#007A4D",
-			warning: "#B14C00",
-			muted: "#6c757d",
-			accent: "#0265DC",
-			"accent-hover": "#0054B6",
-			"accent-pressed": "#004491",
-			danger: "#D31510",
-			ai: "#9602eb"
+			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"
 		},
 		financial: {
-			credit: "#15A46E",
-			"credit-hover": "#008F5D",
-			debit: "#D31510",
-			"debit-hover": "#B40000",
-			pending: "#F68511",
-			neutral: "#6c757d"
+			credit: "#009762",
+			"credit-hover": "#009762",
+			debit: "#ff2b21",
+			"debit-hover": "#ff2b21",
+			pending: "#636363",
+			neutral: "#636363"
 		},
 		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",
-			"purple-text": "#7E2EBD",
-			"pink-text": "#B90064",
-			"yellow-text": "#825800",
-			"green-text": "#007A4D",
-			"red-text": "#D31510",
-			"orange-text": "#B14C00",
-			"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"
+			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",
+			"olive-text": "#5d6900",
+			"olive-muted": "#eff6d4",
+			periwinkle: "#7a84ff",
+			"periwinkle-strong": "#533eff",
+			"periwinkle-text": "#533eff",
+			"periwinkle-muted": "#f0f2fa",
+			rose: "#ff4989",
+			"rose-strong": "#c4005d",
+			"rose-text": "#c4005d",
+			"rose-muted": "#faeff1",
+			magenta: "#fd00fa",
+			"magenta-strong": "#b100af",
+			"magenta-text": "#b100af",
+			"magenta-muted": "#faeff9"
 		},
 		status: {
-			pending: "#825800",
-			"pending-bg": "#FFF3D6",
-			completed: "#007A4D",
-			"completed-bg": "#CEF8E0",
-			failed: "#D31510",
-			"failed-bg": "#FFEBE7",
-			cancelled: "#495057",
-			"cancelled-bg": "#e9ecef",
-			processing: "#0265DC",
-			"processing-bg": "#E0F2FF",
-			scheduled: "#7E2EBD",
-			"scheduled-bg": "#F9F0FF"
+			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: "#212529",
+			emphasis: "#222222",
 			"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",
+			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%))",
+			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-muted": "#faf0ee",
+			success: "#017249",
+			"success-muted": "#dbf9e8",
+			warning: "#835c00",
+			"warning-muted": "#faf1e3",
+			disabled: "#f2f2f2",
+			"default": "#f2f2f2",
+			"default-hover": "#ebebeb",
+			"default-pressed": "#e4e4e4",
 			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)"
+			"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)",
+			serious: "#a54703",
+			"serious-muted": "#faf0eb",
+			"ai-muted": "#f4f0fa"
+		},
+		data: {
+			positive: "#009762",
+			negative: "#ff2b21",
+			categorical: {
+				"1": "#5d6900",
+				"2": "#7a84ff",
+				"3": "#ff4989",
+				"4": "#b100af",
+				other: "#909090"
+			},
+			diverging: {
+				balance: {
+					"1": "#5d6900",
+					"2": "#889903",
+					"3": "#f2f2f2",
+					"4": "#fd00fa",
+					"5": "#b100af"
+				}
+			},
+			sequential: {
+				periwinkle: {
+					"1": "#f0f2fa",
+					"2": "#d6dbf7",
+					"3": "#7a84ff",
+					"4": "#6464ff",
+					"5": "#1a1b51"
+				}
+			}
 		}
 	},
 	typography: {
@@ -1645,9 +1704,9 @@ var semantic = {
 		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: "500 0.75rem/1rem 'Inter', sans-serif",
+		button3: "400 0.75rem/1rem 'Inter', sans-serif",
 		label: "600 0.875rem/1.25rem 'Inter', sans-serif",
-		breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
+		breadcrumb: "400 0.75rem/1rem 'Inter', sans-serif"
 	},
 	motion: {
 		duration: {
@@ -1723,9 +1782,9 @@ var semantic = {
 		}
 	},
 	surface: {
-		base: "#f8f9fa",
+		base: "#fcfcfc",
 		raised: "#ffffff",
-		scrim: "rgba(33, 37, 41, 0.5)"
+		scrim: "rgba(34, 34, 34, 0.5)"
 	}
 };
 var tokensJson = {
@@ -2489,6 +2548,147 @@ var move = {
 	decorativeDefault: false,
 	ariaLabelDefault: "Move"
 };
+var statusError = {
+	path: "M22.5 12L17.25 21.0933L6.75 21.0933L1.5 12L6.75 2.9067L17.25 2.9067ZM16.0953 4.9067L7.9047 4.9067L3.8094 12L7.9047 19.0933L16.0953 19.0933L20.1906 12ZM9.2071 7.7929L16.2071 14.7929L14.7929 16.2071L7.7929 9.2071ZM16.2071 9.2071L9.2071 16.2071L7.7929 14.7929L14.7929 7.7929Z",
+	name: "statusError",
+	description: "X inside a hexagon with a flat top edge",
+	category: "status",
+	aliases: [
+		"error",
+		"failed",
+		"blocked",
+		"danger"
+	],
+	intent: "Use for the error status: failed or blocked, needs action now (decision 0045). Shows in the danger colour with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Error"
+};
+var statusSerious = {
+	path: "M12 2L22 12L12 22L2 12ZM4.8284 12L12 19.1716L19.1716 12L12 4.8284ZM13 7.5L13 13.75L11 13.75L11 7.5ZM12 15.25A1 1 0 1 1 12 17.25A1 1 0 1 1 12 15.25Z",
+	name: "statusSerious",
+	description: "Exclamation mark inside a diamond",
+	category: "status",
+	aliases: [
+		"serious",
+		"severe",
+		"critical-warning"
+	],
+	intent: "Use for the serious status: will fail or cause harm without action (decision 0045). Shows in the serious colour with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Serious"
+};
+var statusWarning = {
+	path: "M12 2.5L22 20.5L2 20.5ZM5.399 18.5L18.601 18.5L12 6.6183ZM13 10.5L13 14.5L11 14.5L11 10.5ZM12 16A1 1 0 1 1 12 18A1 1 0 1 1 12 16Z",
+	name: "statusWarning",
+	description: "Exclamation mark inside a triangle",
+	category: "status",
+	aliases: [
+		"warning",
+		"caution",
+		"attention"
+	],
+	intent: "Use for the warning status: needs attention, not blocking (decision 0045). Shows in the warning colour with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Warning"
+};
+var statusSuccess = {
+	path: "M12 2A10 10 0 1 1 12 22A10 10 0 1 1 12 2ZM12 4A8 8 0 1 0 12 20A8 8 0 1 0 12 4ZM11.0674 16.4814L7.29297 12.707L8.70703 11.293L10.9326 13.5176L15.2314 8.35937L16.7686 9.64062L11.0674 16.4814Z",
+	name: "statusSuccess",
+	description: "Checkmark inside a circle",
+	category: "status",
+	aliases: [
+		"success",
+		"completed",
+		"done"
+	],
+	intent: "Use for the success status: done as intended (decision 0045). Shows in the success colour with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Success"
+};
+var statusInfo = {
+	path: "M7 2H17A5 5 0 0 1 22 7V17A5 5 0 0 1 17 22H7A5 5 0 0 1 2 17V7A5 5 0 0 1 7 2ZM7 4A3 3 0 0 0 4 7V17A3 3 0 0 0 7 20H17A3 3 0 0 0 20 17V7A3 3 0 0 0 17 4ZM13 10L13 17L11 17L11 10ZM12 6.5A1 1 0 1 1 12 8.5A1 1 0 1 1 12 6.5Z",
+	name: "statusInfo",
+	description: "Letter i inside a rounded square",
+	category: "status",
+	aliases: [
+		"info",
+		"information",
+		"notice"
+	],
+	intent: "Use for the info status: neutral information (decision 0045). Shows in the accent colour with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Information"
+};
+var statusInProgress = {
+	path: "M12 2A10 10 0 1 1 12 22A10 10 0 1 1 12 2ZM12 4A8 8 0 1 0 12 20A8 8 0 1 0 12 4ZM12 6A6 6 0 0 1 12 18Z",
+	name: "statusInProgress",
+	description: "Circle with its right half filled",
+	category: "status",
+	aliases: [
+		"in progress",
+		"processing",
+		"running"
+	],
+	intent: "Use for the in-progress status: running now (decision 0045). Shows in the accent colour with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "In progress"
+};
+var statusPending = {
+	path: "M12 2A10 10 0 1 1 12 22A10 10 0 1 1 12 2ZM12 4A8 8 0 1 0 12 20A8 8 0 1 0 12 4ZM13 6.5L13 13L11 13L11 6.5ZM11.8318 11.4531L16.1318 14.1531L15.0682 15.8469L10.7682 13.1469Z",
+	name: "statusPending",
+	description: "Clock face",
+	category: "status",
+	aliases: [
+		"pending",
+		"waiting",
+		"clock"
+	],
+	intent: "Use for the pending status: waiting on someone or something else (decision 0045). Neutral colour, with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Pending"
+};
+var statusScheduled = {
+	path: "M6 4H18A3 3 0 0 1 21 7V18A3 3 0 0 1 18 21H6A3 3 0 0 1 3 18V7A3 3 0 0 1 6 4ZM6 6A1 1 0 0 0 5 7V18A1 1 0 0 0 6 19H18A1 1 0 0 0 19 18V7A1 1 0 0 0 18 6ZM4 9L20 9L20 11L4 11ZM9 2L9 6.5L7 6.5L7 2ZM17 2L17 6.5L15 6.5L15 2Z",
+	name: "statusScheduled",
+	description: "Calendar page",
+	category: "status",
+	aliases: [
+		"scheduled",
+		"calendar",
+		"planned"
+	],
+	intent: "Use for the scheduled status: starts at a set time (decision 0045). Neutral colour, with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Scheduled"
+};
+var statusNotStarted = {
+	path: "M13.4781 2.1098A10 10 0 0 1 17.9482 3.9614L16.7586 5.5691A8 8 0 0 0 13.1825 4.0879ZM20.0386 6.0518A10 10 0 0 1 21.8902 10.5219L19.9121 10.8175A8 8 0 0 0 18.4309 7.2414ZM21.8902 13.4781A10 10 0 0 1 20.0386 17.9482L18.4309 16.7586A8 8 0 0 0 19.9121 13.1825ZM17.9482 20.0386A10 10 0 0 1 13.4781 21.8902L13.1825 19.9121A8 8 0 0 0 16.7586 18.4309ZM10.5219 21.8902A10 10 0 0 1 6.0518 20.0386L7.2414 18.4309A8 8 0 0 0 10.8175 19.9121ZM3.9614 17.9482A10 10 0 0 1 2.1098 13.4781L4.0879 13.1825A8 8 0 0 0 5.5691 16.7586ZM2.1098 10.5219A10 10 0 0 1 3.9614 6.0518L5.5691 7.2414A8 8 0 0 0 4.0879 10.8175ZM6.0518 3.9614A10 10 0 0 1 10.5219 2.1098L10.8175 4.0879A8 8 0 0 0 7.2414 5.5691Z",
+	name: "statusNotStarted",
+	description: "Dashed circle",
+	category: "status",
+	aliases: [
+		"not started",
+		"draft",
+		"to do"
+	],
+	intent: "Use for the not-started status: exists but not begun or submitted, such as a draft (decision 0045). Neutral colour, with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Not started"
+};
+var statusCancelled = {
+	path: "M12 2A10 10 0 1 1 12 22A10 10 0 1 1 12 2ZM12 4A8 8 0 1 0 12 20A8 8 0 1 0 12 4ZM6.3071 4.8929L19.1071 17.6929L17.6929 19.1071L4.8929 6.3071Z",
+	name: "statusCancelled",
+	description: "Circle with a diagonal line through it",
+	category: "status",
+	aliases: [
+		"cancelled",
+		"canceled",
+		"stopped"
+	],
+	intent: "Use for the cancelled status: stopped on purpose (decision 0045). Neutral colour, with a label",
+	decorativeDefault: false,
+	ariaLabelDefault: "Cancelled"
+};
 var iconsJson = {
 	ai: ai,
 	add: add,
@@ -2554,7 +2754,17 @@ var iconsJson = {
 	meatballs: meatballs,
 	creditCard: creditCard,
 	wallet: wallet,
-	move: move
+	move: move,
+	statusError: statusError,
+	statusSerious: statusSerious,
+	statusWarning: statusWarning,
+	statusSuccess: statusSuccess,
+	statusInfo: statusInfo,
+	statusInProgress: statusInProgress,
+	statusPending: statusPending,
+	statusScheduled: statusScheduled,
+	statusNotStarted: statusNotStarted,
+	statusCancelled: statusCancelled
 };
 
 // The published types come from the generated `src/styles/tokens.ts`, which carries each token's