Understanding build system and design token generation and usage

[pranavdhamanage-work]

I have been trying to understand the build system of cloudscape design system and how actually the design tokens are generated.
I have seen the below code in the codebase but not able to understand exactly how the process of using the tokens in scss files is working.

@forward 'awsui:tokens';

After building, in the lib folder I do see design-tokens folder which has scoped variables in scss files. But how are they being used in the codebase 🤔 I am not able to understand that.

$color-charts-purple-400: var(--color-charts-purple-400-ow8655, #9469d6);
                                                          ^ scoped variable

Is there any documentation that I can refer to for understanding this? It would be a great help

[avinashbot]

Hi!

The internal build tooling isn't documented anywhere; you don't have to understand the build process to use Cloudscape. That said, I do have some starting points to give you a good general understanding of how it works. Most of the styling code is present in the @cloudscape-design/theming-core package. This package is responsible for generating design tokens, creating custom properties with hashed suffixes, and compiling SCSS files with the generated files provided as awsui:[...] stylesheets.

[just-boris]

Also, obligatory reminder that any implementation details you found are not promised to be stable.

[pranavdhamanage-work]

Thanks 👍🏻 will check it out

[pranavdhamanage-work]

The system is actually very good with less usage of media queries and focus on component fluidity with the help of resize observers. I also found out that there are multiple breakpoint definitions in Breakpoints.ts and breakpoints.scss. Although from what I understood the ones defined in Breakpoints.ts are used for all the components to make them fluid and the ones in breakpoints.scss( i didn't really get them why they were there ). That's the reason I want to deeply understand the codebase. Thanks 👍🏻