@navikt/ds-css 4.10.2 → 4.11.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 (23) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/baseline/fonts.css +7 -0
  3. package/config/_mappings.js +4 -0
  4. package/dist/component/hgrid.css +55 -0
  5. package/dist/component/hgrid.min.css +7 -0
  6. package/dist/component/index.css +83 -21
  7. package/dist/component/index.min.css +10 -4
  8. package/dist/component/list.css +7 -0
  9. package/dist/component/list.min.css +1 -1
  10. package/dist/component/stack.css +25 -20
  11. package/dist/component/stack.min.css +2 -2
  12. package/dist/components.css +75 -20
  13. package/dist/components.min.css +9 -3
  14. package/dist/global/fonts.css +7 -0
  15. package/dist/global/fonts.min.css +1 -1
  16. package/dist/global/tokens.css +1 -1
  17. package/dist/index.css +83 -21
  18. package/dist/index.min.css +10 -4
  19. package/hgrid.css +55 -0
  20. package/index.css +1 -0
  21. package/list.css +7 -0
  22. package/package.json +2 -2
  23. package/stack.css +18 -20
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 4.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
8
+
9
+ ### Patch Changes
10
+
11
+ - List: Fikset alignment av ikoner ([#2149](https://github.com/navikt/aksel/pull/2149))
12
+
13
+ - Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))
14
+
3
15
  ## 4.10.2
4
16
 
5
17
  ### Patch Changes
package/baseline/fonts.css CHANGED
@@ -5,6 +5,13 @@
5
5
  font-display: swap;
6
6
  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
7
7
  }
8
+ @font-face {
9
+ font-family: "Source Sans Pro";
10
+ font-style: italic;
11
+ font-weight: 600;
12
+ font-display: swap;
13
+ src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin-semibold") format("woff2");
14
+ }
8
15
  @font-face {
9
16
  font-family: "Source Sans Pro";
10
17
  font-style: normal;
package/config/_mappings.js CHANGED
@@ -99,6 +99,10 @@ const StyleMappings = {
99
99
  main: "help-text.css",
100
100
  dependencies: ["popover.css"],
101
101
  },
102
+ {
103
+ component: "HGrid",
104
+ main: "hgrid.css",
105
+ },
102
106
  { component: "Ingress", main: typoCss },
103
107
  {
104
108
  component: "InternalHeader",
package/dist/component/hgrid.css ADDED
@@ -0,0 +1,55 @@
1
+ .navds-hgrid {
2
+ --__ac-hgrid-columns-xs: initial;
3
+ --__ac-hgrid-columns-sm: initial;
4
+ --__ac-hgrid-columns-md: initial;
5
+ --__ac-hgrid-columns-lg: initial;
6
+ --__ac-hgrid-columns-xl: initial;
7
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
8
+ --__ac-hgrid-gap-xs: initial;
9
+ --__ac-hgrid-gap-sm: initial;
10
+ --__ac-hgrid-gap-md: initial;
11
+ --__ac-hgrid-gap-lg: initial;
12
+ --__ac-hgrid-gap-xl: initial;
13
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
14
+
15
+ display: grid;
16
+ grid-template-columns: var(--__ac-hgrid-columns);
17
+ gap: var(--__ac-hgrid-gap);
18
+ }
19
+
20
+ @media (min-width: 480px) {
21
+ .navds-hgrid {
22
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
23
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
24
+ }
25
+ }
26
+
27
+ @media (min-width: 768px) {
28
+ .navds-hgrid {
29
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
30
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
31
+ }
32
+ }
33
+
34
+ @media (min-width: 1024px) {
35
+ .navds-hgrid {
36
+ --__ac-hgrid-columns: var(
37
+ --__ac-hgrid-columns-lg,
38
+ var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
39
+ );
40
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
41
+ }
42
+ }
43
+
44
+ @media (min-width: 1280px) {
45
+ .navds-hgrid {
46
+ --__ac-hgrid-columns: var(
47
+ --__ac-hgrid-columns-xl,
48
+ var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
49
+ );
50
+ --__ac-hgrid-gap: var(
51
+ --__ac-hgrid-gap-xl,
52
+ var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
53
+ );
54
+ }
55
+ }
package/dist/component/hgrid.min.css ADDED
@@ -0,0 +1,7 @@
1
+ .navds-hgrid{--__ac-hgrid-columns-xs:initial;--__ac-hgrid-columns-sm:initial;--__ac-hgrid-columns-md:initial;--__ac-hgrid-columns-lg:initial;--__ac-hgrid-columns-xl:initial;--__ac-hgrid-columns:var(--__ac-hgrid-columns-xs);--__ac-hgrid-gap-xs:initial;--__ac-hgrid-gap-sm:initial;--__ac-hgrid-gap-md:initial;--__ac-hgrid-gap-lg:initial;--__ac-hgrid-gap-xl:initial;--__ac-hgrid-gap:var(--__ac-hgrid-gap-xs);display:grid;gap:var(--__ac-hgrid-gap);grid-template-columns:var(--__ac-hgrid-columns)}@media (min-width:480px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs));--__ac-hgrid-gap:var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))}}@media (min-width:768px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)));--__ac-hgrid-gap:var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs)))}}@media (min-width:1024px){.navds-hgrid{--__ac-hgrid-columns:var(
2
+ --__ac-hgrid-columns-lg,var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)))
3
+ );--__ac-hgrid-gap:var(--__ac-hgrid-gap-lg,var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))))}}@media (min-width:1280px){.navds-hgrid{--__ac-hgrid-columns:var(
4
+ --__ac-hgrid-columns-xl,var(--__ac-hgrid-columns-lg,var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs))))
5
+ );--__ac-hgrid-gap:var(
6
+ --__ac-hgrid-gap-xl,var(--__ac-hgrid-gap-lg,var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))))
7
+ )}}
package/dist/component/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Wed, 09 Aug 2023 15:09:23 GMT
4
+ * Generated on Fri, 11 Aug 2023 14:02:12 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -548,6 +548,13 @@ template {
548
548
  font-display: swap;
549
549
  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
550
550
  }
551
+ @font-face {
552
+ font-family: "Source Sans Pro";
553
+ font-style: italic;
554
+ font-weight: 600;
555
+ font-display: swap;
556
+ src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin-semibold") format("woff2");
557
+ }
551
558
  @font-face {
552
559
  font-family: "Source Sans Pro";
553
560
  font-style: normal;
@@ -3622,6 +3629,57 @@ body,
3622
3629
  display: inherit;
3623
3630
  }
3624
3631
  }
3632
+ .navds-hgrid {
3633
+ --__ac-hgrid-columns-xs: initial;
3634
+ --__ac-hgrid-columns-sm: initial;
3635
+ --__ac-hgrid-columns-md: initial;
3636
+ --__ac-hgrid-columns-lg: initial;
3637
+ --__ac-hgrid-columns-xl: initial;
3638
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
3639
+ --__ac-hgrid-gap-xs: initial;
3640
+ --__ac-hgrid-gap-sm: initial;
3641
+ --__ac-hgrid-gap-md: initial;
3642
+ --__ac-hgrid-gap-lg: initial;
3643
+ --__ac-hgrid-gap-xl: initial;
3644
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
3645
+
3646
+ display: grid;
3647
+ grid-template-columns: var(--__ac-hgrid-columns);
3648
+ gap: var(--__ac-hgrid-gap);
3649
+ }
3650
+ @media (min-width: 480px) {
3651
+ .navds-hgrid {
3652
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
3653
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
3654
+ }
3655
+ }
3656
+ @media (min-width: 768px) {
3657
+ .navds-hgrid {
3658
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
3659
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
3660
+ }
3661
+ }
3662
+ @media (min-width: 1024px) {
3663
+ .navds-hgrid {
3664
+ --__ac-hgrid-columns: var(
3665
+ --__ac-hgrid-columns-lg,
3666
+ var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
3667
+ );
3668
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
3669
+ }
3670
+ }
3671
+ @media (min-width: 1280px) {
3672
+ .navds-hgrid {
3673
+ --__ac-hgrid-columns: var(
3674
+ --__ac-hgrid-columns-xl,
3675
+ var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
3676
+ );
3677
+ --__ac-hgrid-gap: var(
3678
+ --__ac-hgrid-gap-xl,
3679
+ var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
3680
+ );
3681
+ }
3682
+ }
3625
3683
  .navds-internalheader {
3626
3684
  display: flex;
3627
3685
  align-self: stretch;
@@ -5049,25 +5107,23 @@ button.navds-internalheader__title:active,
5049
5107
  opacity: 0.4;
5050
5108
  }
5051
5109
  }
5052
- /* stylelint-disable csstools/value-no-unknown-custom-properties */
5053
- /* stylelint-disable aksel/design-token-exists */
5054
5110
  .navds-stack {
5055
- --ac-stack-align: initial;
5056
- --ac-stack-justify: initial;
5057
- --ac-stack-direction: initial;
5058
- --ac-stack-wrap: initial;
5059
- --ac-stack-gap-xs: initial;
5060
- --ac-stack-gap-sm: initial;
5061
- --ac-stack-gap-md: initial;
5062
- --ac-stack-gap-lg: initial;
5063
- --ac-stack-gap-xl: initial;
5064
- --__ac-stack-gap: var(--ac-stack-gap-xs);
5111
+ --__ac-stack-align: initial;
5112
+ --__ac-stack-justify: initial;
5113
+ --__ac-stack-direction: initial;
5114
+ --__ac-stack-wrap: initial;
5115
+ --__ac-stack-gap-xs: initial;
5116
+ --__ac-stack-gap-sm: initial;
5117
+ --__ac-stack-gap-md: initial;
5118
+ --__ac-stack-gap-lg: initial;
5119
+ --__ac-stack-gap-xl: initial;
5120
+ --__ac-stack-gap: var(--__ac-stack-gap-xs);
5065
5121
 
5066
5122
  gap: var(--__ac-stack-gap);
5067
5123
  display: flex;
5068
- align-items: var(--ac-stack-align);
5069
- justify-content: var(--ac-stack-justify);
5070
- flex-flow: var(--ac-stack-direction) var(--ac-stack-wrap);
5124
+ align-items: var(--__ac-stack-align);
5125
+ justify-content: var(--__ac-stack-justify);
5126
+ flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
5071
5127
  }
5072
5128
  .navds-stack__spacer {
5073
5129
  flex: 1;
@@ -5082,24 +5138,24 @@ button.navds-internalheader__title:active,
5082
5138
  }
5083
5139
  @media (min-width: 480px) {
5084
5140
  .navds-stack {
5085
- --__ac-stack-gap: var(--ac-stack-gap-sm, var(--ac-stack-gap-xs));
5141
+ --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
5086
5142
  }
5087
5143
  }
5088
5144
  @media (min-width: 768px) {
5089
5145
  .navds-stack {
5090
- --__ac-stack-gap: var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs)));
5146
+ --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
5091
5147
  }
5092
5148
  }
5093
5149
  @media (min-width: 1024px) {
5094
5150
  .navds-stack {
5095
- --__ac-stack-gap: var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))));
5151
+ --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
5096
5152
  }
5097
5153
  }
5098
5154
  @media (min-width: 1280px) {
5099
5155
  .navds-stack {
5100
5156
  --__ac-stack-gap: var(
5101
- --ac-stack-gap-xl,
5102
- var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))))
5157
+ --__ac-stack-gap-xl,
5158
+ var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))))
5103
5159
  );
5104
5160
  }
5105
5161
  }
@@ -5666,6 +5722,12 @@ button.navds-stepper__step {
5666
5722
  .navds-list__item-marker--icon {
5667
5723
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
5668
5724
  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
5725
+ display: flex;
5726
+ align-items: center;
5727
+ height: var(--a-font-line-height-medium);
5728
+ }
5729
+ .navds-list__item-marker--icon svg {
5730
+ flex-shrink: 0;
5669
5731
  }
5670
5732
  .navds-list ul .navds-list__item-content {
5671
5733
  grid-column: 2 / 3;