chakra-ui/chakra-ui @chakra-ui/styled-system@1.3.0

on GitHub

Minor Changes

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

• 4fa07745
  Thanks @segunadebayo! - ## Improve
  performance

  Styled system core functions use localCompare to sort the transformed styles
  before passing it to emotion. This seems to be slower compared to its
  alternative Intl.Collator.

  Here's a benchmark I ran on my Chrome, Macbook Pro:

  // Create an array of 2000 random items
  const arr = []
  for (let i = 0; i < 2000; i++) {
    arr.push(`test-${Math.random()}`)
  }
  
  // #1 - localeCompare: 169.665ms
  arr.sort((a, b) =>
    a.localeCompare(b, undefined, {
      numeric: true,
      sensitivity: "base",
    }),
  )
  
  // #2 - collator: 10.915ms
  const collator = new Intl.Collator("en", {
    numeric: true,
    sensitivity: "base",
  })
  arr.sort((a, b) => collator.compare(a, b))

  To improve performance, I had to do the following:

  • Move the core functions from @styled-system/core into our own codebase (we
    could create a PR to styled-system to improve the community)
  • Rewrite the functions to TypeScript. Since they're written in JavaScript
  • Change the sorting function to use Intl.Collator
  • Change the merge function to use lodash.mergeWith

  To learn more, check
  here
  to see this benchmark.