chakra-ui/chakra-ui @chakra-ui/react@1.1.0

on GitHub

Minor Changes

• 6a410f77
  #2834 Thanks
  @TimKolberger! - Allow extendTheme to
  accept optional second argument baseTheme to customize:

  const theme = extendTheme(
    { colors: { red: { 500: "#ff0000" } } },
    // the base theme to customize with the above overrides
    yourTheme,
  )

  If no baseTheme is provided, defaults to the Chakra theme.

• a0e0bd9a
  #2816 Thanks
  @segunadebayo! - Add gradient support to
  chakra style props. This PR adds to props:

  • bgGradient: a shorthand, convenient style prop to apply theme-aware
    gradients.
  • bgClip: a shorthand for background-clip CSS attribute. Useful when
    creating text gradients.
  • backgroundClip: the typical background-clip CSS attribute. Useful when
    creating text gradients.

  The Background Gradient API

  To add a gradient to a component, pass the bgGradient prop and set its value
  following the API below:

  • linear(<direction>, <from>, <to>)
  • radial(<from>, <to>)

  and other valid css gradient properties. For linear gradients, the direction
  can be either of the following values:

  "to-t" // 'to top'
  "to-tr" // 'to top right'
  "to-r" // 'to right'
  "to-br" // 'to bottom right'
  "to-b" // 'to bottom'
  "to-bl" // 'to bottom left'
  "to-l" // 'to left'
  "to-tl" // 'to top left'

  <Box w="500px" h="200px" bgGradient="linear(to-r, gray.300, pink.200)" />

  You can use both theme-aware color tokens or raw CSS color values.

  <Box w="500px" h="200px" bgGradient="linear(to-l, #7928CA, #FF0080)" />

  Multiple Color Stops

  This is a gradient with multiple stops

  <Box w="500px" h="200px" bgGradient="radial(gray.300,yellow.400,pink.200)" />

  The Text Gradient API

  To add a text gradient, pass the bgGradient following the API and bgClip
  prop to text.

  <Text
    bgGradient="linear(to-l,#7928CA,#FF0080)"
    bgClip="text"
    fontSize="7xl"
    fontWeight="extrabold"
  >
    Welcome to Chakra UI
  </Text>

Patch Changes

• 916588a5
  #2783 Thanks
  @TimKolberger! - Fixed an issue where
  extendTheme did not allow string properties besides ColorHue in the colors
  attribute of the theme override.

  extendTheme({
    colors: {
      myColor: {
        text: "#ff0000",
      },
    },
  })

• Updated dependencies
  [1e6db1e0,
  5c8f0838,
  f09a1cbf,
  46e24c58]:

  • @chakra-ui/checkbox@1.1.0
  • @chakra-ui/radio@1.1.0
  • @chakra-ui/skeleton@1.0.4
  • @chakra-ui/pin-input@1.1.2
  • @chakra-ui/switch@1.0.3
  • @chakra-ui/system@1.1.1