@navikt/ds-css 1.5.9 → 2.0.0-next.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 (44) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/accordion.css +11 -19
  3. package/alert.css +14 -28
  4. package/baseline/baseline.css +7 -9
  5. package/baseline/fonts.css +27 -0
  6. package/button.css +64 -105
  7. package/chat.css +16 -23
  8. package/chips.css +28 -28
  9. package/content-container.css +2 -2
  10. package/date.css +39 -40
  11. package/dist/index.css +916 -976
  12. package/form/confirmation-panel.css +9 -19
  13. package/form/error-summary.css +12 -18
  14. package/form/fieldset.css +2 -2
  15. package/form/form.css +2 -2
  16. package/form/radio-checkbox.css +43 -34
  17. package/form/search.css +30 -37
  18. package/form/select.css +10 -21
  19. package/form/switch.css +20 -35
  20. package/form/text-field.css +21 -35
  21. package/form/textarea.css +31 -30
  22. package/grid.css +2 -2
  23. package/guide-panel.css +14 -19
  24. package/help-text.css +7 -18
  25. package/link-panel.css +7 -14
  26. package/link.css +10 -23
  27. package/loader.css +16 -27
  28. package/modal.css +10 -17
  29. package/package.json +2 -2
  30. package/pagination.css +12 -18
  31. package/panel.css +4 -10
  32. package/popover.css +9 -15
  33. package/read-more.css +10 -10
  34. package/stepper.css +20 -20
  35. package/table.css +22 -32
  36. package/tabs.css +13 -13
  37. package/tag.css +43 -57
  38. package/toggle-group.css +16 -27
  39. package/tokens.json +302 -0
  40. package/tooltip.css +13 -13
  41. package/typography.css +54 -60
  42. package/baseline/Source-Sans-Pro-600.css +0 -7
  43. package/baseline/Source-Sans-Pro-italic.css +0 -7
  44. package/baseline/Source-Sans-Pro-regular.css +0 -7
package/chips.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .navds-chips {
2
2
  display: flex;
3
- gap: var(--navds-spacing-2);
3
+ gap: var(--a-spacing-2);
4
4
  margin: 0;
5
5
  padding: 0;
6
6
  list-style: none;
@@ -20,57 +20,57 @@
20
20
  cursor: pointer;
21
21
  align-items: center;
22
22
  justify-content: center;
23
- gap: 0.125rem;
23
+ gap: var(--a-spacing-05);
24
24
  margin: 0;
25
- padding: 0 var(--navds-spacing-3);
25
+ padding: 0 var(--a-spacing-3);
26
26
  text-decoration: none;
27
- border-radius: var(--navds-border-radius-full);
27
+ border-radius: var(--a-border-radius-full);
28
28
  min-height: 32px;
29
29
  }
30
30
 
31
31
  .navds-chips--small .navds-chips__chip {
32
32
  min-height: 24px;
33
- padding: 0 var(--navds-spacing-2);
33
+ padding: 0 var(--a-spacing-2);
34
34
  }
35
35
 
36
36
  .navds-chips__toggle {
37
- box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--navds-global-color-gray-500));
38
- background-color: var(--ac-chip-toggle-bg, rgb(0 0 0 / 0.055));
37
+ box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
38
+ background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
39
39
  }
40
40
 
41
41
  .navds-chips__toggle:hover {
42
- box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border-hover, var(--navds-global-color-gray-600));
43
- background-color: var(--ac-chip-toggle-bg-hover, rgb(0 0 0 / 0.1));
42
+ box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-strong));
43
+ background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-hover));
44
44
  }
45
45
 
46
46
  .navds-chips__toggle[aria-pressed="true"] {
47
47
  box-shadow: none;
48
- background-color: var(--ac-chip-toggle-bg-pressed, var(--navds-global-color-deepblue-500));
49
- color: var(--ac-chip-toggle-text-pressed, var(--navds-global-color-white));
48
+ background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
49
+ color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
50
50
  }
51
51
 
52
52
  .navds-chips__toggle[aria-pressed="true"]:hover {
53
- background-color: var(--ac-chip-toggle-bg-pressed-hover, var(--navds-global-color-deepblue-600));
53
+ background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
54
54
  }
55
55
 
56
56
  .navds-chips__toggle:focus-visible {
57
- box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
57
+ box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
58
58
  }
59
59
 
60
60
  .navds-chips__toggle[aria-pressed="true"]:focus-visible,
61
61
  .navds-chips__toggle:active:focus-visible {
62
- box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 2px var(--navds-global-color-blue-800);
62
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
63
63
  }
64
64
 
65
65
  .navds-chips__removable--action {
66
- background-color: var(--ac-chip-removable-action-bg, var(--navds-global-color-deepblue-500));
67
- color: var(--ac-chip-removable-action-text, var(--navds-global-color-white));
66
+ background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
67
+ color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
68
68
  }
69
69
 
70
70
  .navds-chips__removable--neutral {
71
- color: var(--ac-chip-removable-neutral-text, var(--navds-global-color-gray-900));
72
- background-color: var(--ac-chip-removable-neutral-bg, rgb(0 0 0/ 0.055));
73
- box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--navds-global-color-gray-500));
71
+ background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
72
+ color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
73
+ box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
74
74
  }
75
75
 
76
76
  .navds-chips__removable-icon {
@@ -78,7 +78,7 @@
78
78
  height: 1.5rem;
79
79
  display: grid;
80
80
  place-items: center;
81
- border-radius: var(--navds-border-radius-full);
81
+ border-radius: var(--a-border-radius-full);
82
82
  }
83
83
 
84
84
  .navds-chips__toggle-icon {
@@ -86,7 +86,7 @@
86
86
  height: 1.25rem;
87
87
  display: grid;
88
88
  place-items: center;
89
- border-radius: var(--navds-border-radius-full);
89
+ border-radius: var(--a-border-radius-full);
90
90
  }
91
91
 
92
92
  .navds-chips--small .navds-chips__toggle-icon {
@@ -104,20 +104,20 @@
104
104
  }
105
105
 
106
106
  .navds-chips__removable--action:focus-visible {
107
- box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 2px var(--navds-global-color-blue-800);
107
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
108
108
  }
109
109
 
110
110
  .navds-chips__removable--neutral:focus-visible {
111
- box-shadow: 0 0 0 2px var(--navds-global-color-blue-800);
111
+ box-shadow: 0 0 0 2px var(--a-border-focus);
112
112
  }
113
113
 
114
114
  .navds-chips__removable--action:hover {
115
- background-color: var(--ac-chip-removable-action-bg-hover, var(--navds-global-color-deepblue-700));
115
+ background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
116
116
  }
117
117
 
118
118
  .navds-chips__removable--neutral:hover {
119
- background-color: var(--ac-chip-removable-action-bg-hover, rgb(0 0 0 / 0.1));
120
- box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border-hover, var(--navds-global-color-gray-600));
119
+ background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
120
+ box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
121
121
  }
122
122
 
123
123
  .navds-chips--icon-left {
@@ -125,11 +125,11 @@
125
125
  }
126
126
 
127
127
  .navds-chips--icon-right {
128
- padding-right: var(--navds-spacing-1);
128
+ padding-right: var(--a-spacing-1);
129
129
  }
130
130
 
131
131
  .navds-chips--small .navds-chips--icon-right {
132
- padding-right: 0.125rem;
132
+ padding-right: var(--a-spacing-05);
133
133
  }
134
134
 
135
135
  .navds-chips--small .navds-chips--icon-left {
package/content-container.css CHANGED
@@ -7,11 +7,11 @@
7
7
  margin-left: auto;
8
8
  margin-right: auto;
9
9
  max-width: var(--navds-content-container-max-width);
10
- padding: var(--navds-spacing-4);
10
+ padding: var(--a-spacing-4);
11
11
  }
12
12
 
13
13
  @media (min-width: 448px) {
14
14
  .navds-content-container {
15
- padding: var(--navds-spacing-6);
15
+ padding: var(--a-spacing-6);
16
16
  }
17
17
  }
package/date.css CHANGED
@@ -1,16 +1,16 @@
1
1
  .navds-date {
2
- padding: var(--navds-spacing-3);
2
+ padding: var(--a-spacing-3);
3
3
  }
4
4
 
5
5
  .navds-date .rdp-day_range_middle.rdp-day_disabled {
6
- color: var(--navds-global-color-white);
7
- background: var(--navds-global-color-deepblue-500);
6
+ color: var(--ac-date-middle-text, var(--a-text-on-action));
7
+ background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
8
8
  }
9
9
 
10
10
  .navds-date .rdp-month,
11
11
  .navds-date.rdp-month {
12
12
  display: grid;
13
- gap: var(--navds-spacing-5);
13
+ gap: var(--a-spacing-5);
14
14
  }
15
15
 
16
16
  .navds-date__caption-label {
@@ -19,31 +19,31 @@
19
19
 
20
20
  .navds-date .rdp-head_cell {
21
21
  text-transform: capitalize;
22
- font-size: var(--navds-font-size-small);
22
+ font-size: var(--a-font-size-small);
23
23
  }
24
24
 
25
25
  .navds-date .rdp-weeknumber {
26
- color: var(--navds-global-color-white);
27
- background: var(--navds-global-color-gray-800);
28
- font-size: var(--navds-font-size-small);
26
+ color: var(--ac-date-week-text, var(--a-text-on-neutral));
27
+ background: var(--ac-date-week-bg, var(--a-surface-neutral));
28
+ font-size: var(--a-font-size-small);
29
29
  display: flex;
30
30
  justify-content: center;
31
31
  align-items: center;
32
- padding: 0.125rem var(--navds-spacing-1);
33
- border-radius: var(--navds-border-radius-small);
32
+ padding: var(--a-spacing-05) var(--a-spacing-1);
33
+ border-radius: var(--a-border-radius-small);
34
34
  }
35
35
 
36
36
  .navds-date__caption-dropdown {
37
37
  display: flex;
38
38
  justify-content: space-between;
39
- gap: var(--navds-spacing-2);
39
+ gap: var(--a-spacing-2);
40
40
  align-items: center;
41
41
  }
42
42
 
43
43
  .navds-date__caption__month-wrapper {
44
44
  display: flex;
45
45
  justify-content: center;
46
- gap: var(--navds-spacing-2);
46
+ gap: var(--a-spacing-2);
47
47
  align-items: center;
48
48
  }
49
49
 
@@ -56,32 +56,31 @@
56
56
  width: 2.5rem;
57
57
  height: 2.5rem;
58
58
  text-align: center;
59
- border-radius: var(--navds-border-radius-medium);
59
+ border-radius: var(--a-border-radius-medium);
60
60
  }
61
61
 
62
62
  .navds-date .rdp-day_range_start {
63
- border-radius: 12px 2px 2px 12px;
64
- border-radius: var(--navds-border-radius-xlarge) var(--navds-border-radius-small) var(--navds-border-radius-small)
65
- var(--navds-border-radius-xlarge);
63
+ border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small)
64
+ var(--a-border-radius-xlarge);
66
65
  }
67
66
 
68
67
  .navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
69
- border-radius: var(--navds-border-radius-small) var(--navds-border-radius-xlarge) var(--navds-border-radius-xlarge)
70
- var(--navds-border-radius-small);
68
+ border-radius: var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
69
+ var(--a-border-radius-small);
71
70
  }
72
71
 
73
72
  .navds-date .rdp-day_range_start.rdp-day_range_end {
74
- border-radius: var(--navds-border-radius-xlarge);
73
+ border-radius: var(--a-border-radius-xlarge);
75
74
  }
76
75
 
77
76
  .navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
78
77
  .navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
79
- box-shadow: var(--navds-shadow-focus);
78
+ box-shadow: var(--a-shadow-focus);
80
79
  }
81
80
 
82
81
  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
83
82
  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
84
- box-shadow: inset 0 0 0 1px var(--navds-global-color-white), 0 0 0 3px var(--navds-global-color-blue-800);
83
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
85
84
  }
86
85
 
87
86
  /* Monthpicker */
@@ -91,13 +90,13 @@
91
90
  width: 3rem;
92
91
  height: 2.75rem;
93
92
  text-transform: capitalize;
94
- border-radius: var(--navds-border-radius-medium);
93
+ border-radius: var(--a-border-radius-medium);
95
94
  cursor: pointer;
96
95
  }
97
96
 
98
97
  .navds-date__month-button:focus,
99
98
  .navds-monthpicker__caption-button:focus {
100
- box-shadow: var(--navds-shadow-focus);
99
+ box-shadow: var(--a-shadow-focus);
101
100
  z-index: 1;
102
101
  }
103
102
 
@@ -134,26 +133,26 @@
134
133
 
135
134
  .navds-date .rdp-day_selected,
136
135
  .navds-monthpicker__month--selected {
137
- color: var(--navds-global-color-white);
138
- background: var(--navds-global-color-deepblue-500);
136
+ color: var(--ac-date-selected-text, var(--a-text-on-action));
137
+ background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
139
138
  cursor: pointer;
140
139
  }
141
140
 
142
141
  .navds-date .rdp-day_disabled {
143
142
  cursor: not-allowed;
144
143
  text-decoration: line-through;
145
- background-color: var(--navds-global-color-gray-100);
146
- color: var(--navds-global-color-gray-600);
144
+ background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
145
+ color: var(--ac-date-disabled-text, var(--a-text-subtle));
147
146
  }
148
147
 
149
148
  .navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
150
149
  .navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
151
- background: var(--navds-global-color-blue-50);
150
+ background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
152
151
  cursor: pointer;
153
152
  }
154
153
 
155
154
  .navds-date .rdp-day_today {
156
- box-shadow: 0 0 0 1px var(--navds-global-color-deepblue-500);
155
+ box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
157
156
  text-decoration: underline;
158
157
  }
159
158
 
@@ -161,47 +160,47 @@
161
160
  display: flex;
162
161
  justify-content: space-between;
163
162
  align-items: center;
164
- gap: var(--navds-spacing-2);
163
+ gap: var(--a-spacing-2);
165
164
  }
166
165
 
167
166
  .navds-date__caption-button {
168
- color: var(--navds-global-color-gray-900);
167
+ color: var(--ac-date-caption-text, var(--a-text-default));
169
168
  }
170
169
 
171
170
  .navds-date__field-input {
172
- padding-right: var(--navds-spacing-12);
171
+ padding-right: var(--a-spacing-12);
173
172
  }
174
173
 
175
174
  .navds-form-field--small .navds-date__field-input {
176
- padding-right: var(--navds-spacing-8);
175
+ padding-right: var(--a-spacing-8);
177
176
  }
178
177
 
179
178
  /* Error-handling */
180
179
  .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
181
- border-color: var(--navds-search-color-border-error);
182
- box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error);
180
+ border-color: var(--ac-date-input-error-border, var(--a-border-danger));
181
+ box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
183
182
  }
184
183
 
185
184
  .navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
186
- box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error), var(--navds-shadow-focus);
185
+ box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
187
186
  }
188
187
 
189
188
  .navds-date__field-button {
190
189
  position: absolute;
191
- right: var(--navds-spacing-2);
190
+ right: var(--a-spacing-2);
192
191
  top: 50%;
193
192
  transform: translateY(-50%);
194
- color: var(--navds-global-color-gray-900);
193
+ color: var(--ac-date-input-button-text, var(--a-text-default));
195
194
  }
196
195
 
197
196
  .navds-form-field--small .navds-date__field-button {
198
- right: var(--navds-spacing-2);
197
+ right: var(--a-spacing-2);
199
198
  height: 1.5rem;
200
199
  width: 1.5rem;
201
200
  }
202
201
 
203
202
  .navds-form-field--small .navds-date__field-button svg {
204
- font-size: var(--navds-font-size-medium);
203
+ font-size: var(--a-font-size-medium);
205
204
  }
206
205
 
207
206
  .navds-form-field--disabled .navds-date__field-button {