From 91bedfc491b7fcd200e644c5c7f24d3601c68871 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Thu, 19 May 2022 15:21:37 +0200 Subject: [PATCH 1/5] docs(react-components): Add theming docs --- .../public/brand-ramp-example.png | Bin 0 -> 52734 bytes .../Concepts/StylingComponents.stories.mdx | 2 + .../src/Concepts/Theming.stories.mdx | 140 ++++++++++++++++++ 3 files changed, 142 insertions(+) create mode 100644 apps/public-docsite-v9/public/brand-ramp-example.png create mode 100644 apps/public-docsite-v9/src/Concepts/Theming.stories.mdx diff --git a/apps/public-docsite-v9/public/brand-ramp-example.png b/apps/public-docsite-v9/public/brand-ramp-example.png new file mode 100644 index 0000000000000000000000000000000000000000..b9520ec6eb57c0b5b59318649f1fb28cfb1e483c GIT binary patch literal 52734 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 NMnX}%R@6B7e*mD~$6^2g literal 0 HcmV?d00001 diff --git a/apps/public-docsite-v9/src/Concepts/StylingComponents.stories.mdx b/apps/public-docsite-v9/src/Concepts/StylingComponents.stories.mdx index ef142f144733d..33fa7b1595769 100644 --- a/apps/public-docsite-v9/src/Concepts/StylingComponents.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/StylingComponents.stories.mdx @@ -105,6 +105,8 @@ const useStyles = makeStyles({ Those tokens are resolved to CSS variable usages. The `FluentProvider` component is responsible for setting the CSS variables in DOM and changing them when the theme changes. When the theme is switched, only the variables are changed, all styles remain the same. +For more details on, see [Theming](?path=/docs/concepts-developer-theming--page). + ### Incorrect usages This section shows and describes anti-patterns which should never be used. diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx new file mode 100644 index 0000000000000..7edf45f1c09eb --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx @@ -0,0 +1,140 @@ +import { Meta, Source } from '@storybook/addon-docs'; + + + +# Theming + +Fluent UI Theme is represented by a set of tokens. Each token resolves to a single value which can be assigned to a CSS property. + +You can browse all the available tokens in **Theme** section of the docs. + +## How theme is applied + +No matter what theme is used, the component styles are always the same. The only way to change the component styling is through theme tokens which can be used in style values. + +Those tokens are resolved to CSS variable usages. The `FluentProvider` component is responsible for setting the CSS variables in DOM and changing them when the theme changes. When the theme is switched, only the variables are changed, all styles remain the same. + +Place a `` at the root of your app and pass theme as a prop. The provider will render a `div` and will set all tokens as CSS variables on that element. + +```jsx +import { FluentProvider, teamsLightTheme } from '@fluentui/react-components'; + +export const AppRoot = ({children}) => ( + + {children} + , +); +``` + +Import `tokens` to style a component using `makeStyles` + +```jsx +import { tokens } from '@fluentui/react-theme'; + +const useStyles = makeStyles({ + root: { display: 'flex' }, + rootPrimary: { color: tokens.colorNeutralForeground3 }, +}); + +export Component = props => { + const classes = useStyles(); + + return
; +} +``` + +For more details, see [Styling components](?path=/docs/concepts-developer-styling-components--page). + +### Do not use CSS variables directly + +**⚠ Never use theme CSS variables directly!** The CSS variables implementation of the theme is internal to the library. We might eventually decide to change the variable names, hash them or even use direct values instead of some variables. Always use the `tokens` to access the theme. + +## Available themes + +Fluent UI currently exports following themes: + +- Web Light (`webLightTheme`) +- Web Dark (`webDarkTheme`) +- Web High Contrast (`webHighContrastTheme`) +- Teams Light (`teamsLightTheme`) +- Teams Dark (`teamsDarkTheme`) +- Teams High Contrast (`teamsHighContrastTheme`) + +### High contrast themes + +⚠ Do not use High Contrast themes! All Fluent UI components support Windows High Contrast mode automatically regardless the used theme. +Using Windows high contrast mode is recommended to all customers that are using Fluent UI. + +Hardcoded High Contrast themes are considered legacy, to be used only in applications which explicitly support those. + +## Customizing the theme + +There are multiple ways how an application can customize a theme. + +### Custom Brand ramp + +Brand ramp is a color ramp going from dark to light colors: + +Example of a brand ramp + +A theme is a function of brand ramp. To use a theme with a custom brand ramp, instead of importing the pre-created theme, you can use theme factory functions. + +The following factory functions are available: + +- `createLightTheme()` +- `createDarkTheme()` +- `createTeamsDarkTheme()` +- `createHighContrastTheme()` + +```tsx +import { BrandVariants, createLightTheme, createDarkTheme } from '@fluentui/react-components'; + +const customBrandRamp: BrandVariants = { + 10: '#008', + //... + 160: '#88F', +}; + +export const customLightTheme = createLightTheme(customBrandRamp); +export const customDarkTheme = createDarkTheme(customBrandRamp); +``` + +### Overriding existing tokens + +If the existing tokens do not fulfill your needs, you should talk to your designer instead of overriding tokens. + +Theme is a flat object containing [token name; CSS value] pairs. You can copy the object and overwrite any tokens you wish. + +```tsx +import { webLightTheme, Theme } from '@fluentui/react-components'; + +export const customLightTheme: Theme = { + ...webLightTheme, + colorNeutralForeground1: '#555', // overriden token +}; +``` + +### Extending theme with new tokens + +Similarly to overriding existing tokens, you can add custom tokens as well. + +⚠ Components which use custom tokens cannot be shared among applications. Keep in mind that once a component which uses custom tokens will be shared among applications, all the applications must also add the custom tokens. Instead of adding custom tokens inside potentially reusable components, you should talk to design. + +```tsx +import { webLightTheme, Theme } from '@fluentui/react-components'; + +export const customLightTheme: Theme & { customSpacingVerticalHuge: string } = { + ...webLightTheme, + customSpacingVerticalHuge: '128px', +}; +``` + +To use the tokens in styles, one is supposed to import `tokens`. Obviously that object would not contain the custom tokens. For that reason you can use `themeToTokensObject()` which will create the tokens object with the custom tokens. + +⚠ Keep in mind that the object generated by the `themeToTokensObject()` will contain all the tokens and will not be tree-shakeable. + +```tsx +import { themeToTokensObject } from '@fluentui/react-components'; + +export const customTokens = themeToTokensObject(customLightTheme); +``` From a1fc10a819a6787c272658b15bb893a2ff211c2e Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Fri, 20 May 2022 08:57:35 +0200 Subject: [PATCH 2/5] Apply suggestions from code review Co-authored-by: ling1726 --- .../src/Concepts/Theming.stories.mdx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx index 7edf45f1c09eb..78ee3286c2daf 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx @@ -4,7 +4,7 @@ import { Meta, Source } from '@storybook/addon-docs'; # Theming -Fluent UI Theme is represented by a set of tokens. Each token resolves to a single value which can be assigned to a CSS property. +The Fluent UI Theme is represented by a set of tokens. Each token resolves to a single value which can be assigned to a CSS property. You can browse all the available tokens in **Theme** section of the docs. @@ -12,9 +12,9 @@ You can browse all the available tokens in **Theme** section of the docs. No matter what theme is used, the component styles are always the same. The only way to change the component styling is through theme tokens which can be used in style values. -Those tokens are resolved to CSS variable usages. The `FluentProvider` component is responsible for setting the CSS variables in DOM and changing them when the theme changes. When the theme is switched, only the variables are changed, all styles remain the same. +Those tokens are resolved to CSS variables. The `FluentProvider` component is responsible for setting the values of the CSS variables in DOM and changing them when the theme changes. When the theme is switched, only the variables are changed, all styles remain the same. -Place a `` at the root of your app and pass theme as a prop. The provider will render a `div` and will set all tokens as CSS variables on that element. +Place a `` at the root of your app and pass a theme to the `theme` prop. The provider will render a `div` and set all tokens as CSS variables on that element. ```jsx import { FluentProvider, teamsLightTheme } from '@fluentui/react-components'; @@ -62,22 +62,22 @@ Fluent UI currently exports following themes: ### High contrast themes -⚠ Do not use High Contrast themes! All Fluent UI components support Windows High Contrast mode automatically regardless the used theme. -Using Windows high contrast mode is recommended to all customers that are using Fluent UI. +⚠ Do not use High Contrast themes! All Fluent UI components support Windows High Contrast mode automatically regardless of the active theme. +Windows high contrast mode is the recommended high contrast platform for all customers using Fluent UI. Hardcoded High Contrast themes are considered legacy, to be used only in applications which explicitly support those. ## Customizing the theme -There are multiple ways how an application can customize a theme. +Applications can customize a theme in multiple ways. ### Custom Brand ramp -Brand ramp is a color ramp going from dark to light colors: +The brand ramp is a color ramp going from dark to light colors: Example of a brand ramp -A theme is a function of brand ramp. To use a theme with a custom brand ramp, instead of importing the pre-created theme, you can use theme factory functions. +A theme is derived from a brand ramp. To use a theme with a custom brand ramp, instead of importing a predefined theme, you can use theme factory functions. The following factory functions are available: @@ -101,9 +101,9 @@ export const customDarkTheme = createDarkTheme(customBrandRamp); ### Overriding existing tokens -If the existing tokens do not fulfill your needs, you should talk to your designer instead of overriding tokens. +⚠️ If the existing tokens do not fulfill your needs, you should talk to your designer instead of overriding tokens. -Theme is a flat object containing [token name; CSS value] pairs. You can copy the object and overwrite any tokens you wish. +A theme is a flat object containing [token name; CSS value] pairs. You can copy the object and overwrite any tokens you wish. ```tsx import { webLightTheme, Theme } from '@fluentui/react-components'; @@ -118,7 +118,7 @@ export const customLightTheme: Theme = { Similarly to overriding existing tokens, you can add custom tokens as well. -⚠ Components which use custom tokens cannot be shared among applications. Keep in mind that once a component which uses custom tokens will be shared among applications, all the applications must also add the custom tokens. Instead of adding custom tokens inside potentially reusable components, you should talk to design. +⚠ Components which use custom tokens cannot be shared between applications. Keep in mind that any application which uses a component with custom tokens must also add the custom tokens to its own themes. Instead of adding custom tokens inside potentially reusable components, you should talk to design. ```tsx import { webLightTheme, Theme } from '@fluentui/react-components'; @@ -129,7 +129,7 @@ export const customLightTheme: Theme & { customSpacingVerticalHuge: string } = { }; ``` -To use the tokens in styles, one is supposed to import `tokens`. Obviously that object would not contain the custom tokens. For that reason you can use `themeToTokensObject()` which will create the tokens object with the custom tokens. +To use the tokens in styles, one is supposed to import `tokens`. Obviously that object would not contain any custom tokens. For that reason you can use `themeToTokensObject()` utility which will create the tokens object with the custom tokens. ⚠ Keep in mind that the object generated by the `themeToTokensObject()` will contain all the tokens and will not be tree-shakeable. From 41727aa9a4bfb3518c3e28f477303f531818dcd2 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 6 Jun 2022 13:59:02 +0200 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Oleksandr Fediashov --- apps/public-docsite-v9/src/Concepts/Theming.stories.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx index 78ee3286c2daf..374fc9106b845 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx @@ -14,7 +14,7 @@ No matter what theme is used, the component styles are always the same. The only Those tokens are resolved to CSS variables. The `FluentProvider` component is responsible for setting the values of the CSS variables in DOM and changing them when the theme changes. When the theme is switched, only the variables are changed, all styles remain the same. -Place a `` at the root of your app and pass a theme to the `theme` prop. The provider will render a `div` and set all tokens as CSS variables on that element. +Place a `` at the root of your app and pass a theme to the `theme` prop. The provider will render a `div` and set all tokens as CSS variables on that element. The provider also propagates CCS variables to React portals created with [Portal component](?path=/docs/components-portal--default). ```jsx import { FluentProvider, teamsLightTheme } from '@fluentui/react-components'; @@ -55,7 +55,6 @@ Fluent UI currently exports following themes: - Web Light (`webLightTheme`) - Web Dark (`webDarkTheme`) -- Web High Contrast (`webHighContrastTheme`) - Teams Light (`teamsLightTheme`) - Teams Dark (`teamsDarkTheme`) - Teams High Contrast (`teamsHighContrastTheme`) @@ -103,7 +102,7 @@ export const customDarkTheme = createDarkTheme(customBrandRamp); ⚠️ If the existing tokens do not fulfill your needs, you should talk to your designer instead of overriding tokens. -A theme is a flat object containing [token name; CSS value] pairs. You can copy the object and overwrite any tokens you wish. +A theme is a flat object containing `{ [token name]: CSS value }` pairs. You can copy the object and overwrite any tokens you wish. ```tsx import { webLightTheme, Theme } from '@fluentui/react-components'; From 588a0b4cfb495a288474842ca5ae91727965deba Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 6 Jun 2022 14:28:06 +0200 Subject: [PATCH 4/5] address PR comments --- .../src/Concepts/Theming.stories.mdx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx index 374fc9106b845..1e1cd20f0c30b 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx @@ -1,4 +1,5 @@ import { Meta, Source } from '@storybook/addon-docs'; +import { ColorRamp } from './ColorRamp.stories'; @@ -6,7 +7,15 @@ import { Meta, Source } from '@storybook/addon-docs'; The Fluent UI Theme is represented by a set of tokens. Each token resolves to a single value which can be assigned to a CSS property. -You can browse all the available tokens in **Theme** section of the docs. +```tsx +const exampleTheme = { + borderRadiusSmall: '2px', + //... + colorNeutralForeground2: '#424242', +}; +``` + +You can browse all the available tokens in **[Theme](/docs/theme-colors--colors)** section of the docs. ## How theme is applied From 69f4a531797b064afed6db8aad16826c7424ab7c Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 6 Jun 2022 14:30:56 +0200 Subject: [PATCH 5/5] remove broken import --- apps/public-docsite-v9/src/Concepts/Theming.stories.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx index 1e1cd20f0c30b..bb17e71cac180 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.stories.mdx @@ -1,5 +1,4 @@ import { Meta, Source } from '@storybook/addon-docs'; -import { ColorRamp } from './ColorRamp.stories';