Support styles which are not HTML classes

For information, https://www.drupal.org/project/ui_skins → has the same challenge for themes/modes plugins which can be classes, data-attributes or meta elements.

Example ui_suite_dsfr.ui_skins.themes.yml:

light:
  label: "Light"
  key: data-fr-scheme
  target: html

dark:
  label: "Dark"
  key: data-fr-scheme
  target: html

mourning_light:
  label: "Mourning light"
  key: data-fr-mourning
  target: html
  value: ""
  dependencies: [light]

mourning_dark:
  label: "Mourning dark"
  key: data-fr-mourning
  target: html
  value: ""
  dependencies: [dark]

Rules:

If missing “value”: we take the plugin ID.

This behaviour is not well documented and seems hard to understand, so let's not take it without challenging it.

However, adopting a shared format and/or mechanism woudl be nice.

Also, this issue needs to be considered in the context of ✨ Add a style utility API Active

Breaking change proposal with both:

• merging of UI Skins themes & UI Styles definitions formats
• support styles which are not HTML classes

For styles, in {provider}.utilities.yml, an example of a style with different options:

size:
  label: "Text size"
  # kind: utility/theme. Magically added by the discovery
  attribute: class # Overridable at the option level.
  options:
    - label: Small
      value: 'text-sm'
    - label: Medium
      attribute: style
      # value: 'font-size: 15px'
      value: '--size: 15px'
    - label: "Large"
      attribute: cds-text
      value: "large"
  # library: ""

For themes/modes, in {provider}.modes.yml:

This is the opportunity of also covering ✨ Add HTML class property for styles? Active by allowing value at style level.

So:

So, to get the class="mask mask-star" example from ✨ Add HTML class property for styles? Active , we can do:

mask:
  label: "Mask"
  value: "mask"
  options: 
    star:
       label: Star
       value: "mask-star"