@transferwise/components 0.0.0-experimental-51208eb → 0.0.0-experimental-82a48f6

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 +29 -43
  2. package/build/styles/button/Button.css +29 -43
  3. package/build/styles/button/Button.vars.css +5 -4
  4. package/build/styles/main.css +29 -43
  5. package/package.json +3 -3
  6. package/src/button/Button.css +29 -43
  7. package/src/button/Button.less +29 -39
  8. package/src/button/Button.vars.css +5 -4
  9. package/src/button/Button.vars.less +8 -4
  10. package/src/main.css +29 -43
package/build/main.css CHANGED
@@ -721,11 +721,12 @@ div.critical-comms .critical-comms-body {
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
723
723
  --Button-color: var(--color-interactive-control);
724
- --Button-padding: var(--size-8) var(--size-12);
725
724
  --Button-border-radius: var(--radius-full);
726
- --Button-size-small-padding: 5px var(--size-12);
727
- --Button-size-medium-padding: var(--size-8) var(--size-12);
728
- --Button-size-large-padding: var(--size-12) var(--size-16);
725
+ --Button-label-gap: var(--size-4);
726
+ --Button-large-padding: var(--size-12) var(--size-16);
727
+ --Button-medium-padding: var(--size-8) var(--size-12);
728
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
729
+ --Button-avatar-border-color: var(--color-border-neutral);
729
730
  --Button-transition-duration: 150ms;
730
731
  --Button-transition-easing: ease-in-out;
731
732
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -775,7 +776,6 @@ div.critical-comms .critical-comms-body {
775
776
  border-radius: var(--Button-border-radius);
776
777
  color: var(--Button-color);
777
778
  cursor: pointer;
778
- padding: var(--Button-padding);
779
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
780
780
  }
781
781
  .wds-Button:focus {
@@ -846,36 +846,39 @@ div.critical-comms .critical-comms-body {
846
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
847
847
  --Button-color: var(--Button-secondary-negative-color);
848
848
  }
849
- .wds-Button--small {
850
- --Button-padding: var(--Button-size-small-padding);
849
+ .wds-Button--large {
850
+ padding: var(--Button-large-padding);
851
851
  }
852
- .wds-Button--small .wds-Button-icon--start {
853
- margin-right: 4px;
854
- margin-right: var(--size-4);
852
+ .wds-Button--medium {
853
+ padding: var(--Button-medium-padding);
855
854
  }
856
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
857
- margin-right: 0;
858
- margin-left: 4px;
859
- margin-left: var(--size-4);
855
+ .wds-Button--medium:has(.wds-Button-avatars) {
856
+ padding-inline-start: 8px;
857
+ padding-inline-start: var(--size-8);
860
858
  }
861
- .wds-Button--medium {
862
- --Button-padding: var(--Button-size-medium-padding);
859
+ .wds-Button--medium:has(.wds-Button-icon--end) {
860
+ padding-inline-end: 8px;
861
+ padding-inline-end: var(--size-8);
863
862
  }
864
- .wds-Button--large {
865
- --Button-padding: var(--Button-size-large-padding);
863
+ .wds-Button--medium .wds-Button-icon--start {
864
+ margin-inline-end: var(--Button-label-gap);
865
+ }
866
+ .wds-Button--small {
867
+ padding: var(--Button-small-padding);
868
+ }
869
+ .wds-Button--small:has(.wds-Button-icon--start) {
870
+ padding-inline-start: 8px;
871
+ padding-inline-start: var(--size-8);
872
+ }
873
+ .wds-Button--small:has(.wds-Button-icon--end) {
874
+ padding-inline-end: 8px;
875
+ padding-inline-end: var(--size-8);
866
876
  }
867
877
  .wds-Button--block {
868
878
  width: 100%;
869
879
  }
870
880
  .wds-Button-avatars {
871
881
  display: inline-flex;
872
- margin-right: 5px;
873
- margin-left: calc(4px * -1);
874
- margin-left: calc(var(--size-4) * -1);
875
- }
876
- [dir="rtl"] .wds-Button-avatars {
877
- margin-right: 0;
878
- margin-left: 5px;
879
882
  }
880
883
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
881
884
  color: var(--Button-color);
@@ -883,24 +886,6 @@ div.critical-comms .critical-comms-body {
883
886
  .wds-Button-icon {
884
887
  display: inline-block;
885
888
  }
886
- .wds-Button-icon--start {
887
- margin-right: 8px;
888
- margin-right: var(--size-8);
889
- }
890
- [dir="rtl"] .wds-Button-icon--start {
891
- margin-right: 0;
892
- margin-left: 8px;
893
- margin-left: var(--size-8);
894
- }
895
- .wds-Button-icon--end {
896
- margin-left: 4px;
897
- margin-left: var(--size-4);
898
- }
899
- [dir="rtl"] .wds-Button-icon--end {
900
- margin-left: 0;
901
- margin-right: 4px;
902
- margin-right: var(--size-4);
903
- }
904
889
  .wds-Button-content {
905
890
  position: relative;
906
891
  }
@@ -914,6 +899,7 @@ div.critical-comms .critical-comms-body {
914
899
  display: flex;
915
900
  justify-content: center;
916
901
  align-items: center;
902
+ gap: var(--Button-label-gap);
917
903
  position: relative;
918
904
  }
919
905
  .wds-Button-loader {
package/build/styles/button/Button.css CHANGED
@@ -3,11 +3,12 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+ --Button-large-padding: var(--size-12) var(--size-16);
9
+ --Button-medium-padding: var(--size-8) var(--size-12);
10
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
11
+ --Button-avatar-border-color: var(--color-border-neutral);
11
12
  --Button-transition-duration: 150ms;
12
13
  --Button-transition-easing: ease-in-out;
13
14
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -57,7 +58,6 @@
57
58
  border-radius: var(--Button-border-radius);
58
59
  color: var(--Button-color);
59
60
  cursor: pointer;
60
- padding: var(--Button-padding);
61
61
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
62
62
  }
63
63
  .wds-Button:focus {
@@ -128,36 +128,39 @@
128
128
  --Button-background-active: var(--Button-secondary-negative-background-active);
129
129
  --Button-color: var(--Button-secondary-negative-color);
130
130
  }
131
- .wds-Button--small {
132
- --Button-padding: var(--Button-size-small-padding);
131
+ .wds-Button--large {
132
+ padding: var(--Button-large-padding);
133
133
  }
134
- .wds-Button--small .wds-Button-icon--start {
135
- margin-right: 4px;
136
- margin-right: var(--size-4);
134
+ .wds-Button--medium {
135
+ padding: var(--Button-medium-padding);
137
136
  }
138
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
139
- margin-right: 0;
140
- margin-left: 4px;
141
- margin-left: var(--size-4);
137
+ .wds-Button--medium:has(.wds-Button-avatars) {
138
+ padding-inline-start: 8px;
139
+ padding-inline-start: var(--size-8);
142
140
  }
143
- .wds-Button--medium {
144
- --Button-padding: var(--Button-size-medium-padding);
141
+ .wds-Button--medium:has(.wds-Button-icon--end) {
142
+ padding-inline-end: 8px;
143
+ padding-inline-end: var(--size-8);
145
144
  }
146
- .wds-Button--large {
147
- --Button-padding: var(--Button-size-large-padding);
145
+ .wds-Button--medium .wds-Button-icon--start {
146
+ margin-inline-end: var(--Button-label-gap);
147
+ }
148
+ .wds-Button--small {
149
+ padding: var(--Button-small-padding);
150
+ }
151
+ .wds-Button--small:has(.wds-Button-icon--start) {
152
+ padding-inline-start: 8px;
153
+ padding-inline-start: var(--size-8);
154
+ }
155
+ .wds-Button--small:has(.wds-Button-icon--end) {
156
+ padding-inline-end: 8px;
157
+ padding-inline-end: var(--size-8);
148
158
  }
149
159
  .wds-Button--block {
150
160
  width: 100%;
151
161
  }
152
162
  .wds-Button-avatars {
153
163
  display: inline-flex;
154
- margin-right: 5px;
155
- margin-left: calc(4px * -1);
156
- margin-left: calc(var(--size-4) * -1);
157
- }
158
- [dir="rtl"] .wds-Button-avatars {
159
- margin-right: 0;
160
- margin-left: 5px;
161
164
  }
162
165
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
163
166
  color: var(--Button-color);
@@ -165,24 +168,6 @@
165
168
  .wds-Button-icon {
166
169
  display: inline-block;
167
170
  }
168
- .wds-Button-icon--start {
169
- margin-right: 8px;
170
- margin-right: var(--size-8);
171
- }
172
- [dir="rtl"] .wds-Button-icon--start {
173
- margin-right: 0;
174
- margin-left: 8px;
175
- margin-left: var(--size-8);
176
- }
177
- .wds-Button-icon--end {
178
- margin-left: 4px;
179
- margin-left: var(--size-4);
180
- }
181
- [dir="rtl"] .wds-Button-icon--end {
182
- margin-left: 0;
183
- margin-right: 4px;
184
- margin-right: var(--size-4);
185
- }
186
171
  .wds-Button-content {
187
172
  position: relative;
188
173
  }
@@ -196,6 +181,7 @@
196
181
  display: flex;
197
182
  justify-content: center;
198
183
  align-items: center;
184
+ gap: var(--Button-label-gap);
199
185
  position: relative;
200
186
  }
201
187
  .wds-Button-loader {
package/build/styles/button/Button.vars.css CHANGED
@@ -3,11 +3,12 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+ --Button-large-padding: var(--size-12) var(--size-16);
9
+ --Button-medium-padding: var(--size-8) var(--size-12);
10
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
11
+ --Button-avatar-border-color: var(--color-border-neutral);
11
12
  --Button-transition-duration: 150ms;
12
13
  --Button-transition-easing: ease-in-out;
13
14
  --Button-secondary-background: var(--color-interactive-neutral);
package/build/styles/main.css CHANGED
@@ -721,11 +721,12 @@ div.critical-comms .critical-comms-body {
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
723
723
  --Button-color: var(--color-interactive-control);
724
- --Button-padding: var(--size-8) var(--size-12);
725
724
  --Button-border-radius: var(--radius-full);
726
- --Button-size-small-padding: 5px var(--size-12);
727
- --Button-size-medium-padding: var(--size-8) var(--size-12);
728
- --Button-size-large-padding: var(--size-12) var(--size-16);
725
+ --Button-label-gap: var(--size-4);
726
+ --Button-large-padding: var(--size-12) var(--size-16);
727
+ --Button-medium-padding: var(--size-8) var(--size-12);
728
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
729
+ --Button-avatar-border-color: var(--color-border-neutral);
729
730
  --Button-transition-duration: 150ms;
730
731
  --Button-transition-easing: ease-in-out;
731
732
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -775,7 +776,6 @@ div.critical-comms .critical-comms-body {
775
776
  border-radius: var(--Button-border-radius);
776
777
  color: var(--Button-color);
777
778
  cursor: pointer;
778
- padding: var(--Button-padding);
779
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
780
780
  }
781
781
  .wds-Button:focus {
@@ -846,36 +846,39 @@ div.critical-comms .critical-comms-body {
846
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
847
847
  --Button-color: var(--Button-secondary-negative-color);
848
848
  }
849
- .wds-Button--small {
850
- --Button-padding: var(--Button-size-small-padding);
849
+ .wds-Button--large {
850
+ padding: var(--Button-large-padding);
851
851
  }
852
- .wds-Button--small .wds-Button-icon--start {
853
- margin-right: 4px;
854
- margin-right: var(--size-4);
852
+ .wds-Button--medium {
853
+ padding: var(--Button-medium-padding);
855
854
  }
856
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
857
- margin-right: 0;
858
- margin-left: 4px;
859
- margin-left: var(--size-4);
855
+ .wds-Button--medium:has(.wds-Button-avatars) {
856
+ padding-inline-start: 8px;
857
+ padding-inline-start: var(--size-8);
860
858
  }
861
- .wds-Button--medium {
862
- --Button-padding: var(--Button-size-medium-padding);
859
+ .wds-Button--medium:has(.wds-Button-icon--end) {
860
+ padding-inline-end: 8px;
861
+ padding-inline-end: var(--size-8);
863
862
  }
864
- .wds-Button--large {
865
- --Button-padding: var(--Button-size-large-padding);
863
+ .wds-Button--medium .wds-Button-icon--start {
864
+ margin-inline-end: var(--Button-label-gap);
865
+ }
866
+ .wds-Button--small {
867
+ padding: var(--Button-small-padding);
868
+ }
869
+ .wds-Button--small:has(.wds-Button-icon--start) {
870
+ padding-inline-start: 8px;
871
+ padding-inline-start: var(--size-8);
872
+ }
873
+ .wds-Button--small:has(.wds-Button-icon--end) {
874
+ padding-inline-end: 8px;
875
+ padding-inline-end: var(--size-8);
866
876
  }
867
877
  .wds-Button--block {
868
878
  width: 100%;
869
879
  }
870
880
  .wds-Button-avatars {
871
881
  display: inline-flex;
872
- margin-right: 5px;
873
- margin-left: calc(4px * -1);
874
- margin-left: calc(var(--size-4) * -1);
875
- }
876
- [dir="rtl"] .wds-Button-avatars {
877
- margin-right: 0;
878
- margin-left: 5px;
879
882
  }
880
883
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
881
884
  color: var(--Button-color);
@@ -883,24 +886,6 @@ div.critical-comms .critical-comms-body {
883
886
  .wds-Button-icon {
884
887
  display: inline-block;
885
888
  }
886
- .wds-Button-icon--start {
887
- margin-right: 8px;
888
- margin-right: var(--size-8);
889
- }
890
- [dir="rtl"] .wds-Button-icon--start {
891
- margin-right: 0;
892
- margin-left: 8px;
893
- margin-left: var(--size-8);
894
- }
895
- .wds-Button-icon--end {
896
- margin-left: 4px;
897
- margin-left: var(--size-4);
898
- }
899
- [dir="rtl"] .wds-Button-icon--end {
900
- margin-left: 0;
901
- margin-right: 4px;
902
- margin-right: var(--size-4);
903
- }
904
889
  .wds-Button-content {
905
890
  position: relative;
906
891
  }
@@ -914,6 +899,7 @@ div.critical-comms .critical-comms-body {
914
899
  display: flex;
915
900
  justify-content: center;
916
901
  align-items: center;
902
+ gap: var(--Button-label-gap);
917
903
  position: relative;
918
904
  }
919
905
  .wds-Button-loader {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-51208eb",
3
+ "version": "0.0.0-experimental-82a48f6",
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-51208eb",
95
+ "@transferwise/neptune-css": "0.0.0-experimental-82a48f6",
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-51208eb",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-82a48f6",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
package/src/button/Button.css CHANGED
@@ -3,11 +3,12 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+ --Button-large-padding: var(--size-12) var(--size-16);
9
+ --Button-medium-padding: var(--size-8) var(--size-12);
10
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
11
+ --Button-avatar-border-color: var(--color-border-neutral);
11
12
  --Button-transition-duration: 150ms;
12
13
  --Button-transition-easing: ease-in-out;
13
14
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -57,7 +58,6 @@
57
58
  border-radius: var(--Button-border-radius);
58
59
  color: var(--Button-color);
59
60
  cursor: pointer;
60
- padding: var(--Button-padding);
61
61
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
62
62
  }
63
63
  .wds-Button:focus {
@@ -128,36 +128,39 @@
128
128
  --Button-background-active: var(--Button-secondary-negative-background-active);
129
129
  --Button-color: var(--Button-secondary-negative-color);
130
130
  }
131
- .wds-Button--small {
132
- --Button-padding: var(--Button-size-small-padding);
131
+ .wds-Button--large {
132
+ padding: var(--Button-large-padding);
133
133
  }
134
- .wds-Button--small .wds-Button-icon--start {
135
- margin-right: 4px;
136
- margin-right: var(--size-4);
134
+ .wds-Button--medium {
135
+ padding: var(--Button-medium-padding);
137
136
  }
138
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
139
- margin-right: 0;
140
- margin-left: 4px;
141
- margin-left: var(--size-4);
137
+ .wds-Button--medium:has(.wds-Button-avatars) {
138
+ padding-inline-start: 8px;
139
+ padding-inline-start: var(--size-8);
142
140
  }
143
- .wds-Button--medium {
144
- --Button-padding: var(--Button-size-medium-padding);
141
+ .wds-Button--medium:has(.wds-Button-icon--end) {
142
+ padding-inline-end: 8px;
143
+ padding-inline-end: var(--size-8);
145
144
  }
146
- .wds-Button--large {
147
- --Button-padding: var(--Button-size-large-padding);
145
+ .wds-Button--medium .wds-Button-icon--start {
146
+ margin-inline-end: var(--Button-label-gap);
147
+ }
148
+ .wds-Button--small {
149
+ padding: var(--Button-small-padding);
150
+ }
151
+ .wds-Button--small:has(.wds-Button-icon--start) {
152
+ padding-inline-start: 8px;
153
+ padding-inline-start: var(--size-8);
154
+ }
155
+ .wds-Button--small:has(.wds-Button-icon--end) {
156
+ padding-inline-end: 8px;
157
+ padding-inline-end: var(--size-8);
148
158
  }
149
159
  .wds-Button--block {
150
160
  width: 100%;
151
161
  }
152
162
  .wds-Button-avatars {
153
163
  display: inline-flex;
154
- margin-right: 5px;
155
- margin-left: calc(4px * -1);
156
- margin-left: calc(var(--size-4) * -1);
157
- }
158
- [dir="rtl"] .wds-Button-avatars {
159
- margin-right: 0;
160
- margin-left: 5px;
161
164
  }
162
165
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
163
166
  color: var(--Button-color);
@@ -165,24 +168,6 @@
165
168
  .wds-Button-icon {
166
169
  display: inline-block;
167
170
  }
168
- .wds-Button-icon--start {
169
- margin-right: 8px;
170
- margin-right: var(--size-8);
171
- }
172
- [dir="rtl"] .wds-Button-icon--start {
173
- margin-right: 0;
174
- margin-left: 8px;
175
- margin-left: var(--size-8);
176
- }
177
- .wds-Button-icon--end {
178
- margin-left: 4px;
179
- margin-left: var(--size-4);
180
- }
181
- [dir="rtl"] .wds-Button-icon--end {
182
- margin-left: 0;
183
- margin-right: 4px;
184
- margin-right: var(--size-4);
185
- }
186
171
  .wds-Button-content {
187
172
  position: relative;
188
173
  }
@@ -196,6 +181,7 @@
196
181
  display: flex;
197
182
  justify-content: center;
198
183
  align-items: center;
184
+ gap: var(--Button-label-gap);
199
185
  position: relative;
200
186
  }
201
187
  .wds-Button-loader {
package/src/button/Button.less CHANGED
@@ -18,7 +18,6 @@
18
18
  border-radius: var(--Button-border-radius);
19
19
  color: var(--Button-color);
20
20
  cursor: pointer;
21
- padding: var(--Button-padding);
22
21
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
23
22
 
24
23
  &:focus {
@@ -84,7 +83,6 @@
84
83
 
85
84
  // Negative styles
86
85
  &--negative {
87
-
88
86
  &.wds-Button--primary {
89
87
  --Button-background: var(--Button-primary-negative-background);
90
88
  --Button-background-hover: var(--Button-primary-negative-background-hover);
@@ -101,26 +99,40 @@
101
99
  }
102
100
 
103
101
  // Size modifiers
104
- &--small {
105
- --Button-padding: var(--Button-size-small-padding);
106
-
107
- .wds-Button-icon--start {
108
- margin-right: var(--size-4);
109
- :dir(rtl) & {
110
- margin-right: 0;
111
- margin-left: var(--size-4);
112
- }
113
- }
102
+ &--large {
103
+ padding: var(--Button-large-padding);
114
104
  }
115
105
 
116
106
  &--medium {
117
- --Button-padding: var(--Button-size-medium-padding);
107
+ padding: var(--Button-medium-padding);
108
+
109
+ &:has(.wds-Button-avatars){
110
+ padding-inline-start: var(--size-8);
111
+ }
112
+
113
+ &:has(.wds-Button-icon--end){
114
+ padding-inline-end: var(--size-8);
115
+ }
116
+
117
+ .wds-Button-icon--start{
118
+ margin-inline-end: var(--Button-label-gap);
119
+ }
118
120
  }
119
121
 
120
- &--large {
121
- --Button-padding: var(--Button-size-large-padding);
122
+ &--small {
123
+ padding: var(--Button-small-padding);
124
+
125
+ &:has(.wds-Button-icon--start){
126
+ padding-inline-start: var(--size-8);
127
+ }
128
+
129
+ &:has(.wds-Button-icon--end){
130
+ padding-inline-end: var(--size-8);
131
+ }
122
132
  }
123
133
 
134
+
135
+
124
136
  // Width mofidiers
125
137
  &--block {
126
138
  width: 100%;
@@ -128,13 +140,6 @@
128
140
 
129
141
  &-avatars {
130
142
  display: inline-flex;
131
- margin-right: 5px;
132
- margin-left: calc(var(--size-4) * -1);
133
-
134
- :dir(rtl) & {
135
- margin-right: 0;
136
- margin-left: 5px;
137
- }
138
143
 
139
144
  .np-avatar-view .np-avatar-view-content {
140
145
  color: var(--Button-color);
@@ -144,22 +149,6 @@
144
149
  // Icon styles
145
150
  &-icon {
146
151
  display: inline-block;
147
-
148
- &--start {
149
- margin-right: var(--size-8);
150
- :dir(rtl) & {
151
- margin-right: 0;
152
- margin-left: var(--size-8);
153
- }
154
- }
155
-
156
- &--end {
157
- margin-left: var(--size-4);
158
- :dir(rtl) & {
159
- margin-left: 0;
160
- margin-right: var(--size-4);
161
- }
162
- }
163
152
  }
164
153
 
165
154
  &-content {
@@ -179,6 +168,7 @@
179
168
  display: flex;
180
169
  justify-content: center;
181
170
  align-items: center;
171
+ gap: var(--Button-label-gap);
182
172
  position: relative;
183
173
  }
184
174
 
@@ -239,4 +229,4 @@
239
229
  }
240
230
  }
241
231
  }
242
- }
232
+ }
package/src/button/Button.vars.css CHANGED
@@ -3,11 +3,12 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+ --Button-large-padding: var(--size-12) var(--size-16);
9
+ --Button-medium-padding: var(--size-8) var(--size-12);
10
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
11
+ --Button-avatar-border-color: var(--color-border-neutral);
11
12
  --Button-transition-duration: 150ms;
12
13
  --Button-transition-easing: ease-in-out;
13
14
  --Button-secondary-background: var(--color-interactive-neutral);
package/src/button/Button.vars.less CHANGED
@@ -3,11 +3,15 @@
3
3
  --Button-background-hover: var(--color-interactive-accent-hover);
4
4
  --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
- --Button-padding: var(--size-8) var(--size-12);
7
6
  --Button-border-radius: var(--radius-full);
8
- --Button-size-small-padding: 5px var(--size-12);
9
- --Button-size-medium-padding: var(--size-8) var(--size-12);
10
- --Button-size-large-padding: var(--size-12) var(--size-16);
7
+ --Button-label-gap: var(--size-4);
8
+
9
+ --Button-large-padding: var(--size-12) var(--size-16);
10
+ --Button-medium-padding: var(--size-8) var(--size-12);
11
+ // 5px is required by design
12
+ --Button-small-padding: calc(var(--size-10) * .5) var(--size-12);
13
+
14
+ --Button-avatar-border-color: var(--color-border-neutral);
11
15
  --Button-transition-duration: 150ms;
12
16
  --Button-transition-easing: ease-in-out;
13
17
 
package/src/main.css CHANGED
@@ -721,11 +721,12 @@ div.critical-comms .critical-comms-body {
721
721
  --Button-background-hover: var(--color-interactive-accent-hover);
722
722
  --Button-background-active: var(--color-interactive-accent-active);
723
723
  --Button-color: var(--color-interactive-control);
724
- --Button-padding: var(--size-8) var(--size-12);
725
724
  --Button-border-radius: var(--radius-full);
726
- --Button-size-small-padding: 5px var(--size-12);
727
- --Button-size-medium-padding: var(--size-8) var(--size-12);
728
- --Button-size-large-padding: var(--size-12) var(--size-16);
725
+ --Button-label-gap: var(--size-4);
726
+ --Button-large-padding: var(--size-12) var(--size-16);
727
+ --Button-medium-padding: var(--size-8) var(--size-12);
728
+ --Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
729
+ --Button-avatar-border-color: var(--color-border-neutral);
729
730
  --Button-transition-duration: 150ms;
730
731
  --Button-transition-easing: ease-in-out;
731
732
  --Button-secondary-background: var(--color-interactive-neutral);
@@ -775,7 +776,6 @@ div.critical-comms .critical-comms-body {
775
776
  border-radius: var(--Button-border-radius);
776
777
  color: var(--Button-color);
777
778
  cursor: pointer;
778
- padding: var(--Button-padding);
779
779
  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
780
780
  }
781
781
  .wds-Button:focus {
@@ -846,36 +846,39 @@ div.critical-comms .critical-comms-body {
846
846
  --Button-background-active: var(--Button-secondary-negative-background-active);
847
847
  --Button-color: var(--Button-secondary-negative-color);
848
848
  }
849
- .wds-Button--small {
850
- --Button-padding: var(--Button-size-small-padding);
849
+ .wds-Button--large {
850
+ padding: var(--Button-large-padding);
851
851
  }
852
- .wds-Button--small .wds-Button-icon--start {
853
- margin-right: 4px;
854
- margin-right: var(--size-4);
852
+ .wds-Button--medium {
853
+ padding: var(--Button-medium-padding);
855
854
  }
856
- [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
857
- margin-right: 0;
858
- margin-left: 4px;
859
- margin-left: var(--size-4);
855
+ .wds-Button--medium:has(.wds-Button-avatars) {
856
+ padding-inline-start: 8px;
857
+ padding-inline-start: var(--size-8);
860
858
  }
861
- .wds-Button--medium {
862
- --Button-padding: var(--Button-size-medium-padding);
859
+ .wds-Button--medium:has(.wds-Button-icon--end) {
860
+ padding-inline-end: 8px;
861
+ padding-inline-end: var(--size-8);
863
862
  }
864
- .wds-Button--large {
865
- --Button-padding: var(--Button-size-large-padding);
863
+ .wds-Button--medium .wds-Button-icon--start {
864
+ margin-inline-end: var(--Button-label-gap);
865
+ }
866
+ .wds-Button--small {
867
+ padding: var(--Button-small-padding);
868
+ }
869
+ .wds-Button--small:has(.wds-Button-icon--start) {
870
+ padding-inline-start: 8px;
871
+ padding-inline-start: var(--size-8);
872
+ }
873
+ .wds-Button--small:has(.wds-Button-icon--end) {
874
+ padding-inline-end: 8px;
875
+ padding-inline-end: var(--size-8);
866
876
  }
867
877
  .wds-Button--block {
868
878
  width: 100%;
869
879
  }
870
880
  .wds-Button-avatars {
871
881
  display: inline-flex;
872
- margin-right: 5px;
873
- margin-left: calc(4px * -1);
874
- margin-left: calc(var(--size-4) * -1);
875
- }
876
- [dir="rtl"] .wds-Button-avatars {
877
- margin-right: 0;
878
- margin-left: 5px;
879
882
  }
880
883
  .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
881
884
  color: var(--Button-color);
@@ -883,24 +886,6 @@ div.critical-comms .critical-comms-body {
883
886
  .wds-Button-icon {
884
887
  display: inline-block;
885
888
  }
886
- .wds-Button-icon--start {
887
- margin-right: 8px;
888
- margin-right: var(--size-8);
889
- }
890
- [dir="rtl"] .wds-Button-icon--start {
891
- margin-right: 0;
892
- margin-left: 8px;
893
- margin-left: var(--size-8);
894
- }
895
- .wds-Button-icon--end {
896
- margin-left: 4px;
897
- margin-left: var(--size-4);
898
- }
899
- [dir="rtl"] .wds-Button-icon--end {
900
- margin-left: 0;
901
- margin-right: 4px;
902
- margin-right: var(--size-4);
903
- }
904
889
  .wds-Button-content {
905
890
  position: relative;
906
891
  }
@@ -914,6 +899,7 @@ div.critical-comms .critical-comms-body {
914
899
  display: flex;
915
900
  justify-content: center;
916
901
  align-items: center;
902
+ gap: var(--Button-label-gap);
917
903
  position: relative;
918
904
  }
919
905
  .wds-Button-loader {