@navikt/ds-css 0.11.4 → 0.12.2

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 (37) hide show
  1. package/accordion-menu.css +8 -6
  2. package/accordion.css +11 -5
  3. package/alert.css +47 -17
  4. package/baseline/baseline.css +2 -2
  5. package/button.css +85 -32
  6. package/card.css +20 -10
  7. package/content-container.css +3 -3
  8. package/dist/index.css +627 -658
  9. package/form/confirmation-panel.css +11 -11
  10. package/form/error-message.css +9 -2
  11. package/form/error-summary.css +6 -2
  12. package/form/fieldset.css +8 -3
  13. package/form/form.css +1 -6
  14. package/form/index.css +1 -4
  15. package/form/radio-checkbox.css +182 -0
  16. package/form/search-field.css +13 -3
  17. package/form/select.css +28 -14
  18. package/form/text-field.css +40 -17
  19. package/form/textarea.css +35 -14
  20. package/grid.css +2 -2
  21. package/guide-panel.css +7 -3
  22. package/help-text.css +20 -8
  23. package/link-panel.css +6 -4
  24. package/link.css +11 -11
  25. package/loader.css +11 -5
  26. package/modal.css +4 -2
  27. package/package.json +3 -3
  28. package/page-header.css +10 -4
  29. package/panel.css +5 -3
  30. package/popover.css +5 -4
  31. package/speech-bubble.css +9 -6
  32. package/table.css +5 -1
  33. package/tag.css +24 -10
  34. package/form/checkbox-group.css +0 -13
  35. package/form/checkbox.css +0 -146
  36. package/form/radio-group.css +0 -13
  37. package/form/radio.css +0 -150
package/accordion-menu.css CHANGED
@@ -1,9 +1,11 @@
1
1
  :root {
2
- --navds-accordion-menu-color-text: var(--navds-color-text-link);
3
- --navds-accordion-menu-color-text-focus: var(--navds-color-darkgray);
4
- --navds-accordion-menu-color-background-hover: var(--navds-color-blue-10);
5
- --navds-accordion-menu-color-text-active: var(--navds-color-text);
6
- --navds-accordion-menu-outline-focus: var(--navds-text-focus);
2
+ --navds-accordion-menu-color-text: var(--navds-semantic-color-link);
3
+ --navds-accordion-menu-color-text-focus: var(--navds-semantic-color-text);
4
+ --navds-accordion-menu-color-background-hover: var(
5
+ --navds-global-color-blue-50
6
+ );
7
+ --navds-accordion-menu-color-text-active: var(--navds-semantic-color-text);
8
+ --navds-accordion-menu-outline-focus: var(--navds-semantic-color-focus);
7
9
  }
8
10
 
9
11
  .navds-accordion-menu__list {
@@ -97,7 +99,7 @@
97
99
  }
98
100
 
99
101
  .navds-accordion-menu-item--active {
100
- box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
102
+ box-shadow: inset 0.5rem 0 var(--navds-semantic-color-link);
101
103
  color: var(--navds-accordion-menu-color-text-active);
102
104
  text-decoration: none;
103
105
  }
package/accordion.css CHANGED
@@ -1,9 +1,15 @@
1
1
  :root {
2
- --navds-accordion-color-text: var(--navds-color-darkgray);
3
- --navds-accordion-color-background: var(--navds-color-background);
4
- --navds-accordion-color-text-hover: var(--navds-color-blue-50);
5
- --navds-accordion-color-border-hover: var(--navds-color-blue-50);
6
- --navds-accordion-color-border-focus: var(--navds-color-background);
2
+ --navds-accordion-color-text: var(--navds-semantic-color-text);
3
+ --navds-accordion-color-background: var(
4
+ ---navds-semantic-color-component-background-light
5
+ );
6
+ --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
7
+ --navds-accordion-color-border-hover: var(
8
+ --navds-semantic-color-interaction-primary
9
+ );
10
+ --navds-accordion-color-border-focus: var(
11
+ ---navds-semantic-color-component-background-light
12
+ );
7
13
  }
8
14
 
9
15
  .navds-accordion .ReactCollapse--collapse {
package/alert.css CHANGED
@@ -1,21 +1,51 @@
1
1
  :root {
2
- --navds-alert-color-border: var(--navds-color-gray-40);
3
- --navds-alert-color-error-border: var(--navds-color-error-border);
4
- --navds-alert-color-error-background: var(--navds-color-error-background);
5
- --navds-alert-color-warning-border: var(--navds-color-warning-border);
6
- --navds-alert-color-warning-background: var(--navds-color-warning-background);
7
- --navds-alert-color-info-border: var(--navds-color-info-border);
8
- --navds-alert-color-info-background: var(--navds-color-info-background);
9
- --navds-alert-color-success-border: var(--navds-color-success-border);
10
- --navds-alert-color-success-background: var(--navds-color-success-background);
11
- --navds-alert-color-error-icon: var(--navds-color-red-60);
12
- --navds-alert-color-error-icon-background: var(--navds-color-white);
13
- --navds-alert-color-warning-icon: var(--navds-color-orange-40);
14
- --navds-alert-color-warning-icon-background: var(--navds-color-darkgray);
15
- --navds-alert-color-info-icon: var(--navds-color-lightblue-70);
16
- --navds-alert-color-info-icon-background: var(--navds-color-white);
17
- --navds-alert-color-success-icon: var(--navds-color-green-70);
18
- --navds-alert-color-success-icon-background: var(--navds-color-white);
2
+ --navds-alert-color-border: var(--navds-semantic-color-border-muted);
3
+ --navds-alert-color-error-border: var(
4
+ --navds-semantic-color-feedback-danger-border
5
+ );
6
+ --navds-alert-color-error-background: var(
7
+ --navds-semantic-color-feedback-danger-background
8
+ );
9
+ --navds-alert-color-warning-border: var(
10
+ --navds-semantic-color-feedback-warning-border
11
+ );
12
+ --navds-alert-color-warning-background: var(
13
+ --navds-semantic-color-feedback-warning-background
14
+ );
15
+ --navds-alert-color-info-border: var(
16
+ --navds-semantic-color-feedback-info-border
17
+ );
18
+ --navds-alert-color-info-background: var(
19
+ --navds-semantic-color-feedback-info-background
20
+ );
21
+ --navds-alert-color-success-border: var(
22
+ --navds-semantic-color-feedback-success-border
23
+ );
24
+ --navds-alert-color-success-background: var(
25
+ --navds-semantic-color-feedback-success-background
26
+ );
27
+ --navds-alert-color-error-icon: var(
28
+ --navds-semantic-color-feedback-danger-icon
29
+ );
30
+ --navds-alert-color-error-icon-background: var(
31
+ --navds-semantic-color-component-background-light
32
+ );
33
+ --navds-alert-color-warning-icon: var(
34
+ --navds-semantic-color-feedback-warning-icon
35
+ );
36
+ --navds-alert-color-warning-icon-background: var(
37
+ --navds-semantic-color-component-background-inverted
38
+ );
39
+ --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
40
+ --navds-alert-color-info-icon-background: var(
41
+ --navds-semantic-color-component-background-light
42
+ );
43
+ --navds-alert-color-success-icon: var(
44
+ --navds-semantic-color-feedback-success-icon
45
+ );
46
+ --navds-alert-color-success-icon-background: var(
47
+ --navds-semantic-color-component-background-light
48
+ );
19
49
  }
20
50
 
21
51
  .navds-alert {
package/baseline/baseline.css CHANGED
@@ -23,12 +23,12 @@ html {
23
23
  body {
24
24
  font-family: var(--navds-font-family);
25
25
  line-height: 1.333;
26
- color: var(--navds-color-text-primary);
26
+ color: var(--navds-semantic-color-text);
27
27
  font-size: 1.125rem;
28
28
  }
29
29
 
30
30
  a {
31
- color: var(--navds-color-text-link);
31
+ color: var(--navds-semantic-color-link);
32
32
  }
33
33
 
34
34
  /* https://web.dev/prefers-reduced-motion/ */
package/button.css CHANGED
@@ -1,53 +1,79 @@
1
1
  :root {
2
2
  /* Primary */
3
- --navds-button-color-primary-text: var(--navds-color-white);
4
- --navds-button-color-primary-border-focus: var(--navds-color-white);
5
- --navds-button-color-primary-background: var(--navds-color-action-default);
3
+ --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
4
+ --navds-button-color-primary-border-focus: var(
5
+ --navds-semantic-color-text-inverted
6
+ );
7
+ --navds-button-color-primary-background: var(
8
+ --navds-semantic-color-interaction-primary
9
+ );
6
10
  --navds-button-color-primary-background-hover: var(
7
- --navds-color-action-hover
11
+ --navds-semantic-color-interaction-primary-hover
8
12
  );
9
13
  --navds-button-color-primary-background-active: var(
10
- --navds-color-action-active
14
+ --navds-semantic-color-interaction-primary-selected
11
15
  );
12
16
 
13
17
  /* Secondary */
14
- --navds-button-color-secondary-text: var(--navds-color-action-default);
15
- --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
16
- --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
17
- --navds-button-color-secondary-border: var(--navds-color-action-default);
18
+ --navds-button-color-secondary-text: var(
19
+ --navds-semantic-color-interaction-primary
20
+ );
21
+ --navds-button-color-secondary-text-hover: var(
22
+ --navds-semantic-color-text-inverted
23
+ );
24
+ --navds-button-color-secondary-text-active: var(
25
+ --navds-semantic-color-text-inverted
26
+ );
27
+ --navds-button-color-secondary-border: var(
28
+ --navds-semantic-color-interaction-primary
29
+ );
18
30
  --navds-button-color-secondary-border-focus-active-hover: var(
19
- --navds-color-white
31
+ --navds-semantic-color-component-background-light
32
+ );
33
+ --navds-button-color-secondary-background: var(
34
+ --navds-semantic-color-component-background-light
20
35
  );
21
- --navds-button-color-secondary-background: var(--navds-color-background);
22
36
  --navds-button-color-secondary-background-hover: var(
23
- --navds-color-action-hover
37
+ --navds-semantic-color-interaction-primary-hover
24
38
  );
25
39
  --navds-button-color-secondary-background-active: var(
26
- --navds-color-action-active
40
+ --navds-semantic-color-interaction-primary-selected
27
41
  );
28
42
 
29
43
  /* Tertiary */
30
- --navds-button-color-tertiary-text: var(--navds-color-action-default);
31
- --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
32
- --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
33
- --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
34
- --navds-button-color-tertiary-border-active: var(--navds-color-white);
44
+ --navds-button-color-tertiary-text: var(
45
+ --navds-semantic-color-interaction-primary
46
+ );
47
+ --navds-button-color-tertiary-text-active: var(
48
+ --navds-semantic-color-text-inverted
49
+ );
50
+ --navds-button-color-tertiary-border-hover: var(
51
+ --navds-semantic-color-interaction-primary
52
+ );
53
+ --navds-button-color-tertiary-border-focus: var(
54
+ --navds-semantic-color-interaction-primary
55
+ );
56
+ --navds-button-color-tertiary-border-active: var(
57
+ --navds-semantic-color-component-background-light
58
+ );
35
59
  --navds-button-color-tertiary-background-active: var(
36
- --navds-color-action-active
60
+ --navds-semantic-color-interaction-primary-selected
37
61
  );
38
62
 
39
63
  /* Danger */
40
- --navds-button-color-danger-text: var(--navds-color-white);
41
- --navds-button-color-danger-background: var(--navds-color-danger-default);
42
- --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
64
+ --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
65
+ --navds-button-color-danger-background: var(
66
+ --navds-semantic-color-interaction-danger
67
+ );
68
+ --navds-button-color-danger-background-hover: var(
69
+ --navds-semantic-color-interaction-danger-hover
70
+ );
43
71
  --navds-button-color-danger-background-active: var(
44
- --navds-color-danger-active
72
+ --navds-semantic-color-interaction-danger-selected
73
+ );
74
+ --navds-button-color-danger-border-focus: var(
75
+ --navds-semantic-color-component-background-light
45
76
  );
46
- --navds-button-color-danger-border-focus: var(--navds-color-white);
47
-
48
- /* Disabled */
49
- --navds-button-color-text-disabled: var(--navds-color-text-inverse);
50
- --navds-button-color-background-disabled: var(--navds-color-disabled);
51
77
  }
52
78
 
53
79
  .navds-button {
@@ -111,8 +137,13 @@
111
137
  var(--navds-shadow-focus);
112
138
  }
113
139
 
140
+ .navds-button--primary:hover:disabled,
141
+ .navds-button--primary:active:disabled {
142
+ background-color: var(--navds-button-color-primary-background);
143
+ }
144
+
114
145
  /**************************
115
- * .navds-button--secondary *
146
+ * .navds-button--secondary *
116
147
  **************************/
117
148
 
118
149
  .navds-button--secondary {
@@ -145,6 +176,13 @@
145
176
  var(--navds-shadow-focus);
146
177
  }
147
178
 
179
+ .navds-button--secondary:disabled,
180
+ .navds-button--secondary:hover:disabled {
181
+ color: var(--navds-button-color-secondary-text);
182
+ background-color: var(--navds-button-color-secondary-background);
183
+ box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
184
+ }
185
+
148
186
  /****************************
149
187
  * .navds-button--tertiary *
150
188
  ****************************/
@@ -168,11 +206,23 @@
168
206
  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
169
207
  }
170
208
 
209
+ .navds-button--tertiary:active:hover {
210
+ background-color: var(--navds-button-color-tertiary-background-active);
211
+ }
212
+
171
213
  .navds-button--tertiary:active:focus {
172
214
  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
173
215
  var(--navds-shadow-focus);
174
216
  }
175
217
 
218
+ .navds-button--tertiary:disabled,
219
+ .navds-button--tertiary:active:disabled,
220
+ .navds-button--tertiary:active:hover:disabled {
221
+ color: var(--navds-button-color-tertiary-text);
222
+ background: none;
223
+ box-shadow: none;
224
+ }
225
+
176
226
  /*************************
177
227
  * .navds-button--danger *
178
228
  *************************/
@@ -195,14 +245,17 @@
195
245
  var(--navds-shadow-focus);
196
246
  }
197
247
 
248
+ .navds-button--danger:hover:disabled,
249
+ .navds-button--danger:active:disabled {
250
+ background-color: var(--navds-button-color-danger-background);
251
+ }
252
+
198
253
  /**************************
199
254
  * .navds-button:disabled *
200
255
  **************************/
201
256
 
202
257
  .navds-button:disabled {
203
- color: var(--navds-button-color-text-disabled);
204
- background-color: var(--navds-button-color-background-disabled);
258
+ opacity: 0.3;
205
259
  cursor: not-allowed;
206
- box-shadow: none;
207
260
  transform: none;
208
261
  }
package/card.css CHANGED
@@ -1,15 +1,25 @@
1
1
  :root {
2
- --navds-card-micro-color-text: var(--navds-color-text-primary);
3
- --navds-card-micro-color-background: var(--navds-color-orange-20);
2
+ --navds-card-micro-color-text: var(--navds-semantic-color-text);
3
+ --navds-card-micro-color-background: var(--navds-global-color-orange-200);
4
4
  --navds-card-micro-color-border: transparent;
5
- --navds-card-micro-color-text-hover: var(--navds-color-blue-50);
6
- --navds-card-micro-color-background-hover: var(--navds-color-white);
7
- --navds-card-micro-color-border-hover: var(--navds-color-blue-50);
8
- --navds-card-micro-color-text-focus: var(--navds-color-blue-50);
9
- --navds-card-micro-color-background-focus: var(--navds-color-white);
10
- --navds-card-micro-color-shadow-focus: var(--navds-color-blue-80);
11
- --navds-card-micro-color-background-active: var(--navds-color-blue-70);
12
- --navds-card-micro-color-text-active: var(--navds-color-white);
5
+ --navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
6
+ --navds-card-micro-color-background-hover: var(
7
+ --navds-semantic-color-component-background-light
8
+ );
9
+ --navds-card-micro-color-border-hover: var(
10
+ --navds-semantic-color-interaction-primary
11
+ );
12
+ --navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
13
+ --navds-card-micro-color-background-focus: var(
14
+ --navds-semantic-color-component-background-light
15
+ );
16
+ --navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
17
+ --navds-card-micro-color-background-active: var(
18
+ --navds-semantic-color-interaction-primary
19
+ );
20
+ --navds-card-micro-color-text-active: var(
21
+ --navds-semantic-color-text-inverted
22
+ );
13
23
  }
14
24
 
15
25
  /*
package/content-container.css CHANGED
@@ -1,12 +1,12 @@
1
1
  .navds-content-container {
2
2
  margin-left: auto;
3
3
  margin-right: auto;
4
- max-width: var(--navds-content-container-max-width);
5
- padding: var(--navds-content-container-padding-small);
4
+ max-width: 79.5rem;
5
+ padding: var(--navds-spacing-4);
6
6
  }
7
7
 
8
8
  @media (min-width: 448px) {
9
9
  .navds-content-container {
10
- padding: var(--navds-content-container-padding-medium-and-larger);
10
+ padding: var(--navds-spacing-6);
11
11
  }
12
12
  }