@navikt/ds-css 1.3.28 → 1.3.30

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 (30) hide show
  1. package/accordion.css +6 -18
  2. package/alert.css +4 -12
  3. package/button.css +34 -97
  4. package/chat.css +1 -3
  5. package/date.css +4 -8
  6. package/dist/index.css +191 -512
  7. package/form/confirmation-panel.css +6 -18
  8. package/form/error-summary.css +2 -6
  9. package/form/radio-checkbox.css +18 -45
  10. package/form/search.css +8 -17
  11. package/form/select.css +5 -15
  12. package/form/switch.css +17 -49
  13. package/form/text-field.css +9 -25
  14. package/form/textarea.css +7 -20
  15. package/guide-panel.css +2 -6
  16. package/help-text.css +9 -24
  17. package/link-panel.css +1 -3
  18. package/loader.css +1 -3
  19. package/modal.css +1 -3
  20. package/package.json +3 -3
  21. package/pagination.css +5 -12
  22. package/panel.css +1 -3
  23. package/popover.css +1 -3
  24. package/read-more.css +3 -7
  25. package/stepper.css +14 -30
  26. package/table.css +11 -28
  27. package/tag.css +9 -27
  28. package/toggle-group.css +8 -23
  29. package/tooltip.css +1 -2
  30. package/typography.css +1 -3
package/read-more.css CHANGED
@@ -8,8 +8,7 @@
8
8
  gap: 0.125rem;
9
9
  color: var(--navds-semantic-color-link);
10
10
  border-radius: var(--navds-border-radius-small);
11
- padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1)
12
- 2px;
11
+ padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1) 2px;
13
12
  text-align: start;
14
13
  }
15
14
 
@@ -47,9 +46,7 @@
47
46
  height: 1.25rem;
48
47
  }
49
48
 
50
- .navds-read-more--open
51
- > .navds-read-more__button
52
- > .navds-read-more__expand-icon {
49
+ .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
53
50
  transform: rotate(-180deg);
54
51
  }
55
52
 
@@ -57,8 +54,7 @@
57
54
  display: none;
58
55
  }
59
56
 
60
- .navds-read-more__button:hover
61
- > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
57
+ .navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
62
58
  display: inherit;
63
59
  }
64
60
 
package/stepper.css CHANGED
@@ -36,8 +36,7 @@
36
36
  grid-column: 1;
37
37
  }
38
38
 
39
- .navds-stepper__step--behind.navds-stepper__step--completed
40
- + .navds-stepper__line {
39
+ .navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
41
40
  background-color: var(--navds-global-color-blue-500);
42
41
  }
43
42
 
@@ -64,8 +63,7 @@
64
63
  text-decoration: none;
65
64
  cursor: pointer;
66
65
  padding: var(--navds-stepper-border-width);
67
- margin: calc(var(--navds-stepper-border-width) * -1)
68
- calc(var(--navds-stepper-border-width) * -1) 1.75rem;
66
+ margin: calc(var(--navds-stepper-border-width) * -1) calc(var(--navds-stepper-border-width) * -1) 1.75rem;
69
67
  }
70
68
 
71
69
  button.navds-stepper__step {
@@ -117,9 +115,7 @@ button.navds-stepper__step {
117
115
  :where(.navds-stepper--horizontal) .navds-stepper__item {
118
116
  flex: 1 1 100%;
119
117
  grid-template-columns:
120
- [line-1-start] 1fr [step-start] auto [line-1-end] var(
121
- --navds-stepper-circle-size
122
- )
118
+ [line-1-start] 1fr [step-start] auto [line-1-end] var(--navds-stepper-circle-size)
123
119
  [line-2-start] auto [step-end] 1fr [line-2-end];
124
120
  grid-template-rows: var(--navds-stepper-circle-size) auto;
125
121
  }
@@ -141,10 +137,8 @@ button.navds-stepper__step {
141
137
  grid-column: line-2;
142
138
  }
143
139
 
144
- :where(.navds-stepper--horizontal .navds-stepper__item:first-of-type)
145
- .navds-stepper__line--1,
146
- :where(.navds-stepper--horizontal .navds-stepper__item:last-of-type)
147
- .navds-stepper__line--2 {
140
+ :where(.navds-stepper--horizontal .navds-stepper__item:first-of-type) .navds-stepper__line--1,
141
+ :where(.navds-stepper--horizontal .navds-stepper__item:last-of-type) .navds-stepper__line--2 {
148
142
  visibility: hidden;
149
143
  }
150
144
 
@@ -181,8 +175,7 @@ button.navds-stepper__step {
181
175
  text-decoration: underline;
182
176
  }
183
177
 
184
- :where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover)
185
- .navds-stepper__content {
178
+ :where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover) .navds-stepper__content {
186
179
  text-decoration: none;
187
180
  }
188
181
 
@@ -192,26 +185,20 @@ button.navds-stepper__step {
192
185
  color: var(--navds-semantic-color-text-inverted);
193
186
  }
194
187
 
195
- :where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
196
- .navds-stepper__circle {
197
- background-color: var(
198
- --navds-semantic-color-interaction-primary-hover-subtle
199
- );
188
+ :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
189
+ background-color: var(--navds-semantic-color-interaction-primary-hover-subtle);
200
190
  }
201
191
 
202
192
  /* Non-interactive */
203
- :where(.navds-stepper__step--non-interactive.navds-stepper__step--active)
204
- .navds-stepper__content {
193
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
205
194
  color: var(--navds-global-color-gray-900);
206
195
  }
207
196
 
208
- .navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed
209
- + .navds-stepper__line {
197
+ .navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
210
198
  background-color: var(--navds-global-color-gray-600);
211
199
  }
212
200
 
213
- :where(.navds-stepper__step--non-interactive.navds-stepper__step--active)
214
- .navds-stepper__circle {
201
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
215
202
  background-color: var(--navds-global-color-gray-900);
216
203
  border-color: var(--navds-global-color-gray-900);
217
204
  color: var(--navds-global-color-white);
@@ -221,18 +208,15 @@ button.navds-stepper__step {
221
208
  background-color: transparent;
222
209
  }
223
210
 
224
- :where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover)
225
- .navds-stepper__circle {
211
+ :where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
226
212
  background-color: var(--navds-global-color-gray-900);
227
213
  }
228
214
 
229
- :where(.navds-stepper__step--completed.navds-stepper__step--active)
230
- .navds-stepper__circle {
215
+ :where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
231
216
  background-color: inherit;
232
217
  color: var(--navds-global-color-deepblue-500);
233
218
  }
234
219
 
235
- :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
236
- .navds-stepper__circle {
220
+ :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
237
221
  color: var(--navds-global-color-gray-900);
238
222
  }
package/table.css CHANGED
@@ -1,18 +1,10 @@
1
1
  :root,
2
2
  :host {
3
3
  --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
4
- --navds-table-row-color-background-hover: var(
5
- --navds-semantic-color-canvas-background
6
- );
7
- --navds-table-row-color-background-selected: var(
8
- --navds-semantic-color-interaction-primary-hover-subtle
9
- );
10
- --navds-table-row-color-background-selected-hover: var(
11
- --navds-global-color-blue-100
12
- );
13
- --navds-table-row-color-background-zebra: var(
14
- --navds-semantic-color-component-background-alternate
15
- );
4
+ --navds-table-row-color-background-hover: var(--navds-semantic-color-canvas-background);
5
+ --navds-table-row-color-background-selected: var(--navds-semantic-color-interaction-primary-hover-subtle);
6
+ --navds-table-row-color-background-selected-hover: var(--navds-global-color-blue-100);
7
+ --navds-table-row-color-background-zebra: var(--navds-semantic-color-component-background-alternate);
16
8
  --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
17
9
  }
18
10
 
@@ -42,27 +34,21 @@
42
34
  background-color: var(--navds-table-row-color-background-selected);
43
35
  }
44
36
 
45
- .navds-table__body
46
- .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
37
+ .navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
47
38
  background-color: var(--navds-table-row-color-background-selected-hover);
48
39
  }
49
40
 
50
- .navds-table--zebra-stripes
51
- .navds-table__body
52
- :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
41
+ .navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
53
42
  background-color: var(--navds-table-row-color-background-zebra);
54
43
  }
55
44
 
56
45
  .navds-table--zebra-stripes
57
46
  .navds-table__body
58
- :where(.navds-table__expandable-row:nth-child(4n
59
- + 1):not(.navds-table__row--selected)) {
47
+ :where(.navds-table__expandable-row:nth-child(4n + 1):not(.navds-table__row--selected)) {
60
48
  background-color: transparent;
61
49
  }
62
50
 
63
- .navds-table--zebra-stripes
64
- .navds-table__body
65
- .navds-table__expanded-row:nth-child(4n) {
51
+ .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
66
52
  background-color: var(--navds-table-row-color-background-zebra);
67
53
  }
68
54
 
@@ -89,10 +75,8 @@
89
75
  text-align: center;
90
76
  }
91
77
 
92
- :where(.navds-table__body .navds-table__row--shade-on-hover:hover)
93
- .navds-table__header-cell,
94
- :where(.navds-table__body .navds-table__row--shade-on-hover:hover)
95
- .navds-table__data-cell {
78
+ :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
79
+ :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
96
80
  border-color: var(--navds-table-cell-color-border-hover);
97
81
  }
98
82
 
@@ -168,8 +152,7 @@
168
152
  flex-shrink: 0;
169
153
  }
170
154
 
171
- .navds-table__expandable-row:not(.navds-table__expandable-row--open)
172
- .navds-table__data-cell {
155
+ .navds-table__expandable-row:not(.navds-table__expandable-row--open) .navds-table__data-cell {
173
156
  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
174
157
  }
175
158
 
package/tag.css CHANGED
@@ -1,33 +1,15 @@
1
1
  :root,
2
2
  :host {
3
3
  --navds-tag-color-border: var(--navds-semantic-color-border-muted);
4
- --navds-tag-color-background: var(
5
- --navds-semantic-color-component-background-alternate
6
- );
7
- --navds-tag-color-info-background: var(
8
- --navds-semantic-color-feedback-info-background
9
- );
10
- --navds-tag-color-info-border: var(
11
- --navds-semantic-color-feedback-info-border
12
- );
13
- --navds-tag-color-warning-background: var(
14
- --navds-semantic-color-feedback-warning-background
15
- );
16
- --navds-tag-color-warning-border: var(
17
- --navds-semantic-color-feedback-warning-border
18
- );
19
- --navds-tag-color-success-background: var(
20
- --navds-semantic-color-feedback-success-background
21
- );
22
- --navds-tag-color-success-border: var(
23
- --navds-semantic-color-feedback-success-border
24
- );
25
- --navds-tag-color-error-background: var(
26
- --navds-semantic-color-feedback-danger-background
27
- );
28
- --navds-tag-color-error-border: var(
29
- --navds-semantic-color-feedback-danger-border
30
- );
4
+ --navds-tag-color-background: var(--navds-semantic-color-component-background-alternate);
5
+ --navds-tag-color-info-background: var(--navds-semantic-color-feedback-info-background);
6
+ --navds-tag-color-info-border: var(--navds-semantic-color-feedback-info-border);
7
+ --navds-tag-color-warning-background: var(--navds-semantic-color-feedback-warning-background);
8
+ --navds-tag-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
9
+ --navds-tag-color-success-background: var(--navds-semantic-color-feedback-success-background);
10
+ --navds-tag-color-success-border: var(--navds-semantic-color-feedback-success-border);
11
+ --navds-tag-color-error-background: var(--navds-semantic-color-feedback-danger-background);
12
+ --navds-tag-color-error-border: var(--navds-semantic-color-feedback-danger-border);
31
13
  }
32
14
 
33
15
  .navds-tag {
package/toggle-group.css CHANGED
@@ -1,22 +1,12 @@
1
1
  :root,
2
2
  :host {
3
- --navds-toggle-group-color-background: var(
4
- --navds-semantic-color-component-background-light
5
- );
3
+ --navds-toggle-group-color-background: var(--navds-semantic-color-component-background-light);
6
4
  --navds-toggle-group-color-text: var(--navds-semantic-color-text);
7
5
  --navds-toggle-group-color-border: var(--navds-semantic-color-divider);
8
- --navds-toggle-group-color-background-hover: var(
9
- --navds-semantic-color-interaction-primary-hover-subtle
10
- );
11
- --navds-toggle-group-color-text-hover: var(
12
- --navds-semantic-color-interaction-primary
13
- );
14
- --navds-toggle-group-color-background-pressed: var(
15
- --navds-semantic-color-interaction-primary-selected
16
- );
17
- --navds-toggle-group-color-text-pressed: var(
18
- --navds-semantic-color-text-inverted
19
- );
6
+ --navds-toggle-group-color-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
7
+ --navds-toggle-group-color-text-hover: var(--navds-semantic-color-interaction-primary);
8
+ --navds-toggle-group-color-background-pressed: var(--navds-semantic-color-interaction-primary-selected);
9
+ --navds-toggle-group-color-text-pressed: var(--navds-semantic-color-text-inverted);
20
10
  }
21
11
 
22
12
  .navds-toggle-group__wrapper {
@@ -57,13 +47,11 @@
57
47
 
58
48
  .navds-toggle-group__button:focus {
59
49
  outline: none;
60
- box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background),
61
- 0 0 0 4px var(--navds-semantic-color-focus);
50
+ box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background), 0 0 0 4px var(--navds-semantic-color-focus);
62
51
  }
63
52
 
64
53
  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
65
- box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover),
66
- 0 0 0 4px var(--navds-semantic-color-focus);
54
+ box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover), 0 0 0 4px var(--navds-semantic-color-focus);
67
55
  }
68
56
 
69
57
  .navds-toggle-group__button-inner {
@@ -92,9 +80,6 @@
92
80
  font-size: 1.5rem;
93
81
  }
94
82
 
95
- .navds-toggle-group--small
96
- > .navds-toggle-group__button
97
- > .navds-toggle-group__button-inner
98
- > svg {
83
+ .navds-toggle-group--small > .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
99
84
  font-size: 1.125rem;
100
85
  }
package/tooltip.css CHANGED
@@ -15,8 +15,7 @@
15
15
  border-radius: var(--navds-border-radius-small);
16
16
  padding: 0 var(--navds-spacing-2);
17
17
  align-items: center;
18
- filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1))
19
- drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
18
+ filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
20
19
  display: flex;
21
20
  flex-direction: column;
22
21
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
package/typography.css CHANGED
@@ -1,9 +1,7 @@
1
1
  :root,
2
2
  :host,
3
3
  [data-theme="light"] {
4
- --navds-error-message-color-text: var(
5
- --navds-semantic-color-feedback-danger-text
6
- );
4
+ --navds-error-message-color-text: var(--navds-semantic-color-feedback-danger-text);
7
5
  }
8
6
 
9
7
  [data-theme="dark"] {