@navikt/ds-css 1.3.27 → 1.3.29

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 +7 -9
  6. package/dist/index.css +194 -513
  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/accordion.css CHANGED
@@ -1,15 +1,9 @@
1
1
  :root,
2
2
  :host {
3
- --navds-accordion-color-text-hover: var(
4
- --navds-semantic-color-interaction-primary
5
- );
3
+ --navds-accordion-color-text-hover: var(--navds-semantic-color-interaction-primary);
6
4
  --navds-accordion-color-border: var(--navds-semantic-color-border);
7
- --navds-accordion-color-border-hover: var(
8
- --navds-semantic-color-interaction-primary
9
- );
10
- --navds-accordion-color-background-open: var(
11
- --navds-semantic-color-interaction-primary-hover-subtle
12
- );
5
+ --navds-accordion-color-border-hover: var(--navds-semantic-color-interaction-primary);
6
+ --navds-accordion-color-background-open: var(--navds-semantic-color-interaction-primary-hover-subtle);
13
7
  }
14
8
 
15
9
  .navds-accordion__item:focus-within {
@@ -56,10 +50,7 @@
56
50
  border-bottom: 2px solid var(--navds-accordion-color-border);
57
51
  }
58
52
 
59
- .navds-accordion__item--open
60
- > .navds-accordion__header:hover
61
- + *
62
- .navds-accordion__content {
53
+ .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
63
54
  border-color: var(--navds-accordion-color-border-hover);
64
55
  }
65
56
 
@@ -69,9 +60,7 @@
69
60
  flex-shrink: 0;
70
61
  }
71
62
 
72
- .navds-accordion__item--open
73
- > .navds-accordion__header
74
- > .navds-accordion__expand-icon {
63
+ .navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
75
64
  transform: rotateZ(180deg);
76
65
  }
77
66
 
@@ -79,8 +68,7 @@
79
68
  display: none;
80
69
  }
81
70
 
82
- .navds-accordion__header:hover
83
- > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
71
+ .navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
84
72
  display: inherit;
85
73
  }
86
74
 
package/alert.css CHANGED
@@ -1,21 +1,13 @@
1
1
  :root,
2
2
  :host {
3
3
  --navds-alert-color-border: var(--navds-semantic-color-border-muted);
4
- --navds-alert-color-error-border: var(
5
- --navds-semantic-color-feedback-danger-border
6
- );
4
+ --navds-alert-color-error-border: var(--navds-semantic-color-feedback-danger-border);
7
5
  --navds-alert-color-error-background: var(--navds-global-color-red-50);
8
- --navds-alert-color-warning-border: var(
9
- --navds-semantic-color-feedback-warning-border
10
- );
6
+ --navds-alert-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
11
7
  --navds-alert-color-warning-background: var(--navds-global-color-orange-50);
12
- --navds-alert-color-info-border: var(
13
- --navds-semantic-color-feedback-info-border
14
- );
8
+ --navds-alert-color-info-border: var(--navds-semantic-color-feedback-info-border);
15
9
  --navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
16
- --navds-alert-color-success-border: var(
17
- --navds-semantic-color-feedback-success-border
18
- );
10
+ --navds-alert-color-success-border: var(--navds-semantic-color-feedback-success-border);
19
11
  --navds-alert-color-success-background: var(--navds-global-color-green-50);
20
12
  }
21
13
 
package/button.css CHANGED
@@ -3,79 +3,35 @@
3
3
  [data-theme="light"] {
4
4
  /* Primary */
5
5
  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
6
- --navds-button-color-primary-border-focus: var(
7
- --navds-semantic-color-text-inverted
8
- );
9
- --navds-button-color-primary-background: var(
10
- --navds-semantic-color-interaction-primary
11
- );
12
- --navds-button-color-primary-background-hover: var(
13
- --navds-semantic-color-interaction-primary-hover
14
- );
15
- --navds-button-color-primary-background-active: var(
16
- --navds-semantic-color-interaction-primary-selected
17
- );
6
+ --navds-button-color-primary-border-focus: var(--navds-semantic-color-text-inverted);
7
+ --navds-button-color-primary-background: var(--navds-semantic-color-interaction-primary);
8
+ --navds-button-color-primary-background-hover: var(--navds-semantic-color-interaction-primary-hover);
9
+ --navds-button-color-primary-background-active: var(--navds-semantic-color-interaction-primary-selected);
18
10
 
19
11
  /* Secondary */
20
- --navds-button-color-secondary-text: var(
21
- --navds-semantic-color-interaction-primary
22
- );
23
- --navds-button-color-secondary-text-hover: var(
24
- --navds-semantic-color-interaction-primary
25
- );
26
- --navds-button-color-secondary-text-active: var(
27
- --navds-semantic-color-text-inverted
28
- );
29
- --navds-button-color-secondary-border: var(
30
- --navds-semantic-color-interaction-primary
31
- );
32
- --navds-button-color-secondary-border-focus-active-hover: var(
33
- --navds-semantic-color-component-background-light
34
- );
35
- --navds-button-color-secondary-background: var(
36
- --navds-semantic-color-component-background-light
37
- );
38
- --navds-button-color-secondary-background-hover: var(
39
- --navds-semantic-color-interaction-primary-hover-subtle
40
- );
41
- --navds-button-color-secondary-background-active: var(
42
- --navds-semantic-color-interaction-primary-selected
43
- );
12
+ --navds-button-color-secondary-text: var(--navds-semantic-color-interaction-primary);
13
+ --navds-button-color-secondary-text-hover: var(--navds-semantic-color-interaction-primary);
14
+ --navds-button-color-secondary-text-active: var(--navds-semantic-color-text-inverted);
15
+ --navds-button-color-secondary-border: var(--navds-semantic-color-interaction-primary);
16
+ --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-component-background-light);
17
+ --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-light);
18
+ --navds-button-color-secondary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
19
+ --navds-button-color-secondary-background-active: var(--navds-semantic-color-interaction-primary-selected);
44
20
 
45
21
  /* Tertiary */
46
- --navds-button-color-tertiary-text: var(
47
- --navds-semantic-color-interaction-primary
48
- );
49
- --navds-button-color-tertiary-text-active: var(
50
- --navds-semantic-color-text-inverted
51
- );
52
- --navds-button-color-tertiary-background-hover: var(
53
- --navds-semantic-color-interaction-primary-hover-subtle
54
- );
55
- --navds-button-color-tertiary-border-focus: var(
56
- --navds-semantic-color-interaction-primary
57
- );
58
- --navds-button-color-tertiary-border-active: var(
59
- --navds-semantic-color-component-background-light
60
- );
61
- --navds-button-color-tertiary-background-active: var(
62
- --navds-semantic-color-interaction-primary-selected
63
- );
22
+ --navds-button-color-tertiary-text: var(--navds-semantic-color-interaction-primary);
23
+ --navds-button-color-tertiary-text-active: var(--navds-semantic-color-text-inverted);
24
+ --navds-button-color-tertiary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
25
+ --navds-button-color-tertiary-border-focus: var(--navds-semantic-color-interaction-primary);
26
+ --navds-button-color-tertiary-border-active: var(--navds-semantic-color-component-background-light);
27
+ --navds-button-color-tertiary-background-active: var(--navds-semantic-color-interaction-primary-selected);
64
28
 
65
29
  /* Danger */
66
30
  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
67
- --navds-button-color-danger-background: var(
68
- --navds-semantic-color-interaction-danger
69
- );
70
- --navds-button-color-danger-background-hover: var(
71
- --navds-semantic-color-interaction-danger-hover
72
- );
73
- --navds-button-color-danger-background-active: var(
74
- --navds-semantic-color-interaction-danger-selected
75
- );
76
- --navds-button-color-danger-border-focus: var(
77
- --navds-semantic-color-component-background-light
78
- );
31
+ --navds-button-color-danger-background: var(--navds-semantic-color-interaction-danger);
32
+ --navds-button-color-danger-background-hover: var(--navds-semantic-color-interaction-danger-hover);
33
+ --navds-button-color-danger-background-active: var(--navds-semantic-color-interaction-danger-selected);
34
+ --navds-button-color-danger-border-focus: var(--navds-semantic-color-component-background-light);
79
35
 
80
36
  /* Loader */
81
37
  --navds-loader-color-on-button-background: rgb(255 255 255 / 0.3);
@@ -87,30 +43,18 @@
87
43
  --navds-button-color-primary-text: var(--navds-semantic-color-text);
88
44
  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
89
45
  --navds-button-color-primary-background: var(--navds-global-color-blue-200);
90
- --navds-button-color-primary-background-hover: var(
91
- --navds-global-color-blue-300
92
- );
93
- --navds-button-color-primary-background-active: var(
94
- --navds-global-color-blue-400
95
- );
46
+ --navds-button-color-primary-background-hover: var(--navds-global-color-blue-300);
47
+ --navds-button-color-primary-background-active: var(--navds-global-color-blue-400);
96
48
 
97
49
  /* Secondary */
98
50
  --navds-button-color-secondary-text: var(--navds-global-color-white);
99
51
  --navds-button-color-secondary-text-hover: var(--navds-global-color-white);
100
52
  --navds-button-color-secondary-text-active: var(--navds-global-color-white);
101
53
  --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
102
- --navds-button-color-secondary-border-focus-active-hover: var(
103
- --navds-semantic-color-text
104
- );
105
- --navds-button-color-secondary-background: var(
106
- --navds-semantic-color-component-background-inverted
107
- );
108
- --navds-button-color-secondary-background-hover: var(
109
- --navds-global-color-gray-800
110
- );
111
- --navds-button-color-secondary-background-active: var(
112
- --navds-global-color-gray-700
113
- );
54
+ --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-text);
55
+ --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-inverted);
56
+ --navds-button-color-secondary-background-hover: var(--navds-global-color-gray-800);
57
+ --navds-button-color-secondary-background-active: var(--navds-global-color-gray-700);
114
58
  }
115
59
 
116
60
  .navds-button {
@@ -202,8 +146,7 @@
202
146
  }
203
147
 
204
148
  .navds-button--primary:focus {
205
- box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
206
- var(--navds-shadow-focus);
149
+ box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus), var(--navds-shadow-focus);
207
150
  }
208
151
 
209
152
  .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
@@ -227,8 +170,7 @@
227
170
  }
228
171
 
229
172
  .navds-button--secondary:focus {
230
- box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
231
- var(--navds-shadow-focus);
173
+ box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border), var(--navds-shadow-focus);
232
174
  }
233
175
 
234
176
  .navds-button--secondary:active {
@@ -238,9 +180,7 @@
238
180
  }
239
181
 
240
182
  .navds-button--secondary:focus:active {
241
- box-shadow: inset 0 0 0 1px
242
- var(--navds-button-color-secondary-border-focus-active-hover),
243
- var(--navds-shadow-focus);
183
+ box-shadow: inset 0 0 0 1px var(--navds-button-color-secondary-border-focus-active-hover), var(--navds-shadow-focus);
244
184
  }
245
185
 
246
186
  .navds-button--secondary:where(:disabled, .navds-button--disabled),
@@ -263,8 +203,7 @@
263
203
  }
264
204
 
265
205
  .navds-button--tertiary:focus {
266
- box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
267
- var(--navds-shadow-focus);
206
+ box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus), var(--navds-shadow-focus);
268
207
  }
269
208
 
270
209
  .navds-button--tertiary:active {
@@ -278,8 +217,7 @@
278
217
  }
279
218
 
280
219
  .navds-button--tertiary:active:focus {
281
- box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
282
- var(--navds-shadow-focus);
220
+ box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active), var(--navds-shadow-focus);
283
221
  }
284
222
 
285
223
  .navds-button--tertiary:where(:disabled, .navds-button--disabled),
@@ -309,8 +247,7 @@
309
247
  }
310
248
 
311
249
  .navds-button--danger:focus {
312
- box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
313
- var(--navds-shadow-focus);
250
+ box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus), var(--navds-shadow-focus);
314
251
  }
315
252
 
316
253
  .navds-button--danger:active:where(:disabled, .navds-button--disabled),
package/chat.css CHANGED
@@ -2,9 +2,7 @@
2
2
  :host {
3
3
  --navds-chat-color-background: var(--navds-semantic-color-canvas-background);
4
4
  --navds-chat-color-avatar: var(--navds-semantic-color-text);
5
- --navds-chat-color-avatar-background: var(
6
- --navds-semantic-color-canvas-background
7
- );
5
+ --navds-chat-color-avatar-background: var(--navds-semantic-color-canvas-background);
8
6
  }
9
7
 
10
8
  .navds-chat {
package/date.css CHANGED
@@ -61,14 +61,12 @@
61
61
 
62
62
  .navds-date .rdp-day_range_start {
63
63
  border-radius: 12px 2px 2px 12px;
64
- border-radius: var(--navds-border-radius-xlarge)
65
- var(--navds-border-radius-small) var(--navds-border-radius-small)
64
+ border-radius: var(--navds-border-radius-xlarge) var(--navds-border-radius-small) var(--navds-border-radius-small)
66
65
  var(--navds-border-radius-xlarge);
67
66
  }
68
67
 
69
68
  .navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
70
- border-radius: var(--navds-border-radius-small)
71
- var(--navds-border-radius-xlarge) var(--navds-border-radius-xlarge)
69
+ border-radius: var(--navds-border-radius-small) var(--navds-border-radius-xlarge) var(--navds-border-radius-xlarge)
72
70
  var(--navds-border-radius-small);
73
71
  }
74
72
 
@@ -77,15 +75,13 @@
77
75
  }
78
76
 
79
77
  .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
80
- .navds-date
81
- .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
78
+ .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
82
79
  box-shadow: var(--navds-shadow-focus);
83
80
  }
84
81
 
85
82
  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
86
83
  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
87
- box-shadow: inset 0 0 0 1px var(--navds-global-color-white),
88
- 0 0 0 3px var(--navds-global-color-blue-800);
84
+ box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 3px var(--navds-global-color-blue-800);
89
85
  }
90
86
 
91
87
  /* Monthpicker */
@@ -144,8 +140,10 @@
144
140
  }
145
141
 
146
142
  .navds-date .rdp-day_disabled {
147
- opacity: 0.7;
148
143
  cursor: not-allowed;
144
+ text-decoration: line-through;
145
+ background-color: var(--navds-global-color-gray-100);
146
+ color: var(--navds-global-color-gray-600);
149
147
  }
150
148
 
151
149
  .navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,