@navikt/ds-css 6.13.0 → 6.14.0

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 (29) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/baseline/baseline.css +1 -1
  3. package/baseline/fonts.css +109 -8
  4. package/dist/component/chat.min.css +1 -1
  5. package/dist/component/date.min.css +1 -1
  6. package/dist/component/expansioncard.min.css +1 -1
  7. package/dist/component/form.min.css +1 -1
  8. package/dist/component/index.css +201 -33
  9. package/dist/component/index.min.css +4 -4
  10. package/dist/component/modal.min.css +1 -1
  11. package/dist/component/primitives.css +107 -21
  12. package/dist/component/primitives.min.css +1 -1
  13. package/dist/component/skeleton.min.css +1 -1
  14. package/dist/component/stepper.min.css +1 -1
  15. package/dist/component/timeline.min.css +1 -1
  16. package/dist/component/togglegroup.min.css +1 -1
  17. package/dist/components.css +107 -21
  18. package/dist/components.min.css +2 -2
  19. package/dist/global/baseline.css +1 -1
  20. package/dist/global/baseline.min.css +1 -1
  21. package/dist/global/fonts.css +97 -8
  22. package/dist/global/fonts.min.css +1 -1
  23. package/dist/global/tokens.css +3 -3
  24. package/dist/global/tokens.min.css +1 -1
  25. package/dist/index.css +201 -33
  26. package/dist/index.min.css +4 -4
  27. package/package.json +2 -2
  28. package/primitives/hgrid.css +26 -3
  29. package/primitives/stack.css +81 -18
package/dist/components.css CHANGED
@@ -7765,6 +7765,12 @@ button.navds-stepper__step {
7765
7765
  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
7766
7766
  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
7767
7767
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
7768
+
7769
+ display: grid;
7770
+ grid-template-columns: var(--__ac-hgrid-columns);
7771
+ }
7772
+
7773
+ .navds-hgrid-gap {
7768
7774
  --__ac-hgrid-gap-xs: initial;
7769
7775
  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
7770
7776
  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
@@ -7772,17 +7778,22 @@ button.navds-stepper__step {
7772
7778
  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
7773
7779
  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
7774
7780
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
7775
- --__ac-hgrid-align: initial;
7776
7781
 
7777
- display: grid;
7778
- grid-template-columns: var(--__ac-hgrid-columns);
7779
7782
  gap: var(--__ac-hgrid-gap);
7783
+ }
7784
+
7785
+ .navds-hgrid-align {
7786
+ --__ac-hgrid-align: initial;
7787
+
7780
7788
  align-items: var(--__ac-hgrid-align);
7781
7789
  }
7782
7790
 
7783
7791
  @media (min-width: 480px) {
7784
7792
  .navds-hgrid {
7785
7793
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
7794
+ }
7795
+
7796
+ .navds-hgrid-gap {
7786
7797
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
7787
7798
  }
7788
7799
  }
@@ -7790,6 +7801,9 @@ button.navds-stepper__step {
7790
7801
  @media (min-width: 768px) {
7791
7802
  .navds-hgrid {
7792
7803
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
7804
+ }
7805
+
7806
+ .navds-hgrid-gap {
7793
7807
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
7794
7808
  }
7795
7809
  }
@@ -7797,6 +7811,9 @@ button.navds-stepper__step {
7797
7811
  @media (min-width: 1024px) {
7798
7812
  .navds-hgrid {
7799
7813
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
7814
+ }
7815
+
7816
+ .navds-hgrid-gap {
7800
7817
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
7801
7818
  }
7802
7819
  }
@@ -7804,6 +7821,9 @@ button.navds-stepper__step {
7804
7821
  @media (min-width: 1280px) {
7805
7822
  .navds-hgrid {
7806
7823
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
7824
+ }
7825
+
7826
+ .navds-hgrid-gap {
7807
7827
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
7808
7828
  }
7809
7829
  }
@@ -7811,12 +7831,18 @@ button.navds-stepper__step {
7811
7831
  @media (min-width: 1440px) {
7812
7832
  .navds-hgrid {
7813
7833
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
7834
+ }
7835
+
7836
+ .navds-hgrid-gap {
7814
7837
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
7815
7838
  }
7816
7839
  }
7817
7840
 
7818
7841
  .navds-stack {
7819
- --__ac-stack-wrap: initial;
7842
+ display: flex;
7843
+ }
7844
+
7845
+ .navds-stack-gap {
7820
7846
  --__ac-stack-gap-xs: initial;
7821
7847
  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
7822
7848
  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
@@ -7824,13 +7850,11 @@ button.navds-stepper__step {
7824
7850
  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
7825
7851
  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
7826
7852
  --__ac-stack-gap: var(--__ac-stack-gap-xs);
7827
- --__ac-stack-justify-xs: initial;
7828
- --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
7829
- --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
7830
- --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
7831
- --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
7832
- --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
7833
- --__ac-stack-justify: var(--__ac-stack-justify-xs);
7853
+
7854
+ gap: var(--__ac-stack-gap);
7855
+ }
7856
+
7857
+ .navds-stack-align {
7834
7858
  --__ac-stack-align-xs: initial;
7835
7859
  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
7836
7860
  --__ac-stack-align-md: var(--__ac-stack-align-sm);
@@ -7838,6 +7862,23 @@ button.navds-stepper__step {
7838
7862
  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
7839
7863
  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
7840
7864
  --__ac-stack-align: var(--__ac-stack-align-xs);
7865
+
7866
+ align-items: var(--__ac-stack-align);
7867
+ }
7868
+
7869
+ .navds-stack-justify {
7870
+ --__ac-stack-justify-xs: initial;
7871
+ --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
7872
+ --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
7873
+ --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
7874
+ --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
7875
+ --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
7876
+ --__ac-stack-justify: var(--__ac-stack-justify-xs);
7877
+
7878
+ justify-content: var(--__ac-stack-justify);
7879
+ }
7880
+
7881
+ .navds-stack-direction {
7841
7882
  --__ac-stack-direction-xs: initial;
7842
7883
  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
7843
7884
  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
@@ -7846,11 +7887,11 @@ button.navds-stepper__step {
7846
7887
  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
7847
7888
  --__ac-stack-direction: var(--__ac-stack-direction-xs);
7848
7889
 
7849
- gap: var(--__ac-stack-gap);
7850
- display: flex;
7851
- align-items: var(--__ac-stack-align);
7852
- justify-content: var(--__ac-stack-justify);
7853
- flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
7890
+ flex-direction: var(--__ac-stack-direction);
7891
+ }
7892
+
7893
+ .navds-stack-wrap {
7894
+ flex-wrap: wrap;
7854
7895
  }
7855
7896
 
7856
7897
  .navds-stack__spacer {
@@ -7865,46 +7906,91 @@ button.navds-stepper__step {
7865
7906
  }
7866
7907
 
7867
7908
  @media (min-width: 480px) {
7868
- .navds-stack {
7909
+ .navds-stack-gap {
7869
7910
  --__ac-stack-gap: var(--__ac-stack-gap-sm);
7911
+ }
7912
+
7913
+ .navds-stack-align {
7870
7914
  --__ac-stack-align: var(--__ac-stack-align-sm);
7915
+ }
7916
+
7917
+ .navds-stack-justify {
7871
7918
  --__ac-stack-justify: var(--__ac-stack-justify-sm);
7919
+ }
7920
+
7921
+ .navds-stack-direction {
7872
7922
  --__ac-stack-direction: var(--__ac-stack-direction-sm);
7873
7923
  }
7874
7924
  }
7875
7925
 
7876
7926
  @media (min-width: 768px) {
7877
- .navds-stack {
7927
+ .navds-stack-gap {
7878
7928
  --__ac-stack-gap: var(--__ac-stack-gap-md);
7929
+ }
7930
+
7931
+ .navds-stack-align {
7879
7932
  --__ac-stack-align: var(--__ac-stack-align-md);
7933
+ }
7934
+
7935
+ .navds-stack-justify {
7880
7936
  --__ac-stack-justify: var(--__ac-stack-justify-md);
7937
+ }
7938
+
7939
+ .navds-stack-direction {
7881
7940
  --__ac-stack-direction: var(--__ac-stack-direction-md);
7882
7941
  }
7883
7942
  }
7884
7943
 
7885
7944
  @media (min-width: 1024px) {
7886
- .navds-stack {
7945
+ .navds-stack-gap {
7887
7946
  --__ac-stack-gap: var(--__ac-stack-gap-lg);
7947
+ }
7948
+
7949
+ .navds-stack-align {
7888
7950
  --__ac-stack-align: var(--__ac-stack-align-lg);
7951
+ }
7952
+
7953
+ .navds-stack-justify {
7889
7954
  --__ac-stack-justify: var(--__ac-stack-justify-lg);
7955
+ }
7956
+
7957
+ .navds-stack-direction {
7890
7958
  --__ac-stack-direction: var(--__ac-stack-direction-lg);
7891
7959
  }
7892
7960
  }
7893
7961
 
7894
7962
  @media (min-width: 1280px) {
7895
- .navds-stack {
7963
+ .navds-stack-gap {
7896
7964
  --__ac-stack-gap: var(--__ac-stack-gap-xl);
7965
+ }
7966
+
7967
+ .navds-stack-align {
7897
7968
  --__ac-stack-align: var(--__ac-stack-align-xl);
7969
+ }
7970
+
7971
+ .navds-stack-justify {
7898
7972
  --__ac-stack-justify: var(--__ac-stack-justify-xl);
7973
+ }
7974
+
7975
+ .navds-stack-direction {
7899
7976
  --__ac-stack-direction: var(--__ac-stack-direction-xl);
7900
7977
  }
7901
7978
  }
7902
7979
 
7903
7980
  @media (min-width: 1440px) {
7904
- .navds-stack {
7981
+ .navds-stack-gap {
7905
7982
  --__ac-stack-gap: var(--__ac-stack-gap-2xl);
7983
+ }
7984
+
7985
+ .navds-stack-align {
7906
7986
  --__ac-stack-align: var(--__ac-stack-align-2xl);
7987
+ }
7988
+
7989
+ .navds-stack-justify {
7907
7990
  --__ac-stack-justify: var(--__ac-stack-justify-2xl);
7991
+ }
7992
+
7993
+ .navds-stack-direction {
7908
7994
  --__ac-stack-direction: var(--__ac-stack-direction-2xl);
7909
7995
  }
7910
7996
  }