8 files changed, 39 insertions, 27 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index f663733..7ae2d6e 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,4 +1,5 @@
 @use 'iro-sass/src/index' as iro;
+@use 'functions' as fn;
 
 @include iro.bem-utility('db') {
     display: block;
@@ -21,6 +22,12 @@
     position: relative;
 }
 
-@include iro.bem-utility('mt-0') {
+@include iro.bem-utility('mt0') {
     margin-top: 0;
 }
+
+@each $size in ('xxs' 'xs' 'sm' 'md' 'lg' 'xl') {
+    @include iro.bem-utility('p-#{$size}') {
+        padding: fn.global-dim(--spacing --#{$size});
+    }
+}
diff --git a/src/_vars.scss b/src/_vars.scss
index 6d273f4..71f0b1f 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -22,19 +22,23 @@ media.$unit-intervals: (
 @include iro.props-store((
     --dims: (
         --spacing: (
-            --base: iro.fn-px-to-rem(26px),
+            --base: iro.fn-px-to-rem(24px),
             --factors: (
-                --xs: .25,
-                --sm: .5,
-                --md: 1,
-                --lg: 1.5,
-                --xl: 2,
+                --xxs: .125,
+                --xs:  .25,
+                --sm:  .5,
+                --md:  1,
+                --lg:  1.5,
+                --xl:  2,
+                --xxl: 2.5,
             ),
-            --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)),
+            --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)),
         ),
 
         --font: (
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 19e097c..2ed121f 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -5,11 +5,11 @@
 @include iro.props-namespace('card') {
     @include iro.props-store((
         --dims: (
-            --pad-x: iro.fn-px-to-rem(10px),
-            --pad-y: iro.fn-px-to-rem(7px),
+            --pad-x: fn.global-dim(--spacing --sm),
+            --pad-y: fn.global-dim(--spacing --xs),
             --lg: (
-                --pad-x: iro.fn-px-to-rem(14px),
-                --pad-y: iro.fn-px-to-rem(11px),
+                --pad-x: fn.global-dim(--spacing --md),
+                --pad-y: fn.global-dim(--spacing --sm),
             )
         )
     ), 'dims');
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 59e0287..e69b381 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:     iro.fn-px-to-rem(5px),
-            --separator: iro.fn-px-to-rem(5px),
+            --pad-y:     fn.global-dim(--spacing --xs),
+            --separator: fn.global-dim(--spacing --xs),
             --rounding:  3px,
             --border:    1px,
             --item: (
-                --pad-x: iro.fn-px-to-rem(12px),
-                --pad-y: iro.fn-px-to-rem(7px),
+                --pad-x: fn.global-dim(--spacing --sm),
+                --pad-y: fn.global-dim(--spacing --xs),
             ),
         ),
     ), 'dims');
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index d5ce028..34ce46a 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:   iro.fn-px-to-rem(14px),
-            --pad-y:   iro.fn-px-to-rem(60px),
+            --pad-x:   fn.global-dim(--spacing --sm),
+            --pad-y:   fn.global-dim(--spacing --sm),
         ),
     ), 'dims');
 
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 4707209..40c97e0 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: iro.fn-px-to-rem(10px),
+            --separator: fn.global-dim(--spacing --xs),
             --item: (
-                --pad-x: iro.fn-px-to-rem(10px),
-                --pad-y: iro.fn-px-to-rem(5px),
+                --pad-x: fn.global-dim(--spacing --sm),
+                --pad-y: fn.global-dim(--spacing --xs),
             ),
         ),
     ), 'dims');
diff --git a/tpl/index.pug b/tpl/index.pug
index 365ca52..4e56564 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -528,7 +528,7 @@ html
             +box
                 +backdrop
                     +dialog('Lorem ipsum')
-                        p.u-mt-0= loremIpsum
+                        p.u-mt0= loremIpsum
                         p= loremIpsum
                         p= loremIpsum
                         p= loremIpsum
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 24f8e21..d33d3b2 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -16,7 +16,8 @@ mixin text-field
       'is-disabled':       attributes.disabled,
       'l-card':            !!block,
       'l-card--flush':     !!block,
-      'l-card--gapless':   !!block
+      'l-card--gapless':   !!block,
+      'u-p-xs':            !!block
     }
 
   div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))