Refactor theme to use tokens (#6559)

* refactor: accordion theme * refactor: alert theme * refactor: button theme * refactor: checkbox theme * refactor: close button theme * feat: add prose to sizes * feat: add smaller font size tokens * refactor: container theme * refactor: drawer * refactor: form control * refactor: form error * refactor: form label * refactor: input * refactor: list * refactor: list * refactor: menu * refactor: modal * refactor: select * refactor: skip link * feat: add polyfill for 100vh * feat: add polyfill for 100vh * refactor: slider * refactor: spinner to use token * refactor: tag to use token * refactor: textarea to use token * refactor: tooltip * feat: improve support for vh values * refactor: themes to use tokens * chore: add changeset
chakra-ui · Aug 25, 2022 · 0cae420 · 0cae420 · vercel · Aug 25, 2022
1 parent dda7d71
commit 0cae420
Show file tree

Hide file tree

Showing 36 changed files with 252 additions and 204 deletions.
diff --git a/.changeset/poor-news-argue.md b/.changeset/poor-news-argue.md
@@ -0,0 +1,11 @@
+---
+"@chakra-ui/css-reset": patch
+"@chakra-ui/provider": patch
+"@chakra-ui/styled-system": patch
+"@chakra-ui/theme": patch
+---
+
+Refactors the theme to use design tokens and css variables as much as possible.
+
+Improve support for `100vh` values by using a polyfill css variable
+`--chakra-vh`.
diff --git a/packages/css-reset/src/css-reset.tsx b/packages/css-reset/src/css-reset.tsx
@@ -1,5 +1,29 @@
 import { Global } from "@emotion/react"
 
+const vhPolyfill = `
+  :root {
+    --chakra-vh: 100vh;
+  }
+
+  @supports (height: -webkit-fill-available) {
+    :root {
+      --chakra-vh: -webkit-fill-available;
+    }
+  }
+
+  @supports (height: -moz-fill-available) {
+    :root {
+      --chakra-vh: -moz-fill-available;
+    }
+  }
+
+  @supports (height: 100lvh) {
+    --chakra-vh: 100lvh;
+  }
+`
+
+export const CSSPolyfill = () => <Global styles={vhPolyfill} />
+
 export const CSSReset = () => (
   <Global
     styles={`
@@ -278,6 +302,8 @@ export const CSSReset = () => (
       select::-ms-expand {
         display: none;
       }
+
+      ${vhPolyfill}
     `}
   />
 )

diff --git a/packages/provider/src/chakra-provider.tsx b/packages/provider/src/chakra-provider.tsx
@@ -1,4 +1,4 @@
-import CSSReset from "@chakra-ui/css-reset"
+import { CSSReset, CSSPolyfill } from "@chakra-ui/css-reset"
 import { PortalManager } from "@chakra-ui/portal"
 import {
   ColorModeProvider,
@@ -82,7 +82,7 @@ export const ChakraProvider: React.FC<ChakraProviderProps> = (props) => {
         colorModeManager={colorModeManager}
         options={theme.config}
       >
-        {resetCSS && <CSSReset />}
+        {resetCSS ? <CSSReset /> : <CSSPolyfill />}
         <GlobalStyle />
         {portalZIndex ? (
           <PortalManager zIndex={portalZIndex}>{_children}</PortalManager>

diff --git a/packages/styled-system/src/utils/index.ts b/packages/styled-system/src/utils/index.ts
@@ -1,5 +1,6 @@
 import type { ThemeScale } from "../create-theme-vars"
 import { createTransform } from "./create-transform"
+import { pipe } from "./pipe"
 import { logical, PropConfig, toConfig } from "./prop-config"
 import { transformFunctions as transforms } from "./transform-functions"
 
@@ -13,8 +14,8 @@ export const t = {
   colors: toConfig("colors"),
   borders: toConfig("borders"),
   radii: toConfig("radii", transforms.px),
-  space: toConfig("space", transforms.px),
-  spaceT: toConfig("space", transforms.px),
+  space: toConfig("space", pipe(transforms.vh, transforms.px)),
+  spaceT: toConfig("space", pipe(transforms.vh, transforms.px)),
   degreeT(property: PropConfig["property"]) {
     return { property, transform: transforms.degree }
   },
@@ -34,8 +35,8 @@ export const t = {
   propT(property: PropConfig["property"], transform?: PropConfig["transform"]) {
     return { property, transform }
   },
-  sizes: toConfig("sizes", transforms.px),
-  sizesT: toConfig("sizes", transforms.fraction),
+  sizes: toConfig("sizes", pipe(transforms.vh, transforms.px)),
+  sizesT: toConfig("sizes", pipe(transforms.vh, transforms.fraction)),
   shadows: toConfig("shadows"),
   logical,
   blur: toConfig("blur", transforms.blur),

diff --git a/packages/styled-system/src/utils/pipe.ts b/packages/styled-system/src/utils/pipe.ts
@@ -0,0 +1,4 @@
+export const pipe =
+  <R>(...fns: Array<(a: R) => R>) =>
+  (v: R) =>
+    fns.reduce((a, b) => b(a), v)
diff --git a/packages/styled-system/src/utils/transform-functions.ts b/packages/styled-system/src/utils/transform-functions.ts
@@ -40,6 +40,9 @@ export const transformFunctions = {
     if (value === "auto-gpu") return getTransformGpuTemplate()
     return value
   },
+  vh(value: number | string) {
+    return value === "100vh" ? "var(--chakra-vh)" : value
+  },
   px(value: number | string) {
     if (value == null) return value
     const { unitless } = analyzeCSSValue(value)

diff --git a/packages/theme/src/components/accordion.ts b/packages/theme/src/components/accordion.ts
@@ -18,7 +18,7 @@ const baseStyleContainer = defineStyle({
 const baseStyleButton = defineStyle({
   transitionProperty: "common",
   transitionDuration: "normal",
-  fontSize: "1rem",
+  fontSize: "md",
   _focusVisible: {
     boxShadow: "outline",
   },
@@ -29,22 +29,21 @@ const baseStyleButton = defineStyle({
     opacity: 0.4,
     cursor: "not-allowed",
   },
-  px: 4,
-  py: 2,
+  px: "4",
+  py: "2",
 })
 
 const baseStylePanel = defineStyle({
-  pt: 2,
-  px: 4,
-  pb: 5,
+  pt: "2",
+  px: "4",
+  pb: "5",
 })
 
 const baseStyleIcon = defineStyle({
   fontSize: "1.25em",
 })
 
 const baseStyle = definePartsStyle({
-  root: {},
   container: baseStyleContainer,
   button: baseStyleButton,
   panel: baseStylePanel,

diff --git a/packages/theme/src/components/alert.ts b/packages/theme/src/components/alert.ts
@@ -15,30 +15,30 @@ const $bg = cssVar("alert-bg")
 const baseStyle = definePartsStyle({
   container: {
     bg: $bg.reference,
-    px: 4,
-    py: 3,
+    px: "4",
+    py: "3",
   },
   title: {
     fontWeight: "bold",
-    lineHeight: 6,
-    marginEnd: 2,
+    lineHeight: "6",
+    marginEnd: "2",
   },
   description: {
-    lineHeight: 6,
+    lineHeight: "6",
   },
   icon: {
     color: $fg.reference,
     flexShrink: 0,
-    marginEnd: 3,
-    w: 5,
-    h: 6,
+    marginEnd: "3",
+    w: "5",
+    h: "6",
   },
   spinner: {
     color: $fg.reference,
     flexShrink: 0,
-    marginEnd: 3,
-    w: 5,
-    h: 5,
+    marginEnd: "3",
+    w: "5",
+    h: "5",
   },
 })
 

diff --git a/packages/theme/src/components/button.ts b/packages/theme/src/components/button.ts
@@ -152,8 +152,8 @@ const variantUnstyled = defineStyle({
   color: "inherit",
   display: "inline",
   lineHeight: "inherit",
-  m: 0,
-  p: 0,
+  m: "0",
+  p: "0",
 })
 
 const variants = {
@@ -166,28 +166,28 @@ const variants = {
 
 const sizes = {
   lg: defineStyle({
-    h: 12,
-    minW: 12,
+    h: "12",
+    minW: "12",
     fontSize: "lg",
-    px: 6,
+    px: "6",
   }),
   md: defineStyle({
-    h: 10,
-    minW: 10,
+    h: "10",
+    minW: "10",
     fontSize: "md",
-    px: 4,
+    px: "4",
   }),
   sm: defineStyle({
-    h: 8,
-    minW: 8,
+    h: "8",
+    minW: "8",
     fontSize: "sm",
-    px: 3,
+    px: "3",
   }),
   xs: defineStyle({
-    h: 6,
-    minW: 6,
+    h: "6",
+    minW: "6",
     fontSize: "xs",
-    px: 2,
+    px: "2",
   }),
 }
 

diff --git a/packages/theme/src/components/checkbox.ts b/packages/theme/src/components/checkbox.ts
@@ -1,6 +1,7 @@
 import { checkboxAnatomy as parts } from "@chakra-ui/anatomy"
 import {
   createMultiStyleConfigHelpers,
+  cssVar,
   defineStyle,
 } from "@chakra-ui/styled-system"
 import { mode } from "@chakra-ui/theme-tools"
@@ -9,11 +10,14 @@ import { runIfFn } from "../utils/run-if-fn"
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys)
 
+const $size = cssVar("checkbox-size")
+
 const baseStyleControl = defineStyle((props) => {
   const { colorScheme: c } = props
 
   return {
-    w: "100%",
+    w: $size.reference,
+    h: $size.reference,
     transitionProperty: "box-shadow",
     transitionDuration: "normal",
     border: "2px solid",
@@ -82,19 +86,19 @@ const baseStyle = definePartsStyle((props) => ({
 
 const sizes = {
   sm: definePartsStyle({
-    control: { h: 3, w: 3 },
+    control: { [$size.variable]: "sizes.3" },
     label: { fontSize: "sm" },
-    icon: { fontSize: "0.45rem" },
+    icon: { fontSize: "3xs" },
   }),
   md: definePartsStyle({
-    control: { w: 4, h: 4 },
+    control: { [$size.variable]: "sizes.4" },
     label: { fontSize: "md" },
-    icon: { fontSize: "0.625rem" },
+    icon: { fontSize: "2xs" },
   }),
   lg: definePartsStyle({
-    control: { w: 5, h: 5 },
+    control: { [$size.variable]: "sizes.5" },
     label: { fontSize: "lg" },
-    icon: { fontSize: "0.625rem" },
+    icon: { fontSize: "2xs" },
   }),
 }
 

diff --git a/packages/theme/src/components/close-button.ts b/packages/theme/src/components/close-button.ts
@@ -28,16 +28,16 @@ const baseStyle = defineStyle((props) => {
 
 const sizes = {
   lg: defineStyle({
-    [$size.variable]: "40px",
-    fontSize: "16px",
+    [$size.variable]: "sizes.10",
+    fontSize: "md",
   }),
   md: defineStyle({
-    [$size.variable]: "32px",
-    fontSize: "12px",
+    [$size.variable]: "sizes.8",
+    fontSize: "xs",
   }),
   sm: defineStyle({
-    [$size.variable]: "24px",
-    fontSize: "10px",
+    [$size.variable]: "sizes.6",
+    fontSize: "2xs",
   }),
 }
 

diff --git a/packages/theme/src/components/container.ts b/packages/theme/src/components/container.ts
@@ -3,8 +3,8 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system"
 const baseStyle = defineStyle({
   w: "100%",
   mx: "auto",
-  maxW: "60ch",
-  px: "1rem",
+  maxW: "prose",
+  px: "4",
 })
 
 export const containerTheme = defineStyleConfig({

diff --git a/packages/theme/src/components/drawer.ts b/packages/theme/src/components/drawer.ts
@@ -49,28 +49,28 @@ const baseStyleDialog = defineStyle((props) => {
 })
 
 const baseStyleHeader = defineStyle({
-  px: 6,
-  py: 4,
+  px: "6",
+  py: "4",
   fontSize: "xl",
   fontWeight: "semibold",
 })
 
 const baseStyleCloseButton = defineStyle({
   position: "absolute",
-  top: 2,
-  insetEnd: 3,
+  top: "2",
+  insetEnd: "3",
 })
 
 const baseStyleBody = defineStyle({
-  px: 6,
-  py: 2,
-  flex: 1,
+  px: "6",
+  py: "2",
+  flex: "1",
   overflow: "auto",
 })
 
 const baseStyleFooter = defineStyle({
-  px: 6,
-  py: 4,
+  px: "6",
+  py: "4",
 })
 
 const baseStyle = definePartsStyle((props) => ({

diff --git a/packages/theme/src/components/editable.ts b/packages/theme/src/components/editable.ts
@@ -9,14 +9,14 @@ const { definePartsStyle, defineMultiStyleConfig } =
 
 const baseStylePreview = defineStyle({
   borderRadius: "md",
-  py: "3px",
+  py: "1",
   transitionProperty: "common",
   transitionDuration: "normal",
 })
 
 const baseStyleInput = defineStyle({
   borderRadius: "md",
-  py: "3px",
+  py: "1",
   transitionProperty: "common",
   transitionDuration: "normal",
   width: "full",
@@ -26,7 +26,7 @@ const baseStyleInput = defineStyle({
 
 const baseStyleTextarea = defineStyle({
   borderRadius: "md",
-  py: "3px",
+  py: "1",
   transitionProperty: "common",
   transitionDuration: "normal",
   width: "full",