@common-origin/design-system 2.20.0 → 2.22.0

package/dist/tokens/index.mjs

@@ -49,7 +49,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",
@@ -171,6 +173,286 @@ var base = {
 			"1100": "rgba(34, 34, 34, 0.706)",
 			"1200": "rgba(34, 34, 34, 1)"
 		},
+		accent: {
+			"100": "#fbfcfd",
+			"200": "#f7f9fc",
+			"300": "#edf3fa",
+			"400": "#e3ecf8",
+			"500": "#d8e5f6",
+			"600": "#cbdef7",
+			"700": "#b9d3f5",
+			"800": "#3190fe",
+			"900": "#0082fc",
+			"1000": "#0278e7",
+			"1100": "#0162bf",
+			"1200": "#0f2339"
+		},
+		"accent-alpha": {
+			"100": "rgba(5, 68, 130, 0.016)",
+			"200": "rgba(5, 68, 161, 0.032)",
+			"300": "rgba(1, 86, 185, 0.071)",
+			"400": "rgba(0, 82, 191, 0.11)",
+			"500": "rgba(0, 85, 196, 0.153)",
+			"600": "rgba(0, 93, 216, 0.204)",
+			"700": "rgba(0, 95, 219, 0.275)",
+			"800": "rgba(0, 118, 254, 0.808)",
+			"900": "rgba(0, 130, 252, 1)",
+			"1000": "rgba(0, 119, 231, 0.993)",
+			"1100": "rgba(0, 98, 191, 0.997)",
+			"1200": "rgba(0, 21, 45, 0.942)"
+		},
+		success: {
+			"100": "#f9fdfa",
+			"200": "#f0fcf5",
+			"300": "#dbf9e8",
+			"400": "#c4f7da",
+			"500": "#aff3ce",
+			"600": "#98eec0",
+			"700": "#77e6af",
+			"800": "#02a56c",
+			"900": "#009762",
+			"1000": "#018b5a",
+			"1100": "#017249",
+			"1200": "#12261b"
+		},
+		"success-alpha": {
+			"100": "rgba(5, 172, 47, 0.024)",
+			"200": "rgba(1, 204, 86, 0.059)",
+			"300": "rgba(1, 213, 93, 0.142)",
+			"400": "rgba(1, 221, 96, 0.232)",
+			"500": "rgba(0, 217, 99, 0.314)",
+			"600": "rgba(0, 213, 99, 0.404)",
+			"700": "rgba(0, 208, 105, 0.534)",
+			"800": "rgba(0, 164, 107, 0.993)",
+			"900": "rgba(0, 151, 98, 1)",
+			"1000": "rgba(0, 139, 90, 0.997)",
+			"1100": "rgba(0, 114, 72, 0.997)",
+			"1200": "rgba(0, 22, 10, 0.93)"
+		},
+		warning: {
+			"100": "#fdfcfa",
+			"200": "#fcf9f4",
+			"300": "#faf1e3",
+			"400": "#f8e9d1",
+			"500": "#f7e1be",
+			"600": "#f7d8a5",
+			"700": "#f7cb80",
+			"800": "#bd8600",
+			"900": "#ad7b00",
+			"1000": "#9f7102",
+			"1100": "#835c00",
+			"1200": "#292111"
+		},
+		"warning-alpha": {
+			"100": "rgba(155, 105, 5, 0.02)",
+			"200": "rgba(187, 119, 5, 0.044)",
+			"300": "rgba(210, 128, 0, 0.11)",
+			"400": "rgba(216, 133, 1, 0.181)",
+			"500": "rgba(224, 137, 0, 0.255)",
+			"600": "rgba(232, 145, 0, 0.353)",
+			"700": "rgba(239, 151, 0, 0.499)",
+			"800": "rgba(189, 134, 0, 1)",
+			"900": "rgba(173, 123, 0, 1)",
+			"1000": "rgba(158, 112, 0, 0.993)",
+			"1100": "rgba(131, 92, 0, 1)",
+			"1200": "rgba(26, 17, 0, 0.934)"
+		},
+		serious: {
+			"100": "#fefcfb",
+			"200": "#fcf8f6",
+			"300": "#faf0eb",
+			"400": "#f8e8e0",
+			"500": "#f7dfd4",
+			"600": "#f6d5c5",
+			"700": "#f7c7b0",
+			"800": "#ed6800",
+			"900": "#da5f00",
+			"1000": "#c85701",
+			"1100": "#a54703",
+			"1200": "#341c10"
+		},
+		"serious-alpha": {
+			"100": "rgba(193, 68, 5, 0.016)",
+			"200": "rgba(172, 61, 5, 0.036)",
+			"300": "rgba(192, 65, 2, 0.079)",
+			"400": "rgba(198, 66, 1, 0.122)",
+			"500": "rgba(208, 66, 1, 0.169)",
+			"600": "rgba(216, 71, 1, 0.228)",
+			"700": "rgba(229, 74, 0, 0.31)",
+			"800": "rgba(237, 104, 0, 1)",
+			"900": "rgba(218, 95, 0, 1)",
+			"1000": "rgba(200, 86, 0, 0.997)",
+			"1100": "rgba(164, 69, 0, 0.989)",
+			"1200": "rgba(39, 13, 0, 0.938)"
+		},
+		danger: {
+			"100": "#fefcfc",
+			"200": "#fcf8f7",
+			"300": "#faf0ee",
+			"400": "#f8e7e4",
+			"500": "#f8dfdb",
+			"600": "#f7d4ce",
+			"700": "#f7c6be",
+			"800": "#ff5444",
+			"900": "#ff2b21",
+			"1000": "#f30004",
+			"1100": "#c90002",
+			"1200": "#3d1611"
+		},
+		"danger-alpha": {
+			"100": "rgba(172, 5, 5, 0.012)",
+			"200": "rgba(161, 36, 5, 0.032)",
+			"300": "rgba(180, 31, 1, 0.067)",
+			"400": "rgba(189, 29, 0, 0.106)",
+			"500": "rgba(206, 30, 1, 0.142)",
+			"600": "rgba(214, 32, 1, 0.193)",
+			"700": "rgba(224, 31, 0, 0.255)",
+			"800": "rgba(255, 22, 0, 0.734)",
+			"900": "rgba(255, 12, 0, 0.871)",
+			"1000": "rgba(243, 0, 4, 1)",
+			"1100": "rgba(201, 0, 2, 1)",
+			"1200": "rgba(47, 6, 0, 0.934)"
+		},
+		ai: {
+			"100": "#fdfcfe",
+			"200": "#faf8fc",
+			"300": "#f4f0fa",
+			"400": "#efe8f8",
+			"500": "#eae0f7",
+			"600": "#e4d6f6",
+			"700": "#ddc9f7",
+			"800": "#b76bff",
+			"900": "#b056ff",
+			"1000": "#aa3dff",
+			"1100": "#9602eb",
+			"1200": "#2e1743"
+		},
+		"ai-alpha": {
+			"100": "rgba(88, 5, 172, 0.012)",
+			"200": "rgba(76, 5, 148, 0.028)",
+			"300": "rgba(69, 1, 170, 0.059)",
+			"400": "rgba(79, 2, 178, 0.091)",
+			"500": "rgba(83, 1, 189, 0.122)",
+			"600": "rgba(87, 0, 199, 0.161)",
+			"700": "rgba(95, 0, 217, 0.212)",
+			"800": "rgba(131, 0, 255, 0.581)",
+			"900": "rgba(136, 0, 255, 0.663)",
+			"1000": "rgba(143, 0, 255, 0.761)",
+			"1100": "rgba(149, 0, 235, 0.993)",
+			"1200": "rgba(25, 0, 48, 0.91)"
+		},
+		olive: {
+			"100": "#fbfdf4",
+			"200": "#f7fbe8",
+			"300": "#eff6d4",
+			"400": "#e6f0bf",
+			"500": "#deebaa",
+			"600": "#d5e493",
+			"700": "#c9da73",
+			"800": "#889903",
+			"900": "#7d8c02",
+			"1000": "#738000",
+			"1100": "#5d6900",
+			"1200": "#202410"
+		},
+		"olive-alpha": {
+			"100": "rgba(164, 210, 5, 0.044)",
+			"200": "rgba(167, 211, 2, 0.091)",
+			"300": "rgba(160, 202, 1, 0.169)",
+			"400": "rgba(155, 195, 0, 0.251)",
+			"500": "rgba(156, 195, 1, 0.334)",
+			"600": "rgba(156, 191, 0, 0.424)",
+			"700": "rgba(157, 188, 0, 0.55)",
+			"800": "rgba(135, 152, 0, 0.989)",
+			"900": "rgba(124, 139, 0, 0.993)",
+			"1000": "rgba(115, 128, 0, 1)",
+			"1100": "rgba(93, 105, 0, 1)",
+			"1200": "rgba(17, 22, 0, 0.938)"
+		},
+		periwinkle: {
+			"100": "#fcfcfd",
+			"200": "#f8f9fc",
+			"300": "#f0f2fa",
+			"400": "#e8ebf9",
+			"500": "#dfe3f7",
+			"600": "#d6dbf7",
+			"700": "#c8cff6",
+			"800": "#7a84ff",
+			"900": "#6e74fe",
+			"1000": "#6464ff",
+			"1100": "#533eff",
+			"1200": "#1a1b51"
+		},
+		"periwinkle-alpha": {
+			"100": "rgba(5, 5, 88, 0.012)",
+			"200": "rgba(5, 41, 148, 0.028)",
+			"300": "rgba(1, 35, 170, 0.059)",
+			"400": "rgba(2, 35, 189, 0.091)",
+			"500": "rgba(1, 33, 192, 0.126)",
+			"600": "rgba(0, 31, 205, 0.161)",
+			"700": "rgba(0, 33, 213, 0.216)",
+			"800": "rgba(0, 19, 255, 0.522)",
+			"900": "rgba(0, 11, 253, 0.569)",
+			"1000": "rgba(0, 0, 255, 0.608)",
+			"1100": "rgba(28, 0, 255, 0.757)",
+			"1200": "rgba(0, 1, 61, 0.899)"
+		},
+		rose: {
+			"100": "#fefcfc",
+			"200": "#fcf8f9",
+			"300": "#faeff1",
+			"400": "#f8e7ea",
+			"500": "#f8dee3",
+			"600": "#f7d3da",
+			"700": "#f7c4cf",
+			"800": "#ff4989",
+			"900": "#ff0f7c",
+			"1000": "#ec0071",
+			"1100": "#c4005d",
+			"1200": "#3c1520"
+		},
+		"rose-alpha": {
+			"100": "rgba(172, 5, 5, 0.012)",
+			"200": "rgba(148, 5, 41, 0.028)",
+			"300": "rgba(176, 1, 33, 0.063)",
+			"400": "rgba(181, 2, 34, 0.095)",
+			"500": "rgba(201, 1, 40, 0.13)",
+			"600": "rgba(209, 1, 41, 0.173)",
+			"700": "rgba(221, 1, 48, 0.232)",
+			"800": "rgba(255, 0, 90, 0.714)",
+			"900": "rgba(255, 0, 116, 0.942)",
+			"1000": "rgba(236, 0, 113, 1)",
+			"1100": "rgba(196, 0, 93, 1)",
+			"1200": "rgba(43, 0, 12, 0.918)"
+		},
+		magenta: {
+			"100": "#fdfbfd",
+			"200": "#fdf8fc",
+			"300": "#faeff9",
+			"400": "#f9e6f7",
+			"500": "#f8dcf5",
+			"600": "#f7d0f3",
+			"700": "#f7bff2",
+			"800": "#fd00fa",
+			"900": "#e900e6",
+			"1000": "#d700d4",
+			"1100": "#b100af",
+			"1200": "#371535"
+		},
+		"magenta-alpha": {
+			"100": "rgba(130, 5, 130, 0.016)",
+			"200": "rgba(184, 5, 148, 0.028)",
+			"300": "rgba(176, 1, 160, 0.063)",
+			"400": "rgba(194, 2, 174, 0.099)",
+			"500": "rgba(204, 1, 183, 0.138)",
+			"600": "rgba(212, 1, 190, 0.185)",
+			"700": "rgba(223, 0, 203, 0.251)",
+			"800": "rgba(253, 0, 250, 1)",
+			"900": "rgba(233, 0, 230, 1)",
+			"1000": "rgba(215, 0, 212, 1)",
+			"1100": "rgba(177, 0, 175, 1)",
+			"1200": "rgba(37, 0, 35, 0.918)"
+		},
 		neutral: {
 			"100": "#f8f9fa",
 			"200": "#e9ecef",
@@ -396,102 +678,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",
@@ -508,67 +791,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)"
 				}
 			}
 		},
@@ -589,7 +872,7 @@ var component = {
 	},
 	iconButton: {
 		primary: {
-			backgroundColor: "#212529",
+			backgroundColor: "#222222",
 			borderRadius: "0.25rem",
 			minWidth: "40px",
 			minHeight: "40px",
@@ -598,38 +881,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"
@@ -655,19 +938,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"
 			}
 		},
@@ -687,7 +970,7 @@ var component = {
 		}
 	},
 	progressBar: {
-		backgroundColor: "#dee2e6",
+		backgroundColor: "#f2f2f2",
 		borderRadius: "0.25rem",
 		sizes: {
 			sm: {
@@ -707,8 +990,8 @@ var component = {
 	input: {
 		"default": {
 			backgroundColor: "#ffffff",
-			textColor: "#212529",
-			borderColor: "#6c757d",
+			textColor: "#222222",
+			borderColor: "#909090",
 			borderRadius: "0.25rem",
 			borderWidth: "0.0625rem",
 			paddingY: "11px",
@@ -716,31 +999,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: {
@@ -773,46 +1056,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: {
@@ -889,7 +1172,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"
@@ -927,43 +1210,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 = {
@@ -987,7 +1270,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",
@@ -1024,11 +1311,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"
@@ -1045,8 +1332,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",
@@ -1158,192 +1445,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"
+			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"
+			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: {
@@ -1361,9 +1702,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: {
@@ -1439,9 +1780,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 = {