Skip to content

Commit 5be40db

Browse files
EugeniyKiyashkoEugeniyKiyashko
committed
migrate texteditors
1 parent 51e3f82 commit 5be40db

5 files changed

Lines changed: 37 additions & 85 deletions

File tree

‎e2e/testcafe-devextreme/helpers/themeUtils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const getCurrentTheme = async (t: TestController): Promise<string> => {
1818

1919
export const isMaterial = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('material');
2020

21-
export const isFluent = (): boolean => (process.env.theme ?? defaultThemeName).startsWith('fluent');
21+
export const isFluent = (): boolean => /^(dxds)?fluent/.test(process.env.theme ?? defaultThemeName);
2222

2323
export const isMaterialBased = (): boolean => isMaterial() || isFluent();
2424

‎packages/devextreme-scss/scss/widgets/dxdsfluent/checkBox/_colors.scss‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
@use "sass:color";
2-
@use "../sizes" as *;
3-
@use "../colors" as *;
1+
@use "../../../_design-system/variables/ds" as ds;
42

53
// adduse
64

7-
$checkbox-border-color: $base-border-color-accessible !default;
8-
$checkbox-border-color-hover: $base-border-color-accessible-hover !default;
9-
$checkbox-border-color-active: $base-border-color-accessible-focused !default;
5+
$checkbox-border-color: ds.$checkbox-color-unchecked-default-border-rest !default;
6+
$checkbox-border-color-hover: ds.$checkbox-color-unchecked-default-border-hovered !default;
7+
$checkbox-border-color-active: ds.$checkbox-color-unchecked-default-border-active !default;
108

11-
$checkbox-foreground-color: $base-element-bg !default;
9+
$checkbox-foreground-color: ds.$checkbox-color-checked-default-icon-rest !default;
1210

13-
$checkbox-accent-color: $base-accent !default;
14-
$checkbox-accent-color-hover: $base-accent-hover !default;
15-
$checkbox-accent-color-focused: $base-accent-active !default;
11+
$checkbox-accent-color: ds.$checkbox-color-checked-default-bg-rest !default;
12+
$checkbox-accent-color-hover: ds.$checkbox-color-checked-default-bg-hovered !default;
13+
$checkbox-accent-color-focused: ds.$checkbox-color-checked-default-bg-active !default;
1614

17-
$checkbox-invalid-color: $base-invalid-color !default;
18-
$checkbox-invalid-color-hover: $base-invalid-color-hover !default;
19-
$checkbox-invalid-color-focused: $base-invalid-color-selected !default;
15+
$checkbox-invalid-color: ds.$color-border-danger-default-rest !default;
16+
$checkbox-invalid-color-hover: ds.$color-border-danger-default-hovered !default;
17+
$checkbox-invalid-color-focused: ds.$color-border-danger-default-hovered !default;
2018

21-
$checkbox-border-color-disabled: $base-border-color-disabled !default;
22-
$checkbox-foreground-disabled-color: $base-foreground-disabled !default;
19+
$checkbox-border-color-disabled: ds.$checkbox-color-unchecked-default-border-disabled !default;
20+
$checkbox-foreground-disabled-color: ds.$checkbox-color-checked-default-icon-disabled !default;

‎packages/devextreme-scss/scss/widgets/dxdsfluent/speedDialAction/_colors.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,5 @@ $speed-dial-action-bg: $button-normal-bg !default;
1515
$speed-dial-action-hover-bg: $button-normal-hover-bg !default;
1616
$speed-dial-action-active-bg: $button-normal-active-bg !default;
1717

18-
// The shared base mixin derives hover/active via color.adjust() from this
19-
// value, so it must stay a Sass color (theme layer) until the mixin accepts
20-
// ready-made hover/active arguments — see TOKENS_MIGRATION.md.
18+
// Stays a Sass color: the shared base mixin derives hover/active from it via color.adjust() — see TOKENS_MIGRATION.md
2119
$speed-dial-action-main-bg: $base-accent !default;

‎packages/devextreme-scss/scss/widgets/dxdsfluent/textBox/_colors.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
@use "sass:color";
2-
@use "../sizes" as *;
3-
@use "../colors" as *;
1+
@use "../../../_design-system/variables/ds" as ds;
42

53
// adduse
64

75
// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
8-
$textbox-foreground-disabled: $base-foreground-disabled !default;
6+
$textbox-foreground-disabled: ds.$text-input-color-default-content-disabled !default;

‎packages/devextreme-scss/scss/widgets/dxdsfluent/textEditor/_colors.scss‎

Lines changed: 20 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
@use "sass:color";
21
@use "../sizes" as *;
3-
@use "../colors" as *;
2+
@use "../../../_design-system/variables/ds" as ds;
43

54
// adduse
65

76
/**
87
* $name 10. Text color
98
* $type color
109
*/
11-
$texteditor-color: null !default;
10+
$texteditor-color: ds.$text-input-color-default-content-rest !default;
1211

1312
/**
1413
* $name 20. Placeholder text color
1514
* $type color
1615
*/
17-
$texteditor-placeholder-color: null !default;
16+
$texteditor-placeholder-color: ds.$text-content-color-default-placeholder-rest !default;
1817

1918
/**
2019
* $name 30. Outlined background color
2120
* $type color
2221
*/
23-
$texteditor-outlined-bg: $base-element-bg !default;
22+
$texteditor-outlined-bg: ds.$text-input-color-default-bg-rest !default;
2423

2524
/**
2625
* $name 31. Outlined hovered background color
@@ -38,7 +37,7 @@ $texteditor-outlined-bg-focused: $texteditor-outlined-bg !default;
3837
* $name 40. Filled background color
3938
* $type color
4039
*/
41-
$texteditor-filled-bg: null !default;
40+
$texteditor-filled-bg: ds.$color-surface-neutral-deep-rest !default;
4241

4342
/**
4443
* $name 50. Underlined background color
@@ -62,76 +61,35 @@ $texteditor-underlined-bg-focused: $texteditor-underlined-bg !default;
6261
* $name 60. Border color
6362
* $type color
6463
*/
65-
$texteditor-border-color: $base-border-color !default;
66-
$texteditor-border-color-hover: $base-border-color-hover !default;
67-
$texteditor-border-color-focused: $base-border-color-focused !default;
64+
$texteditor-border-color: ds.$text-input-color-default-border-rest !default;
65+
$texteditor-border-color-hover: ds.$text-input-color-default-border-hovered !default;
66+
$texteditor-border-color-focused: ds.$text-input-color-default-border-active !default;
6867

6968
/**
7069
* $name 70. Bottom border color
7170
* $type color
7271
*/
73-
$texteditor-border-bottom-color: $base-border-color-accessible !default;
74-
$texteditor-border-bottom-color-hover: null !default;
75-
$texteditor-border-bottom-color-focused: null !default;
72+
$texteditor-border-bottom-color: ds.$text-input-color-default-line-rest !default;
73+
$texteditor-border-bottom-color-hover: ds.$text-input-color-default-line-hovered !default;
74+
$texteditor-border-bottom-color-focused: ds.$text-input-color-default-line-hovered !default;
7675

7776
/**
7877
* $name 80. Focused state indicator color
7978
* $type color
8079
*/
81-
$texteditor-indicator-border-color: $base-accent !default;
80+
$texteditor-indicator-border-color: ds.$text-input-color-default-line-focused !default;
8281

83-
$texteditor-button-clear-icon-color: $base-icon-color !default;
84-
$texteditor-invalid-focused-border-color: $base-invalid-color-hover !default;
85-
$texteditor-invalid-faded-border-color: $base-invalid-color !default;
86-
$texteditor-border-color-disabled: $base-border-color-disabled !default;
87-
$texteditor-disabled-text-color: $base-foreground-disabled !default;
82+
$texteditor-button-clear-icon-color: ds.$color-content-neutral-subdued-rest !default;
83+
$texteditor-invalid-focused-border-color: ds.$color-border-danger-default-hovered !default;
84+
$texteditor-invalid-faded-border-color: ds.$text-input-color-invalid-border-rest !default;
85+
$texteditor-border-color-disabled: ds.$text-input-color-default-border-disabled !default;
86+
$texteditor-disabled-text-color: ds.$text-input-color-default-content-disabled !default;
8887
$texteditor-input-border-radius: $base-border-radius !default;
8988
$texteditor-label-transition:
9089
font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
9190
transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
9291
top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
9392

94-
@if $mode == "light" {
95-
@if $color == "blue" {
96-
$texteditor-color: $base-text-color !default;
97-
$texteditor-placeholder-color: color.adjust($base-text-color, $lightness: 29.80%, $space: hsl) !default;
98-
$texteditor-outlined-bg: $base-element-bg !default;
99-
$texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -3.9%, $space: hsl) !default;
100-
}
101-
102-
@if $color == "saas" {
103-
$texteditor-color: rgba(66, 81, 118, 1) !default;
104-
$texteditor-placeholder-color: rgba(144, 158, 192, 1) !default;
105-
$texteditor-outlined-bg: $base-element-bg !default;
106-
$texteditor-filled-bg: rgba(243, 245, 248, 1) !default;
107-
}
108-
109-
$texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: -9.8%, $space: hsl) !default;
110-
$texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: -17.65%, $space: hsl) !default;
111-
$texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: -3.92%, $space: hsl) !default;
112-
$texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: -3.92%, $space: hsl) !default;
113-
}
114-
115-
116-
@if $mode == "dark" {
117-
@if $color == "blue" {
118-
$texteditor-outlined-bg: $base-element-bg !default;
119-
$texteditor-filled-bg: color.adjust($base-element-bg, $lightness: -8.2%, $space: hsl) !default;
120-
}
121-
122-
@if $color == "saas" {
123-
$texteditor-outlined-bg: rgba(20, 30, 40, 1) !default;
124-
$texteditor-filled-bg: rgba(50, 60, 75, 1) !default;
125-
}
126-
127-
$texteditor-color: $base-text-color !default;
128-
$texteditor-placeholder-color: color.adjust($base-text-color, $lightness: -40.00%, $space: hsl) !default;
129-
$texteditor-border-color-hover: color.adjust($texteditor-border-color, $lightness: 7.84%, $space: hsl) !default;
130-
$texteditor-border-color-focused: color.adjust($texteditor-border-color, $lightness: 3.92%, $space: hsl) !default;
131-
$texteditor-border-bottom-color-hover: color.adjust($texteditor-border-bottom-color, $lightness: 6.27%, $space: hsl) !default;
132-
$texteditor-border-bottom-color-focused: color.adjust($texteditor-border-bottom-color-hover, $lightness: 3.92%, $space: hsl) !default;
133-
}
134-
13593
/**
13694
* $name 41. Filled hovered background color
13795
* $type color
@@ -145,13 +103,13 @@ $texteditor-filled-bg-hover: $texteditor-filled-bg !default;
145103
$texteditor-filled-bg-focused: $texteditor-filled-bg !default;
146104

147105
$texteditor-label-color: $texteditor-placeholder-color;
148-
$texteditor-label-color-focused: $base-accent;
106+
$texteditor-label-color-focused: ds.$color-content-primary-default-rest;
149107

150108
:root {
151109
--dx-texteditor-color-text: #{$texteditor-color};
152110
--dx-texteditor-color-label: #{$texteditor-label-color};
153111
}
154112

155113
// Theme-layer values used by this widget's style files (phase 0.5 layer normalization)
156-
$texteditor-foreground-disabled: $base-foreground-disabled !default;
157-
$texteditor-invalid-color: $base-invalid-color !default;
114+
$texteditor-foreground-disabled: ds.$text-input-color-default-content-disabled !default;
115+
$texteditor-invalid-color: ds.$text-input-color-invalid-border-rest !default;

0 commit comments

Comments
 (0)