@deque/cauldron-styles 6.2.1-canary.a9b35607 → 6.2.1-canary.b5fd4b7f

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 (2) hide show
  1. package/dist/index.css +1296 -1071
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -342,1375 +342,1515 @@ p {
342
342
  border-left-color: var(--white);
343
343
  }
344
344
 
345
- :root {
346
- --alert-warning-background-color: #d93251;
347
- --alert-warning-header-text-color: #fff;
348
-
349
- --alert-border-color: var(--accent-primary);
350
- --alert-warning-border-color: var(--accent-error);
351
-
352
- --alert-icon-color: var(--accent-primary);
353
- --alert-warning-icon-color: var(--accent-error);
354
- }
355
-
356
- .cauldron--theme-dark {
357
- --alert-border-color: var(--accent-info);
358
- --alert-warning-border-color: var(--accent-danger);
359
-
360
- --alert-icon-color: var(--accent-info);
361
- --alert-warning-icon-color: var(--accent-danger);
345
+ .text--largest {
346
+ font-size: var(--text-size-largest);
362
347
  }
363
348
 
364
- .Alert .Dialog__header .Icon {
365
- padding-right: var(--space-smallest);
366
- color: var(--alert-icon-color);
349
+ .text--larger {
350
+ font-size: var(--text-size-larger);
367
351
  }
368
352
 
369
- .Alert .Dialog__inner {
370
- border: 3px solid var(--alert-border-color);
353
+ .text--large {
354
+ font-size: var(--text-size-large);
371
355
  }
372
356
 
373
- .Alert__warning .Dialog__header .Icon {
374
- color: var(--alert-warning-icon-color);
357
+ .text--large-medium {
358
+ font-size: var(--text-size-large-medium);
375
359
  }
376
360
 
377
- .Alert__warning .Dialog__inner {
378
- border: 3px solid var(--alert-warning-border-color);
361
+ .text--medium {
362
+ font-size: var(--text-size-medium);
379
363
  }
380
364
 
381
- .Alert .Dialog__footer {
382
- border-top: none;
383
- padding-top: 0;
384
- display: flex;
385
- justify-content: center;
386
- background-color: transparent;
365
+ .text--normal {
366
+ font-size: var(--text-size-normal);
387
367
  }
388
368
 
389
- .cauldron--theme-dark .Alert .Dialog__footer {
390
- border-top: none;
391
- background: transparent;
369
+ .text--small-medium {
370
+ font-size: var(--text-small-medium);
392
371
  }
393
372
 
394
- .FadeIn,
395
- .FadeIn--flex.FadeIn {
396
- opacity: 1;
397
- transition: opacity 400ms;
373
+ .text--small {
374
+ font-size: var(--text-size-small);
398
375
  }
399
376
 
400
- .FadeIn--flex {
401
- display: flex;
402
- opacity: 0;
403
- transition: opacity 400ms;
377
+ .text--smaller {
378
+ font-size: var(--text-size-smaller);
404
379
  }
405
380
 
406
- :root {
407
- --button-background-color-primary: var(--accent-primary);
408
- --button-background-color-primary-disabled: #79a7d9;
409
- --button-outline-color-primary: var(--button-background-color-primary);
410
- --button-background-color-primary-active: var(--accent-primary-active);
411
-
412
- --button-background-color-secondary: var(--gray-20);
413
- --button-background-color-secondary-disabled: var(--gray-30);
414
- --button-outline-color-secondary: var(--gray-90);
415
- --button-background-color-secondary-active: var(--gray-30);
416
-
417
- --button-background-color-error: var(--error);
418
- --button-background-color-error-disabled: #db6379;
419
- --button-background-color-error-active: var(--accent-error-active);
420
- --button-outline-color-error: var(--error);
421
-
422
- --button-text-color-dark: var(--gray-90);
423
- --button-text-color-light: var(--white);
424
- --button-focus-ring-color: var(--focus-light);
425
- --button-thin-height: 23px;
426
-
427
- --button-height: 36px;
381
+ .text--smallest {
382
+ font-size: var(--text-size-smallest);
428
383
  }
429
384
 
430
- .Button--primary,
431
- .Button--secondary,
432
- .Button--clear,
433
- .Button--error {
434
- border-radius: 3px;
435
- border: 1px solid transparent;
436
- font-size: var(--text-size-small);
437
- box-sizing: border-box;
438
- padding: 0 16px;
439
- position: relative;
440
- text-align: center;
441
- min-height: var(--button-height);
442
- min-width: 100px;
443
- display: inline-grid;
444
- grid-auto-flow: column;
445
- align-items: center;
446
- justify-items: center;
447
- gap: 8px;
385
+ .weight--thin {
386
+ font-weight: var(--font-weight-thin);
448
387
  }
449
388
 
450
- .Button--tag {
451
- position: relative;
389
+ .weight--light {
390
+ font-weight: var(--font-weight-light);
452
391
  }
453
392
 
454
- button.Link {
455
- cursor: pointer;
456
- font-size: inherit;
393
+ .weight--normal {
394
+ font-weight: var(--font-weight-normal);
457
395
  }
458
396
 
459
- .Button--primary:focus,
460
- .Button--secondary:focus,
461
- .Button--clear:focus,
462
- .Button--error:focus {
463
- outline: none;
397
+ .weight--medium {
398
+ font-weight: var(--font-weight-medium);
464
399
  }
465
400
 
466
- .Button--primary:before,
467
- .Button--secondary:before,
468
- .Button--clear:before,
469
- .Button--error:before,
470
- .Button--tag:before {
471
- content: '';
472
- position: absolute;
473
- top: -2px;
474
- right: -2px;
475
- bottom: -2px;
476
- left: -2px;
477
- border-radius: 3px;
478
- pointer-events: none;
401
+ .weight--bold {
402
+ font-weight: var(--font-weight-bold);
479
403
  }
480
404
 
481
- .Button--tag:before {
482
- border-radius: 11px;
405
+ .weight--ultra-bold {
406
+ font-weight: var(--font-weight-ultra-bold);
483
407
  }
484
408
 
485
- .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
486
- box-shadow: 0 0 0 1px var(--button-outline-color-primary);
409
+ .text--align-left {
410
+ text-align: left !important;
411
+ justify-content: left !important;
487
412
  }
488
413
 
489
- .Button--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
490
- box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
414
+ .text--align-center {
415
+ text-align: center !important;
416
+ justify-content: center !important;
491
417
  }
492
418
 
493
- .Button--error:not([disabled]):not([aria-disabled='true']):hover:before {
494
- box-shadow: 0 0 0 1px var(--button-outline-color-error);
419
+ .text--align-right {
420
+ text-align: right !important;
421
+ justify-content: right !important;
495
422
  }
496
423
 
497
- .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
498
- box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
424
+ body .is--hidden {
425
+ display: none;
499
426
  }
500
427
 
501
- .Button--primary:focus:before,
502
- .Button--secondary:focus:before,
503
- .Button--error:focus:before {
504
- box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
428
+ .is--flex-row {
429
+ display: flex;
430
+ align-items: center;
505
431
  }
506
432
 
507
- .Button--primary {
508
- background-color: var(--button-background-color-primary);
509
- color: var(--button-text-color-light);
433
+ ul.semantic-only {
434
+ margin: 0;
435
+ padding: 0;
436
+ list-style-type: none;
510
437
  }
511
438
 
512
- .Button--primary[aria-disabled='true'],
513
- .Button--primary[disabled] {
514
- background-color: var(--button-background-color-primary-disabled);
439
+ :root {
440
+ --field-background-color: var(--white);
441
+ --field-content-color: var(--text-color-base);
442
+ --field-border-color: var(--gray-40);
443
+ --field-border-color-underline: var(--gray-80);
444
+ --field-border-color-hover: var(--gray-90);
445
+ --field-border-color-focus: var(--accent-primary);
446
+ --field-border-color-focus-hover: var(--accent-primary-active);
447
+ --field-border-color-focus-glow: rgba(60, 122, 174, 0.7);
448
+ --field-border-color-error: var(--accent-error);
449
+ --field-border-color-error-hover: #c42f41;
450
+ --field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
451
+ --field-border-color-disabled: rgba(204, 204, 204, 0.25);
452
+ --field-background-color-disabled: var(--light-workspace-color);
453
+ --field-placeholder-color: var(--gray-50);
454
+ --field-required-text-color: var(--gray-60);
455
+ --field-label-text-color: var(--gray-90);
456
+ --field-label-error-text-color: var(--error);
457
+ --field-label-description-text-color: var(--gray-60);
458
+ --field-icon-inactive-color: var(--gray-90);
459
+ --field-icon-active-color: rgba(60, 122, 174, 0.25);
460
+ --field-icon-error-active-color: rgba(217, 50, 81, 0.25);
461
+ --field-icon-checked-color: var(--accent-primary);
462
+ --field-icon-checked-disabled-color: var(--accent-primary-dsiabled, #78a6d8);
463
+ --field-icon-unchecked-disabled-color: var(--gray-40);
464
+ --field-icon-focus-color: var(--focus-light);
465
+ --field-error-text-color: var(--error);
466
+ --field-error-border-color: var(--error);
467
+ --field-listbox-selected-background-color: var(--gray-50);
468
+ --field-listbox-selected-text-color: #fff;
469
+ --field-font-size: var(--text-size-small);
470
+ --input-min-width: 250px;
471
+ --checkbox-size: var(--icon-size);
472
+ --radio-size: var(--icon-size);
515
473
  }
516
474
 
517
- .Button--primary:not([disabled]):not([aria-disabled='true']):active {
518
- background: var(--button-background-color-primary-active);
475
+ .cauldron--theme-dark {
476
+ --field-background-color: var(--accent-medium);
477
+ --field-content-color: var(--white);
478
+ --field-border-color: #74818b;
479
+ --field-border-color-hover: var(--accent-info-light);
480
+ --field-border-color-focus: var(--accent-info);
481
+ --field-border-color-focus-hover: var(--accent-info-light);
482
+ --field-border-color-focus-glow: var(--accent-info);
483
+ --field-border-color-error: var(--accent-danger);
484
+ --field-border-color-error-hover: #fea7a6;
485
+ --field-background-color-disabled: #5d676f;
486
+ --field-placeholder-color: #8c9fab;
487
+ --field-required-text-color: var(--white);
488
+ --field-label-text-color: var(--white);
489
+ --field-label-error-text-color: var(--error);
490
+ --field-label-description-text-color: var(--accent-light);
491
+ --field-icon-inactive-color: var(--white);
492
+ --field-icon-active-color: rgba(212, 221, 224, 0.25);
493
+ --field-icon-error-active-color: rgba(254, 109, 107, 0.25);
494
+ --field-icon-checked-color: var(--accent-light);
495
+ --field-icon-checked-disabled-color: var(--stroke-dark);
496
+ --field-icon-unchecked-disabled-color: var(--stroke-dark);
497
+ --field-icon-focus-color: var(--focus-dark);
498
+ --field-error-text-color: var(--error);
499
+ --field-error-border-color: var(--error);
500
+ --field-listbox-selected-background-color: var(--accent-light);
501
+ --field-listbox-selected-text-color: var(--accent-medium);
519
502
  }
520
503
 
521
- .Button--secondary {
522
- background-color: var(--button-background-color-secondary);
523
- color: var(--button-text-color-dark);
504
+ input,
505
+ select,
506
+ textarea,
507
+ [role='menuitemcheckbox'],
508
+ [role='menuitemradio'],
509
+ [role='textbox'],
510
+ [role='listbox'],
511
+ [role='spinbutton'] {
512
+ width: 100%;
524
513
  border: 1px solid var(--field-border-color);
514
+ border-bottom: 1px solid var(--field-border-color-underline);
515
+ margin-bottom: var(--space-half);
516
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
517
+ background-color: var(--field-background-color);
525
518
  }
526
519
 
527
- .Button--secondary[aria-disabled='true'],
528
- .Button--secondary[disabled] {
529
- color: var(--disabled);
530
- background-color: var(--button-background-color-secondary-disabled);
520
+ .cauldron--theme-dark input,
521
+ select,
522
+ textarea,
523
+ [role='menuitemcheckbox'],
524
+ [role='menuitemradio'],
525
+ [role='textbox'],
526
+ [role='listbox'],
527
+ [role='spinbutton'] {
528
+ border: 1px solid var(--field-border-color);
531
529
  }
532
530
 
533
- .Button--secondary:not([disabled]):not([aria-disabled='true']):active {
534
- background-color: var(--button-background-color-secondary-active);
531
+ input:focus,
532
+ select:focus,
533
+ textarea:focus,
534
+ [role='menuitemcheckbox']:focus,
535
+ [role='menuitemradio']:focus,
536
+ [role='textbox']:focus,
537
+ [role='listbox']:focus,
538
+ [role='spinbutton']:focus {
539
+ outline: 0;
540
+ border: 1px solid var(--field-border-color-focus);
541
+ box-shadow: 0 0 0 1px var(--field-border-color-focus),
542
+ 0 0 5px var(--field-border-color-focus-glow),
543
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
535
544
  }
536
545
 
537
- .Button--error {
538
- background-color: var(--error);
539
- box-shadow: none;
540
- color: var(--button-text-color-light);
541
- --button-hover-outline-color: var(--error);
546
+ input:hover,
547
+ select:hover,
548
+ textarea:hover,
549
+ [role='menuitemcheckbox']:hover,
550
+ [role='menuitemradio']:hover,
551
+ [role='textbox']:hover,
552
+ [role='listbox']:hover,
553
+ [role='spinbutton']:hover {
554
+ border: 1px solid var(--field-border-color-hover);
542
555
  }
543
556
 
544
- .Button--error[aria-disabled='true'],
545
- .Button--error[disabled] {
546
- color: var(--button-text-color-light);
547
- background-color: var(--button-background-color-error-disabled);
557
+ input:focus:hover,
558
+ select:focus:hover,
559
+ textarea:focus:hover,
560
+ [role='menuitemcheckbox']:focus:hover,
561
+ [role='menuitemradio']:focus:hover,
562
+ [role='textbox']:focus:hover,
563
+ [role='listbox']:focus:hover,
564
+ [role='spinbutton']:focus:hover {
565
+ border: 1px solid var(--field-border-color-focus-hover);
566
+ box-shadow: 0 0 0 1px var(--field-border-color-focus-hover),
567
+ 0 0 5px var(--field-border-color-focus-glow),
568
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
548
569
  }
549
570
 
550
- .Button--error:not([disabled]):not([aria-disabled='true']):active {
551
- background-color: var(--button-background-color-error-active);
571
+ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
572
+ color: var(--field-placeholder-color);
573
+ font-style: italic;
552
574
  }
553
575
 
554
- .Button--tag[aria-disabled='true'],
555
- .Button--tag[disabled] {
556
- color: var(--disabled);
576
+ input::placeholder,
577
+ textarea::placeholder {
578
+ color: var(--field-placeholder-color);
579
+ font-style: italic;
557
580
  }
558
581
 
559
- .Button--primary .Icon,
560
- .Button--secondary .Icon,
561
- .Button--clear .Icon,
562
- .Button--error .Icon {
563
- margin: 0 -4px;
582
+ input.Field--has-error,
583
+ select.Field--has-error,
584
+ textarea.Field--has-error,
585
+ [role='menuitemcheckbox'].Field--has-error,
586
+ [role='menuitemradio'].Field--has-error,
587
+ [role='textbox'].Field--has-error,
588
+ [role='listbox'].Field--has-error,
589
+ [role='spinbutton'].Field--has-error {
590
+ border: 1px solid var(--field-border-color-error);
591
+ box-shadow: 0 0 0 1px var(--field-border-color-error),
592
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
564
593
  }
565
594
 
566
- .Button--thin .Icon svg {
567
- width: calc(var(--button-thin-height) - 8px);
568
- height: calc(var(--button-thin-height) - 8px);
595
+ .Checkbox__overlay.Field--has-error {
596
+ color: var(--field-border-color-error);
569
597
  }
570
598
 
571
- .DefinitionButton {
572
- display: inline;
573
- vertical-align: baseline;
574
- position: relative;
599
+ .Icon--checkbox-unchecked.Checkbox__overlay:active.Field--has-error:not(
600
+ .Checkbox__overlay--disabled
601
+ ) {
602
+ background-color: var(--field-icon-error-active-color);
575
603
  }
576
604
 
577
- .DefinitionButton button {
578
- background-color: transparent;
579
- color: var(--text-color-base);
580
- font-weight: var(--font-weight-normal);
581
- border-bottom: 1px dotted;
582
- display: inline-block;
583
- margin: 0 2px;
584
- padding: 0;
585
- font-size: inherit;
586
- vertical-align: baseline;
587
- cursor: auto;
588
- -moz-user-select: text;
589
- user-select: text;
605
+ input.Field--has-error:hover,
606
+ select.Field--has-error:hover,
607
+ textarea.Field--has-error:hover,
608
+ [role='menuitemcheckbox'].Field--has-error:hover,
609
+ [role='menuitemradio'].Field--has-error:hover,
610
+ [role='textbox'].Field--has-error:hover,
611
+ [role='listbox'].Field--has-error:hover,
612
+ [role='spinbutton'].Field--has-error:hover {
613
+ border-color: var(--field-border-color-error-hover);
590
614
  }
591
615
 
592
- .Button--thin {
593
- min-height: var(--button-thin-height);
594
- min-width: 100px;
595
- font-size: var(--text-size-smallest);
596
- padding: 0 16px;
616
+ input.Field--has-error:focus,
617
+ select.Field--has-error:focus,
618
+ textarea.Field--has-error:focus,
619
+ [role='menuitemcheckbox'].Field--has-error:focus,
620
+ [role='menuitemradio'].Field--has-error:focus,
621
+ [role='textbox'].Field--has-error:focus,
622
+ [role='listbox'].Field--has-error:focus,
623
+ [role='spinbutton'].Field--has-error:focus {
624
+ border: 1px solid var(--field-border-color-error);
625
+ box-shadow: 0 0 0 1px var(--field-border-color-error),
626
+ 0 0 5px var(--field-border-color-error-focus-glow),
627
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
597
628
  }
598
629
 
599
- [class*='Button--'] + [class*='Button--'] {
600
- margin-left: var(--space-smallest);
630
+ input.Field--has-error:focus:hover,
631
+ select.Field--has-error:focus:hover,
632
+ textarea.Field--has-error:focus:hover,
633
+ [role='menuitemcheckbox'].Field--has-error:focus:hover,
634
+ [role='menuitemradio'].Field--has-error:focus:hover,
635
+ [role='textbox'].Field--has-error:focus:hover,
636
+ [role='listbox'].Field--has-error:focus:hover,
637
+ [role='spinbutton'].Field--has-error:focus:hover {
638
+ border-color: var(--field-border-color-error-hover);
601
639
  }
602
640
 
603
- /* Dark Theme */
641
+ [role='listbox'] > li,
642
+ [role='listbox'] > [role='group'] > li {
643
+ list-style-type: none;
644
+ }
604
645
 
605
- .cauldron--theme-dark {
606
- --button-background-color-primary: var(--accent-medium);
607
- --button-background-color-primary-disabled: var(--accent-medium);
608
- --button-background-color-secondary: var(--accent-medium);
609
- --button-background-color-secondary-disabled: var(--accent-medium);
610
- --button-background-color-error-disabled: var(--accent-medium);
646
+ [role='listbox']:focus-within > li.ListboxOption--active,
647
+ [role='listbox']:focus-within > [role='group'] > li.ListboxOption--active {
648
+ box-shadow: 0 0 0 2px var(--field-icon-focus-color);
649
+ }
611
650
 
612
- --button-background-color-primary-active: #a7e9f7;
613
- --button-background-color-secondary-active: var(--accent-light);
614
- --button-background-color-error-active: #fea7a6;
651
+ [role='listbox']
652
+ li[role='option']:is([aria-selected='true'], [aria-checked='true']) {
653
+ background-color: var(--field-listbox-selected-background-color);
654
+ color: var(--field-listbox-selected-text-color);
655
+ }
615
656
 
616
- --button-focus-ring-color: var(--focus-dark);
617
- --field-label-text-color: var(--accent-light);
618
- --field-border-color-error: var(--accent-danger);
619
- --error: var(--accent-danger);
657
+ .Error {
658
+ color: var(--field-error-text-color);
659
+ text-align: left;
660
+ font-size: var(--text-size-smallest);
661
+ font-weight: var(--font-weight-normal);
620
662
  }
621
663
 
622
- .cauldron--theme-dark .Button--primary {
623
- border: 2px solid var(--accent-info);
664
+ .Checkbox__wrap .Error {
665
+ margin-top: var(--space-half);
666
+ border-top: 1px solid var(--field-error-border-color);
667
+ margin-left: calc(var(--icon-size) + 2px + var(--space-half));
668
+ padding: var(--space-half) 0;
624
669
  }
625
670
 
626
- .cauldron--theme-dark .Button--secondary {
627
- color: var(--accent-light);
628
- border: 2px solid var(--accent-light);
671
+ .Field {
672
+ display: block;
673
+ position: relative;
674
+ box-sizing: border-box;
675
+ margin-bottom: var(--space-small);
629
676
  }
630
677
 
631
- .cauldron--theme-dark .Button--error {
632
- background-color: var(--accent-medium);
633
- color: var(--white);
634
- border: 2px solid var(--accent-danger);
678
+ .Field.is--flex-row {
679
+ align-items: center;
635
680
  }
636
681
 
637
- .cauldron--theme-dark .Button--primary[aria-disabled='true'],
638
- .cauldron--theme-dark .Button--primary[disabled],
639
- .cauldron--theme-dark .Button--secondary[aria-disabled='true'],
640
- .cauldron--theme-dark .Button--secondary[disabled],
641
- .cauldron--theme-dark .Button--error[aria-disabled='true'],
642
- .cauldron--theme-dark .Button--error[disabled],
643
- .cauldron--theme-dark .Button--tag[disabled] {
644
- color: var(--dark-workspace-color);
682
+ .Field.is--flex-row .Field__label {
683
+ margin-bottom: 0;
645
684
  }
646
685
 
647
- .cauldron--theme-dark
648
- .Button--primary:not([disabled]):not([aria-disabled='true']):active,
649
- .cauldron--theme-dark
650
- .Button--secondary:not([disabled]):not([aria-disabled='true']):active {
651
- color: var(--accent-medium);
686
+ .Checkbox__wrap,
687
+ .Radio__wrap {
688
+ margin-bottom: var(--space-smallest);
652
689
  }
653
690
 
654
- .cauldron--theme-dark
655
- .Button--error:not([disabled]):not([aria-disabled='true']):active {
656
- background-color: #fea7a6;
657
- color: var(--accent-medium);
691
+ .Checkbox__wrap:last-of-type,
692
+ .Radio__wrap:last-of-type {
693
+ margin-bottom: 0;
658
694
  }
659
695
 
660
- .cauldron--theme-dark button.Link {
661
- color: var(--accent-light);
696
+ .Radio--inline .Radio__wrap {
697
+ margin-bottom: 0;
662
698
  }
663
699
 
664
- .cauldron--theme-dark button.Link:hover {
665
- color: var(--white);
700
+ .Checkbox,
701
+ .Radio {
702
+ box-sizing: border-box;
703
+ position: relative;
704
+ flex-direction: row-reverse;
705
+ justify-content: flex-end;
706
+ flex-wrap: nowrap;
666
707
  }
667
708
 
668
- .cauldron--theme-dark
669
- .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
670
- box-shadow: 0 0 0 1px var(--dark-workspace-color),
671
- 0 0 0 2px var(--accent-info);
709
+ .Radio--inline {
710
+ display: flex;
711
+ align-items: baseline;
712
+ flex-wrap: wrap;
713
+ gap: var(--space-small);
672
714
  }
673
715
 
674
- .cauldron--theme-dark
675
- .Button--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
676
- box-shadow: 0 0 0 1px var(--dark-workspace-color),
677
- 0 0 0 2px var(--accent-light);
716
+ .Checkbox + .Field__labelDescription,
717
+ .Radio + .Field__labelDescription {
718
+ margin-top: var(--space-half);
719
+ margin-bottom: var(--space-small);
678
720
  }
679
721
 
680
- .cauldron--theme-dark
681
- .Button--error:not([disabled]):not([aria-disabled='true']):hover:before {
682
- box-shadow: 0 0 0 1px var(--dark-workspace-color),
683
- 0 0 0 2px var(--accent-danger);
722
+ .Checkbox__wrap:last-of-type .Checkbox + .Field__labelDescription,
723
+ .Radio__wrap:last-of-type .Radio + .Field__labelDescription {
724
+ margin-bottom: 0;
684
725
  }
685
726
 
686
- .cauldron--theme-dark
687
- .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
688
- box-shadow: 0 0 0 1px var(--dark-workspace-color),
689
- 0 0 0 2px var(--accent-info);
727
+ .Field__label {
728
+ display: flex;
729
+ align-items: center;
730
+ text-align: left;
731
+ color: var(--field-label-text-color);
732
+ margin-bottom: var(--space-half);
733
+ font-size: var(--text-size-small);
734
+ font-weight: var(--font-weight-medium);
735
+ cursor: default;
690
736
  }
691
737
 
692
- :root {
693
- /* Primary */
694
- --icon-button-primary-color: var(--button-text-color-light);
695
- --icon-button-background-color-primary: var(
696
- --button-background-color-primary
697
- );
698
- --icon-button-background-color-primary-active: var(
699
- --button-background-color-primary-active
700
- );
701
- --icon-button-outline-color-primary: var(--button-outline-color-primary);
702
-
703
- --icon-button-large-height: var(--button-height);
704
-
705
- /* Secondary */
706
- --icon-button-secondary-color: var(--button-text-color-dark);
707
- --icon-button-background-color-secondary: var(
708
- --button-background-color-secondary
709
- );
710
- --icon-button-background-color-secondary-active: var(
711
- --button-background-color-secondary-active
712
- );
713
- --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
714
- --icon-button-border-color-secondary: var(--gray-40);
715
-
716
- /* Error */
717
- --icon-button-background-color-error: var(--button-background-color-error);
718
- --icon-button-outline-color-error: var(--button-outline-color-error);
719
- --icon-button-background-color-error-active: var(
720
- --button-background-color-error-active
721
- );
722
-
723
- /* Deprecated variables */
724
- --icon-button-content-color-light-disabled: #ccc;
725
- --icon-button-background-color-light: #dadada;
726
- --icon-button-background-color-light-active: #c2c2c2;
727
- --icon-button-outline-color-light: var(--icon-button-background-color-light);
738
+ .Field__label + .Checkbox__wrap {
739
+ margin-top: var(--space-half);
740
+ }
728
741
 
729
- --icon-button-content-color-dark-disabled: #fff 40%;
730
- --icon-button-background-color-dark: var(--accent-medium);
731
- --icon-button-background-color-dark-disabled: var(--accent-medium);
732
- --icon-button-background-color-dark-active: var(--accent-dark);
733
- --icon-button-outline-color-dark: var(--icon-button-background-color-dark);
734
- --icon-button-background-color-secondary-disabled: var(
735
- --button-background-color-secondary-disabled
736
- );
737
- --icon-button-background-color-error-disabled: var(
738
- --button-background-color-error-disabled
739
- );
742
+ .Field__label + [role^='radiogroup'] {
743
+ margin-top: var(--space-smallest);
740
744
  }
741
745
 
742
- .IconButton {
743
- position: relative;
744
- display: inline-flex;
745
- justify-content: center;
746
- align-content: center;
746
+ .Checkbox__label,
747
+ .Radio__label {
748
+ display: flex;
747
749
  align-items: center;
748
- height: var(--button-thin-height);
749
- width: var(--button-thin-height);
750
- border-radius: 3px;
751
- border: 1px solid transparent;
752
- background-color: var(--icon-button-background-color);
753
- color: var(--icon-button-icon-color);
754
- margin: 2px;
755
- padding: 0;
750
+ text-align: left;
751
+ font-weight: var(--font-weight-normal);
752
+ cursor: default;
753
+ margin-bottom: unset;
756
754
  }
757
755
 
758
- /* Ensure both <a> and <button> IconButtons are aligned correctly. See #846. */
759
-
760
- a.IconButton {
761
- vertical-align: middle;
762
- line-height: unset;
756
+ .Field__required-text {
757
+ flex: 1;
758
+ text-align: right;
759
+ margin-left: var(--space-large);
760
+ font-style: italic;
761
+ font-weight: var(--font-weight-thin);
762
+ color: var(--field-required-text-color);
763
+ font-size: var(--text-size-smaller);
763
764
  }
764
765
 
765
- .IconButton .Icon {
766
- height: var(--space-small);
767
- width: var(--space-small);
768
- pointer-events: none;
766
+ .Field__required-text::before {
767
+ content: ' ';
768
+ color: var(--field-content-color);
769
769
  }
770
770
 
771
- .IconButton .Icon svg {
772
- width: 100%;
773
- height: 100%;
771
+ .Field__label--has-error .Field__required-text {
772
+ color: var(--field-label-error-text-color);
774
773
  }
775
774
 
776
- .IconButton:focus {
777
- outline: none;
775
+ .Field__label--inline {
776
+ display: inline-block;
777
+ text-align: left;
778
+ font-size: var(--text-size-smaller);
778
779
  }
779
780
 
780
- .IconButton:before {
781
- content: '';
782
- position: absolute;
783
- top: -2px;
784
- right: -2px;
785
- bottom: -2px;
786
- left: -2px;
787
- border-radius: 3px;
788
- pointer-events: none;
781
+ .Field__text-input {
782
+ padding: var(--space-smallest);
783
+ box-sizing: border-box;
784
+ font-size: var(--field-font-size);
785
+ color: var(--field-content-color);
786
+ min-width: min(var(--input-min-width), 100%);
789
787
  }
790
788
 
791
- .IconButton--large {
792
- height: var(--icon-button-large-height);
793
- width: var(--icon-button-large-height);
789
+ .Field__text-input[disabled],
790
+ .Field__text-input[aria-disabled='true'] {
791
+ border: 1px solid var(--field-border-color-disabled);
792
+ background-color: var(--field-background-color-disabled);
794
793
  }
795
794
 
796
- .IconButton--secondary:is([aria-disabled='true'], [disabled]),
797
- .IconButton--secondary:is([aria-disabled='true'], [disabled]):active {
798
- color: var(--disabled);
799
- background-color: var(--button-background-color-secondary-disabled);
800
- cursor: default;
795
+ .Field__textarea {
796
+ display: block;
797
+ min-height: 56px;
798
+ font-size: var(--field-font-size);
799
+ min-width: min(var(--input-min-width), 100%);
800
+ padding: var(--space-half);
801
+ max-width: 500px;
802
+ color: var(--field-content-color);
801
803
  }
802
804
 
803
- .IconButton--primary:is([aria-disabled='true'], [disabled]),
804
- .IconButton--primary:is([aria-disabled='true'], [disabled]):active {
805
- background-color: var(--button-background-color-primary-disabled);
806
- cursor: default;
805
+ .Field__textarea[disabled],
806
+ .Field__textarea[aria-disabled='true'] {
807
+ background: var(--field-background-color-disabled);
808
+ border: 1px solid var(--field-border-color);
807
809
  }
808
810
 
809
- .IconButton--error:is([aria-disabled='true'], [disabled]),
810
- .IconButton--error:is([aria-disabled='true'], [disabled]):active {
811
- color: var(--button-text-color-light);
812
- background-color: var(--button-background-color-error-disabled);
811
+ .Field__labelDescription {
812
+ flex-basis: 100%;
813
+ color: var(--field-label-description-text-color);
814
+ font-size: var(--text-size-small);
815
+ font-weight: var(--font-weight-normal);
816
+ line-height: 1;
817
+ margin-top: var(--space-half);
813
818
  cursor: default;
819
+ display: flex;
814
820
  }
815
821
 
816
- .IconButton:focus:before {
817
- box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
822
+ .Checkbox__wrap .Field__labelDescription {
823
+ margin-left: calc(var(--checkbox-size) + 2px + var(--space-half));
818
824
  }
819
825
 
820
- .IconButton--primary {
821
- background-color: var(--icon-button-background-color-primary);
822
- color: var(--icon-button-primary-color);
826
+ .Radio__wrap .Field__labelDescription {
827
+ margin-left: calc(var(--radio-size) + 2px + var(--space-half));
823
828
  }
824
829
 
825
- .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
826
- box-shadow: 0 0 0 1px var(--icon-button-outline-color-primary);
830
+ .Field__labelDescription + .Error {
831
+ margin-top: var(--space-smallest);
827
832
  }
828
833
 
829
- .IconButton--primary:active {
830
- background-color: var(--icon-button-background-color-primary-active);
834
+ .Radio__overlay,
835
+ .Checkbox__overlay {
836
+ border: 1px solid transparent;
837
+ box-sizing: border-box;
838
+ cursor: pointer;
839
+ color: var(--field-icon-inactive-color);
840
+ margin-right: var(--space-half);
841
+ align-self: flex-start;
831
842
  }
832
843
 
833
- .IconButton--secondary {
834
- border: 1px solid var(--icon-button-border-color-secondary);
835
- background-color: var(--icon-button-background-color-secondary);
836
- color: var(--icon-button-secondary-color);
844
+ .Checkbox__overlay {
845
+ border-radius: 5px;
837
846
  }
838
847
 
839
- .IconButton--secondary:not([disabled]):not(
840
- [aria-disabled='true']
841
- ):hover:before {
842
- box-shadow: 0 0 0 1px var(--icon-button-outline-color-secondary);
848
+ .Radio__overlay {
849
+ border-radius: 50%;
843
850
  }
844
851
 
845
- .IconButton--secondary:active {
846
- background-color: var(--icon-button-background-color-secondary-active);
852
+ .Radio__overlay svg,
853
+ .Checkbox__overlay svg {
854
+ pointer-events: none;
847
855
  }
848
856
 
849
- .IconButton--error {
850
- background-color: var(--icon-button-background-color-error);
851
- color: var(--button-text-color-light);
857
+ .Radio__overlay svg {
858
+ height: var(--radio-size);
859
+ width: var(--radio-size);
852
860
  }
853
861
 
854
- .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
855
- box-shadow: 0 0 0 1px var(--icon-button-outline-color-error);
862
+ .Checkbox__overlay svg {
863
+ height: var(--checkbox-size);
864
+ width: var(--checkbox-size);
856
865
  }
857
866
 
858
- .IconButton--error:active {
859
- background-color: var(--icon-button-background-color-error-active);
867
+ .Radio__overlay:active:not(.Radio__overlay--disabled),
868
+ .Checkbox__overlay:active:not(.Checkbox__overlay--disabled) {
869
+ background-color: var(--field-icon-active-color);
860
870
  }
861
871
 
862
- /* Dark Theme */
872
+ .Radio input[type='radio'] {
873
+ position: absolute;
874
+ opacity: 0;
875
+ top: 8px;
876
+ left: 8px;
877
+ -webkit-appearance: none;
878
+ -moz-appearance: none;
879
+ appearance: none;
880
+ }
863
881
 
864
- .cauldron--theme-dark {
865
- --icon-button-icon-color: var(--white);
866
- --icon-button-outline-shadow-color: var(--accent-medium);
867
- --icon-button-disabled-color: var(--dark-workspace-color);
868
- --icon-button-active-color: var(--accent-medium);
882
+ .Checkbox__overlay.Checkbox__overlay--focused,
883
+ .Radio__overlay.Radio__overlay--focused {
884
+ box-shadow: 0 0 0 2px var(--field-icon-focus-color);
885
+ }
869
886
 
870
- /* Primary */
871
- --icon-button-primary-color: var(--white);
872
- --icon-button-background-color-primary: var(--accent-medium);
873
- --icon-button-background-color-primary-active: var(--accent-info-active);
874
- --icon-button-outline-color-primary: var(--accent-info);
875
- --icon-button-border-color-primary: var(--accent-info);
887
+ .Radio__overlay.Icon--radio-checked,
888
+ .Checkbox__overlay.Icon--checkbox-checked {
889
+ color: var(--field-icon-checked-color);
890
+ }
876
891
 
877
- /* Secondary */
878
- --icon-button-border-color-secondary: var(--accent-light);
879
- --icon-button-background-color-secondary: var(--accent-medium);
880
- --icon-button-secondary-color: var(--white);
881
- --icon-button-background-color-secondary-active: var(--accent-light);
882
- --icon-button-outline-color-secondary: var(--accent-light);
883
-
884
- /* Error */
885
- --icon-button-background-color-error: var(--accent-medium);
886
- --icon-button-border-color-error: var(--accent-danger);
887
- --icon-button-outline-color-error: var(--accent-danger);
888
- --icon-button-background-color-error-active: var(
889
- --button-background-color-error-active
890
- );
891
- }
892
-
893
- .cauldron--theme-dark .IconButton--primary {
894
- border: 2px solid var(--icon-button-border-color-primary);
892
+ .Radio__overlay--disabled.Icon--radio-checked,
893
+ .Checkbox__overlay--disabled.Icon--checkbox-checked {
894
+ color: var(--field-icon-checked-disabled-color);
895
+ cursor: default;
895
896
  }
896
897
 
897
- .cauldron--theme-dark .IconButton--secondary {
898
- border-width: 2px;
898
+ .Checkbox__overlay--disabled.Icon--checkbox-unchecked,
899
+ .Radio__overlay--disabled.Icon--radio-unchecked {
900
+ color: var(--field-icon-unchecked-disabled-color);
901
+ cursor: default;
899
902
  }
900
903
 
901
- .cauldron--theme-dark .IconButton--error {
902
- border: 2px solid var(--icon-button-border-color-error);
904
+ .Field__label:hover ~ .Radio__overlay:not(.Radio__overlay--disabled),
905
+ .Radio__overlay:hover:not(.Radio__overlay--disabled) {
906
+ border: 1px solid currentColor;
903
907
  }
904
908
 
905
- .cauldron--theme-dark
906
- .IconButton--primary:is([aria-disabled='true'], [disabled]),
907
- .cauldron--theme-dark
908
- .IconButton--secondary:is([aria-disabled='true'], [disabled]),
909
- .cauldron--theme-dark
910
- .IconButton--error:is([aria-disabled='true'], [disabled]) {
911
- color: var(--icon-button-disabled-color);
909
+ .Checkbox input[type='checkbox'] {
910
+ position: absolute;
911
+ opacity: 0;
912
+ top: 8px;
913
+ left: 8px;
914
+ -webkit-appearance: none;
915
+ -moz-appearance: none;
916
+ appearance: none;
912
917
  }
913
918
 
914
- .cauldron--theme-dark .IconButton--primary:active,
915
- .cauldron--theme-dark .IconButton--secondary:active,
916
- .cauldron--theme-dark .IconButton--error:active {
917
- color: var(--icon-button-active-color);
919
+ .Field__label:hover ~ .Checkbox__overlay:not(.Checkbox__overlay--disabled),
920
+ .Checkbox__overlay:hover:not(.Checkbox__overlay--disabled) {
921
+ border: 1px solid currentColor;
918
922
  }
919
923
 
920
- .cauldron--theme-dark
921
- .IconButton:is([aria-disabled='true'], [disabled]):active {
922
- color: var(--icon-button-disabled-color);
924
+ .TextFieldWrapper {
925
+ --text-field-wrapper-border-color: var(--field-border-color);
926
+ --text-field-wrapper-background-color: var(--field-background-color);
927
+ --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
928
+ --text-field-wrapper-border-hover-color: var(
929
+ --field-border-color-focus-hover
930
+ );
931
+ --text-field-wrapper-border-focus-glow-color: var(
932
+ --field-border-color-focus-glow
933
+ );
934
+ --text-field-wrapper-error-border-color: var(--field-border-color-error);
935
+ --text-field-wrapper-error-focus-border-color: var(
936
+ --field-border-color-error-hover
937
+ );
938
+ --text-field-wrapper-error-focus-border-glow-color: var(
939
+ --field-border-color-focus-glow
940
+ );
941
+ --text-field-wrapper-font-size: var(--field-font-size);
942
+ --text-field-wrapper-font-color: var(--field-content-color);
923
943
  }
924
944
 
925
- .cauldron--theme-dark
926
- .IconButton--primary:not([disabled]):not(
927
- [aria-disabled='true']
928
- ):hover:before {
929
- box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
930
- 0 0 0 2px var(--icon-button-outline-color-primary);
945
+ .cauldron--theme-dark :where(.TextFieldWrapper) {
946
+ --text-field-wrapper-border-color: var(--field-border-color);
947
+ --text-field-wrapper-background-color: var(--field-background-color);
948
+ --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
949
+ --text-field-wrapper-border-hover-color: var(
950
+ --field-border-color-focus-hover
951
+ );
952
+ --text-field-wrapper-border-focus-glow-color: var(
953
+ --field-border-color-focus-glow
954
+ );
955
+ --text-field-wrapper-error-border-color: var(--field-border-color-error);
956
+ --text-field-wrapper-error-focus-border-color: var(
957
+ --field-border-color-error-hover
958
+ );
959
+ --text-field-wrapper-error-focus-border-glow-color: var(
960
+ --field-border-color-focus-glow
961
+ );
962
+ --text-field-wrapper-font-color: var(--field-content-color);
931
963
  }
932
964
 
933
- .cauldron--theme-dark
934
- .IconButton--secondary:not([disabled]):not(
935
- [aria-disabled='true']
936
- ):hover:before {
937
- box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
938
- 0 0 0 2px var(--icon-button-outline-color-secondary);
965
+ .TextFieldWrapper input:is(*, :focus, :hover) {
966
+ border: none;
967
+ box-shadow: none;
968
+ margin: initial;
969
+ padding: var(--space-smallest);
939
970
  }
940
971
 
941
- .cauldron--theme-dark
942
- .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
943
- box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
944
- 0 0 0 2px var(--icon-button-outline-color-error);
972
+ .TextFieldWrapper {
973
+ position: relative;
974
+ display: flex;
975
+ align-items: center;
976
+ border: 1px solid var(--text-field-wrapper-border-color);
977
+ border-bottom: 1px solid var(--field-border-color-underline);
978
+ margin-bottom: var(--space-half);
979
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
980
+ background-color: var(--text-field-wrapper-background-color);
945
981
  }
946
982
 
947
- .cauldron--theme-dark .IconButton:focus:before {
948
- box-shadow: 0 0 0 2px var(--icon-button-outline-shadow-color),
949
- 0 0 0 4px var(--button-focus-ring-color, --focus);
983
+ .cauldron--theme-dark .TextFieldWrapper {
984
+ border: 1px solid var(--text-field-wrapper-border-color);
950
985
  }
951
986
 
952
- :root {
953
- --dialog-background-color: #fff;
954
- --dialog-border-color: var(--gray-40);
955
- --dialog-header-background-color: var(--gray-20);
956
- --dialog-footer-background-color: var(--gray-20);
957
- --dialog-heading-text-color: var(--header-text-color-dark);
958
- --dialog-padding: var(--space-small);
959
- --dialog-header-height: 2.625rem;
960
- --dialog-close-button-size: var(--target-size-minimum);
987
+ .cauldron--theme-dark .TextFieldWrapper--error {
988
+ border: 1px solid var(--text-field-wrapper-error-border-color);
961
989
  }
962
990
 
963
- .cauldron--theme-dark {
964
- --dialog-background-color: var(--accent-medium);
965
- --dialog-border-color: var(--gray-20);
966
- --dialog-header-background-color: var(--accent-dark);
967
- --dialog-footer-background-color: var(--accent-dark);
968
- --dialog-heading-text-color: #fff;
991
+ .TextFieldWrapper:hover {
992
+ border-color: var(--text-field-wrapper-border-hover-color);
969
993
  }
970
994
 
971
- .Dialog {
972
- display: none;
973
- width: 100vw;
974
- height: 100vh;
975
- overflow-x: auto;
976
- position: fixed;
977
- top: 0;
978
- background-color: var(--scrim-background-color);
995
+ .TextFieldWrapper input {
996
+ font-size: var(--text-field-wrapper-font-size);
997
+ color: var(--text-field-wrapper-font-color);
979
998
  }
980
999
 
981
- .Dialog.Dialog--show {
982
- display: block;
1000
+ .TextFieldWrapper:focus-within {
1001
+ border: 1px solid var(--text-field-wrapper-border-focus-color);
1002
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-border-focus-color),
1003
+ 0 0 5px var(--text-field-wrapper-border-focus-glow-color),
1004
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
983
1005
  }
984
1006
 
985
- .Dialog__inner {
986
- width: 400px;
987
- max-width: 90%;
988
- left: 50%;
989
- top: 100px;
990
- display: flex;
991
- flex-direction: column;
992
- transform: translateX(-50%);
993
- background-color: var(--dialog-background-color);
994
- border: 1px solid var(--dialog-border-color);
995
- z-index: var(--z-index-dialog);
996
- position: relative;
997
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1007
+ .TextFieldWrapper--error {
1008
+ border: 1px solid var(--text-field-wrapper-error-border-color);
1009
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
1010
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
998
1011
  }
999
1012
 
1000
- .Dialog__header {
1001
- display: flex;
1002
- background-color: var(--dialog-header-background-color);
1003
- border-bottom: 1px solid var(--dialog-border-color);
1004
- align-items: center;
1005
- justify-content: space-between;
1006
- min-height: var(--dialog-header-height);
1007
- font-weight: var(--font-weight-bold);
1008
- padding: var(--space-smallest) 0;
1009
- gap: var(--space-smallest);
1013
+ .TextFieldWrapper--error:focus-within {
1014
+ border: 1px solid var(--text-field-wrapper-error-border-color);
1015
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
1016
+ 0 0 5px var(--field-border-color-error-focus-glow),
1017
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
1010
1018
  }
1011
1019
 
1012
- .Dialog__heading,
1013
- .Dialog__close {
1014
- margin: 0;
1015
- font-size: var(--text-size-small);
1020
+ .TextFieldWrapper--error:focus-within:hover {
1021
+ border: 1px solid var(--text-field-wrapper-error-border-color);
1022
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
1023
+ 0 0 5px var(--field-border-color-error-focus-glow),
1024
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
1016
1025
  }
1017
1026
 
1018
- .Dialog__heading {
1019
- display: flex;
1020
- align-items: center;
1021
- margin-left: var(--dialog-padding);
1027
+ .TextFieldWrapper--error:hover {
1028
+ border: 1px solid var(--text-field-wrapper-error-border-color);
1029
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
1030
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
1022
1031
  }
1023
1032
 
1024
- .Dialog__close {
1025
- color: var(--dialog-heading-text-color);
1026
- background-color: initial;
1027
- border: 1px solid var(--dialog-border-color);
1028
- border-radius: 3px;
1029
- padding: 0;
1030
- height: var(--dialog-close-button-size);
1031
- width: var(--dialog-close-button-size);
1032
- margin-right: var(--space-smallest);
1033
- flex-shrink: 0;
1034
- position: relative;
1033
+ .TextFieldWrapper:has(input:is([disabled], [aria-disabled='true'])),
1034
+ .TextFieldWrapper--disabled {
1035
+ background-color: var(--field-background-color-disabled);
1036
+ border: 1px solid var(--field-border-color);
1035
1037
  }
1036
1038
 
1037
- .Dialog__close:active {
1038
- background-color: var(--dialog-border-color);
1039
+ .TextFieldWrapper--diabled:focus-within {
1040
+ border: 1px solid var(--field-border-color);
1039
1041
  }
1040
1042
 
1041
- .Dialog__close:before {
1042
- content: '';
1043
- position: absolute;
1044
- top: -2px;
1045
- right: -2px;
1046
- bottom: -2px;
1047
- left: -2px;
1048
- border-radius: 4px;
1049
- pointer-events: none;
1043
+ .TextFieldWrapper--diabled:focus-within:hover {
1044
+ border: 1px solid var(--field-border-color);
1050
1045
  }
1051
1046
 
1052
- .cauldron--theme-dark .Dialog__close:before {
1053
- top: -3px;
1054
- right: -3px;
1055
- bottom: -3px;
1056
- left: -3px;
1047
+ .TextFieldWrapper--diabled:hover {
1048
+ border: 1px solid var(--field-border-color);
1057
1049
  }
1058
1050
 
1059
- .Dialog__close:is(:hover, :focus):before {
1060
- box-shadow: 0 0 0 1px var(--dialog-heading-text-color);
1061
- }
1051
+ :root {
1052
+ --alert-warning-background-color: #d93251;
1053
+ --alert-warning-header-text-color: #fff;
1062
1054
 
1063
- .Dialog__close svg {
1064
- /* match icon size with height/width of button */
1065
- --icon-size: 100%;
1066
- }
1055
+ --alert-border-color: var(--accent-primary);
1056
+ --alert-warning-border-color: var(--accent-error);
1067
1057
 
1068
- .cauldron--theme-dark .Dialog__close {
1069
- border-width: 2px;
1058
+ --alert-icon-color: var(--accent-primary);
1059
+ --alert-warning-icon-color: var(--accent-error);
1070
1060
  }
1071
1061
 
1072
- .Dialog__content {
1073
- padding: var(--dialog-padding);
1074
- }
1062
+ .cauldron--theme-dark {
1063
+ --alert-border-color: var(--accent-info);
1064
+ --alert-warning-border-color: var(--accent-danger);
1075
1065
 
1076
- .Dialog__content p:first-child {
1077
- margin-top: 0;
1066
+ --alert-icon-color: var(--accent-info);
1067
+ --alert-warning-icon-color: var(--accent-danger);
1078
1068
  }
1079
1069
 
1080
- .Dialog__content p:last-child {
1081
- margin-bottom: 0;
1070
+ .Alert .Dialog__header .Icon {
1071
+ padding-right: var(--space-smallest);
1072
+ color: var(--alert-icon-color);
1082
1073
  }
1083
1074
 
1084
- .Dialog__footer {
1085
- background-color: var(--dialog-footer-background-color);
1086
- border-top: 1px solid var(--dialog-border-color);
1087
- padding: var(--dialog-padding);
1075
+ .Alert .Dialog__inner {
1076
+ border: 3px solid var(--alert-border-color);
1088
1077
  }
1089
1078
 
1090
- /**
1091
- * style for info modal
1092
- */
1093
-
1094
- .Modal--info .Dialog__header {
1095
- background-color: transparent;
1079
+ .Alert__warning .Dialog__header .Icon {
1080
+ color: var(--alert-warning-icon-color);
1096
1081
  }
1097
1082
 
1098
- .Modal--info .Dialog__content {
1099
- display: flex;
1100
- flex-direction: column;
1101
- align-items: center;
1083
+ .Alert__warning .Dialog__inner {
1084
+ border: 3px solid var(--alert-warning-border-color);
1102
1085
  }
1103
1086
 
1104
- .Modal--info .Dialog__footer {
1087
+ .Alert .Dialog__footer {
1088
+ border-top: none;
1089
+ padding-top: 0;
1105
1090
  display: flex;
1106
1091
  justify-content: center;
1107
1092
  background-color: transparent;
1093
+ }
1094
+
1095
+ .cauldron--theme-dark .Alert .Dialog__footer {
1108
1096
  border-top: none;
1109
- padding-top: 0;
1097
+ background: transparent;
1110
1098
  }
1111
1099
 
1112
- /* Dark Theme */
1113
-
1114
- .cauldron--theme-dark .Dialog__inner {
1115
- color: var(--white);
1116
- border-width: 4px;
1100
+ .FadeIn,
1101
+ .FadeIn--flex.FadeIn {
1102
+ opacity: 1;
1103
+ transition: opacity 400ms;
1117
1104
  }
1118
1105
 
1119
- .cauldron--theme-dark .Dialog__header {
1120
- border-bottom: 1px solid var(--stroke-dark);
1106
+ .FadeIn--flex {
1107
+ display: flex;
1108
+ opacity: 0;
1109
+ transition: opacity 400ms;
1121
1110
  }
1122
1111
 
1123
- .cauldron--theme-dark .Dialog__footer {
1124
- border-top: 1px solid var(--stroke-dark);
1125
- }
1112
+ :root {
1113
+ --button-background-color-primary: var(--accent-primary);
1114
+ --button-background-color-primary-disabled: #79a7d9;
1115
+ --button-outline-color-primary: var(--button-background-color-primary);
1116
+ --button-background-color-primary-active: var(--accent-primary-active);
1126
1117
 
1127
- .cauldron--theme-dark .Dialog__header,
1128
- .cauldron--theme-dark .Dialog__footer {
1129
- color: var(--gray-20);
1130
- }
1118
+ --button-background-color-secondary: var(--gray-20);
1119
+ --button-background-color-secondary-disabled: var(--gray-30);
1120
+ --button-outline-color-secondary: var(--gray-90);
1121
+ --button-background-color-secondary-active: var(--gray-30);
1131
1122
 
1132
- .cauldron--theme-dark .Dialog__close {
1133
- color: var(--gray-20);
1123
+ --button-background-color-error: var(--error);
1124
+ --button-background-color-error-disabled: #db6379;
1125
+ --button-background-color-error-active: var(--accent-error-active);
1126
+ --button-outline-color-error: var(--error);
1127
+
1128
+ --button-text-color-dark: var(--gray-90);
1129
+ --button-text-color-light: var(--white);
1130
+ --button-focus-ring-color: var(--focus-light);
1131
+ --button-thin-height: 23px;
1132
+
1133
+ --button-height: 36px;
1134
1134
  }
1135
1135
 
1136
- .cauldron--theme-dark .Dialog__close:active {
1137
- color: var(--accent-medium);
1136
+ .Button--primary,
1137
+ .Button--secondary,
1138
+ .Button--clear,
1139
+ .Button--error {
1140
+ border-radius: 3px;
1141
+ border: 1px solid transparent;
1142
+ font-size: var(--text-size-small);
1143
+ box-sizing: border-box;
1144
+ padding: 0 16px;
1145
+ position: relative;
1146
+ text-align: center;
1147
+ min-height: var(--button-height);
1148
+ min-width: 100px;
1149
+ display: inline-grid;
1150
+ grid-auto-flow: column;
1151
+ align-items: center;
1152
+ justify-items: center;
1153
+ gap: 8px;
1138
1154
  }
1139
1155
 
1140
- .cauldron--theme-dark .Modal--info .Dialog__header,
1141
- .cauldron--theme-dark .Modal--info .Dialog__content,
1142
- .cauldron--theme-dark .Modal--info .Dialog__footer {
1143
- background-color: transparent;
1156
+ .Button--tag {
1157
+ position: relative;
1144
1158
  }
1145
1159
 
1146
- .cauldron--theme-dark .Modal--info .Dialog__footer {
1147
- border-top: none;
1160
+ button.Link {
1161
+ cursor: pointer;
1162
+ font-size: inherit;
1148
1163
  }
1149
1164
 
1150
- .text--largest {
1151
- font-size: var(--text-size-largest);
1165
+ .Button--primary:focus,
1166
+ .Button--secondary:focus,
1167
+ .Button--clear:focus,
1168
+ .Button--error:focus {
1169
+ outline: none;
1152
1170
  }
1153
1171
 
1154
- .text--larger {
1155
- font-size: var(--text-size-larger);
1172
+ .Button--primary:before,
1173
+ .Button--secondary:before,
1174
+ .Button--clear:before,
1175
+ .Button--error:before,
1176
+ .Button--tag:before {
1177
+ content: '';
1178
+ position: absolute;
1179
+ top: -2px;
1180
+ right: -2px;
1181
+ bottom: -2px;
1182
+ left: -2px;
1183
+ border-radius: 3px;
1184
+ pointer-events: none;
1156
1185
  }
1157
1186
 
1158
- .text--large {
1159
- font-size: var(--text-size-large);
1187
+ .Button--tag:before {
1188
+ border-radius: 11px;
1160
1189
  }
1161
1190
 
1162
- .text--large-medium {
1163
- font-size: var(--text-size-large-medium);
1191
+ .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
1192
+ box-shadow: 0 0 0 1px var(--button-outline-color-primary);
1164
1193
  }
1165
1194
 
1166
- .text--medium {
1167
- font-size: var(--text-size-medium);
1195
+ .Button--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
1196
+ box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
1168
1197
  }
1169
1198
 
1170
- .text--normal {
1171
- font-size: var(--text-size-normal);
1199
+ .Button--error:not([disabled]):not([aria-disabled='true']):hover:before {
1200
+ box-shadow: 0 0 0 1px var(--button-outline-color-error);
1172
1201
  }
1173
1202
 
1174
- .text--small-medium {
1175
- font-size: var(--text-small-medium);
1203
+ .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
1204
+ box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
1176
1205
  }
1177
1206
 
1178
- .text--small {
1179
- font-size: var(--text-size-small);
1207
+ .Button--primary:focus:before,
1208
+ .Button--secondary:focus:before,
1209
+ .Button--error:focus:before {
1210
+ box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
1180
1211
  }
1181
1212
 
1182
- .text--smaller {
1183
- font-size: var(--text-size-smaller);
1213
+ .Button--primary {
1214
+ background-color: var(--button-background-color-primary);
1215
+ color: var(--button-text-color-light);
1184
1216
  }
1185
1217
 
1186
- .text--smallest {
1187
- font-size: var(--text-size-smallest);
1218
+ .Button--primary[aria-disabled='true'],
1219
+ .Button--primary[disabled] {
1220
+ background-color: var(--button-background-color-primary-disabled);
1188
1221
  }
1189
1222
 
1190
- .weight--thin {
1191
- font-weight: var(--font-weight-thin);
1223
+ .Button--primary:not([disabled]):not([aria-disabled='true']):active {
1224
+ background: var(--button-background-color-primary-active);
1192
1225
  }
1193
1226
 
1194
- .weight--light {
1195
- font-weight: var(--font-weight-light);
1227
+ .Button--secondary {
1228
+ background-color: var(--button-background-color-secondary);
1229
+ color: var(--button-text-color-dark);
1230
+ border: 1px solid var(--field-border-color);
1196
1231
  }
1197
1232
 
1198
- .weight--normal {
1199
- font-weight: var(--font-weight-normal);
1233
+ .Button--secondary[aria-disabled='true'],
1234
+ .Button--secondary[disabled] {
1235
+ color: var(--disabled);
1236
+ background-color: var(--button-background-color-secondary-disabled);
1200
1237
  }
1201
1238
 
1202
- .weight--medium {
1203
- font-weight: var(--font-weight-medium);
1239
+ .Button--secondary:not([disabled]):not([aria-disabled='true']):active {
1240
+ background-color: var(--button-background-color-secondary-active);
1204
1241
  }
1205
1242
 
1206
- .weight--bold {
1207
- font-weight: var(--font-weight-bold);
1243
+ .Button--error {
1244
+ background-color: var(--error);
1245
+ box-shadow: none;
1246
+ color: var(--button-text-color-light);
1247
+ --button-hover-outline-color: var(--error);
1208
1248
  }
1209
1249
 
1210
- .weight--ultra-bold {
1211
- font-weight: var(--font-weight-ultra-bold);
1250
+ .Button--error[aria-disabled='true'],
1251
+ .Button--error[disabled] {
1252
+ color: var(--button-text-color-light);
1253
+ background-color: var(--button-background-color-error-disabled);
1212
1254
  }
1213
1255
 
1214
- .text--align-left {
1215
- text-align: left !important;
1216
- justify-content: left !important;
1256
+ .Button--error:not([disabled]):not([aria-disabled='true']):active {
1257
+ background-color: var(--button-background-color-error-active);
1217
1258
  }
1218
1259
 
1219
- .text--align-center {
1220
- text-align: center !important;
1221
- justify-content: center !important;
1260
+ .Button--tag[aria-disabled='true'],
1261
+ .Button--tag[disabled] {
1262
+ color: var(--disabled);
1222
1263
  }
1223
1264
 
1224
- .text--align-right {
1225
- text-align: right !important;
1226
- justify-content: right !important;
1265
+ .Button--primary .Icon,
1266
+ .Button--secondary .Icon,
1267
+ .Button--clear .Icon,
1268
+ .Button--error .Icon {
1269
+ margin: 0 -4px;
1227
1270
  }
1228
1271
 
1229
- body .is--hidden {
1230
- display: none;
1272
+ .Button--thin .Icon svg {
1273
+ width: calc(var(--button-thin-height) - 8px);
1274
+ height: calc(var(--button-thin-height) - 8px);
1231
1275
  }
1232
1276
 
1233
- .is--flex-row {
1234
- display: flex;
1235
- align-items: center;
1277
+ .DefinitionButton {
1278
+ display: inline;
1279
+ vertical-align: baseline;
1280
+ position: relative;
1236
1281
  }
1237
1282
 
1238
- ul.semantic-only {
1239
- margin: 0;
1283
+ .DefinitionButton button {
1284
+ background-color: transparent;
1285
+ color: var(--text-color-base);
1286
+ font-weight: var(--font-weight-normal);
1287
+ border-bottom: 1px dotted;
1288
+ display: inline-block;
1289
+ margin: 0 2px;
1240
1290
  padding: 0;
1241
- list-style-type: none;
1291
+ font-size: inherit;
1292
+ vertical-align: baseline;
1293
+ cursor: auto;
1294
+ -moz-user-select: text;
1295
+ user-select: text;
1242
1296
  }
1243
1297
 
1244
- :root {
1245
- --field-background-color: var(--white);
1246
- --field-content-color: var(--text-color-base);
1247
- --field-border-color: var(--gray-40);
1248
- --field-border-color-underline: var(--gray-80);
1249
- --field-border-color-hover: var(--gray-90);
1250
- --field-border-color-focus: var(--accent-primary);
1251
- --field-border-color-focus-hover: var(--accent-primary-active);
1252
- --field-border-color-focus-glow: rgba(60, 122, 174, 0.7);
1253
- --field-border-color-error: var(--accent-error);
1254
- --field-border-color-error-hover: #c42f41;
1255
- --field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
1256
- --field-border-color-disabled: rgba(204, 204, 204, 0.25);
1257
- --field-background-color-disabled: var(--light-workspace-color);
1258
- --field-required-text-color: var(--gray-60);
1259
- --field-label-text-color: var(--gray-90);
1260
- --field-label-error-text-color: var(--error);
1261
- --field-label-description-text-color: var(--gray-60);
1262
- --field-icon-inactive-color: var(--gray-90);
1263
- --field-icon-active-color: rgba(60, 122, 174, 0.25);
1264
- --field-icon-error-active-color: rgba(217, 50, 81, 0.25);
1265
- --field-icon-checked-color: var(--accent-primary);
1266
- --field-icon-checked-disabled-color: var(--accent-primary-dsiabled, #78a6d8);
1267
- --field-icon-unchecked-disabled-color: var(--gray-40);
1268
- --field-icon-focus-color: var(--focus-light);
1269
- --field-error-text-color: var(--error);
1270
- --field-error-border-color: var(--error);
1271
- --field-listbox-selected-background-color: var(--gray-50);
1272
- --field-listbox-selected-text-color: #fff;
1273
- --field-font-size: var(--text-size-small);
1274
- --input-min-width: 250px;
1275
- --checkbox-size: var(--icon-size);
1276
- --radio-size: var(--icon-size);
1298
+ .Button--thin {
1299
+ min-height: var(--button-thin-height);
1300
+ min-width: 100px;
1301
+ font-size: var(--text-size-smallest);
1302
+ padding: 0 16px;
1303
+ }
1304
+
1305
+ [class*='Button--'] + [class*='Button--'] {
1306
+ margin-left: var(--space-smallest);
1277
1307
  }
1278
1308
 
1309
+ /* Dark Theme */
1310
+
1279
1311
  .cauldron--theme-dark {
1280
- --field-background-color: var(--accent-medium);
1281
- --field-content-color: var(--white);
1282
- --field-border-color: #74818b;
1283
- --field-border-color-hover: var(--accent-info-light);
1284
- --field-border-color-focus: var(--accent-info);
1285
- --field-border-color-focus-hover: var(--accent-info-light);
1286
- --field-border-color-focus-glow: var(--accent-info);
1312
+ --button-background-color-primary: var(--accent-medium);
1313
+ --button-background-color-primary-disabled: var(--accent-medium);
1314
+ --button-background-color-secondary: var(--accent-medium);
1315
+ --button-background-color-secondary-disabled: var(--accent-medium);
1316
+ --button-background-color-error-disabled: var(--accent-medium);
1317
+
1318
+ --button-background-color-primary-active: #a7e9f7;
1319
+ --button-background-color-secondary-active: var(--accent-light);
1320
+ --button-background-color-error-active: #fea7a6;
1321
+
1322
+ --button-focus-ring-color: var(--focus-dark);
1323
+ --field-label-text-color: var(--accent-light);
1287
1324
  --field-border-color-error: var(--accent-danger);
1288
- --field-border-color-error-hover: #fea7a6;
1289
- --field-background-color-disabled: #5d676f;
1290
- --field-required-text-color: var(--white);
1291
- --field-label-text-color: var(--white);
1292
- --field-label-error-text-color: var(--error);
1293
- --field-label-description-text-color: var(--accent-light);
1294
- --field-icon-inactive-color: var(--white);
1295
- --field-icon-active-color: rgba(212, 221, 224, 0.25);
1296
- --field-icon-error-active-color: rgba(254, 109, 107, 0.25);
1297
- --field-icon-checked-color: var(--accent-light);
1298
- --field-icon-checked-disabled-color: var(--stroke-dark);
1299
- --field-icon-unchecked-disabled-color: var(--stroke-dark);
1300
- --field-icon-focus-color: var(--focus-dark);
1301
- --field-error-text-color: var(--error);
1302
- --field-error-border-color: var(--error);
1303
- --field-listbox-selected-background-color: var(--accent-light);
1304
- --field-listbox-selected-text-color: var(--accent-medium);
1325
+ --error: var(--accent-danger);
1305
1326
  }
1306
1327
 
1307
- input,
1308
- select,
1309
- textarea,
1310
- [role='menuitemcheckbox'],
1311
- [role='menuitemradio'],
1312
- [role='textbox'],
1313
- [role='listbox'],
1314
- [role='spinbutton'] {
1328
+ .cauldron--theme-dark .Button--primary {
1329
+ border: 2px solid var(--accent-info);
1330
+ }
1331
+
1332
+ .cauldron--theme-dark .Button--secondary {
1333
+ color: var(--accent-light);
1334
+ border: 2px solid var(--accent-light);
1335
+ }
1336
+
1337
+ .cauldron--theme-dark .Button--error {
1338
+ background-color: var(--accent-medium);
1339
+ color: var(--white);
1340
+ border: 2px solid var(--accent-danger);
1341
+ }
1342
+
1343
+ .cauldron--theme-dark .Button--primary[aria-disabled='true'],
1344
+ .cauldron--theme-dark .Button--primary[disabled],
1345
+ .cauldron--theme-dark .Button--secondary[aria-disabled='true'],
1346
+ .cauldron--theme-dark .Button--secondary[disabled],
1347
+ .cauldron--theme-dark .Button--error[aria-disabled='true'],
1348
+ .cauldron--theme-dark .Button--error[disabled],
1349
+ .cauldron--theme-dark .Button--tag[disabled] {
1350
+ color: var(--dark-workspace-color);
1351
+ }
1352
+
1353
+ .cauldron--theme-dark
1354
+ .Button--primary:not([disabled]):not([aria-disabled='true']):active,
1355
+ .cauldron--theme-dark
1356
+ .Button--secondary:not([disabled]):not([aria-disabled='true']):active {
1357
+ color: var(--accent-medium);
1358
+ }
1359
+
1360
+ .cauldron--theme-dark
1361
+ .Button--error:not([disabled]):not([aria-disabled='true']):active {
1362
+ background-color: #fea7a6;
1363
+ color: var(--accent-medium);
1364
+ }
1365
+
1366
+ .cauldron--theme-dark button.Link {
1367
+ color: var(--accent-light);
1368
+ }
1369
+
1370
+ .cauldron--theme-dark button.Link:hover {
1371
+ color: var(--white);
1372
+ }
1373
+
1374
+ .cauldron--theme-dark
1375
+ .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
1376
+ box-shadow: 0 0 0 1px var(--dark-workspace-color),
1377
+ 0 0 0 2px var(--accent-info);
1378
+ }
1379
+
1380
+ .cauldron--theme-dark
1381
+ .Button--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
1382
+ box-shadow: 0 0 0 1px var(--dark-workspace-color),
1383
+ 0 0 0 2px var(--accent-light);
1384
+ }
1385
+
1386
+ .cauldron--theme-dark
1387
+ .Button--error:not([disabled]):not([aria-disabled='true']):hover:before {
1388
+ box-shadow: 0 0 0 1px var(--dark-workspace-color),
1389
+ 0 0 0 2px var(--accent-danger);
1390
+ }
1391
+
1392
+ .cauldron--theme-dark
1393
+ .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
1394
+ box-shadow: 0 0 0 1px var(--dark-workspace-color),
1395
+ 0 0 0 2px var(--accent-info);
1396
+ }
1397
+
1398
+ :root {
1399
+ /* Primary */
1400
+ --icon-button-primary-color: var(--button-text-color-light);
1401
+ --icon-button-background-color-primary: var(
1402
+ --button-background-color-primary
1403
+ );
1404
+ --icon-button-background-color-primary-active: var(
1405
+ --button-background-color-primary-active
1406
+ );
1407
+ --icon-button-outline-color-primary: var(--button-outline-color-primary);
1408
+
1409
+ --icon-button-large-height: var(--button-height);
1410
+
1411
+ /* Secondary */
1412
+ --icon-button-secondary-color: var(--button-text-color-dark);
1413
+ --icon-button-background-color-secondary: var(
1414
+ --button-background-color-secondary
1415
+ );
1416
+ --icon-button-background-color-secondary-active: var(
1417
+ --button-background-color-secondary-active
1418
+ );
1419
+ --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
1420
+ --icon-button-border-color-secondary: var(--gray-40);
1421
+
1422
+ /* Error */
1423
+ --icon-button-background-color-error: var(--button-background-color-error);
1424
+ --icon-button-outline-color-error: var(--button-outline-color-error);
1425
+ --icon-button-background-color-error-active: var(
1426
+ --button-background-color-error-active
1427
+ );
1428
+
1429
+ /* Deprecated variables */
1430
+ --icon-button-content-color-light-disabled: #ccc;
1431
+ --icon-button-background-color-light: #dadada;
1432
+ --icon-button-background-color-light-active: #c2c2c2;
1433
+ --icon-button-outline-color-light: var(--icon-button-background-color-light);
1434
+
1435
+ --icon-button-content-color-dark-disabled: #fff 40%;
1436
+ --icon-button-background-color-dark: var(--accent-medium);
1437
+ --icon-button-background-color-dark-disabled: var(--accent-medium);
1438
+ --icon-button-background-color-dark-active: var(--accent-dark);
1439
+ --icon-button-outline-color-dark: var(--icon-button-background-color-dark);
1440
+ --icon-button-background-color-secondary-disabled: var(
1441
+ --button-background-color-secondary-disabled
1442
+ );
1443
+ --icon-button-background-color-error-disabled: var(
1444
+ --button-background-color-error-disabled
1445
+ );
1446
+ }
1447
+
1448
+ .IconButton {
1449
+ position: relative;
1450
+ display: inline-flex;
1451
+ justify-content: center;
1452
+ align-content: center;
1453
+ align-items: center;
1454
+ height: var(--button-thin-height);
1455
+ width: var(--button-thin-height);
1456
+ border-radius: 3px;
1457
+ border: 1px solid transparent;
1458
+ background-color: var(--icon-button-background-color);
1459
+ color: var(--icon-button-icon-color);
1460
+ margin: 2px;
1461
+ padding: 0;
1462
+ }
1463
+
1464
+ /* Ensure both <a> and <button> IconButtons are aligned correctly. See #846. */
1465
+
1466
+ a.IconButton {
1467
+ vertical-align: middle;
1468
+ line-height: unset;
1469
+ }
1470
+
1471
+ .IconButton .Icon {
1472
+ height: var(--space-small);
1473
+ width: var(--space-small);
1474
+ pointer-events: none;
1475
+ }
1476
+
1477
+ .IconButton .Icon svg {
1315
1478
  width: 100%;
1316
- border: 1px solid var(--field-border-color);
1317
- border-bottom: 1px solid var(--field-border-color-underline);
1318
- margin-bottom: var(--space-half);
1319
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
1320
- background-color: var(--field-background-color);
1479
+ height: 100%;
1321
1480
  }
1322
1481
 
1323
- .cauldron--theme-dark input,
1324
- select,
1325
- textarea,
1326
- [role='menuitemcheckbox'],
1327
- [role='menuitemradio'],
1328
- [role='textbox'],
1329
- [role='listbox'],
1330
- [role='spinbutton'] {
1331
- border: 1px solid var(--field-border-color);
1482
+ .IconButton:focus {
1483
+ outline: none;
1332
1484
  }
1333
1485
 
1334
- input:focus,
1335
- select:focus,
1336
- textarea:focus,
1337
- [role='menuitemcheckbox']:focus,
1338
- [role='menuitemradio']:focus,
1339
- [role='textbox']:focus,
1340
- [role='listbox']:focus,
1341
- [role='spinbutton']:focus {
1342
- outline: 0;
1343
- border: 1px solid var(--field-border-color-focus);
1344
- box-shadow: 0 0 0 1px var(--field-border-color-focus),
1345
- 0 0 5px var(--field-border-color-focus-glow),
1346
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
1486
+ .IconButton:before {
1487
+ content: '';
1488
+ position: absolute;
1489
+ top: -2px;
1490
+ right: -2px;
1491
+ bottom: -2px;
1492
+ left: -2px;
1493
+ border-radius: 3px;
1494
+ pointer-events: none;
1347
1495
  }
1348
1496
 
1349
- input:hover,
1350
- select:hover,
1351
- textarea:hover,
1352
- [role='menuitemcheckbox']:hover,
1353
- [role='menuitemradio']:hover,
1354
- [role='textbox']:hover,
1355
- [role='listbox']:hover,
1356
- [role='spinbutton']:hover {
1357
- border: 1px solid var(--field-border-color-hover);
1497
+ .IconButton--large {
1498
+ height: var(--icon-button-large-height);
1499
+ width: var(--icon-button-large-height);
1358
1500
  }
1359
1501
 
1360
- input:focus:hover,
1361
- select:focus:hover,
1362
- textarea:focus:hover,
1363
- [role='menuitemcheckbox']:focus:hover,
1364
- [role='menuitemradio']:focus:hover,
1365
- [role='textbox']:focus:hover,
1366
- [role='listbox']:focus:hover,
1367
- [role='spinbutton']:focus:hover {
1368
- border: 1px solid var(--field-border-color-focus-hover);
1369
- box-shadow: 0 0 0 1px var(--field-border-color-focus-hover),
1370
- 0 0 5px var(--field-border-color-focus-glow),
1371
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
1502
+ .IconButton--secondary:is([aria-disabled='true'], [disabled]),
1503
+ .IconButton--secondary:is([aria-disabled='true'], [disabled]):active {
1504
+ color: var(--disabled);
1505
+ background-color: var(--button-background-color-secondary-disabled);
1506
+ cursor: default;
1372
1507
  }
1373
1508
 
1374
- input.Field--has-error,
1375
- select.Field--has-error,
1376
- textarea.Field--has-error,
1377
- [role='menuitemcheckbox'].Field--has-error,
1378
- [role='menuitemradio'].Field--has-error,
1379
- [role='textbox'].Field--has-error,
1380
- [role='listbox'].Field--has-error,
1381
- [role='spinbutton'].Field--has-error {
1382
- border: 1px solid var(--field-border-color-error);
1383
- box-shadow: 0 0 0 1px var(--field-border-color-error),
1384
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
1509
+ .IconButton--primary:is([aria-disabled='true'], [disabled]),
1510
+ .IconButton--primary:is([aria-disabled='true'], [disabled]):active {
1511
+ background-color: var(--button-background-color-primary-disabled);
1512
+ cursor: default;
1385
1513
  }
1386
1514
 
1387
- .Checkbox__overlay.Field--has-error {
1388
- color: var(--field-border-color-error);
1515
+ .IconButton--error:is([aria-disabled='true'], [disabled]),
1516
+ .IconButton--error:is([aria-disabled='true'], [disabled]):active {
1517
+ color: var(--button-text-color-light);
1518
+ background-color: var(--button-background-color-error-disabled);
1519
+ cursor: default;
1389
1520
  }
1390
1521
 
1391
- .Icon--checkbox-unchecked.Checkbox__overlay:active.Field--has-error:not(
1392
- .Checkbox__overlay--disabled
1393
- ) {
1394
- background-color: var(--field-icon-error-active-color);
1522
+ .IconButton:focus:before {
1523
+ box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
1395
1524
  }
1396
1525
 
1397
- input.Field--has-error:hover,
1398
- select.Field--has-error:hover,
1399
- textarea.Field--has-error:hover,
1400
- [role='menuitemcheckbox'].Field--has-error:hover,
1401
- [role='menuitemradio'].Field--has-error:hover,
1402
- [role='textbox'].Field--has-error:hover,
1403
- [role='listbox'].Field--has-error:hover,
1404
- [role='spinbutton'].Field--has-error:hover {
1405
- border-color: var(--field-border-color-error-hover);
1526
+ .IconButton--primary {
1527
+ background-color: var(--icon-button-background-color-primary);
1528
+ color: var(--icon-button-primary-color);
1406
1529
  }
1407
1530
 
1408
- input.Field--has-error:focus,
1409
- select.Field--has-error:focus,
1410
- textarea.Field--has-error:focus,
1411
- [role='menuitemcheckbox'].Field--has-error:focus,
1412
- [role='menuitemradio'].Field--has-error:focus,
1413
- [role='textbox'].Field--has-error:focus,
1414
- [role='listbox'].Field--has-error:focus,
1415
- [role='spinbutton'].Field--has-error:focus {
1416
- border: 1px solid var(--field-border-color-error);
1417
- box-shadow: 0 0 0 1px var(--field-border-color-error),
1418
- 0 0 5px var(--field-border-color-error-focus-glow),
1419
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
1531
+ .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
1532
+ box-shadow: 0 0 0 1px var(--icon-button-outline-color-primary);
1420
1533
  }
1421
1534
 
1422
- input.Field--has-error:focus:hover,
1423
- select.Field--has-error:focus:hover,
1424
- textarea.Field--has-error:focus:hover,
1425
- [role='menuitemcheckbox'].Field--has-error:focus:hover,
1426
- [role='menuitemradio'].Field--has-error:focus:hover,
1427
- [role='textbox'].Field--has-error:focus:hover,
1428
- [role='listbox'].Field--has-error:focus:hover,
1429
- [role='spinbutton'].Field--has-error:focus:hover {
1430
- border-color: var(--field-border-color-error-hover);
1535
+ .IconButton--primary:active {
1536
+ background-color: var(--icon-button-background-color-primary-active);
1537
+ }
1538
+
1539
+ .IconButton--secondary {
1540
+ border: 1px solid var(--icon-button-border-color-secondary);
1541
+ background-color: var(--icon-button-background-color-secondary);
1542
+ color: var(--icon-button-secondary-color);
1431
1543
  }
1432
1544
 
1433
- [role='listbox'] > li,
1434
- [role='listbox'] > [role='group'] > li {
1435
- list-style-type: none;
1545
+ .IconButton--secondary:not([disabled]):not(
1546
+ [aria-disabled='true']
1547
+ ):hover:before {
1548
+ box-shadow: 0 0 0 1px var(--icon-button-outline-color-secondary);
1436
1549
  }
1437
1550
 
1438
- [role='listbox']:focus-within > li.ListboxOption--active,
1439
- [role='listbox']:focus-within > [role='group'] > li.ListboxOption--active {
1440
- box-shadow: 0 0 0 2px var(--field-icon-focus-color);
1551
+ .IconButton--secondary:active {
1552
+ background-color: var(--icon-button-background-color-secondary-active);
1441
1553
  }
1442
1554
 
1443
- [role='listbox']
1444
- li[role='option']:is([aria-selected='true'], [aria-checked='true']) {
1445
- background-color: var(--field-listbox-selected-background-color);
1446
- color: var(--field-listbox-selected-text-color);
1555
+ .IconButton--error {
1556
+ background-color: var(--icon-button-background-color-error);
1557
+ color: var(--button-text-color-light);
1447
1558
  }
1448
1559
 
1449
- .Error {
1450
- color: var(--field-error-text-color);
1451
- text-align: left;
1452
- font-size: var(--text-size-smallest);
1453
- font-weight: var(--font-weight-normal);
1560
+ .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
1561
+ box-shadow: 0 0 0 1px var(--icon-button-outline-color-error);
1454
1562
  }
1455
1563
 
1456
- .Checkbox__wrap .Error {
1457
- margin-top: var(--space-half);
1458
- border-top: 1px solid var(--field-error-border-color);
1459
- margin-left: calc(var(--icon-size) + 2px + var(--space-half));
1460
- padding: var(--space-half) 0;
1564
+ .IconButton--error:active {
1565
+ background-color: var(--icon-button-background-color-error-active);
1461
1566
  }
1462
1567
 
1463
- .Field {
1464
- display: block;
1465
- position: relative;
1466
- box-sizing: border-box;
1467
- margin-bottom: var(--space-small);
1568
+ /* Dark Theme */
1569
+
1570
+ .cauldron--theme-dark {
1571
+ --icon-button-icon-color: var(--white);
1572
+ --icon-button-outline-shadow-color: var(--accent-medium);
1573
+ --icon-button-disabled-color: var(--dark-workspace-color);
1574
+ --icon-button-active-color: var(--accent-medium);
1575
+
1576
+ /* Primary */
1577
+ --icon-button-primary-color: var(--white);
1578
+ --icon-button-background-color-primary: var(--accent-medium);
1579
+ --icon-button-background-color-primary-active: var(--accent-info-active);
1580
+ --icon-button-outline-color-primary: var(--accent-info);
1581
+ --icon-button-border-color-primary: var(--accent-info);
1582
+
1583
+ /* Secondary */
1584
+ --icon-button-border-color-secondary: var(--accent-light);
1585
+ --icon-button-background-color-secondary: var(--accent-medium);
1586
+ --icon-button-secondary-color: var(--white);
1587
+ --icon-button-background-color-secondary-active: var(--accent-light);
1588
+ --icon-button-outline-color-secondary: var(--accent-light);
1589
+
1590
+ /* Error */
1591
+ --icon-button-background-color-error: var(--accent-medium);
1592
+ --icon-button-border-color-error: var(--accent-danger);
1593
+ --icon-button-outline-color-error: var(--accent-danger);
1594
+ --icon-button-background-color-error-active: var(
1595
+ --button-background-color-error-active
1596
+ );
1468
1597
  }
1469
1598
 
1470
- .Field.is--flex-row {
1471
- align-items: center;
1599
+ .cauldron--theme-dark .IconButton--primary {
1600
+ border: 2px solid var(--icon-button-border-color-primary);
1472
1601
  }
1473
1602
 
1474
- .Field.is--flex-row .Field__label {
1475
- margin-bottom: 0;
1603
+ .cauldron--theme-dark .IconButton--secondary {
1604
+ border-width: 2px;
1476
1605
  }
1477
1606
 
1478
- .Checkbox__wrap,
1479
- .Radio__wrap {
1480
- margin-bottom: var(--space-smallest);
1607
+ .cauldron--theme-dark .IconButton--error {
1608
+ border: 2px solid var(--icon-button-border-color-error);
1481
1609
  }
1482
1610
 
1483
- .Checkbox__wrap:last-of-type,
1484
- .Radio__wrap:last-of-type {
1485
- margin-bottom: 0;
1611
+ .cauldron--theme-dark
1612
+ .IconButton--primary:is([aria-disabled='true'], [disabled]),
1613
+ .cauldron--theme-dark
1614
+ .IconButton--secondary:is([aria-disabled='true'], [disabled]),
1615
+ .cauldron--theme-dark
1616
+ .IconButton--error:is([aria-disabled='true'], [disabled]) {
1617
+ color: var(--icon-button-disabled-color);
1486
1618
  }
1487
1619
 
1488
- .Radio--inline .Radio__wrap {
1489
- margin-bottom: 0;
1620
+ .cauldron--theme-dark .IconButton--primary:active,
1621
+ .cauldron--theme-dark .IconButton--secondary:active,
1622
+ .cauldron--theme-dark .IconButton--error:active {
1623
+ color: var(--icon-button-active-color);
1490
1624
  }
1491
1625
 
1492
- .Checkbox,
1493
- .Radio {
1494
- box-sizing: border-box;
1495
- position: relative;
1496
- flex-direction: row-reverse;
1497
- justify-content: flex-end;
1498
- flex-wrap: nowrap;
1626
+ .cauldron--theme-dark
1627
+ .IconButton:is([aria-disabled='true'], [disabled]):active {
1628
+ color: var(--icon-button-disabled-color);
1499
1629
  }
1500
1630
 
1501
- .Radio--inline {
1502
- display: flex;
1503
- align-items: baseline;
1504
- flex-wrap: wrap;
1505
- gap: var(--space-small);
1631
+ .cauldron--theme-dark
1632
+ .IconButton--primary:not([disabled]):not(
1633
+ [aria-disabled='true']
1634
+ ):hover:before {
1635
+ box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
1636
+ 0 0 0 2px var(--icon-button-outline-color-primary);
1506
1637
  }
1507
1638
 
1508
- .Checkbox + .Field__labelDescription,
1509
- .Radio + .Field__labelDescription {
1510
- margin-top: var(--space-half);
1511
- margin-bottom: var(--space-small);
1639
+ .cauldron--theme-dark
1640
+ .IconButton--secondary:not([disabled]):not(
1641
+ [aria-disabled='true']
1642
+ ):hover:before {
1643
+ box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
1644
+ 0 0 0 2px var(--icon-button-outline-color-secondary);
1512
1645
  }
1513
1646
 
1514
- .Checkbox__wrap:last-of-type .Checkbox + .Field__labelDescription,
1515
- .Radio__wrap:last-of-type .Radio + .Field__labelDescription {
1516
- margin-bottom: 0;
1647
+ .cauldron--theme-dark
1648
+ .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
1649
+ box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
1650
+ 0 0 0 2px var(--icon-button-outline-color-error);
1517
1651
  }
1518
1652
 
1519
- .Field__label {
1520
- display: flex;
1521
- align-items: center;
1522
- text-align: left;
1523
- color: var(--field-label-text-color);
1524
- margin-bottom: var(--space-half);
1525
- font-size: var(--text-size-small);
1526
- font-weight: var(--font-weight-medium);
1527
- cursor: default;
1653
+ .cauldron--theme-dark .IconButton:focus:before {
1654
+ box-shadow: 0 0 0 2px var(--icon-button-outline-shadow-color),
1655
+ 0 0 0 4px var(--button-focus-ring-color, --focus);
1528
1656
  }
1529
1657
 
1530
- .Field__label + .Checkbox__wrap {
1531
- margin-top: var(--space-half);
1658
+ :root {
1659
+ --dialog-background-color: #fff;
1660
+ --dialog-border-color: var(--gray-40);
1661
+ --dialog-header-background-color: var(--gray-20);
1662
+ --dialog-footer-background-color: var(--gray-20);
1663
+ --dialog-heading-text-color: var(--header-text-color-dark);
1664
+ --dialog-padding: var(--space-small);
1665
+ --dialog-header-height: 2.625rem;
1666
+ --dialog-close-button-size: var(--target-size-minimum);
1532
1667
  }
1533
1668
 
1534
- .Field__label + [role^='radiogroup'] {
1535
- margin-top: var(--space-smallest);
1669
+ .cauldron--theme-dark {
1670
+ --dialog-background-color: var(--accent-medium);
1671
+ --dialog-border-color: var(--gray-20);
1672
+ --dialog-header-background-color: var(--accent-dark);
1673
+ --dialog-footer-background-color: var(--accent-dark);
1674
+ --dialog-heading-text-color: #fff;
1536
1675
  }
1537
1676
 
1538
- .Checkbox__label,
1539
- .Radio__label {
1540
- display: flex;
1541
- align-items: center;
1542
- text-align: left;
1543
- font-weight: var(--font-weight-normal);
1544
- cursor: default;
1545
- margin-bottom: unset;
1677
+ .Dialog {
1678
+ display: none;
1679
+ width: 100vw;
1680
+ height: 100vh;
1681
+ overflow-x: auto;
1682
+ position: fixed;
1683
+ top: 0;
1684
+ background-color: var(--scrim-background-color);
1546
1685
  }
1547
1686
 
1548
- .Field__required-text {
1549
- flex: 1;
1550
- text-align: right;
1551
- margin-left: var(--space-large);
1552
- font-style: italic;
1553
- font-weight: var(--font-weight-thin);
1554
- color: var(--field-required-text-color);
1555
- font-size: var(--text-size-smaller);
1687
+ .Dialog.Dialog--show {
1688
+ display: block;
1556
1689
  }
1557
1690
 
1558
- .Field__required-text::before {
1559
- content: ' ';
1560
- color: var(--field-content-color);
1691
+ .Dialog__inner {
1692
+ width: 400px;
1693
+ max-width: 90%;
1694
+ left: 50%;
1695
+ top: 100px;
1696
+ display: flex;
1697
+ flex-direction: column;
1698
+ transform: translateX(-50%);
1699
+ background-color: var(--dialog-background-color);
1700
+ border: 1px solid var(--dialog-border-color);
1701
+ z-index: var(--z-index-dialog);
1702
+ position: relative;
1703
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1561
1704
  }
1562
1705
 
1563
- .Field__label--has-error .Field__required-text {
1564
- color: var(--field-label-error-text-color);
1706
+ .Dialog__header {
1707
+ display: flex;
1708
+ background-color: var(--dialog-header-background-color);
1709
+ border-bottom: 1px solid var(--dialog-border-color);
1710
+ align-items: center;
1711
+ justify-content: space-between;
1712
+ min-height: var(--dialog-header-height);
1713
+ font-weight: var(--font-weight-bold);
1714
+ padding: var(--space-smallest) 0;
1715
+ gap: var(--space-smallest);
1565
1716
  }
1566
1717
 
1567
- .Field__label--inline {
1568
- display: inline-block;
1569
- text-align: left;
1570
- font-size: var(--text-size-smaller);
1718
+ .Dialog__heading,
1719
+ .Dialog__close {
1720
+ margin: 0;
1721
+ font-size: var(--text-size-small);
1571
1722
  }
1572
1723
 
1573
- .Field__text-input {
1574
- padding: var(--space-smallest);
1575
- box-sizing: border-box;
1576
- font-size: var(--field-font-size);
1577
- color: var(--field-content-color);
1578
- min-width: min(var(--input-min-width), 100%);
1724
+ .Dialog__heading {
1725
+ display: flex;
1726
+ align-items: center;
1727
+ margin-left: var(--dialog-padding);
1579
1728
  }
1580
1729
 
1581
- .Field__text-input[disabled],
1582
- .Field__text-input[aria-disabled='true'] {
1583
- border: 1px solid var(--field-border-color-disabled);
1584
- background-color: var(--field-background-color-disabled);
1730
+ .Dialog__close {
1731
+ color: var(--dialog-heading-text-color);
1732
+ background-color: initial;
1733
+ border: 1px solid var(--dialog-border-color);
1734
+ border-radius: 3px;
1735
+ padding: 0;
1736
+ height: var(--dialog-close-button-size);
1737
+ width: var(--dialog-close-button-size);
1738
+ margin-right: var(--space-smallest);
1739
+ flex-shrink: 0;
1740
+ position: relative;
1741
+ }
1742
+
1743
+ .Dialog__close:active {
1744
+ background-color: var(--dialog-border-color);
1585
1745
  }
1586
1746
 
1587
- .Field__textarea {
1588
- display: block;
1589
- min-height: 56px;
1590
- font-size: var(--field-font-size);
1591
- min-width: min(var(--input-min-width), 100%);
1592
- padding: var(--space-half);
1593
- max-width: 500px;
1594
- color: var(--field-content-color);
1747
+ .Dialog__close:before {
1748
+ content: '';
1749
+ position: absolute;
1750
+ top: -2px;
1751
+ right: -2px;
1752
+ bottom: -2px;
1753
+ left: -2px;
1754
+ border-radius: 4px;
1755
+ pointer-events: none;
1595
1756
  }
1596
1757
 
1597
- .Field__textarea[disabled],
1598
- .Field__textarea[aria-disabled='true'] {
1599
- background: var(--field-background-color-disabled);
1600
- border: 1px solid var(--field-border-color);
1758
+ .cauldron--theme-dark .Dialog__close:before {
1759
+ top: -3px;
1760
+ right: -3px;
1761
+ bottom: -3px;
1762
+ left: -3px;
1601
1763
  }
1602
1764
 
1603
- .Field__labelDescription {
1604
- flex-basis: 100%;
1605
- color: var(--field-label-description-text-color);
1606
- font-size: var(--text-size-small);
1607
- font-weight: var(--font-weight-normal);
1608
- line-height: 1;
1609
- margin-top: var(--space-half);
1610
- cursor: default;
1611
- display: flex;
1765
+ .Dialog__close:is(:hover, :focus):before {
1766
+ box-shadow: 0 0 0 1px var(--dialog-heading-text-color);
1612
1767
  }
1613
1768
 
1614
- .Checkbox__wrap .Field__labelDescription {
1615
- margin-left: calc(var(--checkbox-size) + 2px + var(--space-half));
1769
+ .Dialog__close svg {
1770
+ /* match icon size with height/width of button */
1771
+ --icon-size: 100%;
1616
1772
  }
1617
1773
 
1618
- .Radio__wrap .Field__labelDescription {
1619
- margin-left: calc(var(--radio-size) + 2px + var(--space-half));
1774
+ .cauldron--theme-dark .Dialog__close {
1775
+ border-width: 2px;
1620
1776
  }
1621
1777
 
1622
- .Field__labelDescription + .Error {
1623
- margin-top: var(--space-smallest);
1778
+ .Dialog__content {
1779
+ padding: var(--dialog-padding);
1624
1780
  }
1625
1781
 
1626
- .Radio__overlay,
1627
- .Checkbox__overlay {
1628
- border: 1px solid transparent;
1629
- box-sizing: border-box;
1630
- cursor: pointer;
1631
- color: var(--field-icon-inactive-color);
1632
- margin-right: var(--space-half);
1633
- align-self: flex-start;
1782
+ .Dialog__content p:first-child {
1783
+ margin-top: 0;
1634
1784
  }
1635
1785
 
1636
- .Checkbox__overlay {
1637
- border-radius: 5px;
1786
+ .Dialog__content p:last-child {
1787
+ margin-bottom: 0;
1638
1788
  }
1639
1789
 
1640
- .Radio__overlay {
1641
- border-radius: 50%;
1790
+ .Dialog__footer {
1791
+ background-color: var(--dialog-footer-background-color);
1792
+ border-top: 1px solid var(--dialog-border-color);
1793
+ padding: var(--dialog-padding);
1642
1794
  }
1643
1795
 
1644
- .Radio__overlay svg,
1645
- .Checkbox__overlay svg {
1646
- pointer-events: none;
1647
- }
1796
+ /**
1797
+ * style for info modal
1798
+ */
1648
1799
 
1649
- .Radio__overlay svg {
1650
- height: var(--radio-size);
1651
- width: var(--radio-size);
1800
+ .Modal--info .Dialog__header {
1801
+ background-color: transparent;
1652
1802
  }
1653
1803
 
1654
- .Checkbox__overlay svg {
1655
- height: var(--checkbox-size);
1656
- width: var(--checkbox-size);
1804
+ .Modal--info .Dialog__content {
1805
+ display: flex;
1806
+ flex-direction: column;
1807
+ align-items: center;
1657
1808
  }
1658
1809
 
1659
- .Radio__overlay:active:not(.Radio__overlay--disabled),
1660
- .Checkbox__overlay:active:not(.Checkbox__overlay--disabled) {
1661
- background-color: var(--field-icon-active-color);
1810
+ .Modal--info .Dialog__footer {
1811
+ display: flex;
1812
+ justify-content: center;
1813
+ background-color: transparent;
1814
+ border-top: none;
1815
+ padding-top: 0;
1662
1816
  }
1663
1817
 
1664
- .Radio input[type='radio'] {
1665
- position: absolute;
1666
- opacity: 0;
1667
- top: 8px;
1668
- left: 8px;
1669
- -webkit-appearance: none;
1670
- -moz-appearance: none;
1671
- appearance: none;
1818
+ /* Dark Theme */
1819
+
1820
+ .cauldron--theme-dark .Dialog__inner {
1821
+ color: var(--white);
1822
+ border-width: 4px;
1672
1823
  }
1673
1824
 
1674
- .Checkbox__overlay.Checkbox__overlay--focused,
1675
- .Radio__overlay.Radio__overlay--focused {
1676
- box-shadow: 0 0 0 2px var(--field-icon-focus-color);
1825
+ .cauldron--theme-dark .Dialog__header {
1826
+ border-bottom: 1px solid var(--stroke-dark);
1677
1827
  }
1678
1828
 
1679
- .Radio__overlay.Icon--radio-checked,
1680
- .Checkbox__overlay.Icon--checkbox-checked {
1681
- color: var(--field-icon-checked-color);
1829
+ .cauldron--theme-dark .Dialog__footer {
1830
+ border-top: 1px solid var(--stroke-dark);
1682
1831
  }
1683
1832
 
1684
- .Radio__overlay--disabled.Icon--radio-checked,
1685
- .Checkbox__overlay--disabled.Icon--checkbox-checked {
1686
- color: var(--field-icon-checked-disabled-color);
1687
- cursor: default;
1833
+ .cauldron--theme-dark .Dialog__header,
1834
+ .cauldron--theme-dark .Dialog__footer {
1835
+ color: var(--gray-20);
1688
1836
  }
1689
1837
 
1690
- .Checkbox__overlay--disabled.Icon--checkbox-unchecked,
1691
- .Radio__overlay--disabled.Icon--radio-unchecked {
1692
- color: var(--field-icon-unchecked-disabled-color);
1693
- cursor: default;
1838
+ .cauldron--theme-dark .Dialog__close {
1839
+ color: var(--gray-20);
1694
1840
  }
1695
1841
 
1696
- .Field__label:hover ~ .Radio__overlay:not(.Radio__overlay--disabled),
1697
- .Radio__overlay:hover:not(.Radio__overlay--disabled) {
1698
- border: 1px solid currentColor;
1842
+ .cauldron--theme-dark .Dialog__close:active {
1843
+ color: var(--accent-medium);
1699
1844
  }
1700
1845
 
1701
- .Checkbox input[type='checkbox'] {
1702
- position: absolute;
1703
- opacity: 0;
1704
- top: 8px;
1705
- left: 8px;
1706
- -webkit-appearance: none;
1707
- -moz-appearance: none;
1708
- appearance: none;
1846
+ .cauldron--theme-dark .Modal--info .Dialog__header,
1847
+ .cauldron--theme-dark .Modal--info .Dialog__content,
1848
+ .cauldron--theme-dark .Modal--info .Dialog__footer {
1849
+ background-color: transparent;
1709
1850
  }
1710
1851
 
1711
- .Field__label:hover ~ .Checkbox__overlay:not(.Checkbox__overlay--disabled),
1712
- .Checkbox__overlay:hover:not(.Checkbox__overlay--disabled) {
1713
- border: 1px solid currentColor;
1852
+ .cauldron--theme-dark .Modal--info .Dialog__footer {
1853
+ border-top: none;
1714
1854
  }
1715
1855
 
1716
1856
  :root {
@@ -4763,22 +4903,6 @@ button.Accordion__trigger {
4763
4903
  }
4764
4904
 
4765
4905
  :root {
4766
- --combobox-input-border-color: var(--field-border-color);
4767
- --combobox-input-background-color: var(--field-background-color);
4768
- --combobox-input-border-focus-color: var(--field-border-color-focus);
4769
- --combobox-input-border-hover-color: var(--field-border-color-focus-hover);
4770
- --combobox-input-border-focus-glow-color: var(
4771
- --field-border-color-focus-glow
4772
- );
4773
- --combobox-input-error-border-color: var(--field-border-color-error);
4774
- --combobox-input-error-focus-border-color: var(
4775
- --field-border-color-error-hover
4776
- );
4777
- --combobox-input-error-focus-border-glow-color: var(
4778
- --field-border-color-focus-glow
4779
- );
4780
- --combobox-input-font-size: var(--field-font-size);
4781
- --combobox-input-font-color: var(--field-content-color);
4782
4906
  --combobox-listbox-border-color: var(--gray-40);
4783
4907
  --combobox-listbox-background-color: #fff;
4784
4908
  --combobox-option-font-color: var(--gray-90);
@@ -4792,21 +4916,6 @@ button.Accordion__trigger {
4792
4916
  }
4793
4917
 
4794
4918
  .cauldron--theme-dark {
4795
- --combobox-input-border-color: var(--field-border-color);
4796
- --combobox-input-background-color: var(--field-background-color);
4797
- --combobox-input-border-focus-color: var(--field-border-color-focus);
4798
- --combobox-input-border-hover-color: var(--field-border-color-focus-hover);
4799
- --combobox-input-border-focus-glow-color: var(
4800
- --field-border-color-focus-glow
4801
- );
4802
- --combobox-input-error-border-color: var(--field-border-color-error);
4803
- --combobox-input-error-focus-border-color: var(
4804
- --field-border-color-error-hover
4805
- );
4806
- --combobox-input-error-focus-border-glow-color: var(
4807
- --field-border-color-focus-glow
4808
- );
4809
- --combobox-input-font-color: var(--field-content-color);
4810
4919
  --combobox-option-font-color: var(--text-color-light);
4811
4920
  --combobox-option-hover-background-color: var(--accent-dark);
4812
4921
  --combobox-option-description-font-color: var(--accent-light);
@@ -4815,54 +4924,101 @@ button.Accordion__trigger {
4815
4924
  --combobox-option-selected-icon-color: var(--accent-success-light);
4816
4925
  }
4817
4926
 
4818
- .Combobox {
4819
- --field-listbox-selected-background-color: transparent;
4820
- position: relative;
4927
+ .Combobox :where(.TextFieldWrapper) {
4928
+ --text-field-wrapper-border-color: var(
4929
+ --combobox-input-border-color,
4930
+ var(--field-border-color)
4931
+ );
4932
+ --text-field-wrapper-background-color: var(
4933
+ --combobox-input-background-color,
4934
+ var(--field-background-color)
4935
+ );
4936
+ --text-field-wrapper-border-focus-color: var(
4937
+ --combobox-input-border-focus-color,
4938
+ var(--field-border-color-focus)
4939
+ );
4940
+ --text-field-wrapper-border-hover-color: var(
4941
+ --combobox-input-border-hover-color,
4942
+ var(--field-border-color-focus-hover)
4943
+ );
4944
+ --text-field-wrapper-border-focus-glow-color: var(
4945
+ --combobox-input-border-focus-glow-color,
4946
+ var(--field-border-color-focus-glow)
4947
+ );
4948
+ --text-field-wrapper-error-border-color: var(
4949
+ --combobox-input-error-border-color,
4950
+ var(--field-border-color-error)
4951
+ );
4952
+ --text-field-wrapper-error-focus-border-color: var(
4953
+ --combobox-input-error-focus-border-color,
4954
+ var(--field-border-color-error-hover)
4955
+ );
4956
+ --text-field-wrapper-error-focus-border-glow-color: var(
4957
+ --combobox-input-error-focus-border-glow-color,
4958
+ var(--field-border-color-focus-glow)
4959
+ );
4960
+ --text-field-wrapper-font-size: var(
4961
+ --combobox-input-font-size,
4962
+ var(--field-font-size)
4963
+ );
4964
+ --text-field-wrapper-font-color: var(
4965
+ --combobox-input-font-color,
4966
+ var(--field-content-color)
4967
+ );
4821
4968
  }
4822
4969
 
4823
- .Combobox input:is(*, :focus, :hover) {
4824
- border: none;
4825
- box-shadow: none;
4826
- margin: initial;
4827
- padding: var(--space-smallest);
4970
+ .cauldron--theme-dark .Combobox :where(.TextFieldWrapper) {
4971
+ --text-field-wrapper-border-color: var(
4972
+ --combobox-input-border-color,
4973
+ var(--field-border-color)
4974
+ );
4975
+ --text-field-wrapper-background-color: var(
4976
+ --combobox-input-background-color,
4977
+ var(--field-background-color)
4978
+ );
4979
+ --text-field-wrapper-border-focus-color: var(
4980
+ --combobox-input-border-focus-color,
4981
+ var(--field-border-color-focus)
4982
+ );
4983
+ --text-field-wrapper-border-hover-color: var(
4984
+ --combobox-input-border-hover-color,
4985
+ var(--field-border-color-focus-hover)
4986
+ );
4987
+ --text-field-wrapper-border-focus-glow-color: var(
4988
+ --combobox-input-border-focus-glow-color,
4989
+ var(--field-border-color-focus-glow)
4990
+ );
4991
+ --text-field-wrapper-error-border-color: var(
4992
+ --combobox-input-error-border-color,
4993
+ var(--field-border-color-error)
4994
+ );
4995
+ --text-field-wrapper-error-focus-border-color: var(
4996
+ --combobox-input-error-focus-border-color,
4997
+ var(--field-border-color-error-hover)
4998
+ );
4999
+ --text-field-wrapper-error-focus-border-glow-color: var(
5000
+ --combobox-input-error-focus-border-glow-color,
5001
+ var(--field-border-color-focus-glow)
5002
+ );
5003
+ --text-field-wrapper-font-size: var(
5004
+ --combobox-input-font-size,
5005
+ var(--field-font-size)
5006
+ );
5007
+ --text-field-wrapper-font-color: var(
5008
+ --combobox-input-font-color,
5009
+ var(--field-content-color)
5010
+ );
4828
5011
  }
4829
5012
 
4830
- .Combobox__input {
5013
+ .Combobox {
5014
+ --field-listbox-selected-background-color: transparent;
4831
5015
  position: relative;
4832
- display: flex;
4833
- align-items: center;
4834
- border: 1px solid var(--combobox-input-border-color);
4835
- border-bottom: 1px solid var(--field-border-color-underline);
4836
- margin-bottom: var(--space-half);
4837
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
4838
- background-color: var(--combobox-input-background-color);
4839
- }
4840
-
4841
- .cauldron--theme-dark .Combobox__input {
4842
- border: 1px solid var(--combobox-input-border-color);
4843
- }
4844
-
4845
- .cauldron--theme-dark .Combobox__input--error {
4846
- border: 1px solid var(--combobox-input-error-border-color);
4847
- }
4848
-
4849
- .Combobox__input:hover {
4850
- border-color: var(--combobox-input-border-hover-color);
4851
5016
  }
4852
5017
 
4853
- .Combobox__input input[type='text'] {
4854
- font-size: var(--combobox-input-font-size);
4855
- color: var(--combobox-input-font-color);
5018
+ .Combobox .TextFieldWrapper input[type='text'] {
4856
5019
  margin-right: 1.25rem;
4857
5020
  }
4858
5021
 
4859
- .Combobox__input:focus-within {
4860
- border: 1px solid var(--combobox-input-border-focus-color);
4861
- box-shadow: 0 0 0 1px var(--combobox-input-border-focus-color),
4862
- 0 0 5px var(--combobox-input-border-focus-glow-color),
4863
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
4864
- }
4865
-
4866
5022
  .Combobox__arrow {
4867
5023
  width: 2rem;
4868
5024
  display: flex;
@@ -4918,7 +5074,7 @@ button.Accordion__trigger {
4918
5074
  border-color: var(--combobox-listbox-border-color);
4919
5075
  }
4920
5076
 
4921
- /*
5077
+ /*
4922
5078
  * Note: Firefox doesn't yet have full support for :has, so .Combobox__listbox--open
4923
5079
  * is provided as a fallback selector to indicate open listboxes
4924
5080
  * see: https://caniuse.com/css-has
@@ -4999,32 +5155,6 @@ button.Accordion__trigger {
4999
5155
  font-size: var(--combobox-option-description-font-size);
5000
5156
  }
5001
5157
 
5002
- .Combobox__input--error {
5003
- border: 1px solid var(--combobox-input-error-border-color);
5004
- box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
5005
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
5006
- }
5007
-
5008
- .Combobox__input--error:focus-within {
5009
- border: 1px solid var(--combobox-input-error-border-color);
5010
- box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
5011
- 0 0 5px var(--field-border-color-error-focus-glow),
5012
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
5013
- }
5014
-
5015
- .Combobox__input--error:focus-within:hover {
5016
- border: 1px solid var(--combobox-input-error-border-color);
5017
- box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
5018
- 0 0 5px var(--field-border-color-error-focus-glow),
5019
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
5020
- }
5021
-
5022
- .Combobox__input--error:hover {
5023
- border: 1px solid var(--combobox-input-error-border-color);
5024
- box-shadow: 0 0 0 1px var(--combobox-input-error-border-color),
5025
- inset 0 1px 2px rgba(0, 0, 0, 0.05);
5026
- }
5027
-
5028
5158
  .ComboboxListbox__empty {
5029
5159
  padding: var(--space-smaller);
5030
5160
  text-align: center;
@@ -5100,3 +5230,98 @@ button.Accordion__trigger {
5100
5230
  border: 1px solid var(--timeline-mark-border-color);
5101
5231
  transform: translateX(-1px);
5102
5232
  }
5233
+
5234
+ .SearchField :where(.TextFieldWrapper) {
5235
+ --text-field-wrapper-border-color: var(
5236
+ --search-field-border-color,
5237
+ var(--field-border-color)
5238
+ );
5239
+ --text-field-wrapper-background-color: var(
5240
+ --search-field-background-color,
5241
+ var(--field-background-color)
5242
+ );
5243
+ --text-field-wrapper-border-focus-color: var(
5244
+ --search-field-border-focus-color,
5245
+ var(--field-border-color-focus)
5246
+ );
5247
+ --text-field-wrapper-border-hover-color: var(
5248
+ --search-field-border-hover-color,
5249
+ var(--field-border-color-focus-hover)
5250
+ );
5251
+ --text-field-wrapper-border-focus-glow-color: var(
5252
+ --search-field-border-focus-glow-color,
5253
+ var(--field-border-color-focus-glow)
5254
+ );
5255
+ --text-field-wrapper-error-border-color: var(
5256
+ --search-field-error-border-color,
5257
+ var(--field-border-color-error)
5258
+ );
5259
+ --text-field-wrapper-error-focus-border-color: var(
5260
+ --search-field-error-focus-border-color,
5261
+ var(--field-border-color-error-hover)
5262
+ );
5263
+ --text-field-wrapper-error-focus-border-glow-color: var(
5264
+ --search-field-error-focus-border-glow-color,
5265
+ var(--field-border-color-focus-glow)
5266
+ );
5267
+ --text-field-wrapper-font-size: var(
5268
+ --search-field-font-size,
5269
+ var(--field-font-size)
5270
+ );
5271
+ --text-field-wrapper-font-color: var(
5272
+ --search-field-font-color,
5273
+ var(--field-content-color)
5274
+ );
5275
+ }
5276
+
5277
+ .cauldron--theme-dark .SearchField :where(.TextFieldWrapper) {
5278
+ --text-field-wrapper-border-color: var(
5279
+ --search-field-border-color,
5280
+ var(--field-border-color)
5281
+ );
5282
+ --text-field-wrapper-background-color: var(
5283
+ --search-field-background-color,
5284
+ var(--field-background-color)
5285
+ );
5286
+ --text-field-wrapper-border-focus-color: var(
5287
+ --search-field-border-focus-color,
5288
+ var(--field-border-color-focus)
5289
+ );
5290
+ --text-field-wrapper-border-hover-color: var(
5291
+ --search-field-border-hover-color,
5292
+ var(--field-border-color-focus-hover)
5293
+ );
5294
+ --text-field-wrapper-border-focus-glow-color: var(
5295
+ --search-field-border-focus-glow-color,
5296
+ var(--field-border-color-focus-glow)
5297
+ );
5298
+ --text-field-wrapper-error-border-color: var(
5299
+ --search-field-error-border-color,
5300
+ var(--field-border-color-error)
5301
+ );
5302
+ --text-field-wrapper-error-focus-border-color: var(
5303
+ --search-field-error-focus-border-color,
5304
+ var(--field-border-color-error-hover)
5305
+ );
5306
+ --text-field-wrapper-error-focus-border-glow-color: var(
5307
+ --search-field-error-focus-border-glow-color,
5308
+ var(--field-border-color-focus-glow)
5309
+ );
5310
+ --text-field-wrapper-font-size: var(
5311
+ --search-field-font-size,
5312
+ var(--field-font-size)
5313
+ );
5314
+ --text-field-wrapper-font-color: var(
5315
+ --search-field-font-color,
5316
+ var(--field-content-color)
5317
+ );
5318
+ }
5319
+
5320
+ .SearchField__search-icon {
5321
+ color: var(--search-field-icon-color);
5322
+ margin-left: var(--space-smallest);
5323
+ }
5324
+
5325
+ .SearchField input::-webkit-search-cancel-button {
5326
+ margin-left: var(--space-smallest);
5327
+ }