@innovaccer/design-system 4.16.1 → 4.17.1

package/CHANGELOG.md

@@ -1,3 +1,77 @@
+## 4.17.1 (2025-12-11)
+
+### Highlights
+
+- fix(avatar): update avatar fallback appearance and text color (f20339b8)
+- docs(Avatars): update the docs for the avatar and avatarGroups (9e3b9273)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+NA
+
+### Fixes
+
+- fix(avatar): update avatar fallback appearance and text color (f20339b8)
+
+### Improvements
+
+NA
+
+### Documentation
+
+- docs(Avatars): update the docs for the avatar and avatarGroups (9e3b9273)
+- docs(avatar): update docs for avatar and avatarGroups (c7dc4be9)
+
+---
+
+## 4.17.0 (2025-12-10)
+
+### Highlights
+
+- feat(Avatar): update new color and update shape for avatarGroups and avatarSelection (3a6c626f)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(Avatar): update new color and update shape for avatarGroups and avatarSelection (3a6c626f)
+
+### Fixes
+
+NA
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
 ## 4.16.1 (2025-11-23)
 
 ### Highlights

package/css/dist/index.css

@@ -148,6 +148,16 @@
   --accent3-ultra-light: #f1f3fc;
   --accent4-ultra-light: #f2f9e7;
 
+  /* Avatar specific color for the time being */
+  --primary-300: #c9e1f5;
+  --success-300: #caeacd;
+  --alert-300: #fad1cd;
+  --warning-300: #ffebad;
+  --accent1-300: #fcd9b6;
+  --accent2-300: #d7cae8;
+  --accent3-300: #cbd1f5;
+  --accent4-300: #d3ebb2;
+
   /* shadow */
   --primary-shadow: rgba(0, 112, 221, 0.16);
   --secondary-shadow: rgba(213, 213, 213, 0.16);
@@ -889,6 +899,11 @@ body {
   width: var(--spacing-60);
 }
 
+.Avatar--micro {
+  height: 20px;
+  width: 20px;
+}
+
 .Avatar--noInitials {
   cursor: default;
 }
@@ -898,7 +913,7 @@ body {
 }
 
 .Avatar--disabled::after {
-  opacity: var(--opacity-20);
+  opacity: var(--opacity-16);
   top: 0;
   right: 0;
   bottom: 0;
@@ -910,7 +925,7 @@ body {
 }
 
 .Avatar--primary {
-  background: var(--primary);
+  background: var(--primary-300);
 }
 
 .Avatar--secondary {
@@ -918,31 +933,31 @@ body {
 }
 
 .Avatar--success {
-  background: var(--success);
+  background: var(--success-300);
 }
 
 .Avatar--alert {
-  background: var(--alert);
+  background: var(--alert-300);
 }
 
 .Avatar--warning {
-  background: var(--warning);
+  background: var(--warning-300);
 }
 
 .Avatar--accent1 {
-  background: var(--accent1);
+  background: var(--accent1-300);
 }
 
 .Avatar--accent2 {
-  background: var(--accent2);
+  background: var(--accent2-300);
 }
 
 .Avatar--accent3 {
-  background: var(--accent3);
+  background: var(--accent3-300);
 }
 
 .Avatar--accent4 {
-  background: var(--accent4);
+  background: var(--accent4-300);
 }
 
 .Avatar-content--tiny {
@@ -950,10 +965,45 @@ body {
   font-size: 10px !important;
 }
 
-.Avatar-content {
+.Avatar-content--micro {
+  line-height: var(--font-height-s) !important;
+  font-size: 10px !important;
+}
+
+.Avatar-content--primary {
+  color: var(--primary-darker) !important;
+}
+
+.Avatar-content--secondary {
   color: var(--inverse) !important;
-  opacity: var(--opacity-20);
-  mix-blend-mode: multiply;
+}
+
+.Avatar-content--success {
+  color: var(--success-darker) !important;
+}
+
+.Avatar-content--alert {
+  color: var(--alert-darker) !important;
+}
+
+.Avatar-content--warning {
+  color: var(--warning-darker) !important;
+}
+
+.Avatar-content--accent1 {
+  color: var(--accent1-darker) !important;
+}
+
+.Avatar-content--accent2 {
+  color: var(--accent2-darker) !important;
+}
+
+.Avatar-content--accent3 {
+  color: var(--accent3-darker) !important;
+}
+
+.Avatar-content--accent4 {
+  color: var(--accent4-darker) !important;
 }
 
 .Avatar-presence {
@@ -993,6 +1043,10 @@ body {
   margin-right: calc(var(--spacing-05) * -1);
 }
 
+.AvatarGroup-item--square {
+  border-radius: var(--border-radius-10);
+}
+
 .AvatarGroup-item--regular {
   height: var(--spacing-80);
 }
@@ -1016,6 +1070,8 @@ body {
 .AvatarCount-wrapper {
   border-radius: var(--border-radius-full);
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .AvatarCount-wrapper:focus,
@@ -1072,6 +1128,10 @@ body {
   position: relative;
 }
 
+.SelectionAvatarGroup-item--square {
+  border-radius: var(--border-radius-10);
+}
+
 .SelectionAvatarGroup-item--active:focus,
 .SelectionAvatarGroup-item--active:focus-visible {
   outline: 3px solid var(--primary-shadow);
@@ -1079,7 +1139,17 @@ body {
 }
 
 .SelectionAvatarGroup-item--active:active {
-  outline: var(--spacing-05) solid #00509f;
+  outline: var(--border-width-2-5) solid var(--primary-dark);
+  outline-offset: var(--spacing-2-5);
+}
+
+.SelectionAvatarGroup-item--active-tiny:active,
+.SelectionAvatarGroup-item--active-micro:active {
+  outline-offset: var(--spacing-05);
+}
+
+.SelectionAvatarGroup-item--active-regular:active {
+  outline: var(--border-width-05) solid var(--primary-dark);
   outline-offset: var(--spacing-2-5);
 }
 
@@ -1091,12 +1161,31 @@ body {
 
 .SelectionAvatarGroup-item--selected {
   outline-offset: var(--spacing-2-5);
-  outline: var(--spacing-05) solid var(--primary-dark);
+  outline: var(--border-width-2-5) solid var(--primary-dark);
+}
+
+.SelectionAvatarGroup-item--selected-tiny,
+.SelectionAvatarGroup-item--selected-micro {
+  outline-offset: var(--spacing-05);
+}
+
+.SelectionAvatarGroup-item--selected-regular {
+  outline: var(--border-width-05) solid var(--primary-dark);
 }
 
 .SelectionAvatarGroup-item--selected:active {
   outline-offset: var(--spacing-2-5);
-  outline: var(--spacing-05) solid var(--primary-darker);
+  outline: var(--border-width-2-5) solid var(--primary-darker);
+}
+
+.SelectionAvatarGroup-item--selected-tiny:active,
+.SelectionAvatarGroup-item--selected-micro:active {
+  outline-offset: var(--spacing-05);
+}
+
+.SelectionAvatarGroup-item--selected-regular:active {
+  outline-offset: var(--spacing-2-5);
+  outline: var(--border-width-05) solid var(--primary-darker);
 }
 
 .SelectionAvatarGroup-item--selected:focus,
@@ -1151,6 +1240,10 @@ body {
   background: var(--secondary-dark);
 }
 
+.SelectionAvatarCount--open {
+  background: var(--secondary-dark) !important;
+}
+
 .SelectionAvatarCount-wrapper:focus,
 .SelectionAvatarCount-wrapper:focus-visible {
   outline: 3px solid var(--primary-shadow);
@@ -1159,7 +1252,31 @@ body {
 
 .SelectionAvatarCount--selected {
   outline-offset: var(--spacing-2-5);
-  outline: var(--spacing-05) solid var(--primary-dark);
+  outline: var(--border-width-2-5) solid var(--primary-dark);
+}
+
+.SelectionAvatarCount--selected-tiny,
+.SelectionAvatarCount--selected-micro {
+  outline-offset: var(--spacing-05);
+}
+
+.SelectionAvatarCount--selected-regular {
+  outline: var(--border-width-05) solid var(--primary-dark);
+}
+
+.SelectionAvatarCount--selected:active {
+  outline-offset: var(--spacing-2-5);
+  outline: var(--border-width-2-5) solid var(--primary-darker);
+}
+
+.SelectionAvatarCount--selected-tiny:active,
+.SelectionAvatarCount--selected-micro:active {
+  outline-offset: var(--spacing-05);
+}
+
+.SelectionAvatarCount--selected-regular:active {
+  outline-offset: var(--spacing-2-5);
+  outline: var(--border-width-05) solid var(--primary-darker);
 }
 
 .SelectionAvatarCount--selected:focus,