@common-origin/design-system 3.0.0 → 3.2.0

package/dist/styles/tokens.json

@@ -34,7 +34,8 @@
       "4": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
       "5": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
       "6": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-      "none": "none"
+      "none": "none",
+      "inset": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
     },
     "zIndex": {
       "0": "0",
@@ -64,7 +65,8 @@
       "80": "0.8",
       "90": "0.9",
       "95": "0.95",
-      "100": "1"
+      "100": "1",
+      "scrim": "0.5"
     },
     "dimension": {
       "0": "0",
@@ -113,6 +115,15 @@
     "color": {
       "transparent": "transparent",
       "white": "#ffffff",
+      "surface": {
+        "page": "#fcfcfc",
+        "raised": "#ffffff",
+        "overlay": "#ffffff"
+      },
+      "ink": {
+        "light": "#fcfcfc",
+        "dark": "#222222"
+      },
       "gray": {
         "100": "#fcfcfc",
         "200": "#f9f9f9",
@@ -141,6 +152,20 @@
         "1100": "rgba(34, 34, 34, 0.706)",
         "1200": "rgba(34, 34, 34, 1)"
       },
+      "gray-alpha-inverse": {
+        "100": "rgba(252, 252, 252, 0.014)",
+        "200": "rgba(252, 252, 252, 0.027)",
+        "300": "rgba(252, 252, 252, 0.059)",
+        "400": "rgba(252, 252, 252, 0.09)",
+        "500": "rgba(252, 252, 252, 0.122)",
+        "600": "rgba(252, 252, 252, 0.158)",
+        "700": "rgba(252, 252, 252, 0.208)",
+        "800": "rgba(252, 252, 252, 0.502)",
+        "900": "rgba(252, 252, 252, 0.557)",
+        "1000": "rgba(252, 252, 252, 0.606)",
+        "1100": "rgba(252, 252, 252, 0.706)",
+        "1200": "rgba(252, 252, 252, 1)"
+      },
       "accent": {
         "100": "#fbfcfd",
         "200": "#f7f9fc",
@@ -153,7 +178,8 @@
         "900": "#0082fc",
         "1000": "#0278e7",
         "1100": "#0162bf",
-        "1200": "#0f2339"
+        "1200": "#0f2339",
+        "solid": "#0162bf"
       },
       "accent-alpha": {
         "100": "rgba(5, 68, 130, 0.016)",
@@ -181,7 +207,8 @@
         "900": "#009762",
         "1000": "#018b5a",
         "1100": "#017249",
-        "1200": "#12261b"
+        "1200": "#12261b",
+        "solid": "#017249"
       },
       "success-alpha": {
         "100": "rgba(5, 172, 47, 0.024)",
@@ -209,7 +236,8 @@
         "900": "#ad7b00",
         "1000": "#9f7102",
         "1100": "#835c00",
-        "1200": "#292111"
+        "1200": "#292111",
+        "solid": "#835c00"
       },
       "warning-alpha": {
         "100": "rgba(155, 105, 5, 0.02)",
@@ -237,7 +265,8 @@
         "900": "#da5f00",
         "1000": "#c85701",
         "1100": "#a54703",
-        "1200": "#341c10"
+        "1200": "#341c10",
+        "solid": "#a54703"
       },
       "serious-alpha": {
         "100": "rgba(193, 68, 5, 0.016)",
@@ -265,7 +294,8 @@
         "900": "#ff2b21",
         "1000": "#f30004",
         "1100": "#c90002",
-        "1200": "#3d1611"
+        "1200": "#3d1611",
+        "solid": "#c90002"
       },
       "danger-alpha": {
         "100": "rgba(172, 5, 5, 0.012)",
@@ -508,7 +538,7 @@
       "primary": {
         "backgroundColor": "#222222",
         "textColor": "#fcfcfc",
-        "borderRadius": "0.25rem",
+        "borderRadius": "0.5rem",
         "font": "500 1rem/1.5rem 'Inter', sans-serif"
       },
       "hover": {
@@ -521,21 +551,21 @@
         "outline": "0.125rem solid #222222"
       },
       "disabled": {
-        "backgroundColor": "#f2f2f2",
+        "backgroundColor": "rgba(34, 34, 34, 0.059)",
         "textColor": "rgba(34, 34, 34, 0.208)"
       },
       "variants": {
         "secondary": {
-          "backgroundColor": "#f2f2f2",
+          "backgroundColor": "rgba(34, 34, 34, 0.059)",
           "textColor": "#222222",
           "hover": {
-            "backgroundColor": "#ebebeb"
+            "backgroundColor": "rgba(34, 34, 34, 0.09)"
           },
           "active": {
-            "backgroundColor": "#e4e4e4"
+            "backgroundColor": "rgba(34, 34, 34, 0.122)"
           },
           "disabled": {
-            "backgroundColor": "#f2f2f2",
+            "backgroundColor": "rgba(34, 34, 34, 0.059)",
             "textColor": "rgba(34, 34, 34, 0.208)"
           }
         },
@@ -543,10 +573,10 @@
           "backgroundColor": "transparent",
           "textColor": "#222222",
           "hover": {
-            "backgroundColor": "#f2f2f2"
+            "backgroundColor": "rgba(34, 34, 34, 0.059)"
           },
           "active": {
-            "backgroundColor": "#ebebeb"
+            "backgroundColor": "rgba(34, 34, 34, 0.09)"
           },
           "disabled": {
             "backgroundColor": "transparent",
@@ -563,7 +593,7 @@
             "backgroundColor": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))"
           },
           "disabled": {
-            "backgroundColor": "#f2f2f2",
+            "backgroundColor": "rgba(34, 34, 34, 0.059)",
             "textColor": "rgba(34, 34, 34, 0.208)"
           }
         },
@@ -577,7 +607,7 @@
             "backgroundColor": "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))"
           },
           "disabled": {
-            "backgroundColor": "#f2f2f2",
+            "backgroundColor": "rgba(34, 34, 34, 0.059)",
             "textColor": "rgba(34, 34, 34, 0.208)"
           }
         }
@@ -600,16 +630,16 @@
         "size": "1.25rem"
       },
       "default": {
-        "backgroundColor": "#f2f2f2",
+        "backgroundColor": "rgba(34, 34, 34, 0.059)",
         "textColor": "#222222",
-        "borderRadius": "0.75rem",
+        "borderRadius": "10rem",
         "font": "400 1rem/1.5rem 'Inter', sans-serif"
       },
       "focus": {
         "outline": "0.125rem solid #222222"
       },
       "disabled": {
-        "backgroundColor": "#f2f2f2",
+        "backgroundColor": "rgba(34, 34, 34, 0.059)",
         "textColor": "rgba(34, 34, 34, 0.208)"
       },
       "variants": {
@@ -620,7 +650,7 @@
             "backgroundColor": "#fcfcfc"
           },
           "active": {
-            "backgroundColor": "#f2f2f2"
+            "backgroundColor": "rgba(34, 34, 34, 0.059)"
           },
           "disabled": {
             "backgroundColor": "#ffffff",
@@ -636,7 +666,7 @@
     },
     "iconButton": {
       "primary": {
-        "borderRadius": "0.25rem"
+        "borderRadius": "0.5rem"
       },
       "focus": {
         "outline": "0.125rem solid #222222"
@@ -657,7 +687,7 @@
       }
     },
     "progressBar": {
-      "backgroundColor": "#f2f2f2",
+      "backgroundColor": "rgba(34, 34, 34, 0.059)",
       "sizes": {
         "sm": {
           "height": "0.25rem"
@@ -678,7 +708,7 @@
         "backgroundColor": "#ffffff",
         "textColor": "#222222",
         "borderColor": "#909090",
-        "borderRadius": "0.25rem",
+        "borderRadius": "0.5rem",
         "borderWidth": "0.0625rem",
         "font": "400 1rem/1.5rem 'Inter', sans-serif"
       },
@@ -703,7 +733,7 @@
         }
       },
       "disabled": {
-        "backgroundColor": "#f2f2f2",
+        "backgroundColor": "rgba(34, 34, 34, 0.059)",
         "textColor": "rgba(34, 34, 34, 0.208)",
         "borderColor": "#d1d1d1"
       },
@@ -751,19 +781,19 @@
     "alert": {
       "severity": {
         "error": {
-          "background": "#faf0ee",
+          "background": "rgba(180, 31, 1, 0.067)",
           "text": "#c90002"
         },
         "warning": {
-          "background": "#faf1e3",
+          "background": "rgba(210, 128, 0, 0.11)",
           "text": "#835c00"
         },
         "info": {
-          "background": "#edf3fa",
+          "background": "rgba(1, 86, 185, 0.071)",
           "text": "#0162bf"
         },
         "success": {
-          "background": "#dbf9e8",
+          "background": "rgba(1, 213, 93, 0.142)",
           "text": "#017249"
         }
       },
@@ -786,7 +816,7 @@
         }
       },
       "title": {
-        "typography": "500 1.125rem/1.5rem 'Inter', sans-serif",
+        "typography": "600 1.125rem/1.5rem 'Inter', sans-serif",
         "fontWeight": "600",
         "lineHeight": "1.25rem"
       },
@@ -830,6 +860,14 @@
       "fontSize": "0.75rem",
       "lineHeight": "1.25rem"
     },
+    "sidebarNav": {
+      "width": {
+        "rail": "3.5rem",
+        "narrow": "14rem",
+        "default": "16rem",
+        "wide": "18.75rem"
+      }
+    },
     "slider": {
       "thumb": {
         "shadow": {
@@ -856,7 +894,8 @@
     },
     "checkbox": {
       "box": {
-        "size": "1.25rem"
+        "size": "1.25rem",
+        "borderRadius": "0.25rem"
       },
       "row": {
         "minHeight": "2rem"
@@ -888,31 +927,34 @@
     "status": {
       "pending": {
         "text": "#636363",
-        "background": "#f2f2f2"
+        "background": "rgba(34, 34, 34, 0.059)"
       },
       "completed": {
         "text": "#017249",
-        "background": "#dbf9e8"
+        "background": "rgba(1, 213, 93, 0.142)"
       },
       "failed": {
         "text": "#c90002",
-        "background": "#faf0ee"
+        "background": "rgba(180, 31, 1, 0.067)"
       },
       "cancelled": {
         "text": "#636363",
-        "background": "#f2f2f2"
+        "background": "rgba(34, 34, 34, 0.059)"
       },
       "processing": {
         "text": "#0162bf",
-        "background": "#edf3fa"
+        "background": "rgba(1, 86, 185, 0.071)"
       },
       "scheduled": {
         "text": "#636363",
-        "background": "#f2f2f2"
+        "background": "rgba(34, 34, 34, 0.059)"
       }
     },
     "track": {
-      "background": "#f2f2f2"
+      "background": "rgba(34, 34, 34, 0.059)"
+    },
+    "overlay": {
+      "borderRadius": "1.5rem"
     }
   },
   "semantic": {
@@ -988,12 +1030,15 @@
       "600": "1.5rem",
       "800": "2rem",
       "1200": "3rem",
+      "1400": "3.5rem",
       "1500": "3.75rem",
       "1800": "4.5rem",
       "2000": "5rem",
       "3000": "7.5rem",
       "4500": "11.25rem",
       "5000": "12.5rem",
+      "5600": "14rem",
+      "6400": "16rem",
       "7500": "18.75rem",
       "9000": "22.5rem",
       "10000": "25rem",
@@ -1005,6 +1050,11 @@
         "md": "2.5rem",
         "lg": "3rem"
       },
+      "row": {
+        "sm": "2rem",
+        "md": "3rem",
+        "lg": "4.5rem"
+      },
       "overlay": {
         "sm": "25rem",
         "md": "35rem",
@@ -1043,6 +1093,7 @@
       "text": {
         "default": "#222222",
         "inverse": "#fcfcfc",
+        "on-fill": "#fcfcfc",
         "disabled": "rgba(34, 34, 34, 0.208)",
         "success": "#017249",
         "warning": "#835c00",
@@ -1069,6 +1120,7 @@
         "default": "#222222",
         "disabled": "rgba(34, 34, 34, 0.208)",
         "inverse": "#fcfcfc",
+        "on-fill": "#fcfcfc",
         "success": "#017249",
         "warning": "#835c00",
         "muted": "#636363",
@@ -1081,53 +1133,53 @@
         "gray": "#909090",
         "gray-strong": "#636363",
         "gray-text": "#636363",
-        "gray-muted": "#f2f2f2",
+        "gray-muted": "rgba(34, 34, 34, 0.059)",
         "olive": "#889903",
         "olive-strong": "#5d6900",
         "olive-text": "#5d6900",
-        "olive-muted": "#eff6d4",
+        "olive-muted": "rgba(160, 202, 1, 0.169)",
         "periwinkle": "#7a84ff",
         "periwinkle-strong": "#533eff",
         "periwinkle-text": "#533eff",
-        "periwinkle-muted": "#f0f2fa",
+        "periwinkle-muted": "rgba(1, 35, 170, 0.059)",
         "rose": "#ff4989",
         "rose-strong": "#c4005d",
         "rose-text": "#c4005d",
-        "rose-muted": "#faeff1",
+        "rose-muted": "rgba(176, 1, 33, 0.063)",
         "magenta": "#fd00fa",
         "magenta-strong": "#b100af",
         "magenta-text": "#b100af",
-        "magenta-muted": "#faeff9"
+        "magenta-muted": "rgba(176, 1, 160, 0.063)"
       },
       "fill": {
         "emphasis": "#222222",
-        "muted": "#f2f2f2",
+        "muted": "rgba(34, 34, 34, 0.059)",
         "inverse": "#222222",
         "accent": "#0162bf",
-        "accent-muted": "#edf3fa",
-        "accent-muted-hover": "#e3ecf8",
-        "accent-muted-pressed": "#d8e5f6",
+        "accent-muted": "rgba(1, 86, 185, 0.071)",
+        "accent-muted-hover": "rgba(0, 82, 191, 0.11)",
+        "accent-muted-pressed": "rgba(0, 85, 196, 0.153)",
         "accent-hover": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.08 * 100%))",
         "accent-pressed": "color-mix(in srgb, #0162bf, #fcfcfc calc(0.12 * 100%))",
         "danger": "#c90002",
         "danger-hover": "color-mix(in srgb, #c90002, #fcfcfc calc(0.08 * 100%))",
         "danger-pressed": "color-mix(in srgb, #c90002, #fcfcfc calc(0.12 * 100%))",
-        "danger-muted": "#faf0ee",
+        "danger-muted": "rgba(180, 31, 1, 0.067)",
         "success": "#017249",
-        "success-muted": "#dbf9e8",
+        "success-muted": "rgba(1, 213, 93, 0.142)",
         "warning": "#835c00",
-        "warning-muted": "#faf1e3",
-        "disabled": "#f2f2f2",
-        "default": "#f2f2f2",
-        "default-hover": "#ebebeb",
-        "default-pressed": "#e4e4e4",
+        "warning-muted": "rgba(210, 128, 0, 0.11)",
+        "disabled": "rgba(34, 34, 34, 0.059)",
+        "default": "rgba(34, 34, 34, 0.059)",
+        "default-hover": "rgba(34, 34, 34, 0.09)",
+        "default-pressed": "rgba(34, 34, 34, 0.122)",
         "none": "transparent",
-        "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)",
+        "none-hover": "rgba(34, 34, 34, 0.09)",
+        "none-pressed": "rgba(34, 34, 34, 0.158)",
+        "inverse-none-hover": "rgba(252, 252, 252, 0.208)",
         "serious": "#a54703",
-        "serious-muted": "#faf0eb",
-        "ai-muted": "#f4f0fa"
+        "serious-muted": "rgba(192, 65, 2, 0.079)",
+        "ai-muted": "rgba(69, 1, 170, 0.059)"
       },
       "data": {
         "positive": "#009762",
@@ -1161,12 +1213,12 @@
     },
     "typography": {
       "display": "700 5rem/4.5rem 'Inter', sans-serif",
-      "h1": "700 3rem/3rem 'Inter', sans-serif",
-      "h2": "700 2rem/2.5rem 'Inter', sans-serif",
-      "h3": "700 1.75rem/2.25rem 'Inter', sans-serif",
-      "h4": "700 1.5rem/2rem 'Inter', sans-serif",
-      "h5": "500 1.25rem/1.75rem 'Inter', sans-serif",
-      "h6": "500 1.125rem/1.5rem 'Inter', sans-serif",
+      "h1": "600 3rem/3rem 'Inter', sans-serif",
+      "h2": "600 2rem/2.5rem 'Inter', sans-serif",
+      "h3": "600 1.75rem/2.25rem 'Inter', sans-serif",
+      "h4": "600 1.5rem/2rem 'Inter', sans-serif",
+      "h5": "600 1.25rem/1.75rem 'Inter', sans-serif",
+      "h6": "600 1.125rem/1.5rem 'Inter', sans-serif",
       "subtitle": "500 1rem/1.5rem 'Inter', sans-serif",
       "body": "400 1rem/1.5rem 'Inter', sans-serif",
       "small": "400 0.875rem/1.25rem 'Inter', sans-serif",
@@ -1181,6 +1233,9 @@
         "instant": "0ms",
         "moderate": "200ms"
       },
+      "delay": {
+        "hint": "500ms"
+      },
       "easing": {
         "standard": "ease-in-out",
         "decelerate": "ease-out",
@@ -1241,7 +1296,8 @@
     "surface": {
       "base": "#fcfcfc",
       "raised": "#ffffff",
-      "scrim": "rgba(34, 34, 34, 0.5)"
+      "overlay": "#ffffff",
+      "scrim": "color-mix(in srgb, #222222 calc(0.5 * 100%), transparent)"
     }
   }
 }