@bcc-code/design-tokens 3.0.3 → 3.0.5

package/build/bcc/dark.js

@@ -16,14 +16,21 @@ export default {
       500: "#8590a2",
       600: "#758195",
       700: "#626f86",
-      800: "#4b5668",
-      900: "#374152",
-      1000: "#282f3c",
-      1100: "#1e242d",
+      800: "#44546f",
+      900: "#2c3e5d",
+      1000: "#172b4d",
+      1100: "#091e42",
+    },
+    "neutral-alpha": {
+      "100A": "rgba(9, 30, 77, 0.03)",
+      "200A": "rgba(9, 30, 77, 0.06)",
+      "300A": "rgba(9, 30, 77, 0.14)",
+      "400A": "rgba(9, 30, 77, 0.32)",
+      "500A": "rgba(9, 30, 77, 0.5)",
     },
     "dark-neutral": {
       0: "#161a1d",
-      100: "#1d2125",
+      100: "#101214",
       200: "#22272b",
       250: "#282e33",
       300: "#2c333a",
@@ -38,7 +45,40 @@ export default {
       1100: "#dee4ea",
       "negative-100": "#101214",
     },
-    "dark-green": {
+    "dark-neutral-alpha": {
+      "100A": "rgba(0, 0, 0, 0.24)",
+      "200A": "rgba(188, 214, 240, 0.08)",
+      "250A": "rgba(188, 214, 240, 0.1)",
+      "300A": "rgba(188, 214, 240, 0.16)",
+      "350A": "rgba(188, 214, 240, 0.2)",
+      "400A": "rgba(188, 214, 240, 0.28)",
+      "500A": "rgba(188, 214, 240, 0.5)",
+    },
+    blue: {
+      100: "#f6fbff",
+      200: "#d9ecff",
+      300: "#a6cdfd",
+      400: "#7cabf9",
+      500: "#608ef6",
+      600: "#446add",
+      700: "#274eb5",
+      800: "#273c8f",
+      900: "#212c64",
+      1000: "#091e47",
+    },
+    teal: {
+      100: "#f6fbff",
+      200: "#c3f2f8",
+      300: "#82d3e3",
+      400: "#51b9cf",
+      500: "#1a9eb7",
+      600: "#0b7da1",
+      700: "#005b81",
+      800: "#09486b",
+      900: "#0d324d",
+      1000: "#0c2132",
+    },
+    bcc: {
       100: "#f0fcfa",
       200: "#d2eeeb",
       300: "#a0cec8",
@@ -50,30 +90,6 @@ export default {
       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",
@@ -86,18 +102,6 @@ export default {
       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",
@@ -110,29 +114,41 @@ export default {
       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",
+    yellow: {
+      100: "#fdf8e9",
+      200: "#f8e6a0",
+      300: "#e9c348",
+      400: "#d5a406",
+      500: "#bc870d",
+      600: "#a4670b",
+      700: "#854901",
+      800: "#653805",
+      900: "#4b2c04",
+      1000: "#2d1f00",
     },
-    purple: {
-      100: "#f6f9ff",
-      200: "#e3e3fe",
-      300: "#c9c3ec",
-      400: "#afa0e0",
-      500: "#9a82da",
-      600: "#8360c3",
-      700: "#61479c",
-      800: "#493481",
-      900: "#352465",
-      1000: "#1d154d",
+    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",
     },
     magenta: {
       100: "#fff8ff",
@@ -146,34 +162,17 @@ export default {
       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",
+    purple: {
+      100: "#f6f9ff",
+      200: "#e3e3fe",
+      300: "#c9c3ec",
+      400: "#afa0e0",
+      500: "#9a82da",
+      600: "#8360c3",
+      700: "#61479c",
+      800: "#493481",
+      900: "#352465",
+      1000: "#1d154d",
     },
     Transparent: "rgba(0, 0, 0, 0)",
     text: {
@@ -182,58 +181,58 @@ export default {
       subtlest: "#8c9bab",
       disabled: "rgba(188, 214, 240, 0.28)",
       selected: "#6fb5ad",
-      inverse: "#1d2125",
+      inverse: "#101214",
       success: "#83d895",
       danger: "#fab6ad",
       information: "#a6cdfd",
       warning: {
         default: "#e9c348",
-        inverse: "#1d2125",
+        inverse: "#101214",
       },
       brand: {
         default: "#6fb5ad",
         bold: "#a0cec8",
       },
       accent: {
-        orange: {
-          default: "#f6b981",
-          bold: "#fee3c1",
-        },
-        yellow: {
-          default: "#e9c348",
-          bold: "#f8e6a0",
+        gray: {
+          default: "#9fadbc",
+          bold: "#dee4ea",
         },
-        green: {
-          default: "#83d895",
-          bold: "#cbf3c9",
+        blue: {
+          default: "#a6cdfd",
+          bold: "#d9ecff",
         },
         teal: {
           default: "#82d3e3",
           bold: "#c3f2f8",
         },
+        green: {
+          default: "#83d895",
+          bold: "#cbf3c9",
+        },
         brown: {
           default: "#d1c5b0",
           bold: "#ece8dc",
         },
-        blue: {
-          default: "#a6cdfd",
-          bold: "#d9ecff",
+        yellow: {
+          default: "#e9c348",
+          bold: "#f8e6a0",
         },
-        purple: {
-          default: "#c9c3ec",
-          bold: "#e3e3fe",
+        orange: {
+          default: "#f6b981",
+          bold: "#fee3c1",
+        },
+        red: {
+          default: "#fab6ad",
+          bold: "#fee2dd",
         },
         magenta: {
           default: "#f3b4e2",
           bold: "#fce0f8",
         },
-        gray: {
-          default: "#9fadbc",
-          bold: "#dee4ea",
-        },
-        red: {
-          default: "#fab6ad",
-          bold: "#fee2dd",
+        purple: {
+          default: "#c9c3ec",
+          bold: "#e3e3fe",
         },
       },
     },
@@ -245,9 +244,159 @@ export default {
         hover: "#e3e3fe",
       },
     },
+    icon: {
+      default: "#c7d1db",
+      subtle: "#9fadbc",
+      subtlest: "#8c9bab",
+      disabled: "rgba(188, 214, 240, 0.28)",
+      selected: "#6fb5ad",
+      inverse: "#101214",
+      success: "#1ca673",
+      danger: "#ed6362",
+      information: "#608ef6",
+      warning: {
+        default: "#e9c348",
+        inverse: "#101214",
+      },
+      brand: {
+        default: "#6fb5ad",
+        bold: "#a0cec8",
+      },
+      accent: {
+        gray: {
+          default: "#738496",
+          bold: "#8c9bab",
+        },
+        blue: {
+          default: "#608ef6",
+          bold: "#7cabf9",
+        },
+        teal: {
+          default: "#1a9eb7",
+          bold: "#51b9cf",
+        },
+        green: {
+          default: "#1ca673",
+          bold: "#32c180",
+        },
+        brown: {
+          default: "#a98c66",
+          bold: "#bea889",
+        },
+        yellow: {
+          default: "#e9c348",
+          bold: "#f8e6a0",
+        },
+        orange: {
+          default: "#da772e",
+          bold: "#f19457",
+        },
+        red: {
+          default: "#ca414e",
+          bold: "#ed6362",
+        },
+        magenta: {
+          default: "#de66b0",
+          bold: "#eb8acf",
+        },
+        purple: {
+          default: "#9a82da",
+          bold: "#afa0e0",
+        },
+      },
+    },
+    border: {
+      default: "rgba(188, 214, 240, 0.16)",
+      bold: "#738496",
+      disabled: "rgba(188, 214, 240, 0.08)",
+      selected: "#6fb5ad",
+      focused: "#a0cec8",
+      inverse: "#161a1d",
+      input: "#596773",
+      success: "#1ca673",
+      information: "#608ef6",
+      danger: "#ed6362",
+      warning: "#bc870d",
+      brand: "#6fb5ad",
+      accent: {
+        gray: "#738496",
+        blue: "#608ef6",
+        teal: "#1a9eb7",
+        green: "#1ca673",
+        brown: "#a98c66",
+        yellow: "#bc870d",
+        orange: "#da772e",
+        red: "#ed6362",
+        magenta: "#de66b0",
+        purple: "#9a82da",
+      },
+    },
     background: {
       disabled: {
-        default: "rgba(188, 214, 240, 0.04)",
+        default: "rgba(0, 0, 0, 0.24)",
+      },
+      selected: {
+        default: "#012320",
+        hovered: "#0b3633",
+        pressed: "#014d49",
+        bold: {
+          default: "#6fb5ad",
+          hovered: "#a0cec8",
+          pressed: "#d2eeeb",
+        },
+      },
+      inverse: {
+        default: "#ffffff",
+        subtle: {
+          default: "rgba(255, 255, 255, 0.16)",
+          hovered: "rgba(255, 255, 255, 0.24)",
+          pressed: "rgba(255, 255, 255, 0.32)",
+        },
+      },
+      input: {
+        default: "#22272b",
+        hovered: "#2c333a",
+        pressed: "#22272b",
+      },
+      information: {
+        default: "#091e47",
+        hover: "#212c64",
+        pressed: "#273c8f",
+        bolder: {
+          default: "#7cabf9",
+          hover: "#a6cdfd",
+          pressed: "#d9ecff",
+        },
+      },
+      success: {
+        default: "#032429",
+        hover: "#073734",
+        pressed: "#094c3b",
+        bolder: {
+          default: "#32c180",
+          hover: "#83d895",
+          pressed: "#cbf3c9",
+        },
+      },
+      danger: {
+        default: "#440223",
+        hover: "#630d2e",
+        pressed: "#811436",
+        bolder: {
+          default: "#fa877e",
+          hover: "#fab6ad",
+          pressed: "#fee2dd",
+        },
+      },
+      warning: {
+        default: "#2d1f00",
+        hover: "#4b2c04",
+        pressed: "#653805",
+        bolder: {
+          default: "#d5a406",
+          hover: "#e9c348",
+          pressed: "#f8e6a0",
+        },
       },
       brand: {
         subtlest: {
@@ -272,21 +421,16 @@ export default {
         },
       },
       accent: {
-        red: {
+        neutral: {
           subtlest: {
-            default: "#440223",
-            hover: "#630d2e",
-            pressed: "#811436",
-          },
-          subtler: {
-            default: "#630d2e",
-            hover: "#811436",
-            pressed: "#a42237",
+            default: "rgba(188, 214, 240, 0.16)",
+            hover: "rgba(188, 214, 240, 0.28)",
+            pressed: "rgba(188, 214, 240, 0.08)",
           },
           subtle: {
-            default: "#a42237",
-            hover: "#ca414e",
-            pressed: "#ed6362",
+            default: "rgba(0, 0, 0, 0)",
+            hover: "rgba(188, 214, 240, 0.08)",
+            pressed: "rgba(188, 214, 240, 0.16)",
           },
           bolder: {
             default: "#fa877e",
@@ -294,116 +438,6 @@ export default {
             pressed: "#fee2dd",
           },
         },
-        orange: {
-          subtlest: {
-            default: "#420e0d",
-            hover: "#5d1712",
-            pressed: "#782612",
-          },
-          subtler: {
-            default: "#5d1712",
-            hover: "#782612",
-            pressed: "#943a14",
-          },
-          subtle: {
-            default: "#943a14",
-            hover: "#b55919",
-            pressed: "#da772e",
-          },
-          bolder: {
-            default: "#f19457",
-            hover: "#f6b981",
-            pressed: "#fee3c1",
-          },
-        },
-        green: {
-          subtlest: {
-            default: "#032429",
-            hover: "#073734",
-            pressed: "#094c3b",
-          },
-          subtler: {
-            default: "#073734",
-            hover: "#094c3b",
-            pressed: "#0c6241",
-          },
-          subtle: {
-            default: "#0c6241",
-            hover: "#09825d",
-            pressed: "#1ca673",
-          },
-          bolder: {
-            default: "#32c180",
-            hover: "#83d895",
-            pressed: "#cbf3c9",
-          },
-        },
-        teal: {
-          subtlest: {
-            default: "#0c2132",
-            hover: "#0d324d",
-            pressed: "#09486b",
-          },
-          subtler: {
-            default: "#0d324d",
-            hover: "#09486b",
-            pressed: "#005b81",
-          },
-          subtle: {
-            default: "#005b81",
-            hover: "#0b7da1",
-            pressed: "#1a9eb7",
-          },
-          bolder: {
-            default: "#51b9cf",
-            hover: "#82d3e3",
-            pressed: "#c3f2f8",
-          },
-        },
-        brown: {
-          subtlest: {
-            default: "#2e1b0f",
-            hover: "#3f2c1e",
-            pressed: "#553d28",
-          },
-          subtler: {
-            default: "#3f2c1e",
-            hover: "#553d28",
-            pressed: "#6e5232",
-          },
-          subtle: {
-            default: "#6e5232",
-            hover: "#8b6d45",
-            pressed: "#a98c66",
-          },
-          bolder: {
-            default: "#bea889",
-            hover: "#d1c5b0",
-            pressed: "#ece8dc",
-          },
-        },
-        blue: {
-          subtlest: {
-            default: "#091e47",
-            hover: "#212c64",
-            pressed: "#273c8f",
-          },
-          subtler: {
-            default: "#212c64",
-            hover: "#273c8f",
-            pressed: "#274eb5",
-          },
-          subtle: {
-            default: "#274eb5",
-            hover: "#446add",
-            pressed: "#608ef6",
-          },
-          bolder: {
-            default: "#7cabf9",
-            hover: "#a6cdfd",
-            pressed: "#d9ecff",
-          },
-        },
         purple: {
           subtlest: {
             default: "#1d154d",
@@ -448,28 +482,6 @@ export default {
             pressed: "#fce0f8",
           },
         },
-        yellow: {
-          subtlest: {
-            default: "#2d1f00",
-            hover: "#4b2c04",
-            pressed: "#653805",
-          },
-          subtler: {
-            default: "#4b2c04",
-            hover: "#653805",
-            pressed: "#854901",
-          },
-          subtle: {
-            default: "#854901",
-            hover: "#a4670b",
-            pressed: "#bc870d",
-          },
-          bolder: {
-            default: "#d5a406",
-            hover: "#e9c348",
-            pressed: "#f8e6a0",
-          },
-        },
         gray: {
           subtlest: {
             default: "#22272b",
@@ -492,178 +504,24 @@ export default {
             pressed: "#b6c2cf",
           },
         },
-        neutral: {
-          subtlest: {
-            pressed: "rgba(188, 214, 240, 0.84)",
-            default: "rgba(188, 214, 240, 0.16)",
-            hover: "rgba(188, 214, 240, 0.28)",
-          },
-          subtle: {
-            default: "rgba(0, 0, 0, 0)",
-            hover: "rgba(188, 214, 240, 0.84)",
-            pressed: "rgba(188, 214, 240, 0.16)",
-          },
-          bolder: {
-            default: "#9fadbc",
-            hover: "#b6c2cf",
-            pressed: "#c7d1db",
-          },
-        },
-      },
-      info: {
-        default: "#091e47",
-        hover: "#212c64",
-        pressed: "#273c8f",
-        bolder: {
-          default: "#7cabf9",
-          hover: "#a6cdfd",
-          pressed: "#d9ecff",
-        },
-      },
-      success: {
-        default: "#032429",
-        hover: "#073734",
-        pressed: "#094c3b",
-        bolder: {
-          default: "#32c180",
-          hover: "#83d895",
-          pressed: "#cbf3c9",
-        },
-      },
-      warning: {
-        default: "#2d1f00",
-        hover: "#4b2c04",
-        pressed: "#653805",
-        bolder: {
-          default: "#d5a406",
-          hover: "#e9c348",
-          pressed: "#f8e6a0",
-        },
-      },
-      danger: {
-        default: "#440223",
-        hover: "#630d2e",
-        pressed: "#811436",
-        bolder: {
-          default: "#fa877e",
-          hover: "#fab6ad",
-          pressed: "#fee2dd",
-        },
-      },
-      inverse: {
-        default: "#ffffff",
-        subtle: {
-          default: "rgba(255, 255, 255, 0.16)",
-          hovered: "rgba(255, 255, 255, 0.24)",
-          pressed: "rgba(255, 255, 255, 0.32)",
-        },
-      },
-      seleted: {
-        default: "#012320",
-        hovered: "#0b3633",
-        pressed: "#014d49",
-        bold: {
-          default: "#6fb5ad",
-          hovered: "#a0cec8",
-          pressed: "#d2eeeb",
-        },
-      },
-      input: {
-        default: "#22272b",
-        hovered: "#2c333a",
-        pressed: "#22272b",
       },
     },
-    border: {
-      default: "rgba(188, 214, 240, 0.16)",
-      bold: "#738496",
-      disabled: "rgba(188, 214, 240, 0.84)",
-      inverse: "#161a1d",
-      input: "#596773",
-      selected: "#6fb5ad",
-      focused: "#a0cec8",
-      brand: "#6fb5ad",
-      danger: "#ed6362",
-      warning: "#bc870d",
-      success: "#1ca673",
-      information: "#608ef6",
-      accent: {
-        red: "#ed6362",
-        orange: "#da772e",
-        yellow: "#bc870d",
-        green: "#1ca673",
-        teal: "#1a9eb7",
-        brown: "#a98c66",
-        blue: "#608ef6",
-        purple: "#9a82da",
-        magenta: "#de66b0",
-        gray: "#738496",
-      },
+    blanket: {
+      default: "rgba(16, 18, 20, 0.6)",
+      selected: "rgba(29, 122, 252, 0.08)",
+      danger: "rgba(227, 73, 53, 0.08)",
     },
-    icon: {
-      default: "#c7d1db",
-      subtle: "#9fadbc",
-      subtlest: "#8c9bab",
-      disabled: "rgba(188, 214, 240, 0.28)",
-      inverse: "#1d2125",
-      selected: "#6fb5ad",
-      success: "#1ca673",
-      danger: "#ed6362",
-      information: "#608ef6",
-      warning: {
-        default: "#e9c348",
-        inverse: "#1d2125",
-      },
-      brand: {
-        default: "#6fb5ad",
-        bold: "#a0cec8",
-      },
-      accent: {
-        orange: {
-          default: "#da772e",
-          bold: "#f19457",
-        },
-        yellow: {
-          default: "#e9c348",
-          bold: "#f8e6a0",
-        },
-        green: {
-          default: "#1ca673",
-          bold: "#32c180",
-        },
-        teal: {
-          default: "#1a9eb7",
-          bold: "#51b9cf",
-        },
-        brown: {
-          default: "#a98c66",
-          bold: "#bea889",
-        },
-        blue: {
-          default: "#608ef6",
-          bold: "#7cabf9",
-        },
-        purple: {
-          default: "#9a82da",
-          bold: "#afa0e0",
-        },
-        magenta: {
-          default: "#de66b0",
-          bold: "#eb8acf",
-        },
-        gray: {
-          default: "#738496",
-          bold: "#8c9bab",
-        },
-        red: {
-          default: "#ca414e",
-          bold: "#ed6362",
-        },
-      },
+    interaction: {
+      hovered: "rgba(255, 255, 255, 0.2)",
+      pressed: "rgba(255, 255, 255, 0.36)",
+    },
+    skeleton: {
+      default: "rgba(188, 214, 240, 0.08)",
+      subtle: "rgba(0, 0, 0, 0.24)",
     },
     elevation: {
       surface: {
-        default: "#1d2125",
+        default: "#101214",
         hovered: "#22272b",
         pressed: "#2c333a",
         overlay: {
@@ -671,29 +529,16 @@ export default {
           hovered: "#2c333a",
           pressed: "#454f59",
         },
-        sunken: {
-          default: "#161a1d",
-        },
         raised: {
           default: "#22272b",
           hovered: "#2c333a",
           pressed: "#454f59",
         },
+        sunken: {
+          default: "#161a1d",
+        },
       },
     },
-    blanket: {
-      default: "rgba(16, 18, 20, 0.6)",
-      selected: "rgba(29, 122, 252, 0.08)",
-      danger: "rgba(227, 73, 53, 0.08)",
-    },
-    interaction: {
-      hovered: "rgba(255, 255, 255, 0.2)",
-      pressed: "rgba(255, 255, 255, 0.36)",
-    },
-    skeleton: {
-      default: "rgba(188, 214, 240, 0.84)",
-      subtle: "rgba(188, 214, 240, 0.04)",
-    },
   },
   space: {
     0: "0rem",