From 3524f1bac11c8a9d1640bfeac5ceb063ff96d623 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 6 Feb 2022 17:17:33 +0100
Subject: Improved variable structure

---
 src/layouts/_card.scss      |  3 ++-
 src/layouts/_container.scss | 37 +++++++++++++++++++------------------
 src/layouts/_form.scss      | 11 ++++++-----
 3 files changed, 27 insertions(+), 24 deletions(-)

(limited to 'src/layouts')

diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 037b29f..5db1a6a 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -1,5 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
+@use '../functions' as fn;
 
 @include iro.props-namespace('card') {
     @include iro.props-store((
@@ -11,7 +12,7 @@
                 --pad-y: iro.fn-px-to-rem(11px),
             )
         )
-    ));
+    ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
         display:     flex;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index efe5203..af5b208 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,5 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
+@use '../functions' as fn;
 
 @include iro.props-namespace('container') {
     @include iro.props-store((
@@ -8,16 +9,16 @@
             --sm-content-width:  iro.fn-px-to-rem(360px),
             --padding-x:         3rem,
             --padding-y:         3rem,
-            --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true),
+            --in-page-spacing-y: fn.dim(--spacing --y --xl, $global: true),
         )
-    ));
+    ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
         overflow: hidden;
 
         @include iro.bem-elem('inner') {
-            margin-top:    calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
-            margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
+            margin-top:    calc(-1 * fn.dim(--spacing --y --xl, $global: true));
+            margin-bottom: calc(-1 * fn.dim(--spacing --y --xl, $global: true));
 
             &::before,
             &::after {
@@ -28,33 +29,33 @@
             }
 
             &::before {
-                margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true);
+                margin-bottom: fn.dim(--spacing --y --xl, $global: true);
             }
 
             &::after {
-                margin-top: iro.props-get(--dims --spacing --y --xl, $global: true);
+                margin-top: fn.dim(--spacing --y --xl, $global: true);
             }
         }
 
         @include iro.bem-modifier('pad-x') {
-            padding-right: iro.props-get(--dims --padding-x);
-            padding-left:  iro.props-get(--dims --padding-x);
+            padding-right: fn.dim(--padding-x);
+            padding-left:  fn.dim(--padding-x);
         }
 
         @include iro.bem-modifier('pad-y') {
-            padding-top:    iro.props-get(--dims --padding-y);
-            padding-bottom: iro.props-get(--dims --padding-y);
+            padding-top:    fn.dim(--padding-y);
+            padding-bottom: fn.dim(--padding-y);
         }
 
         @include iro.bem-modifier('narrow') {
-            max-width:    iro.props-get(--dims --content-width);
+            max-width:    fn.dim(--content-width);
             margin-right: auto;
             margin-left:  auto;
 
             @each $breakpoint in map-keys(media.$breakpoints) {
                 @include media.media('<=#{$breakpoint}') {
                     @include iro.bem-suffix('#{$breakpoint}-down') {
-                        max-width:    iro.props-get(--dims --content-width);
+                        max-width:    fn.dim(--content-width);
                         margin-right: auto;
                         margin-left:  auto;
                     }
@@ -63,14 +64,14 @@
         }
 
         @include iro.bem-modifier('sm-narrow') {
-            max-width:    iro.props-get(--dims --sm-content-width);
+            max-width:    fn.dim(--sm-content-width);
             margin-right: auto;
             margin-left:  auto;
 
             @each $breakpoint in map-keys(media.$breakpoints) {
                 @include media.media('<=#{$breakpoint}') {
                     @include iro.bem-suffix('#{$breakpoint}-down') {
-                        max-width:    iro.props-get(--dims --sm-content-width);
+                        max-width:    fn.dim(--sm-content-width);
                         margin-right: auto;
                         margin-left:  auto;
                     }
@@ -79,13 +80,13 @@
         }
 
         @include iro.bem-modifier('themed') {
-            background-color: iro.props-get(--colors --bg, $global: true);
-            color:            iro.props-get(--colors --fg, $global: true);
+            background-color: fn.color(--bg, $global: true);
+            color:            fn.color(--fg, $global: true);
         }
 
         @include iro.bem-modifier('in-page') {
-            margin-top:    iro.props-get(--dims --in-page-spacing-y);
-            margin-bottom: iro.props-get(--dims --in-page-spacing-y);
+            margin-top:    fn.dim(--in-page-spacing-y);
+            margin-bottom: fn.dim(--in-page-spacing-y);
         }
     }
 }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 3c7edcb..ac54607 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,19 +1,20 @@
 @use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
 
 @include iro.props-namespace('form') {
     @include iro.props-store((
         --dims: (
-            --item-spacing-y:  iro.props-get(--dims --spacing --y --md, $global: true),
-            --label-spacing-x: iro.props-get(--dims --spacing --x --md, $global: true),
-            --hint-font-size:  iro.props-get(--dims --font-size --sm, $global: true),
+            --item-spacing-y:  fn.dim(--spacing --y --md, $global: true),
+            --label-spacing-x: fn.dim(--spacing --x --md, $global: true),
+            --hint-font-size:  fn.dim(--font-size --sm, $global: true),
         ),
-    ));
+    ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
         display:        flex;
         flex-direction: column;
         align-items:    baseline;
-        gap:            iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
+        gap:            fn.dim(--item-spacing-y) fn.dim(--label-spacing-x);
     
         @include iro.bem-modifier('labels-left', 'labels-right') {
             display:               grid;
-- 
cgit v1.2.3-54-g00ecf