Integrating UI components is too damn hard!

[LeaVerou]

Session 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

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. ???

Session goal

Flesh out ideas for potential directions, see which are most viable in terms of I/E

Additional session chairs (Optional)

No response

Who can attend

Anyone may attend (Default)

IRC channel (Optional)

#design-integration

Other sessions where we should avoid scheduling conflicts (Optional)

#59, #68, #30, #31, #29, #28, #27, #26

Instructions for meeting planners (Optional)

No response

Agenda for the meeting.

1. Discuss requirements and potential directions
2. Discuss relevant proposals:
   • Proposal: CSS Variable Groups (as a solution to several design systems pain points) csswg-drafts#9992
   • Making design systems first-class citizens csswg-drafts#9999
   • [css-fonts] Allow authors to redefine generic font families csswg-drafts#10452
   • [css-color-adjust] Allow authors do define custom color-scheme values. csswg-drafts#9660
   • [css-mixins] Proposal: @like rule for repurposing page default styles csswg-drafts#10222
   • [css-color] [css-ui-4] Authors should have access to accent-color value to use in their code csswg-drafts#5900

Links to calendar

• 2024-09-25, 16:00 - 16:45

[tpac-breakout-bot]

Thank you for proposing a session!

You may update the session description as needed and at any time before the meeting, but please keep in mind that tooling relies on issue formatting: follow the instructions and leave all headings and other formatting intact in particular. Bots and W3C meeting organizers may also update the description, to fix formatting issues or add links and other relevant information. Please do not revert these changes. Feel free to use comments to raise questions.

Do not expect formal approval; W3C meeting organizers endeavor to schedule all proposed sessions that are in scope for a breakout. Actual scheduling should take place shortly before the meeting.

[justinfagnani]

This is an important topic and I would love to attend, but I need to be at #28. Hopefully there are good notes!