[tokens]: set up modes semantic layer

[gfellerph]

Description

Set up a _modes.scss file which uses the semantic tokens from the modes layer. This file is intended to be @use'd by other output files, so should not be compiled on it's own and should not contain any other styles than the tokens.

Notes:
Don't wrap the light mode styles in a query, they are the default styles.

Selectors for light mode:

• [data-color-mode="light"]

Selectors for dark mode:

• [data-color-mode="dark"]

Tasks

💻 Tasks

Preview Give feedback

1. feat(tokens): implement exception for typography multi tokens in build script #3285
   v8 v9 +2
2. feat(tokens): add Components/Interactives and Components/Notifications tokens #3262
   🚂 PR train +1
3. Create placeholders for light and dark mode CSS variables
4. Create the _modes.scss file