@common-origin/design-system 2.21.0 → 2.23.0

package/dist/tokens/index.js

@@ -53,7 +53,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",
@@ -147,6 +149,7 @@ var base = {
 	},
 	color: {
 		transparent: "transparent",
+		white: "#ffffff",
 		gray: {
 			"100": "#fcfcfc",
 			"200": "#f9f9f9",
@@ -680,102 +683,103 @@ var base = {
 var component = {
 	button: {
 		primary: {
-			backgroundColor: "#212529",
-			textColor: "#ffffff",
+			backgroundColor: "#222222",
+			textColor: "#fcfcfc",
 			borderRadius: "0.25rem",
 			padding: "0.75rem 1rem",
 			font: "500 1rem/1.5rem 'Inter', sans-serif"
 		},
 		hover: {
-			backgroundColor: "#343a40"
+			backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.08 * 100%))"
 		},
 		active: {
-			backgroundColor: "#16191C"
+			backgroundColor: "color-mix(in srgb, #222222, #fcfcfc 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",
-				textColor: "#ffffff",
+				backgroundColor: "#0162bf",
+				textColor: "#fcfcfc",
 				hover: {
-					backgroundColor: "#0054B6"
+					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#004491"
+					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
 			emphasis: {
-				backgroundColor: "#0265DC",
-				textColor: "#ffffff",
+				backgroundColor: "#0162bf",
+				textColor: "#fcfcfc",
 				hover: {
-					backgroundColor: "#0054B6"
+					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#004491"
+					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			},
 			danger: {
-				backgroundColor: "#D31510",
-				textColor: "#ffffff",
+				backgroundColor: "#c90002",
+				textColor: "#fcfcfc",
 				hover: {
-					backgroundColor: "#B40000"
+					backgroundColor: "color-mix(in srgb, #c90002, #fcfcfc calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#930000"
+					backgroundColor: "color-mix(in srgb, #c90002, #fcfcfc 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",
@@ -792,67 +796,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",
-				textColor: "#ffffff",
+				backgroundColor: "#222222",
+				textColor: "#fcfcfc",
 				hover: {
-					backgroundColor: "#343a40"
+					backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#16191C"
+					backgroundColor: "color-mix(in srgb, #222222, #fcfcfc 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",
-				textColor: "#ffffff",
+				backgroundColor: "#0162bf",
+				textColor: "#fcfcfc",
 				hover: {
-					backgroundColor: "#0054B6"
+					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))"
 				},
 				active: {
-					backgroundColor: "#004491"
+					backgroundColor: "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
 				},
 				disabled: {
-					backgroundColor: "#dee2e6",
-					textColor: "#adb5bd"
+					backgroundColor: "#f2f2f2",
+					textColor: "rgba(34, 34, 34, 0.208)"
 				}
 			}
 		},
@@ -873,7 +877,7 @@ var component = {
 	},
 	iconButton: {
 		primary: {
-			backgroundColor: "#212529",
+			backgroundColor: "#222222",
 			borderRadius: "0.25rem",
 			minWidth: "40px",
 			minHeight: "40px",
@@ -882,38 +886,38 @@ var component = {
 			justifyContent: "center"
 		},
 		hover: {
-			backgroundColor: "#343a40"
+			backgroundColor: "color-mix(in srgb, #222222, #fcfcfc calc(0.08 * 100%))"
 		},
 		active: {
-			backgroundColor: "#16191C"
+			backgroundColor: "color-mix(in srgb, #222222, #fcfcfc 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"
@@ -939,19 +943,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"
 			}
 		},
@@ -971,7 +975,7 @@ var component = {
 		}
 	},
 	progressBar: {
-		backgroundColor: "#dee2e6",
+		backgroundColor: "#f2f2f2",
 		borderRadius: "0.25rem",
 		sizes: {
 			sm: {
@@ -991,8 +995,8 @@ var component = {
 	input: {
 		"default": {
 			backgroundColor: "#ffffff",
-			textColor: "#212529",
-			borderColor: "#6c757d",
+			textColor: "#222222",
+			borderColor: "#909090",
 			borderRadius: "0.25rem",
 			borderWidth: "0.0625rem",
 			paddingY: "11px",
@@ -1000,31 +1004,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: {
@@ -1057,46 +1061,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: {
@@ -1173,7 +1177,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"
@@ -1211,43 +1215,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 = {
@@ -1271,7 +1275,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",
@@ -1308,11 +1316,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"
@@ -1329,8 +1337,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",
@@ -1442,194 +1450,246 @@ var semantic = {
 	},
 	color: {
 		text: {
-			"default": "#212529",
-			emphasis: "#16191C",
-			subdued: "#495057",
-			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"
+			"default": "#222222",
+			emphasis: "#222222",
+			subdued: "#636363",
+			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": "#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, #fcfcfc calc(0.08 * 100%))",
+			"interactive-active": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))",
+			error: "#c90002",
+			"error-hover": "color-mix(in srgb, #c90002, #fcfcfc calc(0.08 * 100%))",
+			"error-active": "color-mix(in srgb, #c90002, #fcfcfc 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",
-			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"
+			"default": "#222222",
+			emphasis: "#222222",
+			subdued: "#636363",
+			disabled: "rgba(34, 34, 34, 0.208)",
+			inverse: "#fcfcfc",
+			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, #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",
+			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: {
@@ -1647,9 +1707,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: {
@@ -1725,9 +1785,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 = {