@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/css/pkt.css CHANGED
@@ -14141,12 +14141,16 @@ button.pkt-link {
14141
14141
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
14142
14142
  }
14143
14143
  [data-mode=dark] .pkt-btn--green-dark {
14144
- --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
14144
+ --pkt-color-button-background-normal: var(
14145
+ --pkt-color-brand-dark-green-1000
14146
+ );
14145
14147
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
14146
14148
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14147
14149
  }
14148
14150
  [data-mode=dark] .pkt-btn--green-dark-outline {
14149
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14151
+ --pkt-color-button-background-normal: var(
14152
+ --pkt-color-brand-neutrals-transparent
14153
+ );
14150
14154
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
14151
14155
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14152
14156
  }
@@ -14156,7 +14160,9 @@ button.pkt-link {
14156
14160
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14157
14161
  }
14158
14162
  [data-mode=dark] .pkt-btn--green-outline {
14159
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14163
+ --pkt-color-button-background-normal: var(
14164
+ --pkt-color-brand-neutrals-transparent
14165
+ );
14160
14166
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
14161
14167
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14162
14168
  }
@@ -14166,17 +14172,23 @@ button.pkt-link {
14166
14172
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14167
14173
  }
14168
14174
  [data-mode=dark] .pkt-btn--blue-outline {
14169
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14175
+ --pkt-color-button-background-normal: var(
14176
+ --pkt-color-brand-neutrals-transparent
14177
+ );
14170
14178
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
14171
14179
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14172
14180
  }
14173
14181
  [data-mode=dark] .pkt-btn--beige-light {
14174
- --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
14182
+ --pkt-color-button-background-normal: var(
14183
+ --pkt-color-brand-light-beige-1000
14184
+ );
14175
14185
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
14176
14186
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14177
14187
  }
14178
14188
  [data-mode=dark] .pkt-btn--beige-dark-outline {
14179
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14189
+ --pkt-color-button-background-normal: var(
14190
+ --pkt-color-brand-neutrals-transparent
14191
+ );
14180
14192
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
14181
14193
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14182
14194
  }
@@ -14186,7 +14198,9 @@ button.pkt-link {
14186
14198
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14187
14199
  }
14188
14200
  [data-mode=dark] .pkt-btn--yellow-outline {
14189
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14201
+ --pkt-color-button-background-normal: var(
14202
+ --pkt-color-brand-neutrals-transparent
14203
+ );
14190
14204
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
14191
14205
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14192
14206
  }
@@ -14196,14 +14210,15 @@ button.pkt-link {
14196
14210
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14197
14211
  }
14198
14212
  [data-mode=dark] .pkt-btn--red-outline {
14199
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14213
+ --pkt-color-button-background-normal: var(
14214
+ --pkt-color-brand-neutrals-transparent
14215
+ );
14200
14216
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
14201
14217
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14202
14218
  }
14203
14219
 
14204
14220
  .pkt-btn--secondary {
14205
14221
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14206
- --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
14207
14222
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14208
14223
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
14209
14224
  }
@@ -14222,12 +14237,16 @@ button.pkt-link {
14222
14237
  --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
14223
14238
  }
14224
14239
  [data-mode=dark] .pkt-btn--secondary--green-dark {
14225
- --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
14240
+ --pkt-color-button-background-normal: var(
14241
+ --pkt-color-brand-dark-green-1000
14242
+ );
14226
14243
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
14227
14244
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14228
14245
  }
14229
14246
  [data-mode=dark] .pkt-btn--secondary--green-dark-outline {
14230
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14247
+ --pkt-color-button-background-normal: var(
14248
+ --pkt-color-brand-neutrals-transparent
14249
+ );
14231
14250
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
14232
14251
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14233
14252
  }
@@ -14237,7 +14256,9 @@ button.pkt-link {
14237
14256
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14238
14257
  }
14239
14258
  [data-mode=dark] .pkt-btn--secondary--green-outline {
14240
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14259
+ --pkt-color-button-background-normal: var(
14260
+ --pkt-color-brand-neutrals-transparent
14261
+ );
14241
14262
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
14242
14263
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14243
14264
  }
@@ -14247,17 +14268,23 @@ button.pkt-link {
14247
14268
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14248
14269
  }
14249
14270
  [data-mode=dark] .pkt-btn--secondary--blue-outline {
14250
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14271
+ --pkt-color-button-background-normal: var(
14272
+ --pkt-color-brand-neutrals-transparent
14273
+ );
14251
14274
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
14252
14275
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14253
14276
  }
14254
14277
  [data-mode=dark] .pkt-btn--secondary--beige-light {
14255
- --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
14278
+ --pkt-color-button-background-normal: var(
14279
+ --pkt-color-brand-light-beige-1000
14280
+ );
14256
14281
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
14257
14282
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14258
14283
  }
14259
14284
  [data-mode=dark] .pkt-btn--secondary--beige-dark-outline {
14260
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14285
+ --pkt-color-button-background-normal: var(
14286
+ --pkt-color-brand-neutrals-transparent
14287
+ );
14261
14288
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
14262
14289
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14263
14290
  }
@@ -14267,7 +14294,9 @@ button.pkt-link {
14267
14294
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14268
14295
  }
14269
14296
  [data-mode=dark] .pkt-btn--secondary--yellow-outline {
14270
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14297
+ --pkt-color-button-background-normal: var(
14298
+ --pkt-color-brand-neutrals-transparent
14299
+ );
14271
14300
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
14272
14301
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14273
14302
  }
@@ -14277,7 +14306,9 @@ button.pkt-link {
14277
14306
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14278
14307
  }
14279
14308
  [data-mode=dark] .pkt-btn--secondary--red-outline {
14280
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14309
+ --pkt-color-button-background-normal: var(
14310
+ --pkt-color-brand-neutrals-transparent
14311
+ );
14281
14312
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
14282
14313
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14283
14314
  }
@@ -14309,12 +14340,16 @@ button.pkt-link {
14309
14340
  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
14310
14341
  }
14311
14342
  [data-mode=dark] .pkt-btn--tertiary--green-dark {
14312
- --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
14343
+ --pkt-color-button-background-normal: var(
14344
+ --pkt-color-brand-dark-green-1000
14345
+ );
14313
14346
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
14314
14347
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14315
14348
  }
14316
14349
  [data-mode=dark] .pkt-btn--tertiary--green-dark-outline {
14317
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14350
+ --pkt-color-button-background-normal: var(
14351
+ --pkt-color-brand-neutrals-transparent
14352
+ );
14318
14353
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
14319
14354
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14320
14355
  }
@@ -14324,7 +14359,9 @@ button.pkt-link {
14324
14359
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14325
14360
  }
14326
14361
  [data-mode=dark] .pkt-btn--tertiary--green-outline {
14327
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14362
+ --pkt-color-button-background-normal: var(
14363
+ --pkt-color-brand-neutrals-transparent
14364
+ );
14328
14365
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
14329
14366
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14330
14367
  }
@@ -14334,17 +14371,23 @@ button.pkt-link {
14334
14371
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14335
14372
  }
14336
14373
  [data-mode=dark] .pkt-btn--tertiary--blue-outline {
14337
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14374
+ --pkt-color-button-background-normal: var(
14375
+ --pkt-color-brand-neutrals-transparent
14376
+ );
14338
14377
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
14339
14378
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14340
14379
  }
14341
14380
  [data-mode=dark] .pkt-btn--tertiary--beige-light {
14342
- --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
14381
+ --pkt-color-button-background-normal: var(
14382
+ --pkt-color-brand-light-beige-1000
14383
+ );
14343
14384
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
14344
14385
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14345
14386
  }
14346
14387
  [data-mode=dark] .pkt-btn--tertiary--beige-dark-outline {
14347
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14388
+ --pkt-color-button-background-normal: var(
14389
+ --pkt-color-brand-neutrals-transparent
14390
+ );
14348
14391
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
14349
14392
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14350
14393
  }
@@ -14354,7 +14397,9 @@ button.pkt-link {
14354
14397
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14355
14398
  }
14356
14399
  [data-mode=dark] .pkt-btn--tertiary--yellow-outline {
14357
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14400
+ --pkt-color-button-background-normal: var(
14401
+ --pkt-color-brand-neutrals-transparent
14402
+ );
14358
14403
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
14359
14404
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14360
14405
  }
@@ -14364,7 +14409,9 @@ button.pkt-link {
14364
14409
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14365
14410
  }
14366
14411
  [data-mode=dark] .pkt-btn--tertiary--red-outline {
14367
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14412
+ --pkt-color-button-background-normal: var(
14413
+ --pkt-color-brand-neutrals-transparent
14414
+ );
14368
14415
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
14369
14416
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14370
14417
  }
@@ -14494,12 +14541,16 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
14494
14541
  border: 0;
14495
14542
  }
14496
14543
  .pkt-btn--green-dark {
14497
- --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
14544
+ --pkt-color-button-background-normal: var(
14545
+ --pkt-color-brand-dark-green-1000
14546
+ );
14498
14547
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
14499
14548
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
14500
14549
  }
14501
14550
  .pkt-btn--green-dark-outline {
14502
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14551
+ --pkt-color-button-background-normal: var(
14552
+ --pkt-color-brand-neutrals-transparent
14553
+ );
14503
14554
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
14504
14555
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14505
14556
  }
@@ -14509,7 +14560,9 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
14509
14560
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14510
14561
  }
14511
14562
  .pkt-btn--green-outline {
14512
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14563
+ --pkt-color-button-background-normal: var(
14564
+ --pkt-color-brand-neutrals-transparent
14565
+ );
14513
14566
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
14514
14567
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14515
14568
  }
@@ -14519,17 +14572,23 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
14519
14572
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14520
14573
  }
14521
14574
  .pkt-btn--blue-outline {
14522
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14575
+ --pkt-color-button-background-normal: var(
14576
+ --pkt-color-brand-neutrals-transparent
14577
+ );
14523
14578
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
14524
14579
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14525
14580
  }
14526
14581
  .pkt-btn--beige-light {
14527
- --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
14582
+ --pkt-color-button-background-normal: var(
14583
+ --pkt-color-brand-light-beige-1000
14584
+ );
14528
14585
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
14529
14586
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14530
14587
  }
14531
14588
  .pkt-btn--beige-dark-outline {
14532
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14589
+ --pkt-color-button-background-normal: var(
14590
+ --pkt-color-brand-neutrals-transparent
14591
+ );
14533
14592
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
14534
14593
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14535
14594
  }
@@ -14539,7 +14598,9 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
14539
14598
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14540
14599
  }
14541
14600
  .pkt-btn--yellow-outline {
14542
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14601
+ --pkt-color-button-background-normal: var(
14602
+ --pkt-color-brand-neutrals-transparent
14603
+ );
14543
14604
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
14544
14605
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14545
14606
  }
@@ -14549,7 +14610,9 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
14549
14610
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14550
14611
  }
14551
14612
  .pkt-btn--red-outline {
14552
- --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
14613
+ --pkt-color-button-background-normal: var(
14614
+ --pkt-color-brand-neutrals-transparent
14615
+ );
14553
14616
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
14554
14617
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
14555
14618
  }