From one CSS variable plugin generate derivatives

Grimreaper → credited pdureau → .

Grimreaper → credited vmaucorps → .

Adding disabled informative fields for each derivative css variables in UI.

For now, only support Hex to RGB and RGB to Hex transformation, the issue stays active.
An example format for Yml configuration :

bs_primary:
  category: "Colors"
  type: "color"
  label: "Primary"
  default_values:
    ":root": "#0d6efd"
  weight: 1
  derivatives:
    bs_primary_rgb:
      transformation_plugin_id: "hex_to_rgb"
    bs_secondary_bg_rgb:
      transformation_plugin_id: "hex_to_rgb"

Hello,

Do we need to make the transformation visible from the UI ? It is an low-level API stuff, the site administrator doesn't care about the design system having "aliases" for CSS variables.Cordiale

I don't know if this is helpful, but from a simplistic perspective of a site builder with minimal needs it would be great to be able to choose just the primary and secondary colors that would generate all of the relevant color choices, or even a third color if that is part of the set. Is that the goal of this issue?

Hi,

@bunthorne, it is the goal of this issue.

Thanks for your work, with MR, screenshot and code example.

See my code review comment, which is aligned with comment 15.

I opened an issue on UI Suite Boostrap ✨ POC CSS variables derivative Active to put the POC in parallel of the transformation plugins created here, so easier for people to test and have a concrete example.

Hello, thanks for the review !

I removed the disabled fields showing derivatives, and changed a a bit the structure of the ui_skins.css_variables.yml :

bs_primary:
  category: "Colors"
  type: "color"
  label: "Primary"
  default_values:
    ":root": "#0d6efd"
  weight: 1
  derivatives:
    bs_primary_rgb:
      "hex_to_rgb":
        - key1: 'value1'
        - key2: 'value2'
        - key3: 'value3'
    bs_secondary_rgb:
      "hex_to_rgb": {}

We are now able to pass configuration options to our derivative variables.

Updated MR to have it working as intended.

Now needs work based on all the transformers needed for UI Suite Bootstrap. and Needs tests

Currently not working on it.

Finishing other issues of ui_suite_bootstrap and other more important issues before coming back here.