feat: color opacity modifier

[astahmer]

📝 Description

Update every utilities connected to the colors tokens in the @pandacss/preset-base (included by default) to use the
new color-mix CSS function.

This function allows you to mix two colors together, and we use it to change the opacity of a color using the
{color}/{opacity} syntax.

You can use it like this:

css({
  bg: 'red.300/40',
  color: 'white',
})

This will generate:

@layer utilities {
  .bg_red\.300\/40 {
    --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
    background: var(--mix-background, var(--colors-red-300));
  }

  .text_white {
    color: var(--colors-white);
  }
}

• If you're not using any opacity, the utility will not use color-mix
• The utility will automatically fallback to the original color if the color-mix function is not supported by the
  browser.
• You can use any of the color tokens, and any of the opacity tokens.

---

The utilities transform function also receives a new utils object that contains the colorMix function, so you can
also use it on your own utilities:

export default defineConfig({
  utilities: {
    background: {
      shorthand: 'bg',
      className: 'bg',
      values: 'colors',
      transform(value, args) {
        const mix = args.utils.colorMix(value, args)
        // This can happen if the value format is invalid (e.g. `bg: red.300/invalid` or `bg: red.300//10`)
        if (mix.invalid) return { background: value }

        return {
          background: mix.value,
        }
      },
    },
  },
})

---

Here's a cool snippet (that we use internally !) that makes it easier to create a utility transform for a given
property:

import type { NestedCssProperties, PropertyTransform } from '@pandacss/types'

export const createColorMixTransform =
  (prop: string, fallback = true): PropertyTransform =>
  (value, args) => {
    const mix = args.utils.colorMix(value, args)
    if (mix.invalid) return { [prop]: value }

    const cssVar = '--mix-' + prop

    return {
      ...(fallback && {
        [cssVar]: mix.value,
      }),
      [prop]: fallback ? `var(${cssVar}, ${mix.color})` : mix.value,
    } as any as NestedCssProperties
  }

then the same utility transform as above can be written like this:

export default defineConfig({
  utilities: {
    background: {
      shorthand: "bg",
      className: "bg",
      values: "colors",
      transform: createColorMixTransform("background"),
  },
});

💣 Is this a breaking change (Yes/No):

no

[changeset-bot]

🦋 Changeset detected

Latest commit: d685222

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages

Name	Type
@pandacss/preset-base	Minor
@pandacss/fixture	Minor
@pandacss/types	Minor
@pandacss/core	Minor
@pandacss/config	Minor
@pandacss/dev	Minor
@pandacss/generator	Minor
@pandacss/node	Minor
@pandacss/parser	Minor
@pandacss/preset-atlaskit	Minor
@pandacss/preset-open-props	Minor
@pandacss/preset-panda	Minor
@pandacss/studio	Minor
@pandacss/token-dictionary	Minor
@pandacss/astro-plugin-studio	Minor
@pandacss/postcss	Minor
@pandacss/error	Minor
@pandacss/extractor	Minor
@pandacss/is-valid-prop	Minor
@pandacss/logger	Minor
@pandacss/shared	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
panda-docs	✅ Ready (Inspect)	Visit Preview	Jan 29, 2024 5:35pm
panda-playground	✅ Ready (Inspect)	Visit Preview	Jan 29, 2024 5:35pm
panda-studio	✅ Ready (Inspect)	Visit Preview	Jan 29, 2024 5:35pm