Merge pull request #10278 from TylerAPfledderer/refactor/theme-nested-semantic-tokens

refactor(theme): implement nested semantic tokens

Author: pettinarip

docs/chakra-migration-guide.md

@@ -118,9 +118,11 @@ const Text = styled.p`
 `
 
 // now
-<Text color="primary" bg="background" />
+<Text color="primary.base" bg="background.base" />
 ```
 
+> Note the dotted notation. In Chakra, the values are referred to as "semantic tokens" and the new theme applies a nested structure of like tokens for better organization. See [semanticTokens.ts](../src/%40chakra-ui/gatsby-plugin/semanticTokens.ts)
+
 <aside>
 💡 In the **next iteration** we will refactor all the colors with the correct color from the new Design System
 </aside>

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

@@ -41,21 +41,21 @@ const commonOutline = defineStyle({
   bg: "transparent",
   borderColor: "text",
   _hover: {
-    color: "primary",
-    bg: "background",
-    borderColor: "primary",
+    color: "primary.base",
+    bg: "background.base",
+    borderColor: "primary.base",
     _disabled: {
       ...disabledStylesOutline,
     },
   },
   _active: {
-    color: "primary",
-    bg: "primaryLight",
-    borderColor: "primary",
+    color: "primary.base",
+    bg: "primary.light",
+    borderColor: "primary.base",
   },
   _focus: {
-    color: "primary",
-    borderColor: "background",
+    color: "primary.base",
+    borderColor: "background.base",
     _disabled: {
       ...disabledStylesOutline,
     },
@@ -68,17 +68,17 @@ const commonOutline = defineStyle({
 const variantSolid = defineStyle((props) =>
   defineMergeStyles(defaultVariants?.solid(props), {
     color: "buttonColor",
-    bg: "primary",
+    bg: "primary.base",
     border: 0,
     _hover: {
-      bg: "primary",
+      bg: "primary.base",
       opacity: 0.8,
       _disabled: {
         ...disabledStylesSolid,
       },
     },
     _active: {
-      bg: "primaryHover",
+      bg: "primary.hover",
     },
     _disabled: {
       ...disabledStylesSolid,
@@ -92,8 +92,8 @@ const variantOutline = defineStyle((props) =>
 
 const variantOutlineColor = defineStyle({
   ...commonOutline,
-  color: "primary",
-  borderColor: "primary",
+  color: "primary.base",
+  borderColor: "primary.base",
 })
 
 const variantIcon = defineStyle({
@@ -104,7 +104,7 @@ const variantIcon = defineStyle({
   color: "inherit",
   boxShadow: "none",
   _hover: {
-    color: "primary",
+    color: "primary.base",
     boxShadow: "none",
   },
 })

src/@chakra-ui/gatsby-plugin/components/Checkbox.ts

@@ -9,7 +9,7 @@ const { definePartsStyle, defineMultiStyleConfig } =
 
 const baseStyleControl = defineStyle((props) =>
   defineMergeStyles(defaultBaseStyle?.(props).control, {
-    bg: "background",
+    bg: "background.base",
     _checked: {
       bg: "primary400",
       _hover: {

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

@@ -3,7 +3,7 @@ import { defineMergeStyles, linkDefaultTheme } from "./components.utils"
 
 export const Link = defineStyleConfig({
   baseStyle: defineMergeStyles(linkDefaultTheme.baseStyle, {
-    color: "primary",
+    color: "primary.base",
     textDecoration: "underline",
     _focus: {
       boxShadow: "none",

src/@chakra-ui/gatsby-plugin/components/Progress.ts

@@ -6,12 +6,12 @@ const { definePartsStyle } = createMultiStyleConfigHelpers(parts.keys)
 
 const baseStyle = definePartsStyle(() => ({
   track: {
-    bg: "primaryLight",
+    bg: "primary.light",
     // `borderRadius` applies to both track and `filledTrack` (https://github.com/chakra-ui/chakra-ui/pull/2946)
     borderRadius: "full",
   },
   filledTrack: {
-    bgColor: "primary",
+    bgColor: "primary.base",
   },
 }))
 

src/@chakra-ui/gatsby-plugin/components/Tabs.ts

@@ -11,12 +11,12 @@ const variantPrimary = definePartsStyle({
   tab: {
     borderTopRadius: "0.3rem",
     borderBottom: "1px solid",
-    borderBottomColor: "primary",
+    borderBottomColor: "primary.base",
     px: 4,
     py: "0.3rem",
     _selected: {
-      color: "background",
-      bg: "primary",
+      color: "background.base",
+      bg: "primary.base",
     },
   },
   tabpanels: {