@digdir/designsystemet-css 0.10.0 → 0.11.0-alpha.3

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 (79) hide show
  1. package/accordion.css +90 -81
  2. package/alert.css +47 -44
  3. package/box.css +37 -37
  4. package/button.css +130 -199
  5. package/card.css +127 -92
  6. package/checkbox.css +118 -86
  7. package/chip.css +93 -93
  8. package/combobox.css +113 -160
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/box.css +1 -1
  12. package/dist/button.css +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/checkbox.css +1 -1
  15. package/dist/chip.css +1 -1
  16. package/dist/combobox.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdownmenu.css +1 -1
  19. package/dist/error-summary.css +1 -1
  20. package/dist/fieldset.css +1 -1
  21. package/dist/helptext.css +1 -1
  22. package/dist/index.css +1 -1
  23. package/dist/link.css +1 -1
  24. package/dist/list.css +1 -1
  25. package/dist/modal.css +1 -1
  26. package/dist/native-select.css +1 -1
  27. package/dist/pagination.css +1 -1
  28. package/dist/popover.css +1 -1
  29. package/dist/radio.css +1 -1
  30. package/dist/search.css +1 -1
  31. package/dist/skeleton.css +1 -1
  32. package/dist/skiplink.css +1 -1
  33. package/dist/spinner.css +1 -1
  34. package/dist/switch.css +1 -1
  35. package/dist/table.css +1 -1
  36. package/dist/tabs.css +1 -1
  37. package/dist/tag.css +1 -1
  38. package/dist/textarea.css +1 -1
  39. package/dist/textfield.css +1 -1
  40. package/dist/togglegroup.css +1 -1
  41. package/dist/tooltip.css +1 -1
  42. package/dist/utils.css +1 -1
  43. package/divider.css +8 -8
  44. package/dropdownmenu.css +20 -19
  45. package/error-summary.css +12 -8
  46. package/fieldset.css +13 -13
  47. package/helptext.css +21 -22
  48. package/index.css +6 -6
  49. package/link.css +42 -18
  50. package/list.css +10 -10
  51. package/modal.css +35 -33
  52. package/native-select.css +62 -46
  53. package/package.json +2 -2
  54. package/pagination.css +32 -32
  55. package/popover.css +43 -40
  56. package/radio.css +88 -81
  57. package/search.css +66 -62
  58. package/skeleton.css +14 -14
  59. package/skiplink.css +32 -8
  60. package/spinner.css +15 -23
  61. package/switch.css +121 -91
  62. package/table.css +54 -53
  63. package/tabs.css +36 -52
  64. package/tag.css +42 -42
  65. package/textarea.css +34 -33
  66. package/textfield.css +64 -63
  67. package/togglegroup.css +11 -10
  68. package/tooltip.css +9 -18
  69. package/utils.css +11 -11
  70. package/dist/error-message.css +0 -1
  71. package/dist/heading.css +0 -1
  72. package/dist/ingress.css +0 -1
  73. package/dist/label.css +0 -1
  74. package/dist/paragraph.css +0 -1
  75. package/error-message.css +0 -43
  76. package/heading.css +0 -61
  77. package/ingress.css +0 -40
  78. package/label.css +0 -46
  79. package/paragraph.css +0 -82
package/combobox.css CHANGED
@@ -1,343 +1,296 @@
1
- @layer fds.combobox {
2
- .fds-combobox {
1
+ @layer ds.combobox {
2
+ .ds-combobox {
3
3
  display: grid;
4
4
  background-color: transparent;
5
- gap: var(--fds-spacing-2);
5
+ gap: var(--ds-spacing-2);
6
6
  }
7
7
 
8
- .fds-combobox__options-wrapper {
9
- padding: var(--fds-spacing-2);
10
- background: var(--fds-semantic-background-default);
8
+ .ds-combobox [data-floating-ui-portal] {
9
+ grid-column: 1 / 2;
10
+ grid-row: 1 / 2;
11
+ }
12
+
13
+ .ds-combobox__options-wrapper {
14
+ padding: var(--ds-spacing-2);
15
+ background: var(--ds-color-neutral-background-default);
16
+ color: var(--ds-color-neutral-text-default);
11
17
  overflow-y: auto;
12
18
  z-index: 1600;
13
19
  }
14
20
 
15
- .fds-combobox--readonly .fds-combobox__input {
21
+ .ds-combobox--readonly .ds-combobox__input {
16
22
  pointer-events: none;
17
23
  }
18
24
 
19
- .fds-combobox__input__wrapper {
25
+ .ds-combobox__input__wrapper {
20
26
  display: flex;
21
27
  align-items: center;
22
28
  position: relative;
23
- gap: var(--fds-spacing-1);
29
+ gap: var(--ds-spacing-1);
24
30
  cursor: text;
25
- padding: var(--fds-spacing-2);
31
+ padding: var(--ds-spacing-2);
26
32
  width: 100%;
27
33
  height: auto;
28
34
  justify-content: space-between;
29
- font: var(--fds-typography-paragraph-medium);
30
- font-family: inherit;
31
35
  }
32
36
 
33
- .fds-combobox__input__wrapper .fds-combobox__input {
37
+ .ds-combobox__input__wrapper .ds-combobox__input {
34
38
  height: 100%;
35
39
  min-width: 50px;
36
40
  flex-grow: 1;
37
41
  appearance: none;
38
42
  border: none;
39
43
  background-color: transparent;
44
+ color: var(--ds-color-neutral-text-default);
40
45
  }
41
46
 
42
- .fds-combobox--sm .fds-combobox__input__wrapper {
43
- min-height: var(--fds-sizing-10);
44
- font: var(--fds-typography-paragraph-small);
45
- font-family: inherit;
46
- padding: 5px var(--fds-spacing-2);
47
- }
48
-
49
- .fds-combobox--sm .fds-combobox__input__wrapper .fds-combobox__input {
50
- font: var(--fds-typography-paragraph-small);
51
- font-family: inherit;
52
- }
53
-
54
- .fds-combobox--md .fds-combobox__input__wrapper {
55
- min-height: var(--fds-sizing-12);
56
- font: var(--fds-typography-paragraph-medium);
57
- font-family: inherit;
58
- padding: 7px var(--fds-spacing-3);
47
+ .ds-combobox--sm .ds-combobox__input__wrapper {
48
+ min-height: var(--ds-sizing-10);
49
+ padding: 5px var(--ds-spacing-2);
59
50
  }
60
51
 
61
- .fds-combobox--md .fds-combobox__input__wrapper .fds-combobox__input {
62
- font: var(--fds-typography-paragraph-medium);
63
- font-family: inherit;
52
+ .ds-combobox--md .ds-combobox__input__wrapper {
53
+ min-height: var(--ds-sizing-12);
54
+ padding: 7px var(--ds-spacing-3);
64
55
  }
65
56
 
66
- .fds-combobox--lg .fds-combobox__input__wrapper {
67
- min-height: var(--fds-sizing-14);
68
- font: var(--fds-typography-paragraph-large);
69
- font-family: inherit;
70
- padding: 7px var(--fds-spacing-4);
57
+ .ds-combobox--lg .ds-combobox__input__wrapper {
58
+ min-height: var(--ds-sizing-14);
59
+ padding: 7px var(--ds-spacing-4);
71
60
  }
72
61
 
73
- .fds-combobox--lg .fds-combobox__input__wrapper .fds-combobox__input {
74
- font: var(--fds-typography-paragraph-large);
75
- font-family: inherit;
76
- }
77
-
78
- .fds-combobox__input__wrapper .fds-combobox__input:focus {
62
+ .ds-combobox__input__wrapper .ds-combobox__input:focus {
79
63
  outline: none;
80
64
  }
81
65
 
82
- .fds-combobox__input__wrapper.fds-combobox--error {
83
- border-color: var(--fds-semantic-border-danger-default);
66
+ .ds-combobox__input__wrapper.ds-combobox--error {
67
+ border-color: var(--ds-color-danger-border-default);
84
68
  border-width: 2px;
85
69
  }
86
70
 
87
- .fds-combobox__chip-and-input {
71
+ .ds-combobox__chip-and-input {
88
72
  display: flex;
89
73
  flex-wrap: wrap;
90
74
  width: 100%;
91
- gap: var(--fds-spacing-2);
75
+ gap: var(--ds-spacing-2);
92
76
  align-items: center;
93
77
  background-color: transparent;
94
78
  }
95
79
 
96
- .fds-combobox__arrow {
80
+ .ds-combobox__arrow {
97
81
  display: grid;
98
82
  place-items: center;
99
83
  cursor: pointer;
100
84
  }
101
85
 
102
- .fds-combobox__input__wrapper.fds-combobox--readonly {
103
- background: var(--fds-semantic-surface-neutral-subtle);
104
- border-color: var(--fds-semantic-border-neutral-default);
86
+ .ds-combobox__input__wrapper.ds-combobox--readonly {
87
+ background: var(--ds-color-accent-base-default);
88
+ border-color: var(--ds-color-accent-base-default);
105
89
  }
106
90
 
107
- .fds-combobox__label {
91
+ .ds-combobox__label {
92
+ grid-column: 1 / 2;
93
+ grid-row: 1 / 2;
108
94
  min-width: min-content;
109
95
  display: inline-flex;
110
96
  flex-direction: row;
111
- gap: var(--fds-spacing-1);
97
+ gap: var(--ds-spacing-1);
112
98
  align-items: center;
113
99
  }
114
100
 
115
- .fds-combobox__description {
116
- color: var(--fds-semantic-text-neutral-subtle);
117
- margin-top: calc(var(--fds-spacing-2) * -1);
101
+ .ds-combobox__description {
102
+ color: var(--ds-color-neutral-text-subtle);
103
+ margin-top: calc(var(--ds-spacing-2) * -1);
118
104
  }
119
105
 
120
- .fds-combobox__clear-button {
106
+ .ds-combobox__clear-button {
121
107
  display: grid;
122
108
  place-items: center;
123
109
  cursor: pointer;
124
110
  background-color: transparent;
125
- color: var(--fds-semantic-text-neutral-default);
111
+ color: var(--ds-color-neutral-text-default);
126
112
  border: none;
127
113
  padding: 0;
128
- border-radius: var(--fds-spacing-1);
114
+ border-radius: var(--ds-spacing-1);
129
115
  height: 29px;
130
116
  width: 29px;
131
117
  aspect-ratio: 1;
132
118
  }
133
119
 
134
- .fds-combobox--sm .fds-combobox__clear-button {
120
+ .ds-combobox--sm .ds-combobox__clear-button {
135
121
  height: 25px;
136
122
  width: 25px;
137
123
  }
138
124
 
139
- .fds-combobox--md .fds-combobox__clear-button {
125
+ .ds-combobox--md .ds-combobox__clear-button {
140
126
  height: 29px;
141
127
  width: 29px;
142
128
  }
143
129
 
144
- .fds-combobox--lg .fds-combobox__clear-button {
130
+ .ds-combobox--lg .ds-combobox__clear-button {
145
131
  height: 31px;
146
132
  width: 31px;
147
133
  }
148
134
 
149
- .fds-combobox__clear-button:not(:disabled):hover {
150
- background-color: var(--fds-semantic-surface-info-subtle-hover);
135
+ .ds-combobox__clear-button:not(:disabled):hover {
136
+ background-color: var(--ds-color-neutral-surface-default);
151
137
  }
152
138
 
153
- .fds-combobox__disabled {
154
- opacity: var(--fds-opacity-disabled);
139
+ .ds-combobox__disabled {
140
+ opacity: var(--ds-disabled-opacity);
155
141
  }
156
142
 
157
- .fds-combobox__disabled * {
143
+ .ds-combobox__disabled * {
158
144
  cursor: not-allowed;
159
145
  }
160
146
 
161
- .fds-combobox__readonly__icon {
147
+ .ds-combobox__readonly__icon {
162
148
  height: 1.2em;
163
149
  width: 1.2em;
164
150
  }
165
151
 
166
- .fds-combobox__error-message {
167
- margin-top: var(--fds-spacing-2);
152
+ .ds-combobox__error-message {
153
+ margin-top: var(--ds-spacing-2);
168
154
  }
169
155
 
170
- .fds-combobox__error-message:empty {
156
+ .ds-combobox__error-message:empty {
171
157
  display: none;
172
158
  }
173
159
 
174
- .fds-combobox__loading {
160
+ .ds-combobox__loading {
175
161
  display: flex;
176
- gap: var(--fds-spacing-2);
162
+ gap: var(--ds-spacing-2);
177
163
  align-content: center;
178
164
  }
179
165
 
180
166
  /**
181
167
  * Apply a focus outline on an element when it is focused with keyboard
182
168
  */
183
- .fds-combobox__input__wrapper:has(input:focus) {
184
- --fds-focus-border-width: 3px;
185
-
186
- outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
187
- outline-offset: var(--fds-focus-border-width);
188
- box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow) !important;
189
- }
190
-
191
- .fds-combobox__empty {
192
- padding: var(--fds-spacing-2) var(--fds-spacing-3);
193
- }
194
-
195
- .fds-combobox--lg .fds-combobox__empty {
196
- font: var(--fds-typography-label-large);
197
- font-family: inherit;
198
- font-weight: 400;
199
- }
200
-
201
- .fds-combobox--md .fds-combobox__empty {
202
- font: var(--fds-typography-label-medium);
203
- font-family: inherit;
204
- font-weight: 400;
205
- }
169
+ .ds-combobox__input__wrapper:has(input:focus) {
170
+ --dsc-focus-border-width: 3px;
206
171
 
207
- .fds-combobox--sm .fds-combobox__empty {
208
- font: var(--fds-typography-label-small);
209
- font-family: inherit;
210
- font-weight: 400;
172
+ outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
173
+ outline-offset: var(--dsc-focus-border-width);
174
+ box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
211
175
  }
212
176
 
213
- .fds-combobox__custom {
214
- padding: var(--fds-spacing-2) var(--fds-spacing-3);
177
+ .ds-combobox__input__wrapper:focus-within:hover {
178
+ border-color: var(--ds-color-neutral-border-default);
215
179
  }
216
180
 
217
- .fds-combobox--lg .fds-combobox__custom {
218
- font: var(--fds-typography-label-large);
219
- font-family: inherit;
181
+ .ds-combobox__empty {
220
182
  font-weight: 400;
183
+ padding: var(--ds-spacing-2) var(--ds-spacing-3);
221
184
  }
222
185
 
223
- .fds-combobox--md .fds-combobox__custom {
224
- font: var(--fds-typography-label-medium);
225
- font-family: inherit;
186
+ .ds-combobox__custom {
226
187
  font-weight: 400;
188
+ padding: var(--ds-spacing-2) var(--ds-spacing-3);
227
189
  }
228
190
 
229
- .fds-combobox--sm .fds-combobox__custom {
230
- font: var(--fds-typography-label-small);
231
- font-family: inherit;
232
- font-weight: 400;
233
- }
234
-
235
- .fds-combobox__option {
191
+ .ds-combobox__option {
236
192
  width: 100%;
237
193
  display: grid;
238
194
  grid-template-columns: 1.2em 1fr;
239
- padding: var(--fds-spacing-2) var(--fds-spacing-3);
240
- padding-left: var(--fds-spacing-1);
195
+ padding: var(--ds-spacing-2) var(--ds-spacing-3);
196
+ padding-left: var(--ds-spacing-1);
241
197
  border: none;
242
198
  border-left: 5px solid transparent;
243
- border-radius: var(--fds-border_radius-interactive);
199
+ border-radius: var(--ds-border-radius-md);
244
200
  justify-content: start;
245
201
  background: none;
246
202
  text-align: left;
247
203
  height: auto;
248
204
  cursor: pointer;
249
- font: var(--fds-typography-label-medium);
250
205
  font-family: inherit;
251
206
  }
252
207
 
253
- .fds-combobox__option.fds-combobox__option--active {
254
- background: var(--fds-semantic-surface-action-first-no_fill-hover);
255
- border-left: 5px solid var(--fds-semantic-border-input-hover);
208
+ .ds-combobox__option.ds-combobox__option--active {
209
+ background: var(--ds-color-accent-background-subtle);
210
+ border-left: 5px solid var(--ds-color-accent-base-default);
256
211
  }
257
212
 
258
- .fds-combobox__option > div {
213
+ .ds-combobox__option > div {
259
214
  align-self: flex-start;
260
215
  }
261
216
 
262
- .fds-combobox__option.fds-combobox__option--multiple {
217
+ .ds-combobox__option.ds-combobox__option--multiple {
263
218
  grid-template-columns: auto 1fr;
264
- gap: var(--fds-spacing-2);
219
+ gap: var(--ds-spacing-2);
265
220
  }
266
221
 
267
- .fds-combobox__option__label {
222
+ .ds-combobox__option__label {
268
223
  margin: auto 0;
269
224
  display: flex;
270
225
  flex-direction: column;
271
226
  flex-wrap: wrap;
272
227
  cursor: pointer;
273
- gap: var(--fds-spacing-1);
274
- color: var(--fds-semantic-text-neutral-default);
228
+ gap: var(--ds-spacing-1);
229
+ color: var(--ds-color-neutral-text-default);
275
230
  }
276
231
 
277
- .fds-combobox__option--active .fds-combobox__option__label {
278
- color: var(--fds-semantic-text-action-hover);
232
+ .ds-combobox__option--active .ds-combobox__option__label {
233
+ color: var(--ds-color-accent-text-default);
279
234
  }
280
235
 
281
- .fds-combobox__option__icon-wrapper {
282
- width: var(--fds-spacing-6);
236
+ .ds-combobox__option__icon-wrapper {
237
+ width: var(--ds-spacing-6);
283
238
  aspect-ratio: 1 / 1;
284
- border: 2px solid var(--fds-semantic-border-input-default);
285
- border-radius: var(--fds-border_radius-interactive);
286
- background-color: white;
239
+ border: 2px solid var(--ds-color-neutral-border-default);
240
+ border-radius: var(--ds-border-radius-md);
241
+ background-color: var(--ds-color-neutral-background-default);
287
242
  display: grid;
288
243
  place-items: center;
289
244
  }
290
245
 
291
- .fds-combobox__option--active .fds-combobox__option__icon-wrapper {
292
- border-color: var(--fds-semantic-border-input-hover);
246
+ .ds-combobox__option--active .ds-combobox__option__icon-wrapper {
247
+ border-color: var(--ds-color-accent-base-default);
293
248
  }
294
249
 
295
- .fds-combobox--sm .fds-combobox__option .fds-combobox__option__icon-wrapper {
296
- width: var(--fds-spacing-5);
250
+ .ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper {
251
+ width: var(--ds-spacing-5);
297
252
  }
298
253
 
299
- .fds-combobox--md .fds-combobox__option .fds-combobox__option__icon-wrapper {
300
- width: var(--fds-spacing-6);
254
+ .ds-combobox--md .ds-combobox__option .ds-combobox__option__icon-wrapper {
255
+ width: var(--ds-spacing-6);
301
256
  }
302
257
 
303
- .fds-combobox--lg .fds-combobox__option .fds-combobox__option__icon-wrapper {
304
- width: var(--fds-spacing-7);
258
+ .ds-combobox--lg .ds-combobox__option .ds-combobox__option__icon-wrapper {
259
+ width: var(--ds-spacing-7);
305
260
  }
306
261
 
307
- .fds-combobox__option__icon-wrapper.fds-combobox__option__icon-wrapper--selected {
308
- border-color: var(--fds-semantic-border-input-hover);
309
- background-color: var(--fds-semantic-border-input-hover);
262
+ .ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected {
263
+ border-color: var(--ds-color-accent-base-default);
264
+ background-color: var(--ds-color-accent-base-default);
310
265
  }
311
266
 
312
- .fds-combobox__option__icon-wrapper__icon {
267
+ .ds-combobox__option__icon-wrapper__icon {
313
268
  box-sizing: border-box;
314
269
  padding-top: 0.2em;
315
270
  transform: scale(1.4);
316
- stroke: var(--fds-semantic-text-neutral-default);
317
- color: var(--fds-semantic-text-neutral-default);
271
+ stroke: var(--ds-color-neutral-text-default);
272
+ color: var(--ds-color-neutral-text-default);
318
273
  }
319
274
 
320
- .fds-combobox__option__icon-wrapper .fds-combobox__option__icon-wrapper__icon {
275
+ .ds-combobox__option__icon-wrapper .ds-combobox__option__icon-wrapper__icon {
321
276
  padding-top: 0;
322
277
  }
323
278
 
324
- .fds-combobox__option--active .fds-combobox__option__icon-wrapper__icon {
325
- stroke: var(--fds-semantic-text-action-hover);
326
- color: var(--fds-semantic-text-action-hover);
279
+ .ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon {
280
+ stroke: var(--ds-color-accent-text-default);
281
+ color: var(--ds-color-accent-text-default);
327
282
  }
328
283
 
329
- .fds-combobox__option__icon-wrapper.fds-combobox__option__icon-wrapper--selected .fds-combobox__option__icon-wrapper__icon {
284
+ .ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon {
330
285
  color: white;
331
286
  stroke: white;
332
287
  }
333
288
 
334
- .fds-combobox__option__description {
289
+ .ds-combobox__option__description {
335
290
  display: flex;
336
291
  flex-direction: column;
337
292
  flex-wrap: wrap;
338
- gap: var(--fds-spacing-1);
339
- color: var(--fds-semantic-text-neutral-subtle);
340
- font: inherit;
341
- font-family: inherit;
293
+ gap: var(--ds-spacing-1);
294
+ color: var(--ds-color-neutral-text-subtle);
342
295
  }
343
296
  }
package/dist/accordion.css CHANGED
@@ -1 +1 @@
1
- @layer fds.accordion{.fds-accordion{--fds-accordion-border-radius:var(--fds-border_radius-interactive);--fds-accordion-border-color:var(--fds-semantic-border-neutral-subtle);border-bottom:1px solid var(--fds-semantic-border-neutral-subtle);box-sizing:border-box}.fds-accordion--border{border:1px solid var(--fds-accordion-border-color);border-radius:var(--fds-accordion-border-radius)}.fds-accordion__expand-icon{border-radius:var(--fds-border_radius-interactive)}.fds-accordion__content{overflow:hidden;padding:var(--fds-spacing-5,1rem);text-overflow:ellipsis}.fds-accordion__header{margin:0}.fds-accordion__button{align-items:center;border:none;border-top:1px solid var(--fds-semantic-border-neutral-subtle);cursor:pointer;display:flex;gap:var(--fds-spacing-2);justify-content:flex-start;margin:0;padding:var(--fds-spacing-4);text-align:left;width:100%}.fds-accordion--border .fds-accordion__button{border-radius:var(--fds-accordion-border-radius)}.fds-accordion__item:focus-within{position:relative}.fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__expand-icon{transform:rotate(180deg)}.fds-accordion--neutral,.fds-accordion--neutral .fds-accordion__button{background-color:var(--fds-semantic-surface-neutral-default)}.fds-accordion--subtle,.fds-accordion--subtle .fds-accordion__button{background-color:var(--fds-semantic-surface-neutral-subtle)}.fds-accordion--first,.fds-accordion--first .fds-accordion__button{--fds-accordion-border-color:var(--fds-semantic-border-first-default);background:var(--fds-semantic-surface-first-light)}.fds-accordion--second,.fds-accordion--second .fds-accordion__button{--fds-accordion-border-color:var(--fds-semantic-border-second-default);background:var(--fds-semantic-surface-second-light)}.fds-accordion--third,.fds-accordion--third .fds-accordion__button{--fds-accordion-border-color:var(--fds-semantic-border-third-default);background:var(--fds-semantic-surface-third-light)}.fds-accordion--first .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--second .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--third .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button{background-color:rgba(0,0,0,.03)}.fds-accordion--neutral .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--subtle .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button{background-color:var(--fds-semantic-surface-action-first-no_fill-hover)}.fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button{border-top:0}.fds-accordion--first .fds-accordion__item:not(:first-child) .fds-accordion__button,.fds-accordion--second .fds-accordion__item:not(:first-child) .fds-accordion__button,.fds-accordion--third .fds-accordion__item:not(:first-child) .fds-accordion__button{border-top:1px solid var(--fds-semantic-surface-neutral-default)}@media (hover:hover) and (pointer:fine){.fds-accordion__button:hover .fds-accordion__expand-icon{background-color:rgba(0,0,0,.1)}.fds-accordion--neutral .fds-accordion__button:hover,.fds-accordion--subtle .fds-accordion__button:hover{background-color:var(--fds-semantic-surface-neutral-subtle-hover)}.fds-accordion--first .fds-accordion__button:hover{background-color:var(--fds-semantic-surface-first-light-hover)}.fds-accordion--second .fds-accordion__button:hover{background-color:var(--fds-semantic-surface-second-light-hover)}.fds-accordion--third .fds-accordion__button:hover{background-color:var(--fds-semantic-surface-third-light-hover)}}}
1
+ @layer ds.accordion{.ds-accordion{--dsc-accordion-border-radius:var(--ds-border-radius-md);--dsc-accordion-border-color:var(--ds-color-neutral-border-subtle);--dsc-accordion-background:var(--ds-color-neutral-background-default);--dsc-accordion-button-background:var(--ds-color-neutral-background-default);--dsc-accordion-button-background-open:var(--ds-color-neutral-background-subtle);--dsc-accordion-icon-background-hover:var(--ds-color-neutral-surface-default);--dsc-accordion-icon-background-active:var(--ds-color-neutral-surface-default);background-color:var(--dsc-accordion-background);border-bottom:1px solid var(--dsc-accordion-border-color);box-sizing:border-box}.ds-accordion--border{border:1px solid var(--dsc-accordion-border-color);border-radius:var(--dsc-accordion-border-radius)}.ds-accordion__expand-icon{border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default)}.ds-accordion__content{overflow:hidden;padding:var(--ds-spacing-5,1rem);text-overflow:ellipsis}.ds-accordion__header{background-color:var(--dsc-accordion-button-background);border:none;border-top:1px solid var(--dsc-accordion-border-color);text-align:left}.ds-accordion__button,.ds-accordion__header{align-items:center;display:flex;gap:var(--ds-spacing-2);justify-content:flex-start;margin:0;width:100%}.ds-accordion__button{background-color:initial;border:none;cursor:pointer;font-family:inherit;padding:var(--ds-spacing-4)}.ds-accordion__item--open .ds-accordion__header{background-color:var(--dsc-accordion-button-background-open)}.ds-accordion__item:focus-within{position:relative}.ds-accordion__item:where(.ds-accordion__item--open) .ds-accordion__expand-icon{transform:rotate(180deg)}.ds-accordion__item:not(:first-child) .ds-accordion__header{border-top:1px solid var(--dsc-accordion-border-color)}.ds-accordion--border .ds-accordion__item:first-child .ds-accordion__header{border-top:0}.ds-accordion--border .ds-accordion__item:first-of-type .ds-accordion__header:first-of-type{border-top-left-radius:var(--dsc-accordion-border-radius);border-top-right-radius:var(--dsc-accordion-border-radius)}.ds-accordion--border .ds-accordion__item:last-of-type:not(.ds-accordion__item--open) .ds-accordion__header:first-of-type{border-bottom-left-radius:var(--dsc-accordion-border-radius);border-bottom-right-radius:var(--dsc-accordion-border-radius)}@media (hover:hover) and (pointer:fine){.ds-accordion__header:hover .ds-accordion__expand-icon{background-color:var(--dsc-accordion-icon-background-hover)}.ds-accordion__item--open .ds-accordion__header:hover .ds-accordion__expand-icon{background-color:var(--dsc-accordion-icon-background-active)}}.ds-accordion--neutral{--dsc-accordion-background:var(--ds-color-neutral-background-default);--dsc-accordion-button-background:var(--ds-color-neutral-background-default);--dsc-accordion-button-background-open:var(--ds-color-neutral-background-subtle);--dsc-accordion-icon-background-hover:var(--ds-color-neutral-surface-default)}.ds-accordion--subtle{--dsc-accordion-background:var(--ds-color-neutral-background-subtle);--dsc-accordion-border-color:var(--ds-color-neutral-border-default);--dsc-accordion-button-background:var(--ds-color-neutral-background-subtle);--dsc-accordion-button-background-open:var(--ds-color-neutral-surface-default);--dsc-accordion-icon-background-hover:var(--ds-color-neutral-surface-default);--dsc-accordion-icon-background-active:var(--ds-color-neutral-surface-active)}.ds-accordion--brand1{--dsc-accordion-background:var(--ds-color-brand1-background-subtle);--dsc-accordion-border-color:var(--ds-color-brand1-border-subtle);--dsc-accordion-button-background:var(--ds-color-brand1-surface-default);--dsc-accordion-button-background-open:var(--ds-color-brand1-surface-hover);--dsc-accordion-icon-background-hover:var(--ds-color-brand1-surface-active);--dsc-accordion-icon-background-active:var(--ds-color-brand1-surface-active)}.ds-accordion--brand2{--dsc-accordion-background:var(--ds-color-brand2-background-subtle);--dsc-accordion-border-color:var(--ds-color-brand2-border-subtle);--dsc-accordion-button-background:var(--ds-color-brand2-surface-default);--dsc-accordion-button-background-open:var(--ds-color-brand2-surface-hover);--dsc-accordion-icon-background-hover:var(--ds-color-brand2-surface-active);--dsc-accordion-icon-background-active:var(--ds-color-brand2-surface-active)}.ds-accordion--brand3{--dsc-accordion-background:var(--ds-color-brand3-background-subtle);--dsc-accordion-border-color:var(--ds-color-brand3-border-subtle);--dsc-accordion-button-background:var(--ds-color-brand3-surface-default);--dsc-accordion-button-background-open:var(--ds-color-brand3-surface-hover);--dsc-accordion-icon-background-hover:var(--ds-color-brand3-surface-active);--dsc-accordion-icon-background-active:var(--ds-color-brand3-surface-active)}}
package/dist/alert.css CHANGED
@@ -1 +1 @@
1
- @layer fds.alert{.fds-alert{--fds-alert-border-color:var(--fds-semantic-border-info-default);--fds-alert-border-radius:var(--fds-border_radius-medium);--fds-alert-color:var(--fds-semantic-text-neutral-default);--fds-alert-icon-color:var(--fds-alert-border-color);--fds-alert-icon-size:var(--fds-sizing-7);--fds-alert-background:var(--fds-semantic-surface-info-subtle);--fds-alert-padding:var(--fds-spacing-6);background:var(--fds-alert-background);border:1px solid var(--fds-alert-border-color);border-radius:var(--fds-alert-border-radius);color:var(--fds-alert-color);display:grid;font:var(--fds-typography-paragraph-medium);gap:var(--fds-spacing-2);grid-auto-columns:-webkit-min-content auto;grid-auto-columns:min-content auto;grid-auto-flow:column;padding:var(--fds-alert-padding)}.fds-alert__icon{color:var(--fds-alert-icon-color);height:var(--fds-alert-icon-size);width:var(--fds-alert-icon-size)}.fds-alert__content{display:flex;flex-direction:column}.fds-alert--info{--fds-alert-border-color:var(--fds-semantic-border-info-default);--fds-alert-background:var(--fds-semantic-surface-info-subtle)}.fds-alert--warning{--fds-alert-border-color:var(--fds-semantic-border-warning-default);--fds-alert-background:var(--fds-semantic-surface-warning-subtle)}.fds-alert--success{--fds-alert-border-color:var(--fds-semantic-border-success-default);--fds-alert-background:var(--fds-semantic-surface-success-subtle)}.fds-alert--danger{--fds-alert-border-color:var(--fds-semantic-border-danger-default);--fds-alert-background:var(--fds-semantic-surface-danger-subtle)}.fds-alert--sm{--fds-alert-padding:var(--fds-spacing-5);--fds-alert-icon-size:var(--fds-sizing-6)}.fds-alert--md{--fds-alert-padding:var(--fds-spacing-6);--fds-alert-icon-size:var(--fds-sizing-7)}.fds-alert--lg{--fds-alert-padding:var(--fds-spacing-7);--fds-alert-icon-size:var(--fds-sizing-8)}.fds-alert--elevated{box-shadow:var(--fds-shadow-small)}}
1
+ @layer ds.alert{.ds-alert{--dsc-alert-border-color:var(--ds-color-info-border-strong);--dsc-alert-border-radius:var(--ds-border-radius-md);--dsc-alert-color:var(--ds-color-neutral-text-default);--dsc-alert-icon-color:var(--dsc-alert-border-color);--dsc-alert-icon-size:var(--ds-sizing-7);--dsc-alert-background:var(--ds-color-info-surface-default);--dsc-alert-padding:var(--ds-spacing-6);background:var(--dsc-alert-background);border:1px solid var(--dsc-alert-border-color);border-radius:var(--dsc-alert-border-radius);color:var(--dsc-alert-color);display:grid;gap:var(--ds-spacing-2);grid-auto-columns:-webkit-min-content auto;grid-auto-columns:min-content auto;grid-auto-flow:column;padding:var(--dsc-alert-padding)}.ds-alert__icon{color:var(--dsc-alert-icon-color);height:var(--dsc-alert-icon-size);width:var(--dsc-alert-icon-size)}.ds-alert__content{display:flex;flex-direction:column}.ds-alert--info{--dsc-alert-border-color:var(--ds-color-info-border-strong);--dsc-alert-icon-color:var(--ds-color-info-base-default);--dsc-alert-background:var(--ds-color-info-surface-default)}.ds-alert--warning{--dsc-alert-border-color:var(--ds-color-warning-border-default);--dsc-alert-icon-color:var(--ds-color-warning-base-default);--dsc-alert-background:var(--ds-color-warning-surface-default)}.ds-alert--success{--dsc-alert-border-color:var(--ds-color-success-border-default);--dsc-alert-icon-color:var(--ds-color-success-base-default);--dsc-alert-background:var(--ds-color-success-surface-default)}.ds-alert--danger{--dsc-alert-border-color:var(--ds-color-danger-border-default);--dsc-alert-icon-color:var(--ds-color-danger-base-default);--dsc-alert-background:var(--ds-color-danger-surface-default)}.ds-alert--sm{--dsc-alert-padding:var(--ds-spacing-5);--dsc-alert-icon-size:var(--ds-sizing-6)}.ds-alert--md{--dsc-alert-padding:var(--ds-spacing-6);--dsc-alert-icon-size:var(--ds-sizing-7)}.ds-alert--lg{--dsc-alert-padding:var(--ds-spacing-7);--dsc-alert-icon-size:var(--ds-sizing-8)}.ds-alert--elevated{box-shadow:var(--ds-shadow-sm)}}
package/dist/box.css CHANGED
@@ -1 +1 @@
1
- @layer fds.box{.fds-box--xs-shadow{box-shadow:var(--fds-shadow-xsmall)}.fds-box--sm-shadow{box-shadow:var(--fds-shadow-small)}.fds-box--md-shadow{box-shadow:var(--fds-shadow-medium)}.fds-box--lg-shadow{box-shadow:var(--fds-shadow-large)}.fds-box--xl-shadow{box-shadow:var(--fds-shadow-xlarge)}.fds-box--default-border-color{border:1px solid var(--fds-semantic-border-neutral-default)}.fds-box--subtle-border-color{border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-box--strong-border-color{border:1px solid var(--fds-semantic-border-neutral-strong)}.fds-box--sm-border-radius{border-radius:var(--fds-border_radius-small)}.fds-box--md-border-radius{border-radius:var(--fds-border_radius-medium)}.fds-box--lg-border-radius{border-radius:var(--fds-border_radius-large)}.fds-box--xl-border-radius{border-radius:var(--fds-border_radius-xlarge)}.fds-box--2xl-border-radius{border-radius:var(--fds-border_radius-xxlarge)}.fds-box--3xl-border-radius{border-radius:var(--fds-border_radius-xxxlarge)}.fds-box--4xl-border-radius{border-radius:var(--fds-border_radius-xxxxlarge)}.fds-box--full-border-radius{border-radius:var(--fds-border_radius-full)}.fds-box--default-background{background-color:var(--fds-semantic-background-default)}.fds-box--subtle-background{background-color:var(--fds-semantic-background-subtle)}}
1
+ @layer ds.box{.ds-box--xs-shadow{box-shadow:var(--ds-shadow-xs)}.ds-box--sm-shadow{box-shadow:var(--ds-shadow-sm)}.ds-box--md-shadow{box-shadow:var(--ds-shadow-md)}.ds-box--lg-shadow{box-shadow:var(--ds-shadow-lg)}.ds-box--xl-shadow{box-shadow:var(--ds-shadow-xl)}.ds-box--default-border-color{border:1px solid var(--ds-color-neutral-border-default)}.ds-box--subtle-border-color{border:1px solid var(--ds-color-neutral-border-subtle)}.ds-box--strong-border-color{border:1px solid var(--ds-color-neutral-base-strong)}.ds-box--sm-border-radius{border-radius:var(--ds-border-radius-sm)}.ds-box--md-border-radius{border-radius:var(--ds-border-radius-md)}.ds-box--lg-border-radius{border-radius:var(--ds-border-radius-lg)}.ds-box--xl-border-radius{border-radius:var(--ds-border-radius-xl)}.ds-box--2xl-border-radius{border-radius:var(--ds-border-radius-2xl)}.ds-box--3xl-border-radius{border-radius:var(--ds-border-radius-3xl)}.ds-box--4xl-border-radius{border-radius:var(--ds-border-radius-4xl)}.ds-box--full-border-radius{border-radius:var(--ds-border-radius-full)}.ds-box--default-background{background-color:var(--ds-color-neutral-background-default)}.ds-box--subtle-background{background-color:var(--ds-color-neutral-background-subtle)}}
package/dist/button.css CHANGED
@@ -1 +1 @@
1
- @layer fds.btn{.fds-btn{--fds-btn-padding:var(--fds-spacing-2) var(--fds-spacing-4);align-items:center;background-color:var(--fds-semantic-surface-action-first-default);border:var(--fds-border_width-default) solid transparent;border-radius:var(--fds-border_radius-interactive);box-sizing:border-box;color:var(--fds-semantic-text-action-first-on_action);cursor:pointer;display:flex;font-family:inherit;justify-content:center;min-height:var(--fds-sizing-10);min-width:2.5em;padding:var(--fds-btn-padding);position:relative;text-align:center;text-decoration:none}.fds-btn svg{overflow:visible}.fds-btn:disabled,.fds-btn[aria-disabled=true]{cursor:not-allowed;opacity:var(--fds-opacity-disabled)}.fds-btn--sm{--fds-btn-padding:var(--fds-spacing-2) var(--fds-spacing-3);font:var(--fds-typography-paragraph-short-small);font-family:inherit;gap:var(--fds-sizing-1);min-height:var(--fds-sizing-10)}.fds-btn--sm:before{content:"";left:0;min-height:auto;position:absolute;top:0;width:auto}.fds-btn--sm:after{content:"";height:44px;left:0;position:absolute;top:-5px;width:100%}.fds-btn--md{--fds-btn-padding:var(--fds-spacing-2) var(--fds-spacing-4);font:var(--fds-typography-paragraph-short-medium);font-family:inherit;gap:var(--fds-sizing-2);min-height:var(--fds-sizing-12)}.fds-btn--lg{--fds-btn-padding:var(--fds-spacing-3) var(--fds-spacing-5);font:var(--fds-typography-paragraph-short-large);font-family:inherit;gap:var(--fds-sizing-2);min-height:var(--fds-sizing-14)}.fds-btn--full-width{width:100%}.fds-btn--secondary,.fds-btn--tertiary{background-color:initial}.fds-btn--icon-only{--fds-btn-padding:0}.fds-btn--primary:where(.fds-btn--first){background-color:var(--fds-semantic-surface-action-first-default)}.fds-btn--primary:where(.fds-btn--second){background-color:var(--fds-semantic-surface-action-second-default)}.fds-btn--primary:where(.fds-btn--success){background-color:var(--fds-semantic-surface-success-default)}.fds-btn--primary:where(.fds-btn--danger){background-color:var(--fds-semantic-surface-danger-default)}@media (hover:hover) and (pointer:fine){.fds-btn--primary:where(.fds-btn--first):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-first-hover)}.fds-btn--primary:where(.fds-btn--second):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-second-hover)}.fds-btn--primary:where(.fds-btn--success):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-success-hover)}.fds-btn--primary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-danger-hover)}.fds-btn--secondary:where(.fds-btn--first):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-first-no_fill-hover);border-color:var(--fds-semantic-border-action-first-hover);color:var(--fds-semantic-text-action-first-hover)}.fds-btn--secondary:where(.fds-btn--second):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-second-no_fill-hover);border-color:var(--fds-semantic-border-action-second-hover);color:var(--fds-semantic-text-action-second-hover)}.fds-btn--secondary:where(.fds-btn--success):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-success-no_fill-hover);border-color:var(--fds-semantic-border-success-hover);color:var(--fds-semantic-text-success-hover)}.fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-danger-no_fill-hover);border-color:var(--fds-semantic-border-danger-hover);color:var(--fds-semantic-text-danger-hover)}.fds-btn--tertiary:where(.fds-btn--first):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-first-no_fill-hover);color:var(--fds-semantic-text-action-first-hover)}.fds-btn--tertiary:where(.fds-btn--second):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-second-no_fill-hover);color:var(--fds-semantic-text-action-second-hover)}.fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-success-no_fill-hover);color:var(--fds-semantic-text-success-hover)}.fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-danger-no_fill-hover);color:var(--fds-semantic-text-danger-hover)}}.fds-btn--primary:where(.fds-btn--first):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-first-active)}.fds-btn--primary:where(.fds-btn--second):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-second-active)}.fds-btn--primary:where(.fds-btn--success):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-success-active)}.fds-btn--primary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-danger-active)}.fds-btn--secondary:where(.fds-btn--first){background-color:var(--fds-semantic-surface-action-first-no_fill);border-color:var(--fds-semantic-border-action-first-default);color:var(--fds-semantic-text-action-first-default)}.fds-btn--secondary:where(.fds-btn--second){background-color:var(--fds-semantic-surface-action-second-no_fill);border-color:var(--fds-semantic-border-action-second-default);color:var(--fds-semantic-text-action-second-default)}.fds-btn--secondary:where(.fds-btn--success){background-color:var(--fds-semantic-surface-success-no_fill);border-color:var(--fds-semantic-border-success-default);color:var(--fds-semantic-text-success-default)}.fds-btn--secondary:where(.fds-btn--danger){background-color:var(--fds-semantic-surface-danger-no_fill);border-color:var(--fds-semantic-border-danger-default);color:var(--fds-semantic-text-danger-default)}.fds-btn--secondary:where(.fds-btn--first):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-first-no_fill-active);border-color:var(--fds-semantic-border-action-first-active);color:var(--fds-semantic-text-action-first-active)}.fds-btn--secondary:where(.fds-btn--second):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-second-no_fill-active);border-color:var(--fds-semantic-border-action-second-active);color:var(--fds-semantic-text-action-second-active)}.fds-btn--secondary:where(.fds-btn--success):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-success-no_fill-active);border-color:var(--fds-semantic-border-success-active);color:var(--fds-semantic-text-success-active)}.fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-danger-no_fill-active);border-color:var(--fds-semantic-border-danger-active);color:var(--fds-semantic-text-danger-active)}.fds-btn--tertiary:where(.fds-btn--first){color:var(--fds-semantic-text-action-first-default)}.fds-btn--tertiary:where(.fds-btn--second){color:var(--fds-semantic-text-action-second-default)}.fds-btn--tertiary:where(.fds-btn--success){color:var(--fds-semantic-text-success-default)}.fds-btn--tertiary:where(.fds-btn--danger){color:var(--fds-semantic-text-danger-default)}.fds-btn--tertiary:where(.fds-btn--first):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-first-no_fill-active);color:var(--fds-semantic-text-action-first-active)}.fds-btn--tertiary:where(.fds-btn--second):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-second-no_fill-active);color:var(--fds-semantic-text-action-second-active)}.fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-success-no_fill-active);color:var(--fds-semantic-text-success-active)}.fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-danger-no_fill-active);color:var(--fds-semantic-text-danger-active)}}
1
+ @layer ds.btn{.ds-btn{--dsc-btn-padding:var(--ds-spacing-2) var(--ds-spacing-4);--dsc-btn-primary-background:var(--ds-color-accent-base-default);--dsc-btn-primary-hover-background:var(--ds-color-accent-base-hover);--dsc-btn-primary-active-background:var(--ds-color-accent-base-active);--dsc-btn-primary-hover-color:var(--ds-color-accent-contrast-default);--dsc-btn-secondary-color:var(--ds-color-accent-text-default);--dsc-btn-secondary-hover-color:var(--ds-color-accent-text-default);--dsc-btn-secondary-active-color:var(--ds-color-accent-text-default);--dsc-btn-secondary-border-color:var(--ds-color-accent-border-strong);--dsc-btn-secondary-hover-background:var(--ds-color-accent-surface-hover);--dsc-btn-secondary-active-background:var(--ds-color-accent-surface-hover);--dsc-btn-tertiary-color:var(--ds-color-accent-text-default);--dsc-btn-tertiary-hover-color:var(--ds-color-accent-text-default);--dsc-btn-tertiary-active-color:var(--ds-color-accent-text-default);--dsc-btn-tertiary-hover-background:var(--ds-color-accent-surface-hover);--dsc-btn-tertiary-active-background:var(--ds-color-accent-surface-hover);align-items:center;background-color:var(--dsc-btn-primary-background);border:var(--ds-border-width-default) solid transparent;border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--dsc-btn-primary-color);cursor:pointer;display:flex;font-family:inherit;justify-content:center;min-height:var(--ds-sizing-10);min-width:2.5em;padding:var(--dsc-btn-padding);position:relative;text-align:center;text-decoration:none}.ds-btn svg{overflow:visible}.ds-btn:disabled,.ds-btn[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-disabled-opacity)}.ds-btn--sm{--dsc-btn-padding:var(--ds-spacing-2) var(--ds-spacing-3);gap:var(--ds-sizing-1);min-height:var(--ds-sizing-10)}.ds-btn--sm:before{content:"";left:0;min-height:auto;position:absolute;top:0;width:auto}.ds-btn--sm:after{content:"";height:44px;left:0;position:absolute;top:-5px;width:100%}.ds-btn--md{--dsc-btn-padding:var(--ds-spacing-2) var(--ds-spacing-4);gap:var(--ds-sizing-2);min-height:var(--ds-sizing-12)}.ds-btn--lg{--dsc-btn-padding:var(--ds-spacing-3) var(--ds-spacing-5);gap:var(--ds-sizing-2);min-height:var(--ds-sizing-14)}.ds-btn--full-width{width:100%}.ds-btn--secondary,.ds-btn--tertiary{background-color:initial}.ds-btn--icon-only{--dsc-btn-padding:0}@media (hover:hover) and (pointer:fine){.ds-btn--primary:not([aria-disabled=true],:disabled):hover{background-color:var(--dsc-btn-primary-hover-background)}.ds-btn--secondary:not([aria-disabled=true],:disabled):hover{background-color:var(--dsc-btn-secondary-hover-background);border-color:var(--dsc-btn-secondary-border-color);color:var(--dsc-btn-secondary-hover-color)}.ds-btn--tertiary:not([aria-disabled=true],:disabled):hover{background-color:var(--dsc-btn-tertiary-hover-background);color:var(--dsc-btn-tertiary-hover-color)}}.ds-btn--primary{background-color:var(--dsc-btn-primary-background)}.ds-btn--primary:not([aria-disabled=true],:disabled):active{background-color:var(--dsc-btn-primary-active-background)}.ds-btn--secondary{background-color:initial;border-color:var(--dsc-btn-secondary-border-color);color:var(--dsc-btn-secondary-color)}.ds-btn--secondary:not([aria-disabled=true],:disabled):active{background-color:var(--dsc-btn-secondary-active-background);border-color:var(--dsc-btn-secondary-border-color);color:var(--dsc-btn-secondary-active-color)}.ds-btn--tertiary{color:var(--dsc-btn-tertiary-color)}.ds-btn--tertiary:not([aria-disabled=true],:disabled):active{background-color:var(--dsc-btn-tertiary-active-background);color:var(--dsc-btn-tertiary-active-color)}.ds-btn--accent{--dsc-btn-primary-background:var(--ds-color-accent-base-default);--dsc-btn-primary-color:var(--ds-color-accent-contrast-default);--dsc-btn-primary-hover-background:var(--ds-color-accent-base-hover);--dsc-btn-primary-active-background:var(--ds-color-accent-base-active);--dsc-btn-secondary-color:var(--ds-color-accent-text-subtle);--dsc-btn-secondary-hover-color:var(--ds-color-accent-text-default);--dsc-btn-secondary-active-color:var(--ds-color-accent-text-default);--dsc-btn-secondary-border-color:var(--ds-color-accent-border-strong);--dsc-btn-secondary-hover-background:var(--ds-color-accent-surface-default);--dsc-btn-secondary-active-background:var(--ds-color-accent-surface-hover);--dsc-btn-tertiary-color:var(--ds-color-accent-text-subtle);--dsc-btn-tertiary-hover-color:var(--ds-color-accent-text-default);--dsc-btn-tertiary-active-color:var(--ds-color-accent-text-default);--dsc-btn-tertiary-hover-background:var(--ds-color-accent-surface-default);--dsc-btn-tertiary-active-background:var(--ds-color-accent-surface-hover)}.ds-btn--neutral{--dsc-btn-primary-background:var(--ds-color-neutral-base-default);--dsc-btn-primary-color:var(--ds-color-neutral-contrast-default);--dsc-btn-primary-hover-background:var(--ds-color-neutral-base-hover);--dsc-btn-primary-active-background:var(--ds-color-neutral-base-active);--dsc-btn-secondary-color:var(--ds-color-neutral-text-subtle);--dsc-btn-secondary-hover-color:var(--ds-color-neutral-text-default);--dsc-btn-secondary-active-color:var(--ds-color-neutral-text-default);--dsc-btn-secondary-border-color:var(--ds-color-neutral-border-strong);--dsc-btn-secondary-hover-background:var(--ds-color-neutral-surface-default);--dsc-btn-secondary-active-background:var(--ds-color-neutral-surface-hover);--dsc-btn-tertiary-color:var(--ds-color-neutral-text-subtle);--dsc-btn-tertiary-hover-color:var(--ds-color-neutral-text-default);--dsc-btn-tertiary-active-color:var(--ds-color-neutral-text-default);--dsc-btn-tertiary-hover-background:var(--ds-color-neutral-surface-default);--dsc-btn-tertiary-active-background:var(--ds-color-neutral-surface-hover)}.ds-btn--danger{--dsc-btn-primary-background:var(--ds-color-danger-base-default);--dsc-btn-primary-color:var(--ds-color-danger-contrast-default);--dsc-btn-primary-hover-background:var(--ds-color-danger-base-hover);--dsc-btn-primary-active-background:var(--ds-color-danger-base-active);--dsc-btn-secondary-color:var(--ds-color-danger-text-subtle);--dsc-btn-secondary-hover-color:var(--ds-color-danger-text-default);--dsc-btn-secondary-active-color:var(--ds-color-danger-text-default);--dsc-btn-secondary-border-color:var(--ds-color-danger-border-strong);--dsc-btn-secondary-hover-background:var(--ds-color-danger-surface-default);--dsc-btn-secondary-active-background:var(--ds-color-danger-surface-hover);--dsc-btn-tertiary-color:var(--ds-color-danger-text-subtle);--dsc-btn-tertiary-hover-color:var(--ds-color-danger-text-default);--dsc-btn-tertiary-active-color:var(--ds-color-danger-text-default);--dsc-btn-tertiary-hover-background:var(--ds-color-danger-surface-default);--dsc-btn-tertiary-active-background:var(--ds-color-danger-surface-hover)}}
package/dist/card.css CHANGED
@@ -1 +1 @@
1
- @layer fds.card{.fds-card__media{width:auto}.fds-card__media>*{border:0;display:flex;flex-direction:column;width:100%}.fds-card__content,.fds-card__footer{display:flex;flex-wrap:wrap;gap:var(--fds-spacing-4);justify-content:flex-start;word-wrap:break-word;font:var(--fds-typography-paragraph-medium);font-family:inherit;padding:var(--fds-spacing-2) 0}.fds-card__content{flex-direction:column}.fds-card__header{flex-wrap:wrap;word-wrap:break-word;font:var(--fds-typography-heading-medium);font-family:inherit;padding:var(--fds-spacing-2) 0}.fds-card,.fds-card__header{display:flex;flex-direction:column}.fds-card{border-radius:var(--fds-border_radius-medium);box-sizing:border-box;overflow:hidden;position:relative;width:100%}.fds-card,.fds-card a,.fds-card a:visited{color:var(--fds-semantic-text-neutral-default)}.fds-card>hr{margin:var(--fds-spacing-3) 0;width:100%}.fds-card>:not(.fds-card__media,hr){padding-left:var(--fds-spacing-6);padding-right:var(--fds-spacing-6)}.fds-card>:not(.fds-card__media):first-child{padding-top:var(--fds-spacing-6)}.fds-card>:not(.fds-card__media):last-child{padding-bottom:var(--fds-spacing-6)}.fds-card__media:first-child{padding-bottom:var(--fds-spacing-4)}.fds-card__media:last-child{padding-top:var(--fds-spacing-6)}.fds-card--link{text-decoration:none}.fds-card--link h1,.fds-card--link h2,.fds-card--link h3,.fds-card--link h4,.fds-card--link h5,.fds-card--link h6{text-decoration:underline;text-decoration-thickness:max(1px,.0625rem,.1025em);text-underline-offset:max(4px,.25rem,.22em)}.fds-card--neutral{background-color:var(--fds-semantic-surface-neutral-default)}.fds-card--neutral,.fds-card--subtle{border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-card--subtle{background-color:var(--fds-semantic-surface-neutral-subtle)}.fds-card--neutral.fds-card--link:hover,.fds-card--subtle.fds-card--link:hover{background-color:var(--fds-semantic-surface-neutral-subtle-hover)}.fds-card--first{background-color:var(--fds-semantic-surface-first-light);border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-card--first.fds-card--link:hover{background-color:var(--fds-semantic-surface-first-light-hover)}.fds-card--first.fds-card--link:active{background-color:var(--fds-semantic-surface-first-light-active)}.fds-card--second{background-color:var(--fds-semantic-surface-second-light);border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-card--second.fds-card--link:hover{background-color:var(--fds-semantic-surface-second-light-hover)}.fds-card--second.fds-card--link:active{background-color:var(--fds-semantic-surface-second-light-active)}.fds-card--third{background-color:var(--fds-semantic-surface-third-light);border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-card--third.fds-card--link:hover{background-color:var(--fds-semantic-surface-third-light-hover)}.fds-card--third.fds-card--link:active{background-color:var(--fds-semantic-surface-third-light-active)}}
1
+ @layer ds.card{.ds-card{--dsc-card-border-color:var(--ds-color-neutral-border-subtle);--dsc-card-backround:var(--ds-color-neutral-surface-default);--dsc-card-color:var(--ds-color-neutral-text-default);background:var(--dsc-card-backround);border:1px solid var(--dsc-card-border-color);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--dsc-card-color);display:flex;flex-direction:column;overflow:hidden;position:relative;width:100%}.ds-card a,.ds-card a:visited{color:var(--ds-color-neutral-text-default)}.ds-card>hr{margin:var(--ds-spacing-3) 0;width:100%}.ds-card__media{width:auto}.ds-card__media>*{border:0;display:flex;flex-direction:column;width:100%}.ds-card>:not(.ds-card__media,hr){padding-left:var(--ds-spacing-6);padding-right:var(--ds-spacing-6)}.ds-card>:not(.ds-card__media):first-child{padding-top:var(--ds-spacing-6)}.ds-card>:not(.ds-card__media):last-child{padding-bottom:var(--ds-spacing-6)}.ds-card__media:first-child{padding-bottom:var(--ds-spacing-4)}.ds-card__media:last-child{padding-top:var(--ds-spacing-6)}.ds-card--link{--dsc-card-border-color:var(--ds-color-neutral-border-default);text-decoration:none}.ds-card__content,.ds-card__footer{display:flex;flex-wrap:wrap;gap:var(--ds-spacing-4);justify-content:flex-start;word-wrap:break-word;color:inherit;padding:var(--ds-spacing-2) 0}.ds-card__content,.ds-card__header{flex-direction:column}.ds-card__header{display:flex;flex-wrap:wrap;word-wrap:break-word;font-family:inherit;padding:var(--ds-spacing-2) 0}.ds-card__header h1,.ds-card__header h2,.ds-card__header h3,.ds-card__header h4,.ds-card__header h5,.ds-card__header h6{color:inherit}.ds-card--link h1,.ds-card--link h2,.ds-card--link h3,.ds-card--link h4,.ds-card--link h5,.ds-card--link h6{text-decoration:underline;text-decoration-thickness:max(1px,.0625rem,.1025em);text-underline-offset:max(6px,.25rem,.22em)}.ds-card--neutral{--dsc-card-border-color:var(--ds-color-neutral-border-subtle);--dsc-card-backround:var(--ds-color-neutral-background-default)}.ds-card--neutral.ds-card--link:hover{--dsc-card-border-color:var(--ds-color-neutral-border-subtle);--dsc-card-backround:var(--ds-color-neutral-background-subtle)}.ds-card--neutral.ds-card--link:active{--dsc-card-backround:var(--ds-color-neutral-surface-default)}.ds-card--subtle{--dsc-card-border-color:var(--ds-color-neutral-border-subtle);--dsc-card-backround:var(--ds-color-neutral-background-subtle)}.ds-card--subtle.ds-card--link:hover{--dsc-card-border-color:var(--ds-color-neutral-border-default);--dsc-card-backround:var(--ds-color-neutral-surface-default)}.ds-card--subtle.ds-card--link:active{--dsc-card-backround:var(--ds-color-neutral-surface-hover)}.ds-card--brand1{--dsc-card-border-color:var(--ds-color-brand1-border-subtle);--dsc-card-backround:var(--ds-color-brand1-surface-default);--dsc-card-color:var(--ds-color-brand1-text-default)}.ds-card--brand1.ds-card--link{--dsc-card-border-color:var(--ds-color-brand1-border-default)}.ds-card--brand1.ds-card--link:hover{--dsc-card-backround:var(--ds-color-brand1-surface-hover)}.ds-card--brand1.ds-card--link:active{--dsc-card-backround:var(--ds-color-brand1-surface-active)}.ds-card--brand2{--dsc-card-border-color:var(--ds-color-brand2-border-subtle);--dsc-card-backround:var(--ds-color-brand2-surface-default);--dsc-card-color:var(--ds-color-brand2-text-default)}.ds-card--brand2.ds-card--link{--dsc-card-border-color:var(--ds-color-brand2-border-default)}.ds-card--brand2.ds-card--link:hover{--dsc-card-backround:var(--ds-color-brand2-surface-hover)}.ds-card--brand2.ds-card--link:active{--dsc-card-backround:var(--ds-color-brand2-surface-active)}.ds-card--brand3{--dsc-card-border-color:var(--ds-color-brand3-border-subtle);--dsc-card-backround:var(--ds-color-brand3-surface-default);--dsc-card-color:var(--ds-color-brand3-text-default)}.ds-card--brand3.ds-card--link{--dsc-card-border-color:var(--ds-color-brand3-border-default)}.ds-card--brand3.ds-card--link:hover{--dsc-card-backround:var(--ds-color-brand3-surface-hover)}.ds-card--brand3.ds-card--link:active{--dsc-card-backround:var(--ds-color-brand3-surface-active)}}