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 ++++++++++++++++++++-------------------- 1 file changed, 99 insertions(+), 95 deletions(-) (limited to 'src/objects/_action-button.scss') 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); } } } -- cgit v1.2.3-70-g09d2