Skip to content

fix(react-theme): Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted #24611

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 2 commits into from
Aug 31, 2022
Merged

fix(react-theme): Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted #24611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3202aeb
fix(react-theme): Rename colorNeutralForegroundInvertedStatic to colo…
miroslavstastny Aug 31, 2022
a286549
change files
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
2 changes: 1 addition & 1 deletion apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor

@spmonahan spmonahan Aug 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason I went with "inverted static" is because I felt it better aligned with our other usages of "inverted" which are all "inverted {modifier}". To me "static" feels like a modifier much like "pressed" or "hover".

I'm fine with changing it too :)

Copy link
Member Author

@miroslavstastny miroslavstastny Aug 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that makes sense. But the reason why it is StaticInverted is to point out that for this particular token, Static it is not a modifier of Inverted.

colorNeutralForegroundInvertedLink: palette.white,
colorNeutralForegroundInvertedLinkHover: palette.white,
colorNeutralForegroundInvertedLinkPressed: palette.white,
Expand Down
7 changes: 7 additions & 0 deletions change/@fluentui-react-avatar-bbc12538-d128-45e3-9f9b-302829fede9d.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted",
"packageName": "@fluentui/react-avatar",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-badge-749f0a23-1986-4a17-899d-be7ef2db5724.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted",
"packageName": "@fluentui/react-badge",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-popover-38cb556a-cc08-471a-8aeb-878b78bbbbcd.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted",
"packageName": "@fluentui/react-popover",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-spinner-3631728e-701e-46a0-a6b5-41fb4785a921.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted",
"packageName": "@fluentui/react-spinner",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-theme-591d6c0f-d093-4b79-ae3e-067b74c7c0d0.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted",
"packageName": "@fluentui/react-theme",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-theme-sass-8ca8c7e8-cbe6-4104-b893-1de751254302.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted",
"packageName": "@fluentui/react-theme-sass",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-tooltip-f76bb687-2740-4cb7-a9be-63917260000f.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted",
"packageName": "@fluentui/react-tooltip",
"email": "[email protected]",
"dependentChangeType": "patch"
}
2 changes: 1 addition & 1 deletion packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ const useColorStyles = makeStyles({
backgroundColor: tokens.colorNeutralBackground6,
},
brand: {
color: tokens.colorNeutralForegroundInvertedStatic,
color: tokens.colorNeutralForegroundStaticInverted,
backgroundColor: tokens.colorBrandBackgroundStatic,
},
'dark-red': {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const useRootStyles = makeStyles({
color: tokens.colorPaletteDarkOrangeForeground3,
},
'ghost-subtle': {
color: tokens.colorNeutralForegroundInvertedStatic,
color: tokens.colorNeutralForegroundStaticInverted,
},
'ghost-success': {
color: tokens.colorPaletteGreenForeground3,
Expand Down Expand Up @@ -187,7 +187,7 @@ const useRootStyles = makeStyles({
color: tokens.colorPaletteDarkOrangeForeground3,
},
'outline-subtle': {
color: tokens.colorNeutralForegroundInvertedStatic,
color: tokens.colorNeutralForegroundStaticInverted,
},
'outline-success': {
color: tokens.colorPaletteGreenForeground2,
Expand Down
2 changes: 1 addition & 1 deletion ...s/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const useStyles = makeStyles({

inverted: {
backgroundColor: tokens.colorNeutralBackgroundStatic,
color: tokens.colorNeutralForegroundInvertedStatic,
color: tokens.colorNeutralForegroundStaticInverted,
},

brand: {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ const useTrackStyles = makeStyles({
const useLabelStyles = makeStyles({
// style for label
inverted: {
color: tokens.colorNeutralForegroundInvertedStatic,
color: tokens.colorNeutralForegroundStaticInverted,
},

primary: {}, // no change
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-theme-sass/sass/colorTokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-theme/etc/react-theme.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export type ColorTokens = {
colorNeutralForegroundInvertedPressed: string;
colorNeutralForegroundInvertedSelected: string;
colorNeutralForegroundOnBrand: string;
colorNeutralForegroundInvertedStatic: string;
colorNeutralForegroundStaticInverted: string;
colorNeutralForegroundInvertedLink: string;
colorNeutralForegroundInvertedLinkHover: string;
colorNeutralForegroundInvertedLinkPressed: string;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-theme/src/alias/darkColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-theme/src/alias/highContrastColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-theme/src/alias/lightColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-theme/src/alias/teamsDarkColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-theme/src/tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const tokens: Record<keyof Theme, string> = {
colorNeutralForegroundInvertedHover: 'var(--colorNeutralForegroundInvertedHover)',
colorNeutralForegroundInvertedPressed: 'var(--colorNeutralForegroundInvertedPressed)',
colorNeutralForegroundInvertedSelected: 'var(--colorNeutralForegroundInvertedSelected)',
colorNeutralForegroundInvertedStatic: 'var(--colorNeutralForegroundInvertedStatic)',
colorNeutralForegroundStaticInverted: 'var(--colorNeutralForegroundStaticInverted)',
colorNeutralForegroundInvertedLink: 'var(--colorNeutralForegroundInvertedLink)',
colorNeutralForegroundInvertedLinkHover: 'var(--colorNeutralForegroundInvertedLinkHover)',
colorNeutralForegroundInvertedLinkPressed: 'var(--colorNeutralForegroundInvertedLinkPressed)',
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-theme/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export type ColorTokens = {
colorNeutralForegroundInvertedPressed: string;
colorNeutralForegroundInvertedSelected: string;
colorNeutralForegroundOnBrand: string;
colorNeutralForegroundInvertedStatic: string;
colorNeutralForegroundStaticInverted: string;
colorNeutralForegroundInvertedLink: string;
colorNeutralForegroundInvertedLinkHover: string;
colorNeutralForegroundInvertedLinkPressed: string;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const useStyles = makeStyles({

inverted: {
backgroundColor: tokens.colorNeutralBackgroundStatic,
color: tokens.colorNeutralForegroundInvertedStatic,
color: tokens.colorNeutralForegroundStaticInverted,
},

arrow: createArrowStyles({ arrowHeight }),
Expand Down