From b8a8d0a00f04ea60ed9a94e46ed5dd5d9d5e5683 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 8 May 2023 10:37:10 -0700 Subject: [PATCH 1/6] feat(tokens): Add/update theme tokens --- .../src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts | 4 ++++ apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts | 4 ++++ .../src/components/Theme/v9ThemeShim.ts | 4 ++++ .../react-theme-sass/sass/colorTokens.scss | 4 ++++ packages/tokens/etc/tokens.api.md | 4 ++++ packages/tokens/src/alias/darkColor.ts | 6 +++++- packages/tokens/src/alias/highContrastColor.ts | 8 ++++++-- packages/tokens/src/alias/lightColor.ts | 4 ++++ packages/tokens/src/alias/teamsDarkColor.ts | 8 ++++++-- packages/tokens/src/tokens.ts | 4 ++++ packages/tokens/src/types.ts | 4 ++++ 11 files changed, 49 insertions(+), 5 deletions(-) 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 b297debd8eb938..dad49638142531 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 @@ -135,6 +135,8 @@ export const alias = { colorCompoundBrandForeground1Pressed: 'brand[60]', colorBrandForeground1: 'brand[80]', colorBrandForeground2: 'brand[70]', + colorBrandForeground2Hover: 'brand[60]', + colorBrandForeground2Pressed: 'brand[30]', colorNeutralForeground1Static: 'grey[14]', colorNeutralForegroundInverted: 'white', colorNeutralForegroundInvertedHover: 'white', @@ -204,6 +206,8 @@ export const alias = { colorCompoundBrandBackgroundPressed: 'brand[60]', colorBrandBackgroundStatic: 'brand[80]', colorBrandBackground2: 'brand[160]', + colorBrandBackground2Hover: 'brand[150]', + colorBrandBackground2Pressed: 'brand[130]', colorBrandBackgroundInverted: 'white', colorBrandBackgroundInvertedHover: 'brand[160]', colorBrandBackgroundInvertedPressed: 'brand[140]', diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts index 554cd05a74ce2f..f172a3f531a25c 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts @@ -47,6 +47,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorCompoundBrandForeground1Pressed: palette.themeDark, colorBrandForeground1: palette.themePrimary, colorBrandForeground2: palette.themeDarkAlt, + colorBrandForeground2Hover: palette.themeDarkAlt, + colorBrandForeground2Pressed: palette.themeDarkAlt, colorNeutralForeground1Static: palette.neutralPrimary, colorNeutralForegroundInverted: palette.white, colorNeutralForegroundInvertedHover: palette.white, @@ -123,6 +125,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorCompoundBrandBackgroundPressed: palette.themeDark, colorBrandBackgroundStatic: palette.themePrimary, colorBrandBackground2: palette.themeLighterAlt, + colorBrandBackground2Hover: palette.themeLighterAlt, + colorBrandBackground2Pressed: palette.themeLighterAlt, colorBrandBackgroundInverted: palette.white, colorBrandBackgroundInvertedHover: palette.themeLighterAlt, colorBrandBackgroundInvertedPressed: palette.themeLight, 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 3dce2645be9117..6393426cf624f7 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 @@ -43,6 +43,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorCompoundBrandForeground1Pressed: palette.themeDark, colorBrandForeground1: palette.themePrimary, colorBrandForeground2: palette.themeDarkAlt, + colorBrandForeground2Hover: palette.themeDarkAlt, + colorBrandForeground2Pressed: palette.themeDarkAlt, colorNeutralForeground1Static: palette.neutralPrimary, colorNeutralForegroundInverted: palette.white, colorNeutralForegroundInvertedHover: palette.white, @@ -119,6 +121,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorCompoundBrandBackgroundPressed: palette.themeDark, colorBrandBackgroundStatic: palette.themePrimary, colorBrandBackground2: palette.themeLighterAlt, + colorBrandBackground2Hover: palette.themeLighterAlt, + colorBrandBackground2Pressed: palette.themeLighterAlt, colorBrandBackgroundInverted: palette.white, colorBrandBackgroundInvertedHover: palette.themeLighterAlt, colorBrandBackgroundInvertedPressed: palette.themeLight, diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss index 7072ecb9ffa66e..748b003a45eff5 100644 --- a/packages/react-components/react-theme-sass/sass/colorTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss @@ -32,6 +32,8 @@ $colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover); $colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed); $colorBrandForeground1: var(--colorBrandForeground1); $colorBrandForeground2: var(--colorBrandForeground2); +$colorBrandForeground2Hover: var(--colorBrandForeground2Hover); +$colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed); $colorNeutralForeground1Static: var(--colorNeutralForeground1Static); $colorNeutralForegroundInverted: var(--colorNeutralForegroundInverted); $colorNeutralForegroundInvertedHover: var(--colorNeutralForegroundInvertedHover); @@ -108,6 +110,8 @@ $colorCompoundBrandBackgroundHover: var(--colorCompoundBrandBackgroundHover); $colorCompoundBrandBackgroundPressed: var(--colorCompoundBrandBackgroundPressed); $colorBrandBackgroundStatic: var(--colorBrandBackgroundStatic); $colorBrandBackground2: var(--colorBrandBackground2); +$colorBrandBackground2Hover: var(--colorBrandBackground2Hover); +$colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed); $colorBrandBackgroundInverted: var(--colorBrandBackgroundInverted); $colorBrandBackgroundInvertedHover: var(--colorBrandBackgroundInvertedHover); $colorBrandBackgroundInvertedPressed: var(--colorBrandBackgroundInvertedPressed); diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md index 35035b9c21f269..52b84e99482de9 100644 --- a/packages/tokens/etc/tokens.api.md +++ b/packages/tokens/etc/tokens.api.md @@ -164,6 +164,8 @@ export type ColorTokens = { colorCompoundBrandForeground1Pressed: string; colorBrandForeground1: string; colorBrandForeground2: string; + colorBrandForeground2Hover: string; + colorBrandForeground2Pressed: string; colorNeutralForeground1Static: string; colorNeutralForegroundInverted: string; colorNeutralForegroundInvertedHover: string; @@ -240,6 +242,8 @@ export type ColorTokens = { colorCompoundBrandBackgroundPressed: string; colorBrandBackgroundStatic: string; colorBrandBackground2: string; + colorBrandBackground2Hover: string; + colorBrandBackground2Pressed: string; colorBrandBackgroundInverted: string; colorBrandBackgroundInvertedHover: string; colorBrandBackgroundInvertedPressed: string; diff --git a/packages/tokens/src/alias/darkColor.ts b/packages/tokens/src/alias/darkColor.ts index db18339eeef363..824d0f31c1d62b 100644 --- a/packages/tokens/src/alias/darkColor.ts +++ b/packages/tokens/src/alias/darkColor.ts @@ -39,6 +39,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorCompoundBrandForeground1Pressed: brand[90], // #1890f1 Global.Color.Brand.90 colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100 colorBrandForeground2: brand[110], // #3aa0f3 Global.Color.Brand.110 + colorBrandForeground2Hover: brand[130], // #82c7ff Global.Color.Brand.130 + colorBrandForeground2Pressed: brand[160], // #eff6fc Global.Color.Brand.160 colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14 colorNeutralForegroundStaticInverted: white, // #ffffff Global.Color.White colorNeutralForegroundInverted: grey[14], // #242424 Global.Color.Grey.14 @@ -114,7 +116,9 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorCompoundBrandBackgroundHover: brand[110], // #3aa0f3 Global.Color.Brand.110 colorCompoundBrandBackgroundPressed: brand[90], // #1890f1 Global.Color.Brand.90 colorBrandBackgroundStatic: brand[80], // #0078d4 Global.Color.Brand.80 - colorBrandBackground2: brand[40], // #004578 Global.Color.Brand.40 + colorBrandBackground2: brand[20], // #002848 Global.Color.Brand.20 + colorBrandBackground2Hover: brand[40], // #004578 Global.Color.Brand.40 + colorBrandBackground2Pressed: brand[10], // #001526 Global.Color.Brand.10 colorBrandBackgroundInverted: white, // #ffffff Global.Color.White colorBrandBackgroundInvertedHover: brand[160], // #eff6fc Global.Color.Brand.160 colorBrandBackgroundInvertedPressed: brand[140], // #c7e0f4 Global.Color.Brand.140 diff --git a/packages/tokens/src/alias/highContrastColor.ts b/packages/tokens/src/alias/highContrastColor.ts index 3314730506e296..9aa68f0a873bbd 100644 --- a/packages/tokens/src/alias/highContrastColor.ts +++ b/packages/tokens/src/alias/highContrastColor.ts @@ -48,7 +48,9 @@ export const generateColorTokens = (): ColorTokens => ({ colorCompoundBrandForeground1Hover: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandForeground1Pressed: hcHighlight, // Highlight Global.Color.hcHighlight colorBrandForeground1: hcCanvasText, // CanvasText Global.Color.hcCanvasText - colorBrandForeground2: hcButtonText, // ButtonText Global.Color.hcButtonText + colorBrandForeground2: hcCanvasText, // CanvasText Global.Color.hcCanvasText + colorBrandForeground2Hover: hcCanvasText, // CanvasText Global.Color.hcCanvasText + colorBrandForeground2Pressed: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorNeutralForeground1Static: hcCanvas, // Canvas Global.Color.hcCanvas colorNeutralForegroundStaticInverted: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorNeutralForegroundInverted: hcHighlightText, // HighlightText Global.Color.hcHighlightText @@ -124,7 +126,9 @@ export const generateColorTokens = (): ColorTokens => ({ colorCompoundBrandBackgroundHover: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandBackgroundPressed: hcHighlight, // Highlight Global.Color.hcHighlight colorBrandBackgroundStatic: hcCanvas, // Canvas Global.Color.hcCanvas - colorBrandBackground2: hcButtonFace, // ButtonFace Global.Color.hcButtonFace + colorBrandBackground2: hcCanvasText, // CanvasText Global.Color.hcCanvasText + colorBrandBackground2Hover: hcCanvas, // Canvas Global.Color.hcCanvas + colorBrandBackground2Pressed: hcCanvas, // Canvas Global.Color.hcCanvas colorBrandBackgroundInverted: hcButtonFace, // ButtonFace Global.Color.hcButtonFace colorBrandBackgroundInvertedHover: hcHighlight, // Highlight Global.Color.hcHighlight colorBrandBackgroundInvertedPressed: hcHighlight, // Highlight Global.Color.hcHighlight diff --git a/packages/tokens/src/alias/lightColor.ts b/packages/tokens/src/alias/lightColor.ts index a638bd7fa17231..456c95e9cb1d74 100644 --- a/packages/tokens/src/alias/lightColor.ts +++ b/packages/tokens/src/alias/lightColor.ts @@ -39,6 +39,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorCompoundBrandForeground1Pressed: brand[60], // #005a9e Global.Color.Brand.60 colorBrandForeground1: brand[80], // #0078d4 Global.Color.Brand.80 colorBrandForeground2: brand[70], // #106ebe Global.Color.Brand.70 + colorBrandForeground2Hover: brand[60], // #005a9e Global.Color.Brand.60 + colorBrandForeground2Pressed: brand[30], // #043862 Global.Color.Brand.30 colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14 colorNeutralForegroundStaticInverted: white, // #ffffff Global.Color.White colorNeutralForegroundInverted: white, // #ffffff Global.Color.White @@ -115,6 +117,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorCompoundBrandBackgroundPressed: brand[60], // #005a9e Global.Color.Brand.60 colorBrandBackgroundStatic: brand[80], // #0078d4 Global.Color.Brand.80 colorBrandBackground2: brand[160], // #eff6fc Global.Color.Brand.160 + colorBrandBackground2Hover: brand[150], // #deecf9 Global.Color.Brand.150 + colorBrandBackground2Pressed: brand[130], // #82c7ff Global.Color.Brand.130 colorBrandBackgroundInverted: white, // #ffffff Global.Color.White colorBrandBackgroundInvertedHover: brand[160], // #eff6fc Global.Color.Brand.160 colorBrandBackgroundInvertedPressed: brand[140], // #c7e0f4 Global.Color.Brand.140 diff --git a/packages/tokens/src/alias/teamsDarkColor.ts b/packages/tokens/src/alias/teamsDarkColor.ts index bf1b30e9e23ae4..a0e186bb7ccab8 100644 --- a/packages/tokens/src/alias/teamsDarkColor.ts +++ b/packages/tokens/src/alias/teamsDarkColor.ts @@ -38,7 +38,9 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorCompoundBrandForeground1Hover: brand[110], // #3aa0f3 Global.Color.Brand.110 colorCompoundBrandForeground1Pressed: brand[90], // #1890f1 Global.Color.Brand.90 colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100 - colorBrandForeground2: brand[120], // #6cb8f6 Global.Color.Brand.120 + colorBrandForeground2: brand[110], // #3aa0f3 Global.Color.Brand.110 + colorBrandForeground2Hover: brand[130], // #82c7ff Global.Color.Brand.130 + colorBrandForeground2Pressed: brand[160], // #eff6fc Global.Color.Brand.160 colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14 colorNeutralForegroundStaticInverted: white, // #ffffff Global.Color.White colorNeutralForegroundInverted: grey[14], // #242424 Global.Color.Grey.14 @@ -114,7 +116,9 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorCompoundBrandBackgroundHover: brand[110], // #3aa0f3 Global.Color.Brand.110 colorCompoundBrandBackgroundPressed: brand[90], // #1890f1 Global.Color.Brand.90 colorBrandBackgroundStatic: brand[80], // #0078d4 Global.Color.Brand.80 - colorBrandBackground2: brand[40], // #004578 Global.Color.Brand.40 + colorBrandBackground2: brand[20], // #002848 Global.Color.Brand.20 + colorBrandBackground2Hover: brand[40], // #004578 Global.Color.Brand.40 + colorBrandBackground2Pressed: brand[10], // #001526 Global.Color.Brand.10 colorBrandBackgroundInverted: white, // #ffffff Global.Color.White colorBrandBackgroundInvertedHover: brand[160], // #eff6fc Global.Color.Brand.160 colorBrandBackgroundInvertedPressed: brand[140], // #c7e0f4 Global.Color.Brand.140 diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts index 20115b8d4d85c4..9cd64c9b3163db 100644 --- a/packages/tokens/src/tokens.ts +++ b/packages/tokens/src/tokens.ts @@ -47,6 +47,8 @@ export const tokens: Record = { colorNeutralForegroundInvertedDisabled: 'var(--colorNeutralForegroundInvertedDisabled)', colorBrandForeground1: 'var(--colorBrandForeground1)', colorBrandForeground2: 'var(--colorBrandForeground2)', + colorBrandForeground2Hover: 'var(--colorBrandForeground2Hover)', + colorBrandForeground2Pressed: 'var(--colorBrandForeground2Pressed)', colorNeutralForeground1Static: 'var(--colorNeutralForeground1Static)', colorBrandForegroundInverted: 'var(--colorBrandForegroundInverted)', colorBrandForegroundInvertedHover: 'var(--colorBrandForegroundInvertedHover)', @@ -112,6 +114,8 @@ export const tokens: Record = { colorCompoundBrandBackgroundPressed: 'var(--colorCompoundBrandBackgroundPressed)', colorBrandBackgroundStatic: 'var(--colorBrandBackgroundStatic)', colorBrandBackground2: 'var(--colorBrandBackground2)', + colorBrandBackground2Hover: 'var(--colorBrandBackground2Hover)', + colorBrandBackground2Pressed: 'var(--colorBrandBackground2Pressed)', colorBrandBackgroundInverted: 'var(--colorBrandBackgroundInverted)', colorBrandBackgroundInvertedHover: 'var(--colorBrandBackgroundInvertedHover)', colorBrandBackgroundInvertedPressed: 'var(--colorBrandBackgroundInvertedPressed)', diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index 7f5ee40270aeb0..bb20a9b9ce4bd5 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -38,6 +38,8 @@ export type ColorTokens = { colorCompoundBrandForeground1Pressed: string; colorBrandForeground1: string; colorBrandForeground2: string; + colorBrandForeground2Hover: string; + colorBrandForeground2Pressed: string; colorNeutralForeground1Static: string; colorNeutralForegroundInverted: string; colorNeutralForegroundInvertedHover: string; @@ -114,6 +116,8 @@ export type ColorTokens = { colorCompoundBrandBackgroundPressed: string; colorBrandBackgroundStatic: string; colorBrandBackground2: string; + colorBrandBackground2Hover: string; + colorBrandBackground2Pressed: string; colorBrandBackgroundInverted: string; colorBrandBackgroundInvertedHover: string; colorBrandBackgroundInvertedPressed: string; From e343f08dc7781c3c7ca5eba184f8761476197549 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 8 May 2023 10:54:43 -0700 Subject: [PATCH 2/6] change files --- ...gration-v8-v9-8f5aa54e-09af-40d7-8d1b-48b603d3ca88.json | 7 +++++++ ...ct-theme-sass-906c4792-b060-4628-b52f-8f27a864d8e1.json | 7 +++++++ ...uentui-tokens-19f04d6b-7899-48d5-81a4-2c81b15d4d1f.json | 7 +++++++ 3 files changed, 21 insertions(+) create mode 100644 change/@fluentui-react-migration-v8-v9-8f5aa54e-09af-40d7-8d1b-48b603d3ca88.json create mode 100644 change/@fluentui-react-theme-sass-906c4792-b060-4628-b52f-8f27a864d8e1.json create mode 100644 change/@fluentui-tokens-19f04d6b-7899-48d5-81a4-2c81b15d4d1f.json diff --git a/change/@fluentui-react-migration-v8-v9-8f5aa54e-09af-40d7-8d1b-48b603d3ca88.json b/change/@fluentui-react-migration-v8-v9-8f5aa54e-09af-40d7-8d1b-48b603d3ca88.json new file mode 100644 index 00000000000000..250c9cdcc23475 --- /dev/null +++ b/change/@fluentui-react-migration-v8-v9-8f5aa54e-09af-40d7-8d1b-48b603d3ca88.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add/update theme tokens", + "packageName": "@fluentui/react-migration-v8-v9", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-theme-sass-906c4792-b060-4628-b52f-8f27a864d8e1.json b/change/@fluentui-react-theme-sass-906c4792-b060-4628-b52f-8f27a864d8e1.json new file mode 100644 index 00000000000000..7f6c08905a4142 --- /dev/null +++ b/change/@fluentui-react-theme-sass-906c4792-b060-4628-b52f-8f27a864d8e1.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add theme tokens", + "packageName": "@fluentui/react-theme-sass", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-tokens-19f04d6b-7899-48d5-81a4-2c81b15d4d1f.json b/change/@fluentui-tokens-19f04d6b-7899-48d5-81a4-2c81b15d4d1f.json new file mode 100644 index 00000000000000..0a9e74c64ef254 --- /dev/null +++ b/change/@fluentui-tokens-19f04d6b-7899-48d5-81a4-2c81b15d4d1f.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Add/update theme tokens", + "packageName": "@fluentui/tokens", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} From b67b435ba6cde036407880bcd4708fa782aee7b9 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 8 May 2023 12:22:34 -0700 Subject: [PATCH 3/6] Add colorNeutralStrokeSubtle, colorBrandStroke2Hover, colorBrandStroke2Pressed --- .../src/Concepts/Migration/FromV8/ThemeColors/colorMap.ts | 3 +++ apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts | 3 +++ .../react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts | 3 +++ .../react-components/react-theme-sass/sass/colorTokens.scss | 3 +++ packages/tokens/etc/tokens.api.md | 3 +++ packages/tokens/src/alias/darkColor.ts | 3 +++ packages/tokens/src/alias/highContrastColor.ts | 3 +++ packages/tokens/src/alias/lightColor.ts | 3 +++ packages/tokens/src/alias/teamsDarkColor.ts | 3 +++ packages/tokens/src/tokens.ts | 3 +++ packages/tokens/src/types.ts | 3 +++ 11 files changed, 33 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 dad49638142531..9f574e1c723c79 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 @@ -222,6 +222,7 @@ export const alias = { colorNeutralStroke1Selected: 'grey[74]', colorNeutralStroke2: 'grey[88]', colorNeutralStroke3: 'grey[94]', + colorNeutralStrokeSubtle: 'grey[88]', colorNeutralStrokeOnBrand: 'white', colorNeutralStrokeOnBrand2: 'white', colorNeutralStrokeOnBrand2Hover: 'white', @@ -229,6 +230,8 @@ export const alias = { colorNeutralStrokeOnBrand2Selected: 'white', colorBrandStroke1: 'brand[80]', colorBrandStroke2: 'brand[140]', + colorBrandStroke2Hover: 'brand[120]', + colorBrandStroke2Pressed: 'brand[80]', colorCompoundBrandStroke: 'brand[80]', colorCompoundBrandStrokeHover: 'brand[70]', colorCompoundBrandStrokePressed: 'brand[60]', diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts index f172a3f531a25c..c1d96fd6ced192 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts @@ -141,6 +141,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralStroke1Selected: palette.neutralTertiaryAlt, colorNeutralStroke2: palette.neutralQuaternaryAlt, colorNeutralStroke3: palette.neutralLighter, + colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt, colorNeutralStrokeOnBrand: palette.white, colorNeutralStrokeOnBrand2: palette.white, colorNeutralStrokeOnBrand2Hover: palette.white, @@ -148,6 +149,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralStrokeOnBrand2Selected: palette.white, colorBrandStroke1: palette.themePrimary, colorBrandStroke2: palette.themeLight, + colorBrandStroke2Hover: palette.themeLight, + colorBrandStroke2Pressed: palette.themeLight, colorCompoundBrandStroke: palette.themePrimary, colorCompoundBrandStrokeHover: palette.themeDarkAlt, colorCompoundBrandStrokePressed: palette.themeDark, 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 6393426cf624f7..c8aad3d03297ee 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 @@ -137,6 +137,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralStroke1Selected: palette.neutralTertiaryAlt, colorNeutralStroke2: palette.neutralQuaternaryAlt, colorNeutralStroke3: palette.neutralLighter, + colorNeutralStrokeSubtle: palette.neutralQuaternaryAlt, colorNeutralStrokeOnBrand: palette.white, colorNeutralStrokeOnBrand2: palette.white, colorNeutralStrokeOnBrand2Hover: palette.white, @@ -144,6 +145,8 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralStrokeOnBrand2Selected: palette.white, colorBrandStroke1: palette.themePrimary, colorBrandStroke2: palette.themeLight, + colorBrandStroke2Hover: palette.themeLight, + colorBrandStroke2Pressed: palette.themeLight, colorCompoundBrandStroke: palette.themePrimary, colorCompoundBrandStrokeHover: palette.themeDarkAlt, colorCompoundBrandStrokePressed: palette.themeDark, diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss index 748b003a45eff5..0579261ed3f255 100644 --- a/packages/react-components/react-theme-sass/sass/colorTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss @@ -126,6 +126,7 @@ $colorNeutralStroke1Pressed: var(--colorNeutralStroke1Pressed); $colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected); $colorNeutralStroke2: var(--colorNeutralStroke2); $colorNeutralStroke3: var(--colorNeutralStroke3); +$colorNeutralStrokeSubtle: var(--colorNeutralStrokeSubtle); $colorNeutralStrokeOnBrand: var(--colorNeutralStrokeOnBrand); $colorNeutralStrokeOnBrand2: var(--colorNeutralStrokeOnBrand2); $colorNeutralStrokeOnBrand2Hover: var(--colorNeutralStrokeOnBrand2Hover); @@ -133,6 +134,8 @@ $colorNeutralStrokeOnBrand2Pressed: var(--colorNeutralStrokeOnBrand2Pressed); $colorNeutralStrokeOnBrand2Selected: var(--colorNeutralStrokeOnBrand2Selected); $colorBrandStroke1: var(--colorBrandStroke1); $colorBrandStroke2: var(--colorBrandStroke2); +$colorBrandStroke2Hover: var(--colorBrandStroke2Hover); +$colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed); $colorCompoundBrandStroke: var(--colorCompoundBrandStroke); $colorCompoundBrandStrokeHover: var(--colorCompoundBrandStrokeHover); $colorCompoundBrandStrokePressed: var(--colorCompoundBrandStrokePressed); diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md index 52b84e99482de9..fc0282dee28a75 100644 --- a/packages/tokens/etc/tokens.api.md +++ b/packages/tokens/etc/tokens.api.md @@ -258,6 +258,7 @@ export type ColorTokens = { colorNeutralStroke1Selected: string; colorNeutralStroke2: string; colorNeutralStroke3: string; + colorNeutralStrokeSubtle: string; colorNeutralStrokeOnBrand: string; colorNeutralStrokeOnBrand2: string; colorNeutralStrokeOnBrand2Hover: string; @@ -265,6 +266,8 @@ export type ColorTokens = { colorNeutralStrokeOnBrand2Selected: string; colorBrandStroke1: string; colorBrandStroke2: string; + colorBrandStroke2Hover: string; + colorBrandStroke2Pressed: string; colorCompoundBrandStroke: string; colorCompoundBrandStrokeHover: string; colorCompoundBrandStrokePressed: string; diff --git a/packages/tokens/src/alias/darkColor.ts b/packages/tokens/src/alias/darkColor.ts index 824d0f31c1d62b..b6ff7343675d32 100644 --- a/packages/tokens/src/alias/darkColor.ts +++ b/packages/tokens/src/alias/darkColor.ts @@ -133,6 +133,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorNeutralStroke1Selected: grey[44], // #707070 Global.Color.Grey.44 colorNeutralStroke2: grey[32], // #525252 Global.Color.Grey.32 colorNeutralStroke3: grey[24], // #3d3d3d Global.Color.Grey.24 + colorNeutralStrokeSubtle: grey[4], // #0a0a0a Global.Color.Grey.4 colorNeutralStrokeOnBrand: grey[16], // #292929 Global.Color.Grey.16 colorNeutralStrokeOnBrand2: white, // #ffffff Global.Color.White colorNeutralStrokeOnBrand2Hover: white, // #ffffff Global.Color.White @@ -140,6 +141,8 @@ 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 + colorBrandStroke2Hover: brand[50], // #004c87 Global.Color.Brand.50 + colorBrandStroke2Pressed: brand[30], // #043862 Global.Color.Brand.30 colorCompoundBrandStroke: brand[100], // #2899f5 Global.Color.Brand.100 colorCompoundBrandStrokeHover: brand[110], // #3aa0f3 Global.Color.Brand.110 colorCompoundBrandStrokePressed: brand[90], // #1890f1 Global.Color.Brand.90 diff --git a/packages/tokens/src/alias/highContrastColor.ts b/packages/tokens/src/alias/highContrastColor.ts index 9aa68f0a873bbd..97e8efacb3e7b8 100644 --- a/packages/tokens/src/alias/highContrastColor.ts +++ b/packages/tokens/src/alias/highContrastColor.ts @@ -143,6 +143,7 @@ export const generateColorTokens = (): ColorTokens => ({ colorNeutralStroke1Selected: hcHighlight, // Highlight Global.Color.hcHighlight colorNeutralStroke2: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorNeutralStroke3: hcCanvasText, // CanvasText Global.Color.hcCanvasText + colorNeutralStrokeSubtle: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorNeutralStrokeOnBrand: hcCanvas, // Canvas Global.Color.hcCanvas colorNeutralStrokeOnBrand2: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorNeutralStrokeOnBrand2Hover: hcCanvasText, // CanvasText Global.Color.hcCanvasText @@ -150,6 +151,8 @@ export const generateColorTokens = (): ColorTokens => ({ colorNeutralStrokeOnBrand2Selected: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorBrandStroke1: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorBrandStroke2: hcCanvasText, // CanvasText Global.Color.hcCanvasText + colorBrandStroke2Hover: hcHighlight, // Highlight Global.Color.hcHighlight + colorBrandStroke2Pressed: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandStroke: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandStrokeHover: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandStrokePressed: hcHighlight, // Highlight Global.Color.hcHighlight diff --git a/packages/tokens/src/alias/lightColor.ts b/packages/tokens/src/alias/lightColor.ts index 456c95e9cb1d74..313605b93896e3 100644 --- a/packages/tokens/src/alias/lightColor.ts +++ b/packages/tokens/src/alias/lightColor.ts @@ -133,6 +133,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorNeutralStroke1Selected: grey[74], // #bdbdbd Global.Color.Grey.74 colorNeutralStroke2: grey[88], // #e0e0e0 Global.Color.Grey.88 colorNeutralStroke3: grey[94], // #f0f0f0 Global.Color.Grey.94 + colorNeutralStrokeSubtle: grey[88], // #e0e0e0 Global.Color.Grey.88 colorNeutralStrokeOnBrand: white, // #ffffff Global.Color.White colorNeutralStrokeOnBrand2: white, // #ffffff Global.Color.White colorNeutralStrokeOnBrand2Hover: white, // #ffffff Global.Color.White @@ -140,6 +141,8 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorNeutralStrokeOnBrand2Selected: white, // #ffffff Global.Color.White colorBrandStroke1: brand[80], // #0078d4 Global.Color.Brand.80 colorBrandStroke2: brand[140], // #c7e0f4 Global.Color.Brand.140 + colorBrandStroke2Hover: brand[120], // #6cb8f6 Global.Color.Brand.120 + colorBrandStroke2Pressed: brand[80], // #0078d4 Global.Color.Brand.80 colorCompoundBrandStroke: brand[80], // #0078d4 Global.Color.Brand.80 colorCompoundBrandStrokeHover: brand[70], // #106ebe Global.Color.Brand.70 colorCompoundBrandStrokePressed: brand[60], // #005a9e Global.Color.Brand.60 diff --git a/packages/tokens/src/alias/teamsDarkColor.ts b/packages/tokens/src/alias/teamsDarkColor.ts index a0e186bb7ccab8..4c34208f0a43f4 100644 --- a/packages/tokens/src/alias/teamsDarkColor.ts +++ b/packages/tokens/src/alias/teamsDarkColor.ts @@ -133,6 +133,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorNeutralStroke1Selected: grey[44], // #707070 Global.Color.Grey.44 colorNeutralStroke2: grey[32], // #525252 Global.Color.Grey.32 colorNeutralStroke3: grey[24], // #3d3d3d Global.Color.Grey.24 + colorNeutralStrokeSubtle: grey[4], // #0a0a0a Global.Color.Grey.4 colorNeutralStrokeOnBrand: grey[16], // #292929 Global.Color.Grey.16 colorNeutralStrokeOnBrand2: white, // #ffffff Global.Color.White colorNeutralStrokeOnBrand2Hover: white, // #ffffff Global.Color.White @@ -140,6 +141,8 @@ 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 + colorBrandStroke2Hover: brand[50], // #004c87 Global.Color.Brand.50 + colorBrandStroke2Pressed: brand[30], // #043862 Global.Color.Brand.30 colorCompoundBrandStroke: brand[90], // #1890f1 Global.Color.Brand.90 colorCompoundBrandStrokeHover: brand[100], // #2899f5 Global.Color.Brand.100 colorCompoundBrandStrokePressed: brand[80], // #0078d4 Global.Color.Brand.80 diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts index 9cd64c9b3163db..79a4f0823b1aaf 100644 --- a/packages/tokens/src/tokens.ts +++ b/packages/tokens/src/tokens.ts @@ -130,6 +130,7 @@ export const tokens: Record = { colorNeutralStroke1Selected: 'var(--colorNeutralStroke1Selected)', colorNeutralStroke2: 'var(--colorNeutralStroke2)', colorNeutralStroke3: 'var(--colorNeutralStroke3)', + colorNeutralStrokeSubtle: 'var(--colorNeutralStrokeSubtle)', colorNeutralStrokeOnBrand: 'var(--colorNeutralStrokeOnBrand)', colorNeutralStrokeOnBrand2: 'var(--colorNeutralStrokeOnBrand2)', colorNeutralStrokeOnBrand2Hover: 'var(--colorNeutralStrokeOnBrand2Hover)', @@ -137,6 +138,8 @@ export const tokens: Record = { colorNeutralStrokeOnBrand2Selected: 'var(--colorNeutralStrokeOnBrand2Selected)', colorBrandStroke1: 'var(--colorBrandStroke1)', colorBrandStroke2: 'var(--colorBrandStroke2)', + colorBrandStroke2Hover: 'var(--colorBrandStroke2Hover)', + colorBrandStroke2Pressed: 'var(--colorBrandStroke2Pressed)', colorCompoundBrandStroke: 'var(--colorCompoundBrandStroke)', colorCompoundBrandStrokeHover: 'var(--colorCompoundBrandStrokeHover)', colorCompoundBrandStrokePressed: 'var(--colorCompoundBrandStrokePressed)', diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index bb20a9b9ce4bd5..9f07e8e9d1528d 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -132,6 +132,7 @@ export type ColorTokens = { colorNeutralStroke1Selected: string; colorNeutralStroke2: string; colorNeutralStroke3: string; + colorNeutralStrokeSubtle: string; colorNeutralStrokeOnBrand: string; colorNeutralStrokeOnBrand2: string; colorNeutralStrokeOnBrand2Hover: string; @@ -139,6 +140,8 @@ export type ColorTokens = { colorNeutralStrokeOnBrand2Selected: string; colorBrandStroke1: string; colorBrandStroke2: string; + colorBrandStroke2Hover: string; + colorBrandStroke2Pressed: string; colorCompoundBrandStroke: string; colorCompoundBrandStrokeHover: string; colorCompoundBrandStrokePressed: string; From 211043b9dad9b8aee1a695a6702971f04caee1ca Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Thu, 11 May 2023 17:17:20 -0700 Subject: [PATCH 4/6] Fix colorBrandBackground2 in HC, revert change to colorBrandForeground2 in Teams Dark --- packages/tokens/src/alias/highContrastColor.ts | 2 +- packages/tokens/src/alias/teamsDarkColor.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tokens/src/alias/highContrastColor.ts b/packages/tokens/src/alias/highContrastColor.ts index 97e8efacb3e7b8..1eebd76f9dba8a 100644 --- a/packages/tokens/src/alias/highContrastColor.ts +++ b/packages/tokens/src/alias/highContrastColor.ts @@ -126,7 +126,7 @@ export const generateColorTokens = (): ColorTokens => ({ colorCompoundBrandBackgroundHover: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandBackgroundPressed: hcHighlight, // Highlight Global.Color.hcHighlight colorBrandBackgroundStatic: hcCanvas, // Canvas Global.Color.hcCanvas - colorBrandBackground2: hcCanvasText, // CanvasText Global.Color.hcCanvasText + colorBrandBackground2: hcCanvas, // Canvas Global.Color.hcCanvas colorBrandBackground2Hover: hcCanvas, // Canvas Global.Color.hcCanvas colorBrandBackground2Pressed: hcCanvas, // Canvas Global.Color.hcCanvas colorBrandBackgroundInverted: hcButtonFace, // ButtonFace Global.Color.hcButtonFace diff --git a/packages/tokens/src/alias/teamsDarkColor.ts b/packages/tokens/src/alias/teamsDarkColor.ts index 4c34208f0a43f4..181e6b1e02e0b3 100644 --- a/packages/tokens/src/alias/teamsDarkColor.ts +++ b/packages/tokens/src/alias/teamsDarkColor.ts @@ -38,7 +38,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ colorCompoundBrandForeground1Hover: brand[110], // #3aa0f3 Global.Color.Brand.110 colorCompoundBrandForeground1Pressed: brand[90], // #1890f1 Global.Color.Brand.90 colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100 - colorBrandForeground2: brand[110], // #3aa0f3 Global.Color.Brand.110 + colorBrandForeground2: brand[120], // #6cb8f6 Global.Color.Brand.120 colorBrandForeground2Hover: brand[130], // #82c7ff Global.Color.Brand.130 colorBrandForeground2Pressed: brand[160], // #eff6fc Global.Color.Brand.160 colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14 From a7c214aa4f849725becdfe282dbacbbf03e87a82 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Wed, 31 May 2023 17:39:53 +0200 Subject: [PATCH 5/6] fix Table brand selection high contrast --- .../src/components/TableRow/useTableRowStyles.styles.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts index eab5fef2cea162..aa7efb0d073cd3 100644 --- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts +++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.styles.ts @@ -100,11 +100,7 @@ const useStyles = makeStyles({ brand: { backgroundColor: tokens.colorBrandBackground2, - color: tokens.colorNeutralForeground1Hover, - ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand), - ':hover': { - backgroundColor: tokens.colorBrandBackground2, - }, + ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive), ':active': { backgroundColor: tokens.colorBrandBackgroundInvertedSelected, }, From ecc78f10ac6ac9ce4f713c86a48918006e116403 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 14 Jun 2023 10:57:48 -0700 Subject: [PATCH 6/6] react-table change file --- ...i-react-table-01d8f535-459b-49ce-98da-dfe35961923c.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-table-01d8f535-459b-49ce-98da-dfe35961923c.json diff --git a/change/@fluentui-react-table-01d8f535-459b-49ce-98da-dfe35961923c.json b/change/@fluentui-react-table-01d8f535-459b-49ce-98da-dfe35961923c.json new file mode 100644 index 00000000000000..8e80901bc89849 --- /dev/null +++ b/change/@fluentui-react-table-01d8f535-459b-49ce-98da-dfe35961923c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update table styles to reflect token changes", + "packageName": "@fluentui/react-table", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +}