summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/_functions.scss8
-rw-r--r--src/layouts/_container.scss14
-rw-r--r--src/layouts/_form.scss6
-rw-r--r--src/objects/_action-button.scss72
-rw-r--r--src/objects/_button.scss52
-rw-r--r--src/objects/_checkbox.scss28
-rw-r--r--src/objects/_field-label.scss16
-rw-r--r--src/objects/_heading.scss22
-rw-r--r--src/objects/_radio.scss28
-rw-r--r--src/objects/_rule.scss26
-rw-r--r--src/objects/_switch.scss34
-rw-r--r--src/objects/_text-field.scss34
12 files changed, 174 insertions, 166 deletions
diff --git a/src/_functions.scss b/src/_functions.scss
index c2fe4c8..a649cc2 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -5,7 +5,15 @@
5 @return iro.props-get($new-key, $tree, $default, $global); 5 @return iro.props-get($new-key, $tree, $default, $global);
6} 6}
7 7
8@function global-color($key, $tree: 'colors', $default: null, $global: true) {
9 @return color($key, $tree, $default, $global);
10}
11
8@function dim($key, $tree: 'dims', $default: null, $global: false) { 12@function dim($key, $tree: 'dims', $default: null, $global: false) {
9 $new-key: iro.fn-list-prepend($key, --dims); 13 $new-key: iro.fn-list-prepend($key, --dims);
10 @return iro.props-get($new-key, $tree, $default, $global); 14 @return iro.props-get($new-key, $tree, $default, $global);
11} 15}
16
17@function global-dim($key, $tree: 'dims', $default: null, $global: true) {
18 @return dim($key, $tree, $default, $global);
19}
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index af5b208..40e8ab6 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -9,7 +9,7 @@
9 --sm-content-width: iro.fn-px-to-rem(360px), 9 --sm-content-width: iro.fn-px-to-rem(360px),
10 --padding-x: 3rem, 10 --padding-x: 3rem,
11 --padding-y: 3rem, 11 --padding-y: 3rem,
12 --in-page-spacing-y: fn.dim(--spacing --y --xl, $global: true), 12 --in-page-spacing-y: fn.global-dim(--spacing --y --xl),
13 ) 13 )
14 ), 'dims'); 14 ), 'dims');
15 15
@@ -17,8 +17,8 @@
17 overflow: hidden; 17 overflow: hidden;
18 18
19 @include iro.bem-elem('inner') { 19 @include iro.bem-elem('inner') {
20 margin-top: calc(-1 * fn.dim(--spacing --y --xl, $global: true)); 20 margin-top: calc(-1 * fn.global-dim(--spacing --y --xl));
21 margin-bottom: calc(-1 * fn.dim(--spacing --y --xl, $global: true)); 21 margin-bottom: calc(-1 * fn.global-dim(--spacing --y --xl));
22 22
23 &::before, 23 &::before,
24 &::after { 24 &::after {
@@ -29,11 +29,11 @@
29 } 29 }
30 30
31 &::before { 31 &::before {
32 margin-bottom: fn.dim(--spacing --y --xl, $global: true); 32 margin-bottom: fn.global-dim(--spacing --y --xl);
33 } 33 }
34 34
35 &::after { 35 &::after {
36 margin-top: fn.dim(--spacing --y --xl, $global: true); 36 margin-top: fn.global-dim(--spacing --y --xl);
37 } 37 }
38 } 38 }
39 39
@@ -80,8 +80,8 @@
80 } 80 }
81 81
82 @include iro.bem-modifier('themed') { 82 @include iro.bem-modifier('themed') {
83 background-color: fn.color(--bg, $global: true); 83 background-color: fn.global-color(--bg);
84 color: fn.color(--fg, $global: true); 84 color: fn.global-color(--fg);
85 } 85 }
86 86
87 @include iro.bem-modifier('in-page') { 87 @include iro.bem-modifier('in-page') {
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index ac54607..aa4a166 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -4,9 +4,9 @@
4@include iro.props-namespace('form') { 4@include iro.props-namespace('form') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --item-spacing-y: fn.dim(--spacing --y --md, $global: true), 7 --item-spacing-y: fn.global-dim(--spacing --y --md),
8 --label-spacing-x: fn.dim(--spacing --x --md, $global: true), 8 --label-spacing-x: fn.global-dim(--spacing --x --md),
9 --hint-font-size: fn.dim(--font-size --sm, $global: true), 9 --hint-font-size: fn.global-dim(--font-size --sm),
10 ), 10 ),
11 ), 'dims'); 11 ), 'dims');
12 12
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 ),
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 18:42:02 +0000