diff --git a/change/@fluentui-react-theme-2a665c75-048e-48df-a230-ff78408c7129.json b/change/@fluentui-react-theme-2a665c75-048e-48df-a230-ff78408c7129.json new file mode 100644 index 00000000000000..bab556debbafa3 --- /dev/null +++ b/change/@fluentui-react-theme-2a665c75-048e-48df-a230-ff78408c7129.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "docs: Update readme", + "packageName": "@fluentui/react-theme", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/react-components/react-theme/README.md b/packages/react-components/react-theme/README.md index f507d3a8c26923..934136af37be0b 100644 --- a/packages/react-components/react-theme/README.md +++ b/packages/react-components/react-theme/README.md @@ -1,5 +1,63 @@ # @fluentui/react-theme -**React Theme components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)** +**React Theme for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)** -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. +## Usage + +Import a theme and tokens: + +```jsx +import { webLightTheme, tokens } from '@fluentui/react-components'; +``` + +Pass the theme to the `FluentProvider`: + +```jsx + + + +``` + +Use the `tokens` in your styles: + +```jsx +const useStyles = makeStyles({ + root: { + color: tokens.colorNeutralForeground1, + }, +}); +``` + +### Using a custom brand ramp + +To use a theme based on a custom brand ramp, use the `createXXXTheme` function: + +```jsx +import { createWebLightTheme } from '@fluentui/react-components'; + +const customBrandRamp: BrandVariants = { + 10: `#2b2b40`, + // ... + 160: `#e8ebfa`, +}; + +const customTheme = createWebLightTheme(customBrandRamp); +``` + +## Contributing + +### Updating colors in the theme + +The color tokens are generated by token pipeline. Do not edit colors directly. Instead, update the token pipeline first and once the changes are merged there, run: + +```sh +yarn token-pipeline +``` + +### Adding new color tokens + +To add a new color token, besides updating the token pipeline, you also need to update corresponding typings and the `tokens` object in `src/tokens.ts`. + +### Updating other tokens + +To update any tokens not related to colors, update the values directly in this package.