@digdir/designsystemet-css 0.11.0-alpha.2 → 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.
- package/accordion.css +1 -0
- package/alert.css +0 -1
- package/button.css +0 -6
- package/card.css +0 -3
- package/checkbox.css +4 -4
- package/combobox.css +4 -64
- package/dist/accordion.css +1 -1
- package/dist/alert.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/combobox.css +1 -1
- package/dist/helptext.css +1 -1
- package/dist/index.css +1 -1
- package/dist/link.css +1 -1
- package/dist/native-select.css +1 -1
- package/dist/radio.css +1 -1
- package/dist/search.css +1 -1
- package/dist/skiplink.css +1 -1
- package/dist/switch.css +1 -1
- package/dist/table.css +1 -1
- package/dist/tabs.css +1 -1
- package/dist/textarea.css +1 -1
- package/dist/textfield.css +1 -1
- package/dist/tooltip.css +1 -1
- package/dist/utils.css +1 -1
- package/helptext.css +0 -2
- package/index.css +5 -5
- package/link.css +4 -8
- package/native-select.css +0 -1
- package/package.json +2 -2
- package/radio.css +2 -2
- package/search.css +0 -1
- package/skiplink.css +2 -2
- package/switch.css +4 -4
- package/table.css +0 -3
- package/tabs.css +1 -15
- package/textarea.css +0 -1
- package/textfield.css +2 -3
- package/tooltip.css +0 -2
- package/utils.css +2 -2
- package/dist/error-message.css +0 -1
- package/dist/heading.css +0 -1
- package/dist/ingress.css +0 -1
- package/dist/label.css +0 -1
- package/dist/paragraph.css +0 -1
- package/error-message.css +0 -43
- package/heading.css +0 -61
- package/ingress.css +0 -40
- package/label.css +0 -46
- package/paragraph.css +0 -82
package/accordion.css
CHANGED
package/alert.css
CHANGED
package/button.css
CHANGED
|
@@ -49,8 +49,6 @@
|
|
|
49
49
|
--dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-3);
|
|
50
50
|
|
|
51
51
|
gap: var(--ds-sizing-1);
|
|
52
|
-
font: var(--ds-typography-paragraph-short-sm);
|
|
53
|
-
font-family: inherit;
|
|
54
52
|
min-height: var(--ds-sizing-10);
|
|
55
53
|
}
|
|
56
54
|
|
|
@@ -76,8 +74,6 @@
|
|
|
76
74
|
--dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
|
|
77
75
|
|
|
78
76
|
gap: var(--ds-sizing-2);
|
|
79
|
-
font: var(--ds-typography-paragraph-short-md);
|
|
80
|
-
font-family: inherit;
|
|
81
77
|
min-height: var(--ds-sizing-12);
|
|
82
78
|
}
|
|
83
79
|
|
|
@@ -85,8 +81,6 @@
|
|
|
85
81
|
--dsc-btn-padding: var(--ds-spacing-3) var(--ds-spacing-5);
|
|
86
82
|
|
|
87
83
|
gap: var(--ds-sizing-2);
|
|
88
|
-
font: var(--ds-typography-paragraph-short-lg);
|
|
89
|
-
font-family: inherit;
|
|
90
84
|
min-height: var(--ds-sizing-14);
|
|
91
85
|
}
|
|
92
86
|
|
package/card.css
CHANGED
|
@@ -71,8 +71,6 @@
|
|
|
71
71
|
gap: var(--ds-spacing-4);
|
|
72
72
|
flex-wrap: wrap;
|
|
73
73
|
word-wrap: break-word;
|
|
74
|
-
font: var(--ds-typography-paragraph-md);
|
|
75
|
-
font-family: inherit;
|
|
76
74
|
padding: var(--ds-spacing-2) 0;
|
|
77
75
|
color: inherit;
|
|
78
76
|
}
|
|
@@ -86,7 +84,6 @@
|
|
|
86
84
|
flex-direction: column;
|
|
87
85
|
flex-wrap: wrap;
|
|
88
86
|
word-wrap: break-word;
|
|
89
|
-
font: var(--ds-typography-heading-md);
|
|
90
87
|
font-family: inherit;
|
|
91
88
|
padding: var(--ds-spacing-2) 0;
|
|
92
89
|
}
|
package/checkbox.css
CHANGED
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
|
|
76
76
|
/* .ds-checkbox__input:focus-visible {
|
|
77
77
|
outline-offset: 3px;
|
|
78
|
-
outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-focus-outer);
|
|
78
|
+
outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-color-focus-outer);
|
|
79
79
|
box-shadow:
|
|
80
|
-
0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-focus-inner),
|
|
80
|
+
0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-color-focus-inner),
|
|
81
81
|
inset 0 0 0 2px var(--dsc-checkbox-border-color);
|
|
82
82
|
} */
|
|
83
83
|
|
|
@@ -129,9 +129,9 @@
|
|
|
129
129
|
.ds-checkbox:has(.ds-checkbox__input:focus-visible) {
|
|
130
130
|
--dsc-focus-border-width: 3px;
|
|
131
131
|
|
|
132
|
-
outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
|
|
132
|
+
outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
|
|
133
133
|
outline-offset: var(--dsc-focus-border-width);
|
|
134
|
-
box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
|
|
134
|
+
box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
|
|
135
135
|
border-radius: var(--ds-border-radius-md);
|
|
136
136
|
}
|
|
137
137
|
|
package/combobox.css
CHANGED
|
@@ -32,8 +32,6 @@
|
|
|
32
32
|
width: 100%;
|
|
33
33
|
height: auto;
|
|
34
34
|
justify-content: space-between;
|
|
35
|
-
font: var(--ds-typography-paragraph-md);
|
|
36
|
-
font-family: inherit;
|
|
37
35
|
}
|
|
38
36
|
|
|
39
37
|
.ds-combobox__input__wrapper .ds-combobox__input {
|
|
@@ -48,40 +46,19 @@
|
|
|
48
46
|
|
|
49
47
|
.ds-combobox--sm .ds-combobox__input__wrapper {
|
|
50
48
|
min-height: var(--ds-sizing-10);
|
|
51
|
-
font: var(--ds-typography-paragraph-sm);
|
|
52
|
-
font-family: inherit;
|
|
53
49
|
padding: 5px var(--ds-spacing-2);
|
|
54
50
|
}
|
|
55
51
|
|
|
56
|
-
.ds-combobox--sm .ds-combobox__input__wrapper .ds-combobox__input {
|
|
57
|
-
font: var(--ds-typography-paragraph-sm);
|
|
58
|
-
font-family: inherit;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
52
|
.ds-combobox--md .ds-combobox__input__wrapper {
|
|
62
53
|
min-height: var(--ds-sizing-12);
|
|
63
|
-
font: var(--ds-typography-paragraph-md);
|
|
64
|
-
font-family: inherit;
|
|
65
54
|
padding: 7px var(--ds-spacing-3);
|
|
66
55
|
}
|
|
67
56
|
|
|
68
|
-
.ds-combobox--md .ds-combobox__input__wrapper .ds-combobox__input {
|
|
69
|
-
font: var(--ds-typography-paragraph-md);
|
|
70
|
-
font-family: inherit;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
57
|
.ds-combobox--lg .ds-combobox__input__wrapper {
|
|
74
58
|
min-height: var(--ds-sizing-14);
|
|
75
|
-
font: var(--ds-typography-paragraph-lg);
|
|
76
|
-
font-family: inherit;
|
|
77
59
|
padding: 7px var(--ds-spacing-4);
|
|
78
60
|
}
|
|
79
61
|
|
|
80
|
-
.ds-combobox--lg .ds-combobox__input__wrapper .ds-combobox__input {
|
|
81
|
-
font: var(--ds-typography-paragraph-lg);
|
|
82
|
-
font-family: inherit;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
62
|
.ds-combobox__input__wrapper .ds-combobox__input:focus {
|
|
86
63
|
outline: none;
|
|
87
64
|
}
|
|
@@ -192,9 +169,9 @@
|
|
|
192
169
|
.ds-combobox__input__wrapper:has(input:focus) {
|
|
193
170
|
--dsc-focus-border-width: 3px;
|
|
194
171
|
|
|
195
|
-
outline: var(--dsc-focus-border-width) solid var(--ds-color-
|
|
172
|
+
outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
|
|
196
173
|
outline-offset: var(--dsc-focus-border-width);
|
|
197
|
-
box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-
|
|
174
|
+
box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
|
|
198
175
|
}
|
|
199
176
|
|
|
200
177
|
.ds-combobox__input__wrapper:focus-within:hover {
|
|
@@ -202,47 +179,13 @@
|
|
|
202
179
|
}
|
|
203
180
|
|
|
204
181
|
.ds-combobox__empty {
|
|
205
|
-
padding: var(--ds-spacing-2) var(--ds-spacing-3);
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.ds-combobox--lg .ds-combobox__empty {
|
|
209
|
-
font: var(--ds-typography-label-lg);
|
|
210
|
-
font-family: inherit;
|
|
211
|
-
font-weight: 400;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.ds-combobox--md .ds-combobox__empty {
|
|
215
|
-
font: var(--ds-typography-label-md);
|
|
216
|
-
font-family: inherit;
|
|
217
|
-
font-weight: 400;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.ds-combobox--sm .ds-combobox__empty {
|
|
221
|
-
font: var(--ds-typography-label-sm);
|
|
222
|
-
font-family: inherit;
|
|
223
182
|
font-weight: 400;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.ds-combobox__custom {
|
|
227
183
|
padding: var(--ds-spacing-2) var(--ds-spacing-3);
|
|
228
184
|
}
|
|
229
185
|
|
|
230
|
-
.ds-
|
|
231
|
-
font: var(--ds-typography-label-lg);
|
|
232
|
-
font-family: inherit;
|
|
233
|
-
font-weight: 400;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.ds-combobox--md .ds-combobox__custom {
|
|
237
|
-
font: var(--ds-typography-label-md);
|
|
238
|
-
font-family: inherit;
|
|
239
|
-
font-weight: 400;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
.ds-combobox--sm .ds-combobox__custom {
|
|
243
|
-
font: var(--ds-typography-label-sm);
|
|
244
|
-
font-family: inherit;
|
|
186
|
+
.ds-combobox__custom {
|
|
245
187
|
font-weight: 400;
|
|
188
|
+
padding: var(--ds-spacing-2) var(--ds-spacing-3);
|
|
246
189
|
}
|
|
247
190
|
|
|
248
191
|
.ds-combobox__option {
|
|
@@ -259,7 +202,6 @@
|
|
|
259
202
|
text-align: left;
|
|
260
203
|
height: auto;
|
|
261
204
|
cursor: pointer;
|
|
262
|
-
font: var(--ds-typography-label-md);
|
|
263
205
|
font-family: inherit;
|
|
264
206
|
}
|
|
265
207
|
|
|
@@ -350,7 +292,5 @@
|
|
|
350
292
|
flex-wrap: wrap;
|
|
351
293
|
gap: var(--ds-spacing-1);
|
|
352
294
|
color: var(--ds-color-neutral-text-subtle);
|
|
353
|
-
font: inherit;
|
|
354
|
-
font-family: inherit;
|
|
355
295
|
}
|
|
356
296
|
}
|
package/dist/accordion.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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;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)}}
|
|
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 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;
|
|
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/button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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);
|
|
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 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;
|
|
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)}}
|
package/dist/checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer ds.checkbox{.ds-checkbox{--dsc-checkbox-size:1.75rem;--dsc-checkbox-focus-border-width:3px;--dsc-checkbox-background:var(--ds-color-neutral-background-default);--dsc-checkbox-border-color:var(--ds-color-neutral-border-default);--dsc-checkbox-border__hover--size:calc(var(--ds-spacing-3)/2);--dsc-checkbox-border__hover:0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);--dsc-checkbox-check_color:transparent;display:grid}.ds-checkbox:has(.ds-checkbox__label){gap:var(--ds-spacing-2);grid-template-columns:var(--dsc-checkbox-size) auto}.ds-checkbox__input{align-self:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-checkbox-background);box-shadow:inset 0 0 0 2px var(--dsc-checkbox-border-color);height:var(--dsc-checkbox-size);margin:0;outline:none;position:relative;width:var(--dsc-checkbox-size);z-index:1}.ds-checkbox__input,.ds-checkbox__input:before{border-radius:var(--ds-border-radius-md);cursor:pointer}.ds-checkbox__input:before{content:"";display:block;height:2.75rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:2.75rem}.ds-checkbox__label{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.ds-checkbox__description{color:var(--ds-color-neutral-text-subtle);grid-column:2;margin-top:calc(var(--ds-spacing-3)*-1)}.ds-checkbox--readonly>.ds-checkbox__input,.ds-checkbox--readonly>.ds-checkbox__input:before,.ds-checkbox--readonly>.ds-checkbox__label{cursor:default}.ds-checkbox__input:disabled,.ds-checkbox__input:disabled:before,.ds-checkbox__input:disabled~.ds-checkbox__label{cursor:not-allowed}.ds-checkbox__input:after{background-color:var(--dsc-checkbox-check_color);content:"";height:100%;left:50%;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M18.55 6.324a1 1 0 0 1 0 1.414l-7.968 7.97a1 1 0 0 1-1.414 0l-4.219-4.22a1 1 0 0 1 1.414-1.414l3.512 3.512 7.262-7.262a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M18.55 6.324a1 1 0 0 1 0 1.414l-7.968 7.97a1 1 0 0 1-1.414 0l-4.219-4.22a1 1 0 0 1 1.414-1.414l3.512 3.512 7.262-7.262a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E");position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.ds-checkbox__input:checked{--dsc-checkbox-border-color:var(--ds-color-accent-base-default);--dsc-checkbox-background:var(--ds-color-accent-base-default);--dsc-checkbox-check_color:#fff;background:var(--dsc-checkbox-background)}.ds-checkbox__input:indeterminate{--dsc-checkbox-border-color:var(--ds-color-accent-base-default);--dsc-checkbox-background:var(--ds-color-accent-base-default);--dsc-checkbox-check_color:#fff}.ds-checkbox__input:indeterminate:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' d='M4.25 11.25a1.5 1.5 0 0 1 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11a1.5 1.5 0 0 1-1.5-1.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' d='M4.25 11.25a1.5 1.5 0 0 1 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11a1.5 1.5 0 0 1-1.5-1.5'/%3E%3C/svg%3E")}.ds-checkbox--readonly>.ds-checkbox__input{--dsc-checkbox-border-color:var(--ds-color-neutral-border-subtle);--dsc-checkbox-background:var(--ds-color-neutral-background-subtle)}.ds-checkbox__input:disabled,.ds-checkbox__input:disabled~.ds-checkbox__description,.ds-checkbox__input:disabled~.ds-checkbox__label{opacity:var(--ds-disabled-opacity)}.ds-checkbox:has(.ds-checkbox__input:focus-visible){--dsc-focus-border-width:3px;border-radius:var(--ds-border-radius-md);box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-checkbox--readonly>.ds-checkbox__input:checked{--dsc-checkbox-check_color:var(--ds-color-neutral-text-subtle);background:var(--dsc-checkbox-background)}.ds-checkbox--readonly>.ds-checkbox__input:indeterminate{--dsc-checkbox-check_color:var(--ds-color-neutral-text-subtle);background:var(--dsc-checkbox-background)}.ds-checkbox--error>.ds-checkbox__input:not(:disabled,:focus-visible){--dsc-checkbox-border-color:var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:disabled)~.ds-checkbox__label,.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:not(:disabled)~.ds-checkbox__label:hover{color:var(--ds-color-accent-text-subtle)}.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:checked,:disabled,:focus-visible){--dsc-checkbox-border-color:var(--ds-color-accent-border-strong);box-shadow:var(--dsc-checkbox-border__hover),inset 0 0 0 2px var(--dsc-checkbox-border-color)}.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:indeterminate:hover:not(:focus-visible){--dsc-checkbox-border-color:var(--ds-color-accent-border-strong);box-shadow:var(--dsc-checkbox-border__hover)}.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:checked:not(:disabled,:focus-visible){box-shadow:var(--dsc-checkbox-border__hover)}}.ds-checkbox--sm{--dsc-checkbox-size:var(--ds-sizing-5)}.ds-checkbox--md{--dsc-checkbox-size:var(--ds-sizing-6)}.ds-checkbox--lg{--dsc-checkbox-size:var(--ds-sizing-7)}.ds-checkbox__group{display:flex;flex-direction:column;gap:var(--ds-spacing-5);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}
|
|
1
|
+
@layer ds.checkbox{.ds-checkbox{--dsc-checkbox-size:1.75rem;--dsc-checkbox-focus-border-width:3px;--dsc-checkbox-background:var(--ds-color-neutral-background-default);--dsc-checkbox-border-color:var(--ds-color-neutral-border-default);--dsc-checkbox-border__hover--size:calc(var(--ds-spacing-3)/2);--dsc-checkbox-border__hover:0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);--dsc-checkbox-check_color:transparent;display:grid}.ds-checkbox:has(.ds-checkbox__label){gap:var(--ds-spacing-2);grid-template-columns:var(--dsc-checkbox-size) auto}.ds-checkbox__input{align-self:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-checkbox-background);box-shadow:inset 0 0 0 2px var(--dsc-checkbox-border-color);height:var(--dsc-checkbox-size);margin:0;outline:none;position:relative;width:var(--dsc-checkbox-size);z-index:1}.ds-checkbox__input,.ds-checkbox__input:before{border-radius:var(--ds-border-radius-md);cursor:pointer}.ds-checkbox__input:before{content:"";display:block;height:2.75rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:2.75rem}.ds-checkbox__label{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.ds-checkbox__description{color:var(--ds-color-neutral-text-subtle);grid-column:2;margin-top:calc(var(--ds-spacing-3)*-1)}.ds-checkbox--readonly>.ds-checkbox__input,.ds-checkbox--readonly>.ds-checkbox__input:before,.ds-checkbox--readonly>.ds-checkbox__label{cursor:default}.ds-checkbox__input:disabled,.ds-checkbox__input:disabled:before,.ds-checkbox__input:disabled~.ds-checkbox__label{cursor:not-allowed}.ds-checkbox__input:after{background-color:var(--dsc-checkbox-check_color);content:"";height:100%;left:50%;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M18.55 6.324a1 1 0 0 1 0 1.414l-7.968 7.97a1 1 0 0 1-1.414 0l-4.219-4.22a1 1 0 0 1 1.414-1.414l3.512 3.512 7.262-7.262a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M18.55 6.324a1 1 0 0 1 0 1.414l-7.968 7.97a1 1 0 0 1-1.414 0l-4.219-4.22a1 1 0 0 1 1.414-1.414l3.512 3.512 7.262-7.262a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E");position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.ds-checkbox__input:checked{--dsc-checkbox-border-color:var(--ds-color-accent-base-default);--dsc-checkbox-background:var(--ds-color-accent-base-default);--dsc-checkbox-check_color:#fff;background:var(--dsc-checkbox-background)}.ds-checkbox__input:indeterminate{--dsc-checkbox-border-color:var(--ds-color-accent-base-default);--dsc-checkbox-background:var(--ds-color-accent-base-default);--dsc-checkbox-check_color:#fff}.ds-checkbox__input:indeterminate:after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' d='M4.25 11.25a1.5 1.5 0 0 1 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11a1.5 1.5 0 0 1-1.5-1.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' d='M4.25 11.25a1.5 1.5 0 0 1 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11a1.5 1.5 0 0 1-1.5-1.5'/%3E%3C/svg%3E")}.ds-checkbox--readonly>.ds-checkbox__input{--dsc-checkbox-border-color:var(--ds-color-neutral-border-subtle);--dsc-checkbox-background:var(--ds-color-neutral-background-subtle)}.ds-checkbox__input:disabled,.ds-checkbox__input:disabled~.ds-checkbox__description,.ds-checkbox__input:disabled~.ds-checkbox__label{opacity:var(--ds-disabled-opacity)}.ds-checkbox:has(.ds-checkbox__input:focus-visible){--dsc-focus-border-width:3px;border-radius:var(--ds-border-radius-md);box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-checkbox--readonly>.ds-checkbox__input:checked{--dsc-checkbox-check_color:var(--ds-color-neutral-text-subtle);background:var(--dsc-checkbox-background)}.ds-checkbox--readonly>.ds-checkbox__input:indeterminate{--dsc-checkbox-check_color:var(--ds-color-neutral-text-subtle);background:var(--dsc-checkbox-background)}.ds-checkbox--error>.ds-checkbox__input:not(:disabled,:focus-visible){--dsc-checkbox-border-color:var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:disabled)~.ds-checkbox__label,.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:not(:disabled)~.ds-checkbox__label:hover{color:var(--ds-color-accent-text-subtle)}.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:checked,:disabled,:focus-visible){--dsc-checkbox-border-color:var(--ds-color-accent-border-strong);box-shadow:var(--dsc-checkbox-border__hover),inset 0 0 0 2px var(--dsc-checkbox-border-color)}.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:indeterminate:hover:not(:focus-visible){--dsc-checkbox-border-color:var(--ds-color-accent-border-strong);box-shadow:var(--dsc-checkbox-border__hover)}.ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:checked:not(:disabled,:focus-visible){box-shadow:var(--dsc-checkbox-border__hover)}}.ds-checkbox--sm{--dsc-checkbox-size:var(--ds-sizing-5)}.ds-checkbox--md{--dsc-checkbox-size:var(--ds-sizing-6)}.ds-checkbox--lg{--dsc-checkbox-size:var(--ds-sizing-7)}.ds-checkbox__group{display:flex;flex-direction:column;gap:var(--ds-spacing-5);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}
|
package/dist/combobox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer ds.combobox{.ds-combobox{background-color:initial;display:grid;gap:var(--ds-spacing-2)}.ds-combobox [data-floating-ui-portal]{grid-column:1/2;grid-row:1/2}.ds-combobox__options-wrapper{background:var(--ds-color-neutral-background-default);color:var(--ds-color-neutral-text-default);overflow-y:auto;padding:var(--ds-spacing-2);z-index:1600}.ds-combobox--readonly .ds-combobox__input{pointer-events:none}.ds-combobox__input__wrapper{align-items:center;cursor:text;display:flex;
|
|
1
|
+
@layer ds.combobox{.ds-combobox{background-color:initial;display:grid;gap:var(--ds-spacing-2)}.ds-combobox [data-floating-ui-portal]{grid-column:1/2;grid-row:1/2}.ds-combobox__options-wrapper{background:var(--ds-color-neutral-background-default);color:var(--ds-color-neutral-text-default);overflow-y:auto;padding:var(--ds-spacing-2);z-index:1600}.ds-combobox--readonly .ds-combobox__input{pointer-events:none}.ds-combobox__input__wrapper{align-items:center;cursor:text;display:flex;gap:var(--ds-spacing-1);height:auto;justify-content:space-between;padding:var(--ds-spacing-2);position:relative;width:100%}.ds-combobox__input__wrapper .ds-combobox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:initial;border:none;color:var(--ds-color-neutral-text-default);flex-grow:1;height:100%;min-width:50px}.ds-combobox--sm .ds-combobox__input__wrapper{min-height:var(--ds-sizing-10);padding:5px var(--ds-spacing-2)}.ds-combobox--md .ds-combobox__input__wrapper{min-height:var(--ds-sizing-12);padding:7px var(--ds-spacing-3)}.ds-combobox--lg .ds-combobox__input__wrapper{min-height:var(--ds-sizing-14);padding:7px var(--ds-spacing-4)}.ds-combobox__input__wrapper .ds-combobox__input:focus{outline:none}.ds-combobox__input__wrapper.ds-combobox--error{border-color:var(--ds-color-danger-border-default);border-width:2px}.ds-combobox__chip-and-input{align-items:center;background-color:initial;display:flex;flex-wrap:wrap;gap:var(--ds-spacing-2);width:100%}.ds-combobox__arrow{cursor:pointer;display:grid;place-items:center}.ds-combobox__input__wrapper.ds-combobox--readonly{background:var(--ds-color-accent-base-default);border-color:var(--ds-color-accent-base-default)}.ds-combobox__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);grid-column:1/2;grid-row:1/2;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.ds-combobox__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.ds-combobox__clear-button{aspect-ratio:1;background-color:initial;border:none;border-radius:var(--ds-spacing-1);color:var(--ds-color-neutral-text-default);cursor:pointer;display:grid;height:29px;padding:0;place-items:center;width:29px}.ds-combobox--sm .ds-combobox__clear-button{height:25px;width:25px}.ds-combobox--md .ds-combobox__clear-button{height:29px;width:29px}.ds-combobox--lg .ds-combobox__clear-button{height:31px;width:31px}.ds-combobox__clear-button:not(:disabled):hover{background-color:var(--ds-color-neutral-surface-default)}.ds-combobox__disabled{opacity:var(--ds-disabled-opacity)}.ds-combobox__disabled *{cursor:not-allowed}.ds-combobox__readonly__icon{height:1.2em;width:1.2em}.ds-combobox__error-message{margin-top:var(--ds-spacing-2)}.ds-combobox__error-message:empty{display:none}.ds-combobox__loading{align-content:center;display:flex;gap:var(--ds-spacing-2)}.ds-combobox__input__wrapper:has(input:focus){--dsc-focus-border-width:3px;box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-combobox__input__wrapper:focus-within:hover{border-color:var(--ds-color-neutral-border-default)}.ds-combobox__custom,.ds-combobox__empty{font-weight:400;padding:var(--ds-spacing-2) var(--ds-spacing-3)}.ds-combobox__option{background:none;border:none;border-left:5px solid transparent;border-radius:var(--ds-border-radius-md);cursor:pointer;display:grid;font-family:inherit;grid-template-columns:1.2em 1fr;height:auto;justify-content:start;padding:var(--ds-spacing-2) var(--ds-spacing-3);padding-left:var(--ds-spacing-1);text-align:left;width:100%}.ds-combobox__option.ds-combobox__option--active{background:var(--ds-color-accent-background-subtle);border-left:5px solid var(--ds-color-accent-base-default)}.ds-combobox__option>div{align-self:flex-start}.ds-combobox__option.ds-combobox__option--multiple{gap:var(--ds-spacing-2);grid-template-columns:auto 1fr}.ds-combobox__option__label{color:var(--ds-color-neutral-text-default);cursor:pointer;display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--ds-spacing-1);margin:auto 0}.ds-combobox__option--active .ds-combobox__option__label{color:var(--ds-color-accent-text-default)}.ds-combobox__option__icon-wrapper{aspect-ratio:1/1;background-color:var(--ds-color-neutral-background-default);border:2px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);display:grid;place-items:center;width:var(--ds-spacing-6)}.ds-combobox__option--active .ds-combobox__option__icon-wrapper{border-color:var(--ds-color-accent-base-default)}.ds-combobox--sm .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-spacing-5)}.ds-combobox--md .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-spacing-6)}.ds-combobox--lg .ds-combobox__option .ds-combobox__option__icon-wrapper{width:var(--ds-spacing-7)}.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected{background-color:var(--ds-color-accent-base-default);border-color:var(--ds-color-accent-base-default)}.ds-combobox__option__icon-wrapper__icon{box-sizing:border-box;padding-top:.2em;transform:scale(1.4);stroke:var(--ds-color-neutral-text-default);color:var(--ds-color-neutral-text-default)}.ds-combobox__option__icon-wrapper .ds-combobox__option__icon-wrapper__icon{padding-top:0}.ds-combobox__option--active .ds-combobox__option__icon-wrapper__icon{stroke:var(--ds-color-accent-text-default);color:var(--ds-color-accent-text-default)}.ds-combobox__option__icon-wrapper.ds-combobox__option__icon-wrapper--selected .ds-combobox__option__icon-wrapper__icon{color:#fff;stroke:#fff}.ds-combobox__option__description{color:var(--ds-color-neutral-text-subtle);display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--ds-spacing-1)}}
|
package/dist/helptext.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer ds.helptext{.ds-helptext__button{background-color:initial;border:none;border-radius:50px;cursor:pointer;display:flex;min-height:0;min-width:0;padding:0!important}@media print{.ds-helptext__button{display:none}}.ds-helptext__icon--filled{display:none}.ds-helptext__icon{color:var(--ds-color-accent-base-default);height:var(--ds-sizing-7);width:var(--ds-sizing-7)}.ds-helptext__button:where(:hover,:focus,[data-state^=open])>.ds-helptext__icon{display:none}.ds-helptext__button:where(:hover,:focus,[data-state^=open])>.ds-helptext__icon--filled{display:inline-block}.ds-helptext__content{color:var(--ds-color-neutral-text-default);
|
|
1
|
+
@layer ds.helptext{.ds-helptext__button{background-color:initial;border:none;border-radius:50px;cursor:pointer;display:flex;min-height:0;min-width:0;padding:0!important}@media print{.ds-helptext__button{display:none}}.ds-helptext__icon--filled{display:none}.ds-helptext__icon{color:var(--ds-color-accent-base-default);height:var(--ds-sizing-7);width:var(--ds-sizing-7)}.ds-helptext__button:where(:hover,:focus,[data-state^=open])>.ds-helptext__icon{display:none}.ds-helptext__button:where(:hover,:focus,[data-state^=open])>.ds-helptext__icon--filled{display:inline-block}.ds-helptext__content{color:var(--ds-color-neutral-text-default);max-width:700px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ds-helptext--sm .ds-helptext__icon{height:var(--ds-sizing-6);width:var(--ds-sizing-6)}.ds-helptext--md .ds-helptext__icon{height:var(--ds-sizing-7);width:var(--ds-sizing-7)}.ds-helptext--lg .ds-helptext__icon{height:var(--ds-sizing-8);width:var(--ds-sizing-8)}}
|