Skip to content

Commit 988450a

Browse files
EugeniyKiyashkoEugeniyKiyashko
authored
ThemeBuilder - Text Color parameter is not applied to Outlined and Text buttons (T1212078) (#28636) (#28638)
1 parent 4c6bb0a commit 988450a

File tree

7 files changed

+148
-38
lines changed

7 files changed

+148
-38
lines changed

‎packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ $button-normal-selected-bg: $base-selected-bg !default;
5353
$button-normal-bg-inverted: null !default;
5454

5555
/**
56-
* $name 10. Text color
56+
* $name 10. Text color (contained)
5757
* $type color
5858
*/
5959
$button-default-color: null !default;
@@ -94,13 +94,21 @@ $button-default-active-bg: null !default;
9494
*/
9595
$button-default-selected-bg: null !default;
9696

97+
/**
98+
* $name 11. Text color (outlined)
99+
* $type color
100+
*/
97101
$button-default-outlined-color: $base-accent !default;
98102
$button-default-outlined-border-color: $base-accent !default;
99103
$button-default-outlined-hover-bg: null !default;
100104
$button-default-outlined-focused-bg: null !default;
101105
$button-default-outlined-active-bg: null !default;
102106
$button-default-outlined-selected-bg: null !default;
103107

108+
/**
109+
* $name 11. Text color (text)
110+
* $type color
111+
*/
104112
$button-default-text-color: $base-accent !default;
105113

106114
/**
@@ -337,13 +345,41 @@ $button-normal-text-focused-bg: $button-normal-hover-bg !default;
337345
$button-normal-text-active-bg: $button-normal-active-bg !default;
338346
$button-normal-text-selected-bg: $button-normal-selected-bg !default;
339347

348+
/**
349+
* $name 12. Hover state text color (outlined)
350+
* $type color
351+
*/
340352
$button-default-outlined-color-hover: $button-accent-foreground-color !default;
353+
354+
/**
355+
* $name 13. Active state text color (outlined)
356+
* $type color
357+
*/
341358
$button-default-outlined-color-active: $button-accent-foreground-color !default;
359+
360+
/**
361+
* $name 21. Selected state text color (outlined)
362+
* $type color
363+
*/
342364
$button-default-outlined-selected-color: $button-accent-foreground-color !default;
343365

344-
$button-default-text-color-hover: $button-default-outlined-color-hover !default;
366+
/**
367+
* $name 12. Hover state text color (text)
368+
* $type color
369+
*/
370+
$button-default-text-color-hover: $button-accent-foreground-color !default;
371+
372+
/**
373+
* $name 13. Active state text color (text)
374+
* $type color
375+
*/
345376
$button-default-text-color-active: $button-default-outlined-color-active !default;
346-
$button-default-text-selected-color: $button-default-outlined-selected-color !default;
377+
378+
/**
379+
* $name 21. Selected state text color (text)
380+
* $type color
381+
*/
382+
$button-default-text-selected-color: $button-accent-foreground-color !default;
347383

348384
$button-default-text-hover-bg: $button-default-outlined-hover-bg !default;
349385
$button-default-text-focused-bg: $button-default-outlined-focused-bg !default;

‎packages/devextreme-scss/scss/widgets/fluent/button/_mixins.scss

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,16 @@
145145
}
146146
}
147147

148-
@mixin dx-button-flat-color-styling($button-color, $button-color-hover, $button-color-active, $hover-bg, $focused-bg, $active-bg, $selected-bg: $active-bg, $selected-color: $button-color) {
148+
@mixin dx-button-flat-color-styling(
149+
$button-color,
150+
$button-color-hover,
151+
$button-color-active,
152+
$hover-bg,
153+
$focused-bg,
154+
$active-bg,
155+
$selected-bg: $active-bg,
156+
$selected-color: $button-color
157+
) {
149158
@include dx-button-styling-variant(
150159
transparent,
151160
$button-color,

‎packages/devextreme-scss/scss/widgets/generic/button/_colors.scss

Lines changed: 53 additions & 25 deletions
Large diffs are not rendered by default.

‎packages/devextreme-scss/scss/widgets/generic/button/_mixins.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@
171171
@include dx-button-styling-variant(
172172
transparent,
173173
$button-default-border-color,
174-
$button-default-border-color,
174+
$button-default-outlined-color,
175175
$button-default-outlined-bg-hover,
176176
$button-default-outlined-bg-focused,
177177
$button-default-outlined-bg-active,
@@ -227,7 +227,7 @@
227227
@include dx-button-styling-variant(
228228
transparent,
229229
transparent,
230-
$button-default-border-color,
230+
$button-default-text-color,
231231
$button-default-text-bg-hover,
232232
$button-default-text-bg-focused,
233233
$button-default-text-bg-active,

‎packages/devextreme-scss/scss/widgets/material/button/_colors.scss

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ $button-normal-bg-inverted: null !default;
6060
$button-default-color: $base-inverted-text-color !default;
6161

6262
/**
63-
* $name 20. Selected state text color
63+
* $name 20. Selected state text color (contained)
6464
* $type color
6565
*/
6666
$button-default-selected-color: $base-inverted-text-color !default;
@@ -99,12 +99,35 @@ $button-default-outlined-hover-bg: color.change($button-default-bg, $alpha: 0.08
9999
$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
100100
$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
101101
$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
102+
103+
/**
104+
* $name 11. Text color (outlined)
105+
* $type color
106+
*/
107+
$button-default-outlined-color: $button-default-bg !default;
108+
$button-default-outlined-border-color: $button-default-bg !default;
109+
110+
/**
111+
* $name 21. Selected state text color (outlined)
112+
* $type color
113+
*/
102114
$button-default-outlined-selected-color: $button-default-bg !default;
103115

104116
$button-default-text-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
105117
$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
106118
$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
107119
$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
120+
121+
/**
122+
* $name 11. Text color (text)
123+
* $type color
124+
*/
125+
$button-default-text-color: $button-default-bg !default;
126+
127+
/**
128+
* $name 21. Selected state text color (text)
129+
* $type color
130+
*/
108131
$button-default-text-selected-color: $button-default-bg !default;
109132

110133
/**
@@ -271,4 +294,3 @@ $button-normal-text-hover-bg: color.change($button-normal-bg-inverted, $alpha: 0
271294
$button-normal-text-focused-bg: color.change($button-normal-bg-inverted, $alpha: 0.08) !default;
272295
$button-normal-text-active-bg: color.change($button-normal-bg-inverted, $alpha: 0.3) !default;
273296
$button-normal-text-selected-bg: color.change($button-normal-bg-inverted, $alpha: 0.18) !default;
274-

‎packages/devextreme-scss/scss/widgets/material/button/_index.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@
139139

140140
&.dx-button-default {
141141
@include dx-button-flat-color-styling(
142-
$button-default-bg,
142+
$button-default-text-color,
143143
$button-default-text-hover-bg,
144144
$button-default-text-focused-bg,
145145
$button-default-text-active-bg,
@@ -184,8 +184,8 @@
184184

185185
&.dx-button-default {
186186
@include dx-button-outlined-color-styling(
187-
$button-default-bg,
188-
$button-default-bg,
187+
$button-default-outlined-color,
188+
$button-default-outlined-border-color,
189189
$button-default-outlined-hover-bg,
190190
$button-default-outlined-focused-bg,
191191
$button-default-outlined-active-bg,

‎packages/devextreme-scss/scss/widgets/material/button/_mixins.scss

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,14 @@
130130
}
131131
}
132132

133-
@mixin dx-button-flat-color-styling($button-color, $hover-bg, $focused-bg, $active-bg, $selected-bg: $active-bg, $selected-color: $button-color) {
133+
@mixin dx-button-flat-color-styling(
134+
$button-color,
135+
$hover-bg,
136+
$focused-bg,
137+
$active-bg,
138+
$selected-bg: $active-bg,
139+
$selected-color: $button-color
140+
) {
134141
@include dx-button-styling-variant(
135142
transparent,
136143
$button-color,
@@ -143,7 +150,15 @@
143150
);
144151
}
145152

146-
@mixin dx-button-outlined-color-styling($button-color, $border-color, $hover-bg, $focused-bg, $active-bg, $selected-bg, $selected-color) {
153+
@mixin dx-button-outlined-color-styling(
154+
$button-color,
155+
$border-color,
156+
$hover-bg,
157+
$focused-bg,
158+
$active-bg,
159+
$selected-bg,
160+
$selected-color
161+
) {
147162
border-width: 1px;
148163
border-style: solid;
149164
border-color: $border-color;

0 commit comments

Comments
 (0)