@bcc-code/design-tokens 3.0.16 → 3.0.18

package/build/bcc/css/tailwind-light.css

@@ -5,43 +5,43 @@
 
 @theme {
   --color-neutral-0: #ffffff;
-  --color-neutral-100: #f7f8f9;
-  --color-neutral-200: #f1f2f4;
-  --color-neutral-300: #dcdfe4;
-  --color-neutral-400: #b3b9c4;
-  --color-neutral-500: #8590a2;
-  --color-neutral-600: #758195;
-  --color-neutral-700: #626f86;
-  --color-neutral-800: #44546f;
-  --color-neutral-900: #2c3e5d;
-  --color-neutral-1000: #172b4d;
-  --color-neutral-1100: #091e42;
-  --color-neutral-alpha-100-a: rgba(9, 30, 77, 0.03);
-  --color-neutral-alpha-200-a: rgba(9, 30, 77, 0.06);
-  --color-neutral-alpha-300-a: rgba(9, 30, 77, 0.14);
-  --color-neutral-alpha-400-a: rgba(9, 30, 77, 0.32);
-  --color-neutral-alpha-500-a: rgba(9, 30, 77, 0.5);
-  --color-dark-neutral-0: #161a1d;
-  --color-dark-neutral-100: #101214;
-  --color-dark-neutral-200: #22272b;
-  --color-dark-neutral-250: #282e33;
-  --color-dark-neutral-300: #2c333a;
-  --color-dark-neutral-350: #38414a;
-  --color-dark-neutral-400: #454f59;
-  --color-dark-neutral-500: #596773;
-  --color-dark-neutral-600: #738496;
-  --color-dark-neutral-700: #8c9bab;
-  --color-dark-neutral-800: #9fadbc;
-  --color-dark-neutral-900: #b6c2cf;
-  --color-dark-neutral-1000: #c7d1db;
-  --color-dark-neutral-1100: #dee4ea;
-  --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
-  --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
-  --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
-  --color-dark-neutral-alpha-300-a: rgba(188, 214, 240, 0.16);
-  --color-dark-neutral-alpha-350-a: rgba(188, 214, 240, 0.2);
-  --color-dark-neutral-alpha-400-a: rgba(188, 214, 240, 0.28);
-  --color-dark-neutral-alpha-500-a: rgba(188, 214, 240, 0.5);
+  --color-neutral-100: #f8f8f8;
+  --color-neutral-200: #f0f1f2;
+  --color-neutral-300: #dddee1;
+  --color-neutral-400: #b7b9be;
+  --color-neutral-500: #8c8f97;
+  --color-neutral-600: #7d818a;
+  --color-neutral-700: #6b6e76;
+  --color-neutral-800: #505258;
+  --color-neutral-900: #3b3d42;
+  --color-neutral-1000: #292a2e;
+  --color-neutral-1100: #1e1f21;
+  --color-neutral-alpha-100-a: rgba(23, 23, 23, 0.03);
+  --color-neutral-alpha-200-a: rgba(5, 21, 36, 0.06);
+  --color-neutral-alpha-300-a: rgba(11, 18, 14, 0.14);
+  --color-neutral-alpha-400-a: rgba(8, 15, 33, 0.29);
+  --color-neutral-alpha-500-a: rgba(5, 12, 31, 0.46);
+  --color-dark-neutral-0: #18191a;
+  --color-dark-neutral-100: #1f1f21;
+  --color-dark-neutral-200: #242528;
+  --color-dark-neutral-250: #2b2c2f;
+  --color-dark-neutral-300: #303134;
+  --color-dark-neutral-350: #3d3f43;
+  --color-dark-neutral-400: #4b4d51;
+  --color-dark-neutral-500: #63666b;
+  --color-dark-neutral-600: #7e8188;
+  --color-dark-neutral-700: #96999e;
+  --color-dark-neutral-800: #a9abaf;
+  --color-dark-neutral-900: #bfc1c4;
+  --color-dark-neutral-1000: #cecfd2;
+  --color-dark-neutral-1100: #e2e3e4;
+  --color-dark-neutral-alpha-100-a: rgba(189, 189, 189, 0.04);
+  --color-dark-neutral-alpha-200-a: rgba(206, 206, 217, 0.07);
+  --color-dark-neutral-alpha-250-a: rgba(217, 218, 231, 0.1);
+  --color-dark-neutral-alpha-300-a: rgba(227, 228, 242, 0.12);
+  --color-dark-neutral-alpha-350-a: rgba(232, 237, 253, 0.18);
+  --color-dark-neutral-alpha-400-a: rgba(229, 233, 246, 0.25);
+  --color-dark-neutral-alpha-500-a: rgba(233, 240, 251, 0.36);
   --color-blue-100: #f6fbff;
   --color-blue-200: #d9ecff;
   --color-blue-300: #a6cdfd;

package/build/bcc/js/dark.js

@@ -6,49 +6,49 @@ export default {
   color: {
     neutral: {
       0: "#ffffff",
-      100: "#f7f8f9",
-      200: "#f1f2f4",
-      300: "#dcdfe4",
-      400: "#b3b9c4",
-      500: "#8590a2",
-      600: "#758195",
-      700: "#626f86",
-      800: "#44546f",
-      900: "#2c3e5d",
-      1000: "#172b4d",
-      1100: "#091e42",
+      100: "#f8f8f8",
+      200: "#f0f1f2",
+      300: "#dddee1",
+      400: "#b7b9be",
+      500: "#8c8f97",
+      600: "#7d818a",
+      700: "#6b6e76",
+      800: "#505258",
+      900: "#3b3d42",
+      1000: "#292a2e",
+      1100: "#1e1f21",
     },
     "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)",
+      "100A": "rgba(23, 23, 23, 0.03)",
+      "200A": "rgba(5, 21, 36, 0.06)",
+      "300A": "rgba(11, 18, 14, 0.14)",
+      "400A": "rgba(8, 15, 33, 0.29)",
+      "500A": "rgba(5, 12, 31, 0.46)",
     },
     "dark-neutral": {
-      0: "#161a1d",
-      100: "#101214",
-      200: "#22272b",
-      250: "#282e33",
-      300: "#2c333a",
-      350: "#38414a",
-      400: "#454f59",
-      500: "#596773",
-      600: "#738496",
-      700: "#8c9bab",
-      800: "#9fadbc",
-      900: "#b6c2cf",
-      1000: "#c7d1db",
-      1100: "#dee4ea",
+      0: "#18191a",
+      100: "#1f1f21",
+      200: "#242528",
+      250: "#2b2c2f",
+      300: "#303134",
+      350: "#3d3f43",
+      400: "#4b4d51",
+      500: "#63666b",
+      600: "#7e8188",
+      700: "#96999e",
+      800: "#a9abaf",
+      900: "#bfc1c4",
+      1000: "#cecfd2",
+      1100: "#e2e3e4",
     },
     "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)",
+      "100A": "rgba(189, 189, 189, 0.04)",
+      "200A": "rgba(206, 206, 217, 0.07)",
+      "250A": "rgba(217, 218, 231, 0.1)",
+      "300A": "rgba(227, 228, 242, 0.12)",
+      "350A": "rgba(232, 237, 253, 0.18)",
+      "400A": "rgba(229, 233, 246, 0.25)",
+      "500A": "rgba(233, 240, 251, 0.36)",
     },
     blue: {
       100: "#f6fbff",
@@ -172,18 +172,18 @@ export default {
     },
     transparent: "rgba(0, 0, 0, 0)",
     text: {
-      default: "#b6c2cf",
-      subtle: "#9fadbc",
-      subtlest: "#8c9bab",
-      disabled: "rgba(188, 214, 240, 0.28)",
+      default: "#e2e3e4",
+      subtle: "#a9abaf",
+      subtlest: "#96999e",
+      disabled: "rgba(229, 233, 246, 0.25)",
       selected: "#6fb5ad",
-      inverse: "#101214",
+      inverse: "#1f1f21",
       success: "#83d895",
       danger: "#fab6ad",
       information: "#a6cdfd",
       warning: {
         default: "#e9c348",
-        inverse: "#101214",
+        inverse: "#1f1f21",
       },
       brand: {
         default: "#6fb5ad",
@@ -191,8 +191,8 @@ export default {
       },
       accent: {
         gray: {
-          default: "#9fadbc",
-          bold: "#dee4ea",
+          default: "#a9abaf",
+          bold: "#e2e3e4",
         },
         blue: {
           default: "#a6cdfd",
@@ -241,18 +241,18 @@ export default {
       },
     },
     icon: {
-      default: "#c7d1db",
-      subtle: "#9fadbc",
-      subtlest: "#8c9bab",
-      disabled: "rgba(188, 214, 240, 0.28)",
+      default: "#cecfd2",
+      subtle: "#a9abaf",
+      subtlest: "#96999e",
+      disabled: "rgba(229, 233, 246, 0.25)",
       selected: "#6fb5ad",
-      inverse: "#101214",
+      inverse: "#1f1f21",
       success: "#1ca673",
       danger: "#ed6362",
       information: "#608ef6",
       warning: {
         default: "#e9c348",
-        inverse: "#101214",
+        inverse: "#1f1f21",
       },
       brand: {
         default: "#6fb5ad",
@@ -260,8 +260,8 @@ export default {
       },
       accent: {
         gray: {
-          default: "#738496",
-          bold: "#8c9bab",
+          default: "#7e8188",
+          bold: "#96999e",
         },
         blue: {
           default: "#608ef6",
@@ -302,20 +302,20 @@ export default {
       },
     },
     border: {
-      default: "rgba(188, 214, 240, 0.16)",
-      bold: "#738496",
-      disabled: "rgba(188, 214, 240, 0.08)",
+      default: "rgba(227, 228, 242, 0.12)",
+      bold: "#7e8188",
+      disabled: "rgba(206, 206, 217, 0.07)",
       selected: "#6fb5ad",
       focused: "#a0cec8",
-      inverse: "#161a1d",
-      input: "#596773",
+      inverse: "#18191a",
+      input: "#63666b",
       success: "#1ca673",
       information: "#608ef6",
       danger: "#ed6362",
       warning: "#bc870d",
       brand: "#6fb5ad",
       accent: {
-        gray: "#738496",
+        gray: "#7e8188",
         blue: "#608ef6",
         teal: "#1a9eb7",
         green: "#1ca673",
@@ -329,7 +329,7 @@ export default {
     },
     background: {
       disabled: {
-        default: "rgba(0, 0, 0, 0.24)",
+        default: "rgba(189, 189, 189, 0.04)",
       },
       selected: {
         default: "#012320",
@@ -349,9 +349,9 @@ export default {
         },
       },
       input: {
-        default: "#22272b",
-        hovered: "#2c333a",
-        pressed: "#22272b",
+        default: "#242528",
+        hovered: "#303134",
+        pressed: "#242528",
       },
       information: {
         default: "#091e47",
@@ -421,23 +421,23 @@ export default {
         },
       },
       neutral: {
-        default: "rgba(188, 214, 240, 0.16)",
-        hover: "rgba(188, 214, 240, 0.28)",
-        pressed: "rgba(188, 214, 240, 0.5)",
+        default: "rgba(227, 228, 242, 0.12)",
+        hover: "rgba(229, 233, 246, 0.25)",
+        pressed: "rgba(233, 240, 251, 0.36)",
         subtle: {
-          default: "rgba(188, 214, 240, 0.08)",
-          hover: "rgba(188, 214, 240, 0.16)",
-          pressed: "rgba(188, 214, 240, 0.28)",
+          default: "rgba(206, 206, 217, 0.07)",
+          hover: "rgba(227, 228, 242, 0.12)",
+          pressed: "rgba(229, 233, 246, 0.25)",
         },
         subtler: {
-          default: "rgba(0, 0, 0, 0.24)",
-          hover: "rgba(188, 214, 240, 0.08)",
-          pressed: "rgba(188, 214, 240, 0.16)",
+          default: "rgba(189, 189, 189, 0.04)",
+          hover: "rgba(206, 206, 217, 0.07)",
+          pressed: "rgba(227, 228, 242, 0.12)",
         },
         subtlest: {
           default: "rgba(0, 0, 0, 0)",
-          hover: "rgba(188, 214, 240, 0.1)",
-          pressed: "rgba(188, 214, 240, 0.16)",
+          hover: "rgba(217, 218, 231, 0.1)",
+          pressed: "rgba(227, 228, 242, 0.12)",
         },
       },
       accent: {
@@ -640,28 +640,28 @@ export default {
           },
         },
         gray: {
-          default: "#2c333a",
-          hover: "#454f59",
-          pressed: "#596773",
+          default: "#303134",
+          hover: "#4b4d51",
+          pressed: "#63666b",
           subtle: {
-            default: "#22272b",
-            hover: "#2c333a",
-            pressed: "#454f59",
+            default: "#242528",
+            hover: "#303134",
+            pressed: "#4b4d51",
           },
           subtler: {
-            default: "#101214",
-            hover: "#22272b",
-            pressed: "#2c333a",
+            default: "#1f1f21",
+            hover: "#242528",
+            pressed: "#303134",
           },
           subtlest: {
-            default: "#161a1d",
-            hover: "#101214",
-            pressed: "#22272b",
+            default: "#18191a",
+            hover: "#1f1f21",
+            pressed: "#242528",
           },
           bolder: {
-            default: "#8c9bab",
-            hover: "#9fadbc",
-            pressed: "#b6c2cf",
+            default: "#96999e",
+            hover: "#a9abaf",
+            pressed: "#bfc1c4",
           },
         },
       },
@@ -676,26 +676,26 @@ export default {
       pressed: "rgba(255, 255, 255, 0.36)",
     },
     skeleton: {
-      default: "rgba(188, 214, 240, 0.08)",
-      subtle: "rgba(0, 0, 0, 0.24)",
+      default: "rgba(206, 206, 217, 0.07)",
+      subtle: "rgba(189, 189, 189, 0.04)",
     },
     elevation: {
       surface: {
-        default: "#101214",
-        hovered: "#22272b",
-        pressed: "#2c333a",
+        default: "#1f1f21",
+        hovered: "#242528",
+        pressed: "#303134",
         overlay: {
-          default: "#22272b",
-          hovered: "#2c333a",
-          pressed: "#454f59",
+          default: "#242528",
+          hovered: "#303134",
+          pressed: "#4b4d51",
         },
         raised: {
-          default: "#22272b",
-          hovered: "#2c333a",
-          pressed: "#454f59",
+          default: "#242528",
+          hovered: "#303134",
+          pressed: "#4b4d51",
         },
         sunken: {
-          default: "#161a1d",
+          default: "#18191a",
         },
       },
     },