summaryrefslogtreecommitdiffstats
path: root/src/objects/_lightbox.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_lightbox.vars.scss')
-rw-r--r--src/objects/_lightbox.vars.scss57
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 @@
1@use 'sass:map';
1@use '../props'; 2@use '../props';
2@use '../core.vars' as core; 3@use '../core.vars' as core;
3 4
@@ -29,42 +30,34 @@ $thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected-
29$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 30$thumbnail--key-focus--border-color: props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
30$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 31$thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
31 32
33$thumbnail--size--md: props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default;
34$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default;
35$nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default;
32 36
37$static-themes: props.def(--o-lightbox);
33 38
34@each $theme in $static-themes { 39@each $theme in map.keys(props.get(core.$transparent-colors)) {
35 @include iro.props-store(( 40 $lightbox-theme: #{$theme}-static;
36 --colors: (
37 --static-#{$theme}: (
38 --text: fn.global-color(--white-transparent --800),
39 --thumbnail: (
40 --border: fn.global-color(--white-transparent --400),
41
42 --hover: (
43 --border: fn.global-color(--white-transparent --500),
44 ),
45
46 --selected: (
47 --border: fn.global-color(--white-transparent --900),
48 ),
49 41
50 --key-focus: ( 42 $static-themes: props.merge($static-themes, (
51 --border: fn.global-color(--#{$theme}-transparent --900), 43 $lightbox-theme: (
52 --outline: fn.global-color(--#{$theme}-transparent --300), 44 --text: props.get(core.$transparent-colors, $theme, --800),
53 ), 45 --thumbnail: (
46 --border: props.get(core.$transparent-colors, $theme, --400),
47
48 --hover: (
49 --border: props.get(core.$transparent-colors, $theme, --500),
54 ), 50 ),
55 ) 51
52 --selected: (
53 --border: props.get(core.$transparent-colors, $theme, --900),
54 ),
55
56 --key-focus: (
57 --border: props.get(core.$transparent-colors, $theme, --900),
58 --outline: props.get(core.$transparent-colors, $theme, --300),
59 ),
60 ),
56 ) 61 )
57 )); 62 ));
58} 63}
59
60@include iro.props-store((
61 --dims: (
62 --thumbnail: (
63 --size: fn.global-dim(--size --600),
64 ),
65 --nav-button: (
66 --width: fn.global-dim(--size --2500),
67 --height: fn.global-dim(--size --2500),
68 ),
69 ),
70), 'md');