feat(avatar): DLT-2942 updated avatar component (#1047)

Co-authored-by: Brad Paugh <brad.paugh@dialpad.com>
Co-authored-by: Josh Everhart <josh.everhart@dialpad.com>
Co-authored-by: Francis Rupert <francis.rupert@dialpad.com>
Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: Nina Repetto <nina.repetto@dialpad.com>
Co-authored-by: Ignacio Ropolo <89984179+iropolo@users.noreply.github.com>
Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>
Co-authored-by: belumontoya <163597542+belumontoya@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: 10 people

.github/actions/setup-environment/action.yml

@@ -17,6 +17,12 @@ runs:
       env:
         NODE_AUTH_TOKEN: ${{ github.token }}
 
+    - name: Configure GitHub Packages auth
+      shell: bash
+      run: |
+        echo "@dialpad:registry=https://npm.pkg.github.com" >> ~/.npmrc
+        echo "//npm.pkg.github.com/:_authToken=${{ github.token }}" >> ~/.npmrc
+
     - name: Install dependencies
       shell: bash
       run: pnpm install --frozen-lockfile

CHANGELOG.json

@@ -1,23 +1,22 @@
-# [9.154.0-next.5](https://github.com/dialpad/dialtone/compare/dialtone/v9.154.0-next.4...dialtone/v9.154.0-next.5) (2026-02-03)
+## [9.156.1](https://github.com/dialpad/dialtone/compare/dialtone/v9.156.0...dialtone/v9.156.1) (2026-01-30)
 
 
 ### Bug Fixes
 
-* **Tokens:** handle multi-layer box shadows correctly in postcss plugin ([feea7f1](https://github.com/dialpad/dialtone/commit/feea7f19f8f5380460db28eae0d51fab73413c24))
+* **Contact Info:** DLT-2904 remove min-width from left section ([#1032](https://github.com/dialpad/dialtone/issues/1032)) ([7dbc88d](https://github.com/dialpad/dialtone/commit/7dbc88d699e8adee9f86ace3cb31fab5930f5238))
+* **Tokens:** DP-173715 downgrade sd-transforms/colorjs.io ([#1039](https://github.com/dialpad/dialtone/issues/1039)) ([b0fbcd0](https://github.com/dialpad/dialtone/commit/b0fbcd0bc75478618a441b143b3a781761a6bd22))
 
-# [9.154.0-next.4](https://github.com/dialpad/dialtone/compare/dialtone/v9.154.0-next.3...dialtone/v9.154.0-next.4) (2026-02-03)
+# [9.156.0](https://github.com/dialpad/dialtone/compare/dialtone/v9.155.4...dialtone/v9.156.0) (2026-01-29)
 
 
-### Bug Fixes
-
-* **Tokens:** NO-JIRA output line-height as unitless instead of percentages ([#1040](https://github.com/dialpad/dialtone/issues/1040)) ([33d8505](https://github.com/dialpad/dialtone/commit/33d850503133a0507968fadd73f0722b48a35e3e))
+### Documentation
 
-# [9.154.0-next.3](https://github.com/dialpad/dialtone/compare/dialtone/v9.154.0-next.2...dialtone/v9.154.0-next.3) (2026-01-30)
+* DLT-2854 add MCP Server guide to documentation ([#1035](https://github.com/dialpad/dialtone/issues/1035)) ([dd4ebb6](https://github.com/dialpad/dialtone/commit/dd4ebb6fe9c975494ee6a44742af748eecbd2432))
 
 
-### Code Refactoring
+### Features
 
-* **Text:** DLT-2883 rename headline sizes from xxl => 2xl, etc ([#1029](https://github.com/dialpad/dialtone/issues/1029)) ([0ac86f3](https://github.com/dialpad/dialtone/commit/0ac86f30fb59298942a633d0fc42e68ee3ff348f))
+* NO-JIRA export everything from utils/constants ([#1038](https://github.com/dialpad/dialtone/issues/1038)) ([1aa0814](https://github.com/dialpad/dialtone/commit/1aa0814903d5a7417c52919aaac7959bf5b39456))
 
 ## [9.155.4](https://github.com/dialpad/dialtone/compare/dialtone/v9.155.3...dialtone/v9.155.4) (2026-01-22)
 

CHANGELOG.md

@@ -38,7 +38,7 @@
             <th
               scope="row"
               class="d-code--sm d-docsite-code"
-              v-text="`.${className}`"
+              v-text="className.startsWith('data-') ? className : `.${className}`"
             />
             <td class="d-code--sm">
               <span

apps/dialtone-documentation/docs/.vuepress/baseComponents/ComponentClassTable.vue

@@ -6,124 +6,94 @@
       "description": "Root level of Avatar."
     },
     {
-      "class": "d-avatar--xs",
-      "applies": ".d-avatar",
-      "description": "Applies extra-small size."
-    },
-    {
-      "class": "d-avatar--sm",
-      "applies": ".d-avatar",
-      "description": "Applies small size."
-    },
-    {
-      "class": "d-avatar--md",
-      "applies": ".d-avatar",
-      "description": "Applies medium size."
-    },
-    {
-      "class": "d-avatar--lg",
-      "applies": ".d-avatar",
-      "description": "Applies large size."
-    },
-    {
-      "class": "d-avatar--xl",
-      "applies": ".d-avatar",
-      "description": "Applies extra-large size."
-    },
-    {
-      "class": "d-avatar--color-000",
-      "applies": ".d-avatar",
-      "description": "Applies the default grey color."
-    },
-    {
-      "class": "d-avatar--color-100",
+      "class": "d-avatar--size-100",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 100 (16px). Supports presence."
     },
     {
-      "class": "d-avatar--color-200",
+      "class": "d-avatar--size-150",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 150 (20px). Supports presence."
     },
     {
-      "class": "d-avatar--color-300",
+      "class": "d-avatar--size-200",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 200 (24px). Supports presence."
     },
     {
-      "class": "d-avatar--color-400",
+      "class": "d-avatar--size-250",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 250 (28px). Supports presence."
     },
     {
-      "class": "d-avatar--color-500",
+      "class": "d-avatar--size-300",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 300 (32px). Default size. Supports presence."
     },
     {
-      "class": "d-avatar--color-600",
+      "class": "d-avatar--size-400",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 400 (40px). Supports presence."
     },
     {
-      "class": "d-avatar--color-700",
+      "class": "d-avatar--size-500",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 500 (48px). Supports presence."
     },
     {
-      "class": "d-avatar--color-800",
+      "class": "d-avatar--size-600",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 600 (64px)."
     },
     {
-      "class": "d-avatar--color-900",
+      "class": "d-avatar--size-700",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 700 (96px)."
     },
     {
-      "class": "d-avatar--color-1000",
+      "class": "d-avatar--size-800",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 800 (128px)."
     },
     {
-      "class": "d-avatar--color-1100",
+      "class": "d-avatar--size-900",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Applies size 900 (256px)."
     },
     {
-      "class": "d-avatar--color-1200",
+      "class": "d-avatar--xs",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Deprecated. Alias for size-100 (16px)."
     },
     {
-      "class": "d-avatar--color-1300",
+      "class": "d-avatar--sm",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Deprecated. Alias for size-200 (24px)."
     },
     {
-      "class": "d-avatar--color-1400",
+      "class": "d-avatar--md",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Deprecated. Alias for size-300 (32px)."
     },
     {
-      "class": "d-avatar--color-1500",
+      "class": "d-avatar--lg",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Deprecated. Alias for size-400 (40px)."
     },
     {
-      "class": "d-avatar--color-1600",
+      "class": "d-avatar--xl",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Deprecated. Alias for size-500 (48px)."
     },
     {
-      "class": "d-avatar--color-1700",
+      "class": "data-avatar-family=\"[1-12]\"",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Sets the hue family (1-12). Each family is 30° apart on the color wheel, offset from the theme's anchor hue."
     },
     {
-      "class": "d-avatar--color-1800",
+      "class": "data-avatar-variant=\"[0-9]\"",
       "applies": ".d-avatar",
-      "description": "Applies a unique color."
+      "description": "Sets the lightness/chroma variant (0-9). 0=darkest, 9=lightest. Variants 0-5 use light text, 6-9 use dark text."
     },
     {
       "class": "d-avatar--group",