@oslokommune/punkt-css 11.9.2 → 11.9.4

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 +33 -97
  3. package/dist/css/pkt-elements.min.css +1 -1
  4. package/dist/css/pkt.css +33 -97
  5. package/dist/css/pkt.min.css +1 -1
  6. package/dist/scss/elements/_button.scss +20 -61
  7. package/package.json +3 -3
package/dist/scss/elements/_button.scss CHANGED
@@ -171,8 +171,7 @@ $-skins: (
171
171
  @mixin -print-skin-as-css-vars($name, $o, $mode) {
172
172
  @each $key, $value in $o {
173
173
  // Only print primary skin and css vars that differ from primary
174
- @if $name == 'primary' or $value !=map.get($-skins, 'primary', $mode, $key)
175
- {
174
+ @if $name == 'primary' or $value !=map.get($-skins, 'primary', $mode, $key) {
176
175
  --pkt-color-#{$key}: var(#{$value});
177
176
  }
178
177
  }
@@ -193,7 +192,7 @@ $-skins: (
193
192
 
194
193
  // button variants (base)
195
194
  &--label-only {
196
- .#{$-module-name}__icon {
195
+ .#{$-module-name}__icon:not(.#{$-module-name}__spinner) {
197
196
  display: none;
198
197
  }
199
198
  }
@@ -245,33 +244,21 @@ $-skins: (
245
244
  }
246
245
 
247
246
  .#{$-module-name}#{$css-skin} {
248
- @include -print-skin-as-css-vars(
249
- $name,
250
- map.get($-skins, $name, 'light'),
251
- 'light'
252
- );
247
+ @include -print-skin-as-css-vars($name, map.get($-skins, $name, 'light'), 'light');
253
248
  }
254
249
 
255
250
  @at-root [data-mode='dark'] .#{$-module-name}#{$css-skin} {
256
- @include -print-skin-as-css-vars(
257
- $name,
258
- map.get($-skins, $name, 'dark'),
259
- 'dark'
260
- );
251
+ @include -print-skin-as-css-vars($name, map.get($-skins, $name, 'dark'), 'dark');
261
252
 
262
253
  // Dark mode
263
254
  &--green-dark {
264
- --pkt-color-button-background-normal: var(
265
- --pkt-color-brand-dark-green-1000
266
- );
255
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
267
256
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
268
257
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
269
258
  }
270
259
 
271
260
  &--green-dark-outline {
272
- --pkt-color-button-background-normal: var(
273
- --pkt-color-brand-neutrals-transparent
274
- );
261
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
275
262
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
276
263
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
277
264
  }
@@ -283,9 +270,7 @@ $-skins: (
283
270
  }
284
271
 
285
272
  &--green-outline {
286
- --pkt-color-button-background-normal: var(
287
- --pkt-color-brand-neutrals-transparent
288
- );
273
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
289
274
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
290
275
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
291
276
  }
@@ -297,25 +282,19 @@ $-skins: (
297
282
  }
298
283
 
299
284
  &--blue-outline {
300
- --pkt-color-button-background-normal: var(
301
- --pkt-color-brand-neutrals-transparent
302
- );
285
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
303
286
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
304
287
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
305
288
  }
306
289
 
307
290
  &--beige-light {
308
- --pkt-color-button-background-normal: var(
309
- --pkt-color-brand-light-beige-1000
310
- );
291
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
311
292
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
312
293
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
313
294
  }
314
295
 
315
296
  &--beige-dark-outline {
316
- --pkt-color-button-background-normal: var(
317
- --pkt-color-brand-neutrals-transparent
318
- );
297
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
319
298
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
320
299
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
321
300
  }
@@ -327,9 +306,7 @@ $-skins: (
327
306
  }
328
307
 
329
308
  &--yellow-outline {
330
- --pkt-color-button-background-normal: var(
331
- --pkt-color-brand-neutrals-transparent
332
- );
309
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
333
310
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
334
311
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
335
312
  }
@@ -341,9 +318,7 @@ $-skins: (
341
318
  }
342
319
 
343
320
  &--red-outline {
344
- --pkt-color-button-background-normal: var(
345
- --pkt-color-brand-neutrals-transparent
346
- );
321
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
347
322
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
348
323
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
349
324
  }
@@ -443,17 +418,13 @@ $-skins: (
443
418
 
444
419
  // button colors modifiers
445
420
  &--green-dark {
446
- --pkt-color-button-background-normal: var(
447
- --pkt-color-brand-dark-green-1000
448
- );
421
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
449
422
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
450
423
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
451
424
  }
452
425
 
453
426
  &--green-dark-outline {
454
- --pkt-color-button-background-normal: var(
455
- --pkt-color-brand-neutrals-transparent
456
- );
427
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
457
428
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
458
429
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
459
430
  }
@@ -465,9 +436,7 @@ $-skins: (
465
436
  }
466
437
 
467
438
  &--green-outline {
468
- --pkt-color-button-background-normal: var(
469
- --pkt-color-brand-neutrals-transparent
470
- );
439
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
471
440
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
472
441
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
473
442
  }
@@ -479,25 +448,19 @@ $-skins: (
479
448
  }
480
449
 
481
450
  &--blue-outline {
482
- --pkt-color-button-background-normal: var(
483
- --pkt-color-brand-neutrals-transparent
484
- );
451
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
485
452
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
486
453
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
487
454
  }
488
455
 
489
456
  &--beige-light {
490
- --pkt-color-button-background-normal: var(
491
- --pkt-color-brand-light-beige-1000
492
- );
457
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
493
458
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
494
459
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
495
460
  }
496
461
 
497
462
  &--beige-dark-outline {
498
- --pkt-color-button-background-normal: var(
499
- --pkt-color-brand-neutrals-transparent
500
- );
463
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
501
464
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
502
465
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
503
466
  }
@@ -509,9 +472,7 @@ $-skins: (
509
472
  }
510
473
 
511
474
  &--yellow-outline {
512
- --pkt-color-button-background-normal: var(
513
- --pkt-color-brand-neutrals-transparent
514
- );
475
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
515
476
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
516
477
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
517
478
  }
@@ -523,9 +484,7 @@ $-skins: (
523
484
  }
524
485
 
525
486
  &--red-outline {
526
- --pkt-color-button-background-normal: var(
527
- --pkt-color-brand-neutrals-transparent
528
- );
487
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
529
488
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
530
489
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
531
490
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "11.9.2",
3
+ "version": "11.9.4",
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",
@@ -20,7 +20,7 @@
20
20
  "preview": "astro preview"
21
21
  },
22
22
  "devDependencies": {
23
- "@oslokommune/punkt-assets": "^11.5.0",
23
+ "@oslokommune/punkt-assets": "^11.9.4",
24
24
  "astro": "^2.8.1",
25
25
  "edit-json-file": "^1.7.0",
26
26
  "fs-extra": "^11.1.0",
@@ -55,5 +55,5 @@
55
55
  "url": "https://github.com/oslokommune/punkt/issues"
56
56
  },
57
57
  "license": "MIT",
58
- "gitHead": "4f8705ba802178b8f6089e3be360bd04e893de71"
58
+ "gitHead": "581930ff3415a56bce6634e14a9a76d106e2d247"
59
59
  }