Skip to main content

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.


/* Library's variable */

:root {

  --color-primary: red;

}



/* Local variable */

:root {

  --color-primary: blue; // override

}

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.

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;

}

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.

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.

@Toph.FR Is your suggestion/solution already possible? Or is it a proposition?

It seems to be exactly what I need/want/expect!

Using modes for this is not a solution. +1 to what @Johan_Netzler said “If your local variables uses the same name/structure as the team library, check to override. Bam!”

Need this! If anyone has any current workarounds or plugins please share

Yes - desperately need this feature. We’re rolling out a local government Design System; but each department/agency/somewhat affiliated branch has their own colours. Enterprise licences are definitely not on the table for all the teams out there… Modes aren’t a solution. The central team can’t set up endless modes for all possible sites out there.

Soo… why no local variable override?

Also why is there no visiblity in the Variables window for an file with linked libraries? Can we not show the ‘linked’ modes and easily create / clone it as local Variables to override? C’mon!!

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

Terms & ConditionsCookie settings