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

Revisions

  1. Pagebakers revised this gist Jan 29, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion alpha.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    import { ThemeTypings } from '@chakra-ui/styled-system'
    import { ThemeTypings } from '@chakra-ui/react'

    /**
    * Transparentize Chakra UI color tokens
  2. Pagebakers created this gist Jan 29, 2024.
    11 changes: 11 additions & 0 deletions alpha.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    import { ThemeTypings } from '@chakra-ui/styled-system'

    /**
    * 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)`
    }