Link Compound's TypographyTokens to ElementTheme. (#700)

* Link Compound's `TypographyTokens` to `ElementTheme`.

Also add some docs about when we should use each set of tokens.

* Renamed `LocalColors` to `LocalLegacyColors`.

Made both `LocalLegacyColors` and `LocalCompoundColors` internal. This means it will need to always be used through `ElementTheme.`

Also, removed any usages of `LocalColors.current` accross the project, they're now used through `ElementTheme.legacyColors`.
This commit is contained in:
Jorge Martin Espinosa 2023-06-28 10:53:20 +02:00 committed by GitHub
parent e472975069
commit 683b0b3594
21 changed files with 78 additions and 53 deletions

View file

@ -6,6 +6,14 @@ This module contains the theme tokens for the application, including those auto-
The module contains public tokens and color schemes that are later used in `MaterialTheme` and added to `ElementTheme` for use in the application.
All tokens can be accessed through the `ElementTheme` object, which contains the following properties:
* `ElementTheme.legacyColors`: contains legacy colors and custom colors not present in either Material or Compound. Usage of these colors should be avoided, and they're usually prefixed in Figma with the `Zzz/` prefix or have no name at all.
* `ElementTheme.materialColors`: contains all Material color tokens. In Figma, they're prefixed with `M3/`. It's an alias to `MaterialTheme.colorScheme`.
* `ElementTheme.colors`: contains all Compound semantic color tokens. In Figma, they're prefixed with either `Light/` or `Dark/`.
* `ElementTheme.materialTypography`: contains the Material `Typography` values. In Figma, they're prefixed with `M3/`. It's an alias to `MaterialTheme.typography`.
* `ElementTheme.typography`: contains the Compound `TypographyTokens` values. In Figma, they're prefixed with `Android/font/`.
## Adding new tokens
All new tokens **should** come from Compound and added to the `compound.generated` package. To map the literal tokens to the semantic ones, you'll have to update both `compoundColorsLight` and `compoundColorsDark` in `CompoundColors.kt`.