Re-implemented design via iro-design

1 files changed, 42 insertions, 35 deletions

diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index ca85438..cf396ce 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -1,86 +1,93 @@
-@include namespace('header') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use 'include-media/dist/include-media' as media;
+
+@include iro.props-namespace('header') {
+    @include iro.props-store((
         --colors: (
-            --bg: prop(--colors --bg-lo, $global: true),
-            --fg: prop(--colors --fg-lo, $global: true),
+            --bg: fn.global-color(--bg-hi),
+            --fg: fn.global-color(--fg-lo),
             --hover: (
-                --bg: prop(--colors --fg-lo, $global: true),
-                --fg: prop(--colors --bg-hi, $global: true),
+                --bg: fn.global-color(--fg-lo),
+                --fg: fn.global-color(--bg-hi),
             ),
             --active: (
-                --fg: prop(--colors --fg-lo, $global: true),
+                --fg: fn.global-color(--fg-lo),
             )
-        ),
+        )
+    ), 'colors');
+
+    @include iro.props-store((
         --dims: (
             --height: 4rem,
             --icon:   1.5rem,
             --pad-x:  calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
             --gap:    2px,
         )
-    ));
+    ), 'dims');
 
-    @include store((
+    @include iro.props-store((
         --colors: (
-            --bg: prop(--colors --bg-hi, $global: true),
+            --bg: fn.global-color(--obj-hi),
         )
-    ), 'light');
+    ), 'colors-dark');
 
-    @include store((
+    @include iro.props-store((
         --dims: (
             --height: 3.4rem,
         )
     ), 'sm');
 
-    @include component(namespace()) {
+    @include iro.bem-component(iro.props-namespace()) {
         display: flex;
         width:   0;
-        height:  prop(--dims --height);
-        padding: prop(--dims --gap);
-        gap:     prop(--dims --gap);
+        height:  fn.dim(--height);
+        padding: fn.dim(--gap);
+        gap:     fn.dim(--gap);
 
-        @include element('item') {
-            padding:          0 prop(--dims --pad-x);
+        @include iro.bem-elem('item') {
+            padding:          0 fn.dim(--pad-x);
             transition:       background-color .2s, color .2s, border-left-color .2s;
-            background-color: prop(--colors --bg);
-            color:            prop(--colors --fg);
-            line-height:      prop(--dims --height);
+            background-color: fn.color(--bg);
+            color:            fn.color(--fg);
+            line-height:      fn.dim(--height);
             text-decoration:  none;
 
             &:hover,
             &:focus {
-                border-left-color: prop(--colors --hover --bg);
-                background-color:  prop(--colors --hover --bg);
-                color:             prop(--colors --hover --fg);
+                border-left-color: fn.color(--hover --bg);
+                background-color:  fn.color(--hover --bg);
+                color:             fn.color(--hover --fg);
             }
 
-            @include modifier('icon') {
+            @include iro.bem-modifier('icon') {
                 display:         flex;
                 align-items:     center;
                 justify-content: center;
             }
 
-            @include modifier('active') {
-                color:       prop(--colors --active --fg);
+            @include iro.bem-modifier('active') {
+                color:       fn.color(--active --fg);
                 font-weight: bold;
             }
         }
 
-        @include element('icon') {
-            width:  prop(--dims --icon);
-            height: prop(--dims --icon);
+        @include iro.bem-elem('icon') {
+            width:  fn.dim(--icon);
+            height: fn.dim(--icon);
         }
 
-        @include modifier('fixed') {
+        @include iro.bem-modifier('fixed') {
             position: fixed;
         }
 
-        @include media('>=lg') {
+        @include media.media('>=lg') {
             position:      sticky;
             z-index:       100;
             top:           0;
-            margin-bottom: calc(-.75 * #{prop(--dims --height)});
+            margin-bottom: calc(-.75 * #{fn.dim(--height)});
 
-            @include modifier('fixed') {
+            @include iro.bem-modifier('fixed') {
                 position: fixed;
             }
         }