From dc334cb460f3fd51c28c71593edea7952ee39c93 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Fri, 27 Feb 2026 10:54:06 -0500
Subject: [PATCH] change size names

---
 .../bulk-reinvite-failure-dialog.component.html  |  2 +-
 .../settings/account.component.html              |  2 +-
 .../account/selectable-avatar.component.ts       |  2 +-
 .../src/app/layouts/header/web-header.stories.ts |  2 +-
 .../providers/settings/account.component.html    |  2 +-
 libs/components/src/avatar/avatar.component.ts   | 10 +++++-----
 libs/components/src/avatar/avatar.stories.ts     | 16 ++++++++--------
 libs/components/src/header/header.stories.ts     |  2 +-
 libs/components/src/item/item.stories.ts         |  2 +-
 9 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-reinvite-failure-dialog.component.html b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-reinvite-failure-dialog.component.html
index 0f216be6e5f..7ccd044a6a3 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-reinvite-failure-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-reinvite-failure-dialog.component.html
@@ -31,7 +31,7 @@
               <td bitCell>
                 <div class="tw-flex tw-items-center">
                   <bit-avatar
-                    size="small"
+                    size="sm"
                     [text]="u | userName"
                     [id]="u.userId"
                     [color]="u.avatarColor"
diff --git a/apps/web/src/app/admin-console/organizations/settings/account.component.html b/apps/web/src/app/admin-console/organizations/settings/account.component.html
index ae4bd73c737..5b4859ec6e7 100644
--- a/apps/web/src/app/admin-console/organizations/settings/account.component.html
+++ b/apps/web/src/app/admin-console/organizations/settings/account.component.html
@@ -21,7 +21,7 @@
         </bit-form-field>
       </div>
       <div>
-        <bit-avatar [text]="org.name" [id]="org.id" size="2xlarge"></bit-avatar>
+        <bit-avatar [text]="org.name" [id]="org.id" size="2xl"></bit-avatar>
         <app-account-fingerprint
           [fingerprintMaterial]="organizationId"
           [publicKeyBuffer]="publicKeyBuffer"
diff --git a/apps/web/src/app/auth/settings/account/selectable-avatar.component.ts b/apps/web/src/app/auth/settings/account/selectable-avatar.component.ts
index 27fe5b3ee9e..73165006b81 100644
--- a/apps/web/src/app/auth/settings/account/selectable-avatar.component.ts
+++ b/apps/web/src/app/auth/settings/account/selectable-avatar.component.ts
@@ -19,7 +19,7 @@ import { AvatarModule } from "@bitwarden/components";
     <bit-avatar
       appStopClick
       [text]="text"
-      size="2xlarge"
+      size="2xl"
       [text]="text"
       [color]="color"
       [id]="id"
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
index f742aeab662..7010ddc40bf 100644
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/apps/web/src/app/layouts/header/web-header.stories.ts
@@ -59,7 +59,7 @@ class MockProductSwitcherComponent {}
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "dynamic-avatar",
-  template: `<bit-avatar [text]="name$ | async" size="large"></bit-avatar>`,
+  template: `<bit-avatar [text]="name$ | async" size="lg"></bit-avatar>`,
   imports: [CommonModule, AvatarModule],
 })
 class MockDynamicAvatarComponent implements Partial<DynamicAvatarComponent> {
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/settings/account.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/settings/account.component.html
index cc6993a0895..a60168adf83 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/settings/account.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/settings/account.component.html
@@ -26,7 +26,7 @@
         </bit-form-field>
       </div>
       <div class="tw-col-span-6">
-        <bit-avatar [text]="provider.name" [id]="provider.id" size="2xlarge"></bit-avatar>
+        <bit-avatar [text]="provider.name" [id]="provider.id" size="2xl"></bit-avatar>
       </div>
     </div>
     <button type="submit" bitFormButton bitButton buttonType="primary">
diff --git a/libs/components/src/avatar/avatar.component.ts b/libs/components/src/avatar/avatar.component.ts
index 5807583f2fe..229c54d999d 100644
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@@ -12,17 +12,17 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { AriaDisableDirective } from "../a11y";
 import { ariaDisableElement } from "../utils";
 
-export type AvatarSize = "2xlarge" | "xlarge" | "large" | "base" | "small";
+export type AvatarSize = "2xl" | "xl" | "lg" | "base" | "sm";
 
 export const AvatarDefaultColors = ["teal", "coral", "brand", "green", "purple"] as const;
 export type AvatarColor = (typeof AvatarDefaultColors)[number];
 
 const sizeClasses: Record<AvatarSize, string[]> = {
-  "2xlarge": ["tw-h-16", "tw-w-16", "tw-min-w-16"],
-  xlarge: ["tw-h-14", "tw-w-14", "tw-min-w-14"],
-  large: ["tw-h-11", "tw-w-11", "tw-min-w-11"],
+  "2xl": ["tw-h-16", "tw-w-16", "tw-min-w-16"],
+  xl: ["tw-h-14", "tw-w-14", "tw-min-w-14"],
+  lg: ["tw-h-11", "tw-w-11", "tw-min-w-11"],
   base: ["tw-h-8", "tw-w-8", "tw-min-w-8"],
-  small: ["tw-h-6", "tw-w-6", "tw-min-w-6"],
+  sm: ["tw-h-6", "tw-w-6", "tw-min-w-6"],
 };
 
 /**
diff --git a/libs/components/src/avatar/avatar.stories.ts b/libs/components/src/avatar/avatar.stories.ts
index 5c6770c76c1..5caaec5036a 100644
--- a/libs/components/src/avatar/avatar.stories.ts
+++ b/libs/components/src/avatar/avatar.stories.ts
@@ -59,7 +59,7 @@ export const Sizes: Story = {
         <div class="tw-flex tw-gap-4 tw-mb-10">
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> small </span>
-            <bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'small'"></bit-avatar>
+            <bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'sm'"></bit-avatar>
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> base </span>
@@ -67,15 +67,15 @@ export const Sizes: Story = {
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> large </span>
-            <bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'large'"></bit-avatar>
+            <bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'lg'"></bit-avatar>
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> xlarge </span>
-            <bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'xlarge'"></bit-avatar>
+            <bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'xl'"></bit-avatar>
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> 2xlarge </span>
-            <bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'2xlarge'"></bit-avatar>
+            <bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'2xl'"></bit-avatar>
           </div>
         </div>
 
@@ -83,7 +83,7 @@ export const Sizes: Story = {
         <div class="tw-flex tw-gap-4 tw-mb-10">
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> small </span>
-            <button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'small'"></button>
+            <button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'sm'"></button>
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> base </span>
@@ -91,15 +91,15 @@ export const Sizes: Story = {
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> large </span>
-            <button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'large'"></button>
+            <button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'lg'"></button>
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> xlarge </span>
-            <button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'xlarge'"></button>
+            <button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'xl'"></button>
           </div>
           <div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
             <span> 2xlarge </span>
-            <button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'2xlarge'"></button>
+            <button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'2xl'"></button>
           </div>
         </div>
       `,
diff --git a/libs/components/src/header/header.stories.ts b/libs/components/src/header/header.stories.ts
index 693247dd88b..61108700e66 100644
--- a/libs/components/src/header/header.stories.ts
+++ b/libs/components/src/header/header.stories.ts
@@ -91,7 +91,7 @@ export const KitchenSink: Story = {
               type="text"
             />
             <button type="button" bitIconButton="bwi-filter" label="Switch products"></button>
-            <bit-avatar text="Will" size="large"></bit-avatar>
+            <bit-avatar text="Will" size="lg"></bit-avatar>
             <button bitButton buttonType="primary">New</button>
             <button bitButton slot="secondary">Click Me 🎉</button>
             <bit-tab-nav-bar slot="tabs">
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index c27c6f3275d..4e065657728 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -113,7 +113,7 @@ export const ContentSlots: Story = {
           <bit-avatar
             slot="start"
             text="Foo"
-            size="large"
+            size="lg"
           ></bit-avatar>
           foo&#64;bitwarden.com
           <ng-container slot="secondary">