diff --git a/change/@fluentui-react-theme-588897ea-213d-4956-b34a-8bd1a9e63d21.json b/change/@fluentui-react-theme-588897ea-213d-4956-b34a-8bd1a9e63d21.json new file mode 100644 index 0000000000000..d07a0489389f0 --- /dev/null +++ b/change/@fluentui-react-theme-588897ea-213d-4956-b34a-8bd1a9e63d21.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Update color tokens mapping", + "packageName": "@fluentui/react-theme", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-theme/src/alias/darkColor.ts b/packages/react-components/react-theme/src/alias/darkColor.ts index 1ca7c21252637..978321ca3e0e6 100644 --- a/packages/react-components/react-theme/src/alias/darkColor.ts +++ b/packages/react-components/react-theme/src/alias/darkColor.ts @@ -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'; @@ -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 @@ -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 @@ -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 diff --git a/packages/react-components/react-theme/src/alias/highContrastColor.ts b/packages/react-components/react-theme/src/alias/highContrastColor.ts index 6ef05cca2f294..69d4b14e7f32e 100644 --- a/packages/react-components/react-theme/src/alias/highContrastColor.ts +++ b/packages/react-components/react-theme/src/alias/highContrastColor.ts @@ -1,3 +1,6 @@ +/* !!! DO NOT EDIT !!! */ +/* This file has been generated by the token pipeline */ + import { blackAlpha, hcButtonFace, @@ -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 @@ -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 diff --git a/packages/react-components/react-theme/src/alias/lightColor.ts b/packages/react-components/react-theme/src/alias/lightColor.ts index 22a273c55cba9..a60435f3137e6 100644 --- a/packages/react-components/react-theme/src/alias/lightColor.ts +++ b/packages/react-components/react-theme/src/alias/lightColor.ts @@ -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'; @@ -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 @@ -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 diff --git a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts index ec58fb61864f0..3fdac8f4fa5fb 100644 --- a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts +++ b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts @@ -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'; @@ -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 @@ -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 diff --git a/packages/react-components/react-theme/src/global/colors.ts b/packages/react-components/react-theme/src/global/colors.ts index 208c14354cd60..bc333c602c3b4 100644 --- a/packages/react-components/react-theme/src/global/colors.ts +++ b/packages/react-components/react-theme/src/global/colors.ts @@ -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 = {