Nested Styles: Color Style and Text Style variants

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.

1 Like

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

I wish there was a possibility to nest text styles so that we can have one parent text style and add children/variants to that style. If I change the parent text style all the children will change automatically.

For example, let’s say I create a text style for the body copy and set it to Regular, 16px in size and 24px line height. If I want a text style for italics or bold, now I have to create two separate text styles with the same settings as above and change the font weight or style.

If I later on decide to change the body style from 16 to 18px I have to change all three styles. It’s cumbersome.

With nested styles I would only need to change the font size for the parent style.


Thanks for the feedback!

We’ll pass this onto our team for consideration.