@navikt/ds-css 5.5.0 → 5.6.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 +22 -0
  2. package/accordion.css +2 -2
  3. package/config/_mappings.js +1 -1
  4. package/date.css +59 -21
  5. package/dist/component/accordion.css +2 -2
  6. package/dist/component/accordion.min.css +1 -1
  7. package/dist/component/date.css +59 -21
  8. package/dist/component/date.min.css +1 -1
  9. package/dist/component/form.css +1 -0
  10. package/dist/component/form.min.css +1 -1
  11. package/dist/component/index.css +230 -138
  12. package/dist/component/index.min.css +3 -33
  13. package/dist/component/primitives.css +175 -112
  14. package/dist/component/primitives.min.css +2 -32
  15. package/dist/component/timeline.css +2 -5
  16. package/dist/component/timeline.min.css +1 -1
  17. package/dist/components.css +239 -140
  18. package/dist/components.min.css +3 -33
  19. package/dist/global/tokens.css +1 -1
  20. package/dist/index.css +230 -138
  21. package/dist/index.min.css +3 -33
  22. package/form/select.css +1 -0
  23. package/package.json +2 -2
  24. package/primitives/bleed.css +87 -0
  25. package/primitives/box.css +33 -75
  26. package/primitives/index.css +1 -0
  27. package/primitives/responsive.css +16 -20
  28. package/primitives/stack.css +38 -17
  29. package/timeline.css +2 -5
package/form/select.css CHANGED
@@ -15,6 +15,7 @@
15
15
 
16
16
  .navds-select__input:hover {
17
17
  border-color: var(--ac-select-hover-bg, var(--a-border-action));
18
+ cursor: pointer;
18
19
  }
19
20
 
20
21
  .navds-select__input:focus-visible {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "5.5.0",
3
+ "version": "5.6.0",
4
4
  "description": "CSS for NAV Designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "keywords": [
@@ -27,7 +27,7 @@
27
27
  "css:get-version": "node config/get-version.js"
28
28
  },
29
29
  "devDependencies": {
30
- "@navikt/ds-tokens": "^5.5.0",
30
+ "@navikt/ds-tokens": "^5.6.0",
31
31
  "cssnano": "6.0.0",
32
32
  "fast-glob": "3.2.11",
33
33
  "lodash": "4.17.21",
package/primitives/bleed.css ADDED
@@ -0,0 +1,87 @@
1
+ .navds-bleed {
2
+ --__ac-bleed-margin-inline-xs: initial;
3
+ --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
4
+ --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
5
+ --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
6
+ --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
7
+ --__ac-bleed-margin-block-xs: initial;
8
+ --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
9
+ --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
10
+ --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
11
+ --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
12
+
13
+ /** defaults */
14
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
15
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
16
+
17
+ margin-inline: var(--__ac-bleed-margin-inline);
18
+ margin-block: var(--__ac-bleed-margin-block);
19
+ }
20
+
21
+ .navds-bleed--padding {
22
+ --__ac-bleed-padding-inline-xs: initial;
23
+ --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
24
+ --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
25
+ --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
26
+ --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
27
+ --__ac-bleed-padding-block-xs: initial;
28
+ --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
29
+ --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
30
+ --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
31
+ --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
32
+
33
+ /** defaults */
34
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
35
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
36
+
37
+ padding-inline: var(--__ac-bleed-padding-inline);
38
+ padding-block: var(--__ac-bleed-padding-block);
39
+ }
40
+
41
+ @media (min-width: 480px) {
42
+ .navds-bleed {
43
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
44
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
45
+ }
46
+
47
+ .navds-bleed--padding {
48
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
49
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
50
+ }
51
+ }
52
+
53
+ @media (min-width: 768px) {
54
+ .navds-bleed {
55
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
56
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
57
+ }
58
+
59
+ .navds-bleed--padding {
60
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
61
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
62
+ }
63
+ }
64
+
65
+ @media (min-width: 1024px) {
66
+ .navds-bleed {
67
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
68
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
69
+ }
70
+
71
+ .navds-bleed--padding {
72
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
73
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
74
+ }
75
+ }
76
+
77
+ @media (min-width: 1280px) {
78
+ .navds-bleed {
79
+ --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
80
+ --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
81
+ }
82
+
83
+ .navds-bleed--padding {
84
+ --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
85
+ --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
86
+ }
87
+ }
package/primitives/box.css CHANGED
@@ -1,19 +1,19 @@
1
1
  .navds-box {
2
2
  --__ac-box-padding-xs: initial;
3
- --__ac-box-padding-sm: initial;
4
- --__ac-box-padding-md: initial;
5
- --__ac-box-padding-lg: initial;
6
- --__ac-box-padding-xl: initial;
7
- --__ac-box-padding-block-xs: initial;
3
+ --__ac-box-padding-sm: var(--__ac-box-padding-xs);
4
+ --__ac-box-padding-md: var(--__ac-box-padding-sm);
5
+ --__ac-box-padding-lg: var(--__ac-box-padding-md);
6
+ --__ac-box-padding-xl: var(--__ac-box-padding-lg);
8
7
  --__ac-box-padding-inline-xs: initial;
9
- --__ac-box-padding-block-sm: initial;
10
- --__ac-box-padding-inline-sm: initial;
11
- --__ac-box-padding-block-md: initial;
12
- --__ac-box-padding-inline-md: initial;
13
- --__ac-box-padding-block-lg: initial;
14
- --__ac-box-padding-inline-lg: initial;
15
- --__ac-box-padding-block-xl: initial;
16
- --__ac-box-padding-inline-xl: initial;
8
+ --__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
9
+ --__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
10
+ --__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
11
+ --__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
12
+ --__ac-box-padding-block-xs: initial;
13
+ --__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
14
+ --__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
15
+ --__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
16
+ --__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
17
17
  --__ac-box-padding: var(--__ac-box-padding-xs);
18
18
  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
19
19
  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
@@ -22,10 +22,10 @@
22
22
  --__ac-box-shadow: initial;
23
23
  --__ac-box-border-width: initial;
24
24
  --__ac-box-border-radius-xs: initial;
25
- --__ac-box-border-radius-sm: initial;
26
- --__ac-box-border-radius-md: initial;
27
- --__ac-box-border-radius-lg: initial;
28
- --__ac-box-border-radius-xl: initial;
25
+ --__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
26
+ --__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
27
+ --__ac-box-border-radius-lg: var(--__ac-box-border-radius-md);
28
+ --__ac-box-border-radius-xl: var(--__ac-box-border-radius-lg);
29
29
  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
30
30
 
31
31
  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
@@ -40,78 +40,36 @@
40
40
 
41
41
  @media (min-width: 480px) {
42
42
  .navds-box {
43
- --__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
44
- --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
45
- --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
46
- --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
43
+ --__ac-box-padding: var(--__ac-box-padding-sm);
44
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
45
+ --__ac-box-padding-block: var(--__ac-box-padding-block-sm);
46
+ --__ac-box-border-radius: var(--__ac-box-border-radius-sm);
47
47
  }
48
48
  }
49
49
 
50
50
  @media (min-width: 768px) {
51
51
  .navds-box {
52
- --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
53
- --__ac-box-padding-inline: var(
54
- --__ac-box-padding-inline-md,
55
- var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
56
- );
57
- --__ac-box-padding-block: var(
58
- --__ac-box-padding-block-md,
59
- var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
60
- );
61
- --__ac-box-border-radius: var(
62
- --__ac-box-border-radius-md,
63
- var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
64
- );
52
+ --__ac-box-padding: var(--__ac-box-padding-md);
53
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
54
+ --__ac-box-padding-block: var(--__ac-box-padding-block-md);
55
+ --__ac-box-border-radius: var(--__ac-box-border-radius-md);
65
56
  }
66
57
  }
67
58
 
68
59
  @media (min-width: 1024px) {
69
60
  .navds-box {
70
- --__ac-box-padding: var(
71
- --__ac-box-padding-lg,
72
- var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
73
- );
74
- --__ac-box-padding-inline: var(
75
- --__ac-box-padding-inline-lg,
76
- var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
77
- );
78
- --__ac-box-padding-block: var(
79
- --__ac-box-padding-block-lg,
80
- var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
81
- );
82
- --__ac-box-border-radius: var(
83
- --__ac-box-border-radius-lg,
84
- var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
85
- );
61
+ --__ac-box-padding: var(--__ac-box-padding-lg);
62
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
63
+ --__ac-box-padding-block: var(--__ac-box-padding-block-lg);
64
+ --__ac-box-border-radius: var(--__ac-box-border-radius-lg);
86
65
  }
87
66
  }
88
67
 
89
68
  @media (min-width: 1280px) {
90
69
  .navds-box {
91
- --__ac-box-padding: var(
92
- --__ac-box-padding-xl,
93
- var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
94
- );
95
- --__ac-box-padding-inline: var(
96
- --__ac-box-padding-inline-xl,
97
- var(
98
- --__ac-box-padding-inline-lg,
99
- var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
100
- )
101
- );
102
- --__ac-box-padding-block: var(
103
- --__ac-box-padding-block-xl,
104
- var(
105
- --__ac-box-padding-block-lg,
106
- var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
107
- )
108
- );
109
- --__ac-box-border-radius: var(
110
- --__ac-box-border-radius-xl,
111
- var(
112
- --__ac-box-border-radius-lg,
113
- var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
114
- )
115
- );
70
+ --__ac-box-padding: var(--__ac-box-padding-xl);
71
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
72
+ --__ac-box-padding-block: var(--__ac-box-padding-block-xl);
73
+ --__ac-box-border-radius: var(--__ac-box-border-radius-xl);
116
74
  }
117
75
  }
package/primitives/index.css CHANGED
@@ -1,4 +1,5 @@
1
1
  @import "box.css";
2
+ @import "bleed.css";
2
3
  @import "hgrid.css";
3
4
  @import "stack.css";
4
5
  @import "responsive.css";
package/primitives/responsive.css CHANGED
@@ -1,51 +1,47 @@
1
- .navds-responsive {
2
- display: none;
3
- }
4
-
5
1
  @media (min-width: 480px) {
6
- .navds-responsive__above--sm {
7
- display: revert;
2
+ .navds-responsive__below--sm {
3
+ display: none !important;
8
4
  }
9
5
  }
10
6
 
11
7
  @media (max-width: 479px) {
12
- .navds-responsive__below--sm {
13
- display: revert;
8
+ .navds-responsive__above--sm {
9
+ display: none !important;
14
10
  }
15
11
  }
16
12
 
17
13
  @media (min-width: 768px) {
18
- .navds-responsive__above--md {
19
- display: revert;
14
+ .navds-responsive__below--md {
15
+ display: none !important;
20
16
  }
21
17
  }
22
18
 
23
19
  @media (max-width: 767px) {
24
- .navds-responsive__below--md {
25
- display: revert;
20
+ .navds-responsive__above--md {
21
+ display: none !important;
26
22
  }
27
23
  }
28
24
 
29
25
  @media (min-width: 1024px) {
30
- .navds-responsive__above--lg {
31
- display: revert;
26
+ .navds-responsive__below--lg {
27
+ display: none !important;
32
28
  }
33
29
  }
34
30
 
35
31
  @media (max-width: 1023px) {
36
- .navds-responsive__below--lg {
37
- display: revert;
32
+ .navds-responsive__above--lg {
33
+ display: none !important;
38
34
  }
39
35
  }
40
36
 
41
37
  @media (min-width: 1280px) {
42
- .navds-responsive__above--xl {
43
- display: revert;
38
+ .navds-responsive__below--xl {
39
+ display: none !important;
44
40
  }
45
41
  }
46
42
 
47
43
  @media (max-width: 1279px) {
48
- .navds-responsive__below--xl {
49
- display: revert;
44
+ .navds-responsive__above--xl {
45
+ display: none !important;
50
46
  }
51
47
  }
package/primitives/stack.css CHANGED
@@ -1,14 +1,29 @@
1
1
  .navds-stack {
2
- --__ac-stack-align: initial;
3
- --__ac-stack-justify: initial;
4
- --__ac-stack-direction: initial;
5
2
  --__ac-stack-wrap: initial;
6
3
  --__ac-stack-gap-xs: initial;
7
- --__ac-stack-gap-sm: initial;
8
- --__ac-stack-gap-md: initial;
9
- --__ac-stack-gap-lg: initial;
10
- --__ac-stack-gap-xl: initial;
4
+ --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
5
+ --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
6
+ --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
7
+ --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
11
8
  --__ac-stack-gap: var(--__ac-stack-gap-xs);
9
+ --__ac-stack-justify-xs: initial;
10
+ --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
11
+ --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
12
+ --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
13
+ --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
14
+ --__ac-stack-justify: var(--__ac-stack-justify-xs);
15
+ --__ac-stack-align-xs: initial;
16
+ --__ac-stack-align-sm: var(--__ac-stack-align-xs);
17
+ --__ac-stack-align-md: var(--__ac-stack-align-sm);
18
+ --__ac-stack-align-lg: var(--__ac-stack-align-md);
19
+ --__ac-stack-align-xl: var(--__ac-stack-align-lg);
20
+ --__ac-stack-align: var(--__ac-stack-align-xs);
21
+ --__ac-stack-direction-xs: initial;
22
+ --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
23
+ --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
24
+ --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
25
+ --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
26
+ --__ac-stack-direction: var(--__ac-stack-direction-xs);
12
27
 
13
28
  gap: var(--__ac-stack-gap);
14
29
  display: flex;
@@ -25,35 +40,41 @@
25
40
 
26
41
  .navds-stack > .navds-stack__spacer {
27
42
  margin-block-start: calc(var(--__ac-stack-gap) * -1);
28
- }
29
-
30
- .navds-hstack > .navds-stack__spacer {
31
43
  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
32
44
  }
33
45
 
34
46
  @media (min-width: 480px) {
35
47
  .navds-stack {
36
- --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
48
+ --__ac-stack-gap: var(--__ac-stack-gap-sm);
49
+ --__ac-stack-align: var(--__ac-stack-align-sm);
50
+ --__ac-stack-justify: var(--__ac-stack-justify-sm);
51
+ --__ac-stack-direction: var(--__ac-stack-direction-sm);
37
52
  }
38
53
  }
39
54
 
40
55
  @media (min-width: 768px) {
41
56
  .navds-stack {
42
- --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
57
+ --__ac-stack-gap: var(--__ac-stack-gap-md);
58
+ --__ac-stack-align: var(--__ac-stack-align-md);
59
+ --__ac-stack-justify: var(--__ac-stack-justify-md);
60
+ --__ac-stack-direction: var(--__ac-stack-direction-md);
43
61
  }
44
62
  }
45
63
 
46
64
  @media (min-width: 1024px) {
47
65
  .navds-stack {
48
- --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
66
+ --__ac-stack-gap: var(--__ac-stack-gap-lg);
67
+ --__ac-stack-align: var(--__ac-stack-align-lg);
68
+ --__ac-stack-justify: var(--__ac-stack-justify-lg);
69
+ --__ac-stack-direction: var(--__ac-stack-direction-lg);
49
70
  }
50
71
  }
51
72
 
52
73
  @media (min-width: 1280px) {
53
74
  .navds-stack {
54
- --__ac-stack-gap: var(
55
- --__ac-stack-gap-xl,
56
- var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))))
57
- );
75
+ --__ac-stack-gap: var(--__ac-stack-gap-xl);
76
+ --__ac-stack-align: var(--__ac-stack-align-xl);
77
+ --__ac-stack-justify: var(--__ac-stack-justify-xl);
78
+ --__ac-stack-direction: var(--__ac-stack-direction-xl);
58
79
  }
59
80
  }
package/timeline.css CHANGED
@@ -337,17 +337,14 @@
337
337
  box-shadow: var(--a-shadow-medium);
338
338
  border: 1px solid;
339
339
  border-color: var(--ac-popover-border, var(--a-border-default));
340
- border-radius: var(--a-border-radius-medium);
340
+ border-radius: var(--a-border-radius-large);
341
+ padding: var(--a-spacing-3);
341
342
  }
342
343
 
343
344
  .navds-timeline__popover:focus {
344
345
  outline: none;
345
346
  }
346
347
 
347
- .navds-timeline__popover-content {
348
- padding: var(--a-spacing-3);
349
- }
350
-
351
348
  .navds-timeline__popover-arrow {
352
349
  position: absolute;
353
350
  z-index: -1;