Merged in feat/LOY-311-New-Avatar-Component (pull request #2694)

Feat(LOY-311) Create avatar design system component * feat(LOY-311): Creat & use New Avatar Design System Component * refactor(LOY-311): replace avatar used in app header with design system component * fix(LOY-311): use correct space vars Approved-by: Erik Tiekstra
2025-08-25 14:41:50 +00:00
parent 87f597ae1a
commit 7561e996c6
19 changed files with 399 additions and 45 deletions
--- a/packages/design-system/lib/components/Avatar/avatar.module.css
+++ b/packages/design-system/lib/components/Avatar/avatar.module.css
@@ -0,0 +1,38 @@
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: var(--Corner-radius-rounded);
+  background-color: var(--Overlay-40);
+}
+
+.avatar:has(.initials) {
+  background-color: var(--Icon-Accent);
+}
+
+.avatar img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.size-sm {
+  width: 24px;
+  height: 24px;
+}
+
+.size-md {
+  width: 32px;
+  height: 32px;
+}
+
+.size-lg {
+  width: 55px;
+  height: 55px;
+}
+
+.initials {
+  color: white;
+  text-transform: uppercase;
+}