@bcc-code/design-tokens 2.0.17 → 3.0.1

package/build/bcc/light.js

@@ -0,0 +1,799 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  "font-family": {
+    archivo: "Archivo",
+  },
+  color: {
+    neutral: {
+      0: "#ffffff",
+      100: "#f7f8f9",
+      200: "#f1f2f4",
+      300: "#dcdfe4",
+      400: "#b3b9c4",
+      500: "#8590a2",
+      600: "#758195",
+      700: "#626f86",
+      800: "#4b5668",
+      900: "#374152",
+      1000: "#282f3c",
+      1100: "#1e242d",
+    },
+    "dark-neutral": {
+      0: "#161a1d",
+      100: "#1d2125",
+      200: "#22272b",
+      250: "#282e33",
+      300: "#2c333a",
+      350: "#38414a",
+      400: "#454f59",
+      500: "#596773",
+      600: "#738496",
+      700: "#8c9bab",
+      800: "#9fadbc",
+      900: "#b6c2cf",
+      1000: "#c7d1db",
+      1100: "#dee4ea",
+      "negative-100": "#101214",
+    },
+    "dark-green": {
+      100: "#f0fcfa",
+      200: "#d2eeeb",
+      300: "#a0cec8",
+      400: "#6fb5ad",
+      500: "#3e9f97",
+      600: "#1d7f78",
+      700: "#0c625c",
+      800: "#014d49",
+      900: "#0b3633",
+      1000: "#012320",
+    },
+    orange: {
+      100: "#fffaed",
+      200: "#fee3c1",
+      300: "#f6b981",
+      400: "#f19457",
+      500: "#da772e",
+      600: "#b55919",
+      700: "#943a14",
+      800: "#782612",
+      900: "#5d1712",
+      1000: "#420e0d",
+    },
+    red: {
+      100: "#fff8f3",
+      200: "#fee2dd",
+      300: "#fab6ad",
+      400: "#fa877e",
+      500: "#ed6362",
+      600: "#ca414e",
+      700: "#a42237",
+      800: "#811436",
+      900: "#630d2e",
+      1000: "#440223",
+    },
+    green: {
+      100: "#efffed",
+      200: "#cbf3c9",
+      300: "#83d895",
+      400: "#32c180",
+      500: "#1ca673",
+      600: "#09825d",
+      700: "#0c6241",
+      800: "#094c3b",
+      900: "#073734",
+      1000: "#032429",
+    },
+    teal: {
+      100: "#f6fbff",
+      200: "#c3f2f8",
+      300: "#82d3e3",
+      400: "#51b9cf",
+      500: "#1a9eb7",
+      600: "#0b7da1",
+      700: "#005b81",
+      800: "#09486b",
+      900: "#0d324d",
+      1000: "#0c2132",
+    },
+    brown: {
+      100: "#f9faf4",
+      200: "#ece8dc",
+      300: "#d1c5b0",
+      400: "#bea889",
+      500: "#a98c66",
+      600: "#8b6d45",
+      700: "#6e5232",
+      800: "#553d28",
+      900: "#3f2c1e",
+      1000: "#2e1b0f",
+    },
+    blue: {
+      100: "#f6fbff",
+      200: "#d9ecff",
+      300: "#a6cdfd",
+      400: "#7cabf9",
+      500: "#608ef6",
+      600: "#446add",
+      700: "#274eb5",
+      800: "#273c8f",
+      900: "#212c64",
+      1000: "#091e47",
+    },
+    purple: {
+      100: "#f6f9ff",
+      200: "#e3e3fe",
+      300: "#c9c3ec",
+      400: "#afa0e0",
+      500: "#9a82da",
+      600: "#8360c3",
+      700: "#61479c",
+      800: "#493481",
+      900: "#352465",
+      1000: "#1d154d",
+    },
+    magenta: {
+      100: "#fff8ff",
+      200: "#fce0f8",
+      300: "#f3b4e2",
+      400: "#eb8acf",
+      500: "#de66b0",
+      600: "#be428f",
+      700: "#952e70",
+      800: "#751f57",
+      900: "#5b1043",
+      1000: "#3f0534",
+    },
+    "neutral-alpha": {
+      "100A": "rgba(9, 30, 77, 0.03)",
+      "500A": "rgba(9, 30, 77, 0.5)",
+      "200A": "rgba(9, 30, 77, 0.06)",
+      "300A": "rgba(9, 30, 77, 0.14)",
+      "400A": "rgba(9, 30, 77, 0.31)",
+    },
+    "dark-neutral-alpha": {
+      "100A": "rgba(188, 214, 240, 0.04)",
+      "200A": "rgba(188, 214, 240, 0.84)",
+      "300A": "rgba(188, 214, 240, 0.16)",
+      "400A": "rgba(188, 214, 240, 0.28)",
+      "500A": "rgba(188, 214, 240, 0.5)",
+      "250A": "rgba(188, 214, 240, 0.1)",
+      "350A": "rgba(188, 214, 240, 0.2)",
+      "negative-100A": "rgba(0, 0, 0, 0.24)",
+    },
+    yellow: {
+      100: "#fdf8e9",
+      200: "#f8e6a0",
+      300: "#e9c348",
+      400: "#d5a406",
+      500: "#bc870d",
+      600: "#a4670b",
+      700: "#854901",
+      800: "#653805",
+      900: "#4b2c04",
+      1000: "#2d1f00",
+    },
+    Transparent: "rgba(0, 0, 0, 0)",
+    text: {
+      default: "#282f3c",
+      subtle: "#4b5668",
+      subtlest: "#626f86",
+      disabled: "rgba(9, 30, 77, 0.31)",
+      selected: "#0c625c",
+      inverse: "#ffffff",
+      success: "#094c3b",
+      information: "#273c8f",
+      danger: "#811436",
+      brand: {
+        default: "#0c625c",
+        bold: "#0b3633",
+      },
+      warning: {
+        default: "#653805",
+        inverse: "#282f3c",
+      },
+      accent: {
+        orange: {
+          default: "#782612",
+          bold: "#5d1712",
+        },
+        yellow: {
+          default: "#653805",
+          bold: "#630d2e",
+        },
+        green: {
+          default: "#094c3b",
+          bold: "#073734",
+        },
+        teal: {
+          default: "#09486b",
+          bold: "#0d324d",
+        },
+        brown: {
+          default: "#553d28",
+          bold: "#3f2c1e",
+        },
+        blue: {
+          default: "#273c8f",
+          bold: "#212c64",
+        },
+        purple: {
+          default: "#493481",
+          bold: "#352465",
+        },
+        magenta: {
+          default: "#751f57",
+          bold: "#5b1043",
+        },
+        red: {
+          default: "#811436",
+          bold: "#630d2e",
+        },
+        gray: {
+          default: "#4b5668",
+          bold: "#1e242d",
+        },
+      },
+    },
+    link: {
+      default: "#274eb5",
+      pressed: "#273c8f",
+      visited: {
+        default: "#493481",
+        hover: "#352465",
+      },
+    },
+    background: {
+      disabled: {
+        default: "rgba(9, 30, 77, 0.03)",
+      },
+      brand: {
+        subtlest: {
+          default: "#f0fcfa",
+          hover: "#d2eeeb",
+          pressed: "#a0cec8",
+        },
+        subtler: {
+          default: "#d2eeeb",
+          hover: "#a0cec8",
+          pressed: "#6fb5ad",
+        },
+        subtle: {
+          default: "#a0cec8",
+          hover: "#6fb5ad",
+          pressed: "#3e9f97",
+        },
+        bolder: {
+          default: "#0c625c",
+          hover: "#014d49",
+          pressed: "#0b3633",
+        },
+      },
+      accent: {
+        red: {
+          subtlest: {
+            default: "#fff8f3",
+            hover: "#fee2dd",
+            pressed: "#fab6ad",
+          },
+          subtler: {
+            default: "#fee2dd",
+            hover: "#fab6ad",
+            pressed: "#fa877e",
+          },
+          subtle: {
+            default: "#fa877e",
+            hover: "#ed6362",
+            pressed: "#ca414e",
+          },
+          bolder: {
+            default: "#a42237",
+            hover: "#811436",
+            pressed: "#630d2e",
+          },
+        },
+        orange: {
+          subtlest: {
+            default: "#fffaed",
+            hover: "#fee3c1",
+            pressed: "#f6b981",
+          },
+          subtler: {
+            default: "#fee3c1",
+            hover: "#f6b981",
+            pressed: "#f19457",
+          },
+          subtle: {
+            default: "#f19457",
+            hover: "#da772e",
+            pressed: "#b55919",
+          },
+          bolder: {
+            default: "#943a14",
+            hover: "#782612",
+            pressed: "#5d1712",
+          },
+        },
+        green: {
+          subtlest: {
+            default: "#efffed",
+            hover: "#cbf3c9",
+            pressed: "#83d895",
+          },
+          subtler: {
+            default: "#cbf3c9",
+            hover: "#83d895",
+            pressed: "#32c180",
+          },
+          subtle: {
+            default: "#32c180",
+            hover: "#1ca673",
+            pressed: "#09825d",
+          },
+          bolder: {
+            default: "#0c6241",
+            hover: "#094c3b",
+            pressed: "#073734",
+          },
+        },
+        teal: {
+          subtlest: {
+            default: "#f6fbff",
+            hover: "#c3f2f8",
+            pressed: "#82d3e3",
+          },
+          subtler: {
+            default: "#c3f2f8",
+            hover: "#82d3e3",
+            pressed: "#51b9cf",
+          },
+          subtle: {
+            default: "#51b9cf",
+            hover: "#1a9eb7",
+            pressed: "#0b7da1",
+          },
+          bolder: {
+            default: "#005b81",
+            hover: "#09486b",
+            pressed: "#0d324d",
+          },
+        },
+        brown: {
+          subtlest: {
+            default: "#f9faf4",
+            hover: "#ece8dc",
+            pressed: "#d1c5b0",
+          },
+          subtler: {
+            default: "#ece8dc",
+            hover: "#d1c5b0",
+            pressed: "#bea889",
+          },
+          subtle: {
+            default: "#bea889",
+            hover: "#a98c66",
+            pressed: "#8b6d45",
+          },
+          bolder: {
+            default: "#6e5232",
+            hover: "#553d28",
+            pressed: "#3f2c1e",
+          },
+        },
+        blue: {
+          subtlest: {
+            default: "#f6fbff",
+            hover: "#d9ecff",
+            pressed: "#a6cdfd",
+          },
+          subtler: {
+            default: "#d9ecff",
+            hover: "#a6cdfd",
+            pressed: "#7cabf9",
+          },
+          subtle: {
+            default: "#7cabf9",
+            hover: "#608ef6",
+            pressed: "#446add",
+          },
+          bolder: {
+            default: "#274eb5",
+            hover: "#273c8f",
+            pressed: "#212c64",
+          },
+        },
+        purple: {
+          subtlest: {
+            default: "#f6f9ff",
+            hover: "#e3e3fe",
+            pressed: "#c9c3ec",
+          },
+          subtler: {
+            default: "#e3e3fe",
+            hover: "#c9c3ec",
+            pressed: "#afa0e0",
+          },
+          subtle: {
+            default: "#afa0e0",
+            hover: "#9a82da",
+            pressed: "#8360c3",
+          },
+          bolder: {
+            default: "#61479c",
+            hover: "#493481",
+            pressed: "#352465",
+          },
+        },
+        magenta: {
+          subtlest: {
+            default: "#fff8ff",
+            hover: "#fce0f8",
+            pressed: "#f3b4e2",
+          },
+          subtler: {
+            default: "#fce0f8",
+            hover: "#f3b4e2",
+            pressed: "#eb8acf",
+          },
+          subtle: {
+            default: "#eb8acf",
+            hover: "#de66b0",
+            pressed: "#be428f",
+          },
+          bolder: {
+            default: "#952e70",
+            hover: "#751f57",
+            pressed: "#5b1043",
+          },
+        },
+        yellow: {
+          subtlest: {
+            default: "#fdf8e9",
+            hover: "#f8e6a0",
+            pressed: "#e9c348",
+          },
+          subtler: {
+            default: "#f8e6a0",
+            hover: "#e9c348",
+            pressed: "#d5a406",
+          },
+          subtle: {
+            default: "#e9c348",
+            hover: "#d5a406",
+            pressed: "#bc870d",
+          },
+          bolder: {
+            default: "#854901",
+            hover: "#653805",
+            pressed: "#4b2c04",
+          },
+        },
+        gray: {
+          subtlest: {
+            pressed: "#f1f2f4",
+            default: "#dcdfe4",
+            hover: "#b3b9c4",
+          },
+          subtler: {
+            default: "#dcdfe4",
+            hover: "#b3b9c4",
+            pressed: "#8590a2",
+          },
+          subtle: {
+            default: "#8590a2",
+            hover: "#b3b9c4",
+            pressed: "#dcdfe4",
+          },
+          bolder: {
+            default: "#626f86",
+            hover: "#4b5668",
+            pressed: "#374152",
+          },
+        },
+        neutral: {
+          subtlest: {
+            default: "rgba(9, 30, 77, 0.06)",
+            hover: "rgba(9, 30, 77, 0.14)",
+            pressed: "rgba(9, 30, 77, 0.31)",
+          },
+          subtle: {
+            default: "rgba(0, 0, 0, 0)",
+            hover: "rgba(9, 30, 77, 0.06)",
+            pressed: "rgba(9, 30, 77, 0.14)",
+          },
+          bolder: {
+            default: "#4b5668",
+            hover: "#374152",
+            pressed: "#282f3c",
+          },
+        },
+      },
+      info: {
+        default: "#f6fbff",
+        hover: "#d9ecff",
+        pressed: "#a6cdfd",
+        bolder: {
+          default: "#273c8f",
+          hover: "#212c64",
+          pressed: "#091e47",
+        },
+      },
+      success: {
+        default: "#efffed",
+        hover: "#cbf3c9",
+        pressed: "#83d895",
+        bolder: {
+          default: "#094c3b",
+          hover: "#073734",
+          pressed: "#032429",
+        },
+      },
+      warning: {
+        default: "#fdf8e9",
+        hover: "#f8e6a0",
+        pressed: "#e9c348",
+        bolder: {
+          default: "#653805",
+          hover: "#4b2c04",
+          pressed: "#2d1f00",
+        },
+      },
+      danger: {
+        default: "#fff8f3",
+        hover: "#fee2dd",
+        pressed: "#fab6ad",
+        bolder: {
+          default: "#811436",
+          hover: "#630d2e",
+          pressed: "#440223",
+        },
+      },
+      inverse: {
+        default: "#1d2125",
+        subtle: {
+          default: "rgba(0, 0, 0, 0.16)",
+          hovered: "rgba(0, 0, 0, 0.24)",
+          pressed: "rgba(0, 0, 0, 0.32)",
+        },
+      },
+      seleted: {
+        default: "#f0fcfa",
+        hovered: "#d2eeeb",
+        pressed: "#a0cec8",
+        bold: {
+          default: "#0c625c",
+          hovered: "#014d49",
+          pressed: "#0b3633",
+        },
+      },
+      input: {
+        default: "#ffffff",
+        hovered: "#f7f8f9",
+        pressed: "#ffffff",
+      },
+    },
+    border: {
+      default: "rgba(9, 30, 77, 0.14)",
+      bold: "#758195",
+      disabled: "rgba(9, 30, 77, 0.06)",
+      inverse: "#ffffff",
+      input: "#8590a2",
+      focused: "#3e9f97",
+      selected: "#0c625c",
+      brand: "#0c625c",
+      danger: "#ca414e",
+      warning: "#b55919",
+      success: "#09825d",
+      information: "#446add",
+      accent: {
+        red: "#ca414e",
+        orange: "#b55919",
+        yellow: "#a4670b",
+        green: "#09825d",
+        teal: "#0b7da1",
+        brown: "#8b6d45",
+        blue: "#446add",
+        purple: "#8360c3",
+        magenta: "#be428f",
+        gray: "#758195",
+      },
+    },
+    icon: {
+      default: "#1e242d",
+      subtle: "#4b5668",
+      subtlest: "#626f86",
+      disabled: "rgba(9, 30, 77, 0.31)",
+      selected: "#0c625c",
+      inverse: "#ffffff",
+      success: "#09825d",
+      information: "#446add",
+      danger: "#a42237",
+      brand: {
+        default: "#0c625c",
+        bold: "#014d49",
+      },
+      accent: {
+        orange: {
+          default: "#b55919",
+          bold: "#943a14",
+        },
+        yellow: {
+          default: "#a4670b",
+          bold: "#854901",
+        },
+        green: {
+          default: "#09825d",
+          bold: "#0c6241",
+        },
+        teal: {
+          default: "#0b7da1",
+          bold: "#005b81",
+        },
+        brown: {
+          default: "#8b6d45",
+          bold: "#6e5232",
+        },
+        blue: {
+          default: "#446add",
+          bold: "#274eb5",
+        },
+        purple: {
+          default: "#8360c3",
+          bold: "#61479c",
+        },
+        magenta: {
+          default: "#be428f",
+          bold: "#952e70",
+        },
+        red: {
+          default: "#a42237",
+          bold: "#811436",
+        },
+        gray: {
+          default: "#758195",
+          bold: "#626f86",
+        },
+      },
+      warning: {
+        default: "#b55919",
+        inverse: "#282f3c",
+      },
+    },
+    elevation: {
+      surface: {
+        default: "#ffffff",
+        hovered: "#f1f2f4",
+        pressed: "#dcdfe4",
+        overlay: {
+          default: "#ffffff",
+          hovered: "#f1f2f4",
+          pressed: "#dcdfe4",
+        },
+        sunken: {
+          default: "#f7f8f9",
+        },
+        raised: {
+          default: "#ffffff",
+          hovered: "#f1f2f4",
+          pressed: "#dcdfe4",
+        },
+      },
+    },
+    blanket: {
+      default: "rgba(9, 30, 77, 0.5)",
+      selected: "rgba(56, 139, 255, 0.08)",
+      danger: "rgba(239, 92, 72, 0.08)",
+    },
+    interaction: {
+      hovered: "rgba(0, 0, 0, 0.16)",
+      pressed: "rgba(0, 0, 0, 0.32)",
+    },
+    skeleton: {
+      default: "rgba(9, 30, 77, 0.06)",
+      subtle: "rgba(9, 30, 77, 0.03)",
+    },
+  },
+  space: {
+    0: "0rem",
+    25: "0.125rem",
+    50: "0.25rem",
+    75: "0.375rem",
+    100: "0.5rem",
+    150: "0.75rem",
+    200: "1rem",
+    250: "1.25rem",
+    300: "1.5rem",
+    400: "2rem",
+    500: "2.5rem",
+    600: "3rem",
+    800: "4rem",
+    1000: "5rem",
+    negative: {
+      25: "-0.125rem",
+      50: "-0.25rem",
+      75: "-0.375rem",
+      100: "-0.5rem",
+      150: "-0.75rem",
+      200: "-1rem",
+      250: "-1.25rem",
+      300: "-1.5rem",
+      400: "-2rem",
+    },
+  },
+  "border-radius": {
+    none: "0",
+    xs: "0.125rem",
+    sm: "0.25rem",
+    md: "0.5rem",
+    lg: "1rem",
+    xl: "1.5rem",
+    "2xl": "2rem",
+    "3xl": "3rem",
+    full: "999px",
+  },
+  "icon-size": {
+    xs: "1rem",
+    sm: "1.25rem",
+    md: "1.5rem",
+    lg: "2rem",
+    xl: "3rem",
+  },
+  "border-width": {
+    0: "0",
+    1: "1px",
+    2: "2px",
+  },
+  "font-weight": {
+    regular: 400,
+    medium: 500,
+    bold: 700,
+  },
+  "line-height": {
+    1: "12px",
+    2: "16px",
+    3: "20px",
+    4: "24px",
+    5: "28px",
+    6: "32px",
+    7: "36px",
+    8: "40px",
+    9: "52px",
+    10: "64px",
+    none: 1,
+  },
+  "font-size": {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "1.5rem",
+    "2xl": "2em",
+    "3xl": "2.25rem",
+    "4xl": "3rem",
+  },
+  elevation: {
+    shadow: {
+      overflow: "0 0 12px 0 rgba(3, 4, 4, 0.56), 0 0 1px 0 rgba(3, 4, 4, 0.5)",
+      overlay:
+        "0 8px 12px 0 rgba(9, 30, 66, 0.15), 0 0 1px 0 rgba(9, 30, 66, 0.31)",
+      raised:
+        "0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31)",
+    },
+  },
+  heading: {
+    xs: "500 0.75rem/16px Archivo",
+    sm: "500 1rem/20px Archivo",
+    md: "500 1.25rem/24px Archivo",
+    lg: "500 1.5rem/28px Archivo",
+    xl: "500 2em/32px Archivo",
+    "2xl": "500 2.25rem/40px Archivo",
+    "3xl": "500 3rem/52px Archivo",
+  },
+  body: {
+    sm: "400 0.75rem/16px Archivo",
+    md: "400 0.875rem/20px Archivo",
+    lg: "400 1rem/24px Archivo",
+  },
+};