Update

1 files changed, 25 insertions, 32 deletions

diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 1538cae..32324a4 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -29,42 +30,34 @@ $thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected-
 $thumbnail--key-focus--border-color:  props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
 $thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
 
+$thumbnail--size--md:         props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default;
+$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default;
+$nav-button--block-size--md:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default;
 
+$static-themes: props.def(--o-lightbox);
 
-@each $theme in $static-themes {
-    @include iro.props-store((
-        --colors: (
-            --static-#{$theme}: (
-                --text: fn.global-color(--white-transparent --800),
-                --thumbnail: (
-                    --border: fn.global-color(--white-transparent --400),
-            
-                    --hover: (
-                        --border: fn.global-color(--white-transparent --500),
-                    ),
-                    
-                    --selected: (
-                        --border: fn.global-color(--white-transparent --900),
-                    ),
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $lightbox-theme: #{$theme}-static;
 
-                    --key-focus: (
-                        --border:  fn.global-color(--#{$theme}-transparent --900),
-                        --outline: fn.global-color(--#{$theme}-transparent --300),
-                    ),
+    $static-themes: props.merge($static-themes, (
+        $lightbox-theme: (
+            --text: props.get(core.$transparent-colors, $theme, --800),
+            --thumbnail: (
+                --border: props.get(core.$transparent-colors, $theme, --400),
+        
+                --hover: (
+                    --border: props.get(core.$transparent-colors, $theme, --500),
                 ),
-            )
+                
+                --selected: (
+                    --border: props.get(core.$transparent-colors, $theme, --900),
+                ),
+
+                --key-focus: (
+                    --border:  props.get(core.$transparent-colors, $theme, --900),
+                    --outline: props.get(core.$transparent-colors, $theme, --300),
+                ),
+            ),
         )
     ));
 }
-
-@include iro.props-store((
-    --dims: (
-        --thumbnail: (
-            --size: fn.global-dim(--size --600),
-        ),
-        --nav-button: (
-            --width:  fn.global-dim(--size --2500),
-            --height: fn.global-dim(--size --2500),
-        ),
-    ),
-), 'md');