[colors] feat: update modern colors

packages/colors/src/_colors.scss

@@ -7,50 +7,112 @@
 
 // Gray scale
 
-$black: #101318;
-
-$dark-gray1: #1b2028;
-$dark-gray2: #232a34;
-$dark-gray3: #2e3642;
-$dark-gray4: #353e4b;
-$dark-gray5: #404a59;
-
-$gray1: #5f6d81;
-$gray2: #728197;
-$gray3: #8d99aa;
-$gray4: #aab3c0;
-$gray5: #c4cbd4;
-
-$light-gray1:#d3d8de;
-$light-gray2:#dce0e5;
-$light-gray3:#e5e7eb;
-$light-gray4:#edf0f3;
-$light-gray5:#f6f7f9;
+$black: #111418;
+
+$dark-gray1: #1c2127;
+$dark-gray2: #252a31;
+$dark-gray3: #2f343c;
+$dark-gray4: #383e47;
+$dark-gray5: #404854;
+
+$gray1: #626e7f;
+$gray2: #738091;
+$gray3: #8f99a8;
+$gray4: #abb3bf;
+$gray5: #c5cbd3;
+
+$light-gray1: #d3d8de;
+$light-gray2: #dce0e5;
+$light-gray3: #e5e8eb;
+$light-gray4: #edeff2;
+$light-gray5: #f6f7f9;
 
 $white: #ffffff;
 
 // Core colors
 
-$blue1: #154a93;
-$blue2: #1158bb;
-$blue3: #0b62da;
-$blue4: #428efa;
-$blue5: #80b5ff;
-
-$green1: #0d4a26;
-$green2: #0b602e;
-$green3: #0b7939;
-$green4: #1da555;
-$green5: #5bcd8a;
-
-$orange1: #714514;
-$orange2: #905613;
-$orange3: #c57316;
-$orange4: #ed9a3b;
-$orange5: #f3b268;
-
-$red1: #941f22;
-$red2: #b71f24;
-$red3: #d61f24;
-$red4: #f3585d;
-$red5: #ff8a8e;
+$blue1: #184a90;
+$blue2: #1a5bb7;
+$blue3: #1a69d5;
+$blue4: #498ff3;
+$blue5: #8abbff;
+
+$green1: #165a32;
+$green2: #176d3a;
+$green3: #168845;
+$green4: #30a660;
+$green5: #72ca96;
+
+$orange1: #77450d;
+$orange2: #935610;
+$orange3: #c4761c;
+$orange4: #ea9a3e;
+$orange5: #f7b264;
+
+$red1: #942427;
+$red2: #b3292d;
+$red3: #d33136;
+$red4: #e96367;
+$red5: #f99498;
+
+// Extended colors
+
+$vermilion1: #96290d;
+$vermilion2: #b83211;
+$vermilion3: #d33d17;
+$vermilion4: #eb6847;
+$vermilion5: #ff9980;
+
+$rose1: #a82255;
+$rose2: #c22762;
+$rose3: #db2c6f;
+$rose4: #f5498b;
+$rose5: #ff66a1;
+
+$violet1: #5c255c;
+$violet2: #7c327c;
+$violet3: #9d3f9d;
+$violet4: #bd6bbd;
+$violet5: #d69fd6;
+
+$indigo1: #5642a6;
+$indigo2: #634dbf;
+$indigo3: #7961db;
+$indigo4: #9881f3;
+$indigo5: #bdadff;
+
+$cerulean1: #1f4b99;
+$cerulean2: #2458b3;
+$cerulean3: #2965cc;
+$cerulean4: #4580e6;
+$cerulean5: #669eff;
+
+$turquoise1: #004d46;
+$turquoise2: #007067;
+$turquoise3: #00a396;
+$turquoise4: #13c9ba;
+$turquoise5: #7ae1d8;
+
+$forest1: #1d7324;
+$forest2: #238c2c;
+$forest3: #29a634;
+$forest4: #43bf4d;
+$forest5: #62d96b;
+
+$lime1: #43501b;
+$lime2: #5a701a;
+$lime3: #8eb125;
+$lime4: #b6d94c;
+$lime5: #d4f17e;
+
+$gold1: #5c4405;
+$gold2: #866103;
+$gold3: #d1980b;
+$gold4: #f0b726;
+$gold5: #fbd065;
+
+$sepia1: #5e4123;
+$sepia2: #7a542e;
+$sepia3: #946638;
+$sepia4: #af855a;
+$sepia5: #d0b090;

packages/colors/src/colors.ts

@@ -15,116 +15,116 @@
  */
 
 const grayScale = {
-    BLACK: "#101318",
-
-    DARK_GRAY1: "#1b2028",
-    DARK_GRAY2: "#232a34",
-    DARK_GRAY3: "#2e3642",
-    DARK_GRAY4: "#353e4b",
-    DARK_GRAY5: "#404a59",
-
-    GRAY1: "#5f6d81",
-    GRAY2: "#728197",
-    GRAY3: "#8d99aa",
-    GRAY4: "#aab3c0",
-    GRAY5: "#c4cbd4",
-
-    LIGHT_GRAY1: "#d3d8de",
-    LIGHT_GRAY2: "#dce0e5",
-    LIGHT_GRAY3: "#e5e7eb",
-    LIGHT_GRAY4: "#edf0f3",
-    LIGHT_GRAY5: "#f6f7f9",
+    BLACK: "#111418",
+
+    DARK_GRAY1: "#1C2127",
+    DARK_GRAY2: "#252A31",
+    DARK_GRAY3: "#2F343C",
+    DARK_GRAY4: "#383E47",
+    DARK_GRAY5: "#404854",
+
+    GRAY1: "#626E7F",
+    GRAY2: "#738091",
+    GRAY3: "#8F99A8",
+    GRAY4: "#ABB3BF",
+    GRAY5: "#C5CBD3",
+
+    LIGHT_GRAY1: "#D3D8DE",
+    LIGHT_GRAY2: "#DCE0E5",
+    LIGHT_GRAY3: "#E5E8EB",
+    LIGHT_GRAY4: "#EDEFF2",
+    LIGHT_GRAY5: "#F6F7F9",
 
     WHITE: "#FFFFFF",
 };
 
 const coreColors = {
-    BLUE1: "#164e9c",
-    BLUE2: "#125abe",
-    BLUE3: "#0b62da",
-    BLUE4: "#428efa",
-    BLUE5: "#80b5ff",
-
-    GREEN1: "#0b602e",
-    GREEN2: "#0d7337",
-    GREEN3: "#109347",
-    GREEN4: "#21b65e",
-    GREEN5: "#5bcd8a",
-
-    ORANGE1: "#97570c",
-    ORANGE2: "#b76e1a",
-    ORANGE3: "#d48326",
-    ORANGE4: "#f09f42",
-    ORANGE5: "#fbae56",
-
-    RED1: "#a52226",
-    RED2: "#bc2025",
-    RED3: "#da1b21",
-    RED4: "#f3585d",
-    RED5: "#ff8a8e",
+    BLUE1: "#184A90",
+    BLUE2: "#1A5BB7",
+    BLUE3: "#1A69D5",
+    BLUE4: "#498FF3",
+    BLUE5: "#8ABBFF",
+
+    GREEN1: "#165A32",
+    GREEN2: "#176D3A",
+    GREEN3: "#168845",
+    GREEN4: "#30A660",
+    GREEN5: "#72CA96",
+
+    ORANGE1: "#77450D",
+    ORANGE2: "#935610",
+    ORANGE3: "#C4761C",
+    ORANGE4: "#EA9A3E",
+    ORANGE5: "#F7B264",
+
+    RED1: "#942427",
+    RED2: "#B3292D",
+    RED3: "#D33136",
+    RED4: "#E96367",
+    RED5: "#F99498",
 };
 
 // Extended colors are still using the "legacy" palette
 const extendedColors = {
-    COBALT1: "#1F4B99",
-    COBALT2: "#2458B3",
-    COBALT3: "#2965CC",
-    COBALT4: "#4580E6",
-    COBALT5: "#669EFF",
+    CERULEAN1: "#0C5174",
+    CERULEAN2: "#0F6894",
+    CERULEAN3: "#147EB3",
+    CERULEAN4: "#3FA6DA",
+    CERULEAN5: "#68C1EE",
 
     FOREST1: "#1D7324",
     FOREST2: "#238C2C",
     FOREST3: "#29A634",
     FOREST4: "#43BF4D",
     FOREST5: "#62D96B",
 
-    GOLD1: "#A67908",
-    GOLD2: "#BF8C0A",
-    GOLD3: "#D99E0B",
-    GOLD4: "#F2B824",
-    GOLD5: "#FFC940",
+    GOLD1: "#5C4405",
+    GOLD2: "#866103",
+    GOLD3: "#D1980B",
+    GOLD4: "#F0B726",
+    GOLD5: "#FBD065",
 
     INDIGO1: "#5642A6",
     INDIGO2: "#634DBF",
-    INDIGO3: "#7157D9",
-    INDIGO4: "#9179F2",
-    INDIGO5: "#AD99FF",
+    INDIGO3: "#7961DB",
+    INDIGO4: "#9881F3",
+    INDIGO5: "#BDADFF",
 
-    LIME1: "#728C23",
-    LIME2: "#87A629",
-    LIME3: "#9BBF30",
+    LIME1: "#43501B",
+    LIME2: "#5A701A",
+    LIME3: "#8EB125",
     LIME4: "#B6D94C",
-    LIME5: "#D1F26D",
+    LIME5: "#D4F17E",
 
     ROSE1: "#A82255",
     ROSE2: "#C22762",
     ROSE3: "#DB2C6F",
     ROSE4: "#F5498B",
     ROSE5: "#FF66A1",
 
-    SEPIA1: "#63411E",
-    SEPIA2: "#7D5125",
-    SEPIA3: "#96622D",
-    SEPIA4: "#B07B46",
-    SEPIA5: "#C99765",
+    SEPIA1: "#5E4123",
+    SEPIA2: "#7A542E",
+    SEPIA3: "#946638",
+    SEPIA4: "#AF855A",
+    SEPIA5: "#D0B090",
 
-    TURQUOISE1: "#008075",
-    TURQUOISE2: "#00998C",
-    TURQUOISE3: "#00B3A4",
-    TURQUOISE4: "#14CCBD",
-    TURQUOISE5: "#2EE6D6",
+    TURQUOISE1: "#004D46",
+    TURQUOISE2: "#007067",
+    TURQUOISE3: "#00A396",
+    TURQUOISE4: "#13C9BA",
+    TURQUOISE5: "#7AE1D8",
 
-    VERMILION1: "#9E2B0E",
+    VERMILION1: "#96290D",
     VERMILION2: "#B83211",
-    VERMILION3: "#D13913",
-    VERMILION4: "#EB532D",
-    VERMILION5: "#FF6E4A",
+    VERMILION3: "#D33D17",
+    VERMILION4: "#EB6847",
+    VERMILION5: "#FF9980",
 
     VIOLET1: "#5C255C",
-    VIOLET2: "#752F75",
-    VIOLET3: "#8F398F",
-    VIOLET4: "#A854A8",
-    VIOLET5: "#C274C2",
+    VIOLET2: "#7C327C",
+    VIOLET3: "#9D3F9D",
+    VIOLET4: "#BD6BBD",
+    VIOLET5: "#D69FD6",
 };
 
 /**

packages/docs-app/src/styles/_examples.scss

@@ -394,7 +394,7 @@
   color: $cobalt3;
 
   .#{$ns}-dark & {
-    color: $cobalt5;
+    color: $cobalt3;
   }
 }