@oslokommune/punkt-css 12.12.0 → 12.12.3

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 (54) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/README.md +1 -1
  3. package/dist/css/components/alert.css +13 -13
  4. package/dist/css/components/alert.min.css +1 -1
  5. package/dist/css/components/backlink.css +4 -4
  6. package/dist/css/components/backlink.min.css +1 -1
  7. package/dist/css/components/breadcrumbs.css +2 -2
  8. package/dist/css/components/breadcrumbs.min.css +1 -1
  9. package/dist/css/components/calendar.css +2 -2
  10. package/dist/css/components/calendar.min.css +1 -1
  11. package/dist/css/components/footer.css +12 -12
  12. package/dist/css/components/footer.min.css +1 -1
  13. package/dist/css/components/header.css +12 -12
  14. package/dist/css/components/header.min.css +1 -1
  15. package/dist/css/components/inputwrapper.css +14 -14
  16. package/dist/css/components/inputwrapper.min.css +1 -1
  17. package/dist/css/components/linkcard.css +4 -4
  18. package/dist/css/components/linkcard.min.css +1 -1
  19. package/dist/css/components/loader.css +6 -6
  20. package/dist/css/components/loader.min.css +1 -1
  21. package/dist/css/components/messagebox.css +10 -10
  22. package/dist/css/components/messagebox.min.css +1 -1
  23. package/dist/css/components/searchinput.css +4 -4
  24. package/dist/css/components/searchinput.min.css +1 -1
  25. package/dist/css/components/tabs.css +5 -5
  26. package/dist/css/components/tabs.min.css +1 -1
  27. package/dist/css/components/tag.css +11 -11
  28. package/dist/css/components/tag.min.css +1 -1
  29. package/dist/css/components/textinput.css +22 -14
  30. package/dist/css/components/textinput.min.css +1 -1
  31. package/dist/css/pkt-base.css +175 -175
  32. package/dist/css/pkt-base.min.css +1 -1
  33. package/dist/css/pkt-components.css +121 -113
  34. package/dist/css/pkt-components.min.css +1 -1
  35. package/dist/css/pkt-elements.css +69 -67
  36. package/dist/css/pkt-elements.min.css +1 -1
  37. package/dist/css/pkt.css +343 -341
  38. package/dist/css/pkt.min.css +1 -1
  39. package/dist/scss/abstracts/functions/_index.scss +9 -9
  40. package/dist/scss/abstracts/mixins/_typography.scss +9 -12
  41. package/dist/scss/abstracts/variables/_colors.scss +84 -81
  42. package/dist/scss/components/_alert.scss +6 -4
  43. package/dist/scss/components/_backlink.scss +2 -2
  44. package/dist/scss/components/_footer.scss +3 -3
  45. package/dist/scss/components/_inputwrapper.scss +4 -4
  46. package/dist/scss/components/_messagebox.scss +2 -2
  47. package/dist/scss/components/_stepper.scss +5 -5
  48. package/dist/scss/components/_tabs.scss +2 -1
  49. package/dist/scss/components/_tag.scss +245 -250
  50. package/dist/scss/elements/_button.scss +9 -7
  51. package/dist/scss/elements/_checkbox-radio.scss +24 -41
  52. package/dist/scss/elements/_input.scss +26 -14
  53. package/dist/scss/elements/_section.scss +10 -12
  54. package/package.json +2 -2
package/dist/scss/components/_tag.scss CHANGED
@@ -1,4 +1,4 @@
1
- /*
1
+ /*
2
2
  * Tag element
3
3
  */
4
4
 
@@ -7,312 +7,307 @@
7
7
  @use '../abstracts/mixins/typography';
8
8
 
9
9
  .pkt-tag {
10
- --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
11
- --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
12
- --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
13
- --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
10
+ --pkt-color-tag-text-active: var(--pkt-color-brand-warm-blue-1000);
11
+ --pkt-color-tag-text-focus: var(--pkt-color-brand-warm-blue-1000);
12
+ --pkt-color-tag-text-hover: var(--pkt-color-brand-warm-blue-1000);
13
+ --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
14
14
  }
15
15
 
16
16
  [data-mode='dark'] .pkt-tag {
17
- --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
18
- --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
19
- --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
20
- --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
17
+ --pkt-color-tag-text-active: var(--pkt-color-brand-dark-blue-1000);
18
+ --pkt-color-tag-text-focus: var(--pkt-color-brand-dark-blue-1000);
19
+ --pkt-color-tag-text-hover: var(--pkt-color-brand-dark-blue-1000);
20
+ --pkt-color-tag-text-normal: var(--pkt-color-brand-dark-blue-1000);
21
21
  }
22
22
 
23
23
  .pkt-tag {
24
- background: var(--pkt-color-surface-default-light-blue);
25
- padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
26
- display: inline-flex;
27
- align-items: center;
28
- height: 1.875rem;
29
- column-gap: 0;
30
- color: var(--pkt-color-tag-text-normal);
24
+ background: var(--pkt-color-surface-default-light-blue);
25
+ padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
26
+ display: inline-flex;
27
+ align-items: center;
28
+ height: 1.875rem;
29
+ column-gap: 0;
30
+ color: var(--pkt-color-tag-text-normal);
31
+
32
+ @include typography.get-text('pkt-txt-14-medium');
33
+
34
+ &.pkt-btn:hover,
35
+ &.pkt-tag--hover {
36
+ background-color: var(--pkt-color-surface-strong-blue);
37
+ color: var(--pkt-color-tag-text-hover);
38
+ text-decoration: underline;
39
+ border-color: transparent;
40
+
41
+ > svg {
42
+ --fg-color: var(--pkt-color-tag-text-hover);
43
+ }
44
+ }
31
45
 
32
- @include typography.get-text('pkt-txt-14-medium');
46
+ &.pkt-btn:focus,
47
+ &.pkt-tag--focus {
48
+ background-color: var(--pkt-color-surface-strong-blue);
49
+ border-color: var(--pkt-color-text-action-active);
50
+ outline: 4px solid var(--pkt-color-border-states-focus);
51
+ color: var(--pkt-color-tag-text-focus);
52
+
53
+ > svg {
54
+ --fg-color: var(--pkt-color-tag-text-focus);
55
+ }
56
+ }
57
+
58
+ &.pkt-btn:active,
59
+ &.pkt-tag--active,
60
+ &.pkt-tag--active:hover {
61
+ background-color: var(--pkt-color-surface-strong-blue);
62
+ color: var(--pkt-color-tag-text-active);
63
+
64
+ > svg {
65
+ --fg-color: var(--pkt-color-tag-text-active);
66
+ }
67
+ }
68
+
69
+ &__icon {
70
+ width: 16px;
71
+ height: 16px;
72
+ margin-right: map.get(variables.$spacing, 'size-8');
73
+ }
74
+
75
+ &__close-btn {
76
+ width: 16px;
77
+ height: 16px;
78
+ margin-left: map.get(variables.$spacing, 'size-8');
79
+ }
80
+
81
+ // Modifiers
82
+ // Skins
83
+ &--green {
84
+ background: var(--pkt-color-surface-strong-light-green);
33
85
 
34
86
  &.pkt-btn:hover,
35
87
  &.pkt-tag--hover {
36
- background-color: var(--pkt-color-surface-strong-blue);
37
- color: var(--pkt-color-tag-text-hover);
38
- text-decoration: underline;
39
- border-color: transparent;
40
-
41
- >svg {
42
- --fg-color: var(--pkt-color-tag-text-hover);
43
- }
88
+ background-color: var(--pkt-color-surface-strong-green);
89
+ color: var(--pkt-color-tag-text-hover);
90
+
91
+ > svg {
92
+ --fg-color: var(--pkt-color-tag-text-hover);
93
+ }
44
94
  }
45
95
 
46
96
  &.pkt-btn:focus,
47
97
  &.pkt-tag--focus {
48
- background-color: var(--pkt-color-surface-strong-blue);
49
- border-color: var(--pkt-color-text-action-active);
50
- outline: 4px solid var(--pkt-color-border-states-focus);
51
- color: var(--pkt-color-tag-text-focus);
52
-
53
- >svg {
54
- --fg-color: var(--pkt-color-tag-text-focus);
55
- }
98
+ background-color: var(--pkt-color-surface-strong-green);
99
+ color: var(--pkt-color-tag-text-focus);
100
+
101
+ > svg {
102
+ --fg-color: var(--pkt-color-tag-text-focus);
103
+ }
56
104
  }
57
105
 
58
106
  &.pkt-btn:active,
59
- &.pkt-tag--active,
60
- &.pkt-tag--active:hover {
61
- background-color: var(--pkt-color-surface-strong-blue);
62
- color: var(--pkt-color-tag-text-active);
63
-
64
- >svg {
65
- --fg-color: var(--pkt-color-tag-text-active);
66
- }
67
- }
107
+ &.pkt-tag--active {
108
+ background-color: var(--pkt-color-surface-strong-green);
109
+ color: var(--pkt-color-tag-text-active);
68
110
 
69
- &__icon {
70
- width: 16px;
71
- height: 16px;
72
- margin-right: map.get(variables.$spacing, 'size-8');
111
+ > svg {
112
+ --fg-color: var(--pkt-color-tag-text-active);
113
+ }
73
114
  }
115
+ }
74
116
 
75
- &__close-btn {
76
- width: 16px;
77
- height: 16px;
78
- margin-left: map.get(variables.$spacing, 'size-8');
79
- }
117
+ &--yellow {
118
+ background: var(--pkt-color-surface-default-yellow);
80
119
 
81
- // Modifiers
82
- // Skins
83
- &--green {
84
- background: var(--pkt-color-surface-strong-light-green);
85
-
86
- &.pkt-btn:hover,
87
- &.pkt-tag--hover {
88
- background-color: var(--pkt-color-surface-strong-green);
89
- color: var(--pkt-color-tag-text-hover);
90
-
91
- >svg {
92
- --fg-color: var(--pkt-color-tag-text-hover);
93
- }
94
-
95
- }
96
-
97
- &.pkt-btn:focus,
98
- &.pkt-tag--focus {
99
- background-color: var(--pkt-color-surface-strong-green);
100
- color: var(--pkt-color-tag-text-focus);
101
-
102
- >svg {
103
- --fg-color: var(--pkt-color-tag-text-focus);
104
- }
105
- }
106
-
107
- &.pkt-btn:active,
108
- &.pkt-tag--active {
109
- background-color: var(--pkt-color-surface-strong-green);
110
- color: var(--pkt-color-tag-text-active);
111
-
112
- >svg {
113
- --fg-color: var(--pkt-color-tag-text-active);
114
- }
115
- }
116
- }
120
+ &.pkt-btn:hover,
121
+ &.pkt-tag--hover {
122
+ background-color: var(--pkt-color-surface-strong-yellow);
123
+ color: var(--pkt-color-tag-text-hover);
117
124
 
125
+ > svg {
126
+ --fg-color: var(--pkt-color-tag-text-hover);
127
+ }
128
+ }
118
129
 
119
- &--yellow {
120
- background: var(--pkt-color-surface-default-yellow);
130
+ &.pkt-btn:focus,
131
+ &.pkt-tag--focus {
132
+ background-color: var(--pkt-color-surface-strong-yellow);
133
+ color: var(--pkt-color-tag-text-focus);
121
134
 
122
- &.pkt-btn:hover,
123
- &.pkt-tag--hover {
124
- background-color: var(--pkt-color-surface-strong-yellow);
125
- color: var(--pkt-color-tag-text-hover);
135
+ > svg {
136
+ --fg-color: var(--pkt-color-tag-text-focus);
137
+ }
138
+ }
126
139
 
127
- >svg {
128
- --fg-color: var(--pkt-color-tag-text-hover);
129
- }
130
- }
140
+ &.pkt-btn:active,
141
+ &.pkt-tag--active {
142
+ background-color: var(--pkt-color-surface-strong-yellow);
143
+ color: var(--pkt-color-tag-text-active);
131
144
 
132
- &.pkt-btn:focus,
133
- &.pkt-tag--focus {
134
- background-color: var(--pkt-color-surface-strong-yellow);
135
- color: var(--pkt-color-tag-text-focus);
145
+ > svg {
146
+ --fg-color: var(--pkt-color-tag-text-active);
147
+ }
148
+ }
149
+ }
136
150
 
137
- >svg {
138
- --fg-color: var(--pkt-color-tag-text-focus);
139
- }
140
- }
151
+ &--red {
152
+ background: var(--pkt-color-surface-default-red);
141
153
 
142
- &.pkt-btn:active,
143
- &.pkt-tag--active {
144
- background-color: var(--pkt-color-surface-strong-yellow);
145
- color: var(--pkt-color-tag-text-active);
154
+ &.pkt-btn:hover,
155
+ &.pkt-tag--hover {
156
+ background-color: var(--pkt-color-surface-strong-red);
157
+ color: var(--pkt-color-tag-text-hover);
146
158
 
147
- >svg {
148
- --fg-color: var(--pkt-color-tag-text-active);
149
- }
150
- }
159
+ > svg {
160
+ --fg-color: var(--pkt-color-tag-text-hover);
161
+ }
151
162
  }
152
163
 
153
- &--red {
154
- background: var(--pkt-color-surface-default-red);
155
-
156
- &.pkt-btn:hover,
157
- &.pkt-tag--hover {
158
- background-color: var(--pkt-color-surface-strong-red);
159
- color: var(--pkt-color-tag-text-hover);
160
-
161
- >svg {
162
- --fg-color: var(--pkt-color-tag-text-hover);
163
- }
164
- }
165
-
166
- &.pkt-btn:focus,
167
- &.pkt-tag--focus {
168
- background-color: var(--pkt-color-surface-strong-red);
169
- color: var(--pkt-color-tag-text-focus);
170
-
171
- >svg {
172
- --fg-color: var(--pkt-color-tag-text-focus);
173
- }
174
- }
175
-
176
- &.pkt-btn:active,
177
- &.pkt-tag--active {
178
- background-color: var(--pkt-color-surface-strong-red);
179
- color: var(--pkt-color-tag-text-active);
180
-
181
- >svg {
182
- --fg-color: var(--pkt-color-tag-text-active);
183
- }
184
- }
185
- }
164
+ &.pkt-btn:focus,
165
+ &.pkt-tag--focus {
166
+ background-color: var(--pkt-color-surface-strong-red);
167
+ color: var(--pkt-color-tag-text-focus);
186
168
 
187
- &--beige {
188
- background: var(--pkt-color-surface-default-light-beige);
189
-
190
- &.pkt-btn:hover,
191
- &.pkt-tag--hover {
192
- background-color: var(--pkt-color-surface-strong-beige);
193
- color: var(--pkt-color-tag-text-hover);
194
-
195
- >svg {
196
- --fg-color: var(--pkt-color-tag-text-hover);
197
- }
198
- }
199
-
200
- &.pkt-btn:focus,
201
- &.pkt-tag--focus {
202
- background-color: var(--pkt-color-surface-strong-beige);
203
- color: var(--pkt-color-tag-text-focus);
204
-
205
- >svg {
206
- --fg-color: var(--pkt-color-tag-text-focus);
207
- }
208
- }
209
-
210
- &.pkt-btn:active,
211
- &.pkt-tag--active {
212
- background-color: var(--pkt-color-surface-strong-beige);
213
- color: var(--pkt-color-tag-text-active);
214
-
215
- >svg {
216
- --fg-color: var(--pkt-color-tag-text-active);
217
- }
218
- }
169
+ > svg {
170
+ --fg-color: var(--pkt-color-tag-text-focus);
171
+ }
219
172
  }
220
173
 
221
- &--gray,
222
- &--grey {
223
- background: var(--pkt-color-surface-default-gray);
224
-
225
- &.pkt-btn:hover,
226
- &.pkt-tag--hover {
227
- background-color: var(--pkt-color-surface-strong-gray);
228
- color: var(--pkt-color-tag-text-hover);
174
+ &.pkt-btn:active,
175
+ &.pkt-tag--active {
176
+ background-color: var(--pkt-color-surface-strong-red);
177
+ color: var(--pkt-color-tag-text-active);
229
178
 
230
- >svg {
231
- --fg-color: var(--pkt-color-tag-text-hover);
232
- }
233
- }
179
+ > svg {
180
+ --fg-color: var(--pkt-color-tag-text-active);
181
+ }
182
+ }
183
+ }
234
184
 
235
- &.pkt-btn:focus,
236
- &.pkt-tag--focus {
237
- background-color: var(--pkt-color-surface-strong-gray);
238
- color: var(--pkt-color-tag-text-active);
185
+ &--beige {
186
+ background: var(--pkt-color-surface-default-light-beige);
239
187
 
240
- >svg {
241
- --fg-color: var(--pkt-color-tag-text-active);
242
- }
243
- }
188
+ &.pkt-btn:hover,
189
+ &.pkt-tag--hover {
190
+ background-color: var(--pkt-color-surface-strong-beige);
191
+ color: var(--pkt-color-tag-text-hover);
244
192
 
245
- &.pkt-btn:active,
246
- &.pkt-tag--active {
247
- background-color: var(--pkt-color-surface-strong-gray);
248
- color: var(--pkt-color-tag-text-active);
193
+ > svg {
194
+ --fg-color: var(--pkt-color-tag-text-hover);
195
+ }
196
+ }
249
197
 
250
- >svg {
251
- --fg-color: var(--pkt-color-tag-text-active);
252
- }
253
- }
198
+ &.pkt-btn:focus,
199
+ &.pkt-tag--focus {
200
+ background-color: var(--pkt-color-surface-strong-beige);
201
+ color: var(--pkt-color-tag-text-focus);
254
202
 
203
+ > svg {
204
+ --fg-color: var(--pkt-color-tag-text-focus);
205
+ }
255
206
  }
256
207
 
208
+ &.pkt-btn:active,
209
+ &.pkt-tag--active {
210
+ background-color: var(--pkt-color-surface-strong-beige);
211
+ color: var(--pkt-color-tag-text-active);
257
212
 
258
- &--blue-light {
259
- background: var(--pkt-color-surface-subtle-light-blue);
213
+ > svg {
214
+ --fg-color: var(--pkt-color-tag-text-active);
215
+ }
216
+ }
217
+ }
260
218
 
261
- &.pkt-btn:hover,
262
- &.pkt-tag--hover {
263
- background-color: var(--pkt-color-surface-strong-blue);
264
- color: var(--pkt-color-tag-text-hover);
219
+ &--gray,
220
+ &--grey {
221
+ background: var(--pkt-color-surface-default-gray);
265
222
 
266
- >svg {
267
- --fg-color: var(--pkt-color-tag-text-hover);
268
- }
269
- }
223
+ &.pkt-btn:hover,
224
+ &.pkt-tag--hover {
225
+ background-color: var(--pkt-color-surface-strong-gray);
226
+ color: var(--pkt-color-tag-text-hover);
270
227
 
271
- &.pkt-btn:focus,
272
- &.pkt-tag--focus {
273
- background-color: var(--pkt-color-surface-strong-blue);
274
- color: var(--pkt-color-tag-text-focus);
228
+ > svg {
229
+ --fg-color: var(--pkt-color-tag-text-hover);
230
+ }
231
+ }
275
232
 
276
- >svg {
277
- --fg-color: var(--pkt-color-tag-text-focus);
278
- }
279
- }
233
+ &.pkt-btn:focus,
234
+ &.pkt-tag--focus {
235
+ background-color: var(--pkt-color-surface-strong-gray);
236
+ color: var(--pkt-color-tag-text-active);
280
237
 
281
- &.pkt-btn:active,
282
- &.pkt-tag--active {
283
- background-color: var(--pkt-color-surface-strong-blue);
284
- color: var(--pkt-color-tag-text-active);
238
+ > svg {
239
+ --fg-color: var(--pkt-color-tag-text-active);
240
+ }
241
+ }
285
242
 
286
- >svg {
287
- --fg-color: var(--pkt-color-tag-text-active);
288
- }
289
- }
243
+ &.pkt-btn:active,
244
+ &.pkt-tag--active {
245
+ background-color: var(--pkt-color-surface-strong-gray);
246
+ color: var(--pkt-color-tag-text-active);
290
247
 
248
+ > svg {
249
+ --fg-color: var(--pkt-color-tag-text-active);
250
+ }
291
251
  }
252
+ }
292
253
 
293
- // Sizes
294
- &--small {
295
- padding: map.get(variables.$spacing, 'size-4');
296
- height: 1.375rem;
297
- }
254
+ &--blue-light {
255
+ background: var(--pkt-color-surface-subtle-light-blue);
298
256
 
299
- &--medium {
300
- padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
301
- height: 1.875rem;
302
- }
257
+ &.pkt-btn:hover,
258
+ &.pkt-tag--hover {
259
+ background-color: var(--pkt-color-surface-strong-blue);
260
+ color: var(--pkt-color-tag-text-hover);
303
261
 
304
- &--large {
305
- @include typography.get-text('pkt-txt-18-medium');
306
- padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
307
- height: 2.25rem;
262
+ > svg {
263
+ --fg-color: var(--pkt-color-tag-text-hover);
264
+ }
308
265
  }
309
266
 
310
- // Typography
311
- &--normal-text {
312
- @include typography.get-text('pkt-txt-14-medium');
267
+ &.pkt-btn:focus,
268
+ &.pkt-tag--focus {
269
+ background-color: var(--pkt-color-surface-strong-blue);
270
+ color: var(--pkt-color-tag-text-focus);
271
+
272
+ > svg {
273
+ --fg-color: var(--pkt-color-tag-text-focus);
274
+ }
313
275
  }
314
276
 
315
- &--thin-text {
316
- @include typography.get-text('pkt-txt-14-light');
277
+ &.pkt-btn:active,
278
+ &.pkt-tag--active {
279
+ background-color: var(--pkt-color-surface-strong-blue);
280
+ color: var(--pkt-color-tag-text-active);
281
+
282
+ > svg {
283
+ --fg-color: var(--pkt-color-tag-text-active);
284
+ }
317
285
  }
286
+ }
287
+
288
+ // Sizes
289
+ &--small {
290
+ padding: map.get(variables.$spacing, 'size-4');
291
+ height: 1.375rem;
292
+ }
293
+
294
+ &--medium {
295
+ padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
296
+ height: 1.875rem;
297
+ }
298
+
299
+ &--large {
300
+ padding: map.get(variables.$spacing, 'size-4') map.get(variables.$spacing, 'size-8');
301
+ height: 2.25rem;
302
+ @include typography.get-text('pkt-txt-18-medium');
303
+ }
304
+
305
+ // Typography
306
+ &--normal-text {
307
+ @include typography.get-text('pkt-txt-14-medium');
308
+ }
309
+
310
+ &--thin-text {
311
+ @include typography.get-text('pkt-txt-14-light');
312
+ }
318
313
  }
package/dist/scss/elements/_button.scss CHANGED
@@ -179,11 +179,12 @@ $-skins: (
179
179
 
180
180
  @mixin -size($name, $o) {
181
181
  @if $name ==medium {
182
- @include typography.get-text(map.get($o, 'text-class'));
183
- height: map.get($o, 'height');
184
- line-height: map.get($o, 'line-height');
185
- padding: map.get($o, 'padding');
186
-
182
+ & {
183
+ height: map.get($o, 'height');
184
+ padding: map.get($o, 'padding');
185
+ line-height: map.get($o, 'line-height');
186
+ @include typography.get-text(map.get($o, 'text-class'));
187
+ }
187
188
  &__icon,
188
189
  &__icon .pkt-icon {
189
190
  height: map.get($o, 'icon-size');
@@ -219,10 +220,11 @@ $-skins: (
219
220
  }
220
221
  } @else {
221
222
  &--#{$name} {
222
- @include typography.get-text(map.get($o, 'text-class'));
223
223
  height: map.get($o, 'height');
224
- line-height: map.get($o, 'line-height');
225
224
  padding: map.get($o, 'padding');
225
+ line-height: map.get($o, 'line-height');
226
+
227
+ @include typography.get-text(map.get($o, 'text-class'));
226
228
  }
227
229
 
228
230
  &--#{$name} &__icon,