From ee3fd3a86c236441e161991a56009bb6ddae4458 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 17:26:16 +0100 Subject: Separate function for global props --- src/objects/_action-button.scss | 72 ++++++++++++++++++++--------------------- src/objects/_button.scss | 52 ++++++++++++++--------------- src/objects/_checkbox.scss | 28 ++++++++-------- src/objects/_field-label.scss | 16 ++++----- src/objects/_heading.scss | 22 ++++++------- src/objects/_radio.scss | 28 ++++++++-------- src/objects/_rule.scss | 26 +++++++-------- src/objects/_switch.scss | 34 +++++++++---------- src/objects/_text-field.scss | 34 +++++++++---------- 9 files changed, 156 insertions(+), 156 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index eefdfed..dd5cea7 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -12,80 +12,80 @@ @include iro.props-store(( --colors: ( - --bg: fn.color(--bg-hi, $global: true), - --label: fn.color(--fg, $global: true), - --border: fn.color(--obj-lo, $global: true), + --bg: fn.global-color(--bg-hi), + --label: fn.global-color(--fg), + --border: fn.global-color(--obj-lo), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: fn.color(--bg-hi2, $global: true), - --label: fn.color(--fg-lo, $global: true), - --border: fn.color(--fg-hi2, $global: true), + --bg: fn.global-color(--bg-hi2), + --label: fn.global-color(--fg-lo), + --border: fn.global-color(--fg-hi2), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: fn.color(--obj-hi, $global: true), - --label: fn.color(--fg-lo, $global: true), - --border: fn.color(--fg-hi2, $global: true), + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + --border: fn.global-color(--fg-hi2), --shadow: 0 0 0 0 transparent, ), --selected: ( - --bg: fn.color(--obj-hi, $global: true), - --label: fn.color(--fg, $global: true), - --border: fn.color(--fg-hi3, $global: true), + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg), + --border: fn.global-color(--fg-hi3), --shadow: 0 0 0 0 transparent, --hover: ( - --label: fn.color(--fg-lo, $global: true), - --border: fn.color(--fg-hi2, $global: true), + --label: fn.global-color(--fg-lo), + --border: fn.global-color(--fg-hi2), --shadow: 0 0 0 0 transparent, ), --key-focus: ( - --bg: fn.color(--obj-hi, $global: true), + --bg: fn.global-color(--obj-hi), ), ), --disabled: ( - --bg: fn.color(--obj-hi, $global: true), - --label: fn.color(--fg-hi3, $global: true), - --border: fn.color(--obj-hi, $global: true), + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-hi3), + --border: fn.global-color(--obj-hi), --shadow: 0 0 0 0 transparent, ), --key-focus: ( - --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), + --bg: fn.global-color(--bg-hi2), + --label: fn.global-color(--fg-lo), + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), ), --quiet: ( - --label: fn.color(--fg, $global: true), + --label: fn.global-color(--fg), --hover: ( - --bg: fn.color(--obj-hi, $global: true), - --label: fn.color(--fg-lo, $global: true), + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), ), --active: ( - --bg: fn.color(--obj, $global: true), - --label: fn.color(--fg-lo, $global: true), + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-lo), ), --selected: ( - --bg: fn.color(--obj-hi, $global: true), - --label: fn.color(--fg, $global: true), + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg), --hover: ( - --label: fn.color(--fg-lo, $global: true), + --label: fn.global-color(--fg-lo), ), --key-focus: ( - --bg: fn.color(--obj, $global: true), + --bg: fn.global-color(--obj), ), ), --disabled: ( - --label: fn.color(--fg-hi3, $global: true), + --label: fn.global-color(--fg-hi3), ), --key-focus: ( - --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), + --bg: fn.global-color(--bg-hi2), + --label: fn.global-color(--fg-lo), + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), ), ), ), diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 135ada0..6ae8312 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -45,65 +45,65 @@ --colors: ( --any: ( --disabled: ( - --bg: fn.color(--obj-hi, $global: true), - --label: fn.color(--fg-hi3, $global: true), + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-hi3), --shadow: 0 0 0 0 transparent, ), --key-focus: ( --bg: transparent, - --label: fn.color(--accent --primary-lo2, $global: true), - --border: fn.color(--focus --fill, $global: true), - --shadow: fn.color(--focus --shadow, $global: true), + --label: fn.global-color(--accent --primary-lo2), + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), ), ), --accent: ( - --bg: fn.color(--accent --primary, $global: true), - --label: fn.color(--accent --primary-fg, $global: true), - --outline-label: fn.color(--accent --primary-lo, $global: true), + --bg: fn.global-color(--accent --primary), + --label: fn.global-color(--accent --primary-fg), + --outline-label: fn.global-color(--accent --primary-lo), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: fn.color(--accent --primary-lo, $global: true), - --label: fn.color(--accent --primary-fg, $global: true), + --bg: fn.global-color(--accent --primary-lo), + --label: fn.global-color(--accent --primary-fg), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: fn.color(--accent --primary-lo2, $global: true), - --label: fn.color(--accent --primary-fg, $global: true), + --bg: fn.global-color(--accent --primary-lo2), + --label: fn.global-color(--accent --primary-fg), --shadow: 0 0 0 0 transparent, ), ), --primary: ( - --bg: fn.color(--fg, $global: true), - --label: fn.color(--bg-hi2, $global: true), - --outline-label: fn.color(--fg, $global: true), + --bg: fn.global-color(--fg), + --label: fn.global-color(--bg-hi2), + --outline-label: fn.global-color(--fg), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: fn.color(--fg-lo, $global: true), - --label: fn.color(--bg-hi2, $global: true), + --bg: fn.global-color(--fg-lo), + --label: fn.global-color(--bg-hi2), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: fn.color(--fg-lo, $global: true), - --label: fn.color(--bg-hi2, $global: true), + --bg: fn.global-color(--fg-lo), + --label: fn.global-color(--bg-hi2), --shadow: 0 0 0 0 transparent, ), ), --secondary: ( - --bg: fn.color(--obj-hi, $global: true), - --label: fn.color(--fg, $global: true), - --outline-label: fn.color(--fg, $global: true), + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg), + --outline-label: fn.global-color(--fg), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: fn.color(--obj, $global: true), - --label: fn.color(--fg-lo, $global: true), + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-lo), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: fn.color(--obj-lo, $global: true), - --label: fn.color(--fg-lo, $global: true), + --bg: fn.global-color(--obj-lo), + --label: fn.global-color(--fg-lo), --shadow: 0 0 0 0 transparent, ), ), diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 360fa1d..b56336a 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -6,38 +6,38 @@ --dims: ( --size: iro.fn-px-to-rem(14px), --label-gap: .6rem, - --border-width: fn.dim(--border-width --medium, $global: true), + --border-width: fn.global-dim(--border-width --medium), --padding-x: .3rem, --padding-y: .3rem, - --margin-right: fn.dim(--spacing --x --md, $global: true), + --margin-right: fn.global-dim(--spacing --x --md), ), ), 'dims'); @include iro.props-store(( --colors: ( - --box-border: fn.color(--fg-hi, $global: true), - --box-bg: fn.color(--bg-hi, $global: true), + --box-border: fn.global-color(--fg-hi), + --box-bg: fn.global-color(--bg-hi), --hover: ( - --label: fn.color(--fg-lo, $global: true), - --box-border: fn.color(--fg, $global: true), + --label: fn.global-color(--fg-lo), + --box-border: fn.global-color(--fg), ), --accent: ( - --box-border: fn.color(--accent --primary, $global: true), + --box-border: fn.global-color(--accent --primary), --hover: ( - --box-border: fn.color(--accent --primary-lo, $global: true), + --box-border: fn.global-color(--accent --primary-lo), ), ), --key-focus: ( - --label: fn.color(--focus --text, $global: true), - --box-border: fn.color(--focus --fill, $global: true), - --shadow: fn.color(--focus --shadow, $global: true), + --label: fn.global-color(--focus --text), + --box-border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), ), --disabled: ( - --label: fn.color(--fg-hi3, $global: true), - --box-border: fn.color(--obj-lo, $global: true), - --box-bg: fn.color(--bg-hi, $global: true), + --label: fn.global-color(--fg-hi3), + --box-border: fn.global-color(--obj-lo), + --box-bg: fn.global-color(--bg-hi), ) ), ), 'colors'); diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 144afad..aaa5cca 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -4,19 +4,19 @@ @include iro.props-namespace('field-label') { @include iro.props-store(( --dims: ( - --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), + --spacing-x: fn.global-dim(--spacing --x --sm), + --spacing-y: fn.global-dim(--spacing --y --xs), + --label-font-size: fn.global-dim(--font-size --sm), + --hint-font-size: fn.global-dim(--font-size --sm), ), ), 'dims'); @include iro.props-store(( --colors: ( - --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), + --label: fn.global-color(--fg-hi), + --hint: fn.global-color(--fg), + --error-hint: fn.global-color(--accent --error), + --disabled: fn.global-color(--fg-hi3), ), ), 'colors'); diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 393fe14..7d67a87 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -7,17 +7,17 @@ @include iro.props-store(( --dims: ( --in-page-margin: ( - --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), + --top: fn.global-dim(--spacing --y --lg), + --top-sibling: fn.global-dim(--spacing --y --md), + --bottom: fn.global-dim(--spacing --y --sm), ), ), ), 'dims'); @include iro.props-store(( --colors: ( - --light: fn.color(--fg-hi, $global: true), - --strong: fn.color(--fg-lo, $global: true), + --light: fn.global-color(--fg-hi), + --strong: fn.global-color(--fg-lo), ), ), 'colors'); @@ -34,29 +34,29 @@ @include iro.bem-modifier('xxl') { color: fn.color(--strong); - font-size: fn.dim(--font-size --xxxl, $global: true); + font-size: fn.global-dim(--font-size --xxxl); } @include iro.bem-modifier('xl') { color: fn.color(--strong); - font-size: fn.dim(--font-size --xxl, $global: true); + font-size: fn.global-dim(--font-size --xxl); } @include iro.bem-modifier('lg') { color: fn.color(--strong); - font-size: fn.dim(--font-size --xl, $global: true); + font-size: fn.global-dim(--font-size --xl); } @include iro.bem-modifier('md') { color: fn.color(--strong); - font-size: fn.dim(--font-size --lg, $global: true); + font-size: fn.global-dim(--font-size --lg); } @include iro.bem-modifier('sm') { @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); color: fn.color(--strong); - font-size: fn.dim(--font-size --md, $global: true); + font-size: fn.global-dim(--font-size --md); font-weight: 500; } @@ -64,7 +64,7 @@ @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); color: fn.color(--light); - font-size: fn.dim(--font-size --xs, $global: true); + font-size: fn.global-dim(--font-size --xs); font-weight: 500; text-transform: uppercase; } diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index fd821d3..178b58c 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -6,38 +6,38 @@ --dims: ( --diameter: iro.fn-px-to-rem(15px), --label-gap: .6rem, - --border-width: fn.dim(--border-width --medium, $global: true), + --border-width: fn.global-dim(--border-width --medium), --padding-x: .3rem, --padding-y: .3rem, - --margin-right: fn.dim(--spacing --x --md, $global: true), + --margin-right: fn.global-dim(--spacing --x --md), ), ), 'dims'); @include iro.props-store(( --colors: ( - --circle-border: fn.color(--fg-hi, $global: true), - --circle-bg: fn.color(--bg-hi, $global: true), + --circle-border: fn.global-color(--fg-hi), + --circle-bg: fn.global-color(--bg-hi), --hover: ( - --label: fn.color(--fg-lo, $global: true), - --circle-border: fn.color(--fg, $global: true), + --label: fn.global-color(--fg-lo), + --circle-border: fn.global-color(--fg), ), --accent: ( - --circle-border: fn.color(--accent --primary, $global: true), + --circle-border: fn.global-color(--accent --primary), --hover: ( - --circle-border: fn.color(--accent --primary-lo, $global: true), + --circle-border: fn.global-color(--accent --primary-lo), ), ), --key-focus: ( - --label: fn.color(--focus --text, $global: true), - --circle-border: fn.color(--focus --fill, $global: true), - --shadow: fn.color(--focus --shadow, $global: true), + --label: fn.global-color(--focus --text), + --circle-border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), ), --disabled: ( - --label: fn.color(--fg-hi3, $global: true), - --circle-border: fn.color(--obj-lo, $global: true), - --circle-bg: fn.color(--bg-hi, $global: true), + --label: fn.global-color(--fg-hi3), + --circle-border: fn.global-color(--obj-lo), + --circle-bg: fn.global-color(--bg-hi), ) ), ), 'colors'); diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss index b0679ee..7a9caa3 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_rule.scss @@ -4,19 +4,19 @@ @include iro.props-namespace('rule') { @include iro.props-store(( --dims: ( - --margin-y: fn.dim(--spacing --y --xs, $global: true), + --margin-y: fn.global-dim(--spacing --y --xs), --strong: ( - --border-width: fn.dim(--border-width --thick, $global: true), - --label-font-size: fn.dim(--font-size --md, $global: true), + --border-width: fn.global-dim(--border-width --thick), + --label-font-size: fn.global-dim(--font-size --md), ), --medium: ( - --border-width: fn.dim(--border-width --medium, $global: true), - --label-font-size: fn.dim(--font-size --sm, $global: true), + --border-width: fn.global-dim(--border-width --medium), + --label-font-size: fn.global-dim(--font-size --sm), ), --faint: ( - --border-width: fn.dim(--border-width --thin, $global: true), - --label-font-size: fn.dim(--font-size --xs, $global: true), + --border-width: fn.global-dim(--border-width --thin), + --label-font-size: fn.global-dim(--font-size --xs), ), ), ), 'dims'); @@ -24,16 +24,16 @@ @include iro.props-store(( --colors: ( --strong: ( - --bg: fn.color(--fg, $global: true), - --label: fn.color(--fg, $global: true), + --bg: fn.global-color(--fg), + --label: fn.global-color(--fg), ), --medium: ( - --bg: fn.color(--obj, $global: true), - --label: fn.color(--fg-hi, $global: true), + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-hi), ), --faint: ( - --bg: fn.color(--obj, $global: true), - --label: fn.color(--fg-hi2, $global: true), + --bg: fn.global-color(--obj), + --label: fn.global-color(--fg-hi2), ), ), ), 'colors'); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 0fb95f1..b75397d 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -7,41 +7,41 @@ --width: iro.fn-px-to-rem(26px), --height: iro.fn-px-to-rem(15px), --label-gap: .6rem, - --border-width: fn.dim(--border-width --medium, $global: true), + --border-width: fn.global-dim(--border-width --medium), --padding-x: .3rem, --padding-y: .3rem, - --margin-right: fn.dim(--spacing --x --md, $global: true), + --margin-right: fn.global-dim(--spacing --x --md), ), ), 'dims'); @include iro.props-store(( --colors: ( - --track-bg: fn.color(--obj, $global: true), - --handle-border: fn.color(--fg-hi, $global: true), - --handle-bg: fn.color(--bg-hi, $global: true), + --track-bg: fn.global-color(--obj), + --handle-border: fn.global-color(--fg-hi), + --handle-bg: fn.global-color(--bg-hi), --hover: ( - --label: fn.color(--fg-lo, $global: true), - --handle-border: fn.color(--fg, $global: true), + --label: fn.global-color(--fg-lo), + --handle-border: fn.global-color(--fg), ), --accent: ( - --handle-border: fn.color(--accent --primary, $global: true), + --handle-border: fn.global-color(--accent --primary), --hover: ( - --handle-border: fn.color(--accent --primary-lo, $global: true), + --handle-border: fn.global-color(--accent --primary-lo), ), ), --key-focus: ( - --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), + --label: fn.global-color(--focus --text), + --track-bg: fn.global-color(--focus --fill), + --handle-border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), ), --disabled: ( - --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), + --label: fn.global-color(--fg-hi3), + --track-bg: fn.global-color(--obj), + --handle-border: fn.global-color(--obj-lo), + --handle-bg: fn.global-color(--bg-hi), ) ), ), 'colors'); diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index aef79d7..ed96c7a 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -36,53 +36,53 @@ --dims: ( --padding-x: .6rem, --padding-y: .5rem, - --border-width: fn.dim(--border-width --thin, $global: true), + --border-width: fn.global-dim(--border-width --thin), --border-radius: 2px, --focus: ( - --border-width: fn.dim(--border-width --medium, $global: true), + --border-width: fn.global-dim(--border-width --medium), ) ), ), 'dims'); @include iro.props-store(( --colors: ( - --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), + --bg: fn.global-color(--bg-hi2), + --placeholder: fn.global-color(--fg-hi2), + --text: fn.global-color(--fg), + --border: fn.global-color(--obj-lo), --shadow: 0 0 0 0 transparent, --hover: ( - --border: fn.color(--fg-hi2, $global: true), + --border: fn.global-color(--fg-hi2), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: fn.color(--accent --primary, $global: true), + --border: fn.global-color(--accent --primary), --shadow: 0 0 0 0 transparent, ), --key-focus: ( - --border: fn.color(--focus --fill, $global: true), - --shadow: fn.color(--focus --shadow, $global: true), + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), ), --error: ( - --border: fn.color(--accent --error-hi, $global: true), + --border: fn.global-color(--accent --error-hi), --shadow: 0 0 0 0 transparent, --hover: ( - --border: fn.color(--accent --error, $global: true), + --border: fn.global-color(--accent --error), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: fn.color(--accent --error, $global: true), + --border: fn.global-color(--accent --error), --shadow: 0 0 0 0 transparent, ), ), --disabled: ( - --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), + --bg: fn.global-color(--obj-hi), + --placeholder: fn.global-color(--fg-hi3), + --text: fn.global-color(--fg-hi3), + --border: fn.global-color(--obj-hi), --shadow: 0 0 0 0 transparent, ), ), -- cgit v1.2.3-54-g00ecf