From 57bd000a6abe9a846ea68ae886a327c12f97cdd2 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 14 Feb 2022 21:15:37 +0100
Subject: Update

---
 src/objects/_avatar.scss | 43 ++++++++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 17 deletions(-)

(limited to 'src/objects/_avatar.scss')

diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 09bebf0..0d9773f 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -4,9 +4,18 @@
 @include iro.props-namespace('avatar') {
     @include iro.props-store((
         --dims: (
-            --size:              iro.fn-px-to-rem(40px),
-            --size-sm:           iro.fn-px-to-rem(30px),
-            --size-xs:           iro.fn-px-to-rem(18px),
+            --100: (
+                --size:      fn.global-dim(--size --450),
+                --font-size: fn.global-dim(--font-size --100),
+            ),
+            --75: (
+                --size:      fn.global-dim(--size --325),
+                --font-size: fn.global-dim(--font-size --75),
+            ),
+            --50: (
+                --size:      fn.global-dim(--size --225),
+                --font-size: fn.global-dim(--font-size --50),
+            ),
             --indicator-size:    fn.foreign-dim(--status-indicator, --size),
             --indicator-spacing: iro.fn-px-to-rem(3px),
             --rounding:          25%,
@@ -24,7 +33,7 @@
     @include iro.bem-object(iro.props-namespace()) {
         display:    inline-block;
         position:   relative;
-        font-size:  1rem;
+        font-size:  fn.dim(--100 --font-size);
         font-style: normal;
 
         @include iro.bem-elem('status') {
@@ -45,12 +54,12 @@
 
         @include iro.bem-elem('content') {
             display:          block;
-            width:            fn.dim(--size);
-            height:           fn.dim(--size);
+            width:            fn.dim(--100 --size);
+            height:           fn.dim(--100 --size);
             border-radius:    fn.dim(--rounding);
             background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
             color:            #fff;
-            line-height:      fn.dim(--size);
+            line-height:      fn.dim(--100 --size);
             text-align:       center;
             object-fit:       cover;
             object-position:  center center;
@@ -68,23 +77,23 @@
             }
         }
 
-        @include iro.bem-modifier('sm') {
-            font-size: iro.fn-px-to-rem(13px);
+        @include iro.bem-modifier('75') {
+            font-size: fn.dim(--75 --font-size);
 
             @include iro.bem-elem('content') {
-                width:       fn.dim(--size-sm);
-                height:      fn.dim(--size-sm);
-                line-height: fn.dim(--size-sm);
+                width:       fn.dim(--75 --size);
+                height:      fn.dim(--75 --size);
+                line-height: fn.dim(--75 --size);
             }
         }
 
-        @include iro.bem-modifier('xs') {
-            font-size: iro.fn-px-to-rem(11px);
+        @include iro.bem-modifier('50') {
+            font-size: fn.dim(--50 --font-size);
 
             @include iro.bem-elem('content') {
-                width:       fn.dim(--size-xs);
-                height:      fn.dim(--size-xs);
-                line-height: fn.dim(--size-xs);
+                width:       fn.dim(--50 --size);
+                height:      fn.dim(--50 --size);
+                line-height: fn.dim(--50 --size);
             }
         }
     }
-- 
cgit v1.2.3-54-g00ecf