diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-button.scss | 194 | ||||
-rw-r--r-- | src/objects/_button.scss | 112 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 112 | ||||
-rw-r--r-- | src/objects/_field-label.scss | 40 | ||||
-rw-r--r-- | src/objects/_heading.scss | 44 | ||||
-rw-r--r-- | src/objects/_radio.scss | 86 | ||||
-rw-r--r-- | src/objects/_rule.scss | 66 | ||||
-rw-r--r-- | src/objects/_switch.scss | 114 | ||||
-rw-r--r-- | src/objects/_text-field.scss | 96 |
9 files changed, 450 insertions, 414 deletions
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 | } |