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

Support alpha values for theme() function #8416

merged 6 commits into from May 25, 2022


Copy link

This PR provides two new APIs, one in CSS and one in JS, to handle changing the alpha value of a color when possible.

In CSS we've co-opted the / alpha syntax used in functions like rgb, hsl, and color and have applied this our theme function usable from CSS. The provided alpha is a raw opacity value but you can use the theme function here to pull from your config.

The following all work now in CSS:

color: theme(colors.rose.500 / 50%); /* color: rgb(244 63 94 / 50%); */
color: theme( / 0.5); /* color: rgb(59 130 246 / 50%); */
color: theme(colors.emerald.500 / var(--my-alpha-value)); /* color: rgb(16 185 129 / 50%); */
color: theme(colors.emerald.500 / theme(opacity.50)); /* color: rgb(16 185 129 / 50%); */

In JS-land we have theme.withAlpha(key, opacity) that is usable from your config:

theme: {
  extend: {
    textColor: ({ theme }) => ({
      translucentBlue: theme.withAlpha('', 'var(--my-alpha)'),

The JS API is still subject to change.

In addition, either from CSS or JS, using the rgb and hsl helpers in your config for defining colors with customizable opacity works as well:

theme: {
  extend: {
    colors: ({ rgb }) => ({
      primary: rgb('--primary'),
color: theme(colors.primary / 50%); /* color: rgb(var(--primary) / 50%); */

@thecrypticace thecrypticace force-pushed the feature/alpha-for-theme-function branch from 6c1d3a4 to ab807ea Compare May 23, 2022 19:05
Building an object of N keys incrementally using Object.reduce + splat results in N intermediate objects. We should just create one object and assign each key.
And fix typos that were definitely not there
@thecrypticace thecrypticace force-pushed the feature/alpha-for-theme-function branch from d92e142 to 1f2f38e Compare May 25, 2022 17:50
@thecrypticace thecrypticace changed the title WIP: Support alpha values for theme() function Support alpha values for theme() function May 25, 2022
@thecrypticace thecrypticace marked this pull request as ready for review May 25, 2022 17:53
@thecrypticace thecrypticace merged commit 50bed74 into master May 25, 2022
@thecrypticace thecrypticace deleted the feature/alpha-for-theme-function branch May 25, 2022 17:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

1 participant