@skyux/theme 11.11.2 → 11.12.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 (5) hide show
  1. package/css/sky.css +24 -9
  2. package/css/themes/modern/styles.css +511 -318
  3. package/documentation.json +102 -102
  4. package/package.json +1 -1
  5. package/scss/_compat/_mixins.scss +11 -2
package/css/themes/modern/styles.css CHANGED
@@ -535,265 +535,536 @@
535
535
  overflow: hidden;
536
536
  }
537
537
 
538
+ body:not(.sky-theme-modern) {
539
+ --sky-override-required-color: var(--sky-highlight-color-danger);
540
+ --sky-override-required-space: 5px;
541
+ }
542
+
543
+ .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn {
544
+ --sky-override-borderless-icon-size: 26px;
545
+ --sky-override-button-padding: 9px 21px;
546
+ --sky-override-button-link-inline-color-disabled: var(
547
+ --sky-color-text-action
548
+ );
549
+ --sky-override-button-link-inline-color-hover-active: var(
550
+ --sky-text-color-action-primary-hover
551
+ );
552
+ --sky-override-button-link-inline-border-radius: 0;
553
+ --sky-override-button-link-inline-font-size: var(--sky-font-size-body-m);
554
+ --sky-override-button-link-inline-vertical-align: top;
555
+ --sky-override-button-icon-borderless-padding: 1px;
556
+ --sky-override-button-icon-padding: 9px 15px;
557
+ --sky-override-button-primary-disabled-box-shadow: inset 0 0 0
558
+ var(--sky-border-width-action-focus)
559
+ var(--sky-color-border-action-primary-focus),
560
+ var(--sky-elevation-focus);
561
+ --sky-override-button-icon-disabled-box-shadow: inset 0 0 0
562
+ var(--sky-border-width-action-focus)
563
+ var(--sky-color-border-action-secondary-focus),
564
+ var(--sky-elevation-focus);
565
+ --sky-override-button-danger-disabled-box-shadow: inset 0 0 0
566
+ var(--sky-border-width-action-focus)
567
+ var(--sky-color-border-action-danger-focus),
568
+ var(--sky-elevation-focus);
569
+ --sky-override-button-tertiary-disabled-box-shadow: inset 0 0 0
570
+ var(--sky-border-width-action-focus)
571
+ var(--sky-color-border-action-tertiary-focus),
572
+ var(--sky-elevation-focus,);
573
+ --sky-override-button-link-inline-disabled-box-shadow: 0 0 0
574
+ var(--sky-border-width-action-focus)
575
+ var(--sky-color-border-action-tertiary-focus),
576
+ var(--sky-elevation-focus);
577
+ --sky-override-button-borderless-inline-disabled-box-shadow: 0 0 0
578
+ var(--sky-border-width-action-focus)
579
+ var(--sky-color-border-action-tertiary-focus),
580
+ var(--sky-elevation-focus);
581
+ }
582
+ .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn.sky-btn-link-inline, .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn.sky-btn-borderless-inline {
583
+ --sky-override-button-opacity-disabled: 0.65;
584
+ }
585
+ .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn:not(.sky-btn-link-inline):not(.sky-btn-borderless-inline) {
586
+ --sky-override-button-line-height: calc(20 / 14);
587
+ }
588
+ .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn.sky-btn-link-inline, .sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-btn.sky-btn-borderless-inline {
589
+ --sky-override-button-line-height: normal;
590
+ }
591
+
538
592
  .sky-theme-modern .sky-btn {
539
593
  border: none;
540
- border-radius: 6px;
541
- font-size: 16px;
594
+ border-radius: var(--sky-border-radius-s);
595
+ font-size: var(--sky-font-size-body-m);
542
596
  transition: box-shadow 150ms;
597
+ line-height: var(--sky-override-button-line-height, var(--sky-font-line_height-body-m));
543
598
  }
544
- .sky-theme-modern .sky-btn-default {
599
+ .sky-theme-modern .sky-btn-default,
600
+ .sky-theme-modern .sky-btn-primary,
601
+ .sky-theme-modern .sky-btn-danger,
602
+ .sky-theme-modern .sky-btn-link,
603
+ .sky-theme-modern .sky-btn-borderless {
604
+ padding: var(--sky-override-button-padding, var(--sky-space-inset-pillarbox-1_2-top-m) var(--sky-space-inset-pillarbox-1_2-right-m) var(--sky-space-inset-pillarbox-1_2-bottom-m) var(--sky-space-inset-pillarbox-1_2-left-m));
605
+ }
606
+ .sky-theme-modern .sky-btn-default,
607
+ .sky-theme-modern .sky-btn-primary,
608
+ .sky-theme-modern .sky-btn-danger,
609
+ .sky-theme-modern .sky-btn-link,
610
+ .sky-theme-modern .sky-btn-borderless,
611
+ .sky-theme-modern .sky-btn-icon-borderless,
612
+ .sky-theme-modern .sky-btn-icon,
613
+ .sky-theme-modern .sky-btn-link-inline,
614
+ .sky-theme-modern .sky-btn-borderless-inline {
545
615
  border: none;
546
- box-shadow: inset 0 0 0 1px #d2d2d2;
547
- background-color: #ffffff;
548
- color: #212327;
549
- padding: 9px 21px;
616
+ outline: none;
550
617
  }
551
- .sky-theme-modern .sky-btn-default:hover {
552
- border: none;
553
- box-shadow: inset 0 0 0 1px #1870B8;
618
+ .sky-theme-modern .sky-btn-default:hover,
619
+ .sky-theme-modern .sky-btn-primary:hover,
620
+ .sky-theme-modern .sky-btn-danger:hover,
621
+ .sky-theme-modern .sky-btn-link:hover,
622
+ .sky-theme-modern .sky-btn-borderless:hover,
623
+ .sky-theme-modern .sky-btn-icon-borderless:hover,
624
+ .sky-theme-modern .sky-btn-icon:hover,
625
+ .sky-theme-modern .sky-btn-link-inline:hover,
626
+ .sky-theme-modern .sky-btn-borderless-inline:hover {
554
627
  text-decoration: none;
555
628
  }
556
- .sky-theme-modern .sky-btn-default:hover, .sky-theme-modern .sky-btn-default:active, .sky-theme-modern .sky-btn-default.sky-btn-active {
557
- color: #212327;
558
- }
559
- .sky-theme-modern .sky-btn-default:active, .sky-theme-modern .sky-btn-default.sky-btn-active {
629
+ .sky-theme-modern .sky-btn-default.sky-btn-disabled, .sky-theme-modern .sky-btn-default.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-default.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-default.sky-btn-disabled:active, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-default[disabled], .sky-theme-modern .sky-btn-default[disabled]:hover, .sky-theme-modern .sky-btn-default[disabled]:focus-visible, .sky-theme-modern .sky-btn-default[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-default[disabled]:active, .sky-theme-modern .sky-btn-default[disabled].sky-btn-active,
630
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled,
631
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled:hover,
632
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled:focus-visible,
633
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-focus,
634
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled:active,
635
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-active,
636
+ .sky-theme-modern .sky-btn-primary[disabled],
637
+ .sky-theme-modern .sky-btn-primary[disabled]:hover,
638
+ .sky-theme-modern .sky-btn-primary[disabled]:focus-visible,
639
+ .sky-theme-modern .sky-btn-primary[disabled].sky-btn-focus,
640
+ .sky-theme-modern .sky-btn-primary[disabled]:active,
641
+ .sky-theme-modern .sky-btn-primary[disabled].sky-btn-active,
642
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled,
643
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled:hover,
644
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled:focus-visible,
645
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-focus,
646
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled:active,
647
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-active,
648
+ .sky-theme-modern .sky-btn-danger[disabled],
649
+ .sky-theme-modern .sky-btn-danger[disabled]:hover,
650
+ .sky-theme-modern .sky-btn-danger[disabled]:focus-visible,
651
+ .sky-theme-modern .sky-btn-danger[disabled].sky-btn-focus,
652
+ .sky-theme-modern .sky-btn-danger[disabled]:active,
653
+ .sky-theme-modern .sky-btn-danger[disabled].sky-btn-active,
654
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled,
655
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled:hover,
656
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled:focus-visible,
657
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-focus,
658
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled:active,
659
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-active,
660
+ .sky-theme-modern .sky-btn-link[disabled],
661
+ .sky-theme-modern .sky-btn-link[disabled]:hover,
662
+ .sky-theme-modern .sky-btn-link[disabled]:focus-visible,
663
+ .sky-theme-modern .sky-btn-link[disabled].sky-btn-focus,
664
+ .sky-theme-modern .sky-btn-link[disabled]:active,
665
+ .sky-theme-modern .sky-btn-link[disabled].sky-btn-active,
666
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled,
667
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:hover,
668
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:focus-visible,
669
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-focus,
670
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:active,
671
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-active,
672
+ .sky-theme-modern .sky-btn-borderless[disabled],
673
+ .sky-theme-modern .sky-btn-borderless[disabled]:hover,
674
+ .sky-theme-modern .sky-btn-borderless[disabled]:focus-visible,
675
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-focus,
676
+ .sky-theme-modern .sky-btn-borderless[disabled]:active,
677
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-active,
678
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled,
679
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:hover,
680
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:focus-visible,
681
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-focus,
682
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:active,
683
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-active,
684
+ .sky-theme-modern .sky-btn-icon-borderless[disabled],
685
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:hover,
686
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:focus-visible,
687
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-focus,
688
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:active,
689
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-active,
690
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled,
691
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:hover,
692
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:focus-visible,
693
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-focus,
694
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:active,
695
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-active,
696
+ .sky-theme-modern .sky-btn-icon[disabled],
697
+ .sky-theme-modern .sky-btn-icon[disabled]:hover,
698
+ .sky-theme-modern .sky-btn-icon[disabled]:focus-visible,
699
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-focus,
700
+ .sky-theme-modern .sky-btn-icon[disabled]:active,
701
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-active,
702
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled,
703
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:hover,
704
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:focus-visible,
705
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-focus,
706
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:active,
707
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-active,
708
+ .sky-theme-modern .sky-btn-link-inline[disabled],
709
+ .sky-theme-modern .sky-btn-link-inline[disabled]:hover,
710
+ .sky-theme-modern .sky-btn-link-inline[disabled]:focus-visible,
711
+ .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-focus,
712
+ .sky-theme-modern .sky-btn-link-inline[disabled]:active,
713
+ .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-active,
714
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled,
715
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:hover,
716
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:focus-visible,
717
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-focus,
718
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:active,
719
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-active,
720
+ .sky-theme-modern .sky-btn-borderless-inline[disabled],
721
+ .sky-theme-modern .sky-btn-borderless-inline[disabled]:hover,
722
+ .sky-theme-modern .sky-btn-borderless-inline[disabled]:focus-visible,
723
+ .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-focus,
724
+ .sky-theme-modern .sky-btn-borderless-inline[disabled]:active,
725
+ .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-active {
560
726
  border: none;
561
- box-shadow: inset 0 0 0 2px #1870B8;
562
- background-image: none;
727
+ opacity: var(--sky-override-button-opacity-disabled, 1);
728
+ color: var(--sky-color-text-deemphasized);
563
729
  }
564
- .sky-theme-modern .sky-btn-default.sky-btn-disabled, .sky-theme-modern .sky-btn-default.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-default.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-default.sky-btn-disabled:active, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-default[disabled], .sky-theme-modern .sky-btn-default[disabled]:hover, .sky-theme-modern .sky-btn-default[disabled]:focus-visible, .sky-theme-modern .sky-btn-default[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-default[disabled]:active, .sky-theme-modern .sky-btn-default[disabled].sky-btn-active {
565
- border: none;
566
- box-shadow: inset 0 0 0 1px #d2d2d2;
567
- background-color: #ededee;
568
- color: #686c73;
569
- opacity: 1;
730
+ .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-link-inline, .sky-theme-modern .sky-btn-default.sky-btn-disabled:hover.sky-btn-link-inline, .sky-theme-modern .sky-btn-default.sky-btn-disabled:focus-visible.sky-btn-link-inline, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline, .sky-theme-modern .sky-btn-default.sky-btn-disabled:active.sky-btn-link-inline, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-active.sky-btn-link-inline, .sky-theme-modern .sky-btn-default[disabled].sky-btn-link-inline, .sky-theme-modern .sky-btn-default[disabled]:hover.sky-btn-link-inline, .sky-theme-modern .sky-btn-default[disabled]:focus-visible.sky-btn-link-inline, .sky-theme-modern .sky-btn-default[disabled].sky-btn-focus.sky-btn-link-inline, .sky-theme-modern .sky-btn-default[disabled]:active.sky-btn-link-inline, .sky-theme-modern .sky-btn-default[disabled].sky-btn-active.sky-btn-link-inline,
731
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-link-inline,
732
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled:hover.sky-btn-link-inline,
733
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled:focus-visible.sky-btn-link-inline,
734
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
735
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled:active.sky-btn-link-inline,
736
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
737
+ .sky-theme-modern .sky-btn-primary[disabled].sky-btn-link-inline,
738
+ .sky-theme-modern .sky-btn-primary[disabled]:hover.sky-btn-link-inline,
739
+ .sky-theme-modern .sky-btn-primary[disabled]:focus-visible.sky-btn-link-inline,
740
+ .sky-theme-modern .sky-btn-primary[disabled].sky-btn-focus.sky-btn-link-inline,
741
+ .sky-theme-modern .sky-btn-primary[disabled]:active.sky-btn-link-inline,
742
+ .sky-theme-modern .sky-btn-primary[disabled].sky-btn-active.sky-btn-link-inline,
743
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-link-inline,
744
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled:hover.sky-btn-link-inline,
745
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled:focus-visible.sky-btn-link-inline,
746
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
747
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled:active.sky-btn-link-inline,
748
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
749
+ .sky-theme-modern .sky-btn-danger[disabled].sky-btn-link-inline,
750
+ .sky-theme-modern .sky-btn-danger[disabled]:hover.sky-btn-link-inline,
751
+ .sky-theme-modern .sky-btn-danger[disabled]:focus-visible.sky-btn-link-inline,
752
+ .sky-theme-modern .sky-btn-danger[disabled].sky-btn-focus.sky-btn-link-inline,
753
+ .sky-theme-modern .sky-btn-danger[disabled]:active.sky-btn-link-inline,
754
+ .sky-theme-modern .sky-btn-danger[disabled].sky-btn-active.sky-btn-link-inline,
755
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-link-inline,
756
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled:hover.sky-btn-link-inline,
757
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled:focus-visible.sky-btn-link-inline,
758
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
759
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled:active.sky-btn-link-inline,
760
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
761
+ .sky-theme-modern .sky-btn-link[disabled].sky-btn-link-inline,
762
+ .sky-theme-modern .sky-btn-link[disabled]:hover.sky-btn-link-inline,
763
+ .sky-theme-modern .sky-btn-link[disabled]:focus-visible.sky-btn-link-inline,
764
+ .sky-theme-modern .sky-btn-link[disabled].sky-btn-focus.sky-btn-link-inline,
765
+ .sky-theme-modern .sky-btn-link[disabled]:active.sky-btn-link-inline,
766
+ .sky-theme-modern .sky-btn-link[disabled].sky-btn-active.sky-btn-link-inline,
767
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-link-inline,
768
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:hover.sky-btn-link-inline,
769
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:focus-visible.sky-btn-link-inline,
770
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
771
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:active.sky-btn-link-inline,
772
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
773
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-link-inline,
774
+ .sky-theme-modern .sky-btn-borderless[disabled]:hover.sky-btn-link-inline,
775
+ .sky-theme-modern .sky-btn-borderless[disabled]:focus-visible.sky-btn-link-inline,
776
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-focus.sky-btn-link-inline,
777
+ .sky-theme-modern .sky-btn-borderless[disabled]:active.sky-btn-link-inline,
778
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-active.sky-btn-link-inline,
779
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-link-inline,
780
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:hover.sky-btn-link-inline,
781
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:focus-visible.sky-btn-link-inline,
782
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
783
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:active.sky-btn-link-inline,
784
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
785
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-link-inline,
786
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:hover.sky-btn-link-inline,
787
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:focus-visible.sky-btn-link-inline,
788
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-focus.sky-btn-link-inline,
789
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:active.sky-btn-link-inline,
790
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-active.sky-btn-link-inline,
791
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-link-inline,
792
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:hover.sky-btn-link-inline,
793
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:focus-visible.sky-btn-link-inline,
794
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
795
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:active.sky-btn-link-inline,
796
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
797
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-link-inline,
798
+ .sky-theme-modern .sky-btn-icon[disabled]:hover.sky-btn-link-inline,
799
+ .sky-theme-modern .sky-btn-icon[disabled]:focus-visible.sky-btn-link-inline,
800
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-focus.sky-btn-link-inline,
801
+ .sky-theme-modern .sky-btn-icon[disabled]:active.sky-btn-link-inline,
802
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-active.sky-btn-link-inline,
803
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-link-inline,
804
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:hover.sky-btn-link-inline,
805
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:focus-visible.sky-btn-link-inline,
806
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
807
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:active.sky-btn-link-inline,
808
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
809
+ .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-link-inline,
810
+ .sky-theme-modern .sky-btn-link-inline[disabled]:hover.sky-btn-link-inline,
811
+ .sky-theme-modern .sky-btn-link-inline[disabled]:focus-visible.sky-btn-link-inline,
812
+ .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-focus.sky-btn-link-inline,
813
+ .sky-theme-modern .sky-btn-link-inline[disabled]:active.sky-btn-link-inline,
814
+ .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-active.sky-btn-link-inline,
815
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-link-inline,
816
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:hover.sky-btn-link-inline,
817
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:focus-visible.sky-btn-link-inline,
818
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-focus.sky-btn-link-inline,
819
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:active.sky-btn-link-inline,
820
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-active.sky-btn-link-inline,
821
+ .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-link-inline,
822
+ .sky-theme-modern .sky-btn-borderless-inline[disabled]:hover.sky-btn-link-inline,
823
+ .sky-theme-modern .sky-btn-borderless-inline[disabled]:focus-visible.sky-btn-link-inline,
824
+ .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-focus.sky-btn-link-inline,
825
+ .sky-theme-modern .sky-btn-borderless-inline[disabled]:active.sky-btn-link-inline,
826
+ .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-active.sky-btn-link-inline {
827
+ color: var(--sky-override-button-link-inline-color-disabled, var(--sky-color-text-default));
570
828
  }
571
- .sky-theme-modern .sky-btn-default:focus-visible {
572
- outline: none;
829
+ .sky-theme-modern .sky-btn-icon {
830
+ padding: var(--sky-override-button-icon-padding, var(--sky-space-inset-balanced-s));
573
831
  }
574
- .sky-theme-modern .sky-btn-default:focus-visible:not(:active) {
575
- border: none;
576
- box-shadow: inset 0 0 0 2px #1870B8, 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
832
+ .sky-theme-modern .sky-btn-default,
833
+ .sky-theme-modern .sky-btn-icon {
834
+ background-color: var(--sky-color-background-action-secondary-base);
835
+ color: var(--sky-color-text-default);
836
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base);
837
+ }
838
+ .sky-theme-modern .sky-btn-default:hover,
839
+ .sky-theme-modern .sky-btn-icon:hover {
840
+ background-color: var(--sky-color-background-action-secondary-hover);
841
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover);
842
+ }
843
+ .sky-theme-modern .sky-btn-default:active, .sky-theme-modern .sky-btn-default.sky-btn-active,
844
+ .sky-theme-modern .sky-btn-icon:active,
845
+ .sky-theme-modern .sky-btn-icon.sky-btn-active {
846
+ background-color: var(--sky-color-background-action-secondary-active);
847
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-active);
848
+ }
849
+ .sky-theme-modern .sky-btn-default:focus-visible:not(:active),
850
+ .sky-theme-modern .sky-btn-icon:focus-visible:not(:active) {
851
+ background-color: var(--sky-color-background-action-secondary-focus);
852
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus), var(--sky-elevation-focus);
853
+ }
854
+ .sky-theme-modern .sky-btn-default.sky-btn-disabled, .sky-theme-modern .sky-btn-default.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-default.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-default.sky-btn-disabled:active, .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-default[disabled], .sky-theme-modern .sky-btn-default[disabled]:hover, .sky-theme-modern .sky-btn-default[disabled]:focus-visible, .sky-theme-modern .sky-btn-default[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-default[disabled]:active, .sky-theme-modern .sky-btn-default[disabled].sky-btn-active,
855
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled,
856
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:hover,
857
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:focus-visible,
858
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-focus,
859
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:active,
860
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-active,
861
+ .sky-theme-modern .sky-btn-icon[disabled],
862
+ .sky-theme-modern .sky-btn-icon[disabled]:hover,
863
+ .sky-theme-modern .sky-btn-icon[disabled]:focus-visible,
864
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-focus,
865
+ .sky-theme-modern .sky-btn-icon[disabled]:active,
866
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-active {
867
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-secondary-disabled);
868
+ background-color: var(--sky-color-background-action-secondary-disabled);
869
+ }
870
+ .sky-theme-modern .sky-btn-default.sky-btn-disabled:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default[disabled]:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default[disabled]:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default[disabled]:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-default[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus),
871
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:is(:focus-visible, .sky-btn-focus),
872
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus),
873
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus),
874
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus),
875
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus),
876
+ .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus),
877
+ .sky-theme-modern .sky-btn-icon[disabled]:is(:focus-visible, .sky-btn-focus),
878
+ .sky-theme-modern .sky-btn-icon[disabled]:hover:is(:focus-visible, .sky-btn-focus),
879
+ .sky-theme-modern .sky-btn-icon[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus),
880
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus),
881
+ .sky-theme-modern .sky-btn-icon[disabled]:active:is(:focus-visible, .sky-btn-focus),
882
+ .sky-theme-modern .sky-btn-icon[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus) {
883
+ box-shadow: var(--sky-override-button-icon-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-secondary-disabled));
577
884
  }
578
885
  .sky-theme-modern .sky-btn-primary {
579
- border: none;
580
- box-shadow: inset 0 0 0 1px #1870B8;
581
- background-color: #1870B8;
582
- color: #ffffff;
583
- padding: 9px 21px;
886
+ background-color: var(--sky-color-background-action-primary-base);
887
+ color: var(--sky-color-text-inverse);
888
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-primary-base);
584
889
  }
585
890
  .sky-theme-modern .sky-btn-primary:hover {
586
- border: none;
587
- box-shadow: inset 0 0 0 1px #c1e8fb;
588
- text-decoration: none;
589
- }
590
- .sky-theme-modern .sky-btn-primary:hover, .sky-theme-modern .sky-btn-primary:active, .sky-theme-modern .sky-btn-primary.sky-btn-active {
591
- color: #ffffff;
891
+ background-color: var(--sky-color-background-action-primary-hover);
892
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-primary-hover);
592
893
  }
593
894
  .sky-theme-modern .sky-btn-primary:active, .sky-theme-modern .sky-btn-primary.sky-btn-active {
594
- border: none;
595
- box-shadow: inset 0 0 0 2px #c1e8fb;
596
- background-image: none;
895
+ background-color: var(--sky-color-background-action-primary-active);
896
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-primary-active);
597
897
  }
598
- .sky-theme-modern .sky-btn-primary.sky-btn-disabled, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:active, .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-primary[disabled], .sky-theme-modern .sky-btn-primary[disabled]:hover, .sky-theme-modern .sky-btn-primary[disabled]:focus-visible, .sky-theme-modern .sky-btn-primary[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-primary[disabled]:active, .sky-theme-modern .sky-btn-primary[disabled].sky-btn-active {
599
- border: none;
600
- box-shadow: inset 0 0 0 1px #d2d2d2;
601
- background-color: #ededee;
602
- color: #686c73;
603
- opacity: 1;
898
+ .sky-theme-modern .sky-btn-primary:focus-visible:not(:active) {
899
+ background-color: var(--sky-color-background-action-primary-focus);
900
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-primary-focus), var(--sky-elevation-focus);
604
901
  }
605
- .sky-theme-modern .sky-btn-primary:focus-visible {
606
- outline: none;
902
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-primary.sky-btn-disabled:active, .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-primary[disabled], .sky-theme-modern .sky-btn-primary[disabled]:hover, .sky-theme-modern .sky-btn-primary[disabled]:focus-visible, .sky-theme-modern .sky-btn-primary[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-primary[disabled]:active, .sky-theme-modern .sky-btn-primary[disabled].sky-btn-active {
903
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-primary-disabled);
904
+ background-color: var(--sky-color-background-action-primary-disabled);
607
905
  }
608
- .sky-theme-modern .sky-btn-primary:focus-visible:not(:active) {
609
- border: none;
610
- box-shadow: inset 0 0 0 2px #c1e8fb, 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
906
+ .sky-theme-modern .sky-btn-primary.sky-btn-disabled:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary[disabled]:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary[disabled]:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary[disabled]:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-primary[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus) {
907
+ box-shadow: var(--sky-override-button-primary-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-primary-disabled));
611
908
  }
612
909
  .sky-theme-modern .sky-btn-danger {
613
- border: none;
614
- box-shadow: inset 0 0 0 1px #d93a3d;
615
- background-color: #d93a3d;
616
- color: #ffffff;
617
- padding: 9px 21px;
910
+ background-color: var(--sky-color-background-action-danger-base);
911
+ color: var(--sky-color-text-inverse);
912
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-danger-base);
618
913
  }
619
914
  .sky-theme-modern .sky-btn-danger:hover {
620
- border: none;
621
- box-shadow: inset 0 0 0 1px #f7a08f;
622
- text-decoration: none;
623
- }
624
- .sky-theme-modern .sky-btn-danger:hover, .sky-theme-modern .sky-btn-danger:active, .sky-theme-modern .sky-btn-danger.sky-btn-active {
625
- color: #ffffff;
915
+ background-color: var(--sky-color-background-action-danger-hover);
916
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-danger-hover);
626
917
  }
627
918
  .sky-theme-modern .sky-btn-danger:active, .sky-theme-modern .sky-btn-danger.sky-btn-active {
628
- border: none;
629
- box-shadow: inset 0 0 0 2px #f7a08f;
630
- background-image: none;
631
- }
632
- .sky-theme-modern .sky-btn-danger.sky-btn-disabled, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:active, .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-danger[disabled], .sky-theme-modern .sky-btn-danger[disabled]:hover, .sky-theme-modern .sky-btn-danger[disabled]:focus-visible, .sky-theme-modern .sky-btn-danger[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-danger[disabled]:active, .sky-theme-modern .sky-btn-danger[disabled].sky-btn-active {
633
- border: none;
634
- box-shadow: inset 0 0 0 1px #d2d2d2;
635
- background-color: #ededee;
636
- color: #686c73;
637
- opacity: 1;
638
- }
639
- .sky-theme-modern .sky-btn-danger:focus-visible {
640
- outline: none;
919
+ background-color: var(--sky-color-background-action-danger-active);
920
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-danger-active);
641
921
  }
642
922
  .sky-theme-modern .sky-btn-danger:focus-visible:not(:active) {
643
- border: none;
644
- box-shadow: inset 0 0 0 2px #f7a08f, 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
923
+ background-color: var(--sky-color-background-action-danger-focus);
924
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-danger-focus), var(--sky-elevation-focus);
645
925
  }
646
- .sky-theme-modern .sky-btn-link {
647
- border: none;
648
- box-shadow: inset 0 0 0 1px transparent;
649
- background-color: transparent;
650
- color: #1870B8;
651
- padding: 9px 21px;
926
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-danger.sky-btn-disabled:active, .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-danger[disabled], .sky-theme-modern .sky-btn-danger[disabled]:hover, .sky-theme-modern .sky-btn-danger[disabled]:focus-visible, .sky-theme-modern .sky-btn-danger[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-danger[disabled]:active, .sky-theme-modern .sky-btn-danger[disabled].sky-btn-active {
927
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-danger-disabled);
928
+ background-color: var(--sky-color-background-action-danger-disabled);
652
929
  }
653
- .sky-theme-modern .sky-btn-link:hover {
654
- border: none;
655
- box-shadow: inset 0 0 0 1px #1870B8;
656
- text-decoration: none;
930
+ .sky-theme-modern .sky-btn-danger.sky-btn-disabled:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger[disabled]:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger[disabled]:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger[disabled]:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-danger[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus) {
931
+ box-shadow: var(--sky-override-button-danger-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-danger-disabled));
657
932
  }
658
- .sky-theme-modern .sky-btn-link:hover, .sky-theme-modern .sky-btn-link:active, .sky-theme-modern .sky-btn-link.sky-btn-active {
659
- color: #1870B8;
933
+ .sky-theme-modern .sky-btn-link {
934
+ color: var(--sky-color-text-action);
660
935
  }
661
- .sky-theme-modern .sky-btn-link:active, .sky-theme-modern .sky-btn-link.sky-btn-active {
662
- border: none;
663
- box-shadow: inset 0 0 0 2px #1870B8;
664
- background-image: none;
936
+ .sky-theme-modern .sky-btn-borderless,
937
+ .sky-theme-modern .sky-btn-icon-borderless {
938
+ color: var(--sky-color-icon-deemphasized);
665
939
  }
666
- .sky-theme-modern .sky-btn-link.sky-btn-disabled, .sky-theme-modern .sky-btn-link.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-link.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-link.sky-btn-disabled:active, .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-link[disabled], .sky-theme-modern .sky-btn-link[disabled]:hover, .sky-theme-modern .sky-btn-link[disabled]:focus-visible, .sky-theme-modern .sky-btn-link[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-link[disabled]:active, .sky-theme-modern .sky-btn-link[disabled].sky-btn-active {
667
- border: none;
668
- box-shadow: inset 0 0 0 1px #d2d2d2;
669
- background-color: #ededee;
670
- color: #686c73;
671
- opacity: 1;
940
+ .sky-theme-modern .sky-btn-icon-borderless {
941
+ padding: var(--sky-override-button-icon-borderless-padding, var(--sky-space-inset-balanced-xs));
942
+ height: var(--sky-override-borderless-icon-size, "");
943
+ width: var(--sky-override-borderless-icon-size, "");
672
944
  }
673
- .sky-theme-modern .sky-btn-link:focus-visible {
674
- outline: none;
945
+ .sky-theme-modern .sky-btn-link,
946
+ .sky-theme-modern .sky-btn-borderless,
947
+ .sky-theme-modern .sky-btn-icon-borderless {
948
+ background-color: var(--sky-color-background-action-tertiary-base);
949
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base);
675
950
  }
676
- .sky-theme-modern .sky-btn-link:focus-visible:not(:active) {
677
- border: none;
678
- box-shadow: inset 0 0 0 2px #1870B8, 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
951
+ .sky-theme-modern .sky-btn-link:hover,
952
+ .sky-theme-modern .sky-btn-borderless:hover,
953
+ .sky-theme-modern .sky-btn-icon-borderless:hover {
954
+ background-color: var(--sky-color-background-action-tertiary-hover);
955
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover);
956
+ }
957
+ .sky-theme-modern .sky-btn-link:active, .sky-theme-modern .sky-btn-link.sky-btn-active,
958
+ .sky-theme-modern .sky-btn-borderless:active,
959
+ .sky-theme-modern .sky-btn-borderless.sky-btn-active,
960
+ .sky-theme-modern .sky-btn-icon-borderless:active,
961
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-active {
962
+ background-color: var(--sky-color-background-action-tertiary-active);
963
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active);
964
+ }
965
+ .sky-theme-modern .sky-btn-link:focus-visible:not(:active),
966
+ .sky-theme-modern .sky-btn-borderless:focus-visible:not(:active),
967
+ .sky-theme-modern .sky-btn-icon-borderless:focus-visible:not(:active) {
968
+ background-color: var(--sky-color-background-action-tertiary-focus);
969
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
970
+ }
971
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled, .sky-theme-modern .sky-btn-link.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-link.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-link.sky-btn-disabled:active, .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-link[disabled], .sky-theme-modern .sky-btn-link[disabled]:hover, .sky-theme-modern .sky-btn-link[disabled]:focus-visible, .sky-theme-modern .sky-btn-link[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-link[disabled]:active, .sky-theme-modern .sky-btn-link[disabled].sky-btn-active,
972
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled,
973
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:hover,
974
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:focus-visible,
975
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-focus,
976
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:active,
977
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-active,
978
+ .sky-theme-modern .sky-btn-borderless[disabled],
979
+ .sky-theme-modern .sky-btn-borderless[disabled]:hover,
980
+ .sky-theme-modern .sky-btn-borderless[disabled]:focus-visible,
981
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-focus,
982
+ .sky-theme-modern .sky-btn-borderless[disabled]:active,
983
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-active,
984
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled,
985
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:hover,
986
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:focus-visible,
987
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-focus,
988
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:active,
989
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-active,
990
+ .sky-theme-modern .sky-btn-icon-borderless[disabled],
991
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:hover,
992
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:focus-visible,
993
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-focus,
994
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:active,
995
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-active {
996
+ box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled);
997
+ background-color: var(--sky-color-background-action-tertiary-disabled);
998
+ }
999
+ .sky-theme-modern .sky-btn-link.sky-btn-disabled:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link[disabled]:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link[disabled]:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link[disabled]:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus),
1000
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:is(:focus-visible, .sky-btn-focus),
1001
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus),
1002
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus),
1003
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus),
1004
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus),
1005
+ .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus),
1006
+ .sky-theme-modern .sky-btn-borderless[disabled]:is(:focus-visible, .sky-btn-focus),
1007
+ .sky-theme-modern .sky-btn-borderless[disabled]:hover:is(:focus-visible, .sky-btn-focus),
1008
+ .sky-theme-modern .sky-btn-borderless[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus),
1009
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus),
1010
+ .sky-theme-modern .sky-btn-borderless[disabled]:active:is(:focus-visible, .sky-btn-focus),
1011
+ .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus),
1012
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:is(:focus-visible, .sky-btn-focus),
1013
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus),
1014
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus),
1015
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus),
1016
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus),
1017
+ .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus),
1018
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:is(:focus-visible, .sky-btn-focus),
1019
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:hover:is(:focus-visible, .sky-btn-focus),
1020
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus),
1021
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus),
1022
+ .sky-theme-modern .sky-btn-icon-borderless[disabled]:active:is(:focus-visible, .sky-btn-focus),
1023
+ .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus) {
1024
+ box-shadow: var(--sky-override-button-tertiary-disabled-box-shadow, inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled));
679
1025
  }
680
1026
  .sky-theme-modern .sky-btn-link-inline {
681
- border-radius: 0;
682
- color: var(--sky-text-color-action-primary);
1027
+ background-color: var(--sky-color-background-action-tertiary-base);
1028
+ border-radius: var(--sky-override-button-link-inline-border-radius, var(--sky-border-radius-s));
1029
+ padding: var(--sky-space-inset-balanced-none);
1030
+ color: var(--sky-color-text-action);
1031
+ font-size: var(--sky-override-button-link-inline-font-size, inherit);
1032
+ vertical-align: var(--sky-override-button-link-inline-vertical-align, "");
683
1033
  }
684
1034
  .sky-theme-modern .sky-btn-link-inline:focus-visible:not(:active) {
685
- box-shadow: 0 0 0 2px var(--sky-background-color-primary-dark), 0 1px 8px 2px rgba(0, 0, 0, 0.3);
1035
+ background-color: var(--sky-color-background-action-tertiary-focus);
1036
+ box-shadow: 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
686
1037
  }
687
- .sky-theme-modern .sky-btn-link-inline:hover, .sky-theme-modern .sky-btn-link-inline:active {
688
- color: var(--sky-text-color-action-primary-hover);
689
- text-decoration: underline;
690
- }
691
- .sky-theme-modern .sky-btn-borderless {
692
- border: none;
693
- box-shadow: inset 0 0 0 1px transparent;
694
- background-color: transparent;
695
- color: #686c73;
696
- padding: 9px 21px;
1038
+ .sky-theme-modern .sky-btn-link-inline:active {
1039
+ background-color: var(--sky-color-background-action-tertiary-active);
697
1040
  }
698
- .sky-theme-modern .sky-btn-borderless:hover {
699
- border: none;
700
- box-shadow: inset 0 0 0 1px #1870B8;
701
- text-decoration: none;
1041
+ .sky-theme-modern .sky-btn-link-inline:hover {
1042
+ background-color: var(--sky-color-background-action-tertiary-hover);
702
1043
  }
703
- .sky-theme-modern .sky-btn-borderless:hover, .sky-theme-modern .sky-btn-borderless:active, .sky-theme-modern .sky-btn-borderless.sky-btn-active {
704
- color: #686c73;
705
- }
706
- .sky-theme-modern .sky-btn-borderless:active, .sky-theme-modern .sky-btn-borderless.sky-btn-active {
707
- border: none;
708
- box-shadow: inset 0 0 0 2px #1870B8;
709
- background-image: none;
1044
+ .sky-theme-modern .sky-btn-link-inline:hover, .sky-theme-modern .sky-btn-link-inline:active {
1045
+ color: var(--sky-override-button-link-inline-color-hover-active, var(--sky-color-text-action));
1046
+ text-decoration: underline;
710
1047
  }
711
- .sky-theme-modern .sky-btn-borderless.sky-btn-disabled, .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-borderless.sky-btn-disabled:active, .sky-theme-modern .sky-btn-borderless.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-borderless[disabled], .sky-theme-modern .sky-btn-borderless[disabled]:hover, .sky-theme-modern .sky-btn-borderless[disabled]:focus-visible, .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-borderless[disabled]:active, .sky-theme-modern .sky-btn-borderless[disabled].sky-btn-active {
712
- border: none;
713
- box-shadow: inset 0 0 0 1px #d2d2d2;
714
- background-color: #ededee;
715
- color: #686c73;
716
- opacity: 1;
1048
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled, .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:active, .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-link-inline[disabled], .sky-theme-modern .sky-btn-link-inline[disabled]:hover, .sky-theme-modern .sky-btn-link-inline[disabled]:focus-visible, .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-link-inline[disabled]:active, .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-active {
1049
+ box-shadow: inset 0 0 0 0 var(--sky-color-border-action-tertiary-disabled);
717
1050
  }
718
- .sky-theme-modern .sky-btn-borderless:focus-visible {
719
- outline: none;
720
- }
721
- .sky-theme-modern .sky-btn-borderless:focus-visible:not(:active) {
722
- border: none;
723
- box-shadow: inset 0 0 0 2px #1870B8, 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
1051
+ .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline[disabled]:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline[disabled]:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline[disabled]:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-link-inline[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus) {
1052
+ box-shadow: var(--sky-override-button-link-inline-disabled-box-shadow, inset 0 0 0 0 var(--sky-color-border-action-tertiary-disabled));
724
1053
  }
725
1054
  .sky-theme-modern .sky-btn-borderless-inline {
726
- color: var(--sky-text-color-deemphasized);
727
- }
728
- .sky-theme-modern .sky-btn-icon {
729
- border: none;
730
- box-shadow: inset 0 0 0 1px #d2d2d2;
731
- background-color: #ffffff;
732
- color: #212327;
733
- padding: 9px 15px;
734
- }
735
- .sky-theme-modern .sky-btn-icon:hover {
736
- border: none;
737
- box-shadow: inset 0 0 0 1px #1870B8;
738
- text-decoration: none;
739
- }
740
- .sky-theme-modern .sky-btn-icon:hover, .sky-theme-modern .sky-btn-icon:active, .sky-theme-modern .sky-btn-icon.sky-btn-active {
741
- color: #212327;
742
- }
743
- .sky-theme-modern .sky-btn-icon:active, .sky-theme-modern .sky-btn-icon.sky-btn-active {
744
- border: none;
745
- box-shadow: inset 0 0 0 2px #1870B8;
746
- background-image: none;
747
- }
748
- .sky-theme-modern .sky-btn-icon.sky-btn-disabled, .sky-theme-modern .sky-btn-icon.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-icon.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-icon.sky-btn-disabled:active, .sky-theme-modern .sky-btn-icon.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-icon[disabled], .sky-theme-modern .sky-btn-icon[disabled]:hover, .sky-theme-modern .sky-btn-icon[disabled]:focus-visible, .sky-theme-modern .sky-btn-icon[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-icon[disabled]:active, .sky-theme-modern .sky-btn-icon[disabled].sky-btn-active {
749
- border: none;
750
- box-shadow: inset 0 0 0 1px #d2d2d2;
751
- background-color: #ededee;
752
- color: #686c73;
753
- opacity: 1;
754
- }
755
- .sky-theme-modern .sky-btn-icon:focus-visible {
756
- outline: none;
757
- }
758
- .sky-theme-modern .sky-btn-icon:focus-visible:not(:active) {
759
- border: none;
760
- box-shadow: inset 0 0 0 2px #1870B8, 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
761
- }
762
- .sky-theme-modern .sky-btn-icon-borderless {
763
- border: none;
764
- box-shadow: inset 0 0 0 1px transparent;
765
- background-color: transparent;
766
- color: #686c73;
767
- padding: 1px;
768
- height: 26px;
769
- width: 26px;
770
- }
771
- .sky-theme-modern .sky-btn-icon-borderless:hover {
772
- border: none;
773
- box-shadow: inset 0 0 0 1px #1870B8;
774
- text-decoration: none;
1055
+ color: var(--sky-color-text-deemphasized);
1056
+ padding: var(--sky-space-inset-balanced-none);
1057
+ font-size: var(--sky-override-button-link-inline-font-size, inherit);
1058
+ vertical-align: var(--sky-override-button-link-inline-vertical-align, "");
775
1059
  }
776
- .sky-theme-modern .sky-btn-icon-borderless:hover, .sky-theme-modern .sky-btn-icon-borderless:active, .sky-theme-modern .sky-btn-icon-borderless.sky-btn-active {
777
- color: #686c73;
1060
+ .sky-theme-modern .sky-btn-borderless-inline:focus-visible:not(:active) {
1061
+ box-shadow: 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
778
1062
  }
779
- .sky-theme-modern .sky-btn-icon-borderless:active, .sky-theme-modern .sky-btn-icon-borderless.sky-btn-active {
780
- border: none;
781
- box-shadow: inset 0 0 0 2px #1870B8;
782
- background-image: none;
1063
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:active, .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-borderless-inline[disabled], .sky-theme-modern .sky-btn-borderless-inline[disabled]:hover, .sky-theme-modern .sky-btn-borderless-inline[disabled]:focus-visible, .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-borderless-inline[disabled]:active, .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-active {
1064
+ box-shadow: inset 0 0 0 0 var(--sky-color-border-action-tertiary-disabled);
783
1065
  }
784
- .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled, .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:hover, .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:focus-visible, .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-focus, .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled:active, .sky-theme-modern .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-active, .sky-theme-modern .sky-btn-icon-borderless[disabled], .sky-theme-modern .sky-btn-icon-borderless[disabled]:hover, .sky-theme-modern .sky-btn-icon-borderless[disabled]:focus-visible, .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-focus, .sky-theme-modern .sky-btn-icon-borderless[disabled]:active, .sky-theme-modern .sky-btn-icon-borderless[disabled].sky-btn-active {
785
- border: none;
786
- box-shadow: inset 0 0 0 1px #d2d2d2;
787
- background-color: #ededee;
788
- color: #686c73;
789
- opacity: 1;
790
- }
791
- .sky-theme-modern .sky-btn-icon-borderless:focus-visible {
792
- outline: none;
793
- }
794
- .sky-theme-modern .sky-btn-icon-borderless:focus-visible:not(:active) {
795
- border: none;
796
- box-shadow: inset 0 0 0 2px #1870B8, 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
1066
+ .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline.sky-btn-disabled.sky-btn-active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline[disabled]:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline[disabled]:hover:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline[disabled]:focus-visible:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-focus:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline[disabled]:active:is(:focus-visible, .sky-btn-focus), .sky-theme-modern .sky-btn-borderless-inline[disabled].sky-btn-active:is(:focus-visible, .sky-btn-focus) {
1067
+ box-shadow: var(--sky-override-button-borderless-inline-disabled-box-shadow, inset 0 0 0 0 var(--sky-color-border-action-tertiary-disabled));
797
1068
  }
798
1069
  .sky-theme-modern .sky-btn-sm {
799
1070
  padding: 5px 10px;
@@ -884,113 +1155,6 @@
884
1155
  padding-bottom: 10px;
885
1156
  padding-left: 13px;
886
1157
  }
887
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default {
888
- color: #fbfcfe;
889
- background-color: transparent;
890
- border-color: #686c73;
891
- }
892
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default:hover, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default:active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-active {
893
- color: #fbfcfe;
894
- background-color: rgba(0, 0, 0, 0);
895
- border-color: #505358;
896
- }
897
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default:active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-active {
898
- background-image: none;
899
- }
900
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled:hover, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled:focus, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled.sky-btn-focus, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled:active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled.sky-btn-active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled], .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled]:hover, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled]:focus, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled].sky-btn-focus, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled]:active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled].sky-btn-active, fieldset[disabled] .sky-theme-modern.sky-theme-mode-dark .sky-btn-default, fieldset[disabled] .sky-theme-modern.sky-theme-mode-dark .sky-btn-default:hover, fieldset[disabled] .sky-theme-modern.sky-theme-mode-dark .sky-btn-default:focus, fieldset[disabled] .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-focus, fieldset[disabled] .sky-theme-modern.sky-theme-mode-dark .sky-btn-default:active, fieldset[disabled] .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-active {
901
- background-color: transparent;
902
- border-color: #686c73;
903
- }
904
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger.sky-btn-disabled, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger.sky-btn-disabled:hover, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger.sky-btn-disabled:focus-visible, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger.sky-btn-disabled.sky-btn-focus, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger.sky-btn-disabled:active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger.sky-btn-disabled.sky-btn-active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger[disabled], .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger[disabled]:hover, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger[disabled]:focus-visible, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger[disabled].sky-btn-focus, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger[disabled]:active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-danger[disabled].sky-btn-active,
905
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled,
906
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled:hover,
907
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled:focus-visible,
908
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled.sky-btn-focus,
909
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled:active,
910
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default.sky-btn-disabled.sky-btn-active,
911
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled],
912
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled]:hover,
913
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled]:focus-visible,
914
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled].sky-btn-focus,
915
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled]:active,
916
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-default[disabled].sky-btn-active,
917
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary.sky-btn-disabled,
918
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary.sky-btn-disabled:hover,
919
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary.sky-btn-disabled:focus-visible,
920
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary.sky-btn-disabled.sky-btn-focus,
921
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary.sky-btn-disabled:active,
922
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary.sky-btn-disabled.sky-btn-active,
923
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary[disabled],
924
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary[disabled]:hover,
925
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary[disabled]:focus-visible,
926
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary[disabled].sky-btn-focus,
927
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary[disabled]:active,
928
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-primary[disabled].sky-btn-active {
929
- border: none;
930
- box-shadow: inset 0 0 0 1px #686c73;
931
- background-color: transparent;
932
- color: #686c73;
933
- opacity: 1;
934
- }
935
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless.sky-btn-disabled, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless.sky-btn-disabled:hover, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless.sky-btn-disabled:focus-visible, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless.sky-btn-disabled.sky-btn-focus, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless.sky-btn-disabled:active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless.sky-btn-disabled.sky-btn-active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless[disabled], .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless[disabled]:hover, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless[disabled]:focus-visible, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless[disabled].sky-btn-focus, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless[disabled]:active, .sky-theme-modern.sky-theme-mode-dark .sky-btn-borderless[disabled].sky-btn-active,
936
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless.sky-btn-disabled,
937
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless.sky-btn-disabled:hover,
938
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless.sky-btn-disabled:focus-visible,
939
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-focus,
940
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless.sky-btn-disabled:active,
941
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless.sky-btn-disabled.sky-btn-active,
942
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless[disabled],
943
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless[disabled]:hover,
944
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless[disabled]:focus-visible,
945
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless[disabled].sky-btn-focus,
946
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless[disabled]:active,
947
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-icon-borderless[disabled].sky-btn-active,
948
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link.sky-btn-disabled,
949
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link.sky-btn-disabled:hover,
950
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link.sky-btn-disabled:focus-visible,
951
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link.sky-btn-disabled.sky-btn-focus,
952
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link.sky-btn-disabled:active,
953
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link.sky-btn-disabled.sky-btn-active,
954
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link[disabled],
955
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link[disabled]:hover,
956
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link[disabled]:focus-visible,
957
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link[disabled].sky-btn-focus,
958
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link[disabled]:active,
959
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-link[disabled].sky-btn-active {
960
- border: none;
961
- box-shadow: inset 0 0 0 1px transparent;
962
- background-color: transparent;
963
- color: #686c73;
964
- opacity: 1;
965
- }
966
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-tab {
967
- color: #eeeeef;
968
- }
969
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-close,
970
- .sky-theme-modern.sky-theme-mode-dark .sky-tab-header-count {
971
- color: #efefef;
972
- }
973
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-selected {
974
- color: #fff;
975
- }
976
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-selected:hover {
977
- color: #fff;
978
- }
979
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-selected .sky-btn-tab-close,
980
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-selected .sky-tab-header-count {
981
- color: #efefef;
982
- }
983
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-tab:hover:not(.sky-btn-tab-disabled),
984
- .sky-theme-modern.sky-theme-mode-dark .sky-btn-tab-selected {
985
- color: #fff;
986
- }
987
- .sky-theme-modern.sky-theme-mode-dark .sky-tab-dropdown-menu-item .sky-btn-tab {
988
- background-color: #252a2e;
989
- }
990
- .sky-theme-modern.sky-theme-mode-dark .sky-tab-dropdown-menu-item .sky-btn-tab.sky-btn-tab-selected {
991
- background-color: #252a2e;
992
- color: #fff;
993
- }
994
1158
 
995
1159
  .sky-theme-modern .sky-elevation-0-bordered {
996
1160
  border: 1px solid #d2d2d2;
@@ -1203,6 +1367,10 @@
1203
1367
  --sky-override-font-size: var(--sky-font-size-body-m);
1204
1368
  --sky-override-form-font-weight: var(--sky-font-weight-body-m);
1205
1369
  --sky-override-p-line-height: var(--sky-font-line_height-body-m);
1370
+ --sky-override-a-border-radius: 0;
1371
+ --sky-override-a-color-hover-active: var(
1372
+ --sky-text-color-action-primary-hover
1373
+ );
1206
1374
  }
1207
1375
 
1208
1376
  html:has(.sky-theme-brand-blackbaud) {
@@ -1224,10 +1392,18 @@ html:has(.sky-theme-brand-blackbaud) {
1224
1392
  }
1225
1393
 
1226
1394
  .sky-theme-modern a {
1227
- border-radius: 0;
1395
+ color: var(--sky-color-text-action);
1396
+ border-radius: var(--sky-override-a-border-radius, var(--sky-border-radius-s));
1397
+ }
1398
+ .sky-theme-modern a:hover:not(.sky-btn-primary):not(.sky-btn-danger), .sky-theme-modern a:active:not(.sky-btn-primary):not(.sky-btn-danger) {
1399
+ color: var(--sky-override-a-color-hover-active, var(--sky-color-text-action));
1400
+ }
1401
+ .sky-theme-modern a:hover.sky-btn-primary, .sky-theme-modern a:hover.sky-btn-danger, .sky-theme-modern a:active.sky-btn-primary, .sky-theme-modern a:active.sky-btn-danger {
1402
+ color: var(--sky-color-text-inverse);
1228
1403
  }
1229
1404
  .sky-theme-modern a:focus-visible:not(:active) {
1230
- box-shadow: 0 0 0 2px var(--sky-background-color-primary-dark), 0 1px 8px 2px rgba(0, 0, 0, 0.3);
1405
+ outline: none;
1406
+ box-shadow: 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus);
1231
1407
  }
1232
1408
  .sky-theme-modern h1,
1233
1409
  .sky-theme-modern .sky-font-heading-1 {
@@ -1337,6 +1513,23 @@ html:has(.sky-theme-brand-blackbaud) {
1337
1513
  font-size: inherit;
1338
1514
  font-weight: var(--sky-font-weight-emphasized);
1339
1515
  }
1516
+ .sky-theme-modern .sky-font-hint-text-s {
1517
+ color: var(--sky-color-text-deemphasized);
1518
+ font-family: var(--sky-font-family-primary);
1519
+ font-size: var(--sky-font-size-hint-s);
1520
+ font-style: var(--sky-font-style-hint-s-style);
1521
+ font-weight: var(--sky-font-weight-hint-s);
1522
+ letter-spacing: var(--sky-font-letter_spacing-hint-s);
1523
+ line-height: var(--sky-font-line_height-hint-s);
1524
+ }
1525
+ .sky-theme-modern .sky-font-hint-text-m {
1526
+ color: var(--sky-color-text-deemphasized);
1527
+ font-family: var(--sky-font-family-primary);
1528
+ font-size: var(--sky-font-size-hint-m);
1529
+ font-style: var(--sky-font-style-hint-m-style);
1530
+ font-weight: var(--sky-font-weight-hint-m);
1531
+ line-height: var(--sky-font-line_height-hint-m);
1532
+ }
1340
1533
  .sky-theme-modern .sky-font-display-1 {
1341
1534
  color: var(--sky-color-text-default);
1342
1535
  font-family: var(--sky-font-family-primary);