@digdir/designsystemet-css 0.9.1-alpha.3 → 0.10.0-alpha.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 (79) hide show
  1. package/accordion.css +17 -7
  2. package/alert.css +1 -1
  3. package/box.css +3 -3
  4. package/button.css +7 -51
  5. package/card.css +74 -44
  6. package/checkbox.css +24 -27
  7. package/chip.css +2 -2
  8. package/combobox.css +17 -4
  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-message.css +1 -1
  20. package/dist/error-summary.css +1 -1
  21. package/dist/fieldset.css +1 -1
  22. package/dist/heading.css +1 -1
  23. package/dist/helptext.css +1 -1
  24. package/dist/index.css +1 -1
  25. package/dist/ingress.css +1 -1
  26. package/dist/label.css +1 -1
  27. package/dist/link.css +1 -1
  28. package/dist/list.css +1 -1
  29. package/dist/modal.css +1 -1
  30. package/dist/native-select.css +1 -1
  31. package/dist/pagination.css +1 -1
  32. package/dist/paragraph.css +1 -1
  33. package/dist/popover.css +1 -1
  34. package/dist/radio.css +1 -1
  35. package/dist/search.css +1 -1
  36. package/dist/skeleton.css +1 -1
  37. package/dist/skiplink.css +1 -1
  38. package/dist/spinner.css +1 -1
  39. package/dist/switch.css +1 -1
  40. package/dist/table.css +1 -1
  41. package/dist/tabs.css +1 -1
  42. package/dist/tag.css +1 -1
  43. package/dist/textarea.css +1 -1
  44. package/dist/textfield.css +1 -1
  45. package/dist/togglegroup.css +1 -1
  46. package/dist/tooltip.css +1 -1
  47. package/dist/utils.css +1 -1
  48. package/divider.css +1 -1
  49. package/dropdownmenu.css +1 -1
  50. package/error-message.css +1 -1
  51. package/error-summary.css +1 -1
  52. package/fieldset.css +3 -3
  53. package/heading.css +1 -1
  54. package/helptext.css +1 -1
  55. package/index.css +5 -5
  56. package/ingress.css +1 -1
  57. package/label.css +1 -1
  58. package/link.css +3 -3
  59. package/list.css +1 -1
  60. package/modal.css +1 -1
  61. package/native-select.css +4 -4
  62. package/package.json +2 -2
  63. package/pagination.css +1 -1
  64. package/paragraph.css +1 -1
  65. package/popover.css +1 -1
  66. package/radio.css +20 -24
  67. package/search.css +3 -3
  68. package/skeleton.css +1 -1
  69. package/skiplink.css +1 -1
  70. package/spinner.css +3 -3
  71. package/switch.css +19 -19
  72. package/table.css +1 -1
  73. package/tabs.css +7 -2
  74. package/tag.css +1 -1
  75. package/textarea.css +6 -6
  76. package/textfield.css +4 -4
  77. package/togglegroup.css +3 -2
  78. package/tooltip.css +3 -3
  79. package/utils.css +3 -3
package/accordion.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer fds.accordion {
1
+ @layer ds.accordion {
2
2
  .fds-accordion {
3
3
  --dsc-accordion-border-radius: var(--ds-border-radius-md);
4
4
  --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
@@ -46,9 +46,9 @@
46
46
  padding: var(--ds-spacing-4);
47
47
  }
48
48
 
49
- .fds-accordion--border .fds-accordion__button {
50
- border-radius: var(--dsc-accordion-border-radius);
51
- }
49
+ /* .fds-accordion--border .fds-accordion__button {
50
+ border-radius: 0;
51
+ } */
52
52
 
53
53
  .fds-accordion__item:focus-within {
54
54
  position: relative;
@@ -70,21 +70,21 @@
70
70
 
71
71
  .fds-accordion--brand1,
72
72
  .fds-accordion--brand1 .fds-accordion__button {
73
- --dsc-accordion-border-color: var(--ds-color-brand1-base-default);
73
+ --dsc-accordion-border-color: var(--ds-color-brand1-border-subtle);
74
74
 
75
75
  background: var(--ds-color-brand1-surface-default);
76
76
  }
77
77
 
78
78
  .fds-accordion--brand2,
79
79
  .fds-accordion--brand2 .fds-accordion__button {
80
- --dsc-accordion-border-color: var(--ds-color-brand2-base-default);
80
+ --dsc-accordion-border-color: var(--ds-color-brand2-border-subtle);
81
81
 
82
82
  background: var(--ds-color-brand2-surface-default);
83
83
  }
84
84
 
85
85
  .fds-accordion--brand3,
86
86
  .fds-accordion--brand3 .fds-accordion__button {
87
- --dsc-accordion-border-color: var(--ds-color-brand3-base-default);
87
+ --dsc-accordion-border-color: var(--ds-color-brand3-border-subtle);
88
88
 
89
89
  background: var(--ds-color-brand3-surface-default);
90
90
  }
@@ -110,6 +110,16 @@
110
110
  border-top: 1px solid var(--ds-color-neutral-background-default);
111
111
  }
112
112
 
113
+ .fds-accordion--border .fds-accordion__item:first-of-type .fds-accordion__button:first-of-type {
114
+ border-top-left-radius: var(--dsc-accordion-border-radius);
115
+ border-top-right-radius: var(--dsc-accordion-border-radius);
116
+ }
117
+
118
+ .fds-accordion--border .fds-accordion__item:last-of-type:not(.fds-accordion__item--open) .fds-accordion__button:first-of-type {
119
+ border-bottom-left-radius: var(--dsc-accordion-border-radius);
120
+ border-bottom-right-radius: var(--dsc-accordion-border-radius);
121
+ }
122
+
113
123
  @media (hover: hover) and (pointer: fine) {
114
124
  .fds-accordion__button:hover .fds-accordion__expand-icon {
115
125
  background-color: rgba(0 0 0 / 0.1);
package/alert.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer fds.alert {
1
+ @layer ds.alert {
2
2
  .fds-alert {
3
3
  --dsc-alert-border-color: var(--ds-color-info-border-strong);
4
4
  --dsc-alert-border-radius: var(--ds-border-radius-md);
package/box.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer fds.box {
1
+ @layer ds.box {
2
2
  .fds-box--xs-shadow {
3
3
  box-shadow: var(--ds-shadow-xs);
4
4
  }
@@ -20,7 +20,7 @@
20
20
  }
21
21
 
22
22
  .fds-box--default-border-color {
23
- border: 1px solid var(--ds-color-neutral-border-strong);
23
+ border: 1px solid var(--ds-color-neutral-border-default);
24
24
  }
25
25
 
26
26
  .fds-box--subtle-border-color {
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  .fds-box--strong-border-color {
31
- border: 1px solid var(--ds-color-neutral-base-default);
31
+ border: 1px solid var(--ds-color-neutral-base-strong);
32
32
  }
33
33
 
34
34
  .fds-box--sm-border-radius {
package/button.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer fds.btn {
1
+ @layer ds.btn {
2
2
  .fds-btn {
3
3
  --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
4
4
 
@@ -27,7 +27,7 @@
27
27
  .fds-btn:disabled,
28
28
  .fds-btn[aria-disabled='true'] {
29
29
  cursor: not-allowed;
30
- opacity: var(--ds-opacity-disabled);
30
+ opacity: var(--ds-disabled-opacity);
31
31
  }
32
32
 
33
33
  .fds-btn--sm {
@@ -97,10 +97,6 @@
97
97
  background-color: var(--ds-color-neutral-base-default);
98
98
  }
99
99
 
100
- .fds-btn--primary:where(.fds-btn--success) {
101
- background-color: var(--ds-color-success-base-default);
102
- }
103
-
104
100
  .fds-btn--primary:where(.fds-btn--danger) {
105
101
  background-color: var(--ds-color-danger-base-default);
106
102
  }
@@ -115,32 +111,22 @@
115
111
  background-color: var(--ds-color-neutral-base-hover);
116
112
  }
117
113
 
118
- .fds-btn--primary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
119
- background-color: var(--ds-color-success-base-hover);
120
- }
121
-
122
114
  .fds-btn--primary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
123
115
  background-color: var(--ds-color-danger-base-hover);
124
116
  }
125
117
 
126
118
  .fds-btn--secondary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):hover {
127
- color: var(--ds-color-accent-text-hover);
119
+ color: var(--ds-color-accent-text-default);
128
120
  border-color: var(--ds-color-accent-border-strong);
129
121
  background-color: var(--ds-color-accent-surface-default);
130
122
  }
131
123
 
132
124
  .fds-btn--secondary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):hover {
133
- color: var(--ds-color-neutral-text-hover);
125
+ color: var(--ds-color-neutral-text-default);
134
126
  border-color: var(--ds-color-neutral-border-strong);
135
127
  background-color: var(--ds-color-neutral-surface-default);
136
128
  }
137
129
 
138
- .fds-btn--secondary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
139
- color: var(--ds-color-success-text-default);
140
- border-color: var(--ds-color-success-border-strong);
141
- background-color: var(--ds-color-success-surface-default);
142
- }
143
-
144
130
  .fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
145
131
  color: var(--ds-color-danger-text-default);
146
132
  border-color: var(--ds-color-danger-border-strong);
@@ -153,15 +139,10 @@
153
139
  }
154
140
 
155
141
  .fds-btn--tertiary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):hover {
156
- color: var(--ds-color-neutral-base-hover);
142
+ color: var(--ds-color-neutral-text-default);
157
143
  background-color: var(--ds-color-neutral-surface-default);
158
144
  }
159
145
 
160
- .fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
161
- color: var(--ds-color-success-base-default);
162
- background-color: var(--ds-color-success-surface-default);
163
- }
164
-
165
146
  .fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
166
147
  color: var(--ds-color-danger-text-default);
167
148
  background-color: var(--ds-color-danger-surface-default);
@@ -176,10 +157,6 @@
176
157
  background-color: var(--ds-color-neutral-base-active);
177
158
  }
178
159
 
179
- .fds-btn--primary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
180
- background-color: var(--ds-color-success-base-active);
181
- }
182
-
183
160
  .fds-btn--primary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
184
161
  background-color: var(--ds-color-danger-base-active);
185
162
  }
@@ -197,12 +174,6 @@
197
174
  background-color: transparent;
198
175
  }
199
176
 
200
- .fds-btn--secondary:where(.fds-btn--success) {
201
- color: var(--ds-color-success-text-subtle);
202
- border-color: var(--ds-color-success-border-strong);
203
- background-color: transparent;
204
- }
205
-
206
177
  .fds-btn--secondary:where(.fds-btn--danger) {
207
178
  color: var(--ds-color-danger-text-subtle);
208
179
  border-color: var(--ds-color-danger-border-strong);
@@ -221,12 +192,6 @@
221
192
  background-color: var(--ds-color-neutral-surface-hover);
222
193
  }
223
194
 
224
- .fds-btn--secondary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
225
- color: var(--ds-color-success-text-default);
226
- border-color: var(--ds-color-success-border-strong);
227
- background-color: var(--ds-color-success-surface-hover);
228
- }
229
-
230
195
  .fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
231
196
  color: var(--ds-color-danger-text-default);
232
197
  border-color: var(--ds-color-danger-border-strong);
@@ -242,29 +207,20 @@
242
207
  color: var(--ds-color-neutral-text-subtle);
243
208
  }
244
209
 
245
- .fds-btn--tertiary:where(.fds-btn--success) {
246
- color: var(--ds-color-success-text-subtle);
247
- }
248
-
249
210
  .fds-btn--tertiary:where(.fds-btn--danger) {
250
211
  color: var(--ds-color-danger-text-subtle);
251
212
  }
252
213
 
253
214
  .fds-btn--tertiary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):active {
254
- color: var(--ds-color-accent-base-active);
215
+ color: var(--ds-color-accent-text-default);
255
216
  background-color: var(--ds-color-accent-surface-hover);
256
217
  }
257
218
 
258
219
  .fds-btn--tertiary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):active {
259
- color: var(--ds-color-neutral-text-active);
220
+ color: var(--ds-color-neutral-text-default);
260
221
  background-color: var(--ds-color-neutral-surface-hover);
261
222
  }
262
223
 
263
- .fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
264
- color: var(--ds-color-success-text-default);
265
- background-color: var(--ds-color-success-surface-hover);
266
- }
267
-
268
224
  .fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
269
225
  color: var(--ds-color-danger-text-default);
270
226
  background-color: var(--ds-color-danger-surface-hover);
package/card.css CHANGED
@@ -1,42 +1,7 @@
1
- @layer fds.card {
2
- .fds-card__media {
3
- width: auto;
4
- }
5
-
6
- .fds-card__media > * {
7
- display: flex;
8
- flex-direction: column;
9
- width: 100%;
10
- border: 0;
11
- }
12
-
13
- .fds-card__footer,
14
- .fds-card__content {
15
- display: flex;
16
- justify-content: flex-start;
17
- gap: var(--ds-spacing-4);
18
- flex-wrap: wrap;
19
- word-wrap: break-word;
20
- font: var(--ds-typography-paragraph-md);
21
- font-family: inherit;
22
- padding: var(--ds-spacing-2) 0;
23
- }
24
-
25
- .fds-card__content {
26
- flex-direction: column;
27
- }
28
-
29
- .fds-card__header {
30
- display: flex;
31
- flex-direction: column;
32
- flex-wrap: wrap;
33
- word-wrap: break-word;
34
- font: var(--ds-typography-heading-md);
35
- font-family: inherit;
36
- padding: var(--ds-spacing-2) 0;
37
- }
38
-
1
+ @layer ds.card {
39
2
  .fds-card {
3
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
4
+
40
5
  display: flex;
41
6
  flex-direction: column;
42
7
  width: 100%;
@@ -45,6 +10,7 @@
45
10
  overflow: hidden;
46
11
  color: var(--ds-color-neutral-text-default);
47
12
  border-radius: var(--ds-border-radius-md);
13
+ border: 1px solid var(--dsc-card-border-color);
48
14
  }
49
15
 
50
16
  .fds-card a,
@@ -57,6 +23,17 @@
57
23
  margin: var(--ds-spacing-3) 0;
58
24
  }
59
25
 
26
+ .fds-card__media {
27
+ width: auto;
28
+ }
29
+
30
+ .fds-card__media > * {
31
+ display: flex;
32
+ flex-direction: column;
33
+ width: 100%;
34
+ border: 0;
35
+ }
36
+
60
37
  .fds-card > *:not(.fds-card__media, hr) {
61
38
  padding-left: var(--ds-spacing-6);
62
39
  padding-right: var(--ds-spacing-6);
@@ -79,9 +56,37 @@
79
56
  }
80
57
 
81
58
  .fds-card--link {
59
+ --dsc-card-border-color: var(--ds-color-neutral-border-default);
60
+
82
61
  text-decoration: none;
83
62
  }
84
63
 
64
+ .fds-card__footer,
65
+ .fds-card__content {
66
+ display: flex;
67
+ justify-content: flex-start;
68
+ gap: var(--ds-spacing-4);
69
+ flex-wrap: wrap;
70
+ word-wrap: break-word;
71
+ font: var(--ds-typography-paragraph-md);
72
+ font-family: inherit;
73
+ padding: var(--ds-spacing-2) 0;
74
+ }
75
+
76
+ .fds-card__content {
77
+ flex-direction: column;
78
+ }
79
+
80
+ .fds-card__header {
81
+ display: flex;
82
+ flex-direction: column;
83
+ flex-wrap: wrap;
84
+ word-wrap: break-word;
85
+ font: var(--ds-typography-heading-md);
86
+ font-family: inherit;
87
+ padding: var(--ds-spacing-2) 0;
88
+ }
89
+
85
90
  .fds-card--link h1,
86
91
  .fds-card--link h2,
87
92
  .fds-card--link h3,
@@ -90,17 +95,27 @@
90
95
  .fds-card--link h6 {
91
96
  text-decoration: underline;
92
97
  text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
93
- text-underline-offset: max(4px, 0.25rem, 0.22em);
98
+ text-underline-offset: max(6px, 0.25rem, 0.22em);
94
99
  }
95
100
 
96
101
  .fds-card--neutral {
102
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
103
+
97
104
  background-color: var(--ds-color-neutral-background-default);
98
- border: 1px solid var(--ds-color-neutral-border-subtle);
105
+ }
106
+
107
+ .fds-card--neutral.fds-card--link:hover {
108
+ --dsc-card-border-color: var(--ds-color-neutral-border-default);
99
109
  }
100
110
 
101
111
  .fds-card--subtle {
112
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
113
+
102
114
  background-color: var(--ds-color-neutral-background-subtle);
103
- border: 1px solid var(--ds-color-neutral-border-subtle);
115
+ }
116
+
117
+ .fds-card--subtle.fds-card--link:hover {
118
+ --dsc-card-border-color: var(--ds-color-neutral-border-default);
104
119
  }
105
120
 
106
121
  .fds-card--neutral.fds-card--link:hover,
@@ -109,8 +124,13 @@
109
124
  }
110
125
 
111
126
  .fds-card--brand1 {
127
+ --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
128
+
112
129
  background-color: var(--ds-color-brand1-surface-default);
113
- border: 1px solid var(--ds-color-neutral-border-subtle);
130
+ }
131
+
132
+ .fds-card--brand1.fds-card--link {
133
+ --dsc-card-border-color: var(--ds-color-brand1-border-default);
114
134
  }
115
135
 
116
136
  .fds-card--brand1.fds-card--link:hover {
@@ -122,8 +142,13 @@
122
142
  }
123
143
 
124
144
  .fds-card--brand2 {
145
+ --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
146
+
125
147
  background-color: var(--ds-color-brand2-surface-default);
126
- border: 1px solid var(--ds-color-neutral-border-subtle);
148
+ }
149
+
150
+ .fds-card--brand2.fds-card--link {
151
+ --dsc-card-border-color: var(--ds-color-brand2-border-default);
127
152
  }
128
153
 
129
154
  .fds-card--brand2.fds-card--link:hover {
@@ -135,8 +160,13 @@
135
160
  }
136
161
 
137
162
  .fds-card--brand3 {
163
+ --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
164
+
138
165
  background-color: var(--ds-color-brand3-surface-default);
139
- border: 1px solid var(--ds-color-neutral-border-subtle);
166
+ }
167
+
168
+ .fds-card--brand3.fds-card--link {
169
+ --dsc-card-border-color: var(--ds-color-brand3-border-default);
140
170
  }
141
171
 
142
172
  .fds-card--brand3.fds-card--link:hover {
package/checkbox.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer fds.checkbox {
1
+ @layer ds.checkbox {
2
2
  .fds-checkbox {
3
3
  --dsc-checkbox-size: 1.75rem;
4
4
  --dsc-checkbox-focus-border-width: 3px;
@@ -7,7 +7,6 @@
7
7
  --dsc-checkbox-border__hover--size: calc(var(--ds-spacing-3) / 2);
8
8
  --dsc-checkbox-border__hover: 0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);
9
9
  --dsc-checkbox-check_color: transparent;
10
- --dsc-checkbox-focus-color: var(--ds-color-neutral-text-default);
11
10
 
12
11
  display: grid;
13
12
  }
@@ -62,29 +61,23 @@
62
61
  grid-column: 2;
63
62
  }
64
63
 
65
- .fds-checkbox--disabled > .fds-checkbox__input,
66
- .fds-checkbox--disabled > .fds-checkbox__label,
67
- .fds-checkbox--disabled > .fds-checkbox__input::before {
68
- cursor: not-allowed;
69
- }
70
-
71
- .fds-checkbox--disabled > .fds-checkbox__label,
72
- .fds-checkbox--disabled > .fds-checkbox__input,
73
- .fds-checkbox--disabled > .fds-checkbox__description {
74
- opacity: var(--ds-opacity-disabled);
75
- }
76
-
77
64
  .fds-checkbox--readonly > .fds-checkbox__label,
78
65
  .fds-checkbox--readonly > .fds-checkbox__input,
79
66
  .fds-checkbox--readonly > .fds-checkbox__input::before {
80
67
  cursor: default;
81
68
  }
82
69
 
70
+ .fds-checkbox__input:disabled,
71
+ .fds-checkbox__input:disabled ~ .fds-checkbox__label,
72
+ .fds-checkbox__input:disabled::before {
73
+ cursor: not-allowed;
74
+ }
75
+
83
76
  .fds-checkbox__input:focus-visible {
84
77
  outline-offset: 3px;
85
- outline: var(--dsc-checkbox-focus-border-width) solid var(--dsc-checkbox-focus-color);
78
+ outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-focus-outer);
86
79
  box-shadow:
87
- 0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-color-neutral-background-default),
80
+ 0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-focus-inner),
88
81
  inset 0 0 0 2px var(--dsc-checkbox-border-color);
89
82
  }
90
83
 
@@ -102,16 +95,18 @@
102
95
 
103
96
  .fds-checkbox__input:checked {
104
97
  --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
98
+ --dsc-checkbox-background: var(--ds-color-accent-base-default);
105
99
  --dsc-checkbox-check_color: white;
106
100
 
107
- background: var(--dsc-checkbox-border-color);
101
+ background: var(--dsc-checkbox-background);
108
102
  }
109
103
 
110
104
  .fds-checkbox__input:indeterminate {
111
105
  --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
106
+ --dsc-checkbox-background: var(--ds-color-accent-border-strong);
112
107
  --dsc-checkbox-check_color: white;
113
108
 
114
- background-color: var(--dsc-checkbox-border-color);
109
+ background-color: var(--dsc-checkbox-background);
115
110
  background-repeat: no-repeat;
116
111
  }
117
112
 
@@ -120,6 +115,12 @@
120
115
  --dsc-checkbox-background: var(--ds-color-neutral-background-subtle);
121
116
  }
122
117
 
118
+ .fds-checkbox__input:disabled,
119
+ .fds-checkbox__input:disabled ~ .fds-checkbox__label,
120
+ .fds-checkbox__input:disabled ~ .fds-checkbox__description {
121
+ opacity: var(--ds-disabled-opacity);
122
+ }
123
+
123
124
  .fds-checkbox__input:checked:not(:focus-visible) {
124
125
  box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
125
126
  }
@@ -143,12 +144,12 @@
143
144
  /* Only use hover for non-touch devices to prevent sticky-hovering
144
145
  "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
145
146
  @media (hover: hover) and (pointer: fine) {
146
- .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__label:hover,
147
- .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover + .fds-checkbox__label {
147
+ .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:not(:disabled) ~ .fds-checkbox__label:hover,
148
+ .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:disabled) ~ .fds-checkbox__label {
148
149
  color: var(--ds-color-accent-text-subtle);
149
150
  }
150
151
 
151
- .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover:not(:checked) {
152
+ .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:checked, :disabled) {
152
153
  --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
153
154
 
154
155
  box-shadow:
@@ -156,12 +157,8 @@
156
157
  inset 0 0 0 2px var(--dsc-checkbox-border-color);
157
158
  }
158
159
 
159
- .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover:checked {
160
- --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
161
-
162
- box-shadow:
163
- var(--dsc-checkbox-border__hover),
164
- inset 0 0 0 2px var(--dsc-checkbox-border-color);
160
+ .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:checked:focus-visible:not(:disabled) {
161
+ box-shadow: var(--dsc-checkbox-border__hover);
165
162
  }
166
163
  }
167
164
 
package/chip.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer fds.chip {
1
+ @layer ds.chip {
2
2
  /*
3
3
  The class is unused. There is no root chip component?
4
4
  .chip {
@@ -29,7 +29,7 @@
29
29
  .fds-chip--button:disabled,
30
30
  .fds-chip--button[aria-disabled='true'] {
31
31
  cursor: not-allowed;
32
- opacity: var(--ds-opacity-disabled);
32
+ opacity: var(--ds-disabled-opacity);
33
33
  }
34
34
 
35
35
  .fds-chip--button .fds-chip__label {
package/combobox.css CHANGED
@@ -1,13 +1,19 @@
1
- @layer fds.combobox {
1
+ @layer ds.combobox {
2
2
  .fds-combobox {
3
3
  display: grid;
4
4
  background-color: transparent;
5
5
  gap: var(--ds-spacing-2);
6
6
  }
7
7
 
8
+ .fds-combobox [data-floating-ui-portal] {
9
+ grid-column: 1 / 2;
10
+ grid-row: 1 / 2;
11
+ }
12
+
8
13
  .fds-combobox__options-wrapper {
9
14
  padding: var(--ds-spacing-2);
10
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
  }
@@ -37,6 +43,7 @@
37
43
  appearance: none;
38
44
  border: none;
39
45
  background-color: transparent;
46
+ color: var(--ds-color-neutral-text-default);
40
47
  }
41
48
 
42
49
  .fds-combobox--sm .fds-combobox__input__wrapper {
@@ -105,6 +112,8 @@
105
112
  }
106
113
 
107
114
  .fds-combobox__label {
115
+ grid-column: 1 / 2;
116
+ grid-row: 1 / 2;
108
117
  min-width: min-content;
109
118
  display: inline-flex;
110
119
  flex-direction: row;
@@ -147,11 +156,11 @@
147
156
  }
148
157
 
149
158
  .fds-combobox__clear-button:not(:disabled):hover {
150
- background-color: var([delete]);
159
+ background-color: var(--ds-color-neutral-surface-default);
151
160
  }
152
161
 
153
162
  .fds-combobox__disabled {
154
- opacity: var(--ds-opacity-disabled);
163
+ opacity: var(--ds-disabled-opacity);
155
164
  }
156
165
 
157
166
  .fds-combobox__disabled * {
@@ -188,6 +197,10 @@
188
197
  box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-neutral-background-default) !important;
189
198
  }
190
199
 
200
+ .fds-combobox__input__wrapper:focus-within:hover {
201
+ border-color: var(--ds-color-neutral-border-default);
202
+ }
203
+
191
204
  .fds-combobox__empty {
192
205
  padding: var(--ds-spacing-2) var(--ds-spacing-3);
193
206
  }
@@ -283,7 +296,7 @@
283
296
  aspect-ratio: 1 / 1;
284
297
  border: 2px solid var(--ds-color-neutral-border-default);
285
298
  border-radius: var(--ds-border-radius-md);
286
- background-color: white;
299
+ background-color: var(--ds-color-neutral-background-default);
287
300
  display: grid;
288
301
  place-items: center;
289
302
  }
package/dist/accordion.css CHANGED
@@ -1 +1 @@
1
- @layer fds.accordion{.fds-accordion{--dsc-accordion-border-radius:var(--ds-border-radius-md);--dsc-accordion-border-color:var(--ds-color-neutral-border-subtle);border-bottom:1px solid var(--ds-color-neutral-border-subtle);box-sizing:border-box}.fds-accordion--border{border:1px solid var(--dsc-accordion-border-color);border-radius:var(--dsc-accordion-border-radius)}.fds-accordion__expand-icon{border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default)}.fds-accordion__expand-icon,.fds-accordion__expand-icon path{fill:var(--ds-color-neutral-text-default)}.fds-accordion__content{overflow:hidden;padding:var(--ds-spacing-5,1rem);text-overflow:ellipsis}.fds-accordion__header{margin:0}.fds-accordion__button{align-items:center;border:none;border-top:1px solid var(--ds-color-neutral-border-subtle);cursor:pointer;display:flex;gap:var(--ds-spacing-2);justify-content:flex-start;margin:0;padding:var(--ds-spacing-4);text-align:left;width:100%}.fds-accordion--border .fds-accordion__button{border-radius:var(--dsc-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(--ds-color-neutral-background-default)}.fds-accordion--subtle,.fds-accordion--subtle .fds-accordion__button{background-color:var(--ds-color-neutral-background-subtle)}.fds-accordion--brand1,.fds-accordion--brand1 .fds-accordion__button{--dsc-accordion-border-color:var(--ds-color-brand1-base-default);background:var(--ds-color-brand1-surface-default)}.fds-accordion--brand2,.fds-accordion--brand2 .fds-accordion__button{--dsc-accordion-border-color:var(--ds-color-brand2-base-default);background:var(--ds-color-brand2-surface-default)}.fds-accordion--brand3,.fds-accordion--brand3 .fds-accordion__button{--dsc-accordion-border-color:var(--ds-color-brand3-base-default);background:var(--ds-color-brand3-surface-default)}.fds-accordion--brand1 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--brand2 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--brand3 .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(--ds-color-accent-surface-default)}.fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button{border-top:0}.fds-accordion--brand1 .fds-accordion__item:not(:first-child) .fds-accordion__button,.fds-accordion--brand2 .fds-accordion__item:not(:first-child) .fds-accordion__button,.fds-accordion--brand3 .fds-accordion__item:not(:first-child) .fds-accordion__button{border-top:1px solid var(--ds-color-neutral-background-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(--ds-color-neutral-surface-default)}.fds-accordion--brand1 .fds-accordion__button:hover{background-color:var(--ds-color-brand1-surface-hover)}.fds-accordion--brand2 .fds-accordion__button:hover{background-color:var(--ds-color-brand2-surface-hover)}.fds-accordion--brand3 .fds-accordion__button:hover{background-color:var(--ds-color-brand3-surface-hover)}}}
1
+ @layer ds.accordion{.fds-accordion{--dsc-accordion-border-radius:var(--ds-border-radius-md);--dsc-accordion-border-color:var(--ds-color-neutral-border-subtle);border-bottom:1px solid var(--ds-color-neutral-border-subtle);box-sizing:border-box}.fds-accordion--border{border:1px solid var(--dsc-accordion-border-color);border-radius:var(--dsc-accordion-border-radius)}.fds-accordion__expand-icon{border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default)}.fds-accordion__expand-icon,.fds-accordion__expand-icon path{fill:var(--ds-color-neutral-text-default)}.fds-accordion__content{overflow:hidden;padding:var(--ds-spacing-5,1rem);text-overflow:ellipsis}.fds-accordion__header{margin:0}.fds-accordion__button{align-items:center;border:none;border-top:1px solid var(--ds-color-neutral-border-subtle);cursor:pointer;display:flex;gap:var(--ds-spacing-2);justify-content:flex-start;margin:0;padding:var(--ds-spacing-4);text-align:left;width:100%}.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(--ds-color-neutral-background-default)}.fds-accordion--subtle,.fds-accordion--subtle .fds-accordion__button{background-color:var(--ds-color-neutral-background-subtle)}.fds-accordion--brand1,.fds-accordion--brand1 .fds-accordion__button{--dsc-accordion-border-color:var(--ds-color-brand1-border-subtle);background:var(--ds-color-brand1-surface-default)}.fds-accordion--brand2,.fds-accordion--brand2 .fds-accordion__button{--dsc-accordion-border-color:var(--ds-color-brand2-border-subtle);background:var(--ds-color-brand2-surface-default)}.fds-accordion--brand3,.fds-accordion--brand3 .fds-accordion__button{--dsc-accordion-border-color:var(--ds-color-brand3-border-subtle);background:var(--ds-color-brand3-surface-default)}.fds-accordion--brand1 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--brand2 .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--brand3 .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(--ds-color-accent-surface-default)}.fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button{border-top:0}.fds-accordion--brand1 .fds-accordion__item:not(:first-child) .fds-accordion__button,.fds-accordion--brand2 .fds-accordion__item:not(:first-child) .fds-accordion__button,.fds-accordion--brand3 .fds-accordion__item:not(:first-child) .fds-accordion__button{border-top:1px solid var(--ds-color-neutral-background-default)}.fds-accordion--border .fds-accordion__item:first-of-type .fds-accordion__button:first-of-type{border-top-left-radius:var(--dsc-accordion-border-radius);border-top-right-radius:var(--dsc-accordion-border-radius)}.fds-accordion--border .fds-accordion__item:last-of-type:not(.fds-accordion__item--open) .fds-accordion__button: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){.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(--ds-color-neutral-surface-default)}.fds-accordion--brand1 .fds-accordion__button:hover{background-color:var(--ds-color-brand1-surface-hover)}.fds-accordion--brand2 .fds-accordion__button:hover{background-color:var(--ds-color-brand2-surface-hover)}.fds-accordion--brand3 .fds-accordion__button:hover{background-color:var(--ds-color-brand3-surface-hover)}}}
package/dist/alert.css CHANGED
@@ -1 +1 @@
1
- @layer fds.alert{.fds-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;font:var(--ds-typography-paragraph-md);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)}.fds-alert__icon{color:var(--dsc-alert-icon-color);height:var(--dsc-alert-icon-size);width:var(--dsc-alert-icon-size)}.fds-alert__content{display:flex;flex-direction:column}.fds-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)}.fds-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)}.fds-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)}.fds-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)}.fds-alert--sm{--dsc-alert-padding:var(--ds-spacing-5);--dsc-alert-icon-size:var(--ds-sizing-6)}.fds-alert--md{--dsc-alert-padding:var(--ds-spacing-6);--dsc-alert-icon-size:var(--ds-sizing-7)}.fds-alert--lg{--dsc-alert-padding:var(--ds-spacing-7);--dsc-alert-icon-size:var(--ds-sizing-8)}.fds-alert--elevated{box-shadow:var(--ds-shadow-sm)}}
1
+ @layer ds.alert{.fds-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;font:var(--ds-typography-paragraph-md);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)}.fds-alert__icon{color:var(--dsc-alert-icon-color);height:var(--dsc-alert-icon-size);width:var(--dsc-alert-icon-size)}.fds-alert__content{display:flex;flex-direction:column}.fds-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)}.fds-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)}.fds-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)}.fds-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)}.fds-alert--sm{--dsc-alert-padding:var(--ds-spacing-5);--dsc-alert-icon-size:var(--ds-sizing-6)}.fds-alert--md{--dsc-alert-padding:var(--ds-spacing-6);--dsc-alert-icon-size:var(--ds-sizing-7)}.fds-alert--lg{--dsc-alert-padding:var(--ds-spacing-7);--dsc-alert-icon-size:var(--ds-sizing-8)}.fds-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(--ds-shadow-xs)}.fds-box--sm-shadow{box-shadow:var(--ds-shadow-sm)}.fds-box--md-shadow{box-shadow:var(--ds-shadow-md)}.fds-box--lg-shadow{box-shadow:var(--ds-shadow-lg)}.fds-box--xl-shadow{box-shadow:var(--ds-shadow-xl)}.fds-box--default-border-color{border:1px solid var(--ds-color-neutral-border-strong)}.fds-box--subtle-border-color{border:1px solid var(--ds-color-neutral-border-subtle)}.fds-box--strong-border-color{border:1px solid var(--ds-color-neutral-base-default)}.fds-box--sm-border-radius{border-radius:var(--ds-border-radius-sm)}.fds-box--md-border-radius{border-radius:var(--ds-border-radius-md)}.fds-box--lg-border-radius{border-radius:var(--ds-border-radius-lg)}.fds-box--xl-border-radius{border-radius:var(--ds-border-radius-xl)}.fds-box--2xl-border-radius{border-radius:var(--ds-border-radius-2xl)}.fds-box--3xl-border-radius{border-radius:var(--ds-border-radius-3xl)}.fds-box--4xl-border-radius{border-radius:var(--ds-border-radius-4xl)}.fds-box--full-border-radius{border-radius:var(--ds-border-radius-full)}.fds-box--default-background{background-color:var(--ds-color-neutral-background-default)}.fds-box--subtle-background{background-color:var(--ds-color-neutral-background-subtle)}}
1
+ @layer ds.box{.fds-box--xs-shadow{box-shadow:var(--ds-shadow-xs)}.fds-box--sm-shadow{box-shadow:var(--ds-shadow-sm)}.fds-box--md-shadow{box-shadow:var(--ds-shadow-md)}.fds-box--lg-shadow{box-shadow:var(--ds-shadow-lg)}.fds-box--xl-shadow{box-shadow:var(--ds-shadow-xl)}.fds-box--default-border-color{border:1px solid var(--ds-color-neutral-border-default)}.fds-box--subtle-border-color{border:1px solid var(--ds-color-neutral-border-subtle)}.fds-box--strong-border-color{border:1px solid var(--ds-color-neutral-base-strong)}.fds-box--sm-border-radius{border-radius:var(--ds-border-radius-sm)}.fds-box--md-border-radius{border-radius:var(--ds-border-radius-md)}.fds-box--lg-border-radius{border-radius:var(--ds-border-radius-lg)}.fds-box--xl-border-radius{border-radius:var(--ds-border-radius-xl)}.fds-box--2xl-border-radius{border-radius:var(--ds-border-radius-2xl)}.fds-box--3xl-border-radius{border-radius:var(--ds-border-radius-3xl)}.fds-box--4xl-border-radius{border-radius:var(--ds-border-radius-4xl)}.fds-box--full-border-radius{border-radius:var(--ds-border-radius-full)}.fds-box--default-background{background-color:var(--ds-color-neutral-background-default)}.fds-box--subtle-background{background-color:var(--ds-color-neutral-background-subtle)}}