From b7623533512cba3e79215096f4e1a4a208a93f84 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Tue, 25 Jul 2023 12:33:28 -0700 Subject: [PATCH 1/2] feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2 --- .../src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts | 2 ++ apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts | 2 ++ .../react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts | 2 ++ .../react-components/react-theme-sass/sass/colorTokens.scss | 2 ++ packages/tokens/etc/tokens.api.md | 2 ++ packages/tokens/src/alias/darkColor.ts | 2 ++ packages/tokens/src/alias/highContrastColor.ts | 2 ++ packages/tokens/src/alias/lightColor.ts | 2 ++ packages/tokens/src/alias/teamsDarkColor.ts | 2 ++ packages/tokens/src/tokens.ts | 2 ++ packages/tokens/src/types.ts | 2 ++ 11 files changed, 22 insertions(+) diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts index 9f574e1c723c79..c3ad070c95fd0d 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts @@ -232,6 +232,7 @@ export const alias = { colorBrandStroke2: 'brand[140]', colorBrandStroke2Hover: 'brand[120]', colorBrandStroke2Pressed: 'brand[80]', + colorBrandStroke2Contrast: 'brand[140]', colorCompoundBrandStroke: 'brand[80]', colorCompoundBrandStrokeHover: 'brand[70]', colorCompoundBrandStrokePressed: 'brand[60]', @@ -240,6 +241,7 @@ export const alias = { colorTransparentStroke: 'transparent', colorTransparentStrokeInteractive: 'transparent', colorTransparentStrokeDisabled: 'transparent', + colorNeutralStrokeAlpha2: 'whiteAlpha[20]', colorStrokeFocus1: 'white', colorStrokeFocus2: 'black', colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts index c1d96fd6ced192..b7fe950bca4746 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts @@ -151,6 +151,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorBrandStroke2: palette.themeLight, colorBrandStroke2Hover: palette.themeLight, colorBrandStroke2Pressed: palette.themeLight, + colorBrandStroke2Contrast: palette.themeLight, colorCompoundBrandStroke: palette.themePrimary, colorCompoundBrandStrokeHover: palette.themeDarkAlt, colorCompoundBrandStrokePressed: palette.themeDark, @@ -160,6 +161,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorTransparentStrokeInteractive: 'transparent', colorTransparentStrokeDisabled: 'transparent', colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5], + colorNeutralStrokeAlpha2: whiteAlpha[20], colorStrokeFocus1: palette.white, colorStrokeFocus2: palette.black, colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', diff --git a/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts b/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts index c8aad3d03297ee..7c0bd79bfbefb8 100644 --- a/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts +++ b/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts @@ -147,6 +147,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorBrandStroke2: palette.themeLight, colorBrandStroke2Hover: palette.themeLight, colorBrandStroke2Pressed: palette.themeLight, + colorBrandStroke2Contrast: palette.themeLight, colorCompoundBrandStroke: palette.themePrimary, colorCompoundBrandStrokeHover: palette.themeDarkAlt, colorCompoundBrandStrokePressed: palette.themeDark, @@ -156,6 +157,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorTransparentStrokeInteractive: 'transparent', colorTransparentStrokeDisabled: 'transparent', colorNeutralStrokeAlpha: inverted ? whiteAlpha[10] : blackAlpha[5], + colorNeutralStrokeAlpha2: whiteAlpha[20], colorStrokeFocus1: palette.white, colorStrokeFocus2: palette.black, colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss index 0579261ed3f255..d9147626564e55 100644 --- a/packages/react-components/react-theme-sass/sass/colorTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss @@ -136,6 +136,7 @@ $colorBrandStroke1: var(--colorBrandStroke1); $colorBrandStroke2: var(--colorBrandStroke2); $colorBrandStroke2Hover: var(--colorBrandStroke2Hover); $colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed); +$colorBrandStroke2Contrast: var(--colorBrandStroke2Contrast); $colorCompoundBrandStroke: var(--colorCompoundBrandStroke); $colorCompoundBrandStrokeHover: var(--colorCompoundBrandStrokeHover); $colorCompoundBrandStrokePressed: var(--colorCompoundBrandStrokePressed); @@ -145,6 +146,7 @@ $colorTransparentStroke: var(--colorTransparentStroke); $colorTransparentStrokeInteractive: var(--colorTransparentStrokeInteractive); $colorTransparentStrokeDisabled: var(--colorTransparentStrokeDisabled); $colorNeutralStrokeAlpha: var(--colorNeutralStrokeAlpha); +$colorNeutralStrokeAlpha2: var(--colorNeutralStrokeAlpha2); $colorStrokeFocus1: var(--colorStrokeFocus1); $colorStrokeFocus2: var(--colorStrokeFocus2); $colorNeutralShadowAmbient: var(--colorNeutralShadowAmbient); diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md index fc0282dee28a75..c569802f02d4be 100644 --- a/packages/tokens/etc/tokens.api.md +++ b/packages/tokens/etc/tokens.api.md @@ -268,6 +268,7 @@ export type ColorTokens = { colorBrandStroke2: string; colorBrandStroke2Hover: string; colorBrandStroke2Pressed: string; + colorBrandStroke2Contrast: string; colorCompoundBrandStroke: string; colorCompoundBrandStrokeHover: string; colorCompoundBrandStrokePressed: string; @@ -277,6 +278,7 @@ export type ColorTokens = { colorTransparentStrokeInteractive: string; colorTransparentStrokeDisabled: string; colorNeutralStrokeAlpha: string; + colorNeutralStrokeAlpha2: string; colorStrokeFocus1: string; colorStrokeFocus2: string; colorNeutralShadowAmbient: string; diff --git a/packages/tokens/src/alias/darkColor.ts b/packages/tokens/src/alias/darkColor.ts index b6ff7343675d32..d27500c2ac7958 100644 --- a/packages/tokens/src/alias/darkColor.ts +++ b/packages/tokens/src/alias/darkColor.ts @@ -143,6 +143,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorBrandStroke2: brand[50], // #004c87 Global.Color.Brand.50 colorBrandStroke2Hover: brand[50], // #004c87 Global.Color.Brand.50 colorBrandStroke2Pressed: brand[30], // #043862 Global.Color.Brand.30 + colorBrandStroke2Contrast: brand[50], // #004c87 Global.Color.Brand.50 colorCompoundBrandStroke: brand[100], // #2899f5 Global.Color.Brand.100 colorCompoundBrandStrokeHover: brand[110], // #3aa0f3 Global.Color.Brand.110 colorCompoundBrandStrokePressed: brand[90], // #1890f1 Global.Color.Brand.90 @@ -152,6 +153,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorTransparentStrokeInteractive: 'transparent', // transparent undefined colorTransparentStrokeDisabled: 'transparent', // transparent undefined colorNeutralStrokeAlpha: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10 + colorNeutralStrokeAlpha2: whiteAlpha[20], // rgba(255, 255, 255, 0.2) Global.Color.WhiteAlpha.20 colorStrokeFocus1: black, // #000000 Global.Color.Black colorStrokeFocus2: white, // #ffffff Global.Color.White colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', // rgba(0,0,0,0.24) undefined diff --git a/packages/tokens/src/alias/highContrastColor.ts b/packages/tokens/src/alias/highContrastColor.ts index 1eebd76f9dba8a..9a65e05a1b0de0 100644 --- a/packages/tokens/src/alias/highContrastColor.ts +++ b/packages/tokens/src/alias/highContrastColor.ts @@ -153,6 +153,7 @@ export const generateColorTokens = (): ColorTokens => ({ colorBrandStroke2: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorBrandStroke2Hover: hcHighlight, // Highlight Global.Color.hcHighlight colorBrandStroke2Pressed: hcHighlight, // Highlight Global.Color.hcHighlight + colorBrandStroke2Contrast: hcCanvas, // Canvas Global.Color.hcCanvas colorCompoundBrandStroke: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandStrokeHover: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandStrokePressed: hcHighlight, // Highlight Global.Color.hcHighlight @@ -162,6 +163,7 @@ export const generateColorTokens = (): ColorTokens => ({ colorTransparentStrokeInteractive: hcHighlight, // Highlight Global.Color.hcHighlight colorTransparentStrokeDisabled: hcDisabled, // GrayText Global.Color.hcDisabled colorNeutralStrokeAlpha: hcCanvasText, // CanvasText Global.Color.hcCanvasText + colorNeutralStrokeAlpha2: hcCanvas, // Canvas Global.Color.hcCanvas colorStrokeFocus1: hcCanvas, // Canvas Global.Color.hcCanvas colorStrokeFocus2: hcHighlight, // Highlight Global.Color.hcHighlight colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', // rgba(0,0,0,0.24) undefined diff --git a/packages/tokens/src/alias/lightColor.ts b/packages/tokens/src/alias/lightColor.ts index 313605b93896e3..54fe08b9355535 100644 --- a/packages/tokens/src/alias/lightColor.ts +++ b/packages/tokens/src/alias/lightColor.ts @@ -143,6 +143,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorBrandStroke2: brand[140], // #c7e0f4 Global.Color.Brand.140 colorBrandStroke2Hover: brand[120], // #6cb8f6 Global.Color.Brand.120 colorBrandStroke2Pressed: brand[80], // #0078d4 Global.Color.Brand.80 + colorBrandStroke2Contrast: brand[140], // #c7e0f4 Global.Color.Brand.140 colorCompoundBrandStroke: brand[80], // #0078d4 Global.Color.Brand.80 colorCompoundBrandStrokeHover: brand[70], // #106ebe Global.Color.Brand.70 colorCompoundBrandStrokePressed: brand[60], // #005a9e Global.Color.Brand.60 @@ -152,6 +153,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorTransparentStrokeInteractive: 'transparent', // transparent undefined colorTransparentStrokeDisabled: 'transparent', // transparent undefined colorNeutralStrokeAlpha: blackAlpha[5], // rgba(0, 0, 0, 0.05) Global.Color.BlackAlpha.5 + colorNeutralStrokeAlpha2: whiteAlpha[20], // rgba(255, 255, 255, 0.2) Global.Color.WhiteAlpha.20 colorStrokeFocus1: white, // #ffffff Global.Color.White colorStrokeFocus2: black, // #000000 Global.Color.Black colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)', // rgba(0,0,0,0.12) undefined diff --git a/packages/tokens/src/alias/teamsDarkColor.ts b/packages/tokens/src/alias/teamsDarkColor.ts index 181e6b1e02e0b3..e77a5ebc13bf18 100644 --- a/packages/tokens/src/alias/teamsDarkColor.ts +++ b/packages/tokens/src/alias/teamsDarkColor.ts @@ -143,6 +143,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorBrandStroke2: brand[50], // #004c87 Global.Color.Brand.50 colorBrandStroke2Hover: brand[50], // #004c87 Global.Color.Brand.50 colorBrandStroke2Pressed: brand[30], // #043862 Global.Color.Brand.30 + colorBrandStroke2Contrast: 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 @@ -152,6 +153,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorTransparentStrokeInteractive: 'transparent', // transparent undefined colorTransparentStrokeDisabled: 'transparent', // transparent undefined colorNeutralStrokeAlpha: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10 + colorNeutralStrokeAlpha2: whiteAlpha[20], // rgba(255, 255, 255, 0.2) Global.Color.WhiteAlpha.20 colorStrokeFocus1: black, // #000000 Global.Color.Black colorStrokeFocus2: white, // #ffffff Global.Color.White colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', // rgba(0,0,0,0.24) undefined diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts index 79a4f0823b1aaf..db6fdd5e03d7d7 100644 --- a/packages/tokens/src/tokens.ts +++ b/packages/tokens/src/tokens.ts @@ -140,6 +140,7 @@ export const tokens: Record = { colorBrandStroke2: 'var(--colorBrandStroke2)', colorBrandStroke2Hover: 'var(--colorBrandStroke2Hover)', colorBrandStroke2Pressed: 'var(--colorBrandStroke2Pressed)', + colorBrandStroke2Contrast: 'var(--colorBrandStroke2Contrast)', colorCompoundBrandStroke: 'var(--colorCompoundBrandStroke)', colorCompoundBrandStrokeHover: 'var(--colorCompoundBrandStrokeHover)', colorCompoundBrandStrokePressed: 'var(--colorCompoundBrandStrokePressed)', @@ -149,6 +150,7 @@ export const tokens: Record = { colorTransparentStrokeInteractive: 'var(--colorTransparentStrokeInteractive)', colorTransparentStrokeDisabled: 'var(--colorTransparentStrokeDisabled)', colorNeutralStrokeAlpha: 'var(--colorNeutralStrokeAlpha)', + colorNeutralStrokeAlpha2: 'var(--colorNeutralStrokeAlpha2)', colorStrokeFocus1: 'var(--colorStrokeFocus1)', colorStrokeFocus2: 'var(--colorStrokeFocus2)', colorNeutralShadowAmbient: 'var(--colorNeutralShadowAmbient)', diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index 9f07e8e9d1528d..e6b1c1ba5bf7b2 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -142,6 +142,7 @@ export type ColorTokens = { colorBrandStroke2: string; colorBrandStroke2Hover: string; colorBrandStroke2Pressed: string; + colorBrandStroke2Contrast: string; colorCompoundBrandStroke: string; colorCompoundBrandStrokeHover: string; colorCompoundBrandStrokePressed: string; @@ -151,6 +152,7 @@ export type ColorTokens = { colorTransparentStrokeInteractive: string; colorTransparentStrokeDisabled: string; colorNeutralStrokeAlpha: string; + colorNeutralStrokeAlpha2: string; colorStrokeFocus1: string; colorStrokeFocus2: string; colorNeutralShadowAmbient: string; From 989dee41d397d869c991a4992716c9caece54b88 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Tue, 25 Jul 2023 13:03:13 -0700 Subject: [PATCH 2/2] change files --- ...gration-v8-v9-4d4cd0fa-12a8-464a-a565-21509064a26c.json | 7 +++++++ ...ct-theme-sass-67ad5305-06bf-4ffa-9010-1374b0558247.json | 7 +++++++ ...uentui-tokens-b76c8890-bea0-44e0-8470-302e4e0d1281.json | 7 +++++++ 3 files changed, 21 insertions(+) create mode 100644 change/@fluentui-react-migration-v8-v9-4d4cd0fa-12a8-464a-a565-21509064a26c.json create mode 100644 change/@fluentui-react-theme-sass-67ad5305-06bf-4ffa-9010-1374b0558247.json create mode 100644 change/@fluentui-tokens-b76c8890-bea0-44e0-8470-302e4e0d1281.json diff --git a/change/@fluentui-react-migration-v8-v9-4d4cd0fa-12a8-464a-a565-21509064a26c.json b/change/@fluentui-react-migration-v8-v9-4d4cd0fa-12a8-464a-a565-21509064a26c.json new file mode 100644 index 00000000000000..c22df10defda49 --- /dev/null +++ b/change/@fluentui-react-migration-v8-v9-4d4cd0fa-12a8-464a-a565-21509064a26c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2", + "packageName": "@fluentui/react-migration-v8-v9", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-theme-sass-67ad5305-06bf-4ffa-9010-1374b0558247.json b/change/@fluentui-react-theme-sass-67ad5305-06bf-4ffa-9010-1374b0558247.json new file mode 100644 index 00000000000000..2101d82dd47650 --- /dev/null +++ b/change/@fluentui-react-theme-sass-67ad5305-06bf-4ffa-9010-1374b0558247.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2", + "packageName": "@fluentui/react-theme-sass", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-tokens-b76c8890-bea0-44e0-8470-302e4e0d1281.json b/change/@fluentui-tokens-b76c8890-bea0-44e0-8470-302e4e0d1281.json new file mode 100644 index 00000000000000..4f0ad2b1c43f95 --- /dev/null +++ b/change/@fluentui-tokens-b76c8890-bea0-44e0-8470-302e4e0d1281.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2", + "packageName": "@fluentui/tokens", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +}