typey 1.0.0.alpha.5 → 1.0.0.beta.1

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 (15) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +305 -13
  3. data/stylesheets/_typey.scss +3 -2
  4. data/stylesheets/typey/_defaults.scss +17 -12
  5. data/stylesheets/typey/_font-size.scss +33 -40
  6. data/stylesheets/typey/_font-stacks.scss +4 -4
  7. data/stylesheets/typey/_helpers.scss +109 -11
  8. data/stylesheets/typey/_line-height.scss +18 -35
  9. data/stylesheets/typey/_margin.scss +46 -36
  10. data/stylesheets/typey/_padding.scss +46 -36
  11. data/stylesheets/typey/_type-layout.scss +49 -0
  12. data/stylesheets/typey/_weight.scss +32 -0
  13. data/typey.gemspec +3 -3
  14. metadata +12 -11
  15. data/stylesheets/typey/_font-weight.scss +0 -12
data/stylesheets/typey/_helpers.scss CHANGED
@@ -6,15 +6,15 @@
6
6
  // @return number
7
7
  // The number with the base unit
8
8
  @function output-unit($number) {
9
+ @if $base-unit == rem {
10
+ @return $number * 1rem;
11
+ }
9
12
  @if $base-unit == px {
10
13
  @return $number * 1px;
11
14
  }
12
15
  @if $base-unit == pt {
13
16
  @return $number * 1pt;
14
17
  }
15
- @if $base-unit == rem {
16
- @return $number * 1rem;
17
- }
18
18
  @if $base-unit == em {
19
19
  @return $number * 1em;
20
20
  }
@@ -39,7 +39,7 @@
39
39
  // @param number $number
40
40
  // The number (with unit) to convert. Allowed units: px, pt
41
41
  // @param number|string $context
42
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
42
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
43
43
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
44
44
  // value in the same unit as the $font-size map.
45
45
  //
@@ -49,22 +49,25 @@
49
49
  @if type-of($number) == 'number' and not unitless($number) {
50
50
  $unit: unit($number);
51
51
  @if $unit == px or $unit == pt {
52
- @if $base-unit == px or $base-unit == pt {
53
- @return output-unit(strip-unit($number));
54
- }
55
52
  @if $base-unit == rem {
56
- @if $unit == unit($base-font-size) {
53
+ @if $unit == unit($base-font-size) {
57
54
  @return output-unit(($number / $base-font-size));
58
55
  }
56
+ @else {
57
+ @error "convert-unit() only accepts values with the same unit as $base-font-size.";
58
+ }
59
59
  }
60
- @if $base-unit == em {
60
+ @if $base-unit == px or $base-unit == pt {
61
+ @return output-unit(strip-unit($number));
62
+ }
63
+ @if $base-unit == em {
61
64
  @if type-of($context) == 'string' {
62
65
  @if map-has-key($font-size, $context) {
63
66
  $context-map-size: map-get($font-size, $context);
64
67
  @return output-unit(($number / $context-map-size));
65
68
  }
66
69
  @else {
67
- @warn "'#{$context}' not found in $font-size map.";
70
+ @error "'#{$context}' not found in $font-size map.";
68
71
  }
69
72
  }
70
73
  @if type-of($context) == 'number' {
@@ -72,10 +75,105 @@
72
75
  @return output-unit(($number / $context));
73
76
  }
74
77
  @else {
75
- @warn "The unit used for $context does not match the $base-font-size unit.";
78
+ @error "The unit used for $context does not match the $base-font-size unit.";
76
79
  }
77
80
  }
78
81
  }
79
82
  }
83
+ @else {
84
+ @error "convert-unit() only accepts values in px or pt.";
85
+ }
86
+ }
87
+ }
88
+
89
+ // Take a line-height multipler and output converted value.
90
+ //
91
+ // @param number $number
92
+ // Multiple of line height to be used
93
+ // @param number|string $context
94
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
95
+ // font-size if it differs from $base-font-size. Specified as a t-shirt size or
96
+ // value in the same unit as the $font-size map.
97
+ //
98
+ // @return number
99
+ // The value of the line-height multiple converted to the base unit.
100
+ @function output-from-multiplier($x, $context: $base-font-size) {
101
+ @if $base-unit == rem {
102
+ @return output-unit(($x * $base-line-height) / $base-font-size);
103
+ }
104
+ @if $base-unit == px or $base-unit == pt {
105
+ @return output-unit(strip-unit($x * $base-line-height));
106
+ }
107
+ @if $base-unit == em {
108
+ @if type-of($context) == 'number' {
109
+ @if unit($context) == unit($base-font-size) {
110
+ @return output-unit(($x * $base-line-height) / $context);
111
+ }
112
+ @else {
113
+ @error "The unit used for $context does not match the $base-font-size unit.";
114
+ }
115
+ }
116
+ @if type-of($context) == 'string' {
117
+ @if map-has-key($font-size, $context) {
118
+ $context-map-size: map-get($font-size, $context);
119
+ @return output-unit(($x * $base-line-height) / $context-map-size);
120
+ }
121
+ @else {
122
+ @error "'#{$context}' not found in $font-size map.";
123
+ }
124
+ }
125
+ @else {
126
+ @error "$context must be a px/pt value or a key from the $font-size map.";
127
+ }
128
+ }
129
+ }
130
+
131
+
132
+ // Takes a sizing from the $font-size map (m, xl, xxl, etc) and convert it to
133
+ // the base unit.
134
+ //
135
+ // @param string $size
136
+ // A size from the $font-size map.
137
+ // @param number|string $context
138
+ // (optional) Only used if em is the $base-unit. The value of the parent
139
+ // font-size if it differs from $base-font-size. Specified as a t-shirt size or
140
+ // value in the same unit as the $font-size map.
141
+ //
142
+ // @return number
143
+ // The selected font-size in $base-unit.
144
+ @function output-from-font-size-map($size, $context: $base-font-size) {
145
+ @if map-has-key($font-size, $size) {
146
+ $map-size: map-get($font-size, $size);
147
+ @if $base-unit == rem {
148
+ @return output-unit(($map-size / $base-font-size));
149
+ }
150
+ @if $base-unit == px or $base-unit == pt {
151
+ @return output-unit(strip-unit($map-size));
152
+ }
153
+ @if $base-unit == em {
154
+ @if type-of($context) == 'string' {
155
+ @if map-has-key($font-size, $context) {
156
+ $context-map-size: map-get($font-size, $context);
157
+ @return output-unit(($map-size / $context-map-size));
158
+ }
159
+ @else {
160
+ @error "'#{$context}' not found in $font-size map.";
161
+ }
162
+ }
163
+ @if type-of($context) == 'number' {
164
+ @if unit($context) == unit($base-font-size) {
165
+ @return output-unit(($map-size / $context));
166
+ }
167
+ @else {
168
+ @error "The unit used for $context does not match the $base-font-size unit.";
169
+ }
170
+ }
171
+ @else {
172
+ @error "$context must be a px/pt value or a key from the $font-size map.";
173
+ }
174
+ }
175
+ }
176
+ @else {
177
+ @error "'#{$size}' not found in $font-size map.";
80
178
  }
81
179
  }
data/stylesheets/typey/_line-height.scss CHANGED
@@ -1,4 +1,4 @@
1
- // Generate a value to be used as line-height from either:
1
+ // Generate a value to be used as line-height from either:
2
2
  // a) a multiple of $base-line-height
3
3
  // b) a static px or pt value
4
4
  //
@@ -10,66 +10,49 @@
10
10
  // @param number $x
11
11
  // Multiple of line height to be used or px/pt value to be converted.
12
12
  // @param number|string $context
13
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
13
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
14
14
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
15
15
  // value in the same unit as the $font-size map.
16
16
  //
17
17
  // @return number
18
- // The caculated height in $base-unit.
18
+ // The calculated height in $base-unit.
19
19
  @function line-height($x, $context: $base-font-size) {
20
20
  @if type-of($x) == 'number' and unitless($x) {
21
- @if $base-unit == px or $base-unit == pt {
22
- @return output-unit(strip-unit($x * $base-line-height));
23
- }
24
- @if $base-unit == rem {
25
- @return output-unit(($x * $base-line-height) / $base-font-size);
26
- }
27
- @if $base-unit == em {
28
- @if map-has-key($font-size, $context) {
29
- $context-map-size: map-get($font-size, $context);
30
- @return output-unit(($x * $base-line-height) / $context-map-size);
31
- }
32
- @else {
33
- @warn "'#{$context}' not found in $font-size map.";
34
- }
35
- @if type-of($context) == 'number' {
36
- @if unit($context) == unit($base-font-size) {
37
- @return output-unit(($x * $base-line-height) / $context);
38
- }
39
- @else {
40
- @warn "The unit used for $context does not match the $base-font-size unit.";
41
- }
42
- }
43
- }
21
+ @return output-from-multiplier($x, $context);
44
22
  }
45
23
  @if type-of($x) == 'number' and not unitless($x) {
46
24
  @if unit($x) == unit($base-font-size) {
47
25
  @return convert-unit($x, $context);
48
26
  }
49
27
  @else {
50
- @warn "line-height() accepts only numbers or values with the same unit as $base-font-size.";
28
+ @error "line-height() only accepts values with the same unit as $base-font-size.";
51
29
  }
52
30
  }
31
+ @else {
32
+ @error "line-height() only accepts unitless numbers or values in px or pt.";
33
+ }
53
34
  }
54
35
 
55
- // Define line-height (with fallback).
36
+ // Define line-height (with fallback).
56
37
  // This is only necessary to use if you want to provide fallbacks when you are
57
38
  // using rem as $base-unit.
58
39
  //
59
40
  // @param number $x
60
41
  // Multiple of line height to be used or px/pt value to be converted.
61
42
  // @param number|string $context
62
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
43
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
63
44
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
64
45
  // value in the same unit as the $font-size map.
65
46
  @mixin line-height($x, $context: $base-font-size) {
66
47
  @if $base-unit == rem {
67
- @if type-of($x) == 'number' and unitless($x) {
68
- line-height: $x * $base-line-height;
69
- }
70
- @if type-of($x) == 'number' and not unitless($x) {
71
- line-height: $x;
48
+ @if $rem-fallback == true {
49
+ @if type-of($x) == 'number' and unitless($x) {
50
+ line-height: $x * $base-line-height;
51
+ }
52
+ @if type-of($x) == 'number' and not unitless($x) {
53
+ line-height: $x;
54
+ }
72
55
  }
73
56
  }
74
57
  line-height: line-height($x, $context);
75
- }
58
+ }
data/stylesheets/typey/_margin.scss CHANGED
@@ -1,4 +1,4 @@
1
- // Generate a value to be used as margin from either:
1
+ // Generate a value to be used as margin from either:
2
2
  // a) a multiple of $base-line-height
3
3
  // b) a static px or pt value
4
4
  //
@@ -10,12 +10,12 @@
10
10
  // @param number $x
11
11
  // Multiple of line height to be used or px/pt value to be converted.
12
12
  // @param number|string $context
13
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
13
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
14
14
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
15
15
  // value in the same unit as the $font-size map.
16
16
  //
17
17
  // @return number
18
- // The caculated height in $base-unit.
18
+ // The calculated height in $base-unit.
19
19
  @function margin($x, $context: $base-font-size) {
20
20
  @return line-height($x, $context);
21
21
  }
@@ -26,10 +26,10 @@
26
26
  //
27
27
  // @param number|list $x
28
28
  // Multiple of line height to be used or px/pt value to be converted.
29
- // Uses the same parameters as the CSS margin property:
29
+ // Uses the same parameters as the CSS margin property:
30
30
  // i.e. top right bottom left, 1 0 2 0.
31
31
  // @param number|string $context
32
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
32
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
33
33
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
34
34
  // value in the same unit as the $font-size map.
35
35
  @mixin margin($list, $context: $base-font-size) {
@@ -41,102 +41,112 @@
41
41
  $margin: $x * $base-line-height;
42
42
  $px-list: join($px-list, $margin, $separator: space);
43
43
  }
44
- @if type-of($x) == 'number' and not unitless($x) {
44
+ @if type-of($x) == 'number' and not unitless($x) {
45
45
  $px-list: join($px-list, $x, $separator: space);
46
- }
46
+ }
47
47
  }
48
48
  $margin: line-height($x, $context);
49
49
  $converted-list: join($converted-list, $margin, $separator: space);
50
50
  }
51
51
  @if $base-unit == rem {
52
- margin: $px-list;
52
+ @if $rem-fallback == true {
53
+ margin: $px-list;
54
+ }
53
55
  }
54
56
  margin: $converted-list;
55
57
  }
56
58
 
57
- // Define margin-top (with fallback).
59
+ // Define margin-top (with fallback).
58
60
  // This is only necessary to use if you want to provide fallbacks when you are
59
61
  // using rem as $base-unit.
60
62
  //
61
63
  // @param number $x
62
64
  // Multiple of line height to be used or px/pt value to be converted.
63
65
  // @param number|string $context
64
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
66
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
65
67
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
66
68
  // value in the same unit as the $font-size map.
67
69
  @mixin margin-top($x, $context: $base-font-size) {
68
70
  @if $base-unit == rem {
69
- @if type-of($x) == 'number' and unitless($x) {
70
- margin-top: $x * $base-line-height;
71
- }
72
- @if type-of($x) == 'number' and not unitless($x) {
73
- margin-top: $x;
71
+ @if $rem-fallback == true {
72
+ @if type-of($x) == 'number' and unitless($x) {
73
+ margin-top: $x * $base-line-height;
74
+ }
75
+ @if type-of($x) == 'number' and not unitless($x) {
76
+ margin-top: $x;
77
+ }
74
78
  }
75
79
  }
76
80
  margin-top: line-height($x, $context);
77
81
  }
78
82
 
79
- // Define margin-bottom (with fallback).
83
+ // Define margin-bottom (with fallback).
80
84
  // This is only necessary to use if you want to provide fallbacks when you are
81
85
  // using rem as $base-unit.
82
86
  //
83
87
  // @param number $x
84
88
  // Multiple of line height to be used or px/pt value to be converted.
85
89
  // @param number|string $context
86
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
90
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
87
91
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
88
92
  // value in the same unit as the $font-size map.
89
93
  @mixin margin-bottom($x, $context: $base-font-size) {
90
94
  @if $base-unit == rem {
91
- @if type-of($x) == 'number' and unitless($x) {
92
- margin-bottom: $x * $base-line-height;
93
- }
94
- @if type-of($x) == 'number' and not unitless($x) {
95
- margin-bottom: $x;
95
+ @if $rem-fallback == true {
96
+ @if type-of($x) == 'number' and unitless($x) {
97
+ margin-bottom: $x * $base-line-height;
98
+ }
99
+ @if type-of($x) == 'number' and not unitless($x) {
100
+ margin-bottom: $x;
101
+ }
96
102
  }
97
103
  }
98
104
  margin-bottom: line-height($x, $context);
99
105
  }
100
106
 
101
- // Define margin-left (with fallback).
107
+ // Define margin-left (with fallback).
102
108
  // This is only necessary to use if you want to provide fallbacks when you are
103
109
  // using rem as $base-unit.
104
110
  //
105
111
  // @param number $x
106
112
  // Multiple of line height to be used or px/pt value to be converted.
107
113
  // @param number|string $context
108
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
114
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
109
115
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
110
116
  // value in the same unit as the $font-size map.
111
117
  @mixin margin-left($x, $context: $base-font-size) {
112
118
  @if $base-unit == rem {
113
- @if type-of($x) == 'number' and unitless($x) {
114
- margin-left: $x * $base-line-height;
115
- }
116
- @if type-of($x) == 'number' and not unitless($x) {
117
- margin-left: $x;
119
+ @if $rem-fallback == true {
120
+ @if type-of($x) == 'number' and unitless($x) {
121
+ margin-left: $x * $base-line-height;
122
+ }
123
+ @if type-of($x) == 'number' and not unitless($x) {
124
+ margin-left: $x;
125
+ }
118
126
  }
119
127
  }
120
128
  margin-left: line-height($x, $context);
121
129
  }
122
130
 
123
- // Define margin-right (with fallback).
131
+ // Define margin-right (with fallback).
124
132
  // This is only necessary to use if you want to provide fallbacks when you are
125
133
  // using rem as $base-unit.
126
134
  //
127
135
  // @param number $x
128
136
  // Multiple of line height to be used or px/pt value to be converted.
129
137
  // @param number|string $context
130
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
138
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
131
139
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
132
140
  // value in the same unit as the $font-size map.
133
141
  @mixin margin-right($x, $context: $base-font-size) {
134
142
  @if $base-unit == rem {
135
- @if type-of($x) == 'number' and unitless($x) {
136
- margin-right: $x * $base-line-height;
137
- }
138
- @if type-of($x) == 'number' and not unitless($x) {
139
- margin-right: $x;
143
+ @if $rem-fallback == true {
144
+ @if type-of($x) == 'number' and unitless($x) {
145
+ margin-right: $x * $base-line-height;
146
+ }
147
+ @if type-of($x) == 'number' and not unitless($x) {
148
+ margin-right: $x;
149
+ }
140
150
  }
141
151
  }
142
152
  margin-right: line-height($x, $context);
data/stylesheets/typey/_padding.scss CHANGED
@@ -1,4 +1,4 @@
1
- // Generate a value to be used as padding from either:
1
+ // Generate a value to be used as padding from either:
2
2
  // a) a multiple of $base-line-height
3
3
  // b) a static px or pt value
4
4
  //
@@ -10,12 +10,12 @@
10
10
  // @param number $x
11
11
  // Multiple of line height to be used or px/pt value to be converted.
12
12
  // @param number|string $context
13
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
13
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
14
14
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
15
15
  // value in the same unit as the $font-size map.
16
16
  //
17
17
  // @return number
18
- // The calcuated height in $base-unit.
18
+ // The calculated height in $base-unit.
19
19
  @function padding($x, $context: $base-font-size) {
20
20
  @return line-height($x, $context);
21
21
  }
@@ -26,10 +26,10 @@
26
26
  //
27
27
  // @param number|list $x
28
28
  // Multiple of line height to be used or px/pt value to be converted.
29
- // Uses the same parameters as the CSS padding property:
29
+ // Uses the same parameters as the CSS padding property:
30
30
  // i.e. top right bottom left, 1 0 2 0.
31
31
  // @param number|string $context
32
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
32
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
33
33
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
34
34
  // value in the same unit as the $font-size map.
35
35
  @mixin padding($list, $context: $base-font-size) {
@@ -41,102 +41,112 @@
41
41
  $padding: $x * $base-line-height;
42
42
  $px-list: join($px-list, $padding, $separator: space);
43
43
  }
44
- @if type-of($x) == 'number' and not unitless($x) {
44
+ @if type-of($x) == 'number' and not unitless($x) {
45
45
  $px-list: join($px-list, $x, $separator: space);
46
- }
46
+ }
47
47
  }
48
48
  $padding: line-height($x, $context);
49
49
  $converted-list: join($converted-list, $padding, $separator: space);
50
50
  }
51
51
  @if $base-unit == rem {
52
- padding: $px-list;
52
+ @if $rem-fallback == true {
53
+ padding: $px-list;
54
+ }
53
55
  }
54
56
  padding: $converted-list;
55
57
  }
56
58
 
57
- // Define padding-top (with fallback).
59
+ // Define padding-top (with fallback).
58
60
  // This is only necessary to use if you want to provide fallbacks when you are
59
61
  // using rem as $base-unit.
60
62
  //
61
63
  // @param number $x
62
64
  // Multiple of line height to be used or px/pt value to be converted.
63
65
  // @param number|string $context
64
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
66
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
65
67
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
66
68
  // value in the same unit as the $font-size map.
67
69
  @mixin padding-top($x, $context: $base-font-size) {
68
70
  @if $base-unit == rem {
69
- @if type-of($x) == 'number' and unitless($x) {
70
- padding-top: $x * $base-line-height;
71
- }
72
- @if type-of($x) == 'number' and not unitless($x) {
73
- padding-top: $x;
71
+ @if $rem-fallback == true {
72
+ @if type-of($x) == 'number' and unitless($x) {
73
+ padding-top: $x * $base-line-height;
74
+ }
75
+ @if type-of($x) == 'number' and not unitless($x) {
76
+ padding-top: $x;
77
+ }
74
78
  }
75
79
  }
76
80
  padding-top: line-height($x, $context);
77
81
  }
78
82
 
79
- // Define padding-bottom (with fallback).
83
+ // Define padding-bottom (with fallback).
80
84
  // This is only necessary to use if you want to provide fallbacks when you are
81
85
  // using rem as $base-unit.
82
86
  //
83
87
  // @param number $x
84
88
  // Multiple of line height to be used or px/pt value to be converted.
85
89
  // @param number|string $context
86
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
90
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
87
91
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
88
92
  // value in the same unit as the $font-size map.
89
93
  @mixin padding-bottom($x, $context: $base-font-size) {
90
94
  @if $base-unit == rem {
91
- @if type-of($x) == 'number' and unitless($x) {
92
- padding-bottom: $x * $base-line-height;
93
- }
94
- @if type-of($x) == 'number' and not unitless($x) {
95
- padding-bottom: $x;
95
+ @if $rem-fallback == true {
96
+ @if type-of($x) == 'number' and unitless($x) {
97
+ padding-bottom: $x * $base-line-height;
98
+ }
99
+ @if type-of($x) == 'number' and not unitless($x) {
100
+ padding-bottom: $x;
101
+ }
96
102
  }
97
103
  }
98
104
  padding-bottom: line-height($x, $context);
99
105
  }
100
106
 
101
- // Define padding-left (with fallback).
107
+ // Define padding-left (with fallback).
102
108
  // This is only necessary to use if you want to provide fallbacks when you are
103
109
  // using rem as $base-unit.
104
110
  //
105
111
  // @param number $x
106
112
  // Multiple of line height to be used or px/pt value to be converted.
107
113
  // @param number|string $context
108
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
114
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
109
115
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
110
116
  // value in the same unit as the $font-size map.
111
117
  @mixin padding-left($x, $context: $base-font-size) {
112
118
  @if $base-unit == rem {
113
- @if type-of($x) == 'number' and unitless($x) {
114
- padding-left: $x * $base-line-height;
115
- }
116
- @if type-of($x) == 'number' and not unitless($x) {
117
- padding-left: $x;
119
+ @if $rem-fallback == true {
120
+ @if type-of($x) == 'number' and unitless($x) {
121
+ padding-left: $x * $base-line-height;
122
+ }
123
+ @if type-of($x) == 'number' and not unitless($x) {
124
+ padding-left: $x;
125
+ }
118
126
  }
119
127
  }
120
128
  padding-left: line-height($x, $context);
121
129
  }
122
130
 
123
- // Define padding-right (with fallback).
131
+ // Define padding-right (with fallback).
124
132
  // This is only necessary to use if you want to provide fallbacks when you are
125
133
  // using rem as $base-unit.
126
134
  //
127
135
  // @param number $x
128
136
  // Multiple of line height to be used or px/pt value to be converted.
129
137
  // @param number|string $context
130
- // (optional) Only used if em is the $base-unit. The value of the elements/parents
138
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
131
139
  // font-size if it differs from $base-font-size. Specified as a t-shirt size or
132
140
  // value in the same unit as the $font-size map.
133
141
  @mixin padding-right($x, $context: $base-font-size) {
134
142
  @if $base-unit == rem {
135
- @if type-of($x) == 'number' and unitless($x) {
136
- padding-right: $x * $base-line-height;
137
- }
138
- @if type-of($x) == 'number' and not unitless($x) {
139
- padding-right: $x;
143
+ @if $rem-fallback == true {
144
+ @if type-of($x) == 'number' and unitless($x) {
145
+ padding-right: $x * $base-line-height;
146
+ }
147
+ @if type-of($x) == 'number' and not unitless($x) {
148
+ padding-right: $x;
149
+ }
140
150
  }
141
151
  }
142
152
  padding-right: line-height($x, $context);
data/stylesheets/typey/_type-layout.scss ADDED
@@ -0,0 +1,49 @@
1
+ // Define a type layout (font-size and line-height).
2
+ //
3
+ // @param number|string $size
4
+ // A size from the $font-size map or a px/pt value.
5
+ // @param number $x
6
+ // Multiple of line height to be used or px/pt value to be converted.
7
+ // @param number|string $context
8
+ // (optional) Only used if em is the $base-unit. The value of the elements/parents
9
+ // font-size if it differs from $base-font-size. Specified as a t-shirt size or
10
+ // value in the same unit as the $font-size map.
11
+ @mixin type-layout($size, $x, $context: $size) {
12
+ @if $base-unit == rem {
13
+ @if $rem-fallback == true {
14
+ @if type-of($size) == 'string' {
15
+ $map-size: map-get($font-size, $size);
16
+ font-size: $map-size;
17
+ }
18
+ @if type-of($size) == 'number' and not unitless($size) {
19
+ $unit: unit($size);
20
+ @if $unit == px or $unit == pt {
21
+ font-size: $size;
22
+ }
23
+ @else {
24
+ @warn "font-size() only accepts values in px or pt.";
25
+ }
26
+ }
27
+ @if type-of($x) == 'number' and unitless($x) {
28
+ line-height: $x * $base-line-height;
29
+ }
30
+ @if type-of($x) == 'number' and not unitless($x) {
31
+ line-height: $x;
32
+ }
33
+ }
34
+ }
35
+ @if $base-unit == rem or $base-unit == px or $base-unit == pt {
36
+ font-size: font-size($size);
37
+ line-height: line-height($x);
38
+ }
39
+ @if $base-unit == em {
40
+ @if $size == $context {
41
+ font-size: font-size($size, $base-font-size);
42
+ line-height: line-height($x, $size);
43
+ }
44
+ @else {
45
+ font-size: font-size($size, $context);
46
+ line-height: line-height($x, $size);
47
+ }
48
+ }
49
+ }