@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/build/styles/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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-f29cf47",
3
+ "version": "0.0.0-experimental-95cea4f",
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-f29cf47",
95
+ "@transferwise/neptune-css": "0.0.0-experimental-95cea4f",
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-f29cf47",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-95cea4f",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
package/src/button/Button/less/Button.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  --Button-background: var(--color-interactive-accent);
3
- --Button-hover-background: var(--color-interactive-accent-hover);
4
- --Button-active-background: var(--color-interactive-accent-active);
3
+ --Button-background-hover: var(--color-interactive-accent-hover);
4
+ --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
6
  --Button-padding: var(--size-8) var(--size-12);
7
7
  --Button-border-radius: var(--radius-full);
@@ -14,25 +14,25 @@
14
14
  --Button-size-large-padding: var(--size-12) var(--size-16);
15
15
  --Button-avatar-border-color: var(--color-border-neutral);
16
16
  --Button-secondary-background: var(--color-interactive-neutral);
17
- --Button-secondary-hover-background: var(--color-interactive-neutral-hover);
18
- --Button-secondary-active-background: var(--color-interactive-neutral-active);
17
+ --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
18
+ --Button-secondary-background-active: var(--color-interactive-neutral-active);
19
19
  --Button-secondary-color: var(--color-interactive-primary);
20
20
  --Button-tertiary-background: var(--color-background-neutral);
21
- --Button-tertiary-hover-background: var(--color-background-neutral-hover);
22
- --Button-tertiary-active-background: var(--color-background-neutral-active);
21
+ --Button-tertiary-background-hover: var(--color-background-neutral-hover);
22
+ --Button-tertiary-background-active: var(--color-background-neutral-active);
23
23
  --Button-tertiary-color: var(--color-content-primary);
24
24
  --Button-minimal-background: transparent;
25
- --Button-minimal-hover-background: var(--color-background-screen-hover);
26
- --Button-minimal-active-background: var(--color-background-screen-active);
25
+ --Button-minimal-background-hover: var(--color-background-screen-hover);
26
+ --Button-minimal-background-active: var(--color-background-screen-active);
27
27
  --Button-minimal-color: var(--color-interactive-primary);
28
28
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
29
- --Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
30
- --Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
29
+ --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
30
+ --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
31
31
  --Button-primary-negative-color: var(--color-contrast);
32
32
  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
33
33
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
34
- --Button-secondary-negative-hover-background: var(--color-sentiment-negative-secondary-hover);
35
- --Button-secondary-negative-active-background: var(--color-sentiment-negative-secondary-active);
34
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
35
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
36
36
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
37
37
  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
38
38
  }
@@ -95,13 +95,13 @@
95
95
  }
96
96
  .wds-Button:hover {
97
97
  background-color: #008fc9;
98
- background-color: var(--Button-hover-background);
98
+ background-color: var(--Button-background-hover);
99
99
  -webkit-text-decoration: none;
100
100
  text-decoration: none;
101
101
  }
102
102
  .wds-Button:active {
103
103
  background-color: #0081ba;
104
- background-color: var(--Button-active-background);
104
+ background-color: var(--Button-background-active);
105
105
  -webkit-text-decoration: none;
106
106
  text-decoration: none;
107
107
  }
@@ -117,14 +117,14 @@
117
117
  }
118
118
  .wds-Button--secondary {
119
119
  --Button-background: var(--Button-secondary-background);
120
- --Button-hover-background: var(--Button-secondary-hover-background);
121
- --Button-active-background: var(--Button-secondary-active-background);
120
+ --Button-background-hover: var(--Button-secondary-hover-background);
121
+ --Button-background-active: var(--Button-secondary-active-background);
122
122
  --Button-color: var(--Button-secondary-color);
123
123
  }
124
124
  .wds-Button--tertiary {
125
125
  --Button-background: var(--Button-tertiary-background);
126
- --Button-hover-background: var(--Button-tertiary-hover-background);
127
- --Button-active-background: var(--Button-tertiary-active-background);
126
+ --Button-background-hover: var(--Button-tertiary-hover-background);
127
+ --Button-background-active: var(--Button-tertiary-active-background);
128
128
  --Button-color: var(--Button-tertiary-color);
129
129
  }
130
130
  .wds-Button--tertiary .wds-Button-icon--right {
@@ -132,8 +132,8 @@
132
132
  }
133
133
  .wds-Button--minimal {
134
134
  --Button-background: var(--Button-minimal-background);
135
- --Button-hover-background: var(--Button-minimal-hover-background);
136
- --Button-active-background: var(--Button-minimal-active-background);
135
+ --Button-background-hover: var(--Button-minimal-hover-background);
136
+ --Button-background-active: var(--Button-minimal-active-background);
137
137
  --Button-color: var(--Button-minimal-color);
138
138
  -webkit-text-decoration: underline;
139
139
  text-decoration: underline;
@@ -145,15 +145,15 @@
145
145
  }
146
146
  .wds-Button--negative.wds-Button--primary {
147
147
  --Button-background: var(--Button-primary-negative-background);
148
- --Button-hover-background: var(--Button-primary-negative-hover-background);
149
- --Button-active-background: var(--Button-primary-negative-active-background);
148
+ --Button-background-hover: var(--Button-primary-negative-hover-background);
149
+ --Button-background-active: var(--Button-primary-negative-active-background);
150
150
  --Button-color: var(--Button-primary-negative-color);
151
151
  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
152
152
  }
153
153
  .wds-Button--negative.wds-Button--secondary {
154
154
  --Button-background: var(--Button-secondary-negative-background);
155
- --Button-hover-background: var(--Button-secondary-negative-hover-background);
156
- --Button-active-background: var(--Button-secondary-negative-active-background);
155
+ --Button-background-hover: var(--Button-secondary-negative-hover-background);
156
+ --Button-background-active: var(--Button-secondary-negative-active-background);
157
157
  --Button-color: var(--Button-secondary-negative-color);
158
158
  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
159
159
  }
package/src/button/Button/less/Button.less CHANGED
@@ -29,12 +29,12 @@
29
29
  }
30
30
 
31
31
  &:hover {
32
- background-color: var(--Button-hover-background);
32
+ background-color: var(--Button-background-hover);
33
33
  text-decoration: none;
34
34
  }
35
35
 
36
36
  &:active {
37
- background-color: var(--Button-active-background);
37
+ background-color: var(--Button-background-active);
38
38
  text-decoration: none;
39
39
  }
40
40
 
@@ -52,15 +52,15 @@
52
52
  // Priority modifiers
53
53
  &--secondary {
54
54
  --Button-background: var(--Button-secondary-background);
55
- --Button-hover-background: var(--Button-secondary-hover-background);
56
- --Button-active-background: var(--Button-secondary-active-background);
55
+ --Button-background-hover: var(--Button-secondary-hover-background);
56
+ --Button-background-active: var(--Button-secondary-active-background);
57
57
  --Button-color: var(--Button-secondary-color);
58
58
  }
59
59
 
60
60
  &--tertiary {
61
61
  --Button-background: var(--Button-tertiary-background);
62
- --Button-hover-background: var(--Button-tertiary-hover-background);
63
- --Button-active-background: var(--Button-tertiary-active-background);
62
+ --Button-background-hover: var(--Button-tertiary-hover-background);
63
+ --Button-background-active: var(--Button-tertiary-active-background);
64
64
  --Button-color: var(--Button-tertiary-color);
65
65
 
66
66
  .wds-Button-icon--right {
@@ -70,8 +70,8 @@
70
70
 
71
71
  &--minimal {
72
72
  --Button-background: var(--Button-minimal-background);
73
- --Button-hover-background: var(--Button-minimal-hover-background);
74
- --Button-active-background: var(--Button-minimal-active-background);
73
+ --Button-background-hover: var(--Button-minimal-hover-background);
74
+ --Button-background-active: var(--Button-minimal-active-background);
75
75
  --Button-color: var(--Button-minimal-color);
76
76
 
77
77
  text-decoration: underline;
@@ -87,16 +87,16 @@
87
87
 
88
88
  &.wds-Button--primary {
89
89
  --Button-background: var(--Button-primary-negative-background);
90
- --Button-hover-background: var(--Button-primary-negative-hover-background);
91
- --Button-active-background: var(--Button-primary-negative-active-background);
90
+ --Button-background-hover: var(--Button-primary-negative-hover-background);
91
+ --Button-background-active: var(--Button-primary-negative-active-background);
92
92
  --Button-color: var(--Button-primary-negative-color);
93
93
  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
94
94
  }
95
95
 
96
96
  &.wds-Button--secondary {
97
97
  --Button-background: var(--Button-secondary-negative-background);
98
- --Button-hover-background: var(--Button-secondary-negative-hover-background);
99
- --Button-active-background: var(--Button-secondary-negative-active-background);
98
+ --Button-background-hover: var(--Button-secondary-negative-hover-background);
99
+ --Button-background-active: var(--Button-secondary-negative-active-background);
100
100
  --Button-color: var(--Button-secondary-negative-color);
101
101
  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
102
102
  }
package/src/button/Button/less/Button.vars.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  --Button-background: var(--color-interactive-accent);
3
- --Button-hover-background: var(--color-interactive-accent-hover);
4
- --Button-active-background: var(--color-interactive-accent-active);
3
+ --Button-background-hover: var(--color-interactive-accent-hover);
4
+ --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
6
  --Button-padding: var(--size-8) var(--size-12);
7
7
  --Button-border-radius: var(--radius-full);
@@ -14,25 +14,25 @@
14
14
  --Button-size-large-padding: var(--size-12) var(--size-16);
15
15
  --Button-avatar-border-color: var(--color-border-neutral);
16
16
  --Button-secondary-background: var(--color-interactive-neutral);
17
- --Button-secondary-hover-background: var(--color-interactive-neutral-hover);
18
- --Button-secondary-active-background: var(--color-interactive-neutral-active);
17
+ --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
18
+ --Button-secondary-background-active: var(--color-interactive-neutral-active);
19
19
  --Button-secondary-color: var(--color-interactive-primary);
20
20
  --Button-tertiary-background: var(--color-background-neutral);
21
- --Button-tertiary-hover-background: var(--color-background-neutral-hover);
22
- --Button-tertiary-active-background: var(--color-background-neutral-active);
21
+ --Button-tertiary-background-hover: var(--color-background-neutral-hover);
22
+ --Button-tertiary-background-active: var(--color-background-neutral-active);
23
23
  --Button-tertiary-color: var(--color-content-primary);
24
24
  --Button-minimal-background: transparent;
25
- --Button-minimal-hover-background: var(--color-background-screen-hover);
26
- --Button-minimal-active-background: var(--color-background-screen-active);
25
+ --Button-minimal-background-hover: var(--color-background-screen-hover);
26
+ --Button-minimal-background-active: var(--color-background-screen-active);
27
27
  --Button-minimal-color: var(--color-interactive-primary);
28
28
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
29
- --Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
30
- --Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
29
+ --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
30
+ --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
31
31
  --Button-primary-negative-color: var(--color-contrast);
32
32
  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
33
33
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
34
- --Button-secondary-negative-hover-background: var(--color-sentiment-negative-secondary-hover);
35
- --Button-secondary-negative-active-background: var(--color-sentiment-negative-secondary-active);
34
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
35
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
36
36
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
37
37
  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
38
38
  }
package/src/button/Button/less/Button.vars.less CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  --Button-background: var(--color-interactive-accent);
3
- --Button-hover-background: var(--color-interactive-accent-hover);
4
- --Button-active-background: var(--color-interactive-accent-active);
3
+ --Button-background-hover: var(--color-interactive-accent-hover);
4
+ --Button-background-active: var(--color-interactive-accent-active);
5
5
  --Button-color: var(--color-interactive-control);
6
6
  --Button-padding: var(--size-8) var(--size-12);
7
7
  --Button-border-radius: var(--radius-full);
@@ -15,29 +15,29 @@
15
15
  --Button-avatar-border-color: var(--color-border-neutral);
16
16
 
17
17
  --Button-secondary-background: var(--color-interactive-neutral);
18
- --Button-secondary-hover-background: var(--color-interactive-neutral-hover);
19
- --Button-secondary-active-background: var(--color-interactive-neutral-active);
18
+ --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
19
+ --Button-secondary-background-active: var(--color-interactive-neutral-active);
20
20
  --Button-secondary-color: var(--color-interactive-primary);
21
21
 
22
22
  --Button-tertiary-background: var(--color-background-neutral);
23
- --Button-tertiary-hover-background: var(--color-background-neutral-hover);
24
- --Button-tertiary-active-background: var(--color-background-neutral-active);
23
+ --Button-tertiary-background-hover: var(--color-background-neutral-hover);
24
+ --Button-tertiary-background-active: var(--color-background-neutral-active);
25
25
  --Button-tertiary-color: var(--color-content-primary);
26
26
 
27
27
  --Button-minimal-background: transparent;
28
- --Button-minimal-hover-background: var(--color-background-screen-hover);
29
- --Button-minimal-active-background: var(--color-background-screen-active);
28
+ --Button-minimal-background-hover: var(--color-background-screen-hover);
29
+ --Button-minimal-background-active: var(--color-background-screen-active);
30
30
  --Button-minimal-color: var(--color-interactive-primary);
31
31
 
32
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
- --Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
34
- --Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
33
+ --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
34
+ --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
35
35
  --Button-primary-negative-color: var(--color-contrast);
36
36
  --Button-primary-netative-avatar-border-color: #FFFFFF33;
37
37
 
38
38
  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
39
- --Button-secondary-negative-hover-background: var(--color-sentiment-negative-secondary-hover);
40
- --Button-secondary-negative-active-background: var(--color-sentiment-negative-secondary-active);
39
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
40
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
41
41
  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
42
42
  --Button-secondary-netative-avatar-border-color: #A8200D1F;
43
43
  }
package/src/iconButton/IconButton.css CHANGED
@@ -2,77 +2,72 @@
2
2
  border: none;
3
3
  }
4
4
  .np-icon-button-tertiary-default {
5
- color: var(--color-interactive-primary);
6
- background-color: rgba(134,167,189,0.10196);
7
- background-color: var(--color-background-neutral);
5
+ --Button-color: var(--color-interactive-primary);
6
+ --Button-background: var(--color-background-neutral);
8
7
  }
9
8
  .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
10
- background-color: var(--color-background-neutral-hover);
9
+ --Button-hover-background: var(--color-background-neutral-hover);
11
10
  }
12
11
  .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
13
- background-color: var(--color-background-neutral-active);
12
+ --Button-active-background: var(--color-background-neutral-active);
14
13
  }
15
14
  .np-icon-button-primary-default {
16
- color: var(--color-interactive-control);
17
- background-color: #00a2dd;
18
- background-color: var(--color-interactive-accent);
15
+ --Button-color: var(--color-interactive-control);
16
+ --Button-background: var(--color-interactive-accent);
19
17
  }
20
18
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
21
- background-color: #008fc9;
22
- background-color: var(--color-interactive-accent-hover);
19
+ --Button-hover-background: var(--color-interactive-accent-hover);
23
20
  }
24
21
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
25
- background-color: #0081ba;
26
- background-color: var(--color-interactive-accent-active);
22
+ --Button-active-background: var(--color-interactive-accent-active);
27
23
  }
28
24
  .np-icon-button-primary-negative {
29
- color: var(--color-contrast-overlay);
30
- background-color: var(--color-sentiment-negative-primary);
25
+ --Button-color: var(--color-contrast-overlay);
26
+ --Button-background: var(--color-sentiment-negative-primary);
31
27
  }
32
28
  .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
33
- background-color: var(--color-sentiment-negative-primary-hover);
29
+ --Button-hover-background: var(--color-sentiment-negative-primary-hover);
34
30
  }
35
31
  .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
36
- background-color: var(--color-sentiment-negative-primary-active);
32
+ --Button-active-background: var(--color-sentiment-negative-primary-active);
37
33
  }
38
34
  .np-theme-personal--bright-green .np-icon-button-primary-negative {
39
35
  color: var(--color-white);
40
36
  }
41
37
  .np-icon-button-minimal-default {
42
- color: var(--color-interactive-primary);
43
- background-color: #ffffff;
44
- background-color: var(--color-background-screen);
38
+ --Button-color: var(--color-interactive-primary);
39
+ --Button-background: var(--color-background-screen);
45
40
  background-color: transparent;
46
41
  }
47
42
  .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
48
- background-color: var(--color-background-screen-hover);
43
+ --Button-hover-background: var(--color-background-screen-hover);
49
44
  }
50
45
  .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
51
- background-color: var(--color-background-screen-active);
46
+ --Button-active-background: var(--color-background-screen-active);
52
47
  }
53
48
  .np-icon-button-secondary-default {
54
- color: var(--color-interactive-primary);
55
- background-color: var(--color-interactive-neutral);
49
+ --Button-color: var(--color-interactive-primary);
50
+ --Button-background: var(--color-interactive-neutral);
56
51
  }
57
52
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
58
- background-color: var(--color-interactive-neutral-hover);
53
+ --Button-hover-background: var(--color-interactive-neutral-hover);
59
54
  }
60
55
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
61
- background-color: var(--color-interactive-neutral-active);
56
+ --Button-active-background: var(--color-interactive-neutral-active);
62
57
  }
63
58
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
64
59
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
65
60
  color: var(--color-interactive-control);
66
61
  }
67
62
  .np-icon-button-secondary-negative {
68
- color: var(--color-sentiment-negative-primary);
69
- background-color: var(--color-sentiment-negative-secondary);
63
+ --Button-color: var(--color-sentiment-negative-primary);
64
+ --Button-background: var(--color-sentiment-negative-secondary);
70
65
  }
71
66
  .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
72
- background-color: var(--color-sentiment-negative-secondary-hover);
67
+ --Button-hover-background: var(--color-sentiment-negative-secondary-hover);
73
68
  }
74
69
  .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
75
- background-color: var(--color-sentiment-negative-secondary-active);
70
+ --Button-active-background: var(--color-sentiment-negative-secondary-active);
76
71
  }
77
72
  .np-theme-personal--bright-green .np-icon-button-secondary-negative {
78
73
  color: var(--color-white);
package/src/iconButton/IconButton.less CHANGED
@@ -42,14 +42,14 @@
42
42
  }
43
43
 
44
44
  .colors(@icon-color, @bg-color) {
45
- color: var(@icon-color);
46
- background-color: var(@bg-color);
45
+ --Button-color: var(@icon-color);
46
+ --Button-background: var(@bg-color);
47
47
 
48
48
  &:not(.disabled, :disabled):hover {
49
- background-color:~"var(@{bg-color}-hover)";
49
+ --Button-hover-background:~"var(@{bg-color}-hover)";
50
50
  }
51
51
  &:not(.disabled, :disabled):active {
52
- background-color:~"var(@{bg-color}-active)";
52
+ --Button-active-background:~"var(@{bg-color}-active)";
53
53
  }
54
54
  }
55
55
  }