Feat(rebrand): Change UI of group remaindings and replace tokens by h…

…opper
gsoft-inc · Oct 11, 2023 · 4bcead1 · 4bcead1
1 parent d3df63d
commit 4bcead1
Showing 1 changed file with 31 additions and 25 deletions.
diff --git a/packages/components/src/avatar/src/Avatar.css b/packages/components/src/avatar/src/Avatar.css
@@ -1,40 +1,43 @@
 .o-ui-avatar {
     display: inline-flex;
     flex-shrink: 0;
-    border-radius: var(--o-ui-br-circular);
+    border-radius: var(--hop-shape-circle);
     overflow: hidden;
 }
 
 /* SIZES */
+.o-ui-avatar-xs,
+.o-ui-avatar-sm,
+.o-ui-avatar-md,
+.o-ui-avatar-lg,
+.o-ui-avatar-xl,
+.o-ui-avatar-image {
+    aspect-ratio: 1/1;
+}
+
 .o-ui-avatar-xs {
-    width: var(--o-ui-sz-2);
-    height: var(--o-ui-sz-2);
+    width: 1rem;
 }
 
 .o-ui-avatar-sm {
-    width: var(--o-ui-sz-4);
-    height: var(--o-ui-sz-4);
+    width: 1.5rem;
 }
 
 .o-ui-avatar-md {
-    width: var(--o-ui-sz-5);
-    height: var(--o-ui-sz-5);
+    width: 2rem;
 }
 
 .o-ui-avatar-lg {
-    width: var(--o-ui-sz-7);
-    height: var(--o-ui-sz-7);
+    width: 3rem;
 }
 
 .o-ui-avatar-xl {
-    width: var(--o-ui-sz-9);
-    height: var(--o-ui-sz-9);
+    width: 4rem;
 }
 
 /* IMAGE */
 .o-ui-avatar-image {
     width: 100%;
-    height: 100%;
 }
 
 /* TEXT */
@@ -55,28 +58,31 @@
     align-items: center;
 }
 
-.o-ui-avatar-group .o-ui-avatar {
-    border: 1px solid var(--o-ui-white);
+.o-ui-avatar-group .o-ui-avatar:not(.o-ui-avatar-group-remainings) {
+    border: 1px solid var(--hop-neutral-surface);
 }
 
-.o-ui-avatar-group .o-ui-avatar-xs:not(:first-child),
-.o-ui-avatar-group .o-ui-avatar-sm:not(:first-child) {
-    margin-left: calc(var(--o-ui-sp-1) * -1);
+.o-ui-avatar-group .o-ui-avatar-xs:not(:first-child):not(.o-ui-avatar-group-remainings),
+.o-ui-avatar-group .o-ui-avatar-sm:not(:first-child):not(.o-ui-avatar-group-remainings) {
+    margin-left: calc(var(--hop-space-inline-xs) * -1);
 }
 
-.o-ui-avatar-group .o-ui-avatar-md:not(:first-child),
-.o-ui-avatar-group .o-ui-avatar-lg:not(:first-child),
-.o-ui-avatar-group .o-ui-avatar-xl:not(:first-child) {
-    margin-left: calc(var(--o-ui-sp-2) * -1);
+.o-ui-avatar-group .o-ui-avatar-md:not(:first-child):not(.o-ui-avatar-group-remainings),
+.o-ui-avatar-group .o-ui-avatar-lg:not(:first-child):not(.o-ui-avatar-group-remainings),
+.o-ui-avatar-group .o-ui-avatar-xl:not(:first-child):not(.o-ui-avatar-group-remainings) {
+    margin-left: calc(var(--hop-space-inline-sm) * -1);
 }
 
 /* GROUPS | REMAININGS */
 .o-ui-avatar-group-remainings {
-    background-color: var(--o-ui-bg-alias-mid-break);
+    background-color: transparent;
+    margin-left: var(--hop-space-inline-sm);
+    width: auto;
 }
 
 .o-ui-avatar-group-remainings .o-ui-avatar-text {
-    color: var(--o-ui-text-alias-secondary);
+    color: var(--hop-neutral-text-weak);
+    font-weight: var(--hop-body-sm-semibold-font-weight);
 }
 
 /* GROUPS | REMAININGS | TOOLTIP */
@@ -92,9 +98,9 @@
 }
 
 .o-ui-avatar-group-remainings-list-item:not(:last-child) {
-    margin-bottom: var(--o-ui-sp-2);
+    margin-bottom: var(--hop-space-stack-sm);
 }
 
 .o-ui-avatar-group-remainings-list-item-avatar {
-    margin-right: var(--o-ui-sp-2);
+    margin-right: var(--hop-space-stack-sm);
 }