1 files changed, 70 insertions, 0 deletions

diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
new file mode 100644
index 0000000..1538cae
--- /dev/null
+++ b/src/objects/_lightbox.vars.scss
@@ -0,0 +1,70 @@
+@use '../props';
+@use '../core.vars' as core;
+
+$pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
+
+$thumbnail--size:         props.def(--o-lightbox--thumbnail--size, props.get(core.$size--700)) !default;
+$thumbnail--rounding:     props.def(--o-lightbox--thumbnail--rounding, props.get(core.$rounding)) !default;
+$thumbnail--spacing:      props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default;
+$thumbnail--border-width: props.def(--o-lightbox--thumbnail--border-width, props.get(core.$border-width--thin)) !default;
+
+$thumbnail--selected--border-width: props.def(--o-lightbox--thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default;
+
+$thumbnail--key-focus--border-width:  props.def(--o-lightbox--thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$thumbnail--key-focus--border-offset: props.def(--o-lightbox--thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$thumbnail--key-focus--outline-width: props.def(--o-lightbox--thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;
+
+$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default;
+$nav-button--block-size:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default;
+$nav-button--font-size:   props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default;
+
+$thumbnail--border-color: props.def(--o-lightbox--thumbnail--border-color, props.get(core.$theme, --border-strong)) !default;
+
+$thumbnail--hover--border-color: props.def(--o-lightbox--thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more)) !default;
+
+$thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected--border-color, props.get(core.$theme, --heading)) !default;
+
+$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;
+
+
+
+@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),
+                    ),
+
+                    --key-focus: (
+                        --border:  fn.global-color(--#{$theme}-transparent --900),
+                        --outline: fn.global-color(--#{$theme}-transparent --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');