Search code examples
carbon-design-system

Customizing components in carbon UI


Im trying to understand how I can customise components in carbon UI. As example I took a button. In documentation we can see that button styles depends on tokens (https://carbondesignsystem.com/components/button/style/) and there is no mention that some tokens are different than others but for sure they are.

When I want to customise text color I can do @use '@carbon/react' with ($text-on-color: red); and everything works fine but when you try to do the same with button color @use '@carbon/react' with ($button-primary: red) it throw sass errors. Its just one example, there are more like that some tokens seems to be settable some not and there is nothing in docs if it is intentional behaviour and if so, why.


Solution

  • So some tokens are theme tokens other are component tokens $text-on-color is theme token so you customise it by

    @use '@carbon/react' with ($text-on-color: red);

    While $button-primary is button specific and now :

    @use '@carbon/react/scss/components/button/tokens' with($button-primary: red);