@bcc-code/design-tokens 3.0.17 → 3.0.18

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",
         },
       },
     },

package/build/bcc/js/light.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,10 +172,10 @@ export default {
     },
     transparent: "rgba(0, 0, 0, 0)",
     text: {
-      default: "#172b4d",
-      subtle: "#44546f",
-      subtlest: "#626f86",
-      disabled: "rgba(9, 30, 77, 0.32)",
+      default: "#292a2e",
+      subtle: "#505258",
+      subtlest: "#6b6e76",
+      disabled: "rgba(8, 15, 33, 0.29)",
       selected: "#014d49",
       inverse: "#ffffff",
       success: "#094c3b",
@@ -191,8 +191,8 @@ export default {
       },
       accent: {
         gray: {
-          default: "#44546f",
-          bold: "#091e42",
+          default: "#505258",
+          bold: "#1e1f21",
         },
         blue: {
           default: "#273c8f",
@@ -241,10 +241,10 @@ export default {
       },
     },
     icon: {
-      default: "#091e42",
-      subtle: "#44546f",
-      subtlest: "#626f86",
-      disabled: "rgba(9, 30, 77, 0.32)",
+      default: "#1e1f21",
+      subtle: "#505258",
+      subtlest: "#6b6e76",
+      disabled: "rgba(8, 15, 33, 0.29)",
       selected: "#0c625c",
       inverse: "#ffffff",
       success: "#094c3b",
@@ -260,8 +260,8 @@ export default {
       },
       accent: {
         gray: {
-          default: "#44546f",
-          bold: "#091e42",
+          default: "#505258",
+          bold: "#1e1f21",
         },
         blue: {
           default: "#273c8f",
@@ -302,20 +302,20 @@ export default {
       },
     },
     border: {
-      default: "rgba(9, 30, 77, 0.14)",
-      bold: "#758195",
-      disabled: "rgba(9, 30, 77, 0.06)",
+      default: "rgba(11, 18, 14, 0.14)",
+      bold: "#7d818a",
+      disabled: "rgba(5, 21, 36, 0.06)",
       selected: "#0c625c",
       focused: "#3e9f97",
       inverse: "#ffffff",
-      input: "#8590a2",
+      input: "#8c8f97",
       success: "#09825d",
       information: "#446add",
       danger: "#ca414e",
       warning: "#b55919",
       brand: "#0c625c",
       accent: {
-        gray: "#758195",
+        gray: "#7d818a",
         blue: "#446add",
         teal: "#0b7da1",
         green: "#09825d",
@@ -329,7 +329,7 @@ export default {
     },
     background: {
       disabled: {
-        default: "rgba(9, 30, 77, 0.03)",
+        default: "rgba(23, 23, 23, 0.03)",
       },
       selected: {
         default: "#f0fcfa",
@@ -350,7 +350,7 @@ export default {
       },
       input: {
         default: "#ffffff",
-        hovered: "#f7f8f9",
+        hovered: "#f8f8f8",
         pressed: "#ffffff",
       },
       information: {
@@ -421,23 +421,23 @@ export default {
         },
       },
       neutral: {
-        default: "rgba(9, 30, 77, 0.14)",
-        hover: "rgba(9, 30, 77, 0.32)",
-        pressed: "rgba(9, 30, 77, 0.5)",
+        default: "rgba(11, 18, 14, 0.14)",
+        hover: "rgba(8, 15, 33, 0.29)",
+        pressed: "rgba(5, 12, 31, 0.46)",
         subtle: {
-          default: "rgba(9, 30, 77, 0.06)",
-          hover: "rgba(9, 30, 77, 0.14)",
-          pressed: "rgba(9, 30, 77, 0.32)",
+          default: "rgba(5, 21, 36, 0.06)",
+          hover: "rgba(11, 18, 14, 0.14)",
+          pressed: "rgba(8, 15, 33, 0.29)",
         },
         subtler: {
-          default: "rgba(9, 30, 77, 0.03)",
-          hover: "rgba(9, 30, 77, 0.06)",
-          pressed: "rgba(9, 30, 77, 0.14)",
+          default: "rgba(23, 23, 23, 0.03)",
+          hover: "rgba(5, 21, 36, 0.06)",
+          pressed: "rgba(11, 18, 14, 0.14)",
         },
         subtlest: {
           default: "rgba(0, 0, 0, 0)",
-          hover: "rgba(9, 30, 77, 0.03)",
-          pressed: "rgba(9, 30, 77, 0.06)",
+          hover: "rgba(23, 23, 23, 0.03)",
+          pressed: "rgba(5, 21, 36, 0.06)",
         },
       },
       accent: {
@@ -640,34 +640,34 @@ export default {
           },
         },
         gray: {
-          default: "#dcdfe4",
-          hover: "#b3b9c4",
-          pressed: "#8590a2",
+          default: "#dddee1",
+          hover: "#b7b9be",
+          pressed: "#8c8f97",
           subtle: {
-            default: "#f1f2f4",
-            hover: "#dcdfe4",
-            pressed: "#b3b9c4",
+            default: "#f0f1f2",
+            hover: "#dddee1",
+            pressed: "#b7b9be",
           },
           subtler: {
-            default: "#f7f8f9",
-            hover: "#f1f2f4",
-            pressed: "#dcdfe4",
+            default: "#f8f8f8",
+            hover: "#f0f1f2",
+            pressed: "#dddee1",
           },
           subtlest: {
             default: "#ffffff",
-            hover: "#f7f8f9",
-            pressed: "#f1f2f4",
+            hover: "#f8f8f8",
+            pressed: "#f0f1f2",
           },
           bolder: {
-            default: "#626f86",
-            hover: "#44546f",
-            pressed: "#2c3e5d",
+            default: "#6b6e76",
+            hover: "#505258",
+            pressed: "#3b3d42",
           },
         },
       },
     },
     blanket: {
-      default: "rgba(9, 30, 77, 0.5)",
+      default: "rgba(5, 12, 31, 0.46)",
       selected: "rgba(56, 139, 255, 0.08)",
       danger: "rgba(239, 92, 72, 0.08)",
     },
@@ -676,26 +676,26 @@ export default {
       pressed: "rgba(0, 0, 0, 0.32)",
     },
     skeleton: {
-      default: "rgba(9, 30, 77, 0.06)",
-      subtle: "rgba(9, 30, 77, 0.03)",
+      default: "rgba(5, 21, 36, 0.06)",
+      subtle: "rgba(23, 23, 23, 0.03)",
     },
     elevation: {
       surface: {
         default: "#ffffff",
-        hovered: "#f1f2f4",
-        pressed: "#dcdfe4",
+        hovered: "#f0f1f2",
+        pressed: "#dddee1",
         overlay: {
           default: "#ffffff",
-          hovered: "#f1f2f4",
-          pressed: "#dcdfe4",
+          hovered: "#f0f1f2",
+          pressed: "#dddee1",
         },
         raised: {
           default: "#ffffff",
-          hovered: "#f1f2f4",
-          pressed: "#dcdfe4",
+          hovered: "#f0f1f2",
+          pressed: "#dddee1",
         },
         sunken: {
-          default: "#f7f8f9",
+          default: "#f8f8f8",
         },
       },
     },

package/build/primevue/component-dark.js

@@ -259,7 +259,7 @@ export default {
         "color": "{content.background}"
       },
       "offset": "{space.negative.150}",
-      "stroke": "2px solid #22272b"
+      "stroke": "2px solid #242528"
     },
     "lg": {
       "width": "{space.500}",