@db-ux/core-components 2.0.6 → 2.0.7

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 (23) hide show
  1. package/build/components/badge/badge.css +48 -41
  2. package/build/components/badge/badge.scss +2 -0
  3. package/build/components/checkbox/checkbox.css +169 -263
  4. package/build/components/checkbox/checkbox.scss +76 -7
  5. package/build/components/custom-select/custom-select.css +1 -0
  6. package/build/components/header/header.css +6 -0
  7. package/build/components/header/header.scss +13 -0
  8. package/build/components/input/input.css +1 -0
  9. package/build/components/radio/radio.css +102 -264
  10. package/build/components/radio/radio.scss +39 -7
  11. package/build/components/select/select.css +1 -0
  12. package/build/components/switch/switch.css +37 -289
  13. package/build/components/switch/switch.scss +21 -7
  14. package/build/components/tag/tag.css +69 -52
  15. package/build/components/textarea/textarea.css +1 -0
  16. package/build/styles/absolute.css +121 -63
  17. package/build/styles/index.css +121 -63
  18. package/build/styles/internal/_form-components.scss +33 -59
  19. package/build/styles/internal/_tag-components.scss +41 -44
  20. package/build/styles/relative.css +121 -63
  21. package/build/styles/rollup.css +121 -63
  22. package/build/styles/webpack.css +121 -63
  23. package/package.json +6 -6
package/build/components/checkbox/checkbox.css CHANGED
@@ -211,8 +211,76 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
211
211
  content: "*"/"";
212
212
  }
213
213
  }
214
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid) {
215
- /* stylelint-disable-next-line at-rule-empty-line-before */
214
+ .db-checkbox:has(input:disabled) {
215
+ opacity: 0.4;
216
+ }
217
+ .db-checkbox:is(label),
218
+ .db-checkbox > label {
219
+ display: flex;
220
+ align-items: flex-start;
221
+ position: relative;
222
+ gap: var(--db-spacing-fixed-xs);
223
+ color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
224
+ }
225
+ .db-checkbox input {
226
+ background-color: var(--db-adaptive-bg-basic-transparent-full-default);
227
+ place-content: center center;
228
+ appearance: none;
229
+ aspect-ratio: 1;
230
+ /* stylelint-disable-next-line db-ux/use-border-width */
231
+ border: min(var(--db-border-width-2xs), 2px) solid var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
232
+ block-size: var(--db-icon-font-size);
233
+ inline-size: var(--db-icon-font-size);
234
+ padding: 0;
235
+ }
236
+ .db-checkbox[data-size=small] input {
237
+ margin-inline-end: var(--db-spacing-fixed-2xs);
238
+ }
239
+ .db-checkbox[data-hide-label=true] {
240
+ font-size: 0;
241
+ }
242
+ .db-checkbox[data-hide-label=true] input {
243
+ margin-inline-end: 0;
244
+ }
245
+ .db-checkbox:not(:has(input:disabled)):has(input:hover, > label:hover, :is(label):hover) {
246
+ --db-check-element-label-color: var(
247
+ --db-adaptive-on-bg-basic-emphasis-100-hovered
248
+ );
249
+ }
250
+ .db-checkbox:not(:has(input:disabled)):has(input:hover, > label:hover, :is(label):hover):is(label),
251
+ .db-checkbox:not(:has(input:disabled)):has(input:hover, > label:hover, :is(label):hover) > label {
252
+ cursor: var(--db-overwrite-cursor, pointer);
253
+ }
254
+ .db-checkbox:not(:has(input:disabled)):has(input:hover, > label:hover, :is(label):hover) input {
255
+ cursor: var(--db-overwrite-cursor, pointer);
256
+ background-color: var(--db-adaptive-bg-basic-transparent-hovered);
257
+ }
258
+ .db-checkbox:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) {
259
+ --db-check-element-label-color: var(
260
+ --db-adaptive-on-bg-basic-emphasis-100-pressed
261
+ );
262
+ }
263
+ .db-checkbox:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active):is(label),
264
+ .db-checkbox:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) > label {
265
+ cursor: var(--db-overwrite-cursor, pointer);
266
+ }
267
+ .db-checkbox:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) input {
268
+ cursor: var(--db-overwrite-cursor, pointer);
269
+ background-color: var(--db-adaptive-bg-basic-transparent-pressed);
270
+ }
271
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) {
272
+ --db-check-element-border-color: var(
273
+ --db-successful-on-bg-basic-emphasis-70-default
274
+ );
275
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
276
+ --db-successful-on-bg-basic-emphasis-80-default
277
+ );
278
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
279
+ --db-successful-on-bg-basic-emphasis-80-hovered
280
+ );
281
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
282
+ --db-successful-on-bg-basic-emphasis-80-pressed
283
+ );
216
284
  }
217
285
  .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext {
218
286
  /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -223,9 +291,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
223
291
  .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
224
292
  display: none;
225
293
  }
226
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]) {
227
- --db-adaptive-bg-basic-transparent-semi: var(
228
- --db-successful-bg-basic-transparent-semi-default
294
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not(:checked) {
295
+ --db-adaptive-bg-basic-transparent-default: var(
296
+ --db-successful-bg-basic-transparent-default
229
297
  );
230
298
  --db-adaptive-bg-basic-transparent-hovered: var(
231
299
  --db-successful-bg-basic-transparent-hovered
@@ -234,45 +302,31 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
234
302
  --db-successful-bg-basic-transparent-pressed
235
303
  );
236
304
  }
237
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not(:checked), .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):is([type=radio]) {
305
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:checked {
306
+ --db-icon-color: var(--db-successful-on-bg-inverted-default);
307
+ --db-adaptive-bg-basic-transparent-full-default: var(
308
+ --db-successful-bg-inverted-contrast-high-default
309
+ );
310
+ --db-adaptive-bg-basic-transparent-hovered: var(
311
+ --db-successful-bg-inverted-contrast-high-hovered
312
+ );
313
+ --db-adaptive-bg-basic-transparent-pressed: var(
314
+ --db-successful-bg-inverted-contrast-high-pressed
315
+ );
316
+ }
317
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
238
318
  --db-check-element-border-color: var(
239
319
  --db-successful-on-bg-basic-emphasis-70-default
240
320
  );
241
- }
242
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked {
243
- background-color: var(--db-successful-bg-inverted-contrast-high-default);
244
- color: var(--db-successful-on-bg-inverted-default);
245
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
246
- }
247
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked::before, .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked::after {
248
- --db-icon-color: var(--db-successful-on-bg-inverted-default);
249
- }
250
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
251
- cursor: var(--db-overwrite-cursor, pointer);
252
- background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
253
- }
254
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
255
- cursor: initial;
256
- }
257
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
258
- cursor: pointer;
259
- }
260
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
261
- cursor: var(--db-overwrite-cursor, pointer);
262
- background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
263
- }
264
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
265
- cursor: initial;
266
- }
267
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
268
- cursor: pointer;
269
- }
270
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]):has(input:not([role=switch])):is(label),
271
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]):has(input:not([role=switch])) > label {
272
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
273
- }
274
- .db-checkbox:has(input[data-custom-validity=valid]), .db-checkbox[data-custom-validity=valid] {
275
- /* stylelint-disable-next-line at-rule-empty-line-before */
321
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
322
+ --db-successful-on-bg-basic-emphasis-80-default
323
+ );
324
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
325
+ --db-successful-on-bg-basic-emphasis-80-hovered
326
+ );
327
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
328
+ --db-successful-on-bg-basic-emphasis-80-pressed
329
+ );
276
330
  }
277
331
  .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext {
278
332
  /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -283,9 +337,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
283
337
  .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) .db-infotext:not([data-semantic]) {
284
338
  display: none;
285
339
  }
286
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]) {
287
- --db-adaptive-bg-basic-transparent-semi: var(
288
- --db-successful-bg-basic-transparent-semi-default
340
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not(:checked), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not(:checked) {
341
+ --db-adaptive-bg-basic-transparent-default: var(
342
+ --db-successful-bg-basic-transparent-default
289
343
  );
290
344
  --db-adaptive-bg-basic-transparent-hovered: var(
291
345
  --db-successful-bg-basic-transparent-hovered
@@ -294,43 +348,31 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
294
348
  --db-successful-bg-basic-transparent-pressed
295
349
  );
296
350
  }
297
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not(:checked), .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):is([type=radio]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not(:checked), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):is([type=radio]) {
298
- --db-check-element-border-color: var(
299
- --db-successful-on-bg-basic-emphasis-70-default
300
- );
301
- }
302
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked {
303
- background-color: var(--db-successful-bg-inverted-contrast-high-default);
304
- color: var(--db-successful-on-bg-inverted-default);
305
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
306
- }
307
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked::before, .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked::after, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked::before, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked::after {
351
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:checked, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:checked {
308
352
  --db-icon-color: var(--db-successful-on-bg-inverted-default);
353
+ --db-adaptive-bg-basic-transparent-full-default: var(
354
+ --db-successful-bg-inverted-contrast-high-default
355
+ );
356
+ --db-adaptive-bg-basic-transparent-hovered: var(
357
+ --db-successful-bg-inverted-contrast-high-hovered
358
+ );
359
+ --db-adaptive-bg-basic-transparent-pressed: var(
360
+ --db-successful-bg-inverted-contrast-high-pressed
361
+ );
309
362
  }
310
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
311
- cursor: var(--db-overwrite-cursor, pointer);
312
- background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
313
- }
314
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
315
- cursor: initial;
316
- }
317
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
318
- cursor: pointer;
319
- }
320
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
321
- cursor: var(--db-overwrite-cursor, pointer);
322
- background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
323
- }
324
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
325
- cursor: initial;
326
- }
327
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
328
- cursor: pointer;
329
- }
330
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]):has(input:not([role=switch])):is(label),
331
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]):has(input:not([role=switch])) > label, .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]):has(input:not([role=switch])):is(label),
332
- .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]):has(input:not([role=switch])) > label {
333
- color: var(--db-successful-on-bg-basic-emphasis-80-default);
363
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) {
364
+ --db-check-element-border-color: var(
365
+ --db-critical-on-bg-basic-emphasis-70-default
366
+ );
367
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
368
+ --db-critical-on-bg-basic-emphasis-80-default
369
+ );
370
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
371
+ --db-critical-on-bg-basic-emphasis-80-hovered
372
+ );
373
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
374
+ --db-critical-on-bg-basic-emphasis-80-pressed
375
+ );
334
376
  }
335
377
  .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext[data-semantic=critical] {
336
378
  display: flex;
@@ -338,9 +380,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
338
380
  .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) .db-infotext:not([data-semantic]) {
339
381
  display: none;
340
382
  }
341
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]) {
342
- --db-adaptive-bg-basic-transparent-semi: var(
343
- --db-critical-bg-basic-transparent-semi-default
383
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not(:checked) {
384
+ --db-adaptive-bg-basic-transparent-default: var(
385
+ --db-critical-bg-basic-transparent-default
344
386
  );
345
387
  --db-adaptive-bg-basic-transparent-hovered: var(
346
388
  --db-critical-bg-basic-transparent-hovered
@@ -349,42 +391,31 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
349
391
  --db-critical-bg-basic-transparent-pressed
350
392
  );
351
393
  }
352
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not(:checked), .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):is([type=radio]) {
394
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:checked {
395
+ --db-icon-color: var(--db-critical-on-bg-inverted-default);
396
+ --db-adaptive-bg-basic-transparent-full-default: var(
397
+ --db-critical-bg-inverted-contrast-high-default
398
+ );
399
+ --db-adaptive-bg-basic-transparent-hovered: var(
400
+ --db-critical-bg-inverted-contrast-high-hovered
401
+ );
402
+ --db-adaptive-bg-basic-transparent-pressed: var(
403
+ --db-critical-bg-inverted-contrast-high-pressed
404
+ );
405
+ }
406
+ .db-checkbox:has(input[data-custom-validity=invalid]), .db-checkbox[data-custom-validity=invalid] {
353
407
  --db-check-element-border-color: var(
354
408
  --db-critical-on-bg-basic-emphasis-70-default
355
409
  );
356
- }
357
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked {
358
- background-color: var(--db-successful-bg-inverted-contrast-high-default);
359
- color: var(--db-successful-on-bg-inverted-default);
360
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
361
- }
362
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked::before, .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked::after {
363
- --db-icon-color: var(--db-successful-on-bg-inverted-default);
364
- }
365
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
366
- cursor: var(--db-overwrite-cursor, pointer);
367
- background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
368
- }
369
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
370
- cursor: initial;
371
- }
372
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
373
- cursor: pointer;
374
- }
375
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
376
- cursor: var(--db-overwrite-cursor, pointer);
377
- background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
378
- }
379
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
380
- cursor: initial;
381
- }
382
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
383
- cursor: pointer;
384
- }
385
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid):has(input:not([role=switch])):is(label),
386
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid):has(input:not([role=switch])) > label {
387
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
410
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
411
+ --db-critical-on-bg-basic-emphasis-80-default
412
+ );
413
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
414
+ --db-critical-on-bg-basic-emphasis-80-hovered
415
+ );
416
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
417
+ --db-critical-on-bg-basic-emphasis-80-pressed
418
+ );
388
419
  }
389
420
  .db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext[data-semantic=critical], .db-checkbox[data-custom-validity=invalid] .db-infotext[data-semantic=critical] {
390
421
  display: flex;
@@ -392,9 +423,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
392
423
  .db-checkbox:has(input[data-custom-validity=invalid]) .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=invalid] .db-infotext:not([data-semantic]) {
393
424
  display: none;
394
425
  }
395
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]) {
396
- --db-adaptive-bg-basic-transparent-semi: var(
397
- --db-critical-bg-basic-transparent-semi-default
426
+ .db-checkbox:has(input[data-custom-validity=invalid]) input:not(:checked), .db-checkbox[data-custom-validity=invalid] input:not(:checked) {
427
+ --db-adaptive-bg-basic-transparent-default: var(
428
+ --db-critical-bg-basic-transparent-default
398
429
  );
399
430
  --db-adaptive-bg-basic-transparent-hovered: var(
400
431
  --db-critical-bg-basic-transparent-hovered
@@ -403,126 +434,17 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
403
434
  --db-critical-bg-basic-transparent-pressed
404
435
  );
405
436
  }
406
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not(:checked), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):is([type=radio]), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not(:checked), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):is([type=radio]) {
407
- --db-check-element-border-color: var(
408
- --db-critical-on-bg-basic-emphasis-70-default
437
+ .db-checkbox:has(input[data-custom-validity=invalid]) input:checked, .db-checkbox[data-custom-validity=invalid] input:checked {
438
+ --db-icon-color: var(--db-critical-on-bg-inverted-default);
439
+ --db-adaptive-bg-basic-transparent-full-default: var(
440
+ --db-critical-bg-inverted-contrast-high-default
441
+ );
442
+ --db-adaptive-bg-basic-transparent-hovered: var(
443
+ --db-critical-bg-inverted-contrast-high-hovered
444
+ );
445
+ --db-adaptive-bg-basic-transparent-pressed: var(
446
+ --db-critical-bg-inverted-contrast-high-pressed
409
447
  );
410
- }
411
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked, .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked {
412
- background-color: var(--db-successful-bg-inverted-contrast-high-default);
413
- color: var(--db-successful-on-bg-inverted-default);
414
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
415
- }
416
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked::before, .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked::after, .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked::before, .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked::after {
417
- --db-icon-color: var(--db-successful-on-bg-inverted-default);
418
- }
419
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]) {
420
- cursor: var(--db-overwrite-cursor, pointer);
421
- background-color: var(--db-successful-bg-inverted-contrast-high-hovered);
422
- }
423
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
424
- cursor: initial;
425
- }
426
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
427
- cursor: pointer;
428
- }
429
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]) {
430
- cursor: var(--db-overwrite-cursor, pointer);
431
- background-color: var(--db-successful-bg-inverted-contrast-high-pressed);
432
- }
433
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input) {
434
- cursor: initial;
435
- }
436
- .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:has(input[data-custom-validity=invalid]) input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox[data-custom-validity=invalid] input:not([role=switch]):not([type=radio]):checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
437
- cursor: pointer;
438
- }
439
- .db-checkbox:has(input[data-custom-validity=invalid]):has(input:not([role=switch])):is(label),
440
- .db-checkbox:has(input[data-custom-validity=invalid]):has(input:not([role=switch])) > label, .db-checkbox[data-custom-validity=invalid]:has(input:not([role=switch])):is(label),
441
- .db-checkbox[data-custom-validity=invalid]:has(input:not([role=switch])) > label {
442
- color: var(--db-critical-on-bg-basic-emphasis-80-default);
443
- }
444
- .db-checkbox:has(input:disabled) {
445
- opacity: 0.4;
446
- }
447
- .db-checkbox:is(label),
448
- .db-checkbox > label {
449
- display: flex;
450
- align-items: flex-start;
451
- position: relative;
452
- gap: var(--db-spacing-fixed-xs);
453
- }
454
- .db-checkbox:is(label):not(:has(input:disabled)),
455
- .db-checkbox > label:not(:has(input:disabled)) {
456
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
457
- }
458
- .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]),
459
- .db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]) {
460
- cursor: var(--db-overwrite-cursor, pointer);
461
- }
462
- .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input),
463
- .db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(textarea),
464
- .db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input) {
465
- cursor: initial;
466
- }
467
- .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:is(label):not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
468
- .db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
469
- .db-checkbox > label:not(:has(input:disabled)):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
470
- cursor: pointer;
471
- }
472
- .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]),
473
- .db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]) {
474
- cursor: var(--db-overwrite-cursor, pointer);
475
- }
476
- .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input),
477
- .db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(textarea),
478
- .db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input) {
479
- cursor: initial;
480
- }
481
- .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox:is(label):not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
482
- .db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
483
- .db-checkbox > label:not(:has(input:disabled)):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
484
- cursor: pointer;
485
- }
486
- .db-checkbox input {
487
- background-color: var(--db-adaptive-bg-basic-transparent-full-default);
488
- place-content: center center;
489
- appearance: none;
490
- aspect-ratio: 1;
491
- /* stylelint-disable-next-line db-ux/use-border-width */
492
- border: min(var(--db-border-width-2xs), 2px) solid var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
493
- block-size: var(--db-icon-font-size);
494
- inline-size: var(--db-icon-font-size);
495
- padding: 0;
496
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
497
- }
498
- .db-checkbox input:hover:not(:disabled, [aria-disabled=true]) {
499
- cursor: var(--db-overwrite-cursor, pointer);
500
- background-color: var(--db-adaptive-bg-basic-transparent-hovered);
501
- }
502
- .db-checkbox input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox input:hover:not(:disabled, [aria-disabled=true]):is(input) {
503
- cursor: initial;
504
- }
505
- .db-checkbox input:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox input:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
506
- cursor: pointer;
507
- }
508
- .db-checkbox input:active:not(:disabled, [aria-disabled=true]) {
509
- cursor: var(--db-overwrite-cursor, pointer);
510
- background-color: var(--db-adaptive-bg-basic-transparent-pressed);
511
- }
512
- .db-checkbox input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox input:active:not(:disabled, [aria-disabled=true]):is(input) {
513
- cursor: initial;
514
- }
515
- .db-checkbox input:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox input:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
516
- cursor: pointer;
517
- }
518
- .db-checkbox[data-size=small] input {
519
- margin-inline-end: var(--db-spacing-fixed-2xs);
520
- }
521
- .db-checkbox[data-hide-label=true] {
522
- font-size: 0;
523
- }
524
- .db-checkbox[data-hide-label=true] input {
525
- margin-inline-end: 0;
526
448
  }
527
449
  .db-checkbox input {
528
450
  display: flex;
@@ -532,38 +454,22 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
532
454
  }
533
455
  .db-checkbox input:checked {
534
456
  --db-check-element-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
535
- background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
536
- color: var(--db-adaptive-on-bg-inverted-default);
537
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
457
+ --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
458
+ --db-adaptive-bg-basic-transparent-full-default: var(
459
+ --db-adaptive-bg-inverted-contrast-max-default
460
+ );
461
+ --db-adaptive-bg-basic-transparent-hovered: var(
462
+ --db-adaptive-bg-inverted-contrast-max-hovered
463
+ );
464
+ --db-adaptive-bg-basic-transparent-pressed: var(
465
+ --db-adaptive-bg-inverted-contrast-max-pressed
466
+ );
538
467
  border-width: 0;
539
468
  }
540
469
  .db-checkbox input:checked:not([data-hide-icon-before=true])::before {
541
470
  --db-icon: "check";
542
471
  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
543
472
  }
544
- .db-checkbox input:checked::before, .db-checkbox input:checked::after {
545
- --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
546
- }
547
- .db-checkbox input:checked:hover:not(:disabled, [aria-disabled=true]) {
548
- cursor: var(--db-overwrite-cursor, pointer);
549
- background-color: var(--db-adaptive-bg-inverted-contrast-max-hovered);
550
- }
551
- .db-checkbox input:checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox input:checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
552
- cursor: initial;
553
- }
554
- .db-checkbox input:checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox input:checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
555
- cursor: pointer;
556
- }
557
- .db-checkbox input:checked:active:not(:disabled, [aria-disabled=true]) {
558
- cursor: var(--db-overwrite-cursor, pointer);
559
- background-color: var(--db-adaptive-bg-inverted-contrast-max-pressed);
560
- }
561
- .db-checkbox input:checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-checkbox input:checked:active:not(:disabled, [aria-disabled=true]):is(input) {
562
- cursor: initial;
563
- }
564
- .db-checkbox input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-checkbox input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
565
- cursor: pointer;
566
- }
567
473
  .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
568
474
  --db-icon: "minus";
569
475
  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
package/build/components/checkbox/checkbox.scss CHANGED
@@ -24,10 +24,75 @@
24
24
  }
25
25
  }
26
26
 
27
+ @mixin get-validity-color-check($key: "valid") {
28
+ $variant: successful;
29
+
30
+ @if ($key != "valid") {
31
+ $variant: critical;
32
+ }
33
+
34
+ --db-check-element-border-color: var(
35
+ --db-#{$variant}-on-bg-basic-emphasis-70-default
36
+ );
37
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
38
+ --db-#{$variant}-on-bg-basic-emphasis-80-default
39
+ );
40
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
41
+ --db-#{$variant}-on-bg-basic-emphasis-80-hovered
42
+ );
43
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
44
+ --db-#{$variant}-on-bg-basic-emphasis-80-pressed
45
+ );
46
+
47
+ @include form-components.get-validity-message($key);
48
+
49
+ input {
50
+ &:not(:checked) {
51
+ --db-adaptive-bg-basic-transparent-default: var(
52
+ --db-#{$variant}-bg-basic-transparent-default
53
+ );
54
+ --db-adaptive-bg-basic-transparent-hovered: var(
55
+ --db-#{$variant}-bg-basic-transparent-hovered
56
+ );
57
+ --db-adaptive-bg-basic-transparent-pressed: var(
58
+ --db-#{$variant}-bg-basic-transparent-pressed
59
+ );
60
+ }
61
+
62
+ &:checked {
63
+ --db-icon-color: var(--db-#{$variant}-on-bg-inverted-default);
64
+ --db-adaptive-bg-basic-transparent-full-default: var(
65
+ --db-#{$variant}-bg-inverted-contrast-high-default
66
+ );
67
+ --db-adaptive-bg-basic-transparent-hovered: var(
68
+ --db-#{$variant}-bg-inverted-contrast-high-hovered
69
+ );
70
+ --db-adaptive-bg-basic-transparent-pressed: var(
71
+ --db-#{$variant}-bg-inverted-contrast-high-pressed
72
+ );
73
+ }
74
+ }
75
+ }
76
+
27
77
  .db-checkbox {
28
78
  @extend %helper-message;
29
79
 
30
- @include form-components.set-default-check-element(check);
80
+ @include form-components.set-default-check-element();
81
+
82
+ &:not(:has(input:disabled)) {
83
+ @include form-components.get-state();
84
+ @include form-components.get-state("active");
85
+ }
86
+
87
+ @include form-components.get-validity(check) {
88
+ &:has(.db-infotext[data-semantic="successful"]) {
89
+ @include get-validity-color-check("valid");
90
+ }
91
+ }
92
+
93
+ @include form-components.get-validity(check, "invalid") {
94
+ @include get-validity-color-check("invalid");
95
+ }
31
96
 
32
97
  input {
33
98
  display: flex;
@@ -37,17 +102,21 @@
37
102
 
38
103
  &:checked {
39
104
  --db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
105
+ --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
106
+ --db-adaptive-bg-basic-transparent-full-default: var(
107
+ --db-adaptive-bg-inverted-contrast-max-default
108
+ );
109
+ --db-adaptive-bg-basic-transparent-hovered: var(
110
+ --db-adaptive-bg-inverted-contrast-max-hovered
111
+ );
112
+ --db-adaptive-bg-basic-transparent-pressed: var(
113
+ --db-adaptive-bg-inverted-contrast-max-pressed
114
+ );
40
115
 
41
116
  @extend %center-icon;
42
117
 
43
118
  // Check icon
44
119
  @include icons.set-icon("check");
45
- @include colors.set-current-colors(
46
- colors.$db-adaptive-bg-inverted-contrast-max-default,
47
- colors.$db-adaptive-on-bg-inverted-default,
48
- colors.$db-adaptive-bg-inverted-contrast-max-hovered,
49
- colors.$db-adaptive-bg-inverted-contrast-max-pressed
50
- );
51
120
 
52
121
  // The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border
53
122
  border-width: 0;
package/build/components/custom-select/custom-select.css CHANGED
@@ -1110,6 +1110,7 @@ summary[aria-disabled=true]) {
1110
1110
  inset-block-start: calc((var(--db-spacing-fixed-xs) + var(--db-base-body-icon-font-size-xs)) * var(--db-label-visible-above, 1) + var(--db-sizing-md) / 2);
1111
1111
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
1112
1112
  transform: translateY(-50%);
1113
+ z-index: 1;
1113
1114
  }
1114
1115
  .db-custom-select::before {
1115
1116
  margin-inline-end: var(--db-spacing-fixed-sm);