Restructured size variables

3 files changed, 24 insertions, 24 deletions

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');