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

package/src/JSAvatarTokens.ts

@@ -10,6 +10,9 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
     color: globalTokens.color.white,
     backgroundColor: globalTokens.color.cornflower.primary,
     avatarOpacity: 1,
+    fontFamily: t.typography.families.primary,
+    fontWeight: globalTokens.font.weight.semibold,
+    fontSize: globalTokens.font.size[200],
     width: 24,
     height: 24,
     circular: {
@@ -26,183 +29,264 @@ export const defaultJSAvatarTokens: TokenSettings<JSAvatarTokens, Theme> = (t: T
       height: 20,
       badgeSize: 'smallest',
       iconSize: 16,
-      initialsSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
     },
     size24: {
       width: 24,
       height: 24,
       badgeSize: 'smallest',
       iconSize: 16,
-      initialsSize: 16,
+      fontSize: globalTokens.font.size[100],
+      square: {
+        borderRadius: globalTokens.corner.radius.small,
+      },
     },
     size28: {
       width: 28,
       height: 28,
       badgeSize: 'smaller',
       iconSize: 20,
-      initialsSize: 20,
+      fontWeight: globalTokens.font.weight.semibold,
+      fontSize: globalTokens.font.size[100],
     },
     size32: {
       width: 32,
       height: 32,
       badgeSize: 'smaller',
       iconSize: 20,
-      initialsSize: 20,
+      fontSize: globalTokens.font.size[100],
     },
     size36: {
       width: 36,
       height: 36,
       badgeSize: 'smaller',
       iconSize: 20,
-      initialsSize: 20,
     },
     size40: {
       width: 40,
       height: 40,
       badgeSize: 'small',
       iconSize: 20,
-      initialsSize: 20,
     },
     size48: {
       width: 48,
       height: 48,
       badgeSize: 'small',
       iconSize: 24,
-      initialsSize: 24,
     },
     size56: {
       width: 56,
       height: 56,
       badgeSize: 'medium',
       iconSize: 28,
-      initialsSize: 28,
+      fontSize: globalTokens.font.size[400],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size64: {
       width: 64,
       height: 64,
       badgeSize: 'large',
       iconSize: 32,
-      initialsSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size72: {
       width: 72,
       height: 72,
       badgeSize: 'large',
       iconSize: 32,
-      initialsSize: 32,
+      fontSize: globalTokens.font.size[500],
+      square: {
+        borderRadius: globalTokens.corner.radius.large,
+      },
     },
     size96: {
       width: 96,
       height: 96,
       badgeSize: 'largest',
       iconSize: 48,
-      initialsSize: 48,
+      fontWeight: globalTokens.font.weight.regular,
+      fontSize: globalTokens.font.size[700],
+      square: {
+        borderRadius: globalTokens.corner.radius.extraLarge,
+      },
     },
     size120: {
       width: 120,
       height: 120,
       badgeSize: 'largest',
       iconSize: 48,
-      initialsSize: 48,
+      fontWeight: globalTokens.font.weight.regular,
+      fontSize: globalTokens.font.size[900],
+      square: {
+        borderRadius: globalTokens.corner.radius.extraLarge,
+      },
     },
     neutral: {
       backgroundColor: t.colors.neutralBackground6,
       color: t.colors.neutralForeground3,
-      ringColor: t.colors.defaultBorder,
+      borderColor: t.colors.defaultBorder,
     },
     brand: {
       backgroundColor: t.colors.brandBackgroundStatic,
       color: t.colors.neutralForegroundOnBrand,
-      ringColor: t.colors.brandedBorder,
+      borderColor: t.colors.brandedBorder,
     },
     darkRed: {
-      backgroundColor: globalTokens.color.darkRed.primary,
+      backgroundColor: globalTokens.color.darkRed.tint40,
+      color: globalTokens.color.darkRed.shade30,
+      borderColor: globalTokens.color.darkRed.primary,
     },
     cranberry: {
-      backgroundColor: globalTokens.color.cranberry.primary,
+      backgroundColor: globalTokens.color.cranberry.tint40,
+      color: globalTokens.color.cranberry.shade30,
+      borderColor: globalTokens.color.cranberry.primary,
     },
     red: {
-      backgroundColor: globalTokens.color.red.primary,
+      backgroundColor: globalTokens.color.red.tint40,
+      color: globalTokens.color.red.shade30,
+      borderColor: globalTokens.color.red.primary,
     },
     pumpkin: {
-      backgroundColor: globalTokens.color.pumpkin.primary,
+      backgroundColor: globalTokens.color.pumpkin.tint40,
+      color: globalTokens.color.pumpkin.shade30,
+      borderColor: globalTokens.color.pumpkin.primary,
     },
     peach: {
-      backgroundColor: globalTokens.color.peach.primary,
+      backgroundColor: globalTokens.color.peach.tint40,
+      color: globalTokens.color.peach.shade30,
+      borderColor: globalTokens.color.peach.primary,
     },
     marigold: {
-      backgroundColor: globalTokens.color.marigold.primary,
+      backgroundColor: globalTokens.color.marigold.tint40,
+      color: globalTokens.color.marigold.shade30,
+      borderColor: globalTokens.color.marigold.primary,
     },
     gold: {
-      backgroundColor: globalTokens.color.gold.primary,
+      backgroundColor: globalTokens.color.gold.tint40,
+      color: globalTokens.color.gold.shade30,
+      borderColor: globalTokens.color.gold.primary,
     },
     brass: {
-      backgroundColor: globalTokens.color.brass.primary,
+      backgroundColor: globalTokens.color.brass.tint40,
+      color: globalTokens.color.brass.shade30,
+      borderColor: globalTokens.color.brass.primary,
     },
     brown: {
-      backgroundColor: globalTokens.color.brown.primary,
+      backgroundColor: globalTokens.color.brown.tint40,
+      color: globalTokens.color.brown.shade30,
+      borderColor: globalTokens.color.brown.primary,
     },
     forest: {
-      backgroundColor: globalTokens.color.forest.primary,
+      backgroundColor: globalTokens.color.forest.tint40,
+      color: globalTokens.color.forest.shade30,
+      borderColor: globalTokens.color.forest.primary,
     },
     seafoam: {
-      backgroundColor: globalTokens.color.seafoam.primary,
+      backgroundColor: globalTokens.color.seafoam.tint40,
+      color: globalTokens.color.seafoam.shade30,
+      borderColor: globalTokens.color.seafoam.primary,
     },
     darkGreen: {
-      backgroundColor: globalTokens.color.darkGreen.primary,
+      backgroundColor: globalTokens.color.darkGreen.tint40,
+      color: globalTokens.color.darkGreen.shade30,
+      borderColor: globalTokens.color.darkGreen.primary,
     },
     lightTeal: {
-      backgroundColor: globalTokens.color.lightTeal.primary,
+      backgroundColor: globalTokens.color.lightTeal.tint40,
+      color: globalTokens.color.lightTeal.shade30,
+      borderColor: globalTokens.color.lightTeal.primary,
     },
     teal: {
-      backgroundColor: globalTokens.color.teal.primary,
+      backgroundColor: globalTokens.color.teal.tint40,
+      color: globalTokens.color.teal.shade30,
+      borderColor: globalTokens.color.teal.primary,
     },
     steel: {
-      backgroundColor: globalTokens.color.steel.primary,
+      backgroundColor: globalTokens.color.steel.tint40,
+      color: globalTokens.color.steel.shade30,
+      borderColor: globalTokens.color.steel.primary,
     },
     blue: {
-      backgroundColor: globalTokens.color.blue.primary,
+      backgroundColor: globalTokens.color.blue.tint40,
+      color: globalTokens.color.blue.shade30,
+      borderColor: globalTokens.color.blue.primary,
     },
     royalBlue: {
-      backgroundColor: globalTokens.color.royalBlue.primary,
+      backgroundColor: globalTokens.color.royalBlue.tint40,
+      color: globalTokens.color.royalBlue.shade30,
+      borderColor: globalTokens.color.royalBlue.primary,
     },
     cornflower: {
-      backgroundColor: globalTokens.color.cornflower.primary,
+      backgroundColor: globalTokens.color.cornflower.tint40,
+      color: globalTokens.color.cornflower.shade30,
+      borderColor: globalTokens.color.cornflower.primary,
     },
     navy: {
-      backgroundColor: globalTokens.color.navy.primary,
+      backgroundColor: globalTokens.color.navy.tint40,
+      color: globalTokens.color.navy.shade30,
+      borderColor: globalTokens.color.navy.primary,
     },
     lavender: {
-      backgroundColor: globalTokens.color.lavender.primary,
+      backgroundColor: globalTokens.color.lavender.tint40,
+      color: globalTokens.color.lavender.shade30,
+      borderColor: globalTokens.color.lavender.primary,
     },
     purple: {
-      backgroundColor: globalTokens.color.purple.primary,
+      backgroundColor: globalTokens.color.purple.tint40,
+      color: globalTokens.color.purple.shade30,
+      borderColor: globalTokens.color.purple.primary,
     },
     grape: {
-      backgroundColor: globalTokens.color.grape.primary,
+      backgroundColor: globalTokens.color.grape.tint40,
+      color: globalTokens.color.grape.shade30,
+      borderColor: globalTokens.color.grape.primary,
     },
     lilac: {
-      backgroundColor: globalTokens.color.lilac.primary,
+      backgroundColor: globalTokens.color.lilac.tint40,
+      color: globalTokens.color.lilac.shade30,
+      borderColor: globalTokens.color.lilac.primary,
     },
     pink: {
-      backgroundColor: globalTokens.color.pink.primary,
+      backgroundColor: globalTokens.color.pink.tint40,
+      color: globalTokens.color.pink.shade30,
+      borderColor: globalTokens.color.pink.primary,
     },
     magenta: {
-      backgroundColor: globalTokens.color.magenta.primary,
+      backgroundColor: globalTokens.color.magenta.tint40,
+      color: globalTokens.color.magenta.shade30,
+      borderColor: globalTokens.color.magenta.primary,
     },
     plum: {
-      backgroundColor: globalTokens.color.plum.primary,
+      backgroundColor: globalTokens.color.plum.tint40,
+      color: globalTokens.color.plum.shade30,
+      borderColor: globalTokens.color.plum.primary,
     },
     beige: {
-      backgroundColor: globalTokens.color.beige.primary,
+      backgroundColor: globalTokens.color.beige.tint40,
+      color: globalTokens.color.beige.shade30,
+      borderColor: globalTokens.color.beige.primary,
     },
     mink: {
-      backgroundColor: globalTokens.color.mink.primary,
+      backgroundColor: globalTokens.color.mink.tint40,
+      color: globalTokens.color.mink.shade30,
+      borderColor: globalTokens.color.mink.primary,
     },
     platinum: {
-      backgroundColor: globalTokens.color.platinum.primary,
+      backgroundColor: globalTokens.color.platinum.tint40,
+      color: globalTokens.color.platinum.shade30,
+      borderColor: globalTokens.color.platinum.primary,
     },
     anchor: {
-      backgroundColor: globalTokens.color.anchor.primary,
+      backgroundColor: globalTokens.color.anchor.tint40,
+      color: globalTokens.color.anchor.shade30,
+      borderColor: globalTokens.color.anchor.primary,
     },
   } as JSAvatarTokens);