|
72 | 72 | @return $tracking / ($font-size * 16) * 1em; |
73 | 73 | } |
74 | 74 |
|
75 | | -@function pxToRem($px) { |
| 75 | +@function px-to-rem($px) { |
76 | 76 | @return $px / 16px * 1rem; |
77 | 77 | } |
78 | 78 |
|
@@ -114,104 +114,104 @@ $styles: set-styles_( |
114 | 114 | $base, |
115 | 115 | ( |
116 | 116 | headline1: ( |
117 | | - font-size: pxToRem(96px), |
118 | | - line-height: pxToRem(96px), |
| 117 | + font-size: px-to-rem(96px), |
| 118 | + line-height: px-to-rem(96px), |
119 | 119 | font-weight: map.get($font-weight-values, light), |
120 | 120 | letter-spacing: get-letter-spacing_(-1.5, 6), |
121 | 121 | text-decoration: inherit, |
122 | 122 | text-transform: inherit, |
123 | 123 | ), |
124 | 124 | headline2: ( |
125 | | - font-size: pxToRem(60px), |
126 | | - line-height: pxToRem(60px), |
| 125 | + font-size: px-to-rem(60px), |
| 126 | + line-height: px-to-rem(60px), |
127 | 127 | font-weight: map.get($font-weight-values, light), |
128 | 128 | letter-spacing: get-letter-spacing_(-0.5, 3.75), |
129 | 129 | text-decoration: inherit, |
130 | 130 | text-transform: inherit, |
131 | 131 | ), |
132 | 132 | headline3: ( |
133 | | - font-size: pxToRem(48px), |
134 | | - line-height: pxToRem(50px), |
| 133 | + font-size: px-to-rem(48px), |
| 134 | + line-height: px-to-rem(50px), |
135 | 135 | font-weight: map.get($font-weight-values, regular), |
136 | 136 | letter-spacing: normal, |
137 | 137 | text-decoration: inherit, |
138 | 138 | text-transform: inherit, |
139 | 139 | ), |
140 | 140 | headline4: ( |
141 | | - font-size: pxToRem(34px), |
142 | | - line-height: pxToRem(40px), |
| 141 | + font-size: px-to-rem(34px), |
| 142 | + line-height: px-to-rem(40px), |
143 | 143 | font-weight: map.get($font-weight-values, regular), |
144 | 144 | letter-spacing: get-letter-spacing_(0.25, 2.125), |
145 | 145 | text-decoration: inherit, |
146 | 146 | text-transform: inherit, |
147 | 147 | ), |
148 | 148 | headline5: ( |
149 | | - font-size: pxToRem(24px), |
150 | | - line-height: pxToRem(32px), |
| 149 | + font-size: px-to-rem(24px), |
| 150 | + line-height: px-to-rem(32px), |
151 | 151 | font-weight: map.get($font-weight-values, regular), |
152 | 152 | letter-spacing: normal, |
153 | 153 | text-decoration: inherit, |
154 | 154 | text-transform: inherit, |
155 | 155 | ), |
156 | 156 | headline6: ( |
157 | | - font-size: pxToRem(20px), |
158 | | - line-height: pxToRem(32px), |
| 157 | + font-size: px-to-rem(20px), |
| 158 | + line-height: px-to-rem(32px), |
159 | 159 | font-weight: map.get($font-weight-values, medium), |
160 | 160 | letter-spacing: get-letter-spacing_(0.25, 1.25), |
161 | 161 | text-decoration: inherit, |
162 | 162 | text-transform: inherit, |
163 | 163 | ), |
164 | 164 | subtitle1: ( |
165 | | - font-size: pxToRem(16px), |
166 | | - line-height: pxToRem(28px), |
| 165 | + font-size: px-to-rem(16px), |
| 166 | + line-height: px-to-rem(28px), |
167 | 167 | font-weight: map.get($font-weight-values, regular), |
168 | 168 | letter-spacing: get-letter-spacing_(0.15, 1), |
169 | 169 | text-decoration: inherit, |
170 | 170 | text-transform: inherit, |
171 | 171 | ), |
172 | 172 | subtitle2: ( |
173 | | - font-size: pxToRem(14px), |
174 | | - line-height: pxToRem(22px), |
| 173 | + font-size: px-to-rem(14px), |
| 174 | + line-height: px-to-rem(22px), |
175 | 175 | font-weight: map.get($font-weight-values, medium), |
176 | 176 | letter-spacing: get-letter-spacing_(0.1, 0.875), |
177 | 177 | text-decoration: inherit, |
178 | 178 | text-transform: inherit, |
179 | 179 | ), |
180 | 180 | body1: ( |
181 | | - font-size: pxToRem(16px), |
182 | | - line-height: pxToRem(24px), |
| 181 | + font-size: px-to-rem(16px), |
| 182 | + line-height: px-to-rem(24px), |
183 | 183 | font-weight: map.get($font-weight-values, regular), |
184 | 184 | letter-spacing: get-letter-spacing_(0.5, 1), |
185 | 185 | text-decoration: inherit, |
186 | 186 | text-transform: inherit, |
187 | 187 | ), |
188 | 188 | body2: ( |
189 | | - font-size: pxToRem(14px), |
190 | | - line-height: pxToRem(20px), |
| 189 | + font-size: px-to-rem(14px), |
| 190 | + line-height: px-to-rem(20px), |
191 | 191 | font-weight: map.get($font-weight-values, regular), |
192 | 192 | letter-spacing: get-letter-spacing_(0.25, 0.875), |
193 | 193 | text-decoration: inherit, |
194 | 194 | text-transform: inherit, |
195 | 195 | ), |
196 | 196 | caption: ( |
197 | | - font-size: pxToRem(12px), |
198 | | - line-height: pxToRem(20px), |
| 197 | + font-size: px-to-rem(12px), |
| 198 | + line-height: px-to-rem(20px), |
199 | 199 | font-weight: map.get($font-weight-values, regular), |
200 | 200 | letter-spacing: get-letter-spacing_(0.4, 0.75), |
201 | 201 | text-decoration: inherit, |
202 | 202 | text-transform: inherit, |
203 | 203 | ), |
204 | 204 | button: ( |
205 | | - font-size: pxToRem(14px), |
206 | | - line-height: pxToRem(36px), |
| 205 | + font-size: px-to-rem(14px), |
| 206 | + line-height: px-to-rem(36px), |
207 | 207 | font-weight: map.get($font-weight-values, medium), |
208 | 208 | letter-spacing: get-letter-spacing_(1.25, 0.875), |
209 | 209 | text-decoration: none, |
210 | 210 | text-transform: uppercase, |
211 | 211 | ), |
212 | 212 | overline: ( |
213 | | - font-size: pxToRem(12px), |
214 | | - line-height: pxToRem(32px), |
| 213 | + font-size: px-to-rem(12px), |
| 214 | + line-height: px-to-rem(32px), |
215 | 215 | font-weight: map.get($font-weight-values, medium), |
216 | 216 | letter-spacing: get-letter-spacing_(2, 0.75), |
217 | 217 | text-decoration: none, |
|
0 commit comments