@transferwise/components 0.0.0-experimental-c2e635d → 0.0.0-experimental-f341b41

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 (10) hide show
  1. package/build/main.css +22 -30
  2. package/build/styles/button/Button.css +22 -30
  3. package/build/styles/button/Button.vars.css +1 -18
  4. package/build/styles/main.css +22 -30
  5. package/package.json +3 -3
  6. package/src/button/Button.css +22 -30
  7. package/src/button/Button.less +30 -6
  8. package/src/button/Button.vars.css +1 -18
  9. package/src/button/Button.vars.less +1 -24
  10. package/src/main.css +22 -30
package/build/main.css CHANGED
@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
716
716
  .np-btn.disabled[class] {
717
717
  pointer-events: auto;
718
718
  }
719
- :root {
719
+ .wds-Button {
720
720
  --Button-background: var(--color-interactive-accent);
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
@@ -726,7 +726,6 @@ div.critical-comms .critical-comms-body {
726
726
  --Button-size-small-padding: 5px var(--size-12);
727
727
  --Button-size-medium-padding: var(--size-8) var(--size-12);
728
728
  --Button-size-large-padding: var(--size-12) var(--size-16);
729
- --Button-avatar-border-color: var(--color-border-neutral);
730
729
  --Button-transition-duration: 150ms;
731
730
  --Button-transition-easing: ease-in-out;
732
731
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -745,31 +744,15 @@ div.critical-comms .critical-comms-body {
745
744
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
746
745
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
747
746
  --Button-primary-negative-color: var(--color-contrast);
748
- --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
749
747
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
750
748
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
751
749
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
752
750
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
753
- --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
754
- }
755
- .np-theme-personal--dark .wds-Button {
756
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
757
- }
758
- .np-theme-personal--forest-green .wds-Button {
759
- --color-interactive-neutral: rgba(159,232,112,0.2);
760
- --color-interactive-neutral-hover: rgba(205,255,173,0.2);
761
- --color-interactive-neutral-active: rgba(236,255,224,0.2);
762
- --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
763
- --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
764
- --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
765
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
766
- --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
767
751
  }
768
752
  .np-theme-personal--bright-green .wds-Button {
769
753
  --color-contrast: #FFFFFF;
770
754
  --Button-secondary-color: var(--color-interactive-control);
771
755
  --Button-secondary-negative-color: var(--color-contrast);
772
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
773
756
  }
774
757
  /* Button Styles */
775
758
  .wds-Button {
@@ -787,16 +770,12 @@ div.critical-comms .critical-comms-body {
787
770
  -webkit-appearance: none;
788
771
  -moz-appearance: none;
789
772
  appearance: none;
790
- background-color: #00a2dd;
791
773
  background-color: var(--Button-background);
792
774
  border: none;
793
- border-radius: 9999px;
794
775
  border-radius: var(--Button-border-radius);
795
776
  color: var(--Button-color);
796
777
  cursor: pointer;
797
- padding: 8px 12px;
798
778
  padding: var(--Button-padding);
799
- transition: color, background-color 150ms ease-in-out;
800
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
801
780
  }
802
781
  .wds-Button:focus {
@@ -804,13 +783,11 @@ div.critical-comms .critical-comms-body {
804
783
  text-decoration: none;
805
784
  }
806
785
  .wds-Button:hover {
807
- background-color: #008fc9;
808
786
  background-color: var(--Button-background-hover);
809
787
  -webkit-text-decoration: none;
810
788
  text-decoration: none;
811
789
  }
812
790
  .wds-Button:active {
813
- background-color: #0081ba;
814
791
  background-color: var(--Button-background-active);
815
792
  -webkit-text-decoration: none;
816
793
  text-decoration: none;
@@ -825,7 +802,6 @@ div.critical-comms .critical-comms-body {
825
802
  .wds-Button:disabled:hover,
826
803
  .wds-Button.wds-Button--disabled:active,
827
804
  .wds-Button:disabled:active {
828
- background-color: #00a2dd;
829
805
  background-color: var(--Button-background);
830
806
  }
831
807
  .wds-Button--secondary {
@@ -863,14 +839,12 @@ div.critical-comms .critical-comms-body {
863
839
  --Button-background-hover: var(--Button-primary-negative-background-hover);
864
840
  --Button-background-active: var(--Button-primary-negative-background-active);
865
841
  --Button-color: var(--Button-primary-negative-color);
866
- --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
867
842
  }
868
843
  .wds-Button--negative.wds-Button--secondary {
869
844
  --Button-background: var(--Button-secondary-negative-background);
870
845
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
871
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
872
847
  --Button-color: var(--Button-secondary-negative-color);
873
- --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
874
848
  }
875
849
  .wds-Button--small {
876
850
  --Button-padding: var(--Button-size-small-padding);
@@ -903,9 +877,6 @@ div.critical-comms .critical-comms-body {
903
877
  margin-right: 0;
904
878
  margin-left: 5px;
905
879
  }
906
- .wds-Button-avatars .np-circle {
907
- --circle-border-color: var(--Button-avatar-border-color);
908
- }
909
880
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
910
881
  color: var(--Button-color);
911
882
  }
@@ -963,6 +934,27 @@ div.critical-comms .critical-comms-body {
963
934
  [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
964
935
  transform: rotate(180deg);
965
936
  }
937
+ /* Avatar border transparency */
938
+ /* dark buttons get 20% transparency, light buttons get 12% */
939
+ .wds-Button-avatars .np-circle {
940
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
941
+ }
942
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
943
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
944
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
945
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
946
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
947
+ }
948
+ .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
949
+ .np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
950
+ .np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
951
+ .np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
952
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
953
+ }
954
+ .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
955
+ .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
956
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
957
+ }
966
958
  .np-card {
967
959
  overflow: hidden;
968
960
  transition-property: transform, box-shadow;
package/build/styles/button/Button.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ .wds-Button {
2
2
  --Button-background: var(--color-interactive-accent);
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
@@ -8,7 +8,6 @@
8
8
  --Button-size-small-padding: 5px var(--size-12);
9
9
  --Button-size-medium-padding: var(--size-8) var(--size-12);
10
10
  --Button-size-large-padding: var(--size-12) var(--size-16);
11
- --Button-avatar-border-color: var(--color-border-neutral);
12
11
  --Button-transition-duration: 150ms;
13
12
  --Button-transition-easing: ease-in-out;
14
13
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -27,31 +26,15 @@
27
26
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
27
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
29
28
  --Button-primary-negative-color: var(--color-contrast);
30
- --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
31
29
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
32
30
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
33
31
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
34
32
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
35
- --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
36
- }
37
- .np-theme-personal--dark .wds-Button {
38
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
39
- }
40
- .np-theme-personal--forest-green .wds-Button {
41
- --color-interactive-neutral: rgba(159,232,112,0.2);
42
- --color-interactive-neutral-hover: rgba(205,255,173,0.2);
43
- --color-interactive-neutral-active: rgba(236,255,224,0.2);
44
- --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
45
- --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
46
- --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
47
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
48
- --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
49
33
  }
50
34
  .np-theme-personal--bright-green .wds-Button {
51
35
  --color-contrast: #FFFFFF;
52
36
  --Button-secondary-color: var(--color-interactive-control);
53
37
  --Button-secondary-negative-color: var(--color-contrast);
54
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
55
38
  }
56
39
  /* Button Styles */
57
40
  .wds-Button {
@@ -69,16 +52,12 @@
69
52
  -webkit-appearance: none;
70
53
  -moz-appearance: none;
71
54
  appearance: none;
72
- background-color: #00a2dd;
73
55
  background-color: var(--Button-background);
74
56
  border: none;
75
- border-radius: 9999px;
76
57
  border-radius: var(--Button-border-radius);
77
58
  color: var(--Button-color);
78
59
  cursor: pointer;
79
- padding: 8px 12px;
80
60
  padding: var(--Button-padding);
81
- transition: color, background-color 150ms ease-in-out;
82
61
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
83
62
  }
84
63
  .wds-Button:focus {
@@ -86,13 +65,11 @@
86
65
  text-decoration: none;
87
66
  }
88
67
  .wds-Button:hover {
89
- background-color: #008fc9;
90
68
  background-color: var(--Button-background-hover);
91
69
  -webkit-text-decoration: none;
92
70
  text-decoration: none;
93
71
  }
94
72
  .wds-Button:active {
95
- background-color: #0081ba;
96
73
  background-color: var(--Button-background-active);
97
74
  -webkit-text-decoration: none;
98
75
  text-decoration: none;
@@ -107,7 +84,6 @@
107
84
  .wds-Button:disabled:hover,
108
85
  .wds-Button.wds-Button--disabled:active,
109
86
  .wds-Button:disabled:active {
110
- background-color: #00a2dd;
111
87
  background-color: var(--Button-background);
112
88
  }
113
89
  .wds-Button--secondary {
@@ -145,14 +121,12 @@
145
121
  --Button-background-hover: var(--Button-primary-negative-background-hover);
146
122
  --Button-background-active: var(--Button-primary-negative-background-active);
147
123
  --Button-color: var(--Button-primary-negative-color);
148
- --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
149
124
  }
150
125
  .wds-Button--negative.wds-Button--secondary {
151
126
  --Button-background: var(--Button-secondary-negative-background);
152
127
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
153
128
  --Button-background-active: var(--Button-secondary-negative-background-active);
154
129
  --Button-color: var(--Button-secondary-negative-color);
155
- --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
156
130
  }
157
131
  .wds-Button--small {
158
132
  --Button-padding: var(--Button-size-small-padding);
@@ -185,9 +159,6 @@
185
159
  margin-right: 0;
186
160
  margin-left: 5px;
187
161
  }
188
- .wds-Button-avatars .np-circle {
189
- --circle-border-color: var(--Button-avatar-border-color);
190
- }
191
162
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
192
163
  color: var(--Button-color);
193
164
  }
@@ -245,3 +216,24 @@
245
216
  [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
246
217
  transform: rotate(180deg);
247
218
  }
219
+ /* Avatar border transparency */
220
+ /* dark buttons get 20% transparency, light buttons get 12% */
221
+ .wds-Button-avatars .np-circle {
222
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
223
+ }
224
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
225
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
226
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
227
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
228
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
229
+ }
230
+ .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
231
+ .np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
232
+ .np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
233
+ .np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
234
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
235
+ }
236
+ .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
237
+ .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
238
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
239
+ }
package/build/styles/button/Button.vars.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ .wds-Button {
2
2
  --Button-background: var(--color-interactive-accent);
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
@@ -8,7 +8,6 @@
8
8
  --Button-size-small-padding: 5px var(--size-12);
9
9
  --Button-size-medium-padding: var(--size-8) var(--size-12);
10
10
  --Button-size-large-padding: var(--size-12) var(--size-16);
11
- --Button-avatar-border-color: var(--color-border-neutral);
12
11
  --Button-transition-duration: 150ms;
13
12
  --Button-transition-easing: ease-in-out;
14
13
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -27,29 +26,13 @@
27
26
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
27
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
29
28
  --Button-primary-negative-color: var(--color-contrast);
30
- --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
31
29
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
32
30
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
33
31
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
34
32
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
35
- --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
36
- }
37
- .np-theme-personal--dark .wds-Button {
38
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
39
- }
40
- .np-theme-personal--forest-green .wds-Button {
41
- --color-interactive-neutral: rgba(159,232,112,0.2);
42
- --color-interactive-neutral-hover: rgba(205,255,173,0.2);
43
- --color-interactive-neutral-active: rgba(236,255,224,0.2);
44
- --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
45
- --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
46
- --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
47
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
48
- --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
49
33
  }
50
34
  .np-theme-personal--bright-green .wds-Button {
51
35
  --color-contrast: #FFFFFF;
52
36
  --Button-secondary-color: var(--color-interactive-control);
53
37
  --Button-secondary-negative-color: var(--color-contrast);
54
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
55
38
  }
package/build/styles/main.css CHANGED
@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
716
716
  .np-btn.disabled[class] {
717
717
  pointer-events: auto;
718
718
  }
719
- :root {
719
+ .wds-Button {
720
720
  --Button-background: var(--color-interactive-accent);
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
@@ -726,7 +726,6 @@ div.critical-comms .critical-comms-body {
726
726
  --Button-size-small-padding: 5px var(--size-12);
727
727
  --Button-size-medium-padding: var(--size-8) var(--size-12);
728
728
  --Button-size-large-padding: var(--size-12) var(--size-16);
729
- --Button-avatar-border-color: var(--color-border-neutral);
730
729
  --Button-transition-duration: 150ms;
731
730
  --Button-transition-easing: ease-in-out;
732
731
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -745,31 +744,15 @@ div.critical-comms .critical-comms-body {
745
744
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
746
745
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
747
746
  --Button-primary-negative-color: var(--color-contrast);
748
- --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
749
747
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
750
748
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
751
749
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
752
750
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
753
- --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
754
- }
755
- .np-theme-personal--dark .wds-Button {
756
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
757
- }
758
- .np-theme-personal--forest-green .wds-Button {
759
- --color-interactive-neutral: rgba(159,232,112,0.2);
760
- --color-interactive-neutral-hover: rgba(205,255,173,0.2);
761
- --color-interactive-neutral-active: rgba(236,255,224,0.2);
762
- --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
763
- --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
764
- --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
765
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
766
- --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
767
751
  }
768
752
  .np-theme-personal--bright-green .wds-Button {
769
753
  --color-contrast: #FFFFFF;
770
754
  --Button-secondary-color: var(--color-interactive-control);
771
755
  --Button-secondary-negative-color: var(--color-contrast);
772
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
773
756
  }
774
757
  /* Button Styles */
775
758
  .wds-Button {
@@ -787,16 +770,12 @@ div.critical-comms .critical-comms-body {
787
770
  -webkit-appearance: none;
788
771
  -moz-appearance: none;
789
772
  appearance: none;
790
- background-color: #00a2dd;
791
773
  background-color: var(--Button-background);
792
774
  border: none;
793
- border-radius: 9999px;
794
775
  border-radius: var(--Button-border-radius);
795
776
  color: var(--Button-color);
796
777
  cursor: pointer;
797
- padding: 8px 12px;
798
778
  padding: var(--Button-padding);
799
- transition: color, background-color 150ms ease-in-out;
800
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
801
780
  }
802
781
  .wds-Button:focus {
@@ -804,13 +783,11 @@ div.critical-comms .critical-comms-body {
804
783
  text-decoration: none;
805
784
  }
806
785
  .wds-Button:hover {
807
- background-color: #008fc9;
808
786
  background-color: var(--Button-background-hover);
809
787
  -webkit-text-decoration: none;
810
788
  text-decoration: none;
811
789
  }
812
790
  .wds-Button:active {
813
- background-color: #0081ba;
814
791
  background-color: var(--Button-background-active);
815
792
  -webkit-text-decoration: none;
816
793
  text-decoration: none;
@@ -825,7 +802,6 @@ div.critical-comms .critical-comms-body {
825
802
  .wds-Button:disabled:hover,
826
803
  .wds-Button.wds-Button--disabled:active,
827
804
  .wds-Button:disabled:active {
828
- background-color: #00a2dd;
829
805
  background-color: var(--Button-background);
830
806
  }
831
807
  .wds-Button--secondary {
@@ -863,14 +839,12 @@ div.critical-comms .critical-comms-body {
863
839
  --Button-background-hover: var(--Button-primary-negative-background-hover);
864
840
  --Button-background-active: var(--Button-primary-negative-background-active);
865
841
  --Button-color: var(--Button-primary-negative-color);
866
- --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
867
842
  }
868
843
  .wds-Button--negative.wds-Button--secondary {
869
844
  --Button-background: var(--Button-secondary-negative-background);
870
845
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
871
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
872
847
  --Button-color: var(--Button-secondary-negative-color);
873
- --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
874
848
  }
875
849
  .wds-Button--small {
876
850
  --Button-padding: var(--Button-size-small-padding);
@@ -903,9 +877,6 @@ div.critical-comms .critical-comms-body {
903
877
  margin-right: 0;
904
878
  margin-left: 5px;
905
879
  }
906
- .wds-Button-avatars .np-circle {
907
- --circle-border-color: var(--Button-avatar-border-color);
908
- }
909
880
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
910
881
  color: var(--Button-color);
911
882
  }
@@ -963,6 +934,27 @@ div.critical-comms .critical-comms-body {
963
934
  [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
964
935
  transform: rotate(180deg);
965
936
  }
937
+ /* Avatar border transparency */
938
+ /* dark buttons get 20% transparency, light buttons get 12% */
939
+ .wds-Button-avatars .np-circle {
940
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
941
+ }
942
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
943
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
944
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
945
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
946
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
947
+ }
948
+ .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
949
+ .np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
950
+ .np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
951
+ .np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
952
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
953
+ }
954
+ .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
955
+ .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
956
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
957
+ }
966
958
  .np-card {
967
959
  overflow: hidden;
968
960
  transition-property: transform, box-shadow;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-c2e635d",
3
+ "version": "0.0.0-experimental-f341b41",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,12 +92,12 @@
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
94
  "@transferwise/less-config": "3.1.0",
95
- "@transferwise/neptune-css": "0.0.0-experimental-c2e635d",
95
+ "@transferwise/neptune-css": "0.0.0-experimental-f341b41",
96
96
  "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
100
- "@transferwise/neptune-css": "0.0.0-experimental-c2e635d",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-f341b41",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
package/src/button/Button.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ .wds-Button {
2
2
  --Button-background: var(--color-interactive-accent);
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
@@ -8,7 +8,6 @@
8
8
  --Button-size-small-padding: 5px var(--size-12);
9
9
  --Button-size-medium-padding: var(--size-8) var(--size-12);
10
10
  --Button-size-large-padding: var(--size-12) var(--size-16);
11
- --Button-avatar-border-color: var(--color-border-neutral);
12
11
  --Button-transition-duration: 150ms;
13
12
  --Button-transition-easing: ease-in-out;
14
13
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -27,31 +26,15 @@
27
26
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
27
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
29
28
  --Button-primary-negative-color: var(--color-contrast);
30
- --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
31
29
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
32
30
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
33
31
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
34
32
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
35
- --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
36
- }
37
- .np-theme-personal--dark .wds-Button {
38
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
39
- }
40
- .np-theme-personal--forest-green .wds-Button {
41
- --color-interactive-neutral: rgba(159,232,112,0.2);
42
- --color-interactive-neutral-hover: rgba(205,255,173,0.2);
43
- --color-interactive-neutral-active: rgba(236,255,224,0.2);
44
- --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
45
- --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
46
- --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
47
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
48
- --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
49
33
  }
50
34
  .np-theme-personal--bright-green .wds-Button {
51
35
  --color-contrast: #FFFFFF;
52
36
  --Button-secondary-color: var(--color-interactive-control);
53
37
  --Button-secondary-negative-color: var(--color-contrast);
54
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
55
38
  }
56
39
  /* Button Styles */
57
40
  .wds-Button {
@@ -69,16 +52,12 @@
69
52
  -webkit-appearance: none;
70
53
  -moz-appearance: none;
71
54
  appearance: none;
72
- background-color: #00a2dd;
73
55
  background-color: var(--Button-background);
74
56
  border: none;
75
- border-radius: 9999px;
76
57
  border-radius: var(--Button-border-radius);
77
58
  color: var(--Button-color);
78
59
  cursor: pointer;
79
- padding: 8px 12px;
80
60
  padding: var(--Button-padding);
81
- transition: color, background-color 150ms ease-in-out;
82
61
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
83
62
  }
84
63
  .wds-Button:focus {
@@ -86,13 +65,11 @@
86
65
  text-decoration: none;
87
66
  }
88
67
  .wds-Button:hover {
89
- background-color: #008fc9;
90
68
  background-color: var(--Button-background-hover);
91
69
  -webkit-text-decoration: none;
92
70
  text-decoration: none;
93
71
  }
94
72
  .wds-Button:active {
95
- background-color: #0081ba;
96
73
  background-color: var(--Button-background-active);
97
74
  -webkit-text-decoration: none;
98
75
  text-decoration: none;
@@ -107,7 +84,6 @@
107
84
  .wds-Button:disabled:hover,
108
85
  .wds-Button.wds-Button--disabled:active,
109
86
  .wds-Button:disabled:active {
110
- background-color: #00a2dd;
111
87
  background-color: var(--Button-background);
112
88
  }
113
89
  .wds-Button--secondary {
@@ -145,14 +121,12 @@
145
121
  --Button-background-hover: var(--Button-primary-negative-background-hover);
146
122
  --Button-background-active: var(--Button-primary-negative-background-active);
147
123
  --Button-color: var(--Button-primary-negative-color);
148
- --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
149
124
  }
150
125
  .wds-Button--negative.wds-Button--secondary {
151
126
  --Button-background: var(--Button-secondary-negative-background);
152
127
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
153
128
  --Button-background-active: var(--Button-secondary-negative-background-active);
154
129
  --Button-color: var(--Button-secondary-negative-color);
155
- --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
156
130
  }
157
131
  .wds-Button--small {
158
132
  --Button-padding: var(--Button-size-small-padding);
@@ -185,9 +159,6 @@
185
159
  margin-right: 0;
186
160
  margin-left: 5px;
187
161
  }
188
- .wds-Button-avatars .np-circle {
189
- --circle-border-color: var(--Button-avatar-border-color);
190
- }
191
162
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
192
163
  color: var(--Button-color);
193
164
  }
@@ -245,3 +216,24 @@
245
216
  [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
246
217
  transform: rotate(180deg);
247
218
  }
219
+ /* Avatar border transparency */
220
+ /* dark buttons get 20% transparency, light buttons get 12% */
221
+ .wds-Button-avatars .np-circle {
222
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
223
+ }
224
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
225
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
226
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
227
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
228
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
229
+ }
230
+ .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
231
+ .np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
232
+ .np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
233
+ .np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
234
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
235
+ }
236
+ .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
237
+ .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
238
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
239
+ }
package/src/button/Button.less CHANGED
@@ -90,7 +90,6 @@
90
90
  --Button-background-hover: var(--Button-primary-negative-background-hover);
91
91
  --Button-background-active: var(--Button-primary-negative-background-active);
92
92
  --Button-color: var(--Button-primary-negative-color);
93
- --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
94
93
  }
95
94
 
96
95
  &.wds-Button--secondary {
@@ -98,7 +97,6 @@
98
97
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
99
98
  --Button-background-active: var(--Button-secondary-negative-background-active);
100
99
  --Button-color: var(--Button-secondary-negative-color);
101
- --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
102
100
  }
103
101
  }
104
102
 
@@ -138,10 +136,6 @@
138
136
  margin-left: 5px;
139
137
  }
140
138
 
141
- .np-circle {
142
- --circle-border-color: var(--Button-avatar-border-color);
143
- }
144
-
145
139
  .np-avatar-view .np-avatar-view-content {
146
140
  color: var(--Button-color);
147
141
  }
@@ -216,3 +210,33 @@
216
210
  }
217
211
  }
218
212
  }
213
+
214
+ /* Avatar border transparency */
215
+ /* dark buttons get 20% transparency, light buttons get 12% */
216
+ .wds-Button-avatars {
217
+ .np-circle {
218
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
219
+
220
+ .wds-Button--secondary.wds-Button--negative &,
221
+ .wds-Button--secondary &,
222
+ .wds-Button--tertiary &,
223
+ .wds-Button--minimal & {
224
+ .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
225
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
226
+ }
227
+ }
228
+ .wds-Button--primary &,
229
+ .wds-Button--primary.wds-Button--negative & {
230
+ .np-theme-personal--dark &,
231
+ .np-theme-personal--forest-green & {
232
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
233
+ }
234
+ }
235
+ .wds-Button--tertiary &,
236
+ .wds-Button--minimal & {
237
+ .np-theme-personal--bright-green & {
238
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
239
+ }
240
+ }
241
+ }
242
+ }
package/src/button/Button.vars.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ .wds-Button {
2
2
  --Button-background: var(--color-interactive-accent);
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
@@ -8,7 +8,6 @@
8
8
  --Button-size-small-padding: 5px var(--size-12);
9
9
  --Button-size-medium-padding: var(--size-8) var(--size-12);
10
10
  --Button-size-large-padding: var(--size-12) var(--size-16);
11
- --Button-avatar-border-color: var(--color-border-neutral);
12
11
  --Button-transition-duration: 150ms;
13
12
  --Button-transition-easing: ease-in-out;
14
13
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -27,29 +26,13 @@
27
26
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
27
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
29
28
  --Button-primary-negative-color: var(--color-contrast);
30
- --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
31
29
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
32
30
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
33
31
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
34
32
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
35
- --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
36
- }
37
- .np-theme-personal--dark .wds-Button {
38
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
39
- }
40
- .np-theme-personal--forest-green .wds-Button {
41
- --color-interactive-neutral: rgba(159,232,112,0.2);
42
- --color-interactive-neutral-hover: rgba(205,255,173,0.2);
43
- --color-interactive-neutral-active: rgba(236,255,224,0.2);
44
- --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
45
- --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
46
- --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
47
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
48
- --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
49
33
  }
50
34
  .np-theme-personal--bright-green .wds-Button {
51
35
  --color-contrast: #FFFFFF;
52
36
  --Button-secondary-color: var(--color-interactive-control);
53
37
  --Button-secondary-negative-color: var(--color-contrast);
54
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
55
38
  }
package/src/button/Button.vars.less CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ .wds-Button {
2
2
  --Button-background: var(--color-interactive-accent);
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
@@ -8,7 +8,6 @@
8
8
  --Button-size-small-padding: 5px var(--size-12);
9
9
  --Button-size-medium-padding: var(--size-8) var(--size-12);
10
10
  --Button-size-large-padding: var(--size-12) var(--size-16);
11
- --Button-avatar-border-color: var(--color-border-neutral);
12
11
  --Button-transition-duration: 150ms;
13
12
  --Button-transition-easing: ease-in-out;
14
13
 
@@ -31,32 +30,11 @@
31
30
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
32
31
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
33
32
  --Button-primary-negative-color: var(--color-contrast);
34
- --Button-primary-netative-avatar-border-color: #FFFFFF33;
35
33
 
36
34
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
37
35
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
38
36
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
39
37
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
40
- --Button-secondary-netative-avatar-border-color: #A8200D1F;
41
- }
42
-
43
- .np-theme-personal--dark {
44
- .wds-Button {
45
- --Button-primary-netative-avatar-border-color: #0E0F0C1F;
46
- }
47
- }
48
-
49
- .np-theme-personal--forest-green {
50
- .wds-Button {
51
- --color-interactive-neutral: #9FE87033;
52
- --color-interactive-neutral-hover: #CDFFAD33;
53
- --color-interactive-neutral-active: #ECFFE033;
54
- --color-sentiment-negative-secondary: #FFC4C233;
55
- --color-sentiment-negative-secondary-hover: #FFDCDB33;
56
- --color-sentiment-negative-secondary-active: #FFEBEB33;
57
- --Button-primary-netative-avatar-border-color: #0E0F0C1F;
58
- --Button-secondary-netative-avatar-border-color: #0E0F0C1F;
59
- }
60
38
  }
61
39
 
62
40
  .np-theme-personal--bright-green {
@@ -64,6 +42,5 @@
64
42
  --color-contrast: #FFFFFF;
65
43
  --Button-secondary-color: var(--color-interactive-control);
66
44
  --Button-secondary-negative-color: var(--color-contrast);
67
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
68
45
  }
69
46
  }
package/src/main.css CHANGED
@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
716
716
  .np-btn.disabled[class] {
717
717
  pointer-events: auto;
718
718
  }
719
- :root {
719
+ .wds-Button {
720
720
  --Button-background: var(--color-interactive-accent);
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
@@ -726,7 +726,6 @@ div.critical-comms .critical-comms-body {
726
726
  --Button-size-small-padding: 5px var(--size-12);
727
727
  --Button-size-medium-padding: var(--size-8) var(--size-12);
728
728
  --Button-size-large-padding: var(--size-12) var(--size-16);
729
- --Button-avatar-border-color: var(--color-border-neutral);
730
729
  --Button-transition-duration: 150ms;
731
730
  --Button-transition-easing: ease-in-out;
732
731
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -745,31 +744,15 @@ div.critical-comms .critical-comms-body {
745
744
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
746
745
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
747
746
  --Button-primary-negative-color: var(--color-contrast);
748
- --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
749
747
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
750
748
  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
751
749
  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
752
750
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
753
- --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
754
- }
755
- .np-theme-personal--dark .wds-Button {
756
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
757
- }
758
- .np-theme-personal--forest-green .wds-Button {
759
- --color-interactive-neutral: rgba(159,232,112,0.2);
760
- --color-interactive-neutral-hover: rgba(205,255,173,0.2);
761
- --color-interactive-neutral-active: rgba(236,255,224,0.2);
762
- --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
763
- --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
764
- --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
765
- --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
766
- --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
767
751
  }
768
752
  .np-theme-personal--bright-green .wds-Button {
769
753
  --color-contrast: #FFFFFF;
770
754
  --Button-secondary-color: var(--color-interactive-control);
771
755
  --Button-secondary-negative-color: var(--color-contrast);
772
- --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
773
756
  }
774
757
  /* Button Styles */
775
758
  .wds-Button {
@@ -787,16 +770,12 @@ div.critical-comms .critical-comms-body {
787
770
  -webkit-appearance: none;
788
771
  -moz-appearance: none;
789
772
  appearance: none;
790
- background-color: #00a2dd;
791
773
  background-color: var(--Button-background);
792
774
  border: none;
793
- border-radius: 9999px;
794
775
  border-radius: var(--Button-border-radius);
795
776
  color: var(--Button-color);
796
777
  cursor: pointer;
797
- padding: 8px 12px;
798
778
  padding: var(--Button-padding);
799
- transition: color, background-color 150ms ease-in-out;
800
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
801
780
  }
802
781
  .wds-Button:focus {
@@ -804,13 +783,11 @@ div.critical-comms .critical-comms-body {
804
783
  text-decoration: none;
805
784
  }
806
785
  .wds-Button:hover {
807
- background-color: #008fc9;
808
786
  background-color: var(--Button-background-hover);
809
787
  -webkit-text-decoration: none;
810
788
  text-decoration: none;
811
789
  }
812
790
  .wds-Button:active {
813
- background-color: #0081ba;
814
791
  background-color: var(--Button-background-active);
815
792
  -webkit-text-decoration: none;
816
793
  text-decoration: none;
@@ -825,7 +802,6 @@ div.critical-comms .critical-comms-body {
825
802
  .wds-Button:disabled:hover,
826
803
  .wds-Button.wds-Button--disabled:active,
827
804
  .wds-Button:disabled:active {
828
- background-color: #00a2dd;
829
805
  background-color: var(--Button-background);
830
806
  }
831
807
  .wds-Button--secondary {
@@ -863,14 +839,12 @@ div.critical-comms .critical-comms-body {
863
839
  --Button-background-hover: var(--Button-primary-negative-background-hover);
864
840
  --Button-background-active: var(--Button-primary-negative-background-active);
865
841
  --Button-color: var(--Button-primary-negative-color);
866
- --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
867
842
  }
868
843
  .wds-Button--negative.wds-Button--secondary {
869
844
  --Button-background: var(--Button-secondary-negative-background);
870
845
  --Button-background-hover: var(--Button-secondary-negative-background-hover);
871
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
872
847
  --Button-color: var(--Button-secondary-negative-color);
873
- --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
874
848
  }
875
849
  .wds-Button--small {
876
850
  --Button-padding: var(--Button-size-small-padding);
@@ -903,9 +877,6 @@ div.critical-comms .critical-comms-body {
903
877
  margin-right: 0;
904
878
  margin-left: 5px;
905
879
  }
906
- .wds-Button-avatars .np-circle {
907
- --circle-border-color: var(--Button-avatar-border-color);
908
- }
909
880
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
910
881
  color: var(--Button-color);
911
882
  }
@@ -963,6 +934,27 @@ div.critical-comms .critical-comms-body {
963
934
  [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
964
935
  transform: rotate(180deg);
965
936
  }
937
+ /* Avatar border transparency */
938
+ /* dark buttons get 20% transparency, light buttons get 12% */
939
+ .wds-Button-avatars .np-circle {
940
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
941
+ }
942
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
943
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
944
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
945
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
946
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
947
+ }
948
+ .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
949
+ .np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
950
+ .np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
951
+ .np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
952
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
953
+ }
954
+ .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
955
+ .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
956
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
957
+ }
966
958
  .np-card {
967
959
  overflow: hidden;
968
960
  transition-property: transform, box-shadow;