Allow modification of theme.json global styles

[coreyworrell]

What problem does this address?

There is currently no way (that I can tell) to modify the output of the global styles when using theme.json.

Example use case: creating a color system to allow for different opacity of text and background colors.

Example setup:

style.css (or equivalent)

.has-text-color {
  color: rgb(var(--color) / var(--text-opacity, 1));
}

.has-background {
  background-color: rgb(var(--background-color) / var(--background-opacity, 1));
}

.has-1-text-opacity {
  --text-opacity: .1;
}

.has-2-text-opacity {
  --text-opacity: .2;
}

.has-1-background-opacity {
  --background-opacity: .1;
}

/* etc... */

theme.json

{
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "50, 150, 255"
        }
      ]
    }
  }
}

global-styles (#global-styles-inline-css)

body {
  --wp--preset--color--primary: 50, 150, 255;
}

.has-primary-color {
  --color: var(--wp--preset--color--primary);
  /* or */
  color: rgb(var(--wp--preset--color--primary) / var(--text-opacity, 1));
}

.has-primary-background-color {
  --background-color: var(--wp--preset--color--primary);
  /* or */
  background-color: rgb(var(--wp--preset--color--primary) / var(--background-opacity, 1));
}

What is your proposed solution?

If those styles were filterable then this could be easily done. The only solution I could see now is to dequeue the global-styles and then include our own CSS, but doing this feels like going against WordPress and not future-proof.

[oandregal]

Hi Corey, thanks for sharing your use case, it's very valuable.

I was looking at it, and this is how I understand it could be done with the current system. The preset colors can use CSS variables and will show up fine in the editor. So, if you do:

{
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "rgb(50,150,255, var(--wp--custom--opacity, 1))"
        }
      ]
    }
  }
}

the only thing that remains is how you decide which opacity belongs to which block. For simplification, let's say that you'd want all paragraphs to have a 0.3 opacity. The only thing you'd have to do is to enqueue this CSS from your plugin:

p {
  --wp--custom--opacity: .3;
}

Is this in line with what you were thinking?

[coreyworrell]

@oandregal yes I think that is a viable solution for now... I have been importing theme.json into our CSS build (using Stylus), so having a variable for color that can be modified (ie: color: darken($color, 50%)) is very useful. But I suppose we could always append a separate JSON property to be used in that instance. And with CSS color mod functions coming soon it may not be needed anyways.

[oandregal]

👍 Thanks for sharing the use case and keep these questions coming so we can improve the system :)