@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/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/index.css CHANGED
@@ -14,6 +14,7 @@
14
14
  @import "guide-panel.css";
15
15
  @import "form/index.css";
16
16
  @import "help-text.css";
17
+ @import "hgrid.css";
17
18
  @import "internalheader.css";
18
19
  @import "link.css";
19
20
  @import "loader.css";
package/link.css CHANGED
@@ -15,11 +15,7 @@
15
15
  margin: 0.1em 0.1em -0.1em;
16
16
  transform: translateY(0.05em);
17
17
  display: inline;
18
- }
19
-
20
- .navds-link:visited {
21
- /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
22
- color: var(--ac-link-visited-text);
18
+ vertical-align: baseline;
23
19
  }
24
20
 
25
21
  .navds-link:hover {
package/list.css CHANGED
@@ -43,6 +43,13 @@
43
43
  .navds-list__item-marker--icon {
44
44
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
45
45
  color: var(--ac-list-marker-icon-color, var(--ac-list-marker-color, var(--a-icon-default)));
46
+ display: flex;
47
+ align-items: center;
48
+ height: var(--a-font-line-height-medium);
49
+ }
50
+
51
+ .navds-list__item-marker--icon svg {
52
+ flex-shrink: 0;
46
53
  }
47
54
 
48
55
  .navds-list ul .navds-list__item-content {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "4.10.1",
3
+ "version": "4.11.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": "^4.10.1",
30
+ "@navikt/ds-tokens": "^4.11.0",
31
31
  "cssnano": "6.0.0",
32
32
  "fast-glob": "3.2.11",
33
33
  "lodash": "4.17.21",
package/stack.css CHANGED
@@ -1,22 +1,20 @@
1
- /* stylelint-disable csstools/value-no-unknown-custom-properties */
2
- /* stylelint-disable aksel/design-token-exists */
3
1
  .navds-stack {
4
- --ac-stack-align: initial;
5
- --ac-stack-justify: initial;
6
- --ac-stack-direction: initial;
7
- --ac-stack-wrap: initial;
8
- --ac-stack-gap-xs: initial;
9
- --ac-stack-gap-sm: initial;
10
- --ac-stack-gap-md: initial;
11
- --ac-stack-gap-lg: initial;
12
- --ac-stack-gap-xl: initial;
13
- --__ac-stack-gap: var(--ac-stack-gap-xs);
2
+ --__ac-stack-align: initial;
3
+ --__ac-stack-justify: initial;
4
+ --__ac-stack-direction: initial;
5
+ --__ac-stack-wrap: initial;
6
+ --__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;
11
+ --__ac-stack-gap: var(--__ac-stack-gap-xs);
14
12
 
15
13
  gap: var(--__ac-stack-gap);
16
14
  display: flex;
17
- align-items: var(--ac-stack-align);
18
- justify-content: var(--ac-stack-justify);
19
- flex-flow: var(--ac-stack-direction) var(--ac-stack-wrap);
15
+ align-items: var(--__ac-stack-align);
16
+ justify-content: var(--__ac-stack-justify);
17
+ flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
20
18
  }
21
19
 
22
20
  .navds-stack__spacer {
@@ -35,27 +33,27 @@
35
33
 
36
34
  @media (min-width: 480px) {
37
35
  .navds-stack {
38
- --__ac-stack-gap: var(--ac-stack-gap-sm, var(--ac-stack-gap-xs));
36
+ --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
39
37
  }
40
38
  }
41
39
 
42
40
  @media (min-width: 768px) {
43
41
  .navds-stack {
44
- --__ac-stack-gap: var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs)));
42
+ --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
45
43
  }
46
44
  }
47
45
 
48
46
  @media (min-width: 1024px) {
49
47
  .navds-stack {
50
- --__ac-stack-gap: var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))));
48
+ --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
51
49
  }
52
50
  }
53
51
 
54
52
  @media (min-width: 1280px) {
55
53
  .navds-stack {
56
54
  --__ac-stack-gap: var(
57
- --ac-stack-gap-xl,
58
- var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))))
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))))
59
57
  );
60
58
  }
61
59
  }
package/tokens.json CHANGED
@@ -178,8 +178,7 @@
178
178
  "--ac-link-active-border": "--a-border-focus",
179
179
  "--ac-link-action-text": "--a-text-action",
180
180
  "--ac-link-neutral-text": "--a-text-default",
181
- "--ac-link-subtle-text": "--a-text-subtle",
182
- "--ac-link-visited-text": "--a-text-visited"
181
+ "--ac-link-subtle-text": "--a-text-subtle"
183
182
  },
184
183
  "list": {
185
184
  "--ac-list-marker-ul-color": "--ac-list-marker-color",