@deque/cauldron-styles 6.2.1 → 6.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.css +1316 -1068
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -342,1375 +342,1519 @@ 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
- );
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;
891
896
  }
892
897
 
893
- .cauldron--theme-dark .IconButton--primary {
894
- border: 2px solid var(--icon-button-border-color-primary);
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;
895
902
  }
896
903
 
897
- .cauldron--theme-dark .IconButton--secondary {
898
- border-width: 2px;
904
+ .Field__label:hover ~ .Radio__overlay:not(.Radio__overlay--disabled),
905
+ .Radio__overlay:hover:not(.Radio__overlay--disabled) {
906
+ border: 1px solid currentColor;
899
907
  }
900
908
 
901
- .cauldron--theme-dark .IconButton--error {
902
- border: 2px solid var(--icon-button-border-color-error);
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;
903
917
  }
904
918
 
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);
919
+ .Field__label:hover ~ .Checkbox__overlay:not(.Checkbox__overlay--disabled),
920
+ .Checkbox__overlay:hover:not(.Checkbox__overlay--disabled) {
921
+ border: 1px solid currentColor;
912
922
  }
913
923
 
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);
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);
918
943
  }
919
944
 
920
- .cauldron--theme-dark
921
- .IconButton:is([aria-disabled='true'], [disabled]):active {
922
- color: var(--icon-button-disabled-color);
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);
923
963
  }
924
964
 
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);
965
+ .TextFieldWrapper input:is(*, :focus, :hover) {
966
+ border: none;
967
+ box-shadow: none;
968
+ margin: initial;
969
+ padding: var(--space-smallest);
931
970
  }
932
971
 
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);
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);
939
981
  }
940
982
 
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);
983
+ .cauldron--theme-dark .TextFieldWrapper {
984
+ border: 1px solid var(--text-field-wrapper-border-color);
945
985
  }
946
986
 
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);
987
+ .cauldron--theme-dark .TextFieldWrapper--error {
988
+ border: 1px solid var(--text-field-wrapper-error-border-color);
950
989
  }
951
990
 
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);
991
+ .TextFieldWrapper:hover {
992
+ border-color: var(--text-field-wrapper-border-hover-color);
961
993
  }
962
994
 
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;
995
+ .TextFieldWrapper input {
996
+ font-size: var(--text-field-wrapper-font-size);
997
+ color: var(--text-field-wrapper-font-color);
969
998
  }
970
999
 
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);
1000
+ .TextFieldWrapper > :not(input) {
1001
+ flex-shrink: 0;
979
1002
  }
980
1003
 
981
- .Dialog.Dialog--show {
982
- display: block;
1004
+ .TextFieldWrapper:focus-within {
1005
+ border: 1px solid var(--text-field-wrapper-border-focus-color);
1006
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-border-focus-color),
1007
+ 0 0 5px var(--text-field-wrapper-border-focus-glow-color),
1008
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
983
1009
  }
984
1010
 
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);
1011
+ .TextFieldWrapper--error {
1012
+ border: 1px solid var(--text-field-wrapper-error-border-color);
1013
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
1014
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
998
1015
  }
999
1016
 
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);
1017
+ .TextFieldWrapper--error:focus-within {
1018
+ border: 1px solid var(--text-field-wrapper-error-border-color);
1019
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
1020
+ 0 0 5px var(--field-border-color-error-focus-glow),
1021
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
1010
1022
  }
1011
1023
 
1012
- .Dialog__heading,
1013
- .Dialog__close {
1014
- margin: 0;
1015
- font-size: var(--text-size-small);
1024
+ .TextFieldWrapper--error:focus-within:hover {
1025
+ border: 1px solid var(--text-field-wrapper-error-border-color);
1026
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
1027
+ 0 0 5px var(--field-border-color-error-focus-glow),
1028
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
1016
1029
  }
1017
1030
 
1018
- .Dialog__heading {
1019
- display: flex;
1020
- align-items: center;
1021
- margin-left: var(--dialog-padding);
1031
+ .TextFieldWrapper--error:hover {
1032
+ border: 1px solid var(--text-field-wrapper-error-border-color);
1033
+ box-shadow: 0 0 0 1px var(--text-field-wrapper-error-border-color),
1034
+ inset 0 1px 2px rgba(0, 0, 0, 0.05);
1022
1035
  }
1023
1036
 
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;
1037
+ .TextFieldWrapper:has(input:is([disabled], [aria-disabled='true'])),
1038
+ .TextFieldWrapper--disabled {
1039
+ background-color: var(--field-background-color-disabled);
1040
+ border: 1px solid var(--field-border-color);
1035
1041
  }
1036
1042
 
1037
- .Dialog__close:active {
1038
- background-color: var(--dialog-border-color);
1043
+ .TextFieldWrapper--diabled:focus-within {
1044
+ border: 1px solid var(--field-border-color);
1039
1045
  }
1040
1046
 
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;
1047
+ .TextFieldWrapper--diabled:focus-within:hover {
1048
+ border: 1px solid var(--field-border-color);
1050
1049
  }
1051
1050
 
1052
- .cauldron--theme-dark .Dialog__close:before {
1053
- top: -3px;
1054
- right: -3px;
1055
- bottom: -3px;
1056
- left: -3px;
1051
+ .TextFieldWrapper--diabled:hover {
1052
+ border: 1px solid var(--field-border-color);
1057
1053
  }
1058
1054
 
1059
- .Dialog__close:is(:hover, :focus):before {
1060
- box-shadow: 0 0 0 1px var(--dialog-heading-text-color);
1061
- }
1055
+ :root {
1056
+ --alert-warning-background-color: #d93251;
1057
+ --alert-warning-header-text-color: #fff;
1062
1058
 
1063
- .Dialog__close svg {
1064
- /* match icon size with height/width of button */
1065
- --icon-size: 100%;
1066
- }
1059
+ --alert-border-color: var(--accent-primary);
1060
+ --alert-warning-border-color: var(--accent-error);
1067
1061
 
1068
- .cauldron--theme-dark .Dialog__close {
1069
- border-width: 2px;
1062
+ --alert-icon-color: var(--accent-primary);
1063
+ --alert-warning-icon-color: var(--accent-error);
1070
1064
  }
1071
1065
 
1072
- .Dialog__content {
1073
- padding: var(--dialog-padding);
1074
- }
1066
+ .cauldron--theme-dark {
1067
+ --alert-border-color: var(--accent-info);
1068
+ --alert-warning-border-color: var(--accent-danger);
1075
1069
 
1076
- .Dialog__content p:first-child {
1077
- margin-top: 0;
1070
+ --alert-icon-color: var(--accent-info);
1071
+ --alert-warning-icon-color: var(--accent-danger);
1078
1072
  }
1079
1073
 
1080
- .Dialog__content p:last-child {
1081
- margin-bottom: 0;
1074
+ .Alert .Dialog__header .Icon {
1075
+ padding-right: var(--space-smallest);
1076
+ color: var(--alert-icon-color);
1082
1077
  }
1083
1078
 
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);
1079
+ .Alert .Dialog__inner {
1080
+ border: 3px solid var(--alert-border-color);
1088
1081
  }
1089
1082
 
1090
- /**
1091
- * style for info modal
1092
- */
1093
-
1094
- .Modal--info .Dialog__header {
1095
- background-color: transparent;
1083
+ .Alert__warning .Dialog__header .Icon {
1084
+ color: var(--alert-warning-icon-color);
1096
1085
  }
1097
1086
 
1098
- .Modal--info .Dialog__content {
1099
- display: flex;
1100
- flex-direction: column;
1101
- align-items: center;
1087
+ .Alert__warning .Dialog__inner {
1088
+ border: 3px solid var(--alert-warning-border-color);
1102
1089
  }
1103
1090
 
1104
- .Modal--info .Dialog__footer {
1091
+ .Alert .Dialog__footer {
1092
+ border-top: none;
1093
+ padding-top: 0;
1105
1094
  display: flex;
1106
1095
  justify-content: center;
1107
1096
  background-color: transparent;
1097
+ }
1098
+
1099
+ .cauldron--theme-dark .Alert .Dialog__footer {
1108
1100
  border-top: none;
1109
- padding-top: 0;
1101
+ background: transparent;
1110
1102
  }
1111
1103
 
1112
- /* Dark Theme */
1113
-
1114
- .cauldron--theme-dark .Dialog__inner {
1115
- color: var(--white);
1116
- border-width: 4px;
1104
+ .FadeIn,
1105
+ .FadeIn--flex.FadeIn {
1106
+ opacity: 1;
1107
+ transition: opacity 400ms;
1117
1108
  }
1118
1109
 
1119
- .cauldron--theme-dark .Dialog__header {
1120
- border-bottom: 1px solid var(--stroke-dark);
1110
+ .FadeIn--flex {
1111
+ display: flex;
1112
+ opacity: 0;
1113
+ transition: opacity 400ms;
1121
1114
  }
1122
1115
 
1123
- .cauldron--theme-dark .Dialog__footer {
1124
- border-top: 1px solid var(--stroke-dark);
1125
- }
1116
+ :root {
1117
+ --button-background-color-primary: var(--accent-primary);
1118
+ --button-background-color-primary-disabled: #79a7d9;
1119
+ --button-outline-color-primary: var(--button-background-color-primary);
1120
+ --button-background-color-primary-active: var(--accent-primary-active);
1126
1121
 
1127
- .cauldron--theme-dark .Dialog__header,
1128
- .cauldron--theme-dark .Dialog__footer {
1129
- color: var(--gray-20);
1130
- }
1122
+ --button-background-color-secondary: var(--gray-20);
1123
+ --button-background-color-secondary-disabled: var(--gray-30);
1124
+ --button-outline-color-secondary: var(--gray-90);
1125
+ --button-background-color-secondary-active: var(--gray-30);
1131
1126
 
1132
- .cauldron--theme-dark .Dialog__close {
1133
- color: var(--gray-20);
1127
+ --button-background-color-error: var(--error);
1128
+ --button-background-color-error-disabled: #db6379;
1129
+ --button-background-color-error-active: var(--accent-error-active);
1130
+ --button-outline-color-error: var(--error);
1131
+
1132
+ --button-text-color-dark: var(--gray-90);
1133
+ --button-text-color-light: var(--white);
1134
+ --button-focus-ring-color: var(--focus-light);
1135
+ --button-thin-height: 23px;
1136
+
1137
+ --button-height: 36px;
1134
1138
  }
1135
1139
 
1136
- .cauldron--theme-dark .Dialog__close:active {
1137
- color: var(--accent-medium);
1140
+ .Button--primary,
1141
+ .Button--secondary,
1142
+ .Button--clear,
1143
+ .Button--error {
1144
+ border-radius: 3px;
1145
+ border: 1px solid transparent;
1146
+ font-size: var(--text-size-small);
1147
+ box-sizing: border-box;
1148
+ padding: 0 16px;
1149
+ position: relative;
1150
+ text-align: center;
1151
+ min-height: var(--button-height);
1152
+ min-width: 100px;
1153
+ display: inline-grid;
1154
+ grid-auto-flow: column;
1155
+ align-items: center;
1156
+ justify-items: center;
1157
+ gap: 8px;
1138
1158
  }
1139
1159
 
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;
1160
+ .Button--tag {
1161
+ position: relative;
1144
1162
  }
1145
1163
 
1146
- .cauldron--theme-dark .Modal--info .Dialog__footer {
1147
- border-top: none;
1164
+ button.Link {
1165
+ cursor: pointer;
1166
+ font-size: inherit;
1148
1167
  }
1149
1168
 
1150
- .text--largest {
1151
- font-size: var(--text-size-largest);
1169
+ .Button--primary:focus,
1170
+ .Button--secondary:focus,
1171
+ .Button--clear:focus,
1172
+ .Button--error:focus {
1173
+ outline: none;
1152
1174
  }
1153
1175
 
1154
- .text--larger {
1155
- font-size: var(--text-size-larger);
1176
+ .Button--primary:before,
1177
+ .Button--secondary:before,
1178
+ .Button--clear:before,
1179
+ .Button--error:before,
1180
+ .Button--tag:before {
1181
+ content: '';
1182
+ position: absolute;
1183
+ top: -2px;
1184
+ right: -2px;
1185
+ bottom: -2px;
1186
+ left: -2px;
1187
+ border-radius: 3px;
1188
+ pointer-events: none;
1156
1189
  }
1157
1190
 
1158
- .text--large {
1159
- font-size: var(--text-size-large);
1191
+ .Button--tag:before {
1192
+ border-radius: 11px;
1160
1193
  }
1161
1194
 
1162
- .text--large-medium {
1163
- font-size: var(--text-size-large-medium);
1195
+ .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
1196
+ box-shadow: 0 0 0 1px var(--button-outline-color-primary);
1164
1197
  }
1165
1198
 
1166
- .text--medium {
1167
- font-size: var(--text-size-medium);
1199
+ .Button--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
1200
+ box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
1168
1201
  }
1169
1202
 
1170
- .text--normal {
1171
- font-size: var(--text-size-normal);
1203
+ .Button--error:not([disabled]):not([aria-disabled='true']):hover:before {
1204
+ box-shadow: 0 0 0 1px var(--button-outline-color-error);
1172
1205
  }
1173
1206
 
1174
- .text--small-medium {
1175
- font-size: var(--text-small-medium);
1207
+ .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
1208
+ box-shadow: 0 0 0 1px var(--button-outline-color-secondary);
1176
1209
  }
1177
1210
 
1178
- .text--small {
1179
- font-size: var(--text-size-small);
1211
+ .Button--primary:focus:before,
1212
+ .Button--secondary:focus:before,
1213
+ .Button--error:focus:before {
1214
+ box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
1180
1215
  }
1181
1216
 
1182
- .text--smaller {
1183
- font-size: var(--text-size-smaller);
1217
+ .Button--primary {
1218
+ background-color: var(--button-background-color-primary);
1219
+ color: var(--button-text-color-light);
1184
1220
  }
1185
1221
 
1186
- .text--smallest {
1187
- font-size: var(--text-size-smallest);
1222
+ .Button--primary[aria-disabled='true'],
1223
+ .Button--primary[disabled] {
1224
+ background-color: var(--button-background-color-primary-disabled);
1188
1225
  }
1189
1226
 
1190
- .weight--thin {
1191
- font-weight: var(--font-weight-thin);
1227
+ .Button--primary:not([disabled]):not([aria-disabled='true']):active {
1228
+ background: var(--button-background-color-primary-active);
1192
1229
  }
1193
1230
 
1194
- .weight--light {
1195
- font-weight: var(--font-weight-light);
1231
+ .Button--secondary {
1232
+ background-color: var(--button-background-color-secondary);
1233
+ color: var(--button-text-color-dark);
1234
+ border: 1px solid var(--field-border-color);
1196
1235
  }
1197
1236
 
1198
- .weight--normal {
1199
- font-weight: var(--font-weight-normal);
1237
+ .Button--secondary[aria-disabled='true'],
1238
+ .Button--secondary[disabled] {
1239
+ color: var(--disabled);
1240
+ background-color: var(--button-background-color-secondary-disabled);
1200
1241
  }
1201
1242
 
1202
- .weight--medium {
1203
- font-weight: var(--font-weight-medium);
1243
+ .Button--secondary:not([disabled]):not([aria-disabled='true']):active {
1244
+ background-color: var(--button-background-color-secondary-active);
1204
1245
  }
1205
1246
 
1206
- .weight--bold {
1207
- font-weight: var(--font-weight-bold);
1247
+ .Button--error {
1248
+ background-color: var(--error);
1249
+ box-shadow: none;
1250
+ color: var(--button-text-color-light);
1251
+ --button-hover-outline-color: var(--error);
1208
1252
  }
1209
1253
 
1210
- .weight--ultra-bold {
1211
- font-weight: var(--font-weight-ultra-bold);
1254
+ .Button--error[aria-disabled='true'],
1255
+ .Button--error[disabled] {
1256
+ color: var(--button-text-color-light);
1257
+ background-color: var(--button-background-color-error-disabled);
1212
1258
  }
1213
1259
 
1214
- .text--align-left {
1215
- text-align: left !important;
1216
- justify-content: left !important;
1260
+ .Button--error:not([disabled]):not([aria-disabled='true']):active {
1261
+ background-color: var(--button-background-color-error-active);
1217
1262
  }
1218
1263
 
1219
- .text--align-center {
1220
- text-align: center !important;
1221
- justify-content: center !important;
1264
+ .Button--tag[aria-disabled='true'],
1265
+ .Button--tag[disabled] {
1266
+ color: var(--disabled);
1222
1267
  }
1223
1268
 
1224
- .text--align-right {
1225
- text-align: right !important;
1226
- justify-content: right !important;
1269
+ .Button--primary .Icon,
1270
+ .Button--secondary .Icon,
1271
+ .Button--clear .Icon,
1272
+ .Button--error .Icon {
1273
+ margin: 0 -4px;
1227
1274
  }
1228
1275
 
1229
- body .is--hidden {
1230
- display: none;
1276
+ .Button--thin .Icon svg {
1277
+ width: calc(var(--button-thin-height) - 8px);
1278
+ height: calc(var(--button-thin-height) - 8px);
1231
1279
  }
1232
1280
 
1233
- .is--flex-row {
1234
- display: flex;
1235
- align-items: center;
1281
+ .DefinitionButton {
1282
+ display: inline;
1283
+ vertical-align: baseline;
1284
+ position: relative;
1236
1285
  }
1237
1286
 
1238
- ul.semantic-only {
1239
- margin: 0;
1287
+ .DefinitionButton button {
1288
+ background-color: transparent;
1289
+ color: var(--text-color-base);
1290
+ font-weight: var(--font-weight-normal);
1291
+ border-bottom: 1px dotted;
1292
+ display: inline-block;
1293
+ margin: 0 2px;
1240
1294
  padding: 0;
1241
- list-style-type: none;
1295
+ font-size: inherit;
1296
+ vertical-align: baseline;
1297
+ cursor: auto;
1298
+ -moz-user-select: text;
1299
+ user-select: text;
1242
1300
  }
1243
1301
 
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);
1302
+ .Button--thin {
1303
+ min-height: var(--button-thin-height);
1304
+ min-width: 100px;
1305
+ font-size: var(--text-size-smallest);
1306
+ padding: 0 16px;
1307
+ }
1308
+
1309
+ [class*='Button--'] + [class*='Button--'] {
1310
+ margin-left: var(--space-smallest);
1277
1311
  }
1278
1312
 
1313
+ /* Dark Theme */
1314
+
1279
1315
  .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);
1316
+ --button-background-color-primary: var(--accent-medium);
1317
+ --button-background-color-primary-disabled: var(--accent-medium);
1318
+ --button-background-color-secondary: var(--accent-medium);
1319
+ --button-background-color-secondary-disabled: var(--accent-medium);
1320
+ --button-background-color-error-disabled: var(--accent-medium);
1321
+
1322
+ --button-background-color-primary-active: #a7e9f7;
1323
+ --button-background-color-secondary-active: var(--accent-light);
1324
+ --button-background-color-error-active: #fea7a6;
1325
+
1326
+ --button-focus-ring-color: var(--focus-dark);
1327
+ --field-label-text-color: var(--accent-light);
1287
1328
  --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);
1329
+ --error: var(--accent-danger);
1305
1330
  }
1306
1331
 
1307
- input,
1308
- select,
1309
- textarea,
1310
- [role='menuitemcheckbox'],
1311
- [role='menuitemradio'],
1312
- [role='textbox'],
1313
- [role='listbox'],
1314
- [role='spinbutton'] {
1332
+ .cauldron--theme-dark .Button--primary {
1333
+ border: 2px solid var(--accent-info);
1334
+ }
1335
+
1336
+ .cauldron--theme-dark .Button--secondary {
1337
+ color: var(--accent-light);
1338
+ border: 2px solid var(--accent-light);
1339
+ }
1340
+
1341
+ .cauldron--theme-dark .Button--error {
1342
+ background-color: var(--accent-medium);
1343
+ color: var(--white);
1344
+ border: 2px solid var(--accent-danger);
1345
+ }
1346
+
1347
+ .cauldron--theme-dark .Button--primary[aria-disabled='true'],
1348
+ .cauldron--theme-dark .Button--primary[disabled],
1349
+ .cauldron--theme-dark .Button--secondary[aria-disabled='true'],
1350
+ .cauldron--theme-dark .Button--secondary[disabled],
1351
+ .cauldron--theme-dark .Button--error[aria-disabled='true'],
1352
+ .cauldron--theme-dark .Button--error[disabled],
1353
+ .cauldron--theme-dark .Button--tag[disabled] {
1354
+ color: var(--dark-workspace-color);
1355
+ }
1356
+
1357
+ .cauldron--theme-dark
1358
+ .Button--primary:not([disabled]):not([aria-disabled='true']):active,
1359
+ .cauldron--theme-dark
1360
+ .Button--secondary:not([disabled]):not([aria-disabled='true']):active {
1361
+ color: var(--accent-medium);
1362
+ }
1363
+
1364
+ .cauldron--theme-dark
1365
+ .Button--error:not([disabled]):not([aria-disabled='true']):active {
1366
+ background-color: #fea7a6;
1367
+ color: var(--accent-medium);
1368
+ }
1369
+
1370
+ .cauldron--theme-dark button.Link {
1371
+ color: var(--accent-light);
1372
+ }
1373
+
1374
+ .cauldron--theme-dark button.Link:hover {
1375
+ color: var(--white);
1376
+ }
1377
+
1378
+ .cauldron--theme-dark
1379
+ .Button--primary:not([disabled]):not([aria-disabled='true']):hover:before {
1380
+ box-shadow: 0 0 0 1px var(--dark-workspace-color),
1381
+ 0 0 0 2px var(--accent-info);
1382
+ }
1383
+
1384
+ .cauldron--theme-dark
1385
+ .Button--secondary:not([disabled]):not([aria-disabled='true']):hover:before {
1386
+ box-shadow: 0 0 0 1px var(--dark-workspace-color),
1387
+ 0 0 0 2px var(--accent-light);
1388
+ }
1389
+
1390
+ .cauldron--theme-dark
1391
+ .Button--error:not([disabled]):not([aria-disabled='true']):hover:before {
1392
+ box-shadow: 0 0 0 1px var(--dark-workspace-color),
1393
+ 0 0 0 2px var(--accent-danger);
1394
+ }
1395
+
1396
+ .cauldron--theme-dark
1397
+ .Button--tag:not([disabled]):not([aria-disabled='true']):hover:before {
1398
+ box-shadow: 0 0 0 1px var(--dark-workspace-color),
1399
+ 0 0 0 2px var(--accent-info);
1400
+ }
1401
+
1402
+ :root {
1403
+ /* Primary */
1404
+ --icon-button-primary-color: var(--button-text-color-light);
1405
+ --icon-button-background-color-primary: var(
1406
+ --button-background-color-primary
1407
+ );
1408
+ --icon-button-background-color-primary-active: var(
1409
+ --button-background-color-primary-active
1410
+ );
1411
+ --icon-button-outline-color-primary: var(--button-outline-color-primary);
1412
+
1413
+ --icon-button-large-height: var(--button-height);
1414
+
1415
+ /* Secondary */
1416
+ --icon-button-secondary-color: var(--button-text-color-dark);
1417
+ --icon-button-background-color-secondary: var(
1418
+ --button-background-color-secondary
1419
+ );
1420
+ --icon-button-background-color-secondary-active: var(
1421
+ --button-background-color-secondary-active
1422
+ );
1423
+ --icon-button-outline-color-secondary: var(--button-outline-color-secondary);
1424
+ --icon-button-border-color-secondary: var(--gray-40);
1425
+
1426
+ /* Error */
1427
+ --icon-button-background-color-error: var(--button-background-color-error);
1428
+ --icon-button-outline-color-error: var(--button-outline-color-error);
1429
+ --icon-button-background-color-error-active: var(
1430
+ --button-background-color-error-active
1431
+ );
1432
+
1433
+ /* Deprecated variables */
1434
+ --icon-button-content-color-light-disabled: #ccc;
1435
+ --icon-button-background-color-light: #dadada;
1436
+ --icon-button-background-color-light-active: #c2c2c2;
1437
+ --icon-button-outline-color-light: var(--icon-button-background-color-light);
1438
+
1439
+ --icon-button-content-color-dark-disabled: #fff 40%;
1440
+ --icon-button-background-color-dark: var(--accent-medium);
1441
+ --icon-button-background-color-dark-disabled: var(--accent-medium);
1442
+ --icon-button-background-color-dark-active: var(--accent-dark);
1443
+ --icon-button-outline-color-dark: var(--icon-button-background-color-dark);
1444
+ --icon-button-background-color-secondary-disabled: var(
1445
+ --button-background-color-secondary-disabled
1446
+ );
1447
+ --icon-button-background-color-error-disabled: var(
1448
+ --button-background-color-error-disabled
1449
+ );
1450
+ }
1451
+
1452
+ .IconButton {
1453
+ position: relative;
1454
+ display: inline-flex;
1455
+ justify-content: center;
1456
+ align-content: center;
1457
+ align-items: center;
1458
+ height: var(--button-thin-height);
1459
+ width: var(--button-thin-height);
1460
+ border-radius: 3px;
1461
+ border: 1px solid transparent;
1462
+ background-color: var(--icon-button-background-color);
1463
+ color: var(--icon-button-icon-color);
1464
+ margin: 2px;
1465
+ padding: 0;
1466
+ }
1467
+
1468
+ /* Ensure both <a> and <button> IconButtons are aligned correctly. See #846. */
1469
+
1470
+ a.IconButton {
1471
+ vertical-align: middle;
1472
+ line-height: unset;
1473
+ }
1474
+
1475
+ .IconButton .Icon {
1476
+ height: var(--space-small);
1477
+ width: var(--space-small);
1478
+ pointer-events: none;
1479
+ }
1480
+
1481
+ .IconButton .Icon svg {
1315
1482
  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);
1483
+ height: 100%;
1321
1484
  }
1322
1485
 
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);
1486
+ .IconButton:focus {
1487
+ outline: none;
1332
1488
  }
1333
1489
 
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);
1490
+ .IconButton:before {
1491
+ content: '';
1492
+ position: absolute;
1493
+ top: -2px;
1494
+ right: -2px;
1495
+ bottom: -2px;
1496
+ left: -2px;
1497
+ border-radius: 3px;
1498
+ pointer-events: none;
1347
1499
  }
1348
1500
 
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);
1501
+ .IconButton--large {
1502
+ height: var(--icon-button-large-height);
1503
+ width: var(--icon-button-large-height);
1358
1504
  }
1359
1505
 
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);
1506
+ .IconButton--secondary:is([aria-disabled='true'], [disabled]),
1507
+ .IconButton--secondary:is([aria-disabled='true'], [disabled]):active {
1508
+ color: var(--disabled);
1509
+ background-color: var(--button-background-color-secondary-disabled);
1510
+ cursor: default;
1372
1511
  }
1373
1512
 
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);
1513
+ .IconButton--primary:is([aria-disabled='true'], [disabled]),
1514
+ .IconButton--primary:is([aria-disabled='true'], [disabled]):active {
1515
+ background-color: var(--button-background-color-primary-disabled);
1516
+ cursor: default;
1385
1517
  }
1386
1518
 
1387
- .Checkbox__overlay.Field--has-error {
1388
- color: var(--field-border-color-error);
1519
+ .IconButton--error:is([aria-disabled='true'], [disabled]),
1520
+ .IconButton--error:is([aria-disabled='true'], [disabled]):active {
1521
+ color: var(--button-text-color-light);
1522
+ background-color: var(--button-background-color-error-disabled);
1523
+ cursor: default;
1389
1524
  }
1390
1525
 
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);
1526
+ .IconButton:focus:before {
1527
+ box-shadow: 0 0 1px 2px var(--button-focus-ring-color, --focus);
1395
1528
  }
1396
1529
 
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);
1530
+ .IconButton--primary {
1531
+ background-color: var(--icon-button-background-color-primary);
1532
+ color: var(--icon-button-primary-color);
1406
1533
  }
1407
1534
 
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);
1535
+ .IconButton--primary:not([disabled]):not([aria-disabled='true']):hover:before {
1536
+ box-shadow: 0 0 0 1px var(--icon-button-outline-color-primary);
1420
1537
  }
1421
1538
 
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);
1539
+ .IconButton--primary:active {
1540
+ background-color: var(--icon-button-background-color-primary-active);
1431
1541
  }
1432
1542
 
1433
- [role='listbox'] > li,
1434
- [role='listbox'] > [role='group'] > li {
1435
- list-style-type: none;
1543
+ .IconButton--secondary {
1544
+ border: 1px solid var(--icon-button-border-color-secondary);
1545
+ background-color: var(--icon-button-background-color-secondary);
1546
+ color: var(--icon-button-secondary-color);
1547
+ }
1548
+
1549
+ .IconButton--secondary:not([disabled]):not(
1550
+ [aria-disabled='true']
1551
+ ):hover:before {
1552
+ box-shadow: 0 0 0 1px var(--icon-button-outline-color-secondary);
1436
1553
  }
1437
1554
 
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);
1555
+ .IconButton--secondary:active {
1556
+ background-color: var(--icon-button-background-color-secondary-active);
1441
1557
  }
1442
1558
 
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);
1559
+ .IconButton--error {
1560
+ background-color: var(--icon-button-background-color-error);
1561
+ color: var(--button-text-color-light);
1447
1562
  }
1448
1563
 
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);
1564
+ .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
1565
+ box-shadow: 0 0 0 1px var(--icon-button-outline-color-error);
1454
1566
  }
1455
1567
 
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;
1568
+ .IconButton--error:active {
1569
+ background-color: var(--icon-button-background-color-error-active);
1461
1570
  }
1462
1571
 
1463
- .Field {
1464
- display: block;
1465
- position: relative;
1466
- box-sizing: border-box;
1467
- margin-bottom: var(--space-small);
1572
+ /* Dark Theme */
1573
+
1574
+ .cauldron--theme-dark {
1575
+ --icon-button-icon-color: var(--white);
1576
+ --icon-button-outline-shadow-color: var(--accent-medium);
1577
+ --icon-button-disabled-color: var(--dark-workspace-color);
1578
+ --icon-button-active-color: var(--accent-medium);
1579
+
1580
+ /* Primary */
1581
+ --icon-button-primary-color: var(--white);
1582
+ --icon-button-background-color-primary: var(--accent-medium);
1583
+ --icon-button-background-color-primary-active: var(--accent-info-active);
1584
+ --icon-button-outline-color-primary: var(--accent-info);
1585
+ --icon-button-border-color-primary: var(--accent-info);
1586
+
1587
+ /* Secondary */
1588
+ --icon-button-border-color-secondary: var(--accent-light);
1589
+ --icon-button-background-color-secondary: var(--accent-medium);
1590
+ --icon-button-secondary-color: var(--white);
1591
+ --icon-button-background-color-secondary-active: var(--accent-light);
1592
+ --icon-button-outline-color-secondary: var(--accent-light);
1593
+
1594
+ /* Error */
1595
+ --icon-button-background-color-error: var(--accent-medium);
1596
+ --icon-button-border-color-error: var(--accent-danger);
1597
+ --icon-button-outline-color-error: var(--accent-danger);
1598
+ --icon-button-background-color-error-active: var(
1599
+ --button-background-color-error-active
1600
+ );
1468
1601
  }
1469
1602
 
1470
- .Field.is--flex-row {
1471
- align-items: center;
1603
+ .cauldron--theme-dark .IconButton--primary {
1604
+ border: 2px solid var(--icon-button-border-color-primary);
1472
1605
  }
1473
1606
 
1474
- .Field.is--flex-row .Field__label {
1475
- margin-bottom: 0;
1607
+ .cauldron--theme-dark .IconButton--secondary {
1608
+ border-width: 2px;
1476
1609
  }
1477
1610
 
1478
- .Checkbox__wrap,
1479
- .Radio__wrap {
1480
- margin-bottom: var(--space-smallest);
1611
+ .cauldron--theme-dark .IconButton--error {
1612
+ border: 2px solid var(--icon-button-border-color-error);
1481
1613
  }
1482
1614
 
1483
- .Checkbox__wrap:last-of-type,
1484
- .Radio__wrap:last-of-type {
1485
- margin-bottom: 0;
1615
+ .cauldron--theme-dark
1616
+ .IconButton--primary:is([aria-disabled='true'], [disabled]),
1617
+ .cauldron--theme-dark
1618
+ .IconButton--secondary:is([aria-disabled='true'], [disabled]),
1619
+ .cauldron--theme-dark
1620
+ .IconButton--error:is([aria-disabled='true'], [disabled]) {
1621
+ color: var(--icon-button-disabled-color);
1486
1622
  }
1487
1623
 
1488
- .Radio--inline .Radio__wrap {
1489
- margin-bottom: 0;
1624
+ .cauldron--theme-dark .IconButton--primary:active,
1625
+ .cauldron--theme-dark .IconButton--secondary:active,
1626
+ .cauldron--theme-dark .IconButton--error:active {
1627
+ color: var(--icon-button-active-color);
1490
1628
  }
1491
1629
 
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;
1630
+ .cauldron--theme-dark
1631
+ .IconButton:is([aria-disabled='true'], [disabled]):active {
1632
+ color: var(--icon-button-disabled-color);
1499
1633
  }
1500
1634
 
1501
- .Radio--inline {
1502
- display: flex;
1503
- align-items: baseline;
1504
- flex-wrap: wrap;
1505
- gap: var(--space-small);
1635
+ .cauldron--theme-dark
1636
+ .IconButton--primary:not([disabled]):not(
1637
+ [aria-disabled='true']
1638
+ ):hover:before {
1639
+ box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
1640
+ 0 0 0 2px var(--icon-button-outline-color-primary);
1506
1641
  }
1507
1642
 
1508
- .Checkbox + .Field__labelDescription,
1509
- .Radio + .Field__labelDescription {
1510
- margin-top: var(--space-half);
1511
- margin-bottom: var(--space-small);
1643
+ .cauldron--theme-dark
1644
+ .IconButton--secondary:not([disabled]):not(
1645
+ [aria-disabled='true']
1646
+ ):hover:before {
1647
+ box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
1648
+ 0 0 0 2px var(--icon-button-outline-color-secondary);
1512
1649
  }
1513
1650
 
1514
- .Checkbox__wrap:last-of-type .Checkbox + .Field__labelDescription,
1515
- .Radio__wrap:last-of-type .Radio + .Field__labelDescription {
1516
- margin-bottom: 0;
1651
+ .cauldron--theme-dark
1652
+ .IconButton--error:not([disabled]):not([aria-disabled='true']):hover:before {
1653
+ box-shadow: 0 0 0 1px var(--icon-button-outline-shadow-color),
1654
+ 0 0 0 2px var(--icon-button-outline-color-error);
1517
1655
  }
1518
1656
 
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;
1657
+ .cauldron--theme-dark .IconButton:focus:before {
1658
+ box-shadow: 0 0 0 2px var(--icon-button-outline-shadow-color),
1659
+ 0 0 0 4px var(--button-focus-ring-color, --focus);
1528
1660
  }
1529
1661
 
1530
- .Field__label + .Checkbox__wrap {
1531
- margin-top: var(--space-half);
1662
+ :root {
1663
+ --dialog-background-color: #fff;
1664
+ --dialog-border-color: var(--gray-40);
1665
+ --dialog-header-background-color: var(--gray-20);
1666
+ --dialog-footer-background-color: var(--gray-20);
1667
+ --dialog-heading-text-color: var(--header-text-color-dark);
1668
+ --dialog-padding: var(--space-small);
1669
+ --dialog-header-height: 2.625rem;
1670
+ --dialog-close-button-size: var(--target-size-minimum);
1532
1671
  }
1533
1672
 
1534
- .Field__label + [role^='radiogroup'] {
1535
- margin-top: var(--space-smallest);
1673
+ .cauldron--theme-dark {
1674
+ --dialog-background-color: var(--accent-medium);
1675
+ --dialog-border-color: var(--gray-20);
1676
+ --dialog-header-background-color: var(--accent-dark);
1677
+ --dialog-footer-background-color: var(--accent-dark);
1678
+ --dialog-heading-text-color: #fff;
1536
1679
  }
1537
1680
 
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;
1681
+ .Dialog {
1682
+ display: none;
1683
+ width: 100vw;
1684
+ height: 100vh;
1685
+ overflow-x: auto;
1686
+ position: fixed;
1687
+ top: 0;
1688
+ background-color: var(--scrim-background-color);
1546
1689
  }
1547
1690
 
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);
1691
+ .Dialog.Dialog--show {
1692
+ display: block;
1556
1693
  }
1557
1694
 
1558
- .Field__required-text::before {
1559
- content: ' ';
1560
- color: var(--field-content-color);
1695
+ .Dialog__inner {
1696
+ width: 400px;
1697
+ max-width: 90%;
1698
+ left: 50%;
1699
+ top: 100px;
1700
+ display: flex;
1701
+ flex-direction: column;
1702
+ transform: translateX(-50%);
1703
+ background-color: var(--dialog-background-color);
1704
+ border: 1px solid var(--dialog-border-color);
1705
+ z-index: var(--z-index-dialog);
1706
+ position: relative;
1707
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
1561
1708
  }
1562
1709
 
1563
- .Field__label--has-error .Field__required-text {
1564
- color: var(--field-label-error-text-color);
1710
+ .Dialog__header {
1711
+ display: flex;
1712
+ background-color: var(--dialog-header-background-color);
1713
+ border-bottom: 1px solid var(--dialog-border-color);
1714
+ align-items: center;
1715
+ justify-content: space-between;
1716
+ min-height: var(--dialog-header-height);
1717
+ font-weight: var(--font-weight-bold);
1718
+ padding: var(--space-smallest) 0;
1719
+ gap: var(--space-smallest);
1565
1720
  }
1566
1721
 
1567
- .Field__label--inline {
1568
- display: inline-block;
1569
- text-align: left;
1570
- font-size: var(--text-size-smaller);
1722
+ .Dialog__heading,
1723
+ .Dialog__close {
1724
+ margin: 0;
1725
+ font-size: var(--text-size-small);
1571
1726
  }
1572
1727
 
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%);
1728
+ .Dialog__heading {
1729
+ display: flex;
1730
+ align-items: center;
1731
+ margin-left: var(--dialog-padding);
1579
1732
  }
1580
1733
 
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);
1734
+ .Dialog__close {
1735
+ color: var(--dialog-heading-text-color);
1736
+ background-color: initial;
1737
+ border: 1px solid var(--dialog-border-color);
1738
+ border-radius: 3px;
1739
+ padding: 0;
1740
+ height: var(--dialog-close-button-size);
1741
+ width: var(--dialog-close-button-size);
1742
+ margin-right: var(--space-smallest);
1743
+ flex-shrink: 0;
1744
+ position: relative;
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:active {
1748
+ background-color: var(--dialog-border-color);
1595
1749
  }
1596
1750
 
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);
1751
+ .Dialog__close:before {
1752
+ content: '';
1753
+ position: absolute;
1754
+ top: -2px;
1755
+ right: -2px;
1756
+ bottom: -2px;
1757
+ left: -2px;
1758
+ border-radius: 4px;
1759
+ pointer-events: none;
1601
1760
  }
1602
1761
 
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;
1762
+ .cauldron--theme-dark .Dialog__close:before {
1763
+ top: -3px;
1764
+ right: -3px;
1765
+ bottom: -3px;
1766
+ left: -3px;
1612
1767
  }
1613
1768
 
1614
- .Checkbox__wrap .Field__labelDescription {
1615
- margin-left: calc(var(--checkbox-size) + 2px + var(--space-half));
1769
+ .Dialog__close:is(:hover, :focus):before {
1770
+ box-shadow: 0 0 0 1px var(--dialog-heading-text-color);
1616
1771
  }
1617
1772
 
1618
- .Radio__wrap .Field__labelDescription {
1619
- margin-left: calc(var(--radio-size) + 2px + var(--space-half));
1773
+ .Dialog__close svg {
1774
+ /* match icon size with height/width of button */
1775
+ --icon-size: 100%;
1620
1776
  }
1621
1777
 
1622
- .Field__labelDescription + .Error {
1623
- margin-top: var(--space-smallest);
1778
+ .cauldron--theme-dark .Dialog__close {
1779
+ border-width: 2px;
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 {
1783
+ padding: var(--dialog-padding);
1634
1784
  }
1635
1785
 
1636
- .Checkbox__overlay {
1637
- border-radius: 5px;
1786
+ .Dialog__content p:first-child {
1787
+ margin-top: 0;
1638
1788
  }
1639
1789
 
1640
- .Radio__overlay {
1641
- border-radius: 50%;
1790
+ .Dialog__content p:last-child {
1791
+ margin-bottom: 0;
1642
1792
  }
1643
1793
 
1644
- .Radio__overlay svg,
1645
- .Checkbox__overlay svg {
1646
- pointer-events: none;
1794
+ .Dialog__footer {
1795
+ background-color: var(--dialog-footer-background-color);
1796
+ border-top: 1px solid var(--dialog-border-color);
1797
+ padding: var(--dialog-padding);
1647
1798
  }
1648
1799
 
1649
- .Radio__overlay svg {
1650
- height: var(--radio-size);
1651
- width: var(--radio-size);
1800
+ /**
1801
+ * style for info modal
1802
+ */
1803
+
1804
+ .Modal--info .Dialog__header {
1805
+ background-color: transparent;
1652
1806
  }
1653
1807
 
1654
- .Checkbox__overlay svg {
1655
- height: var(--checkbox-size);
1656
- width: var(--checkbox-size);
1808
+ .Modal--info .Dialog__content {
1809
+ display: flex;
1810
+ flex-direction: column;
1811
+ align-items: center;
1657
1812
  }
1658
1813
 
1659
- .Radio__overlay:active:not(.Radio__overlay--disabled),
1660
- .Checkbox__overlay:active:not(.Checkbox__overlay--disabled) {
1661
- background-color: var(--field-icon-active-color);
1814
+ .Modal--info .Dialog__footer {
1815
+ display: flex;
1816
+ justify-content: center;
1817
+ background-color: transparent;
1818
+ border-top: none;
1819
+ padding-top: 0;
1662
1820
  }
1663
1821
 
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;
1822
+ /* Dark Theme */
1823
+
1824
+ .cauldron--theme-dark .Dialog__inner {
1825
+ color: var(--white);
1826
+ border-width: 4px;
1672
1827
  }
1673
1828
 
1674
- .Checkbox__overlay.Checkbox__overlay--focused,
1675
- .Radio__overlay.Radio__overlay--focused {
1676
- box-shadow: 0 0 0 2px var(--field-icon-focus-color);
1829
+ .cauldron--theme-dark .Dialog__header {
1830
+ border-bottom: 1px solid var(--stroke-dark);
1677
1831
  }
1678
1832
 
1679
- .Radio__overlay.Icon--radio-checked,
1680
- .Checkbox__overlay.Icon--checkbox-checked {
1681
- color: var(--field-icon-checked-color);
1833
+ .cauldron--theme-dark .Dialog__footer {
1834
+ border-top: 1px solid var(--stroke-dark);
1682
1835
  }
1683
1836
 
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;
1837
+ .cauldron--theme-dark .Dialog__header,
1838
+ .cauldron--theme-dark .Dialog__footer {
1839
+ color: var(--gray-20);
1688
1840
  }
1689
1841
 
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;
1842
+ .cauldron--theme-dark .Dialog__close {
1843
+ color: var(--gray-20);
1694
1844
  }
1695
1845
 
1696
- .Field__label:hover ~ .Radio__overlay:not(.Radio__overlay--disabled),
1697
- .Radio__overlay:hover:not(.Radio__overlay--disabled) {
1698
- border: 1px solid currentColor;
1846
+ .cauldron--theme-dark .Dialog__close:active {
1847
+ color: var(--accent-medium);
1699
1848
  }
1700
1849
 
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;
1850
+ .cauldron--theme-dark .Modal--info .Dialog__header,
1851
+ .cauldron--theme-dark .Modal--info .Dialog__content,
1852
+ .cauldron--theme-dark .Modal--info .Dialog__footer {
1853
+ background-color: transparent;
1709
1854
  }
1710
1855
 
1711
- .Field__label:hover ~ .Checkbox__overlay:not(.Checkbox__overlay--disabled),
1712
- .Checkbox__overlay:hover:not(.Checkbox__overlay--disabled) {
1713
- border: 1px solid currentColor;
1856
+ .cauldron--theme-dark .Modal--info .Dialog__footer {
1857
+ border-top: none;
1714
1858
  }
1715
1859
 
1716
1860
  :root {
@@ -4763,22 +4907,6 @@ button.Accordion__trigger {
4763
4907
  }
4764
4908
 
4765
4909
  :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
4910
  --combobox-listbox-border-color: var(--gray-40);
4783
4911
  --combobox-listbox-background-color: #fff;
4784
4912
  --combobox-option-font-color: var(--gray-90);
@@ -4792,21 +4920,6 @@ button.Accordion__trigger {
4792
4920
  }
4793
4921
 
4794
4922
  .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
4923
  --combobox-option-font-color: var(--text-color-light);
4811
4924
  --combobox-option-hover-background-color: var(--accent-dark);
4812
4925
  --combobox-option-description-font-color: var(--accent-light);
@@ -4815,54 +4928,101 @@ button.Accordion__trigger {
4815
4928
  --combobox-option-selected-icon-color: var(--accent-success-light);
4816
4929
  }
4817
4930
 
4818
- .Combobox {
4819
- --field-listbox-selected-background-color: transparent;
4820
- position: relative;
4931
+ .Combobox :where(.TextFieldWrapper) {
4932
+ --text-field-wrapper-border-color: var(
4933
+ --combobox-input-border-color,
4934
+ var(--field-border-color)
4935
+ );
4936
+ --text-field-wrapper-background-color: var(
4937
+ --combobox-input-background-color,
4938
+ var(--field-background-color)
4939
+ );
4940
+ --text-field-wrapper-border-focus-color: var(
4941
+ --combobox-input-border-focus-color,
4942
+ var(--field-border-color-focus)
4943
+ );
4944
+ --text-field-wrapper-border-hover-color: var(
4945
+ --combobox-input-border-hover-color,
4946
+ var(--field-border-color-focus-hover)
4947
+ );
4948
+ --text-field-wrapper-border-focus-glow-color: var(
4949
+ --combobox-input-border-focus-glow-color,
4950
+ var(--field-border-color-focus-glow)
4951
+ );
4952
+ --text-field-wrapper-error-border-color: var(
4953
+ --combobox-input-error-border-color,
4954
+ var(--field-border-color-error)
4955
+ );
4956
+ --text-field-wrapper-error-focus-border-color: var(
4957
+ --combobox-input-error-focus-border-color,
4958
+ var(--field-border-color-error-hover)
4959
+ );
4960
+ --text-field-wrapper-error-focus-border-glow-color: var(
4961
+ --combobox-input-error-focus-border-glow-color,
4962
+ var(--field-border-color-focus-glow)
4963
+ );
4964
+ --text-field-wrapper-font-size: var(
4965
+ --combobox-input-font-size,
4966
+ var(--field-font-size)
4967
+ );
4968
+ --text-field-wrapper-font-color: var(
4969
+ --combobox-input-font-color,
4970
+ var(--field-content-color)
4971
+ );
4821
4972
  }
4822
4973
 
4823
- .Combobox input:is(*, :focus, :hover) {
4824
- border: none;
4825
- box-shadow: none;
4826
- margin: initial;
4827
- padding: var(--space-smallest);
4974
+ .cauldron--theme-dark .Combobox :where(.TextFieldWrapper) {
4975
+ --text-field-wrapper-border-color: var(
4976
+ --combobox-input-border-color,
4977
+ var(--field-border-color)
4978
+ );
4979
+ --text-field-wrapper-background-color: var(
4980
+ --combobox-input-background-color,
4981
+ var(--field-background-color)
4982
+ );
4983
+ --text-field-wrapper-border-focus-color: var(
4984
+ --combobox-input-border-focus-color,
4985
+ var(--field-border-color-focus)
4986
+ );
4987
+ --text-field-wrapper-border-hover-color: var(
4988
+ --combobox-input-border-hover-color,
4989
+ var(--field-border-color-focus-hover)
4990
+ );
4991
+ --text-field-wrapper-border-focus-glow-color: var(
4992
+ --combobox-input-border-focus-glow-color,
4993
+ var(--field-border-color-focus-glow)
4994
+ );
4995
+ --text-field-wrapper-error-border-color: var(
4996
+ --combobox-input-error-border-color,
4997
+ var(--field-border-color-error)
4998
+ );
4999
+ --text-field-wrapper-error-focus-border-color: var(
5000
+ --combobox-input-error-focus-border-color,
5001
+ var(--field-border-color-error-hover)
5002
+ );
5003
+ --text-field-wrapper-error-focus-border-glow-color: var(
5004
+ --combobox-input-error-focus-border-glow-color,
5005
+ var(--field-border-color-focus-glow)
5006
+ );
5007
+ --text-field-wrapper-font-size: var(
5008
+ --combobox-input-font-size,
5009
+ var(--field-font-size)
5010
+ );
5011
+ --text-field-wrapper-font-color: var(
5012
+ --combobox-input-font-color,
5013
+ var(--field-content-color)
5014
+ );
4828
5015
  }
4829
5016
 
4830
- .Combobox__input {
5017
+ .Combobox {
5018
+ --field-listbox-selected-background-color: transparent;
4831
5019
  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
5020
  }
4852
5021
 
4853
- .Combobox__input input[type='text'] {
4854
- font-size: var(--combobox-input-font-size);
4855
- color: var(--combobox-input-font-color);
5022
+ .Combobox .TextFieldWrapper input[type='text'] {
4856
5023
  margin-right: 1.25rem;
4857
5024
  }
4858
5025
 
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
5026
  .Combobox__arrow {
4867
5027
  width: 2rem;
4868
5028
  display: flex;
@@ -4918,7 +5078,7 @@ button.Accordion__trigger {
4918
5078
  border-color: var(--combobox-listbox-border-color);
4919
5079
  }
4920
5080
 
4921
- /*
5081
+ /*
4922
5082
  * Note: Firefox doesn't yet have full support for :has, so .Combobox__listbox--open
4923
5083
  * is provided as a fallback selector to indicate open listboxes
4924
5084
  * see: https://caniuse.com/css-has
@@ -4999,32 +5159,6 @@ button.Accordion__trigger {
4999
5159
  font-size: var(--combobox-option-description-font-size);
5000
5160
  }
5001
5161
 
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
5162
  .ComboboxListbox__empty {
5029
5163
  padding: var(--space-smaller);
5030
5164
  text-align: center;
@@ -5100,3 +5234,117 @@ button.Accordion__trigger {
5100
5234
  border: 1px solid var(--timeline-mark-border-color);
5101
5235
  transform: translateX(-1px);
5102
5236
  }
5237
+
5238
+ .SearchField :where(.TextFieldWrapper) {
5239
+ --text-field-wrapper-border-color: var(
5240
+ --search-field-border-color,
5241
+ var(--field-border-color)
5242
+ );
5243
+ --text-field-wrapper-background-color: var(
5244
+ --search-field-background-color,
5245
+ var(--field-background-color)
5246
+ );
5247
+ --text-field-wrapper-border-focus-color: var(
5248
+ --search-field-border-focus-color,
5249
+ var(--field-border-color-focus)
5250
+ );
5251
+ --text-field-wrapper-border-hover-color: var(
5252
+ --search-field-border-hover-color,
5253
+ var(--field-border-color-focus-hover)
5254
+ );
5255
+ --text-field-wrapper-border-focus-glow-color: var(
5256
+ --search-field-border-focus-glow-color,
5257
+ var(--field-border-color-focus-glow)
5258
+ );
5259
+ --text-field-wrapper-error-border-color: var(
5260
+ --search-field-error-border-color,
5261
+ var(--field-border-color-error)
5262
+ );
5263
+ --text-field-wrapper-error-focus-border-color: var(
5264
+ --search-field-error-focus-border-color,
5265
+ var(--field-border-color-error-hover)
5266
+ );
5267
+ --text-field-wrapper-error-focus-border-glow-color: var(
5268
+ --search-field-error-focus-border-glow-color,
5269
+ var(--field-border-color-focus-glow)
5270
+ );
5271
+ --text-field-wrapper-font-size: var(
5272
+ --search-field-font-size,
5273
+ var(--field-font-size)
5274
+ );
5275
+ --text-field-wrapper-font-color: var(
5276
+ --search-field-font-color,
5277
+ var(--field-content-color)
5278
+ );
5279
+ }
5280
+
5281
+ .cauldron--theme-dark .SearchField :where(.TextFieldWrapper) {
5282
+ --text-field-wrapper-border-color: var(
5283
+ --search-field-border-color,
5284
+ var(--field-border-color)
5285
+ );
5286
+ --text-field-wrapper-background-color: var(
5287
+ --search-field-background-color,
5288
+ var(--field-background-color)
5289
+ );
5290
+ --text-field-wrapper-border-focus-color: var(
5291
+ --search-field-border-focus-color,
5292
+ var(--field-border-color-focus)
5293
+ );
5294
+ --text-field-wrapper-border-hover-color: var(
5295
+ --search-field-border-hover-color,
5296
+ var(--field-border-color-focus-hover)
5297
+ );
5298
+ --text-field-wrapper-border-focus-glow-color: var(
5299
+ --search-field-border-focus-glow-color,
5300
+ var(--field-border-color-focus-glow)
5301
+ );
5302
+ --text-field-wrapper-error-border-color: var(
5303
+ --search-field-error-border-color,
5304
+ var(--field-border-color-error)
5305
+ );
5306
+ --text-field-wrapper-error-focus-border-color: var(
5307
+ --search-field-error-focus-border-color,
5308
+ var(--field-border-color-error-hover)
5309
+ );
5310
+ --text-field-wrapper-error-focus-border-glow-color: var(
5311
+ --search-field-error-focus-border-glow-color,
5312
+ var(--field-border-color-focus-glow)
5313
+ );
5314
+ --text-field-wrapper-font-size: var(
5315
+ --search-field-font-size,
5316
+ var(--field-font-size)
5317
+ );
5318
+ --text-field-wrapper-font-color: var(
5319
+ --search-field-font-color,
5320
+ var(--field-content-color)
5321
+ );
5322
+ }
5323
+
5324
+ .SearchField__search-icon {
5325
+ color: var(--search-field-icon-color);
5326
+ margin-left: var(--space-smallest);
5327
+ }
5328
+
5329
+ .SearchField input::-webkit-search-cancel-button {
5330
+ margin-left: var(--space-smallest);
5331
+ }
5332
+
5333
+ .TextEllipsis {
5334
+ display: block !important;
5335
+ white-space: nowrap;
5336
+ text-overflow: ellipsis;
5337
+ overflow: hidden;
5338
+ }
5339
+
5340
+ .TextEllipsis:where([role='button']) {
5341
+ text-align: inherit;
5342
+ -moz-user-select: inherit;
5343
+ user-select: inherit;
5344
+ }
5345
+
5346
+ .TextEllipsis--multiline {
5347
+ display: -webkit-box !important;
5348
+ -webkit-box-orient: vertical;
5349
+ white-space: normal;
5350
+ }