@navikt/ds-css 4.10.1 → 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 (27) hide show
  1. package/CHANGELOG.md +14 -2
  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 +84 -25
  7. package/dist/component/index.min.css +10 -4
  8. package/dist/component/link.css +1 -5
  9. package/dist/component/link.min.css +1 -1
  10. package/dist/component/list.css +7 -0
  11. package/dist/component/list.min.css +1 -1
  12. package/dist/component/stack.css +25 -20
  13. package/dist/component/stack.min.css +2 -2
  14. package/dist/components.css +76 -24
  15. package/dist/components.min.css +9 -3
  16. package/dist/global/fonts.css +7 -0
  17. package/dist/global/fonts.min.css +1 -1
  18. package/dist/global/tokens.css +1 -1
  19. package/dist/index.css +84 -25
  20. package/dist/index.min.css +10 -4
  21. package/hgrid.css +55 -0
  22. package/index.css +1 -0
  23. package/link.css +1 -5
  24. package/list.css +7 -0
  25. package/package.json +2 -2
  26. package/stack.css +18 -20
  27. package/tokens.json +1 -2
package/CHANGELOG.md CHANGED
@@ -1,10 +1,22 @@
1
1
  # @navikt/ds-css
2
2
 
3
- ## 4.10.1
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
+
15
+ ## 4.10.2
4
16
 
5
17
  ### Patch Changes
6
18
 
7
- - Link: Fikset visited farger og inline SVG-reset ved bruk av tailwind ([`d3bd1202e`](https://github.com/navikt/aksel/commit/d3bd1202eddb23dd3f1f09c3e4086ff3b19737d6))
19
+ - Link: Fikset visited farger og inline SVG-reset ved bruk av tailwind
8
20
 
9
21
  ## 4.10.0
10
22
 
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 14:33:32 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;
@@ -3713,10 +3771,7 @@ button.navds-internalheader__title:active,
3713
3771
  margin: 0.1em 0.1em -0.1em;
3714
3772
  transform: translateY(0.05em);
3715
3773
  display: inline;
3716
- }
3717
- .navds-link:visited {
3718
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
3719
- color: var(--ac-link-visited-text);
3774
+ vertical-align: baseline;
3720
3775
  }
3721
3776
  .navds-link:hover {
3722
3777
  text-decoration: none;
@@ -5052,25 +5107,23 @@ button.navds-internalheader__title:active,
5052
5107
  opacity: 0.4;
5053
5108
  }
5054
5109
  }
5055
- /* stylelint-disable csstools/value-no-unknown-custom-properties */
5056
- /* stylelint-disable aksel/design-token-exists */
5057
5110
  .navds-stack {
5058
- --ac-stack-align: initial;
5059
- --ac-stack-justify: initial;
5060
- --ac-stack-direction: initial;
5061
- --ac-stack-wrap: initial;
5062
- --ac-stack-gap-xs: initial;
5063
- --ac-stack-gap-sm: initial;
5064
- --ac-stack-gap-md: initial;
5065
- --ac-stack-gap-lg: initial;
5066
- --ac-stack-gap-xl: initial;
5067
- --__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);
5068
5121
 
5069
5122
  gap: var(--__ac-stack-gap);
5070
5123
  display: flex;
5071
- align-items: var(--ac-stack-align);
5072
- justify-content: var(--ac-stack-justify);
5073
- 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);
5074
5127
  }
5075
5128
  .navds-stack__spacer {
5076
5129
  flex: 1;
@@ -5085,24 +5138,24 @@ button.navds-internalheader__title:active,
5085
5138
  }
5086
5139
  @media (min-width: 480px) {
5087
5140
  .navds-stack {
5088
- --__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));
5089
5142
  }
5090
5143
  }
5091
5144
  @media (min-width: 768px) {
5092
5145
  .navds-stack {
5093
- --__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)));
5094
5147
  }
5095
5148
  }
5096
5149
  @media (min-width: 1024px) {
5097
5150
  .navds-stack {
5098
- --__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))));
5099
5152
  }
5100
5153
  }
5101
5154
  @media (min-width: 1280px) {
5102
5155
  .navds-stack {
5103
5156
  --__ac-stack-gap: var(
5104
- --ac-stack-gap-xl,
5105
- 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))))
5106
5159
  );
5107
5160
  }
5108
5161
  }
@@ -5669,6 +5722,12 @@ button.navds-stepper__step {
5669
5722
  .navds-list__item-marker--icon {
5670
5723
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
5671
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;
5672
5731
  }
5673
5732
  .navds-list ul .navds-list__item-content {
5674
5733
  grid-column: 2 / 3;