Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

handleColor(theme('colors')) does not include user defined colors with opacity #870

Open
dospunk opened this issue Nov 16, 2022 · 0 comments

Comments

@dospunk
Copy link

dospunk commented Nov 16, 2022

Since the plugins page says that theme gets the user theme, I would expect it to include all colors defined in the windi config's theme.extend.colors but it doesn't seem to include colors that can take an opacity value.

Given the following config file, custom-color-primary doesn't work but custom-color-gray-500 does and custom-color-primary-dark does.

import { defineConfig } from 'vite-plugin-windicss'
import plugin from 'windicss/plugin'

export default defineConfig({
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: ({ opacityValue }) => {
          return `hsla(0, 100%, 50%, ${opacityValue ?? 1})`
        },
        'primary-dark': 'hsl(0, 100%, 25%)',
        'primary-light': 'hsl(0, 100%, 75%)',
      },
    },
  },
  plugins: [
    plugin(({ addDynamic, theme }) => {
      addDynamic(
        'custom-color',
        ({ Utility, Style }) => {
          const prop = Utility.handler.handleColor(theme('colors')).value
          if (!prop) return
          return Style.generate(Utility.class, {
            '--color': prop,
          })
        },
        { layer: 'components', completions: ['custom-color-{color}'] }
      )
    }),
  ],
})
@dospunk dospunk changed the title handleColor(theme('colors')) does not include user defined colors handleColor(theme('colors')) does not include user defined colors with opacity Nov 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant