From 3524f1bac11c8a9d1640bfeac5ceb063ff96d623 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 17:17:33 +0100 Subject: Improved variable structure --- src/objects/_action-button.scss | 194 ++++++++++++++++++++-------------------- src/objects/_button.scss | 112 ++++++++++++----------- src/objects/_checkbox.scss | 112 ++++++++++++----------- src/objects/_field-label.scss | 40 +++++---- src/objects/_heading.scss | 44 ++++----- src/objects/_radio.scss | 86 +++++++++--------- src/objects/_rule.scss | 66 +++++++------- src/objects/_switch.scss | 114 +++++++++++------------ src/objects/_text-field.scss | 96 ++++++++++---------- 9 files changed, 450 insertions(+), 414 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 6aa1823..eefdfed 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -1,4 +1,5 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('action-button') { @include iro.props-store(( @@ -7,94 +8,97 @@ --padding-y: .6rem, --rounding: 3px, ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --bg: iro.props-get(--colors --bg-hi, $global: true), - --label: iro.props-get(--colors --fg, $global: true), - --border: iro.props-get(--colors --obj-lo, $global: true), + --bg: fn.color(--bg-hi, $global: true), + --label: fn.color(--fg, $global: true), + --border: fn.color(--obj-lo, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: iro.props-get(--colors --bg-hi2, $global: true), - --label: iro.props-get(--colors --fg-lo, $global: true), - --border: iro.props-get(--colors --fg-hi2, $global: true), + --bg: fn.color(--bg-hi2, $global: true), + --label: fn.color(--fg-lo, $global: true), + --border: fn.color(--fg-hi2, $global: true), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --label: iro.props-get(--colors --fg-lo, $global: true), - --border: iro.props-get(--colors --fg-hi2, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --label: fn.color(--fg-lo, $global: true), + --border: fn.color(--fg-hi2, $global: true), --shadow: 0 0 0 0 transparent, ), --selected: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --label: iro.props-get(--colors --fg, $global: true), - --border: iro.props-get(--colors --fg-hi3, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --label: fn.color(--fg, $global: true), + --border: fn.color(--fg-hi3, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --label: iro.props-get(--colors --fg-lo, $global: true), - --border: iro.props-get(--colors --fg-hi2, $global: true), + --label: fn.color(--fg-lo, $global: true), + --border: fn.color(--fg-hi2, $global: true), --shadow: 0 0 0 0 transparent, ), --key-focus: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), + --bg: fn.color(--obj-hi, $global: true), ), ), --disabled: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --label: iro.props-get(--colors --fg-hi3, $global: true), - --border: iro.props-get(--colors --obj-hi, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --label: fn.color(--fg-hi3, $global: true), + --border: fn.color(--obj-hi, $global: true), --shadow: 0 0 0 0 transparent, ), --key-focus: ( - --bg: iro.props-get(--colors --bg-hi2, $global: true), - --label: iro.props-get(--colors --fg-lo, $global: true), - --border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --bg: fn.color(--bg-hi2, $global: true), + --label: fn.color(--fg-lo, $global: true), + --border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), --quiet: ( - --label: iro.props-get(--colors --fg, $global: true), + --label: fn.color(--fg, $global: true), --hover: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --label: iro.props-get(--colors --fg-lo, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --label: fn.color(--fg-lo, $global: true), ), --active: ( - --bg: iro.props-get(--colors --obj, $global: true), - --label: iro.props-get(--colors --fg-lo, $global: true), + --bg: fn.color(--obj, $global: true), + --label: fn.color(--fg-lo, $global: true), ), --selected: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --label: iro.props-get(--colors --fg, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --label: fn.color(--fg, $global: true), --hover: ( - --label: iro.props-get(--colors --fg-lo, $global: true), + --label: fn.color(--fg-lo, $global: true), ), --key-focus: ( - --bg: iro.props-get(--colors --obj, $global: true), + --bg: fn.color(--obj, $global: true), ), ), --disabled: ( - --label: iro.props-get(--colors --fg-hi3, $global: true), + --label: fn.color(--fg-hi3, $global: true), ), --key-focus: ( - --bg: iro.props-get(--colors --bg-hi2, $global: true), - --label: iro.props-get(--colors --fg-lo, $global: true), - --border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --bg: fn.color(--bg-hi2, $global: true), + --label: fn.color(--fg-lo, $global: true), + --border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), ), ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { display: inline-block; - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); - border: 1px solid iro.props-get(--colors --border); - border-radius: iro.props-get(--dims --rounding); - background-color: iro.props-get(--colors --bg); - box-shadow: iro.props-get(--colors --shadow); - color: iro.props-get(--colors --label); + padding: fn.dim(--padding-y) fn.dim(--padding-x); + border: 1px solid fn.color(--border); + border-radius: fn.dim(--rounding); + background-color: fn.color(--bg); + box-shadow: fn.color(--shadow); + color: fn.color(--label); line-height: 1; text-align: center; text-decoration: none; @@ -103,51 +107,51 @@ @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover { - border-color: iro.props-get(--colors --hover --border); - background-color: iro.props-get(--colors --hover --bg); - box-shadow: iro.props-get(--colors --hover --shadow); - color: iro.props-get(--colors --hover --label); + border-color: fn.color(--hover --border); + background-color: fn.color(--hover --bg); + box-shadow: fn.color(--hover --shadow); + color: fn.color(--hover --label); } &:active { - border-color: iro.props-get(--colors --active --border); - background-color: iro.props-get(--colors --active --bg); - box-shadow: iro.props-get(--colors --active --shadow); - color: iro.props-get(--colors --active --label); + border-color: fn.color(--active --border); + background-color: fn.color(--active --bg); + box-shadow: fn.color(--active --shadow); + color: fn.color(--active --label); } } @include iro.bem-at-theme('keyboard') { &:focus { - border-color: iro.props-get(--colors --key-focus --border); - background-color: iro.props-get(--colors --key-focus --bg); - box-shadow: inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow); - color: iro.props-get(--colors --key-focus --label); + border-color: fn.color(--key-focus --border); + background-color: fn.color(--key-focus --bg); + box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); + color: fn.color(--key-focus --label); } } @include iro.bem-is('selected') { - border-color: iro.props-get(--colors --selected --border); - background-color: iro.props-get(--colors --selected --bg); - box-shadow: iro.props-get(--colors --selected --shadow); - color: iro.props-get(--colors --selected --label); + border-color: fn.color(--selected --border); + background-color: fn.color(--selected --bg); + box-shadow: fn.color(--selected --shadow); + color: fn.color(--selected --label); @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover, &:active { - border-color: iro.props-get(--colors --selected --hover --border); - background-color: iro.props-get(--colors --selected --bg); - box-shadow: iro.props-get(--colors --selected --hover --shadow); - color: iro.props-get(--colors --selected --hover --label); + border-color: fn.color(--selected --hover --border); + background-color: fn.color(--selected --bg); + box-shadow: fn.color(--selected --hover --shadow); + color: fn.color(--selected --hover --label); } } @include iro.bem-at-theme('keyboard') { &:focus { - border-color: iro.props-get(--colors --key-focus --border); - background-color: iro.props-get(--colors --selected --key-focus --bg); - box-shadow: inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow); - color: iro.props-get(--colors --key-focus --label); + border-color: fn.color(--key-focus --border); + background-color: fn.color(--selected --key-focus --bg); + box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); + color: fn.color(--key-focus --label); } } } @@ -156,73 +160,73 @@ border-color: transparent; background-color: transparent; box-shadow: none; - color: iro.props-get(--colors --quiet --label); + color: fn.color(--quiet --label); @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover { border-color: transparent; - background-color: iro.props-get(--colors --quiet --hover --bg); + background-color: fn.color(--quiet --hover --bg); box-shadow: none; - color: iro.props-get(--colors --quiet --hover --label); + color: fn.color(--quiet --hover --label); } &:active { border-color: transparent; - background-color: iro.props-get(--colors --quiet --active --bg); + background-color: fn.color(--quiet --active --bg); box-shadow: none; - color: iro.props-get(--colors --quiet --active --label); + color: fn.color(--quiet --active --label); } } @include iro.bem-at-theme('keyboard') { &:focus { - border-color: iro.props-get(--colors --quiet --key-focus --border); - background-color: iro.props-get(--colors --quiet --key-focus --bg); - box-shadow: inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow); - color: iro.props-get(--colors --quiet --key-focus --label); + border-color: fn.color(--quiet --key-focus --border); + background-color: fn.color(--quiet --key-focus --bg); + box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow); + color: fn.color(--quiet --key-focus --label); } } @include iro.bem-is('selected') { border-color: transparent; - background-color: iro.props-get(--colors --quiet --selected --bg); + background-color: fn.color(--quiet --selected --bg); box-shadow: none; - color: iro.props-get(--colors --quiet --selected --label); + color: fn.color(--quiet --selected --label); @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover, &:active { border-color: transparent; - background-color: iro.props-get(--colors --quiet --selected --bg); + background-color: fn.color(--quiet --selected --bg); box-shadow: none; - color: iro.props-get(--colors --quiet --selected --hover --label); + color: fn.color(--quiet --selected --hover --label); } } @include iro.bem-at-theme('keyboard') { &:focus { - border-color: iro.props-get(--colors --quiet --key-focus --border); - background-color: iro.props-get(--colors --quiet --selected --key-focus --bg); - box-shadow: inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow); - color: iro.props-get(--colors --quiet --key-focus --label); + border-color: fn.color(--quiet --key-focus --border); + background-color: fn.color(--quiet --selected --key-focus --bg); + box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow); + color: fn.color(--quiet --key-focus --label); } } } } @include iro.bem-is('disabled') { - border-color: iro.props-get(--colors --disabled --border); - background-color: iro.props-get(--colors --disabled --bg); - box-shadow: iro.props-get(--colors --disabled --shadow); - color: iro.props-get(--colors --disabled --label); + border-color: fn.color(--disabled --border); + background-color: fn.color(--disabled --bg); + box-shadow: fn.color(--disabled --shadow); + color: fn.color(--disabled --label); @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover, &:active { - border-color: iro.props-get(--colors --disabled --border); - background-color: iro.props-get(--colors --disabled --bg); - box-shadow: iro.props-get(--colors --disabled --shadow); - color: iro.props-get(--colors --disabled --label); + border-color: fn.color(--disabled --border); + background-color: fn.color(--disabled --bg); + box-shadow: fn.color(--disabled --shadow); + color: fn.color(--disabled --label); } } @@ -230,7 +234,7 @@ border-color: transparent; background-color: transparent; box-shadow: none; - color: iro.props-get(--colors --quiet --disabled --label); + color: fn.color(--quiet --disabled --label); @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover, @@ -238,12 +242,12 @@ border-color: transparent; background-color: transparent; box-shadow: none; - color: iro.props-get(--colors --quiet --disabled --label); + color: fn.color(--quiet --disabled --label); } } @include iro.bem-is('selected') { - background-color: iro.props-get(--colors --quiet --selected --bg); + background-color: fn.color(--quiet --selected --bg); } } } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 3932575..135ada0 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -1,33 +1,34 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @use '../vars'; @use '../mixins/typography'; @mixin button-variant($variant) { - border-color: iro.props-get((--colors, --#{$variant}, --bg)); - background-color: iro.props-get((--colors, --#{$variant}, --bg)); - box-shadow: iro.props-get((--colors, --#{$variant}, --shadow)); - color: iro.props-get((--colors, --#{$variant}, --label)); + border-color: fn.color((--#{$variant}, --bg)); + background-color: fn.color((--#{$variant}, --bg)); + box-shadow: fn.color((--#{$variant}, --shadow)); + color: fn.color((--#{$variant}, --label)); @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover { - border-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); - background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); - box-shadow: iro.props-get((--colors, --#{$variant}, --hover, --shadow)); - color: iro.props-get((--colors, --#{$variant}, --hover, --label)); + border-color: fn.color((--#{$variant}, --hover, --bg)); + background-color: fn.color((--#{$variant}, --hover, --bg)); + box-shadow: fn.color((--#{$variant}, --hover, --shadow)); + color: fn.color((--#{$variant}, --hover, --label)); } &:active { - border-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); - background-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); - box-shadow: iro.props-get((--colors, --#{$variant}, --active, --shadow)); - color: iro.props-get((--colors, --#{$variant}, --active, --label)); + border-color: fn.color((--#{$variant}, --active, --bg)); + background-color: fn.color((--#{$variant}, --active, --bg)); + box-shadow: fn.color((--#{$variant}, --active, --shadow)); + color: fn.color((--#{$variant}, --active, --label)); } } @include iro.bem-modifier('outline') { background-color: transparent; box-shadow: none; - color: iro.props-get((--colors, --#{$variant}, --outline-label)); + color: fn.color((--#{$variant}, --outline-label)); } } @@ -38,81 +39,84 @@ --padding-y: .5rem, --rounding: 10em, ), + ), 'dims'); + + @include iro.props-store(( --colors: ( --any: ( --disabled: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --label: iro.props-get(--colors --fg-hi3, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --label: fn.color(--fg-hi3, $global: true), --shadow: 0 0 0 0 transparent, ), --key-focus: ( --bg: transparent, - --label: iro.props-get(--colors --accent --primary-lo2, $global: true), - --border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --label: fn.color(--accent --primary-lo2, $global: true), + --border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), ), --accent: ( - --bg: iro.props-get(--colors --accent --primary, $global: true), - --label: iro.props-get(--colors --accent --primary-fg, $global: true), - --outline-label: iro.props-get(--colors --accent --primary-lo, $global: true), + --bg: fn.color(--accent --primary, $global: true), + --label: fn.color(--accent --primary-fg, $global: true), + --outline-label: fn.color(--accent --primary-lo, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: iro.props-get(--colors --accent --primary-lo, $global: true), - --label: iro.props-get(--colors --accent --primary-fg, $global: true), + --bg: fn.color(--accent --primary-lo, $global: true), + --label: fn.color(--accent --primary-fg, $global: true), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: iro.props-get(--colors --accent --primary-lo2, $global: true), - --label: iro.props-get(--colors --accent --primary-fg, $global: true), + --bg: fn.color(--accent --primary-lo2, $global: true), + --label: fn.color(--accent --primary-fg, $global: true), --shadow: 0 0 0 0 transparent, ), ), --primary: ( - --bg: iro.props-get(--colors --fg, $global: true), - --label: iro.props-get(--colors --bg-hi2, $global: true), - --outline-label: iro.props-get(--colors --fg, $global: true), + --bg: fn.color(--fg, $global: true), + --label: fn.color(--bg-hi2, $global: true), + --outline-label: fn.color(--fg, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: iro.props-get(--colors --fg-lo, $global: true), - --label: iro.props-get(--colors --bg-hi2, $global: true), + --bg: fn.color(--fg-lo, $global: true), + --label: fn.color(--bg-hi2, $global: true), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: iro.props-get(--colors --fg-lo, $global: true), - --label: iro.props-get(--colors --bg-hi2, $global: true), + --bg: fn.color(--fg-lo, $global: true), + --label: fn.color(--bg-hi2, $global: true), --shadow: 0 0 0 0 transparent, ), ), --secondary: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --label: iro.props-get(--colors --fg, $global: true), - --outline-label: iro.props-get(--colors --fg, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --label: fn.color(--fg, $global: true), + --outline-label: fn.color(--fg, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: iro.props-get(--colors --obj, $global: true), - --label: iro.props-get(--colors --fg-lo, $global: true), + --bg: fn.color(--obj, $global: true), + --label: fn.color(--fg-lo, $global: true), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: iro.props-get(--colors --obj-lo, $global: true), - --label: iro.props-get(--colors --fg-lo, $global: true), + --bg: fn.color(--obj-lo, $global: true), + --label: fn.color(--fg-lo, $global: true), --shadow: 0 0 0 0 transparent, ), ), ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { @include typography.set-font(vars.$font--main, (weight: 500)); display: inline-block; - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + padding: fn.dim(--padding-y) fn.dim(--padding-x); border: 2px solid transparent; - border-radius: iro.props-get(--dims --rounding); + border-radius: fn.dim(--rounding); line-height: 1; text-align: center; text-decoration: none; @@ -138,26 +142,26 @@ @include iro.bem-at-theme('keyboard') { &:focus { - border-color: iro.props-get(--colors --any --key-focus --border); - background-color: iro.props-get(--colors --any --key-focus --bg); - box-shadow: iro.props-get(--colors --any --key-focus --shadow); - color: iro.props-get(--colors --any --key-focus --label); + border-color: fn.color(--any --key-focus --border); + background-color: fn.color(--any --key-focus --bg); + box-shadow: fn.color(--any --key-focus --shadow); + color: fn.color(--any --key-focus --label); } } @include iro.bem-is('disabled') { - border-color: iro.props-get(--colors --any --disabled --bg); - background-color: iro.props-get(--colors --any --disabled --bg); - box-shadow: iro.props-get(--colors --any --disabled --shadow); - color: iro.props-get(--colors --any --disabled --label); + border-color: fn.color(--any --disabled --bg); + background-color: fn.color(--any --disabled --bg); + box-shadow: fn.color(--any --disabled --shadow); + color: fn.color(--any --disabled --label); @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { &:hover, &:active { - border-color: iro.props-get(--colors --any --disabled --bg); - background-color: iro.props-get(--colors --any --disabled --bg); - box-shadow: iro.props-get(--colors --any --disabled --shadow); - color: iro.props-get(--colors --any --disabled --label); + border-color: fn.color(--any --disabled --bg); + background-color: fn.color(--any --disabled --bg); + box-shadow: fn.color(--any --disabled --shadow); + color: fn.color(--any --disabled --label); } } diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 587321b..360fa1d 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -1,60 +1,64 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('checkbox') { @include iro.props-store(( --dims: ( --size: iro.fn-px-to-rem(14px), --label-gap: .6rem, - --border-width: iro.props-get(--dims --border-width --medium, $global: true), + --border-width: fn.dim(--border-width --medium, $global: true), --padding-x: .3rem, --padding-y: .3rem, - --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), + --margin-right: fn.dim(--spacing --x --md, $global: true), ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --box-border: iro.props-get(--colors --fg-hi, $global: true), - --box-bg: iro.props-get(--colors --bg-hi, $global: true), + --box-border: fn.color(--fg-hi, $global: true), + --box-bg: fn.color(--bg-hi, $global: true), --hover: ( - --label: iro.props-get(--colors --fg-lo, $global: true), - --box-border: iro.props-get(--colors --fg, $global: true), + --label: fn.color(--fg-lo, $global: true), + --box-border: fn.color(--fg, $global: true), ), --accent: ( - --box-border: iro.props-get(--colors --accent --primary, $global: true), + --box-border: fn.color(--accent --primary, $global: true), --hover: ( - --box-border: iro.props-get(--colors --accent --primary-lo, $global: true), + --box-border: fn.color(--accent --primary-lo, $global: true), ), ), --key-focus: ( - --label: iro.props-get(--colors --focus --text, $global: true), - --box-border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --label: fn.color(--focus --text, $global: true), + --box-border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), --disabled: ( - --label: iro.props-get(--colors --fg-hi3, $global: true), - --box-border: iro.props-get(--colors --obj-lo, $global: true), - --box-bg: iro.props-get(--colors --bg-hi, $global: true), + --label: fn.color(--fg-hi3, $global: true), + --box-border: fn.color(--obj-lo, $global: true), + --box-bg: fn.color(--bg-hi, $global: true), ) ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { display: inline-flex; position: relative; align-items: flex-start; - margin-right: calc(-1 * #{iro.props-get(--dims --padding-x)} + #{iro.props-get(--dims --margin-right)}); - margin-left: calc(-1 * #{iro.props-get(--dims --padding-x)}); - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values + margin-right: calc(-1 * #{fn.dim(--padding-x)} + #{fn.dim(--margin-right)}); + margin-left: calc(-1 * #{fn.dim(--padding-x)}); + padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values @include iro.bem-elem('box') { display: block; position: relative; flex: 0 0 auto; - width: iro.props-get(--dims --size); - height: iro.props-get(--dims --size); - margin-top: calc(.5 * (#{$line-height * 1em} - #{iro.props-get(--dims --size)})); - border-radius: iro.props-get(--dims --border-width); - background-color: iro.props-get(--colors --box-border); + width: fn.dim(--size); + height: fn.dim(--size); + margin-top: calc(.5 * (#{$line-height * 1em} - #{fn.dim(--size)})); + border-radius: fn.dim(--border-width); + background-color: fn.color(--box-border); &::before, &::after { @@ -65,27 +69,27 @@ &::before { z-index: 2; - top: iro.props-get(--dims --border-width); - left: iro.props-get(--dims --border-width); - width: calc(iro.props-get(--dims --size) - 2 * iro.props-get(--dims --border-width)); - height: calc(iro.props-get(--dims --size) - 2 * iro.props-get(--dims --border-width)); + top: fn.dim(--border-width); + left: fn.dim(--border-width); + width: calc(fn.dim(--size) - 2 * fn.dim(--border-width)); + height: calc(fn.dim(--size) - 2 * fn.dim(--border-width)); transition: transform .2s ease; - background-color: iro.props-get(--colors --box-bg); + background-color: fn.color(--box-bg); } &::after { z-index: 3; - top: calc(.5 * #{iro.props-get(--dims --size)} - 1px); - left: calc(1.5 * #{iro.props-get(--dims --border-width)}); + top: calc(.5 * #{fn.dim(--size)} - 1px); + left: calc(1.5 * #{fn.dim(--border-width)}); box-sizing: border-box; - width: calc(iro.props-get(--dims --size) - 3 * iro.props-get(--dims --border-width)); + width: calc(fn.dim(--size) - 3 * fn.dim(--border-width)); height: 0; transform: scale(0); transition: transform .2s ease; border-width: 0 2px 2px 0; border-style: solid; border-radius: 2px; - border-color: iro.props-get(--colors --box-bg); + border-color: fn.color(--box-bg); } } @@ -93,20 +97,20 @@ display: block; position: absolute; z-index: 2; - top: calc(1 * iro.props-get(--dims --border-width)); - left: calc(1 * iro.props-get(--dims --border-width)); - width: calc(100% - 2 * iro.props-get(--dims --border-width)); - height: calc(100% - 2 * iro.props-get(--dims --border-width)); + top: calc(1 * fn.dim(--border-width)); + left: calc(1 * fn.dim(--border-width)); + width: calc(100% - 2 * fn.dim(--border-width)); + height: calc(100% - 2 * fn.dim(--border-width)); transform: scale(0); transform-origin: 40% 90%; transition: transform .2s ease; stroke-width: iro.fn-px-to-rem(3px); - color: iro.props-get(--colors --box-bg); + color: fn.color(--box-bg); } @include iro.bem-elem('label') { align-self: baseline; - margin-left: iro.props-get(--dims --label-gap); + margin-left: fn.dim(--label-gap); } @include iro.bem-elem('native') { @@ -122,11 +126,11 @@ &:hover { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --hover --label); + color: fn.color(--hover --label); } @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --hover --box-border); + background-color: fn.color(--hover --box-border); } } @@ -160,14 +164,14 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --disabled --label); + color: fn.color(--disabled --label); } @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --disabled --box-border); + background-color: fn.color(--disabled --box-border); &::before { - background-color: iro.props-get(--colors --disabled --box-bg); + background-color: fn.color(--disabled --box-bg); } } } @@ -175,12 +179,12 @@ @include iro.bem-at-theme('keyboard') { &:focus { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --key-focus --label); + color: fn.color(--key-focus --label); } @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --key-focus --box-border); - box-shadow: iro.props-get(--colors --key-focus --shadow); + background-color: fn.color(--key-focus --box-border); + box-shadow: fn.color(--key-focus --shadow); } } } @@ -190,46 +194,46 @@ @include iro.bem-elem('native') { &:checked { @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --accent --box-border); + background-color: fn.color(--accent --box-border); } &:hover { @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --accent --hover --box-border); + background-color: fn.color(--accent --hover --box-border); } } } &:indeterminate { @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --accent --box-border); + background-color: fn.color(--accent --box-border); } &:hover { @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --accent --hover --box-border); + background-color: fn.color(--accent --hover --box-border); } } } &:disabled { @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --disabled --box-border); + background-color: fn.color(--disabled --box-border); &::before { - background-color: iro.props-get(--colors --disabled --box-bg); + background-color: fn.color(--disabled --box-bg); } } &:checked { @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --disabled --box-border); + background-color: fn.color(--disabled --box-border); } } &:indeterminate { @include iro.bem-sibling-elem('box') { - background-color: iro.props-get(--colors --disabled --box-border); + background-color: fn.color(--disabled --box-border); } } } diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index d0bc6ad..144afad 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,34 +1,38 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('field-label') { @include iro.props-store(( --dims: ( - --spacing-x: iro.props-get(--dims --spacing --x --sm, $global: true), - --spacing-y: iro.props-get(--dims --spacing --y --xs, $global: true), - --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), - --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true), + --spacing-x: fn.dim(--spacing --x --sm, $global: true), + --spacing-y: fn.dim(--spacing --y --xs, $global: true), + --label-font-size: fn.dim(--font-size --sm, $global: true), + --hint-font-size: fn.dim(--font-size --sm, $global: true), ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --label: iro.props-get(--colors --fg-hi, $global: true), - --hint: iro.props-get(--colors --fg, $global: true), - --error-hint: iro.props-get(--colors --accent --error, $global: true), - --disabled: iro.props-get(--colors --fg-hi3, $global: true), + --label: fn.color(--fg-hi, $global: true), + --hint: fn.color(--fg, $global: true), + --error-hint: fn.color(--accent --error, $global: true), + --disabled: fn.color(--fg-hi3, $global: true), ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { display: inline-block; @include iro.bem-elem('label') { display: block; - padding-right: iro.props-get(--dims --spacing-x); - color: iro.props-get(--colors --label); - font-size: iro.props-get(--dims --label-font-size); + padding-right: fn.dim(--spacing-x); + color: fn.color(--label); + font-size: fn.dim(--label-font-size); font-weight: 400; line-height: 1.3; @include iro.bem-next-elem('content') { - margin-top: iro.props-get(--dims --spacing-y); + margin-top: fn.dim(--spacing-y); } } @@ -38,20 +42,20 @@ @include iro.bem-elem('hint') { display: block; - margin-top: iro.props-get(--dims --spacing-y); - color: iro.props-get(--colors --hint); - font-size: iro.props-get(--dims --hint-font-size); + margin-top: fn.dim(--spacing-y); + color: fn.color(--hint); + font-size: fn.dim(--hint-font-size); } @include iro.bem-is('invalid') { @include iro.bem-elem('hint') { - color: iro.props-get(--colors --error-hint); + color: fn.color(--error-hint); } } @include iro.bem-is('disabled') { @include iro.bem-elem('label', 'hint') { - color: iro.props-get(--colors --disabled); + color: fn.color(--disabled); } } diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index a0ce052..393fe14 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,4 +1,5 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @use '../vars'; @use '../mixins/typography'; @@ -6,61 +7,64 @@ @include iro.props-store(( --dims: ( --in-page-margin: ( - --top: iro.props-get(--dims --spacing --y --lg, $global: true), - --top-sibling: iro.props-get(--dims --spacing --y --md, $global: true), - --bottom: iro.props-get(--dims --spacing --y --sm, $global: true), + --top: fn.dim(--spacing --y --lg, $global: true), + --top-sibling: fn.dim(--spacing --y --md, $global: true), + --bottom: fn.dim(--spacing --y --sm, $global: true), ), ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --light: iro.props-get(--colors --fg-hi, $global: true), - --strong: iro.props-get(--colors --fg-lo, $global: true), + --light: fn.color(--fg-hi, $global: true), + --strong: fn.color(--fg-lo, $global: true), ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { @include typography.set-font(vars.$font--headline); display: block; - margin-top: iro.props-get(--dims --in-page-margin --top); + margin-top: fn.dim(--in-page-margin --top); margin-bottom: 0; & + & { - margin-top: iro.props-get(--dims --in-page-margin --top-sibling); + margin-top: fn.dim(--in-page-margin --top-sibling); } @include iro.bem-modifier('xxl') { - color: iro.props-get(--colors --strong); - font-size: iro.props-get(--dims --font-size --xxxl, $global: true); + color: fn.color(--strong); + font-size: fn.dim(--font-size --xxxl, $global: true); } @include iro.bem-modifier('xl') { - color: iro.props-get(--colors --strong); - font-size: iro.props-get(--dims --font-size --xxl, $global: true); + color: fn.color(--strong); + font-size: fn.dim(--font-size --xxl, $global: true); } @include iro.bem-modifier('lg') { - color: iro.props-get(--colors --strong); - font-size: iro.props-get(--dims --font-size --xl, $global: true); + color: fn.color(--strong); + font-size: fn.dim(--font-size --xl, $global: true); } @include iro.bem-modifier('md') { - color: iro.props-get(--colors --strong); - font-size: iro.props-get(--dims --font-size --lg, $global: true); + color: fn.color(--strong); + font-size: fn.dim(--font-size --lg, $global: true); } @include iro.bem-modifier('sm') { @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); - color: iro.props-get(--colors --strong); - font-size: iro.props-get(--dims --font-size --md, $global: true); + color: fn.color(--strong); + font-size: fn.dim(--font-size --md, $global: true); font-weight: 500; } @include iro.bem-modifier('xs') { @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); - color: iro.props-get(--colors --light); - font-size: iro.props-get(--dims --font-size --xs, $global: true); + color: fn.color(--light); + font-size: fn.dim(--font-size --xs, $global: true); font-weight: 500; text-transform: uppercase; } diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 213b7c4..fd821d3 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -1,61 +1,65 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('radio') { @include iro.props-store(( --dims: ( --diameter: iro.fn-px-to-rem(15px), --label-gap: .6rem, - --border-width: iro.props-get(--dims --border-width --medium, $global: true), + --border-width: fn.dim(--border-width --medium, $global: true), --padding-x: .3rem, --padding-y: .3rem, - --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), + --margin-right: fn.dim(--spacing --x --md, $global: true), ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --circle-border: iro.props-get(--colors --fg-hi, $global: true), - --circle-bg: iro.props-get(--colors --bg-hi, $global: true), + --circle-border: fn.color(--fg-hi, $global: true), + --circle-bg: fn.color(--bg-hi, $global: true), --hover: ( - --label: iro.props-get(--colors --fg-lo, $global: true), - --circle-border: iro.props-get(--colors --fg, $global: true), + --label: fn.color(--fg-lo, $global: true), + --circle-border: fn.color(--fg, $global: true), ), --accent: ( - --circle-border: iro.props-get(--colors --accent --primary, $global: true), + --circle-border: fn.color(--accent --primary, $global: true), --hover: ( - --circle-border: iro.props-get(--colors --accent --primary-lo, $global: true), + --circle-border: fn.color(--accent --primary-lo, $global: true), ), ), --key-focus: ( - --label: iro.props-get(--colors --focus --text, $global: true), - --circle-border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --label: fn.color(--focus --text, $global: true), + --circle-border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), --disabled: ( - --label: iro.props-get(--colors --fg-hi3, $global: true), - --circle-border: iro.props-get(--colors --obj-lo, $global: true), - --circle-bg: iro.props-get(--colors --bg-hi, $global: true), + --label: fn.color(--fg-hi3, $global: true), + --circle-border: fn.color(--obj-lo, $global: true), + --circle-bg: fn.color(--bg-hi, $global: true), ) ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { display: inline-flex; position: relative; align-items: flex-start; - margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); - margin-left: calc(-1 * iro.props-get(--dims --padding-x)); - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); + margin-left: calc(-1 * fn.dim(--padding-x)); + padding: fn.dim(--padding-y) fn.dim(--padding-x); @include iro.bem-elem('circle') { display: block; position: relative; box-sizing: border-box; flex: 0 0 auto; - width: iro.props-get(--dims --diameter); - height: iro.props-get(--dims --diameter); - margin-top: calc(.5 * (#{$line-height * 1em} - #{iro.props-get(--dims --diameter)})); + width: fn.dim(--diameter); + height: fn.dim(--diameter); + margin-top: calc(.5 * (#{$line-height * 1em} - #{fn.dim(--diameter)})); border-radius: 2em; - background-color: iro.props-get(--colors --circle-border); + background-color: fn.color(--circle-border); &::after { content: ''; @@ -63,19 +67,19 @@ position: absolute; z-index: 10; top: 50%; - left: iro.props-get(--dims --border-width); - width: calc(iro.props-get(--dims --diameter) - 2 * iro.props-get(--dims --border-width)); - height: calc(iro.props-get(--dims --diameter) - 2 * iro.props-get(--dims --border-width)); + left: fn.dim(--border-width); + width: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width)); + height: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width)); transform: translateY(-50%); transition: transform .2s ease; - border-radius: iro.props-get(--dims --diameter); - background-color: iro.props-get(--colors --circle-bg); + border-radius: fn.dim(--diameter); + background-color: fn.color(--circle-bg); } } @include iro.bem-elem('label') { align-self: baseline; - margin-left: iro.props-get(--dims --label-gap); + margin-left: fn.dim(--label-gap); } @include iro.bem-elem('native') { @@ -91,11 +95,11 @@ &:hover { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --hover --label); + color: fn.color(--hover --label); } @include iro.bem-sibling-elem('circle') { - background-color: iro.props-get(--colors --hover --circle-border); + background-color: fn.color(--hover --circle-border); } } @@ -109,14 +113,14 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --disabled --label); + color: fn.color(--disabled --label); } @include iro.bem-sibling-elem('circle') { - background-color: iro.props-get(--colors --disabled --circle-border); + background-color: fn.color(--disabled --circle-border); &::after { - background-color: iro.props-get(--colors --disabled --circle-bg); + background-color: fn.color(--disabled --circle-bg); } } } @@ -124,12 +128,12 @@ @include iro.bem-at-theme('keyboard') { &:focus { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --key-focus --label); + color: fn.color(--key-focus --label); } @include iro.bem-sibling-elem('circle') { - background-color: iro.props-get(--colors --key-focus --circle-border); - box-shadow: iro.props-get(--colors --key-focus --shadow); + background-color: fn.color(--key-focus --circle-border); + box-shadow: fn.color(--key-focus --shadow); } } } @@ -139,28 +143,28 @@ @include iro.bem-elem('native') { &:checked { @include iro.bem-sibling-elem('circle') { - background-color: iro.props-get(--colors --accent --circle-border); + background-color: fn.color(--accent --circle-border); } &:hover { @include iro.bem-sibling-elem('circle') { - background-color: iro.props-get(--colors --accent --hover --circle-border); + background-color: fn.color(--accent --hover --circle-border); } } } &:disabled { @include iro.bem-sibling-elem('circle') { - background-color: iro.props-get(--colors --disabled --circle-border); + background-color: fn.color(--disabled --circle-border); &::after { - background-color: iro.props-get(--colors --disabled --circle-bg); + background-color: fn.color(--disabled --circle-bg); } } &:checked { @include iro.bem-sibling-elem('circle') { - background-color: iro.props-get(--colors --disabled --circle-border); + background-color: fn.color(--disabled --circle-border); } } } diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss index bfd1240..b0679ee 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_rule.scss @@ -1,54 +1,58 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('rule') { @include iro.props-store(( --dims: ( - --margin-y: iro.props-get(--dims --spacing --y --xs, $global: true), + --margin-y: fn.dim(--spacing --y --xs, $global: true), --strong: ( - --border-width: iro.props-get(--dims --border-width --thick, $global: true), - --label-font-size: iro.props-get(--dims --font-size --md, $global: true), + --border-width: fn.dim(--border-width --thick, $global: true), + --label-font-size: fn.dim(--font-size --md, $global: true), ), --medium: ( - --border-width: iro.props-get(--dims --border-width --medium, $global: true), - --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), + --border-width: fn.dim(--border-width --medium, $global: true), + --label-font-size: fn.dim(--font-size --sm, $global: true), ), --faint: ( - --border-width: iro.props-get(--dims --border-width --thin, $global: true), - --label-font-size: iro.props-get(--dims --font-size --xs, $global: true), + --border-width: fn.dim(--border-width --thin, $global: true), + --label-font-size: fn.dim(--font-size --xs, $global: true), ), ), + ), 'dims'); + + @include iro.props-store(( --colors: ( --strong: ( - --bg: iro.props-get(--colors --fg, $global: true), - --label: iro.props-get(--colors --fg, $global: true), + --bg: fn.color(--fg, $global: true), + --label: fn.color(--fg, $global: true), ), --medium: ( - --bg: iro.props-get(--colors --obj, $global: true), - --label: iro.props-get(--colors --fg-hi, $global: true), + --bg: fn.color(--obj, $global: true), + --label: fn.color(--fg-hi, $global: true), ), --faint: ( - --bg: iro.props-get(--colors --obj, $global: true), - --label: iro.props-get(--colors --fg-hi2, $global: true), + --bg: fn.color(--obj, $global: true), + --label: fn.color(--fg-hi2, $global: true), ), ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { display: block; - height: iro.props-get(--dims --strong --border-width); - margin-top: iro.props-get(--dims --margin-y); - margin-bottom: iro.props-get(--dims --margin-y); - background-color: iro.props-get(--colors --strong --bg); + height: fn.dim(--strong --border-width); + margin-top: fn.dim(--margin-y); + margin-bottom: fn.dim(--margin-y); + background-color: fn.color(--strong --bg); @include iro.bem-modifier('medium') { - height: iro.props-get(--dims --medium --border-width); - background-color: iro.props-get(--colors --medium --bg); + height: fn.dim(--medium --border-width); + background-color: fn.color(--medium --bg); } @include iro.bem-modifier('faint') { - height: iro.props-get(--dims --faint --border-width); - background-color: iro.props-get(--colors --faint --bg); + height: fn.dim(--faint --border-width); + background-color: fn.color(--faint --bg); } @include iro.bem-modifier('labelled') { @@ -66,7 +70,7 @@ flex: 1 1 auto; width: 100%; height: 3px; - background-color: iro.props-get(--colors --strong --bg); + background-color: fn.color(--strong --bg); } &::before { @@ -79,8 +83,8 @@ @include iro.bem-elem('label') { flex: 0 0 auto; - color: iro.props-get(--colors --strong --label); - font-size: iro.props-get(--dims --strong --label-font-size); + color: fn.color(--strong --label); + font-size: fn.dim(--strong --label-font-size); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; @@ -90,12 +94,12 @@ &::before, &::after { height: 2px; - background-color: iro.props-get(--colors --medium --bg); + background-color: fn.color(--medium --bg); } @include iro.bem-elem('label') { - color: iro.props-get(--colors --medium --label); - font-size: iro.props-get(--dims --medium --label-font-size); + color: fn.color(--medium --label); + font-size: fn.dim(--medium --label-font-size); font-weight: 500; } } @@ -104,12 +108,12 @@ &::before, &::after { height: 1px; - background-color: iro.props-get(--colors --faint --bg); + background-color: fn.color(--faint --bg); } @include iro.bem-elem('label') { - color: iro.props-get(--colors --faint --label); - font-size: iro.props-get(--dims --faint --label-font-size); + color: fn.color(--faint --label); + font-size: fn.dim(--faint --label-font-size); font-weight: 500; } } diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 7d5d16d..0fb95f1 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -1,4 +1,5 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('switch') { @include iro.props-store(( @@ -6,61 +7,64 @@ --width: iro.fn-px-to-rem(26px), --height: iro.fn-px-to-rem(15px), --label-gap: .6rem, - --border-width: iro.props-get(--dims --border-width --medium, $global: true), + --border-width: fn.dim(--border-width --medium, $global: true), --padding-x: .3rem, --padding-y: .3rem, - --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), + --margin-right: fn.dim(--spacing --x --md, $global: true), ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --track-bg: iro.props-get(--colors --obj, $global: true), - --handle-border: iro.props-get(--colors --fg-hi, $global: true), - --handle-bg: iro.props-get(--colors --bg-hi, $global: true), + --track-bg: fn.color(--obj, $global: true), + --handle-border: fn.color(--fg-hi, $global: true), + --handle-bg: fn.color(--bg-hi, $global: true), --hover: ( - --label: iro.props-get(--colors --fg-lo, $global: true), - --handle-border: iro.props-get(--colors --fg, $global: true), + --label: fn.color(--fg-lo, $global: true), + --handle-border: fn.color(--fg, $global: true), ), --accent: ( - --handle-border: iro.props-get(--colors --accent --primary, $global: true), + --handle-border: fn.color(--accent --primary, $global: true), --hover: ( - --handle-border: iro.props-get(--colors --accent --primary-lo, $global: true), + --handle-border: fn.color(--accent --primary-lo, $global: true), ), ), --key-focus: ( - --label: iro.props-get(--colors --focus --text, $global: true), - --track-bg: iro.props-get(--colors --focus --fill, $global: true), - --handle-border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --label: fn.color(--focus --text, $global: true), + --track-bg: fn.color(--focus --fill, $global: true), + --handle-border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), --disabled: ( - --label: iro.props-get(--colors --fg-hi3, $global: true), - --track-bg: iro.props-get(--colors --obj, $global: true), - --handle-border: iro.props-get(--colors --obj-lo, $global: true), - --handle-bg: iro.props-get(--colors --bg-hi, $global: true), + --label: fn.color(--fg-hi3, $global: true), + --track-bg: fn.color(--obj, $global: true), + --handle-border: fn.color(--obj-lo, $global: true), + --handle-bg: fn.color(--bg-hi, $global: true), ) ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { display: inline-flex; position: relative; align-items: flex-start; - margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); - margin-left: calc(-1 * iro.props-get(--dims --padding-x)); - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values + margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); + margin-left: calc(-1 * fn.dim(--padding-x)); + padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values @include iro.bem-elem('indicator') { display: block; position: relative; box-sizing: border-box; flex: 0 0 auto; - width: iro.props-get(--dims --width); - height: iro.props-get(--dims --height); - margin-top: calc(.5 * ($line-height * 1em - iro.props-get(--dims --height))); + width: fn.dim(--width); + height: fn.dim(--height); + margin-top: calc(.5 * ($line-height * 1em - fn.dim(--height))); transition: background-color .2s ease; border-radius: 2em; - background-color: iro.props-get(--colors --track-bg); + background-color: fn.color(--track-bg); &::after { content: ''; @@ -69,19 +73,19 @@ z-index: 10; top: 50%; left: 0; - width: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); - height: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); + width: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); + height: calc(fn.dim(--height) - 2 * fn.dim(--border-width)); transform: translateY(-50%); transition: left .2s ease; - border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --handle-border); - border-radius: iro.props-get(--dims --width); - background-color: iro.props-get(--colors --handle-bg); + border: fn.dim(--border-width) solid fn.color(--handle-border); + border-radius: fn.dim(--width); + background-color: fn.color(--handle-bg); } } @include iro.bem-elem('label') { align-self: baseline; - margin-left: iro.props-get(--dims --label-gap); + margin-left: fn.dim(--label-gap); } @include iro.bem-elem('native') { @@ -97,32 +101,32 @@ &:hover { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --hover --label); + color: fn.color(--hover --label); } @include iro.bem-sibling-elem('indicator') { &::after { - border-color: iro.props-get(--colors --hover --handle-border); + border-color: fn.color(--hover --handle-border); } } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --handle-border); + background-color: fn.color(--handle-border); &::after { - left: calc(#{iro.props-get(--dims --width)} - #{iro.props-get(--dims --height)} + .5px); - border-color: iro.props-get(--colors --handle-border); + left: calc(#{fn.dim(--width)} - #{fn.dim(--height)} + .5px); + border-color: fn.color(--handle-border); } } &:hover { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --hover --handle-border); + background-color: fn.color(--hover --handle-border); &::after { - border-color: iro.props-get(--colors --hover --handle-border); + border-color: fn.color(--hover --handle-border); } } } @@ -130,24 +134,24 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --disabled --label); + color: fn.color(--disabled --label); } @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --disabled --track-bg); + background-color: fn.color(--disabled --track-bg); &::after { - border-color: iro.props-get(--colors --disabled --handle-border); - background-color: iro.props-get(--colors --disabled --handle-bg); + border-color: fn.color(--disabled --handle-border); + background-color: fn.color(--disabled --handle-bg); } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --disabled --handle-border); + background-color: fn.color(--disabled --handle-border); &::after { - border-color: iro.props-get(--colors --disabled --handle-border); + border-color: fn.color(--disabled --handle-border); } } } @@ -156,19 +160,19 @@ @include iro.bem-at-theme('keyboard') { &:focus { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --key-focus --label); + color: fn.color(--key-focus --label); } @include iro.bem-sibling-elem('indicator') { &::after { - border-color: iro.props-get(--colors --key-focus --handle-border); - box-shadow: iro.props-get(--colors --key-focus --shadow); + border-color: fn.color(--key-focus --handle-border); + box-shadow: fn.color(--key-focus --shadow); } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --key-focus --track-bg); + background-color: fn.color(--key-focus --track-bg); } } } @@ -179,19 +183,19 @@ @include iro.bem-elem('native') { &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --accent --handle-border); + background-color: fn.color(--accent --handle-border); &::after { - border-color: iro.props-get(--colors --accent --handle-border); + border-color: fn.color(--accent --handle-border); } } &:hover { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --accent --hover --handle-border); + background-color: fn.color(--accent --hover --handle-border); &::after { - border-color: iro.props-get(--colors --accent --hover --handle-border); + border-color: fn.color(--accent --hover --handle-border); } } } @@ -199,15 +203,15 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: iro.props-get(--colors --disabled --label); + color: fn.color(--disabled --label); } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: iro.props-get(--colors --disabled --handle-border); + background-color: fn.color(--disabled --handle-border); &::after { - border-color: iro.props-get(--colors --disabled --handle-border); + border-color: fn.color(--disabled --handle-border); } } } diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 51b8c5a..aef79d7 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,32 +1,33 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @use '../vars'; @use '../mixins/typography'; @mixin invalid { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --error --border); - box-shadow: iro.props-get(--colors --error --shadow); + border-color: fn.color(--error --border); + box-shadow: fn.color(--error --shadow); } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --error --hover --border); - box-shadow: iro.props-get(--colors --error --hover --shadow); + border-color: fn.color(--error --hover --border); + box-shadow: fn.color(--error --hover --shadow); } } &:focus { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --error --focus --border); - box-shadow: iro.props-get(--colors --error --focus --shadow); + border-color: fn.color(--error --focus --border); + box-shadow: fn.color(--error --focus --shadow); } } } @mixin keyboard-focus { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --key-focus --border); - box-shadow: iro.props-get(--colors --key-focus --shadow); + border-color: fn.color(--key-focus --border); + box-shadow: fn.color(--key-focus --shadow); } } @@ -35,60 +36,63 @@ --dims: ( --padding-x: .6rem, --padding-y: .5rem, - --border-width: iro.props-get(--dims --border-width --thin, $global: true), + --border-width: fn.dim(--border-width --thin, $global: true), --border-radius: 2px, --focus: ( - --border-width: iro.props-get(--dims --border-width --medium, $global: true), + --border-width: fn.dim(--border-width --medium, $global: true), ) ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --bg: iro.props-get(--colors --bg-hi2, $global: true), - --placeholder: iro.props-get(--colors --fg-hi2, $global: true), - --text: iro.props-get(--colors --fg, $global: true), - --border: iro.props-get(--colors --obj-lo, $global: true), + --bg: fn.color(--bg-hi2, $global: true), + --placeholder: fn.color(--fg-hi2, $global: true), + --text: fn.color(--fg, $global: true), + --border: fn.color(--obj-lo, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --border: iro.props-get(--colors --fg-hi2, $global: true), + --border: fn.color(--fg-hi2, $global: true), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: iro.props-get(--colors --accent --primary, $global: true), + --border: fn.color(--accent --primary, $global: true), --shadow: 0 0 0 0 transparent, ), --key-focus: ( - --border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), --error: ( - --border: iro.props-get(--colors --accent --error-hi, $global: true), + --border: fn.color(--accent --error-hi, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --border: iro.props-get(--colors --accent --error, $global: true), + --border: fn.color(--accent --error, $global: true), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: iro.props-get(--colors --accent --error, $global: true), + --border: fn.color(--accent --error, $global: true), --shadow: 0 0 0 0 transparent, ), ), --disabled: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --placeholder: iro.props-get(--colors --fg-hi3, $global: true), - --text: iro.props-get(--colors --fg-hi3, $global: true), - --border: iro.props-get(--colors --obj-hi, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --placeholder: fn.color(--fg-hi3, $global: true), + --text: fn.color(--fg-hi3, $global: true), + --border: fn.color(--obj-hi, $global: true), --shadow: 0 0 0 0 transparent, ), ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { position: relative; min-width: 0; - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); - background-color: iro.props-get(--colors --bg); + padding: fn.dim(--padding-y) fn.dim(--padding-x); + background-color: fn.color(--bg); @include iro.bem-elem('bg') { display: block; @@ -97,9 +101,9 @@ right: 0; bottom: 0; left: 0; - border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --border); - border-radius: iro.props-get(--dims --border-radius); - box-shadow: iro.props-get(--colors --shadow); + border: fn.dim(--border-width) solid fn.color(--border); + border-radius: fn.dim(--border-radius); + box-shadow: fn.color(--shadow); pointer-events: none; } @@ -107,19 +111,19 @@ @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); width: 100%; - color: iro.props-get(--colors --text); + color: fn.color(--text); resize: none; &::placeholder { opacity: 1; - color: iro.props-get(--colors --placeholder); + color: fn.color(--placeholder); font-style: italic; } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --hover --border); - box-shadow: iro.props-get(--colors --hover --shadow); + border-color: fn.color(--hover --border); + box-shadow: fn.color(--hover --shadow); } } @@ -127,15 +131,15 @@ outline: 0; @include iro.bem-sibling-elem('bg') { - $offset: calc(iro.props-get(--dims --border-width) - iro.props-get(--dims --focus --border-width)); + $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width)); top: $offset; right: $offset; bottom: $offset; left: $offset; - border: iro.props-get(--dims --focus --border-width) solid iro.props-get(--colors --focus --border); - border-radius: calc(iro.props-get(--dims --border-radius) - $offset); - box-shadow: iro.props-get(--colors --focus --shadow); + border: fn.dim(--focus --border-width) solid fn.color(--focus --border); + border-radius: calc(fn.dim(--border-radius) - $offset); + box-shadow: fn.color(--focus --shadow); } } @@ -172,29 +176,29 @@ @include iro.bem-elem('native') { box-sizing: border-box; - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + padding: fn.dim(--padding-y) fn.dim(--padding-x); } } @include iro.bem-is('disabled') { - background-color: iro.props-get(--colors --disabled --bg); + background-color: fn.color(--disabled --bg); @include iro.bem-elem('native') { - color: iro.props-get(--colors --disabled --text); + color: fn.color(--disabled --text); &::placeholder { - color: iro.props-get(--colors --disabled --placeholder); + color: fn.color(--disabled --placeholder); } } @include iro.bem-elem('bg') { - border-color: iro.props-get(--colors --disabled --border); + border-color: fn.color(--disabled --border); } @include iro.bem-is('invalid') { @include iro.bem-elem('native') { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --disabled --border); + border-color: fn.color(--disabled --border); } } } @@ -202,7 +206,7 @@ @include iro.bem-elem('native') { &:invalid { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --disabled --border); + border-color: fn.color(--disabled --border); } } } -- cgit v1.2.3-70-g09d2