@oslokommune/punkt-css 9.4.0 → 9.4.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 (7) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/css/pkt-elements.css +96 -33
  3. package/dist/css/pkt-elements.min.css +1 -1
  4. package/dist/css/pkt.css +96 -33
  5. package/dist/css/pkt.min.css +1 -1
  6. package/dist/scss/elements/_button.scss +88 -50
  7. package/package.json +2 -2
package/dist/scss/elements/_button.scss CHANGED
@@ -15,21 +15,24 @@
15
15
 
16
16
  $-module-name: 'pkt-btn';
17
17
  $-sizes: (
18
- 'small': ('text-class': 'pkt-txt-14-medium',
18
+ 'small': (
19
+ 'text-class': 'pkt-txt-14-medium',
19
20
  'padding': 0 0.5rem,
20
21
  'padding-icon-only': 0 0.5625rem,
21
22
  'icon-size': 1.25rem,
22
23
  'height': 2.625rem,
23
24
  'line-height': 1.1,
24
25
  ),
25
- 'medium': ('text-class': 'pkt-txt-18-medium',
26
+ 'medium': (
27
+ 'text-class': 'pkt-txt-18-medium',
26
28
  'padding': 0 1rem,
27
29
  'padding-icon-only': 0 0.625rem,
28
30
  'icon-size': 1.5rem,
29
31
  'height': 3rem,
30
32
  'line-height': 1.1,
31
33
  ),
32
- 'large': ('text-class': 'pkt-txt-24-medium',
34
+ 'large': (
35
+ 'text-class': 'pkt-txt-24-medium',
33
36
  'padding': 0 1rem,
34
37
  'padding-icon-only': 0 0.875rem,
35
38
  'icon-size': 2rem,
@@ -39,7 +42,9 @@ $-sizes: (
39
42
  );
40
43
 
41
44
  $-skins: (
42
- 'primary': ('light': ('button-background-normal': --pkt-color-brand-dark-blue-1000,
45
+ 'primary': (
46
+ 'light': (
47
+ 'button-background-normal': --pkt-color-brand-dark-blue-1000,
43
48
  'button-border-normal': --pkt-color-brand-dark-blue-1000,
44
49
  'button-text-normal': --pkt-color-brand-neutrals-white,
45
50
  'button-background-focus': --pkt-color-brand-warm-blue-1000,
@@ -56,7 +61,8 @@ $-skins: (
56
61
  'button-border-disabled': --pkt-color-brand-neutrals-100,
57
62
  'button-text-disabled': --pkt-color-grays-gray-500,
58
63
  ),
59
- 'dark': ('button-background-normal': --pkt-color-brand-blue-500,
64
+ 'dark': (
65
+ 'button-background-normal': --pkt-color-brand-blue-500,
60
66
  'button-border-normal': --pkt-color-brand-blue-500,
61
67
  'button-text-normal': --pkt-color-brand-dark-blue-1000,
62
68
  'button-background-focus': --pkt-color-brand-blue-1000,
@@ -74,8 +80,10 @@ $-skins: (
74
80
  'button-text-disabled': --pkt-color-grays-gray-600,
75
81
  ),
76
82
  ),
77
- 'secondary': ('light': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
78
- 'button-border-normal': --pkt-color-brand-neutrals-transparent,
83
+ 'secondary': (
84
+ 'light': (
85
+ 'button-background-normal': --pkt-color-brand-neutrals-transparent,
86
+ 'button-border-normal': --pkt-color-brand-dark-blue-1000,
79
87
  'button-text-normal': --pkt-color-brand-dark-blue-1000,
80
88
  'button-background-focus': --pkt-color-brand-warm-blue-1000,
81
89
  'button-border-focus': --pkt-color-brand-warm-blue-1000,
@@ -91,7 +99,8 @@ $-skins: (
91
99
  'button-border-disabled': --pkt-color-brand-neutrals-100,
92
100
  'button-text-disabled': --pkt-color-grays-gray-600,
93
101
  ),
94
- 'dark': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
102
+ 'dark': (
103
+ 'button-background-normal': --pkt-color-brand-neutrals-transparent,
95
104
  'button-border-normal': --pkt-color-brand-neutrals-white,
96
105
  'button-text-normal': --pkt-color-brand-neutrals-white,
97
106
  'button-background-focus': --pkt-color-brand-blue-500,
@@ -109,7 +118,9 @@ $-skins: (
109
118
  'button-text-disabled': --pkt-color-grays-gray-600,
110
119
  ),
111
120
  ),
112
- 'tertiary': ('light': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
121
+ 'tertiary': (
122
+ 'light': (
123
+ 'button-background-normal': --pkt-color-brand-neutrals-transparent,
113
124
  'button-border-normal': --pkt-color-brand-neutrals-transparent,
114
125
  'button-text-normal': --pkt-color-brand-dark-blue-1000,
115
126
  'button-background-focus': --pkt-color-brand-neutrals-200,
@@ -126,7 +137,8 @@ $-skins: (
126
137
  'button-border-disabled': --pkt-color-brand-neutrals-100,
127
138
  'button-text-disabled': --pkt-color-grays-gray-600,
128
139
  ),
129
- 'dark': ('button-background-normal': --pkt-color-brand-neutrals-transparent,
140
+ 'dark': (
141
+ 'button-background-normal': --pkt-color-brand-neutrals-transparent,
130
142
  'button-border-normal': --pkt-color-brand-neutrals-transparent,
131
143
  'button-text-normal': --pkt-color-brand-neutrals-white,
132
144
  'button-background-focus': --pkt-color-brand-dark-blue-700,
@@ -147,12 +159,10 @@ $-skins: (
147
159
  );
148
160
 
149
161
  @mixin -print-skin-as-css-vars($name, $o, $mode) {
150
-
151
- @each $key,
152
- $value in $o {
153
-
162
+ @each $key, $value in $o {
154
163
  // Only print primary skin and css vars that differ from primary
155
- @if $name =='primary' or $value !=map.get($-skins, 'primary', $mode, $key) {
164
+ @if $name == 'primary' or $value !=map.get($-skins, 'primary', $mode, $key)
165
+ {
156
166
  --pkt-color-#{$key}: var(#{$value});
157
167
  }
158
168
  }
@@ -197,9 +207,7 @@ $-skins: (
197
207
  @extend %sr-only;
198
208
  }
199
209
  }
200
- }
201
-
202
- @else {
210
+ } @else {
203
211
  &--#{$name} {
204
212
  @include typography.get-text(map.get($o, 'text-class'));
205
213
  height: map.get($o, 'height');
@@ -227,27 +235,33 @@ $-skins: (
227
235
  }
228
236
 
229
237
  .#{$-module-name}#{$css-skin} {
230
- @include -print-skin-as-css-vars($name,
238
+ @include -print-skin-as-css-vars(
239
+ $name,
231
240
  map.get($-skins, $name, 'light'),
232
241
  'light'
233
242
  );
234
243
  }
235
244
 
236
245
  @at-root [data-mode='dark'] .#{$-module-name}#{$css-skin} {
237
- @include -print-skin-as-css-vars($name,
246
+ @include -print-skin-as-css-vars(
247
+ $name,
238
248
  map.get($-skins, $name, 'dark'),
239
249
  'dark'
240
250
  );
241
251
 
242
252
  // Dark mode
243
253
  &--green-dark {
244
- --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
254
+ --pkt-color-button-background-normal: var(
255
+ --pkt-color-brand-dark-green-1000
256
+ );
245
257
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
246
258
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
247
259
  }
248
260
 
249
261
  &--green-dark-outline {
250
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
262
+ --pkt-color-button-background-normal: var(
263
+ --pkt-color-brand-neutrals-transparent
264
+ );
251
265
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
252
266
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
253
267
  }
@@ -259,7 +273,9 @@ $-skins: (
259
273
  }
260
274
 
261
275
  &--green-outline {
262
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
276
+ --pkt-color-button-background-normal: var(
277
+ --pkt-color-brand-neutrals-transparent
278
+ );
263
279
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
264
280
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
265
281
  }
@@ -271,19 +287,25 @@ $-skins: (
271
287
  }
272
288
 
273
289
  &--blue-outline {
274
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
290
+ --pkt-color-button-background-normal: var(
291
+ --pkt-color-brand-neutrals-transparent
292
+ );
275
293
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
276
294
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
277
295
  }
278
296
 
279
297
  &--beige-light {
280
- --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
298
+ --pkt-color-button-background-normal: var(
299
+ --pkt-color-brand-light-beige-1000
300
+ );
281
301
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
282
302
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
283
303
  }
284
304
 
285
305
  &--beige-dark-outline {
286
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
306
+ --pkt-color-button-background-normal: var(
307
+ --pkt-color-brand-neutrals-transparent
308
+ );
287
309
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
288
310
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
289
311
  }
@@ -295,7 +317,9 @@ $-skins: (
295
317
  }
296
318
 
297
319
  &--yellow-outline {
298
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
320
+ --pkt-color-button-background-normal: var(
321
+ --pkt-color-brand-neutrals-transparent
322
+ );
299
323
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
300
324
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
301
325
  }
@@ -307,7 +331,9 @@ $-skins: (
307
331
  }
308
332
 
309
333
  &--red-outline {
310
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
334
+ --pkt-color-button-background-normal: var(
335
+ --pkt-color-brand-neutrals-transparent
336
+ );
311
337
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
312
338
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
313
339
  }
@@ -315,8 +341,7 @@ $-skins: (
315
341
  }
316
342
 
317
343
  // Print css vars for hvert skin
318
- @each $key,
319
- $value in $-skins {
344
+ @each $key, $value in $-skins {
320
345
  @include -skin($key, map.get($value, 'light'));
321
346
  }
322
347
 
@@ -343,7 +368,7 @@ $value in $-skins {
343
368
  align-items: center;
344
369
  column-gap: 0.5rem;
345
370
 
346
- &[class*='pkt-btn--icon']>.pkt-btn__icon {
371
+ &[class*='pkt-btn--icon'] > .pkt-btn__icon {
347
372
  display: flex;
348
373
  }
349
374
 
@@ -359,8 +384,8 @@ $value in $-skins {
359
384
  }
360
385
 
361
386
  @at-root a.#{$-module-name}:focus,
362
- &:enabled:focus,
363
- &.#{$-module-name}--focus {
387
+ &:enabled:focus,
388
+ &.#{$-module-name}--focus {
364
389
  background-color: var(--pkt-color-button-background-focus);
365
390
  color: var(--pkt-color-button-text-focus);
366
391
  border-color: var(--pkt-color-button-border-focus);
@@ -369,8 +394,8 @@ $value in $-skins {
369
394
  }
370
395
 
371
396
  @at-root a.#{$-module-name}:hover,
372
- &:enabled:hover,
373
- &.#{$-module-name}--hover {
397
+ &:enabled:hover,
398
+ &.#{$-module-name}--hover {
374
399
  background-color: var(--pkt-color-button-background-hover);
375
400
  border-color: var(--pkt-color-button-border-hover);
376
401
  color: var(--pkt-color-button-text-hover);
@@ -379,9 +404,9 @@ $value in $-skins {
379
404
  }
380
405
 
381
406
  @at-root a.#{$-module-name}:active,
382
- &:enabled:active,
383
- &.#{$-module-name}--active,
384
- &.#{$-module-name}--active:hover {
407
+ &:enabled:active,
408
+ &.#{$-module-name}--active,
409
+ &.#{$-module-name}--active:hover {
385
410
  background-color: var(--pkt-color-button-background-active);
386
411
  border-color: var(--pkt-color-button-border-active);
387
412
  color: var(--pkt-color-button-text-active);
@@ -396,10 +421,8 @@ $value in $-skins {
396
421
  cursor: inherit;
397
422
  }
398
423
 
399
-
400
424
  // button sizes & variants
401
- @each $key,
402
- $value in $-sizes {
425
+ @each $key, $value in $-sizes {
403
426
  @include -size($key, $value);
404
427
  }
405
428
 
@@ -408,16 +431,19 @@ $value in $-skins {
408
431
  border: 0;
409
432
  }
410
433
 
411
-
412
434
  // button colors modifiers
413
435
  &--green-dark {
414
- --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
436
+ --pkt-color-button-background-normal: var(
437
+ --pkt-color-brand-dark-green-1000
438
+ );
415
439
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
416
440
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
417
441
  }
418
442
 
419
443
  &--green-dark-outline {
420
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
444
+ --pkt-color-button-background-normal: var(
445
+ --pkt-color-brand-neutrals-transparent
446
+ );
421
447
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
422
448
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
423
449
  }
@@ -429,7 +455,9 @@ $value in $-skins {
429
455
  }
430
456
 
431
457
  &--green-outline {
432
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
458
+ --pkt-color-button-background-normal: var(
459
+ --pkt-color-brand-neutrals-transparent
460
+ );
433
461
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
434
462
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
435
463
  }
@@ -441,19 +469,25 @@ $value in $-skins {
441
469
  }
442
470
 
443
471
  &--blue-outline {
444
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
472
+ --pkt-color-button-background-normal: var(
473
+ --pkt-color-brand-neutrals-transparent
474
+ );
445
475
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
446
476
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
447
477
  }
448
478
 
449
479
  &--beige-light {
450
- --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
480
+ --pkt-color-button-background-normal: var(
481
+ --pkt-color-brand-light-beige-1000
482
+ );
451
483
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
452
484
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
453
485
  }
454
486
 
455
487
  &--beige-dark-outline {
456
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
488
+ --pkt-color-button-background-normal: var(
489
+ --pkt-color-brand-neutrals-transparent
490
+ );
457
491
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
458
492
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
459
493
  }
@@ -465,7 +499,9 @@ $value in $-skins {
465
499
  }
466
500
 
467
501
  &--yellow-outline {
468
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
502
+ --pkt-color-button-background-normal: var(
503
+ --pkt-color-brand-neutrals-transparent
504
+ );
469
505
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
470
506
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
471
507
  }
@@ -477,7 +513,9 @@ $value in $-skins {
477
513
  }
478
514
 
479
515
  &--red-outline {
480
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
516
+ --pkt-color-button-background-normal: var(
517
+ --pkt-color-brand-neutrals-transparent
518
+ );
481
519
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
482
520
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
483
521
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "9.4.0",
3
+ "version": "9.4.1",
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": "83be982bc70185235a77feda8a8628bb44964aba"
58
+ "gitHead": "2b6ea8c5c18bbe72cfcad65ea783e92da07bccf4"
59
59
  }