@common-origin/design-system 2.20.0 → 2.22.0

package/dist/styles/tokens.json

@@ -50,7 +50,9 @@
     "opacity": {
       "0": "0",
       "5": "0.05",
+      "8": "0.08",
       "10": "0.1",
+      "12": "0.12",
       "20": "0.2",
       "25": "0.25",
       "30": "0.3",
@@ -172,6 +174,286 @@
         "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",
@@ -397,102 +679,103 @@
   "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",
@@ -509,67 +792,67 @@
         "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)"
           }
         }
       },
@@ -590,7 +873,7 @@
     },
     "iconButton": {
       "primary": {
-        "backgroundColor": "#212529",
+        "backgroundColor": "#222222",
         "borderRadius": "0.25rem",
         "minWidth": "40px",
         "minHeight": "40px",
@@ -599,38 +882,38 @@
         "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"
@@ -656,19 +939,19 @@
       }
     },
     "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"
         }
       },
@@ -688,7 +971,7 @@
       }
     },
     "progressBar": {
-      "backgroundColor": "#dee2e6",
+      "backgroundColor": "#f2f2f2",
       "borderRadius": "0.25rem",
       "sizes": {
         "sm": {
@@ -708,8 +991,8 @@
     "input": {
       "default": {
         "backgroundColor": "#ffffff",
-        "textColor": "#212529",
-        "borderColor": "#6c757d",
+        "textColor": "#222222",
+        "borderColor": "#909090",
         "borderRadius": "0.25rem",
         "borderWidth": "0.0625rem",
         "paddingY": "11px",
@@ -717,31 +1000,31 @@
         "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": {
@@ -774,46 +1057,46 @@
       "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": {
@@ -890,7 +1173,7 @@
       "item": {
         "maxWidth": "11.25rem"
       },
-      "font": "400 0.75rem/1.125rem 'Inter', sans-serif"
+      "font": "400 0.75rem/1rem 'Inter', sans-serif"
     },
     "cardLarge": {
       "maxWidth": "48rem"
@@ -928,43 +1211,43 @@
     },
     "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"
     }
   },
   "semantic": {
@@ -988,7 +1271,11 @@
       "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",
@@ -1025,11 +1312,11 @@
       "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"
@@ -1046,8 +1333,8 @@
         "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",
@@ -1159,192 +1446,246 @@
     },
     "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": {
@@ -1362,9 +1703,9 @@
       "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": {
@@ -1440,9 +1781,9 @@
       }
     },
     "surface": {
-      "base": "#f8f9fa",
+      "base": "#fcfcfc",
       "raised": "#ffffff",
-      "scrim": "rgba(33, 37, 41, 0.5)"
+      "scrim": "rgba(34, 34, 34, 0.5)"
     }
   }
 }