Skip to content

Commit fe886d9

Browse files
didimmovarkaraivanovsimeonoffSisIvanova
authored
refactor(buttons): refactor buttons themes (#1996)
--------- Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com> Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com> Co-authored-by: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
1 parent 23ae932 commit fe886d9

File tree

9 files changed

+145
-169
lines changed

9 files changed

+145
-169
lines changed

‎src/components/button/themes/button/shared/button.bootstrap.scss‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@ $outlined-theme: $bootstrap-outlined;
1212

1313
:host([variant='outlined']) {
1414
--component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
15-
16-
[part~='base'] {
17-
&:focus {
18-
border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
19-
}
20-
}
2115
}
2216

2317
:host([variant='contained']) {
@@ -28,67 +22,25 @@ $outlined-theme: $bootstrap-outlined;
2822
--component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
2923
}
3024

31-
:host(:not([disabled])[variant='flat']) [part~='base'],
32-
:host(:not(:disabled)[variant='flat']) [part~='base'] {
33-
&:active {
34-
::slotted(igc-icon) {
35-
color: var-get($flat-theme, 'active-foreground');
36-
}
37-
}
38-
}
39-
4025
:host(:not([disabled])[variant='flat']) [part='base focused'],
4126
:host(:not(:disabled)[variant='flat']) [part='base focused'] {
4227
box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
4328
}
4429

45-
:host(:not([disabled])[variant='outlined']) [part~='base'],
46-
:host(:not(:disabled)[variant='outlined']) [part~='base'] {
47-
&:active {
48-
border-color: var-get($outlined-theme, 'active-border-color');
49-
50-
::slotted(igc-icon) {
51-
color: var-get($outlined-theme, 'active-foreground');
52-
}
53-
}
54-
}
55-
5630
:host(:not([disabled])[variant='outlined']) [part='base focused'],
5731
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
5832
box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
5933

6034
::slotted(igc-icon) {
6135
color: var-get($outlined-theme, 'icon-color-hover');
6236
}
63-
64-
&:active {
65-
border-color: var-get($outlined-theme, 'active-border-color');
66-
}
67-
}
68-
69-
:host(:not([disabled])[variant='contained']) [part~='base'],
70-
:host(:not(:disabled)[variant='contained']) [part~='base'] {
71-
&:active {
72-
::slotted(igc-icon) {
73-
color: var-get($contained-theme, 'active-foreground');
74-
}
75-
}
7637
}
7738

7839
:host(:not([disabled])[variant='contained']) [part='base focused'],
7940
:host(:not(:disabled)[variant='contained']) [part='base focused'] {
8041
box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
8142
}
8243

83-
:host(:not([disabled])[variant='fab']) [part~='base'],
84-
:host(:not(:disabled)[variant='fab']) [part~='base'] {
85-
&:active {
86-
::slotted(igc-icon) {
87-
color: var-get($fab-theme, 'active-foreground');
88-
}
89-
}
90-
}
91-
9244
:host(:not([disabled])[variant='fab']) [part='base focused'],
9345
:host(:not(:disabled)[variant='fab']) [part='base focused'] {
9446
box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');

‎src/components/button/themes/button/shared/button.common.scss‎

Lines changed: 52 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ $outlined-theme: $material-outlined;
5555
&:hover {
5656
color: var-get($flat-theme, 'hover-foreground');
5757
background: var-get($flat-theme, 'hover-background');
58+
border-color: var-get($flat-theme, 'hover-border-color');
5859

5960
::slotted(igc-icon) {
6061
color: var-get($flat-theme, 'icon-color-hover');
@@ -64,30 +65,34 @@ $outlined-theme: $material-outlined;
6465
&:active {
6566
color: var-get($flat-theme, 'active-foreground');
6667
background: var-get($flat-theme, 'active-background');
68+
border-color: var-get($flat-theme, 'active-border-color');
69+
70+
::slotted(igc-icon) {
71+
color: var-get($flat-theme, 'active-foreground');
72+
}
6773
}
6874
}
6975

7076
:host(:not([disabled])[variant='flat']) [part='base focused'],
7177
:host(:not(:disabled)[variant='flat']) [part='base focused'] {
7278
color: var-get($flat-theme, 'focus-visible-foreground');
7379
background: var-get($flat-theme, 'focus-visible-background');
74-
75-
::slotted(igc-icon) {
76-
color: var-get($flat-theme, 'icon-color');
77-
}
80+
border-color: var-get($flat-theme, 'focus-visible-border-color');
7881

7982
&:hover {
8083
color: var-get($flat-theme, 'focus-hover-foreground');
8184
background: var-get($flat-theme, 'focus-hover-background');
82-
83-
::slotted(igc-icon) {
84-
color: var-get($flat-theme, 'icon-color-hover');
85-
}
85+
border-color: var-get($flat-theme, 'focus-visible-border-color');
8686
}
8787

8888
&:active {
8989
color: var-get($flat-theme, 'focus-foreground');
9090
background: var-get($flat-theme, 'focus-background');
91+
border-color: var-get($flat-theme, 'focus-border-color');
92+
93+
::slotted(igc-icon) {
94+
color: var-get($flat-theme, 'focus-foreground');
95+
}
9196
}
9297
}
9398

@@ -103,6 +108,7 @@ $outlined-theme: $material-outlined;
103108
&:hover {
104109
color: var-get($outlined-theme, 'hover-foreground');
105110
background: var-get($outlined-theme, 'hover-background');
111+
border-color: var-get($outlined-theme, 'hover-border-color');
106112

107113
::slotted(igc-icon) {
108114
color: var-get($outlined-theme, 'icon-color-hover');
@@ -112,31 +118,33 @@ $outlined-theme: $material-outlined;
112118
&:active {
113119
color: var-get($outlined-theme, 'active-foreground');
114120
background: var-get($outlined-theme, 'active-background');
121+
border-color: var-get($outlined-theme, 'active-border-color');
122+
123+
::slotted(igc-icon) {
124+
color: var-get($outlined-theme, 'active-foreground');
125+
}
115126
}
116127
}
117128

118129
:host(:not([disabled])[variant='outlined']) [part='base focused'],
119130
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
120131
color: var-get($outlined-theme, 'focus-visible-foreground');
121132
background: var-get($outlined-theme, 'focus-visible-background');
122-
123-
::slotted(igc-icon) {
124-
color: var-get($outlined-theme, 'icon-color');
125-
}
133+
border-color: var-get($outlined-theme, 'focus-visible-border-color');
126134

127135
&:hover {
128136
color: var-get($outlined-theme, 'focus-hover-foreground');
129137
background: var-get($outlined-theme, 'focus-hover-background');
130-
131-
::slotted(igc-icon) {
132-
color: var-get($outlined-theme, 'icon-color-hover');
133-
}
134138
}
135139

136140
&:active {
137141
color: var-get($outlined-theme, 'focus-foreground');
138142
background: var-get($outlined-theme, 'focus-background');
139143
border-color: var-get($outlined-theme, 'focus-border-color');
144+
145+
::slotted(igc-icon) {
146+
color: var-get($outlined-theme, 'focus-foreground');
147+
}
140148
}
141149
}
142150

@@ -152,6 +160,7 @@ $outlined-theme: $material-outlined;
152160
&:hover {
153161
color: var-get($contained-theme, 'hover-foreground');
154162
background: var-get($contained-theme, 'hover-background');
163+
border-color: var-get($contained-theme, 'hover-border-color');
155164

156165
::slotted(igc-icon) {
157166
color: var-get($contained-theme, 'icon-color-hover');
@@ -161,30 +170,33 @@ $outlined-theme: $material-outlined;
161170
&:active {
162171
color: var-get($contained-theme, 'active-foreground');
163172
background: var-get($contained-theme, 'active-background');
173+
border-color: var-get($contained-theme, 'active-border-color');
174+
175+
::slotted(igc-icon) {
176+
color: var-get($contained-theme, 'active-foreground');
177+
}
164178
}
165179
}
166180

167181
:host(:not([disabled])[variant='contained']) [part='base focused'],
168182
:host(:not(:disabled)[variant='contained']) [part='base focused'] {
169183
color: var-get($contained-theme, 'focus-visible-foreground');
170184
background: var-get($contained-theme, 'focus-visible-background');
171-
172-
::slotted(igc-icon) {
173-
color: var-get($contained-theme, 'icon-color');
174-
}
185+
border-color: var-get($contained-theme, 'focus-visible-border-color');
175186

176187
&:hover {
177188
color: var-get($contained-theme, 'focus-hover-foreground');
178189
background: var-get($contained-theme, 'focus-hover-background');
179-
180-
::slotted(igc-icon) {
181-
color: var-get($contained-theme, 'icon-color-hover');
182-
}
183190
}
184191

185192
&:active {
186193
color: var-get($contained-theme, 'focus-foreground');
187194
background: var-get($contained-theme, 'focus-background');
195+
border-color: var-get($contained-theme, 'focus-border-color');
196+
197+
::slotted(igc-icon) {
198+
color: var-get($contained-theme, 'focus-foreground');
199+
}
188200
}
189201
}
190202

@@ -200,6 +212,7 @@ $outlined-theme: $material-outlined;
200212
&:hover {
201213
color: var-get($fab-theme, 'hover-foreground');
202214
background: var-get($fab-theme, 'hover-background');
215+
border-color: var-get($fab-theme, 'hover-border-color');
203216

204217
::slotted(igc-icon) {
205218
color: var-get($fab-theme, 'icon-color-hover');
@@ -209,37 +222,41 @@ $outlined-theme: $material-outlined;
209222
&:active {
210223
color: var-get($fab-theme, 'active-foreground');
211224
background: var-get($fab-theme, 'active-background');
225+
border-color: var-get($fab-theme, 'active-border-color');
226+
227+
::slotted(igc-icon) {
228+
color: var-get($fab-theme, 'active-foreground');
229+
}
212230
}
213231
}
214232

215233
:host(:not([disabled])[variant='fab']) [part='base focused'],
216234
:host(:not(:disabled)[variant='fab']) [part='base focused'] {
217235
color: var-get($fab-theme, 'focus-visible-foreground');
218236
background: var-get($fab-theme, 'focus-visible-background');
219-
220-
::slotted(igc-icon) {
221-
color: var-get($fab-theme, 'icon-color');
222-
}
237+
border-color: var-get($fab-theme, 'focus-visible-border-color');
223238

224239
&:hover {
225240
color: var-get($fab-theme, 'focus-hover-foreground');
226241
background: var-get($fab-theme, 'focus-hover-background');
227-
228-
::slotted(igc-icon) {
229-
color: var-get($fab-theme, 'icon-color-hover');
230-
}
231242
}
232243

233244
&:active {
234245
color: var-get($fab-theme, 'focus-foreground');
235246
background: var-get($fab-theme, 'focus-background');
247+
border-color: var-get($fab-theme, 'focus-border-color');
248+
249+
::slotted(igc-icon) {
250+
color: var-get($fab-theme, 'focus-foreground');
251+
}
236252
}
237253
}
238254

239255
:host([disabled][variant='flat']) [part~='base'],
240256
:host(:disabled[variant='flat']) [part~='base'] {
241257
color: var-get($flat-theme, 'disabled-foreground');
242258
background: var-get($flat-theme, 'disabled-background');
259+
border-color: var-get($flat-theme, 'disabled-border-color');
243260

244261
::slotted(igc-icon) {
245262
color: var-get($flat-theme, 'disabled-icon-color');
@@ -250,7 +267,7 @@ $outlined-theme: $material-outlined;
250267
:host(:disabled[variant='outlined']) [part~='base'] {
251268
color: var-get($outlined-theme, 'disabled-foreground');
252269
background: var-get($outlined-theme, 'disabled-background');
253-
border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color');
270+
border-color: var-get($outlined-theme, 'disabled-border-color');
254271

255272
::slotted(igc-icon) {
256273
color: var-get($outlined-theme, 'disabled-icon-color');
@@ -261,6 +278,7 @@ $outlined-theme: $material-outlined;
261278
:host(:disabled[variant='contained']) [part~='base'] {
262279
color: var-get($contained-theme, 'disabled-foreground');
263280
background: var-get($contained-theme, 'disabled-background');
281+
border-color: var-get($contained-theme, 'disabled-border-color');
264282

265283
::slotted(igc-icon) {
266284
color: var-get($contained-theme, 'disabled-icon-color');
@@ -271,6 +289,7 @@ $outlined-theme: $material-outlined;
271289
:host(:disabled[variant='fab']) [part~='base'] {
272290
color: var-get($fab-theme, 'disabled-foreground');
273291
background: var-get($fab-theme, 'disabled-background');
292+
border-color: var-get($fab-theme, 'disabled-border-color');
274293

275294
::slotted(igc-icon) {
276295
color: var-get($fab-theme, 'disabled-icon-color');

‎src/components/button/themes/button/shared/button.fluent.scss‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,15 @@ $outlined-btn-indent: rem(2px);
4949

5050
:host(:not([disabled])[variant='flat']) [part='base focused'],
5151
:host(:not(:disabled)[variant='flat']) [part='base focused'] {
52+
&,
53+
&:hover {
54+
border: rem(1px) solid var-get($flat-theme, 'active-border-color');
55+
}
56+
57+
&:active {
58+
border: rem(1px) solid var-get($flat-theme, 'focus-border-color');
59+
}
60+
5261
&::after {
5362
box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
5463
}
@@ -65,6 +74,11 @@ $outlined-btn-indent: rem(2px);
6574

6675
:host(:not([disabled])[variant='outlined']) [part='base focused'],
6776
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
77+
&,
78+
&:active {
79+
border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
80+
}
81+
6882
&::after {
6983
inset-block-start: $outlined-btn-indent;
7084
inset-inline-start: $outlined-btn-indent;
@@ -76,8 +90,7 @@ $outlined-btn-indent: rem(2px);
7690

7791
:host(:not([disabled])[variant='contained']) [part='base focused'],
7892
:host(:not(:disabled)[variant='contained']) [part='base focused'] {
79-
color: var-get($contained-theme, 'focus-visible-foreground');
80-
background: var-get($contained-theme, 'focus-visible-background');
93+
border: rem(1px) solid var-get($contained-theme, 'active-border-color');
8194
position: relative;
8295

8396
&::after {
@@ -87,8 +100,7 @@ $outlined-btn-indent: rem(2px);
87100

88101
:host(:not([disabled])[variant='fab']) [part='base focused'],
89102
:host(:not(:disabled)[variant='fab']) [part='base focused'] {
90-
color: var-get($fab-theme, 'focus-visible-foreground');
91-
background: var-get($fab-theme, 'focus-visible-background');
103+
border: rem(1px) solid var-get($fab-theme, 'active-border-color');
92104
position: relative;
93105

94106
&::after {

0 commit comments

Comments
 (0)