@common-origin/design-system 1.9.8 → 1.10.0

package/dist/styles/tokens.json

@@ -0,0 +1,673 @@
+{
+  "base": {
+    "border": {
+      "radius": {
+        "1": "0.125rem",
+        "2": "0.25rem",
+        "3": "0.5rem",
+        "4": "0.75rem",
+        "5": "1rem",
+        "6": "1.5rem",
+        "7": "2rem",
+        "circle": "10rem"
+      },
+      "style": {
+        "solid": "solid",
+        "dashed": "dashed",
+        "dotted": "dotted"
+      },
+      "width": {
+        "0": "0",
+        "1": "0.0625rem",
+        "2": "0.125rem",
+        "3": "0.1875rem",
+        "4": "0.25rem",
+        "5": "0.3125rem",
+        "6": "0.375rem",
+        "8": "0.5rem"
+      }
+    },
+    "shadow": {
+      "1": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      "2": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+      "3": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      "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"
+    },
+    "zIndex": {
+      "0": "0",
+      "1": "10",
+      "2": "20",
+      "3": "30",
+      "4": "40",
+      "5": "50",
+      "6": "1000",
+      "7": "1010",
+      "8": "1020"
+    },
+    "opacity": {
+      "0": "0",
+      "5": "0.05",
+      "10": "0.1",
+      "20": "0.2",
+      "25": "0.25",
+      "30": "0.3",
+      "40": "0.4",
+      "50": "0.5",
+      "60": "0.6",
+      "70": "0.7",
+      "75": "0.75",
+      "80": "0.8",
+      "90": "0.9",
+      "95": "0.95",
+      "100": "1"
+    },
+    "size": {
+      "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",
+      "12": "3rem",
+      "14": "3.5rem",
+      "16": "4rem",
+      "20": "5rem",
+      "24": "6rem",
+      "28": "7rem",
+      "32": "8rem",
+      "40": "10rem",
+      "48": "12rem",
+      "56": "14rem",
+      "64": "16rem",
+      "auto": "auto",
+      "full": "100%",
+      "screen": "100vh",
+      "min": "min-content",
+      "max": "max-content",
+      "fit": "fit-content"
+    },
+    "color": {
+      "neutral": {
+        "100": "#f8f9fa",
+        "200": "#e9ecef",
+        "300": "#dee2e6",
+        "400": "#ced4da",
+        "500": "#adb5bd",
+        "600": "#6c757d",
+        "700": "#495057",
+        "800": "#343a40",
+        "900": "#212529",
+        "1000": "#16191C",
+        "000": "#ffffff"
+      },
+      "green": {
+        "100": "#CEF8E0",
+        "200": "#ADF4CE",
+        "300": "#89ECBC",
+        "400": "#67DEA8",
+        "500": "#49CC93",
+        "600": "#2FB880",
+        "700": "#15A46E",
+        "800": "#008F5D",
+        "900": "#007A4D",
+        "1000": "#00653E",
+        "1100": "#005132",
+        "1200": "#053F27",
+        "1300": "#0A2E1D"
+      },
+      "orange": {
+        "100": "#FFECCC",
+        "200": "#FFDFAD",
+        "300": "#FDD291",
+        "400": "#FFBB63",
+        "500": "#FFA037",
+        "600": "#F68511",
+        "700": "#E46F00",
+        "800": "#CB5D00",
+        "900": "#B14C00",
+        "1000": "#953D00",
+        "1100": "#7A2F00",
+        "1200": "#612300",
+        "1300": "#491901"
+      },
+      "red": {
+        "100": "#FFEBE7",
+        "200": "#FFDDD6",
+        "300": "#FFCDC3",
+        "400": "#FFB7A9",
+        "500": "#FF9B88",
+        "600": "#FF7C65",
+        "700": "#F75C46",
+        "800": "#EA3829",
+        "900": "#D31510",
+        "1000": "#B40000",
+        "1100": "#930000",
+        "1200": "#740000",
+        "1300": "#590000"
+      },
+      "blue": {
+        "100": "#E0F2FF",
+        "200": "#CAE8FF",
+        "300": "#B5DEFF",
+        "400": "#96CEFD",
+        "500": "#78BBFA",
+        "600": "#59A7F6",
+        "700": "#3892F3",
+        "800": "#147AF3",
+        "900": "#0265DC",
+        "1000": "#0054B6",
+        "1100": "#004491",
+        "1200": "#003571",
+        "1300": "#002754"
+      }
+    },
+    "spacing": {
+      "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",
+      "12": "3rem",
+      "14": "3.5rem",
+      "16": "4rem",
+      "20": "5rem",
+      "24": "6rem",
+      "28": "7rem",
+      "32": "8rem",
+      "40": "10rem",
+      "48": "12rem",
+      "56": "14rem",
+      "64": "16rem",
+      "auto": "auto"
+    },
+    "fontFamily": {
+      "heading": "'Inter', sans-serif",
+      "body": "'Inter', sans-serif",
+      "monospace": "Menlo, Monaco, Consolas, Courier New, monospace"
+    },
+    "fontSize": {
+      "1": "0.75rem",
+      "2": "0.875rem",
+      "3": "1rem",
+      "4": "1.125rem",
+      "5": "1.25rem",
+      "6": "1.5rem",
+      "7": "1.75rem",
+      "8": "2rem",
+      "9": "3rem",
+      "10": "5rem"
+    },
+    "fontWeight": {
+      "1": "300",
+      "2": "400",
+      "3": "500",
+      "4": "600",
+      "5": "700"
+    },
+    "lineHeight": {
+      "1": "1rem",
+      "2": "1.125rem",
+      "3": "1.25rem",
+      "4": "1.5rem",
+      "5": "1.75rem",
+      "6": "2rem",
+      "7": "2.25rem",
+      "8": "2.5rem",
+      "9": "3rem",
+      "10": "4.5rem",
+      "11": "5rem"
+    },
+    "letterSpacing": {
+      "0": "-0.125rem",
+      "1": "-0.0625rem",
+      "2": "0rem",
+      "3": "0.0625rem",
+      "4": "0.125rem"
+    },
+    "breakpoint": {
+      "xs": "0px",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px",
+      "2xl": "1536px"
+    },
+    "duration": {
+      "instant": "0ms",
+      "fast": "150ms",
+      "normal": "200ms",
+      "moderate": "300ms",
+      "slow": "500ms",
+      "slower": "750ms",
+      "slowest": "1000ms"
+    },
+    "easing": {
+      "linear": "linear",
+      "ease": "ease",
+      "easeIn": "ease-in",
+      "easeOut": "ease-out",
+      "easeInOut": "ease-in-out",
+      "easeInQuart": "cubic-bezier(0.5, 0, 0.75, 0)",
+      "easeOutQuart": "cubic-bezier(0.25, 1, 0.5, 1)",
+      "easeInOutQuart": "cubic-bezier(0.76, 0, 0.24, 1)",
+      "easeInBack": "cubic-bezier(0.36, 0, 0.66, -0.56)",
+      "easeOutBack": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "easeInOutBack": "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
+    },
+    "$ref": "./base/index.json"
+  },
+  "component": {
+    "button": {
+      "primary": {
+        "backgroundColor": "#212529",
+        "textColor": "#ffffff",
+        "borderRadius": "0.25rem",
+        "padding": "0.75rem 1rem",
+        "font": "500 1rem/1.5rem 'Inter', sans-serif"
+      },
+      "hover": {
+        "backgroundColor": "#343a40"
+      },
+      "active": {
+        "backgroundColor": "#16191C"
+      },
+      "focus": {
+        "outline": "0.125rem solid #343a40",
+        "outlineOffset": "2px"
+      },
+      "disabled": {
+        "backgroundColor": "#dee2e6",
+        "textColor": "#adb5bd"
+      },
+      "variants": {
+        "secondary": {
+          "backgroundColor": "#e9ecef",
+          "textColor": "#212529",
+          "hover": {
+            "backgroundColor": "#dee2e6"
+          },
+          "active": {
+            "backgroundColor": "#f8f9fa"
+          },
+          "disabled": {
+            "backgroundColor": "#dee2e6",
+            "textColor": "#adb5bd"
+          }
+        },
+        "naked": {
+          "backgroundColor": "transparent",
+          "textColor": "#212529",
+          "hover": {
+            "backgroundColor": "#e9ecef"
+          },
+          "active": {
+            "backgroundColor": "#dee2e6"
+          },
+          "disabled": {
+            "backgroundColor": "transparent",
+            "textColor": "#adb5bd"
+          }
+        }
+      },
+      "sizes": {
+        "small": {
+          "padding": "0.5rem 0.75rem",
+          "font": "500 0.75rem/1rem 'Inter', sans-serif"
+        },
+        "medium": {
+          "padding": "0.5rem 1rem",
+          "font": "500 0.875rem/1.5rem 'Inter', sans-serif"
+        },
+        "large": {
+          "padding": "0.75rem 1rem",
+          "font": "500 1rem/1.5rem 'Inter', sans-serif"
+        }
+      }
+    },
+    "chip": {
+      "default": {
+        "backgroundColor": "#e9ecef",
+        "textColor": "#212529",
+        "borderRadius": "0.25rem",
+        "padding": "0.25rem 0.5rem",
+        "font": "500 0.875rem/1.25rem 'Inter', sans-serif"
+      },
+      "variants": {
+        "emphasis": {
+          "backgroundColor": "#212529",
+          "textColor": "#ffffff"
+        },
+        "subtle": {
+          "backgroundColor": "#ffffff",
+          "textColor": "#212529"
+        },
+        "interactive": {
+          "backgroundColor": "#0265DC",
+          "textColor": "#ffffff"
+        }
+      },
+      "sizes": {
+        "small": {
+          "padding": "0 0.25rem",
+          "font": "400 0.75rem/1rem 'Inter', sans-serif"
+        },
+        "medium": {
+          "padding": "0.25rem 0.5rem",
+          "font": "500 0.875rem/1.25rem 'Inter', sans-serif"
+        },
+        "large": {
+          "padding": "0.5rem 0.75rem",
+          "font": "400 0.875rem/1.25rem 'Inter', sans-serif"
+        }
+      }
+    },
+    "iconButton": {
+      "primary": {
+        "backgroundColor": "#212529",
+        "borderRadius": "0.25rem",
+        "minWidth": "40px",
+        "minHeight": "40px",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center"
+      },
+      "hover": {
+        "backgroundColor": "#343a40"
+      },
+      "active": {
+        "backgroundColor": "#16191C"
+      },
+      "focus": {
+        "outline": "0.125rem solid #343a40",
+        "outlineOffset": "2px"
+      },
+      "disabled": {
+        "backgroundColor": "#dee2e6"
+      },
+      "variants": {
+        "secondary": {
+          "backgroundColor": "#e9ecef",
+          "hover": {
+            "backgroundColor": "#dee2e6"
+          },
+          "active": {
+            "backgroundColor": "#f8f9fa"
+          },
+          "disabled": {
+            "backgroundColor": "#dee2e6"
+          }
+        },
+        "naked": {
+          "backgroundColor": "transparent",
+          "hover": {
+            "backgroundColor": "#e9ecef"
+          },
+          "active": {
+            "backgroundColor": "#dee2e6"
+          },
+          "disabled": {
+            "backgroundColor": "transparent"
+          }
+        }
+      },
+      "sizes": {
+        "small": {
+          "minWidth": "32px",
+          "minHeight": "32px",
+          "padding": "0.25rem"
+        },
+        "medium": {
+          "minWidth": "40px",
+          "minHeight": "40px",
+          "padding": "0.5rem"
+        },
+        "large": {
+          "minWidth": "48px",
+          "minHeight": "48px",
+          "padding": "0.75rem"
+        }
+      }
+    },
+    "separator": {
+      "border": "0.0625rem solid #dee2e6",
+      "margin": "2rem 0",
+      "variants": {
+        "default": {
+          "border": "0.0625rem solid #dee2e6",
+          "margin": "2rem 0"
+        },
+        "strong": {
+          "border": "0.0625rem solid #343a40",
+          "margin": "2rem 0"
+        },
+        "minimal": {
+          "border": "0.0625rem solid #dee2e6",
+          "margin": "1.5rem 0"
+        }
+      },
+      "sizes": {
+        "small": {
+          "margin": "1rem 0"
+        },
+        "medium": {
+          "margin": "1.5rem 0"
+        },
+        "large": {
+          "margin": "2rem 0"
+        },
+        "xlarge": {
+          "margin": "3rem 0"
+        }
+      }
+    },
+    "progressBar": {
+      "backgroundColor": "#dee2e6",
+      "borderRadius": "0.25rem",
+      "sizes": {
+        "sm": {
+          "height": "0.25rem"
+        },
+        "md": {
+          "height": "0.5rem"
+        },
+        "lg": {
+          "height": "1rem"
+        },
+        "xl": {
+          "height": "1.25rem"
+        }
+      }
+    },
+    "input": {
+      "default": {
+        "backgroundColor": "#ffffff",
+        "textColor": "#212529",
+        "borderColor": "#dee2e6",
+        "borderRadius": "0.25rem",
+        "borderWidth": "0.0625rem",
+        "paddingY": "11px",
+        "paddingX": "1rem",
+        "font": "400 1rem/1.5rem 'Inter', sans-serif"
+      },
+      "placeholder": {
+        "textColor": "#adb5bd"
+      },
+      "hover": {
+        "borderColor": "#343a40"
+      },
+      "focus": {
+        "borderColor": "#343a40",
+        "outline": "0.125rem solid #343a40",
+        "outlineOffset": "2px"
+      },
+      "error": {
+        "borderColor": "#D31510",
+        "focus": {
+          "borderColor": "#D31510",
+          "outline": "0.125rem solid #343a40",
+          "outlineOffset": "2px"
+        },
+        "hover": {
+          "borderColor": "#D31510"
+        }
+      },
+      "disabled": {
+        "backgroundColor": "#dee2e6",
+        "textColor": "#adb5bd",
+        "borderColor": "#dee2e6",
+        "cursor": "not-allowed"
+      }
+    },
+    "$ref": "./component/index.json"
+  },
+  "semantic": {
+    "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"
+    },
+    "size": {
+      "icon": {
+        "xs": "0.75rem",
+        "sm": "1rem",
+        "md": "1.25rem",
+        "lg": "1.5rem",
+        "xl": "2rem",
+        "2xl": "2.5rem"
+      },
+      "avatar": {
+        "xs": "1.5rem",
+        "sm": "2rem",
+        "md": "2.5rem",
+        "lg": "3rem",
+        "xl": "4rem"
+      }
+    },
+    "spacing": {
+      "separator": {
+        "sm": "1rem",
+        "md": "1.5rem",
+        "lg": "2rem",
+        "xl": "3rem"
+      },
+      "layout": {
+        "none": "0",
+        "xs": "0.25rem",
+        "sm": "0.5rem",
+        "md": "0.75rem",
+        "lg": "1rem",
+        "xl": "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.75rem",
+        "4xl": "2rem",
+        "5xl": "2.25rem",
+        "6xl": "2.5rem",
+        "7xl": "3rem",
+        "8xl": "3.5rem",
+        "9xl": "4rem",
+        "10xl": "5rem",
+        "auto": "auto"
+      }
+    },
+    "color": {
+      "text": {
+        "default": "#212529",
+        "emphasis": "#343a40",
+        "subdued": "#495057",
+        "inverse": "#ffffff",
+        "disabled": "#adb5bd",
+        "interactive": "#0265DC",
+        "error": "#D31510",
+        "success": "#007A4D",
+        "warning": "#B14C00"
+      },
+      "background": {
+        "default": "#f8f9fa",
+        "subtle": "#ffffff",
+        "emphasis": "#212529",
+        "surface": "#e9ecef",
+        "inverse": "#343a40",
+        "interactive": "#0265DC",
+        "interactive-subtle": "#E0F2FF",
+        "interactive-hover": "#0054B6",
+        "interactive-active": "#004491",
+        "error": "#D31510",
+        "error-subtle": "#FFEBE7",
+        "success": "#007A4D",
+        "success-subtle": "#CEF8E0",
+        "warning": "#B14C00",
+        "warning-subtle": "#FFECCC",
+        "disabled": "#dee2e6",
+        "progressTrack": "#dee2e6"
+      },
+      "border": {
+        "default": "#e9ecef",
+        "subtle": "#dee2e6",
+        "strong": "#343a40",
+        "interactive": "#0265DC",
+        "error": "#D31510",
+        "success": "#007A4D",
+        "warning": "#B14C00"
+      },
+      "icon": {
+        "default": "#212529",
+        "emphasis": "#343a40",
+        "subdued": "#6c757d",
+        "disabled": "#adb5bd",
+        "inverse": "#ffffff",
+        "interactive": "#0265DC",
+        "interactive-hover": "#0054B6",
+        "interactive-active": "#004491",
+        "error": "#D31510",
+        "success": "#007A4D",
+        "warning": "#B14C00"
+      }
+    },
+    "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": "500 1.5rem/2rem 'Inter', sans-serif",
+      "h5": "500 1.25rem/1.75rem 'Inter', sans-serif",
+      "h6": "500 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",
+      "overline": "700 0.75rem/1rem 'Inter', sans-serif",
+      "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",
+      "label": "500 0.875rem/1.25rem 'Inter', sans-serif",
+      "breadcrumb": "400 0.75rem/1.125rem 'Inter', sans-serif"
+    },
+    "motion": {
+      "transition": {
+        "fast": "all 150ms ease-out",
+        "normal": "all 200ms ease-in-out",
+        "slow": "all 300ms ease-in-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"
+    },
+    "$ref": "./semantic/index.json"
+  }
+}