Skip to content

fix(avatar): use semantic token#2171

Merged
QuintonJason merged 1 commit intodevelopfrom
fix/avatar-background-token
Feb 25, 2026
Merged

fix(avatar): use semantic token#2171
QuintonJason merged 1 commit intodevelopfrom
fix/avatar-background-token

Conversation

@QuintonJason
Copy link
Contributor

Replace hardcoded grey color tokens with semantic background tokens in the Avatar component for better maintainability and theme support.

Token changes:

  • pine-color-grey-200pine-color-background-inset (charcoal/grey ring backgrounds)
  • pine-color-grey-150pine-color-background-muted (orange ring background)
  • pine-color-grey-050pine-color-background-container-hover (base avatar background)

Screenshots

Before After
No visual change expected No visual change expected

Testing in sage-lib

  1. Navigate to the Avatar component page in Storybook
  2. Verify avatars with different ring colors (charcoal, grey, orange) display correctly
  3. Verify the base avatar background appears as expected

Testing in kajabi-products

  1. (LOW) Updated Avatar component to use semantic background tokens instead of raw grey color values. No visual changes expected.
    • Check member avatars in the Community area
    • Check user avatars in course comments
    • Verify avatar rings display correctly where applicable

Related

Part of ongoing effort to migrate from raw color tokens to semantic tokens.

@QuintonJason QuintonJason self-assigned this Feb 25, 2026
@QuintonJason QuintonJason merged commit 2a0d304 into develop Feb 25, 2026
5 checks passed
@pixelflips pixelflips mentioned this pull request Feb 25, 2026
QuintonJason added a commit that referenced this pull request Feb 25, 2026
* chore(deps): bump @pine-ds/icons from 9.16.0 to 9.17.0 (#2166)

Bumps [@pine-ds/icons](https://github.com/Kajabi/pine-icons) from 9.16.0 to 9.17.0.
- [Release notes](https://github.com/Kajabi/pine-icons/releases)
- [Changelog](https://github.com/Kajabi/pine-icons/blob/main/CHANGELOG.md)
- [Commits](Kajabi/pine-icons@v9.16.0...v9.17.0)

---
updated-dependencies:
- dependency-name: "@pine-ds/icons"
  dependency-version: 9.17.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* style: use semantic focus-ring token across components (#2168)

* style: replace hardcoded purple-600 with focus-ring token

* style(breadcrumbs): add focus ring to progressbar variant

* feat(hero): add shadow prop (#2170)

* feat(hero): add shadow prop to React component and SCSS

* feat(hero): add shadow prop to Rails component

* docs(hero): add shadow prop documentation and preview examples

* fix(hero): quote 050 shadow key in SCSS map and fix alt text hyphenation

* fix(avatar): use semantic token (#2171)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Quinton Jason <quinton.jason@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants