AI
Colors are being revised and subject to short-term changes
<Stack spacing='10'> <Wrap align='center'> <Button variant='ai' leftIcon={<Icon><path d={mdiCreation} /></Icon>}> Generate </Button> <Button leftIcon={<Icon><path d={mdiCreation} /></Icon>} variant='outline' > Generate </Button> <Button leftIcon={<Icon><path d={mdiCreation} /></Icon>} variant='ghost' colorScheme='primary' > Generate </Button> <Button leftIcon={<Icon><path d={mdiCreation} /></Icon>} variant='ghost'> Generate </Button> </Wrap> <Wrap align='center'> <Button variant='ai' leftIcon={<Icon><path d={mdiCreation} /></Icon>}> AI </Button> <Button leftIcon={<Icon><path d={mdiCreation} /></Icon>} variant='outline' > AI </Button> <Button leftIcon={<Icon><path d={mdiCreation} /></Icon>} variant='ghost' colorScheme='primary' > AI </Button> <Button leftIcon={<Icon><path d={mdiCreation} /></Icon>} variant='ghost'> AI </Button> </Wrap> <Wrap align='center'> <Tooltip label='Ask AI to write anything'> <IconButton variant='ai' icon={<Icon><path d={mdiCreation} /></Icon>} aria-label={'Ask AI to write anything'} /> </Tooltip> <Tooltip label='Ask AI to write anything'> <IconButton icon={<Icon><path d={mdiCreation} /></Icon>} aria-label={'Ask AI to write anything'} variant='outline' /> </Tooltip> <Tooltip label='Ask AI to write anything'> <IconButton icon={<Icon><path d={mdiCreation} /></Icon>} aria-label={'Ask AI to write anything'} variant='ghost' colorScheme='primary' /> </Tooltip> <Tooltip label='Ask AI to write anything'> <IconButton icon={<Icon><path d={mdiCreation} /></Icon>} aria-label={'Ask AI to write anything'} variant='ghost' /> </Tooltip> </Wrap> <Wrap align='center'> <Tooltip label='Regenerate'> <IconButton variant='ghost' icon={<Icon><path d={mdiCached} /></Icon>} aria-label={'Regenerate'} /> </Tooltip> <Tooltip label='Copy to clipboard'> <IconButton variant='ghost' icon={<Icon><path d={mdiContentCopy} /></Icon>} aria-label={'Copy to clipboard'} /> </Tooltip> <Button variant='outline'>Insert after</Button> <Button variant='solid'>Replace</Button> </Wrap> <Wrap align='center'> <Button variant='outline' leftIcon={<Icon><path d={mdiAutoFix} /></Icon>}> Improve writing </Button> <Button variant='outline' leftIcon={<Icon><path d={mdiSpellcheck} /></Icon>} > Fix spelling and grammar </Button> <Button variant='outline' leftIcon={<Icon><path d={mdiTextShort} /></Icon>} > Make shorter </Button> <Button variant='outline' leftIcon={<Icon><path d={mdiTextLong} /></Icon>} > Make longer </Button> <Button variant='outline' leftIcon={<Icon><path d={mdiTextBoxOutline} /></Icon>} > Summarize </Button> <Button variant='outline' leftIcon={<Icon><path d={mdiMicrophoneVariant} /></Icon>} > Change tone </Button> </Wrap> <Progress variant='ai' value={80} /> <Progress isIndeterminate variant='ai' /> <SimpleGrid minChildWidth='28'> <Text bgGradient='linear(to-tr, purple.50, red.50)' p='4' variant='strong'>AI bg 50</Text> <Text bgGradient='linear(to-tr, purple.100, red.100)' p='4' variant='strong'>AI bg 100</Text> <Text bgGradient='linear(to-tr, purple.200, red.200)' p='4' variant='strong'>AI bg 200</Text> <Text bgGradient='linear(to-tr, purple.300, red.300)' p='4' variant='strong'>AI bg 300</Text> <Text bgGradient='linear(to-tr, purple.400, red.400)' p='4' variant='strong'>AI bg 400</Text> <Text bgGradient='linear(to-tr, purple.500, red.500)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 500</Text> <Text bgGradient='linear(to-tr, purple.600, red.600)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 600</Text> <Text bgGradient='linear(to-tr, purple.700, red.700)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 700</Text> <Text bgGradient='linear(to-tr, purple.800, red.800)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 800</Text> <Text bgGradient='linear(to-tr, purple.900, red.900)' p='4' variant='strong' color='chakra-inverse-text'>AI bg 900</Text> </SimpleGrid> </Stack>