import styles from 'ansi-styles';

styles.color.ansi(styles.rgbToAnsi(100, 200, 15)); // RGB to 16 color ansi foreground code
styles.bgColor.ansi(styles.hexToAnsi('#C0FFEE')); // HEX to 16 color ansi foreground code

styles.color.ansi256(styles.rgbToAnsi256(100, 200, 15)); // RGB to 256 color ansi foreground code
styles.bgColor.ansi256(styles.hexToAnsi256('#C0FFEE')); // HEX to 256 color ansi foreground code

styles.color.ansi16m(100, 200, 15); // RGB to 16 million color foreground code
styles.bgColor.ansi16m(...styles.hexToRgb('#C0FFEE')); // Hex (RGB) to 16 million color foreground code

import { createStyles } from "@dash-ui/styles";

export const styles = createStyles({
  // createStyles() uses these themes to create a generic
  // for variable and theme usage in the styles() instance
  themes: {
    light: {
      color: {
        // var(--color-bg)
        bg: "#fafafa",
      },
    },
    dark: {
      color: {
        // var(--color-bg)
        bg: "#1a1a1a",
      },
    },
  },
});

styles.one(({ color }) => ({
  // Will autocomplete and pass type checking
  backgroundColor: color.bg,
  // "red" is not in our `themes` and this will fail
  // type checking
  color: color.red,
}));

// Likewise, this will pass typechecking
styles.theme("dark");

// This will not
styles.theme("whoami");

import styles from 'ansi-styles';

console.log(`${styles.green.open}Hello world!${styles.green.close}`);


// Color conversion between 256/truecolor
// NOTE: When converting from truecolor to 256 colors, the original color
//       may be degraded to fit the new color palette. This means terminals
//       that do not support 16 million colors will best-match the
//       original color.
console.log(`${styles.color.ansi(styles.rgbToAnsi(199, 20, 250))}Hello World${styles.color.close}`)
console.log(`${styles.color.ansi256(styles.rgbToAnsi256(199, 20, 250))}Hello World${styles.color.close}`)
console.log(`${styles.color.ansi16m(...styles.hexToRgb('#abcdef'))}Hello World${styles.color.close}`)

function StyleColorMode() {
  const { toggleColorMode } = useColorMode()

  const bg = useColorModeValue('red.500', 'red.200')
  const color = useColorModeValue('white', 'gray.800')

  return (
    <>
      <Box mb={4} bg={bg} color={color}>
        This box's style will change based on the color mode.
      </Box>
      <Button size='sm' onClick={toggleColorMode}>
        Toggle Mode
      </Button>
    </>
  )
}

import { extendTheme, useStyleConfig } from '@chakra-ui/react'

// 1. define component configuration
const components = {
  CustomBadge: {
    baseStyle: ({ colorMode }) => ({
      bg: colorMode === 'dark' ? 'green.300' : 'green.500',
      color: colorMode === 'dark' ? 'gray.800' : 'white',
      textTransform: 'uppercase',
      fontWeight: 'semibold',
      letterSpacing: '0.02em',
      padding: '4px',
      borderRadius: '2px',
      fontSize: '12px',
    }),
  },
}

// 2. Call `extendTheme` and pass your custom values`
const theme = extendTheme({ components })

// 3. Use it in your components
function CustomBadge(props) {
  const { size, variant, ...rest } = props
  const styles = useStyleConfig('CustomBadge', { size, variant })
  return <Box as='span' sx={styles} {...rest} />
}

// 4. Use the component
render(<CustomBadge>I am a custom badge</CustomBadge>)