Full scope theme for design tokens and greater theme opportunities #521
Replies: 4 comments 1 reply
-
This table represents the status of element that support this new specification of component-specific design tokens. As of today, all elements support theming, but are limited to the current set of Auro Design Tokens.
|
Beta Was this translation helpful? Give feedback.
-
A new feature that we are interested in exploring is companion content with each component page in the Auro doc site that lists our all the tokens used for a specific element. Think, this tokens page, but only a subset used for that element. And a clear listing if this is a global token, or level 2 or 3. |
Beta Was this translation helpful? Give feedback.
-
re: token levels
Thinking practically about where these things may live and be managed, I propose the following. Level 1These are GLOBAL tokens. Managed via the Auro Design Tokens repo. A consumable for ALL applications. Level 2These are tokens added to a project at the GLOBAL level (same as CSS), but are specifically designed for this application. These are tokens that reuse the token names from Level 1, but will have values specific to that application. Level 3Level 3 is tied directly to the 'component' itself, but how? If the concept of these tokens reside within the shadowDOM, there are issues to how we could allow users the ability to customize at that level. Asking a user to install a component-specific stylesheet to their global styles will not be embraced. Need to think this one through more. |
Beta Was this translation helpful? Give feedback.
-
After some discussion between @jason-capsule42 & @braven112 The proposed ideas for naming these three levels of tokens would be as follows: Level 1: Brand Tokens We feel that this will help address clarity when discussing these tokens to those who aren't as fully immersed in Auro Component development. More thought will need to go into how we want to organize handling Component Tokens (Level 3), so that we can also provide guidance to implementing teams. |
Beta Was this translation helpful? Give feedback.
-
The problem
Auro design tokens have always been a base component of the Auro ecosystem. The working theory has always been that theme support can be achieved by creating an alternate set of design tokens to be injected into the UI.
The problem as this discussion is concerned is that not all values within a component UI have been tokenized and the values are hard-coded into the element's CSS. This limits the volume of things that can be updated via a new token-based theme and forces the consumer to perform CSS changes if not extend the class of the element to create a custom version.
The recommendation
The recommendation here is for the Auro Design Tokens project to evolve with new and exciting thinking. By adopting concepts like Component-Specific Design Tokens, Auro can greatly expand the scope of theme support allowing teams to easily evolve their UIs based on business and product needs.
The expectation
The expectation is that over the next few sprints, the Auro team, working with design leadership, is expanding the scope of Auro Design Tokens to include many more tokens as well additional levels of element scope.
Here is an example story for updating auro-button.
As elements are updated, releases will be announced.
Beta Was this translation helpful? Give feedback.
All reactions