Skip to content

Commit a91094d

Browse files
miroslavstastnymiroslavstastny
authored
feat(react-theme): update color tokens (#22238)
* feat(react-theme): update color tokens * Change file * add missing typing
1 parent b49286c commit a91094d

9 files changed

Lines changed: 167 additions & 132 deletions

File tree

‎change/@fluentui-react-theme-f94ace9d-69fe-4530-8209-1f0a417164df.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "feat(react-theme): update color tokens",
4+
"packageName": "@fluentui/react-theme",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-theme/etc/react-theme.api.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,8 @@ export type ColorTokens = {
260260
colorNeutralBackgroundInvertedDisabled: string;
261261
colorNeutralStencil1: string;
262262
colorNeutralStencil2: string;
263+
colorBackgroundOverlay: string;
264+
colorScrollbarOverlay: string;
263265
colorBrandBackground: string;
264266
colorBrandBackgroundHover: string;
265267
colorBrandBackgroundPressed: string;

‎packages/react-theme/src/alias/dark.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { black, blackAlpha, grey, white, whiteAlpha, sharedColors } from '../global/colors';
1+
import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha, sharedColors } from '../global/colors';
22
import type { BrandVariants, GlobalSharedColors, ColorTokens, ColorPaletteTokens } from '../types';
33

44
export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
@@ -75,8 +75,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
7575
colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
7676
colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18
7777
colorSubtleBackgroundSelected: grey[20], // #333333 Global.Color.Grey.20
78-
colorSubtleBackgroundLightAlphaHover: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10
79-
colorSubtleBackgroundLightAlphaPressed: whiteAlpha[5], // rgba(255, 255, 255, 0.05) Global.Color.WhiteAlpha.5
78+
colorSubtleBackgroundLightAlphaHover: grey14Alpha[80], // rgba(36, 36, 36, 0.8) Global.Color.Grey14Alpha.80
79+
colorSubtleBackgroundLightAlphaPressed: grey14Alpha[50], // rgba(36, 36, 36, 0.5) Global.Color.Grey14Alpha.50
8080
colorSubtleBackgroundLightAlphaSelected: 'transparent', // transparent undefined
8181
colorSubtleBackgroundInverted: 'transparent', // transparent undefined
8282
colorSubtleBackgroundInvertedHover: blackAlpha[10], // rgba(0, 0, 0, 0.1) Global.Color.BlackAlpha.10
@@ -90,6 +90,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
9090
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10
9191
colorNeutralStencil1: grey[34], // #575757 Global.Color.Grey.34
9292
colorNeutralStencil2: grey[20], // #333333 Global.Color.Grey.20
93+
colorBackgroundOverlay: blackAlpha[50], // rgba(0, 0, 0, 0.5) Global.Color.BlackAlpha.50
94+
colorScrollbarOverlay: whiteAlpha[60], // rgba(255, 255, 255, 0.6) Global.Color.WhiteAlpha.60
9395
colorBrandBackground: brand[70], // #106ebe Global.Color.Brand.70
9496
colorBrandBackgroundHover: brand[80], // #0078d4 Global.Color.Brand.80
9597
colorBrandBackgroundPressed: brand[40], // #004578 Global.Color.Brand.40

‎packages/react-theme/src/alias/highContrast.ts‎

Lines changed: 128 additions & 125 deletions
Large diffs are not rendered by default.

‎packages/react-theme/src/alias/light.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
7575
colorSubtleBackgroundHover: grey[96], // #f5f5f5 Global.Color.Grey.96
7676
colorSubtleBackgroundPressed: grey[88], // #e0e0e0 Global.Color.Grey.88
7777
colorSubtleBackgroundSelected: grey[92], // #ebebeb Global.Color.Grey.92
78-
colorSubtleBackgroundLightAlphaHover: whiteAlpha[80], // rgba(255, 255, 255, 0.8) Global.Color.WhiteAlpha.80
78+
colorSubtleBackgroundLightAlphaHover: whiteAlpha[70], // rgba(255, 255, 255, 0.7) Global.Color.WhiteAlpha.70
7979
colorSubtleBackgroundLightAlphaPressed: whiteAlpha[50], // rgba(255, 255, 255, 0.5) Global.Color.WhiteAlpha.50
8080
colorSubtleBackgroundLightAlphaSelected: 'transparent', // transparent undefined
8181
colorSubtleBackgroundInverted: 'transparent', // transparent undefined
@@ -90,6 +90,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
9090
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10
9191
colorNeutralStencil1: grey[90], // #e6e6e6 Global.Color.Grey.90
9292
colorNeutralStencil2: grey[98], // #fafafa Global.Color.Grey.98
93+
colorBackgroundOverlay: blackAlpha[10], // rgba(0, 0, 0, 0.1) Global.Color.BlackAlpha.10
94+
colorScrollbarOverlay: blackAlpha[50], // rgba(0, 0, 0, 0.5) Global.Color.BlackAlpha.50
9395
colorBrandBackground: brand[80], // #0078d4 Global.Color.Brand.80
9496
colorBrandBackgroundHover: brand[70], // #106ebe Global.Color.Brand.70
9597
colorBrandBackgroundPressed: brand[40], // #004578 Global.Color.Brand.40

‎packages/react-theme/src/alias/teamsDark.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { black, blackAlpha, grey, white, whiteAlpha, sharedColors } from '../global/colors';
1+
import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha, sharedColors } from '../global/colors';
22
import type { BrandVariants, GlobalSharedColors, ColorTokens, ColorPaletteTokens } from '../types';
33

44
export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
@@ -75,8 +75,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
7575
colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
7676
colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18
7777
colorSubtleBackgroundSelected: grey[20], // #333333 Global.Color.Grey.20
78-
colorSubtleBackgroundLightAlphaHover: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10
79-
colorSubtleBackgroundLightAlphaPressed: whiteAlpha[5], // rgba(255, 255, 255, 0.05) Global.Color.WhiteAlpha.5
78+
colorSubtleBackgroundLightAlphaHover: grey14Alpha[80], // rgba(36, 36, 36, 0.8) Global.Color.Grey14Alpha.80
79+
colorSubtleBackgroundLightAlphaPressed: grey14Alpha[50], // rgba(36, 36, 36, 0.5) Global.Color.Grey14Alpha.50
8080
colorSubtleBackgroundLightAlphaSelected: 'transparent', // transparent undefined
8181
colorSubtleBackgroundInverted: 'transparent', // transparent undefined
8282
colorSubtleBackgroundInvertedHover: blackAlpha[10], // rgba(0, 0, 0, 0.1) Global.Color.BlackAlpha.10
@@ -90,6 +90,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
9090
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10
9191
colorNeutralStencil1: grey[34], // #575757 Global.Color.Grey.34
9292
colorNeutralStencil2: grey[20], // #333333 Global.Color.Grey.20
93+
colorBackgroundOverlay: blackAlpha[50], // rgba(0, 0, 0, 0.5) Global.Color.BlackAlpha.50
94+
colorScrollbarOverlay: whiteAlpha[60], // rgba(255, 255, 255, 0.6) Global.Color.WhiteAlpha.60
9395
colorBrandBackground: brand[70], // #106ebe Global.Color.Brand.70
9496
colorBrandBackgroundHover: brand[80], // #0078d4 Global.Color.Brand.80
9597
colorBrandBackgroundPressed: brand[40], // #004578 Global.Color.Brand.40

‎packages/react-theme/src/global/colors.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,19 @@ export const blackAlpha: Record<AlphaColors, string> = {
8080
'90': 'rgba(0, 0, 0, 0.9)',
8181
};
8282

83+
export const grey14Alpha: Record<AlphaColors, string> = {
84+
'5': 'rgba(36, 36, 36, 0.05)',
85+
'10': 'rgba(36, 36, 36, 0.1)',
86+
'20': 'rgba(36, 36, 36, 0.2)',
87+
'30': 'rgba(36, 36, 36, 0.3)',
88+
'40': 'rgba(36, 36, 36, 0.4)',
89+
'50': 'rgba(36, 36, 36, 0.5)',
90+
'60': 'rgba(36, 36, 36, 0.6)',
91+
'70': 'rgba(36, 36, 36, 0.7)',
92+
'80': 'rgba(36, 36, 36, 0.8)',
93+
'90': 'rgba(36, 36, 36, 0.9)',
94+
};
95+
8396
export const white = '#ffffff';
8497

8598
export const black = '#000000';

‎packages/react-theme/src/tokens.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ export const tokens: Record<keyof Theme, string> = {
9090
colorNeutralBackgroundInvertedDisabled: 'var(--colorNeutralBackgroundInvertedDisabled)',
9191
colorNeutralStencil1: 'var(--colorNeutralStencil1)',
9292
colorNeutralStencil2: 'var(--colorNeutralStencil2)',
93+
colorBackgroundOverlay: 'var(--colorBackgroundOverlay)',
94+
colorScrollbarOverlay: 'var(--colorScrollbarOverlay)',
9395
colorBrandBackground: 'var(--colorBrandBackground)',
9496
colorBrandBackgroundHover: 'var(--colorBrandBackgroundHover)',
9597
colorBrandBackgroundPressed: 'var(--colorBrandBackgroundPressed)',

‎packages/react-theme/src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@ export type ColorTokens = {
9090
colorNeutralBackgroundInvertedDisabled: string;
9191
colorNeutralStencil1: string;
9292
colorNeutralStencil2: string;
93+
colorBackgroundOverlay: string;
94+
colorScrollbarOverlay: string;
9395
colorBrandBackground: string;
9496
colorBrandBackgroundHover: string;
9597
colorBrandBackgroundPressed: string;

0 commit comments

Comments
 (0)