@navikt/ds-css 1.5.9-next.1 → 1.5.10

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 +2 -0
  2. package/accordion.css +19 -11
  3. package/alert.css +28 -14
  4. package/baseline/Source-Sans-Pro-600.css +7 -0
  5. package/baseline/Source-Sans-Pro-italic.css +7 -0
  6. package/baseline/Source-Sans-Pro-regular.css +7 -0
  7. package/baseline/baseline.css +9 -7
  8. package/button.css +105 -64
  9. package/chat.css +23 -16
  10. package/chips.css +28 -28
  11. package/content-container.css +2 -2
  12. package/date.css +40 -39
  13. package/dist/index.css +976 -916
  14. package/form/confirmation-panel.css +19 -9
  15. package/form/error-summary.css +18 -12
  16. package/form/fieldset.css +2 -2
  17. package/form/form.css +2 -2
  18. package/form/radio-checkbox.css +34 -43
  19. package/form/search.css +37 -30
  20. package/form/select.css +21 -10
  21. package/form/switch.css +35 -20
  22. package/form/text-field.css +35 -21
  23. package/form/textarea.css +30 -31
  24. package/grid.css +2 -2
  25. package/guide-panel.css +19 -14
  26. package/help-text.css +18 -7
  27. package/link-panel.css +14 -7
  28. package/link.css +23 -10
  29. package/loader.css +27 -16
  30. package/modal.css +17 -10
  31. package/package.json +2 -2
  32. package/pagination.css +18 -12
  33. package/panel.css +10 -4
  34. package/popover.css +15 -9
  35. package/read-more.css +10 -10
  36. package/stepper.css +20 -20
  37. package/table.css +32 -22
  38. package/tabs.css +13 -13
  39. package/tag.css +57 -43
  40. package/toggle-group.css +27 -16
  41. package/tooltip.css +13 -13
  42. package/typography.css +60 -54
  43. package/baseline/fonts.css +0 -27
  44. package/tokens.json +0 -302
package/tokens.json DELETED
@@ -1,302 +0,0 @@
1
- {
2
- "alert": {
3
- "--ac-alert-error-border": "--a-border-danger",
4
- "--ac-alert-error-bg": "--a-surface-danger-subtle",
5
- "--ac-alert-warning-border": "--a-border-warning",
6
- "--ac-alert-warning-bg": "--a-surface-warning-subtle",
7
- "--ac-alert-info-border": "--a-border-info",
8
- "--ac-alert-info-bg": "--a-surface-info-subtle",
9
- "--ac-alert-success-border": "--a-border-success",
10
- "--ac-alert-success-bg": "--a-surface-success-subtle"
11
- },
12
- "accordion": {
13
- "--ac-accordion-header-text-hover": "--a-surface-action",
14
- "--ac-accordion-header-border-hover": "--a-border-strong-hover",
15
- "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
16
- "--ac-accordion-item-border-open": "--a-surface-action-subtle",
17
- "--ac-accordion-content-border": "--a-border-strong",
18
- "--ac-accordion-content-border-open": "--a-border-strong-hover"
19
- },
20
- "button": {
21
- "--ac-button-primary-bg": "--a-surface-action",
22
- "--ac-button-primary-text": "--a-text-on-action",
23
- "--ac-button-primary-hover-bg": "--a-surface-action-hover",
24
- "--ac-button-primary-active-bg": "--a-surface-action-active",
25
- "--ac-button-primary-focus-border": "--a-surface-default",
26
- "--ac-button-secondary-text": "--a-text-action",
27
- "--ac-button-secondary-bg": "--a-surface-default",
28
- "--ac-button-secondary-border": "--a-border-action",
29
- "--ac-button-secondary-hover-text": "--a-text-action-hover",
30
- "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
31
- "--ac-button-secondary-focus-border": "--a-border-action",
32
- "--ac-button-secondary-active-text": "--a-text-on-action",
33
- "--ac-button-secondary-active-bg": "--a-surface-action-active",
34
- "--ac-button-secondary-active-focus-border": "--a-surface-default",
35
- "--ac-button-tertiary-text": "--a-text-action",
36
- "--ac-button-tertiary-hover-text": "--a-text-action-hover",
37
- "--ac-button-tertiary-hover-bg": "--a-surface-action-subtle-hover",
38
- "--ac-button-tertiary-focus-border": "--a-border-action",
39
- "--ac-button-tertiary-active-text": "--a-text-on-action",
40
- "--ac-button-tertiary-active-bg": "--a-surface-action-active",
41
- "--ac-button-tertiary-active-hover-bg": "--a-surface-action-active",
42
- "--ac-button-danger-bg": "--a-surface-danger",
43
- "--ac-button-danger-text": "--a-text-on-danger",
44
- "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
45
- "--ac-button-danger-active-bg": "--a-surface-danger-active",
46
- "--ac-button-loader-stroke": "currentColor",
47
- "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
48
- },
49
- "chat": {
50
- "--ac-chat-avatar-bg": "--a-bg-subtle",
51
- "--ac-chat-avatar-color": "--a-text-default",
52
- "--ac-chat-bubble-bg": "--a-bg-subtle",
53
- "--ac-chat-top-text": "--a-text-default"
54
- },
55
- "chips": {
56
- "--ac-chip-toggle-border": "--a-border-default",
57
- "--ac-chip-toggle-bg": "--a-surface-neutral-subtle",
58
- "--ac-chip-toggle-hover-border": "--a-border-strong",
59
- "--ac-chip-toggle-hover-bg": "--a-surface-neutral-subtle-hover",
60
- "--ac-chip-toggle-pressed-bg": "--a-surface-action-selected",
61
- "--ac-chip-toggle-pressed-text": "--a-text-on-action",
62
- "--ac-chip-toggle-pressed-hover-bg": "--a-surface-action-selected-hover",
63
- "--ac-chip-toggle-focus": "--a-border-focus",
64
- "--ac-chip-removable-action-bg": "--a-surface-action-selected",
65
- "--ac-chip-removable-action-text": "--a-text-on-action",
66
- "--ac-chip-removable-neutral-bg": "--a-surface-neutral-subtle",
67
- "--ac-chip-removable-neutral-text": "--a-text-default",
68
- "--ac-chip-removable-neutral-border": "--a-border-default",
69
- "--ac-chip-removable-action-hover-bg": "--a-surface-action-selected-hover",
70
- "--ac-chip-removable-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
71
- "--ac-chip-removable-neutral-hover-border": "--a-border-strong"
72
- },
73
- "date": {
74
- "--ac-date-middle-text": "--a-text-on-action",
75
- "--ac-date-middle-bg": "--a-surface-action-selected",
76
- "--ac-date-week-text": "--a-text-on-neutral",
77
- "--ac-date-week-bg": "--a-surface-neutral",
78
- "--ac-date-selected-text": "--a-text-on-action",
79
- "--ac-date-selected-bg": "--a-surface-action-selected",
80
- "--ac-date-disabled-bg": "--a-surface-neutral-subtle",
81
- "--ac-date-disabled-text": "--a-text-subtle",
82
- "--ac-date-hover-bg": "--a-surface-action-subtle-hover",
83
- "--ac-date-today-border": "--a-border-action-selected",
84
- "--ac-date-caption-text": "--a-text-default",
85
- "--ac-date-input-error-border": "--a-border-danger",
86
- "--ac-date-input-button-text": "--a-text-default"
87
- },
88
- "guidepanel": {
89
- "--ac-guide-panel-bg": "--a-surface-default",
90
- "--ac-guide-panel-border": "--a-border-action",
91
- "--ac-guide-panel-illustration-bg": "--a-surface-action-subtle"
92
- },
93
- "helptext": {
94
- "--ac-help-text-button-color": "--a-surface-action",
95
- "--ac-help-text-popover-bg": "--a-surface-info-subtle"
96
- },
97
- "linkpanel": {
98
- "--ac-link-panel-text": "--a-text-default",
99
- "--ac-link-panel-hover-text": "--a-text-action",
100
- "--ac-link-panel-hover-border": "--a-border-action"
101
- },
102
- "link": {
103
- "--ac-link-text": "--a-text-action",
104
- "--ac-link-focus-text": "--a-text-on-action",
105
- "--ac-link-focus-bg": "--a-border-focus",
106
- "--ac-link-focus-border": "--a-border-focus",
107
- "--ac-link-active-text": "--a-text-on-action",
108
- "--ac-link-active-bg": "--a-border-focus",
109
- "--ac-link-active-border": "--a-border-focus"
110
- },
111
- "loader": {
112
- "--ac-loader-stroke": "--a-border-default",
113
- "--ac-loader-stroke-bg": "--a-surface-active",
114
- "--ac-loader-neutral-stroke": "--a-border-default",
115
- "--ac-loader-interaction-stroke": "--a-border-action",
116
- "--ac-loader-inverted-stroke": "--a-border-on-inverted",
117
- "--ac-loader-inverted-stroke-bg": "--a-border-on-inverted-subtle"
118
- },
119
- "modal": {
120
- "--ac-modal-bg": "--a-surface-default",
121
- "--ac-modal-backdrop": "--a-surface-backdrop"
122
- },
123
- "pagination": {
124
- "--ac-pagination-text": "--a-text-default",
125
- "--ac-pagination-selected-bg": "--a-surface-action-selected",
126
- "--ac-pagination-selected-text": "--a-text-on-action"
127
- },
128
- "panel": {
129
- "--ac-panel-bg": "--a-surface-default",
130
- "--ac-panel-border": "--a-border-default"
131
- },
132
- "popover": {
133
- "--ac-popover-bg": "--a-surface-default",
134
- "--ac-popover-border": "--a-border-default"
135
- },
136
- "readmore": {
137
- "--ac-read-more-text": "--a-text-action",
138
- "--ac-read-more-hover-bg": "--a-surface-hover",
139
- "--ac-read-more-active-bg": "--a-surface-active",
140
- "--ac-read-more-line": "--a-border-divider"
141
- },
142
- "stepper": {
143
- "--ac-stepper-text": "--a-surface-action",
144
- "--ac-stepper-line": "--a-border-default",
145
- "--ac-stepper-line-completed": "--a-border-selected",
146
- "--ac-stepper-non-interactive": "--a-text-subtle",
147
- "--ac-stepper-active": "--a-text-action-selected",
148
- "--ac-stepper-active-bg": "--a-surface-action-selected",
149
- "--ac-stepper-active-border": "--a-border-action-selected",
150
- "--ac-stepper-active-text": "--a-text-on-action",
151
- "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
152
- "--ac-stepper-non-interactive-active": "--a-text-default",
153
- "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
154
- "--ac-stepper-non-interactive-active-bg": "--a-surface-inverted",
155
- "--ac-stepper-non-interactive-active-border": "--a-surface-inverted",
156
- "--ac-stepper-non-interactive-active-text": "--a-text-on-inverted",
157
- "--ac-stepper-active-completed": "--a-text-action-selected",
158
- "--ac-stepper-non-interactive-active-completed": "--a-text-default"
159
- },
160
- "table": {
161
- "--ac-table-row-hover": "--a-bg-subtle",
162
- "--ac-table-row-selected": "--a-surface-action-subtle",
163
- "--ac-table-row-selected-hover": "--a-surface-action-subtle-hover",
164
- "--ac-table-row-zebra": "--a-surface-subtle",
165
- "--ac-table-row-border": "--a-border-default",
166
- "--ac-table-row-hover-border": "--a-border-strong",
167
- "--ac-table-sort-button-text": "--a-text-action",
168
- "--ac-table-sort-button-hover-bg": "--a-bg-subtle",
169
- "--ac-table-sort-button-sorted-bg": "--a-surface-selected"
170
- },
171
- "tabs": {
172
- "--ac-tabs-border": "--a-border-divider",
173
- "--ac-tabs-text": "--a-text-subtle",
174
- "--ac-tabs-hover-border": "--a-border-subtle-hover",
175
- "--ac-tabs-selected-border": "--a-border-action",
176
- "--ac-tabs-selected-text": "--a-text-default",
177
- "--ac-tabs-focus-text": "--a-text-default"
178
- },
179
- "tag": {
180
- "--ac-tag-error-border": "--a-border-danger",
181
- "--ac-tag-error-bg": "--a-surface-danger-subtle",
182
- "--ac-tag-error-text": "--a-text-default",
183
- "--ac-tag-error-filled-bg": "--a-surface-danger",
184
- "--ac-tag-error-filled-text": "--a-text-on-danger",
185
- "--ac-tag-success-border": "--a-border-success",
186
- "--ac-tag-success-bg": "--a-surface-success-subtle",
187
- "--ac-tag-success-text": "--a-text-default",
188
- "--ac-tag-success-filled-bg": "--a-surface-success",
189
- "--ac-tag-success-filled-text": "--a-text-on-success",
190
- "--ac-tag-warning-border": "--a-border-warning",
191
- "--ac-tag-warning-bg": "--a-surface-warning-subtle",
192
- "--ac-tag-warning-text": "--a-text-default",
193
- "--ac-tag-warning-filled-bg": "--a-surface-warning",
194
- "--ac-tag-warning-filled-text": "--a-text-on-warning",
195
- "--ac-tag-info-border": "--a-border-info",
196
- "--ac-tag-info-bg": "--a-surface-info-subtle",
197
- "--ac-tag-info-text": "--a-text-default",
198
- "--ac-tag-info-filled-bg": "--a-surface-info",
199
- "--ac-tag-info-filled-text": "--a-text-on-info",
200
- "--ac-tag-neutral-border": "--a-border-default",
201
- "--ac-tag-neutral-bg": "--a-surface-neutral-subtle",
202
- "--ac-tag-neutral-text": "--a-text-default",
203
- "--ac-tag-neutral-filled-bg": "--a-surface-neutral",
204
- "--ac-tag-neutral-filled-text": "--a-text-on-neutral",
205
- "--ac-tag-alt-1-border": "--a-border-alt-1",
206
- "--ac-tag-alt-1-bg": "--a-surface-alt-1-subtle",
207
- "--ac-tag-alt-1-text": "--a-text-default",
208
- "--ac-tag-alt-1-filled-bg": "--a-surface-alt-1",
209
- "--ac-tag-alt-1-filled-text": "--a-text-on-alt-1",
210
- "--ac-tag-alt-2-border": "--a-border-alt-2",
211
- "--ac-tag-alt-2-bg": "--a-surface-alt-2-subtle",
212
- "--ac-tag-alt-2-text": "--a-text-default",
213
- "--ac-tag-alt-2-filled-bg": "--a-surface-alt-2",
214
- "--ac-tag-alt-2-filled-text": "--a-text-on-alt-2",
215
- "--ac-tag-alt-3-border": "--a-border-alt-3",
216
- "--ac-tag-alt-3-bg": "--a-surface-alt-3-subtle",
217
- "--ac-tag-alt-3-text": "--a-text-default",
218
- "--ac-tag-alt-3-filled-bg": "--a-surface-alt-3",
219
- "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
220
- },
221
- "togglegroup": {
222
- "--ac-toggle-group-bg": "--a-surface-default",
223
- "--ac-toggle-group-border": "--a-border-default",
224
- "--ac-toggle-group-button-bg": "--a-surface-default",
225
- "--ac-toggle-group-button-text": "--a-text-default",
226
- "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
227
- "--ac-toggle-group-button-hover-text": "--a-text-action",
228
- "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
229
- "--ac-toggle-group-selected-text": "--a-text-on-action"
230
- },
231
- "tooltip": {
232
- "--ac-tooltip-bg": "--a-surface-inverted",
233
- "--ac-tooltip-text": "--a-text-on-inverted",
234
- "--ac-tooltip-key-bg": "--a-surface-neutral",
235
- "--ac-tooltip-key-text": "--a-text-on-inverted"
236
- },
237
- "typography": {
238
- "--ac-typo-error-text": "--a-text-danger"
239
- },
240
- "confirmationpanel": {
241
- "--ac-confirmation-panel-border": "--a-border-warning",
242
- "--ac-confirmation-panel-bg": "--a-surface-warning-subtle",
243
- "--ac-confirmation-panel-checked-border": "--a-border-success",
244
- "--ac-confirmation-panel-checked-bg": "--a-surface-success-subtle",
245
- "--ac-confirmation-panel-error-border": "--a-border-danger",
246
- "--ac-confirmation-panel-error-bg": "--a-surface-danger-subtle"
247
- },
248
- "errorsummary": {
249
- "--ac-error-summary-bg": "--a-surface-default",
250
- "--ac-error-summary-border": "--a-border-danger"
251
- },
252
- "checkbox-radio": {
253
- "--ac-radio-checkbox-bg": "--a-surface-default",
254
- "--ac-radio-checkbox-border": "--a-border-strong",
255
- "--ac-radio-checkbox-action": "--a-surface-action",
256
- "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
257
- "--ac-radio-checkbox-error-border": "--a-border-danger",
258
- "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
259
- },
260
- "search": {
261
- "--ac-search-button-border": "--a-border-default",
262
- "--ac-search-button-border-hover": "--a-border-action",
263
- "--ac-search-clear-icon": "--a-text-default",
264
- "--ac-search-clear-icon-hover": "--a-text-action",
265
- "--ac-search-button-focus-active-border": "--a-surface-default",
266
- "--ac-search-error-border": "--a-border-danger"
267
- },
268
- "select": {
269
- "--ac-select-bg": "--a-surface-default",
270
- "--ac-select-border": "--a-border-strong",
271
- "--ac-select-hover-bg": "--a-border-action",
272
- "--ac-select-error-border": "--a-surface-danger"
273
- },
274
- "switch": {
275
- "--ac-switch-action": "--a-surface-action",
276
- "--ac-switch-bg": "--a-surface-neutral",
277
- "--ac-switch-checked-bg": "--a-surface-success",
278
- "--ac-switch-hover-bg": "--a-surface-neutral-hover",
279
- "--ac-switch-checked-hover-bg": "--a-surface-success-hover",
280
- "--ac-switch-thumb-bg": "--a-surface-default",
281
- "--ac-switch-thumb-icon": "--a-icon-subtle",
282
- "--ac-switch-thumb-icon-checked": "--a-icon-success"
283
- },
284
- "textfield": {
285
- "--ac-textfield-bg": "--a-surface-default",
286
- "--ac-textfield-border": "--a-border-default",
287
- "--ac-textfield-text": "--a-text-default",
288
- "--ac-textfield-placeholder": "--a-text-subtle",
289
- "--ac-textfield-hover-border": "--a-border-action",
290
- "--ac-textfield-error-border": "--a-border-danger"
291
- },
292
- "textarea": {
293
- "--ac-textarea-bg": "--a-surface-default",
294
- "--ac-textarea-border": "--a-border-default",
295
- "--ac-textarea-text": "--a-text-default",
296
- "--ac-textarea-placeholder": "--a-text-subtle",
297
- "--ac-textarea-hover-border": "--a-border-action",
298
- "--ac-textarea-counter-text": "--a-text-subtle",
299
- "--ac-textarea-counter-error-text": "--a-surface-danger",
300
- "--ac-textarea-error-border": "--a-border-danger"
301
- }
302
- }