Link to default theme is broken / default global styles?

[hems]

Description

Hello, hope you're all doing well.

Apologies if i'm missing something or this has been discussed already.

please the issue / comments below:

The official docs page: https://chakra-ui.com/docs/styled-system/theme currently has a broken link to a "default theme", it points to: https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme which i believe is the old theme path.

I found the "source code" on the main branch but when looking at styles.ts it's not clear how the default styles work: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/styles.ts

For instance what does bg: "chakra-body-bg", mean? how does it know if it's dark or light mode, etcs.. ?

How i'm supposed to know what chakra-body-bg actually means?

I believe somewhere it's translated to some "if dark theme then this color if light theme then this other color" but when/how?

I find the previous version of the code was a bit more self-explanatory, for instance i can see there are two colours being set for light and dark more: https://github.com/chakra-ui/chakra-ui/blob/78d9c30e6b9477080c75b2e601394a21ed93fcf2/packages/theme/src/styles.ts#L8

[nikolovlazar]

@hems now we're using Semantic Tokens to achieve the light/dark mode. The chakra-body-bg semantic token is defined here: https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/semantic-tokens.ts#L4.

[hems]

awesome, thanks for explaining.

would you mind explaining why the _ before light and dark?

[nikolovlazar]

@segunadebayo is there a story behind the underscore? 😅