@oslokommune/punkt-css 11.9.2 → 11.9.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 (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 +2 -2
package/dist/css/pkt.css CHANGED
@@ -16795,16 +16795,12 @@ button.pkt-link {
16795
16795
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
16796
16796
  }
16797
16797
  [data-mode=dark] .pkt-btn--green-dark {
16798
- --pkt-color-button-background-normal: var(
16799
- --pkt-color-brand-dark-green-1000
16800
- );
16798
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
16801
16799
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
16802
16800
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16803
16801
  }
16804
16802
  [data-mode=dark] .pkt-btn--green-dark-outline {
16805
- --pkt-color-button-background-normal: var(
16806
- --pkt-color-brand-neutrals-transparent
16807
- );
16803
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16808
16804
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
16809
16805
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16810
16806
  }
@@ -16814,9 +16810,7 @@ button.pkt-link {
16814
16810
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16815
16811
  }
16816
16812
  [data-mode=dark] .pkt-btn--green-outline {
16817
- --pkt-color-button-background-normal: var(
16818
- --pkt-color-brand-neutrals-transparent
16819
- );
16813
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16820
16814
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
16821
16815
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16822
16816
  }
@@ -16826,23 +16820,17 @@ button.pkt-link {
16826
16820
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16827
16821
  }
16828
16822
  [data-mode=dark] .pkt-btn--blue-outline {
16829
- --pkt-color-button-background-normal: var(
16830
- --pkt-color-brand-neutrals-transparent
16831
- );
16823
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16832
16824
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
16833
16825
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16834
16826
  }
16835
16827
  [data-mode=dark] .pkt-btn--beige-light {
16836
- --pkt-color-button-background-normal: var(
16837
- --pkt-color-brand-light-beige-1000
16838
- );
16828
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
16839
16829
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
16840
16830
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16841
16831
  }
16842
16832
  [data-mode=dark] .pkt-btn--beige-dark-outline {
16843
- --pkt-color-button-background-normal: var(
16844
- --pkt-color-brand-neutrals-transparent
16845
- );
16833
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16846
16834
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
16847
16835
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16848
16836
  }
@@ -16852,9 +16840,7 @@ button.pkt-link {
16852
16840
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16853
16841
  }
16854
16842
  [data-mode=dark] .pkt-btn--yellow-outline {
16855
- --pkt-color-button-background-normal: var(
16856
- --pkt-color-brand-neutrals-transparent
16857
- );
16843
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16858
16844
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
16859
16845
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16860
16846
  }
@@ -16864,9 +16850,7 @@ button.pkt-link {
16864
16850
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16865
16851
  }
16866
16852
  [data-mode=dark] .pkt-btn--red-outline {
16867
- --pkt-color-button-background-normal: var(
16868
- --pkt-color-brand-neutrals-transparent
16869
- );
16853
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16870
16854
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
16871
16855
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16872
16856
  }
@@ -16891,16 +16875,12 @@ button.pkt-link {
16891
16875
  --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
16892
16876
  }
16893
16877
  [data-mode=dark] .pkt-btn--secondary--green-dark {
16894
- --pkt-color-button-background-normal: var(
16895
- --pkt-color-brand-dark-green-1000
16896
- );
16878
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
16897
16879
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
16898
16880
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16899
16881
  }
16900
16882
  [data-mode=dark] .pkt-btn--secondary--green-dark-outline {
16901
- --pkt-color-button-background-normal: var(
16902
- --pkt-color-brand-neutrals-transparent
16903
- );
16883
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16904
16884
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
16905
16885
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16906
16886
  }
@@ -16910,9 +16890,7 @@ button.pkt-link {
16910
16890
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16911
16891
  }
16912
16892
  [data-mode=dark] .pkt-btn--secondary--green-outline {
16913
- --pkt-color-button-background-normal: var(
16914
- --pkt-color-brand-neutrals-transparent
16915
- );
16893
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16916
16894
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
16917
16895
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16918
16896
  }
@@ -16922,23 +16900,17 @@ button.pkt-link {
16922
16900
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16923
16901
  }
16924
16902
  [data-mode=dark] .pkt-btn--secondary--blue-outline {
16925
- --pkt-color-button-background-normal: var(
16926
- --pkt-color-brand-neutrals-transparent
16927
- );
16903
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16928
16904
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
16929
16905
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16930
16906
  }
16931
16907
  [data-mode=dark] .pkt-btn--secondary--beige-light {
16932
- --pkt-color-button-background-normal: var(
16933
- --pkt-color-brand-light-beige-1000
16934
- );
16908
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
16935
16909
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
16936
16910
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16937
16911
  }
16938
16912
  [data-mode=dark] .pkt-btn--secondary--beige-dark-outline {
16939
- --pkt-color-button-background-normal: var(
16940
- --pkt-color-brand-neutrals-transparent
16941
- );
16913
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16942
16914
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
16943
16915
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16944
16916
  }
@@ -16948,9 +16920,7 @@ button.pkt-link {
16948
16920
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16949
16921
  }
16950
16922
  [data-mode=dark] .pkt-btn--secondary--yellow-outline {
16951
- --pkt-color-button-background-normal: var(
16952
- --pkt-color-brand-neutrals-transparent
16953
- );
16923
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16954
16924
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
16955
16925
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16956
16926
  }
@@ -16960,9 +16930,7 @@ button.pkt-link {
16960
16930
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
16961
16931
  }
16962
16932
  [data-mode=dark] .pkt-btn--secondary--red-outline {
16963
- --pkt-color-button-background-normal: var(
16964
- --pkt-color-brand-neutrals-transparent
16965
- );
16933
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
16966
16934
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
16967
16935
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
16968
16936
  }
@@ -16994,16 +16962,12 @@ button.pkt-link {
16994
16962
  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
16995
16963
  }
16996
16964
  [data-mode=dark] .pkt-btn--tertiary--green-dark {
16997
- --pkt-color-button-background-normal: var(
16998
- --pkt-color-brand-dark-green-1000
16999
- );
16965
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
17000
16966
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
17001
16967
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
17002
16968
  }
17003
16969
  [data-mode=dark] .pkt-btn--tertiary--green-dark-outline {
17004
- --pkt-color-button-background-normal: var(
17005
- --pkt-color-brand-neutrals-transparent
17006
- );
16970
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17007
16971
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
17008
16972
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
17009
16973
  }
@@ -17013,9 +16977,7 @@ button.pkt-link {
17013
16977
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17014
16978
  }
17015
16979
  [data-mode=dark] .pkt-btn--tertiary--green-outline {
17016
- --pkt-color-button-background-normal: var(
17017
- --pkt-color-brand-neutrals-transparent
17018
- );
16980
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17019
16981
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
17020
16982
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
17021
16983
  }
@@ -17025,23 +16987,17 @@ button.pkt-link {
17025
16987
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17026
16988
  }
17027
16989
  [data-mode=dark] .pkt-btn--tertiary--blue-outline {
17028
- --pkt-color-button-background-normal: var(
17029
- --pkt-color-brand-neutrals-transparent
17030
- );
16990
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17031
16991
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
17032
16992
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
17033
16993
  }
17034
16994
  [data-mode=dark] .pkt-btn--tertiary--beige-light {
17035
- --pkt-color-button-background-normal: var(
17036
- --pkt-color-brand-light-beige-1000
17037
- );
16995
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
17038
16996
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
17039
16997
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17040
16998
  }
17041
16999
  [data-mode=dark] .pkt-btn--tertiary--beige-dark-outline {
17042
- --pkt-color-button-background-normal: var(
17043
- --pkt-color-brand-neutrals-transparent
17044
- );
17000
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17045
17001
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
17046
17002
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
17047
17003
  }
@@ -17051,9 +17007,7 @@ button.pkt-link {
17051
17007
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17052
17008
  }
17053
17009
  [data-mode=dark] .pkt-btn--tertiary--yellow-outline {
17054
- --pkt-color-button-background-normal: var(
17055
- --pkt-color-brand-neutrals-transparent
17056
- );
17010
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17057
17011
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
17058
17012
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
17059
17013
  }
@@ -17063,9 +17017,7 @@ button.pkt-link {
17063
17017
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17064
17018
  }
17065
17019
  [data-mode=dark] .pkt-btn--tertiary--red-outline {
17066
- --pkt-color-button-background-normal: var(
17067
- --pkt-color-brand-neutrals-transparent
17068
- );
17020
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17069
17021
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
17070
17022
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
17071
17023
  }
@@ -17160,7 +17112,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
17160
17112
  height: 1.5rem;
17161
17113
  width: 1.5rem;
17162
17114
  }
17163
- .pkt-btn--label-only .pkt-btn__icon {
17115
+ .pkt-btn--label-only .pkt-btn__icon:not(.pkt-btn__spinner) {
17164
17116
  display: none;
17165
17117
  }
17166
17118
  .pkt-btn--icon-left {
@@ -17195,16 +17147,12 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
17195
17147
  border: 0;
17196
17148
  }
17197
17149
  .pkt-btn--green-dark {
17198
- --pkt-color-button-background-normal: var(
17199
- --pkt-color-brand-dark-green-1000
17200
- );
17150
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
17201
17151
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
17202
17152
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
17203
17153
  }
17204
17154
  .pkt-btn--green-dark-outline {
17205
- --pkt-color-button-background-normal: var(
17206
- --pkt-color-brand-neutrals-transparent
17207
- );
17155
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17208
17156
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
17209
17157
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17210
17158
  }
@@ -17214,9 +17162,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
17214
17162
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17215
17163
  }
17216
17164
  .pkt-btn--green-outline {
17217
- --pkt-color-button-background-normal: var(
17218
- --pkt-color-brand-neutrals-transparent
17219
- );
17165
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17220
17166
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
17221
17167
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17222
17168
  }
@@ -17226,23 +17172,17 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
17226
17172
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17227
17173
  }
17228
17174
  .pkt-btn--blue-outline {
17229
- --pkt-color-button-background-normal: var(
17230
- --pkt-color-brand-neutrals-transparent
17231
- );
17175
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17232
17176
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
17233
17177
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17234
17178
  }
17235
17179
  .pkt-btn--beige-light {
17236
- --pkt-color-button-background-normal: var(
17237
- --pkt-color-brand-light-beige-1000
17238
- );
17180
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
17239
17181
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
17240
17182
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17241
17183
  }
17242
17184
  .pkt-btn--beige-dark-outline {
17243
- --pkt-color-button-background-normal: var(
17244
- --pkt-color-brand-neutrals-transparent
17245
- );
17185
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17246
17186
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
17247
17187
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17248
17188
  }
@@ -17252,9 +17192,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
17252
17192
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17253
17193
  }
17254
17194
  .pkt-btn--yellow-outline {
17255
- --pkt-color-button-background-normal: var(
17256
- --pkt-color-brand-neutrals-transparent
17257
- );
17195
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17258
17196
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
17259
17197
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17260
17198
  }
@@ -17264,9 +17202,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
17264
17202
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17265
17203
  }
17266
17204
  .pkt-btn--red-outline {
17267
- --pkt-color-button-background-normal: var(
17268
- --pkt-color-brand-neutrals-transparent
17269
- );
17205
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
17270
17206
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
17271
17207
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
17272
17208
  }