@transferwise/components 0.0.0-experimental-f29cf47 → 0.0.0-experimental-95cea4f

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 (13) hide show
  1. package/build/main.css +48 -53
  2. package/build/styles/button/Button/less/Button.css +24 -24
  3. package/build/styles/button/Button/less/Button.vars.css +12 -12
  4. package/build/styles/iconButton/IconButton.css +24 -29
  5. package/build/styles/main.css +48 -53
  6. package/package.json +3 -3
  7. package/src/button/Button/less/Button.css +24 -24
  8. package/src/button/Button/less/Button.less +12 -12
  9. package/src/button/Button/less/Button.vars.css +12 -12
  10. package/src/button/Button/less/Button.vars.less +12 -12
  11. package/src/iconButton/IconButton.css +24 -29
  12. package/src/iconButton/IconButton.less +4 -4
  13. package/src/main.css +48 -53
package/src/main.css CHANGED
@@ -550,77 +550,72 @@ div.critical-comms .critical-comms-body {
550
550
  border: none;
551
551
  }
552
552
  .np-icon-button-tertiary-default {
553
- color: var(--color-interactive-primary);
554
- background-color: rgba(134,167,189,0.10196);
555
- background-color: var(--color-background-neutral);
553
+ --Button-color: var(--color-interactive-primary);
554
+ --Button-background: var(--color-background-neutral);
556
555
  }
557
556
  .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
558
- background-color: var(--color-background-neutral-hover);
557
+ --Button-hover-background: var(--color-background-neutral-hover);
559
558
  }
560
559
  .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
561
- background-color: var(--color-background-neutral-active);
560
+ --Button-active-background: var(--color-background-neutral-active);
562
561
  }
563
562
  .np-icon-button-primary-default {
564
- color: var(--color-interactive-control);
565
- background-color: #00a2dd;
566
- background-color: var(--color-interactive-accent);
563
+ --Button-color: var(--color-interactive-control);
564
+ --Button-background: var(--color-interactive-accent);
567
565
  }
568
566
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
569
- background-color: #008fc9;
570
- background-color: var(--color-interactive-accent-hover);
567
+ --Button-hover-background: var(--color-interactive-accent-hover);
571
568
  }
572
569
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
573
- background-color: #0081ba;
574
- background-color: var(--color-interactive-accent-active);
570
+ --Button-active-background: var(--color-interactive-accent-active);
575
571
  }
576
572
  .np-icon-button-primary-negative {
577
- color: var(--color-contrast-overlay);
578
- background-color: var(--color-sentiment-negative-primary);
573
+ --Button-color: var(--color-contrast-overlay);
574
+ --Button-background: var(--color-sentiment-negative-primary);
579
575
  }
580
576
  .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
581
- background-color: var(--color-sentiment-negative-primary-hover);
577
+ --Button-hover-background: var(--color-sentiment-negative-primary-hover);
582
578
  }
583
579
  .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
584
- background-color: var(--color-sentiment-negative-primary-active);
580
+ --Button-active-background: var(--color-sentiment-negative-primary-active);
585
581
  }
586
582
  .np-theme-personal--bright-green .np-icon-button-primary-negative {
587
583
  color: var(--color-white);
588
584
  }
589
585
  .np-icon-button-minimal-default {
590
- color: var(--color-interactive-primary);
591
- background-color: #ffffff;
592
- background-color: var(--color-background-screen);
586
+ --Button-color: var(--color-interactive-primary);
587
+ --Button-background: var(--color-background-screen);
593
588
  background-color: transparent;
594
589
  }
595
590
  .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
596
- background-color: var(--color-background-screen-hover);
591
+ --Button-hover-background: var(--color-background-screen-hover);
597
592
  }
598
593
  .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
599
- background-color: var(--color-background-screen-active);
594
+ --Button-active-background: var(--color-background-screen-active);
600
595
  }
601
596
  .np-icon-button-secondary-default {
602
- color: var(--color-interactive-primary);
603
- background-color: var(--color-interactive-neutral);
597
+ --Button-color: var(--color-interactive-primary);
598
+ --Button-background: var(--color-interactive-neutral);
604
599
  }
605
600
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
606
- background-color: var(--color-interactive-neutral-hover);
601
+ --Button-hover-background: var(--color-interactive-neutral-hover);
607
602
  }
608
603
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
609
- background-color: var(--color-interactive-neutral-active);
604
+ --Button-active-background: var(--color-interactive-neutral-active);
610
605
  }
611
606
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
612
607
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
613
608
  color: var(--color-interactive-control);
614
609
  }
615
610
  .np-icon-button-secondary-negative {
616
- color: var(--color-sentiment-negative-primary);
617
- background-color: var(--color-sentiment-negative-secondary);
611
+ --Button-color: var(--color-sentiment-negative-primary);
612
+ --Button-background: var(--color-sentiment-negative-secondary);
618
613
  }
619
614
  .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
620
- background-color: var(--color-sentiment-negative-secondary-hover);
615
+ --Button-hover-background: var(--color-sentiment-negative-secondary-hover);
621
616
  }
622
617
  .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
623
- background-color: var(--color-sentiment-negative-secondary-active);
618
+ --Button-active-background: var(--color-sentiment-negative-secondary-active);
624
619
  }
625
620
  .np-theme-personal--bright-green .np-icon-button-secondary-negative {
626
621
  color: var(--color-white);
@@ -718,8 +713,8 @@ div.critical-comms .critical-comms-body {
718
713
  }
719
714
  :root {
720
715
  --Button-background: var(--color-interactive-accent);
721
- --Button-hover-background: var(--color-interactive-accent-hover);
722
- --Button-active-background: var(--color-interactive-accent-active);
716
+ --Button-background-hover: var(--color-interactive-accent-hover);
717
+ --Button-background-active: var(--color-interactive-accent-active);
723
718
  --Button-color: var(--color-interactive-control);
724
719
  --Button-padding: var(--size-8) var(--size-12);
725
720
  --Button-border-radius: var(--radius-full);
@@ -732,25 +727,25 @@ div.critical-comms .critical-comms-body {
732
727
  --Button-size-large-padding: var(--size-12) var(--size-16);
733
728
  --Button-avatar-border-color: var(--color-border-neutral);
734
729
  --Button-secondary-background: var(--color-interactive-neutral);
735
- --Button-secondary-hover-background: var(--color-interactive-neutral-hover);
736
- --Button-secondary-active-background: var(--color-interactive-neutral-active);
730
+ --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
731
+ --Button-secondary-background-active: var(--color-interactive-neutral-active);
737
732
  --Button-secondary-color: var(--color-interactive-primary);
738
733
  --Button-tertiary-background: var(--color-background-neutral);
739
- --Button-tertiary-hover-background: var(--color-background-neutral-hover);
740
- --Button-tertiary-active-background: var(--color-background-neutral-active);
734
+ --Button-tertiary-background-hover: var(--color-background-neutral-hover);
735
+ --Button-tertiary-background-active: var(--color-background-neutral-active);
741
736
  --Button-tertiary-color: var(--color-content-primary);
742
737
  --Button-minimal-background: transparent;
743
- --Button-minimal-hover-background: var(--color-background-screen-hover);
744
- --Button-minimal-active-background: var(--color-background-screen-active);
738
+ --Button-minimal-background-hover: var(--color-background-screen-hover);
739
+ --Button-minimal-background-active: var(--color-background-screen-active);
745
740
  --Button-minimal-color: var(--color-interactive-primary);
746
741
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
747
- --Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
748
- --Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
742
+ --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
743
+ --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
749
744
  --Button-primary-negative-color: var(--color-contrast);
750
745
  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
751
746
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
752
- --Button-secondary-negative-hover-background: var(--color-sentiment-negative-secondary-hover);
753
- --Button-secondary-negative-active-background: var(--color-sentiment-negative-secondary-active);
747
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
748
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
754
749
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
755
750
  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
756
751
  }
@@ -813,13 +808,13 @@ div.critical-comms .critical-comms-body {
813
808
  }
814
809
  .wds-Button:hover {
815
810
  background-color: #008fc9;
816
- background-color: var(--Button-hover-background);
811
+ background-color: var(--Button-background-hover);
817
812
  -webkit-text-decoration: none;
818
813
  text-decoration: none;
819
814
  }
820
815
  .wds-Button:active {
821
816
  background-color: #0081ba;
822
- background-color: var(--Button-active-background);
817
+ background-color: var(--Button-background-active);
823
818
  -webkit-text-decoration: none;
824
819
  text-decoration: none;
825
820
  }
@@ -835,14 +830,14 @@ div.critical-comms .critical-comms-body {
835
830
  }
836
831
  .wds-Button--secondary {
837
832
  --Button-background: var(--Button-secondary-background);
838
- --Button-hover-background: var(--Button-secondary-hover-background);
839
- --Button-active-background: var(--Button-secondary-active-background);
833
+ --Button-background-hover: var(--Button-secondary-hover-background);
834
+ --Button-background-active: var(--Button-secondary-active-background);
840
835
  --Button-color: var(--Button-secondary-color);
841
836
  }
842
837
  .wds-Button--tertiary {
843
838
  --Button-background: var(--Button-tertiary-background);
844
- --Button-hover-background: var(--Button-tertiary-hover-background);
845
- --Button-active-background: var(--Button-tertiary-active-background);
839
+ --Button-background-hover: var(--Button-tertiary-hover-background);
840
+ --Button-background-active: var(--Button-tertiary-active-background);
846
841
  --Button-color: var(--Button-tertiary-color);
847
842
  }
848
843
  .wds-Button--tertiary .wds-Button-icon--right {
@@ -850,8 +845,8 @@ div.critical-comms .critical-comms-body {
850
845
  }
851
846
  .wds-Button--minimal {
852
847
  --Button-background: var(--Button-minimal-background);
853
- --Button-hover-background: var(--Button-minimal-hover-background);
854
- --Button-active-background: var(--Button-minimal-active-background);
848
+ --Button-background-hover: var(--Button-minimal-hover-background);
849
+ --Button-background-active: var(--Button-minimal-active-background);
855
850
  --Button-color: var(--Button-minimal-color);
856
851
  -webkit-text-decoration: underline;
857
852
  text-decoration: underline;
@@ -863,15 +858,15 @@ div.critical-comms .critical-comms-body {
863
858
  }
864
859
  .wds-Button--negative.wds-Button--primary {
865
860
  --Button-background: var(--Button-primary-negative-background);
866
- --Button-hover-background: var(--Button-primary-negative-hover-background);
867
- --Button-active-background: var(--Button-primary-negative-active-background);
861
+ --Button-background-hover: var(--Button-primary-negative-hover-background);
862
+ --Button-background-active: var(--Button-primary-negative-active-background);
868
863
  --Button-color: var(--Button-primary-negative-color);
869
864
  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
870
865
  }
871
866
  .wds-Button--negative.wds-Button--secondary {
872
867
  --Button-background: var(--Button-secondary-negative-background);
873
- --Button-hover-background: var(--Button-secondary-negative-hover-background);
874
- --Button-active-background: var(--Button-secondary-negative-active-background);
868
+ --Button-background-hover: var(--Button-secondary-negative-hover-background);
869
+ --Button-background-active: var(--Button-secondary-negative-active-background);
875
870
  --Button-color: var(--Button-secondary-negative-color);
876
871
  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
877
872
  }