Skip to content

Instantly share code, notes, and snippets.

View c-jardine's full-sized avatar

Chris Jardine c-jardine

View GitHub Profile
@Pagebakers
Pagebakers / alpha.tsx
Last active June 22, 2024 18:41
Utility to transparentize Chakra UI color tokens
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)`