carbon-web-components package styling

[DoofisS]

Summary

Hello,

I am currently working on the carbon-design-system/carbon-for-ibm-dotcom project, specifically focusing on the packages/carbon-web-components directory. In the process of building Storybook and the dist folder, I've encountered a styling challenge.

I'm wondering if there is a way to style components before the build, outside of the components folder. For example, my goal is to change the color of all buttons to green. Currently, I achieve this by modifying styles within src/components/button/button.scss, and it works for both the dist folder and Storybook after the build.

I've explored the documentation and attempted to follow the guidelines outlined at https://carbondesignsystem.com/guidelines/themes/overview/.
Additionally, I've experimented with carbon-for-ibm-dotcom\packages\carbon-web-components\src\globals\scss\themes.scss file with trying to change or add some styles so it will take changes after build but no success, also tried inside carbon-for-ibm-dotcom\packages\styles folder

Could someone provide suggestions or advice on how to style components externally, perhaps in a single file like src/globals/scss/custom.scss? Mb there a recommended approach for creating a new theme file or something like this and incorporating it into the build process?

Thank you for any assistance and guidance.

Relevant information

No response

Name and organization

DoofisS

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[DoofisS]

Hello,

I have another question connected to this; maybe this will also help.

I'm in the carbon-for-ibm-dotcom/packages/carbon-web-components directory. If I run yarn build or yarn build-storybook, I will get the result in the dist or storybook-static folder.

I want the ui-shell header background to be purple, and the text color to be white. So when I import ui-shell from the built dist folder, it will have the desired colors.

I could go into node_modules -> @carbon -> styles and so on until I find the _themes.scss file and manually rewrite the needed token. However, is it possible to achieve the same result without touching the node_modules? Maybe there is a way to create a new theme, update the needed tokens, and then simply include it somewhere? Or perhaps there is an even easier way to rewrite the token?

For an easier example, the $button-primary token has the color #0f62fe for all the themes. But what if I want to change this color to green for the g100 theme? How can I do this? It would be great if there is a way to make such changes in the file carbon-for-ibm-dotcom/packages/carbon-web-components/src/globals/scss/themes.scss, and on any build, it would take those changes, and my button from the dist folder or in built storybook with the g100 theme used would be green.

I hope this makes the situation clearer or at least simpler to answer.