summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 17:17:33 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 17:17:33 +0100
commit3524f1bac11c8a9d1640bfeac5ceb063ff96d623 (patch)
tree52907b3161045c2d24bba18442c1ece9c12986a6
parentUpdated action button (diff)
downloadiro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.gz
iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.tar.bz2
iro-design-3524f1bac11c8a9d1640bfeac5ceb063ff96d623.zip
Improved variable structure
Diffstat
-rw-r--r--src/_functions.scss11
-rw-r--r--src/_general.scss21
-rw-r--r--src/_vars.scss191
-rw-r--r--src/index.scss24
-rw-r--r--src/layouts/_card.scss3
-rw-r--r--src/layouts/_container.scss37
-rw-r--r--src/layouts/_form.scss11
-rw-r--r--src/objects/_action-button.scss194
-rw-r--r--src/objects/_button.scss112
-rw-r--r--src/objects/_checkbox.scss112
-rw-r--r--src/objects/_field-label.scss40
-rw-r--r--src/objects/_heading.scss44
-rw-r--r--src/objects/_radio.scss86
-rw-r--r--src/objects/_rule.scss66
-rw-r--r--src/objects/_switch.scss114
-rw-r--r--src/objects/_text-field.scss96
16 files changed, 609 insertions, 553 deletions
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 @@
1@use 'iro-sass/src/index' as iro;
2
3@function color($key, $tree: 'colors', $default: null, $global: false) {
4 $new-key: iro.fn-list-prepend($key, --colors);
5 @return iro.props-get($new-key, $tree, $default, $global);
6}
7
8@function dim($key, $tree: 'dims', $default: null, $global: false) {
9 $new-key: iro.fn-list-prepend($key, --dims);
10 @return iro.props-get($new-key, $tree, $default, $global);
11}
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'mixins/typography'; 2@use 'mixins/typography';
3@use 'functions' as fn;
3@use 'vars'; 4@use 'vars';
4 5
5html, 6html,
@@ -8,12 +9,12 @@ body {
8} 9}
9 10
10body { 11body {
11 @include typography.set-font(vars.$font--main, (size: iro.props-get(--dims --font-size --md))); 12 @include typography.set-font(vars.$font--main, (size: fn.dim(--font-size --md)));
12 13
13 margin: 0; 14 margin: 0;
14 padding: 0; 15 padding: 0;
15 background-color: iro.props-get(--colors --bg); 16 background-color: fn.color(--bg);
16 color: iro.props-get(--colors --fg); 17 color: fn.color(--fg);
17} 18}
18 19
19h1, 20h1,
@@ -22,13 +23,13 @@ h3,
22h4, 23h4,
23h5, 24h5,
24h6 { 25h6 {
25 @include typography.set-font(vars.$font--main, (size: iro.props-get(--dims --font-size --md), weight: 400)); 26 @include typography.set-font(vars.$font--main, (size: fn.dim(--font-size --md), weight: 400));
26 27
27 margin: 0; 28 margin: 0;
28} 29}
29 30
30p { 31p {
31 margin-top: iro.props-get(--dims --paragraph --margin-top); 32 margin-top: fn.dim(--paragraph --margin-top);
32 margin-bottom: 0; 33 margin-bottom: 0;
33 34
34 &:empty { 35 &:empty {
@@ -38,8 +39,8 @@ p {
38 39
39ul, 40ul,
40ol { 41ol {
41 margin: iro.props-get(--dims --paragraph --margin-top) 0 0; 42 margin: fn.dim(--paragraph --margin-top) 0 0;
42 padding-left: iro.props-get(--dims --list --indent); 43 padding-left: fn.dim(--list --indent);
43} 44}
44 45
45:focus { 46:focus {
@@ -77,12 +78,12 @@ textarea {
77} 78}
78 79
79::selection { 80::selection {
80 background: iro.props-get(--colors --selection --bg); 81 background: fn.color(--selection --bg);
81 color: iro.props-get(--colors --selection --fg); 82 color: fn.color(--selection --fg);
82} 83}
83 84
84img { 85img {
85 &::selection { 86 &::selection {
86 background: iro.props-get(--colors --selection --bg-img); 87 background: fn.color(--selection --bg-img);
87 } 88 }
88} 89}
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use 'functions' as fn;
3 4
4iro.$vars-root-size: 16px; 5iro.$vars-root-size: 16px;
5 6
@@ -32,77 +33,81 @@ $line-height: map-get($font--main, line-height);
32 33
33// 34//
34 35
35@include iro.fn-execute { 36@include iro.props-store((
36 $primary-accent-base: hsl(222, 49.8%, 52.4%); 37 --dims: (
37 $error-accent-base: hsl(352, 49.8%, 52.4%); 38 --spacing: (
38 $success-accent-base: hsl(113, 49.8%, 39.6%); 39 --base: 1.6rem,
39 40 --factors: (
40 @include iro.props-store(( 41 --xs: .25,
41 --dims: ( 42 --sm: .5,
42 --spacing: ( 43 --md: 1,
43 --base: 1.6rem, 44 --lg: 1.5,
44 --factors: ( 45 --xl: 2,
45 --xs: .25,
46 --sm: .5,
47 --md: 1,
48 --lg: 1.5,
49 --xl: 2,
50 ),
51 --x: (
52 --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
53 --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
54 --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
55 ),
56 --y: (
57 --xs: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xs, null)),
58 --sm: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --sm, null)),
59 --md: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --md, null)),
60 --lg: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --lg, null)),
61 --xl: calc(iro.props-get(--dims --spacing --base, null) * iro.props-get(--dims --spacing --factors --xl, null)),
62 ),
63 ), 46 ),
64 47 --x: (
65 --font-size: ( 48 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
66 --xs: iro.fn-px-to-rem(11px), 49 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
67 --sm: iro.fn-px-to-rem(13px), 50 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
68 --md: iro.fn-px-to-rem(14px),
69 --lg: iro.fn-px-to-rem(16px),
70 --xl: iro.fn-px-to-rem(18px),
71 --xxl: iro.fn-px-to-rem(22px),
72 --xxxl: iro.fn-px-to-rem(28px),
73 ), 51 ),
74 52 --y: (
75 --border-width: ( 53 --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
76 --thick: 4px, 54 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
77 --medium: 2px, 55 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
78 --thin: 1px, 56 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
57 --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
79 ), 58 ),
59 ),
60
61 --font-size: (
62 --xs: iro.fn-px-to-rem(11px),
63 --sm: iro.fn-px-to-rem(13px),
64 --md: iro.fn-px-to-rem(14px),
65 --lg: iro.fn-px-to-rem(16px),
66 --xl: iro.fn-px-to-rem(18px),
67 --xxl: iro.fn-px-to-rem(22px),
68 --xxxl: iro.fn-px-to-rem(28px),
69 ),
80 70
81 --focus-outline-width: 3px, 71 --border-width: (
72 --thick: 4px,
73 --medium: 2px,
74 --thin: 1px,
75 ),
82 76
83 --paragraph: ( 77 --focus-outline-width: 3px,
84 --margin-top: iro.props-get(--dims --spacing --y --sm, null),
85 ),
86 78
87 --list: ( 79 --paragraph: (
88 --indent: 3rem, 80 --margin-top: fn.dim(--spacing --y --sm, null),
89 ), 81 ),
82
83 --list: (
84 --indent: 3rem,
90 ), 85 ),
91 86 ),
87), 'dims');
88
89//
90
91@include iro.fn-execute {
92 $primary-accent-base: hsl(222, 49.8%, 52.4%);
93 $error-accent-base: hsl(352, 49.8%, 52.4%);
94 $success-accent-base: hsl(113, 49.8%, 39.6%);
95
96 @include iro.props-store((
92 --colors: ( 97 --colors: (
93 --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background 98 --bg-hi2: fn.color(--gray1, null), // Lightest background
94 --bg-hi: iro.props-get(--colors --gray2, null), // Lighter background 99 --bg-hi: fn.color(--gray2, null), // Lighter background
95 --bg: iro.props-get(--colors --gray3, null), // Background 100 --bg: fn.color(--gray3, null), // Background
96 101
97 --obj-hi: iro.props-get(--colors --gray4, null), 102 --obj-hi: fn.color(--gray4, null),
98 --obj: iro.props-get(--colors --gray5, null), 103 --obj: fn.color(--gray5, null),
99 --obj-lo: iro.props-get(--colors --gray6, null), 104 --obj-lo: fn.color(--gray6, null),
100 105
101 --fg-hi3: iro.props-get(--colors --gray7, null), // Disabled text 106 --fg-hi3: fn.color(--gray7, null), // Disabled text
102 --fg-hi2: iro.props-get(--colors --gray8, null), // Placeholder text 107 --fg-hi2: fn.color(--gray8, null), // Placeholder text
103 --fg-hi: iro.props-get(--colors --gray9, null), // Faint text 108 --fg-hi: fn.color(--gray9, null), // Faint text
104 --fg: iro.props-get(--colors --gray10, null), // Text 109 --fg: fn.color(--gray10, null), // Text
105 --fg-lo: iro.props-get(--colors --gray11, null), // Strong text 110 --fg-lo: fn.color(--gray11, null), // Strong text
106 111
107 --accent: ( 112 --accent: (
108 --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%), 113 --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%),
@@ -113,11 +118,11 @@ $line-height: map-get($font--main, line-height);
113 --primary-const-selection: rgba($primary-accent-base, .99), 118 --primary-const-selection: rgba($primary-accent-base, .99),
114 --primary-const-fg: #fff, 119 --primary-const-fg: #fff,
115 120
116 --primary-hi: iro.props-get(--colors --accent --primary-const-hi, null), 121 --primary-hi: fn.color(--accent --primary-const-hi, null),
117 --primary: iro.props-get(--colors --accent --primary-const, null), 122 --primary: fn.color(--accent --primary-const, null),
118 --primary-lo: iro.props-get(--colors --accent --primary-const-lo, null), 123 --primary-lo: fn.color(--accent --primary-const-lo, null),
119 --primary-lo2: iro.props-get(--colors --accent --primary-const-lo2, null), 124 --primary-lo2: fn.color(--accent --primary-const-lo2, null),
120 --primary-fg: iro.props-get(--colors --accent --primary-const-fg, null), 125 --primary-fg: fn.color(--accent --primary-const-fg, null),
121 126
122 --error-hi: scale-color($error-accent-base, $lightness: 15%), 127 --error-hi: scale-color($error-accent-base, $lightness: 15%),
123 --error: $error-accent-base, 128 --error: $error-accent-base,
@@ -133,27 +138,27 @@ $line-height: map-get($font--main, line-height);
133 ), 138 ),
134 139
135 --grayscale-accent: ( 140 --grayscale-accent: (
136 --primary-hi: iro.props-get(--colors --fg-hi2, null), 141 --primary-hi: fn.color(--fg-hi2, null),
137 --primary: iro.props-get(--colors --fg-hi, null), 142 --primary: fn.color(--fg-hi, null),
138 --primary-lo: iro.props-get(--colors --fg, null), 143 --primary-lo: fn.color(--fg, null),
139 --primary-lo2: iro.props-get(--colors --fg-lo, null), 144 --primary-lo2: fn.color(--fg-lo, null),
140 --primary-fg: #fff, 145 --primary-fg: #fff,
141 ), 146 ),
142 147
143 --selection: ( 148 --selection: (
144 --bg: iro.props-get(--colors --accent --primary-const-selection, null), 149 --bg: fn.color(--accent --primary-const-selection, null),
145 --bg-img: iro.props-get(--colors --accent --primary-const-semi, null), 150 --bg-img: fn.color(--accent --primary-const-semi, null),
146 --fg: iro.props-get(--colors --accent --primary-const-fg, null), 151 --fg: fn.color(--accent --primary-const-fg, null),
147 ), 152 ),
148 153
149 --focus: ( 154 --focus: (
150 --shadow: 0 0 0 iro.props-get(--dims --focus-outline-width, null) iro.props-get(--colors --accent --primary-const-semi, null), 155 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary-const-semi, null),
151 --fill: iro.props-get(--colors --accent --primary-const, null), 156 --fill: fn.color(--accent --primary-const, null),
152 --text: iro.props-get(--colors --accent --primary-const-lo, null), 157 --text: fn.color(--accent --primary-const-lo, null),
153 --fill-text: iro.props-get(--colors --accent --primary-const-fg, null), 158 --fill-text: fn.color(--accent --primary-const-fg, null),
154 ), 159 ),
155 ), 160 ),
156 )); 161 ), 'colors');
157 162
158 @include iro.props-store(( 163 @include iro.props-store((
159 --colors: ( 164 --colors: (
@@ -169,7 +174,7 @@ $line-height: map-get($font--main, line-height);
169 --gray10: hsl(210, 0%, 19%), // 11.78 174 --gray10: hsl(210, 0%, 19%), // 11.78
170 --gray11: hsl(210, 0%, 0%), // 18.75 175 --gray11: hsl(210, 0%, 0%), // 18.75
171 ) 176 )
172 ), 'light-palette'); 177 ), 'palette-light');
173 178
174 @include iro.props-store(( 179 @include iro.props-store((
175 --colors: ( 180 --colors: (
@@ -185,29 +190,23 @@ $line-height: map-get($font--main, line-height);
185 --gray10: hsl(210, 0%, 22%), // 11.72 190 --gray10: hsl(210, 0%, 22%), // 11.72
186 --gray11: hsl(210, 0%, 0%), // 21 191 --gray11: hsl(210, 0%, 0%), // 21
187 ) 192 )
188 ), 'light-raised-palette'); 193 ), 'palette-light-raised');
189} 194}
190 195
191// 196//
192 197
193@include iro.fn-execute { 198@include iro.fn-execute {
194 @include iro.fn-execute { 199 @include iro.props-store((
195 @include iro.props-store(( 200 --colors: ()
196 --colors: () 201 ), 'colors-dark');
197 ), 'dark');
198 }
199
200 @include iro.fn-execute {
201 @include iro.props-store((
202 --colors: ()
203 ), 'dark-palette');
204 }
205 202
206 @include iro.fn-execute { 203 @include iro.props-store((
207 @include iro.props-store(( 204 --colors: ()
208 --colors: () 205 ), 'palette-dark');
209 ), 'dark-raised-palette'); 206
210 } 207 @include iro.props-store((
208 --colors: ()
209 ), 'palette-dark-raised');
211} 210}
212 211
213// 212//
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 @@
20@import 'layouts/form'; 20@import 'layouts/form';
21 21
22:root { 22:root {
23 @include iro.props-assign; 23 @include iro.props-assign('dims');
24 @include iro.props-assign('light-palette');
25 24
26 @each $breakpoint in map-keys(media.$breakpoints) { 25 @each $breakpoint in map-keys(media.$breakpoints) {
27 @include media.media('<=#{$breakpoint}') { 26 @include media.media('<=#{$breakpoint}') {
28 @include iro.props-assign($breakpoint); 27 @include iro.props-assign($breakpoint);
29 } 28 }
30 } 29 }
31}
32 30
33@include iro.bem-theme('grayscale') { 31 @include iro.props-assign('colors');
34 @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent); 32 @include iro.props-assign('palette-light');
33
34 @media (prefers-color-scheme: dark) {
35 @include iro.props-assign('palette-dark');
36 }
35} 37}
36 38
37@include iro.bem-theme('raised') { 39@include iro.bem-theme('raised') {
38 @include iro.props-assign('light-raised-palette'); 40 @include iro.props-assign('colors');
39 @include iro.props-assign; 41 @include iro.props-assign('palette-light-raised');
40 42
41 @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { 43 @media (prefers-color-scheme: dark) {
42 @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent); 44 @include iro.props-assign('palette-dark-raised');
43 } 45 }
44} 46}
45 47
48@include iro.bem-theme('grayscale') {
49 @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent);
50}
51
46/*@media (prefers-color-scheme: dark) { 52/*@media (prefers-color-scheme: dark) {
47 @include iro.props-assign('dark'); 53 @include iro.props-assign('dark');
48 @include iro.props-assign('dark-palette'); 54 @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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use '../functions' as fn;
3 4
4@include iro.props-namespace('card') { 5@include iro.props-namespace('card') {
5 @include iro.props-store(( 6 @include iro.props-store((
@@ -11,7 +12,7 @@
11 --pad-y: iro.fn-px-to-rem(11px), 12 --pad-y: iro.fn-px-to-rem(11px),
12 ) 13 )
13 ) 14 )
14 )); 15 ), 'dims');
15 16
16 @include iro.bem-layout(iro.props-namespace()) { 17 @include iro.bem-layout(iro.props-namespace()) {
17 display: flex; 18 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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use '../functions' as fn;
3 4
4@include iro.props-namespace('container') { 5@include iro.props-namespace('container') {
5 @include iro.props-store(( 6 @include iro.props-store((
@@ -8,16 +9,16 @@
8 --sm-content-width: iro.fn-px-to-rem(360px), 9 --sm-content-width: iro.fn-px-to-rem(360px),
9 --padding-x: 3rem, 10 --padding-x: 3rem,
10 --padding-y: 3rem, 11 --padding-y: 3rem,
11 --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true), 12 --in-page-spacing-y: fn.dim(--spacing --y --xl, $global: true),
12 ) 13 )
13 )); 14 ), 'dims');
14 15
15 @include iro.bem-layout(iro.props-namespace()) { 16 @include iro.bem-layout(iro.props-namespace()) {
16 overflow: hidden; 17 overflow: hidden;
17 18
18 @include iro.bem-elem('inner') { 19 @include iro.bem-elem('inner') {
19 margin-top: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true)); 20 margin-top: calc(-1 * fn.dim(--spacing --y --xl, $global: true));
20 margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true)); 21 margin-bottom: calc(-1 * fn.dim(--spacing --y --xl, $global: true));
21 22
22 &::before, 23 &::before,
23 &::after { 24 &::after {
@@ -28,33 +29,33 @@
28 } 29 }
29 30
30 &::before { 31 &::before {
31 margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true); 32 margin-bottom: fn.dim(--spacing --y --xl, $global: true);
32 } 33 }
33 34
34 &::after { 35 &::after {
35 margin-top: iro.props-get(--dims --spacing --y --xl, $global: true); 36 margin-top: fn.dim(--spacing --y --xl, $global: true);
36 } 37 }
37 } 38 }
38 39
39 @include iro.bem-modifier('pad-x') { 40 @include iro.bem-modifier('pad-x') {
40 padding-right: iro.props-get(--dims --padding-x); 41 padding-right: fn.dim(--padding-x);
41 padding-left: iro.props-get(--dims --padding-x); 42 padding-left: fn.dim(--padding-x);
42 } 43 }
43 44
44 @include iro.bem-modifier('pad-y') { 45 @include iro.bem-modifier('pad-y') {
45 padding-top: iro.props-get(--dims --padding-y); 46 padding-top: fn.dim(--padding-y);
46 padding-bottom: iro.props-get(--dims --padding-y); 47 padding-bottom: fn.dim(--padding-y);
47 } 48 }
48 49
49 @include iro.bem-modifier('narrow') { 50 @include iro.bem-modifier('narrow') {
50 max-width: iro.props-get(--dims --content-width); 51 max-width: fn.dim(--content-width);
51 margin-right: auto; 52 margin-right: auto;
52 margin-left: auto; 53 margin-left: auto;
53 54
54 @each $breakpoint in map-keys(media.$breakpoints) { 55 @each $breakpoint in map-keys(media.$breakpoints) {
55 @include media.media('<=#{$breakpoint}') { 56 @include media.media('<=#{$breakpoint}') {
56 @include iro.bem-suffix('#{$breakpoint}-down') { 57 @include iro.bem-suffix('#{$breakpoint}-down') {
57 max-width: iro.props-get(--dims --content-width); 58 max-width: fn.dim(--content-width);
58 margin-right: auto; 59 margin-right: auto;
59 margin-left: auto; 60 margin-left: auto;
60 } 61 }
@@ -63,14 +64,14 @@
63 } 64 }
64 65
65 @include iro.bem-modifier('sm-narrow') { 66 @include iro.bem-modifier('sm-narrow') {
66 max-width: iro.props-get(--dims --sm-content-width); 67 max-width: fn.dim(--sm-content-width);
67 margin-right: auto; 68 margin-right: auto;
68 margin-left: auto; 69 margin-left: auto;
69 70
70 @each $breakpoint in map-keys(media.$breakpoints) { 71 @each $breakpoint in map-keys(media.$breakpoints) {
71 @include media.media('<=#{$breakpoint}') { 72 @include media.media('<=#{$breakpoint}') {
72 @include iro.bem-suffix('#{$breakpoint}-down') { 73 @include iro.bem-suffix('#{$breakpoint}-down') {
73 max-width: iro.props-get(--dims --sm-content-width); 74 max-width: fn.dim(--sm-content-width);
74 margin-right: auto; 75 margin-right: auto;
75 margin-left: auto; 76 margin-left: auto;
76 } 77 }
@@ -79,13 +80,13 @@
79 } 80 }
80 81
81 @include iro.bem-modifier('themed') { 82 @include iro.bem-modifier('themed') {
82 background-color: iro.props-get(--colors --bg, $global: true); 83 background-color: fn.color(--bg, $global: true);
83 color: iro.props-get(--colors --fg, $global: true); 84 color: fn.color(--fg, $global: true);
84 } 85 }
85 86
86 @include iro.bem-modifier('in-page') { 87 @include iro.bem-modifier('in-page') {
87 margin-top: iro.props-get(--dims --in-page-spacing-y); 88 margin-top: fn.dim(--in-page-spacing-y);
88 margin-bottom: iro.props-get(--dims --in-page-spacing-y); 89 margin-bottom: fn.dim(--in-page-spacing-y);
89 } 90 }
90 } 91 }
91} 92}
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('form') { 4@include iro.props-namespace('form') {
4 @include iro.props-store(( 5 @include iro.props-store((
5 --dims: ( 6 --dims: (
6 --item-spacing-y: iro.props-get(--dims --spacing --y --md, $global: true), 7 --item-spacing-y: fn.dim(--spacing --y --md, $global: true),
7 --label-spacing-x: iro.props-get(--dims --spacing --x --md, $global: true), 8 --label-spacing-x: fn.dim(--spacing --x --md, $global: true),
8 --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true), 9 --hint-font-size: fn.dim(--font-size --sm, $global: true),
9 ), 10 ),
10 )); 11 ), 'dims');
11 12
12 @include iro.bem-layout(iro.props-namespace()) { 13 @include iro.bem-layout(iro.props-namespace()) {
13 display: flex; 14 display: flex;
14 flex-direction: column; 15 flex-direction: column;
15 align-items: baseline; 16 align-items: baseline;
16 gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x); 17 gap: fn.dim(--item-spacing-y) fn.dim(--label-spacing-x);
17 18
18 @include iro.bem-modifier('labels-left', 'labels-right') { 19 @include iro.bem-modifier('labels-left', 'labels-right') {
19 display: grid; 20 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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('action-button') { 4@include iro.props-namespace('action-button') {
4 @include iro.props-store(( 5 @include iro.props-store((
@@ -7,94 +8,97 @@
7 --padding-y: .6rem, 8 --padding-y: .6rem,
8 --rounding: 3px, 9 --rounding: 3px,
9 ), 10 ),
11 ), 'dims');
12
13 @include iro.props-store((
10 --colors: ( 14 --colors: (
11 --bg: iro.props-get(--colors --bg-hi, $global: true), 15 --bg: fn.color(--bg-hi, $global: true),
12 --label: iro.props-get(--colors --fg, $global: true), 16 --label: fn.color(--fg, $global: true),
13 --border: iro.props-get(--colors --obj-lo, $global: true), 17 --border: fn.color(--obj-lo, $global: true),
14 --shadow: 0 0 0 0 transparent, 18 --shadow: 0 0 0 0 transparent,
15 19
16 --hover: ( 20 --hover: (
17 --bg: iro.props-get(--colors --bg-hi2, $global: true), 21 --bg: fn.color(--bg-hi2, $global: true),
18 --label: iro.props-get(--colors --fg-lo, $global: true), 22 --label: fn.color(--fg-lo, $global: true),
19 --border: iro.props-get(--colors --fg-hi2, $global: true), 23 --border: fn.color(--fg-hi2, $global: true),
20 --shadow: 0 0 0 0 transparent, 24 --shadow: 0 0 0 0 transparent,
21 ), 25 ),
22 --active: ( 26 --active: (
23 --bg: iro.props-get(--colors --obj-hi, $global: true), 27 --bg: fn.color(--obj-hi, $global: true),
24 --label: iro.props-get(--colors --fg-lo, $global: true), 28 --label: fn.color(--fg-lo, $global: true),
25 --border: iro.props-get(--colors --fg-hi2, $global: true), 29 --border: fn.color(--fg-hi2, $global: true),
26 --shadow: 0 0 0 0 transparent, 30 --shadow: 0 0 0 0 transparent,
27 ), 31 ),
28 --selected: ( 32 --selected: (
29 --bg: iro.props-get(--colors --obj-hi, $global: true), 33 --bg: fn.color(--obj-hi, $global: true),
30 --label: iro.props-get(--colors --fg, $global: true), 34 --label: fn.color(--fg, $global: true),
31 --border: iro.props-get(--colors --fg-hi3, $global: true), 35 --border: fn.color(--fg-hi3, $global: true),
32 --shadow: 0 0 0 0 transparent, 36 --shadow: 0 0 0 0 transparent,
33 37
34 --hover: ( 38 --hover: (
35 --label: iro.props-get(--colors --fg-lo, $global: true), 39 --label: fn.color(--fg-lo, $global: true),
36 --border: iro.props-get(--colors --fg-hi2, $global: true), 40 --border: fn.color(--fg-hi2, $global: true),
37 --shadow: 0 0 0 0 transparent, 41 --shadow: 0 0 0 0 transparent,
38 ), 42 ),
39 --key-focus: ( 43 --key-focus: (
40 --bg: iro.props-get(--colors --obj-hi, $global: true), 44 --bg: fn.color(--obj-hi, $global: true),
41 ), 45 ),
42 ), 46 ),
43 --disabled: ( 47 --disabled: (
44 --bg: iro.props-get(--colors --obj-hi, $global: true), 48 --bg: fn.color(--obj-hi, $global: true),
45 --label: iro.props-get(--colors --fg-hi3, $global: true), 49 --label: fn.color(--fg-hi3, $global: true),
46 --border: iro.props-get(--colors --obj-hi, $global: true), 50 --border: fn.color(--obj-hi, $global: true),
47 --shadow: 0 0 0 0 transparent, 51 --shadow: 0 0 0 0 transparent,
48 ), 52 ),
49 --key-focus: ( 53 --key-focus: (
50 --bg: iro.props-get(--colors --bg-hi2, $global: true), 54 --bg: fn.color(--bg-hi2, $global: true),
51 --label: iro.props-get(--colors --fg-lo, $global: true), 55 --label: fn.color(--fg-lo, $global: true),
52 --border: iro.props-get(--colors --focus --fill, $global: true), 56 --border: fn.color(--focus --fill, $global: true),
53 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 57 --shadow: fn.color(--focus --shadow, $global: true),
54 ), 58 ),
55 --quiet: ( 59 --quiet: (
56 --label: iro.props-get(--colors --fg, $global: true), 60 --label: fn.color(--fg, $global: true),
57 61
58 --hover: ( 62 --hover: (
59 --bg: iro.props-get(--colors --obj-hi, $global: true), 63 --bg: fn.color(--obj-hi, $global: true),
60 --label: iro.props-get(--colors --fg-lo, $global: true), 64 --label: fn.color(--fg-lo, $global: true),
61 ), 65 ),
62 --active: ( 66 --active: (
63 --bg: iro.props-get(--colors --obj, $global: true), 67 --bg: fn.color(--obj, $global: true),
64 --label: iro.props-get(--colors --fg-lo, $global: true), 68 --label: fn.color(--fg-lo, $global: true),
65 ), 69 ),
66 --selected: ( 70 --selected: (
67 --bg: iro.props-get(--colors --obj-hi, $global: true), 71 --bg: fn.color(--obj-hi, $global: true),
68 --label: iro.props-get(--colors --fg, $global: true), 72 --label: fn.color(--fg, $global: true),
69 73
70 --hover: ( 74 --hover: (
71 --label: iro.props-get(--colors --fg-lo, $global: true), 75 --label: fn.color(--fg-lo, $global: true),
72 ), 76 ),
73 --key-focus: ( 77 --key-focus: (
74 --bg: iro.props-get(--colors --obj, $global: true), 78 --bg: fn.color(--obj, $global: true),
75 ), 79 ),
76 ), 80 ),
77 --disabled: ( 81 --disabled: (
78 --label: iro.props-get(--colors --fg-hi3, $global: true), 82 --label: fn.color(--fg-hi3, $global: true),
79 ), 83 ),
80 --key-focus: ( 84 --key-focus: (
81 --bg: iro.props-get(--colors --bg-hi2, $global: true), 85 --bg: fn.color(--bg-hi2, $global: true),
82 --label: iro.props-get(--colors --fg-lo, $global: true), 86 --label: fn.color(--fg-lo, $global: true),
83 --border: iro.props-get(--colors --focus --fill, $global: true), 87 --border: fn.color(--focus --fill, $global: true),
84 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 88 --shadow: fn.color(--focus --shadow, $global: true),
85 ), 89 ),
86 ), 90 ),
87 ), 91 ),
88 )); 92 ), 'colors');
89 93
90 @include iro.bem-object(iro.props-namespace()) { 94 @include iro.bem-object(iro.props-namespace()) {
91 display: inline-block; 95 display: inline-block;
92 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 96 padding: fn.dim(--padding-y) fn.dim(--padding-x);
93 border: 1px solid iro.props-get(--colors --border); 97 border: 1px solid fn.color(--border);
94 border-radius: iro.props-get(--dims --rounding); 98 border-radius: fn.dim(--rounding);
95 background-color: iro.props-get(--colors --bg); 99 background-color: fn.color(--bg);
96 box-shadow: iro.props-get(--colors --shadow); 100 box-shadow: fn.color(--shadow);
97 color: iro.props-get(--colors --label); 101 color: fn.color(--label);
98 line-height: 1; 102 line-height: 1;
99 text-align: center; 103 text-align: center;
100 text-decoration: none; 104 text-decoration: none;
@@ -103,51 +107,51 @@
103 107
104 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 108 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
105 &:hover { 109 &:hover {
106 border-color: iro.props-get(--colors --hover --border); 110 border-color: fn.color(--hover --border);
107 background-color: iro.props-get(--colors --hover --bg); 111 background-color: fn.color(--hover --bg);
108 box-shadow: iro.props-get(--colors --hover --shadow); 112 box-shadow: fn.color(--hover --shadow);
109 color: iro.props-get(--colors --hover --label); 113 color: fn.color(--hover --label);
110 } 114 }
111 115
112 &:active { 116 &:active {
113 border-color: iro.props-get(--colors --active --border); 117 border-color: fn.color(--active --border);
114 background-color: iro.props-get(--colors --active --bg); 118 background-color: fn.color(--active --bg);
115 box-shadow: iro.props-get(--colors --active --shadow); 119 box-shadow: fn.color(--active --shadow);
116 color: iro.props-get(--colors --active --label); 120 color: fn.color(--active --label);
117 } 121 }
118 } 122 }
119 123
120 @include iro.bem-at-theme('keyboard') { 124 @include iro.bem-at-theme('keyboard') {
121 &:focus { 125 &:focus {
122 border-color: iro.props-get(--colors --key-focus --border); 126 border-color: fn.color(--key-focus --border);
123 background-color: iro.props-get(--colors --key-focus --bg); 127 background-color: fn.color(--key-focus --bg);
124 box-shadow: inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow); 128 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
125 color: iro.props-get(--colors --key-focus --label); 129 color: fn.color(--key-focus --label);
126 } 130 }
127 } 131 }
128 132
129 @include iro.bem-is('selected') { 133 @include iro.bem-is('selected') {
130 border-color: iro.props-get(--colors --selected --border); 134 border-color: fn.color(--selected --border);
131 background-color: iro.props-get(--colors --selected --bg); 135 background-color: fn.color(--selected --bg);
132 box-shadow: iro.props-get(--colors --selected --shadow); 136 box-shadow: fn.color(--selected --shadow);
133 color: iro.props-get(--colors --selected --label); 137 color: fn.color(--selected --label);
134 138
135 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 139 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
136 &:hover, 140 &:hover,
137 &:active { 141 &:active {
138 border-color: iro.props-get(--colors --selected --hover --border); 142 border-color: fn.color(--selected --hover --border);
139 background-color: iro.props-get(--colors --selected --bg); 143 background-color: fn.color(--selected --bg);
140 box-shadow: iro.props-get(--colors --selected --hover --shadow); 144 box-shadow: fn.color(--selected --hover --shadow);
141 color: iro.props-get(--colors --selected --hover --label); 145 color: fn.color(--selected --hover --label);
142 } 146 }
143 } 147 }
144 148
145 @include iro.bem-at-theme('keyboard') { 149 @include iro.bem-at-theme('keyboard') {
146 &:focus { 150 &:focus {
147 border-color: iro.props-get(--colors --key-focus --border); 151 border-color: fn.color(--key-focus --border);
148 background-color: iro.props-get(--colors --selected --key-focus --bg); 152 background-color: fn.color(--selected --key-focus --bg);
149 box-shadow: inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow); 153 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
150 color: iro.props-get(--colors --key-focus --label); 154 color: fn.color(--key-focus --label);
151 } 155 }
152 } 156 }
153 } 157 }
@@ -156,73 +160,73 @@
156 border-color: transparent; 160 border-color: transparent;
157 background-color: transparent; 161 background-color: transparent;
158 box-shadow: none; 162 box-shadow: none;
159 color: iro.props-get(--colors --quiet --label); 163 color: fn.color(--quiet --label);
160 164
161 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 165 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
162 &:hover { 166 &:hover {
163 border-color: transparent; 167 border-color: transparent;
164 background-color: iro.props-get(--colors --quiet --hover --bg); 168 background-color: fn.color(--quiet --hover --bg);
165 box-shadow: none; 169 box-shadow: none;
166 color: iro.props-get(--colors --quiet --hover --label); 170 color: fn.color(--quiet --hover --label);
167 } 171 }
168 172
169 &:active { 173 &:active {
170 border-color: transparent; 174 border-color: transparent;
171 background-color: iro.props-get(--colors --quiet --active --bg); 175 background-color: fn.color(--quiet --active --bg);
172 box-shadow: none; 176 box-shadow: none;
173 color: iro.props-get(--colors --quiet --active --label); 177 color: fn.color(--quiet --active --label);
174 } 178 }
175 } 179 }
176 180
177 @include iro.bem-at-theme('keyboard') { 181 @include iro.bem-at-theme('keyboard') {
178 &:focus { 182 &:focus {
179 border-color: iro.props-get(--colors --quiet --key-focus --border); 183 border-color: fn.color(--quiet --key-focus --border);
180 background-color: iro.props-get(--colors --quiet --key-focus --bg); 184 background-color: fn.color(--quiet --key-focus --bg);
181 box-shadow: inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow); 185 box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow);
182 color: iro.props-get(--colors --quiet --key-focus --label); 186 color: fn.color(--quiet --key-focus --label);
183 } 187 }
184 } 188 }
185 189
186 @include iro.bem-is('selected') { 190 @include iro.bem-is('selected') {
187 border-color: transparent; 191 border-color: transparent;
188 background-color: iro.props-get(--colors --quiet --selected --bg); 192 background-color: fn.color(--quiet --selected --bg);
189 box-shadow: none; 193 box-shadow: none;
190 color: iro.props-get(--colors --quiet --selected --label); 194 color: fn.color(--quiet --selected --label);
191 195
192 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 196 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
193 &:hover, 197 &:hover,
194 &:active { 198 &:active {
195 border-color: transparent; 199 border-color: transparent;
196 background-color: iro.props-get(--colors --quiet --selected --bg); 200 background-color: fn.color(--quiet --selected --bg);
197 box-shadow: none; 201 box-shadow: none;
198 color: iro.props-get(--colors --quiet --selected --hover --label); 202 color: fn.color(--quiet --selected --hover --label);
199 } 203 }
200 } 204 }
201 205
202 @include iro.bem-at-theme('keyboard') { 206 @include iro.bem-at-theme('keyboard') {
203 &:focus { 207 &:focus {
204 border-color: iro.props-get(--colors --quiet --key-focus --border); 208 border-color: fn.color(--quiet --key-focus --border);
205 background-color: iro.props-get(--colors --quiet --selected --key-focus --bg); 209 background-color: fn.color(--quiet --selected --key-focus --bg);
206 box-shadow: inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow); 210 box-shadow: inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow);
207 color: iro.props-get(--colors --quiet --key-focus --label); 211 color: fn.color(--quiet --key-focus --label);
208 } 212 }
209 } 213 }
210 } 214 }
211 } 215 }
212 216
213 @include iro.bem-is('disabled') { 217 @include iro.bem-is('disabled') {
214 border-color: iro.props-get(--colors --disabled --border); 218 border-color: fn.color(--disabled --border);
215 background-color: iro.props-get(--colors --disabled --bg); 219 background-color: fn.color(--disabled --bg);
216 box-shadow: iro.props-get(--colors --disabled --shadow); 220 box-shadow: fn.color(--disabled --shadow);
217 color: iro.props-get(--colors --disabled --label); 221 color: fn.color(--disabled --label);
218 222
219 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 223 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
220 &:hover, 224 &:hover,
221 &:active { 225 &:active {
222 border-color: iro.props-get(--colors --disabled --border); 226 border-color: fn.color(--disabled --border);
223 background-color: iro.props-get(--colors --disabled --bg); 227 background-color: fn.color(--disabled --bg);
224 box-shadow: iro.props-get(--colors --disabled --shadow); 228 box-shadow: fn.color(--disabled --shadow);
225 color: iro.props-get(--colors --disabled --label); 229 color: fn.color(--disabled --label);
226 } 230 }
227 } 231 }
228 232
@@ -230,7 +234,7 @@
230 border-color: transparent; 234 border-color: transparent;
231 background-color: transparent; 235 background-color: transparent;
232 box-shadow: none; 236 box-shadow: none;
233 color: iro.props-get(--colors --quiet --disabled --label); 237 color: fn.color(--quiet --disabled --label);
234 238
235 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 239 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
236 &:hover, 240 &:hover,
@@ -238,12 +242,12 @@
238 border-color: transparent; 242 border-color: transparent;
239 background-color: transparent; 243 background-color: transparent;
240 box-shadow: none; 244 box-shadow: none;
241 color: iro.props-get(--colors --quiet --disabled --label); 245 color: fn.color(--quiet --disabled --label);
242 } 246 }
243 } 247 }
244 248
245 @include iro.bem-is('selected') { 249 @include iro.bem-is('selected') {
246 background-color: iro.props-get(--colors --quiet --selected --bg); 250 background-color: fn.color(--quiet --selected --bg);
247 } 251 }
248 } 252 }
249 } 253 }
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2@use '../vars'; 3@use '../vars';
3@use '../mixins/typography'; 4@use '../mixins/typography';
4 5
5@mixin button-variant($variant) { 6@mixin button-variant($variant) {
6 border-color: iro.props-get((--colors, --#{$variant}, --bg)); 7 border-color: fn.color((--#{$variant}, --bg));
7 background-color: iro.props-get((--colors, --#{$variant}, --bg)); 8 background-color: fn.color((--#{$variant}, --bg));
8 box-shadow: iro.props-get((--colors, --#{$variant}, --shadow)); 9 box-shadow: fn.color((--#{$variant}, --shadow));
9 color: iro.props-get((--colors, --#{$variant}, --label)); 10 color: fn.color((--#{$variant}, --label));
10 11
11 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 12 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
12 &:hover { 13 &:hover {
13 border-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); 14 border-color: fn.color((--#{$variant}, --hover, --bg));
14 background-color: iro.props-get((--colors, --#{$variant}, --hover, --bg)); 15 background-color: fn.color((--#{$variant}, --hover, --bg));
15 box-shadow: iro.props-get((--colors, --#{$variant}, --hover, --shadow)); 16 box-shadow: fn.color((--#{$variant}, --hover, --shadow));
16 color: iro.props-get((--colors, --#{$variant}, --hover, --label)); 17 color: fn.color((--#{$variant}, --hover, --label));
17 } 18 }
18 19
19 &:active { 20 &:active {
20 border-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); 21 border-color: fn.color((--#{$variant}, --active, --bg));
21 background-color: iro.props-get((--colors, --#{$variant}, --active, --bg)); 22 background-color: fn.color((--#{$variant}, --active, --bg));
22 box-shadow: iro.props-get((--colors, --#{$variant}, --active, --shadow)); 23 box-shadow: fn.color((--#{$variant}, --active, --shadow));
23 color: iro.props-get((--colors, --#{$variant}, --active, --label)); 24 color: fn.color((--#{$variant}, --active, --label));
24 } 25 }
25 } 26 }
26 27
27 @include iro.bem-modifier('outline') { 28 @include iro.bem-modifier('outline') {
28 background-color: transparent; 29 background-color: transparent;
29 box-shadow: none; 30 box-shadow: none;
30 color: iro.props-get((--colors, --#{$variant}, --outline-label)); 31 color: fn.color((--#{$variant}, --outline-label));
31 } 32 }
32} 33}
33 34
@@ -38,81 +39,84 @@
38 --padding-y: .5rem, 39 --padding-y: .5rem,
39 --rounding: 10em, 40 --rounding: 10em,
40 ), 41 ),
42 ), 'dims');
43
44 @include iro.props-store((
41 --colors: ( 45 --colors: (
42 --any: ( 46 --any: (
43 --disabled: ( 47 --disabled: (
44 --bg: iro.props-get(--colors --obj-hi, $global: true), 48 --bg: fn.color(--obj-hi, $global: true),
45 --label: iro.props-get(--colors --fg-hi3, $global: true), 49 --label: fn.color(--fg-hi3, $global: true),
46 --shadow: 0 0 0 0 transparent, 50 --shadow: 0 0 0 0 transparent,
47 ), 51 ),
48 --key-focus: ( 52 --key-focus: (
49 --bg: transparent, 53 --bg: transparent,
50 --label: iro.props-get(--colors --accent --primary-lo2, $global: true), 54 --label: fn.color(--accent --primary-lo2, $global: true),
51 --border: iro.props-get(--colors --focus --fill, $global: true), 55 --border: fn.color(--focus --fill, $global: true),
52 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 56 --shadow: fn.color(--focus --shadow, $global: true),
53 ), 57 ),
54 ), 58 ),
55 --accent: ( 59 --accent: (
56 --bg: iro.props-get(--colors --accent --primary, $global: true), 60 --bg: fn.color(--accent --primary, $global: true),
57 --label: iro.props-get(--colors --accent --primary-fg, $global: true), 61 --label: fn.color(--accent --primary-fg, $global: true),
58 --outline-label: iro.props-get(--colors --accent --primary-lo, $global: true), 62 --outline-label: fn.color(--accent --primary-lo, $global: true),
59 --shadow: 0 0 0 0 transparent, 63 --shadow: 0 0 0 0 transparent,
60 64
61 --hover: ( 65 --hover: (
62 --bg: iro.props-get(--colors --accent --primary-lo, $global: true), 66 --bg: fn.color(--accent --primary-lo, $global: true),
63 --label: iro.props-get(--colors --accent --primary-fg, $global: true), 67 --label: fn.color(--accent --primary-fg, $global: true),
64 --shadow: 0 0 0 0 transparent, 68 --shadow: 0 0 0 0 transparent,
65 ), 69 ),
66 --active: ( 70 --active: (
67 --bg: iro.props-get(--colors --accent --primary-lo2, $global: true), 71 --bg: fn.color(--accent --primary-lo2, $global: true),
68 --label: iro.props-get(--colors --accent --primary-fg, $global: true), 72 --label: fn.color(--accent --primary-fg, $global: true),
69 --shadow: 0 0 0 0 transparent, 73 --shadow: 0 0 0 0 transparent,
70 ), 74 ),
71 ), 75 ),
72 --primary: ( 76 --primary: (
73 --bg: iro.props-get(--colors --fg, $global: true), 77 --bg: fn.color(--fg, $global: true),
74 --label: iro.props-get(--colors --bg-hi2, $global: true), 78 --label: fn.color(--bg-hi2, $global: true),
75 --outline-label: iro.props-get(--colors --fg, $global: true), 79 --outline-label: fn.color(--fg, $global: true),
76 --shadow: 0 0 0 0 transparent, 80 --shadow: 0 0 0 0 transparent,
77 81
78 --hover: ( 82 --hover: (
79 --bg: iro.props-get(--colors --fg-lo, $global: true), 83 --bg: fn.color(--fg-lo, $global: true),
80 --label: iro.props-get(--colors --bg-hi2, $global: true), 84 --label: fn.color(--bg-hi2, $global: true),
81 --shadow: 0 0 0 0 transparent, 85 --shadow: 0 0 0 0 transparent,
82 ), 86 ),
83 --active: ( 87 --active: (
84 --bg: iro.props-get(--colors --fg-lo, $global: true), 88 --bg: fn.color(--fg-lo, $global: true),
85 --label: iro.props-get(--colors --bg-hi2, $global: true), 89 --label: fn.color(--bg-hi2, $global: true),
86 --shadow: 0 0 0 0 transparent, 90 --shadow: 0 0 0 0 transparent,
87 ), 91 ),
88 ), 92 ),
89 --secondary: ( 93 --secondary: (
90 --bg: iro.props-get(--colors --obj-hi, $global: true), 94 --bg: fn.color(--obj-hi, $global: true),
91 --label: iro.props-get(--colors --fg, $global: true), 95 --label: fn.color(--fg, $global: true),
92 --outline-label: iro.props-get(--colors --fg, $global: true), 96 --outline-label: fn.color(--fg, $global: true),
93 --shadow: 0 0 0 0 transparent, 97 --shadow: 0 0 0 0 transparent,
94 98
95 --hover: ( 99 --hover: (
96 --bg: iro.props-get(--colors --obj, $global: true), 100 --bg: fn.color(--obj, $global: true),
97 --label: iro.props-get(--colors --fg-lo, $global: true), 101 --label: fn.color(--fg-lo, $global: true),
98 --shadow: 0 0 0 0 transparent, 102 --shadow: 0 0 0 0 transparent,
99 ), 103 ),
100 --active: ( 104 --active: (
101 --bg: iro.props-get(--colors --obj-lo, $global: true), 105 --bg: fn.color(--obj-lo, $global: true),
102 --label: iro.props-get(--colors --fg-lo, $global: true), 106 --label: fn.color(--fg-lo, $global: true),
103 --shadow: 0 0 0 0 transparent, 107 --shadow: 0 0 0 0 transparent,
104 ), 108 ),
105 ), 109 ),
106 ), 110 ),
107 )); 111 ), 'colors');
108 112
109 @include iro.bem-object(iro.props-namespace()) { 113 @include iro.bem-object(iro.props-namespace()) {
110 @include typography.set-font(vars.$font--main, (weight: 500)); 114 @include typography.set-font(vars.$font--main, (weight: 500));
111 115
112 display: inline-block; 116 display: inline-block;
113 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 117 padding: fn.dim(--padding-y) fn.dim(--padding-x);
114 border: 2px solid transparent; 118 border: 2px solid transparent;
115 border-radius: iro.props-get(--dims --rounding); 119 border-radius: fn.dim(--rounding);
116 line-height: 1; 120 line-height: 1;
117 text-align: center; 121 text-align: center;
118 text-decoration: none; 122 text-decoration: none;
@@ -138,26 +142,26 @@
138 142
139 @include iro.bem-at-theme('keyboard') { 143 @include iro.bem-at-theme('keyboard') {
140 &:focus { 144 &:focus {
141 border-color: iro.props-get(--colors --any --key-focus --border); 145 border-color: fn.color(--any --key-focus --border);
142 background-color: iro.props-get(--colors --any --key-focus --bg); 146 background-color: fn.color(--any --key-focus --bg);
143 box-shadow: iro.props-get(--colors --any --key-focus --shadow); 147 box-shadow: fn.color(--any --key-focus --shadow);
144 color: iro.props-get(--colors --any --key-focus --label); 148 color: fn.color(--any --key-focus --label);
145 } 149 }
146 } 150 }
147 151
148 @include iro.bem-is('disabled') { 152 @include iro.bem-is('disabled') {
149 border-color: iro.props-get(--colors --any --disabled --bg); 153 border-color: fn.color(--any --disabled --bg);
150 background-color: iro.props-get(--colors --any --disabled --bg); 154 background-color: fn.color(--any --disabled --bg);
151 box-shadow: iro.props-get(--colors --any --disabled --shadow); 155 box-shadow: fn.color(--any --disabled --shadow);
152 color: iro.props-get(--colors --any --disabled --label); 156 color: fn.color(--any --disabled --label);
153 157
154 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') { 158 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
155 &:hover, 159 &:hover,
156 &:active { 160 &:active {
157 border-color: iro.props-get(--colors --any --disabled --bg); 161 border-color: fn.color(--any --disabled --bg);
158 background-color: iro.props-get(--colors --any --disabled --bg); 162 background-color: fn.color(--any --disabled --bg);
159 box-shadow: iro.props-get(--colors --any --disabled --shadow); 163 box-shadow: fn.color(--any --disabled --shadow);
160 color: iro.props-get(--colors --any --disabled --label); 164 color: fn.color(--any --disabled --label);
161 } 165 }
162 } 166 }
163 167
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('checkbox') { 4@include iro.props-namespace('checkbox') {
4 @include iro.props-store(( 5 @include iro.props-store((
5 --dims: ( 6 --dims: (
6 --size: iro.fn-px-to-rem(14px), 7 --size: iro.fn-px-to-rem(14px),
7 --label-gap: .6rem, 8 --label-gap: .6rem,
8 --border-width: iro.props-get(--dims --border-width --medium, $global: true), 9 --border-width: fn.dim(--border-width --medium, $global: true),
9 --padding-x: .3rem, 10 --padding-x: .3rem,
10 --padding-y: .3rem, 11 --padding-y: .3rem,
11 --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), 12 --margin-right: fn.dim(--spacing --x --md, $global: true),
12 ), 13 ),
14 ), 'dims');
15
16 @include iro.props-store((
13 --colors: ( 17 --colors: (
14 --box-border: iro.props-get(--colors --fg-hi, $global: true), 18 --box-border: fn.color(--fg-hi, $global: true),
15 --box-bg: iro.props-get(--colors --bg-hi, $global: true), 19 --box-bg: fn.color(--bg-hi, $global: true),
16 20
17 --hover: ( 21 --hover: (
18 --label: iro.props-get(--colors --fg-lo, $global: true), 22 --label: fn.color(--fg-lo, $global: true),
19 --box-border: iro.props-get(--colors --fg, $global: true), 23 --box-border: fn.color(--fg, $global: true),
20 ), 24 ),
21 --accent: ( 25 --accent: (
22 --box-border: iro.props-get(--colors --accent --primary, $global: true), 26 --box-border: fn.color(--accent --primary, $global: true),
23 27
24 --hover: ( 28 --hover: (
25 --box-border: iro.props-get(--colors --accent --primary-lo, $global: true), 29 --box-border: fn.color(--accent --primary-lo, $global: true),
26 ), 30 ),
27 ), 31 ),
28 --key-focus: ( 32 --key-focus: (
29 --label: iro.props-get(--colors --focus --text, $global: true), 33 --label: fn.color(--focus --text, $global: true),
30 --box-border: iro.props-get(--colors --focus --fill, $global: true), 34 --box-border: fn.color(--focus --fill, $global: true),
31 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 35 --shadow: fn.color(--focus --shadow, $global: true),
32 ), 36 ),
33 --disabled: ( 37 --disabled: (
34 --label: iro.props-get(--colors --fg-hi3, $global: true), 38 --label: fn.color(--fg-hi3, $global: true),
35 --box-border: iro.props-get(--colors --obj-lo, $global: true), 39 --box-border: fn.color(--obj-lo, $global: true),
36 --box-bg: iro.props-get(--colors --bg-hi, $global: true), 40 --box-bg: fn.color(--bg-hi, $global: true),
37 ) 41 )
38 ), 42 ),
39 )); 43 ), 'colors');
40 44
41 @include iro.bem-object(iro.props-namespace()) { 45 @include iro.bem-object(iro.props-namespace()) {
42 display: inline-flex; 46 display: inline-flex;
43 position: relative; 47 position: relative;
44 align-items: flex-start; 48 align-items: flex-start;
45 margin-right: calc(-1 * #{iro.props-get(--dims --padding-x)} + #{iro.props-get(--dims --margin-right)}); 49 margin-right: calc(-1 * #{fn.dim(--padding-x)} + #{fn.dim(--margin-right)});
46 margin-left: calc(-1 * #{iro.props-get(--dims --padding-x)}); 50 margin-left: calc(-1 * #{fn.dim(--padding-x)});
47 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values 51 padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values
48 52
49 @include iro.bem-elem('box') { 53 @include iro.bem-elem('box') {
50 display: block; 54 display: block;
51 position: relative; 55 position: relative;
52 flex: 0 0 auto; 56 flex: 0 0 auto;
53 width: iro.props-get(--dims --size); 57 width: fn.dim(--size);
54 height: iro.props-get(--dims --size); 58 height: fn.dim(--size);
55 margin-top: calc(.5 * (#{$line-height * 1em} - #{iro.props-get(--dims --size)})); 59 margin-top: calc(.5 * (#{$line-height * 1em} - #{fn.dim(--size)}));
56 border-radius: iro.props-get(--dims --border-width); 60 border-radius: fn.dim(--border-width);
57 background-color: iro.props-get(--colors --box-border); 61 background-color: fn.color(--box-border);
58 62
59 &::before, 63 &::before,
60 &::after { 64 &::after {
@@ -65,27 +69,27 @@
65 69
66 &::before { 70 &::before {
67 z-index: 2; 71 z-index: 2;
68 top: iro.props-get(--dims --border-width); 72 top: fn.dim(--border-width);
69 left: iro.props-get(--dims --border-width); 73 left: fn.dim(--border-width);
70 width: calc(iro.props-get(--dims --size) - 2 * iro.props-get(--dims --border-width)); 74 width: calc(fn.dim(--size) - 2 * fn.dim(--border-width));
71 height: calc(iro.props-get(--dims --size) - 2 * iro.props-get(--dims --border-width)); 75 height: calc(fn.dim(--size) - 2 * fn.dim(--border-width));
72 transition: transform .2s ease; 76 transition: transform .2s ease;
73 background-color: iro.props-get(--colors --box-bg); 77 background-color: fn.color(--box-bg);
74 } 78 }
75 79
76 &::after { 80 &::after {
77 z-index: 3; 81 z-index: 3;
78 top: calc(.5 * #{iro.props-get(--dims --size)} - 1px); 82 top: calc(.5 * #{fn.dim(--size)} - 1px);
79 left: calc(1.5 * #{iro.props-get(--dims --border-width)}); 83 left: calc(1.5 * #{fn.dim(--border-width)});
80 box-sizing: border-box; 84 box-sizing: border-box;
81 width: calc(iro.props-get(--dims --size) - 3 * iro.props-get(--dims --border-width)); 85 width: calc(fn.dim(--size) - 3 * fn.dim(--border-width));
82 height: 0; 86 height: 0;
83 transform: scale(0); 87 transform: scale(0);
84 transition: transform .2s ease; 88 transition: transform .2s ease;
85 border-width: 0 2px 2px 0; 89 border-width: 0 2px 2px 0;
86 border-style: solid; 90 border-style: solid;
87 border-radius: 2px; 91 border-radius: 2px;
88 border-color: iro.props-get(--colors --box-bg); 92 border-color: fn.color(--box-bg);
89 } 93 }
90 } 94 }
91 95
@@ -93,20 +97,20 @@
93 display: block; 97 display: block;
94 position: absolute; 98 position: absolute;
95 z-index: 2; 99 z-index: 2;
96 top: calc(1 * iro.props-get(--dims --border-width)); 100 top: calc(1 * fn.dim(--border-width));
97 left: calc(1 * iro.props-get(--dims --border-width)); 101 left: calc(1 * fn.dim(--border-width));
98 width: calc(100% - 2 * iro.props-get(--dims --border-width)); 102 width: calc(100% - 2 * fn.dim(--border-width));
99 height: calc(100% - 2 * iro.props-get(--dims --border-width)); 103 height: calc(100% - 2 * fn.dim(--border-width));
100 transform: scale(0); 104 transform: scale(0);
101 transform-origin: 40% 90%; 105 transform-origin: 40% 90%;
102 transition: transform .2s ease; 106 transition: transform .2s ease;
103 stroke-width: iro.fn-px-to-rem(3px); 107 stroke-width: iro.fn-px-to-rem(3px);
104 color: iro.props-get(--colors --box-bg); 108 color: fn.color(--box-bg);
105 } 109 }
106 110
107 @include iro.bem-elem('label') { 111 @include iro.bem-elem('label') {
108 align-self: baseline; 112 align-self: baseline;
109 margin-left: iro.props-get(--dims --label-gap); 113 margin-left: fn.dim(--label-gap);
110 } 114 }
111 115
112 @include iro.bem-elem('native') { 116 @include iro.bem-elem('native') {
@@ -122,11 +126,11 @@
122 126
123 &:hover { 127 &:hover {
124 @include iro.bem-sibling-elem('label') { 128 @include iro.bem-sibling-elem('label') {
125 color: iro.props-get(--colors --hover --label); 129 color: fn.color(--hover --label);
126 } 130 }
127 131
128 @include iro.bem-sibling-elem('box') { 132 @include iro.bem-sibling-elem('box') {
129 background-color: iro.props-get(--colors --hover --box-border); 133 background-color: fn.color(--hover --box-border);
130 } 134 }
131 } 135 }
132 136
@@ -160,14 +164,14 @@
160 164
161 &:disabled { 165 &:disabled {
162 @include iro.bem-sibling-elem('label') { 166 @include iro.bem-sibling-elem('label') {
163 color: iro.props-get(--colors --disabled --label); 167 color: fn.color(--disabled --label);
164 } 168 }
165 169
166 @include iro.bem-sibling-elem('box') { 170 @include iro.bem-sibling-elem('box') {
167 background-color: iro.props-get(--colors --disabled --box-border); 171 background-color: fn.color(--disabled --box-border);
168 172
169 &::before { 173 &::before {
170 background-color: iro.props-get(--colors --disabled --box-bg); 174 background-color: fn.color(--disabled --box-bg);
171 } 175 }
172 } 176 }
173 } 177 }
@@ -175,12 +179,12 @@
175 @include iro.bem-at-theme('keyboard') { 179 @include iro.bem-at-theme('keyboard') {
176 &:focus { 180 &:focus {
177 @include iro.bem-sibling-elem('label') { 181 @include iro.bem-sibling-elem('label') {
178 color: iro.props-get(--colors --key-focus --label); 182 color: fn.color(--key-focus --label);
179 } 183 }
180 184
181 @include iro.bem-sibling-elem('box') { 185 @include iro.bem-sibling-elem('box') {
182 background-color: iro.props-get(--colors --key-focus --box-border); 186 background-color: fn.color(--key-focus --box-border);
183 box-shadow: iro.props-get(--colors --key-focus --shadow); 187 box-shadow: fn.color(--key-focus --shadow);
184 } 188 }
185 } 189 }
186 } 190 }
@@ -190,46 +194,46 @@
190 @include iro.bem-elem('native') { 194 @include iro.bem-elem('native') {
191 &:checked { 195 &:checked {
192 @include iro.bem-sibling-elem('box') { 196 @include iro.bem-sibling-elem('box') {
193 background-color: iro.props-get(--colors --accent --box-border); 197 background-color: fn.color(--accent --box-border);
194 } 198 }
195 199
196 &:hover { 200 &:hover {
197 @include iro.bem-sibling-elem('box') { 201 @include iro.bem-sibling-elem('box') {
198 background-color: iro.props-get(--colors --accent --hover --box-border); 202 background-color: fn.color(--accent --hover --box-border);
199 } 203 }
200 } 204 }
201 } 205 }
202 206
203 &:indeterminate { 207 &:indeterminate {
204 @include iro.bem-sibling-elem('box') { 208 @include iro.bem-sibling-elem('box') {
205 background-color: iro.props-get(--colors --accent --box-border); 209 background-color: fn.color(--accent --box-border);
206 } 210 }
207 211
208 &:hover { 212 &:hover {
209 @include iro.bem-sibling-elem('box') { 213 @include iro.bem-sibling-elem('box') {
210 background-color: iro.props-get(--colors --accent --hover --box-border); 214 background-color: fn.color(--accent --hover --box-border);
211 } 215 }
212 } 216 }
213 } 217 }
214 218
215 &:disabled { 219 &:disabled {
216 @include iro.bem-sibling-elem('box') { 220 @include iro.bem-sibling-elem('box') {
217 background-color: iro.props-get(--colors --disabled --box-border); 221 background-color: fn.color(--disabled --box-border);
218 222
219 &::before { 223 &::before {
220 background-color: iro.props-get(--colors --disabled --box-bg); 224 background-color: fn.color(--disabled --box-bg);
221 } 225 }
222 } 226 }
223 227
224 &:checked { 228 &:checked {
225 @include iro.bem-sibling-elem('box') { 229 @include iro.bem-sibling-elem('box') {
226 background-color: iro.props-get(--colors --disabled --box-border); 230 background-color: fn.color(--disabled --box-border);
227 } 231 }
228 } 232 }
229 233
230 &:indeterminate { 234 &:indeterminate {
231 @include iro.bem-sibling-elem('box') { 235 @include iro.bem-sibling-elem('box') {
232 background-color: iro.props-get(--colors --disabled --box-border); 236 background-color: fn.color(--disabled --box-border);
233 } 237 }
234 } 238 }
235 } 239 }
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('field-label') { 4@include iro.props-namespace('field-label') {
4 @include iro.props-store(( 5 @include iro.props-store((
5 --dims: ( 6 --dims: (
6 --spacing-x: iro.props-get(--dims --spacing --x --sm, $global: true), 7 --spacing-x: fn.dim(--spacing --x --sm, $global: true),
7 --spacing-y: iro.props-get(--dims --spacing --y --xs, $global: true), 8 --spacing-y: fn.dim(--spacing --y --xs, $global: true),
8 --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), 9 --label-font-size: fn.dim(--font-size --sm, $global: true),
9 --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true), 10 --hint-font-size: fn.dim(--font-size --sm, $global: true),
10 ), 11 ),
12 ), 'dims');
13
14 @include iro.props-store((
11 --colors: ( 15 --colors: (
12 --label: iro.props-get(--colors --fg-hi, $global: true), 16 --label: fn.color(--fg-hi, $global: true),
13 --hint: iro.props-get(--colors --fg, $global: true), 17 --hint: fn.color(--fg, $global: true),
14 --error-hint: iro.props-get(--colors --accent --error, $global: true), 18 --error-hint: fn.color(--accent --error, $global: true),
15 --disabled: iro.props-get(--colors --fg-hi3, $global: true), 19 --disabled: fn.color(--fg-hi3, $global: true),
16 ), 20 ),
17 )); 21 ), 'colors');
18 22
19 @include iro.bem-object(iro.props-namespace()) { 23 @include iro.bem-object(iro.props-namespace()) {
20 display: inline-block; 24 display: inline-block;
21 25
22 @include iro.bem-elem('label') { 26 @include iro.bem-elem('label') {
23 display: block; 27 display: block;
24 padding-right: iro.props-get(--dims --spacing-x); 28 padding-right: fn.dim(--spacing-x);
25 color: iro.props-get(--colors --label); 29 color: fn.color(--label);
26 font-size: iro.props-get(--dims --label-font-size); 30 font-size: fn.dim(--label-font-size);
27 font-weight: 400; 31 font-weight: 400;
28 line-height: 1.3; 32 line-height: 1.3;
29 33
30 @include iro.bem-next-elem('content') { 34 @include iro.bem-next-elem('content') {
31 margin-top: iro.props-get(--dims --spacing-y); 35 margin-top: fn.dim(--spacing-y);
32 } 36 }
33 } 37 }
34 38
@@ -38,20 +42,20 @@
38 42
39 @include iro.bem-elem('hint') { 43 @include iro.bem-elem('hint') {
40 display: block; 44 display: block;
41 margin-top: iro.props-get(--dims --spacing-y); 45 margin-top: fn.dim(--spacing-y);
42 color: iro.props-get(--colors --hint); 46 color: fn.color(--hint);
43 font-size: iro.props-get(--dims --hint-font-size); 47 font-size: fn.dim(--hint-font-size);
44 } 48 }
45 49
46 @include iro.bem-is('invalid') { 50 @include iro.bem-is('invalid') {
47 @include iro.bem-elem('hint') { 51 @include iro.bem-elem('hint') {
48 color: iro.props-get(--colors --error-hint); 52 color: fn.color(--error-hint);
49 } 53 }
50 } 54 }
51 55
52 @include iro.bem-is('disabled') { 56 @include iro.bem-is('disabled') {
53 @include iro.bem-elem('label', 'hint') { 57 @include iro.bem-elem('label', 'hint') {
54 color: iro.props-get(--colors --disabled); 58 color: fn.color(--disabled);
55 } 59 }
56 } 60 }
57 61
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2@use '../vars'; 3@use '../vars';
3@use '../mixins/typography'; 4@use '../mixins/typography';
4 5
@@ -6,61 +7,64 @@
6 @include iro.props-store(( 7 @include iro.props-store((
7 --dims: ( 8 --dims: (
8 --in-page-margin: ( 9 --in-page-margin: (
9 --top: iro.props-get(--dims --spacing --y --lg, $global: true), 10 --top: fn.dim(--spacing --y --lg, $global: true),
10 --top-sibling: iro.props-get(--dims --spacing --y --md, $global: true), 11 --top-sibling: fn.dim(--spacing --y --md, $global: true),
11 --bottom: iro.props-get(--dims --spacing --y --sm, $global: true), 12 --bottom: fn.dim(--spacing --y --sm, $global: true),
12 ), 13 ),
13 ), 14 ),
15 ), 'dims');
16
17 @include iro.props-store((
14 --colors: ( 18 --colors: (
15 --light: iro.props-get(--colors --fg-hi, $global: true), 19 --light: fn.color(--fg-hi, $global: true),
16 --strong: iro.props-get(--colors --fg-lo, $global: true), 20 --strong: fn.color(--fg-lo, $global: true),
17 ), 21 ),
18 )); 22 ), 'colors');
19 23
20 @include iro.bem-object(iro.props-namespace()) { 24 @include iro.bem-object(iro.props-namespace()) {
21 @include typography.set-font(vars.$font--headline); 25 @include typography.set-font(vars.$font--headline);
22 26
23 display: block; 27 display: block;
24 margin-top: iro.props-get(--dims --in-page-margin --top); 28 margin-top: fn.dim(--in-page-margin --top);
25 margin-bottom: 0; 29 margin-bottom: 0;
26 30
27 & + & { 31 & + & {
28 margin-top: iro.props-get(--dims --in-page-margin --top-sibling); 32 margin-top: fn.dim(--in-page-margin --top-sibling);
29 } 33 }
30 34
31 @include iro.bem-modifier('xxl') { 35 @include iro.bem-modifier('xxl') {
32 color: iro.props-get(--colors --strong); 36 color: fn.color(--strong);
33 font-size: iro.props-get(--dims --font-size --xxxl, $global: true); 37 font-size: fn.dim(--font-size --xxxl, $global: true);
34 } 38 }
35 39
36 @include iro.bem-modifier('xl') { 40 @include iro.bem-modifier('xl') {
37 color: iro.props-get(--colors --strong); 41 color: fn.color(--strong);
38 font-size: iro.props-get(--dims --font-size --xxl, $global: true); 42 font-size: fn.dim(--font-size --xxl, $global: true);
39 } 43 }
40 44
41 @include iro.bem-modifier('lg') { 45 @include iro.bem-modifier('lg') {
42 color: iro.props-get(--colors --strong); 46 color: fn.color(--strong);
43 font-size: iro.props-get(--dims --font-size --xl, $global: true); 47 font-size: fn.dim(--font-size --xl, $global: true);
44 } 48 }
45 49
46 @include iro.bem-modifier('md') { 50 @include iro.bem-modifier('md') {
47 color: iro.props-get(--colors --strong); 51 color: fn.color(--strong);
48 font-size: iro.props-get(--dims --font-size --lg, $global: true); 52 font-size: fn.dim(--font-size --lg, $global: true);
49 } 53 }
50 54
51 @include iro.bem-modifier('sm') { 55 @include iro.bem-modifier('sm') {
52 @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)));
53 57
54 color: iro.props-get(--colors --strong); 58 color: fn.color(--strong);
55 font-size: iro.props-get(--dims --font-size --md, $global: true); 59 font-size: fn.dim(--font-size --md, $global: true);
56 font-weight: 500; 60 font-weight: 500;
57 } 61 }
58 62
59 @include iro.bem-modifier('xs') { 63 @include iro.bem-modifier('xs') {
60 @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)));
61 65
62 color: iro.props-get(--colors --light); 66 color: fn.color(--light);
63 font-size: iro.props-get(--dims --font-size --xs, $global: true); 67 font-size: fn.dim(--font-size --xs, $global: true);
64 font-weight: 500; 68 font-weight: 500;
65 text-transform: uppercase; 69 text-transform: uppercase;
66 } 70 }
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('radio') { 4@include iro.props-namespace('radio') {
4 @include iro.props-store(( 5 @include iro.props-store((
5 --dims: ( 6 --dims: (
6 --diameter: iro.fn-px-to-rem(15px), 7 --diameter: iro.fn-px-to-rem(15px),
7 --label-gap: .6rem, 8 --label-gap: .6rem,
8 --border-width: iro.props-get(--dims --border-width --medium, $global: true), 9 --border-width: fn.dim(--border-width --medium, $global: true),
9 --padding-x: .3rem, 10 --padding-x: .3rem,
10 --padding-y: .3rem, 11 --padding-y: .3rem,
11 --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), 12 --margin-right: fn.dim(--spacing --x --md, $global: true),
12 ), 13 ),
14 ), 'dims');
15
16 @include iro.props-store((
13 --colors: ( 17 --colors: (
14 --circle-border: iro.props-get(--colors --fg-hi, $global: true), 18 --circle-border: fn.color(--fg-hi, $global: true),
15 --circle-bg: iro.props-get(--colors --bg-hi, $global: true), 19 --circle-bg: fn.color(--bg-hi, $global: true),
16 20
17 --hover: ( 21 --hover: (
18 --label: iro.props-get(--colors --fg-lo, $global: true), 22 --label: fn.color(--fg-lo, $global: true),
19 --circle-border: iro.props-get(--colors --fg, $global: true), 23 --circle-border: fn.color(--fg, $global: true),
20 ), 24 ),
21 --accent: ( 25 --accent: (
22 --circle-border: iro.props-get(--colors --accent --primary, $global: true), 26 --circle-border: fn.color(--accent --primary, $global: true),
23 27
24 --hover: ( 28 --hover: (
25 --circle-border: iro.props-get(--colors --accent --primary-lo, $global: true), 29 --circle-border: fn.color(--accent --primary-lo, $global: true),
26 ), 30 ),
27 ), 31 ),
28 --key-focus: ( 32 --key-focus: (
29 --label: iro.props-get(--colors --focus --text, $global: true), 33 --label: fn.color(--focus --text, $global: true),
30 --circle-border: iro.props-get(--colors --focus --fill, $global: true), 34 --circle-border: fn.color(--focus --fill, $global: true),
31 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 35 --shadow: fn.color(--focus --shadow, $global: true),
32 ), 36 ),
33 --disabled: ( 37 --disabled: (
34 --label: iro.props-get(--colors --fg-hi3, $global: true), 38 --label: fn.color(--fg-hi3, $global: true),
35 --circle-border: iro.props-get(--colors --obj-lo, $global: true), 39 --circle-border: fn.color(--obj-lo, $global: true),
36 --circle-bg: iro.props-get(--colors --bg-hi, $global: true), 40 --circle-bg: fn.color(--bg-hi, $global: true),
37 ) 41 )
38 ), 42 ),
39 )); 43 ), 'colors');
40 44
41 @include iro.bem-object(iro.props-namespace()) { 45 @include iro.bem-object(iro.props-namespace()) {
42 display: inline-flex; 46 display: inline-flex;
43 position: relative; 47 position: relative;
44 align-items: flex-start; 48 align-items: flex-start;
45 margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); 49 margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right));
46 margin-left: calc(-1 * iro.props-get(--dims --padding-x)); 50 margin-left: calc(-1 * fn.dim(--padding-x));
47 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 51 padding: fn.dim(--padding-y) fn.dim(--padding-x);
48 52
49 @include iro.bem-elem('circle') { 53 @include iro.bem-elem('circle') {
50 display: block; 54 display: block;
51 position: relative; 55 position: relative;
52 box-sizing: border-box; 56 box-sizing: border-box;
53 flex: 0 0 auto; 57 flex: 0 0 auto;
54 width: iro.props-get(--dims --diameter); 58 width: fn.dim(--diameter);
55 height: iro.props-get(--dims --diameter); 59 height: fn.dim(--diameter);
56 margin-top: calc(.5 * (#{$line-height * 1em} - #{iro.props-get(--dims --diameter)})); 60 margin-top: calc(.5 * (#{$line-height * 1em} - #{fn.dim(--diameter)}));
57 border-radius: 2em; 61 border-radius: 2em;
58 background-color: iro.props-get(--colors --circle-border); 62 background-color: fn.color(--circle-border);
59 63
60 &::after { 64 &::after {
61 content: ''; 65 content: '';
@@ -63,19 +67,19 @@
63 position: absolute; 67 position: absolute;
64 z-index: 10; 68 z-index: 10;
65 top: 50%; 69 top: 50%;
66 left: iro.props-get(--dims --border-width); 70 left: fn.dim(--border-width);
67 width: calc(iro.props-get(--dims --diameter) - 2 * iro.props-get(--dims --border-width)); 71 width: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
68 height: calc(iro.props-get(--dims --diameter) - 2 * iro.props-get(--dims --border-width)); 72 height: calc(fn.dim(--diameter) - 2 * fn.dim(--border-width));
69 transform: translateY(-50%); 73 transform: translateY(-50%);
70 transition: transform .2s ease; 74 transition: transform .2s ease;
71 border-radius: iro.props-get(--dims --diameter); 75 border-radius: fn.dim(--diameter);
72 background-color: iro.props-get(--colors --circle-bg); 76 background-color: fn.color(--circle-bg);
73 } 77 }
74 } 78 }
75 79
76 @include iro.bem-elem('label') { 80 @include iro.bem-elem('label') {
77 align-self: baseline; 81 align-self: baseline;
78 margin-left: iro.props-get(--dims --label-gap); 82 margin-left: fn.dim(--label-gap);
79 } 83 }
80 84
81 @include iro.bem-elem('native') { 85 @include iro.bem-elem('native') {
@@ -91,11 +95,11 @@
91 95
92 &:hover { 96 &:hover {
93 @include iro.bem-sibling-elem('label') { 97 @include iro.bem-sibling-elem('label') {
94 color: iro.props-get(--colors --hover --label); 98 color: fn.color(--hover --label);
95 } 99 }
96 100
97 @include iro.bem-sibling-elem('circle') { 101 @include iro.bem-sibling-elem('circle') {
98 background-color: iro.props-get(--colors --hover --circle-border); 102 background-color: fn.color(--hover --circle-border);
99 } 103 }
100 } 104 }
101 105
@@ -109,14 +113,14 @@
109 113
110 &:disabled { 114 &:disabled {
111 @include iro.bem-sibling-elem('label') { 115 @include iro.bem-sibling-elem('label') {
112 color: iro.props-get(--colors --disabled --label); 116 color: fn.color(--disabled --label);
113 } 117 }
114 118
115 @include iro.bem-sibling-elem('circle') { 119 @include iro.bem-sibling-elem('circle') {
116 background-color: iro.props-get(--colors --disabled --circle-border); 120 background-color: fn.color(--disabled --circle-border);
117 121
118 &::after { 122 &::after {
119 background-color: iro.props-get(--colors --disabled --circle-bg); 123 background-color: fn.color(--disabled --circle-bg);
120 } 124 }
121 } 125 }
122 } 126 }
@@ -124,12 +128,12 @@
124 @include iro.bem-at-theme('keyboard') { 128 @include iro.bem-at-theme('keyboard') {
125 &:focus { 129 &:focus {
126 @include iro.bem-sibling-elem('label') { 130 @include iro.bem-sibling-elem('label') {
127 color: iro.props-get(--colors --key-focus --label); 131 color: fn.color(--key-focus --label);
128 } 132 }
129 133
130 @include iro.bem-sibling-elem('circle') { 134 @include iro.bem-sibling-elem('circle') {
131 background-color: iro.props-get(--colors --key-focus --circle-border); 135 background-color: fn.color(--key-focus --circle-border);
132 box-shadow: iro.props-get(--colors --key-focus --shadow); 136 box-shadow: fn.color(--key-focus --shadow);
133 } 137 }
134 } 138 }
135 } 139 }
@@ -139,28 +143,28 @@
139 @include iro.bem-elem('native') { 143 @include iro.bem-elem('native') {
140 &:checked { 144 &:checked {
141 @include iro.bem-sibling-elem('circle') { 145 @include iro.bem-sibling-elem('circle') {
142 background-color: iro.props-get(--colors --accent --circle-border); 146 background-color: fn.color(--accent --circle-border);
143 } 147 }
144 148
145 &:hover { 149 &:hover {
146 @include iro.bem-sibling-elem('circle') { 150 @include iro.bem-sibling-elem('circle') {
147 background-color: iro.props-get(--colors --accent --hover --circle-border); 151 background-color: fn.color(--accent --hover --circle-border);
148 } 152 }
149 } 153 }
150 } 154 }
151 155
152 &:disabled { 156 &:disabled {
153 @include iro.bem-sibling-elem('circle') { 157 @include iro.bem-sibling-elem('circle') {
154 background-color: iro.props-get(--colors --disabled --circle-border); 158 background-color: fn.color(--disabled --circle-border);
155 159
156 &::after { 160 &::after {
157 background-color: iro.props-get(--colors --disabled --circle-bg); 161 background-color: fn.color(--disabled --circle-bg);
158 } 162 }
159 } 163 }
160 164
161 &:checked { 165 &:checked {
162 @include iro.bem-sibling-elem('circle') { 166 @include iro.bem-sibling-elem('circle') {
163 background-color: iro.props-get(--colors --disabled --circle-border); 167 background-color: fn.color(--disabled --circle-border);
164 } 168 }
165 } 169 }
166 } 170 }
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('rule') { 4@include iro.props-namespace('rule') {
4 @include iro.props-store(( 5 @include iro.props-store((
5 --dims: ( 6 --dims: (
6 --margin-y: iro.props-get(--dims --spacing --y --xs, $global: true), 7 --margin-y: fn.dim(--spacing --y --xs, $global: true),
7 8
8 --strong: ( 9 --strong: (
9 --border-width: iro.props-get(--dims --border-width --thick, $global: true), 10 --border-width: fn.dim(--border-width --thick, $global: true),
10 --label-font-size: iro.props-get(--dims --font-size --md, $global: true), 11 --label-font-size: fn.dim(--font-size --md, $global: true),
11 ), 12 ),
12 --medium: ( 13 --medium: (
13 --border-width: iro.props-get(--dims --border-width --medium, $global: true), 14 --border-width: fn.dim(--border-width --medium, $global: true),
14 --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), 15 --label-font-size: fn.dim(--font-size --sm, $global: true),
15 ), 16 ),
16 --faint: ( 17 --faint: (
17 --border-width: iro.props-get(--dims --border-width --thin, $global: true), 18 --border-width: fn.dim(--border-width --thin, $global: true),
18 --label-font-size: iro.props-get(--dims --font-size --xs, $global: true), 19 --label-font-size: fn.dim(--font-size --xs, $global: true),
19 ), 20 ),
20 ), 21 ),
22 ), 'dims');
23
24 @include iro.props-store((
21 --colors: ( 25 --colors: (
22 --strong: ( 26 --strong: (
23 --bg: iro.props-get(--colors --fg, $global: true), 27 --bg: fn.color(--fg, $global: true),
24 --label: iro.props-get(--colors --fg, $global: true), 28 --label: fn.color(--fg, $global: true),
25 ), 29 ),
26 --medium: ( 30 --medium: (
27 --bg: iro.props-get(--colors --obj, $global: true), 31 --bg: fn.color(--obj, $global: true),
28 --label: iro.props-get(--colors --fg-hi, $global: true), 32 --label: fn.color(--fg-hi, $global: true),
29 ), 33 ),
30 --faint: ( 34 --faint: (
31 --bg: iro.props-get(--colors --obj, $global: true), 35 --bg: fn.color(--obj, $global: true),
32 --label: iro.props-get(--colors --fg-hi2, $global: true), 36 --label: fn.color(--fg-hi2, $global: true),
33 ), 37 ),
34 ), 38 ),
35 )); 39 ), 'colors');
36 40
37 @include iro.bem-object(iro.props-namespace()) { 41 @include iro.bem-object(iro.props-namespace()) {
38 display: block; 42 display: block;
39 height: iro.props-get(--dims --strong --border-width); 43 height: fn.dim(--strong --border-width);
40 margin-top: iro.props-get(--dims --margin-y); 44 margin-top: fn.dim(--margin-y);
41 margin-bottom: iro.props-get(--dims --margin-y); 45 margin-bottom: fn.dim(--margin-y);
42 background-color: iro.props-get(--colors --strong --bg); 46 background-color: fn.color(--strong --bg);
43 47
44 @include iro.bem-modifier('medium') { 48 @include iro.bem-modifier('medium') {
45 height: iro.props-get(--dims --medium --border-width); 49 height: fn.dim(--medium --border-width);
46 background-color: iro.props-get(--colors --medium --bg); 50 background-color: fn.color(--medium --bg);
47 } 51 }
48 52
49 @include iro.bem-modifier('faint') { 53 @include iro.bem-modifier('faint') {
50 height: iro.props-get(--dims --faint --border-width); 54 height: fn.dim(--faint --border-width);
51 background-color: iro.props-get(--colors --faint --bg); 55 background-color: fn.color(--faint --bg);
52 } 56 }
53 57
54 @include iro.bem-modifier('labelled') { 58 @include iro.bem-modifier('labelled') {
@@ -66,7 +70,7 @@
66 flex: 1 1 auto; 70 flex: 1 1 auto;
67 width: 100%; 71 width: 100%;
68 height: 3px; 72 height: 3px;
69 background-color: iro.props-get(--colors --strong --bg); 73 background-color: fn.color(--strong --bg);
70 } 74 }
71 75
72 &::before { 76 &::before {
@@ -79,8 +83,8 @@
79 83
80 @include iro.bem-elem('label') { 84 @include iro.bem-elem('label') {
81 flex: 0 0 auto; 85 flex: 0 0 auto;
82 color: iro.props-get(--colors --strong --label); 86 color: fn.color(--strong --label);
83 font-size: iro.props-get(--dims --strong --label-font-size); 87 font-size: fn.dim(--strong --label-font-size);
84 font-weight: 700; 88 font-weight: 700;
85 letter-spacing: .5px; 89 letter-spacing: .5px;
86 text-transform: uppercase; 90 text-transform: uppercase;
@@ -90,12 +94,12 @@
90 &::before, 94 &::before,
91 &::after { 95 &::after {
92 height: 2px; 96 height: 2px;
93 background-color: iro.props-get(--colors --medium --bg); 97 background-color: fn.color(--medium --bg);
94 } 98 }
95 99
96 @include iro.bem-elem('label') { 100 @include iro.bem-elem('label') {
97 color: iro.props-get(--colors --medium --label); 101 color: fn.color(--medium --label);
98 font-size: iro.props-get(--dims --medium --label-font-size); 102 font-size: fn.dim(--medium --label-font-size);
99 font-weight: 500; 103 font-weight: 500;
100 } 104 }
101 } 105 }
@@ -104,12 +108,12 @@
104 &::before, 108 &::before,
105 &::after { 109 &::after {
106 height: 1px; 110 height: 1px;
107 background-color: iro.props-get(--colors --faint --bg); 111 background-color: fn.color(--faint --bg);
108 } 112 }
109 113
110 @include iro.bem-elem('label') { 114 @include iro.bem-elem('label') {
111 color: iro.props-get(--colors --faint --label); 115 color: fn.color(--faint --label);
112 font-size: iro.props-get(--dims --faint --label-font-size); 116 font-size: fn.dim(--faint --label-font-size);
113 font-weight: 500; 117 font-weight: 500;
114 } 118 }
115 } 119 }
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('switch') { 4@include iro.props-namespace('switch') {
4 @include iro.props-store(( 5 @include iro.props-store((
@@ -6,61 +7,64 @@
6 --width: iro.fn-px-to-rem(26px), 7 --width: iro.fn-px-to-rem(26px),
7 --height: iro.fn-px-to-rem(15px), 8 --height: iro.fn-px-to-rem(15px),
8 --label-gap: .6rem, 9 --label-gap: .6rem,
9 --border-width: iro.props-get(--dims --border-width --medium, $global: true), 10 --border-width: fn.dim(--border-width --medium, $global: true),
10 --padding-x: .3rem, 11 --padding-x: .3rem,
11 --padding-y: .3rem, 12 --padding-y: .3rem,
12 --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), 13 --margin-right: fn.dim(--spacing --x --md, $global: true),
13 ), 14 ),
15 ), 'dims');
16
17 @include iro.props-store((
14 --colors: ( 18 --colors: (
15 --track-bg: iro.props-get(--colors --obj, $global: true), 19 --track-bg: fn.color(--obj, $global: true),
16 --handle-border: iro.props-get(--colors --fg-hi, $global: true), 20 --handle-border: fn.color(--fg-hi, $global: true),
17 --handle-bg: iro.props-get(--colors --bg-hi, $global: true), 21 --handle-bg: fn.color(--bg-hi, $global: true),
18 22
19 --hover: ( 23 --hover: (
20 --label: iro.props-get(--colors --fg-lo, $global: true), 24 --label: fn.color(--fg-lo, $global: true),
21 --handle-border: iro.props-get(--colors --fg, $global: true), 25 --handle-border: fn.color(--fg, $global: true),
22 ), 26 ),
23 --accent: ( 27 --accent: (
24 --handle-border: iro.props-get(--colors --accent --primary, $global: true), 28 --handle-border: fn.color(--accent --primary, $global: true),
25 29
26 --hover: ( 30 --hover: (
27 --handle-border: iro.props-get(--colors --accent --primary-lo, $global: true), 31 --handle-border: fn.color(--accent --primary-lo, $global: true),
28 ), 32 ),
29 ), 33 ),
30 --key-focus: ( 34 --key-focus: (
31 --label: iro.props-get(--colors --focus --text, $global: true), 35 --label: fn.color(--focus --text, $global: true),
32 --track-bg: iro.props-get(--colors --focus --fill, $global: true), 36 --track-bg: fn.color(--focus --fill, $global: true),
33 --handle-border: iro.props-get(--colors --focus --fill, $global: true), 37 --handle-border: fn.color(--focus --fill, $global: true),
34 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 38 --shadow: fn.color(--focus --shadow, $global: true),
35 ), 39 ),
36 --disabled: ( 40 --disabled: (
37 --label: iro.props-get(--colors --fg-hi3, $global: true), 41 --label: fn.color(--fg-hi3, $global: true),
38 --track-bg: iro.props-get(--colors --obj, $global: true), 42 --track-bg: fn.color(--obj, $global: true),
39 --handle-border: iro.props-get(--colors --obj-lo, $global: true), 43 --handle-border: fn.color(--obj-lo, $global: true),
40 --handle-bg: iro.props-get(--colors --bg-hi, $global: true), 44 --handle-bg: fn.color(--bg-hi, $global: true),
41 ) 45 )
42 ), 46 ),
43 )); 47 ), 'colors');
44 48
45 @include iro.bem-object(iro.props-namespace()) { 49 @include iro.bem-object(iro.props-namespace()) {
46 display: inline-flex; 50 display: inline-flex;
47 position: relative; 51 position: relative;
48 align-items: flex-start; 52 align-items: flex-start;
49 margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); 53 margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right));
50 margin-left: calc(-1 * iro.props-get(--dims --padding-x)); 54 margin-left: calc(-1 * fn.dim(--padding-x));
51 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values 55 padding: fn.dim(--padding-y) fn.dim(--padding-x); // sass-lint:disable-line shorthand-values
52 56
53 @include iro.bem-elem('indicator') { 57 @include iro.bem-elem('indicator') {
54 display: block; 58 display: block;
55 position: relative; 59 position: relative;
56 box-sizing: border-box; 60 box-sizing: border-box;
57 flex: 0 0 auto; 61 flex: 0 0 auto;
58 width: iro.props-get(--dims --width); 62 width: fn.dim(--width);
59 height: iro.props-get(--dims --height); 63 height: fn.dim(--height);
60 margin-top: calc(.5 * ($line-height * 1em - iro.props-get(--dims --height))); 64 margin-top: calc(.5 * ($line-height * 1em - fn.dim(--height)));
61 transition: background-color .2s ease; 65 transition: background-color .2s ease;
62 border-radius: 2em; 66 border-radius: 2em;
63 background-color: iro.props-get(--colors --track-bg); 67 background-color: fn.color(--track-bg);
64 68
65 &::after { 69 &::after {
66 content: ''; 70 content: '';
@@ -69,19 +73,19 @@
69 z-index: 10; 73 z-index: 10;
70 top: 50%; 74 top: 50%;
71 left: 0; 75 left: 0;
72 width: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); 76 width: calc(fn.dim(--height) - 2 * fn.dim(--border-width));
73 height: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); 77 height: calc(fn.dim(--height) - 2 * fn.dim(--border-width));
74 transform: translateY(-50%); 78 transform: translateY(-50%);
75 transition: left .2s ease; 79 transition: left .2s ease;
76 border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --handle-border); 80 border: fn.dim(--border-width) solid fn.color(--handle-border);
77 border-radius: iro.props-get(--dims --width); 81 border-radius: fn.dim(--width);
78 background-color: iro.props-get(--colors --handle-bg); 82 background-color: fn.color(--handle-bg);
79 } 83 }
80 } 84 }
81 85
82 @include iro.bem-elem('label') { 86 @include iro.bem-elem('label') {
83 align-self: baseline; 87 align-self: baseline;
84 margin-left: iro.props-get(--dims --label-gap); 88 margin-left: fn.dim(--label-gap);
85 } 89 }
86 90
87 @include iro.bem-elem('native') { 91 @include iro.bem-elem('native') {
@@ -97,32 +101,32 @@
97 101
98 &:hover { 102 &:hover {
99 @include iro.bem-sibling-elem('label') { 103 @include iro.bem-sibling-elem('label') {
100 color: iro.props-get(--colors --hover --label); 104 color: fn.color(--hover --label);
101 } 105 }
102 106
103 @include iro.bem-sibling-elem('indicator') { 107 @include iro.bem-sibling-elem('indicator') {
104 &::after { 108 &::after {
105 border-color: iro.props-get(--colors --hover --handle-border); 109 border-color: fn.color(--hover --handle-border);
106 } 110 }
107 } 111 }
108 } 112 }
109 113
110 &:checked { 114 &:checked {
111 @include iro.bem-sibling-elem('indicator') { 115 @include iro.bem-sibling-elem('indicator') {
112 background-color: iro.props-get(--colors --handle-border); 116 background-color: fn.color(--handle-border);
113 117
114 &::after { 118 &::after {
115 left: calc(#{iro.props-get(--dims --width)} - #{iro.props-get(--dims --height)} + .5px); 119 left: calc(#{fn.dim(--width)} - #{fn.dim(--height)} + .5px);
116 border-color: iro.props-get(--colors --handle-border); 120 border-color: fn.color(--handle-border);
117 } 121 }
118 } 122 }
119 123
120 &:hover { 124 &:hover {
121 @include iro.bem-sibling-elem('indicator') { 125 @include iro.bem-sibling-elem('indicator') {
122 background-color: iro.props-get(--colors --hover --handle-border); 126 background-color: fn.color(--hover --handle-border);
123 127
124 &::after { 128 &::after {
125 border-color: iro.props-get(--colors --hover --handle-border); 129 border-color: fn.color(--hover --handle-border);
126 } 130 }
127 } 131 }
128 } 132 }
@@ -130,24 +134,24 @@
130 134
131 &:disabled { 135 &:disabled {
132 @include iro.bem-sibling-elem('label') { 136 @include iro.bem-sibling-elem('label') {
133 color: iro.props-get(--colors --disabled --label); 137 color: fn.color(--disabled --label);
134 } 138 }
135 139
136 @include iro.bem-sibling-elem('indicator') { 140 @include iro.bem-sibling-elem('indicator') {
137 background-color: iro.props-get(--colors --disabled --track-bg); 141 background-color: fn.color(--disabled --track-bg);
138 142
139 &::after { 143 &::after {
140 border-color: iro.props-get(--colors --disabled --handle-border); 144 border-color: fn.color(--disabled --handle-border);
141 background-color: iro.props-get(--colors --disabled --handle-bg); 145 background-color: fn.color(--disabled --handle-bg);
142 } 146 }
143 } 147 }
144 148
145 &:checked { 149 &:checked {
146 @include iro.bem-sibling-elem('indicator') { 150 @include iro.bem-sibling-elem('indicator') {
147 background-color: iro.props-get(--colors --disabled --handle-border); 151 background-color: fn.color(--disabled --handle-border);
148 152
149 &::after { 153 &::after {
150 border-color: iro.props-get(--colors --disabled --handle-border); 154 border-color: fn.color(--disabled --handle-border);
151 } 155 }
152 } 156 }
153 } 157 }
@@ -156,19 +160,19 @@
156 @include iro.bem-at-theme('keyboard') { 160 @include iro.bem-at-theme('keyboard') {
157 &:focus { 161 &:focus {
158 @include iro.bem-sibling-elem('label') { 162 @include iro.bem-sibling-elem('label') {
159 color: iro.props-get(--colors --key-focus --label); 163 color: fn.color(--key-focus --label);
160 } 164 }
161 165
162 @include iro.bem-sibling-elem('indicator') { 166 @include iro.bem-sibling-elem('indicator') {
163 &::after { 167 &::after {
164 border-color: iro.props-get(--colors --key-focus --handle-border); 168 border-color: fn.color(--key-focus --handle-border);
165 box-shadow: iro.props-get(--colors --key-focus --shadow); 169 box-shadow: fn.color(--key-focus --shadow);
166 } 170 }
167 } 171 }
168 172
169 &:checked { 173 &:checked {
170 @include iro.bem-sibling-elem('indicator') { 174 @include iro.bem-sibling-elem('indicator') {
171 background-color: iro.props-get(--colors --key-focus --track-bg); 175 background-color: fn.color(--key-focus --track-bg);
172 } 176 }
173 } 177 }
174 } 178 }
@@ -179,19 +183,19 @@
179 @include iro.bem-elem('native') { 183 @include iro.bem-elem('native') {
180 &:checked { 184 &:checked {
181 @include iro.bem-sibling-elem('indicator') { 185 @include iro.bem-sibling-elem('indicator') {
182 background-color: iro.props-get(--colors --accent --handle-border); 186 background-color: fn.color(--accent --handle-border);
183 187
184 &::after { 188 &::after {
185 border-color: iro.props-get(--colors --accent --handle-border); 189 border-color: fn.color(--accent --handle-border);
186 } 190 }
187 } 191 }
188 192
189 &:hover { 193 &:hover {
190 @include iro.bem-sibling-elem('indicator') { 194 @include iro.bem-sibling-elem('indicator') {
191 background-color: iro.props-get(--colors --accent --hover --handle-border); 195 background-color: fn.color(--accent --hover --handle-border);
192 196
193 &::after { 197 &::after {
194 border-color: iro.props-get(--colors --accent --hover --handle-border); 198 border-color: fn.color(--accent --hover --handle-border);
195 } 199 }
196 } 200 }
197 } 201 }
@@ -199,15 +203,15 @@
199 203
200 &:disabled { 204 &:disabled {
201 @include iro.bem-sibling-elem('label') { 205 @include iro.bem-sibling-elem('label') {
202 color: iro.props-get(--colors --disabled --label); 206 color: fn.color(--disabled --label);
203 } 207 }
204 208
205 &:checked { 209 &:checked {
206 @include iro.bem-sibling-elem('indicator') { 210 @include iro.bem-sibling-elem('indicator') {
207 background-color: iro.props-get(--colors --disabled --handle-border); 211 background-color: fn.color(--disabled --handle-border);
208 212
209 &::after { 213 &::after {
210 border-color: iro.props-get(--colors --disabled --handle-border); 214 border-color: fn.color(--disabled --handle-border);
211 } 215 }
212 } 216 }
213 } 217 }
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 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2@use '../vars'; 3@use '../vars';
3@use '../mixins/typography'; 4@use '../mixins/typography';
4 5
5@mixin invalid { 6@mixin invalid {
6 @include iro.bem-sibling-elem('bg') { 7 @include iro.bem-sibling-elem('bg') {
7 border-color: iro.props-get(--colors --error --border); 8 border-color: fn.color(--error --border);
8 box-shadow: iro.props-get(--colors --error --shadow); 9 box-shadow: fn.color(--error --shadow);
9 } 10 }
10 11
11 &:hover { 12 &:hover {
12 @include iro.bem-sibling-elem('bg') { 13 @include iro.bem-sibling-elem('bg') {
13 border-color: iro.props-get(--colors --error --hover --border); 14 border-color: fn.color(--error --hover --border);
14 box-shadow: iro.props-get(--colors --error --hover --shadow); 15 box-shadow: fn.color(--error --hover --shadow);
15 } 16 }
16 } 17 }
17 18
18 &:focus { 19 &:focus {
19 @include iro.bem-sibling-elem('bg') { 20 @include iro.bem-sibling-elem('bg') {
20 border-color: iro.props-get(--colors --error --focus --border); 21 border-color: fn.color(--error --focus --border);
21 box-shadow: iro.props-get(--colors --error --focus --shadow); 22 box-shadow: fn.color(--error --focus --shadow);
22 } 23 }
23 } 24 }
24} 25}
25 26
26@mixin keyboard-focus { 27@mixin keyboard-focus {
27 @include iro.bem-sibling-elem('bg') { 28 @include iro.bem-sibling-elem('bg') {
28 border-color: iro.props-get(--colors --key-focus --border); 29 border-color: fn.color(--key-focus --border);
29 box-shadow: iro.props-get(--colors --key-focus --shadow); 30 box-shadow: fn.color(--key-focus --shadow);
30 } 31 }
31} 32}
32 33
@@ -35,60 +36,63 @@
35 --dims: ( 36 --dims: (
36 --padding-x: .6rem, 37 --padding-x: .6rem,
37 --padding-y: .5rem, 38 --padding-y: .5rem,
38 --border-width: iro.props-get(--dims --border-width --thin, $global: true), 39 --border-width: fn.dim(--border-width --thin, $global: true),
39 --border-radius: 2px, 40 --border-radius: 2px,
40 41
41 --focus: ( 42 --focus: (
42 --border-width: iro.props-get(--dims --border-width --medium, $global: true), 43 --border-width: fn.dim(--border-width --medium, $global: true),
43 ) 44 )
44 ), 45 ),
46 ), 'dims');
47
48 @include iro.props-store((
45 --colors: ( 49 --colors: (
46 --bg: iro.props-get(--colors --bg-hi2, $global: true), 50 --bg: fn.color(--bg-hi2, $global: true),
47 --placeholder: iro.props-get(--colors --fg-hi2, $global: true), 51 --placeholder: fn.color(--fg-hi2, $global: true),
48 --text: iro.props-get(--colors --fg, $global: true), 52 --text: fn.color(--fg, $global: true),
49 --border: iro.props-get(--colors --obj-lo, $global: true), 53 --border: fn.color(--obj-lo, $global: true),
50 --shadow: 0 0 0 0 transparent, 54 --shadow: 0 0 0 0 transparent,
51 55
52 --hover: ( 56 --hover: (
53 --border: iro.props-get(--colors --fg-hi2, $global: true), 57 --border: fn.color(--fg-hi2, $global: true),
54 --shadow: 0 0 0 0 transparent, 58 --shadow: 0 0 0 0 transparent,
55 ), 59 ),
56 --focus: ( 60 --focus: (
57 --border: iro.props-get(--colors --accent --primary, $global: true), 61 --border: fn.color(--accent --primary, $global: true),
58 --shadow: 0 0 0 0 transparent, 62 --shadow: 0 0 0 0 transparent,
59 ), 63 ),
60 --key-focus: ( 64 --key-focus: (
61 --border: iro.props-get(--colors --focus --fill, $global: true), 65 --border: fn.color(--focus --fill, $global: true),
62 --shadow: iro.props-get(--colors --focus --shadow, $global: true), 66 --shadow: fn.color(--focus --shadow, $global: true),
63 ), 67 ),
64 --error: ( 68 --error: (
65 --border: iro.props-get(--colors --accent --error-hi, $global: true), 69 --border: fn.color(--accent --error-hi, $global: true),
66 --shadow: 0 0 0 0 transparent, 70 --shadow: 0 0 0 0 transparent,
67 71
68 --hover: ( 72 --hover: (
69 --border: iro.props-get(--colors --accent --error, $global: true), 73 --border: fn.color(--accent --error, $global: true),
70 --shadow: 0 0 0 0 transparent, 74 --shadow: 0 0 0 0 transparent,
71 ), 75 ),
72 --focus: ( 76 --focus: (
73 --border: iro.props-get(--colors --accent --error, $global: true), 77 --border: fn.color(--accent --error, $global: true),
74 --shadow: 0 0 0 0 transparent, 78 --shadow: 0 0 0 0 transparent,
75 ), 79 ),
76 ), 80 ),
77 --disabled: ( 81 --disabled: (
78 --bg: iro.props-get(--colors --obj-hi, $global: true), 82 --bg: fn.color(--obj-hi, $global: true),
79 --placeholder: iro.props-get(--colors --fg-hi3, $global: true), 83 --placeholder: fn.color(--fg-hi3, $global: true),
80 --text: iro.props-get(--colors --fg-hi3, $global: true), 84 --text: fn.color(--fg-hi3, $global: true),
81 --border: iro.props-get(--colors --obj-hi, $global: true), 85 --border: fn.color(--obj-hi, $global: true),
82 --shadow: 0 0 0 0 transparent, 86 --shadow: 0 0 0 0 transparent,
83 ), 87 ),
84 ), 88 ),
85 )); 89 ), 'colors');
86 90
87 @include iro.bem-object(iro.props-namespace()) { 91 @include iro.bem-object(iro.props-namespace()) {
88 position: relative; 92 position: relative;
89 min-width: 0; 93 min-width: 0;
90 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 94 padding: fn.dim(--padding-y) fn.dim(--padding-x);
91 background-color: iro.props-get(--colors --bg); 95 background-color: fn.color(--bg);
92 96
93 @include iro.bem-elem('bg') { 97 @include iro.bem-elem('bg') {
94 display: block; 98 display: block;
@@ -97,9 +101,9 @@
97 right: 0; 101 right: 0;
98 bottom: 0; 102 bottom: 0;
99 left: 0; 103 left: 0;
100 border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --border); 104 border: fn.dim(--border-width) solid fn.color(--border);
101 border-radius: iro.props-get(--dims --border-radius); 105 border-radius: fn.dim(--border-radius);
102 box-shadow: iro.props-get(--colors --shadow); 106 box-shadow: fn.color(--shadow);
103 pointer-events: none; 107 pointer-events: none;
104 } 108 }
105 109
@@ -107,19 +111,19 @@
107 @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); 111 @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
108 112
109 width: 100%; 113 width: 100%;
110 color: iro.props-get(--colors --text); 114 color: fn.color(--text);
111 resize: none; 115 resize: none;
112 116
113 &::placeholder { 117 &::placeholder {
114 opacity: 1; 118 opacity: 1;
115 color: iro.props-get(--colors --placeholder); 119 color: fn.color(--placeholder);
116 font-style: italic; 120 font-style: italic;
117 } 121 }
118 122
119 &:hover { 123 &:hover {
120 @include iro.bem-sibling-elem('bg') { 124 @include iro.bem-sibling-elem('bg') {
121 border-color: iro.props-get(--colors --hover --border); 125 border-color: fn.color(--hover --border);
122 box-shadow: iro.props-get(--colors --hover --shadow); 126 box-shadow: fn.color(--hover --shadow);
123 } 127 }
124 } 128 }
125 129
@@ -127,15 +131,15 @@
127 outline: 0; 131 outline: 0;
128 132
129 @include iro.bem-sibling-elem('bg') { 133 @include iro.bem-sibling-elem('bg') {
130 $offset: calc(iro.props-get(--dims --border-width) - iro.props-get(--dims --focus --border-width)); 134 $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));
131 135
132 top: $offset; 136 top: $offset;
133 right: $offset; 137 right: $offset;
134 bottom: $offset; 138 bottom: $offset;
135 left: $offset; 139 left: $offset;
136 border: iro.props-get(--dims --focus --border-width) solid iro.props-get(--colors --focus --border); 140 border: fn.dim(--focus --border-width) solid fn.color(--focus --border);
137 border-radius: calc(iro.props-get(--dims --border-radius) - $offset); 141 border-radius: calc(fn.dim(--border-radius) - $offset);
138 box-shadow: iro.props-get(--colors --focus --shadow); 142 box-shadow: fn.color(--focus --shadow);
139 } 143 }
140 } 144 }
141 145
@@ -172,29 +176,29 @@
172 176
173 @include iro.bem-elem('native') { 177 @include iro.bem-elem('native') {
174 box-sizing: border-box; 178 box-sizing: border-box;
175 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 179 padding: fn.dim(--padding-y) fn.dim(--padding-x);
176 } 180 }
177 } 181 }
178 182
179 @include iro.bem-is('disabled') { 183 @include iro.bem-is('disabled') {
180 background-color: iro.props-get(--colors --disabled --bg); 184 background-color: fn.color(--disabled --bg);
181 185
182 @include iro.bem-elem('native') { 186 @include iro.bem-elem('native') {
183 color: iro.props-get(--colors --disabled --text); 187 color: fn.color(--disabled --text);
184 188
185 &::placeholder { 189 &::placeholder {
186 color: iro.props-get(--colors --disabled --placeholder); 190 color: fn.color(--disabled --placeholder);
187 } 191 }
188 } 192 }
189 193
190 @include iro.bem-elem('bg') { 194 @include iro.bem-elem('bg') {
191 border-color: iro.props-get(--colors --disabled --border); 195 border-color: fn.color(--disabled --border);
192 } 196 }
193 197
194 @include iro.bem-is('invalid') { 198 @include iro.bem-is('invalid') {
195 @include iro.bem-elem('native') { 199 @include iro.bem-elem('native') {
196 @include iro.bem-sibling-elem('bg') { 200 @include iro.bem-sibling-elem('bg') {
197 border-color: iro.props-get(--colors --disabled --border); 201 border-color: fn.color(--disabled --border);
198 } 202 }
199 } 203 }
200 } 204 }
@@ -202,7 +206,7 @@
202 @include iro.bem-elem('native') { 206 @include iro.bem-elem('native') {
203 &:invalid { 207 &:invalid {
204 @include iro.bem-sibling-elem('bg') { 208 @include iro.bem-sibling-elem('bg') {
205 border-color: iro.props-get(--colors --disabled --border); 209 border-color: fn.color(--disabled --border);
206 } 210 }
207 } 211 }
208 } 212 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 13:59:26 +0000