Information

Integrating UI components is too damn hard!
  • Past
  • Confirmed
  • Breakout Sessions

Meeting

Event details

Date:
– Pacific Daylight Time
Status:
Confirmed
Location:
-1 Lower Level - Catalina 7
Participants:
Bruce Anderson, Panos Astithas, Kevin Babbitt, Owen Buckley, Alastair Campbell, Keith Cirkel, Jan Jaap de Groot, Hidde de Vries, Rob Glidden, Westbrook Johnson, Jesse Jurman, Brian Kardell, Roman Komarov, Pete LePage, Penelope McLachlan, James Nurthen, Steven Orvell, John Riviello, Raymond Schwartz, Miriam Suzanne, Zacharias Törnblom, Hannah Van Opstal, Lea Verou, Greg Whitworth
Big meeting:
TPAC 2024 (Calendar)

The vision of authors being able to drop components and UI libraries into their pages and have things Just Work™ and look right (at least to a first order approximation) is still largely unrealized. Integrating any UI component is incredibly laborious, as it requires manually communicating fine grained design tokens to every single component.

This Web Awesome tutorial illustrates the problem perfectly:

https://youtu.be/JhfYeXLfWdI?si=vF3xRai2QrjabVFv&t=277

<img width="1296" alt="image" src="https://github.com/w3c/csswg-drafts/assets/175836/e4175efa-fe6f-47e9-a11f-bf3e0ae7cc55">

And this is just for assigning a certain hue as the primary color of a whole page — the effort is duplicated for every third-party UI component that uses colors, fonts, measurements, font sizes, etc. Same-party components can use the same naming convention to reduce effort, but that doesn't work for components from different entities.

To reduce integration effort, we need to reduce the amount of information the host page needs to communicate about its design to each individual component. Some avenues are:

  1. standardized ways to set design tokens (e.g. the page’s primary color or serif font) in a way that can be read by other components
  2. ways to derive tokens from core tokens (e.g. a light tint from a primary color, or the next smaller font size in a scale) to minimize how many tokens need to be communicated.
  3. Ways for components to adopt and repurpose page styles of existing (standard) elements
  4. ???

Agenda

Chairs:
Lea Verou, Keith Cirkel

Description:
The vision of authors being able to drop components and UI libraries into their pages and have things Just Work™ and look right (at least to a first order approximation) is still largely unrealized. Integrating any UI component is incredibly laborious, as it requires manually communicating fine grained design tokens to every single component.

This Web Awesome tutorial illustrates the problem perfectly:

https://youtu.be/JhfYeXLfWdI?si=vF3xRai2QrjabVFv&t=277

<img width="1296" alt="image" src="https://github.com/w3c/csswg-drafts/assets/175836/e4175efa-fe6f-47e9-a11f-bf3e0ae7cc55">

And this is just for assigning a certain hue as the primary color of a whole page — the effort is duplicated for every third-party UI component that uses colors, fonts, measurements, font sizes, etc. Same-party components can use the same naming convention to reduce effort, but that doesn't work for components from different entities.

To reduce integration effort, we need to reduce the amount of information the host page needs to communicate about its design to each individual component. Some avenues are:

  1. standardized ways to set design tokens (e.g. the page’s primary color or serif font) in a way that can be read by other components
  2. ways to derive tokens from core tokens (e.g. a light tint from a primary color, or the next smaller font size in a scale) to minimize how many tokens need to be communicated.
  3. Ways for components to adopt and repurpose page styles of existing (standard) elements
  4. ???

Goal(s):
Flesh out ideas for potential directions, see which are most viable in terms of I/E

Agenda:

  1. Discuss requirements and potential directions
  2. Discuss relevant proposals:

Materials:

Track(s):

  • Web Components

Minutes

 Read minutes

Export options

Personal Links

Please log in to export this event with all the information you have access to.

Public Links

The following links do not contain any sensitive information and can be shared publicly.

Feedback

Report feedback and issues on GitHub.