From 50d24a41b5656cdaf31468b28d08da765ca95763 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 10:34:53 +0200 Subject: Update --- src/objects/_field-label.scss | 44 +++++------- src/objects/_field-label.vars.scss | 12 ++++ src/objects/_heading.scss | 138 +++++++++++-------------------------- src/objects/_heading.vars.scss | 122 ++++++++++++++++++++++++++++++++ src/objects/_lightbox.scss | 89 +----------------------- src/objects/_lightbox.vars.scss | 70 +++++++++++++++++++ 6 files changed, 263 insertions(+), 212 deletions(-) create mode 100644 src/objects/_field-label.vars.scss create mode 100644 src/objects/_heading.vars.scss create mode 100644 src/objects/_lightbox.vars.scss (limited to 'src/objects') diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index ba3841a..467d30a 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,36 +1,28 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; +@use 'icon.vars' as icon; -@include iro.props-namespace('field-label') { - @include iro.props-store(( - --dims: ( - --spacing-i: fn.global-dim(--size --150), - --spacing-b: fn.global-dim(--size --85), - --label-font-size: fn.global-dim(--font-size --75), - --hint-font-size: fn.global-dim(--font-size --75), - ), - --colors: ( - --label: fn.global-color(--text-mute), - --hint: fn.global-color(--text-mute), - --error-hint: fn.global-color(--negative --900), - --disabled: fn.global-color(--text-disabled), - ), - )); +@forward 'field-label.vars'; +@use 'field-label.vars' as vars; - @include iro.bem-object(iro.props-namespace()) { +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('field-label') { display: block; @include iro.bem-elem('label') { display: block; flex: 0 0 auto; - padding-inline-end: fn.dim(--spacing-i); - font-size: fn.dim(--label-font-size); + padding-inline-end: props.get(vars.$spacing-i); + font-size: props.get(vars.$label-font-size); font-weight: 400; line-height: 1.3; - color: fn.color(--label); + color: props.get(vars.$label-color); @include iro.bem-next-elem('content') { - margin-block-start: fn.dim(--spacing-b); + margin-block-start: props.get(vars.$spacing-b); } } @@ -41,20 +33,20 @@ @include iro.bem-elem('hint') { display: block; - margin-block-start: fn.dim(--spacing-b); - font-size: fn.dim(--hint-font-size); - color: fn.color(--hint); + margin-block-start: props.get(vars.$spacing-b); + font-size: props.get(vars.$hint-font-size); + color: props.get(vars.$hint-color); } @include iro.bem-is('invalid') { @include iro.bem-elem('hint') { - color: fn.color(--error-hint); + color: props.get(vars.$error-hint-color); } } @include iro.bem-is('disabled') { @include iro.bem-elem('label', 'hint') { - color: fn.color(--disabled); + color: props.get(vars.$disabled-color); } } diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss new file mode 100644 index 0000000..699836e --- /dev/null +++ b/src/objects/_field-label.vars.scss @@ -0,0 +1,12 @@ +@use '../props'; +@use '../core.vars' as core; + +$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; +$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default; +$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default; +$hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default; + +$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute)) !default; +$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute)) !default; +$error-hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --negative, --900)) !default; +$disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled)) !default; diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 8ed3b17..b1abdf5 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,114 +1,56 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../mixins' as mx; -@use '../config'; -@use 'include-media/dist/include-media' as media; +@use '../props'; -$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; +@forward 'heading.vars'; +@use 'heading.vars' as vars; -@include iro.props-namespace('heading') { - @include iro.props-store(( - --dims: ( - --offset: -.02em, - ), - --colors: ( - --bg: fn.global-color(--base --50), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { - @include mx.set-font(--headline); - - display: block; - margin-block-start: fn.global-dim(--heading --margin-bs); - text-transform: none; - letter-spacing: normal; - transform: translateX(fn.dim(--offset)); + @include iro.bem-object('heading') { + display: block; + margin-block-start: props.get(vars.$margin-bs); + font-family: props.get(vars.$font-family); + font-weight: props.get(vars.$font-weight); + font-feature-settings: props.get(vars.$feature-settings); + line-height: props.get(vars.$line-height); + text-transform: none; + letter-spacing: normal; + transform: translateX(props.get(vars.$offset)); & + & { - margin-block-start: fn.global-dim(--heading --margin-bs-sibling); + margin-block-start: props.get(vars.$margin-bs-sibling); } @include iro.bem-elem('highlight') { background-image: linear-gradient(to top, - transparent .05em, - fn.color(--bg) .05em, - fn.color(--bg) .5em, - transparent .5em); - } - - @include iro.bem-modifier('xxl') { - @include mx.heading-strong(--xxl); - } - - @include iro.bem-modifier('xl') { - @include mx.heading-strong(--xl); - } - - @include iro.bem-modifier('lg') { - @include mx.heading-medium(--lg); - } - - @include iro.bem-modifier('md') { - @include mx.heading-medium(--md); - } - - @include iro.bem-modifier('sm') { - @include mx.heading-faint(--sm); - } - - @include iro.bem-modifier('xs') { - @include mx.heading-faint(--xs); + transparent .05em, + props.get(vars.$bg-color) .05em, + props.get(vars.$bg-color) .5em, + transparent .5em); + } + + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { + @include iro.bem-modifier($mod) { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); + } } @include iro.bem-modifier('display') { - @include mx.set-font(--headline); - - @include iro.bem-modifier('xxl') { - @include mx.heading-strong(--display --xxl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xxl); - } - } - - @include iro.bem-modifier('xl') { - @include mx.heading-strong(--display --xl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xl); - } - } - - @include iro.bem-modifier('lg') { - @include mx.heading-strong(--display --lg); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --lg); - } - } - - @include iro.bem-modifier('md') { - @include mx.heading-strong(--display --md); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --md); - } - } - - @include iro.bem-modifier('sm') { - @include mx.heading-medium(--display --sm); - - @include media.media('<=md') { - @include mx.heading-medium(--display-sm --sm); - } - } - - @include iro.bem-modifier('xs') { - @include mx.heading-faint(--display --xs); - - @include media.media('<=md') { - @include mx.heading-faint(--display-sm --xs); + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { + @include iro.bem-modifier($mod) { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); } } } diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss new file mode 100644 index 0000000..31a2406 --- /dev/null +++ b/src/objects/_heading.vars.scss @@ -0,0 +1,122 @@ +@use '../props'; +@use '../core.vars' as core; + +$offset: props.def(--o-heading--offset, -.02em) !default; +$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; +$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; + +$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50)) !default; + +$font-family: props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default; +$line-height: props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default; +$font-weight: props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default; +$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default; +$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default; +$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; +$font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default; +$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; +$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default; +$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default; +$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; +$font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default; +$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; +$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; +$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; +$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; +$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; +$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; +$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; +$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; +$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; +$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; +$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; +$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; +$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; +$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; +$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; +$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; +$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; +$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; +$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; +$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; +$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; +$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$sizes: ( + 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, + 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, + 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, + 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, + 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, + 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, +) !default; + +$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; +$display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default; +$display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default; +$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default; +$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; +$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default; +$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default; +$display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default; +$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default; +$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; +$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default; +$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default; +$display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default; +$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default; +$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default; +$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default; +$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default; +$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default; +$display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default; +$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; +$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; + +$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; +$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; +$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; +$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; +$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; +$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; +$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; +$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; +$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; +$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; +$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; + +$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default; +$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default; +$display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default; +$display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default; +$display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default; +$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; + +$display--sizes: ( + 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs, + 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm, + 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md, + 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg, + 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl, + 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl, +) !default; diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index edbc62a..740f4e5 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -6,94 +6,7 @@ $static-themes: 'black' 'white' !default; @include iro.props-namespace('lightbox') { - @include iro.props-store(( - --dims: ( - --pad: fn.global-dim(--size --150), - - --thumbnail: ( - --size: fn.global-dim(--size --700), - --rounding: fn.global-dim(--rounding), - --spacing: fn.global-dim(--size --100), - --border: fn.global-dim(--border --thin), - - --selected: ( - --border: fn.global-dim(--border --medium), - ), - - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --outline), - ), - ), - - --close-button: ( - --font-size: fn.global-dim(--font-size --200), - ), - - --nav-button: ( - --width: fn.global-dim(--size --2000), - --height: fn.global-dim(--size --3800), - --font-size: fn.global-dim(--font-size --200), - ), - ), - --colors: ( - --thumbnail: ( - --border: fn.global-color(--border-strong), - - --hover: ( - --border: fn.global-color(--text-mute-more), - ), - - --selected: ( - --border: fn.global-color(--heading), - ), - - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - ), - )); - - @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'); + @include iro.bem-object(iro.props-namespace()) { box-sizing: border-box; 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'); -- cgit v1.2.3-70-g09d2