Contrib.social

Support styles which are not HTML classes

Open on Drupal.org →
Created on 2 April 2025, 19 days ago

Problem/Motivation

I have found a deisgn system (https://clarity.design/ which seems pretty good quality by the way) which is applying styles utilities with:

  • classes, as usual
  • custom attributes
    cds-text="display"
cds-text="headline"
cds-text="message"
  • inline CSS variables (which is the opposite way of UI Skins using CSS variables)
    style="--size: var(--cds-global-space-7);
style="--size: var(--cds-global-space-14);"

That's crazy but that's interesting. It seems we will have more mechanism shared between UI Styles & UI skins:

  • CSS variables managements
  • Styles & scoped themes with both CSS classes & custom attributes

Proposed resolution

How can we support styles which are not HTML classes?

✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @pdureau
  • Comment 8 days ago →
    🇫🇷France pdureau Paris

    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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024