Skip to content

Instantly share code, notes, and snippets.

@Pagebakers

Pagebakers/alpha.tsx

Last active June 22, 2024 18:41
Show Gist options
  • Save Pagebakers/b02e52dc5bfa6d22fd1f0f5e89aa2ab9 to your computer and use it in GitHub Desktop.
Save Pagebakers/b02e52dc5bfa6d22fd1f0f5e89aa2ab9 to your computer and use it in GitHub Desktop.
Download ZIP
Utility to transparentize Chakra UI color tokens
Raw
alpha.tsx
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)`
}
@c-jardine
Copy link

I'm surprised this isn't more popular. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment