@oslokommune/punkt-css 6.0.2 → 6.0.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.
- package/CHANGELOG.md +18 -0
- package/dist/css/pkt-elements.css +70 -1
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +70 -1
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/elements/_button.scss +118 -40
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* Button element!
|
|
2
2
|
*
|
|
3
3
|
* Size: small, medium, large
|
|
4
|
-
* Skin: primary, secondary, tertiary
|
|
4
|
+
* Skin: primary, secondary, tertiary
|
|
5
5
|
* State: normal, focus, hover, active, disabled
|
|
6
6
|
* Variant: label-only, icon-left, icon-right, icon-only
|
|
7
7
|
* Background: light, dark
|
|
@@ -15,24 +15,21 @@
|
|
|
15
15
|
|
|
16
16
|
$-module-name: 'pkt-btn';
|
|
17
17
|
$-sizes: (
|
|
18
|
-
'small': (
|
|
19
|
-
'text-class': 'pkt-txt-14-medium',
|
|
18
|
+
'small': ('text-class': 'pkt-txt-14-medium',
|
|
20
19
|
'padding': 0 0.5rem,
|
|
21
20
|
'padding-icon-only': 0 0.5625rem,
|
|
22
21
|
'icon-size': 1.25rem,
|
|
23
22
|
'height': 2.625rem,
|
|
24
23
|
'line-height': 1.1,
|
|
25
24
|
),
|
|
26
|
-
'medium': (
|
|
27
|
-
'text-class': 'pkt-txt-18-medium',
|
|
25
|
+
'medium': ('text-class': 'pkt-txt-18-medium',
|
|
28
26
|
'padding': 0 1rem,
|
|
29
27
|
'padding-icon-only': 0 0.625rem,
|
|
30
28
|
'icon-size': 1.5rem,
|
|
31
29
|
'height': 3rem,
|
|
32
30
|
'line-height': 1.1,
|
|
33
31
|
),
|
|
34
|
-
'large': (
|
|
35
|
-
'text-class': 'pkt-txt-24-medium',
|
|
32
|
+
'large': ('text-class': 'pkt-txt-24-medium',
|
|
36
33
|
'padding': 0 1rem,
|
|
37
34
|
'padding-icon-only': 0 0.875rem,
|
|
38
35
|
'icon-size': 2rem,
|
|
@@ -40,10 +37,9 @@ $-sizes: (
|
|
|
40
37
|
'line-height': 1.1,
|
|
41
38
|
),
|
|
42
39
|
);
|
|
40
|
+
|
|
43
41
|
$-skins: (
|
|
44
|
-
'primary': (
|
|
45
|
-
'light': (
|
|
46
|
-
'link-bg': --color-blue-dark,
|
|
42
|
+
'primary': ('light': ('link-bg': --color-blue-dark,
|
|
47
43
|
'link-bc': --color-blue-dark,
|
|
48
44
|
'link-txt': --color-white,
|
|
49
45
|
'focus-bg': --color-active,
|
|
@@ -60,8 +56,7 @@ $-skins: (
|
|
|
60
56
|
'disabled-bc': --color-gray,
|
|
61
57
|
'disabled-txt': --color-disabled,
|
|
62
58
|
),
|
|
63
|
-
'dark': (
|
|
64
|
-
'link-bg': --color-blue-light,
|
|
59
|
+
'dark': ('link-bg': --color-blue-light,
|
|
65
60
|
'link-bc': --color-blue-light,
|
|
66
61
|
'link-txt': --color-blue-dark,
|
|
67
62
|
'focus-bg': --color-blue,
|
|
@@ -79,9 +74,7 @@ $-skins: (
|
|
|
79
74
|
'disabled-txt': --color-disabled,
|
|
80
75
|
),
|
|
81
76
|
),
|
|
82
|
-
'secondary': (
|
|
83
|
-
'light': (
|
|
84
|
-
'link-bg': --color-transparent,
|
|
77
|
+
'secondary': ('light': ('link-bg': --color-transparent,
|
|
85
78
|
'link-bc': --color-blue-dark,
|
|
86
79
|
'link-txt': --color-blue-dark,
|
|
87
80
|
'focus-bg': --color-transparent,
|
|
@@ -98,8 +91,7 @@ $-skins: (
|
|
|
98
91
|
'disabled-bc': --color-gray,
|
|
99
92
|
'disabled-txt': --color-disabled,
|
|
100
93
|
),
|
|
101
|
-
'dark': (
|
|
102
|
-
'link-bg': --color-transparent,
|
|
94
|
+
'dark': ('link-bg': --color-transparent,
|
|
103
95
|
'link-bc': --color-white,
|
|
104
96
|
'link-txt': --color-white,
|
|
105
97
|
'focus-bg': --color-transparent,
|
|
@@ -117,9 +109,7 @@ $-skins: (
|
|
|
117
109
|
'disabled-txt': --color-disabled,
|
|
118
110
|
),
|
|
119
111
|
),
|
|
120
|
-
'tertiary': (
|
|
121
|
-
'light': (
|
|
122
|
-
'link-bg': --color-transparent,
|
|
112
|
+
'tertiary': ('light': ('link-bg': --color-transparent,
|
|
123
113
|
'link-bc': --color-transparent,
|
|
124
114
|
'link-txt': --color-blue-dark,
|
|
125
115
|
'focus-bg': --color-gray,
|
|
@@ -135,8 +125,7 @@ $-skins: (
|
|
|
135
125
|
'disabled-bc': --color-transparent,
|
|
136
126
|
'disabled-txt': --color-disabled,
|
|
137
127
|
),
|
|
138
|
-
'dark': (
|
|
139
|
-
'link-bg': --color-transparent,
|
|
128
|
+
'dark': ('link-bg': --color-transparent,
|
|
140
129
|
'link-bc': --color-transparent,
|
|
141
130
|
'link-txt': --color-white,
|
|
142
131
|
'focus-bg': --color-blue-5,
|
|
@@ -157,10 +146,12 @@ $-skins: (
|
|
|
157
146
|
);
|
|
158
147
|
|
|
159
148
|
@mixin -print-skin-as-css-vars($name, $o, $mode) {
|
|
160
|
-
|
|
149
|
+
|
|
150
|
+
@each $key,
|
|
151
|
+
$value in $o {
|
|
152
|
+
|
|
161
153
|
// Only print primary skin and css vars that differ from primary
|
|
162
|
-
@if $name ==
|
|
163
|
-
{
|
|
154
|
+
@if $name =='primary' or $value !=map.get($-skins, 'primary', $mode, $key) {
|
|
164
155
|
--btn-#{$key}: var(#{$value});
|
|
165
156
|
}
|
|
166
157
|
}
|
|
@@ -205,7 +196,9 @@ $-skins: (
|
|
|
205
196
|
@extend %sr-only;
|
|
206
197
|
}
|
|
207
198
|
}
|
|
208
|
-
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
@else {
|
|
209
202
|
&--#{$name} {
|
|
210
203
|
@include typography.get-text(map.get($o, 'text-class'));
|
|
211
204
|
height: map.get($o, 'height');
|
|
@@ -233,24 +226,33 @@ $-skins: (
|
|
|
233
226
|
}
|
|
234
227
|
|
|
235
228
|
.#{$-module-name}#{$css-skin} {
|
|
236
|
-
@include -print-skin-as-css-vars(
|
|
237
|
-
$name,
|
|
229
|
+
@include -print-skin-as-css-vars($name,
|
|
238
230
|
map.get($-skins, $name, 'light'),
|
|
239
231
|
'light'
|
|
240
232
|
);
|
|
241
233
|
}
|
|
242
234
|
|
|
243
235
|
@at-root [data-mode='dark'] .#{$-module-name}#{$css-skin} {
|
|
244
|
-
@include -print-skin-as-css-vars(
|
|
245
|
-
$name,
|
|
236
|
+
@include -print-skin-as-css-vars($name,
|
|
246
237
|
map.get($-skins, $name, 'dark'),
|
|
247
238
|
'dark'
|
|
248
239
|
);
|
|
240
|
+
|
|
241
|
+
// Dark mode
|
|
242
|
+
&--green-dark-outline,
|
|
243
|
+
&--green-outline,
|
|
244
|
+
&--blue-outline,
|
|
245
|
+
&--beige-dark-outline,
|
|
246
|
+
&--yellow-outline,
|
|
247
|
+
&--red-outline {
|
|
248
|
+
color: var(--color-white);
|
|
249
|
+
}
|
|
249
250
|
}
|
|
250
251
|
}
|
|
251
252
|
|
|
252
253
|
// Print css vars for hvert skin
|
|
253
|
-
@each $key,
|
|
254
|
+
@each $key,
|
|
255
|
+
$value in $-skins {
|
|
254
256
|
@include -skin($key, map.get($value, 'light'));
|
|
255
257
|
}
|
|
256
258
|
|
|
@@ -277,7 +279,7 @@ $-skins: (
|
|
|
277
279
|
align-items: center;
|
|
278
280
|
column-gap: 0.5rem;
|
|
279
281
|
|
|
280
|
-
&[class*='pkt-btn--icon']
|
|
282
|
+
&[class*='pkt-btn--icon']>.pkt-btn__icon {
|
|
281
283
|
display: flex;
|
|
282
284
|
}
|
|
283
285
|
|
|
@@ -293,8 +295,8 @@ $-skins: (
|
|
|
293
295
|
}
|
|
294
296
|
|
|
295
297
|
@at-root a.#{$-module-name}:focus,
|
|
296
|
-
|
|
297
|
-
|
|
298
|
+
&:enabled:focus,
|
|
299
|
+
&.#{$-module-name}--focus {
|
|
298
300
|
background-color: var(--btn-focus-bg);
|
|
299
301
|
color: var(--btn-focus-txt);
|
|
300
302
|
border-color: var(--btn-focus-bc);
|
|
@@ -303,8 +305,8 @@ $-skins: (
|
|
|
303
305
|
}
|
|
304
306
|
|
|
305
307
|
@at-root a.#{$-module-name}:hover,
|
|
306
|
-
|
|
307
|
-
|
|
308
|
+
&:enabled:hover,
|
|
309
|
+
&.#{$-module-name}--hover {
|
|
308
310
|
background-color: var(--btn-hover-bg);
|
|
309
311
|
border-color: var(--btn-hover-bc);
|
|
310
312
|
color: var(--btn-hover-txt);
|
|
@@ -313,9 +315,9 @@ $-skins: (
|
|
|
313
315
|
}
|
|
314
316
|
|
|
315
317
|
@at-root a.#{$-module-name}:active,
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
318
|
+
&:enabled:active,
|
|
319
|
+
&.#{$-module-name}--active,
|
|
320
|
+
&.#{$-module-name}--active:hover {
|
|
319
321
|
background-color: var(--btn-active-bg);
|
|
320
322
|
border-color: var(--btn-active-bc);
|
|
321
323
|
color: var(--btn-active-txt);
|
|
@@ -330,8 +332,10 @@ $-skins: (
|
|
|
330
332
|
cursor: inherit;
|
|
331
333
|
}
|
|
332
334
|
|
|
335
|
+
|
|
333
336
|
// button sizes & variants
|
|
334
|
-
@each $key,
|
|
337
|
+
@each $key,
|
|
338
|
+
$value in $-sizes {
|
|
335
339
|
@include -size($key, $value);
|
|
336
340
|
}
|
|
337
341
|
|
|
@@ -339,4 +343,78 @@ $-skins: (
|
|
|
339
343
|
&::-moz-focus-inner {
|
|
340
344
|
border: 0;
|
|
341
345
|
}
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
// button colors
|
|
349
|
+
&--green-dark {
|
|
350
|
+
--btn-link-bg: var(--color-green-dark);
|
|
351
|
+
--btn-link-bc: var(--color-green-dark);
|
|
352
|
+
--btn-link-txt: var(--color-white);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
&--green-dark-outline {
|
|
356
|
+
--btn-link-bg: transparent;
|
|
357
|
+
--btn-link-bc: var(--color-green-dark);
|
|
358
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
&--green {
|
|
362
|
+
--btn-link-bg: var(--color-green);
|
|
363
|
+
--btn-link-bc: var(--color-green);
|
|
364
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
&--green-outline {
|
|
368
|
+
--btn-link-bg: transparent;
|
|
369
|
+
--btn-link-bc: var(--color-green);
|
|
370
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
&--blue {
|
|
374
|
+
--btn-link-bg: var(--color-blue);
|
|
375
|
+
--btn-link-bc: var(--color-blue);
|
|
376
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
&--blue-outline {
|
|
380
|
+
--btn-link-bg: transparent;
|
|
381
|
+
--btn-link-bc: var(--color-blue);
|
|
382
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
&--beige-light {
|
|
386
|
+
--btn-link-bg: var(--color-beige-light);
|
|
387
|
+
--btn-link-bc: var(--color-beige-light);
|
|
388
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
&--beige-dark-outline {
|
|
392
|
+
--btn-link-bg: transparent;
|
|
393
|
+
--btn-link-bc: var(--color-beige-dark);
|
|
394
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
&--yellow {
|
|
398
|
+
--btn-link-bg: var(--color-yellow);
|
|
399
|
+
--btn-link-bc: var(--color-yellow);
|
|
400
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
&--yellow-outline {
|
|
404
|
+
--btn-link-bg: transparent;
|
|
405
|
+
--btn-link-bc: var(--color-yellow);
|
|
406
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
&--red {
|
|
410
|
+
--btn-link-bg: var(--color-red);
|
|
411
|
+
--btn-link-bc: var(--color-red);
|
|
412
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
&--red-outline {
|
|
416
|
+
--btn-link-bg: transparent;
|
|
417
|
+
--btn-link-bc: var(--color-red);
|
|
418
|
+
--btn-link-txt: var(--color-blue-dark);
|
|
419
|
+
}
|
|
342
420
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-css",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.3",
|
|
4
4
|
"description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
56
56
|
},
|
|
57
57
|
"license": "MIT",
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "444ca29bd6d5e8c3dcf5ba81a808a312c9cf40b3"
|
|
59
59
|
}
|