element-x-android/libraries/theme/README.md

# Theme Module

This module contains the theme tokens for the application, including those auto-generated from [Compound](https://github.com/vector-im/compound-design-tokens) and its mappings.

## Usage

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.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.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`.
[Compound] Integrate compound tokens (#586) * Added tokens. * Apply color to MaterialTheme, also add typography. * Map colors to the right ones in the themes. * Create and improve previews of some components * More preview improvements * Add `tertiary` and `onTertiary` colors, remove some unused ones. * Fix usage of deleted color token * Fix bug in Switch previews * Create a separate `:libraries:theme` module to keep everything related to colors, typography and Compound in general. * Fix `DatePickerPreview` * Add missing Compound generated files by fixing their package name * Move `ElementTheme` to the `:libraries:theme` module, make some variables internal. --------- Co-authored-by: ElementBot <benoitm+elementbot@element.io> 1 year ago			`# Theme Module`

			`This module contains the theme tokens for the application, including those auto-generated from [Compound](https://github.com/vector-im/compound-design-tokens) and its mappings.`

			`## Usage`

			The module contains public tokens and color schemes that are later used in `MaterialTheme` and added to `ElementTheme` for use in the application.

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`. 1 year ago			All tokens can be accessed through the `ElementTheme` object, which contains the following properties:

			* `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.typography`: contains the Compound `TypographyTokens` values. In Figma, they're prefixed with `Android/font/`.

[Compound] Integrate compound tokens (#586) * Added tokens. * Apply color to MaterialTheme, also add typography. * Map colors to the right ones in the themes. * Create and improve previews of some components * More preview improvements * Add `tertiary` and `onTertiary` colors, remove some unused ones. * Fix usage of deleted color token * Fix bug in Switch previews * Create a separate `:libraries:theme` module to keep everything related to colors, typography and Compound in general. * Fix `DatePickerPreview` * Add missing Compound generated files by fixing their package name * Move `ElementTheme` to the `:libraries:theme` module, make some variables internal. --------- Co-authored-by: ElementBot <benoitm+elementbot@element.io> 1 year ago			`## 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`.