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/_functions.scss | 11 +++ src/_general.scss | 21 ++--- src/_vars.scss | 191 ++++++++++++++++++++------------------- src/index.scss | 24 +++-- src/layouts/_card.scss | 3 +- src/layouts/_container.scss | 37 ++++---- src/layouts/_form.scss | 11 +-- 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 ++++++++++---------- 16 files changed, 609 insertions(+), 553 deletions(-) create mode 100644 src/_functions.scss diff --git a/src/_functions.scss b/src/_functions.scss new file mode 100644 index 0000000..c2fe4c8 --- /dev/null +++ b/src/_functions.scss @@ -0,0 +1,11 @@ +@use 'iro-sass/src/index' as iro; + +@function color($key, $tree: 'colors', $default: null, $global: false) { + $new-key: iro.fn-list-prepend($key, --colors); + @return iro.props-get($new-key, $tree, $default, $global); +} + +@function dim($key, $tree: 'dims', $default: null, $global: false) { + $new-key: iro.fn-list-prepend($key, --dims); + @return iro.props-get($new-key, $tree, $default, $global); +} diff --git a/src/_general.scss b/src/_general.scss index e03d0b3..1e7c180 100644 --- a/src/_general.scss +++ b/src/_general.scss @@ -1,5 +1,6 @@ @use 'iro-sass/src/index' as iro; @use 'mixins/typography'; +@use 'functions' as fn; @use 'vars'; html, @@ -8,12 +9,12 @@ body { } body { - @include typography.set-font(vars.$font--main, (size: iro.props-get(--dims --font-size --md))); + @include typography.set-font(vars.$font--main, (size: fn.dim(--font-size --md))); margin: 0; padding: 0; - background-color: iro.props-get(--colors --bg); - color: iro.props-get(--colors --fg); + background-color: fn.color(--bg); + color: fn.color(--fg); } h1, @@ -22,13 +23,13 @@ h3, h4, h5, h6 { - @include typography.set-font(vars.$font--main, (size: iro.props-get(--dims --font-size --md), weight: 400)); + @include typography.set-font(vars.$font--main, (size: fn.dim(--font-size --md), weight: 400)); margin: 0; } p { - margin-top: iro.props-get(--dims --paragraph --margin-top); + margin-top: fn.dim(--paragraph --margin-top); margin-bottom: 0; &:empty { @@ -38,8 +39,8 @@ p { ul, ol { - margin: iro.props-get(--dims --paragraph --margin-top) 0 0; - padding-left: iro.props-get(--dims --list --indent); + margin: fn.dim(--paragraph --margin-top) 0 0; + padding-left: fn.dim(--list --indent); } :focus { @@ -77,12 +78,12 @@ textarea { } ::selection { - background: iro.props-get(--colors --selection --bg); - color: iro.props-get(--colors --selection --fg); + background: fn.color(--selection --bg); + color: fn.color(--selection --fg); } img { &::selection { - background: iro.props-get(--colors --selection --bg-img); + background: fn.color(--selection --bg-img); } } diff --git a/src/_vars.scss b/src/_vars.scss index c315438..c79b917 100644 --- a/src/_vars.scss +++ b/src/_vars.scss @@ -1,5 +1,6 @@ @use 'iro-sass/src/index' as iro; @use 'include-media/dist/include-media' as media; +@use 'functions' as fn; iro.$vars-root-size: 16px; @@ -32,77 +33,81 @@ $line-height: map-get($font--main, line-height); // -@include iro.fn-execute { - $primary-accent-base: hsl(222, 49.8%, 52.4%); - $error-accent-base: hsl(352, 49.8%, 52.4%); - $success-accent-base: hsl(113, 49.8%, 39.6%); - - @include iro.props-store(( - --dims: ( - --spacing: ( - --base: 1.6rem, - --factors: ( - --xs: .25, - --sm: .5, - --md: 1, - --lg: 1.5, - --xl: 2, - ), - --x: ( - --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)), - --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)), - --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)), - ), - --y: ( - --xs: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xs, null)), - --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)), - --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)), - --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)), - --xl: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xl, null)), - ), +@include iro.props-store(( + --dims: ( + --spacing: ( + --base: 1.6rem, + --factors: ( + --xs: .25, + --sm: .5, + --md: 1, + --lg: 1.5, + --xl: 2, ), - - --font-size: ( - --xs: iro.fn-px-to-rem(11px), - --sm: iro.fn-px-to-rem(13px), - --md: iro.fn-px-to-rem(14px), - --lg: iro.fn-px-to-rem(16px), - --xl: iro.fn-px-to-rem(18px), - --xxl: iro.fn-px-to-rem(22px), - --xxxl: iro.fn-px-to-rem(28px), + --x: ( + --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), + --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), + --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), ), - - --border-width: ( - --thick: 4px, - --medium: 2px, - --thin: 1px, + --y: ( + --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)), + --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), + --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), + --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), + --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)), ), + ), + + --font-size: ( + --xs: iro.fn-px-to-rem(11px), + --sm: iro.fn-px-to-rem(13px), + --md: iro.fn-px-to-rem(14px), + --lg: iro.fn-px-to-rem(16px), + --xl: iro.fn-px-to-rem(18px), + --xxl: iro.fn-px-to-rem(22px), + --xxxl: iro.fn-px-to-rem(28px), + ), - --focus-outline-width: 3px, + --border-width: ( + --thick: 4px, + --medium: 2px, + --thin: 1px, + ), - --paragraph: ( - --margin-top: iro.props-get(--dims --spacing --y --sm, null), - ), + --focus-outline-width: 3px, - --list: ( - --indent: 3rem, - ), + --paragraph: ( + --margin-top: fn.dim(--spacing --y --sm, null), + ), + + --list: ( + --indent: 3rem, ), - + ), +), 'dims'); + +// + +@include iro.fn-execute { + $primary-accent-base: hsl(222, 49.8%, 52.4%); + $error-accent-base: hsl(352, 49.8%, 52.4%); + $success-accent-base: hsl(113, 49.8%, 39.6%); + + @include iro.props-store(( --colors: ( - --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background - --bg-hi: iro.props-get(--colors --gray2, null), // Lighter background - --bg: iro.props-get(--colors --gray3, null), // Background + --bg-hi2: fn.color(--gray1, null), // Lightest background + --bg-hi: fn.color(--gray2, null), // Lighter background + --bg: fn.color(--gray3, null), // Background - --obj-hi: iro.props-get(--colors --gray4, null), - --obj: iro.props-get(--colors --gray5, null), - --obj-lo: iro.props-get(--colors --gray6, null), + --obj-hi: fn.color(--gray4, null), + --obj: fn.color(--gray5, null), + --obj-lo: fn.color(--gray6, null), - --fg-hi3: iro.props-get(--colors --gray7, null), // Disabled text - --fg-hi2: iro.props-get(--colors --gray8, null), // Placeholder text - --fg-hi: iro.props-get(--colors --gray9, null), // Faint text - --fg: iro.props-get(--colors --gray10, null), // Text - --fg-lo: iro.props-get(--colors --gray11, null), // Strong text + --fg-hi3: fn.color(--gray7, null), // Disabled text + --fg-hi2: fn.color(--gray8, null), // Placeholder text + --fg-hi: fn.color(--gray9, null), // Faint text + --fg: fn.color(--gray10, null), // Text + --fg-lo: fn.color(--gray11, null), // Strong text --accent: ( --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%), @@ -113,11 +118,11 @@ $line-height: map-get($font--main, line-height); --primary-const-selection: rgba($primary-accent-base, .99), --primary-const-fg: #fff, - --primary-hi: iro.props-get(--colors --accent --primary-const-hi, null), - --primary: iro.props-get(--colors --accent --primary-const, null), - --primary-lo: iro.props-get(--colors --accent --primary-const-lo, null), - --primary-lo2: iro.props-get(--colors --accent --primary-const-lo2, null), - --primary-fg: iro.props-get(--colors --accent --primary-const-fg, null), + --primary-hi: fn.color(--accent --primary-const-hi, null), + --primary: fn.color(--accent --primary-const, null), + --primary-lo: fn.color(--accent --primary-const-lo, null), + --primary-lo2: fn.color(--accent --primary-const-lo2, null), + --primary-fg: fn.color(--accent --primary-const-fg, null), --error-hi: scale-color($error-accent-base, $lightness: 15%), --error: $error-accent-base, @@ -133,27 +138,27 @@ $line-height: map-get($font--main, line-height); ), --grayscale-accent: ( - --primary-hi: iro.props-get(--colors --fg-hi2, null), - --primary: iro.props-get(--colors --fg-hi, null), - --primary-lo: iro.props-get(--colors --fg, null), - --primary-lo2: iro.props-get(--colors --fg-lo, null), + --primary-hi: fn.color(--fg-hi2, null), + --primary: fn.color(--fg-hi, null), + --primary-lo: fn.color(--fg, null), + --primary-lo2: fn.color(--fg-lo, null), --primary-fg: #fff, ), --selection: ( - --bg: iro.props-get(--colors --accent --primary-const-selection, null), - --bg-img: iro.props-get(--colors --accent --primary-const-semi, null), - --fg: iro.props-get(--colors --accent --primary-const-fg, null), + --bg: fn.color(--accent --primary-const-selection, null), + --bg-img: fn.color(--accent --primary-const-semi, null), + --fg: fn.color(--accent --primary-const-fg, null), ), --focus: ( - --shadow: 0 0 0 iro.props-get(--dims --focus-outline-width, null) iro.props-get(--colors --accent --primary-const-semi, null), - --fill: iro.props-get(--colors --accent --primary-const, null), - --text: iro.props-get(--colors --accent --primary-const-lo, null), - --fill-text: iro.props-get(--colors --accent --primary-const-fg, null), + --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary-const-semi, null), + --fill: fn.color(--accent --primary-const, null), + --text: fn.color(--accent --primary-const-lo, null), + --fill-text: fn.color(--accent --primary-const-fg, null), ), ), - )); + ), 'colors'); @include iro.props-store(( --colors: ( @@ -169,7 +174,7 @@ $line-height: map-get($font--main, line-height); --gray10: hsl(210, 0%, 19%), // 11.78 --gray11: hsl(210, 0%, 0%), // 18.75 ) - ), 'light-palette'); + ), 'palette-light'); @include iro.props-store(( --colors: ( @@ -185,29 +190,23 @@ $line-height: map-get($font--main, line-height); --gray10: hsl(210, 0%, 22%), // 11.72 --gray11: hsl(210, 0%, 0%), // 21 ) - ), 'light-raised-palette'); + ), 'palette-light-raised'); } // @include iro.fn-execute { - @include iro.fn-execute { - @include iro.props-store(( - --colors: () - ), 'dark'); - } - - @include iro.fn-execute { - @include iro.props-store(( - --colors: () - ), 'dark-palette'); - } + @include iro.props-store(( + --colors: () + ), 'colors-dark'); - @include iro.fn-execute { - @include iro.props-store(( - --colors: () - ), 'dark-raised-palette'); - } + @include iro.props-store(( + --colors: () + ), 'palette-dark'); + + @include iro.props-store(( + --colors: () + ), 'palette-dark-raised'); } // diff --git a/src/index.scss b/src/index.scss index 1124840..63124ed 100644 --- a/src/index.scss +++ b/src/index.scss @@ -20,29 +20,35 @@ @import 'layouts/form'; :root { - @include iro.props-assign; - @include iro.props-assign('light-palette'); + @include iro.props-assign('dims'); @each $breakpoint in map-keys(media.$breakpoints) { @include media.media('<=#{$breakpoint}') { @include iro.props-assign($breakpoint); } } -} -@include iro.bem-theme('grayscale') { - @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent); + @include iro.props-assign('colors'); + @include iro.props-assign('palette-light'); + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('palette-dark'); + } } @include iro.bem-theme('raised') { - @include iro.props-assign('light-raised-palette'); - @include iro.props-assign; + @include iro.props-assign('colors'); + @include iro.props-assign('palette-light-raised'); - @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { - @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent); + @media (prefers-color-scheme: dark) { + @include iro.props-assign('palette-dark-raised'); } } +@include iro.bem-theme('grayscale') { + @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent); +} + /*@media (prefers-color-scheme: dark) { @include iro.props-assign('dark'); @include iro.props-assign('dark-palette'); diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index 037b29f..5db1a6a 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -1,5 +1,6 @@ @use 'iro-sass/src/index' as iro; @use 'include-media/dist/include-media' as media; +@use '../functions' as fn; @include iro.props-namespace('card') { @include iro.props-store(( @@ -11,7 +12,7 @@ --pad-y: iro.fn-px-to-rem(11px), ) ) - )); + ), 'dims'); @include iro.bem-layout(iro.props-namespace()) { display: flex; diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index efe5203..af5b208 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -1,5 +1,6 @@ @use 'iro-sass/src/index' as iro; @use 'include-media/dist/include-media' as media; +@use '../functions' as fn; @include iro.props-namespace('container') { @include iro.props-store(( @@ -8,16 +9,16 @@ --sm-content-width: iro.fn-px-to-rem(360px), --padding-x: 3rem, --padding-y: 3rem, - --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true), + --in-page-spacing-y: fn.dim(--spacing --y --xl, $global: true), ) - )); + ), 'dims'); @include iro.bem-layout(iro.props-namespace()) { overflow: hidden; @include iro.bem-elem('inner') { - margin-top: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true)); - margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true)); + margin-top: calc(-1 * fn.dim(--spacing --y --xl, $global: true)); + margin-bottom: calc(-1 * fn.dim(--spacing --y --xl, $global: true)); &::before, &::after { @@ -28,33 +29,33 @@ } &::before { - margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true); + margin-bottom: fn.dim(--spacing --y --xl, $global: true); } &::after { - margin-top: iro.props-get(--dims --spacing --y --xl, $global: true); + margin-top: fn.dim(--spacing --y --xl, $global: true); } } @include iro.bem-modifier('pad-x') { - padding-right: iro.props-get(--dims --padding-x); - padding-left: iro.props-get(--dims --padding-x); + padding-right: fn.dim(--padding-x); + padding-left: fn.dim(--padding-x); } @include iro.bem-modifier('pad-y') { - padding-top: iro.props-get(--dims --padding-y); - padding-bottom: iro.props-get(--dims --padding-y); + padding-top: fn.dim(--padding-y); + padding-bottom: fn.dim(--padding-y); } @include iro.bem-modifier('narrow') { - max-width: iro.props-get(--dims --content-width); + max-width: fn.dim(--content-width); margin-right: auto; margin-left: auto; @each $breakpoint in map-keys(media.$breakpoints) { @include media.media('<=#{$breakpoint}') { @include iro.bem-suffix('#{$breakpoint}-down') { - max-width: iro.props-get(--dims --content-width); + max-width: fn.dim(--content-width); margin-right: auto; margin-left: auto; } @@ -63,14 +64,14 @@ } @include iro.bem-modifier('sm-narrow') { - max-width: iro.props-get(--dims --sm-content-width); + max-width: fn.dim(--sm-content-width); margin-right: auto; margin-left: auto; @each $breakpoint in map-keys(media.$breakpoints) { @include media.media('<=#{$breakpoint}') { @include iro.bem-suffix('#{$breakpoint}-down') { - max-width: iro.props-get(--dims --sm-content-width); + max-width: fn.dim(--sm-content-width); margin-right: auto; margin-left: auto; } @@ -79,13 +80,13 @@ } @include iro.bem-modifier('themed') { - background-color: iro.props-get(--colors --bg, $global: true); - color: iro.props-get(--colors --fg, $global: true); + background-color: fn.color(--bg, $global: true); + color: fn.color(--fg, $global: true); } @include iro.bem-modifier('in-page') { - margin-top: iro.props-get(--dims --in-page-spacing-y); - margin-bottom: iro.props-get(--dims --in-page-spacing-y); + margin-top: fn.dim(--in-page-spacing-y); + margin-bottom: fn.dim(--in-page-spacing-y); } } } diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index 3c7edcb..ac54607 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -1,19 +1,20 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('form') { @include iro.props-store(( --dims: ( - --item-spacing-y: iro.props-get(--dims --spacing --y --md, $global: true), - --label-spacing-x: iro.props-get(--dims --spacing --x --md, $global: true), - --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true), + --item-spacing-y: fn.dim(--spacing --y --md, $global: true), + --label-spacing-x: fn.dim(--spacing --x --md, $global: true), + --hint-font-size: fn.dim(--font-size --sm, $global: true), ), - )); + ), 'dims'); @include iro.bem-layout(iro.props-namespace()) { display: flex; flex-direction: column; align-items: baseline; - gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x); + gap: fn.dim(--item-spacing-y) fn.dim(--label-spacing-x); @include iro.bem-modifier('labels-left', 'labels-right') { display: grid; 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