@navikt/ds-css 7.5.3 → 7.7.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 (56) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/darkside/action-menu.darkside.css +1 -6
  3. package/darkside/alert.darkside.css +2 -2
  4. package/darkside/button.darkside.css +134 -149
  5. package/darkside/chat.darkside.css +2 -2
  6. package/darkside/date.darkside.css +171 -232
  7. package/darkside/expansioncard.darkside.css +3 -9
  8. package/darkside/form/combobox.darkside.css +12 -20
  9. package/darkside/form/error-summary.darkside.css +2 -2
  10. package/darkside/form/file-upload.darkside.css +12 -13
  11. package/darkside/form/form-progress.darkside.css +1 -1
  12. package/darkside/form/form-summary.darkside.css +3 -2
  13. package/darkside/form/index.css +14 -16
  14. package/darkside/form/search.darkside.css +82 -160
  15. package/darkside/form/select.darkside.css +74 -68
  16. package/darkside/form/switch.darkside.css +125 -132
  17. package/darkside/form/text-field.darkside.css +2 -2
  18. package/darkside/form/textarea.darkside.css +36 -78
  19. package/darkside/help-text.darkside.css +0 -6
  20. package/darkside/index.css +23 -14
  21. package/darkside/internalheader.darkside.css +45 -49
  22. package/darkside/modal.darkside.css +7 -10
  23. package/darkside/popover.darkside.css +2 -5
  24. package/darkside/primitives/base.darkside.css +350 -350
  25. package/darkside/primitives/bleed.darkside.css +52 -52
  26. package/darkside/primitives/box.darkside.css +21 -21
  27. package/darkside/primitives/hgrid.darkside.css +28 -28
  28. package/darkside/primitives/index.css +7 -36
  29. package/darkside/primitives/page.darkside.css +6 -9
  30. package/darkside/primitives/stack.darkside.css +58 -58
  31. package/darkside/read-more.darkside.css +68 -57
  32. package/darkside/skeleton.darkside.css +21 -24
  33. package/darkside/stepper.darkside.css +181 -221
  34. package/darkside/tabs.darkside.css +67 -74
  35. package/darkside/toggle-group.darkside.css +52 -120
  36. package/dist/component/form.css +22 -18
  37. package/dist/component/form.min.css +2 -2
  38. package/dist/component/index.css +40 -22
  39. package/dist/component/index.min.css +3 -3
  40. package/dist/component/modal.css +8 -0
  41. package/dist/component/modal.min.css +1 -1
  42. package/dist/component/readmore.css +4 -0
  43. package/dist/component/readmore.min.css +1 -1
  44. package/dist/components.css +40 -22
  45. package/dist/components.min.css +3 -3
  46. package/dist/global/tokens.css +1 -1
  47. package/dist/global/tokens.min.css +1 -1
  48. package/dist/index.css +40 -22
  49. package/dist/index.min.css +3 -3
  50. package/form/combobox.css +9 -2
  51. package/form/file-upload.css +7 -9
  52. package/form/select.css +2 -9
  53. package/form/switch.css +8 -0
  54. package/modal.css +8 -0
  55. package/package.json +2 -2
  56. package/read-more.css +4 -0
package/darkside/internalheader.darkside.css CHANGED
@@ -1,10 +1,9 @@
1
1
  .navds-internalheader {
2
2
  display: flex;
3
3
  align-self: stretch;
4
- background: var(--ac-internalheader-bg, var(--a-surface-inverted));
4
+ background: var(--ax-bg-raised);
5
5
  min-height: 3rem;
6
-
7
- --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
6
+ border-bottom: 1px solid var(--ax-border-subtleA);
8
7
  }
9
8
 
10
9
  @media (forced-colors: active) {
@@ -13,18 +12,6 @@
13
12
  border: solid 1px ButtonText;
14
13
  color: ButtonText;
15
14
  }
16
-
17
- .navds-internalheader a:focus-visible {
18
- box-shadow: none;
19
- outline: 2px solid highlight;
20
- outline-offset: 2px;
21
- }
22
-
23
- .navds-internalheader .navds-internalheader__button:focus-visible {
24
- box-shadow: none;
25
- outline: 2px solid highlight;
26
- outline-offset: 2px;
27
- }
28
15
  }
29
16
 
30
17
  .navds-internalheader__title {
@@ -32,25 +19,34 @@
32
19
  overflow: visible;
33
20
  background: transparent;
34
21
  font: inherit;
35
- font-weight: var(--a-font-weight-bold);
22
+ font-weight: var(--ax-font-weight-bold);
36
23
  line-height: normal;
37
24
  text-align: left;
38
- padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
39
- border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
25
+ padding-block: 0;
26
+ padding-inline: var(--ax-spacing-6) var(--ax-spacing-5);
27
+ border-right: 1px solid var(--ax-border-subtleA);
40
28
  display: flex;
41
29
  align-items: center;
42
30
  text-decoration: none;
43
31
  margin: 0;
44
- color: var(--ac-internalheader-text, var(--a-text-on-inverted));
45
- }
32
+ color: var(--ax-text-default);
46
33
 
47
- button.navds-internalheader__title {
48
- cursor: pointer;
34
+ &:is(button) {
35
+ cursor: pointer;
36
+ }
37
+
38
+ &:hover {
39
+ background: var(--ax-bg-neutral-moderate-hover);
40
+ }
41
+
42
+ &:is(:hover, :active):not(button, a) {
43
+ background: initial;
44
+ }
49
45
  }
50
46
 
51
47
  .navds-internalheader__user {
52
- padding: 0 var(--a-spacing-5);
53
- border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
48
+ padding: 0 var(--ax-spacing-5);
49
+ border-left: 1px solid var(--ax-border-subtleA);
54
50
  display: flex;
55
51
  align-items: center;
56
52
  }
@@ -58,7 +54,7 @@ button.navds-internalheader__title {
58
54
  .navds-internalheader__button {
59
55
  border: none;
60
56
  margin: 0;
61
- padding: 0 var(--a-spacing-3);
57
+ padding: 0 var(--ax-spacing-3);
62
58
  overflow: visible;
63
59
  background: transparent;
64
60
  font: inherit;
@@ -68,38 +64,38 @@ button.navds-internalheader__title {
68
64
  display: flex;
69
65
  align-items: center;
70
66
  justify-self: center;
71
- gap: var(--a-spacing-2);
72
- border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
73
- color: var(--ac-internalheader-text, var(--a-text-on-inverted));
74
- }
67
+ gap: var(--ax-spacing-2);
68
+ border-left: 1px solid var(--ax-border-subtleA);
69
+ color: var(--ax-text-default);
75
70
 
76
- a.navds-internalheader__title:hover,
77
- button.navds-internalheader__title:hover,
78
- .navds-internalheader__button:hover {
79
- background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
71
+ &:hover {
72
+ background: var(--ax-bg-neutral-moderate-hover);
73
+ }
80
74
  }
81
75
 
82
- .navds-internalheader__title:focus-visible,
83
- .navds-internalheader__button:focus-visible {
84
- box-shadow: var(--navds-internalheader-focus);
85
- outline: none;
76
+ @media (forced-colors: active) {
77
+ .navds-internalheader__button:hover {
78
+ background-color: highlighttext;
79
+ border-color: highlight;
80
+ color: highlight;
81
+ outline: 1px solid highlight;
82
+ isolation: isolate;
83
+ }
86
84
  }
87
85
 
88
- @supports not selector(:focus-visible) {
89
- .navds-internalheader__title:focus,
90
- .navds-internalheader__button:focus {
91
- box-shadow: var(--navds-internalheader-focus);
92
- outline: none;
86
+ .navds-internalheader__title,
87
+ .navds-internalheader__button {
88
+ &:focus-visible {
89
+ outline: 3px solid var(--ax-border-focus);
90
+ outline-offset: -3px;
93
91
  }
94
- }
95
92
 
96
- a.navds-internalheader__title:active,
97
- button.navds-internalheader__title:active,
98
- .navds-internalheader__button:active {
99
- background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
93
+ &:active {
94
+ background: var(--ax-bg-neutral-moderate-pressed);
95
+ }
100
96
  }
101
97
 
102
98
  .navds-internalheader__user-button {
103
- padding-left: var(--a-spacing-5);
104
- gap: var(--a-spacing-4);
99
+ padding-left: var(--ax-spacing-5);
100
+ gap: var(--ax-spacing-4);
105
101
  }
package/darkside/modal.darkside.css CHANGED
@@ -8,10 +8,7 @@
8
8
  background-color: var(--__axc-modal-bg);
9
9
  border: 1px solid var(--ax-border-subtleA);
10
10
  border-radius: var(--ax-border-radius-xlarge);
11
- box-shadow:
12
- 0 0 1px 0 rgb(0 0 0/ 0.08),
13
- 0 2px 5px 0 rgb(0 0 0/ 0.15),
14
- 0 10px 24px 0 rgb(0 0 0/ 0.18);
11
+ box-shadow: var(--ax-shadow-dialog);
15
12
  padding: 0;
16
13
  position: fixed;
17
14
  max-height: 100%;
@@ -63,15 +60,15 @@
63
60
  width: 450px;
64
61
 
65
62
  & .navds-modal__header {
66
- padding: var(--ax-spacing-4) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-4);
63
+ padding: var(--ax-spacing-3) var(--ax-spacing-4);
67
64
  }
68
65
 
69
66
  & .navds-modal__body {
70
- padding: var(--ax-spacing-2) var(--ax-spacing-4) var(--ax-spacing-4);
67
+ padding: var(--ax-spacing-3) var(--ax-spacing-4);
71
68
  }
72
69
 
73
70
  & .navds-modal__footer {
74
- padding: var(--ax-spacing-4);
71
+ padding: var(--ax-spacing-3) var(--ax-spacing-4);
75
72
  }
76
73
  }
77
74
 
@@ -124,7 +121,7 @@
124
121
  }
125
122
 
126
123
  .navds-modal__header {
127
- padding: var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-4) var(--ax-spacing-6);
124
+ padding: var(--ax-spacing-4) var(--ax-spacing-5);
128
125
  }
129
126
 
130
127
  .navds-modal__header-icon {
@@ -141,7 +138,7 @@
141
138
  }
142
139
 
143
140
  .navds-modal__body {
144
- padding: var(--ax-spacing-6);
141
+ padding: var(--ax-spacing-4) var(--ax-spacing-5);
145
142
  overflow: auto;
146
143
  overscroll-behavior: contain;
147
144
  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
@@ -167,7 +164,7 @@
167
164
  display: flex;
168
165
  flex-flow: row-reverse wrap;
169
166
  gap: var(--ax-spacing-4);
170
- padding: var(--ax-spacing-4) var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-6);
167
+ padding: var(--ax-spacing-4) var(--ax-spacing-5);
171
168
  }
172
169
 
173
170
  .navds-modal__footer :nth-of-type(2) {
package/darkside/popover.darkside.css CHANGED
@@ -1,10 +1,7 @@
1
1
  .navds-popover {
2
2
  z-index: 1000;
3
3
  background: var(--ax-bg-raised);
4
- box-shadow:
5
- 0 0 1px 0 rgba(7 9 13/ 0.02),
6
- 0 2px 5px 0 rgba(7 9 13/ 0.1),
7
- 0 5px 12px 0 rgba(7 9 13/ 0.12);
4
+ box-shadow: var(--ax-shadow-dialog);
8
5
  border: 1px solid var(--ax-border-subtleA);
9
6
  border-radius: var(--ax-border-radius-xlarge);
10
7
 
@@ -13,7 +10,7 @@
13
10
  }
14
11
 
15
12
  .navds-popover__content {
16
- padding: var(--ax-spacing-4);
13
+ padding: var(--ax-spacing-4) var(--ax-spacing-5);
17
14
  }
18
15
 
19
16
  .navds-popover--hidden {