diff --git a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts index 9d4fa77d734a33..cc93ee7513ed7a 100644 --- a/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts +++ b/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts @@ -6,7 +6,7 @@ import { Theme as ThemeV9, webLightTheme, } from '@fluentui/react-components'; -import { blackAlpha, whiteAlpha } from './themeDuplicates'; +import { blackAlpha, whiteAlpha, grey } from './themeDuplicates'; /** * Creates v9 color tokens from a v8 palette. @@ -53,6 +53,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralForegroundInvertedPressed: palette.white, colorNeutralForegroundInvertedSelected: palette.white, colorNeutralForegroundOnBrand: palette.white, + colorNeutralForegroundInvertedStatic: palette.white, colorNeutralForegroundInvertedLink: palette.white, colorNeutralForegroundInvertedLinkHover: palette.white, colorNeutralForegroundInvertedLinkPressed: palette.white, @@ -85,6 +86,7 @@ const mapAliasColors = (palette: IPalette, inverted: boolean): ColorTokens => { colorNeutralBackground5Pressed: palette.neutralLighter, colorNeutralBackground5Selected: palette.neutralLighterAlt, colorNeutralBackground6: palette.neutralLight, + colorNeutralBackgroundStatic: grey[20], colorNeutralBackgroundInverted: palette.neutralSecondary, colorSubtleBackground: 'transparent', colorSubtleBackgroundHover: palette.neutralLighter, diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx index 9ee1e9dd171239..a65bc9a84bceb0 100644 --- a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx @@ -1,8 +1,16 @@ import * as React from 'react'; import { storiesOf } from '@storybook/react'; import { Spinner } from '@fluentui/react-spinner'; +import { tokens } from '@fluentui/react-theme'; import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator'; +// Inverted Spinners are meant to be used over a dark background +// or photo. This wrapper ensures a dark background so the Spinners +// are consistently visible. +const InvertedWrapper: React.FC = ({ children }) => { + return
{children}
; +}; + storiesOf('Spinner converged', module) .addDecorator(TestWrapperDecoratorNoAnimation) .addStory('Primary', () => , { @@ -75,17 +83,37 @@ storiesOf('Spinner converged', module) includeHighContrast: true, includeDarkMode: true, }) - .addStory('Inverted', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Inverted with Label', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) + .addStory( + 'Inverted', + () => ( + + + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'Inverted with Label', + () => ( + + + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) .addStory( 'Inverted with Label Before', - () => , + () => ( + + + + ), { includeHighContrast: true, includeDarkMode: true, @@ -93,7 +121,11 @@ storiesOf('Spinner converged', module) ) .addStory( 'Inverted with Label After', - () => , + () => ( + + + + ), { includeHighContrast: true, includeDarkMode: true, @@ -101,7 +133,11 @@ storiesOf('Spinner converged', module) ) .addStory( 'Inverted with Label Above', - () => , + () => ( + + + + ), { includeHighContrast: true, includeDarkMode: true, @@ -109,45 +145,97 @@ storiesOf('Spinner converged', module) ) .addStory( 'Inverted with Label Below', - () => , + () => ( + + + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'Primary with Size Tiny', + () => ( + + + + ), { includeHighContrast: true, includeDarkMode: true, }, ) - .addStory('Primary with Size Tiny', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) .addStory( 'Inverted with Size Extra Small', - () => , + () => ( + + + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'Inverted with Size Small', + () => ( + + + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'Inverted with Size Medium', + () => ( + + + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'Inverted with Size Large', + () => ( + + + + ), { includeHighContrast: true, includeDarkMode: true, }, ) - .addStory('Inverted with Size Small', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Inverted with Size Medium', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Inverted with Size Large', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) .addStory( 'Inverted with Size Extra Large', - () => , + () => ( + + + + ), { includeHighContrast: true, includeDarkMode: true, }, ) - .addStory('Inverted with Huge', () => , { - includeHighContrast: true, - includeDarkMode: true, - }); + .addStory( + 'Inverted with Huge', + () => ( + + + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ); diff --git a/change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json b/change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json new file mode 100644 index 00000000000000..ae59886993ad1b --- /dev/null +++ b/change/@fluentui-react-avatar-cf0035ba-5a49-4a26-9473-2fc7a29d34cd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update color tokens", + "packageName": "@fluentui/react-avatar", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json b/change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json new file mode 100644 index 00000000000000..9ce3e6e7717c5b --- /dev/null +++ b/change/@fluentui-react-badge-51dc5f10-7c9b-4b8c-9b1d-5ab8afc5ab54.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update color tokens", + "packageName": "@fluentui/react-badge", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json b/change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json new file mode 100644 index 00000000000000..266cd64bb2de22 --- /dev/null +++ b/change/@fluentui-react-checkbox-94e0861e-f646-46f7-ae40-eb2b0b0f59ca.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update color tokens", + "packageName": "@fluentui/react-checkbox", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json b/change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json new file mode 100644 index 00000000000000..82ceb9a09ab383 --- /dev/null +++ b/change/@fluentui-react-popover-b12a35f1-9fa8-418f-af79-dc3fc7ea18bb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update color tokens", + "packageName": "@fluentui/react-popover", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json b/change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json new file mode 100644 index 00000000000000..f15038c532c70b --- /dev/null +++ b/change/@fluentui-react-spinner-b347a78d-da01-4087-9046-45412344cf1c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update color tokens", + "packageName": "@fluentui/react-spinner", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json b/change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json new file mode 100644 index 00000000000000..f3710527bb26ac --- /dev/null +++ b/change/@fluentui-react-switch-23635943-537c-42d9-b219-575f3820e354.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update color tokens", + "packageName": "@fluentui/react-switch", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json b/change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json new file mode 100644 index 00000000000000..e6862043e42e6b --- /dev/null +++ b/change/@fluentui-react-theme-0a451fa0-2086-4a99-94c0-b3eb642e18eb.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update token values to fix failing color contrast", + "packageName": "@fluentui/react-theme", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json b/change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json new file mode 100644 index 00000000000000..9466cb9987d485 --- /dev/null +++ b/change/@fluentui-react-theme-sass-7c908a09-e43e-4e41-96c5-60c62bbc3249.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: add new color tokens", + "packageName": "@fluentui/react-theme-sass", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json b/change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json new file mode 100644 index 00000000000000..10e4d3e71283bd --- /dev/null +++ b/change/@fluentui-react-tooltip-80b8fd2e-8725-4e1e-ad43-3d4a2e9d7a5b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update color tokens", + "packageName": "@fluentui/react-tooltip", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} 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 275a9117622ea8..558d9cc1572c80 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.colorNeutralForegroundInverted, + color: tokens.colorNeutralForegroundInvertedStatic, 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 03ff949c795aba..6863a1230a8475 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.colorNeutralForegroundInverted, + color: tokens.colorNeutralForegroundInvertedStatic, }, 'ghost-success': { color: tokens.colorPaletteGreenForeground3, @@ -187,7 +187,7 @@ const useRootStyles = makeStyles({ color: tokens.colorPaletteDarkOrangeForeground3, }, 'outline-subtle': { - color: tokens.colorNeutralForegroundInverted, + color: tokens.colorNeutralForegroundInvertedStatic, }, 'outline-success': { color: tokens.colorPaletteGreenForeground2, diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index 5d525ea80fc0eb..760f82030719a7 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -76,7 +76,7 @@ const useInputStyles = makeStyles({ }, [`& ~ .${checkboxClassNames.indicator}`]: { backgroundColor: tokens.colorCompoundBrandBackground, - color: tokens.colorNeutralForegroundOnBrand, + color: tokens.colorNeutralForegroundInverted, ...shorthands.borderColor(tokens.colorCompoundBrandBackground), }, 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 e1c14f01913f6b..b6e7cea7eb15c2 100644 --- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts +++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts @@ -27,15 +27,13 @@ const useStyles = makeStyles({ }, inverted: { - // TODO: neutral background inverted missing from superset and theme - backgroundColor: tokens.colorNeutralForeground1, - color: tokens.colorNeutralForegroundInverted, + backgroundColor: tokens.colorNeutralBackgroundStatic, + color: tokens.colorNeutralForegroundInvertedStatic, }, brand: { backgroundColor: tokens.colorBrandBackground, - // TODO: clarify with designers what foreground color should be with brand background, - color: tokens.colorNeutralForegroundInverted, + color: tokens.colorNeutralForegroundOnBrand, }, smallPadding: { diff --git a/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx b/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx new file mode 100644 index 00000000000000..69025bdba04b78 --- /dev/null +++ b/packages/react-components/react-popover/src/stories/Popover/PopoverAppearance.stories.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { makeStyles, Button, Popover, PopoverSurface, PopoverTrigger, tokens } from '@fluentui/react-components'; + +const useStyles = makeStyles({ + contentHeader: { + marginTop: '0', + }, +}); + +const useLayoutStyles = makeStyles({ + root: { + display: 'flex', + flexDirection: 'column', + rowGap: tokens.spacingVerticalMNudge, + }, +}); + +const ExampleContent = () => { + const styles = useStyles(); + return ( +
+

Popover content

+ +
This is some popover content
+
+ ); +}; + +export const Appearance = () => { + const layoutStyles = useLayoutStyles(); + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; diff --git a/packages/react-components/react-popover/src/stories/Popover/index.stories.tsx b/packages/react-components/react-popover/src/stories/Popover/index.stories.tsx index 73379052df332b..1aed1c2c4cd028 100644 --- a/packages/react-components/react-popover/src/stories/Popover/index.stories.tsx +++ b/packages/react-components/react-popover/src/stories/Popover/index.stories.tsx @@ -11,6 +11,7 @@ export { NestedPopovers } from './PopoverNestedPopovers.stories'; export { AnchorToCustomTarget } from './PopoverAnchorToCustomTarget.stories'; export { CustomTrigger } from './PopoverCustomTrigger.stories'; export { InternalUpdateContent } from './PopoverInternalUpdateContent.stories'; +export { Appearance } from './PopoverAppearance.stories'; export default { title: 'Components/Popover', 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 882309902900a2..dd414d29deb04f 100644 --- a/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts +++ b/packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts @@ -106,7 +106,7 @@ const useLoaderStyles = makeStyles({ }, }, - extraSmall: { + 'extra-small': { ['& > svg']: { height: spinnnerSizes.extraSmall, width: spinnnerSizes.extraSmall, @@ -150,7 +150,7 @@ const useLoaderStyles = makeStyles({ }, }, - extraLarge: { + 'extra-large': { ['& > svg']: { height: spinnnerSizes.extraLarge, width: spinnnerSizes.extraLarge, @@ -207,7 +207,7 @@ const useTrackStyles = makeStyles({ }, ['& > svg > circle.fui-Spinner__Track']: { - stroke: tokens.colorNeutralBackgroundInverted, + stroke: 'rgba(255, 255, 255, 0.2)', // this is whiteAlpha[20] but that token is not exported }, }, primary: { @@ -244,7 +244,7 @@ const useTrackStyles = makeStyles({ }, }, ['& > svg > circle.fui-Spinner__Track']: { - stroke: tokens.colorNeutralBackground4, + stroke: tokens.colorBrandStroke2, '@media screen and (forced-colors: active)': { stroke: tokens.colorNeutralBackgroundInverted, }, @@ -254,12 +254,17 @@ const useTrackStyles = makeStyles({ const useLabelStyles = makeStyles({ // style for label + inverted: { + color: tokens.colorNeutralForegroundInvertedStatic, + }, + + primary: {}, // no change tiny: { ...typographyStyles.body1, }, - extraSmall: { + 'extra-small': { ...typographyStyles.body1, }, @@ -275,7 +280,7 @@ const useLabelStyles = makeStyles({ ...typographyStyles.subtitle2, }, - extraLarge: { + 'extra-large': { ...typographyStyles.subtitle2, }, @@ -288,7 +293,7 @@ const useLabelStyles = makeStyles({ * Apply styling to the Spinner slots based on the state */ export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => { - const { labelPosition, size = 'medium' } = state; + const { labelPosition, size, appearance } = state; const rootStyles = useRootStyles(); const spinnerStyles = useLoaderStyles(); const labelStyles = useLabelStyles(); @@ -301,23 +306,20 @@ export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className, ); - if (state.spinner && state.appearance) { + if (state.spinner && appearance) { state.spinner.className = mergeClasses( spinnerClassNames.spinner, spinnerStyles.spinnerSVG, - size === 'extra-small' && spinnerStyles.extraSmall, - size === 'extra-large' && spinnerStyles.extraLarge, - size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size], - trackStyles[state.appearance], + spinnerStyles[size], + trackStyles[appearance], state.spinner.className, ); } if (state.label) { state.label.className = mergeClasses( spinnerClassNames.label, - size === 'extra-small' && labelStyles.extraSmall, - size === 'extra-large' && labelStyles.extraLarge, - size !== 'extra-large' && size !== 'extra-small' && labelStyles[size], + labelStyles[size], + labelStyles[appearance], state.label.className, ); } diff --git a/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx b/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx index 1554e96e5b8458..c7b8b35b880ff5 100644 --- a/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx +++ b/packages/react-components/react-spinner/src/stories/Spinner/SpinnerAppearance.stories.tsx @@ -5,6 +5,12 @@ const useStyles = makeStyles({ container: { '> div': { ...shorthands.padding('20px') }, }, + + // Inverted Spinners are meant as overlays (e.g., over an image or similar) + // so give it a solid, dark background so it is visible in all themes. + invertedWrapper: { + backgroundColor: '#af33a1', + }, }); export const Appearance = () => { @@ -14,7 +20,9 @@ export const Appearance = () => {
- +
+ +
); }; diff --git a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts index 3a1d77987446af..170635e5a036bb 100644 --- a/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts +++ b/packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts @@ -134,21 +134,21 @@ const useInputStyles = makeStyles({ // Enabled and checked ':enabled:checked': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorBrandBackground, - color: tokens.colorNeutralForegroundOnBrand, + backgroundColor: tokens.colorCompoundBrandBackground, + color: tokens.colorNeutralForegroundInverted, ...shorthands.borderColor(tokens.colorTransparentStroke), }, ':hover': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorBrandBackgroundHover, + backgroundColor: tokens.colorCompoundBrandBackgroundHover, ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive), }, }, ':hover:active': { [`& ~ .${switchClassNames.indicator}`]: { - backgroundColor: tokens.colorBrandBackgroundPressed, + backgroundColor: tokens.colorCompoundBrandBackgroundPressed, ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive), }, }, diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss index 7cc8f32db26f39..bba56621996b14 100644 --- a/packages/react-components/react-theme-sass/sass/colorTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss @@ -38,6 +38,7 @@ $colorNeutralForegroundInvertedHover: var(--colorNeutralForegroundInvertedHover) $colorNeutralForegroundInvertedPressed: var(--colorNeutralForegroundInvertedPressed); $colorNeutralForegroundInvertedSelected: var(--colorNeutralForegroundInvertedSelected); $colorNeutralForegroundOnBrand: var(--colorNeutralForegroundOnBrand); +$colorNeutralForegroundInvertedStatic: var(--colorNeutralForegroundInvertedStatic); $colorNeutralForegroundInvertedLink: var(--colorNeutralForegroundInvertedLink); $colorNeutralForegroundInvertedLinkHover: var(--colorNeutralForegroundInvertedLinkHover); $colorNeutralForegroundInvertedLinkPressed: var(--colorNeutralForegroundInvertedLinkPressed); @@ -70,6 +71,7 @@ $colorNeutralBackground5Hover: var(--colorNeutralBackground5Hover); $colorNeutralBackground5Pressed: var(--colorNeutralBackground5Pressed); $colorNeutralBackground5Selected: var(--colorNeutralBackground5Selected); $colorNeutralBackground6: var(--colorNeutralBackground6); +$colorNeutralBackgroundStatic: var(--colorNeutralBackgroundStatic); $colorNeutralBackgroundInverted: var(--colorNeutralBackgroundInverted); $colorSubtleBackground: var(--colorSubtleBackground); $colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover); 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 bd9f29b1f2dd75..3d354acd64270a 100644 --- a/packages/react-components/react-theme/etc/react-theme.api.md +++ b/packages/react-components/react-theme/etc/react-theme.api.md @@ -170,6 +170,7 @@ export type ColorTokens = { colorNeutralForegroundInvertedPressed: string; colorNeutralForegroundInvertedSelected: string; colorNeutralForegroundOnBrand: string; + colorNeutralForegroundInvertedStatic: string; colorNeutralForegroundInvertedLink: string; colorNeutralForegroundInvertedLinkHover: string; colorNeutralForegroundInvertedLinkPressed: string; @@ -202,6 +203,7 @@ export type ColorTokens = { colorNeutralBackground5Pressed: string; colorNeutralBackground5Selected: string; colorNeutralBackground6: string; + colorNeutralBackgroundStatic: string; colorNeutralBackgroundInverted: string; colorSubtleBackground: string; colorSubtleBackgroundHover: string; diff --git a/packages/react-components/react-theme/src/alias/darkColor.ts b/packages/react-components/react-theme/src/alias/darkColor.ts index af1b3c0833e32e..1ca7c212526378 100644 --- a/packages/react-components/react-theme/src/alias/darkColor.ts +++ b/packages/react-components/react-theme/src/alias/darkColor.ts @@ -37,11 +37,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 - colorNeutralForegroundInverted: white, // #ffffff Global.Color.White - colorNeutralForegroundInvertedHover: white, // #ffffff Global.Color.White - colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White - colorNeutralForegroundInvertedSelected: 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 @@ -74,7 +75,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 - colorNeutralBackgroundInverted: grey[24], // #3d3d3d Global.Color.Grey.24 + colorNeutralBackgroundStatic: grey[24], // #3d3d3d Global.Color.Grey.24 + colorNeutralBackgroundInverted: white, // #ffffff Global.Color.White 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/alias/highContrastColor.ts b/packages/react-components/react-theme/src/alias/highContrastColor.ts index 74fbc19b55e53f..6ef05cca2f294f 100644 --- a/packages/react-components/react-theme/src/alias/highContrastColor.ts +++ b/packages/react-components/react-theme/src/alias/highContrastColor.ts @@ -47,11 +47,12 @@ export const generateColorTokens = (): ColorTokens => ({ colorBrandForeground1: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorBrandForeground2: hcButtonText, // ButtonText Global.Color.hcButtonText colorNeutralForeground1Static: hcCanvas, // Canvas Global.Color.hcCanvas - colorNeutralForegroundInverted: 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 @@ -84,6 +85,7 @@ 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 colorSubtleBackground: 'transparent', // transparent undefined colorSubtleBackgroundHover: hcHighlight, // Highlight Global.Color.hcHighlight @@ -135,7 +137,7 @@ export const generateColorTokens = (): ColorTokens => ({ colorNeutralStrokeOnBrand2Pressed: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorNeutralStrokeOnBrand2Selected: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorBrandStroke1: hcCanvasText, // CanvasText Global.Color.hcCanvasText - colorBrandStroke2: hcCanvas, // Canvas Global.Color.hcCanvas + colorBrandStroke2: hcCanvasText, // CanvasText Global.Color.hcCanvasText colorCompoundBrandStroke: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandStrokeHover: hcHighlight, // Highlight Global.Color.hcHighlight colorCompoundBrandStrokePressed: 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 7d1864a381d96c..22a273c55cba97 100644 --- a/packages/react-components/react-theme/src/alias/lightColor.ts +++ b/packages/react-components/react-theme/src/alias/lightColor.ts @@ -42,6 +42,7 @@ export const generateColorTokens = (brand: BrandVariants): ColorTokens => ({ 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 @@ -74,7 +75,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 - colorNeutralBackgroundInverted: grey[38], // #616161 Global.Color.Grey.38 + colorNeutralBackgroundStatic: grey[20], // #333333 Global.Color.Grey.20 + colorNeutralBackgroundInverted: grey[16], // #292929 Global.Color.Grey.16 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 bac7f9c0e578b6..89c1ae9850e8ff 100644 --- a/packages/react-components/react-theme/src/alias/teamsDarkColor.ts +++ b/packages/react-components/react-theme/src/alias/teamsDarkColor.ts @@ -37,11 +37,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 - colorNeutralForegroundInverted: white, // #ffffff Global.Color.White - colorNeutralForegroundInvertedHover: white, // #ffffff Global.Color.White - colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White - colorNeutralForegroundInvertedSelected: 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 @@ -74,7 +75,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: grey[24], // #3d3d3d Global.Color.Grey.24 + 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/tokens.ts b/packages/react-components/react-theme/src/tokens.ts index 0a54f61fc9620c..db2f0682a84900 100644 --- a/packages/react-components/react-theme/src/tokens.ts +++ b/packages/react-components/react-theme/src/tokens.ts @@ -38,6 +38,7 @@ export const tokens: Record = { colorNeutralForegroundInvertedHover: 'var(--colorNeutralForegroundInvertedHover)', colorNeutralForegroundInvertedPressed: 'var(--colorNeutralForegroundInvertedPressed)', colorNeutralForegroundInvertedSelected: 'var(--colorNeutralForegroundInvertedSelected)', + colorNeutralForegroundInvertedStatic: 'var(--colorNeutralForegroundInvertedStatic)', colorNeutralForegroundInvertedLink: 'var(--colorNeutralForegroundInvertedLink)', colorNeutralForegroundInvertedLinkHover: 'var(--colorNeutralForegroundInvertedLinkHover)', colorNeutralForegroundInvertedLinkPressed: 'var(--colorNeutralForegroundInvertedLinkPressed)', @@ -74,6 +75,7 @@ export const tokens: Record = { colorNeutralBackground5Pressed: 'var(--colorNeutralBackground5Pressed)', colorNeutralBackground5Selected: 'var(--colorNeutralBackground5Selected)', colorNeutralBackground6: 'var(--colorNeutralBackground6)', + colorNeutralBackgroundStatic: 'var(--colorNeutralBackgroundStatic)', colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)', colorSubtleBackground: 'var(--colorSubtleBackground)', colorSubtleBackgroundHover: 'var(--colorSubtleBackgroundHover)', diff --git a/packages/react-components/react-theme/src/types.ts b/packages/react-components/react-theme/src/types.ts index 73a6b59e82e349..7dd9a72a380e26 100644 --- a/packages/react-components/react-theme/src/types.ts +++ b/packages/react-components/react-theme/src/types.ts @@ -42,6 +42,7 @@ export type ColorTokens = { colorNeutralForegroundInvertedPressed: string; colorNeutralForegroundInvertedSelected: string; colorNeutralForegroundOnBrand: string; + colorNeutralForegroundInvertedStatic: string; colorNeutralForegroundInvertedLink: string; colorNeutralForegroundInvertedLinkHover: string; colorNeutralForegroundInvertedLinkPressed: string; @@ -74,6 +75,7 @@ export type ColorTokens = { colorNeutralBackground5Pressed: string; colorNeutralBackground5Selected: string; colorNeutralBackground6: string; + colorNeutralBackgroundStatic: string; colorNeutralBackgroundInverted: string; colorSubtleBackground: string; colorSubtleBackgroundHover: 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 6f2b6fcd6aab5b..e84b034bd9c217 100644 --- a/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts +++ b/packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts @@ -39,8 +39,8 @@ const useStyles = makeStyles({ }, inverted: { - backgroundColor: tokens.colorNeutralBackgroundInverted, - color: tokens.colorNeutralForegroundInverted, + backgroundColor: tokens.colorNeutralBackgroundStatic, + color: tokens.colorNeutralForegroundInvertedStatic, }, arrow: createArrowStyles({ arrowHeight }),