Problem/Motivation

Following #3531854: Add a Design Tokens & CSS variables API.

Some design systems have design tokens which make senses only for specific UI components.

Let's not consider this as a good practice to promote because they conflict with the scope system, more versatile and predictable, but they exists in some design systems, so they must be addressed.

Examples:

Daisy UI

https://daisyui.com/docs/utilities/?lang=en#component-specific-css-varia... :

  • --alert-color
  • --btn-border
  • --card-p
  • ...

Spectrum

https://opensource.adobe.com/spectrum-web-components/tools/styles/#desig...

  • --spectrum-breadcrumbs-height
  • --spectrum-meter-default-width

Proposed resolution

Already prototyped by Mateu & Christian in https://www.drupal.org/project/design_tokens (one the 2 main inspirations of the Core Design Tokens API).

Example: https://git.drupalcode.org/project/design_tokens/-/blob/1.x/tests/module...

name: With Design Tokens
thirdPartySettings:
  design_tokens:
    tokens:
      component.with-design-tokens.heading.lv2.font:
        value: drupal.branding.typography.heading.lv2.primary
        fallback:
          type: fontFamily
          value: '16px/1.2 "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
      component.with-design-tokens.heading.color:
        value: drupal.branding.color.impact
        fallback:
          type: color
          value: '#d7321e'
      component.with-design-tokens.layout.spacing:
        value: drupal.branding.dimension.large
        fallback:
          type: dimension
          value: '20px'
props:
  properties: {}

It will allow us:

  • to propose UI to alter those specific values only when editing the component (along side props) (in tools like Display Builder, Canvas, and others...)
  • to print the CSS Variables only of the SDC is present in the page

It will raise some tricky questions, like "What if a same token is declared in 2 different components?". Let's discuss and make a solid proposal before starting implementation.

User interface changes

No, because there is no UI for design tokens yet in Core. But the contrib space will have soon (some modules are already building some), so it must be considered.

Introduced terminology

No.

API changes

Just extending the SDC and Deisgn Tokens API

Data model changes

No

Release notes snippet

To be done.

Comments

pdureau created an issue.