View all @chakra-ui/theme analysis

How to use the @chakra-ui/theme.generateAlphaColors function in @chakra-ui/theme

To help you get started, we’ve selected a few @chakra-ui/theme examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

chakra-ui / chakra-ui / packages / chakra-ui / src / Badge / styles.ts View on Github

const subtleStyle = ({ theme: { colors }, color }: PropsWithTheme) => {
  const _color = colors[color] && colors[color][200];
  const alphaColors = generateAlphaColors(_color);
  const darkModeBg = alphaColors[300];

  return {
    light: {
      bg: get(color, "100"),
      color: get(color, "800"),
    },
    dark: {
      bg: darkModeBg,
      color: get(color, "200"),
    },
  };
};