16 files changed, 117 insertions, 97 deletions

diff --git a/src/_base.scss b/src/_base.scss
index 61dae42..a0f785c 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -9,7 +9,7 @@ body {
 }
 
 body {
-    @include mx.set-font(--standard, (--size: fn.dim(--font-size --md)));
+    @include mx.set-font(--standard, (--size: fn.dim(--font-size --100)));
 
     margin:           0;
     padding:          0;
@@ -19,7 +19,7 @@ body {
 
 pre,
 code {
-    @include mx.set-font(--mono, (--size: fn.dim(--font-size --sm)));
+    @include mx.set-font(--mono, (--size: fn.dim(--font-size --75)));
 }
 
 pre {
@@ -60,7 +60,7 @@ strong {
 
 small {
     color:     fn.color(--fg-hi);
-    font-size: fn.dim(--font-size --sm);
+    font-size: fn.dim(--font-size --75);
 }
 
 ul,
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 6b3cb4f..3f1320a 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -5,24 +5,52 @@
 
 @include iro.props-store((
     --dims: (
-        --spacing: (
-            --base: iro.fn-px-to-rem(24px),
-            --factors: (
-                --xxs: .125,
-                --xs:  .25,
-                --sm:  .5,
-                --md:  1,
-                --lg:  1.5,
-                --xl:  2,
-                --xxl: 2.5,
-            ),
-            --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)),
-            --xs:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
-            --sm:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
-            --md:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
-            --lg:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
-            --xl:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
-            --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)),
+        --size: (
+            --0:     0,
+            --10:    iro.fn-px-to-rem(1px),
+            --25:    iro.fn-px-to-rem(2px),
+            --40:    iro.fn-px-to-rem(3px),
+            --50:    iro.fn-px-to-rem(4px),
+            --65:    iro.fn-px-to-rem(5px),
+            --75:    iro.fn-px-to-rem(6px),
+            --85:    iro.fn-px-to-rem(7px),
+            --100:   iro.fn-px-to-rem(8px),
+            --115:   iro.fn-px-to-rem(9px),
+            --125:   iro.fn-px-to-rem(10px),
+            --130:   iro.fn-px-to-rem(11px),
+            --150:   iro.fn-px-to-rem(12px),
+            --160:   iro.fn-px-to-rem(13px),
+            --175:   iro.fn-px-to-rem(14px),
+            --200:   iro.fn-px-to-rem(16px),
+            --225:   iro.fn-px-to-rem(18px),
+            --250:   iro.fn-px-to-rem(20px),
+            --275:   iro.fn-px-to-rem(22px),
+            --300:   iro.fn-px-to-rem(24px),
+            --325:   iro.fn-px-to-rem(26px),
+            --400:   iro.fn-px-to-rem(32px),
+            --450:   iro.fn-px-to-rem(36px),
+            --500:   iro.fn-px-to-rem(40px),
+            --550:   iro.fn-px-to-rem(44px),
+            --600:   iro.fn-px-to-rem(48px),
+            --700:   iro.fn-px-to-rem(56px),
+            --800:   iro.fn-px-to-rem(64px),
+            --900:   iro.fn-px-to-rem(72px),
+            --1000:  iro.fn-px-to-rem(80px),
+            --1200:  iro.fn-px-to-rem(96px),
+            --1700:  iro.fn-px-to-rem(136px),
+            --2400:  iro.fn-px-to-rem(192px),
+            --2500:  iro.fn-px-to-rem(200px),
+            --2600:  iro.fn-px-to-rem(208px),
+            --2800:  iro.fn-px-to-rem(224px),
+            --3200:  iro.fn-px-to-rem(256px),
+            --3400:  iro.fn-px-to-rem(272px),
+            --3500:  iro.fn-px-to-rem(280px),
+            --3600:  iro.fn-px-to-rem(288px),
+            --3800:  iro.fn-px-to-rem(304px),
+            --4600:  iro.fn-px-to-rem(368px),
+            --5000:  iro.fn-px-to-rem(400px),
+            --6000:  iro.fn-px-to-rem(480px),
+            --16000: iro.fn-px-to-rem(1280px),
         ),
 
         --font: (
@@ -42,13 +70,13 @@
         ),
 
         --font-size: (
-            --xs:   iro.fn-px-to-rem(11px),
-            --sm:   iro.fn-px-to-rem(13px),
-            --md:   iro.fn-px-to-rem(14px),
-            --lg:   iro.fn-px-to-rem(16px),
-            --xl:   iro.fn-px-to-rem(18px),
-            --xxl:  iro.fn-px-to-rem(22px),
-            --xxxl: iro.fn-px-to-rem(28px),
+            --50:  iro.fn-px-to-rem(11px),
+            --75:  iro.fn-px-to-rem(13px),
+            --100: iro.fn-px-to-rem(14px),
+            --150: iro.fn-px-to-rem(16px),
+            --200: iro.fn-px-to-rem(18px),
+            --300: iro.fn-px-to-rem(22px),
+            --400: iro.fn-px-to-rem(28px),
         ),
 
         --border-width: (
@@ -60,7 +88,7 @@
         --focus-outline-width: 3px,
 
         --paragraph: (
-            --margin-top: fn.dim(--spacing --sm, null),
+            --margin-top: fn.dim(--size --150, null),
         ),
 
         --list: (
diff --git a/src/_utils.scss b/src/_utils.scss
index 99c751c..89aabd2 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -39,13 +39,9 @@ $dirs: (
         margin#{$suffix}: auto;
     }
 
-    @include iro.bem-utility('m#{$dir}-0') {
-        margin#{$suffix}: 0;
-    }
-
-    @each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') {
+    @each $size in (0 50 100) {
         @include iro.bem-utility('m#{$dir}-#{$size}') {
-            margin#{$suffix}: fn.global-dim(--spacing --#{$size});
+            margin#{$suffix}: fn.global-dim(--size --#{$size});
         }
     }
 }
@@ -55,13 +51,9 @@ $dirs: (
         padding#{$suffix}: auto;
     }
 
-    @include iro.bem-utility('p#{$dir}-0') {
-        padding#{$suffix}: 0;
-    }
-
-    @each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') {
+    @each $size in (0 50 100) {
         @include iro.bem-utility('p#{$dir}-#{$size}') {
-            padding#{$suffix}: fn.global-dim(--spacing --#{$size});
+            padding#{$suffix}: fn.global-dim(--size --#{$size});
         }
     }
 }
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index a0220c3..6b66a35 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -5,15 +5,15 @@
 @include iro.props-namespace('card') {
     @include iro.props-store((
         --dims: (
-            --pad-x: fn.global-dim(--spacing --sm),
-            --pad-y: fn.global-dim(--spacing --xs),
-            --sm: (
-                --pad-x: fn.global-dim(--spacing --xs),
-                --pad-y: fn.global-dim(--spacing --xxs),
+            --pad-x: fn.global-dim(--size --150),
+            --pad-y: fn.global-dim(--size --85),
+            --75: (
+                --pad-x: fn.global-dim(--size --100),
+                --pad-y: fn.global-dim(--size --50),
             ),
-            --lg: (
-                --pad-x: fn.global-dim(--spacing --md),
-                --pad-y: fn.global-dim(--spacing --sm),
+            --200: (
+                --pad-x: fn.global-dim(--size --300),
+                --pad-y: fn.global-dim(--size --150),
             )
         )
     ), 'dims');
@@ -25,14 +25,14 @@
         gap:         fn.dim(--pad-x);
         line-height: 1.4;
 
-        @include iro.bem-modifier('sm') {
-            padding: fn.dim(--sm --pad-y) fn.dim(--sm --pad-x);
-            gap:     fn.dim(--sm --pad-x);
+        @include iro.bem-modifier('75') {
+            padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x);
+            gap:     fn.dim(--75 --pad-x);
         }
 
-        @include iro.bem-modifier('lg') {
-            padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x);
-            gap:     fn.dim(--lg --pad-x);
+        @include iro.bem-modifier('200') {
+            padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x);
+            gap:     fn.dim(--200 --pad-x);
         }
 
         @include iro.bem-modifier('flush') {
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index d3ecb5f..b8fc879 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,9 +7,9 @@
         --dims: (
             --content-width:     iro.fn-px-to-rem(700px),
             --sm-content-width:  iro.fn-px-to-rem(360px),
-            --pad-x:             fn.global-dim(--spacing --xl),
-            --pad-y:             fn.global-dim(--spacing --xl),
-            --in-page-spacing-y: fn.global-dim(--spacing --xl),
+            --pad-x:             fn.global-dim(--size --700),
+            --pad-y:             fn.global-dim(--size --700),
+            --in-page-spacing-y: fn.global-dim(--size --700),
         )
     ), 'dims');
 
@@ -17,8 +17,8 @@
         overflow: hidden;
 
         @include iro.bem-elem('inner') {
-            margin-top:    calc(-1 * fn.global-dim(--spacing --xl));
-            margin-bottom: calc(-1 * fn.global-dim(--spacing --xl));
+            margin-top:    calc(-1 * fn.global-dim(--size --700));
+            margin-bottom: calc(-1 * fn.global-dim(--size --700));
 
             &::before,
             &::after {
@@ -29,11 +29,11 @@
             }
 
             &::before {
-                margin-bottom: fn.global-dim(--spacing --xl);
+                margin-bottom: fn.global-dim(--size --700);
             }
 
             &::after {
-                margin-top: fn.global-dim(--spacing --xl);
+                margin-top: fn.global-dim(--size --700);
             }
         }
 
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index a8308af..8228c44 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -6,9 +6,9 @@
 @include iro.props-namespace('form') {
     @include iro.props-store((
         --dims: (
-            --item-spacing-y:  fn.global-dim(--spacing --md),
-            --label-spacing-x: fn.global-dim(--spacing --md),
-            --hint-font-size:  fn.global-dim(--font-size --sm),
+            --item-spacing-y:  fn.global-dim(--size --325),
+            --label-spacing-x: fn.global-dim(--size --325),
+            --hint-font-size:  fn.global-dim(--font-size --75),
         ),
     ), 'dims');
 
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index e69b381..f122417 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -5,13 +5,13 @@
     @include iro.props-store((
         --dims: (
             --pad-x:     0,
-            --pad-y:     fn.global-dim(--spacing --xs),
-            --separator: fn.global-dim(--spacing --xs),
+            --pad-y:     fn.global-dim(--size --85),
+            --separator: fn.global-dim(--size --85),
             --rounding:  3px,
             --border:    1px,
             --item: (
-                --pad-x: fn.global-dim(--spacing --sm),
-                --pad-y: fn.global-dim(--spacing --xs),
+                --pad-x: fn.global-dim(--size --150),
+                --pad-y: fn.global-dim(--size --85),
             ),
         ),
     ), 'dims');
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index ddf4ea0..5957ffa 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -5,8 +5,8 @@
     @include iro.props-store((
         --dims: (
             --z-index: 10000,
-            --pad-x:   fn.global-dim(--spacing --sm),
-            --pad-y:   fn.global-dim(--spacing --sm),
+            --pad-x:   fn.global-dim(--size --150),
+            --pad-y:   fn.global-dim(--size --150),
         ),
     ), 'dims');
 
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index b7762d2..107d7ad 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,7 +9,7 @@
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        iro.fn-px-to-rem(5px),
             --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --md),
+            --margin-right: fn.global-dim(--size --325),
         ),
     ), 'dims');
 
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 050b7ca..bf0defb 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -10,7 +10,7 @@
             --width-md:           iro.fn-px-to-rem(800px),
             --width-lg:           iro.fn-px-to-rem(1100px),
             --rounding:           3px,
-            --title-body-spacing: fn.global-dim(--spacing --sm),
+            --title-body-spacing: fn.global-dim(--size --150),
         ),
     ), 'dims');
 
@@ -53,7 +53,7 @@
             position:  absolute;
             top:       iro.fn-px-to-rem(12px);
             right:     iro.fn-px-to-rem(12px);
-            font-size: fn.global-dim(--font-size --lg);
+            font-size: fn.global-dim(--font-size --150);
         }
 
         @include iro.bem-elem('rule') {
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index a42be1d..e990568 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -4,10 +4,10 @@
 @include iro.props-namespace('field-label') {
     @include iro.props-store((
         --dims: (
-            --spacing-x:       fn.global-dim(--spacing --sm),
-            --spacing-y:       fn.global-dim(--spacing --xs),
-            --label-font-size: fn.global-dim(--font-size --sm),
-            --hint-font-size:  fn.global-dim(--font-size --sm),
+            --spacing-x:       fn.global-dim(--size --150),
+            --spacing-y:       fn.global-dim(--size --85),
+            --label-font-size: fn.global-dim(--font-size --75),
+            --hint-font-size:  fn.global-dim(--font-size --75),
         ),
     ), 'dims');
 
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index b5f02d8..48088ba 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -6,9 +6,9 @@
     @include iro.props-store((
         --dims: (
             --in-page-margin: (
-                --top:         fn.global-dim(--spacing --lg),
-                --top-sibling: fn.global-dim(--spacing --md),
-                --bottom:      fn.global-dim(--spacing --sm),
+                --top:         fn.global-dim(--size --500),
+                --top-sibling: fn.global-dim(--size --325),
+                --bottom:      fn.global-dim(--size --150),
             ),
         ),
     ), 'dims');
@@ -33,28 +33,28 @@
 
         @include iro.bem-modifier('xxl') {
             color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --xxxl);
+            font-size: fn.global-dim(--font-size --400);
         }
 
         @include iro.bem-modifier('xl') {
             color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --xxl);
+            font-size: fn.global-dim(--font-size --300);
         }
 
         @include iro.bem-modifier('lg') {
             color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --xl);
+            font-size: fn.global-dim(--font-size --200);
         }
 
         @include iro.bem-modifier('md') {
             color:     fn.color(--strong);
-            font-size: fn.global-dim(--font-size --lg);
+            font-size: fn.global-dim(--font-size --150);
         }
 
         @include iro.bem-modifier('sm') {
             @include mx.set-font(--standard, (
                 --line-height: null,
-                --size: fn.global-dim(--font-size --md),
+                --size: fn.global-dim(--font-size --100),
                 --weight: 500
             ));
 
@@ -64,7 +64,7 @@
         @include iro.bem-modifier('xs') {
             @include mx.set-font(--standard, (
                 --line-height: null,
-                --size:        fn.global-dim(--font-size --xs),
+                --size:        fn.global-dim(--font-size --50),
                 --weight:      500,
                 --transform:   uppercase,
                 --spacing:     .5px
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 851e32a..869b367 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -4,10 +4,10 @@
 @include iro.props-namespace('menu') {
     @include iro.props-store((
         --dims: (
-            --separator: fn.global-dim(--spacing --xs),
+            --separator: fn.global-dim(--size --85),
             --item: (
-                --pad-x: fn.global-dim(--spacing --sm),
-                --pad-y: fn.global-dim(--spacing --xs),
+                --pad-x: fn.global-dim(--size --150),
+                --pad-y: fn.global-dim(--size --85),
             ),
         ),
     ), 'dims');
@@ -42,7 +42,7 @@
                 fn.dim(--item --pad-x)
                 calc(.5 * fn.dim(--item --pad-y));
             color:          fn.color(--header --label);
-            font-size:      fn.global-dim(--font-size --xs);
+            font-size:      fn.global-dim(--font-size --50);
             font-weight:    500;
             letter-spacing: .5px;
             text-transform: uppercase;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 7346a74..96a5174 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -9,7 +9,7 @@
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        iro.fn-px-to-rem(5px),
             --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --md),
+            --margin-right: fn.global-dim(--size --325),
         ),
     ), 'dims');
 
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
index 1892a3d..777e864 100644
--- a/src/objects/_rule.scss
+++ b/src/objects/_rule.scss
@@ -4,19 +4,19 @@
 @include iro.props-namespace('rule') {
     @include iro.props-store((
         --dims: (
-            --margin-y: fn.global-dim(--spacing --xs),
+            --margin-y: fn.global-dim(--size --85),
     
             --strong: (
                 --border-width:    fn.global-dim(--border-width --thick),
-                --label-font-size: fn.global-dim(--font-size --md),
+                --label-font-size: fn.global-dim(--font-size --100),
             ),
             --medium: (
                 --border-width:    fn.global-dim(--border-width --medium),
-                --label-font-size: fn.global-dim(--font-size --sm),
+                --label-font-size: fn.global-dim(--font-size --75),
             ),
             --faint: (
                 --border-width:    fn.global-dim(--border-width --thin),
-                --label-font-size: fn.global-dim(--font-size --xs),
+                --label-font-size: fn.global-dim(--font-size --50),
             ),
         ),
     ), 'dims');
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 06b5540..b5aa839 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -10,7 +10,7 @@
             --border-width: fn.global-dim(--border-width --medium),
             --pad-x:        iro.fn-px-to-rem(5px),
             --pad-y:        iro.fn-px-to-rem(5px),
-            --margin-right: fn.global-dim(--spacing --md),
+            --margin-right: fn.global-dim(--size --325),
         ),
     ), 'dims');