Merge pull request #11236 from ethereum/colors-retouched

Retouched the primary Colours

Author: pettinarip

src/@chakra-ui/gatsby-plugin/foundations/colors.ts

@@ -12,18 +12,28 @@ const colors = {
     900: "#141414",
   },
   blue: {
-    100: "#dedeff",
-    300: "#8282ff",
-    500: "#1c1cff",
-    600: "#090990",
-    700: "#0b0b66",
+    50: "#F6F6FF",
+    100: "#EBEBFF",
+    200: "#D6D6FF",
+    300: "#9999FF",
+    400: "#5555FF",
+    500: "#1C1CFF",
+    600: "#0000E0",
+    700: "#0000A3",
+    800: "#000066",
+    900: "#000029",
   },
   orange: {
-    100: "#ffe3d3",
-    300: "#ffb991",
-    500: "#ff7324",
-    600: "#c95d20",
-    800: "#352313",
+    50: "#FFF3ED",
+    100: "#FFE5D6",
+    200: "#FFCBAD",
+    300: "#FFB185",
+    400: "#FF985C",
+    500: "#FF7324",
+    600: "#B84300",
+    700: "#7A2D00",
+    800: "#521E00",
+    900: "#2F1000",
   },
   red: {
     100: "#f7c8c8",

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -38,16 +38,16 @@ const semanticTokens = {
     // Main Set
     primary: {
       base: { _light: "blue.500", _dark: "orange.500" },
-      highContrast: { _light: "blue.700", _dark: "orange.100" },
-      lowContrast: { _light: "blue.100", _dark: "orange.800" },
-      hover: { _light: "blue.300", _dark: "orange.300" },
-      visited: { _light: "blue.600", _dark: "orange.600" },
+      highContrast: { _light: "blue.800", _dark: "orange.100" },
+      lowContrast: { _light: "blue.100", _dark: "orange.900" },
+      hover: { _light: "blue.400", _dark: "orange.400" },
+      visited: { _light: "blue.700", _dark: "orange.700" },
       // ! Deprecating primary.light
       light: { _light: "blue.100", _dark: "orange.100" },
       // ! Deprecating primary.dark
       dark: { _light: "blue.700", _dark: "orange.800" },
       // ! Deprecating primary.pressed
-      pressed: { _light: "blue.300", _dark: "orange.800" },
+      pressed: { _light: "blue.400", _dark: "orange.800" },
     },
     body: {
       base: { _light: "gray.700", _dark: "gray.100" },