@fluentui-react-native/experimental-avatar 0.14.26 → 0.14.29

package/lib-commonjs/utils/getInitials.test.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getInitials_1 = require("./getInitials");
+describe('getInitials', function () {
+    it('handles null inputs', function () {
+        var result = (0, getInitials_1.getInitials)(null, false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)(undefined, false);
+        expect(result).toEqual('');
+    });
+    it('calculates an expected initials in LTR', function () {
+        var result = (0, getInitials_1.getInitials)('Kat Larrson', false);
+        expect(result).toEqual('KL');
+    });
+    it('calculates an expected initials in LTR for non-ASCII characters', function () {
+        var result = (0, getInitials_1.getInitials)('Írissa Þórðardóttir', false);
+        expect(result).toEqual('ÍÞ');
+        result = (0, getInitials_1.getInitials)('Øyvind Åsen', false);
+        expect(result).toEqual('ØÅ');
+    });
+    it('calculates an expected initials in LTR with a hypen', function () {
+        var result = (0, getInitials_1.getInitials)('David Zearing-Goff', false);
+        expect(result).toEqual('DZ');
+    });
+    it('calculates an expected initials in LTR with numbers', function () {
+        var result = (0, getInitials_1.getInitials)('4lex 5loo', false);
+        expect(result).toEqual('45');
+    });
+    it('calculates an expected initials in LTR with parentheses', function () {
+        var result = (0, getInitials_1.getInitials)('David (The man) Goff', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in LTR with brackets', function () {
+        var result = (0, getInitials_1.getInitials)('David Goff [The man]', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in LTR with curly braces', function () {
+        var result = (0, getInitials_1.getInitials)('David {The man} Goff', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in LTR with multiple parentheses, extra spaces, and unwanted characters', function () {
+        var result = (0, getInitials_1.getInitials)(' !@#$%^&*()=+ (Alpha) David   (The man) `~<>,./?[]{}|   Goff   (Gamma)    ', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in LTR with multiple types of unwanted text', function () {
+        var result = (0, getInitials_1.getInitials)(' !@#$%^&*()=+ (Alpha) David   (The man) `~<>,./?[]{}|   Goff   (Gamma)  [Beta]  ', false);
+        expect(result).toEqual('DG');
+    });
+    it('calculates an expected initials in RTL if one was not specified', function () {
+        var result = (0, getInitials_1.getInitials)('Kat Larrson', true);
+        expect(result).toEqual('LK');
+    });
+    it('calculates an expected initials in LTR for names with multiple components', function () {
+        var result = (0, getInitials_1.getInitials)('A', false);
+        expect(result).toEqual('A');
+        result = (0, getInitials_1.getInitials)('A B', false);
+        expect(result).toEqual('AB');
+        result = (0, getInitials_1.getInitials)('A B C', false);
+        expect(result).toEqual('AC');
+        result = (0, getInitials_1.getInitials)('A B C D', false);
+        expect(result).toEqual('A');
+    });
+    it('calculates an expected initials for Arabic names', function () {
+        var result = (0, getInitials_1.getInitials)('خسرو رحیمی', true);
+        expect(result).toEqual('');
+    });
+    it('calculates an expected initials for Chinese names', function () {
+        var result = (0, getInitials_1.getInitials)('桂英', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('佳', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('宋智洋', false);
+        expect(result).toEqual('');
+    });
+    it('calculates an expected initials for Korean names', function () {
+        var result = (0, getInitials_1.getInitials)('강현', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('최종래', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('남궁 성종', false);
+        expect(result).toEqual('');
+    });
+    it('calculates an expected initials for Japanese names', function () {
+        var result = (0, getInitials_1.getInitials)('松田', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('海野', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('かり', false);
+        expect(result).toEqual('');
+    });
+    it('calculates expected initials for phone numbers', function () {
+        var result = (0, getInitials_1.getInitials)('12345678', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('+1 (555) 123-4567 ext.4567', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('+47 12 34 56 78 (X 5678)', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('+47 12 34 56 78 (X 5678)', false, true);
+        expect(result).toEqual('4');
+        result = (0, getInitials_1.getInitials)('47 12 34', false, true);
+        expect(result).toEqual('43');
+        result = (0, getInitials_1.getInitials)('47 12', false, true);
+        expect(result).toEqual('41');
+        result = (0, getInitials_1.getInitials)('1 Ext 2', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('James Ext 2', false);
+        expect(result).toEqual('J2');
+        result = (0, getInitials_1.getInitials)('1x1', false);
+        expect(result).toEqual('');
+        result = (0, getInitials_1.getInitials)('1y1', false);
+        expect(result).toEqual('1');
+        result = (0, getInitials_1.getInitials)('1', false);
+        expect(result).toEqual('1');
+        result = (0, getInitials_1.getInitials)('A 2', false);
+        expect(result).toEqual('A2');
+    });
+});
+//# sourceMappingURL=getInitials.test.js.map

package/lib-commonjs/utils/getInitials.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInitials.test.js","sourceRoot":"","sources":["../../src/utils/getInitials.test.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { getInitials } from './getInitials';
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib-commonjs/utils/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitials = void 0;
+var getInitials_1 = require("./getInitials");
+Object.defineProperty(exports, "getInitials", { enumerable: true, get: function () { return getInitials_1.getInitials; } });
+//# sourceMappingURL=index.js.map

package/lib-commonjs/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;AAAA,6CAA4C;AAAnC,0GAAA,WAAW,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-avatar",
-  "version": "0.14.26",
+  "version": "0.14.29",
   "description": "A cross-platform Avatar component using the Fluent Design System. Currently only implemented on iOS",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -26,14 +26,15 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": "^0.8.5",
-    "@fluentui-react-native/badge": "^0.0.33",
+    "@fluentui-react-native/badge": "^0.0.35",
     "@fluentui-react-native/component-cache": "^1.3.2",
-    "@fluentui-react-native/icon": "^0.11.21",
-    "@fluentui-react-native/interactive-hooks": "^0.15.6",
-    "@fluentui-react-native/framework": "0.7.26",
-    "@fluentui-react-native/theme-tokens": "^0.16.2",
-    "@fluentui-react-native/tokens": "^0.12.0",
-    "@fluentui-react-native/use-styling": "^0.8.3"
+    "@fluentui-react-native/framework": "0.7.27",
+    "@fluentui-react-native/icon": "^0.11.22",
+    "@fluentui-react-native/interactive-hooks": "^0.15.7",
+    "@fluentui-react-native/theme-tokens": "^0.16.3",
+    "@fluentui-react-native/tokens": "^0.12.1",
+    "@fluentui-react-native/use-styling": "^0.8.3",
+    "react-native-svg": "^12.3.0"
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",

package/src/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@fluentui-react-native/eslint-config-rules'],
+};

package/src/JSAvatar.styling.ts

@@ -11,7 +11,16 @@ const nameMap: { [key: string]: string } = {
   end: 'flex-end',
 };
 
-export const avatarStates: (keyof JSAvatarTokens)[] = [...AvatarColors, ...AvatarSizesForTokens, 'circular', 'square', 'inactive'];
+export const avatarStates: (keyof JSAvatarTokens)[] = [
+  ...AvatarColors,
+  ...AvatarSizesForTokens,
+  'circular',
+  'square',
+  'inactive',
+  'ringColor',
+  'ringBackgroundColor',
+  'iconColor',
+];
 
 export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps, JSAvatarTokens> = {
   tokens: [defaultJSAvatarTokens, JSAvatarName],
@@ -41,6 +50,7 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
           style: {
             ...fontStyles.from(tokens, theme),
             color: tokens.color,
+            textAlign: 'center',
           },
         };
       },
@@ -60,10 +70,12 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
             justifyContent: 'center',
             alignItems: 'center',
             backgroundColor: backgroundColor,
+            borderWidth: tokens.borderWidth,
+            borderColor: tokens.borderColor,
           },
         };
       },
-      ['backgroundColor', 'width', 'height', ...borderStyles.keys],
+      ['backgroundColor', 'width', 'height', 'borderColor', 'borderWidth', ...borderStyles.keys],
     ),
     image: buildProps(
       (tokens: JSAvatarTokens) => {
@@ -72,22 +84,25 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
             borderRadius: tokens.borderRadius,
             width: tokens.width,
             height: tokens.height,
+            borderWidth: tokens.borderWidth,
+            borderColor: tokens.borderColor,
           },
         };
       },
-      ['borderRadius', 'width', 'height'],
+      ['borderRadius', 'width', 'height', 'borderColor', 'borderWidth'],
     ),
     icon: buildProps(
       (tokens: JSAvatarTokens) => {
         return {
           style: {
             position: 'absolute',
+            color: tokens.iconColor,
             width: tokens.iconSize,
             height: tokens.iconSize,
           },
         };
       },
-      ['iconSize'],
+      ['iconSize', 'iconColor'],
     ),
     ring: buildProps(
       (tokens: JSAvatarTokens, theme: Theme) => {
@@ -95,17 +110,18 @@ export const stylingSettings: UseStylingOptions<JSAvatarProps, AvatarSlotProps,
         return {
           style: {
             borderStyle: 'solid',
-            borderWidth: ringConfig.stroke,
             width: ringConfig.size,
             height: ringConfig.size,
             position: 'absolute',
             top: -ringConfig.stroke * 2,
             left: -ringConfig.stroke * 2,
             ...borderStyles.from(tokens, theme),
+            borderWidth: ringConfig.stroke,
+            borderColor: tokens.ringColor,
           },
         };
       },
-      ['width', 'height', ...borderStyles.keys],
+      ['width', 'height', 'ringColor', ...borderStyles.keys],
     ),
     badge: buildProps(
       (tokens: JSAvatarTokens) => {

package/src/JSAvatar.tsx

@@ -7,6 +7,7 @@ import { useAvatar } from './useAvatar';
 import { PresenceBadge } from '@fluentui-react-native/badge';
 import { Icon } from '@fluentui-react-native/icon';
 import { createIconProps } from '@fluentui-react-native/interactive-hooks';
+import { SvgXml } from 'react-native-svg';
 
 /**
  * A function which determines if a set of styles should be applied to the compoent given the current state and props of the avatar.
@@ -52,6 +53,10 @@ export const JSAvatar = compose<JSAvatarType>({
       const { activeAppearance, icon, initials, image, badge, ...mergedProps } = mergeProps(avatar.props, final);
       const { showRing, transparentRing, showBadge } = avatar.state;
       const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
+      const fallBackIconXml = `<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7 0C4.79086 0 3 1.79086 3 4C3 6.20914 4.79086 8 7 8C9.20914 8 11 6.20914 11 4C11 1.79086 9.20914 0 7 0ZM4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4ZM2.00873 9C0.903151 9 0 9.88687 0 11C0 12.6912 0.83281 13.9663 2.13499 14.7966C3.41697 15.614 5.14526 16 7 16C8.85474 16 10.583 15.614 11.865 14.7966C13.1672 13.9663 14 12.6912 14 11C14 9.89557 13.1045 9.00001 12 9.00001L2.00873 9ZM1 11C1 10.4467 1.44786 10 2.00873 10L12 10C12.5522 10 13 10.4478 13 11C13 12.3088 12.3777 13.2837 11.3274 13.9534C10.2568 14.636 8.73511 15 7 15C5.26489 15 3.74318 14.636 2.67262 13.9534C1.62226 13.2837 1 12.3088 1 11Z" fill="currentColor"/>
+      </svg>
+      `;
 
       return (
         <Slots.root {...mergedProps}>
@@ -59,7 +64,13 @@ export const JSAvatar = compose<JSAvatarType>({
             <Slots.image {...image} />
           ) : (
             <Slots.initialsBackground>
-              {initials ? <Slots.initials>{initials}</Slots.initials> : userProps.icon && <Slots.icon {...iconProps} />}
+              {initials ? (
+                <Slots.initials>{initials}</Slots.initials>
+              ) : userProps.icon ? (
+                <Slots.icon {...iconProps} />
+              ) : (
+                <SvgXml xml={fallBackIconXml} />
+              )}
             </Slots.initialsBackground>
           )}
           {showRing && !transparentRing && <Slots.ring />}

package/src/JSAvatar.types.ts

@@ -69,7 +69,6 @@ export type IconAlignment = 'start' | 'center' | 'end';
 export interface RingConfig {
   accent?: boolean;
   transparent?: boolean;
-  ringBackgroundColor?: ColorValue; // inner/outer rings
   ringThickness?: number;
   innerGap?: number;
 }
@@ -159,11 +158,14 @@ export interface JSAvatarProps extends IViewProps, AvatarConfigurableProps {
 }
 
 export interface JSAvatarTokens extends IBackgroundColorTokens, IForegroundColorTokens, AvatarConfigurableProps, IBorderTokens, FontTokens {
+  iconColor?: ColorValue;
   iconSize?: number;
   height?: number;
   horizontalIconAlignment?: IconAlignment;
   verticalIconAlignment?: IconAlignment;
   circular?: JSAvatarTokens;
+  ringColor?: ColorValue;
+  ringBackgroundColor?: ColorValue;
   square?: JSAvatarTokens;
   inactive?: JSAvatarTokens;
   avatarOpacity?: number;

package/src/JSAvatarTokens.ts

@@ -15,6 +15,11 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     fontSize: globalTokens.font.size[200],
     width: 24,
     height: 24,
+    iconSize: 16,
+    iconColor: globalTokens.color.white,
+    ringColor: t.colors.transparentStroke,
+    borderColor: globalTokens.color.white,
+    borderWidth: t.host.appearance === 'highContrast' ? 1 : 0,
     circular: {
       borderRadius: globalTokens.corner.radius.circle,
     },
@@ -132,161 +137,77 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     neutral: {
       backgroundColor: t.colors.neutralBackground6,
       color: t.colors.neutralForeground3,
-      borderColor: t.colors.defaultBorder,
+      iconColor: t.colors.neutralForeground3,
+      ringColor: t.colors.transparentStroke,
     },
     brand: {
       backgroundColor: t.colors.brandBackgroundStatic,
       color: t.colors.neutralForegroundOnBrand,
-      borderColor: t.colors.brandedBorder,
-    },
-    darkRed: {
-      backgroundColor: globalTokens.color.darkRed.tint40,
-      color: globalTokens.color.darkRed.shade30,
-      borderColor: globalTokens.color.darkRed.primary,
-    },
-    cranberry: {
-      backgroundColor: globalTokens.color.cranberry.tint40,
-      color: globalTokens.color.cranberry.shade30,
-      borderColor: globalTokens.color.cranberry.primary,
-    },
-    red: {
-      backgroundColor: globalTokens.color.red.tint40,
-      color: globalTokens.color.red.shade30,
-      borderColor: globalTokens.color.red.primary,
-    },
-    pumpkin: {
-      backgroundColor: globalTokens.color.pumpkin.tint40,
-      color: globalTokens.color.pumpkin.shade30,
-      borderColor: globalTokens.color.pumpkin.primary,
-    },
-    peach: {
-      backgroundColor: globalTokens.color.peach.tint40,
-      color: globalTokens.color.peach.shade30,
-      borderColor: globalTokens.color.peach.primary,
-    },
-    marigold: {
-      backgroundColor: globalTokens.color.marigold.tint40,
-      color: globalTokens.color.marigold.shade30,
-      borderColor: globalTokens.color.marigold.primary,
-    },
-    gold: {
-      backgroundColor: globalTokens.color.gold.tint40,
-      color: globalTokens.color.gold.shade30,
-      borderColor: globalTokens.color.gold.primary,
-    },
-    brass: {
-      backgroundColor: globalTokens.color.brass.tint40,
-      color: globalTokens.color.brass.shade30,
-      borderColor: globalTokens.color.brass.primary,
-    },
-    brown: {
-      backgroundColor: globalTokens.color.brown.tint40,
-      color: globalTokens.color.brown.shade30,
-      borderColor: globalTokens.color.brown.primary,
-    },
-    forest: {
-      backgroundColor: globalTokens.color.forest.tint40,
-      color: globalTokens.color.forest.shade30,
-      borderColor: globalTokens.color.forest.primary,
-    },
-    seafoam: {
-      backgroundColor: globalTokens.color.seafoam.tint40,
-      color: globalTokens.color.seafoam.shade30,
-      borderColor: globalTokens.color.seafoam.primary,
-    },
-    darkGreen: {
-      backgroundColor: globalTokens.color.darkGreen.tint40,
-      color: globalTokens.color.darkGreen.shade30,
-      borderColor: globalTokens.color.darkGreen.primary,
-    },
-    lightTeal: {
-      backgroundColor: globalTokens.color.lightTeal.tint40,
-      color: globalTokens.color.lightTeal.shade30,
-      borderColor: globalTokens.color.lightTeal.primary,
-    },
-    teal: {
-      backgroundColor: globalTokens.color.teal.tint40,
-      color: globalTokens.color.teal.shade30,
-      borderColor: globalTokens.color.teal.primary,
-    },
-    steel: {
-      backgroundColor: globalTokens.color.steel.tint40,
-      color: globalTokens.color.steel.shade30,
-      borderColor: globalTokens.color.steel.primary,
-    },
-    blue: {
-      backgroundColor: globalTokens.color.blue.tint40,
-      color: globalTokens.color.blue.shade30,
-      borderColor: globalTokens.color.blue.primary,
-    },
-    royalBlue: {
-      backgroundColor: globalTokens.color.royalBlue.tint40,
-      color: globalTokens.color.royalBlue.shade30,
-      borderColor: globalTokens.color.royalBlue.primary,
-    },
-    cornflower: {
-      backgroundColor: globalTokens.color.cornflower.tint40,
-      color: globalTokens.color.cornflower.shade30,
-      borderColor: globalTokens.color.cornflower.primary,
-    },
-    navy: {
-      backgroundColor: globalTokens.color.navy.tint40,
-      color: globalTokens.color.navy.shade30,
-      borderColor: globalTokens.color.navy.primary,
-    },
-    lavender: {
-      backgroundColor: globalTokens.color.lavender.tint40,
-      color: globalTokens.color.lavender.shade30,
-      borderColor: globalTokens.color.lavender.primary,
-    },
-    purple: {
-      backgroundColor: globalTokens.color.purple.tint40,
-      color: globalTokens.color.purple.shade30,
-      borderColor: globalTokens.color.purple.primary,
-    },
-    grape: {
-      backgroundColor: globalTokens.color.grape.tint40,
-      color: globalTokens.color.grape.shade30,
-      borderColor: globalTokens.color.grape.primary,
-    },
-    lilac: {
-      backgroundColor: globalTokens.color.lilac.tint40,
-      color: globalTokens.color.lilac.shade30,
-      borderColor: globalTokens.color.lilac.primary,
-    },
-    pink: {
-      backgroundColor: globalTokens.color.pink.tint40,
-      color: globalTokens.color.pink.shade30,
-      borderColor: globalTokens.color.pink.primary,
-    },
-    magenta: {
-      backgroundColor: globalTokens.color.magenta.tint40,
-      color: globalTokens.color.magenta.shade30,
-      borderColor: globalTokens.color.magenta.primary,
-    },
-    plum: {
-      backgroundColor: globalTokens.color.plum.tint40,
-      color: globalTokens.color.plum.shade30,
-      borderColor: globalTokens.color.plum.primary,
-    },
-    beige: {
-      backgroundColor: globalTokens.color.beige.tint40,
-      color: globalTokens.color.beige.shade30,
-      borderColor: globalTokens.color.beige.primary,
-    },
-    mink: {
-      backgroundColor: globalTokens.color.mink.tint40,
-      color: globalTokens.color.mink.shade30,
-      borderColor: globalTokens.color.mink.primary,
-    },
-    platinum: {
-      backgroundColor: globalTokens.color.platinum.tint40,
-      color: globalTokens.color.platinum.shade30,
-      borderColor: globalTokens.color.platinum.primary,
-    },
-    anchor: {
-      backgroundColor: globalTokens.color.anchor.tint40,
-      color: globalTokens.color.anchor.shade30,
-      borderColor: globalTokens.color.anchor.primary,
-    },
+      iconColor: t.colors.neutralForegroundOnBrand,
+      ringColor: t.colors.transparentStroke,
+    },
+    darkRed: getColorProps('darkRed', t),
+    cranberry: getColorProps('cranberry', t),
+    red: getColorProps('red', t),
+    pumpkin: getColorProps('pumpkin', t),
+    peach: getColorProps('peach', t),
+    marigold: getColorProps('marigold', t),
+    gold: getColorProps('gold', t),
+    brass: getColorProps('brass', t),
+    brown: getColorProps('brown', t),
+    forest: getColorProps('forest', t),
+    seafoam: getColorProps('seafoam', t),
+    darkGreen: getColorProps('darkGreen', t),
+    lightTeal: getColorProps('lightTeal', t),
+    teal: getColorProps('teal', t),
+    steel: getColorProps('steel', t),
+    blue: getColorProps('blue', t),
+    royalBlue: getColorProps('royalBlue', t),
+    cornflower: getColorProps('cornflower', t),
+    navy: getColorProps('navy', t),
+    lavender: getColorProps('lavender', t),
+    purple: getColorProps('purple', t),
+    grape: getColorProps('grape', t),
+    lilac: getColorProps('lilac', t),
+    pink: getColorProps('pink', t),
+    magenta: getColorProps('magenta', t),
+    plum: getColorProps('plum', t),
+    beige: getColorProps('beige', t),
+    mink: getColorProps('mink', t),
+    platinum: getColorProps('platinum', t),
+    anchor: getColorProps('anchor', t),
   } as JSAvatarTokens);
+
+/**
+ * A function which returns object of props depending on color and theme.
+ * @param color
+ * @param theme
+ * @returns object of props - backgroundColor, color and ringColor
+ */
+function getColorProps(color: string, theme: Theme) {
+  const themeAppearance = theme.host.appearance;
+  switch (themeAppearance) {
+    case 'light':
+    default:
+      return {
+        backgroundColor: globalTokens.color[color].tint40,
+        color: globalTokens.color[color].shade30,
+        iconColor: globalTokens.color[color].shade30,
+        ringColor: globalTokens.color[color].primary,
+      };
+    case 'dark':
+      return {
+        backgroundColor: globalTokens.color[color].shade30,
+        color: globalTokens.color[color].tint40,
+        iconColor: globalTokens.color[color].tint40,
+        ringColor: globalTokens.color[color].tint30,
+      };
+    case 'highContrast':
+      return {
+        backgroundColor: theme.colors.neutralBackground6,
+        color: theme.colors.neutralForeground3,
+        iconColor: theme.colors.neutralForeground3,
+        ringColor: theme.colors.transparentStroke,
+      };
+  }
+}