From 3799950b0a869aee0e2725a8aafbb53c26723942 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 14:46:06 +0200 Subject: Update --- .stylelintrc.json | 8 +++ src/_iro-design.scss | 7 ++ src/objects/_checkbox.vars.scss | 6 +- src/objects/_field-label.scss | 1 - src/objects/_lightbox.scss | 104 +++++++++++++++------------ src/objects/_lightbox.vars.scss | 57 +++++++-------- src/objects/_menu.scss | 122 +++++++++++--------------------- src/objects/_menu.vars.scss | 29 ++++++++ src/objects/_palette.scss | 29 ++++---- src/objects/_popover.scss | 45 ++++-------- src/objects/_popover.vars.scss | 14 ++++ src/objects/_radio.scss | 118 +++++++++++------------------- src/objects/_radio.vars.scss | 33 +++++++++ src/objects/_side-nav.scss | 103 +++++++++------------------ src/objects/_side-nav.vars.scss | 28 ++++++++ src/objects/_status-indicator.scss | 42 ++++------- src/objects/_status-indicator.vars.scss | 21 ++++++ src_demo/index.scss | 7 ++ 18 files changed, 399 insertions(+), 375 deletions(-) create mode 100644 src/objects/_menu.vars.scss create mode 100644 src/objects/_popover.vars.scss create mode 100644 src/objects/_radio.vars.scss create mode 100644 src/objects/_side-nav.vars.scss create mode 100644 src/objects/_status-indicator.vars.scss diff --git a/.stylelintrc.json b/.stylelintrc.json index 478ae4e..c00dafa 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -8,6 +8,14 @@ "@stylistic/number-leading-zero": "never", "@stylistic/declaration-colon-space-after": null, "max-nesting-depth": 7, + "length-zero-no-unit": [ + true, + { + "ignoreFunctions": [ + "/^props\\.def/" + ] + } + ], "selector-class-pattern": [ "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", { diff --git a/src/_iro-design.scss b/src/_iro-design.scss index 3abe3fa..eac485d 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss @@ -50,3 +50,10 @@ $breakpoints: ( @forward 'objects/field-label' as o-field-label--*; @forward 'objects/heading' as o-heading--*; @forward 'objects/icon' as o-icon--*; +@forward 'objects/lightbox' as o-lightbox--*; +@forward 'objects/menu' as o-menu--*; +@forward 'objects/palette' as o-palette--*; +@forward 'objects/popover' as o-popover--*; +@forward 'objects/radio' as o-radio--*; +@forward 'objects/side-nav' as o-side-nav--*; +@forward 'objects/status-indicator' as o-status-indicator--*; diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss index d0785d7..cba736e 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss @@ -10,9 +10,9 @@ $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !def $rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; -$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; $box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default; $box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default; diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 467d30a..4ffe8f0 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,7 +1,6 @@ @use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; @use '../props'; -@use 'icon.vars' as icon; @forward 'field-label.vars'; @use 'field-label.vars' as vars; 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); } } } 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'); diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 12e9755..f9453ce 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -1,82 +1,41 @@ -/* stylelint-disable length-zero-no-unit */ - +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; - -@use './icon'; - -@include iro.props-namespace('menu') { - @include iro.props-store(( - --dims: ( - --spacing: 0em, - --header: ( - --font-size: fn.global-dim(--font-size --50), - ), - --separator: fn.global-dim(--size --100), - --item: ( - --pad-i: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --100), - --rounding: 0em, - - --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), - ), - ), - ), - --colors: ( - --separator: fn.global-color(--border), - --header: ( - --label: fn.global-color(--heading), - ), - --item: ( - --hover: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--heading), - ), - --active: ( - --bg: fn.global-color(--border), - --label: fn.global-color(--heading), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - ), - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - ), - )); - - @include iro.bem-object(iro.props-namespace()) { +@use '../props'; +@use 'icon.vars' as icon; + +@forward 'menu.vars'; +@use 'menu.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('menu') { display: flex; flex-direction: column; - gap: fn.dim(--spacing); + gap: props.get(vars.$spacing); @include iro.bem-elem('header') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); - font-size: fn.dim(--header --font-size); + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + font-size: props.get(vars.$header--font-size); font-weight: 500; - color: fn.color(--header --label); + color: props.get(vars.$header--label-color); text-transform: uppercase; letter-spacing: .5px; @include iro.bem-next-twin-elem { - margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); } } @include iro.bem-elem('item') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); - margin: calc(-1 * fn.dim(--item --key-focus --outline)); - color: fn.color(--item --disabled --label); + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); + color: props.get(vars.$item--disabled--label-color); background-clip: padding-box; - border: fn.dim(--item --key-focus --outline) solid transparent; - border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline)); + border: props.get(vars.$item--key-focus--outline-width) solid transparent; + border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); &:link, &:visited, @@ -84,23 +43,28 @@ color: currentColor; @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { - color: fn.color(--item --hover --label); - background-color: fn.color(--item --hover --bg); + color: props.get(vars.$item--hover--label-color); + background-color: props.get(vars.$item--hover--bg-color); } &:active { - color: fn.color(--item --active --label); - background-color: fn.color(--item --active --bg); + color: props.get(vars.$item--active--label-color); + background-color: props.get(vars.$item--active--bg-color); } &:focus-visible { - outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); + outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + props.get(vars.$item--key-focus--outline-color); } } @include iro.bem-next-elem('header') { - margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); } } @@ -108,30 +72,30 @@ &:link, &:visited, &:enabled { - color: fn.color(--header --label); + color: props.get(vars.$header--label-color); } } @include iro.bem-elem('separator') { block-size: 1px; - margin-block: fn.dim(--separator); - margin-inline: fn.dim(--item --pad-i); - background-color: fn.color(--separator); + margin-block: props.get(vars.$separator-width); + margin-inline: props.get(vars.$item--pad-i); + background-color: props.get(vars.$separator-color); } @include iro.bem-elem('slot') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); } @include iro.bem-elem('icon-slot') { display: flex; justify-content: center; - inline-size: fn.foreign-dim(--icon, --size); + inline-size: props.get(icon.$size); } @include iro.bem-modifier('pull') { - margin: calc(-1 * fn.dim(--item --pad-i)); + margin: calc(-1 * props.get(vars.$item--pad-i)); } } } diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss new file mode 100644 index 0000000..74a9f8a --- /dev/null +++ b/src/objects/_menu.vars.scss @@ -0,0 +1,29 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$spacing: props.def(--o-menu--spacing, 0em) !default; +$header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default; +$separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default; + +$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; +$item--rounding: props.def(--o-menu--item--pad-b, props.get(core.$rounding)) !default; + +$item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; + +$separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border)) !default; +$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading)) !default; + +$item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default; +$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading)) !default; + +$item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border)) !default; +$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading)) !default; + +$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; + +$item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index 8291750..c4f8e96 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -1,32 +1,33 @@ -@use 'sass:map'; @use 'sass:list'; +@use 'sass:map'; @use 'sass:string'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../config'; +@use '../themes'; +@use '../props'; +@use '../core.vars' as core; -@include iro.props-namespace('palette') { - @include iro.bem-object(iro.props-namespace()) { +@mixin styles { + @include iro.bem-object('palette') { display: flex; block-size: 3em; @include iro.bem-elem('item') { flex: 1 1 auto; - $palette: map.get(config.$themes, config.$theme-default, --palettes, --base); - $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); + $palette: map.get(themes.$themes, themes.$theme-default, light, --palettes, --base); + $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); @for $i from 1 through list.length($contrasts) { $key: list.nth(map.keys($contrasts), $i); &:nth-child(#{$i}) { - background-color: fn.global-color(--base $key); + background-color: props.get(core.$theme, --base, $key); } } } - @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) { - $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); + @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) { + $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); @include iro.bem-modifier(string.slice($palette-name, 3)) { @include iro.bem-elem('item') { @@ -34,7 +35,7 @@ $key: list.nth(map.keys($contrasts), $i); &:nth-child(#{$i}) { - background-color: fn.global-color($palette-name $key); + background-color: props.get(core.$theme, $palette-name, $key); } } } @@ -42,8 +43,8 @@ } @include iro.bem-modifier('static') { - @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { - $contrasts: map.get(config.$static-colors, --contrasts); + @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) { + $contrasts: map.get(themes.$static-colors, --contrasts); @include iro.bem-modifier(string.slice($palette-name, 3)) { @include iro.bem-elem('item') { @@ -51,7 +52,7 @@ $key: list.nth(map.keys($contrasts), $i); &:nth-child(#{$i}) { - background-color: fn.global-color(#{$palette-name}-static $key); + background-color: props.get(core.$static-colors, $palette-name, $key); } } } diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 13550eb..f539da5 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss @@ -1,39 +1,24 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; -@include iro.props-namespace('popover') { - @include iro.props-store(( - --dims: ( - --z-index: 10000, - --pad-i: 0, - --pad-b: fn.global-dim(--size --85), - --separator: fn.global-dim(--size --85), - --rounding: fn.global-dim(--rounding), - --border: fn.global-dim(--border --thin), - ), - --colors: ( - --bg: fn.global-color(--bg-l2), - --border: fn.global-color(--border), - --filter: drop-shadow( - fn.global-dim(--shadow --x) - fn.global-dim(--shadow --y) - fn.global-dim(--shadow --blur) - fn.global-color(--shadow) - ), - ), - )); +@forward 'popover.vars'; +@use 'popover.vars' as vars; - @include iro.bem-object(iro.props-namespace()) { +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('popover') { position: absolute; inset-block-start: 0; inset-inline-start: 0; - z-index: fn.dim(--z-index); - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - background-color: fn.color(--bg); - filter: fn.color(--filter); - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); + z-index: props.get(vars.$z-index); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + background-color: props.get(vars.$bg-color); + filter: props.get(vars.$filter); + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); transform: translate(var(--x), var(--y)); @include iro.bem-modifier('up-left') { diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss new file mode 100644 index 0000000..0d776ed --- /dev/null +++ b/src/objects/_popover.vars.scss @@ -0,0 +1,14 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$z-index: props.def(--o-popover--z-index, 11000) !default; +$pad-i: props.def(--o-popover--pad-i, 0) !default; +$pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default; +$separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default; +$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; +$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; + +$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2)) !default; +$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border)) !default; +$filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow))) !default; diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index ad3e8d4..c1182d0 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -1,88 +1,51 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; +@use '../core.vars' as core; -@include iro.props-namespace('radio') { - @include iro.props-store(( - --dims: ( - --diameter: fn.global-dim(--size --200), - --label-gap: fn.global-dim(--size --125), - --border: fn.global-dim(--border --medium), - --pad-i: fn.global-dim(--size --65), - --pad-b: fn.global-dim(--size --65), - --rounding: fn.global-dim(--rounding), - --spacing-sibling: fn.global-dim(--size --300), +@forward 'radio.vars'; +@use 'radio.vars' as vars; - --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), - ), - ), - --colors: ( - --circle-border: fn.global-color(--text-mute-more), - --circle-bg: fn.global-color(--base --75), - - --hover: ( - --label: fn.global-color(--heading), - --circle-border: fn.global-color(--text-mute), - ), - --accent: ( - --circle-border: fn.global-color(--accent --900), - - --hover: ( - --circle-border: fn.global-color(--accent --1000), - ), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - --circle-border: fn.global-color(--border-strong), - --circle-bg: fn.global-color(--base --75), - ), - --key-focus: ( - --label: fn.global-color(--focus --text), - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('radio') { position: relative; display: inline-block; - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); margin-inline: - calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) - calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); + calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); @include iro.bem-elem('circle') { display: inline-block; flex: 0 0 auto; - inline-size: fn.dim(--diameter); - block-size: fn.dim(--diameter); - margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset)); + inline-size: props.get(vars.$diameter); + block-size: props.get(vars.$diameter); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); vertical-align: top; - background-color: fn.color(--circle-border); + background-color: props.get(vars.$circle-border-color); background-clip: padding-box; - border: fn.dim(--key-focus --border-offset) solid transparent; + border: props.get(vars.$key-focus--border-offset) solid transparent; border-radius: 2em; &::after { position: relative; - inset-block-start: fn.dim(--border); - inset-inline-start: fn.dim(--border); + inset-block-start: props.get(vars.$border-width); + inset-inline-start: props.get(vars.$border-width); display: block; - inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); - block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); + inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); content: ''; - background-color: fn.color(--circle-bg); - border-radius: fn.dim(--diameter); + background-color: props.get(vars.$circle-bg-color); + border-radius: props.get(vars.$diameter); transition: transform .2s ease; } } @include iro.bem-elem('label') { - margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); + margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); } @include iro.bem-elem('native') { @@ -96,16 +59,16 @@ margin: 0; overflow: hidden; appearance: none; - border-radius: fn.dim(--rounding); + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { @include iro.bem-sibling-elem('label') { - color: fn.color(--hover --label); + color: props.get(vars.$hover--label-color); } @include iro.bem-sibling-elem('circle') { - background-color: fn.color(--hover --circle-border); + background-color: props.get(vars.$hover--circle-border-color); } } @@ -119,26 +82,31 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: fn.color(--disabled --label); + color: props.get(vars.$disabled--label-color); } @include iro.bem-sibling-elem('circle') { - background-color: fn.color(--disabled --circle-border); + background-color: props.get(vars.$disabled--circle-border-color); &::after { - background-color: fn.color(--disabled --circle-bg); + background-color: props.get(vars.$disabled--circle-bg-color); } } } &:focus-visible { @include iro.bem-sibling-elem('label') { - color: fn.color(--key-focus --label); + color: props.get(vars.$key-focus--label-color); } @include iro.bem-sibling-elem('circle') { - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); } } } @@ -153,29 +121,29 @@ @include iro.bem-elem('native') { &:checked { @include iro.bem-sibling-elem('circle') { - background-color: fn.color(--accent --circle-border); + background-color: props.get(vars.$accent--circle-border-color); } &:hover, &:focus-visible { @include iro.bem-sibling-elem('circle') { - background-color: fn.color(--accent --hover --circle-border); + background-color: props.get(vars.$accent--hover--circle-border-color); } } } &:disabled { @include iro.bem-sibling-elem('circle') { - background-color: fn.color(--disabled --circle-border); + background-color: props.get(vars.$disabled--circle-border-color); &::after { - background-color: fn.color(--disabled --circle-bg); + background-color: props.get(vars.$disabled--circle-bg-color); } } &:checked { @include iro.bem-sibling-elem('circle') { - background-color: fn.color(--disabled --circle-border); + background-color: props.get(vars.$disabled--circle-border-color); } } } diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss new file mode 100644 index 0000000..b776dd4 --- /dev/null +++ b/src/objects/_radio.vars.scss @@ -0,0 +1,33 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; +$label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; +$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-radio--rounding, props.get(core.$rounding)) !default; +$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; + +$key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; + +$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more)) !default; +$circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75)) !default; + +$hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading)) !default; +$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute)) !default; + +$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900)) !default; + +$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000)) !default; + +$disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; +$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong)) !default; +$disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75)) !default; + +$key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; +$key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 237b5aa..3a85560 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss @@ -1,79 +1,41 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; +@use 'icon.vars' as icon; -@use './icon'; +@forward 'side-nav.vars'; +@use 'side-nav.vars' as vars; -@include iro.props-namespace('side-nav') { - @include iro.props-store(( - --dims: ( - --spacing: fn.global-dim(--size --50), - --header: ( - --font-size: fn.global-dim(--font-size --50), - ), - --separator: fn.global-dim(--size --200), - --item: ( - --pad-i: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --100), - --rounding: fn.global-dim(--rounding), - - --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), - ), - ), - ), - --colors: ( - --header: ( - --label: fn.global-color(--text-mute-more), - ), - --item: ( - --hover: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--heading), - ), - --active: ( - --bg: fn.global-color(--border), - --label: fn.global-color(--heading), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - ), - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('side-nav') { display: flex; flex-direction: column; - gap: fn.dim(--spacing); + gap: props.get(vars.$spacing); @include iro.bem-elem('header') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); - font-size: fn.dim(--header --font-size); + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + font-size: props.get(vars.$header--font-size); font-weight: 500; - color: fn.color(--header --label); + color: props.get(vars.$header--label-color); text-transform: uppercase; letter-spacing: .5px; @include iro.bem-next-twin-elem { - margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); } } @include iro.bem-elem('item') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); - margin: calc(-1 * fn.dim(--item --key-focus --border-offset)); - color: fn.color(--item --disabled --label); + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); + color: props.get(vars.$item--disabled--label-color); background-clip: padding-box; - border: fn.dim(--item --key-focus --border-offset) solid transparent; - border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset)); + border: props.get(vars.$item--key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); &:link, &:visited, @@ -81,23 +43,28 @@ color: currentColor; @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { - color: fn.color(--item --hover --label); - background-color: fn.color(--item --hover --bg); + color: props.get(vars.$item--hover--label-color); + background-color: props.get(vars.$item--hover--bg-color); } &:active { - color: fn.color(--item --active --label); - background-color: fn.color(--item --active --bg); + color: props.get(vars.$item--active--label-color); + background-color: props.get(vars.$item--active--bg-color); } &:focus-visible { - outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); + outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + props.get(vars.$item--key-focus--outline-color); } } @include iro.bem-next-elem('header') { - margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); } } @@ -105,18 +72,18 @@ &:link, &:visited, &:enabled { - color: fn.color(--header --label); + color: props.get(vars.$header--label-color); } } @include iro.bem-elem('separator') { - block-size: fn.dim(--separator); + block-size: props.get(vars.$separator); } @include iro.bem-elem('icon-slot') { display: flex; justify-content: center; - inline-size: fn.foreign-dim(--icon, --size); + inline-size: props.get(icon.$size); } } } diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss new file mode 100644 index 0000000..08516a6 --- /dev/null +++ b/src/objects/_side-nav.vars.scss @@ -0,0 +1,28 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; +$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$size--50)) !default; +$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; + +$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; +$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default; + +$item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; + +$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more)) !default; + +$item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default; +$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading)) !default; + +$item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border)) !default; +$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading)) !default; + +$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; + +$item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index ce1794a..2555894 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss @@ -1,38 +1,26 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; -$themes: 'accent' 'positive' 'negative' 'warning' !default; +@forward 'status-indicator.vars'; +@use 'status-indicator.vars' as vars; -@include iro.props-namespace('status-indicator') { - @include iro.props-store(( - --dims: ( - --size: fn.global-dim(--size --125), - ), - --colors: ( - --default: fn.global-color(--border-strong), - --primary: fn.global-color(--text), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @each $theme in $themes { - @include iro.props-store(( - --colors: ( - --#{$theme}: fn.global-color(--#{$theme} --700), - ), - )); - } - - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('status-indicator') { display: inline-block; - inline-size: fn.dim(--size); - block-size: fn.dim(--size); + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); vertical-align: middle; - background-color: fn.color(--default); + background-color: props.get(vars.$default); border-radius: 10em; - @each $theme in $themes { - @include iro.bem-is($theme) { - background-color: fn.color(--#{$theme}); + @each $theme in map.keys(props.get(vars.$themes)) { + @include iro.bem-is(string.slice($theme, 3)) { + background-color: props.get(vars.$themes, $theme); } } } diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss new file mode 100644 index 0000000..1d0a06a --- /dev/null +++ b/src/objects/_status-indicator.vars.scss @@ -0,0 +1,21 @@ +@use 'sass:map'; +@use '../props'; +@use '../themes' as themes; +@use '../core.vars' as core; + +$size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; + +$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; +$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; + +$themes-config: map.keys(map.get(themes.$themes, themes.$theme-default, light, --palettes)) !default; + +$themes: props.def(--o-status-indicator); + +@each $theme in $themes-config { + @if $theme != --base { + $themes: props.merge($themes, ( + $theme: props.get(core.$theme, $theme, --700), + )); + } +} diff --git a/src_demo/index.scss b/src_demo/index.scss index 9a6b7fe..93fa156 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss @@ -30,3 +30,10 @@ @include iro.o-field-label--styles; @include iro.o-heading--styles; @include iro.o-icon--styles; +@include iro.o-lightbox--styles; +@include iro.o-menu--styles; +@include iro.o-palette--styles; +@include iro.o-popover--styles; +@include iro.o-radio--styles; +@include iro.o-side-nav--styles; +@include iro.o-status-indicator--styles; -- cgit v1.2.3-70-g09d2