@navikt/ds-css 5.4.0 → 5.5.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 (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/baseline/_utilities.css +2 -0
  3. package/config/_mappings.js +28 -24
  4. package/dist/component/index.css +194 -76
  5. package/dist/component/index.min.css +31 -3
  6. package/dist/component/primitives.css +118 -0
  7. package/dist/component/primitives.min.css +29 -1
  8. package/dist/component/skeleton.css +4 -0
  9. package/dist/component/skeleton.min.css +1 -1
  10. package/dist/components.css +122 -0
  11. package/dist/components.min.css +30 -2
  12. package/dist/global/baseline.css +2 -0
  13. package/dist/global/baseline.min.css +1 -1
  14. package/dist/global/tokens.css +76 -76
  15. package/dist/global/tokens.min.css +1 -1
  16. package/dist/index.css +194 -76
  17. package/dist/index.min.css +31 -3
  18. package/package.json +2 -2
  19. package/primitives/box.css +117 -0
  20. package/primitives/index.css +1 -0
  21. package/skeleton.css +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "5.4.0",
3
+ "version": "5.5.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.4.0",
30
+ "@navikt/ds-tokens": "^5.5.0",
31
31
  "cssnano": "6.0.0",
32
32
  "fast-glob": "3.2.11",
33
33
  "lodash": "4.17.21",
package/primitives/box.css ADDED
@@ -0,0 +1,117 @@
1
+ .navds-box {
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;
8
+ --__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;
17
+ --__ac-box-padding: var(--__ac-box-padding-xs);
18
+ --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
19
+ --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
20
+ --__ac-box-background: initial;
21
+ --__ac-box-border-color: initial;
22
+ --__ac-box-shadow: initial;
23
+ --__ac-box-border-width: initial;
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;
29
+ --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
30
+
31
+ padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
32
+ padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
33
+ background-color: var(--__ac-box-background);
34
+ border-style: solid;
35
+ border-color: var(--__ac-box-border-color);
36
+ border-radius: var(--__ac-box-border-radius);
37
+ box-shadow: var(--__ac-box-shadow);
38
+ border-width: var(--__ac-box-border-width, 0);
39
+ }
40
+
41
+ @media (min-width: 480px) {
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));
47
+ }
48
+ }
49
+
50
+ @media (min-width: 768px) {
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
+ );
65
+ }
66
+ }
67
+
68
+ @media (min-width: 1024px) {
69
+ .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
+ );
86
+ }
87
+ }
88
+
89
+ @media (min-width: 1280px) {
90
+ .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
+ );
116
+ }
117
+ }
package/primitives/index.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import "box.css";
1
2
  @import "hgrid.css";
2
3
  @import "stack.css";
3
4
  @import "responsive.css";
package/skeleton.css CHANGED
@@ -5,6 +5,10 @@
5
5
  pointer-events: none;
6
6
  }
7
7
 
8
+ .navds-skeleton--inline {
9
+ display: inline-block;
10
+ }
11
+
8
12
  .navds-skeleton--has-children {
9
13
  color: transparent;
10
14
  }