@common-origin/design-system 2.17.0 → 2.19.0

package/dist/styles/tokens.json

@@ -64,6 +64,42 @@
       "95": "0.95",
       "100": "1"
     },
+    "dimension": {
+      "0": "0",
+      "1": "0.25rem",
+      "2": "0.5rem",
+      "3": "0.75rem",
+      "4": "1rem",
+      "5": "1.25rem",
+      "6": "1.5rem",
+      "7": "1.75rem",
+      "8": "2rem",
+      "9": "2.25rem",
+      "10": "2.5rem",
+      "11": "2.75rem",
+      "12": "3rem",
+      "14": "3.5rem",
+      "15": "3.75rem",
+      "16": "4rem",
+      "18": "4.5rem",
+      "20": "5rem",
+      "24": "6rem",
+      "28": "7rem",
+      "30": "7.5rem",
+      "32": "8rem",
+      "40": "10rem",
+      "45": "11.25rem",
+      "48": "12rem",
+      "50": "12.5rem",
+      "56": "14rem",
+      "64": "16rem",
+      "75": "18.75rem",
+      "90": "22.5rem",
+      "100": "25rem",
+      "140": "35rem",
+      "180": "45rem",
+      "192": "48rem"
+    },
     "size": {
       "0": "0",
       "1": "0.25rem",
@@ -108,6 +144,34 @@
     },
     "color": {
       "transparent": "transparent",
+      "gray": {
+        "100": "#fcfcfc",
+        "200": "#f9f9f9",
+        "300": "#f2f2f2",
+        "400": "#ebebeb",
+        "500": "#e4e4e4",
+        "600": "#dcdcdc",
+        "700": "#d1d1d1",
+        "800": "#909090",
+        "900": "#848484",
+        "1000": "#797979",
+        "1100": "#636363",
+        "1200": "#222222"
+      },
+      "gray-alpha": {
+        "100": "rgba(34, 34, 34, 0.014)",
+        "200": "rgba(34, 34, 34, 0.027)",
+        "300": "rgba(34, 34, 34, 0.059)",
+        "400": "rgba(34, 34, 34, 0.09)",
+        "500": "rgba(34, 34, 34, 0.122)",
+        "600": "rgba(34, 34, 34, 0.158)",
+        "700": "rgba(34, 34, 34, 0.208)",
+        "800": "rgba(34, 34, 34, 0.502)",
+        "900": "rgba(34, 34, 34, 0.557)",
+        "1000": "rgba(34, 34, 34, 0.606)",
+        "1100": "rgba(34, 34, 34, 0.706)",
+        "1200": "rgba(34, 34, 34, 1)"
+      },
       "neutral": {
         "100": "#f8f9fa",
         "200": "#e9ecef",
@@ -812,7 +876,8 @@
           "default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
           "hover": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           "active": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
-        }
+        },
+        "background": "#ffffff"
       }
     },
     "accountCard": {
@@ -824,7 +889,8 @@
     "breadcrumbs": {
       "item": {
         "maxWidth": "11.25rem"
-      }
+      },
+      "font": "400 0.75rem/1.125rem 'Inter', sans-serif"
     },
     "cardLarge": {
       "maxWidth": "48rem"
@@ -859,6 +925,46 @@
     },
     "transactionListItem": {
       "minHeight": "4.5rem"
+    },
+    "status": {
+      "pending": {
+        "text": "#825800",
+        "background": "#FFF3D6"
+      },
+      "completed": {
+        "text": "#007A4D",
+        "background": "#CEF8E0"
+      },
+      "failed": {
+        "text": "#D31510",
+        "background": "#FFEBE7"
+      },
+      "cancelled": {
+        "text": "#495057",
+        "background": "#e9ecef"
+      },
+      "processing": {
+        "text": "#0265DC",
+        "background": "#E0F2FF"
+      },
+      "scheduled": {
+        "text": "#7E2EBD",
+        "background": "#F9F0FF"
+      }
+    },
+    "transaction": {
+      "credit": "#15A46E",
+      "credit-hover": "#008F5D",
+      "debit": "#D31510",
+      "debit-hover": "#B40000",
+      "pending": "#F68511",
+      "neutral": "#6c757d"
+    },
+    "track": {
+      "background": "#dee2e6"
+    },
+    "tooltip": {
+      "border": "0.125rem dotted #dee2e6"
     }
   },
   "semantic": {
@@ -880,7 +986,9 @@
     },
     "opacity": {
       "disabled": "0.5",
-      "full": "1"
+      "full": "1",
+      "hover": "0.8",
+      "pressed": "0.7"
     },
     "fontFamily": {
       "body": "'Inter', sans-serif",
@@ -937,10 +1045,35 @@
         "2xl": "1.5rem",
         "3xl": "2rem",
         "circle": "10rem"
-      }
+      },
+      "emphasis": "0.0625rem solid #dee2e6",
+      "input-hover": "0.0625rem solid #343a40"
     },
     "size": {
+      "100": "0.25rem",
+      "200": "0.5rem",
+      "400": "1rem",
+      "500": "1.25rem",
+      "600": "1.5rem",
+      "800": "2rem",
+      "1200": "3rem",
+      "1500": "3.75rem",
+      "1800": "4.5rem",
+      "2000": "5rem",
+      "3000": "7.5rem",
+      "4500": "11.25rem",
+      "5000": "12.5rem",
+      "7500": "18.75rem",
+      "9000": "22.5rem",
+      "10000": "25rem",
+      "19200": "48rem",
+      "pointerTarget": "1.5rem",
       "touchTarget": "2.75rem",
+      "control": {
+        "sm": "2rem",
+        "md": "2.5rem",
+        "lg": "3rem"
+      },
       "overlay": {
         "sm": "25rem",
         "md": "35rem",
@@ -1027,7 +1160,7 @@
     "color": {
       "text": {
         "default": "#212529",
-        "emphasis": "#343a40",
+        "emphasis": "#16191C",
         "subdued": "#495057",
         "inverse": "#ffffff",
         "disabled": "#adb5bd",
@@ -1036,7 +1169,12 @@
         "interactive-active": "#004491",
         "error": "#D31510",
         "success": "#007A4D",
-        "warning": "#B14C00"
+        "warning": "#B14C00",
+        "muted": "#495057",
+        "accent": "#0265DC",
+        "accent-hover": "#0054B6",
+        "accent-pressed": "#004491",
+        "danger": "#D31510"
       },
       "background": {
         "default": "#f8f9fa",
@@ -1081,11 +1219,17 @@
         "error": "#D31510",
         "success": "#007A4D",
         "warning": "#B14C00",
-        "none": "transparent"
+        "none": "transparent",
+        "emphasis": "#dee2e6",
+        "input": "#6c757d",
+        "input-hover": "#343a40",
+        "focus": "#343a40",
+        "accent": "#0265DC",
+        "danger": "#D31510"
       },
       "icon": {
         "default": "#212529",
-        "emphasis": "#343a40",
+        "emphasis": "#16191C",
         "subdued": "#6c757d",
         "disabled": "#adb5bd",
         "inverse": "#ffffff",
@@ -1094,7 +1238,12 @@
         "interactive-active": "#004491",
         "error": "#D31510",
         "success": "#007A4D",
-        "warning": "#B14C00"
+        "warning": "#B14C00",
+        "muted": "#6c757d",
+        "accent": "#0265DC",
+        "accent-hover": "#0054B6",
+        "accent-pressed": "#004491",
+        "danger": "#D31510"
       },
       "financial": {
         "credit": "#15A46E",
@@ -1106,27 +1255,35 @@
       },
       "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",
@@ -1136,7 +1293,15 @@
         "green-text": "#007A4D",
         "red-text": "#D31510",
         "orange-text": "#B14C00",
-        "gray-text": "#212529"
+        "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"
       },
       "status": {
         "pending": "#825800",
@@ -1151,6 +1316,35 @@
         "processing-bg": "#E0F2FF",
         "scheduled": "#7E2EBD",
         "scheduled-bg": "#F9F0FF"
+      },
+      "fill": {
+        "emphasis": "#212529",
+        "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",
+        "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)"
       }
     },
     "typography": {
@@ -1176,20 +1370,79 @@
       "duration": {
         "normal": "200ms",
         "fast": "150ms",
-        "slow": "300ms"
+        "slow": "300ms",
+        "instant": "0ms",
+        "moderate": "200ms"
       },
       "easing": {
         "easeInOut": "ease-in-out",
-        "easeOut": "ease-out"
+        "easeOut": "ease-out",
+        "standard": "ease-in-out",
+        "decelerate": "ease-out",
+        "accelerate": "ease-in"
       },
       "transition": {
         "fast": "all 150ms ease-out",
         "normal": "all 200ms ease-in-out",
-        "slow": "all 300ms ease-in-out"
+        "slow": "all 300ms ease-in-out",
+        "feedback": "background-color 150ms ease-out, color 150ms ease-out",
+        "focus": "outline 150ms ease-out, outline-offset 150ms ease-out",
+        "press": "transform 150ms ease-out, opacity 150ms ease-out"
       },
       "hover": "background-color 150ms ease-out, color 150ms ease-out",
       "focus": "outline 150ms ease-out, outline-offset 150ms ease-out",
-      "interactive": "transform 150ms ease-out, opacity 150ms ease-out"
+      "interactive": "transform 150ms ease-out, opacity 150ms ease-out",
+      "distance": {
+        "sm": "0.5rem"
+      }
+    },
+    "layer": {
+      "sticky": "10",
+      "dropdown": "1000",
+      "overlay": "1010",
+      "modal": "1020"
+    },
+    "radius": {
+      "none": "0",
+      "xs": "0.125rem",
+      "sm": "0.25rem",
+      "md": "0.5rem",
+      "lg": "0.75rem",
+      "xl": "1rem",
+      "2xl": "1.5rem",
+      "3xl": "2rem",
+      "full": "10rem"
+    },
+    "space": {
+      "0": "0",
+      "100": "0.25rem",
+      "200": "0.5rem",
+      "300": "0.75rem",
+      "400": "1rem",
+      "500": "1.25rem",
+      "600": "1.5rem",
+      "700": "1.75rem",
+      "800": "2rem",
+      "900": "2.25rem",
+      "1000": "2.5rem",
+      "1200": "3rem",
+      "1400": "3.5rem",
+      "1600": "4rem",
+      "2000": "5rem",
+      "2400": "6rem",
+      "inset": {
+        "xs": "0.25rem",
+        "sm": "0.5rem",
+        "md": "0.75rem",
+        "lg": "1rem",
+        "xl": "1.25rem",
+        "2xl": "1.5rem"
+      }
+    },
+    "surface": {
+      "base": "#f8f9fa",
+      "raised": "#ffffff",
+      "scrim": "rgba(33, 37, 41, 0.5)"
     }
   }
 }