diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-06 17:26:16 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-06 17:26:16 +0100 |
| commit | ee3fd3a86c236441e161991a56009bb6ddae4458 (patch) | |
| tree | 8fd9c712528a6896f78f0c2d8f591ee1b8c5528e /src/objects | |
| parent | Improved variable structure (diff) | |
| download | iro-design-ee3fd3a86c236441e161991a56009bb6ddae4458.tar.gz iro-design-ee3fd3a86c236441e161991a56009bb6ddae4458.tar.bz2 iro-design-ee3fd3a86c236441e161991a56009bb6ddae4458.zip | |
Separate function for global props
Diffstat (limited to 'src/objects')
| -rw-r--r-- | src/objects/_action-button.scss | 72 | ||||
| -rw-r--r-- | src/objects/_button.scss | 52 | ||||
| -rw-r--r-- | src/objects/_checkbox.scss | 28 | ||||
| -rw-r--r-- | src/objects/_field-label.scss | 16 | ||||
| -rw-r--r-- | src/objects/_heading.scss | 22 | ||||
| -rw-r--r-- | src/objects/_radio.scss | 28 | ||||
| -rw-r--r-- | src/objects/_rule.scss | 26 | ||||
| -rw-r--r-- | src/objects/_switch.scss | 34 | ||||
| -rw-r--r-- | src/objects/_text-field.scss | 34 |
9 files changed, 156 insertions, 156 deletions
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 @@ | |||
| 12 | 12 | ||
| 13 | @include iro.props-store(( | 13 | @include iro.props-store(( |
| 14 | --colors: ( | 14 | --colors: ( |
| 15 | --bg: fn.color(--bg-hi, $global: true), | 15 | --bg: fn.global-color(--bg-hi), |
| 16 | --label: fn.color(--fg, $global: true), | 16 | --label: fn.global-color(--fg), |
| 17 | --border: fn.color(--obj-lo, $global: true), | 17 | --border: fn.global-color(--obj-lo), |
| 18 | --shadow: 0 0 0 0 transparent, | 18 | --shadow: 0 0 0 0 transparent, |
| 19 | 19 | ||
| 20 | --hover: ( | 20 | --hover: ( |
| 21 | --bg: fn.color(--bg-hi2, $global: true), | 21 | --bg: fn.global-color(--bg-hi2), |
| 22 | --label: fn.color(--fg-lo, $global: true), | 22 | --label: fn.global-color(--fg-lo), |
| 23 | --border: fn.color(--fg-hi2, $global: true), | 23 | --border: fn.global-color(--fg-hi2), |
| 24 | --shadow: 0 0 0 0 transparent, | 24 | --shadow: 0 0 0 0 transparent, |
| 25 | ), | 25 | ), |
| 26 | --active: ( | 26 | --active: ( |
| 27 | --bg: fn.color(--obj-hi, $global: true), | 27 | --bg: fn.global-color(--obj-hi), |
| 28 | --label: fn.color(--fg-lo, $global: true), | 28 | --label: fn.global-color(--fg-lo), |
| 29 | --border: fn.color(--fg-hi2, $global: true), | 29 | --border: fn.global-color(--fg-hi2), |
| 30 | --shadow: 0 0 0 0 transparent, | 30 | --shadow: 0 0 0 0 transparent, |
| 31 | ), | 31 | ), |
| 32 | --selected: ( | 32 | --selected: ( |
| 33 | --bg: fn.color(--obj-hi, $global: true), | 33 | --bg: fn.global-color(--obj-hi), |
| 34 | --label: fn.color(--fg, $global: true), | 34 | --label: fn.global-color(--fg), |
| 35 | --border: fn.color(--fg-hi3, $global: true), | 35 | --border: fn.global-color(--fg-hi3), |
| 36 | --shadow: 0 0 0 0 transparent, | 36 | --shadow: 0 0 0 0 transparent, |
| 37 | 37 | ||
| 38 | --hover: ( | 38 | --hover: ( |
| 39 | --label: fn.color(--fg-lo, $global: true), | 39 | --label: fn.global-color(--fg-lo), |
| 40 | --border: fn.color(--fg-hi2, $global: true), | 40 | --border: fn.global-color(--fg-hi2), |
| 41 | --shadow: 0 0 0 0 transparent, | 41 | --shadow: 0 0 0 0 transparent, |
| 42 | ), | 42 | ), |
| 43 | --key-focus: ( | 43 | --key-focus: ( |
| 44 | --bg: fn.color(--obj-hi, $global: true), | 44 | --bg: fn.global-color(--obj-hi), |
| 45 | ), | 45 | ), |
| 46 | ), | 46 | ), |
| 47 | --disabled: ( | 47 | --disabled: ( |
| 48 | --bg: fn.color(--obj-hi, $global: true), | 48 | --bg: fn.global-color(--obj-hi), |
| 49 | --label: fn.color(--fg-hi3, $global: true), | 49 | --label: fn.global-color(--fg-hi3), |
| 50 | --border: fn.color(--obj-hi, $global: true), | 50 | --border: fn.global-color(--obj-hi), |
| 51 | --shadow: 0 0 0 0 transparent, | 51 | --shadow: 0 0 0 0 transparent, |
| 52 | ), | 52 | ), |
| 53 | --key-focus: ( | 53 | --key-focus: ( |
| 54 | --bg: fn.color(--bg-hi2, $global: true), | 54 | --bg: fn.global-color(--bg-hi2), |
| 55 | --label: fn.color(--fg-lo, $global: true), | 55 | --label: fn.global-color(--fg-lo), |
| 56 | --border: fn.color(--focus --fill, $global: true), | 56 | --border: fn.global-color(--focus --fill), |
| 57 | --shadow: fn.color(--focus --shadow, $global: true), | 57 | --shadow: fn.global-color(--focus --shadow), |
| 58 | ), | 58 | ), |
| 59 | --quiet: ( | 59 | --quiet: ( |
| 60 | --label: fn.color(--fg, $global: true), | 60 | --label: fn.global-color(--fg), |
| 61 | 61 | ||
| 62 | --hover: ( | 62 | --hover: ( |
| 63 | --bg: fn.color(--obj-hi, $global: true), | 63 | --bg: fn.global-color(--obj-hi), |
| 64 | --label: fn.color(--fg-lo, $global: true), | 64 | --label: fn.global-color(--fg-lo), |
| 65 | ), | 65 | ), |
| 66 | --active: ( | 66 | --active: ( |
| 67 | --bg: fn.color(--obj, $global: true), | 67 | --bg: fn.global-color(--obj), |
| 68 | --label: fn.color(--fg-lo, $global: true), | 68 | --label: fn.global-color(--fg-lo), |
| 69 | ), | 69 | ), |
| 70 | --selected: ( | 70 | --selected: ( |
| 71 | --bg: fn.color(--obj-hi, $global: true), | 71 | --bg: fn.global-color(--obj-hi), |
| 72 | --label: fn.color(--fg, $global: true), | 72 | --label: fn.global-color(--fg), |
| 73 | 73 | ||
| 74 | --hover: ( | 74 | --hover: ( |
| 75 | --label: fn.color(--fg-lo, $global: true), | 75 | --label: fn.global-color(--fg-lo), |
| 76 | ), | 76 | ), |
| 77 | --key-focus: ( | 77 | --key-focus: ( |
| 78 | --bg: fn.color(--obj, $global: true), | 78 | --bg: fn.global-color(--obj), |
| 79 | ), | 79 | ), |
| 80 | ), | 80 | ), |
| 81 | --disabled: ( | 81 | --disabled: ( |
| 82 | --label: fn.color(--fg-hi3, $global: true), | 82 | --label: fn.global-color(--fg-hi3), |
| 83 | ), | 83 | ), |
| 84 | --key-focus: ( | 84 | --key-focus: ( |
| 85 | --bg: fn.color(--bg-hi2, $global: true), | 85 | --bg: fn.global-color(--bg-hi2), |
| 86 | --label: fn.color(--fg-lo, $global: true), | 86 | --label: fn.global-color(--fg-lo), |
| 87 | --border: fn.color(--focus --fill, $global: true), | 87 | --border: fn.global-color(--focus --fill), |
| 88 | --shadow: fn.color(--focus --shadow, $global: true), | 88 | --shadow: fn.global-color(--focus --shadow), |
| 89 | ), | 89 | ), |
| 90 | ), | 90 | ), |
| 91 | ), | 91 | ), |
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 @@ | |||
| 45 | --colors: ( | 45 | --colors: ( |
| 46 | --any: ( | 46 | --any: ( |
| 47 | --disabled: ( | 47 | --disabled: ( |
| 48 | --bg: fn.color(--obj-hi, $global: true), | 48 | --bg: fn.global-color(--obj-hi), |
| 49 | --label: fn.color(--fg-hi3, $global: true), | 49 | --label: fn.global-color(--fg-hi3), |
| 50 | --shadow: 0 0 0 0 transparent, | 50 | --shadow: 0 0 0 0 transparent, |
| 51 | ), | 51 | ), |
| 52 | --key-focus: ( | 52 | --key-focus: ( |
| 53 | --bg: transparent, | 53 | --bg: transparent, |
| 54 | --label: fn.color(--accent --primary-lo2, $global: true), | 54 | --label: fn.global-color(--accent --primary-lo2), |
| 55 | --border: fn.color(--focus --fill, $global: true), | 55 | --border: fn.global-color(--focus --fill), |
| 56 | --shadow: fn.color(--focus --shadow, $global: true), | 56 | --shadow: fn.global-color(--focus --shadow), |
| 57 | ), | 57 | ), |
| 58 | ), | 58 | ), |
| 59 | --accent: ( | 59 | --accent: ( |
| 60 | --bg: fn.color(--accent --primary, $global: true), | 60 | --bg: fn.global-color(--accent --primary), |
| 61 | --label: fn.color(--accent --primary-fg, $global: true), | 61 | --label: fn.global-color(--accent --primary-fg), |
| 62 | --outline-label: fn.color(--accent --primary-lo, $global: true), | 62 | --outline-label: fn.global-color(--accent --primary-lo), |
| 63 | --shadow: 0 0 0 0 transparent, | 63 | --shadow: 0 0 0 0 transparent, |
| 64 | 64 | ||
| 65 | --hover: ( | 65 | --hover: ( |
| 66 | --bg: fn.color(--accent --primary-lo, $global: true), | 66 | --bg: fn.global-color(--accent --primary-lo), |
| 67 | --label: fn.color(--accent --primary-fg, $global: true), | 67 | --label: fn.global-color(--accent --primary-fg), |
| 68 | --shadow: 0 0 0 0 transparent, | 68 | --shadow: 0 0 0 0 transparent, |
| 69 | ), | 69 | ), |
| 70 | --active: ( | 70 | --active: ( |
| 71 | --bg: fn.color(--accent --primary-lo2, $global: true), | 71 | --bg: fn.global-color(--accent --primary-lo2), |
| 72 | --label: fn.color(--accent --primary-fg, $global: true), | 72 | --label: fn.global-color(--accent --primary-fg), |
| 73 | --shadow: 0 0 0 0 transparent, | 73 | --shadow: 0 0 0 0 transparent, |
| 74 | ), | 74 | ), |
| 75 | ), | 75 | ), |
| 76 | --primary: ( | 76 | --primary: ( |
| 77 | --bg: fn.color(--fg, $global: true), | 77 | --bg: fn.global-color(--fg), |
| 78 | --label: fn.color(--bg-hi2, $global: true), | 78 | --label: fn.global-color(--bg-hi2), |
| 79 | --outline-label: fn.color(--fg, $global: true), | 79 | --outline-label: fn.global-color(--fg), |
| 80 | --shadow: 0 0 0 0 transparent, | 80 | --shadow: 0 0 0 0 transparent, |
| 81 | 81 | ||
| 82 | --hover: ( | 82 | --hover: ( |
| 83 | --bg: fn.color(--fg-lo, $global: true), | 83 | --bg: fn.global-color(--fg-lo), |
| 84 | --label: fn.color(--bg-hi2, $global: true), | 84 | --label: fn.global-color(--bg-hi2), |
| 85 | --shadow: 0 0 0 0 transparent, | 85 | --shadow: 0 0 0 0 transparent, |
| 86 | ), | 86 | ), |
| 87 | --active: ( | 87 | --active: ( |
| 88 | --bg: fn.color(--fg-lo, $global: true), | 88 | --bg: fn.global-color(--fg-lo), |
| 89 | --label: fn.color(--bg-hi2, $global: true), | 89 | --label: fn.global-color(--bg-hi2), |
| 90 | --shadow: 0 0 0 0 transparent, | 90 | --shadow: 0 0 0 0 transparent, |
| 91 | ), | 91 | ), |
| 92 | ), | 92 | ), |
| 93 | --secondary: ( | 93 | --secondary: ( |
| 94 | --bg: fn.color(--obj-hi, $global: true), | 94 | --bg: fn.global-color(--obj-hi), |
| 95 | --label: fn.color(--fg, $global: true), | 95 | --label: fn.global-color(--fg), |
| 96 | --outline-label: fn.color(--fg, $global: true), | 96 | --outline-label: fn.global-color(--fg), |
| 97 | --shadow: 0 0 0 0 transparent, | 97 | --shadow: 0 0 0 0 transparent, |
| 98 | 98 | ||
| 99 | --hover: ( | 99 | --hover: ( |
| 100 | --bg: fn.color(--obj, $global: true), | 100 | --bg: fn.global-color(--obj), |
| 101 | --label: fn.color(--fg-lo, $global: true), | 101 | --label: fn.global-color(--fg-lo), |
| 102 | --shadow: 0 0 0 0 transparent, | 102 | --shadow: 0 0 0 0 transparent, |
| 103 | ), | 103 | ), |
| 104 | --active: ( | 104 | --active: ( |
| 105 | --bg: fn.color(--obj-lo, $global: true), | 105 | --bg: fn.global-color(--obj-lo), |
| 106 | --label: fn.color(--fg-lo, $global: true), | 106 | --label: fn.global-color(--fg-lo), |
| 107 | --shadow: 0 0 0 0 transparent, | 107 | --shadow: 0 0 0 0 transparent, |
| 108 | ), | 108 | ), |
| 109 | ), | 109 | ), |
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 @@ | |||
| 6 | --dims: ( | 6 | --dims: ( |
| 7 | --size: iro.fn-px-to-rem(14px), | 7 | --size: iro.fn-px-to-rem(14px), |
| 8 | --label-gap: .6rem, | 8 | --label-gap: .6rem, |
| 9 | --border-width: fn.dim(--border-width --medium, $global: true), | 9 | --border-width: fn.global-dim(--border-width --medium), |
| 10 | --padding-x: .3rem, | 10 | --padding-x: .3rem, |
| 11 | --padding-y: .3rem, | 11 | --padding-y: .3rem, |
| 12 | --margin-right: fn.dim(--spacing --x --md, $global: true), | 12 | --margin-right: fn.global-dim(--spacing --x --md), |
| 13 | ), | 13 | ), |
| 14 | ), 'dims'); | 14 | ), 'dims'); |
| 15 | 15 | ||
| 16 | @include iro.props-store(( | 16 | @include iro.props-store(( |
| 17 | --colors: ( | 17 | --colors: ( |
| 18 | --box-border: fn.color(--fg-hi, $global: true), | 18 | --box-border: fn.global-color(--fg-hi), |
| 19 | --box-bg: fn.color(--bg-hi, $global: true), | 19 | --box-bg: fn.global-color(--bg-hi), |
| 20 | 20 | ||
| 21 | --hover: ( | 21 | --hover: ( |
| 22 | --label: fn.color(--fg-lo, $global: true), | 22 | --label: fn.global-color(--fg-lo), |
| 23 | --box-border: fn.color(--fg, $global: true), | 23 | --box-border: fn.global-color(--fg), |
| 24 | ), | 24 | ), |
| 25 | --accent: ( | 25 | --accent: ( |
| 26 | --box-border: fn.color(--accent --primary, $global: true), | 26 | --box-border: fn.global-color(--accent --primary), |
| 27 | 27 | ||
| 28 | --hover: ( | 28 | --hover: ( |
| 29 | --box-border: fn.color(--accent --primary-lo, $global: true), | 29 | --box-border: fn.global-color(--accent --primary-lo), |
| 30 | ), | 30 | ), |
| 31 | ), | 31 | ), |
| 32 | --key-focus: ( | 32 | --key-focus: ( |
| 33 | --label: fn.color(--focus --text, $global: true), | 33 | --label: fn.global-color(--focus --text), |
| 34 | --box-border: fn.color(--focus --fill, $global: true), | 34 | --box-border: fn.global-color(--focus --fill), |
| 35 | --shadow: fn.color(--focus --shadow, $global: true), | 35 | --shadow: fn.global-color(--focus --shadow), |
| 36 | ), | 36 | ), |
| 37 | --disabled: ( | 37 | --disabled: ( |
| 38 | --label: fn.color(--fg-hi3, $global: true), | 38 | --label: fn.global-color(--fg-hi3), |
| 39 | --box-border: fn.color(--obj-lo, $global: true), | 39 | --box-border: fn.global-color(--obj-lo), |
| 40 | --box-bg: fn.color(--bg-hi, $global: true), | 40 | --box-bg: fn.global-color(--bg-hi), |
| 41 | ) | 41 | ) |
| 42 | ), | 42 | ), |
| 43 | ), 'colors'); | 43 | ), '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 @@ | |||
| 4 | @include iro.props-namespace('field-label') { | 4 | @include iro.props-namespace('field-label') { |
| 5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
| 6 | --dims: ( | 6 | --dims: ( |
| 7 | --spacing-x: fn.dim(--spacing --x --sm, $global: true), | 7 | --spacing-x: fn.global-dim(--spacing --x --sm), |
| 8 | --spacing-y: fn.dim(--spacing --y --xs, $global: true), | 8 | --spacing-y: fn.global-dim(--spacing --y --xs), |
| 9 | --label-font-size: fn.dim(--font-size --sm, $global: true), | 9 | --label-font-size: fn.global-dim(--font-size --sm), |
| 10 | --hint-font-size: fn.dim(--font-size --sm, $global: true), | 10 | --hint-font-size: fn.global-dim(--font-size --sm), |
| 11 | ), | 11 | ), |
| 12 | ), 'dims'); | 12 | ), 'dims'); |
| 13 | 13 | ||
| 14 | @include iro.props-store(( | 14 | @include iro.props-store(( |
| 15 | --colors: ( | 15 | --colors: ( |
| 16 | --label: fn.color(--fg-hi, $global: true), | 16 | --label: fn.global-color(--fg-hi), |
| 17 | --hint: fn.color(--fg, $global: true), | 17 | --hint: fn.global-color(--fg), |
| 18 | --error-hint: fn.color(--accent --error, $global: true), | 18 | --error-hint: fn.global-color(--accent --error), |
| 19 | --disabled: fn.color(--fg-hi3, $global: true), | 19 | --disabled: fn.global-color(--fg-hi3), |
| 20 | ), | 20 | ), |
| 21 | ), 'colors'); | 21 | ), 'colors'); |
| 22 | 22 | ||
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 @@ | |||
| 7 | @include iro.props-store(( | 7 | @include iro.props-store(( |
| 8 | --dims: ( | 8 | --dims: ( |
| 9 | --in-page-margin: ( | 9 | --in-page-margin: ( |
| 10 | --top: fn.dim(--spacing --y --lg, $global: true), | 10 | --top: fn.global-dim(--spacing --y --lg), |
| 11 | --top-sibling: fn.dim(--spacing --y --md, $global: true), | 11 | --top-sibling: fn.global-dim(--spacing --y --md), |
| 12 | --bottom: fn.dim(--spacing --y --sm, $global: true), | 12 | --bottom: fn.global-dim(--spacing --y --sm), |
| 13 | ), | 13 | ), |
| 14 | ), | 14 | ), |
| 15 | ), 'dims'); | 15 | ), 'dims'); |
| 16 | 16 | ||
| 17 | @include iro.props-store(( | 17 | @include iro.props-store(( |
| 18 | --colors: ( | 18 | --colors: ( |
| 19 | --light: fn.color(--fg-hi, $global: true), | 19 | --light: fn.global-color(--fg-hi), |
| 20 | --strong: fn.color(--fg-lo, $global: true), | 20 | --strong: fn.global-color(--fg-lo), |
| 21 | ), | 21 | ), |
| 22 | ), 'colors'); | 22 | ), 'colors'); |
| 23 | 23 | ||
| @@ -34,29 +34,29 @@ | |||
| 34 | 34 | ||
| 35 | @include iro.bem-modifier('xxl') { | 35 | @include iro.bem-modifier('xxl') { |
| 36 | color: fn.color(--strong); | 36 | color: fn.color(--strong); |
| 37 | font-size: fn.dim(--font-size --xxxl, $global: true); | 37 | font-size: fn.global-dim(--font-size --xxxl); |
| 38 | } | 38 | } |
| 39 | 39 | ||
| 40 | @include iro.bem-modifier('xl') { | 40 | @include iro.bem-modifier('xl') { |
| 41 | color: fn.color(--strong); | 41 | color: fn.color(--strong); |
| 42 | font-size: fn.dim(--font-size --xxl, $global: true); | 42 | font-size: fn.global-dim(--font-size --xxl); |
| 43 | } | 43 | } |
| 44 | 44 | ||
| 45 | @include iro.bem-modifier('lg') { | 45 | @include iro.bem-modifier('lg') { |
| 46 | color: fn.color(--strong); | 46 | color: fn.color(--strong); |
| 47 | font-size: fn.dim(--font-size --xl, $global: true); | 47 | font-size: fn.global-dim(--font-size --xl); |
| 48 | } | 48 | } |
| 49 | 49 | ||
| 50 | @include iro.bem-modifier('md') { | 50 | @include iro.bem-modifier('md') { |
| 51 | color: fn.color(--strong); | 51 | color: fn.color(--strong); |
| 52 | font-size: fn.dim(--font-size --lg, $global: true); | 52 | font-size: fn.global-dim(--font-size --lg); |
| 53 | } | 53 | } |
| 54 | 54 | ||
| 55 | @include iro.bem-modifier('sm') { | 55 | @include iro.bem-modifier('sm') { |
| 56 | @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); | 56 | @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); |
| 57 | 57 | ||
| 58 | color: fn.color(--strong); | 58 | color: fn.color(--strong); |
| 59 | font-size: fn.dim(--font-size --md, $global: true); | 59 | font-size: fn.global-dim(--font-size --md); |
| 60 | font-weight: 500; | 60 | font-weight: 500; |
| 61 | } | 61 | } |
| 62 | 62 | ||
| @@ -64,7 +64,7 @@ | |||
| 64 | @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); | 64 | @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); |
| 65 | 65 | ||
| 66 | color: fn.color(--light); | 66 | color: fn.color(--light); |
| 67 | font-size: fn.dim(--font-size --xs, $global: true); | 67 | font-size: fn.global-dim(--font-size --xs); |
| 68 | font-weight: 500; | 68 | font-weight: 500; |
| 69 | text-transform: uppercase; | 69 | text-transform: uppercase; |
| 70 | } | 70 | } |
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 @@ | |||
| 6 | --dims: ( | 6 | --dims: ( |
| 7 | --diameter: iro.fn-px-to-rem(15px), | 7 | --diameter: iro.fn-px-to-rem(15px), |
| 8 | --label-gap: .6rem, | 8 | --label-gap: .6rem, |
| 9 | --border-width: fn.dim(--border-width --medium, $global: true), | 9 | --border-width: fn.global-dim(--border-width --medium), |
| 10 | --padding-x: .3rem, | 10 | --padding-x: .3rem, |
| 11 | --padding-y: .3rem, | 11 | --padding-y: .3rem, |
| 12 | --margin-right: fn.dim(--spacing --x --md, $global: true), | 12 | --margin-right: fn.global-dim(--spacing --x --md), |
| 13 | ), | 13 | ), |
| 14 | ), 'dims'); | 14 | ), 'dims'); |
| 15 | 15 | ||
| 16 | @include iro.props-store(( | 16 | @include iro.props-store(( |
| 17 | --colors: ( | 17 | --colors: ( |
| 18 | --circle-border: fn.color(--fg-hi, $global: true), | 18 | --circle-border: fn.global-color(--fg-hi), |
| 19 | --circle-bg: fn.color(--bg-hi, $global: true), | 19 | --circle-bg: fn.global-color(--bg-hi), |
| 20 | 20 | ||
| 21 | --hover: ( | 21 | --hover: ( |
| 22 | --label: fn.color(--fg-lo, $global: true), | 22 | --label: fn.global-color(--fg-lo), |
| 23 | --circle-border: fn.color(--fg, $global: true), | 23 | --circle-border: fn.global-color(--fg), |
| 24 | ), | 24 | ), |
| 25 | --accent: ( | 25 | --accent: ( |
| 26 | --circle-border: fn.color(--accent --primary, $global: true), | 26 | --circle-border: fn.global-color(--accent --primary), |
| 27 | 27 | ||
| 28 | --hover: ( | 28 | --hover: ( |
| 29 | --circle-border: fn.color(--accent --primary-lo, $global: true), | 29 | --circle-border: fn.global-color(--accent --primary-lo), |
| 30 | ), | 30 | ), |
| 31 | ), | 31 | ), |
| 32 | --key-focus: ( | 32 | --key-focus: ( |
| 33 | --label: fn.color(--focus --text, $global: true), | 33 | --label: fn.global-color(--focus --text), |
| 34 | --circle-border: fn.color(--focus --fill, $global: true), | 34 | --circle-border: fn.global-color(--focus --fill), |
| 35 | --shadow: fn.color(--focus --shadow, $global: true), | 35 | --shadow: fn.global-color(--focus --shadow), |
| 36 | ), | 36 | ), |
| 37 | --disabled: ( | 37 | --disabled: ( |
| 38 | --label: fn.color(--fg-hi3, $global: true), | 38 | --label: fn.global-color(--fg-hi3), |
| 39 | --circle-border: fn.color(--obj-lo, $global: true), | 39 | --circle-border: fn.global-color(--obj-lo), |
| 40 | --circle-bg: fn.color(--bg-hi, $global: true), | 40 | --circle-bg: fn.global-color(--bg-hi), |
| 41 | ) | 41 | ) |
| 42 | ), | 42 | ), |
| 43 | ), 'colors'); | 43 | ), '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 @@ | |||
| 4 | @include iro.props-namespace('rule') { | 4 | @include iro.props-namespace('rule') { |
| 5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
| 6 | --dims: ( | 6 | --dims: ( |
| 7 | --margin-y: fn.dim(--spacing --y --xs, $global: true), | 7 | --margin-y: fn.global-dim(--spacing --y --xs), |
| 8 | 8 | ||
| 9 | --strong: ( | 9 | --strong: ( |
| 10 | --border-width: fn.dim(--border-width --thick, $global: true), | 10 | --border-width: fn.global-dim(--border-width --thick), |
| 11 | --label-font-size: fn.dim(--font-size --md, $global: true), | 11 | --label-font-size: fn.global-dim(--font-size --md), |
| 12 | ), | 12 | ), |
| 13 | --medium: ( | 13 | --medium: ( |
| 14 | --border-width: fn.dim(--border-width --medium, $global: true), | 14 | --border-width: fn.global-dim(--border-width --medium), |
| 15 | --label-font-size: fn.dim(--font-size --sm, $global: true), | 15 | --label-font-size: fn.global-dim(--font-size --sm), |
| 16 | ), | 16 | ), |
| 17 | --faint: ( | 17 | --faint: ( |
| 18 | --border-width: fn.dim(--border-width --thin, $global: true), | 18 | --border-width: fn.global-dim(--border-width --thin), |
| 19 | --label-font-size: fn.dim(--font-size --xs, $global: true), | 19 | --label-font-size: fn.global-dim(--font-size --xs), |
| 20 | ), | 20 | ), |
| 21 | ), | 21 | ), |
| 22 | ), 'dims'); | 22 | ), 'dims'); |
| @@ -24,16 +24,16 @@ | |||
| 24 | @include iro.props-store(( | 24 | @include iro.props-store(( |
| 25 | --colors: ( | 25 | --colors: ( |
| 26 | --strong: ( | 26 | --strong: ( |
| 27 | --bg: fn.color(--fg, $global: true), | 27 | --bg: fn.global-color(--fg), |
| 28 | --label: fn.color(--fg, $global: true), | 28 | --label: fn.global-color(--fg), |
| 29 | ), | 29 | ), |
| 30 | --medium: ( | 30 | --medium: ( |
| 31 | --bg: fn.color(--obj, $global: true), | 31 | --bg: fn.global-color(--obj), |
| 32 | --label: fn.color(--fg-hi, $global: true), | 32 | --label: fn.global-color(--fg-hi), |
| 33 | ), | 33 | ), |
| 34 | --faint: ( | 34 | --faint: ( |
| 35 | --bg: fn.color(--obj, $global: true), | 35 | --bg: fn.global-color(--obj), |
| 36 | --label: fn.color(--fg-hi2, $global: true), | 36 | --label: fn.global-color(--fg-hi2), |
| 37 | ), | 37 | ), |
| 38 | ), | 38 | ), |
| 39 | ), 'colors'); | 39 | ), '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 @@ | |||
| 7 | --width: iro.fn-px-to-rem(26px), | 7 | --width: iro.fn-px-to-rem(26px), |
| 8 | --height: iro.fn-px-to-rem(15px), | 8 | --height: iro.fn-px-to-rem(15px), |
| 9 | --label-gap: .6rem, | 9 | --label-gap: .6rem, |
| 10 | --border-width: fn.dim(--border-width --medium, $global: true), | 10 | --border-width: fn.global-dim(--border-width --medium), |
| 11 | --padding-x: .3rem, | 11 | --padding-x: .3rem, |
| 12 | --padding-y: .3rem, | 12 | --padding-y: .3rem, |
| 13 | --margin-right: fn.dim(--spacing --x --md, $global: true), | 13 | --margin-right: fn.global-dim(--spacing --x --md), |
| 14 | ), | 14 | ), |
| 15 | ), 'dims'); | 15 | ), 'dims'); |
| 16 | 16 | ||
| 17 | @include iro.props-store(( | 17 | @include iro.props-store(( |
| 18 | --colors: ( | 18 | --colors: ( |
| 19 | --track-bg: fn.color(--obj, $global: true), | 19 | --track-bg: fn.global-color(--obj), |
| 20 | --handle-border: fn.color(--fg-hi, $global: true), | 20 | --handle-border: fn.global-color(--fg-hi), |
| 21 | --handle-bg: fn.color(--bg-hi, $global: true), | 21 | --handle-bg: fn.global-color(--bg-hi), |
| 22 | 22 | ||
| 23 | --hover: ( | 23 | --hover: ( |
| 24 | --label: fn.color(--fg-lo, $global: true), | 24 | --label: fn.global-color(--fg-lo), |
| 25 | --handle-border: fn.color(--fg, $global: true), | 25 | --handle-border: fn.global-color(--fg), |
| 26 | ), | 26 | ), |
| 27 | --accent: ( | 27 | --accent: ( |
| 28 | --handle-border: fn.color(--accent --primary, $global: true), | 28 | --handle-border: fn.global-color(--accent --primary), |
| 29 | 29 | ||
| 30 | --hover: ( | 30 | --hover: ( |
| 31 | --handle-border: fn.color(--accent --primary-lo, $global: true), | 31 | --handle-border: fn.global-color(--accent --primary-lo), |
| 32 | ), | 32 | ), |
| 33 | ), | 33 | ), |
| 34 | --key-focus: ( | 34 | --key-focus: ( |
| 35 | --label: fn.color(--focus --text, $global: true), | 35 | --label: fn.global-color(--focus --text), |
| 36 | --track-bg: fn.color(--focus --fill, $global: true), | 36 | --track-bg: fn.global-color(--focus --fill), |
| 37 | --handle-border: fn.color(--focus --fill, $global: true), | 37 | --handle-border: fn.global-color(--focus --fill), |
| 38 | --shadow: fn.color(--focus --shadow, $global: true), | 38 | --shadow: fn.global-color(--focus --shadow), |
| 39 | ), | 39 | ), |
| 40 | --disabled: ( | 40 | --disabled: ( |
| 41 | --label: fn.color(--fg-hi3, $global: true), | 41 | --label: fn.global-color(--fg-hi3), |
| 42 | --track-bg: fn.color(--obj, $global: true), | 42 | --track-bg: fn.global-color(--obj), |
| 43 | --handle-border: fn.color(--obj-lo, $global: true), | 43 | --handle-border: fn.global-color(--obj-lo), |
| 44 | --handle-bg: fn.color(--bg-hi, $global: true), | 44 | --handle-bg: fn.global-color(--bg-hi), |
| 45 | ) | 45 | ) |
| 46 | ), | 46 | ), |
| 47 | ), 'colors'); | 47 | ), '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 @@ | |||
| 36 | --dims: ( | 36 | --dims: ( |
| 37 | --padding-x: .6rem, | 37 | --padding-x: .6rem, |
| 38 | --padding-y: .5rem, | 38 | --padding-y: .5rem, |
| 39 | --border-width: fn.dim(--border-width --thin, $global: true), | 39 | --border-width: fn.global-dim(--border-width --thin), |
| 40 | --border-radius: 2px, | 40 | --border-radius: 2px, |
| 41 | 41 | ||
| 42 | --focus: ( | 42 | --focus: ( |
| 43 | --border-width: fn.dim(--border-width --medium, $global: true), | 43 | --border-width: fn.global-dim(--border-width --medium), |
| 44 | ) | 44 | ) |
| 45 | ), | 45 | ), |
| 46 | ), 'dims'); | 46 | ), 'dims'); |
| 47 | 47 | ||
| 48 | @include iro.props-store(( | 48 | @include iro.props-store(( |
| 49 | --colors: ( | 49 | --colors: ( |
| 50 | --bg: fn.color(--bg-hi2, $global: true), | 50 | --bg: fn.global-color(--bg-hi2), |
| 51 | --placeholder: fn.color(--fg-hi2, $global: true), | 51 | --placeholder: fn.global-color(--fg-hi2), |
| 52 | --text: fn.color(--fg, $global: true), | 52 | --text: fn.global-color(--fg), |
| 53 | --border: fn.color(--obj-lo, $global: true), | 53 | --border: fn.global-color(--obj-lo), |
| 54 | --shadow: 0 0 0 0 transparent, | 54 | --shadow: 0 0 0 0 transparent, |
| 55 | 55 | ||
| 56 | --hover: ( | 56 | --hover: ( |
| 57 | --border: fn.color(--fg-hi2, $global: true), | 57 | --border: fn.global-color(--fg-hi2), |
| 58 | --shadow: 0 0 0 0 transparent, | 58 | --shadow: 0 0 0 0 transparent, |
| 59 | ), | 59 | ), |
| 60 | --focus: ( | 60 | --focus: ( |
| 61 | --border: fn.color(--accent --primary, $global: true), | 61 | --border: fn.global-color(--accent --primary), |
| 62 | --shadow: 0 0 0 0 transparent, | 62 | --shadow: 0 0 0 0 transparent, |
| 63 | ), | 63 | ), |
| 64 | --key-focus: ( | 64 | --key-focus: ( |
| 65 | --border: fn.color(--focus --fill, $global: true), | 65 | --border: fn.global-color(--focus --fill), |
| 66 | --shadow: fn.color(--focus --shadow, $global: true), | 66 | --shadow: fn.global-color(--focus --shadow), |
| 67 | ), | 67 | ), |
| 68 | --error: ( | 68 | --error: ( |
| 69 | --border: fn.color(--accent --error-hi, $global: true), | 69 | --border: fn.global-color(--accent --error-hi), |
| 70 | --shadow: 0 0 0 0 transparent, | 70 | --shadow: 0 0 0 0 transparent, |
| 71 | 71 | ||
| 72 | --hover: ( | 72 | --hover: ( |
| 73 | --border: fn.color(--accent --error, $global: true), | 73 | --border: fn.global-color(--accent --error), |
| 74 | --shadow: 0 0 0 0 transparent, | 74 | --shadow: 0 0 0 0 transparent, |
| 75 | ), | 75 | ), |
| 76 | --focus: ( | 76 | --focus: ( |
| 77 | --border: fn.color(--accent --error, $global: true), | 77 | --border: fn.global-color(--accent --error), |
| 78 | --shadow: 0 0 0 0 transparent, | 78 | --shadow: 0 0 0 0 transparent, |
| 79 | ), | 79 | ), |
| 80 | ), | 80 | ), |
| 81 | --disabled: ( | 81 | --disabled: ( |
| 82 | --bg: fn.color(--obj-hi, $global: true), | 82 | --bg: fn.global-color(--obj-hi), |
| 83 | --placeholder: fn.color(--fg-hi3, $global: true), | 83 | --placeholder: fn.global-color(--fg-hi3), |
| 84 | --text: fn.color(--fg-hi3, $global: true), | 84 | --text: fn.global-color(--fg-hi3), |
| 85 | --border: fn.color(--obj-hi, $global: true), | 85 | --border: fn.global-color(--obj-hi), |
| 86 | --shadow: 0 0 0 0 transparent, | 86 | --shadow: 0 0 0 0 transparent, |
| 87 | ), | 87 | ), |
| 88 | ), | 88 | ), |
