From 3202aeb406d03ae48d523fc510f04e74548a1d5c Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 31 Aug 2022 15:23:14 +0200 Subject: [PATCH 1/2] fix(react-theme): Rename colorNeutralForegroundInvertedStatic to colorNeutralForegroundStaticInverted --- apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts | 2 +- .../react-avatar/src/components/Avatar/useAvatarStyles.ts | 2 +- .../react-badge/src/components/Badge/useBadgeStyles.ts | 4 ++-- .../src/components/PopoverSurface/usePopoverSurfaceStyles.ts | 2 +- .../react-spinner/src/components/Spinner/useSpinnerStyles.ts | 2 +- .../react-components/react-theme-sass/sass/colorTokens.scss | 2 +- packages/react-components/react-theme/etc/react-theme.api.md | 2 +- packages/react-components/react-theme/src/alias/darkColor.ts | 2 +- .../react-theme/src/alias/highContrastColor.ts | 2 +- packages/react-components/react-theme/src/alias/lightColor.ts | 2 +- .../react-components/react-theme/src/alias/teamsDarkColor.ts | 2 +- packages/react-components/react-theme/src/tokens.ts | 2 +- packages/react-components/react-theme/src/types.ts | 2 +- .../react-tooltip/src/components/Tooltip/useTooltipStyles.ts | 2 +- 14 files changed, 15 insertions(+), 15 deletions(-) diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts index cc93ee7513ed7..f4a66407d4d09 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts @@ -53,7 +53,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralForegroundInvertedPressed: palette.white, colorNeutralForegroundInvertedSelected: palette.white, colorNeutralForegroundOnBrand: palette.white, - colorNeutralForegroundInvertedStatic: palette.white, + colorNeutralForegroundStaticInverted: palette.white, colorNeutralForegroundInvertedLink: palette.white, colorNeutralForegroundInvertedLinkHover: palette.white, colorNeutralForegroundInvertedLinkPressed: palette.white, diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts index 558d9cc1572c8..028a1fdb749e9 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts +++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts @@ -254,7 +254,7 @@ const useColorStyles = makeStyles({ backgroundColor: tokens.colorNeutralBackground6, }, brand: { - color: tokens.colorNeutralForegroundInvertedStatic, + color: tokens.colorNeutralForegroundStaticInverted, backgroundColor: tokens.colorBrandBackgroundStatic, }, 'dark-red': { diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts index 6863a1230a847..33d47d4adb926 100644 --- a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts +++ b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts @@ -155,7 +155,7 @@ const useRootStyles = makeStyles({ color: tokens.colorPaletteDarkOrangeForeground3, }, 'ghost-subtle': { - color: tokens.colorNeutralForegroundInvertedStatic, + color: tokens.colorNeutralForegroundStaticInverted, }, 'ghost-success': { color: tokens.colorPaletteGreenForeground3, @@ -187,7 +187,7 @@ const useRootStyles = makeStyles({ color: tokens.colorPaletteDarkOrangeForeground3, }, 'outline-subtle': { - color: tokens.colorNeutralForegroundInvertedStatic, + color: tokens.colorNeutralForegroundStaticInverted, }, 'outline-success': { color: tokens.colorPaletteGreenForeground2, diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts index b6e7cea7eb15c..b4ff054be2b0e 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts +++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts @@ -28,7 +28,7 @@ const useStyles = makeStyles({ inverted: { backgroundColor: tokens.colorNeutralBackgroundStatic, - color: tokens.colorNeutralForegroundInvertedStatic, + color: tokens.colorNeutralForegroundStaticInverted, }, brand: { diff --git a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts index 5e548ee51dd34..23bb52e4b65a5 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts +++ b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts @@ -255,7 +255,7 @@ const useTrackStyles = makeStyles({ const useLabelStyles = makeStyles({ // style for label inverted: { - color: tokens.colorNeutralForegroundInvertedStatic, + color: tokens.colorNeutralForegroundStaticInverted, }, primary: {}, // no change diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss index bba56621996b1..a01c90782743b 100644 --- a/packages/react-components/react-theme-sass/sass/colorTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss @@ -38,7 +38,7 @@ $colorNeutralForegroundInvertedHover: var(--colorNeutralForegroundInvertedHover) $colorNeutralForegroundInvertedPressed: var(--colorNeutralForegroundInvertedPressed); $colorNeutralForegroundInvertedSelected: var(--colorNeutralForegroundInvertedSelected); $colorNeutralForegroundOnBrand: var(--colorNeutralForegroundOnBrand); -$colorNeutralForegroundInvertedStatic: var(--colorNeutralForegroundInvertedStatic); +$colorNeutralForegroundStaticInverted: var(--colorNeutralForegroundStaticInverted); $colorNeutralForegroundInvertedLink: var(--colorNeutralForegroundInvertedLink); $colorNeutralForegroundInvertedLinkHover: var(--colorNeutralForegroundInvertedLinkHover); $colorNeutralForegroundInvertedLinkPressed: var(--colorNeutralForegroundInvertedLinkPressed); diff --git a/packages/react-components/react-theme/etc/react-theme.api.md b/packages/react-components/react-theme/etc/react-theme.api.md index acf2d48db8f54..c830f9aab5bb9 100644 --- a/packages/react-components/react-theme/etc/react-theme.api.md +++ b/packages/react-components/react-theme/etc/react-theme.api.md @@ -170,7 +170,7 @@ export type ColorTokens = { colorNeutralForegroundInvertedPressed: string; colorNeutralForegroundInvertedSelected: string; colorNeutralForegroundOnBrand: string; - colorNeutralForegroundInvertedStatic: string; + colorNeutralForegroundStaticInverted: string; colorNeutralForegroundInvertedLink: string; colorNeutralForegroundInvertedLinkHover: string; colorNeutralForegroundInvertedLinkPressed: string; diff --git a/packages/react-components/react-theme/src/alias/darkColor.ts b/packages/react-components/react-theme/src/alias/darkColor.ts index 978321ca3e0e6..deb4f759d467c 100644 --- a/packages/react-components/react-theme/src/alias/darkColor.ts +++ b/packages/react-components/react-theme/src/alias/darkColor.ts @@ -40,7 +40,7 @@ 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 + colorNeutralForegroundStaticInverted: 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 diff --git a/packages/react-components/react-theme/src/alias/highContrastColor.ts b/packages/react-components/react-theme/src/alias/highContrastColor.ts index 69d4b14e7f32e..8ce6e79e742ec 100644 --- a/packages/react-components/react-theme/src/alias/highContrastColor.ts +++ b/packages/react-components/react-theme/src/alias/highContrastColor.ts @@ -50,7 +50,7 @@ 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 + colorNeutralForegroundStaticInverted: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorNeutralForegroundInverted: hcHighlightText, // HighlightText Global.Color.hcHighlightText colorNeutralForegroundInvertedHover: hcHighlightText, // HighlightText Global.Color.hcHighlightText colorNeutralForegroundInvertedPressed: hcHighlightText, // HighlightText Global.Color.hcHighlightText diff --git a/packages/react-components/react-theme/src/alias/lightColor.ts b/packages/react-components/react-theme/src/alias/lightColor.ts index a60435f3137e6..56f75adb2a526 100644 --- a/packages/react-components/react-theme/src/alias/lightColor.ts +++ b/packages/react-components/react-theme/src/alias/lightColor.ts @@ -40,7 +40,7 @@ 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 + colorNeutralForegroundStaticInverted: white, // #ffffff Global.Color.White colorNeutralForegroundInverted: white, // #ffffff Global.Color.White colorNeutralForegroundInvertedHover: white, // #ffffff Global.Color.White colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White diff --git a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts index 3fdac8f4fa5fb..aafa325e0411a 100644 --- a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts +++ b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts @@ -40,7 +40,7 @@ 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 + colorNeutralForegroundStaticInverted: 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 diff --git a/packages/react-components/react-theme/src/tokens.ts b/packages/react-components/react-theme/src/tokens.ts index 89f9e08868c08..bcd283d39ead5 100644 --- a/packages/react-components/react-theme/src/tokens.ts +++ b/packages/react-components/react-theme/src/tokens.ts @@ -38,7 +38,7 @@ export const tokens: Record = { colorNeutralForegroundInvertedHover: 'var(--colorNeutralForegroundInvertedHover)', colorNeutralForegroundInvertedPressed: 'var(--colorNeutralForegroundInvertedPressed)', colorNeutralForegroundInvertedSelected: 'var(--colorNeutralForegroundInvertedSelected)', - colorNeutralForegroundInvertedStatic: 'var(--colorNeutralForegroundInvertedStatic)', + colorNeutralForegroundStaticInverted: 'var(--colorNeutralForegroundStaticInverted)', colorNeutralForegroundInvertedLink: 'var(--colorNeutralForegroundInvertedLink)', colorNeutralForegroundInvertedLinkHover: 'var(--colorNeutralForegroundInvertedLinkHover)', colorNeutralForegroundInvertedLinkPressed: 'var(--colorNeutralForegroundInvertedLinkPressed)', diff --git a/packages/react-components/react-theme/src/types.ts b/packages/react-components/react-theme/src/types.ts index 2c1c9955ddb54..40c8044a3283a 100644 --- a/packages/react-components/react-theme/src/types.ts +++ b/packages/react-components/react-theme/src/types.ts @@ -44,7 +44,7 @@ export type ColorTokens = { colorNeutralForegroundInvertedPressed: string; colorNeutralForegroundInvertedSelected: string; colorNeutralForegroundOnBrand: string; - colorNeutralForegroundInvertedStatic: string; + colorNeutralForegroundStaticInverted: string; colorNeutralForegroundInvertedLink: string; colorNeutralForegroundInvertedLinkHover: string; colorNeutralForegroundInvertedLinkPressed: string; diff --git a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts index e84b034bd9c21..786dba5a2fb40 100644 --- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts +++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts @@ -40,7 +40,7 @@ const useStyles = makeStyles({ inverted: { backgroundColor: tokens.colorNeutralBackgroundStatic, - color: tokens.colorNeutralForegroundInvertedStatic, + color: tokens.colorNeutralForegroundStaticInverted, }, arrow: createArrowStyles({ arrowHeight }), From a286549f652723696a544f29adcd473411d016ec Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 31 Aug 2022 15:25:18 +0200 Subject: [PATCH 2/2] change files --- ...-react-avatar-bbc12538-d128-45e3-9f9b-302829fede9d.json | 7 +++++++ ...i-react-badge-749f0a23-1986-4a17-899d-be7ef2db5724.json | 7 +++++++ ...react-popover-38cb556a-cc08-471a-8aeb-878b78bbbbcd.json | 7 +++++++ ...react-spinner-3631728e-701e-46a0-a6b5-41fb4785a921.json | 7 +++++++ ...i-react-theme-591d6c0f-d093-4b79-ae3e-067b74c7c0d0.json | 7 +++++++ ...ct-theme-sass-8ca8c7e8-cbe6-4104-b893-1de751254302.json | 7 +++++++ ...react-tooltip-f76bb687-2740-4cb7-a9be-63917260000f.json | 7 +++++++ 7 files changed, 49 insertions(+) create mode 100644 change/@fluentui-react-avatar-bbc12538-d128-45e3-9f9b-302829fede9d.json create mode 100644 change/@fluentui-react-badge-749f0a23-1986-4a17-899d-be7ef2db5724.json create mode 100644 change/@fluentui-react-popover-38cb556a-cc08-471a-8aeb-878b78bbbbcd.json create mode 100644 change/@fluentui-react-spinner-3631728e-701e-46a0-a6b5-41fb4785a921.json create mode 100644 change/@fluentui-react-theme-591d6c0f-d093-4b79-ae3e-067b74c7c0d0.json create mode 100644 change/@fluentui-react-theme-sass-8ca8c7e8-cbe6-4104-b893-1de751254302.json create mode 100644 change/@fluentui-react-tooltip-f76bb687-2740-4cb7-a9be-63917260000f.json diff --git a/change/@fluentui-react-avatar-bbc12538-d128-45e3-9f9b-302829fede9d.json b/change/@fluentui-react-avatar-bbc12538-d128-45e3-9f9b-302829fede9d.json new file mode 100644 index 0000000000000..0fac9579a59f5 --- /dev/null +++ b/change/@fluentui-react-avatar-bbc12538-d128-45e3-9f9b-302829fede9d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted", + "packageName": "@fluentui/react-avatar", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-badge-749f0a23-1986-4a17-899d-be7ef2db5724.json b/change/@fluentui-react-badge-749f0a23-1986-4a17-899d-be7ef2db5724.json new file mode 100644 index 0000000000000..256cfd9eb59cc --- /dev/null +++ b/change/@fluentui-react-badge-749f0a23-1986-4a17-899d-be7ef2db5724.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted", + "packageName": "@fluentui/react-badge", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-38cb556a-cc08-471a-8aeb-878b78bbbbcd.json b/change/@fluentui-react-popover-38cb556a-cc08-471a-8aeb-878b78bbbbcd.json new file mode 100644 index 0000000000000..2f057dd013aac --- /dev/null +++ b/change/@fluentui-react-popover-38cb556a-cc08-471a-8aeb-878b78bbbbcd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted", + "packageName": "@fluentui/react-popover", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinner-3631728e-701e-46a0-a6b5-41fb4785a921.json b/change/@fluentui-react-spinner-3631728e-701e-46a0-a6b5-41fb4785a921.json new file mode 100644 index 0000000000000..662ad0af12c98 --- /dev/null +++ b/change/@fluentui-react-spinner-3631728e-701e-46a0-a6b5-41fb4785a921.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted", + "packageName": "@fluentui/react-spinner", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-theme-591d6c0f-d093-4b79-ae3e-067b74c7c0d0.json b/change/@fluentui-react-theme-591d6c0f-d093-4b79-ae3e-067b74c7c0d0.json new file mode 100644 index 0000000000000..3c3cd9723ea50 --- /dev/null +++ b/change/@fluentui-react-theme-591d6c0f-d093-4b79-ae3e-067b74c7c0d0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted", + "packageName": "@fluentui/react-theme", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-theme-sass-8ca8c7e8-cbe6-4104-b893-1de751254302.json b/change/@fluentui-react-theme-sass-8ca8c7e8-cbe6-4104-b893-1de751254302.json new file mode 100644 index 0000000000000..8b03764ff06df --- /dev/null +++ b/change/@fluentui-react-theme-sass-8ca8c7e8-cbe6-4104-b893-1de751254302.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted", + "packageName": "@fluentui/react-theme-sass", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tooltip-f76bb687-2740-4cb7-a9be-63917260000f.json b/change/@fluentui-react-tooltip-f76bb687-2740-4cb7-a9be-63917260000f.json new file mode 100644 index 0000000000000..d5e62b9856dfe --- /dev/null +++ b/change/@fluentui-react-tooltip-f76bb687-2740-4cb7-a9be-63917260000f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted", + "packageName": "@fluentui/react-tooltip", + "email": "miroslav.stastny@microsoft.com", + "dependentChangeType": "patch" +}