Sass architecture

Summary

I’d like to discuss updating the Sass files to be more flexible for extending and white labelling Carbon components. Issues we are currently running into:

• More component specific variables to be available to extend Carbon.
  • e.g. We wanted to create a new scenario for button but the icon size was hard-coded so we had to copy and paste the value. If carbon were to update this we’d have to manually update our code as well. I’d like to see variables like $carbon-button-icon-size so that I can reference a variable in my Sass files.
• All colors for a component are defined in mixins
  • we need to change colors on a component by component basis, not just global UI tokens to allow for white labelling. Right now most of the colors for a button are defined in a mixin but the disabled, hover, focus states are not always in these mixins. I’d like all colors to be defined in a mixin for a given component/variant of a component so that I can easily define new colors for a component.

[aagonzales]

Another concept we’re working on is theme zones. So you can target different areas within the page page that calls a different theme (still just a concept). Kind of sounds like what your second comment was about.

[asudoh]

Cool, please work with @mattrosno so he can connect you and our designers and get a common understanding of what our designers/developers think of the new theming architecture and outline the system design based on it. They as well as @mattrosno are busy with v10 work, and I suspect the substantial collaboration comes after. I understand you feel blocked on this, but I’d like careful work on creating the system design, which may be time-consuming.