From 99a80de9d93235be6ee66f3e4a1ae842dad1cb65 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 2 Nov 2022 13:55:22 -0700 Subject: [PATCH 1/6] chore: Update Avatar active ring color to match base color --- .../src/stories/Avatar.stories.tsx | 58 +++++----- ...-9327cda3-0b08-4b5d-aaa3-48b18735285b.json | 7 ++ .../src/components/Avatar/useAvatarStyles.ts | 107 +++++++++++++++++- 3 files changed, 145 insertions(+), 27 deletions(-) create mode 100644 change/@fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index f19cc9bb55faea..35512a50067f2a 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -161,6 +161,30 @@ const AvatarCustomSizeList: React.FC< ); }; +const AvatarColors: React.FC> = props => { + const rowStyles = { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '12px', padding: '12px' } as const; + + return ( +
+
+ + + +
+
+ {examples.name.map(name => ( + + ))} +
+
+ {examples.namedColors.map(color => ( + + ))} +
+
+ ); +}; + storiesOf('Avatar Converged', module) .addDecorator(story => (
@@ -209,30 +233,12 @@ storiesOf('Avatar Converged', module) )) .addStory('customSize+icon+active', () => ) - .addStory( - 'color', - () => { - const rowStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '8px' }; - - return ( -
-
- - -
-
- {examples.name.map(name => ( - - ))} -
-
- {examples.namedColors.map(color => ( - - ))} -
-
- ); - }, - { includeHighContrast: true, includeDarkMode: true }, - ) + .addStory('color', () => , { + includeHighContrast: true, + includeDarkMode: true, + }) + .addStory('color+active', () => , { + includeHighContrast: true, + includeDarkMode: true, + }) .addStory('image-bad-url', () => ); diff --git a/change/@fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json b/change/@fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json new file mode 100644 index 00000000000000..f20afc88d5d5e8 --- /dev/null +++ b/change/@fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Update Avatar active ring color to match base color", + "packageName": "@fluentui/react-avatar", + "email": "behowell@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 028a1fdb749e98..6ac6c10fdc4bdb 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts +++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts @@ -125,7 +125,7 @@ const useStyles = makeStyles({ ring: { '::before': { - ...shorthands.borderColor(tokens.colorBrandBackgroundStatic), + ...shorthands.borderColor(tokens.colorBrandStroke1), ...shorthands.borderStyle('solid'), }, }, @@ -379,12 +379,112 @@ const useColorStyles = makeStyles({ }, }); +const useActiveRingColorStyles = makeStyles({ + neutral: { + '::before': { ...shorthands.borderColor(tokens.colorBrandStroke1) }, + }, + brand: { + '::before': { ...shorthands.borderColor(tokens.colorBrandStroke1) }, + }, + 'dark-red': { + '::before': { ...shorthands.borderColor(tokens.colorPaletteDarkRedBorderActive) }, + }, + cranberry: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteCranberryBorderActive) }, + }, + red: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteRedBorderActive) }, + }, + pumpkin: { + '::before': { ...shorthands.borderColor(tokens.colorPalettePumpkinBorderActive) }, + }, + peach: { + '::before': { ...shorthands.borderColor(tokens.colorPalettePeachBorderActive) }, + }, + marigold: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteMarigoldBorderActive) }, + }, + gold: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteGoldBorderActive) }, + }, + brass: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteBrassBorderActive) }, + }, + brown: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteBrownBorderActive) }, + }, + forest: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteForestBorderActive) }, + }, + seafoam: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteSeafoamBorderActive) }, + }, + 'dark-green': { + '::before': { ...shorthands.borderColor(tokens.colorPaletteDarkGreenBorderActive) }, + }, + 'light-teal': { + '::before': { ...shorthands.borderColor(tokens.colorPaletteLightTealBorderActive) }, + }, + teal: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteTealBorderActive) }, + }, + steel: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteSteelBorderActive) }, + }, + blue: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteBlueBorderActive) }, + }, + 'royal-blue': { + '::before': { ...shorthands.borderColor(tokens.colorPaletteRoyalBlueBorderActive) }, + }, + cornflower: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteCornflowerBorderActive) }, + }, + navy: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteNavyBorderActive) }, + }, + lavender: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteLavenderBorderActive) }, + }, + purple: { + '::before': { ...shorthands.borderColor(tokens.colorPalettePurpleBorderActive) }, + }, + grape: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteGrapeBorderActive) }, + }, + lilac: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteLilacBorderActive) }, + }, + pink: { + '::before': { ...shorthands.borderColor(tokens.colorPalettePinkBorderActive) }, + }, + magenta: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteMagentaBorderActive) }, + }, + plum: { + '::before': { ...shorthands.borderColor(tokens.colorPalettePlumBorderActive) }, + }, + beige: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteBeigeBorderActive) }, + }, + mink: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteMinkBorderActive) }, + }, + platinum: { + '::before': { ...shorthands.borderColor(tokens.colorPalettePlatinumBorderActive) }, + }, + anchor: { + '::before': { ...shorthands.borderColor(tokens.colorPaletteAnchorBorderActive) }, + }, +}); + export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { const { size, shape, active, activeAppearance, color } = state; const styles = useStyles(); const sizeStyles = useSizeStyles(); const colorStyles = useColorStyles(); + const activeRingColorStyles = useActiveRingColorStyles(); const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]]; @@ -420,6 +520,11 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') { rootClasses.push(styles.ring); + // Make the ring color match the avatar color when there is no image + if (!state.image && color !== 'neutral' && color !== 'brand') { + rootClasses.push(activeRingColorStyles[color]); + } + if (size <= 48) { rootClasses.push(styles.ringThick); } else if (size <= 64) { From 9e70fc2cad1c1fe93357b69012ffcf8df2e017f0 Mon Sep 17 00:00:00 2001 From: Ben Howell <48106640+behowell@users.noreply.github.com> Date: Wed, 2 Nov 2022 14:02:01 -0700 Subject: [PATCH 2/6] Update @fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json --- ...entui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json b/change/@fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json index f20afc88d5d5e8..e751dd554e9ee9 100644 --- a/change/@fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json +++ b/change/@fluentui-react-avatar-9327cda3-0b08-4b5d-aaa3-48b18735285b.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "chore: Update Avatar active ring color to match base color", + "comment": "fix: Update Avatar active ring color to match base color", "packageName": "@fluentui/react-avatar", "email": "behowell@microsoft.com", "dependentChangeType": "patch" From 577db9239cf1810ad7f051fea4b0001f3100ac9f Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 2 Nov 2022 14:06:47 -0700 Subject: [PATCH 3/6] Remove unused color styles --- .../react-avatar/src/components/Avatar/useAvatarStyles.ts | 6 ------ 1 file changed, 6 deletions(-) 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 6ac6c10fdc4bdb..d9f0b4cac947cb 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts +++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts @@ -380,12 +380,6 @@ const useColorStyles = makeStyles({ }); const useActiveRingColorStyles = makeStyles({ - neutral: { - '::before': { ...shorthands.borderColor(tokens.colorBrandStroke1) }, - }, - brand: { - '::before': { ...shorthands.borderColor(tokens.colorBrandStroke1) }, - }, 'dark-red': { '::before': { ...shorthands.borderColor(tokens.colorPaletteDarkRedBorderActive) }, }, From 534cecd1efe876e7c1c3d0b95fc3137b5e7e4a3e Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 2 Nov 2022 15:51:12 -0700 Subject: [PATCH 4/6] Attempt to reduce the size of the styles --- .../src/components/Avatar/useAvatarStyles.ts | 77 ++++++++++--------- 1 file changed, 41 insertions(+), 36 deletions(-) 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 d9f0b4cac947cb..0b88cc948c7a61 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts +++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts @@ -11,6 +11,9 @@ export const avatarClassNames: SlotClassNames = { badge: 'fui-Avatar__badge', }; +// CSS variable for the color of the ring when active +const avatarRingColor = '--fui-Avatar-ringColor'; + // // TODO: All animation constants should go to theme or globals? // https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665 @@ -125,7 +128,7 @@ const useStyles = makeStyles({ ring: { '::before': { - ...shorthands.borderColor(tokens.colorBrandStroke1), + ...shorthands.borderColor(`var(${avatarRingColor})`), ...shorthands.borderStyle('solid'), }, }, @@ -380,95 +383,101 @@ const useColorStyles = makeStyles({ }); const useActiveRingColorStyles = makeStyles({ + neutral: { + [avatarRingColor]: tokens.colorBrandStroke1, + }, + brand: { + [avatarRingColor]: tokens.colorBrandStroke1, + }, 'dark-red': { - '::before': { ...shorthands.borderColor(tokens.colorPaletteDarkRedBorderActive) }, + [avatarRingColor]: tokens.colorPaletteDarkRedBorderActive, }, cranberry: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteCranberryBorderActive) }, + [avatarRingColor]: tokens.colorPaletteCranberryBorderActive, }, red: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteRedBorderActive) }, + [avatarRingColor]: tokens.colorPaletteRedBorderActive, }, pumpkin: { - '::before': { ...shorthands.borderColor(tokens.colorPalettePumpkinBorderActive) }, + [avatarRingColor]: tokens.colorPalettePumpkinBorderActive, }, peach: { - '::before': { ...shorthands.borderColor(tokens.colorPalettePeachBorderActive) }, + [avatarRingColor]: tokens.colorPalettePeachBorderActive, }, marigold: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteMarigoldBorderActive) }, + [avatarRingColor]: tokens.colorPaletteMarigoldBorderActive, }, gold: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteGoldBorderActive) }, + [avatarRingColor]: tokens.colorPaletteGoldBorderActive, }, brass: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteBrassBorderActive) }, + [avatarRingColor]: tokens.colorPaletteBrassBorderActive, }, brown: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteBrownBorderActive) }, + [avatarRingColor]: tokens.colorPaletteBrownBorderActive, }, forest: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteForestBorderActive) }, + [avatarRingColor]: tokens.colorPaletteForestBorderActive, }, seafoam: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteSeafoamBorderActive) }, + [avatarRingColor]: tokens.colorPaletteSeafoamBorderActive, }, 'dark-green': { - '::before': { ...shorthands.borderColor(tokens.colorPaletteDarkGreenBorderActive) }, + [avatarRingColor]: tokens.colorPaletteDarkGreenBorderActive, }, 'light-teal': { - '::before': { ...shorthands.borderColor(tokens.colorPaletteLightTealBorderActive) }, + [avatarRingColor]: tokens.colorPaletteLightTealBorderActive, }, teal: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteTealBorderActive) }, + [avatarRingColor]: tokens.colorPaletteTealBorderActive, }, steel: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteSteelBorderActive) }, + [avatarRingColor]: tokens.colorPaletteSteelBorderActive, }, blue: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteBlueBorderActive) }, + [avatarRingColor]: tokens.colorPaletteBlueBorderActive, }, 'royal-blue': { - '::before': { ...shorthands.borderColor(tokens.colorPaletteRoyalBlueBorderActive) }, + [avatarRingColor]: tokens.colorPaletteRoyalBlueBorderActive, }, cornflower: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteCornflowerBorderActive) }, + [avatarRingColor]: tokens.colorPaletteCornflowerBorderActive, }, navy: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteNavyBorderActive) }, + [avatarRingColor]: tokens.colorPaletteNavyBorderActive, }, lavender: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteLavenderBorderActive) }, + [avatarRingColor]: tokens.colorPaletteLavenderBorderActive, }, purple: { - '::before': { ...shorthands.borderColor(tokens.colorPalettePurpleBorderActive) }, + [avatarRingColor]: tokens.colorPalettePurpleBorderActive, }, grape: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteGrapeBorderActive) }, + [avatarRingColor]: tokens.colorPaletteGrapeBorderActive, }, lilac: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteLilacBorderActive) }, + [avatarRingColor]: tokens.colorPaletteLilacBorderActive, }, pink: { - '::before': { ...shorthands.borderColor(tokens.colorPalettePinkBorderActive) }, + [avatarRingColor]: tokens.colorPalettePinkBorderActive, }, magenta: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteMagentaBorderActive) }, + [avatarRingColor]: tokens.colorPaletteMagentaBorderActive, }, plum: { - '::before': { ...shorthands.borderColor(tokens.colorPalettePlumBorderActive) }, + [avatarRingColor]: tokens.colorPalettePlumBorderActive, }, beige: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteBeigeBorderActive) }, + [avatarRingColor]: tokens.colorPaletteBeigeBorderActive, }, mink: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteMinkBorderActive) }, + [avatarRingColor]: tokens.colorPaletteMinkBorderActive, }, platinum: { - '::before': { ...shorthands.borderColor(tokens.colorPalettePlatinumBorderActive) }, + [avatarRingColor]: tokens.colorPalettePlatinumBorderActive, }, anchor: { - '::before': { ...shorthands.borderColor(tokens.colorPaletteAnchorBorderActive) }, + [avatarRingColor]: tokens.colorPaletteAnchorBorderActive, }, }); @@ -513,11 +522,7 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') { rootClasses.push(styles.ring); - - // Make the ring color match the avatar color when there is no image - if (!state.image && color !== 'neutral' && color !== 'brand') { - rootClasses.push(activeRingColorStyles[color]); - } + rootClasses.push(activeRingColorStyles[color]); if (size <= 48) { rootClasses.push(styles.ringThick); From 42dfb48ce7651842d38c75fe626a19064bfc5055 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 2 Nov 2022 15:52:06 -0700 Subject: [PATCH 5/6] Remove image from color stories --- apps/vr-tests-react-components/src/stories/Avatar.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index 35512a50067f2a..7c9ceee6ad071b 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -169,7 +169,6 @@ const AvatarColors: React.FC> =
-
{examples.name.map(name => ( From c530b758b50d74fafe07bc731b23b164a78fc8ad Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Fri, 4 Nov 2022 12:48:59 -0700 Subject: [PATCH 6/6] Further attempt to reduce package size and improve perf --- .../src/components/Avatar/useAvatarStyles.ts | 138 +++++------------- 1 file changed, 33 insertions(+), 105 deletions(-) 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 0b88cc948c7a61..c977ad9525c553 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts +++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts @@ -11,9 +11,6 @@ export const avatarClassNames: SlotClassNames = { badge: 'fui-Avatar__badge', }; -// CSS variable for the color of the ring when active -const avatarRingColor = '--fui-Avatar-ringColor'; - // // TODO: All animation constants should go to theme or globals? // https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665 @@ -128,7 +125,6 @@ const useStyles = makeStyles({ ring: { '::before': { - ...shorthands.borderColor(`var(${avatarRingColor})`), ...shorthands.borderStyle('solid'), }, }, @@ -255,229 +251,163 @@ const useColorStyles = makeStyles({ neutral: { color: tokens.colorNeutralForeground3, backgroundColor: tokens.colorNeutralBackground6, + // The ::before element is the ring when active + '::before': { color: tokens.colorBrandStroke1 }, }, brand: { color: tokens.colorNeutralForegroundStaticInverted, backgroundColor: tokens.colorBrandBackgroundStatic, + '::before': { color: tokens.colorBrandStroke1 }, }, 'dark-red': { color: tokens.colorPaletteDarkRedForeground2, backgroundColor: tokens.colorPaletteDarkRedBackground2, + '::before': { color: tokens.colorPaletteDarkRedBorderActive }, }, cranberry: { color: tokens.colorPaletteCranberryForeground2, backgroundColor: tokens.colorPaletteCranberryBackground2, + '::before': { color: tokens.colorPaletteCranberryBorderActive }, }, red: { color: tokens.colorPaletteRedForeground2, backgroundColor: tokens.colorPaletteRedBackground2, + '::before': { color: tokens.colorPaletteRedBorderActive }, }, pumpkin: { color: tokens.colorPalettePumpkinForeground2, backgroundColor: tokens.colorPalettePumpkinBackground2, + '::before': { color: tokens.colorPalettePumpkinBorderActive }, }, peach: { color: tokens.colorPalettePeachForeground2, backgroundColor: tokens.colorPalettePeachBackground2, + '::before': { color: tokens.colorPalettePeachBorderActive }, }, marigold: { color: tokens.colorPaletteMarigoldForeground2, backgroundColor: tokens.colorPaletteMarigoldBackground2, + '::before': { color: tokens.colorPaletteMarigoldBorderActive }, }, gold: { color: tokens.colorPaletteGoldForeground2, backgroundColor: tokens.colorPaletteGoldBackground2, + '::before': { color: tokens.colorPaletteGoldBorderActive }, }, brass: { color: tokens.colorPaletteBrassForeground2, backgroundColor: tokens.colorPaletteBrassBackground2, + '::before': { color: tokens.colorPaletteBrassBorderActive }, }, brown: { color: tokens.colorPaletteBrownForeground2, backgroundColor: tokens.colorPaletteBrownBackground2, + '::before': { color: tokens.colorPaletteBrownBorderActive }, }, forest: { color: tokens.colorPaletteForestForeground2, backgroundColor: tokens.colorPaletteForestBackground2, + '::before': { color: tokens.colorPaletteForestBorderActive }, }, seafoam: { color: tokens.colorPaletteSeafoamForeground2, backgroundColor: tokens.colorPaletteSeafoamBackground2, + '::before': { color: tokens.colorPaletteSeafoamBorderActive }, }, 'dark-green': { color: tokens.colorPaletteDarkGreenForeground2, backgroundColor: tokens.colorPaletteDarkGreenBackground2, + '::before': { color: tokens.colorPaletteDarkGreenBorderActive }, }, 'light-teal': { color: tokens.colorPaletteLightTealForeground2, backgroundColor: tokens.colorPaletteLightTealBackground2, + '::before': { color: tokens.colorPaletteLightTealBorderActive }, }, teal: { color: tokens.colorPaletteTealForeground2, backgroundColor: tokens.colorPaletteTealBackground2, + '::before': { color: tokens.colorPaletteTealBorderActive }, }, steel: { color: tokens.colorPaletteSteelForeground2, backgroundColor: tokens.colorPaletteSteelBackground2, + '::before': { color: tokens.colorPaletteSteelBorderActive }, }, blue: { color: tokens.colorPaletteBlueForeground2, backgroundColor: tokens.colorPaletteBlueBackground2, + '::before': { color: tokens.colorPaletteBlueBorderActive }, }, 'royal-blue': { color: tokens.colorPaletteRoyalBlueForeground2, backgroundColor: tokens.colorPaletteRoyalBlueBackground2, + '::before': { color: tokens.colorPaletteRoyalBlueBorderActive }, }, cornflower: { color: tokens.colorPaletteCornflowerForeground2, backgroundColor: tokens.colorPaletteCornflowerBackground2, + '::before': { color: tokens.colorPaletteCornflowerBorderActive }, }, navy: { color: tokens.colorPaletteNavyForeground2, backgroundColor: tokens.colorPaletteNavyBackground2, + '::before': { color: tokens.colorPaletteNavyBorderActive }, }, lavender: { color: tokens.colorPaletteLavenderForeground2, backgroundColor: tokens.colorPaletteLavenderBackground2, + '::before': { color: tokens.colorPaletteLavenderBorderActive }, }, purple: { color: tokens.colorPalettePurpleForeground2, backgroundColor: tokens.colorPalettePurpleBackground2, + '::before': { color: tokens.colorPalettePurpleBorderActive }, }, grape: { color: tokens.colorPaletteGrapeForeground2, backgroundColor: tokens.colorPaletteGrapeBackground2, + '::before': { color: tokens.colorPaletteGrapeBorderActive }, }, lilac: { color: tokens.colorPaletteLilacForeground2, backgroundColor: tokens.colorPaletteLilacBackground2, + '::before': { color: tokens.colorPaletteLilacBorderActive }, }, pink: { color: tokens.colorPalettePinkForeground2, backgroundColor: tokens.colorPalettePinkBackground2, + '::before': { color: tokens.colorPalettePinkBorderActive }, }, magenta: { color: tokens.colorPaletteMagentaForeground2, backgroundColor: tokens.colorPaletteMagentaBackground2, + '::before': { color: tokens.colorPaletteMagentaBorderActive }, }, plum: { color: tokens.colorPalettePlumForeground2, backgroundColor: tokens.colorPalettePlumBackground2, + '::before': { color: tokens.colorPalettePlumBorderActive }, }, beige: { color: tokens.colorPaletteBeigeForeground2, backgroundColor: tokens.colorPaletteBeigeBackground2, + '::before': { color: tokens.colorPaletteBeigeBorderActive }, }, mink: { color: tokens.colorPaletteMinkForeground2, backgroundColor: tokens.colorPaletteMinkBackground2, + '::before': { color: tokens.colorPaletteMinkBorderActive }, }, platinum: { color: tokens.colorPalettePlatinumForeground2, backgroundColor: tokens.colorPalettePlatinumBackground2, + '::before': { color: tokens.colorPalettePlatinumBorderActive }, }, anchor: { color: tokens.colorPaletteAnchorForeground2, backgroundColor: tokens.colorPaletteAnchorBackground2, - }, -}); - -const useActiveRingColorStyles = makeStyles({ - neutral: { - [avatarRingColor]: tokens.colorBrandStroke1, - }, - brand: { - [avatarRingColor]: tokens.colorBrandStroke1, - }, - 'dark-red': { - [avatarRingColor]: tokens.colorPaletteDarkRedBorderActive, - }, - cranberry: { - [avatarRingColor]: tokens.colorPaletteCranberryBorderActive, - }, - red: { - [avatarRingColor]: tokens.colorPaletteRedBorderActive, - }, - pumpkin: { - [avatarRingColor]: tokens.colorPalettePumpkinBorderActive, - }, - peach: { - [avatarRingColor]: tokens.colorPalettePeachBorderActive, - }, - marigold: { - [avatarRingColor]: tokens.colorPaletteMarigoldBorderActive, - }, - gold: { - [avatarRingColor]: tokens.colorPaletteGoldBorderActive, - }, - brass: { - [avatarRingColor]: tokens.colorPaletteBrassBorderActive, - }, - brown: { - [avatarRingColor]: tokens.colorPaletteBrownBorderActive, - }, - forest: { - [avatarRingColor]: tokens.colorPaletteForestBorderActive, - }, - seafoam: { - [avatarRingColor]: tokens.colorPaletteSeafoamBorderActive, - }, - 'dark-green': { - [avatarRingColor]: tokens.colorPaletteDarkGreenBorderActive, - }, - 'light-teal': { - [avatarRingColor]: tokens.colorPaletteLightTealBorderActive, - }, - teal: { - [avatarRingColor]: tokens.colorPaletteTealBorderActive, - }, - steel: { - [avatarRingColor]: tokens.colorPaletteSteelBorderActive, - }, - blue: { - [avatarRingColor]: tokens.colorPaletteBlueBorderActive, - }, - 'royal-blue': { - [avatarRingColor]: tokens.colorPaletteRoyalBlueBorderActive, - }, - cornflower: { - [avatarRingColor]: tokens.colorPaletteCornflowerBorderActive, - }, - navy: { - [avatarRingColor]: tokens.colorPaletteNavyBorderActive, - }, - lavender: { - [avatarRingColor]: tokens.colorPaletteLavenderBorderActive, - }, - purple: { - [avatarRingColor]: tokens.colorPalettePurpleBorderActive, - }, - grape: { - [avatarRingColor]: tokens.colorPaletteGrapeBorderActive, - }, - lilac: { - [avatarRingColor]: tokens.colorPaletteLilacBorderActive, - }, - pink: { - [avatarRingColor]: tokens.colorPalettePinkBorderActive, - }, - magenta: { - [avatarRingColor]: tokens.colorPaletteMagentaBorderActive, - }, - plum: { - [avatarRingColor]: tokens.colorPalettePlumBorderActive, - }, - beige: { - [avatarRingColor]: tokens.colorPaletteBeigeBorderActive, - }, - mink: { - [avatarRingColor]: tokens.colorPaletteMinkBorderActive, - }, - platinum: { - [avatarRingColor]: tokens.colorPalettePlatinumBorderActive, - }, - anchor: { - [avatarRingColor]: tokens.colorPaletteAnchorBorderActive, + '::before': { color: tokens.colorPaletteAnchorBorderActive }, }, }); @@ -487,7 +417,6 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { const styles = useStyles(); const sizeStyles = useSizeStyles(); const colorStyles = useColorStyles(); - const activeRingColorStyles = useActiveRingColorStyles(); const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]]; @@ -522,7 +451,6 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => { if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') { rootClasses.push(styles.ring); - rootClasses.push(activeRingColorStyles[color]); if (size <= 48) { rootClasses.push(styles.ringThick);