@bcc-code/design-tokens 3.0.10 → 3.0.13

package/build/bcc/js/dark.js

@@ -3,9 +3,6 @@
  */
 
 export default {
-  "font-family": {
-    archivo: "Archivo",
-  },
   color: {
     neutral: {
       0: "#ffffff",
@@ -43,7 +40,6 @@ export default {
       900: "#b6c2cf",
       1000: "#c7d1db",
       1100: "#dee4ea",
-      "negative-100": "#101214",
     },
     "dark-neutral-alpha": {
       "100A": "rgba(0, 0, 0, 0.24)",
@@ -174,7 +170,7 @@ export default {
       900: "#352465",
       1000: "#1d154d",
     },
-    Transparent: "rgba(0, 0, 0, 0)",
+    transparent: "rgba(0, 0, 0, 0)",
     text: {
       default: "#b6c2cf",
       subtle: "#9fadbc",
@@ -346,7 +342,6 @@ export default {
         },
       },
       inverse: {
-        default: "#ffffff",
         subtle: {
           default: "rgba(255, 255, 255, 0.16)",
           hovered: "rgba(255, 255, 255, 0.24)",
@@ -419,18 +414,180 @@ export default {
           hover: "#a0cec8",
           pressed: "#d2eeeb",
         },
+        boldest: {
+          default: "#f0fcfa",
+          hover: "#d2eeeb",
+          pressed: "#a0cec8",
+        },
+      },
+      neutral: {
+        default: "rgba(188, 214, 240, 0.16)",
+        hover: "rgba(188, 214, 240, 0.28)",
+        pressed: "rgba(188, 214, 240, 0.5)",
+        subtle: {
+          default: "rgba(188, 214, 240, 0.08)",
+          hover: "rgba(188, 214, 240, 0.16)",
+          pressed: "rgba(188, 214, 240, 0.28)",
+        },
+        subtler: {
+          default: "rgba(0, 0, 0, 0.24)",
+          hover: "rgba(188, 214, 240, 0.08)",
+          pressed: "rgba(188, 214, 240, 0.16)",
+        },
+        subtlest: {
+          default: "rgba(0, 0, 0, 0)",
+          hover: "rgba(188, 214, 240, 0.1)",
+          pressed: "rgba(188, 214, 240, 0.16)",
+        },
       },
       accent: {
-        neutral: {
+        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",
+          },
+        },
+        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",
+          },
+        },
+        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",
+          },
+        },
+        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",
+          },
+        },
+        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",
+          },
+        },
+        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",
+          },
+        },
+        red: {
           subtlest: {
-            default: "rgba(188, 214, 240, 0.16)",
-            hover: "rgba(188, 214, 240, 0.28)",
-            pressed: "rgba(188, 214, 240, 0.08)",
+            default: "#440223",
+            hover: "#630d2e",
+            pressed: "#811436",
+          },
+          subtler: {
+            default: "#630d2e",
+            hover: "#811436",
+            pressed: "#a42237",
           },
           subtle: {
-            default: "rgba(0, 0, 0, 0)",
-            hover: "rgba(188, 214, 240, 0.08)",
-            pressed: "rgba(188, 214, 240, 0.16)",
+            default: "#a42237",
+            hover: "#ca414e",
+            pressed: "#ed6362",
           },
           bolder: {
             default: "#fa877e",
@@ -483,24 +640,27 @@ export default {
           },
         },
         gray: {
-          subtlest: {
+          default: "#2c333a",
+          hover: "#454f59",
+          pressed: "#596773",
+          subtle: {
             default: "#22272b",
             hover: "#2c333a",
             pressed: "#454f59",
           },
           subtler: {
-            default: "#454f59",
-            hover: "#596773",
-            pressed: "#738496",
-          },
-          subtle: {
-            default: "#596773",
-            hover: "#454f59",
+            default: "#101214",
+            hover: "#22272b",
             pressed: "#2c333a",
           },
+          subtlest: {
+            default: "#161a1d",
+            hover: "#101214",
+            pressed: "#22272b",
+          },
           bolder: {
             default: "#8c9bab",
-            hover: "#b6c2cf",
+            hover: "#9fadbc",
             pressed: "#b6c2cf",
           },
         },
@@ -569,13 +729,15 @@ export default {
   },
   "border-radius": {
     none: "0",
-    xs: "0.125rem",
-    sm: "0.25rem",
+    "2xs": "0.125rem",
+    xs: "0.25rem",
+    sm: "0.375rem",
     md: "0.5rem",
-    lg: "1rem",
-    xl: "1.5rem",
-    "2xl": "2rem",
-    "3xl": "3rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    "2xl": "1.5rem",
+    "3xl": "2rem",
+    "4xl": "3rem",
     full: "999px",
   },
   "icon-size": {
@@ -590,13 +752,16 @@ export default {
     1: "1px",
     2: "2px",
   },
+  "font-family": {
+    archivo: "Archivo",
+  },
   "font-weight": {
     regular: 400,
     medium: 500,
     bold: 700,
   },
   "line-height": {
-    1: "12px",
+    1: "14px",
     2: "16px",
     3: "20px",
     4: "24px",
@@ -604,9 +769,9 @@ export default {
     6: "32px",
     7: "36px",
     8: "40px",
-    9: "52px",
+    9: "56px",
     10: "64px",
-    none: 1,
+    none: "normal",
   },
   "font-size": {
     xs: "0.75rem",
@@ -618,31 +783,28 @@ export default {
     "3xl": "2.25rem",
     "4xl": "3rem",
   },
-  elevation: {
-    shadow: {
-      overflow: {
-        default: "0 0 12px 0 rgba(3, 4, 4, 0.56), 0 0 1px 0 rgba(3, 4, 4, 0.5)",
-        perimeter: "inset 0 0 0 0 #091e421f",
-        spread: "inset 0 0 0 0 #091e4229",
-      },
-      overlay:
-        "0 8px 12px 0 rgba(9, 30, 66, 0.15), 0 0 1px 0 1px 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",
+    xs: "700 0.75rem/14px Archivo",
+    sm: "700 0.875rem/16px Archivo",
+    md: "700 1rem/20px Archivo",
+    lg: "700 1.25rem/24px Archivo",
+    xl: "700 1.5rem/28px Archivo",
+    "2xl": "700 2em/32px Archivo",
+    "3xl": "700 2.25rem/40px Archivo",
+    "4xl": "700 3rem/56px Archivo",
+    "5xl": "700 3rem/64px Archivo",
   },
   body: {
     sm: "400 0.75rem/16px Archivo",
     md: "400 0.875rem/20px Archivo",
     lg: "400 1rem/24px Archivo",
   },
+  elevation: {
+    shadow: {
+      overlow: "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
+      overlay:
+        "0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31)",
+      raised: "0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31)",
+    },
+  },
 };

package/build/bcc/js/light.js

@@ -3,9 +3,6 @@
  */
 
 export default {
-  "font-family": {
-    archivo: "Archivo",
-  },
   color: {
     neutral: {
       0: "#ffffff",
@@ -43,7 +40,6 @@ export default {
       900: "#b6c2cf",
       1000: "#c7d1db",
       1100: "#dee4ea",
-      "negative-100": "#101214",
     },
     "dark-neutral-alpha": {
       "100A": "rgba(0, 0, 0, 0.24)",
@@ -174,7 +170,7 @@ export default {
       900: "#352465",
       1000: "#1d154d",
     },
-    Transparent: "rgba(0, 0, 0, 0)",
+    transparent: "rgba(0, 0, 0, 0)",
     text: {
       default: "#172b4d",
       subtle: "#44546f",
@@ -424,27 +420,27 @@ export default {
           pressed: "#014d49",
         },
       },
-      accent: {
-        neutral: {
-          default: "rgba(9, 30, 77, 0.14)",
-          hover: "rgba(9, 30, 77, 0.32)",
-          pressed: "rgba(9, 30, 77, 0.5)",
-          subtle: {
-            default: "rgba(9, 30, 77, 0.06)",
-            hover: "rgba(9, 30, 77, 0.14)",
-            pressed: "rgba(9, 30, 77, 0.32)",
-          },
-          subtler: {
-            default: "rgba(9, 30, 77, 0.03)",
-            hover: "rgba(9, 30, 77, 0.06)",
-            pressed: "rgba(9, 30, 77, 0.14)",
-          },
-          subtlest: {
-            default: "rgba(0, 0, 0, 0)",
-            hover: "rgba(9, 30, 77, 0.03)",
-            pressed: "rgba(9, 30, 77, 0.06)",
-          },
+      neutral: {
+        default: "rgba(9, 30, 77, 0.14)",
+        hover: "rgba(9, 30, 77, 0.32)",
+        pressed: "rgba(9, 30, 77, 0.5)",
+        subtle: {
+          default: "rgba(9, 30, 77, 0.06)",
+          hover: "rgba(9, 30, 77, 0.14)",
+          pressed: "rgba(9, 30, 77, 0.32)",
         },
+        subtler: {
+          default: "rgba(9, 30, 77, 0.03)",
+          hover: "rgba(9, 30, 77, 0.06)",
+          pressed: "rgba(9, 30, 77, 0.14)",
+        },
+        subtlest: {
+          default: "rgba(0, 0, 0, 0)",
+          hover: "rgba(9, 30, 77, 0.03)",
+          pressed: "rgba(9, 30, 77, 0.06)",
+        },
+      },
+      accent: {
         blue: {
           subtle: {
             default: "#7cabf9",
@@ -581,6 +577,11 @@ export default {
           subtle: {
             default: "#fa877e",
             hover: "#fab6ad",
+            pressed: "#fee2dd",
+          },
+          subtler: {
+            default: "#fee2dd",
+            hover: "#fab6ad",
             pressed: "#fa877e",
           },
           subtlest: {
@@ -728,13 +729,15 @@ export default {
   },
   "border-radius": {
     none: "0",
-    xs: "0.125rem",
-    sm: "0.25rem",
+    "2xs": "0.125rem",
+    xs: "0.25rem",
+    sm: "0.375rem",
     md: "0.5rem",
-    lg: "1rem",
-    xl: "1.5rem",
-    "2xl": "2rem",
-    "3xl": "3rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    "2xl": "1.5rem",
+    "3xl": "2rem",
+    "4xl": "3rem",
     full: "999px",
   },
   "icon-size": {
@@ -749,13 +752,16 @@ export default {
     1: "1px",
     2: "2px",
   },
+  "font-family": {
+    archivo: "Archivo",
+  },
   "font-weight": {
     regular: 400,
     medium: 500,
     bold: 700,
   },
   "line-height": {
-    1: "12px",
+    1: "14px",
     2: "16px",
     3: "20px",
     4: "24px",
@@ -763,9 +769,9 @@ export default {
     6: "32px",
     7: "36px",
     8: "40px",
-    9: "52px",
+    9: "56px",
     10: "64px",
-    none: 1,
+    none: "normal",
   },
   "font-size": {
     xs: "0.75rem",
@@ -778,17 +784,27 @@ export default {
     "4xl": "3rem",
   },
   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",
+    xs: "700 0.75rem/14px Archivo",
+    sm: "700 0.875rem/16px Archivo",
+    md: "700 1rem/20px Archivo",
+    lg: "700 1.25rem/24px Archivo",
+    xl: "700 1.5rem/28px Archivo",
+    "2xl": "700 2em/32px Archivo",
+    "3xl": "700 2.25rem/40px Archivo",
+    "4xl": "700 3rem/56px Archivo",
+    "5xl": "700 3rem/64px Archivo",
   },
   body: {
     sm: "400 0.75rem/16px Archivo",
     md: "400 0.875rem/20px Archivo",
     lg: "400 1rem/24px Archivo",
   },
+  elevation: {
+    shadow: {
+      overlow: "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
+      overlay:
+        "0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31)",
+      raised: "0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31)",
+    },
+  },
 };