@common-origin/design-system 2.21.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",
@@ -677,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",
@@ -789,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)"
           }
         }
       },
@@ -870,7 +873,7 @@
     },
     "iconButton": {
       "primary": {
-        "backgroundColor": "#212529",
+        "backgroundColor": "#222222",
         "borderRadius": "0.25rem",
         "minWidth": "40px",
         "minHeight": "40px",
@@ -879,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"
@@ -936,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"
         }
       },
@@ -968,7 +971,7 @@
       }
     },
     "progressBar": {
-      "backgroundColor": "#dee2e6",
+      "backgroundColor": "#f2f2f2",
       "borderRadius": "0.25rem",
       "sizes": {
         "sm": {
@@ -988,8 +991,8 @@
     "input": {
       "default": {
         "backgroundColor": "#ffffff",
-        "textColor": "#212529",
-        "borderColor": "#6c757d",
+        "textColor": "#222222",
+        "borderColor": "#909090",
         "borderRadius": "0.25rem",
         "borderWidth": "0.0625rem",
         "paddingY": "11px",
@@ -997,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": {
@@ -1054,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": {
@@ -1170,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"
@@ -1208,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": {
@@ -1268,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",
@@ -1305,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"
@@ -1326,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",
@@ -1439,194 +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",
-        "ai": "#9602eb"
+        "disabled": "rgba(34, 34, 34, 0.208)",
+        "interactive": "#0162bf",
+        "interactive-hover": "#0162bf",
+        "interactive-active": "#0162bf",
+        "error": "#c90002",
+        "success": "#017249",
+        "warning": "#835c00",
+        "muted": "#636363",
+        "accent": "#0162bf",
+        "accent-hover": "#0162bf",
+        "accent-pressed": "#0162bf",
+        "danger": "#c90002",
+        "ai": "#9602eb",
+        "serious": "#a54703"
       },
       "background": {
-        "default": "#f8f9fa",
+        "default": "#fcfcfc",
         "subtle": "#ffffff",
-        "emphasis": "#212529",
+        "emphasis": "#222222",
         "emphasis-hover": "#343a40",
         "emphasis-active": "#16191C",
-        "surface": "#e9ecef",
-        "inverse": "#343a40",
-        "interactive": "#0265DC",
-        "interactive-subtle": "#E0F2FF",
-        "interactive-subtle-hover": "#CAE8FF",
-        "interactive-subtle-active": "#B5DEFF",
-        "interactive-hover": "#0054B6",
-        "interactive-active": "#004491",
-        "error": "#D31510",
-        "error-hover": "#B40000",
-        "error-active": "#930000",
-        "error-subtle": "#FFEBE7",
-        "success": "#007A4D",
-        "success-subtle": "#CEF8E0",
-        "warning": "#B14C00",
-        "warning-subtle": "#FFECCC",
-        "disabled": "#dee2e6",
-        "neutral": "#dee2e6",
-        "neutral-hover": "#ced4da",
-        "neutral-active": "#adb5bd",
+        "surface": "#f2f2f2",
+        "inverse": "#222222",
+        "interactive": "#0162bf",
+        "interactive-subtle": "#edf3fa",
+        "interactive-subtle-hover": "#e3ecf8",
+        "interactive-subtle-active": "#d8e5f6",
+        "interactive-hover": "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))",
+        "interactive-active": "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))",
+        "error": "#c90002",
+        "error-hover": "color-mix(in srgb, #c90002, #ffffff calc(0.08 * 100%))",
+        "error-active": "color-mix(in srgb, #c90002, #ffffff calc(0.12 * 100%))",
+        "error-subtle": "#faf0ee",
+        "success": "#017249",
+        "success-subtle": "#dbf9e8",
+        "warning": "#835c00",
+        "warning-subtle": "#faf1e3",
+        "disabled": "#f2f2f2",
+        "neutral": "#f2f2f2",
+        "neutral-hover": "#ebebeb",
+        "neutral-active": "#e4e4e4",
         "transparent": "transparent",
-        "progressTrack": "#dee2e6",
-        "page": "#f8f9fa",
-        "overlay": "rgba(33, 37, 41, 0.5)",
-        "hover-overlay": "rgba(33, 37, 41, 0.1)",
-        "active-overlay": "rgba(33, 37, 41, 0.15)",
+        "progressTrack": "#f2f2f2",
+        "page": "#fcfcfc",
+        "overlay": "rgba(34, 34, 34, 0.5)",
+        "hover-overlay": "rgba(34, 34, 34, 0.1)",
+        "active-overlay": "rgba(34, 34, 34, 0.15)",
         "inverse-overlay": "rgba(255, 255, 255, 0.2)"
       },
       "border": {
-        "default": "#e9ecef",
-        "subtle": "#dee2e6",
-        "control": "#6c757d",
+        "default": "#d1d1d1",
+        "subtle": "#d1d1d1",
+        "control": "#909090",
         "strong": "#343a40",
-        "interactive": "#0265DC",
-        "error": "#D31510",
-        "success": "#007A4D",
-        "warning": "#B14C00",
+        "interactive": "#3190fe",
+        "error": "#ff5444",
+        "success": "#02a56c",
+        "warning": "#bd8600",
         "none": "transparent",
-        "emphasis": "#dee2e6",
-        "input": "#6c757d",
-        "input-hover": "#343a40",
-        "focus": "#343a40",
-        "accent": "#0265DC",
-        "danger": "#D31510"
+        "emphasis": "#d1d1d1",
+        "input": "#909090",
+        "input-hover": "#636363",
+        "focus": "#222222",
+        "accent": "#3190fe",
+        "danger": "#ff5444",
+        "serious": "#ed6800",
+        "ai": "#b76bff"
       },
       "icon": {
-        "default": "#212529",
-        "emphasis": "#16191C",
-        "subdued": "#6c757d",
-        "disabled": "#adb5bd",
+        "default": "#222222",
+        "emphasis": "#222222",
+        "subdued": "#636363",
+        "disabled": "rgba(34, 34, 34, 0.208)",
         "inverse": "#ffffff",
-        "interactive": "#0265DC",
-        "interactive-hover": "#0054B6",
-        "interactive-active": "#004491",
-        "error": "#D31510",
-        "success": "#007A4D",
-        "warning": "#B14C00",
-        "muted": "#6c757d",
-        "accent": "#0265DC",
-        "accent-hover": "#0054B6",
-        "accent-pressed": "#004491",
-        "danger": "#D31510",
-        "ai": "#9602eb"
+        "interactive": "#0162bf",
+        "interactive-hover": "#0162bf",
+        "interactive-active": "#0162bf",
+        "error": "#c90002",
+        "success": "#017249",
+        "warning": "#835c00",
+        "muted": "#636363",
+        "accent": "#0162bf",
+        "accent-hover": "#0162bf",
+        "accent-pressed": "#0162bf",
+        "danger": "#c90002",
+        "ai": "#9602eb",
+        "serious": "#a54703"
       },
       "financial": {
-        "credit": "#15A46E",
-        "credit-hover": "#008F5D",
-        "debit": "#D31510",
-        "debit-hover": "#B40000",
-        "pending": "#F68511",
-        "neutral": "#6c757d"
+        "credit": "#009762",
+        "credit-hover": "#009762",
+        "debit": "#ff2b21",
+        "debit-hover": "#ff2b21",
+        "pending": "#636363",
+        "neutral": "#636363"
       },
       "category": {
-        "blue": "#3892F3",
-        "blue-strong": "#0265DC",
-        "blue-emphasis": "#0265DC",
-        "blue-subtle": "#E0F2FF",
-        "purple": "#AD5FE8",
-        "purple-strong": "#7E2EBD",
-        "purple-emphasis": "#7E2EBD",
-        "purple-subtle": "#F9F0FF",
-        "pink": "#FF42AB",
-        "pink-strong": "#DC007B",
-        "pink-emphasis": "#DC007B",
-        "pink-subtle": "#FFEFF9",
-        "yellow": "#D39700",
-        "yellow-strong": "#9D6C00",
-        "yellow-emphasis": "#9D6C00",
-        "yellow-subtle": "#FFF3D6",
-        "green": "#15A46E",
-        "green-strong": "#007A4D",
-        "green-emphasis": "#007A4D",
-        "green-subtle": "#CEF8E0",
-        "red": "#F75C46",
-        "red-strong": "#D31510",
-        "red-emphasis": "#D31510",
-        "red-subtle": "#FFEBE7",
-        "orange": "#E46F00",
-        "orange-strong": "#B14C00",
-        "orange-emphasis": "#B14C00",
-        "orange-subtle": "#FFECCC",
-        "gray": "#495057",
-        "gray-strong": "#212529",
-        "gray-emphasis": "#212529",
-        "gray-subtle": "#e9ecef",
-        "blue-text": "#0265DC",
-        "purple-text": "#7E2EBD",
-        "pink-text": "#B90064",
-        "yellow-text": "#825800",
-        "green-text": "#007A4D",
-        "red-text": "#D31510",
-        "orange-text": "#B14C00",
-        "gray-text": "#212529",
-        "blue-muted": "#E0F2FF",
-        "purple-muted": "#F9F0FF",
-        "pink-muted": "#FFEFF9",
-        "yellow-muted": "#FFF3D6",
-        "green-muted": "#CEF8E0",
-        "red-muted": "#FFEBE7",
-        "orange-muted": "#FFECCC",
-        "gray-muted": "#e9ecef"
+        "blue": "#7a84ff",
+        "blue-strong": "#533eff",
+        "blue-emphasis": "#533eff",
+        "blue-subtle": "#f0f2fa",
+        "purple": "#fd00fa",
+        "purple-strong": "#b100af",
+        "purple-emphasis": "#b100af",
+        "purple-subtle": "#faeff9",
+        "pink": "#ff4989",
+        "pink-strong": "#c4005d",
+        "pink-emphasis": "#c4005d",
+        "pink-subtle": "#faeff1",
+        "yellow": "#889903",
+        "yellow-strong": "#5d6900",
+        "yellow-emphasis": "#5d6900",
+        "yellow-subtle": "#eff6d4",
+        "green": "#889903",
+        "green-strong": "#5d6900",
+        "green-emphasis": "#5d6900",
+        "green-subtle": "#eff6d4",
+        "red": "#ff4989",
+        "red-strong": "#c4005d",
+        "red-emphasis": "#c4005d",
+        "red-subtle": "#faeff1",
+        "orange": "#ff4989",
+        "orange-strong": "#c4005d",
+        "orange-emphasis": "#c4005d",
+        "orange-subtle": "#faeff1",
+        "gray": "#909090",
+        "gray-strong": "#636363",
+        "gray-emphasis": "#636363",
+        "gray-subtle": "#f2f2f2",
+        "blue-text": "#533eff",
+        "purple-text": "#b100af",
+        "pink-text": "#c4005d",
+        "yellow-text": "#5d6900",
+        "green-text": "#5d6900",
+        "red-text": "#c4005d",
+        "orange-text": "#c4005d",
+        "gray-text": "#636363",
+        "blue-muted": "#f0f2fa",
+        "purple-muted": "#faeff9",
+        "pink-muted": "#faeff1",
+        "yellow-muted": "#eff6d4",
+        "green-muted": "#eff6d4",
+        "red-muted": "#faeff1",
+        "orange-muted": "#faeff1",
+        "gray-muted": "#f2f2f2",
+        "olive": "#889903",
+        "olive-strong": "#5d6900",
+        "olive-text": "#5d6900",
+        "olive-muted": "#eff6d4",
+        "periwinkle": "#7a84ff",
+        "periwinkle-strong": "#533eff",
+        "periwinkle-text": "#533eff",
+        "periwinkle-muted": "#f0f2fa",
+        "rose": "#ff4989",
+        "rose-strong": "#c4005d",
+        "rose-text": "#c4005d",
+        "rose-muted": "#faeff1",
+        "magenta": "#fd00fa",
+        "magenta-strong": "#b100af",
+        "magenta-text": "#b100af",
+        "magenta-muted": "#faeff9"
       },
       "status": {
-        "pending": "#825800",
-        "pending-bg": "#FFF3D6",
-        "completed": "#007A4D",
-        "completed-bg": "#CEF8E0",
-        "failed": "#D31510",
-        "failed-bg": "#FFEBE7",
-        "cancelled": "#495057",
-        "cancelled-bg": "#e9ecef",
-        "processing": "#0265DC",
-        "processing-bg": "#E0F2FF",
-        "scheduled": "#7E2EBD",
-        "scheduled-bg": "#F9F0FF"
+        "pending": "#636363",
+        "pending-bg": "#f2f2f2",
+        "completed": "#017249",
+        "completed-bg": "#dbf9e8",
+        "failed": "#c90002",
+        "failed-bg": "#faf0ee",
+        "cancelled": "#636363",
+        "cancelled-bg": "#f2f2f2",
+        "processing": "#0162bf",
+        "processing-bg": "#edf3fa",
+        "scheduled": "#636363",
+        "scheduled-bg": "#f2f2f2"
       },
       "fill": {
-        "emphasis": "#212529",
+        "emphasis": "#222222",
         "emphasis-hover": "#343a40",
         "emphasis-pressed": "#16191C",
-        "muted": "#e9ecef",
-        "inverse": "#343a40",
-        "accent": "#0265DC",
-        "accent-muted": "#E0F2FF",
-        "accent-muted-hover": "#CAE8FF",
-        "accent-muted-pressed": "#B5DEFF",
-        "accent-hover": "#0054B6",
-        "accent-pressed": "#004491",
-        "danger": "#D31510",
-        "danger-hover": "#B40000",
-        "danger-pressed": "#930000",
-        "danger-muted": "#FFEBE7",
-        "success": "#007A4D",
-        "success-muted": "#CEF8E0",
-        "warning": "#B14C00",
-        "warning-muted": "#FFECCC",
-        "disabled": "#dee2e6",
-        "default": "#dee2e6",
-        "default-hover": "#ced4da",
-        "default-pressed": "#adb5bd",
+        "muted": "#f2f2f2",
+        "inverse": "#222222",
+        "accent": "#0162bf",
+        "accent-muted": "#edf3fa",
+        "accent-muted-hover": "#e3ecf8",
+        "accent-muted-pressed": "#d8e5f6",
+        "accent-hover": "color-mix(in srgb, #0162bf, #ffffff calc(0.08 * 100%))",
+        "accent-pressed": "color-mix(in srgb, #0162bf, #ffffff calc(0.12 * 100%))",
+        "danger": "#c90002",
+        "danger-hover": "color-mix(in srgb, #c90002, #ffffff calc(0.08 * 100%))",
+        "danger-pressed": "color-mix(in srgb, #c90002, #ffffff calc(0.12 * 100%))",
+        "danger-muted": "#faf0ee",
+        "success": "#017249",
+        "success-muted": "#dbf9e8",
+        "warning": "#835c00",
+        "warning-muted": "#faf1e3",
+        "disabled": "#f2f2f2",
+        "default": "#f2f2f2",
+        "default-hover": "#ebebeb",
+        "default-pressed": "#e4e4e4",
         "none": "transparent",
-        "none-hover": "rgba(33, 37, 41, 0.1)",
-        "none-pressed": "rgba(33, 37, 41, 0.15)",
-        "inverse-none-hover": "rgba(255, 255, 255, 0.2)"
+        "none-hover": "rgba(34, 34, 34, 0.1)",
+        "none-pressed": "rgba(34, 34, 34, 0.15)",
+        "inverse-none-hover": "rgba(255, 255, 255, 0.2)",
+        "serious": "#a54703",
+        "serious-muted": "#faf0eb",
+        "ai-muted": "#f4f0fa"
+      },
+      "data": {
+        "positive": "#009762",
+        "negative": "#ff2b21",
+        "categorical": {
+          "1": "#5d6900",
+          "2": "#7a84ff",
+          "3": "#ff4989",
+          "4": "#b100af",
+          "other": "#909090"
+        },
+        "diverging": {
+          "balance": {
+            "1": "#5d6900",
+            "2": "#889903",
+            "3": "#f2f2f2",
+            "4": "#fd00fa",
+            "5": "#b100af"
+          }
+        },
+        "sequential": {
+          "periwinkle": {
+            "1": "#f0f2fa",
+            "2": "#d6dbf7",
+            "3": "#7a84ff",
+            "4": "#6464ff",
+            "5": "#1a1b51"
+          }
+        }
       }
     },
     "typography": {
@@ -1644,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": {
@@ -1722,9 +1781,9 @@
       }
     },
     "surface": {
-      "base": "#f8f9fa",
+      "base": "#fcfcfc",
       "raised": "#ffffff",
-      "scrim": "rgba(33, 37, 41, 0.5)"
+      "scrim": "rgba(34, 34, 34, 0.5)"
     }
   }
 }