Skip to content

Latest commit

 

History

History
906 lines (670 loc) · 31.7 KB

v1.8.0.mdx

File metadata and controls

906 lines (670 loc) · 31.7 KB
Raw
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

@chakra-ui/color-mode@1.4.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

@chakra-ui/hooks@1.8.0

Minor Changes

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

Patch Changes

@chakra-ui/number-input@1.4.0

Minor Changes

Patch Changes

@chakra-ui/react@1.8.0

Minor Changes

Patch Changes

@chakra-ui/styled-system@1.17.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",
      },
    },
  },
})

  • #5355 bb7eb18da Thanks @TimKolberger! - Export TypeScript types ResponsiveObject and ResponsiveArray

Patch Changes

@chakra-ui/system@1.10.0

Minor Changes

Patch Changes

@chakra-ui/theme@1.13.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",
      },
    },
  },
})

  • #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

@chakra-ui/utils@1.10.0

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,
}
*/

@chakra-ui/accordion@1.4.4

Patch Changes

@chakra-ui/alert@1.3.3

Patch Changes

@chakra-ui/avatar@1.3.4

Patch Changes

@chakra-ui/breadcrumb@1.3.2

Patch Changes

@chakra-ui/button@1.5.3

Patch Changes

@chakra-ui/checkbox@1.6.3

Patch Changes

@chakra-ui/clickable@1.2.2

Patch Changes

@chakra-ui/close-button@1.2.3

Patch Changes

@chakra-ui/control-box@1.1.2

Patch Changes

@chakra-ui/counter@1.2.3

Patch Changes

@chakra-ui/editable@1.3.3

Patch Changes

@chakra-ui/react-env@1.1.2

Patch Changes

@chakra-ui/focus-lock@1.2.2

Patch Changes

@chakra-ui/form-control@1.5.4

Patch Changes

@chakra-ui/icon@2.0.1

Patch Changes

@chakra-ui/icons@1.1.3

Patch Changes

  • Updated dependencies

@chakra-ui/image@1.1.3

Patch Changes

@chakra-ui/input@1.3.4

Patch Changes

@chakra-ui/layout@1.7.2

Patch Changes

@chakra-ui/live-region@1.1.2

Patch Changes

@chakra-ui/media-query@1.2.4

Patch Changes

@chakra-ui/menu@1.8.4

Patch Changes

@chakra-ui/modal@1.10.5

Patch Changes

@chakra-ui/pin-input@1.7.3

Patch Changes

@chakra-ui/popover@1.11.2

Patch Changes

@chakra-ui/portal@1.3.3

Patch Changes

@chakra-ui/progress@1.2.2

Patch Changes

@chakra-ui/provider@1.7.6

Patch Changes

@chakra-ui/radio@1.4.5

Patch Changes

@chakra-ui/select@1.2.4

Patch Changes

@chakra-ui/skeleton@1.2.6

Patch Changes

@chakra-ui/skip-nav@1.2.2

Patch Changes

@chakra-ui/slider@1.5.4

Patch Changes

@chakra-ui/spinner@1.2.2

Patch Changes

@chakra-ui/stat@1.2.3

Patch Changes

@chakra-ui/switch@1.3.3

Patch Changes

@chakra-ui/table@1.3.2

Patch Changes

@chakra-ui/tabs@1.6.3

Patch Changes

@chakra-ui/tag@1.2.3

Patch Changes

@chakra-ui/textarea@1.2.4

Patch Changes

@chakra-ui/theme-tools@1.3.2

Patch Changes

  • #5241 ebf1d98be Thanks @timonweber! - Allow style function types to be part of StyleConfig and MultiStyleConfig types to reflect the possible usage of style functions instead of style objects.
  • Updated dependencies [1537a725f]

@chakra-ui/toast@1.5.2

Patch Changes

@chakra-ui/tooltip@1.4.4

Patch Changes

@chakra-ui/transition@1.4.3

Patch Changes

@chakra-ui/visually-hidden@1.1.2

Patch Changes

@chakra-ui/cli@1.7.1

Patch Changes

  • #5372 472612e7a Thanks @selbekk! - Update README to reflect the change of the default --out path to node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts

  • Updated dependencies [1537a725f]

@chakra-ui/props-docs@1.0.44

Patch Changes

create-react-app-ts@1.1.7

Patch Changes

gatsby-starter-default@0.3.7

Patch Changes

chakra-nextjs@1.1.7

Patch Changes

chakra-nextjs-ts@1.1.7

Patch Changes

@chakra-ui/test-utils@1.1.6

Patch Changes