[WIP] purple color tokens as primary color

src/@chakra-ui/components/Button.ts

@@ -43,15 +43,15 @@ const baseStyle = defineStyle({
 })
 
 const variantSolid = defineStyle({
-  color: "background.base",
+  color: "white",
   bg: "primary.base",
   borderColor: "transparent",
   _disabled: {
     bg: "disabled",
-    color: "background.base",
+    color: "white",
   },
   _hover: {
-    color: "background.base",
+    color: "white",
     bg: "primary.hover",
     boxShadow: "buttonHover",
   },

src/@chakra-ui/components/Link.ts

@@ -5,22 +5,22 @@ import { Text } from "./Text"
 
 export const Link = defineStyleConfig({
   baseStyle: defineMergeStyles(linkDefaultTheme.baseStyle, {
-    color: "primary.base",
+    color: "link.base",
     textDecor: "underline",
     textUnderlineOffset: "3px",
     _focusVisible: {
       boxShadow: "none",
       outline: "2px solid",
-      outlineColor: "primary.hover",
+      outlineColor: "link.hover",
       outlineOffset: "2px",
       borderRadius: "sm",
     },
     _hover: {
-      color: "primary.hover",
+      color: "link.hover",
     },
     "&[data-inline-link]": {
       _visited: {
-        color: "primary.visited",
+        color: "link.visited",
       },
     },
   }),

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

@@ -56,6 +56,55 @@ const colors = {
     200: "#fff8df",
     500: "#bd8400",
   },
+  white: "#FFFFFF",
+  white_a:{
+    0: "rgba(255, 255, 255, 0.0)",
+    25: "rgba(255, 255, 255, 0.25)",
+    50: "rgba(255, 255, 255, 0.05)",
+    75: "rgba(255, 255, 255, 0.75)",
+    100: "rgba(255, 255, 255, 0.1)",
+    200: "rgba(255, 255, 255, 0.2)",
+    300: "rgba(255, 255, 255, 0.3)",
+    400: "rgba(255, 255, 255, 0.4)",
+    500: "rgba(255, 255, 255, 0.5)",
+    600: "rgba(255, 255, 255, 0.6)",
+    700: "rgba(255, 255, 255, 0.7)",
+    800: "rgba(255, 255, 255, 0.8)",
+    900: "rgba(255, 255, 255, 0.9)",
+    950: "rgba(255, 255, 255, 0.95)",
+  },
+  black: "#000000",
+  black_a:{
+    0: "rgba(0, 0, 0, 0.0)",
+    25: "rgba(0, 0, 0, 0.25)",
+    50: "rgba(0, 0, 0, 0.05)",
+    75: "rgba(0, 0, 0, 0.75)",
+    100: "rgba(0, 0, 0, 0.1)",
+    200: "rgba(0, 0, 0, 0.2)",
+    300: "rgba(0, 0, 0, 0.3)",
+    400: "rgba(0, 0, 0, 0.4)",
+    500: "rgba(0, 0, 0, 0.5)",
+    600: "rgba(0, 0, 0, 0.6)",
+    700: "rgba(0, 0, 0, 0.7)",
+    800: "rgba(0, 0, 0, 0.8)",
+    900: "rgba(0, 0, 0, 0.9)",
+    950: "rgba(0, 0, 0, 0.95)",
+  },
+  purple: {
+    50: "#F3ECFF",
+    100: "#E2D3FB",
+    200: "#D1BAF7",
+    300: "#C0A1F3",
+    400: "#AF88EF",
+    450: "#9E6FEB",
+    500: "#8D56E7",
+    550: "#7D3DE3",
+    600: "#6C24DF",
+    700: "#561BB5",
+    800: "#41128B",
+    900: "#2B0961",
+    950: "#150037",
+  },
 }
 
 export default colors

src/@chakra-ui/semanticTokens.ts

@@ -37,17 +37,17 @@ const semanticTokens = {
 
     // Main Set
     primary: {
-      base: { _light: "blue.500", _dark: "orange.500" },
-      highContrast: { _light: "blue.800", _dark: "orange.100" },
-      lowContrast: { _light: "blue.100", _dark: "orange.800" },
-      hover: { _light: "blue.400", _dark: "orange.400" },
-      visited: { _light: "blue.700", _dark: "orange.550" },
+      base: { _light: "purple.600", _dark: "purple.600" },
+      highContrast: { _light: "purple.800", _dark: "purple.200" },
+      lowContrast: { _light: "purple.200", _dark: "purple.800" },
+      hover: { _light: "purple.700", _dark: "purple.500" },
+      visited: { _light: "purple.700", _dark: "purple.500" },
       // ! Deprecating primary.light
-      light: { _light: "blue.100", _dark: "orange.100" },
+      light: { _light: "purple.100", _dark: "purple.100" },
       // ! Deprecating primary.dark
-      dark: { _light: "blue.700", _dark: "orange.800" },
+      dark: { _light: "purple.700", _dark: "purple.800" },
       // ! Deprecating primary.pressed
-      pressed: { _light: "blue.400", _dark: "orange.800" },
+      pressed: { _light: "purple.400", _dark: "purple.800" },
     },
     body: {
       base: { _light: "gray.800", _dark: "gray.100" },
@@ -57,13 +57,22 @@ const semanticTokens = {
       inverted: { _light: "gray.100", _dark: "gray.800" },
     },
     background: {
-      base: { _light: "white", _dark: "gray.800" },
+      base: { _light: "white", _dark: "black" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
     disabled: { _light: "gray.400", _dark: "gray.500" },
     // ! Deprecating neutral
     neutral: { _light: "white", _dark: "gray.900" },
 
+
+///////// ! NEW TOKENS
+    link: {
+      base: { _light: "purple.600", _dark: "purple.400" },
+      hover: { _light: "purple.700", _dark: "purple.300" },
+      visited: { _light: "purple.700", _dark: "purple.300" },
+    },
+////////////////////////
+
     // Complementary Set
     attention: {
       base: "yellow.500",

src/theme.ts

@@ -2,8 +2,8 @@ import { mix } from "polished"
 
 const white = "#ffffff"
 const black = "#000000"
-const primaryLight = "#1c1cff"
-const primaryDark = "#ff7324"
+const primaryLight = "#880FE9"
+const primaryDark = "#CB89FF"
 const success = "#109e62"
 const fail = "#b80000"
 const turquoise = "#ccfcff"