Override variables

Share an idea
1

I would like the ability to override variables defined in the team library on the file side that uses them.

My company has a primitive UI component library like Material Design and Bootstrap, and multiple products with different theme colors. That seems to be Microsoft Office 365.

It is not practical to support all sub-brand colors in a library component. It would be very useful if the library user could override variables.

It would work like the following code in CSS.

/* component-library.css */
:root {
  --color-primary: red;
}

/* ./index.css */
:root {
  --color-primary: blue; // override
}
2

This. If your local variables uses the same name/structure as the team library, check to override. Bam!

This is just like custom css, hitting a couple of classes to change the theme.

1 Like
3

I would expect a component or component variant to be able to override the variables locally as well, as we can in CSS.

:root {
  ...
  --color-buttonBackground: #333;
  ...
}

.button {
  background-color: var(--color-buttonBackground);
  ...
}

.button--disabled {
  --color-buttonBackground: #777;
}
4

Can you not achieve this by using a specific mode in the file that consumes the library, by having a variable with the same name in a mode that doesn’t exist in the original library? Then use the mode on the frame to override the variables.

5

I also share the same situation as OP, our Design System distribute a set of variables to all consuming products. Some of them needs to easily switch to customers themes, 1 customer = 1 mode. But it’s not relevant for all products to share all these modes.

In my opinion you should be able to add local modes to existing variables imported from external libraries. Just like you browse into collections, you might be able to see “imported collections” and add new modes the same way you would in the original library. The only difference would be that you wouldn’t be able to modify, remove or add the variables brought by the original library, only create new modes and their properties. The rest can be done in local collections.

1 Like