aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 07:52:13 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 07:52:13 +0100
commitdd5f3c463fab336d694f426dcad11a1783590fc9 (patch)
treefaebf738a9556eaa393371852ed86550d4adf66a /src
parentFix errors from transition from node-sass to sass (diff)
downloadiro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.gz
iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.bz2
iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.zip
Ported from import syntax to modules
Diffstat (limited to 'src')
-rw-r--r--src/_bem.scss27
-rw-r--r--src/_contexts.scss114
-rw-r--r--src/_easing.scss172
-rw-r--r--src/_functions.scss49
-rw-r--r--src/_gradients.scss127
-rw-r--r--src/_harmony.scss24
-rw-r--r--src/_props.scss127
-rw-r--r--src/_responsive.scss89
-rw-r--r--src/_vars.scss2
-rw-r--r--src/bem-shortcodes.scss349
-rw-r--r--src/bem/_block.scss166
-rw-r--r--src/bem/_debug.scss8
-rw-r--r--src/bem/_element.scss191
-rw-r--r--src/bem/_functions.scss6
-rw-r--r--src/bem/_modifier.scss63
-rw-r--r--src/bem/_multi.scss56
-rw-r--r--src/bem/_state.scss50
-rw-r--r--src/bem/_suffix.scss37
-rw-r--r--src/bem/_theme.scss27
-rw-r--r--src/bem/_validators.scss68
-rw-r--r--src/bem/_vars.scss20
-rw-r--r--src/harmony-shortcodes.scss35
-rw-r--r--src/main.scss9
-rw-r--r--src/prep.scss2
-rw-r--r--src/props-shortcodes.scss79
-rw-r--r--src/responsive-shortcodes.scss14
26 files changed, 753 insertions, 1158 deletions
diff --git a/src/_bem.scss b/src/_bem.scss
index b6032ea..e34b79b 100644
--- a/src/_bem.scss
+++ b/src/_bem.scss
@@ -47,16 +47,19 @@
47/// @access public 47/// @access public
48//// 48////
49 49
50@import 'bem/vars'; 50@forward 'bem/vars';
51@import 'bem/functions'; 51@forward 'bem/functions';
52@import 'bem/validators'; 52@forward 'bem/validators';
53@import 'bem/block'; 53@forward 'bem/block';
54@import 'bem/element'; 54@forward 'bem/element';
55@import 'bem/modifier'; 55@forward 'bem/modifier';
56@import 'bem/suffix'; 56@forward 'bem/suffix';
57@import 'bem/state'; 57@forward 'bem/state';
58@import 'bem/theme'; 58@forward 'bem/theme';
59@import 'bem/multi'; 59@forward 'bem/multi';
60@import 'bem/debug'; 60@forward 'bem/debug';
61 61
62@include iro-context-stack-create($iro-bem-context-id); 62@use 'bem/vars';
63@use './contexts';
64
65@include contexts.create(vars.$context-id);
diff --git a/src/_contexts.scss b/src/_contexts.scss
index 9fe0e8c..8542056 100644
--- a/src/_contexts.scss
+++ b/src/_contexts.scss
@@ -5,16 +5,18 @@
5/// It's an essential part for the BEM-related mixins. 5/// It's an essential part for the BEM-related mixins.
6/// 6///
7/// If you want to create a new context, the easiest pattern is to create a new mixin and wrap 7/// If you want to create a new context, the easiest pattern is to create a new mixin and wrap
8/// the @content between a pair of iro-context-push and iro-context-pop. 8/// the @content between a pair of push and pop.
9/// From within the @content, you can access the context's data with iro-context-get. 9/// From within the @content, you can access the context's data with get.
10/// To make the compilation fail if a certain nesting order is violated, use 10/// To make the compilation fail if a certain nesting order is violated, use
11/// iro-context-assert-stack-must-contain and iro-context-assert-stack-must-not-contain. 11/// assert-stack-must-contain and assert-stack-must-not-contain.
12/// 12///
13/// @group Contexts 13/// @group Contexts
14/// 14///
15/// @access public 15/// @access public
16//// 16////
17 17
18@use './functions';
19
18/// 20///
19/// Map of all context stacks. 21/// Map of all context stacks.
20/// 22///
@@ -22,7 +24,7 @@
22/// 24///
23/// @access private 25/// @access private
24/// 26///
25$iro-context-stacks: (); 27$stacks: ();
26 28
27/// 29///
28/// Create a new context stack. 30/// Create a new context stack.
@@ -31,8 +33,8 @@ $iro-context-stacks: ();
31/// 33///
32/// @throw If context stack already exists 34/// @throw If context stack already exists
33/// 35///
34@mixin iro-context-stack-create($stack-id) { 36@mixin create($stack-id) {
35 $noop: iro-context-stack-create($stack-id); 37 $noop: create($stack-id);
36} 38}
37 39
38/// 40///
@@ -40,12 +42,12 @@ $iro-context-stacks: ();
40/// 42///
41/// @param {string} $stack-id - ID of context stack 43/// @param {string} $stack-id - ID of context stack
42/// 44///
43@function iro-context-stack-create($stack-id) { 45@function create($stack-id) {
44 @if map-has-key($iro-context-stacks, $stack-id) { 46 @if map-has-key($stacks, $stack-id) {
45 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 47 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
46 } 48 }
47 49
48 $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: ())) !global; 50 $stacks: map-merge($stacks, ($stack-id: ())) !global;
49 51
50 @return null; 52 @return null;
51} 53}
@@ -55,8 +57,8 @@ $iro-context-stacks: ();
55/// 57///
56/// @param {string} $stack-id - ID of context stack 58/// @param {string} $stack-id - ID of context stack
57/// 59///
58@mixin iro-context-stack-clear($stack-id) { 60@mixin clear($stack-id) {
59 $noop: iro-context-stack-clear($stack-id); 61 $noop: clear($stack-id);
60} 62}
61 63
62/// 64///
@@ -64,13 +66,13 @@ $iro-context-stacks: ();
64/// 66///
65/// @param {string} $stack-id - ID of context stack 67/// @param {string} $stack-id - ID of context stack
66/// 68///
67@function iro-context-stack-clear($stack-id) { 69@function clear($stack-id) {
68 @if not map-has-key($iro-context-stacks, $stack-id) { 70 @if not map-has-key($stacks, $stack-id) {
69 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 71 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
70 } 72 }
71 73
72 $context-stack: (); 74 $context-stack: ();
73 $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; 75 $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global;
74 76
75 @return null; 77 @return null;
76} 78}
@@ -80,8 +82,8 @@ $iro-context-stacks: ();
80/// 82///
81/// @param {string} $stack-id - ID of context stack 83/// @param {string} $stack-id - ID of context stack
82/// 84///
83@mixin iro-context-stack-delete($stack-id) { 85@mixin delete($stack-id) {
84 $noop: iro-context-stack-delete($stack-id); 86 $noop: delete($stack-id);
85} 87}
86 88
87/// 89///
@@ -89,12 +91,12 @@ $iro-context-stacks: ();
89/// 91///
90/// @param {string} $stack-id - ID of context stack 92/// @param {string} $stack-id - ID of context stack
91/// 93///
92@function iro-context-stack-delete($stack-id) { 94@function delete($stack-id) {
93 @if not map-has-key($iro-context-stacks, $stack-id) { 95 @if not map-has-key($stacks, $stack-id) {
94 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 96 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
95 } 97 }
96 98
97 $iro-context-stacks: map-remove($iro-context-stacks, $stack-id) !global; 99 $stacks: map-remove($stacks, $stack-id) !global;
98 100
99 @return null; 101 @return null;
100} 102}
@@ -106,8 +108,8 @@ $iro-context-stacks: ();
106/// @param {string} $id - ID of new context 108/// @param {string} $id - ID of new context
107/// @param {any} $data [()] - Data that belongs to the context 109/// @param {any} $data [()] - Data that belongs to the context
108/// 110///
109@mixin iro-context-push($stack-id, $id, $data: ()) { 111@mixin push($stack-id, $id, $data: ()) {
110 $noop: iro-context-push($stack-id, $id, $data); 112 $noop: push($stack-id, $id, $data);
111} 113}
112 114
113/// 115///
@@ -119,15 +121,15 @@ $iro-context-stacks: ();
119/// 121///
120/// @return {list} A list with two items: 1 = context id, 2 = context data 122/// @return {list} A list with two items: 1 = context id, 2 = context data
121/// 123///
122@function iro-context-push($stack-id, $id, $data: ()) { 124@function push($stack-id, $id, $data: ()) {
123 @if not map-has-key($iro-context-stacks, $stack-id) { 125 @if not map-has-key($stacks, $stack-id) {
124 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 126 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
125 } 127 }
126 128
127 $context: $id $data; 129 $context: $id $data;
128 $context-stack: map-get($iro-context-stacks, $stack-id); 130 $context-stack: map-get($stacks, $stack-id);
129 $context-stack: append($context-stack, $context); 131 $context-stack: append($context-stack, $context);
130 $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; 132 $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global;
131 133
132 @return $context; 134 @return $context;
133} 135}
@@ -139,8 +141,8 @@ $iro-context-stacks: ();
139/// 141///
140/// @throw If context stack doesn't exist 142/// @throw If context stack doesn't exist
141/// 143///
142@mixin iro-context-pop($stack-id) { 144@mixin pop($stack-id) {
143 $noop: iro-context-pop($stack-id); 145 $noop: pop($stack-id);
144} 146}
145 147
146/// 148///
@@ -150,12 +152,12 @@ $iro-context-stacks: ();
150/// 152///
151/// @return {list} A list with two items: 1 = context id, 2 = context data 153/// @return {list} A list with two items: 1 = context id, 2 = context data
152/// 154///
153@function iro-context-pop($stack-id) { 155@function pop($stack-id) {
154 @if not map-has-key($iro-context-stacks, $stack-id) { 156 @if not map-has-key($stacks, $stack-id) {
155 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 157 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
156 } 158 }
157 159
158 $context-stack: map-get($iro-context-stacks, $stack-id); 160 $context-stack: map-get($stacks, $stack-id);
159 161
160 @if length($context-stack) == 0 { 162 @if length($context-stack) == 0 {
161 @error 'Context stack "#{inspect($stack-id)}" is already empty.'; 163 @error 'Context stack "#{inspect($stack-id)}" is already empty.';
@@ -166,10 +168,10 @@ $iro-context-stacks: ();
166 @if length($context-stack) == 1 { 168 @if length($context-stack) == 1 {
167 $context-stack: (); 169 $context-stack: ();
168 } @else { 170 } @else {
169 $context-stack: iro-list-slice($context-stack, 1, length($context-stack) - 1); 171 $context-stack: functions.list-slice($context-stack, 1, length($context-stack) - 1);
170 } 172 }
171 173
172 $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; 174 $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global;
173 175
174 @return $popped-context; 176 @return $popped-context;
175} 177}
@@ -183,10 +185,16 @@ $iro-context-stacks: ();
183/// 185///
184/// @throw If assertion fails 186/// @throw If assertion fails
185/// 187///
186@mixin iro-context-assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) { 188@function assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) {
187 @if not iro-context-stack-contains($stack-id, $context-ids, $check-head-only) { 189 @if not contains($stack-id, $context-ids, $check-head-only) {
188 @error 'Must be called inside of contexts "#{inspect($context-ids)}".'; 190 @error 'Must be called inside of contexts "#{inspect($context-ids)}".';
189 } 191 }
192
193 @return null;
194}
195
196@mixin assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) {
197 $noop: assert-stack-must-contain($stack-id, $context-ids, $check-head-only)
190} 198}
191 199
192/// 200///
@@ -198,10 +206,16 @@ $iro-context-stacks: ();
198/// 206///
199/// @throw If assertion fails 207/// @throw If assertion fails
200/// 208///
201@mixin iro-context-assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) { 209@function assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) {
202 @if iro-context-stack-contains($stack-id, $context-ids, $check-head-only) { 210 @if contains($stack-id, $context-ids, $check-head-only) {
203 @error 'Must not be called inside of contexts "#{inspect($context-ids)}".'; 211 @error 'Must not be called inside of contexts "#{inspect($context-ids)}".';
204 } 212 }
213
214 @return null;
215}
216
217@mixin assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) {
218 $noop: assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only);
205} 219}
206 220
207/// 221///
@@ -213,12 +227,12 @@ $iro-context-stacks: ();
213/// 227///
214/// @return {bool} `true` if the context stack contains one of the context IDs, otherwise `false` 228/// @return {bool} `true` if the context stack contains one of the context IDs, otherwise `false`
215/// 229///
216@function iro-context-stack-contains($stack-id, $context-ids, $check-head-only: false) { 230@function contains($stack-id, $context-ids, $check-head-only: false) {
217 @if not map-has-key($iro-context-stacks, $stack-id) { 231 @if not map-has-key($stacks, $stack-id) {
218 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 232 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
219 } 233 }
220 234
221 $context-stack: map-get($iro-context-stacks, $stack-id); 235 $context-stack: map-get($stacks, $stack-id);
222 236
223 @if length($context-stack) == 0 { 237 @if length($context-stack) == 0 {
224 @return false; 238 @return false;
@@ -247,10 +261,16 @@ $iro-context-stacks: ();
247/// 261///
248/// @throw If assertion fails 262/// @throw If assertion fails
249/// 263///
250@mixin iro-context-assert-stack-count($stack-id, $max-count) { 264@function assert-stack-count($stack-id, $max-count) {
251 @if iro-context-stack-count($stack-id) > $max-count { 265 @if count($stack-id) > $max-count {
252 @error 'Maximum context count "#{inspect($max-count)}" exceeded.'; 266 @error 'Maximum context count "#{inspect($max-count)}" exceeded.';
253 } 267 }
268
269 @return null;
270}
271
272@mixin assert-stack-count($stack-id, $max-count) {
273 $noop: assert-stack-count($stack-id, $max-count);
254} 274}
255 275
256/// 276///
@@ -260,12 +280,12 @@ $iro-context-stacks: ();
260/// 280///
261/// @return {number} The number of contexts 281/// @return {number} The number of contexts
262/// 282///
263@function iro-context-stack-count($stack-id) { 283@function count($stack-id) {
264 @if not map-has-key($iro-context-stacks, $stack-id) { 284 @if not map-has-key($stacks, $stack-id) {
265 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 285 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
266 } 286 }
267 287
268 $context-stack: map-get($iro-context-stacks, $stack-id); 288 $context-stack: map-get($stacks, $stack-id);
269 289
270 @return length($context-stack); 290 @return length($context-stack);
271} 291}
@@ -278,12 +298,12 @@ $iro-context-stacks: ();
278/// 298///
279/// @return {list} Null if no match was found, otherwise a list with two items: 1. context ID, 2. context data. 299/// @return {list} Null if no match was found, otherwise a list with two items: 1. context ID, 2. context data.
280/// 300///
281@function iro-context-get($stack-id, $type-or-level: null) { 301@function get($stack-id, $type-or-level: null) {
282 @if not map-has-key($iro-context-stacks, $stack-id) { 302 @if not map-has-key($stacks, $stack-id) {
283 @error 'Context stack "#{inspect($stack-id)}" does not exist.'; 303 @error 'Context stack "#{inspect($stack-id)}" does not exist.';
284 } 304 }
285 305
286 $context-stack: map-get($iro-context-stacks, $stack-id); 306 $context-stack: map-get($stacks, $stack-id);
287 307
288 @if length($context-stack) == 0 { 308 @if length($context-stack) == 0 {
289 @return null; 309 @return null;
diff --git a/src/_easing.scss b/src/_easing.scss
index a39f317..8b06632 100644
--- a/src/_easing.scss
+++ b/src/_easing.scss
@@ -14,32 +14,32 @@
14/// 14///
15/// @access private 15/// @access private
16/// 16///
17$iro-cubic-bezier-sample-pool: (); 17$cubic-bezier-sample-pool: ();
18 18
19/// 19///
20/// Sample pool size for cubic bezier calculations. 20/// Sample pool size for cubic bezier calculations.
21/// 21///
22$iro-cubic-bezier-sample-pool-size: 10 !default; 22$cubic-bezier-sample-pool-size: 10 !default;
23 23
24/// 24///
25/// Minimum slope required to use the Newton-Raphson method for cubic bezier calculations. 25/// Minimum slope required to use the Newton-Raphson method for cubic bezier calculations.
26/// 26///
27$iro-cubic-bezier-newton-min-slope: 0.001 !default; 27$cubic-bezier-newton-min-slope: 0.001 !default;
28 28
29/// 29///
30/// Number of iterations of the Newton-Raphson method. 30/// Number of iterations of the Newton-Raphson method.
31/// 31///
32$iro-cubic-bezier-newton-iters: 4 !default; 32$cubic-bezier-newton-iters: 4 !default;
33 33
34/// 34///
35/// Precision of the subdivision method for cubic bezier calculations. 35/// Precision of the subdivision method for cubic bezier calculations.
36/// 36///
37$iro-cubic-bezier-subdiv-precision: 0.0000001 !default; 37$cubic-bezier-subdiv-precision: 0.0000001 !default;
38 38
39/// 39///
40/// Maximum iterations of the subdivision method for cubic bezier calculations. 40/// Maximum iterations of the subdivision method for cubic bezier calculations.
41/// 41///
42$iro-cubic-bezier-subdiv-max-iters: 10 !default; 42$cubic-bezier-subdiv-max-iters: 10 !default;
43 43
44/// 44///
45/// A cubic bezier function identical to the CSS cubic-bezier function. 45/// A cubic bezier function identical to the CSS cubic-bezier function.
@@ -52,7 +52,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
52/// 52///
53/// @return {number} 53/// @return {number}
54/// 54///
55@function iro-cubic-bezier($x1, $y1, $x2, $y2, $x) { 55@function cubic-bezier($x1, $y1, $x2, $y2, $x) {
56 // 56 //
57 // Cover simple cases 57 // Cover simple cases
58 // 58 //
@@ -73,41 +73,41 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
73 73
74 $sample-pool-key: $x1 + '_' + $x2; 74 $sample-pool-key: $x1 + '_' + $x2;
75 75
76 @if not map-has-key($iro-cubic-bezier-sample-pool, $sample-pool-key) { 76 @if not map-has-key($cubic-bezier-sample-pool, $sample-pool-key) {
77 $samples: (); 77 $samples: ();
78 78
79 @for $i from 0 through $iro-cubic-bezier-sample-pool-size { 79 @for $i from 0 through $cubic-bezier-sample-pool-size {
80 $samples: append($samples, iro-cubic-bezier-func($x1, $x2, math.div($i, $iro-cubic-bezier-sample-pool-size))); 80 $samples: append($samples, cubic-bezier-func($x1, $x2, math.div($i, $cubic-bezier-sample-pool-size)));
81 } 81 }
82 82
83 $iro-cubic-bezier-sample-pool: map-merge($iro-cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; 83 $cubic-bezier-sample-pool: map-merge($cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global;
84 } 84 }
85 85
86 // 86 //
87 // Calculate cubic bezier 87 // Calculate cubic bezier
88 // 88 //
89 89
90 @return iro-cubic-bezier-func($y1, $y2, iro-cubic-bezier-t-for-x($x1, $x2, $x)); 90 @return cubic-bezier-func($y1, $y2, cubic-bezier-t-for-x($x1, $x2, $x));
91} 91}
92 92
93/// 93///
94/// @access private 94/// @access private
95/// 95///
96@function iro-cubic-bezier-func-a($p1, $p2) { 96@function cubic-bezier-func-a($p1, $p2) {
97 @return 1 - 3 * $p2 + 3 * $p1; 97 @return 1 - 3 * $p2 + 3 * $p1;
98} 98}
99 99
100/// 100///
101/// @access private 101/// @access private
102/// 102///
103@function iro-cubic-bezier-func-b($p1, $p2) { 103@function cubic-bezier-func-b($p1, $p2) {
104 @return 3 * $p2 - 6 * $p1; 104 @return 3 * $p2 - 6 * $p1;
105} 105}
106 106
107/// 107///
108/// @access private 108/// @access private
109/// 109///
110@function iro-cubic-bezier-func-c($p1) { 110@function cubic-bezier-func-c($p1) {
111 @return 3 * $p1; 111 @return 3 * $p1;
112} 112}
113 113
@@ -116,8 +116,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
116/// 116///
117/// @access private 117/// @access private
118/// 118///
119@function iro-cubic-bezier-func($p1, $p2, $t) { 119@function cubic-bezier-func($p1, $p2, $t) {
120 @return ((iro-cubic-bezier-func-a($p1, $p2) * $t + iro-cubic-bezier-func-b($p1, $p2)) * $t + iro-cubic-bezier-func-c($p1)) * $t; 120 @return ((cubic-bezier-func-a($p1, $p2) * $t + cubic-bezier-func-b($p1, $p2)) * $t + cubic-bezier-func-c($p1)) * $t;
121} 121}
122 122
123/// 123///
@@ -125,8 +125,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
125/// 125///
126/// @access private 126/// @access private
127/// 127///
128@function iro-cubic-bezier-func-slope($p1, $p2, $t) { 128@function cubic-bezier-func-slope($p1, $p2, $t) {
129 @return 3 * iro-cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * iro-cubic-bezier-func-b($p1, $p2) * $t + iro-cubic-bezier-func-c($p1); 129 @return 3 * cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * cubic-bezier-func-b($p1, $p2) * $t + cubic-bezier-func-c($p1);
130} 130}
131 131
132/// 132///
@@ -134,15 +134,15 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
134/// 134///
135/// @access private 135/// @access private
136/// 136///
137@function iro-cubic-bezier-newton-raphson($x1, $x2, $x, $t) { 137@function cubic-bezier-newton-raphson($x1, $x2, $x, $t) {
138 @for $i from 1 through $iro-cubic-bezier-newton-iters { 138 @for $i from 1 through $cubic-bezier-newton-iters {
139 $cur-slope: iro-cubic-bezier-func-slope($x1, $x2, $t); 139 $cur-slope: cubic-bezier-func-slope($x1, $x2, $t);
140 140
141 @if $cur-slope == 0 { 141 @if $cur-slope == 0 {
142 @return $t; 142 @return $t;
143 } 143 }
144 144
145 $cur-x: iro-cubic-bezier-func($x1, $x2, $t) - $x; 145 $cur-x: cubic-bezier-func($x1, $x2, $t) - $x;
146 $t: $t - math.div($cur-x, $cur-slope); 146 $t: $t - math.div($cur-x, $cur-slope);
147 } 147 }
148 148
@@ -154,14 +154,14 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
154/// 154///
155/// @access private 155/// @access private
156/// 156///
157@function iro-cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) { 157@function cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) {
158 $cur-x: 0; 158 $cur-x: 0;
159 $cur-t: 0; 159 $cur-t: 0;
160 $i: 0; 160 $i: 0;
161 161
162 @while $i < $iro-cubic-bezier-subdiv-max-iters { 162 @while $i < $cubic-bezier-subdiv-max-iters {
163 $cur-t: $a + ($b - $a) / 2; 163 $cur-t: $a + ($b - $a) / 2;
164 $cur-x: iro-cubic-bezier-func($x1, $x2, $cur-t) - $x; 164 $cur-x: cubic-bezier-func($x1, $x2, $cur-t) - $x;
165 165
166 @if $cur-x > 0 { 166 @if $cur-x > 0 {
167 $b: $cur-t; 167 $b: $cur-t;
@@ -169,7 +169,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
169 $a: $cur-t; 169 $a: $cur-t;
170 } 170 }
171 171
172 @if abs($cur-x) < $iro-cubic-bezier-subdiv-precision { 172 @if abs($cur-x) < $cubic-bezier-subdiv-precision {
173 @return $cur-t; 173 @return $cur-t;
174 } 174 }
175 } 175 }
@@ -182,30 +182,30 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
182/// 182///
183/// @access private 183/// @access private
184/// 184///
185@function iro-cubic-bezier-t-for-x($x1, $x2, $x) { 185@function cubic-bezier-t-for-x($x1, $x2, $x) {
186 $sample-pool-key: $x1 + '_' + $x2; 186 $sample-pool-key: $x1 + '_' + $x2;
187 $samples: map-get($iro-cubic-bezier-sample-pool, $sample-pool-key); 187 $samples: map-get($cubic-bezier-sample-pool, $sample-pool-key);
188 188
189 $intv-start: 0; 189 $intv-start: 0;
190 $cur-sample: 1; 190 $cur-sample: 1;
191 $last-sample: $iro-cubic-bezier-sample-pool-size; 191 $last-sample: $cubic-bezier-sample-pool-size;
192 192
193 @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) { 193 @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) {
194 $intv-start: $intv-start + math.div(1, $iro-cubic-bezier-sample-pool-size); 194 $intv-start: $intv-start + math.div(1, $cubic-bezier-sample-pool-size);
195 $cur-sample: $cur-sample + 1; 195 $cur-sample: $cur-sample + 1;
196 } 196 }
197 $cur-sample: $cur-sample - 1; 197 $cur-sample: $cur-sample - 1;
198 198
199 $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample)); 199 $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample));
200 $guess-t: $intv-start + math.div($dist, $iro-cubic-bezier-sample-pool-size); 200 $guess-t: $intv-start + math.div($dist, $cubic-bezier-sample-pool-size);
201 201
202 $init-slope: iro-cubic-bezier-func-slope($x1, $x2, $guess-t); 202 $init-slope: cubic-bezier-func-slope($x1, $x2, $guess-t);
203 @if $init-slope >= $iro-cubic-bezier-newton-min-slope { 203 @if $init-slope >= $cubic-bezier-newton-min-slope {
204 @return iro-cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t); 204 @return cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t);
205 } @else if $init-slope == 0 { 205 } @else if $init-slope == 0 {
206 @return $guess-t; 206 @return $guess-t;
207 } @else { 207 } @else {
208 @return iro-cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $iro-cubic-bezier-sample-pool-size); 208 @return cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $cubic-bezier-sample-pool-size);
209 } 209 }
210} 210}
211 211
@@ -216,8 +216,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
216/// 216///
217/// @return {number} 217/// @return {number}
218/// 218///
219@function iro-ease($x) { 219@function ease($x) {
220 @return iro-cubic-bezier(0.25, 0.1, 0.25, 1, $x); 220 @return cubic-bezier(0.25, 0.1, 0.25, 1, $x);
221} 221}
222 222
223/// 223///
@@ -227,8 +227,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
227/// 227///
228/// @return {number} 228/// @return {number}
229/// 229///
230@function iro-ease-in($x) { 230@function ease-in($x) {
231 @return iro-cubic-bezier(0.42, 0, 1, 1, $x); 231 @return cubic-bezier(0.42, 0, 1, 1, $x);
232} 232}
233 233
234/// 234///
@@ -238,8 +238,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
238/// 238///
239/// @return {number} 239/// @return {number}
240/// 240///
241@function iro-ease-out($x) { 241@function ease-out($x) {
242 @return iro-cubic-bezier(0, 0, 0.58, 1, $x); 242 @return cubic-bezier(0, 0, 0.58, 1, $x);
243} 243}
244 244
245/// 245///
@@ -249,8 +249,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
249/// 249///
250/// @return {number} 250/// @return {number}
251/// 251///
252@function iro-ease-in-out($x) { 252@function ease-in-out($x) {
253 @return iro-cubic-bezier(0.42, 0, 0.58, 1, $x); 253 @return cubic-bezier(0.42, 0, 0.58, 1, $x);
254} 254}
255 255
256/// 256///
@@ -260,8 +260,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
260/// 260///
261/// @return {number} 261/// @return {number}
262/// 262///
263@function iro-ease-in-sine($x) { 263@function ease-in-sine($x) {
264 @return iro-cubic-bezier(0.47, 0, 0.745, 0.715, $x); 264 @return cubic-bezier(0.47, 0, 0.745, 0.715, $x);
265} 265}
266 266
267/// 267///
@@ -271,8 +271,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
271/// 271///
272/// @return {number} 272/// @return {number}
273/// 273///
274@function iro-ease-out-sine($x) { 274@function ease-out-sine($x) {
275 @return iro-cubic-bezier(0.39, 0.575, 0.565, 1, $x); 275 @return cubic-bezier(0.39, 0.575, 0.565, 1, $x);
276} 276}
277 277
278/// 278///
@@ -282,8 +282,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
282/// 282///
283/// @return {number} 283/// @return {number}
284/// 284///
285@function iro-ease-in-out-sine($x) { 285@function ease-in-out-sine($x) {
286 @return iro-cubic-bezier(0.445, 0.05, 0.55, 0.95, $x); 286 @return cubic-bezier(0.445, 0.05, 0.55, 0.95, $x);
287} 287}
288 288
289/// 289///
@@ -293,8 +293,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
293/// 293///
294/// @return {number} 294/// @return {number}
295/// 295///
296@function iro-ease-in-quad($x) { 296@function ease-in-quad($x) {
297 @return iro-cubic-bezier(0.55, 0.085, 0.68, 0.53, $x); 297 @return cubic-bezier(0.55, 0.085, 0.68, 0.53, $x);
298} 298}
299 299
300/// 300///
@@ -304,8 +304,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
304/// 304///
305/// @return {number} 305/// @return {number}
306/// 306///
307@function iro-ease-out-quad($x) { 307@function ease-out-quad($x) {
308 @return iro-cubic-bezier(0.25, 0.46, 0.45, 0.94, $x); 308 @return cubic-bezier(0.25, 0.46, 0.45, 0.94, $x);
309} 309}
310 310
311/// 311///
@@ -315,8 +315,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
315/// 315///
316/// @return {number} 316/// @return {number}
317/// 317///
318@function iro-ease-in-out-quad($x) { 318@function ease-in-out-quad($x) {
319 @return iro-cubic-bezier(0.455, 0.03, 0.515, 0.955, $x); 319 @return cubic-bezier(0.455, 0.03, 0.515, 0.955, $x);
320} 320}
321 321
322/// 322///
@@ -326,8 +326,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
326/// 326///
327/// @return {number} 327/// @return {number}
328/// 328///
329@function iro-ease-in-cubic($x) { 329@function ease-in-cubic($x) {
330 @return iro-cubic-bezier(0.55, 0.055, 0.675, 0.19, $x); 330 @return cubic-bezier(0.55, 0.055, 0.675, 0.19, $x);
331} 331}
332 332
333/// 333///
@@ -337,8 +337,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
337/// 337///
338/// @return {number} 338/// @return {number}
339/// 339///
340@function iro-ease-out-cubic($x) { 340@function ease-out-cubic($x) {
341 @return iro-cubic-bezier(0.215, 0.61, 0.355, 1, $x); 341 @return cubic-bezier(0.215, 0.61, 0.355, 1, $x);
342} 342}
343 343
344/// 344///
@@ -348,8 +348,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
348/// 348///
349/// @return {number} 349/// @return {number}
350/// 350///
351@function iro-ease-in-out-cubic($x) { 351@function ease-in-out-cubic($x) {
352 @return iro-cubic-bezier(0.645, 0.045, 0.355, 1, $x); 352 @return cubic-bezier(0.645, 0.045, 0.355, 1, $x);
353} 353}
354 354
355/// 355///
@@ -359,8 +359,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
359/// 359///
360/// @return {number} 360/// @return {number}
361/// 361///
362@function iro-ease-in-quart($x) { 362@function ease-in-quart($x) {
363 @return iro-cubic-bezier(0.895, 0.03, 0.685, 0.22, $x); 363 @return cubic-bezier(0.895, 0.03, 0.685, 0.22, $x);
364} 364}
365 365
366/// 366///
@@ -370,8 +370,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
370/// 370///
371/// @return {number} 371/// @return {number}
372/// 372///
373@function iro-ease-out-quart($x) { 373@function ease-out-quart($x) {
374 @return iro-cubic-bezier(0.165, 0.84, 0.44, 1, $x); 374 @return cubic-bezier(0.165, 0.84, 0.44, 1, $x);
375} 375}
376 376
377/// 377///
@@ -381,8 +381,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
381/// 381///
382/// @return {number} 382/// @return {number}
383/// 383///
384@function iro-ease-in-out-quart($x) { 384@function ease-in-out-quart($x) {
385 @return iro-cubic-bezier(0.77, 0, 0.175, 1, $x); 385 @return cubic-bezier(0.77, 0, 0.175, 1, $x);
386} 386}
387 387
388/// 388///
@@ -392,8 +392,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
392/// 392///
393/// @return {number} 393/// @return {number}
394/// 394///
395@function iro-ease-in-quint($x) { 395@function ease-in-quint($x) {
396 @return iro-cubic-bezier(0.755, 0.05, 0.855, 0.06, $x); 396 @return cubic-bezier(0.755, 0.05, 0.855, 0.06, $x);
397} 397}
398 398
399/// 399///
@@ -403,8 +403,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
403/// 403///
404/// @return {number} 404/// @return {number}
405/// 405///
406@function iro-ease-out-quint($x) { 406@function ease-out-quint($x) {
407 @return iro-cubic-bezier(0.23, 1, 0.32, 1, $x); 407 @return cubic-bezier(0.23, 1, 0.32, 1, $x);
408} 408}
409 409
410/// 410///
@@ -414,8 +414,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
414/// 414///
415/// @return {number} 415/// @return {number}
416/// 416///
417@function iro-ease-in-out-quint($x) { 417@function ease-in-out-quint($x) {
418 @return iro-cubic-bezier(0.86, 0, 0.07, 1, $x); 418 @return cubic-bezier(0.86, 0, 0.07, 1, $x);
419} 419}
420 420
421/// 421///
@@ -425,8 +425,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
425/// 425///
426/// @return {number} 426/// @return {number}
427/// 427///
428@function iro-ease-in-expo($x) { 428@function ease-in-expo($x) {
429 @return iro-cubic-bezier(0.95, 0.05, 0.795, 0.035, $x); 429 @return cubic-bezier(0.95, 0.05, 0.795, 0.035, $x);
430} 430}
431 431
432/// 432///
@@ -436,8 +436,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
436/// 436///
437/// @return {number} 437/// @return {number}
438/// 438///
439@function iro-ease-out-expo($x) { 439@function ease-out-expo($x) {
440 @return iro-cubic-bezier(0.19, 1, 0.22, 1, $x); 440 @return cubic-bezier(0.19, 1, 0.22, 1, $x);
441} 441}
442 442
443/// 443///
@@ -447,8 +447,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
447/// 447///
448/// @return {number} 448/// @return {number}
449/// 449///
450@function iro-ease-in-out-expo($x) { 450@function ease-in-out-expo($x) {
451 @return iro-cubic-bezier(1, 0, 0, 1, $x); 451 @return cubic-bezier(1, 0, 0, 1, $x);
452} 452}
453 453
454/// 454///
@@ -458,8 +458,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
458/// 458///
459/// @return {number} 459/// @return {number}
460/// 460///
461@function iro-ease-in-circ($x) { 461@function ease-in-circ($x) {
462 @return iro-cubic-bezier(0.6, 0.04, 0.98, 0.335, $x); 462 @return cubic-bezier(0.6, 0.04, 0.98, 0.335, $x);
463} 463}
464 464
465/// 465///
@@ -469,8 +469,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
469/// 469///
470/// @return {number} 470/// @return {number}
471/// 471///
472@function iro-ease-out-circ($x) { 472@function ease-out-circ($x) {
473 @return iro-cubic-bezier(0.075, 0.82, 0.165, 1, $x); 473 @return cubic-bezier(0.075, 0.82, 0.165, 1, $x);
474} 474}
475 475
476/// 476///
@@ -480,6 +480,6 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
480/// 480///
481/// @return {number} 481/// @return {number}
482/// 482///
483@function iro-ease-in-out-circ($x) { 483@function ease-in-out-circ($x) {
484 @return iro-cubic-bezier(0.785, 0.135, 0.15, 0.86, $x); 484 @return cubic-bezier(0.785, 0.135, 0.15, 0.86, $x);
485} 485}
diff --git a/src/_functions.scss b/src/_functions.scss
index 92ee262..d091afa 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -10,6 +10,7 @@
10//// 10////
11 11
12@use 'sass:math'; 12@use 'sass:math';
13@use './vars';
13 14
14/// 15///
15/// Replace a substring with a new string. 16/// Replace a substring with a new string.
@@ -20,11 +21,11 @@
20/// 21///
21/// @return {string} A string with all instances of $search replaced with $replace 22/// @return {string} A string with all instances of $search replaced with $replace
22/// 23///
23@function iro-str-replace($string, $search, $replace) { 24@function str-replace($string, $search, $replace) {
24 $index: str-index($string, $search); 25 $index: str-index($string, $search);
25 26
26 @if $index { 27 @if $index {
27 @return str-slice($string, 1, $index - 1) + $replace + iro-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 28 @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
28 } 29 }
29 30
30 @return $string; 31 @return $string;
@@ -38,11 +39,11 @@
38/// 39///
39/// @return {string} 40/// @return {string}
40/// 41///
41@function iro-str-implode($list, $glue: '') { 42@function str-implode($list, $glue: '') {
42 $result: ''; 43 $result: '';
43 44
44 @each $item in $list { 45 @each $item in $list {
45 $result: $result + if(length($item) > 1, iro-str-implode($item, $glue), $item); 46 $result: $result + if(length($item) > 1, str-implode($item, $glue), $item);
46 47
47 @if $item != nth($list, length($list)) { 48 @if $item != nth($list, length($list)) {
48 $result: $result + $glue; 49 $result: $result + $glue;
@@ -61,7 +62,7 @@
61/// 62///
62/// @return {list} A slice of the list 63/// @return {list} A slice of the list
63/// 64///
64@function iro-list-slice($list, $start: 1, $end: length($list)) { 65@function list-slice($list, $start: 1, $end: length($list)) {
65 $result: (); 66 $result: ();
66 67
67 @for $i from $start through $end { 68 @for $i from $start through $end {
@@ -81,7 +82,7 @@
81/// 82///
82/// @return {list} A list with $value at the beginning, followed by the other items 83/// @return {list} A list with $value at the beginning, followed by the other items
83/// 84///
84@function iro-list-prepend($list, $value) { 85@function list-prepend($list, $value) {
85 $result: append((), $value, list-separator($list)); 86 $result: append((), $value, list-separator($list));
86 87
87 @if length($list) > 0 { 88 @if length($list) > 0 {
@@ -103,13 +104,13 @@
103/// 104///
104/// @return {list} Sorted list 105/// @return {list} Sorted list
105/// 106///
106@function iro-quicksort($l, $left: 1, $right: length($l)) { 107@function quicksort($l, $left: 1, $right: length($l)) {
107 @if $left < $right { 108 @if $left < $right {
108 $pvr: iro-quicksort-partition($l, $left, $right); 109 $pvr: quicksort-partition($l, $left, $right);
109 $pivot: nth($pvr, 1); 110 $pivot: nth($pvr, 1);
110 $l: nth($pvr, 2); 111 $l: nth($pvr, 2);
111 $l: iro-quicksort($l, $left, $pivot); 112 $l: quicksort($l, $left, $pivot);
112 $l: iro-quicksort($l, $pivot + 1, $right); 113 $l: quicksort($l, $pivot + 1, $right);
113 } 114 }
114 115
115 @return $l; 116 @return $l;
@@ -118,7 +119,7 @@
118/// 119///
119/// @access private 120/// @access private
120/// 121///
121@function iro-quicksort-partition($l, $left, $right) { 122@function quicksort-partition($l, $left, $right) {
122 $start: true; 123 $start: true;
123 $i: $left; 124 $i: $left;
124 $j: $right - 1; 125 $j: $right - 1;
@@ -161,7 +162,7 @@
161/// 162///
162/// @return {any} Either the value assigned to $key or $default 163/// @return {any} Either the value assigned to $key or $default
163/// 164///
164@function iro-map-get-default($map, $key, $default) { 165@function map-get-default($map, $key, $default) {
165 @return if(map-has-key($map, $key), map-get($map, $key), $default); 166 @return if(map-has-key($map, $key), map-get($map, $key), $default);
166} 167}
167 168
@@ -174,7 +175,7 @@
174/// 175///
175/// @return {any} Either the value assigned to $key or $default 176/// @return {any} Either the value assigned to $key or $default
176/// 177///
177@function iro-map-get-deep($map, $key, $default: null) { 178@function map-get-deep($map, $key, $default: null) {
178 $value: null; 179 $value: null;
179 180
180 @if type-of($key) == list { 181 @if type-of($key) == list {
@@ -206,7 +207,7 @@
206/// 207///
207/// @return {map} The result of a recursive merge of $map1 and $map2 208/// @return {map} The result of a recursive merge of $map1 and $map2
208/// 209///
209@function iro-map-merge-recursive($map1, $map2) { 210@function map-merge-recursive($map1, $map2) {
210 @if type-of($map1) != map or type-of($map2) != map { 211 @if type-of($map1) != map or type-of($map2) != map {
211 @error 'Two maps expected.'; 212 @error 'Two maps expected.';
212 } 213 }
@@ -215,7 +216,7 @@
215 216
216 @each $key, $value in $map2 { 217 @each $key, $value in $map2 {
217 @if type-of(map-get($result, $key)) == map and type-of($value) == map { 218 @if type-of(map-get($result, $key)) == map and type-of($value) == map {
218 $result: map-merge($result, ($key: iro-map-merge-recursive(map-get($result, $key), $value))); 219 $result: map-merge($result, ($key: map-merge-recursive(map-get($result, $key), $value)));
219 } @else { 220 } @else {
220 $result: map-merge($result, ($key: $value)); 221 $result: map-merge($result, ($key: $value));
221 } 222 }
@@ -231,16 +232,16 @@
231/// 232///
232/// @return {string} 233/// @return {string}
233/// 234///
234@function iro-map-print($map) { 235@function map-print($map) {
235 $output: ''; 236 $output: '';
236 237
237 @each $key, $value in $map { 238 @each $key, $value in $map {
238 $value-str: ''; 239 $value-str: '';
239 240
240 @if type-of($value) == map { 241 @if type-of($value) == map {
241 $value-str: '[ ' + iro-map-print($value) + ' ]'; 242 $value-str: '[ ' + map-print($value) + ' ]';
242 } @else if type-of($value) == list { 243 } @else if type-of($value) == list {
243 $value-str: '[ ' + iro-str-implode($value, ', ') + ' ]'; 244 $value-str: '[ ' + str-implode($value, ', ') + ' ]';
244 } @else if type-of($value) == string { 245 } @else if type-of($value) == string {
245 $value-str: '\'' + $value + '\''; 246 $value-str: '\'' + $value + '\'';
246 } @else { 247 } @else {
@@ -265,7 +266,7 @@
265/// 266///
266/// @return {bool} `true` if the selector matches at least one suffix, otherwise `false`. 267/// @return {bool} `true` if the selector matches at least one suffix, otherwise `false`.
267/// 268///
268@function iro-selector-suffix-match($selector, $suffixes) { 269@function selector-suffix-match($selector, $suffixes) {
269 $match: true; 270 $match: true;
270 271
271 @each $sel in $selector { 272 @each $sel in $selector {
@@ -304,19 +305,19 @@
304/// 305///
305/// @return {number} Unit-less variable 306/// @return {number} Unit-less variable
306/// 307///
307@function iro-strip-unit($n) { 308@function strip-unit($n) {
308 @return math.div($n, $n * 0 + 1); 309 @return math.div($n, $n * 0 + 1);
309} 310}
310 311
311/// 312///
312/// Convert a pixel value to a rem value. 313/// Convert a pixel value to a rem value.
313/// 314///
314/// @param {number} $size - Pixel value to convert 315/// @param {number} $size - Pixel value to convert
315/// @param {number} $base [$iro-root-size] - Reference base font size used for conversion 316/// @param {number} $base [vars.$root-size] - Reference base font size used for conversion
316/// 317///
317/// @return {number} Pixel value converted to rem 318/// @return {number} Pixel value converted to rem
318/// 319///
319@function iro-px-to-rem($size, $base: $iro-root-size) { 320@function px-to-rem($size, $base: vars.$root-size) {
320 @return math.div($size, $base) * 1rem; 321 @return math.div($size, $base) * 1rem;
321} 322}
322 323
@@ -325,6 +326,6 @@
325/// 326///
326/// @content 327/// @content
327/// 328///
328@mixin iro-execute { 329@mixin execute {
329 @content; 330 @content;
330} 331}
diff --git a/src/_gradients.scss b/src/_gradients.scss
index 657efa2..6575482 100644
--- a/src/_gradients.scss
+++ b/src/_gradients.scss
@@ -17,6 +17,8 @@
17 17
18@use 'sass:math'; 18@use 'sass:math';
19@use 'sass:meta'; 19@use 'sass:meta';
20@use './functions';
21@use './easing';
20 22
21/// 23///
22/// Number of intermediate color stops generated to achieve easing. 24/// Number of intermediate color stops generated to achieve easing.
@@ -24,7 +26,7 @@
24/// 26///
25/// @type number 27/// @type number
26/// 28///
27$iro-easing-gradient-steps: 10 !default; 29$easing-gradient-steps: 10 !default;
28 30
29/// 31///
30/// Generate a new easing background gradient. 32/// Generate a new easing background gradient.
@@ -44,7 +46,7 @@ $iro-easing-gradient-steps: 10 !default;
44/// 46///
45/// @example scss - A smoother linear gradient 47/// @example scss - A smoother linear gradient
46/// .background { 48/// .background {
47/// background-image: iro-easing-gradient( 49/// background-image: easing-gradient(
48/// linear, 50/// linear,
49/// to top, 51/// to top,
50/// #000, 52/// #000,
@@ -74,7 +76,7 @@ $iro-easing-gradient-steps: 10 !default;
74/// 76///
75/// @example scss - A smoother radial gradient 77/// @example scss - A smoother radial gradient
76/// .background { 78/// .background {
77/// background-image: iro-easing-gradient( 79/// background-image: easing-gradient(
78/// radial, 80/// radial,
79/// 50em 16em at 0 0, 81/// 50em 16em at 0 0,
80/// #000, 82/// #000,
@@ -104,7 +106,7 @@ $iro-easing-gradient-steps: 10 !default;
104/// 106///
105/// @example scss - A smoother linear gradient with complex color positions 107/// @example scss - A smoother linear gradient with complex color positions
106/// .background { 108/// .background {
107/// background-image: iro-easing-gradient( 109/// background-image: easing-gradient(
108/// linear, 110/// linear,
109/// to top, 111/// to top,
110/// #000 20%, 112/// #000 20%,
@@ -132,9 +134,9 @@ $iro-easing-gradient-steps: 10 !default;
132/// ); 134/// );
133/// } 135/// }
134/// 136///
135@function iro-easing-gradient($type, $dir, $stop, $stops...) { 137@function easing-gradient($type, $dir, $stop, $stops...) {
136 $pos-template: null; 138 $pos-template: null;
137 $stops: iro-list-prepend($stops, $stop); 139 $stops: functions.list-prepend($stops, $stop);
138 140
139 $last-positioned-stop: 1; 141 $last-positioned-stop: 1;
140 $generated-stops: (); 142 $generated-stops: ();
@@ -147,7 +149,7 @@ $iro-easing-gradient-steps: 10 !default;
147 $stop: nth($stops, $i); 149 $stop: nth($stops, $i);
148 150
149 @if $i == 1 { 151 @if $i == 1 {
150 @if not iro-easing-gradient-is-color-stop($stop) { 152 @if not easing-gradient-is-color-stop($stop) {
151 @error 'The first color stop argument must be a color stop.'; 153 @error 'The first color stop argument must be a color stop.';
152 } 154 }
153 155
@@ -161,9 +163,9 @@ $iro-easing-gradient-steps: 10 !default;
161 $stops: set-nth($stops, $i, $stop); 163 $stops: set-nth($stops, $i, $stop);
162 } 164 }
163 165
164 $generated-stops: append($generated-stops, iro-str-implode($stop, ' ')); 166 $generated-stops: append($generated-stops, functions.str-implode($stop, ' '));
165 } @else if iro-easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) { 167 } @else if easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) {
166 @if not iro-easing-gradient-is-color-stop($stop) { 168 @if not easing-gradient-is-color-stop($stop) {
167 @error 'The last color stop argument must be a color stop.'; 169 @error 'The last color stop argument must be a color stop.';
168 } 170 }
169 171
@@ -194,19 +196,19 @@ $iro-easing-gradient-steps: 10 !default;
194 // the positions of all stops list items that are color stops. 196 // the positions of all stops list items that are color stops.
195 // 197 //
196 198
197 $interpolated-stops: iro-easing-gradient-interpolate-stop-positions( 199 $interpolated-stops: easing-gradient-interpolate-stop-positions(
198 nth($stops, $last-positioned-stop), 200 nth($stops, $last-positioned-stop),
199 iro-list-slice($stops, $last-positioned-stop + 1, $i - 1), 201 functions.list-slice($stops, $last-positioned-stop + 1, $i - 1),
200 $stop 202 $stop
201 ); 203 );
202 204
203 $new-stops: join( 205 $new-stops: join(
204 iro-list-slice($stops, 1, $last-positioned-stop), 206 functions.list-slice($stops, 1, $last-positioned-stop),
205 $interpolated-stops 207 $interpolated-stops
206 ); 208 );
207 $new-stops: join( 209 $new-stops: join(
208 $new-stops, 210 $new-stops,
209 iro-list-slice($stops, $i) 211 functions.list-slice($stops, $i)
210 ); 212 );
211 $stops: $new-stops; 213 $stops: $new-stops;
212 } 214 }
@@ -225,13 +227,13 @@ $iro-easing-gradient-steps: 10 !default;
225 $prev-stop: nth($stops, $j - 1); 227 $prev-stop: nth($stops, $j - 1);
226 $next-stop: nth($stops, $j); 228 $next-stop: nth($stops, $j);
227 229
228 @if not iro-easing-gradient-is-color-stop($next-stop) { 230 @if not easing-gradient-is-color-stop($next-stop) {
229 $j: $j + 1; 231 $j: $j + 1;
230 232
231 $easing: $next-stop; 233 $easing: $next-stop;
232 $next-stop: nth($stops, $j); 234 $next-stop: nth($stops, $j);
233 235
234 @if not iro-easing-gradient-is-color-stop($next-stop) { 236 @if not easing-gradient-is-color-stop($next-stop) {
235 @error 'There can be at most one interpolation hint between to color stops.'; 237 @error 'There can be at most one interpolation hint between to color stops.';
236 } 238 }
237 } 239 }
@@ -245,16 +247,16 @@ $iro-easing-gradient-steps: 10 !default;
245 $easing-args: (); 247 $easing-args: ();
246 248
247 @if type-of($easing) == list { 249 @if type-of($easing) == list {
248 $easing-args: iro-list-slice($easing, 2); 250 $easing-args: functions.list-slice($easing, 2);
249 $easing: nth($easing, 1); 251 $easing: nth($easing, 1);
250 } 252 }
251 253
252 $generated-stops: join( 254 $generated-stops: join(
253 $generated-stops, 255 $generated-stops,
254 iro-easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args) 256 easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args)
255 ); 257 );
256 } @else { 258 } @else {
257 $generated-stops: append($generated-stops, iro-str-implode($next-stop, ' ')); 259 $generated-stops: append($generated-stops, functions.str-implode($next-stop, ' '));
258 } 260 }
259 261
260 $j: $j + 1; 262 $j: $j + 1;
@@ -265,30 +267,30 @@ $iro-easing-gradient-steps: 10 !default;
265 } 267 }
266 268
267 @if $type == 'linear' { 269 @if $type == 'linear' {
268 @return linear-gradient($dir, unquote(iro-str-implode($generated-stops, ', '))); 270 @return linear-gradient($dir, unquote(functions.str-implode($generated-stops, ', ')));
269 } @else if $type == 'radial' { 271 } @else if $type == 'radial' {
270 @return radial-gradient($dir, unquote(iro-str-implode($generated-stops, ', '))); 272 @return radial-gradient($dir, unquote(functions.str-implode($generated-stops, ', ')));
271 } @else { 273 } @else {
272 @error 'Invalid gradient type: #{inspect($type)}.'; 274 @error 'Invalid gradient type: #{inspect($type)}.';
273 } 275 }
274} 276}
275 277
276/// 278///
277/// Alias for iro-easing-gradient('linear',...) 279/// Alias for easing-gradient('linear',...)
278/// 280///
279/// @see {function} iro-easing-gradient 281/// @see {function} easing-gradient
280/// 282///
281@function iro-easing-linear-gradient($dir, $stop, $stops...) { 283@function easing-linear-gradient($dir, $stop, $stops...) {
282 @return iro-easing-gradient('linear', $dir, $stop, $stops...); 284 @return easing-gradient('linear', $dir, $stop, $stops...);
283} 285}
284 286
285/// 287///
286/// Alias for iro-easing-gradient('radial',...) 288/// Alias for easing-gradient('radial',...)
287/// 289///
288/// @see {function} iro-easing-gradient 290/// @see {function} easing-gradient
289/// 291///
290@function iro-easing-radial-gradient($dir, $stop, $stops...) { 292@function easing-radial-gradient($dir, $stop, $stops...) {
291 @return iro-easing-gradient('radial', $dir, $stop, $stops...); 293 @return easing-gradient('radial', $dir, $stop, $stops...);
292} 294}
293 295
294/// 296///
@@ -296,7 +298,7 @@ $iro-easing-gradient-steps: 10 !default;
296/// 298///
297/// @access private 299/// @access private
298/// 300///
299@function iro-easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) { 301@function easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) {
300 @if $easing == 'steps' { 302 @if $easing == 'steps' {
301 $steps: null; 303 $steps: null;
302 $jump: null; 304 $jump: null;
@@ -309,16 +311,11 @@ $iro-easing-gradient-steps: 10 !default;
309 $jump: jump-end; 311 $jump: jump-end;
310 } 312 }
311 313
312 @return iro-easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump); 314 @return easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump);
313 } @else { 315 } @else {
314 $easing-func: null; 316 $easing-func: get-function($easing, $module: easing);
315 @if function-exists('iro-' + $easing) {
316 $easing-func: get-function('iro-' + $easing);
317 } @else {
318 $easing-func: get-function($easing);
319 }
320 317
321 @return iro-easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args); 318 @return easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args);
322 } 319 }
323} 320}
324 321
@@ -327,7 +324,7 @@ $iro-easing-gradient-steps: 10 !default;
327/// 324///
328/// @access private 325/// @access private
329/// 326///
330@function iro-easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) { 327@function easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) {
331 $prev-stop-color: nth($prev-stop, 1); 328 $prev-stop-color: nth($prev-stop, 1);
332 $prev-stop-pos: nth($prev-stop, 2); 329 $prev-stop-pos: nth($prev-stop, 2);
333 $next-stop-color: nth($next-stop, 1); 330 $next-stop-color: nth($next-stop, 1);
@@ -342,8 +339,8 @@ $iro-easing-gradient-steps: 10 !default;
342 339
343 $distance: $next-stop-pos - $prev-stop-pos; 340 $distance: $next-stop-pos - $prev-stop-pos;
344 341
345 @for $i from 1 through $iro-easing-gradient-steps { 342 @for $i from 1 through $easing-gradient-steps {
346 $perc: math.div($i, $iro-easing-gradient-steps); 343 $perc: math.div($i, $easing-gradient-steps);
347 344
348 $color: null; 345 $color: null;
349 $pos: $prev-stop-pos + $perc * $distance; 346 $pos: $prev-stop-pos + $perc * $distance;
@@ -378,8 +375,8 @@ $iro-easing-gradient-steps: 10 !default;
378 $next-stop-pos: meta.calc-args($next-stop-pos); 375 $next-stop-pos: meta.calc-args($next-stop-pos);
379 } 376 }
380 377
381 @for $i from 1 through $iro-easing-gradient-steps { 378 @for $i from 1 through $easing-gradient-steps {
382 $perc: $i / $iro-easing-gradient-steps; 379 $perc: math.div($i, $easing-gradient-steps);
383 380
384 $color: null; 381 $color: null;
385 $pos: null; 382 $pos: null;
@@ -403,7 +400,7 @@ $iro-easing-gradient-steps: 10 !default;
403/// 400///
404/// @access private 401/// @access private
405/// 402///
406@function iro-easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) { 403@function easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) {
407 $prev-stop-color: nth($prev-stop, 1); 404 $prev-stop-color: nth($prev-stop, 1);
408 $prev-stop-pos: nth($prev-stop, 2); 405 $prev-stop-pos: nth($prev-stop, 2);
409 $next-stop-color: nth($next-stop, 1); 406 $next-stop-color: nth($next-stop, 1);
@@ -419,18 +416,18 @@ $iro-easing-gradient-steps: 10 !default;
419 $distance: $next-stop-pos - $prev-stop-pos; 416 $distance: $next-stop-pos - $prev-stop-pos;
420 417
421 @for $i from 1 through $steps { 418 @for $i from 1 through $steps {
422 $x1: ($i - 1) / $steps; 419 $x1: math.div($i - 1, $steps);
423 $x2: $i / $steps; 420 $x2: math.div($i, $steps);
424 $y: null; 421 $y: null;
425 422
426 @if $jump == jump-start { 423 @if $jump == jump-start {
427 $y: $i / $steps; 424 $y: math.div($i, $steps);
428 } @else if $jump == jump-end { 425 } @else if $jump == jump-end {
429 $y: ($i - 1) / $steps; 426 $y: math.div($i - 1, $steps);
430 } @else if $jump == jump-both { 427 } @else if $jump == jump-both {
431 $y: $i / ($steps + 1); 428 $y: math.div($i, $steps + 1);
432 } @else if $jump == jump-none { 429 } @else if $jump == jump-none {
433 $y: ($i - 1) / ($steps - 1); 430 $y: math.div($i - 1, $steps - 1);
434 } @else { 431 } @else {
435 @error 'Invalid $jump: #{inspect($jump)}'; 432 @error 'Invalid $jump: #{inspect($jump)}';
436 } 433 }
@@ -474,18 +471,18 @@ $iro-easing-gradient-steps: 10 !default;
474 } 471 }
475 472
476 @for $i from 1 through $steps { 473 @for $i from 1 through $steps {
477 $x1: ($i - 1) / $steps; 474 $x1: math.div($i - 1, $steps);
478 $x2: $i / $steps; 475 $x2: math.div($i, $steps);
479 $y: null; 476 $y: null;
480 477
481 @if $jump == jump-start { 478 @if $jump == jump-start {
482 $y: $i / $steps; 479 $y: math.div($i, $steps);
483 } @else if $jump == jump-end { 480 } @else if $jump == jump-end {
484 $y: ($i - 1) / $steps; 481 $y: math.div($i - 1, $steps);
485 } @else if $jump == jump-both { 482 } @else if $jump == jump-both {
486 $y: $i / ($steps + 1); 483 $y: math.div($i, $steps + 1);
487 } @else if $jump == jump-none { 484 } @else if $jump == jump-none {
488 $y: ($i - 1) / ($steps - 1); 485 $y: math.div($i - 1, $steps - 1);
489 } @else { 486 } @else {
490 @error 'Invalid $jump: #{inspect($jump)}'; 487 @error 'Invalid $jump: #{inspect($jump)}';
491 } 488 }
@@ -515,14 +512,14 @@ $iro-easing-gradient-steps: 10 !default;
515/// 512///
516/// @access private 513/// @access private
517/// 514///
518@function iro-easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) { 515@function easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) {
519 $prev-stop-pos: nth($prev-stop, 2); 516 $prev-stop-pos: nth($prev-stop, 2);
520 $next-stop-pos: nth($next-stop, 2); 517 $next-stop-pos: nth($next-stop, 2);
521 518
522 $stops-num: 0; 519 $stops-num: 0;
523 @for $i from 1 through length($stops) { 520 @for $i from 1 through length($stops) {
524 $stop: nth($stops, $i); 521 $stop: nth($stops, $i);
525 @if iro-easing-gradient-is-color-stop($stop) { 522 @if easing-gradient-is-color-stop($stop) {
526 $stops-num: $stops-num + 1; 523 $stops-num: $stops-num + 1;
527 } 524 }
528 } 525 }
@@ -539,8 +536,8 @@ $iro-easing-gradient-steps: 10 !default;
539 536
540 @for $i from 1 through length($stops) { 537 @for $i from 1 through length($stops) {
541 $stop: nth($stops, $i); 538 $stop: nth($stops, $i);
542 @if iro-easing-gradient-is-color-stop($stop) { 539 @if easing-gradient-is-color-stop($stop) {
543 $pos: $prev-stop-pos + $distance / ($stops-num + 1) * $cur-stop-num; 540 $pos: $prev-stop-pos + math.div($distance, $stops-num + 1) * $cur-stop-num;
544 $stops: set-nth($stops, $i, $stop $pos); 541 $stops: set-nth($stops, $i, $stop $pos);
545 542
546 $cur-stop-num: $cur-stop-num + 1; 543 $cur-stop-num: $cur-stop-num + 1;
@@ -571,8 +568,8 @@ $iro-easing-gradient-steps: 10 !default;
571 568
572 @for $i from 1 through length($stops) { 569 @for $i from 1 through length($stops) {
573 $stop: nth($stops, $i); 570 $stop: nth($stops, $i);
574 @if iro-easing-gradient-is-color-stop($stop) { 571 @if easing-gradient-is-color-stop($stop) {
575 $perc: $cur-stop-num / ($stops-num + 1); 572 $perc: math.div($cur-stop-num, $stops-num + 1);
576 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc}); 573 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc});
577 $stops: set-nth($stops, $i, $stop $pos); 574 $stops: set-nth($stops, $i, $stop $pos);
578 575
@@ -589,8 +586,8 @@ $iro-easing-gradient-steps: 10 !default;
589/// 586///
590/// @access private 587/// @access private
591/// 588///
592@function iro-easing-gradient-is-color-stop($input) { 589@function easing-gradient-is-color-stop($input) {
593 @return (type-of($input) == color) or iro-easing-gradient-is-positioned-color-stop($input); 590 @return (type-of($input) == color) or easing-gradient-is-positioned-color-stop($input);
594} 591}
595 592
596/// 593///
@@ -598,6 +595,6 @@ $iro-easing-gradient-steps: 10 !default;
598/// 595///
599/// @access private 596/// @access private
600/// 597///
601@function iro-easing-gradient-is-positioned-color-stop($input) { 598@function easing-gradient-is-positioned-color-stop($input) {
602 @return (type-of($input) == list) and (type-of(nth($input, 1)) == color); 599 @return (type-of($input) == list) and (type-of(nth($input, 1)) == color);
603} 600}
diff --git a/src/_harmony.scss b/src/_harmony.scss
index 076fe55..839036c 100644
--- a/src/_harmony.scss
+++ b/src/_harmony.scss
@@ -9,6 +9,8 @@
9//// 9////
10 10
11@use 'sass:math'; 11@use 'sass:math';
12@use './functions';
13@use './responsive';
12 14
13/// 15///
14/// Adjust a value to a modular scale. 16/// Adjust a value to a modular scale.
@@ -23,7 +25,7 @@
23/// 25///
24/// @return {number} 26/// @return {number}
25/// 27///
26@function iro-harmony-modular-scale($times, $base, $ratio) { 28@function modular-scale($times, $base, $ratio) {
27 @if type-of($base) == number { 29 @if type-of($base) == number {
28 @return $base * math.pow($ratio, $times); 30 @return $base * math.pow($ratio, $times);
29 } 31 }
@@ -31,7 +33,7 @@
31 $main-base: nth($base, 1); 33 $main-base: nth($base, 1);
32 $norm-bases: (); 34 $norm-bases: ();
33 35
34 @each $b in iro-list-slice($base, 2) { 36 @each $b in functions.list-slice($base, 2) {
35 @if $b > $main-base { 37 @if $b > $main-base {
36 @while $b > $main-base { 38 @while $b > $main-base {
37 $b: math.div($b, $ratio); 39 $b: math.div($b, $ratio);
@@ -47,7 +49,7 @@
47 } 49 }
48 50
49 $all-bases: append($norm-bases, $main-base); 51 $all-bases: append($norm-bases, $main-base);
50 $all-bases: iro-quicksort($all-bases); 52 $all-bases: functions.quicksort($all-bases);
51 53
52 $base-index: $times % length($all-bases) + 1; 54 $base-index: $times % length($all-bases) + 1;
53 $exp: math.floor(math.div($times, length($all-bases))); 55 $exp: math.floor(math.div($times, length($all-bases)));
@@ -59,11 +61,11 @@
59/// Combine responsive properties with modular scales to achieve responsive modular scales. 61/// Combine responsive properties with modular scales to achieve responsive modular scales.
60/// 62///
61/// @param {string | list} $props - Property or list of properties to set 63/// @param {string | list} $props - Property or list of properties to set
62/// @param {number} $times - Number of iterations. See iro-harmony-modular-scale for more information. 64/// @param {number} $times - Number of iterations. See modular-scale for more information.
63/// @param {number} $responsive-map - A map with keys = viewports and values = modular scales 65/// @param {number} $responsive-map - A map with keys = viewports and values = modular scales
64/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next 66/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next
65/// 67///
66/// @see {function} iro-harmony-modular-scale 68/// @see {function} modular-scale
67/// 69///
68/// @example scss - Responsive font sizes between 2 viewports based on modular scales 70/// @example scss - Responsive font sizes between 2 viewports based on modular scales
69/// $ms: ( 71/// $ms: (
@@ -72,25 +74,25 @@
72/// ); 74/// );
73/// 75///
74/// h1 { 76/// h1 {
75/// @include iro-responsive-modular-scale(font-size, 3, $ms); 77/// @include responsive-modular-scale(font-size, 3, $ms);
76/// } 78/// }
77/// 79///
78/// h2 { 80/// h2 {
79/// @include iro-responsive-modular-scale(font-size, 2, $ms); 81/// @include responsive-modular-scale(font-size, 2, $ms);
80/// } 82/// }
81/// 83///
82/// h3 { 84/// h3 {
83/// @include iro-responsive-modular-scale(font-size, 1, $ms); 85/// @include responsive-modular-scale(font-size, 1, $ms);
84/// } 86/// }
85/// 87///
86@mixin iro-responsive-modular-scale($props, $times, $responsive-map, $fluid: true) { 88@mixin responsive-modular-scale($props, $times, $responsive-map, $fluid: true) {
87 $new-map: (); 89 $new-map: ();
88 90
89 @each $key, $value in $responsive-map { 91 @each $key, $value in $responsive-map {
90 $new-map: map-merge($new-map, ( 92 $new-map: map-merge($new-map, (
91 $key: iro-harmony-modular-scale($times, $value...) 93 $key: modular-scale($times, $value...)
92 )); 94 ));
93 } 95 }
94 96
95 @include iro-responsive-property($props, $new-map, $fluid); 97 @include responsive.property($props, $new-map, $fluid);
96} 98}
diff --git a/src/_props.scss b/src/_props.scss
index efc3eea..cdb96c2 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -10,12 +10,15 @@
10/// @access public 10/// @access public
11//// 11////
12 12
13@use './functions';
14@use './contexts';
15
13/// 16///
14/// The maximum depth of resolved iro-prop-ref() references. 17/// The maximum depth of resolved iro-prop-ref() references.
15/// 18///
16/// @type number 19/// @type number
17/// 20///
18$iro-props-native-assing-max-depth: 2 !default; 21$native-assign-max-depth: 2 !default;
19 22
20/// 23///
21/// Indicate if property names must start with two dashes (--). 24/// Indicate if property names must start with two dashes (--).
@@ -23,14 +26,14 @@ $iro-props-native-assing-max-depth: 2 !default;
23/// 26///
24/// @type bool 27/// @type bool
25/// 28///
26$iro-props-enforce-double-dashes: true !default; 29$enforce-double-dashes: true !default;
27 30
28/// 31///
29/// Default tree name to use if no name is specified. 32/// Default tree name to use if no name is specified.
30/// 33///
31/// @type string 34/// @type string
32/// 35///
33$iro-props-default-tree: 'default' !default; 36$default-tree: 'default' !default;
34 37
35/// 38///
36/// List of all created property trees. 39/// List of all created property trees.
@@ -39,24 +42,24 @@ $iro-props-default-tree: 'default' !default;
39/// 42///
40/// @access private 43/// @access private
41/// 44///
42$iro-props-trees: (); 45$trees: ();
43 46
44/// 47///
45/// Default context name used for the namespace context. 48/// Default context name used for the namespace context.
46/// 49///
47/// @type string 50/// @type string
48/// 51///
49$iro-props-namespace-context-id: 'namespace' !default; 52$namespace-context-id: 'namespace' !default;
50 53
51/// 54///
52/// Declare a namespace, meaning that all variables declared and accessed. 55/// Declare a namespace, meaning that all variables declared and accessed.
53/// 56///
54/// @param {string} $name - Name of the namespace 57/// @param {string} $name - Name of the namespace
55/// 58///
56@mixin iro-props-namespace($name) { 59@mixin namespace($name) {
57 $key: '--#{$name}'; 60 $key: '--#{$name}';
58 61
59 $ns-key: iro-props-get-ns-key(); 62 $ns-key: get-ns-key();
60 63
61 @if $ns-key != null { 64 @if $ns-key != null {
62 $key: append($ns-key, $key); 65 $key: append($ns-key, $key);
@@ -64,23 +67,23 @@ $iro-props-namespace-context-id: 'namespace' !default;
64 $key: ($key); 67 $key: ($key);
65 } 68 }
66 69
67 @include iro-context-push($iro-props-namespace-context-id, 'namespace', ( 70 @include contexts.push($namespace-context-id, 'namespace', (
68 'name': $name, 71 'name': $name,
69 'key': $key 72 'key': $key
70 )); 73 ));
71 74
72 @content; 75 @content;
73 76
74 @include iro-context-pop($iro-props-namespace-context-id); 77 @include contexts.pop($namespace-context-id);
75} 78}
76 79
77/// 80///
78/// Get the current namespace name. 81/// Get the current namespace name.
79/// 82///
80@function iro-props-namespace() { 83@function namespace() {
81 $noop: iro-context-assert-stack-must-contain($iro-props-namespace-context-id, 'namespace'); 84 $noop: contexts.assert-stack-must-contain($namespace-context-id, 'namespace');
82 85
83 $data: nth(iro-context-get($iro-props-namespace-context-id, 'namespace'), 2); 86 $data: nth(contexts.get($namespace-context-id, 'namespace'), 2);
84 $name: map-get($data, 'name'); 87 $name: map-get($data, 'name');
85 88
86 @return $name; 89 @return $name;
@@ -91,46 +94,46 @@ $iro-props-namespace-context-id: 'namespace' !default;
91/// will be merged. 94/// will be merged.
92/// 95///
93/// @param {map} $map - Map containing properties 96/// @param {map} $map - Map containing properties
94/// @param {string} $tree [$iro-props-default-tree] - ID the map is saved as 97/// @param {string} $tree [$default-tree] - ID the map is saved as
95/// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted. 98/// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted.
96/// 99///
97@mixin iro-props-store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) { 100@mixin store($map, $tree: $default-tree, $merge: true, $global: false) {
98 $noop: iro-props-store($map, $tree, $merge, $global); 101 $noop: store($map, $tree, $merge, $global);
99} 102}
100 103
101/// 104///
102/// Save a property tree. 105/// Save a property tree.
103/// 106///
104/// @param {map} $map - Map containing properties 107/// @param {map} $map - Map containing properties
105/// @param {string} $tree [$iro-props-default-tree] - ID the map is saved as 108/// @param {string} $tree [$default-tree] - ID the map is saved as
106/// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted. 109/// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted.
107/// 110///
108@function iro-props-store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) { 111@function store($map, $tree: $default-tree, $merge: true, $global: false) {
109 $prop-map: null; 112 $prop-map: null;
110 113
111 @if $iro-props-enforce-double-dashes { 114 @if $enforce-double-dashes {
112 @if not iro-props-validate($map) { 115 @if not validate($map) {
113 @error 'Property tree keys must start with two dashes (--). If you don\'t use property trees for native CSS custom properties, set $iro-props-enforce-double-dashes to false.'; 116 @error 'Property tree keys must start with two dashes (--). If you don\'t use property trees for native CSS custom properties, set $enforce-double-dashes to false.';
114 } 117 }
115 } 118 }
116 119
117 @if not $global { 120 @if not $global {
118 $ns-key: iro-props-get-ns-key(); 121 $ns-key: get-ns-key();
119 122
120 @if $ns-key != null { 123 @if $ns-key != null {
121 $map: ($ns-key: $map) 124 $map: ($ns-key: $map)
122 } 125 }
123 } 126 }
124 127
125 @if map-has-key($iro-props-trees, $tree) { 128 @if map-has-key($trees, $tree) {
126 @if $merge { 129 @if $merge {
127 $map: iro-map-merge-recursive(map-get($iro-props-trees, $tree), $map); 130 $map: functions.map-merge-recursive(map-get($trees, $tree), $map);
128 } @else { 131 } @else {
129 @error 'Property tree #{inspect($tree)} does already exist.'; 132 @error 'Property tree #{inspect($tree)} does already exist.';
130 } 133 }
131 } 134 }
132 135
133 $iro-props-trees: map-merge($iro-props-trees, ($tree: $map)) !global; 136 $trees: map-merge($trees, ($tree: $map)) !global;
134 137
135 @return null; 138 @return null;
136} 139}
@@ -138,25 +141,25 @@ $iro-props-namespace-context-id: 'namespace' !default;
138/// 141///
139/// Delete a property tree. 142/// Delete a property tree.
140/// 143///
141/// @param {string} $tree [$iro-props-default-tree] - ID of the tree to be deleted 144/// @param {string} $tree [$default-tree] - ID of the tree to be deleted
142/// 145///
143@mixin iro-props-clear($tree: $iro-props-default-tree) { 146@mixin clear($tree: $default-tree) {
144 $noop: iro-props-clear($tree); 147 $noop: clear($tree);
145} 148}
146 149
147/// 150///
148/// Delete a property tree. 151/// Delete a property tree.
149/// 152///
150/// @param {string} $tree [$iro-props-default-tree] - ID of the tree to be deleted 153/// @param {string} $tree [$default-tree] - ID of the tree to be deleted
151/// 154///
152/// @throw If the property tree does not exist 155/// @throw If the property tree does not exist
153/// 156///
154@function iro-props-clear($tree: $iro-props-default-tree) { 157@function clear($tree: $default-tree) {
155 @if not map-has-key($iro-props-trees, $tree) { 158 @if not map-has-key($trees, $tree) {
156 @error 'Property tree "#{inspect($tree)}" does not exist.'; 159 @error 'Property tree "#{inspect($tree)}" does not exist.';
157 } 160 }
158 161
159 $iro-props-trees: map-remove($iro-props-trees, $tree) !global; 162 $trees: map-remove($trees, $tree) !global;
160 163
161 @return null; 164 @return null;
162} 165}
@@ -165,22 +168,22 @@ $iro-props-namespace-context-id: 'namespace' !default;
165/// Access a whole property or a subsection (i.e. value) of it. 168/// Access a whole property or a subsection (i.e. value) of it.
166/// 169///
167/// @param {string | list} $key [null] - Key of the property to read. If this is a list of keys, the map will be traversed in that order. 170/// @param {string | list} $key [null] - Key of the property to read. If this is a list of keys, the map will be traversed in that order.
168/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use 171/// @param {string} $tree [$default-tree] - ID of the property tree to use
169/// @param {any} $default [null] - Default value to return of no match was found. If null, this function will throw an error instead. 172/// @param {any} $default [null] - Default value to return of no match was found. If null, this function will throw an error instead.
170/// 173///
171/// @return {any} Value assigned to property or $default 174/// @return {any} Value assigned to property or $default
172/// 175///
173/// @throw If there was no match for $key and $default is null 176/// @throw If there was no match for $key and $default is null
174/// 177///
175@function iro-props-get-static($key: (), $tree: $iro-props-default-tree, $default: null, $global: false) { 178@function get-static($key: (), $tree: $default-tree, $default: null, $global: false) {
176 @if not map-has-key($iro-props-trees, $tree) { 179 @if not map-has-key($trees, $tree) {
177 @error 'Unknown tree "#{$tree}".'; 180 @error 'Unknown tree "#{$tree}".';
178 } 181 }
179 182
180 $result: map-get($iro-props-trees, $tree); 183 $result: map-get($trees, $tree);
181 184
182 @if not $global { 185 @if not $global {
183 $ns-key: iro-props-get-ns-key(); 186 $ns-key: get-ns-key();
184 187
185 @if $ns-key != null { 188 @if $ns-key != null {
186 $orig-key: $key; 189 $orig-key: $key;
@@ -205,9 +208,9 @@ $iro-props-namespace-context-id: 'namespace' !default;
205 208
206 @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' { 209 @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' {
207 @if length($result) == 2 { 210 @if length($result) == 2 {
208 $result: iro-props-get-static($tree: nth($result, 2), $global: true); 211 $result: get-static($tree: nth($result, 2), $global: true);
209 } @else { 212 } @else {
210 $result: iro-props-get-static(nth($result, 3), nth($result, 2), $global: true); 213 $result: get-static(nth($result, 3), nth($result, 2), $global: true);
211 } 214 }
212 } 215 }
213 } @else { 216 } @else {
@@ -223,9 +226,9 @@ $iro-props-namespace-context-id: 'namespace' !default;
223 226
224 @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' { 227 @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' {
225 @if length($result) == 2 { 228 @if length($result) == 2 {
226 $result: iro-props-get-static($tree: nth($result, 2), $global: true); 229 $result: get-static($tree: nth($result, 2), $global: true);
227 } @else { 230 } @else {
228 $result: iro-props-get-static(nth($result, 3), nth($result, 2), $global: true); 231 $result: get-static(nth($result, 3), nth($result, 2), $global: true);
229 } 232 }
230 } 233 }
231 } 234 }
@@ -250,13 +253,13 @@ $iro-props-namespace-context-id: 'namespace' !default;
250/// 253///
251/// @return {string} var() 254/// @return {string} var()
252/// 255///
253@function iro-props-get($key, $tree: $iro-props-default-tree, $default: null, $global: false) { 256@function get($key, $tree: $default-tree, $default: null, $global: false) {
254 @if $tree != null { 257 @if $tree != null {
255 $noop: iro-props-get-static($key, $tree, $default, $global); 258 $noop: get-static($key, $tree, $default, $global);
256 } 259 }
257 260
258 @if not $global { 261 @if not $global {
259 $ns-key: iro-props-get-ns-key(); 262 $ns-key: get-ns-key();
260 263
261 @if $ns-key != null { 264 @if $ns-key != null {
262 $orig-key: $key; 265 $orig-key: $key;
@@ -292,41 +295,41 @@ $iro-props-namespace-context-id: 'namespace' !default;
292/// 295///
293/// Generate assignments for native CSS custom properties with the values from the specified tree. 296/// Generate assignments for native CSS custom properties with the values from the specified tree.
294/// 297///
295/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use 298/// @param {string} $tree [$default-tree] - ID of the property tree to use
296/// @param {string} $root [()] - Sub-tree to use for assignment 299/// @param {string} $root [()] - Sub-tree to use for assignment
297/// 300///
298@mixin iro-props-assign($tree: $iro-props-default-tree, $root: (), $skip: (), $prefix: '', $global: false) { 301@mixin assign($tree: $default-tree, $root: (), $skip: (), $prefix: '', $global: false) {
299 $map: iro-props-get-static($root, $tree); 302 $map: get-static($root, $tree);
300 $map: map-remove($map, $skip...); 303 $map: map-remove($map, $skip...);
301 304
302 @if type-of($prefix) == list { 305 @if type-of($prefix) == list {
303 $prefix: iro-str-implode($prefix) 306 $prefix: functions.str-implode($prefix)
304 } 307 }
305 308
306 @if not $global { 309 @if not $global {
307 $ns-key: iro-props-get-ns-key(); 310 $ns-key: get-ns-key();
308 311
309 @if $ns-key != null { 312 @if $ns-key != null {
310 $prefix: $prefix + iro-str-implode($ns-key); 313 $prefix: $prefix + functions.str-implode($ns-key);
311 } 314 }
312 } 315 }
313 316
314 @include iro-props-assign-internal($map, $prefix); 317 @include assign-internal($map, $prefix);
315} 318}
316 319
317/// 320///
318/// @access private 321/// @access private
319/// 322///
320@mixin iro-props-assign-internal($map, $prefix: '', $ref-depth: $iro-props-native-assing-max-depth) { 323@mixin assign-internal($map, $prefix: '', $ref-depth: $native-assign-max-depth) {
321 @each $key, $value in $map { 324 @each $key, $value in $map {
322 $rd: $ref-depth; 325 $rd: $ref-depth;
323 @if type-of($value) == list and length($value) > 0 and nth($value, 1) == 'iro-prop-ref' { 326 @if type-of($value) == list and length($value) > 0 and nth($value, 1) == 'iro-prop-ref' {
324 @if $ref-depth != 0 { 327 @if $ref-depth != 0 {
325 $rd: $rd - 1; 328 $rd: $rd - 1;
326 @if length($value) == 2 { 329 @if length($value) == 2 {
327 $value: iro-props-get-static($tree: nth($value, 2)); 330 $value: get-static($tree: nth($value, 2));
328 } @else { 331 } @else {
329 $value: iro-props-get-static(nth($value, 3), nth($value, 2)); 332 $value: get-static(nth($value, 3), nth($value, 2));
330 } 333 }
331 } @else { 334 } @else {
332 $value: null; 335 $value: null;
@@ -335,7 +338,7 @@ $iro-props-namespace-context-id: 'namespace' !default;
335 @if type-of($value) != map and $value != () { 338 @if type-of($value) != map and $value != () {
336 #{$prefix + $key}: #{$value}; 339 #{$prefix + $key}: #{$value};
337 } @else { 340 } @else {
338 @include iro-props-assign-internal($value, $prefix + $key, $rd); 341 @include assign-internal($value, $prefix + $key, $rd);
339 } 342 }
340 } 343 }
341} 344}
@@ -345,14 +348,14 @@ $iro-props-namespace-context-id: 'namespace' !default;
345/// 348///
346/// @access private 349/// @access private
347/// 350///
348@function iro-props-validate($map) { 351@function validate($map) {
349 @each $key, $value in $map { 352 @each $key, $value in $map {
350 @if str-index($key, '--') != 1 { 353 @if str-index($key, '--') != 1 {
351 @return false; 354 @return false;
352 } 355 }
353 356
354 @if type-of($value) == map { 357 @if type-of($value) == map {
355 @if not iro-props-validate($value) { 358 @if not validate($value) {
356 @return false; 359 @return false;
357 } 360 }
358 } 361 }
@@ -364,16 +367,16 @@ $iro-props-namespace-context-id: 'namespace' !default;
364/// 367///
365/// Generate a reference to another tree. Dereferencing is lazy, so you may specify a tree that hasn't been created yet. 368/// Generate a reference to another tree. Dereferencing is lazy, so you may specify a tree that hasn't been created yet.
366/// 369///
367/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use 370/// @param {string} $tree [$default-tree] - ID of the property tree to use
368/// @param {string | list} $key - Key of the property to read. If this is a list of keys, the map will be traversed in that order. 371/// @param {string | list} $key - Key of the property to read. If this is a list of keys, the map will be traversed in that order.
369/// 372///
370/// @return {list} A special list that let's Ignis know that this is a lazy value. 373/// @return {list} A special list that let's Ignis know that this is a lazy value.
371/// 374///
372/// @throw If there was no match for $key and $default is null 375/// @throw If there was no match for $key and $default is null
373/// 376///
374@function iro-props-ref($tree: $iro-props-default-tree, $key: null, $global: false) { 377@function ref($tree: $default-tree, $key: null, $global: false) {
375 @if not $global { 378 @if not $global {
376 $ns-key: iro-props-get-ns-key(); 379 $ns-key: get-ns-key();
377 380
378 @if $ns-key != null { 381 @if $ns-key != null {
379 $orig-key: $key; 382 $orig-key: $key;
@@ -403,8 +406,8 @@ $iro-props-namespace-context-id: 'namespace' !default;
403/// 406///
404/// @access private 407/// @access private
405/// 408///
406@function iro-props-get-ns-key() { 409@function get-ns-key() {
407 $ctx: iro-context-get($iro-props-namespace-context-id, 'namespace'); 410 $ctx: contexts.get($namespace-context-id, 'namespace');
408 411
409 @if $ctx == null { 412 @if $ctx == null {
410 @return null; 413 @return null;
@@ -416,4 +419,4 @@ $iro-props-namespace-context-id: 'namespace' !default;
416 @return $key; 419 @return $key;
417} 420}
418 421
419@include iro-context-stack-create($iro-props-namespace-context-id); 422@include contexts.create($namespace-context-id);
diff --git a/src/_responsive.scss b/src/_responsive.scss
index a3d8445..9520dfc 100644
--- a/src/_responsive.scss
+++ b/src/_responsive.scss
@@ -17,20 +17,23 @@
17/// @access public 17/// @access public
18//// 18////
19 19
20@use './functions';
21@use './contexts';
22
20/// 23///
21/// If true, named viewports will be supported if a compatible $breakpoints map exists. 24/// If true, named viewports will be supported if a compatible $breakpoints map exists.
22/// This is the case for [include-media](https://include-media.com/), for example. 25/// This is the case for [include-media](https://include-media.com/), for example.
23/// 26///
24/// @type bool 27/// @type bool
25/// 28///
26$iro-responsive-support-named-viewports: true !default; 29$support-named-viewports: true !default;
27 30
28/// 31///
29/// Context ID used for responsive environment-related mixins. 32/// Context ID used for responsive environment-related mixins.
30/// 33///
31/// @type string 34/// @type string
32/// 35///
33$iro-responsive-context-id: 'responsive' !default; 36$context-id: 'responsive' !default;
34 37
35/// 38///
36/// Scale a property uniformly between a specific set of target viewports / values. 39/// Scale a property uniformly between a specific set of target viewports / values.
@@ -42,7 +45,7 @@ $iro-responsive-context-id: 'responsive' !default;
42/// 45///
43/// @example scss - Responsive font-size between 2 viewports 46/// @example scss - Responsive font-size between 2 viewports
44/// .something { 47/// .something {
45/// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px )); 48/// @include property(font-size, ( 320px: 20px, 720px: 30px ));
46/// } 49/// }
47/// 50///
48/// // Generates: 51/// // Generates:
@@ -67,7 +70,7 @@ $iro-responsive-context-id: 'responsive' !default;
67/// 70///
68/// @example scss - Responsive font-size between 3 viewports 71/// @example scss - Responsive font-size between 3 viewports
69/// .something { 72/// .something {
70/// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px )); 73/// @include property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px ));
71/// } 74/// }
72/// 75///
73/// // Generates: 76/// // Generates:
@@ -96,21 +99,21 @@ $iro-responsive-context-id: 'responsive' !default;
96/// } 99/// }
97/// } 100/// }
98/// 101///
99@mixin iro-responsive-property($props, $responsive-map, $fluid: true, $vertical: false) { 102@mixin property($props, $responsive-map, $fluid: true, $vertical: false) {
100 @include iro-responsive-env(map-keys($responsive-map), $fluid, $vertical) { 103 @include env(map-keys($responsive-map), $fluid, $vertical) {
101 @if type-of($props) == list { 104 @if type-of($props) == list {
102 @each $prop in $props { 105 @each $prop in $props {
103 #{$prop}: iro-responsive-set(map-values($responsive-map)); 106 #{$prop}: set(map-values($responsive-map));
104 } 107 }
105 } @else { 108 } @else {
106 #{$props}: iro-responsive-set(map-values($responsive-map)); 109 #{$props}: set(map-values($responsive-map));
107 } 110 }
108 } 111 }
109} 112}
110 113
111/// 114///
112/// Create a new responsive environment by specifying a set of viewports. 115/// Create a new responsive environment by specifying a set of viewports.
113/// Inside a responsive environment, use the iro-responsive-set function to make a property scale automatically. 116/// Inside a responsive environment, use the set function to make a property scale automatically.
114/// 117///
115/// @param {list} $viewports - Viewports sorted in ascending order 118/// @param {list} $viewports - Viewports sorted in ascending order
116/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next 119/// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next
@@ -118,12 +121,12 @@ $iro-responsive-context-id: 'responsive' !default;
118/// 121///
119/// @content 122/// @content
120/// 123///
121/// @see {function} iro-responsive-set 124/// @see {function} set
122/// 125///
123/// @example scss - Responsive font-size between 2 viewports 126/// @example scss - Responsive font-size between 2 viewports
124/// .something { 127/// .something {
125/// @include iro-responsive-env((320px, 720px)) { 128/// @include env((320px, 720px)) {
126/// font-size: iro-responsive-set(20px, 30px); 129/// font-size: set(20px, 30px);
127/// } 130/// }
128/// } 131/// }
129/// 132///
@@ -147,7 +150,7 @@ $iro-responsive-context-id: 'responsive' !default;
147/// } 150/// }
148/// } 151/// }
149/// 152///
150@mixin iro-responsive-env($viewports, $fluid: true, $vertical: false) { 153@mixin env($viewports, $fluid: true, $vertical: false) {
151 @if length($viewports) <= 1 { 154 @if length($viewports) <= 1 {
152 @error '$viewports must contain at least two viewports.'; 155 @error '$viewports must contain at least two viewports.';
153 } 156 }
@@ -155,7 +158,7 @@ $iro-responsive-context-id: 'responsive' !default;
155 $new-viewports: (); 158 $new-viewports: ();
156 159
157 @each $viewport in $viewports { 160 @each $viewport in $viewports {
158 @if $iro-responsive-support-named-viewports and global-variable-exists(breakpoints) { 161 @if $support-named-viewports and global-variable-exists(breakpoints) {
159 @if map-has-key($breakpoints, $viewport) { 162 @if map-has-key($breakpoints, $viewport) {
160 $viewport: map-get($breakpoints, $viewport); 163 $viewport: map-get($breakpoints, $viewport);
161 } 164 }
@@ -168,7 +171,7 @@ $iro-responsive-context-id: 'responsive' !default;
168 $new-viewports: append($new-viewports, $viewport); 171 $new-viewports: append($new-viewports, $viewport);
169 } 172 }
170 173
171 $viewports: iro-quicksort($new-viewports); 174 $viewports: functions.quicksort($new-viewports);
172 175
173 @if $new-viewports != $viewports { 176 @if $new-viewports != $viewports {
174 @error '$viewports was not sorted in ascending order.'; 177 @error '$viewports was not sorted in ascending order.';
@@ -178,7 +181,7 @@ $iro-responsive-context-id: 'responsive' !default;
178 $first-vp: nth($viewports, 1); 181 $first-vp: nth($viewports, 1);
179 $last-vp: nth($viewports, length($viewports)); 182 $last-vp: nth($viewports, length($viewports));
180 183
181 @include iro-context-push($iro-responsive-context-id, 'env', ( 184 @include contexts.push($context-id, 'env', (
182 'viewports': $viewports, 185 'viewports': $viewports,
183 'mode': set, 186 'mode': set,
184 'index': 1, 187 'index': 1,
@@ -188,7 +191,7 @@ $iro-responsive-context-id: 'responsive' !default;
188 191
189 @content; 192 @content;
190 193
191 @include iro-context-pop($iro-responsive-context-id); 194 @include contexts.pop($context-id);
192 195
193 @for $i from 1 to length($viewports) { 196 @for $i from 1 to length($viewports) {
194 $prev-vp: nth($viewports, $i); 197 $prev-vp: nth($viewports, $i);
@@ -196,7 +199,7 @@ $iro-responsive-context-id: 'responsive' !default;
196 199
197 @if not $vertical { 200 @if not $vertical {
198 @media (min-width: $prev-vp) and (max-width: $next-vp) { 201 @media (min-width: $prev-vp) and (max-width: $next-vp) {
199 @include iro-context-push($iro-responsive-context-id, 'env', ( 202 @include contexts.push($context-id, 'env', (
200 'viewports': $viewports, 203 'viewports': $viewports,
201 'mode': transition, 204 'mode': transition,
202 'index': $i, 205 'index': $i,
@@ -206,11 +209,11 @@ $iro-responsive-context-id: 'responsive' !default;
206 209
207 @content; 210 @content;
208 211
209 @include iro-context-pop($iro-responsive-context-id); 212 @include contexts.pop($context-id);
210 } 213 }
211 } @else { 214 } @else {
212 @media (min-height: $prev-vp) and (max-height: $next-vp) { 215 @media (min-height: $prev-vp) and (max-height: $next-vp) {
213 @include iro-context-push($iro-responsive-context-id, 'env', ( 216 @include contexts.push($context-id, 'env', (
214 'viewports': $viewports, 217 'viewports': $viewports,
215 'mode': transition, 218 'mode': transition,
216 'index': $i, 219 'index': $i,
@@ -220,14 +223,14 @@ $iro-responsive-context-id: 'responsive' !default;
220 223
221 @content; 224 @content;
222 225
223 @include iro-context-pop($iro-responsive-context-id); 226 @include contexts.pop($context-id);
224 } 227 }
225 } 228 }
226 } 229 }
227 230
228 @if not $vertical { 231 @if not $vertical {
229 @media (min-width: $last-vp) { 232 @media (min-width: $last-vp) {
230 @include iro-context-push($iro-responsive-context-id, 'env', ( 233 @include contexts.push($context-id, 'env', (
231 'viewports': $viewports, 234 'viewports': $viewports,
232 'mode': set, 235 'mode': set,
233 'index': length($viewports), 236 'index': length($viewports),
@@ -237,11 +240,11 @@ $iro-responsive-context-id: 'responsive' !default;
237 240
238 @content; 241 @content;
239 242
240 @include iro-context-pop($iro-responsive-context-id); 243 @include contexts.pop($context-id);
241 } 244 }
242 } @else { 245 } @else {
243 @media (min-height: $last-vp) { 246 @media (min-height: $last-vp) {
244 @include iro-context-push($iro-responsive-context-id, 'env', ( 247 @include contexts.push($context-id, 'env', (
245 'viewports': $viewports, 248 'viewports': $viewports,
246 'mode': set, 249 'mode': set,
247 'index': length($viewports), 250 'index': length($viewports),
@@ -251,11 +254,11 @@ $iro-responsive-context-id: 'responsive' !default;
251 254
252 @content; 255 @content;
253 256
254 @include iro-context-pop($iro-responsive-context-id); 257 @include contexts.pop($context-id);
255 } 258 }
256 } 259 }
257 } @else { 260 } @else {
258 @include iro-context-push($iro-responsive-context-id, 'env', ( 261 @include contexts.push($context-id, 'env', (
259 'viewports': $viewports, 262 'viewports': $viewports,
260 'mode': set, 263 'mode': set,
261 'index': 1, 264 'index': 1,
@@ -265,14 +268,14 @@ $iro-responsive-context-id: 'responsive' !default;
265 268
266 @content; 269 @content;
267 270
268 @include iro-context-pop($iro-responsive-context-id); 271 @include contexts.pop($context-id);
269 272
270 @for $i from 2 through length($viewports) { 273 @for $i from 2 through length($viewports) {
271 $vp: nth($viewports, $i); 274 $vp: nth($viewports, $i);
272 275
273 @if not $vertical { 276 @if not $vertical {
274 @media (min-width: $vp) { 277 @media (min-width: $vp) {
275 @include iro-context-push($iro-responsive-context-id, 'env', ( 278 @include contexts.push($context-id, 'env', (
276 'viewports': $viewports, 279 'viewports': $viewports,
277 'mode': set, 280 'mode': set,
278 'index': $i 281 'index': $i
@@ -280,11 +283,11 @@ $iro-responsive-context-id: 'responsive' !default;
280 283
281 @content; 284 @content;
282 285
283 @include iro-context-pop($iro-responsive-context-id); 286 @include contexts.pop($context-id);
284 } 287 }
285 } @else { 288 } @else {
286 @media (min-height: $vp) { 289 @media (min-height: $vp) {
287 @include iro-context-push($iro-responsive-context-id, 'env', ( 290 @include contexts.push($context-id, 'env', (
288 'viewports': $viewports, 291 'viewports': $viewports,
289 'mode': set, 292 'mode': set,
290 'index': $i 293 'index': $i
@@ -292,7 +295,7 @@ $iro-responsive-context-id: 'responsive' !default;
292 295
293 @content; 296 @content;
294 297
295 @include iro-context-pop($iro-responsive-context-id); 298 @include contexts.pop($context-id);
296 } 299 }
297 } 300 }
298 } 301 }
@@ -306,10 +309,10 @@ $iro-responsive-context-id: 'responsive' !default;
306/// 309///
307/// @return {number|string} 310/// @return {number|string}
308/// 311///
309@function iro-responsive-set($values, $without-calc: false) { 312@function set($values, $without-calc: false) {
310 $noop: iro-context-assert-stack-must-contain($iro-responsive-context-id, 'env'); 313 $noop: contexts.assert-stack-must-contain($context-id, 'env');
311 314
312 $data: nth(iro-context-get($iro-responsive-context-id, 'env'), 2); 315 $data: nth(contexts.get($context-id, 'env'), 2);
313 $viewports: map-get($data, 'viewports'); 316 $viewports: map-get($data, 'viewports');
314 $mode: map-get($data, 'mode'); 317 $mode: map-get($data, 'mode');
315 $fluid: map-get($data, 'fluid'); 318 $fluid: map-get($data, 'fluid');
@@ -328,7 +331,7 @@ $iro-responsive-context-id: 'responsive' !default;
328 $prev-value: nth($values, $index); 331 $prev-value: nth($values, $index);
329 $next-value: nth($values, $index + 1); 332 $next-value: nth($values, $index + 1);
330 333
331 @return iro-responsive-fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc); 334 @return fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc);
332 } 335 }
333} 336}
334 337
@@ -344,7 +347,7 @@ $iro-responsive-context-id: 'responsive' !default;
344/// 347///
345/// @access private 348/// @access private
346/// 349///
347@function iro-responsive-fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) { 350@function fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) {
348 $value-unit: unit($min-value); 351 $value-unit: unit($min-value);
349 $max-value-unit: unit($max-value); 352 $max-value-unit: unit($max-value);
350 $viewport-unit: unit($min-viewport); 353 $viewport-unit: unit($min-viewport);
@@ -368,12 +371,12 @@ $iro-responsive-context-id: 'responsive' !default;
368 } 371 }
369 372
370 @if ($value-unit == rem) and ($viewport-unit == px) { 373 @if ($value-unit == rem) and ($viewport-unit == px) {
371 $min-viewport: iro-px-to-rem($min-viewport); 374 $min-viewport: functions.px-to-rem($min-viewport);
372 $max-viewport: iro-px-to-rem($max-viewport); 375 $max-viewport: functions.px-to-rem($max-viewport);
373 $viewport-unit: rem; 376 $viewport-unit: rem;
374 } @else if ($value-unit == px) and ($viewport-unit == rem) { 377 } @else if ($value-unit == px) and ($viewport-unit == rem) {
375 $min-value: iro-px-to-rem($min-value); 378 $min-value: functions.px-to-rem($min-value);
376 $max-value: iro-px-to-rem($max-value); 379 $max-value: functions.px-to-rem($max-value);
377 $value-unit: rem; 380 $value-unit: rem;
378 } 381 }
379 382
@@ -381,8 +384,8 @@ $iro-responsive-context-id: 'responsive' !default;
381 @error 'This combination of units is not supported.'; 384 @error 'This combination of units is not supported.';
382 } 385 }
383 386
384 $value-diff: iro-strip-unit($max-value - $min-value); 387 $value-diff: functions.strip-unit($max-value - $min-value);
385 $viewport-diff: iro-strip-unit($max-viewport - $min-viewport); 388 $viewport-diff: functions.strip-unit($max-viewport - $min-viewport);
386 389
387 $calc: ''; 390 $calc: '';
388 391
@@ -403,4 +406,4 @@ $iro-responsive-context-id: 'responsive' !default;
403 } 406 }
404} 407}
405 408
406@include iro-context-stack-create($iro-responsive-context-id); 409@include contexts.create($context-id);
diff --git a/src/_vars.scss b/src/_vars.scss
index ce6efda..34785b8 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -13,4 +13,4 @@
13/// 13///
14/// @type number 14/// @type number
15/// 15///
16$iro-root-size: 16px !default; 16$root-size: 16px !default;
diff --git a/src/bem-shortcodes.scss b/src/bem-shortcodes.scss
deleted file mode 100644
index 11abeed..0000000
--- a/src/bem-shortcodes.scss
+++ /dev/null
@@ -1,349 +0,0 @@
1////
2/// Shorter version of the bem-related mixins. Useful to reduce clutter.
3///
4/// @group BEM shortcodes
5///
6/// @access public
7////
8
9///
10/// @alias iro-bem-block
11///
12@mixin block($name, $type: null) {
13 @include iro-bem-block($name, $type: null) {
14 @content;
15 }
16}
17
18///
19/// @alias block
20///
21@mixin b($name, $type: null) {
22 @include block($name, $type: null) {
23 @content;
24 }
25}
26
27///
28/// @alias iro-bem-object
29///
30@mixin object($name) {
31 @include iro-bem-object($name) {
32 @content;
33 }
34}
35
36///
37/// @alias object
38///
39@mixin ob($name) {
40 @include object($name) {
41 @content;
42 }
43}
44
45///
46/// @alias iro-bem-component
47///
48@mixin component($name) {
49 @include iro-bem-component($name) {
50 @content;
51 }
52}
53
54///
55/// @alias component
56///
57@mixin cb($name) {
58 @include component($name) {
59 @content;
60 }
61}
62
63///
64/// @alias iro-bem-layout
65///
66@mixin layout($name) {
67 @include iro-bem-layout($name) {
68 @content;
69 }
70}
71
72///
73/// @alias layout
74///
75@mixin lb($name) {
76 @include layout($name) {
77 @content;
78 }
79}
80
81///
82/// @alias iro-bem-utility
83///
84@mixin utility($name) {
85 @include iro-bem-utility($name) {
86 @content;
87 }
88}
89
90///
91/// @alias utility
92///
93@mixin ub($name) {
94 @include utility($name) {
95 @content;
96 }
97}
98
99///
100/// @alias iro-bem-scope
101///
102@mixin scope($name) {
103 @include iro-bem-scope($name) {
104 @content;
105 }
106}
107
108///
109/// @alias scope
110///
111@mixin sb($name) {
112 @include scope($name) {
113 @content;
114 }
115}
116
117///
118/// @alias iro-bem-theme
119///
120@mixin theme($name) {
121 @include iro-bem-theme($name) {
122 @content;
123 }
124}
125
126///
127/// @alias theme
128///
129@mixin tb($name) {
130 @include theme($name) {
131 @content;
132 }
133}
134
135///
136/// @alias iro-bem-js
137///
138@mixin js($name) {
139 @include iro-bem-js($name) {
140 @content;
141 }
142}
143
144///
145/// @alias iro-bem-qa
146///
147@mixin qa($name) {
148 @include iro-bem-qa($name) {
149 @content;
150 }
151}
152
153///
154/// @alias iro-bem-hack
155///
156@mixin hack($name) {
157 @include iro-bem-hack($name) {
158 @content;
159 }
160}
161
162///
163/// @alias iro-bem-composed-of
164///
165@mixin composed-of($block, $blocks...) {
166 @include iro-bem-composed-of($block, $blocks...) {
167 @content;
168 }
169}
170
171///
172/// @alias composed-of
173///
174@mixin co($block, $blocks...) {
175 @include composed-of($block, $blocks...) {
176 @content;
177 }
178}
179
180///
181/// @alias iro-bem-element
182///
183@mixin element($name, $names...) {
184 @include iro-bem-element($name, $names...) {
185 @content;
186 }
187}
188
189///
190/// @alias element
191///
192@mixin e($name, $names...) {
193 @include element($name, $names...) {
194 @content;
195 }
196}
197
198///
199/// @alias iro-bem-related-element
200///
201@mixin related-element($sign, $name, $names...) {
202 @include iro-bem-related-element($sign, $name, $names...) {
203 @content;
204 }
205}
206
207///
208/// @alias related-element
209///
210@mixin re($sign, $name, $names...) {
211 @include related-element($sign, $name, $names...) {
212 @content;
213 }
214}
215
216///
217/// @alias iro-bem-sibling-element
218///
219@mixin sibling-element($name, $names...) {
220 @include iro-bem-sibling-element($name, $names...) {
221 @content;
222 }
223}
224
225///
226/// @alias sibling-element
227///
228@mixin se($name, $names...) {
229 @include sibling-element($name, $names...) {
230 @content;
231 }
232}
233
234///
235/// @alias iro-bem-next-element
236///
237@mixin next-element($name, $names...) {
238 @include iro-bem-next-element($name, $names...) {
239 @content;
240 }
241}
242
243///
244/// @alias next-element
245///
246@mixin ne($name, $names...) {
247 @include next-element($name, $names...) {
248 @content;
249 }
250}
251
252///
253/// @alias iro-bem-next-twin-element
254///
255@mixin next-twin-element {
256 @include iro-bem-next-twin-element {
257 @content;
258 }
259}
260
261///
262/// @alias next-twin-element
263///
264@mixin te {
265 @include next-twin-element {
266 @content;
267 }
268}
269
270///
271/// @alias iro-bem-modifier
272///
273@mixin modifier($name, $names...) {
274 @include iro-bem-modifier($name, $names...) {
275 @content;
276 }
277}
278
279///
280/// @alias modifier
281///
282@mixin m($name, $names...) {
283 @include modifier($name, $names...) {
284 @content;
285 }
286}
287
288///
289/// @alias iro-bem-suffix
290///
291@mixin suffix($name) {
292 @include iro-bem-suffix($name) {
293 @content;
294 }
295}
296
297///
298/// @alias suffix
299///
300@mixin s($name) {
301 @include suffix($name) {
302 @content;
303 }
304}
305
306///
307/// @alias iro-bem-is
308///
309@mixin is($state, $states...) {
310 @include iro-bem-is($state, $states...) {
311 @content;
312 }
313}
314
315///
316/// @alias iro-bem-has
317///
318@mixin has($state, $states...) {
319 @include iro-bem-has($state, $states...) {
320 @content;
321 }
322}
323
324///
325/// @alias iro-bem-at-theme
326///
327@mixin at-theme($name, $names...) {
328 @include iro-bem-at-theme($name, $names...) {
329 @content;
330 }
331}
332
333///
334/// @alias theme
335///
336@mixin at($name, $names...) {
337 @include at-theme($name, $names...) {
338 @content;
339 }
340}
341
342///
343/// @alias iro-bem-multi
344///
345@mixin multi($first, $others...) {
346 @include iro-bem-multi($first, $others...) {
347 @content;
348 }
349}
diff --git a/src/bem/_block.scss b/src/bem/_block.scss
index d065891..49af04b 100644
--- a/src/bem/_block.scss
+++ b/src/bem/_block.scss
@@ -4,6 +4,12 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use './functions' as bemfunctions;
10@use '../functions';
11@use '../contexts';
12
7/// 13///
8/// Generate a new block. 14/// Generate a new block.
9/// 15///
@@ -20,7 +26,7 @@
20/// @throw If the block is preceded by another block, element, modifier or suffix 26/// @throw If the block is preceded by another block, element, modifier or suffix
21/// 27///
22/// @example scss - Creating a new block 28/// @example scss - Creating a new block
23/// @include iro-bem-block('something', 'component') { 29/// @include block('something', 'component') {
24/// /* some definitions */ 30/// /* some definitions */
25/// } 31/// }
26/// 32///
@@ -30,12 +36,12 @@
30/// /* some definitions */ 36/// /* some definitions */
31/// } 37/// }
32/// 38///
33@mixin iro-bem-block($name, $type: null) { 39@mixin block($name, $type: null) {
34 $result: iro-bem-block($name, $type); 40 $result: block($name, $type);
35 $selector: nth($result, 1); 41 $selector: nth($result, 1);
36 $context: nth($result, 2); 42 $context: nth($result, 2);
37 43
38 @include iro-bem-validate( 44 @include validators.validate(
39 'block', 45 'block',
40 (name: $name, type: $type), 46 (name: $name, type: $type),
41 $selector, 47 $selector,
@@ -43,16 +49,16 @@
43 ); 49 );
44 50
45 @if $type != null { 51 @if $type != null {
46 $iro-bem-blocks: append($iro-bem-blocks, $name + '_' + $type) !global; 52 vars.$blocks: append(vars.$blocks, $name + '_' + $type);
47 } @else { 53 } @else {
48 $iro-bem-blocks: append($iro-bem-blocks, $name) !global; 54 vars.$blocks: append(vars.$blocks, $name);
49 } 55 }
50 56
51 @include iro-context-push($iro-bem-context-id, $context...); 57 @include contexts.push(vars.$context-id, $context...);
52 @at-root #{$selector} { 58 @at-root #{$selector} {
53 @content; 59 @content;
54 } 60 }
55 @include iro-context-pop($iro-bem-context-id); 61 @include contexts.pop(vars.$context-id);
56} 62}
57 63
58/// 64///
@@ -60,21 +66,21 @@
60/// 66///
61/// @return {list} A list with two items: 1. selector, 2. context or `null` 67/// @return {list} A list with two items: 1. selector, 2. context or `null`
62/// 68///
63/// @see {mixin} iro-bem-block 69/// @see {mixin} block
64/// 70///
65@function iro-bem-block($name, $type: null) { 71@function block($name, $type: null) {
66 // 72 //
67 // Possible outcomes: 73 // Possible outcomes:
68 // - ({b,e,m,s}) block 74 // - ({b,e,m,s}) block
69 // 75 //
70 76
71 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 77 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
72 78
73 $selector: null; 79 $selector: null;
74 $base-selector: null; 80 $base-selector: null;
75 81
76 @if $type != null { 82 @if $type != null {
77 $namespace: map-get($iro-bem-namespaces, $type); 83 $namespace: map-get(vars.$namespaces, $type);
78 84
79 @if not $namespace { 85 @if not $namespace {
80 @error '"#{$type}" is not a valid type.'; 86 @error '"#{$type}" is not a valid type.';
@@ -85,7 +91,7 @@
85 @if $type != 'theme' or & { 91 @if $type != 'theme' or & {
86 $selector: $base-selector; 92 $selector: $base-selector;
87 } @else if not & { 93 } @else if not & {
88 $selector: iro-bem-theme-selector($name); 94 $selector: bemfunctions.theme-selector($name);
89 } 95 }
90 } @else { 96 } @else {
91 $base-selector: selector-parse('.' + $name); 97 $base-selector: selector-parse('.' + $name);
@@ -107,14 +113,14 @@
107} 113}
108 114
109/// 115///
110/// Generate a new object block. It's a shorthand for iro-bem-block($name, 'object'). 116/// Generate a new object block. It's a shorthand for block($name, 'object').
111/// 117///
112/// @param {string} $name - Object block name 118/// @param {string} $name - Object block name
113/// 119///
114/// @content 120/// @content
115/// 121///
116@mixin iro-bem-object($name) { 122@mixin object($name) {
117 @include iro-bem-block($name, 'object') { 123 @include block($name, 'object') {
118 @content; 124 @content;
119 } 125 }
120} 126}
@@ -124,21 +130,21 @@
124/// 130///
125/// @return {list} A list with two items: 1. selector, 2. context or `null` 131/// @return {list} A list with two items: 1. selector, 2. context or `null`
126/// 132///
127/// @see {mixin} iro-bem-object 133/// @see {mixin} object
128/// 134///
129@function iro-bem-object($name) { 135@function object($name) {
130 @return iro-bem-block($name, 'object'); 136 @return block($name, 'object');
131} 137}
132 138
133/// 139///
134/// Generate a new component block. It's a shorthand for iro-bem-block($name, 'component'). 140/// Generate a new component block. It's a shorthand for block($name, 'component').
135/// 141///
136/// @param {string} $name - Component block name 142/// @param {string} $name - Component block name
137/// 143///
138/// @content 144/// @content
139/// 145///
140@mixin iro-bem-component($name) { 146@mixin component($name) {
141 @include iro-bem-block($name, 'component') { 147 @include block($name, 'component') {
142 @content; 148 @content;
143 } 149 }
144} 150}
@@ -148,21 +154,21 @@
148/// 154///
149/// @return {list} A list with two items: 1. selector, 2. context or `null` 155/// @return {list} A list with two items: 1. selector, 2. context or `null`
150/// 156///
151/// @see {mixin} iro-bem-component 157/// @see {mixin} component
152/// 158///
153@function iro-bem-component($name) { 159@function component($name) {
154 @return iro-bem-block($name, 'component'); 160 @return block($name, 'component');
155} 161}
156 162
157/// 163///
158/// Generate a new layout block. It's a shorthand for iro-bem-block($name, 'layout'). 164/// Generate a new layout block. It's a shorthand for block($name, 'layout').
159/// 165///
160/// @param {string} $name - Layout block name 166/// @param {string} $name - Layout block name
161/// 167///
162/// @content 168/// @content
163/// 169///
164@mixin iro-bem-layout($name) { 170@mixin layout($name) {
165 @include iro-bem-block($name, 'layout') { 171 @include block($name, 'layout') {
166 @content; 172 @content;
167 } 173 }
168} 174}
@@ -172,21 +178,21 @@
172/// 178///
173/// @return {list} A list with two items: 1. selector, 2. context or `null` 179/// @return {list} A list with two items: 1. selector, 2. context or `null`
174/// 180///
175/// @see {mixin} iro-bem-layout 181/// @see {mixin} layout
176/// 182///
177@function iro-bem-layout($name) { 183@function layout($name) {
178 @return iro-bem-block($name, 'layout'); 184 @return block($name, 'layout');
179} 185}
180 186
181/// 187///
182/// Generate a new utility block. It's a shorthand for iro-bem-block($name, 'utility'). 188/// Generate a new utility block. It's a shorthand for block($name, 'utility').
183/// 189///
184/// @param {string} $name - Utility block name 190/// @param {string} $name - Utility block name
185/// 191///
186/// @content 192/// @content
187/// 193///
188@mixin iro-bem-utility($name) { 194@mixin utility($name) {
189 @include iro-bem-block($name, 'utility') { 195 @include block($name, 'utility') {
190 @content; 196 @content;
191 } 197 }
192} 198}
@@ -196,21 +202,21 @@
196/// 202///
197/// @return {list} A list with two items: 1. selector, 2. context or `null` 203/// @return {list} A list with two items: 1. selector, 2. context or `null`
198/// 204///
199/// @see {mixin} iro-bem-utility 205/// @see {mixin} utility
200/// 206///
201@function iro-bem-utility($name) { 207@function utility($name) {
202 @return iro-bem-block($name, 'utility'); 208 @return block($name, 'utility');
203} 209}
204 210
205/// 211///
206/// Generate a new scope block. It's a shorthand for iro-bem-block($name, 'scope'). 212/// Generate a new scope block. It's a shorthand for block($name, 'scope').
207/// 213///
208/// @param {string} $name - Scope block name 214/// @param {string} $name - Scope block name
209/// 215///
210/// @content 216/// @content
211/// 217///
212@mixin iro-bem-scope($name) { 218@mixin scope($name) {
213 @include iro-bem-block($name, 'scope') { 219 @include block($name, 'scope') {
214 @content; 220 @content;
215 } 221 }
216} 222}
@@ -220,21 +226,21 @@
220/// 226///
221/// @return {list} A list with two items: 1. selector, 2. context or `null` 227/// @return {list} A list with two items: 1. selector, 2. context or `null`
222/// 228///
223/// @see {mixin} iro-bem-scope 229/// @see {mixin} scope
224/// 230///
225@function iro-bem-scope($name) { 231@function scope($name) {
226 @return iro-bem-block($name, 'scope'); 232 @return block($name, 'scope');
227} 233}
228 234
229/// 235///
230/// Generate a new theme block. It's a shorthand for iro-bem-block($name, 'theme'). 236/// Generate a new theme block. It's a shorthand for block($name, 'theme').
231/// 237///
232/// @param {string} $name - Theme block name 238/// @param {string} $name - Theme block name
233/// 239///
234/// @content 240/// @content
235/// 241///
236@mixin iro-bem-theme($name) { 242@mixin theme($name) {
237 @include iro-bem-block($name, 'theme') { 243 @include block($name, 'theme') {
238 @content; 244 @content;
239 } 245 }
240} 246}
@@ -244,21 +250,21 @@
244/// 250///
245/// @return {list} A list with two items: 1. selector, 2. context or `null` 251/// @return {list} A list with two items: 1. selector, 2. context or `null`
246/// 252///
247/// @see {mixin} iro-bem-theme 253/// @see {mixin} theme
248/// 254///
249@function iro-bem-theme($name) { 255@function theme($name) {
250 @return iro-bem-block($name, 'theme'); 256 @return block($name, 'theme');
251} 257}
252 258
253/// 259///
254/// Generate a new JS block. It's a shorthand for iro-bem-block($name, 'js'). 260/// Generate a new JS block. It's a shorthand for block($name, 'js').
255/// 261///
256/// @param {string} $name - JS block name 262/// @param {string} $name - JS block name
257/// 263///
258/// @content 264/// @content
259/// 265///
260@mixin iro-bem-js($name) { 266@mixin js($name) {
261 @include iro-bem-block($name, 'js') { 267 @include block($name, 'js') {
262 @content; 268 @content;
263 } 269 }
264} 270}
@@ -268,21 +274,21 @@
268/// 274///
269/// @return {list} A list with two items: 1. selector, 2. context or `null` 275/// @return {list} A list with two items: 1. selector, 2. context or `null`
270/// 276///
271/// @see {mixin} iro-bem-js 277/// @see {mixin} js
272/// 278///
273@function iro-bem-js($name) { 279@function js($name) {
274 @return iro-bem-block($name, 'js'); 280 @return block($name, 'js');
275} 281}
276 282
277/// 283///
278/// Generate a new QA block. It's a shorthand for iro-bem-block($name, 'qa'). 284/// Generate a new QA block. It's a shorthand for block($name, 'qa').
279/// 285///
280/// @param {string} $name - QA block name 286/// @param {string} $name - QA block name
281/// 287///
282/// @content 288/// @content
283/// 289///
284@mixin iro-bem-qa($name) { 290@mixin qa($name) {
285 @include iro-bem-block($name, 'qa') { 291 @include block($name, 'qa') {
286 @content; 292 @content;
287 } 293 }
288} 294}
@@ -292,21 +298,21 @@
292/// 298///
293/// @return {list} A list with two items: 1. selector, 2. context or `null` 299/// @return {list} A list with two items: 1. selector, 2. context or `null`
294/// 300///
295/// @see {mixin} iro-bem-qa 301/// @see {mixin} qa
296/// 302///
297@function iro-bem-qa($name) { 303@function qa($name) {
298 @return iro-bem-block($name, 'qa'); 304 @return block($name, 'qa');
299} 305}
300 306
301/// 307///
302/// Generate a new hack block. It's a shorthand for iro-bem-block($name, 'hack'). 308/// Generate a new hack block. It's a shorthand for block($name, 'hack').
303/// 309///
304/// @param {string} $name - Hack block name 310/// @param {string} $name - Hack block name
305/// 311///
306/// @content 312/// @content
307/// 313///
308@mixin iro-bem-hack($name) { 314@mixin hack($name) {
309 @include iro-bem-block($name, 'hack') { 315 @include block($name, 'hack') {
310 @content; 316 @content;
311 } 317 }
312} 318}
@@ -316,10 +322,10 @@
316/// 322///
317/// @return {list} A list with two items: 1. selector, 2. context or `null` 323/// @return {list} A list with two items: 1. selector, 2. context or `null`
318/// 324///
319/// @see {mixin} iro-bem-hack 325/// @see {mixin} hack
320/// 326///
321@function iro-bem-hack($name) { 327@function hack($name) {
322 @return iro-bem-block($name, 'hack'); 328 @return block($name, 'hack');
323} 329}
324 330
325/// 331///
@@ -337,15 +343,15 @@
337/// @throw If a block doesn't exist 343/// @throw If a block doesn't exist
338/// 344///
339/// @example scss - Successful assertion 345/// @example scss - Successful assertion
340/// @include iro-bem-component('someBlock') { 346/// @include component('someBlock') {
341/// /* some definitions */ 347/// /* some definitions */
342/// } 348/// }
343/// 349///
344/// @include iro-bem-component('anotherBlock') { 350/// @include component('anotherBlock') {
345/// /* some definitions */ 351/// /* some definitions */
346/// 352///
347/// @include iro-bem-element('elem') { 353/// @include elem('elem') {
348/// @include iro-bem-composed-of('someBlock' 'component'); 354/// @include composed-of('someBlock' 'component');
349/// 355///
350/// /* some definitions */ 356/// /* some definitions */
351/// } 357/// }
@@ -354,37 +360,37 @@
354/// // Intended use: <div class="c-anotherBlock__elem c-someBlock">...</div> 360/// // Intended use: <div class="c-anotherBlock__elem c-someBlock">...</div>
355/// 361///
356/// @example scss - Failing assertion 362/// @example scss - Failing assertion
357/// @include iro-bem-component('anotherBlock') { 363/// @include component('anotherBlock') {
358/// /* some definitions */ 364/// /* some definitions */
359/// 365///
360/// @include iro-bem-element('elem') { 366/// @include elem('elem') {
361/// @include iro-bem-composed-of('someBlock' 'component'); 367/// @include composed-of('someBlock' 'component');
362/// 368///
363/// /* some definitions */ 369/// /* some definitions */
364/// } 370/// }
365/// } 371/// }
366/// 372///
367/// @include iro-bem-component('someBlock') { 373/// @include component('someBlock') {
368/// /* some definitions */ 374/// /* some definitions */
369/// } 375/// }
370/// 376///
371/// // Compilation will fail because c-someBlock is defined after c-anotherBlock__elem 377/// // Compilation will fail because c-someBlock is defined after c-anotherBlock__elem
372/// 378///
373@mixin iro-bem-composed-of($block, $blocks...) { 379@mixin composed-of($block, $blocks...) {
374 @each $block in iro-list-prepend($blocks, $block) { 380 @each $block in functions.list-prepend($blocks, $block) {
375 @if type-of($block) == string { 381 @if type-of($block) == string {
376 @if not index($iro-bem-blocks, $block) { 382 @if not index(vars.$blocks, $block) {
377 @error 'Block "#{$block}" does not exist.'; 383 @error 'Block "#{$block}" does not exist.';
378 } 384 }
379 } @else { 385 } @else {
380 $name: nth($block, 1); 386 $name: nth($block, 1);
381 $type: nth($block, 2); 387 $type: nth($block, 2);
382 388
383 @if not map-get($iro-bem-namespaces, $type) { 389 @if not map-get(vars.$namespaces, $type) {
384 @error '"#{$type}" is not a valid type.'; 390 @error '"#{$type}" is not a valid type.';
385 } 391 }
386 392
387 @if not index($iro-bem-blocks, $name + '_' + $type) { 393 @if not index(vars.$blocks, $name + '_' + $type) {
388 @error 'Block "#{$name}" does not exist.'; 394 @error 'Block "#{$name}" does not exist.';
389 } 395 }
390 } 396 }
diff --git a/src/bem/_debug.scss b/src/bem/_debug.scss
index e69083c..8ea0f05 100644
--- a/src/bem/_debug.scss
+++ b/src/bem/_debug.scss
@@ -4,9 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@if $iro-bem-debug { 7@use './vars';
8 @each $type, $color in $iro-bem-debug-colors { 8
9 $namespace: map-get($iro-bem-namespaces, $type); 9@if vars.$debug {
10 @each $type, $color in vars.$debug-colors {
11 $namespace: map-get(vars.$namespaces, $type);
10 12
11 [class^='#{$namespace}-'], 13 [class^='#{$namespace}-'],
12 [class*=' #{$namespace}-'] { 14 [class*=' #{$namespace}-'] {
diff --git a/src/bem/_element.scss b/src/bem/_element.scss
index b3d2fee..84e85fb 100644
--- a/src/bem/_element.scss
+++ b/src/bem/_element.scss
@@ -4,6 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use '../functions';
10@use '../contexts';
11
7/// 12///
8/// Generate a new BEM element. 13/// Generate a new BEM element.
9/// 14///
@@ -20,10 +25,10 @@
20/// @throw If the element is not preceded by a block, element, modifier or suffix. 25/// @throw If the element is not preceded by a block, element, modifier or suffix.
21/// 26///
22/// @example scss - Element for a block 27/// @example scss - Element for a block
23/// @include iro-bem-component('block') { 28/// @include component('block') {
24/// /* some block definitions */ 29/// /* some block definitions */
25/// 30///
26/// @include iro-bem-element('elem') { 31/// @include elem('elem') {
27/// /* some element definitions */ 32/// /* some element definitions */
28/// } 33/// }
29/// } 34/// }
@@ -39,15 +44,15 @@
39/// } 44/// }
40/// 45///
41/// @example scss - Element that is affected by the user hovering the block 46/// @example scss - Element that is affected by the user hovering the block
42/// @include iro-bem-component('block') { 47/// @include component('block') {
43/// /* some block definitions */ 48/// /* some block definitions */
44/// 49///
45/// @include iro-bem-element('elem') { 50/// @include elem('elem') {
46/// background-color: #eee; 51/// background-color: #eee;
47/// } 52/// }
48/// 53///
49/// &:hover { 54/// &:hover {
50/// @include iro-bem-element('elem') { 55/// @include elem('elem') {
51/// background-color: #000; 56/// background-color: #000;
52/// } 57/// }
53/// } 58/// }
@@ -68,10 +73,10 @@
68/// } 73/// }
69/// 74///
70/// @example scss - Multiple elements 75/// @example scss - Multiple elements
71/// @include iro-bem-component('block') { 76/// @include component('block') {
72/// /* some block definitions */ 77/// /* some block definitions */
73/// 78///
74/// @include iro-bem-element('elem1', 'elem2') { 79/// @include elem('elem1', 'elem2') {
75/// /* some element definitions */ 80/// /* some element definitions */
76/// } 81/// }
77/// } 82/// }
@@ -86,23 +91,23 @@
86/// /* some element definitions */ 91/// /* some element definitions */
87/// } 92/// }
88/// 93///
89@mixin iro-bem-element($name, $names...) { 94@mixin elem($name, $names...) {
90 $result: iro-bem-element($name, $names...); 95 $result: elem($name, $names...);
91 $selector: nth($result, 1); 96 $selector: nth($result, 1);
92 $context: nth($result, 2); 97 $context: nth($result, 2);
93 98
94 @include iro-bem-validate( 99 @include validators.validate(
95 'element', 100 'element',
96 (name: $name, names: $names), 101 (name: $name, names: $names),
97 $selector, 102 $selector,
98 $context 103 $context
99 ); 104 );
100 105
101 @include iro-context-push($iro-bem-context-id, $context...); 106 @include contexts.push(vars.$context-id, $context...);
102 @at-root #{$selector} { 107 @at-root #{$selector} {
103 @content; 108 @content;
104 } 109 }
105 @include iro-context-pop($iro-bem-context-id); 110 @include contexts.pop(vars.$context-id);
106} 111}
107 112
108/// 113///
@@ -110,26 +115,26 @@
110/// 115///
111/// @return {list} A list with two items: 1. selector, 2. context or `null` 116/// @return {list} A list with two items: 1. selector, 2. context or `null`
112/// 117///
113/// @see {mixin} iro-bem-element 118/// @see {mixin} element
114/// 119///
115@function iro-bem-element($name, $names...) { 120@function elem($name, $names...) {
116 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 121 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
117 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); 122 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
118 123
119 $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element'); 124 $parent-context: contexts.get(vars.$context-id, 'block' 'element');
120 125
121 $selector: (); 126 $selector: ();
122 $parts-data: (); 127 $parts-data: ();
123 128
124 @if nth($parent-context, 1) == 'element' { 129 @if nth($parent-context, 1) == 'element' {
125 @if $iro-bem-element-nesting-policy == 'disallow' { 130 @if vars.$element-nesting-policy == 'disallow' {
126 @error 'Element nesting is forbidden.'; 131 @error 'Element nesting is forbidden.';
127 } 132 }
128 133
129 @if $iro-bem-element-nesting-policy == 'append' { 134 @if vars.$element-nesting-policy == 'append' {
130 $element-selector: map-get(nth($parent-context, 2), 'selector'); 135 $element-selector: map-get(nth($parent-context, 2), 'selector');
131 136
132 @if not iro-selector-suffix-match(&, $element-selector) { 137 @if not functions.selector-suffix-match(&, $element-selector) {
133 @error 'A nested element must be an immediate children of the parent element.'; 138 @error 'A nested element must be an immediate children of the parent element.';
134 } 139 }
135 140
@@ -140,7 +145,7 @@
140 // 145 //
141 146
142 @each $name in join($name, $names) { 147 @each $name in join($name, $names) {
143 $sel: selector-append(&, $iro-bem-element-separator + $name); 148 $sel: selector-append(&, vars.$element-separator + $name);
144 $selector: join($selector, $sel, comma); 149 $selector: join($selector, $sel, comma);
145 $parts-data: append($parts-data, ( 150 $parts-data: append($parts-data, (
146 'name': $name, 151 'name': $name,
@@ -149,13 +154,13 @@
149 } 154 }
150 } 155 }
151 156
152 $parent-context: iro-context-get($iro-bem-context-id, 'block'); 157 $parent-context: contexts.get(vars.$context-id, 'block');
153 } 158 }
154 159
155 @if length($selector) == 0 { 160 @if length($selector) == 0 {
156 $parent-selector: map-get(nth($parent-context, 2), 'selector'); 161 $parent-selector: map-get(nth($parent-context, 2), 'selector');
157 162
158 @if iro-selector-suffix-match(&, $parent-selector) { 163 @if functions.selector-suffix-match(&, $parent-selector) {
159 // 164 //
160 // Possible outcomes: 165 // Possible outcomes:
161 // - {b}__element 166 // - {b}__element
@@ -163,7 +168,7 @@
163 // 168 //
164 169
165 @each $name in join($name, $names) { 170 @each $name in join($name, $names) {
166 $sel: selector-append(&, $iro-bem-element-separator + $name); 171 $sel: selector-append(&, vars.$element-separator + $name);
167 $selector: join($selector, $sel, comma); 172 $selector: join($selector, $sel, comma);
168 $parts-data: append($parts-data, ( 173 $parts-data: append($parts-data, (
169 'name': $name, 174 'name': $name,
@@ -178,13 +183,13 @@
178 // 183 //
179 184
180 @if nth($parent-context, 1) != 'block' { 185 @if nth($parent-context, 1) != 'block' {
181 $parent-context: iro-context-get($iro-bem-context-id, 'block'); 186 $parent-context: contexts.get(vars.$context-id, 'block');
182 } 187 }
183 188
184 $block-base-selector: map-get(nth($parent-context, 2), 'base-selector'); 189 $block-base-selector: map-get(nth($parent-context, 2), 'base-selector');
185 190
186 @each $name in join($name, $names) { 191 @each $name in join($name, $names) {
187 $sel: selector-nest(&, selector-append($block-base-selector, $iro-bem-element-separator + $name)); 192 $sel: selector-nest(&, selector-append($block-base-selector, vars.$element-separator + $name));
188 $selector: join($selector, $sel, comma); 193 $selector: join($selector, $sel, comma);
189 $parts-data: append($parts-data, ( 194 $parts-data: append($parts-data, (
190 'name': $name, 195 'name': $name,
@@ -217,11 +222,11 @@
217/// @throw If the element is not preceded by an element. 222/// @throw If the element is not preceded by an element.
218/// 223///
219/// @example scss - A sibling element to a single element 224/// @example scss - A sibling element to a single element
220/// @include iro-bem-component('block') { 225/// @include component('block') {
221/// @include iro-bem-element('elem') { 226/// @include elem('elem') {
222/// /* some element definitions */ 227/// /* some element definitions */
223/// 228///
224/// @include iro-bem-related-element('~', 'sibling') { 229/// @include related-elem('~', 'sibling') {
225/// /* some sibling element definitions */ 230/// /* some sibling element definitions */
226/// } 231/// }
227/// } 232/// }
@@ -238,11 +243,11 @@
238/// } 243/// }
239/// 244///
240/// @example scss - A successor element to a single element 245/// @example scss - A successor element to a single element
241/// @include iro-bem-component('block') { 246/// @include component('block') {
242/// @include iro-bem-element('elem') { 247/// @include elem('elem') {
243/// /* some element definitions */ 248/// /* some element definitions */
244/// 249///
245/// @include iro-bem-related-element('+', 'successor') { 250/// @include related-elem('+', 'successor') {
246/// /* some successor element definitions */ 251/// /* some successor element definitions */
247/// } 252/// }
248/// } 253/// }
@@ -259,11 +264,11 @@
259/// } 264/// }
260/// 265///
261/// @example scss - A successor element to multiple elements 266/// @example scss - A successor element to multiple elements
262/// @include iro-bem-component('block') { 267/// @include component('block') {
263/// @include iro-bem-element('elem1', 'elem2') { 268/// @include elem('elem1', 'elem2') {
264/// /* some element definitions */ 269/// /* some element definitions */
265/// 270///
266/// @include iro-bem-related-element('+', 'successor') { 271/// @include related-elem('+', 'successor') {
267/// /* some successor element definitions */ 272/// /* some successor element definitions */
268/// } 273/// }
269/// } 274/// }
@@ -279,23 +284,23 @@
279/// /* some successor element definitions */ 284/// /* some successor element definitions */
280/// } 285/// }
281/// 286///
282@mixin iro-bem-related-element($sign, $name, $names...) { 287@mixin related-elem($sign, $name, $names...) {
283 $result: iro-bem-related-element($sign, $name, $names...); 288 $result: related-elem($sign, $name, $names...);
284 $selector: nth($result, 1); 289 $selector: nth($result, 1);
285 $context: nth($result, 2); 290 $context: nth($result, 2);
286 291
287 @include iro-bem-validate( 292 @include validators.validate(
288 'related-element', 293 'related-element',
289 (sign: $sign, name: $name, names: $names), 294 (sign: $sign, name: $name, names: $names),
290 $selector, 295 $selector,
291 $context 296 $context
292 ); 297 );
293 298
294 @include iro-context-push($iro-bem-context-id, $context...); 299 @include contexts.push(vars.$context-id, $context...);
295 @at-root #{$selector} { 300 @at-root #{$selector} {
296 @content; 301 @content;
297 } 302 }
298 @include iro-context-pop($iro-bem-context-id); 303 @include contexts.pop(vars.$context-id);
299} 304}
300 305
301/// 306///
@@ -304,9 +309,9 @@
304/// 309///
305/// @return {list} A list with two items: 1. selector, 2. context or `null` 310/// @return {list} A list with two items: 1. selector, 2. context or `null`
306/// 311///
307/// @see {mixin} iro-bem-related-element 312/// @see {mixin} related-element
308/// 313///
309@function iro-bem-related-element($sign, $name, $names...) { 314@function related-elem($sign, $name, $names...) {
310 // 315 //
311 // Generating this selector is simple: Take the latest block context, use it 316 // Generating this selector is simple: Take the latest block context, use it
312 // to generate the element part, and insert it at the end of the current selector. 317 // to generate the element part, and insert it at the end of the current selector.
@@ -315,21 +320,21 @@
315 // - {e} ({m,s}) ([manual selector]) ~ {e} 320 // - {e} ({m,s}) ([manual selector]) ~ {e}
316 // 321 //
317 322
318 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 323 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
319 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); 324 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element');
320 325
321 @if $sign != '+' and $sign != '~' { 326 @if $sign != '+' and $sign != '~' {
322 @error 'Invalid relationship sign #{inspect($sign)}.'; 327 @error 'Invalid relationship sign #{inspect($sign)}.';
323 } 328 }
324 329
325 $block-context: iro-context-get($iro-bem-context-id, 'block'); 330 $block-context: contexts.get(vars.$context-id, 'block');
326 $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); 331 $block-base-selector: map-get(nth($block-context, 2), 'base-selector');
327 332
328 $selector: (); 333 $selector: ();
329 $parts-data: (); 334 $parts-data: ();
330 335
331 @each $name in join($name, $names) { 336 @each $name in join($name, $names) {
332 $sel: selector-nest(&, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $name)); 337 $sel: selector-nest(&, $sign, selector-append($block-base-selector, vars.$element-separator + $name));
333 $selector: join($selector, $sel, comma); 338 $selector: join($selector, $sel, comma);
334 $parts-data: append($parts-data, ( 339 $parts-data: append($parts-data, (
335 'name': $name, 340 'name': $name,
@@ -348,15 +353,15 @@
348/// 353///
349/// Generate a BEM element that is a sibling of the current element. 354/// Generate a BEM element that is a sibling of the current element.
350/// 355///
351/// It's a shorthand for iro-bem-related-element('~', $name). 356/// It's a shorthand for related-elem('~', $name).
352/// 357///
353/// @param {string} $name - First element name 358/// @param {string} $name - First element name
354/// @param {list} $names - List of more element names 359/// @param {list} $names - List of more element names
355/// 360///
356/// @content 361/// @content
357/// 362///
358@mixin iro-bem-sibling-element($name, $names...) { 363@mixin sibling-elem($name, $names...) {
359 @include iro-bem-related-element('~', $name, $names...) { 364 @include related-elem('~', $name, $names...) {
360 @content; 365 @content;
361 } 366 }
362} 367}
@@ -367,24 +372,24 @@
367/// 372///
368/// @return {list} A list with two items: 1. selector, 2. context or `null` 373/// @return {list} A list with two items: 1. selector, 2. context or `null`
369/// 374///
370/// @see {mixin} iro-bem-sibling-element 375/// @see {mixin} sibling-element
371/// 376///
372@function iro-bem-sibling-element($name, $names...) { 377@function sibling-elem($name, $names...) {
373 @return iro-bem-related-element('~', $name, $names...); 378 @return related-elem('~', $name, $names...);
374} 379}
375 380
376/// 381///
377/// Generate a BEM element that is the successor of the current element. 382/// Generate a BEM element that is the successor of the current element.
378/// 383///
379/// It's a shorthand for iro-bem-related-element('+', $name). 384/// It's a shorthand for related-elem('+', $name).
380/// 385///
381/// @param {string} $name - First element name 386/// @param {string} $name - First element name
382/// @param {string} $names - More element names 387/// @param {string} $names - More element names
383/// 388///
384/// @content 389/// @content
385/// 390///
386@mixin iro-bem-next-element($name, $names...) { 391@mixin next-elem($name, $names...) {
387 @include iro-bem-related-element('+', $name, $names...) { 392 @include related-elem('+', $name, $names...) {
388 @content; 393 @content;
389 } 394 }
390} 395}
@@ -395,28 +400,28 @@
395/// 400///
396/// @return {list} A list with two items: 1. selector, 2. context or `null` 401/// @return {list} A list with two items: 1. selector, 2. context or `null`
397/// 402///
398/// @see {mixin} iro-bem-next-element 403/// @see {mixin} next-element
399/// 404///
400@function iro-bem-next-element($name, $names...) { 405@function next-elem($name, $names...) {
401 @return iro-bem-related-element('+', $name, $names...); 406 @return related-elem('+', $name, $names...);
402} 407}
403 408
404/// 409///
405/// Generate the current BEM element as a successor of itself. 410/// Generate the current BEM element as a successor of itself.
406/// 411///
407/// If this is applied to a single element, it behaves exactly the same as 412/// If this is applied to a single element, it behaves exactly the same as
408/// iro-bem-related-element('+', name); 413/// related-elem('+', name);
409/// However, if it is applied to multiple elements, each twin element only will influence 414/// However, if it is applied to multiple elements, each twin element only will influence
410/// their other twin, which is not replicable with iro-bem-related-element. 415/// their other twin, which is not replicable with related-element.
411/// 416///
412/// @content 417/// @content
413/// 418///
414/// @example scss - Two twin elements 419/// @example scss - Two twin elements
415/// @include iro-bem-component('block') { 420/// @include component('block') {
416/// @include iro-bem-element('elem') { 421/// @include elem('elem') {
417/// /* some element definitions */ 422/// /* some element definitions */
418/// 423///
419/// @include iro-bem-next-twin-element { 424/// @include next-twin-element {
420/// /* some twin element definitions */ 425/// /* some twin element definitions */
421/// } 426/// }
422/// } 427/// }
@@ -433,11 +438,11 @@
433/// } 438/// }
434/// 439///
435/// @example scss - Multiple twin elements 440/// @example scss - Multiple twin elements
436/// @include iro-bem-component('block') { 441/// @include component('block') {
437/// @include iro-bem-element('elem1', 'elem2') { 442/// @include elem('elem1', 'elem2') {
438/// /* some element definitions */ 443/// /* some element definitions */
439/// 444///
440/// @include iro-bem-next-twin-element { 445/// @include next-twin-element {
441/// /* some twin element definitions */ 446/// /* some twin element definitions */
442/// } 447/// }
443/// } 448/// }
@@ -453,23 +458,23 @@
453/// /* some twin element definitions */ 458/// /* some twin element definitions */
454/// } 459/// }
455/// 460///
456@mixin iro-bem-related-twin-element($sign) { 461@mixin related-twin-elem($sign) {
457 $result: iro-bem-related-twin-element($sign); 462 $result: related-twin-elem($sign);
458 $selector: nth($result, 1); 463 $selector: nth($result, 1);
459 $context: nth($result, 2); 464 $context: nth($result, 2);
460 465
461 @include iro-bem-validate( 466 @include validators.validate(
462 'next-twin-element', 467 'next-twin-element',
463 (), 468 (),
464 $selector, 469 $selector,
465 $context 470 $context
466 ); 471 );
467 472
468 @include iro-context-push($iro-bem-context-id, $context...); 473 @include contexts.push(vars.$context-id, $context...);
469 @at-root #{$selector} { 474 @at-root #{$selector} {
470 @content; 475 @content;
471 } 476 }
472 @include iro-context-pop($iro-bem-context-id); 477 @include contexts.pop(vars.$context-id);
473} 478}
474 479
475/// 480///
@@ -478,16 +483,16 @@
478/// 483///
479/// @return {list} A list with two items: 1. selector, 2. context or `null` 484/// @return {list} A list with two items: 1. selector, 2. context or `null`
480/// 485///
481/// @see {mixin} iro-bem-next-twin-element 486/// @see {mixin} next-twin-element
482/// 487///
483@function iro-bem-related-twin-element($sign) { 488@function related-twin-elem($sign) {
484 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 489 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
485 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); 490 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element');
486 491
487 $element-context: iro-context-get($iro-bem-context-id, 'element'); 492 $element-context: contexts.get(vars.$context-id, 'element');
488 $element-selector: map-get(nth($element-context, 2), 'selector'); 493 $element-selector: map-get(nth($element-context, 2), 'selector');
489 494
490 $block-context: iro-context-get($iro-bem-context-id, 'block'); 495 $block-context: contexts.get(vars.$context-id, 'block');
491 $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); 496 $block-base-selector: map-get(nth($block-context, 2), 'base-selector');
492 497
493 $selector: (); 498 $selector: ();
@@ -505,7 +510,7 @@
505 $part-name: map-get($part-data, 'name'); 510 $part-name: map-get($part-data, 'name');
506 511
507 $sel: (); 512 $sel: ();
508 @if iro-selector-suffix-match(&, $element-selector) { 513 @if functions.selector-suffix-match(&, $element-selector) {
509 // 514 //
510 // This mixin is included in the selector the last element mixin created. 515 // This mixin is included in the selector the last element mixin created.
511 // Possible outcomes: 516 // Possible outcomes:
@@ -516,7 +521,7 @@
516 @each $s in & { 521 @each $s in & {
517 @each $ps in $part-selector { 522 @each $ps in $part-selector {
518 @if nth($s, -1) == nth($ps, -1) { 523 @if nth($s, -1) == nth($ps, -1) {
519 $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); 524 $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, vars.$element-separator + $part-name));
520 $sel: join($sel, $sel-ent, comma); 525 $sel: join($sel, $sel-ent, comma);
521 } 526 }
522 } 527 }
@@ -537,7 +542,7 @@
537 $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null; 542 $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null;
538 543
539 @if not $match { 544 @if not $match {
540 @each $separator in $iro-bem-element-separator $iro-bem-modifier-separator $iro-bem-suffix-separator { 545 @each $separator in vars.$element-separator vars.$modifier-separator vars.$suffix-separator {
541 @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator { 546 @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator {
542 $match: true; 547 $match: true;
543 } 548 }
@@ -545,7 +550,7 @@
545 } 550 }
546 551
547 @if $match { 552 @if $match {
548 $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); 553 $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, vars.$element-separator + $part-name));
549 $sel: join($sel, $sel-ent, comma); 554 $sel: join($sel, $sel-ent, comma);
550 } 555 }
551 } 556 }
@@ -574,12 +579,12 @@
574/// 579///
575/// Generate the current BEM element as a sibling of itself. 580/// Generate the current BEM element as a sibling of itself.
576/// 581///
577/// It's a shorthand for iro-bem-related-twin-element('~'). 582/// It's a shorthand for related-twin-elem('~').
578/// 583///
579/// @content 584/// @content
580/// 585///
581@mixin iro-bem-sibling-twin-element { 586@mixin sibling-twin-element {
582 @include iro-bem-related-twin-element('~') { 587 @include related-twin-elem('~') {
583 @content; 588 @content;
584 } 589 }
585} 590}
@@ -590,21 +595,21 @@
590/// 595///
591/// @return {list} A list with two items: 1. selector, 2. context or `null` 596/// @return {list} A list with two items: 1. selector, 2. context or `null`
592/// 597///
593/// @see {mixin} iro-bem-sibling-twin-element 598/// @see {mixin} sibling-twin-element
594/// 599///
595@function iro-bem-sibling-twin-element() { 600@function sibling-twin-elem() {
596 @return iro-bem-related-twin-element('~'); 601 @return related-twin-elem('~');
597} 602}
598 603
599/// 604///
600/// Generate the current BEM element as a next sibling of itself. 605/// Generate the current BEM element as a next sibling of itself.
601/// 606///
602/// It's a shorthand for iro-bem-related-twin-element('+', $name). 607/// It's a shorthand for related-twin-elem('+', $name).
603/// 608///
604/// @content 609/// @content
605/// 610///
606@mixin iro-bem-next-twin-element { 611@mixin next-twin-element {
607 @include iro-bem-related-twin-element('+') { 612 @include related-twin-elem('+') {
608 @content; 613 @content;
609 } 614 }
610} 615}
@@ -615,8 +620,8 @@
615/// 620///
616/// @return {list} A list with two items: 1. selector, 2. context or `null` 621/// @return {list} A list with two items: 1. selector, 2. context or `null`
617/// 622///
618/// @see {mixin} iro-bem-next-twin-element 623/// @see {mixin} next-twin-element
619/// 624///
620@function iro-bem-next-twin-element() { 625@function next-twin-elem() {
621 @return iro-bem-related-twin-element('+'); 626 @return related-twin-elem('+');
622} 627}
diff --git a/src/bem/_functions.scss b/src/bem/_functions.scss
index 4bb95c4..b7bd5ec 100644
--- a/src/bem/_functions.scss
+++ b/src/bem/_functions.scss
@@ -4,11 +4,13 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './vars';
8
7/// 9///
8/// @access private 10/// @access private
9/// 11///
10@function iro-bem-theme-selector($name, $names...) { 12@function theme-selector($name, $names...) {
11 $namespace: map-get($iro-bem-namespaces, 'theme'); 13 $namespace: map-get(vars.$namespaces, 'theme');
12 $selector: null; 14 $selector: null;
13 15
14 @each $name in join($name, $names) { 16 @each $name in join($name, $names) {
diff --git a/src/bem/_modifier.scss b/src/bem/_modifier.scss
index ac4cb2e..be65e47 100644
--- a/src/bem/_modifier.scss
+++ b/src/bem/_modifier.scss
@@ -4,6 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use '../functions';
10@use '../contexts';
11
7/// 12///
8/// Generate a new BEM modifier. 13/// Generate a new BEM modifier.
9/// 14///
@@ -25,13 +30,13 @@
25/// @throw If the element is not preceded by a block, element, modifier or suffix. 30/// @throw If the element is not preceded by a block, element, modifier or suffix.
26/// 31///
27/// @example scss - Modifier that modifies a block or element 32/// @example scss - Modifier that modifies a block or element
28/// @include iro-bem-component('block') { 33/// @include component('block') {
29/// @include iro-bem-modifier('mod') { 34/// @include modifier('mod') {
30/// background-color: #eee; 35/// background-color: #eee;
31/// } 36/// }
32/// 37///
33/// @include iro-bem-element('elem') { 38/// @include elem('elem') {
34/// @include iro-bem-modifier('mod') { 39/// @include modifier('mod') {
35/// background-color: #222; 40/// background-color: #222;
36/// } 41/// }
37/// } 42/// }
@@ -48,15 +53,15 @@
48/// } 53/// }
49/// 54///
50/// @example scss - Modifier nested in another modifier, not extending 55/// @example scss - Modifier nested in another modifier, not extending
51/// @include iro-bem-component('block') { 56/// @include component('block') {
52/// @include iro-bem-modifier('mod') { 57/// @include modifier('mod') {
53/// background-color: #eee; 58/// background-color: #eee;
54/// } 59/// }
55/// 60///
56/// @include iro-bem-modifier('dark') { 61/// @include modifier('dark') {
57/// /* some definitions */ 62/// /* some definitions */
58/// 63///
59/// @include iro-bem-modifier('mod') { 64/// @include modifier('mod') {
60/// background-color: #222; 65/// background-color: #222;
61/// } 66/// }
62/// } 67/// }
@@ -77,15 +82,15 @@
77/// } 82/// }
78/// 83///
79/// @example scss - Modifier nested in another modifier, extending 84/// @example scss - Modifier nested in another modifier, extending
80/// @include iro-bem-component('block') { 85/// @include component('block') {
81/// @include iro-bem-modifier('mod') { 86/// @include modifier('mod') {
82/// background-color: #eee; 87/// background-color: #eee;
83/// } 88/// }
84/// 89///
85/// @include iro-bem-modifier('dark') { 90/// @include modifier('dark') {
86/// /* some definitions */ 91/// /* some definitions */
87/// 92///
88/// @include iro-bem-modifier('mod' true) { 93/// @include modifier('mod' true) {
89/// background-color: #222; 94/// background-color: #222;
90/// } 95/// }
91/// } 96/// }
@@ -105,23 +110,23 @@
105/// background-color: #222; 110/// background-color: #222;
106/// } 111/// }
107/// 112///
108@mixin iro-bem-modifier($name, $names...) { 113@mixin modifier($name, $names...) {
109 $result: iro-bem-modifier($name, $names...); 114 $result: modifier($name, $names...);
110 $selector: nth($result, 1); 115 $selector: nth($result, 1);
111 $context: nth($result, 2); 116 $context: nth($result, 2);
112 117
113 @include iro-bem-validate( 118 @include validators.validate(
114 'modifier', 119 'modifier',
115 (name: $name, names: $names), 120 (name: $name, names: $names),
116 $selector, 121 $selector,
117 $context 122 $context
118 ); 123 );
119 124
120 @include iro-context-push($iro-bem-context-id, $context...); 125 @include contexts.push(vars.$context-id, $context...);
121 @at-root #{$selector} { 126 @at-root #{$selector} {
122 @content; 127 @content;
123 } 128 }
124 @include iro-context-pop($iro-bem-context-id); 129 @include contexts.pop(vars.$context-id);
125} 130}
126 131
127/// 132///
@@ -129,18 +134,18 @@
129/// 134///
130/// @return {list} A list with two items: 1. selector, 2. context or `null` 135/// @return {list} A list with two items: 1. selector, 2. context or `null`
131/// 136///
132/// @see {mixin} iro-bem-modifier 137/// @see {mixin} modifier
133/// 138///
134@function iro-bem-modifier($name, $names...) { 139@function modifier($name, $names...) {
135 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 140 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
136 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); 141 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
137 142
138 $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier' 'suffix' 'state'); 143 $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier' 'suffix' 'state');
139 $parent-selector: map-get(nth($parent-context, 2), 'selector'); 144 $parent-selector: map-get(nth($parent-context, 2), 'selector');
140 $selector: (); 145 $selector: ();
141 $parts-data: (); 146 $parts-data: ();
142 147
143 @if not iro-selector-suffix-match(&, $parent-selector) { 148 @if not functions.selector-suffix-match(&, $parent-selector) {
144 // 149 //
145 // The current selector doesn't match the parent selector. 150 // The current selector doesn't match the parent selector.
146 // The user manually added a selector between parent context and this modifier call. 151 // The user manually added a selector between parent context and this modifier call.
@@ -155,7 +160,7 @@
155 @error 'A modifier must be an immediate child of the parent context'; 160 @error 'A modifier must be an immediate child of the parent context';
156 } 161 }
157 162
158 @each $name in iro-list-prepend($names, $name) { 163 @each $name in functions.list-prepend($names, $name) {
159 $extend: false; 164 $extend: false;
160 @if type-of($name) == list { 165 @if type-of($name) == list {
161 $extend: nth($name, 2); 166 $extend: nth($name, 2);
@@ -170,7 +175,7 @@
170 // - {b,e,m,s}--modifier 175 // - {b,e,m,s}--modifier
171 // 176 //
172 177
173 $sel: selector-append(&, $iro-bem-modifier-separator + $name); 178 $sel: selector-append(&, vars.$modifier-separator + $name);
174 $selector: join($selector, $sel, comma); 179 $selector: join($selector, $sel, comma);
175 $parts-data: append($parts-data, ( 180 $parts-data: append($parts-data, (
176 'name': $name, 181 'name': $name,
@@ -181,7 +186,7 @@
181 // Parent context is modifier, suffix or state and $extend is false. 186 // Parent context is modifier, suffix or state and $extend is false.
182 // 187 //
183 188
184 $be-context: iro-context-get($iro-bem-context-id, 'block' 'element'); 189 $be-context: contexts.get(vars.$context-id, 'block' 'element');
185 190
186 @if nth($be-context, 1) == 'element' { 191 @if nth($be-context, 1) == 'element' {
187 // 192 //
@@ -201,8 +206,8 @@
201 $sel: (); 206 $sel: ();
202 @each $s in & { 207 @each $s in & {
203 @each $ps in $elem-part-selector { 208 @each $ps in $elem-part-selector {
204 @if str-index(inspect($s), inspect($ps) + $iro-bem-modifier-separator) or str-index(inspect($s), inspect($ps) + $iro-bem-suffix-separator) { 209 @if str-index(inspect($s), inspect($ps) + vars.$modifier-separator) or str-index(inspect($s), inspect($ps) + vars.$suffix-separator) {
205 $sel: join($sel, selector-unify($s, selector-append($ps, $iro-bem-modifier-separator + $name)), comma); 210 $sel: join($sel, selector-unify($s, selector-append($ps, vars.$modifier-separator + $name)), comma);
206 } 211 }
207 } 212 }
208 } 213 }
@@ -227,7 +232,7 @@
227 232
228 $block-base-selector: map-get(nth($be-context, 2), 'base-selector'); 233 $block-base-selector: map-get(nth($be-context, 2), 'base-selector');
229 234
230 $sel: selector-append(&, $block-base-selector, $iro-bem-modifier-separator + $name); 235 $sel: selector-append(&, $block-base-selector, vars.$modifier-separator + $name);
231 $selector: join($selector, $sel, comma); 236 $selector: join($selector, $sel, comma);
232 $parts-data: append($parts-data, ( 237 $parts-data: append($parts-data, (
233 'name': $name, 238 'name': $name,
diff --git a/src/bem/_multi.scss b/src/bem/_multi.scss
index 9e47ce4..1de5cdc 100644
--- a/src/bem/_multi.scss
+++ b/src/bem/_multi.scss
@@ -4,6 +4,16 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use '../functions';
8@use '../contexts';
9@use './block';
10@use './element';
11@use './modifier';
12@use './state';
13@use './suffix';
14@use './theme';
15@use './vars';
16
7/// 17///
8/// Generate multiple entities (BEM or not) at once. 18/// Generate multiple entities (BEM or not) at once.
9/// 19///
@@ -15,10 +25,10 @@
15/// @content 25/// @content
16/// 26///
17/// @example scss - Creating multiple elements, a modifier and an anchor 27/// @example scss - Creating multiple elements, a modifier and an anchor
18/// @include iro-bem-object('buttonstrip') { 28/// @include object('buttonstrip') {
19/// display: none; 29/// display: none;
20/// 30///
21/// @include iro-bem-multi('modifier' 'mod', 'element' 'button' 'separator', '> a') { 31/// @include multi('modifier' 'mod', 'elem' 'button' 'separator', '> a') {
22/// display: block; 32/// display: block;
23/// } 33/// }
24/// } 34/// }
@@ -43,10 +53,10 @@
43/// } 53/// }
44/// 54///
45/// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included 55/// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included
46/// @include iro-bem-object('buttonstrip') { 56/// @include object('buttonstrip') {
47/// display: none; 57/// display: none;
48/// 58///
49/// @include iro-bem-multi('modifier:' 'mod', 'element:' 'button' 'separator', '> a') { 59/// @include multi('modifier:' 'mod', 'elem:' 'button' 'separator', '> a') {
50/// display: block; 60/// display: block;
51/// } 61/// }
52/// } 62/// }
@@ -70,14 +80,16 @@
70/// display: block; 80/// display: block;
71/// } 81/// }
72/// 82///
73@mixin iro-bem-multi($first, $others...) { 83@mixin multi($first, $others...) {
74 @include iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 84 @include contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
75 85
76 @each $entity in iro-list-prepend($others, $first) { 86 @each $entity in functions.list-prepend($others, $first) {
77 $is-manual-selector: false; 87 $is-manual-selector: false;
78 88
79 @if type-of($entity) == string and not function-exists('iro-bem-' + $entity) { 89 @if type-of($entity) == string {
80 $is-manual-selector: true; 90 @if find-bem-function($entity) == null {
91 $is-manual-selector: true;
92 }
81 } 93 }
82 94
83 @if $is-manual-selector { 95 @if $is-manual-selector {
@@ -91,23 +103,17 @@
91 103
92 @if type-of($entity) == list { 104 @if type-of($entity) == list {
93 $entity-func-id: nth($entity, 1); 105 $entity-func-id: nth($entity, 1);
94 $entity: iro-list-slice($entity, 2); 106 $entity: functions.list-slice($entity, 2);
95 } @else { 107 } @else {
96 $entity-func-id: $entity; 108 $entity-func-id: $entity;
97 $entity: (); 109 $entity: ();
98 } 110 }
99 111
100 @if str-slice($entity-func-id, str-length($entity-func-id)) == ':' { 112 @if str-slice($entity-func-id, str-length($entity-func-id)) == ':' {
101 $entity-func-id: str-slice($entity-func-id, 1, str-length($entity-func-id) - 1); 113 $entity-func-id: unquote(str-slice($entity-func-id, 1, str-length($entity-func-id) - 1));
102 } 114 }
103 115
104 $sel-func: null; 116 $sel-func: find-bem-function($entity-func-id);
105
106 @if function-exists('iro-bem-' + $entity-func-id) {
107 $sel-func: get-function('iro-bem-' + $entity-func-id);
108 } @else if function-exists($entity-func-id) {
109 $sel-func: get-function($entity-func-id);
110 }
111 117
112 @if $sel-func == null { 118 @if $sel-func == null {
113 @error 'Function "#{inspect($entity-func-id)}" was not found.'; 119 @error 'Function "#{inspect($entity-func-id)}" was not found.';
@@ -118,14 +124,24 @@
118 $entity-result-context: nth($entity-result, 2); 124 $entity-result-context: nth($entity-result, 2);
119 125
120 @if $entity-result-context != null { 126 @if $entity-result-context != null {
121 @include iro-context-push($iro-bem-context-id, $entity-result-context...); 127 @include contexts.push(vars.$context-id, $entity-result-context...);
122 } 128 }
123 @at-root #{$entity-result-selector} { 129 @at-root #{$entity-result-selector} {
124 @content; 130 @content;
125 } 131 }
126 @if $entity-result-context != null { 132 @if $entity-result-context != null {
127 @include iro-context-pop($iro-bem-context-id); 133 @include contexts.pop(vars.$context-id);
128 } 134 }
129 } 135 }
130 } 136 }
131} 137}
138
139@function find-bem-function($name) {
140 @each $module in (block element modifier state suffix theme) {
141 @if function-exists($name, $module) {
142 @return get-function($name, $module: $module);
143 }
144 }
145
146 @return null;
147}
diff --git a/src/bem/_state.scss b/src/bem/_state.scss
index 4a85bbb..2d430bf 100644
--- a/src/bem/_state.scss
+++ b/src/bem/_state.scss
@@ -4,6 +4,10 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use '../contexts';
10
7/// 11///
8/// Create a new state rule. 12/// Create a new state rule.
9/// 13///
@@ -13,10 +17,10 @@
13/// @content 17/// @content
14/// 18///
15/// @example scss - Using single is-state 19/// @example scss - Using single is-state
16/// @include iro-bem-object('menu') { 20/// @include object('menu') {
17/// display: none; 21/// display: none;
18/// 22///
19/// @include iro-bem-state('is', open') { 23/// @include state('is', open') {
20/// display: block; 24/// display: block;
21/// } 25/// }
22/// } 26/// }
@@ -32,10 +36,10 @@
32/// } 36/// }
33/// 37///
34/// @example scss - Using multiple is-states 38/// @example scss - Using multiple is-states
35/// @include iro-bem-object('menu') { 39/// @include object('menu') {
36/// display: none; 40/// display: none;
37/// 41///
38/// @include iro-bem-state('is', open', 'visible') { 42/// @include state('is', open', 'visible') {
39/// display: block; 43/// display: block;
40/// } 44/// }
41/// } 45/// }
@@ -51,23 +55,23 @@
51/// display: block; 55/// display: block;
52/// } 56/// }
53/// 57///
54@mixin iro-bem-state($prefix, $state, $states...) { 58@mixin state($prefix, $state, $states...) {
55 $result: iro-bem-state($prefix, $state, $states...); 59 $result: state($prefix, $state, $states...);
56 $selector: nth($result, 1); 60 $selector: nth($result, 1);
57 $context: nth($result, 2); 61 $context: nth($result, 2);
58 62
59 @include iro-bem-validate( 63 @include validators.validate(
60 'state', 64 'state',
61 (prefix: $prefix, state: $state, states: $states), 65 (prefix: $prefix, state: $state, states: $states),
62 $selector, 66 $selector,
63 $context 67 $context
64 ); 68 );
65 69
66 @include iro-context-push($iro-bem-context-id, $context...); 70 @include contexts.push(vars.$context-id, $context...);
67 @at-root #{$selector} { 71 @at-root #{$selector} {
68 @content; 72 @content;
69 } 73 }
70 @include iro-context-pop($iro-bem-context-id); 74 @include contexts.pop(vars.$context-id);
71} 75}
72 76
73/// 77///
@@ -75,9 +79,9 @@
75/// 79///
76/// @return {list} A list with two items: 1. selector, 2. context or `null` 80/// @return {list} A list with two items: 1. selector, 2. context or `null`
77/// 81///
78/// @see {mixin} iro-bem-has 82/// @see {mixin} has
79/// 83///
80@function iro-bem-state($prefix, $state, $states...) { 84@function state($prefix, $state, $states...) {
81 $selector: (); 85 $selector: ();
82 $parts-data: (); 86 $parts-data: ();
83 87
@@ -104,10 +108,10 @@
104/// 108///
105/// Create a new has-state modifier. 109/// Create a new has-state modifier.
106/// 110///
107/// It's a shorthand for iro-bem-state('is', $state, $states...). 111/// It's a shorthand for state('is', $state, $states...).
108/// 112///
109@mixin iro-bem-is($state, $states...) { 113@mixin is($state, $states...) {
110 @include iro-bem-state('is', $state, $states...) { 114 @include state('is', $state, $states...) {
111 @content; 115 @content;
112 } 116 }
113} 117}
@@ -117,19 +121,19 @@
117/// 121///
118/// @return {list} A list with two items: 1. selector, 2. context or `null` 122/// @return {list} A list with two items: 1. selector, 2. context or `null`
119/// 123///
120/// @see {mixin} iro-bem-is 124/// @see {mixin} is
121/// 125///
122@function iro-bem-is($state, $states...) { 126@function is($state, $states...) {
123 @return iro-bem-state('is', $state, $states...); 127 @return state('is', $state, $states...);
124} 128}
125 129
126/// 130///
127/// Create a new has-state modifier. 131/// Create a new has-state modifier.
128/// 132///
129/// It's a shorthand for iro-bem-state('has', $state, $states...). 133/// It's a shorthand for state('has', $state, $states...).
130/// 134///
131@mixin iro-bem-has($state, $states...) { 135@mixin has($state, $states...) {
132 @include iro-bem-state('has', $state, $states...) { 136 @include state('has', $state, $states...) {
133 @content; 137 @content;
134 } 138 }
135} 139}
@@ -139,8 +143,8 @@
139/// 143///
140/// @return {list} A list with two items: 1. selector, 2. context or `null` 144/// @return {list} A list with two items: 1. selector, 2. context or `null`
141/// 145///
142/// @see {mixin} iro-bem-has 146/// @see {mixin} has
143/// 147///
144@function iro-bem-has($state, $states...) { 148@function has($state, $states...) {
145 @return iro-bem-state('has', $state, $states...); 149 @return state('has', $state, $states...);
146} 150}
diff --git a/src/bem/_suffix.scss b/src/bem/_suffix.scss
index b103c9f..2ddb54d 100644
--- a/src/bem/_suffix.scss
+++ b/src/bem/_suffix.scss
@@ -4,6 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './validators';
8@use './vars';
9@use '../functions';
10@use '../contexts';
11
7/// 12///
8/// Generate a new suffix. 13/// Generate a new suffix.
9/// 14///
@@ -14,17 +19,17 @@
14/// @throw If the element is not preceded by a block or modifier. 19/// @throw If the element is not preceded by a block or modifier.
15/// 20///
16/// @example scss - Using a suffix 21/// @example scss - Using a suffix
17/// @include iro-bem-utility('hidden') { 22/// @include utility('hidden') {
18/// display: none; 23/// display: none;
19/// 24///
20/// @media (max-width: 320px) { 25/// @media (max-width: 320px) {
21/// @include iro-bem-suffix('phone') { 26/// @include suffix('phone') {
22/// display: none; 27/// display: none;
23/// } 28/// }
24/// } 29/// }
25/// 30///
26/// @media (max-width: 768px) { 31/// @media (max-width: 768px) {
27/// @include iro-bem-suffix('tablet') { 32/// @include suffix('tablet') {
28/// display: none; 33/// display: none;
29/// } 34/// }
30/// } 35/// }
@@ -48,23 +53,23 @@
48/// } 53/// }
49/// } 54/// }
50/// 55///
51@mixin iro-bem-suffix($name) { 56@mixin suffix($name) {
52 $result: iro-bem-suffix($name); 57 $result: suffix($name);
53 $selector: nth($result, 1); 58 $selector: nth($result, 1);
54 $context: nth($result, 2); 59 $context: nth($result, 2);
55 60
56 @include iro-bem-validate( 61 @include validators.validate(
57 'suffix', 62 'suffix',
58 (name: $name), 63 (name: $name),
59 $selector, 64 $selector,
60 $context 65 $context
61 ); 66 );
62 67
63 @include iro-context-push($iro-bem-context-id, $context...); 68 @include contexts.push(vars.$context-id, $context...);
64 @at-root #{$selector} { 69 @at-root #{$selector} {
65 @content; 70 @content;
66 } 71 }
67 @include iro-context-pop($iro-bem-context-id); 72 @include contexts.pop(vars.$context-id);
68} 73}
69 74
70/// 75///
@@ -72,21 +77,21 @@
72/// 77///
73/// @return {list} A list with two items: 1. selector, 2. context or `null` 78/// @return {list} A list with two items: 1. selector, 2. context or `null`
74/// 79///
75/// @see {mixin} iro-bem-suffix 80/// @see {mixin} suffix
76/// 81///
77@function iro-bem-suffix($name) { 82@function suffix($name) {
78 // 83 //
79 // Suffixes can be used on block, element and modifier. 84 // Suffixes can be used on block, element and modifier.
80 // 85 //
81 86
82 $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); 87 $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth);
83 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); 88 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
84 $noop: iro-context-assert-stack-must-not-contain($iro-bem-context-id, 'suffix'); 89 $noop: contexts.assert-stack-must-not-contain(vars.$context-id, 'suffix');
85 90
86 $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier'); 91 $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier');
87 $parent-selector: map-get(nth($parent-context, 2), 'selector'); 92 $parent-selector: map-get(nth($parent-context, 2), 'selector');
88 93
89 @if not iro-selector-suffix-match(&, $parent-selector) { 94 @if not functions.selector-suffix-match(&, $parent-selector) {
90 // 95 //
91 // The current selector doesn't match the parent selector. 96 // The current selector doesn't match the parent selector.
92 // The user manually added a selector between parent context and this suffix call. 97 // The user manually added a selector between parent context and this suffix call.
@@ -107,7 +112,7 @@
107 // - {b,e,m}@suffix 112 // - {b,e,m}@suffix
108 // 113 //
109 114
110 $selector: selector-append(&, $iro-bem-suffix-separator + $name); 115 $selector: selector-append(&, vars.$suffix-separator + $name);
111 116
112 $context: 'suffix', ( 117 $context: 'suffix', (
113 'name': $name, 118 'name': $name,
diff --git a/src/bem/_theme.scss b/src/bem/_theme.scss
index a49981c..ff1ba49 100644
--- a/src/bem/_theme.scss
+++ b/src/bem/_theme.scss
@@ -4,6 +4,11 @@
4/// @access public 4/// @access public
5//// 5////
6 6
7@use './functions';
8@use './validators';
9@use './vars';
10@use '../contexts';
11
7/// 12///
8/// Declare new rules for the current block for when this theme is active. 13/// Declare new rules for the current block for when this theme is active.
9/// 14///
@@ -12,23 +17,23 @@
12/// 17///
13/// @content 18/// @content
14/// 19///
15@mixin iro-bem-at-theme($name, $names...) { 20@mixin at-theme($name, $names...) {
16 $result: iro-bem-at-theme($name, $names...); 21 $result: at-theme($name, $names...);
17 $selector: nth($result, 1); 22 $selector: nth($result, 1);
18 $context: nth($result, 2); 23 $context: nth($result, 2);
19 24
20 @include iro-bem-validate( 25 @include validators.validate(
21 'at-theme', 26 'at-theme',
22 (name: $name, names: $names), 27 (name: $name, names: $names),
23 $selector, 28 $selector,
24 $context 29 $context
25 ); 30 );
26 31
27 @include iro-context-push($iro-bem-context-id, $context...); 32 @include contexts.push(vars.$context-id, $context...);
28 @at-root #{$selector} { 33 @at-root #{$selector} {
29 @content; 34 @content;
30 } 35 }
31 @include iro-context-pop($iro-bem-context-id); 36 @include contexts.pop(vars.$context-id);
32} 37}
33 38
34/// 39///
@@ -37,19 +42,19 @@
37/// 42///
38/// @return {list} A list with two items: 1. selector, 2. context or `null` 43/// @return {list} A list with two items: 1. selector, 2. context or `null`
39/// 44///
40/// @see {mixin} iro-bem-at-theme 45/// @see {mixin} at-theme
41/// 46///
42@function iro-bem-at-theme($name, $names...) { 47@function at-theme($name, $names...) {
43 $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); 48 $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block');
44 49
45 $parent-context: iro-context-get($iro-bem-context-id, 'block'); 50 $parent-context: contexts.get(vars.$context-id, 'block');
46 $parent-selector: map-get(nth($parent-context, 2), 'selector'); 51 $parent-selector: map-get(nth($parent-context, 2), 'selector');
47 52
48 //@if not iro-selector-suffix-match(&, $parent-selector) { 53 //@if not functions.selector-suffix-match(&, $parent-selector) {
49 // @error 'An at-theme rule must be an immediate child of a block'; 54 // @error 'An at-theme rule must be an immediate child of a block';
50 //} 55 //}
51 56
52 $selector: iro-bem-theme-selector($name, $names...); 57 $selector: functions.theme-selector($name, $names...);
53 $selector: selector-nest($selector, &); 58 $selector: selector-nest($selector, &);
54 59
55 $context: 'at-theme', ( 60 $context: 'at-theme', (
diff --git a/src/bem/_validators.scss b/src/bem/_validators.scss
index eb09a60..042e15e 100644
--- a/src/bem/_validators.scss
+++ b/src/bem/_validators.scss
@@ -16,6 +16,10 @@
16/// @access public 16/// @access public
17//// 17////
18 18
19@use './vars';
20@use '../functions';
21@use '../contexts';
22
19/// 23///
20/// A list of validator functions. 24/// A list of validator functions.
21/// 25///
@@ -23,7 +27,7 @@
23/// 27///
24/// @access private 28/// @access private
25/// 29///
26$iro-bem-validators: (); 30$validators: ();
27 31
28/// 32///
29/// Register one or multiple validator functions. 33/// Register one or multiple validator functions.
@@ -41,19 +45,19 @@ $iro-bem-validators: ();
41/// @param {string} $func-name - First function name. 45/// @param {string} $func-name - First function name.
42/// @param {string} $func-names - Other function names. 46/// @param {string} $func-names - Other function names.
43/// 47///
44@mixin iro-bem-add-validator($func-name, $func-names...) { 48@mixin add($func-name, $func-names...) {
45 $noop: iro-bem-add-validator($func-name, $func-names...); 49 $noop: add($func-name, $func-names...);
46} 50}
47 51
48/// 52///
49/// Register one or multiple validator functions. Check the respective mixin documentation for more information. 53/// Register one or multiple validator functions. Check the respective mixin documentation for more information.
50/// 54///
51/// @see {mixin} iro-bem-add-validator 55/// @see {mixin} add
52/// 56///
53@function iro-bem-add-validator($func-name, $func-names...) { 57@function add($func-name, $func-names...) {
54 @each $fn-name in join($func-name, $func-names) { 58 @each $fn-name in join($func-name, $func-names) {
55 $fn: get-function($fn-name); 59 $fn: get-function($fn-name);
56 $iro-bem-validators: map-merge($iro-bem-validators, ($fn-name: $fn)) !global; 60 $validators: map-merge($validators, ($fn-name: $fn));
57 } 61 }
58 @return null; 62 @return null;
59} 63}
@@ -64,25 +68,25 @@ $iro-bem-validators: ();
64/// @param {string} $func-name - First function name. 68/// @param {string} $func-name - First function name.
65/// @param {string} $func-names - Other function names. 69/// @param {string} $func-names - Other function names.
66/// 70///
67@mixin iro-bem-remove-validator($func-name, $func-names...) { 71@mixin remove($func-name, $func-names...) {
68 $noop: iro-bem-remove-validator($func-name, $func-names...); 72 $noop: remove($func-name, $func-names...);
69} 73}
70 74
71/// 75///
72/// Unregister one or multiple validator functions. Check the respective mixin documentation for more information. 76/// Unregister one or multiple validator functions. Check the respective mixin documentation for more information.
73/// 77///
74/// @see {mixin} iro-bem-remove-validator 78/// @see {mixin} remove
75/// 79///
76@function iro-bem-remove-validator($func-name, $func-names...) { 80@function remove($func-name, $func-names...) {
77 $iro-bem-validators: map-remove($iro-bem-validators, $func-name, $func-names...) !global; 81 $validators: map-remove($validators, $func-name, $func-names...);
78 @return null; 82 @return null;
79} 83}
80 84
81/// 85///
82/// @access private 86/// @access private
83/// 87///
84@mixin iro-bem-validate($type, $args, $selector, $context) { 88@mixin validate($type, $args, $selector, $context) {
85 @each $id, $fn in $iro-bem-validators { 89 @each $id, $fn in $validators {
86 $result: call($fn, $type, $args, $selector, $context); 90 $result: call($fn, $type, $args, $selector, $context);
87 @if not nth($result, 1) { 91 @if not nth($result, 1) {
88 @error 'A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}'; 92 @error 'A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}';
@@ -100,26 +104,26 @@ $iro-bem-validators: ();
100/// A validator that makes sure blocks are declared in the right order, determined by the 104/// A validator that makes sure blocks are declared in the right order, determined by the
101/// namespace used. 105/// namespace used.
102/// 106///
103@function iro-bem-validator--enforce-namespace-order($type, $args, $selector, $context) { 107@function enforce-namespace-order($type, $args, $selector, $context) {
104 @if not global-variable-exists(iro-bem-namespace-order) { 108 @if not global-variable-exists(namespace-order, vars) {
105 $iro-bem-namespace-order: map-keys($iro-bem-namespaces) !global; 109 vars.$namespace-order: map-keys(vars.$namespaces);
106 } 110 }
107 @if not global-variable-exists(iro-bem-cur-namespace-index) { 111 @if not global-variable-exists(cur-namespace-index, vars) {
108 $iro-bem-cur-namespace-index: 1 !global; 112 vars.$cur-namespace-index: 1;
109 } 113 }
110 114
111 @if $type == 'block' { 115 @if $type == 'block' {
112 $block-type: map-get($args, 'type'); 116 $block-type: map-get($args, 'type');
113 117
114 @if $block-type != null { 118 @if $block-type != null {
115 $ns-index: index($iro-bem-namespace-order, $block-type); 119 $ns-index: index(vars.$namespace-order, $block-type);
116 120
117 @if $ns-index != null { 121 @if $ns-index != null {
118 @if $ns-index < $iro-bem-cur-namespace-index { 122 @if $ns-index < vars.$cur-namespace-index {
119 @return false 'Namespace "#{$block-type}" comes before current namespace #{nth($iro-bem-namespace-order, $iro-bem-cur-namespace-index)}'; 123 @return false 'Namespace "#{$block-type}" comes before current namespace #{nth(vars.$namespace-order, vars.$cur-namespace-index)}';
120 } 124 }
121 125
122 $iro-bem-cur-namespace-index: $ns-index !global; 126 vars.$cur-namespace-index: $ns-index;
123 } 127 }
124 } 128 }
125 } 129 }
@@ -130,9 +134,9 @@ $iro-bem-validators: ();
130/// 134///
131/// A validator that makes all BEM entities immutable. 135/// A validator that makes all BEM entities immutable.
132/// 136///
133@function iro-bem-validator--immutable-entities($type, $args, $selector, $context) { 137@function immutable-entities($type, $args, $selector, $context) {
134 @if not global-variable-exists(iro-bem-generated-selectors) { 138 @if not global-variable-exists(generated-selectors, vars) {
135 $iro-bem-generated-selectors: () !global; 139 vars.$generated-selectors: ();
136 } 140 }
137 141
138 $block-name: null; 142 $block-name: null;
@@ -143,7 +147,7 @@ $iro-bem-validators: ();
143 $block-name: map-get($args, 'name'); 147 $block-name: map-get($args, 'name');
144 $block-type: map-get($args, 'type'); 148 $block-type: map-get($args, 'type');
145 } @else { 149 } @else {
146 $block-context: iro-context-get($iro-bem-context-id, 'block'); 150 $block-context: contexts.get(vars.$context-id, 'block');
147 $block-name: map-get(nth($block-context, 2), 'name'); 151 $block-name: map-get(nth($block-context, 2), 'name');
148 $block-type: map-get(nth($block-context, 2), 'type'); 152 $block-type: map-get(nth($block-context, 2), 'type');
149 } 153 }
@@ -155,21 +159,21 @@ $iro-bem-validators: ();
155 } 159 }
156 160
157 @if $type == 'block' { 161 @if $type == 'block' {
158 @if map-has-key($iro-bem-generated-selectors, $block-id) { 162 @if map-has-key(vars.$generated-selectors, $block-id) {
159 @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; 163 @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.';
160 } 164 }
161 165
162 $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: ())) !global; 166 vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: ()));
163 } @else { 167 } @else {
164 $selectors: map-get($iro-bem-generated-selectors, $block-id); 168 $selectors: map-get(vars.$generated-selectors, $block-id);
165 169
166 @if index($selectors, $selector) { 170 @if index($selectors, $selector) {
167 @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; 171 @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.';
168 } 172 }
169 173
170 $selectors: append($selectors, $selector); 174 $selectors: append($selectors, $selector);
171 175
172 $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: $selectors)) !global; 176 vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: $selectors));
173 } 177 }
174 178
175 @return true ''; 179 @return true '';
diff --git a/src/bem/_vars.scss b/src/bem/_vars.scss
index 5942d4f..3d0f92a 100644
--- a/src/bem/_vars.scss
+++ b/src/bem/_vars.scss
@@ -9,21 +9,21 @@
9/// 9///
10/// @type string 10/// @type string
11/// 11///
12$iro-bem-element-separator: '__' !default; 12$element-separator: '__' !default;
13 13
14/// 14///
15/// Separating character sequence for modifiers. 15/// Separating character sequence for modifiers.
16/// 16///
17/// @type string 17/// @type string
18/// 18///
19$iro-bem-modifier-separator: '--' !default; 19$modifier-separator: '--' !default;
20 20
21/// 21///
22/// Separating character sequence for BEMIT suffixes. 22/// Separating character sequence for BEMIT suffixes.
23/// 23///
24/// @type string 24/// @type string
25/// 25///
26$iro-bem-suffix-separator: '\\@' !default; 26$suffix-separator: '\\@' !default;
27 27
28/// 28///
29/// Prefixes for all BEMIT namespaces. 29/// Prefixes for all BEMIT namespaces.
@@ -40,7 +40,7 @@ $iro-bem-suffix-separator: '\\@' !default;
40/// 40///
41/// @type map 41/// @type map
42/// 42///
43$iro-bem-namespaces: ( 43$namespaces: (
44 object: 'o', 44 object: 'o',
45 component: 'c', 45 component: 'c',
46 layout: 'l', 46 layout: 'l',
@@ -59,14 +59,14 @@ $iro-bem-namespaces: (
59/// 59///
60/// @access private 60/// @access private
61/// 61///
62$iro-bem-blocks: (); 62$blocks: ();
63 63
64/// 64///
65/// Maximum nesting depth of BEM mixins. The large default value means there is no effective limit. 65/// Maximum nesting depth of BEM mixins. The large default value means there is no effective limit.
66/// 66///
67/// @type number 67/// @type number
68/// 68///
69$iro-bem-max-depth: 99 !default; 69$max-depth: 99 !default;
70 70
71/// 71///
72/// Indicates how nested elements should be handled. 72/// Indicates how nested elements should be handled.
@@ -78,28 +78,28 @@ $iro-bem-max-depth: 99 !default;
78/// 78///
79/// @type string 79/// @type string
80/// 80///
81$iro-bem-element-nesting-policy: 'allow' !default; 81$element-nesting-policy: 'allow' !default;
82 82
83/// 83///
84/// Context ID used for all BEM-related mixins. 84/// Context ID used for all BEM-related mixins.
85/// 85///
86/// @type string 86/// @type string
87/// 87///
88$iro-bem-context-id: 'bem' !default; 88$context-id: 'bem' !default;
89 89
90/// 90///
91/// Debug mode. 91/// Debug mode.
92/// 92///
93/// @type bool 93/// @type bool
94/// 94///
95$iro-bem-debug: false !default; 95$debug: false !default;
96 96
97/// 97///
98/// Colors assigned to namespaces. 98/// Colors assigned to namespaces.
99/// 99///
100/// @type map 100/// @type map
101/// 101///
102$iro-bem-debug-colors: ( 102$debug-colors: (
103 object: #ffa500, 103 object: #ffa500,
104 component: #00f, 104 component: #00f,
105 layout: #ff0, 105 layout: #ff0,
diff --git a/src/harmony-shortcodes.scss b/src/harmony-shortcodes.scss
deleted file mode 100644
index 3307a7e..0000000
--- a/src/harmony-shortcodes.scss
+++ /dev/null
@@ -1,35 +0,0 @@
1////
2/// Shorter version of the harmony-related functions. Useful to reduce clutter.
3///
4/// @group Harmony shortcodes
5///
6/// @access public
7////
8
9///
10/// @alias iro-harmony-modular-scale
11///
12@function modular-scale($times, $base, $ratio) {
13 @include iro-harmony-modular-scale($times, $base, $ratio);
14}
15
16///
17/// @alias modular-scale
18///
19@function ms($times, $base, $ratio) {
20 @include modular-scale($times, $base, $ratio);
21}
22
23///
24/// @alias iro-responsive-modular-scale
25///
26@mixin responsive-modular-scale($prop, $times, $responsive-map) {
27 @include iro-responsive-modular-scale($prop, $times, $responsive-map);
28}
29
30///
31/// @alias responsive-modular-scale
32///
33@mixin responsive-ms($prop, $times, $responsive-map) {
34 @include responsive-modular-scale($prop, $times, $responsive-map);
35}
diff --git a/src/main.scss b/src/main.scss
deleted file mode 100644
index 898b0ae..0000000
--- a/src/main.scss
+++ /dev/null
@@ -1,9 +0,0 @@
1@import 'functions';
2@import 'vars';
3@import 'contexts';
4@import 'bem';
5@import 'props';
6@import 'harmony';
7@import 'responsive';
8@import 'easing';
9@import 'gradients';
diff --git a/src/prep.scss b/src/prep.scss
deleted file mode 100644
index 616165d..0000000
--- a/src/prep.scss
+++ /dev/null
@@ -1,2 +0,0 @@
1@import 'functions';
2@import 'math';
diff --git a/src/props-shortcodes.scss b/src/props-shortcodes.scss
deleted file mode 100644
index 2e5fa1e..0000000
--- a/src/props-shortcodes.scss
+++ /dev/null
@@ -1,79 +0,0 @@
1////
2/// Shorter version of the prop-related functions. Useful to reduce clutter.
3///
4/// @group Props shortcodes
5///
6/// @access public
7////
8
9///
10/// @alias iro-props-namespace
11///
12@mixin namespace($name) {
13 @include iro-props-namespace($name) {
14 @content;
15 }
16}
17
18///
19/// @alias iro-props-namespace
20///
21@function namespace() {
22 @return iro-props-namespace();
23}
24
25///
26/// @alias iro-props-store
27///
28@function store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) {
29 @return iro-props-store($map, $tree, $merge, $global);
30}
31
32///
33/// @alias iro-props-store
34///
35@mixin store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) {
36 @include iro-props-store($map, $tree, $merge, $global);
37}
38
39///
40/// @alias iro-props-clear
41///
42@mixin clear($tree: $iro-props-default-tree) {
43 @include iro-props-clear($tree);
44}
45
46///
47/// @alias iro-props-clear
48///
49@function clear($tree: $iro-props-default-tree) {
50 @return iro-props-clear($tree);
51}
52
53///
54/// @alias iro-props-get-static
55///
56@function static($key: (), $tree: $iro-props-default-tree, $default: null, $global: false) {
57 @return iro-props-get-static($key, $tree, $default, $global);
58}
59
60///
61/// @alias iro-props-get
62///
63@function prop($key, $tree: $iro-props-default-tree, $default: null, $global: false) {
64 @return iro-props-get($key, $tree, $default, $global);
65}
66
67///
68/// @alias iro-props-assign
69///
70@mixin assign($tree: $iro-props-default-tree, $root: (), $skip: (), $prefix: '', $global: false) {
71 @include iro-props-assign($tree, $root, $skip, $prefix, $global);
72}
73
74///
75/// @alias iro-props-ref
76///
77@function ref($tree: $iro-props-default-tree, $key: null, $global: false) {
78 @return iro-props-ref($tree, $key, $global);
79}
diff --git a/src/responsive-shortcodes.scss b/src/responsive-shortcodes.scss
deleted file mode 100644
index e43dfc0..0000000
--- a/src/responsive-shortcodes.scss
+++ /dev/null
@@ -1,14 +0,0 @@
1////
2/// Shorter version of the responsive-related mixins. Useful to reduce clutter.
3///
4/// @group Responsive shortcodes
5///
6/// @access public
7////
8
9///
10/// @alias iro-responsive-property
11///
12@mixin responsive($props, $responsive-map, $fluid: true, $vertical: false) {
13 @include iro-responsive-property($props, $responsive-map, $fluid, $vertical);
14}
generated by cgit v1.2.3-54-g00ecf (git 2.44.0) at 2024-05-11 07:52:54 +0000