Last active
June 22, 2024 18:41
-
-
Save Pagebakers/b02e52dc5bfa6d22fd1f0f5e89aa2ab9 to your computer and use it in GitHub Desktop.
Utility to transparentize Chakra UI color tokens
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { ThemeTypings } from '@chakra-ui/react' | |
| /** | |
| * Transparentize Chakra UI color tokens | |
| * @param color - Chakra UI (semantic) token | |
| * @param opacity - Opacity value 0 to 1. | |
| */ | |
| export const alpha = (color: ThemeTypings['colors'], value: number) => { | |
| const key = color.replaceAll('.', '-') | |
| return `color-mix(in srgb, var(--chakra-colors-${key}) ${Math.max(Math.min(value * 100, 100), 0)}%, transparent)` | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm surprised this isn't more popular. Thank you!