Skip to content

fix(react-theme) update react theme colors mapping #24608

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
miroslavstastny merged 4 commits into from
Aug 31, 2022
Merged

fix(react-theme) update react theme colors mapping #24608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
deda22d
fix(react-theme): Update color tokens mapping
miroslavstastny Aug 31, 2022
8ddab6d
Change file
miroslavstastny Aug 31, 2022
07e403a
revert changes in light theme
miroslavstastny Aug 31, 2022
bab4c48
remove timestamps from comments
miroslavstastny Aug 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-theme-588897ea-213d-4956-b34a-8bd1a9e63d21.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Update color tokens mapping",
"packageName": "@fluentui/react-theme",
"email": "[email protected]",
"dependentChangeType": "patch"
}
13 changes: 8 additions & 5 deletions packages/react-components/react-theme/src/alias/darkColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/* !!! DO NOT EDIT !!! */
/* This file has been generated by the token pipeline */

import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors';
import type { BrandVariants, ColorTokens } from '../types';

Expand Down Expand Up @@ -37,12 +40,12 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100
colorBrandForeground2: brand[110], // #3aa0f3 Global.Color.Brand.110
colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
colorNeutralForegroundInverted: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedHover: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedPressed: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedSelected: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLinkHover: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLinkPressed: white, // #ffffff Global.Color.White
Expand Down Expand Up @@ -75,8 +78,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
colorNeutralBackground5Pressed: grey[2], // #050505 Global.Color.Grey.2
colorNeutralBackground5Selected: grey[6], // #0f0f0f Global.Color.Grey.6
colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20
colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24
colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White
colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24
colorSubtleBackground: 'transparent', // transparent undefined
colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18
Expand Down Expand Up @@ -128,9 +131,9 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
colorNeutralStrokeOnBrand2Selected: white, // #ffffff Global.Color.White
colorBrandStroke1: brand[100], // #2899f5 Global.Color.Brand.100
colorBrandStroke2: brand[50], // #004c87 Global.Color.Brand.50
colorCompoundBrandStroke: brand[90], // #1890f1 Global.Color.Brand.90
colorCompoundBrandStrokeHover: brand[100], // #2899f5 Global.Color.Brand.100
colorCompoundBrandStrokePressed: brand[80], // #0078d4 Global.Color.Brand.80
colorCompoundBrandStroke: brand[100], // #2899f5 Global.Color.Brand.100
colorCompoundBrandStrokeHover: brand[110], // #3aa0f3 Global.Color.Brand.110
colorCompoundBrandStrokePressed: brand[90], // #1890f1 Global.Color.Brand.90
colorNeutralStrokeDisabled: grey[26], // #424242 Global.Color.Grey.26
colorNeutralStrokeInvertedDisabled: whiteAlpha[40], // rgba(255, 255, 255, 0.4) Global.Color.WhiteAlpha.40
colorTransparentStroke: 'transparent', // transparent undefined
Expand Down
7 changes: 5 additions & 2 deletions packages/react-components/react-theme/src/alias/highContrastColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/* !!! DO NOT EDIT !!! */
/* This file has been generated by the token pipeline */

import {
blackAlpha,
hcButtonFace,
Expand Down Expand Up @@ -47,12 +50,12 @@ export const generateColorTokens = (): ColorTokens => ({
colorBrandForeground1: hcCanvasText, // CanvasText Global.Color.hcCanvasText
colorBrandForeground2: hcButtonText, // ButtonText Global.Color.hcButtonText
colorNeutralForeground1Static: hcCanvas, // Canvas Global.Color.hcCanvas
colorNeutralForegroundInvertedStatic: hcCanvasText, // CanvasText Global.Color.hcCanvasText
colorNeutralForegroundInverted: hcHighlightText, // HighlightText Global.Color.hcHighlightText
colorNeutralForegroundInvertedHover: hcHighlightText, // HighlightText Global.Color.hcHighlightText
colorNeutralForegroundInvertedPressed: hcHighlightText, // HighlightText Global.Color.hcHighlightText
colorNeutralForegroundInvertedSelected: hcHighlightText, // HighlightText Global.Color.hcHighlightText
colorNeutralForegroundOnBrand: hcButtonText, // ButtonText Global.Color.hcButtonText
colorNeutralForegroundInvertedStatic: hcCanvasText, // ButtonText Global.Color.hcCanvasText
colorNeutralForegroundInvertedLink: hcHyperlink, // LinkText Global.Color.hcHyperlink
colorNeutralForegroundInvertedLinkHover: hcHyperlink, // LinkText Global.Color.hcHyperlink
colorNeutralForegroundInvertedLinkPressed: hcHyperlink, // LinkText Global.Color.hcHyperlink
Expand Down Expand Up @@ -85,8 +88,8 @@ export const generateColorTokens = (): ColorTokens => ({
colorNeutralBackground5Pressed: hcHighlight, // Highlight Global.Color.hcHighlight
colorNeutralBackground5Selected: hcHighlight, // Highlight Global.Color.hcHighlight
colorNeutralBackground6: hcCanvas, // Canvas Global.Color.hcCanvas
colorNeutralBackgroundStatic: hcCanvas, // Canvas Global.Color.hcCanvas
colorNeutralBackgroundInverted: hcCanvas, // Canvas Global.Color.hcCanvas
colorNeutralBackgroundStatic: hcCanvas, // Canvas Global.Color.hcCanvas
colorSubtleBackground: 'transparent', // transparent undefined
colorSubtleBackgroundHover: hcHighlight, // Highlight Global.Color.hcHighlight
colorSubtleBackgroundPressed: hcHighlight, // Highlight Global.Color.hcHighlight
Expand Down
7 changes: 5 additions & 2 deletions packages/react-components/react-theme/src/alias/lightColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/* !!! DO NOT EDIT !!! */
/* This file has been generated by the token pipeline */

import { black, blackAlpha, grey, white, whiteAlpha } from '../global/colors';
import type { BrandVariants, ColorTokens } from '../types';

Expand Down Expand Up @@ -37,12 +40,12 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
colorBrandForeground1: brand[80], // #0078d4 Global.Color.Brand.80
colorBrandForeground2: brand[70], // #106ebe Global.Color.Brand.70
colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
colorNeutralForegroundInverted: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedHover: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedSelected: white, // #ffffff Global.Color.White
colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLinkHover: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLinkPressed: white, // #ffffff Global.Color.White
Expand Down Expand Up @@ -75,8 +78,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
colorNeutralBackground5Pressed: grey[94], // #f0f0f0 Global.Color.Grey.94
colorNeutralBackground5Selected: grey[98], // #fafafa Global.Color.Grey.98
colorNeutralBackground6: grey[90], // #e6e6e6 Global.Color.Grey.90
colorNeutralBackgroundStatic: grey[20], // #333333 Global.Color.Grey.20
colorNeutralBackgroundInverted: grey[16], // #292929 Global.Color.Grey.16
colorNeutralBackgroundStatic: grey[20], // #333333 Global.Color.Grey.20
colorSubtleBackground: 'transparent', // transparent undefined
colorSubtleBackgroundHover: grey[96], // #f5f5f5 Global.Color.Grey.96
colorSubtleBackgroundPressed: grey[88], // #e0e0e0 Global.Color.Grey.88
Expand Down
7 changes: 5 additions & 2 deletions packages/react-components/react-theme/src/alias/teamsDarkColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/* !!! DO NOT EDIT !!! */
/* This file has been generated by the token pipeline */

import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors';
import type { BrandVariants, ColorTokens } from '../types';

Expand Down Expand Up @@ -37,12 +40,12 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100
colorBrandForeground2: brand[120], // #6cb8f6 Global.Color.Brand.120
colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
colorNeutralForegroundInverted: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedHover: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedPressed: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundInvertedSelected: grey[14], // #242424 Global.Color.Grey.14
colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedStatic: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLinkHover: white, // #ffffff Global.Color.White
colorNeutralForegroundInvertedLinkPressed: white, // #ffffff Global.Color.White
Expand Down Expand Up @@ -75,8 +78,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({
colorNeutralBackground5Pressed: black, // #000000 Global.Color.Black
colorNeutralBackground5Selected: grey[10], // #1a1a1a Global.Color.Grey.10
colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20
colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White
colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24
colorNeutralBackgroundInverted: grey[20], // #333333 Global.Color.Grey.20
colorSubtleBackground: 'transparent', // transparent undefined
colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22
colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18
Expand Down
3 changes: 3 additions & 0 deletions packages/react-components/react-theme/src/global/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/* !!! DO NOT EDIT !!! */
/* This file has been generated by the token pipeline */

import type { ColorVariants, Greys, AlphaColors } from '../types';

export const grey: Record<Greys, string> = {
Expand Down