type-heading 0.0.13 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +28 -12
  3. data/stylesheets/type-heading/_settings.scss +57 -24
  4. data/stylesheets/type-heading/functions/_core.scss +67 -32
  5. data/stylesheets/type-heading/functions/_heading.scss +99 -102
  6. data/stylesheets/type-heading/functions/_helpers.scss +336 -267
  7. data/stylesheets/type-heading/functions/_property.scss +288 -296
  8. data/stylesheets/type-heading/mixins/_breakpoint.scss +19 -20
  9. data/stylesheets/type-heading/mixins/_core.scss +148 -31
  10. data/stylesheets/type-heading/mixins/_heading.scss +65 -144
  11. data/stylesheets/type-heading/mixins/_property.scss +237 -129
  12. metadata +2 -2
data/stylesheets/type-heading/functions/_property.scss CHANGED
@@ -1,14 +1,14 @@
1
- // Property
2
- //
3
- // @group Functions / Property
4
- // @author Elliot Mitchum
1
+ ////
2
+ /// Property
3
+ /// @group Property
4
+ ////
5
5
 
6
- // th-properties
7
- // An ordered list of available properties.
8
- //
9
- // @since 0.0.10
10
- // @type List
11
- // @access private
6
+ // $th-properties
7
+ /// An ordered list of available properties.
8
+ ///
9
+ /// @since 0.0.10
10
+ /// @type list
11
+ /// @access private
12
12
 
13
13
  $th-properties: (
14
14
  font-size,
@@ -17,49 +17,47 @@ $th-properties: (
17
17
  breakpoint
18
18
  );
19
19
 
20
- // th-property
21
- // Return heading list property value.
22
- //
23
- // @since 0.0.10
24
- // @type function
25
- //
26
- // @requires {function} th-heading
27
- // @requires {function} th-property-get
28
- // @requires {function} th-property-default
29
- // @requires {function} _th-property-unit-convert
30
- // @requires {function} _th-core-global-breakpoint
31
- //
32
- // @param {list | string} $heading A heading map key or list (required).
33
- // @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A heading property name (required).
34
- // @param {number} $breakpoint A heading list breakpoint.
35
- // @param {boolean} $convert (true) If returned value should be unit converted.
36
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
37
- //
38
- // @returns {number} Heading property value.
39
- //
40
- // @example scss Return font size from a h1 heading map.
41
- // // th-property(
42
- // // $heading: h1,
43
- // // $property-name: font-size
44
- // // )
45
- // @example scss Return font size from a h1 heading map with a breakpoint of 768px.
46
- // // th-property(
47
- // // $heading: h1,
48
- // // $property-name: font-size,
49
- // // $breakpoint: 768px
50
- // // )
51
- // @example scss Return font size from a h1 heading map without unit conversion.
52
- // // th-property(
53
- // // $heading: h1,
54
- // // $property-name: font-size,
55
- // // $convert: false
56
- // // )
57
- // @example scss Return font size from a h1 with a base font size of 24px.
58
- // // th-property(
59
- // // $heading: h1,
60
- // // $property-name: font-size,
61
- // // $base-font-size: 24px
62
- // // )
20
+ // th-property()
21
+ /// Return heading list property value.
22
+ ///
23
+ /// @since 0.0.10
24
+ /// @return {number} Heading property value.
25
+ ///
26
+ /// @param {list | string} $heading - A heading map key or list.
27
+ /// @param {string} $property-name - (font-size | line-height | margin-top | margin-bottom | breakpoint) A heading property name.
28
+ /// @param {number} $breakpoint [false] - A heading list breakpoint.
29
+ /// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
30
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
31
+ ///
32
+ /// @example scss - Return font size from a h1 heading map.
33
+ /// th-property(
34
+ /// $heading: h1,
35
+ /// $property-name: font-size
36
+ /// )
37
+ /// @example scss - Return font size from a h1 heading map with a breakpoint of 768px.
38
+ /// th-property(
39
+ /// $heading: h1,
40
+ /// $property-name: font-size,
41
+ /// $breakpoint: 768px
42
+ /// )
43
+ /// @example scss - Return font size from a h1 heading map without unit conversion.
44
+ /// th-property(
45
+ /// $heading: h1,
46
+ /// $property-name: font-size,
47
+ /// $convert: false
48
+ /// )
49
+ /// @example scss - Return font size from a h1 heading map and unit override to percent.
50
+ /// th-property(
51
+ /// $heading: h1,
52
+ /// $property-name: font-size,
53
+ /// $convert: percent
54
+ /// )
55
+ /// @example scss - Return font size from a h1 with a base font size of 24px.
56
+ /// th-property(
57
+ /// $heading: h1,
58
+ /// $property-name: font-size,
59
+ /// $base-font-size: 24px
60
+ /// )
63
61
 
64
62
  @function th-property(
65
63
  $heading,
@@ -68,90 +66,77 @@ $th-properties: (
68
66
  $convert: true,
69
67
  $base-font-size: $th-base-font-size
70
68
  ){
71
- $_return: false;
72
69
  $heading: th-heading($heading, $breakpoint);
73
- $breakpoint: _th-core-global-breakpoint($breakpoint);
74
- $_return: _th-property-get($heading, $property-name);
75
- @if $_return == default or $_return == false {
76
- $_return: th-property-default($property-name, $base-font-size, false);
70
+ $breakpoint: _th-core-breakpoint-context($breakpoint);
71
+ $property: _th-property-get($heading, $property-name);
72
+ @if $property-name != font-size {
73
+ $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size);
77
74
  }
78
- @if $convert == true {
79
- $_return: _th-property-unit-convert($property-name, $_return, $base-font-size);
75
+ @if $property == default or $property == false {
76
+ $property: th-property-default($property-name, $base-font-size, false);
80
77
  }
81
- @return $_return;
78
+ @if string == type-of($convert) {
79
+ $property: th-unit-convert($convert, $property, $base-font-size);
80
+ } @elseif $convert == true {
81
+ $property: _th-property-unit-convert-property($property-name, $property, $base-font-size);
82
+ }
83
+ @return $property;
82
84
  }
83
85
 
84
- // _th-property-get
85
- // Return heading list property value.
86
- //
87
- // @since 0.0.11
88
- // @type function
89
- // @access private
90
- //
91
- // @requires {function} th-list-get-index-deep
92
- // @requires {function} th-list-has-index
93
- //
94
- // @param {list} $heading A heading list (required).
95
- // @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A heading property name (required).
96
- //
97
- // @returns {number} The heading property value.
98
- //
99
- // @example scss Return font size from a heading.
100
- // // _th-property-get(h1, font-size)
86
+ // _th-property-get()
87
+ /// Return heading list property value.
88
+ ///
89
+ /// @since 0.0.11
90
+ /// @access private
91
+ /// @return {number} The heading property value.
92
+ ///
93
+ /// @param {list} $heading - A heading list.
94
+ /// @param {string} $property-name - (font-size | line-height | margin-top | margin-bottom | breakpoint) A heading property name.
95
+ ///
96
+ /// @example scss - Return font size from a heading.
97
+ /// _th-property-get(h1, font-size)
101
98
 
102
99
  @function _th-property-get(
103
100
  $heading,
104
101
  $property-name
105
- ){
106
- $_return: false;
102
+ ){
107
103
  $property-indexes: th-list-get-index-deep($th-properties, $property-name);
108
- @if list == type-of($heading) {
109
- $_return: $heading;
110
- @for $i from 1 through length($property-indexes) {
111
- @if th-list-has-index($_return, nth($property-indexes, $i)) {
112
- $_return: nth($_return, nth($property-indexes, $i));
113
- } @else if $i == 1 {
114
- $_return: false;
115
- }
116
- }
117
- } @else if $property-indexes == 1 {
118
- $_return: $heading;
119
- }
120
- @return $_return;
104
+ @return th-list-get-nth-deep($heading, $property-indexes);
121
105
  }
122
106
 
123
- // th-property-font-size
124
- // Return heading font size value.
125
- //
126
- // @since 0.0.10
127
- // @type function
128
- //
129
- // @requires th-property
130
- //
131
- // @param {list | string} $heading A heading map key or list (required).
132
- // @param {number | boolean} $breakpoint A heading list breakpoint.
133
- // @param {boolean} $convert (true) If returned value should be unit converted.
134
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
135
- //
136
- // @returns {number} The heading font size value.
137
- //
138
- // @example scss Return font size from a h1 heading map.
139
- // // th-property-font-size(h1)
140
- // @example scss Return font size from a h1 heading map with a breakpoint of 768px.
141
- // // th-property-font-size(
142
- // // $heading: h1,
143
- // // $breakpoint: 768px
144
- // // )
145
- // @example scss Return font size from a h1 heading map without unit conversion.
146
- // // th-property-font-size(
147
- // // $heading: h1,
148
- // // $convert: false
149
- // // )
150
- // @example scss Return font size from a h1 with a base font size of 24px.
151
- // // th-property-font-size(
152
- // // $heading: h1,
153
- // // $base-font-size: 24px
154
- // // )
107
+ // th-property-font-size()
108
+ /// Return heading font size value.
109
+ ///
110
+ /// @since 0.0.10
111
+ /// @return {number} The heading font size value.
112
+ ///
113
+ /// @param {list | string} $heading - A heading map key or list.
114
+ /// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
115
+ /// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
116
+ /// @param {number} $base-font-size [$th-base-font-size] Font size used for relative calculations.
117
+ ///
118
+ /// @example scss - Return font size from a h1 heading map.
119
+ /// th-property-font-size(h1)
120
+ /// @example scss - Return font size from a h1 heading map with a breakpoint of 768px.
121
+ /// th-property-font-size(
122
+ /// $heading: h1,
123
+ /// $breakpoint: 768px
124
+ /// )
125
+ /// @example scss - Return font size from a h1 heading map without unit conversion.
126
+ /// th-property-font-size(
127
+ /// $heading: h1,
128
+ /// $convert: false
129
+ /// )
130
+ /// @example scss - Return font size from a h1 heading map and unit override to percent.
131
+ /// th-property-font-size(
132
+ /// $heading: h1,
133
+ /// $convert: percent
134
+ /// )
135
+ /// @example scss - Return font size from a h1 with a base font size of 24px.
136
+ /// th-property-font-size(
137
+ /// $heading: h1,
138
+ /// $base-font-size: 24px
139
+ /// )
155
140
 
156
141
  @function th-property-font-size(
157
142
  $heading,
@@ -159,240 +144,247 @@ $th-properties: (
159
144
  $convert: true,
160
145
  $base-font-size: $th-base-font-size
161
146
  ){
162
- $_return: th-property(
147
+ @return th-property(
163
148
  $heading: $heading,
164
149
  $property-name: font-size,
165
150
  $breakpoint: $breakpoint,
166
151
  $convert: $convert,
167
152
  $base-font-size: $base-font-size
168
153
  );
169
- @return $_return;
170
154
  }
171
155
 
172
- // th-property-line-height
173
- // Return heading line height value.
174
- //
175
- // @since 0.0.10
176
- // @type function
177
- //
178
- // @requires th-property
179
- //
180
- // @param {list | string} $heading A heading map key or list (required).
181
- // @param {number} $breakpoint A heading list breakpoint.
182
- // @param {boolean} $convert (true) If returned value should be unit converted.
183
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
184
- //
185
- // @returns {number} The heading line height value.
186
- //
187
- // @example scss Return line height from a h1 heading map.
188
- // // th-property-line-height(h1)
189
- // @example scss Return line height from a h1 heading map with a breakpoint of 768px.
190
- // // th-property-line-height(
191
- // // $heading: h1,
192
- // // $breakpoint: 768px
193
- // // )
194
- // @example scss Return line height from a h1 heading map without unit conversion.
195
- // // th-property-line-height(
196
- // // $heading: h1,
197
- // // $convert: false
198
- // // )
199
- // @example scss Return line height from a h1 with a base font size of 24px.
200
- // // th-property-line-height(
201
- // // $heading: h1,
202
- // // $base-font-size: 24px
203
- // // )
156
+ // th-property-line-height()
157
+ /// Return heading line height value.
158
+ ///
159
+ /// @since 0.0.10
160
+ /// @return {number} The heading line height value.
161
+ ///
162
+ /// @param {list | string} $heading - A heading map key or list.
163
+ /// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
164
+ /// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
165
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
166
+ ///
167
+ /// @example scss - Return line height from a h1 heading map.
168
+ /// th-property-line-height(h1)
169
+ /// @example scss - Return line height from a h1 heading map with a breakpoint of 768px.
170
+ /// th-property-line-height(
171
+ /// $heading: h1,
172
+ /// $breakpoint: 768px
173
+ /// )
174
+ /// @example scss - Return line height from a h1 heading map without unit conversion.
175
+ /// th-property-line-height(
176
+ /// $heading: h1,
177
+ /// $convert: false
178
+ /// )
179
+ /// @example scss - Return line height from a h1 heading map and unit override to percent.
180
+ /// th-property-line-height(
181
+ /// $heading: h1,
182
+ /// $convert: percent
183
+ /// )
184
+ /// @example scss - Return line height from a h1 with a base font size of 24px.
185
+ /// th-property-line-height(
186
+ /// $heading: h1,
187
+ /// $base-font-size: 24px
188
+ /// )
204
189
 
205
190
  @function th-property-line-height(
206
191
  $heading,
207
192
  $breakpoint: false,
208
- $base-font-size: $th-base-font-size,
193
+ $base-font-size: th-property-font-size($heading, $breakpoint, false),
209
194
  $convert: true
210
195
  ){
211
- $_return: th-property(
196
+ @return th-property(
212
197
  $heading: $heading,
213
198
  $property-name: line-height,
214
199
  $breakpoint: $breakpoint,
215
200
  $convert: $convert,
216
- $base-font-size: $base-font-size
201
+ $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
217
202
  );
218
- @return $_return;
219
203
  }
220
204
 
221
- // th-property-margin-top
222
- // Return heading margin top value.
223
- //
224
- // @since 0.0.10
225
- // @type function
226
- //
227
- // @requires th-property
228
- //
229
- // @param {list | string} $heading A heading map key or list (required).
230
- // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
231
- // @param {boolean} $convert (true) If returned value should be unit converted.
232
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
233
- //
234
- // @returns {number} The heading margin top value.
235
- //
236
- // @example scss Return margin top from a h1 heading map.
237
- // // th-property-margin-top(h1)
238
- // @example scss Return margin top from a h1 heading map with a breakpoint of 768px.
239
- // // th-property-margin-top(
240
- // // $heading: h1,
241
- // // $breakpoint: 768px
242
- // // )
243
- // @example scss Return margin top from a h1 heading map without unit conversion.
244
- // // th-property-margin-top(
245
- // // $heading: h1,
246
- // // $convert: false
247
- // // )
248
- // @example scss Return margin top from a h1 with a base font size of 24px.
249
- // // th-property-margin-top(
250
- // // $heading: h1,
251
- // // $base-font-size: 24px
252
- // // )
205
+ // th-property-margin-top()
206
+ /// Return heading margin top value.
207
+ ///
208
+ /// @since 0.0.10
209
+ /// @return {number} The heading margin top value.
210
+ ///
211
+ /// @param {list | string} $heading - A heading map key or list.
212
+ /// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
213
+ /// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
214
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
215
+ ///
216
+ /// @example scss - Return margin top from a h1 heading map.
217
+ /// th-property-margin-top(h1)
218
+ /// @example scss - Return margin top from a h1 heading map with a breakpoint of 768px.
219
+ /// th-property-margin-top(
220
+ /// $heading: h1,
221
+ /// $breakpoint: 768px
222
+ /// )
223
+ /// @example scss - Return margin top from a h1 heading map without unit conversion.
224
+ /// th-property-margin-top(
225
+ /// $heading: h1,
226
+ /// $convert: false
227
+ /// )
228
+ /// @example scss - Return margin top from a h1 heading map and unit override to percent.
229
+ /// th-property-margin-top(
230
+ /// $heading: h1,
231
+ /// $convert: percent
232
+ /// )
233
+ /// @example scss - Return margin top from a h1 with a base font size of 24px.
234
+ /// th-property-margin-top(
235
+ /// $heading: h1,
236
+ /// $base-font-size: 24px
237
+ /// )
253
238
 
254
239
  @function th-property-margin-top(
255
240
  $heading,
256
241
  $breakpoint: false,
257
- $base-font-size: $th-base-font-size,
242
+ $base-font-size: th-property-font-size($heading, $breakpoint, false),
258
243
  $convert: true
259
244
  ){
260
- $_return: th-property(
245
+ @return th-property(
261
246
  $heading: $heading,
262
247
  $property-name: margin-top,
263
248
  $breakpoint: $breakpoint,
264
249
  $convert: $convert,
265
- $base-font-size: $base-font-size
250
+ $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
266
251
  );
267
- @return $_return;
268
252
  }
269
253
 
270
- // th-property-margin-bottom
271
- // Return heading margin bottom value.
272
- //
273
- // @since 0.0.10
274
- // @type function
275
- //
276
- // @requires th-property
277
- //
278
- // @param {list | string} $heading A heading map key or list (required).
279
- // @param {number | boolean} $breakpoint (false) A heading list breakpoint.
280
- // @param {boolean} $convert (true) If returned value should be unit converted.
281
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
282
- //
283
- // @returns {number} The heading margin bottom value.
284
- //
285
- // @example scss Return margin bottom from a h1 heading map.
286
- // // th-property-margin-bottom(h1)
287
- // @example scss Return margin bottom from a h1 heading map with a breakpoint of 768px.
288
- // // th-property-margin-bottom(
289
- // // $heading: h1,
290
- // // $breakpoint: 768px
291
- // // )
292
- // @example scss Return margin bottom from a h1 heading map without unit conversion.
293
- // // th-property-margin-bottom(
294
- // // $heading: h1,
295
- // // $convert: false
296
- // // )
297
- // @example scss Return margin bottom from a h1 with a base font size of 24px.
298
- // // th-property-margin-bottom(
299
- // // $heading: h1,
300
- // // $base-font-size: 24px
301
- // // )
254
+ // th-property-margin-bottom()
255
+ /// Return heading margin bottom value.
256
+ ///
257
+ /// @since 0.0.10
258
+ /// @return {number} The heading margin bottom value.
259
+ ///
260
+ /// @param {list | string} $heading - A heading map key or list.
261
+ /// @param {number | boolean} $breakpoint [false] - A heading list breakpoint.
262
+ /// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
263
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
264
+ ///
265
+ /// @example scss - Return margin bottom from a h1 heading map.
266
+ /// th-property-margin-bottom(h1)
267
+ /// @example scss - Return margin bottom from a h1 heading map with a breakpoint of 768px.
268
+ /// th-property-margin-bottom(
269
+ /// $heading: h1,
270
+ /// $breakpoint: 768px
271
+ /// )
272
+ /// @example scss - Return margin bottom from a h1 heading map without unit conversion.
273
+ /// th-property-margin-bottom(
274
+ /// $heading: h1,
275
+ /// $convert: false
276
+ /// )
277
+ /// @example scss - Return margin bottom from a h1 heading map and unit override to percent.
278
+ /// th-property-margin-bottom(
279
+ /// $heading: h1,
280
+ /// $convert: percent
281
+ /// )
282
+ /// @example scss - Return margin bottom from a h1 with a base font size of 24px.
283
+ /// th-property-margin-bottom(
284
+ /// $heading: h1,
285
+ /// $base-font-size: 24px
286
+ /// )
302
287
 
303
288
  @function th-property-margin-bottom(
304
289
  $heading,
305
290
  $breakpoint: false,
306
- $base-font-size: $th-base-font-size,
291
+ $base-font-size: th-property-font-size($heading, $breakpoint, false),
307
292
  $convert: true
308
293
  ){
309
- $_return: th-property(
294
+ @return th-property(
310
295
  $heading: $heading,
311
296
  $property-name: margin-bottom,
312
297
  $breakpoint: $breakpoint,
313
298
  $convert: $convert,
314
- $base-font-size: $base-font-size
299
+ $base-font-size: _th-property-base($heading, $breakpoint, $base-font-size)
315
300
  );
316
- @return $_return;
317
301
  }
318
302
 
319
- // th-property-default
320
- // Return default property value.
321
- //
322
- // @since 0.0.10
323
- // @type function
324
- //
325
- // @requires _th-property-unit-convert
326
- //
327
- // @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A property name (required).
328
- // @param {boolean} $convert (true) If returned value should be unit converted.
329
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
330
- //
331
- // @returns {number} The default property value.
332
- //
333
- // @example scss Get default font size.
334
- // // th-property-default(font-size)
303
+ // th-property-default()
304
+ /// Return default property value.
305
+ ///
306
+ /// @since 0.0.10
307
+ /// @return {number} The default property value.
308
+ ///
309
+ /// @param {string} $property-name - (font-size | line-height | margin-top | margin-bottom | breakpoint) A property name.
310
+ /// @param {boolean | string} $convert [true] - (true | false | px | em | rem | rel | percent) If returned value should be unit converted or overridden.
311
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
312
+ ///
313
+ /// @example scss - Get default font size.
314
+ /// th-property-default(font-size)
335
315
 
336
316
  @function th-property-default(
337
317
  $property-name,
338
318
  $convert: true,
339
319
  $base-font-size: $th-base-font-size
340
320
  ){
341
- $_return: $property-name;
342
- $_return: map-get($th-property-defaults, $property-name);
321
+ $property: map-get($th-property-defaults, $property-name);
343
322
  @if $convert == true {
344
- $_return: _th-property-unit-convert(
345
- $property-name: $property-name,
346
- $property-value: $_return,
347
- $base-font-size: $base-font-size
348
- );
323
+ $property: _th-property-unit-convert-property($property-name, $property, $base-font-size);
349
324
  }
350
- @return $_return;
325
+ @return $property;
351
326
  }
352
327
 
353
- // _th-property-unit-convert
354
- // Returns a property's converted unit value.
355
- //
356
- // @since 0.0.11
357
- // @type function
358
- // @access private
359
- //
360
- // @requires th-unit-convert-em
361
- // @requires th-unit-convert-rem
362
- // @requires th-unit-convert-rel
363
- // @requires th-unit-convert-px
364
- //
365
- // @param {string} $property-name (font-size | line-height | margin-top | margin-bottom | breakpoint) A property name (required).
366
- // @param {number} $property-value The number value of the property (required).
367
- // @param {number} $base-font-size ($th-base-font-size) Font size used for relative calculations.
368
- //
369
- // @returns {number} The converted unit value.
370
- //
371
- // @example scss Convert heading font size of 14px.
372
- // // _th-property-unit-convert(
373
- // // $property-name: font-size,
374
- // // $property-value: 14px
375
- // // )
376
- // @example scss Convert heading font size of 14px with base font size of 20px.
377
- // // _th-property-unit-convert(
378
- // // $property-name: font-size,
379
- // // $property-value: 14px,
380
- // // $base-font-size: 20px
381
- // // )
328
+ // _th-property-unit-convert-property()
329
+ /// Returns a property's converted value.
330
+ ///
331
+ /// @since 0.0.11
332
+ /// @access private
333
+ /// @return {number} The properties converted value.
334
+ ///
335
+ /// @param {string} $property-name - (font-size | line-height | margin-top | margin-bottom | breakpoint) A property name.
336
+ /// @param {number} $property-value - The number value of the property.
337
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
338
+ ///
339
+ /// @example scss - Convert heading font size of 14px.
340
+ /// _th-property-unit-convert-property(
341
+ /// $property-name: font-size,
342
+ /// $property-value: 14px
343
+ /// )
344
+ /// @example scss - Convert heading font size of 14px with base font size of 20px.
345
+ /// _th-property-unit-convert-property(
346
+ /// $property-name: font-size,
347
+ /// $property-value: 14px,
348
+ /// $base-font-size: 20px
349
+ /// )
382
350
 
383
- @function _th-property-unit-convert(
351
+ @function _th-property-unit-convert-property(
384
352
  $property-name,
385
353
  $property-value,
386
354
  $base-font-size: $th-base-font-size
387
355
  ){
388
- $_return: $property-value;
389
356
  $unit: map-get($th-property-units, $property-name);
390
- @if not $unit or $unit == unit($property-value) {
391
- @return $_return;
392
- }
393
- $function: th-unit-convert-#{$unit};
394
- @if function-exists($function) {
395
- $_return: call($function, $property-value, $base-font-size);
357
+ @return th-unit-convert($unit, $property-value, $base-font-size);
358
+ }
359
+
360
+ // _th-property-base
361
+ /// Get the base font size of a heading if base font size is equal to $th-base-font-size.
362
+ ///
363
+ /// @since 0.0.14
364
+ /// @access private
365
+ /// @return {number} Property's base font size.
366
+ ///
367
+ /// @param {list | string} $heading - A heading map key or list.
368
+ /// @param {number | boolean} $breakpoint [false] -A heading list breakpoint.
369
+ /// @param {number} $base-font-size [$th-base-font-size] - Font size used for relative calculations.
370
+ ///
371
+ /// @example scss - Get base font size if $th-base-font-size IS NOT 20px.
372
+ /// // $th-base-font-size: 30px
373
+ /// _th-property-base(h1, 768px, 20px)
374
+ /// // 20px
375
+ /// @example scss Get base font size if $th-base-font-size IS 20px.
376
+ /// // $th-base-font-size: 20px
377
+ /// _th-property-base(h1, 768px, 20px)
378
+ /// // 50px
379
+
380
+ @function _th-property-base(
381
+ $heading,
382
+ $breakpoint,
383
+ $base-font-size
384
+ ) {
385
+ $_return: $base-font-size;
386
+ @if $base-font-size == $th-base-font-size {
387
+ $_return: th-property-font-size($heading, $breakpoint, false);
396
388
  }
397
389
  @return $_return;
398
390
  }