FR: extra field per swatch to use in conjunction with Tailwind

[robdekort]

It would be lovely if we could have another field per swatch. I currently abuse the label field as follows:

-
  handle: theme
  field:
    colors:
      -
        label: '44 103 153'
        value:
          - '#2C6799'

In my HTML I set the current theme like this:

<style>
    {{ selector or ':root' }} {
        --color-theme: {{ theme.label }};
    }
</style>

And in the Tailwind config I reference the RGB values so I maintain support for the Tailwind shorthand opacity syntax.

module.exports = {
  theme: {
    colors: {
      primary: {
        DEFAULT: 'rgb(var(--color-theme) / <alpha-value>)'
      },
    }
  }
}

Abusing the label field works, but it is not ideal in the CP since it's used as a label for the button. Also this wouldn't work when a swatch gets multiple colours. An array per value might be a nice solution.

[robdekort]

I bypassed this by using rgb values as the color value and then doing this in Antlers:

<style>
    {{ selector or ':root' }} {
        --color-theme: {{ theme.value[0] | replace('rgb(', '') | replace(')', '') }};
    }
</style>