Skip to content

Commit f097511

Browse files
didimmovadidimmova
committed
refactor(buttons): refactor buttons themes
1 parent e850c24 commit f097511

File tree

6 files changed

+117
-141
lines changed

6 files changed

+117
-141
lines changed

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

Lines changed: 0 additions & 52 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,21 @@ $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');
59-
60-
::slotted(igc-icon) {
61-
color: var-get($outlined-theme, 'icon-color-hover');
62-
}
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-
}
7633
}
7734

7835
:host(:not([disabled])[variant='contained']) [part='base focused'],
7936
:host(:not(:disabled)[variant='contained']) [part='base focused'] {
8037
box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
8138
}
8239

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-
9240
:host(:not([disabled])[variant='fab']) [part='base focused'],
9341
:host(:not(:disabled)[variant='fab']) [part='base focused'] {
9442
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 & 1 deletion
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,13 +65,19 @@ $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');
80+
border-color: var-get($flat-theme, 'focus-visible-border-color');
7481

7582
::slotted(igc-icon) {
7683
color: var-get($flat-theme, 'icon-color');
@@ -79,6 +86,7 @@ $outlined-theme: $material-outlined;
7986
&:hover {
8087
color: var-get($flat-theme, 'focus-hover-foreground');
8188
background: var-get($flat-theme, 'focus-hover-background');
89+
border-color: var-get($flat-theme, 'focus-visible-border-color');
8290

8391
::slotted(igc-icon) {
8492
color: var-get($flat-theme, 'icon-color-hover');
@@ -88,6 +96,11 @@ $outlined-theme: $material-outlined;
8896
&:active {
8997
color: var-get($flat-theme, 'focus-foreground');
9098
background: var-get($flat-theme, 'focus-background');
99+
border-color: var-get($flat-theme, 'focus-visible-border-color');
100+
101+
::slotted(igc-icon) {
102+
color: var-get($flat-theme, 'focus-foreground');
103+
}
91104
}
92105
}
93106

@@ -103,6 +116,7 @@ $outlined-theme: $material-outlined;
103116
&:hover {
104117
color: var-get($outlined-theme, 'hover-foreground');
105118
background: var-get($outlined-theme, 'hover-background');
119+
border-color: var-get($outlined-theme, 'hover-border-color');
106120

107121
::slotted(igc-icon) {
108122
color: var-get($outlined-theme, 'icon-color-hover');
@@ -112,13 +126,19 @@ $outlined-theme: $material-outlined;
112126
&:active {
113127
color: var-get($outlined-theme, 'active-foreground');
114128
background: var-get($outlined-theme, 'active-background');
129+
border-color: var-get($outlined-theme, 'active-border-color');
130+
131+
::slotted(igc-icon) {
132+
color: var-get($outlined-theme, 'active-foreground');
133+
}
115134
}
116135
}
117136

118137
:host(:not([disabled])[variant='outlined']) [part='base focused'],
119138
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
120139
color: var-get($outlined-theme, 'focus-visible-foreground');
121140
background: var-get($outlined-theme, 'focus-visible-background');
141+
border-color: var-get($outlined-theme, 'focus-visible-border-color');
122142

123143
::slotted(igc-icon) {
124144
color: var-get($outlined-theme, 'icon-color');
@@ -137,6 +157,10 @@ $outlined-theme: $material-outlined;
137157
color: var-get($outlined-theme, 'focus-foreground');
138158
background: var-get($outlined-theme, 'focus-background');
139159
border-color: var-get($outlined-theme, 'focus-border-color');
160+
161+
::slotted(igc-icon) {
162+
color: var-get($outlined-theme, 'focus-foreground');
163+
}
140164
}
141165
}
142166

@@ -152,6 +176,7 @@ $outlined-theme: $material-outlined;
152176
&:hover {
153177
color: var-get($contained-theme, 'hover-foreground');
154178
background: var-get($contained-theme, 'hover-background');
179+
border-color: var-get($contained-theme, 'hover-border-color');
155180

156181
::slotted(igc-icon) {
157182
color: var-get($contained-theme, 'icon-color-hover');
@@ -161,13 +186,19 @@ $outlined-theme: $material-outlined;
161186
&:active {
162187
color: var-get($contained-theme, 'active-foreground');
163188
background: var-get($contained-theme, 'active-background');
189+
border-color: var-get($contained-theme, 'active-border-color');
190+
191+
::slotted(igc-icon) {
192+
color: var-get($contained-theme, 'active-foreground');
193+
}
164194
}
165195
}
166196

167197
:host(:not([disabled])[variant='contained']) [part='base focused'],
168198
:host(:not(:disabled)[variant='contained']) [part='base focused'] {
169199
color: var-get($contained-theme, 'focus-visible-foreground');
170200
background: var-get($contained-theme, 'focus-visible-background');
201+
border-color: var-get($contained-theme, 'focus-visible-border-color');
171202

172203
::slotted(igc-icon) {
173204
color: var-get($contained-theme, 'icon-color');
@@ -185,6 +216,11 @@ $outlined-theme: $material-outlined;
185216
&:active {
186217
color: var-get($contained-theme, 'focus-foreground');
187218
background: var-get($contained-theme, 'focus-background');
219+
border-color: var-get($contained-theme, 'focus-border-color');
220+
221+
::slotted(igc-icon) {
222+
color: var-get($contained-theme, 'focus-foreground');
223+
}
188224
}
189225
}
190226

@@ -200,6 +236,7 @@ $outlined-theme: $material-outlined;
200236
&:hover {
201237
color: var-get($fab-theme, 'hover-foreground');
202238
background: var-get($fab-theme, 'hover-background');
239+
border-color: var-get($fab-theme, 'hover-border-color');
203240

204241
::slotted(igc-icon) {
205242
color: var-get($fab-theme, 'icon-color-hover');
@@ -209,13 +246,19 @@ $outlined-theme: $material-outlined;
209246
&:active {
210247
color: var-get($fab-theme, 'active-foreground');
211248
background: var-get($fab-theme, 'active-background');
249+
border-color: var-get($fab-theme, 'active-border-color');
250+
251+
::slotted(igc-icon) {
252+
color: var-get($fab-theme, 'active-foreground');
253+
}
212254
}
213255
}
214256

215257
:host(:not([disabled])[variant='fab']) [part='base focused'],
216258
:host(:not(:disabled)[variant='fab']) [part='base focused'] {
217259
color: var-get($fab-theme, 'focus-visible-foreground');
218260
background: var-get($fab-theme, 'focus-visible-background');
261+
border-color: var-get($fab-theme, 'focus-visible-border-color');
219262

220263
::slotted(igc-icon) {
221264
color: var-get($fab-theme, 'icon-color');
@@ -233,13 +276,19 @@ $outlined-theme: $material-outlined;
233276
&:active {
234277
color: var-get($fab-theme, 'focus-foreground');
235278
background: var-get($fab-theme, 'focus-background');
279+
border-color: var-get($fab-theme, 'focus-border-color');
280+
281+
::slotted(igc-icon) {
282+
color: var-get($fab-theme, 'focus-foreground');
283+
}
236284
}
237285
}
238286

239287
:host([disabled][variant='flat']) [part~='base'],
240288
:host(:disabled[variant='flat']) [part~='base'] {
241289
color: var-get($flat-theme, 'disabled-foreground');
242290
background: var-get($flat-theme, 'disabled-background');
291+
border-color: var-get($flat-theme, 'disabled-border-color');
243292

244293
::slotted(igc-icon) {
245294
color: var-get($flat-theme, 'disabled-icon-color');
@@ -250,7 +299,7 @@ $outlined-theme: $material-outlined;
250299
:host(:disabled[variant='outlined']) [part~='base'] {
251300
color: var-get($outlined-theme, 'disabled-foreground');
252301
background: var-get($outlined-theme, 'disabled-background');
253-
border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color');
302+
border-color: var-get($outlined-theme, 'disabled-border-color');
254303

255304
::slotted(igc-icon) {
256305
color: var-get($outlined-theme, 'disabled-icon-color');
@@ -261,6 +310,7 @@ $outlined-theme: $material-outlined;
261310
:host(:disabled[variant='contained']) [part~='base'] {
262311
color: var-get($contained-theme, 'disabled-foreground');
263312
background: var-get($contained-theme, 'disabled-background');
313+
border-color: var-get($contained-theme, 'disabled-border-color');
264314

265315
::slotted(igc-icon) {
266316
color: var-get($contained-theme, 'disabled-icon-color');
@@ -271,6 +321,7 @@ $outlined-theme: $material-outlined;
271321
:host(:disabled[variant='fab']) [part~='base'] {
272322
color: var-get($fab-theme, 'disabled-foreground');
273323
background: var-get($fab-theme, 'disabled-background');
324+
border-color: var-get($fab-theme, 'disabled-border-color');
274325

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

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@ $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+
&:active {
55+
border: rem(1px) solid var-get($flat-theme, 'active-border-color');
56+
}
57+
5258
&::after {
5359
box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
5460
}
@@ -65,6 +71,11 @@ $outlined-btn-indent: rem(2px);
6571

6672
:host(:not([disabled])[variant='outlined']) [part='base focused'],
6773
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
74+
&,
75+
&:active {
76+
border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
77+
}
78+
6879
&::after {
6980
inset-block-start: $outlined-btn-indent;
7081
inset-inline-start: $outlined-btn-indent;
@@ -76,8 +87,7 @@ $outlined-btn-indent: rem(2px);
7687

7788
:host(:not([disabled])[variant='contained']) [part='base focused'],
7889
: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');
90+
border: rem(1px) solid var-get($contained-theme, 'active-border-color');
8191
position: relative;
8292

8393
&::after {
@@ -87,8 +97,7 @@ $outlined-btn-indent: rem(2px);
8797

8898
:host(:not([disabled])[variant='fab']) [part='base focused'],
8999
: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');
100+
border: rem(1px) solid var-get($fab-theme, 'active-border-color');
92101
position: relative;
93102

94103
&::after {

0 commit comments

Comments
 (0)