Skip to content

Latest commit

 

History

History
1082 lines (842 loc) · 38.5 KB

v1.8.0.mdx

File metadata and controls

1082 lines (842 loc) · 38.5 KB
title description releaseUrl releaseDate version
Version 1.8.0
Explore the changelog for Chakra UI version 1.8.0. Learn about the latest features, bug fixes, and improvements.
January 25, 2022
1.8.0

Minor Changes

  • #5316 1537a725f Thanks @TimKolberger! - Introducing semantic tokens

    Semantic tokens provide the ability to create css variables which can change with a CSS condition.

    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        900: "#171923",
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="gray.900">will always be gray.900</Text>
      </ChakraProvider>
    )
    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        50: "#F7FAFC",
        900: "#171923",
      },
      semanticTokens: {
        colors: {
          text: {
            default: "gray.900",
            _dark: "gray.50",
          },
        },
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="text">
          will be gray.900 in light mode and gray.50 in dark mode
        </Text>
      </ChakraProvider>
    )
    import { extendTheme } from "@chakra-ui/react"
    
    const theme = extendTheme({
      colors: {
        red: {
          100: "#ff0010",
          400: "#ff0040",
          500: "#ff0050",
          700: "#ff0070",
          800: "#ff0080",
        },
      },
      semanticTokens: {
        colors: {
          error: "red.500", // create a token alias
          success: "red.100",
          primary: {
            // set variable conditionally with pseudo selectors like `_dark` and `_light`
            // use `default` to define fallback value
            default: "red.500",
            _dark: "red.400",
          },
          secondary: {
            default: "red.800",
            _dark: "red.700",
          },
        },
      },
    })

Patch Changes

Minor Changes

  • #5442 cbad002e7 Thanks @segunadebayo! - Add useAnimationState hook to help track motion component animations. Used in popopover and menu lazy modes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

  • #5316 1537a725f Thanks @TimKolberger! - Introducing semantic tokens

    Semantic tokens provide the ability to create css variables which can change with a CSS condition.

    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        900: "#171923",
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="gray.900">will always be gray.900</Text>
      </ChakraProvider>
    )
    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        50: "#F7FAFC",
        900: "#171923",
      },
      semanticTokens: {
        colors: {
          text: {
            default: "gray.900",
            _dark: "gray.50",
          },
        },
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="text">
          will be gray.900 in light mode and gray.50 in dark mode
        </Text>
      </ChakraProvider>
    )
    import { extendTheme } from "@chakra-ui/react"
    
    const theme = extendTheme({
      colors: {
        red: {
          100: "#ff0010",
          400: "#ff0040",
          500: "#ff0050",
          700: "#ff0070",
          800: "#ff0080",
        },
      },
      semanticTokens: {
        colors: {
          error: "red.500", // create a token alias
          success: "red.100",
          primary: {
            // set variable conditionally with pseudo selectors like `_dark` and `_light`
            // use `default` to define fallback value
            default: "red.500",
            _dark: "red.400",
          },
          secondary: {
            default: "red.800",
            _dark: "red.700",
          },
        },
      },
    })
  • #5355 bb7eb18da Thanks @TimKolberger! - Export TypeScript types ResponsiveObject and ResponsiveArray

Patch Changes

Minor Changes

Patch Changes

Minor Changes

  • #5316 1537a725f Thanks @TimKolberger! - Introducing semantic tokens

    Semantic tokens provide the ability to create css variables which can change with a CSS condition.

    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        900: "#171923",
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="gray.900">will always be gray.900</Text>
      </ChakraProvider>
    )
    import { ChakraProvider, extendTheme } from "@chakra-ui/react"
    
    const customTheme = extendTheme({
      colors: {
        50: "#F7FAFC",
        900: "#171923",
      },
      semanticTokens: {
        colors: {
          text: {
            default: "gray.900",
            _dark: "gray.50",
          },
        },
      },
    })
    
    const App = () => (
      <ChakraProvider theme={customTheme}>
        <Text color="text">
          will be gray.900 in light mode and gray.50 in dark mode
        </Text>
      </ChakraProvider>
    )
    import { extendTheme } from "@chakra-ui/react"
    
    const theme = extendTheme({
      colors: {
        red: {
          100: "#ff0010",
          400: "#ff0040",
          500: "#ff0050",
          700: "#ff0070",
          800: "#ff0080",
        },
      },
      semanticTokens: {
        colors: {
          error: "red.500", // create a token alias
          success: "red.100",
          primary: {
            // set variable conditionally with pseudo selectors like `_dark` and `_light`
            // use `default` to define fallback value
            default: "red.500",
            _dark: "red.400",
          },
          secondary: {
            default: "red.800",
            _dark: "red.700",
          },
        },
      },
    })
  • #5419 a5f3bfce8 Thanks @segunadebayo! - Add entrypoints to the different parts of the theme (colors, fonts, components, spacing, etc.)

    // Now you can use only colors from the theme
    import colors from "@chakra-ui/theme/foundations/colors"

    Here's a table of the theme parts and entrypoints

    Part Entrypoint
    components "@chakra-ui/theme/components"
    foundations "@chakra-ui/theme/foundations"
    colors "@chakra-ui/theme/foundations/colors"
    sizes "@chakra-ui/theme/foundations/sizes"
    spacing "@chakra-ui/theme/foundations/spacing"
    typography "@chakra-ui/theme/foundations/typography"
    radius "@chakra-ui/theme/foundations/radius"
    shadows "@chakra-ui/theme/foundations/shadows"
    transition "@chakra-ui/theme/foundations/transition"
    zIndex "@chakra-ui/theme/foundations/z-index"
    blur "@chakra-ui/theme/foundations/blur"
    borders "@chakra-ui/theme/foundations/borders"

Patch Changes

Minor Changes

  • #5316 1537a725f Thanks @TimKolberger! - Add helper function flatten

    import { flatten } from "@chakra-ui/utils"
    
    flatten({ space: [0, 1, 2, 4, 8, 16, 32] })
    /** =>
    {
      "space.0": 0,
      "space.1": 1,
      "space.2": 2,
      "space.3": 4,
      "space.4": 8,
      "space.5": 16,
      "space.6": 32,
    }
    */

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes