Color Style and Text Style variants (aka Nested Styles)

Hello Awesome community,
It would be very helpful for Design System builder community support if we could create styles based on other styles, aka style variants to support use cases like these 3:

  1. Type Style A needs to be used with an underline to emphasize that the text is a hyperlink. There is no way to amend the style A without unlinking it at the moment. So either I create an extra style or I have elements in my design system that are not ruled by Type Styles; in both cases this creates extra work and potential for errors when updating the typography for specific projects based on the Design system file.

  2. Color Style B is used as a Primary accent color @100% opacity but also as a SurfaceTints and State Brushes with varying opacity values. This requires a design system file to include individual color styles for each case (aka Brushes based off of Primary) as parent containers currently set opacity for all content unless said opacity is par of a Color Style. This is extremely time consuming to update (without using Tokens) and error prone.

  3. Color Style A and B are used in a gradient At the moment the only way to create a gradient is to use HEX values to define the different points in the desired gradient. This does not self update when you change color themes so the user has to go in and change them manually it also means that delivering a gradient may end up meaning creating a component for it (not quite intuitive to use).

Supporting these features would in turn help support the upcoming marketplace by making Design Systems easier to use and maintain.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.