@fluentui-react-native/experimental-avatar 0.14.19 → 0.14.22

package/lib-commonjs/JSAvatarTokens.js

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultJSAvatarTokens = void 0;
-var JSAvatar_helpers_1 = require("./JSAvatar.helpers");
 var theme_tokens_1 = require("@fluentui-react-native/theme-tokens");
-var defaultJSAvatarTokens = function () {
+var defaultJSAvatarTokens = function (t) {
     return ({
         horizontalIconAlignment: 'end',
         verticalIconAlignment: 'end',
-        color: 'white',
-        iconStrokeColor: 'white',
-        backgroundColor: (0, JSAvatar_helpers_1.convertCoinColorFluent)('cornflower'),
+        color: theme_tokens_1.globalTokens.color.white,
+        backgroundColor: theme_tokens_1.globalTokens.color.cornflower.primary,
         avatarOpacity: 1,
         circular: {
             borderRadius: theme_tokens_1.globalTokens.corner.radius.circle,
@@ -104,6 +102,106 @@ var defaultJSAvatarTokens = function () {
             iconSize: 40,
             initialsSize: 48,
         },
+        neutral: {
+            backgroundColor: t.colors.neutralBackground6,
+            color: t.colors.neutralForeground3,
+            ringColor: t.colors.defaultBorder,
+        },
+        brand: {
+            backgroundColor: t.colors.brandBackgroundStatic,
+            color: t.colors.neutralForegroundOnBrand,
+            ringColor: t.colors.brandedBorder,
+        },
+        darkRed: {
+            backgroundColor: theme_tokens_1.globalTokens.color.darkRed.primary,
+        },
+        cranberry: {
+            backgroundColor: theme_tokens_1.globalTokens.color.cranberry.primary,
+        },
+        red: {
+            backgroundColor: theme_tokens_1.globalTokens.color.red.primary,
+        },
+        pumpkin: {
+            backgroundColor: theme_tokens_1.globalTokens.color.pumpkin.primary,
+        },
+        peach: {
+            backgroundColor: theme_tokens_1.globalTokens.color.peach.primary,
+        },
+        marigold: {
+            backgroundColor: theme_tokens_1.globalTokens.color.marigold.primary,
+        },
+        gold: {
+            backgroundColor: theme_tokens_1.globalTokens.color.gold.primary,
+        },
+        brass: {
+            backgroundColor: theme_tokens_1.globalTokens.color.brass.primary,
+        },
+        brown: {
+            backgroundColor: theme_tokens_1.globalTokens.color.brown.primary,
+        },
+        forest: {
+            backgroundColor: theme_tokens_1.globalTokens.color.forest.primary,
+        },
+        seafoam: {
+            backgroundColor: theme_tokens_1.globalTokens.color.seafoam.primary,
+        },
+        darkGreen: {
+            backgroundColor: theme_tokens_1.globalTokens.color.darkGreen.primary,
+        },
+        lightTeal: {
+            backgroundColor: theme_tokens_1.globalTokens.color.lightTeal.primary,
+        },
+        teal: {
+            backgroundColor: theme_tokens_1.globalTokens.color.teal.primary,
+        },
+        steel: {
+            backgroundColor: theme_tokens_1.globalTokens.color.steel.primary,
+        },
+        blue: {
+            backgroundColor: theme_tokens_1.globalTokens.color.blue.primary,
+        },
+        royalBlue: {
+            backgroundColor: theme_tokens_1.globalTokens.color.royalBlue.primary,
+        },
+        cornflower: {
+            backgroundColor: theme_tokens_1.globalTokens.color.cornflower.primary,
+        },
+        navy: {
+            backgroundColor: theme_tokens_1.globalTokens.color.navy.primary,
+        },
+        lavender: {
+            backgroundColor: theme_tokens_1.globalTokens.color.lavender.primary,
+        },
+        purple: {
+            backgroundColor: theme_tokens_1.globalTokens.color.purple.primary,
+        },
+        grape: {
+            backgroundColor: theme_tokens_1.globalTokens.color.grape.primary,
+        },
+        lilac: {
+            backgroundColor: theme_tokens_1.globalTokens.color.lilac.primary,
+        },
+        pink: {
+            backgroundColor: theme_tokens_1.globalTokens.color.pink.primary,
+        },
+        magenta: {
+            backgroundColor: theme_tokens_1.globalTokens.color.magenta.primary,
+        },
+        plum: {
+            backgroundColor: theme_tokens_1.globalTokens.color.plum.primary,
+        },
+        beige: {
+            backgroundColor: theme_tokens_1.globalTokens.color.beige.primary,
+        },
+        mink: {
+            backgroundColor: theme_tokens_1.globalTokens.color.mink.primary,
+        },
+        platinum: {
+            backgroundColor: theme_tokens_1.globalTokens.color.platinum.primary,
+        },
+        anchor: {
+            backgroundColor: theme_tokens_1.globalTokens.color.anchor.primary,
+        },
     });
 };
 exports.defaultJSAvatarTokens = defaultJSAvatarTokens;

package/lib-commonjs/JSAvatarTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":";;;AAGA,uDAA4D;AAC5D,oEAAmE;AAE5D,IAAM,qBAAqB,GAAyC;IACzE,OAAA,CAAC;QACC,uBAAuB,EAAE,KAAK;QAC9B,qBAAqB,EAAE,KAAK;QAC5B,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,IAAA,yCAAsB,EAAC,YAAY,CAAC;QACrD,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE;YACR,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,MAAM,EAAE;YACN,YAAY,EAAE,2BAAY,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;SAChD;QACD,QAAQ,EAAE;YACR,aAAa,EAAE,GAAG;SACnB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,UAAU;YACrB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,UAAU;YACrB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,OAAO;YAClB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,OAAO;YAClB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,QAAQ;YACnB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,OAAO;YAClB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,OAAO;YAClB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,MAAM,EAAE;YACN,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,EAAE;YACZ,YAAY,EAAE,EAAE;SACjB;KACiB,CAAA;AApGpB,CAoGoB,CAAC;AArGV,QAAA,qBAAqB,yBAqGX"}
+{"version":3,"file":"JSAvatarTokens.js","sourceRoot":"","sources":["../src/JSAvatarTokens.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.14.19",
+  "version": "0.14.22",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -28,8 +28,8 @@
     "@fluentui-react-native/adapters": "^0.8.5",
     "@fluentui-react-native/badge": "^0.0.32",
     "@fluentui-react-native/component-cache": "^1.3.2",
-    "@fluentui-react-native/icon": "^0.11.18",
-    "@fluentui-react-native/interactive-hooks": "^0.15.4",
+    "@fluentui-react-native/icon": "^0.11.20",
+    "@fluentui-react-native/interactive-hooks": "^0.15.5",
     "@fluentui-react-native/framework": "0.7.25",
     "@fluentui-react-native/theme-tokens": "^0.16.2",
     "@fluentui-react-native/tokens": "^0.11.11",

package/src/JSAvatar.helpers.ts

@@ -1,4 +1,3 @@
-import { AvatarColor } from './JSAvatar.types';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 
 const sizeAdjustment = {
@@ -13,36 +12,6 @@ export type AvatarSizeConfig = {
   initialsSize: number;
 };
 
-const colorTableFluent: { [P in AvatarColor]: string } = {
-  cornflower: globalTokens.color.cornflower.primary,
-  blue: globalTokens.color.blue.primary,
-  royalBlue: globalTokens.color.royalBlue.primary,
-  teal: globalTokens.color.teal.primary,
-  forest: globalTokens.color.forest.primary,
-  darkGreen: globalTokens.color.darkGreen.primary,
-  berry: globalTokens.color.berry.primary,
-  hotPink: globalTokens.color.hotPink.primary,
-  grape: globalTokens.color.grape.primary,
-  purple: globalTokens.color.purple.primary,
-  pumpkin: globalTokens.color.pumpkin.primary,
-  red: globalTokens.color.red.primary,
-  burgundy: globalTokens.color.burgundy.primary,
-  orchid: globalTokens.color.orchid.primary,
-  brass: globalTokens.color.brass.primary,
-  darkRed: globalTokens.color.darkRed.primary,
-  beige: globalTokens.color.beige.primary,
-  platinum: globalTokens.color.platinum.primary,
-  steel: globalTokens.color.steel.primary,
-  brown: globalTokens.color.brown.primary,
-};
-
-/**
- * Converts the AvatarColor into a hex color value
- */
-export function convertCoinColorFluent(coinColor: AvatarColor): string {
-  return colorTableFluent[coinColor];
-}
-
 export function getRingConfig(size: number): any {
   if (size <= 48) {
     return {

package/src/JSAvatar.styling.ts

@@ -1,8 +1,8 @@
-import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps } from './JSAvatar.types';
+import { JSAvatarName, JSAvatarTokens, AvatarSlotProps, JSAvatarProps, AvatarColors, AvatarSizes } from './JSAvatar.types';
 import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
 import { defaultJSAvatarTokens } from './JSAvatarTokens';
 import { ViewStyle } from 'react-native';
-import { convertCoinColorFluent, getRingConfig } from './JSAvatar.helpers';
+import { getRingConfig } from './JSAvatar.helpers';
 import { borderStyles } from '@fluentui-react-native/tokens';
 
 const nameMap: { [key: string]: string } = {
@@ -11,23 +11,7 @@ const nameMap: { [key: string]: string } = {
   end: 'flex-end',
 };
 
-export const avatarStates: (keyof JSAvatarTokens)[] = [
-  'circular',
-  'square',
-  'inactive',
-  'size20',
-  'size24',
-  'size28',
-  'size32',
-  'size36',
-  'size40',
-  'size48',
-  'size56',
-  'size64',
-  'size72',
-  'size96',
-  'size120',
-];
+export const avatarStates: (keyof JSAvatarTokens)[] = [...AvatarColors, ...AvatarSizes, 'circular', 'square', 'inactive'];
 
 export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
   tokens: [defaultJSAvatarTokens, JSAvatarName],
@@ -35,17 +19,17 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
   slotProps: {
     root: buildProps(
       (tokens: JSAvatarTokens) => {
-        const { horizontalIconAlignment, verticalIconAlignment } = tokens;
+        const { horizontalIconAlignment, verticalIconAlignment, width, height, avatarOpacity } = tokens;
         return {
           style: {
             flexDirection: 'row',
-            width: tokens.width,
-            height: tokens.height,
+            width: width,
+            height: height,
             justifyContent: nameMap[horizontalIconAlignment || 'end'] as ViewStyle['justifyContent'],
             alignItems: nameMap[verticalIconAlignment || 'end'] as ViewStyle['alignItems'],
             horizontalIconAlignment,
             verticalIconAlignment,
-            opacity: tokens.avatarOpacity,
+            opacity: avatarOpacity,
           },
         };
       },
@@ -56,18 +40,16 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
         return {
           style: {
             fontSize: tokens.initialsSize,
+            color: tokens.color,
           },
         };
       },
-      ['initialsSize'],
+      ['initialsSize', 'color'],
     ),
     initialsBackground: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
-        const { backgroundColor, coinColorFluent } = tokens;
-        let effectiveBackgroundColor = backgroundColor;
-        if (coinColorFluent) {
-          effectiveBackgroundColor = convertCoinColorFluent(coinColorFluent);
-        }
+        const { backgroundColor } = tokens;
+
         return {
           style: {
             ...borderStyles.from(tokens, theme),
@@ -77,11 +59,11 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
             alignSelf: 'stretch',
             justifyContent: 'center',
             alignItems: 'center',
-            backgroundColor: effectiveBackgroundColor,
+            backgroundColor: backgroundColor,
           },
         };
       },
-      ['coinColorFluent', 'backgroundColor', 'width', 'height', ...borderStyles.keys],
+      ['backgroundColor', 'width', 'height', ...borderStyles.keys],
     ),
     image: buildProps(
       (tokens: JSAvatarTokens) => {
@@ -110,12 +92,10 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
     ring: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
         const ringConfig = getRingConfig(tokens.width);
-
-        const ringColor = tokens.ringColor;
         return {
           style: {
             borderStyle: 'solid',
-            borderColor: ringColor,
+            borderColor: tokens.ringColor,
             borderWidth: ringConfig.stroke,
             width: ringConfig.size,
             height: ringConfig.size,
@@ -126,7 +106,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           },
         };
       },
-      ['width', 'height', ...borderStyles.keys],
+      ['width', 'height', 'ringColor', ...borderStyles.keys],
     ),
     badge: buildProps(
       (tokens: JSAvatarTokens) => {

package/src/JSAvatar.tsx

@@ -22,6 +22,8 @@ export const avatarLookup = (layer: string, state: JSAvatarState, userProps: JSA
     userProps[layer] ||
     layer === userProps['shape'] ||
     (!userProps['shape'] && layer === 'circular') ||
+    layer === userProps['avatarColor'] ||
+    (!userProps['avatarColor'] && layer === 'brand') ||
     layer === userProps['size'] ||
     (!userProps['size'] && layer === 'size56') ||
     (userProps.active === 'inactive' && layer === 'inactive')

package/src/JSAvatar.types.ts

@@ -19,36 +19,51 @@ export const AvatarSizes = [
   'size96',
   'size120',
 ] as const;
+
+/**
+ * Sets color of the avatar when there is no picture. Uses fluent color names
+ */
+export const AvatarColors = [
+  'darkRed',
+  'cranberry',
+  'red',
+  'pumpkin',
+  'peach',
+  'marigold',
+  'gold',
+  'brass',
+  'brown',
+  'forest',
+  'seafoam',
+  'darkGreen',
+  'lightTeal',
+  'teal',
+  'steel',
+  'blue',
+  'royalBlue',
+  'cornflower',
+  'navy',
+  'lavender',
+  'purple',
+  'grape',
+  'lilac',
+  'pink',
+  'magenta',
+  'plum',
+  'beige',
+  'mink',
+  'platinum',
+  'anchor',
+] as const;
 export type AvatarSize = typeof AvatarSizes[number];
+export type AvatarNamedColor = typeof AvatarColors[number];
 
 export type AvatarShape = 'circular' | 'square';
 export type AvatarActive = 'active' | 'inactive' | 'unset';
 export type AvatarActiveAppearance = 'ring' | 'shadow' | 'glow' | 'ring-shadow' | 'ring-glow';
+export type AvatarColor = 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;
+export type IconAlignment = 'start' | 'center' | 'end';
 
-/**
- * Sets color of the avatar when there is no picture. Uses fluent color names
- */
-export type AvatarColor =
-  | 'cornflower'
-  | 'blue'
-  | 'royalBlue'
-  | 'teal'
-  | 'forest'
-  | 'darkGreen'
-  | 'berry'
-  | 'hotPink'
-  | 'grape'
-  | 'purple'
-  | 'pumpkin'
-  | 'red'
-  | 'burgundy'
-  | 'orchid'
-  | 'brass'
-  | 'darkRed'
-  | 'beige'
-  | 'platinum'
-  | 'steel'
-  | 'brown';
 export interface RingConfig {
   accent?: boolean;
   transparent?: boolean;
@@ -59,9 +74,18 @@ export interface RingConfig {
 }
 
 export interface AvatarConfigurableProps {
+  /**
+   * The color when displaying either an icon or initials.
+   * * neutral (default): gray
+   * * brand: color from the brand palette
+   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)
+   * * [AvatarNamedColor]: a specific color from the theme
+   *
+   * @defaultvalue neutral
+   */
+  avatarColor?: AvatarColor;
   size?: AvatarSize;
   ring?: RingConfig;
-  coinColorFluent?: AvatarColor;
 }
 
 export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
@@ -69,6 +93,13 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
   activeAppearance?: AvatarActiveAppearance;
   badge?: PresenceBadgeProps;
   icon?: IconSourcesType;
+
+  /**
+   * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
+   * Use this when a name is not available, but there is another unique identifier that can be used instead.
+   */
+  idForColor?: string | undefined;
+
   image?: ImageProps;
   initials?: string;
   name?: string;
@@ -76,22 +107,8 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
   src?: string;
 }
 
-export interface AvatarSlotProps {
-  root: ViewProps;
-  image: ImageProps;
-  initials: TextProps;
-  initialsBackground: ViewProps;
-  icon: IconProps;
-  ring: ViewProps;
-  badge: BadgeProps;
-}
-
-export type IconAlignment = 'start' | 'center' | 'end';
-
 export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens {
   iconSize?: number;
-  iconStrokeWidth?: number;
-  iconStrokeColor?: string;
   initialsSize?: number;
   height?: number;
   horizontalIconAlignment?: IconAlignment;
@@ -115,6 +132,48 @@ export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColor
   size120?: JSAvatarTokens;
   width?: number;
   badgeSize?: BadgeSize;
+  neutral?: JSAvatarTokens;
+  brand?: JSAvatarTokens;
+  darkRed?: JSAvatarTokens;
+  cranberry?: JSAvatarTokens;
+  red?: JSAvatarTokens;
+  pumpkin?: JSAvatarTokens;
+  peach?: JSAvatarTokens;
+  marigold?: JSAvatarTokens;
+  gold?: JSAvatarTokens;
+  brass?: JSAvatarTokens;
+  brown?: JSAvatarTokens;
+  forest?: JSAvatarTokens;
+  seafoam?: JSAvatarTokens;
+  darkGreen?: JSAvatarTokens;
+  lightTeal?: JSAvatarTokens;
+  teal?: JSAvatarTokens;
+  steel?: JSAvatarTokens;
+  blue?: JSAvatarTokens;
+  royalBlue?: JSAvatarTokens;
+  cornflower?: JSAvatarTokens;
+  navy?: JSAvatarTokens;
+  lavender?: JSAvatarTokens;
+  purple?: JSAvatarTokens;
+  grape?: JSAvatarTokens;
+  lilac?: JSAvatarTokens;
+  pink?: JSAvatarTokens;
+  magenta?: JSAvatarTokens;
+  plum?: JSAvatarTokens;
+  beige?: JSAvatarTokens;
+  mink?: JSAvatarTokens;
+  platinum?: JSAvatarTokens;
+  anchor?: JSAvatarTokens;
+}
+
+export interface AvatarSlotProps {
+  root: ViewProps;
+  image: ImageProps;
+  initials: TextProps;
+  initialsBackground: ViewProps;
+  icon: IconProps;
+  ring: ViewProps;
+  badge: BadgeProps;
 }
 
 export interface JSAvatarState {

package/src/JSAvatarTokens.ts

@@ -1,16 +1,14 @@
 import { Theme } from '@fluentui-react-native/framework';
 import { TokenSettings } from '@fluentui-react-native/use-styling';
 import { JSAvatarTokens } from '.';
-import { convertCoinColorFluent } from './JSAvatar.helpers';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 
-export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
+export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: Theme) =>
   ({
     horizontalIconAlignment: 'end',
     verticalIconAlignment: 'end',
-    color: 'white', // initials is always 'white', unless overriden by token
-    iconStrokeColor: 'white', // icon stroke color is always 'white', unless overriden by token
-    backgroundColor: convertCoinColorFluent('cornflower'),
+    color: globalTokens.color.white,
+    backgroundColor: globalTokens.color.cornflower.primary,
     avatarOpacity: 1,
     circular: {
       borderRadius: globalTokens.corner.radius.circle,
@@ -105,4 +103,104 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = () =>
       iconSize: 40,
       initialsSize: 48,
     },
+    neutral: {
+      backgroundColor: t.colors.neutralBackground6,
+      color: t.colors.neutralForeground3,
+      ringColor: t.colors.defaultBorder,
+    },
+    brand: {
+      backgroundColor: t.colors.brandBackgroundStatic,
+      color: t.colors.neutralForegroundOnBrand,
+      ringColor: t.colors.brandedBorder,
+    },
+    darkRed: {
+      backgroundColor: globalTokens.color.darkRed.primary,
+    },
+    cranberry: {
+      backgroundColor: globalTokens.color.cranberry.primary,
+    },
+    red: {
+      backgroundColor: globalTokens.color.red.primary,
+    },
+    pumpkin: {
+      backgroundColor: globalTokens.color.pumpkin.primary,
+    },
+    peach: {
+      backgroundColor: globalTokens.color.peach.primary,
+    },
+    marigold: {
+      backgroundColor: globalTokens.color.marigold.primary,
+    },
+    gold: {
+      backgroundColor: globalTokens.color.gold.primary,
+    },
+    brass: {
+      backgroundColor: globalTokens.color.brass.primary,
+    },
+    brown: {
+      backgroundColor: globalTokens.color.brown.primary,
+    },
+    forest: {
+      backgroundColor: globalTokens.color.forest.primary,
+    },
+    seafoam: {
+      backgroundColor: globalTokens.color.seafoam.primary,
+    },
+    darkGreen: {
+      backgroundColor: globalTokens.color.darkGreen.primary,
+    },
+    lightTeal: {
+      backgroundColor: globalTokens.color.lightTeal.primary,
+    },
+    teal: {
+      backgroundColor: globalTokens.color.teal.primary,
+    },
+    steel: {
+      backgroundColor: globalTokens.color.steel.primary,
+    },
+    blue: {
+      backgroundColor: globalTokens.color.blue.primary,
+    },
+    royalBlue: {
+      backgroundColor: globalTokens.color.royalBlue.primary,
+    },
+    cornflower: {
+      backgroundColor: globalTokens.color.cornflower.primary,
+    },
+    navy: {
+      backgroundColor: globalTokens.color.navy.primary,
+    },
+    lavender: {
+      backgroundColor: globalTokens.color.lavender.primary,
+    },
+    purple: {
+      backgroundColor: globalTokens.color.purple.primary,
+    },
+    grape: {
+      backgroundColor: globalTokens.color.grape.primary,
+    },
+    lilac: {
+      backgroundColor: globalTokens.color.lilac.primary,
+    },
+    pink: {
+      backgroundColor: globalTokens.color.pink.primary,
+    },
+    magenta: {
+      backgroundColor: globalTokens.color.magenta.primary,
+    },
+    plum: {
+      backgroundColor: globalTokens.color.plum.primary,
+    },
+    beige: {
+      backgroundColor: globalTokens.color.beige.primary,
+    },
+    mink: {
+      backgroundColor: globalTokens.color.mink.primary,
+    },
+    platinum: {
+      backgroundColor: globalTokens.color.platinum.primary,
+    },
+    anchor: {
+      backgroundColor: globalTokens.color.anchor.primary,
+    },
   } as JSAvatarTokens);

package/ios/FRNAvatarStorage.h

@@ -1,16 +0,0 @@
-#ifndef FRNAvatarStorage_h
-#define FRNAvatarStorage_h
-
-@import FluentUI;
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface MSFAvatar (FRNAvatarViewManagerAdditons)
-
-+ (NSMutableDictionary *)storage;
-
-@end
-
-NS_ASSUME_NONNULL_END
-
-#endif /* FRNAvatarStorage_h */

package/ios/FRNAvatarStorage.m

@@ -1,23 +0,0 @@
-#import <Foundation/Foundation.h>
-#import "FRNAvatarStorage.h"
-
-NS_ASSUME_NONNULL_BEGIN
-
-@implementation MSFAvatar (FRNAvatarViewManagerAdditons)
-
-static NSMutableDictionary *s_sharedInstance;
-
-+(NSMutableDictionary *)storage
-{
-    if (s_sharedInstance == nil) {
-        static dispatch_once_t onceToken;
-        dispatch_once(&onceToken, ^{
-            s_sharedInstance = [NSMutableDictionary new];
-        });
-    }
-    return s_sharedInstance;
-}
-
-@end
-
-NS_ASSUME_NONNULL_END