1 files changed, 58 insertions, 46 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 740f4e5..66faab5 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,14 +1,16 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-@use 'action-button';
+@forward 'lightbox.vars';
+@use 'lightbox.vars' as vars;
 
-$static-themes: 'black' 'white' !default;
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-@include iro.props-namespace('lightbox') {
-    
-
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('lightbox') {
         box-sizing:            border-box;
         display:               grid;
         flex:                  1 1 auto;
@@ -25,8 +27,8 @@ $static-themes: 'black' 'white' !default;
             display:             flex;
             grid-area:           header;
             align-items:         flex-start;
-            padding-block-start: fn.dim(--pad);
-            padding-inline:      fn.dim(--pad);
+            padding-block-start: props.get(vars.$pad);
+            padding-inline:      props.get(vars.$pad);
         }
 
         @include iro.bem-elem('img') {
@@ -36,7 +38,7 @@ $static-themes: 'black' 'white' !default;
             place-self:      center;
             max-inline-size: 100%;
             max-block-size:  100%;
-            padding:         fn.dim(--pad);
+            padding:         props.get(vars.$pad);
 
             @include iro.bem-sibling-elem('img') {
                 @include iro.bem-modifier('default') {
@@ -82,9 +84,9 @@ $static-themes: 'black' 'white' !default;
         @include iro.bem-elem('thumbnails') {
             display:            flex;
             grid-area:          thumbnails;
-            gap:                fn.dim(--thumbnail --spacing);
-            padding:            fn.dim(--pad);
-            margin-block-start: calc(-1 * fn.dim(--pad));
+            gap:                props.get(vars.$thumbnail--spacing);
+            padding:            props.get(vars.$pad);
+            margin-block-start: calc(-1 * props.get(vars.$pad));
             overflow:           auto;
         }
 
@@ -92,47 +94,52 @@ $static-themes: 'black' 'white' !default;
             display:        flex;
             grid-area:      footer;
             align-items:    flex-start;
-            padding-block:  0 fn.dim(--pad);
-            padding-inline: fn.dim(--pad);
+            padding-block:  0 props.get(vars.$pad);
+            padding-inline: props.get(vars.$pad);
         }
 
         @include iro.bem-elem('thumbnail') {
             position:       relative;
             flex:           0 0 auto;
-            inline-size:    fn.dim(--thumbnail --size);
-            block-size:     fn.dim(--thumbnail --size);
+            inline-size:    props.get(vars.$thumbnail--size);
+            block-size:     props.get(vars.$thumbnail--size);
             overflow:       hidden;
-            border-radius:  fn.dim(--thumbnail --rounding);
-            outline:        fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border);
-            outline-offset: calc(-1 * fn.dim(--thumbnail --border));
+            border-radius:  props.get(vars.$thumbnail--rounding);
+            outline:        props.get(vars.$thumbnail--border-color) solid props.get(vars.$thumbnail--border-width);
+            outline-offset: calc(-1 * props.get(vars.$thumbnail--border-width));
             opacity:       .75;
 
             &:hover,
             &:active,
             &:focus-visible {
-                outline-color: fn.color(--thumbnail --hover --border);
+                outline-color: props.get(vars.$thumbnail--hover--border-color);
                 opacity:       1;
             }
 
             @include iro.bem-is('selected') {
-                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
+                $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width));
 
                 margin:        $focus-border-offset;
-                border:        fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border);
-                border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
+                border:        props.get(vars.$thumbnail--selected--border-width) solid props.get(vars.$thumbnail--selected--border-color);
+                border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset);
                 outline:       none;
                 opacity:       1;
             }
 
             &:focus-visible {
-                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset));
+                $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--key-focus--border-offset));
 
                 margin:         $focus-border-offset;
-                border:         fn.dim(--thumbnail --key-focus --border-offset) solid transparent;
-                border-radius:  calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
-                outline:        fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border);
+                border:         props.get(vars.$thumbnail--key-focus--border-offset) solid transparent;
+                border-radius:  calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset);
+                outline:        props.get(vars.$thumbnail--key-focus--border-color) solid props.get(vars.$thumbnail--key-focus--border-width);
                 outline-offset: 0;
-                box-shadow:     0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline);
+                box-shadow:
+                    0
+                    0
+                    0
+                    calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width))
+                    props.get(vars.$thumbnail--key-focus--outline-color);
             }
         }
 
@@ -156,9 +163,9 @@ $static-themes: 'black' 'white' !default;
 
         @include iro.bem-elem('close-btn') {
             flex:               0 0 auto;
-            margin-block-start: calc(-.5 * fn.dim(--pad));
-            margin-inline:      auto calc(-.5 * fn.dim(--pad));
-            font-size:          fn.dim(--close-button --font-size);
+            margin-block-start: calc(-.5 * props.get(vars.$pad));
+            margin-inline:      auto calc(-.5 * props.get(vars.$pad));
+            font-size:          props.get(vars.$close-button--font-size);
         }
 
         @include iro.bem-elem('nav-btn') {
@@ -166,21 +173,21 @@ $static-themes: 'black' 'white' !default;
             display:    none;
             align-self: center;
             overflow:   visible;
-            font-size:  fn.dim(--nav-button --font-size);
+            font-size:  props.get(vars.$nav-button--font-size);
 
             &::before {
                 position:           absolute;
                 inset-block-start:  50%;
                 display:            block;
-                inline-size:        fn.dim(--nav-button --width);
-                block-size:         fn.dim(--nav-button --height);
+                inline-size:        props.get(vars.$nav-button--inline-size);
+                block-size:         props.get(vars.$nav-button--block-size);
                 content:            '';
                 transform:          translateY(-50%);
             }
 
             @include iro.bem-modifier('prev') {
                 grid-area:     prev;
-                margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
+                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
 
                 &::before {
                     inset-inline-start: 0;
@@ -189,35 +196,40 @@ $static-themes: 'black' 'white' !default;
     
             @include iro.bem-modifier('next') {
                 grid-area:     next;
-                margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
+                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
 
                 &::before {
                     inset-inline-end: 0;
                 }
             }
         }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                color: fn.color(--static-#{$theme} --text);
+
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier(string.slice($theme, 3)) {
+                color: props.get(vars.$static-themes, $theme, --text);
 
                 @include iro.bem-elem('thumbnail') {
-                    outline-color: fn.color(--static-#{$theme} --thumbnail --border);
+                    outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border);
 
                     &:hover,
                     &:active,
                     &:focus-visible {
-                        outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border);
+                        outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border);
                     }
         
                     @include iro.bem-is('selected') {
-                        border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
+                        border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border);
                     }
 
                     &:focus-visible {
                         border-color:  transparent;
-                        outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border);
-                        box-shadow:    0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline);
+                        outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --border);
+                        box-shadow: 
+                            0
+                            0
+                            0
+                            calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width))
+                            props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --outline);
                     }
                 }
             }