Update

6 files changed, 43 insertions, 34 deletions

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index ab9e38b..83321da 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -4,8 +4,8 @@
 @include iro.props-namespace('action-button') {
     @include iro.props-store((
         --dims: (
-            --pad-x:    iro.fn-px-to-rem(10px),
-            --pad-y:    iro.fn-px-to-rem(10px),
+            --pad-x:    fn.global-dim(--size --125),
+            --pad-y:    fn.global-dim(--size --125),
             --rounding: 3px,
         ),
     ), 'dims');
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);
             }
         }
     }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 15804f1..94711b7 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -43,8 +43,8 @@
 @include iro.props-namespace('button') {
     @include iro.props-store((
         --dims: (
-            --pad-x:    iro.fn-px-to-rem(19px),
-            --pad-y:    iro.fn-px-to-rem(8px),
+            --pad-x:    fn.global-dim(--size --225),
+            --pad-y:    fn.global-dim(--size --100),
             --rounding: 10em,
         ),
     ), 'dims');
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 107d7ad..f5c599b 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,11 +4,11 @@
 @include iro.props-namespace('checkbox') {
     @include iro.props-store((
         --dims: (
-            --size:         iro.fn-px-to-rem(14px),
-            --label-gap:    iro.fn-px-to-rem(10px),
+            --size:         fn.global-dim(--size --175),
+            --label-gap:    fn.global-dim(--size --125),
             --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        iro.fn-px-to-rem(5px),
-            --pad-y:        iro.fn-px-to-rem(5px),
+            --pad-x:        fn.global-dim(--size --65),
+            --pad-y:        fn.global-dim(--size --65),
             --margin-right: fn.global-dim(--size --325),
         ),
     ), 'dims');
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 96a5174..9482c5b 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,11 +4,11 @@
 @include iro.props-namespace('radio') {
     @include iro.props-store((
         --dims: (
-            --diameter:     iro.fn-px-to-rem(15px),
-            --label-gap:    iro.fn-px-to-rem(10px),
+            --diameter:     calc(fn.global-dim(--size --175) + 1px),
+            --label-gap:    fn.global-dim(--size --125),
             --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        iro.fn-px-to-rem(5px),
-            --pad-y:        iro.fn-px-to-rem(5px),
+            --pad-x:        fn.global-dim(--size --65),
+            --pad-y:        fn.global-dim(--size --65),
             --margin-right: fn.global-dim(--size --325),
         ),
     ), 'dims');
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index b5aa839..447335e 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -4,12 +4,12 @@
 @include iro.props-namespace('switch') {
     @include iro.props-store((
         --dims: (
-            --width:        iro.fn-px-to-rem(26px),
-            --height:       iro.fn-px-to-rem(15px),
-            --label-gap:    iro.fn-px-to-rem(10px),
+            --width:        fn.global-dim(--size --325),
+            --height:       calc(fn.global-dim(--size --175) + 1px),
+            --label-gap:    fn.global-dim(--size --125),
             --border-width: fn.global-dim(--border-width --medium),
-            --pad-x:        iro.fn-px-to-rem(5px),
-            --pad-y:        iro.fn-px-to-rem(5px),
+            --pad-x:        fn.global-dim(--size --65),
+            --pad-y:        fn.global-dim(--size --65),
             --margin-right: fn.global-dim(--size --325),
         ),
     ), 'dims');