Skip to content

Commit 37e97a0

Browse files
EugeniyKiyashkoEugeniyKiyashko
committed
Step1: update base colors
1 parent 06012bc commit 37e97a0

File tree

4 files changed

+55
-53
lines changed

4 files changed

+55
-53
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,19 @@ $base-shadow-color: null !default;
6262
* $name 50. Success color
6363
* $type color
6464
*/
65-
$base-success: #8bc34a !default;
65+
$base-success: #006600 !default;
6666

6767
/**
6868
* $name 60. Warning color
6969
* $type color
7070
*/
71-
$base-warning: #ffc107 !default;
71+
$base-warning: #E54304 !default;
7272

7373
/**
7474
* $name 70. Danger color
7575
* $type color
7676
*/
77-
$base-danger: #f44336 !default;
77+
$base-danger: #C40011 !default;
7878

7979
/**
8080
* $name 80. Hover state text color
@@ -111,7 +111,7 @@ $scrollview-pulldown-path: null !default;
111111

112112
@if $color == "blue" {
113113
$material-color-accent-modificator: "blue" !default;
114-
$base-accent: #03a9f4 !default;
114+
$base-accent: #1F3DFF !default;
115115
}
116116

117117
@if $color == "lime" {
@@ -154,10 +154,10 @@ $base-link-color: $base-accent !default;
154154
$base-element-bg: $base-bg !default;
155155
$base-shadow-color: $base-inverted-bg !default;
156156
$base-hover-color: $base-text-color !default;
157-
$base-hover-bg: color.change(#000, $alpha: 0.04) !default;
157+
$base-hover-bg: color.change(#fff, $alpha: 0.08) !default;
158158
$base-inverted-text-color: #fff !default;
159159
$base-focus-color: $base-inverted-text-color !default;
160-
$base-focus-bg: color.change(#000, $alpha: 0.04) !default;
160+
$base-focus-bg: color.change(#fff, $alpha: 0.08) !default;
161161
$base-inverted-icon-color: $base-inverted-text-color !default;
162162
$base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
163163

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

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,9 @@ $button-default-selected-bg: null !default;
9898
$button-default-icon-color: $button-default-color !default;
9999
$button-default-outlined-bg: transparent !default;
100100
$button-default-outlined-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
101-
$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
102-
$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
103-
$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
101+
$button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.16) !default;
102+
$button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.18) !default;
103+
$button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.12) !default;
104104

105105
/**
106106
* $name 11. Text color (outlined)
@@ -116,9 +116,9 @@ $button-default-outlined-border-color: $button-default-bg !default;
116116
$button-default-outlined-selected-color: $button-default-bg !default;
117117
$button-default-text-bg: transparent !default;
118118
$button-default-text-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
119-
$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
120-
$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
121-
$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
119+
$button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.16) !default;
120+
$button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.18) !default;
121+
$button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.12) !default;
122122

123123
/**
124124
* $name 11. Text color (text)
@@ -176,16 +176,16 @@ $button-danger-selected-bg: null !default;
176176
$button-danger-icon-color: $button-danger-color !default;
177177
$button-danger-outlined-bg: transparent !default;
178178
$button-danger-outlined-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
179-
$button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
180-
$button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
181-
$button-danger-outlined-selected-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
179+
$button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.16) !default;
180+
$button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.18) !default;
181+
$button-danger-outlined-selected-bg: color.change($button-danger-bg, $alpha: 0.12) !default;
182182
$button-danger-outlined-selected-color: $button-danger-bg !default;
183183

184184
$button-danger-text-bg: transparent !default;
185185
$button-danger-text-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
186-
$button-danger-text-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
187-
$button-danger-text-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
188-
$button-danger-text-selected-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
186+
$button-danger-text-focused-bg: color.change($button-danger-bg, $alpha: 0.16) !default;
187+
$button-danger-text-active-bg: color.change($button-danger-bg, $alpha: 0.18) !default;
188+
$button-danger-text-selected-bg: color.change($button-danger-bg, $alpha: 0.12) !default;
189189
$button-danger-text-selected-color: $button-danger-bg !default;
190190

191191
/**
@@ -232,16 +232,16 @@ $button-success-selected-bg: null !default;
232232
$button-success-icon-color: $button-success-color !default;
233233
$button-success-outlined-bg: transparent !default;
234234
$button-success-outlined-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default;
235-
$button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default;
236-
$button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.36) !default;
237-
$button-success-outlined-selected-bg: color.change($button-success-bg, $alpha: 0.36) !default;
235+
$button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.16) !default;
236+
$button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.18) !default;
237+
$button-success-outlined-selected-bg: color.change($button-success-bg, $alpha: 0.12) !default;
238238
$button-success-outlined-selected-color: $button-success-bg !default;
239239

240240
$button-success-text-bg: transparent !default;
241241
$button-success-text-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default;
242-
$button-success-text-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default;
243-
$button-success-text-active-bg: color.change($button-success-bg, $alpha: 0.36) !default;
244-
$button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.36) !default;
242+
$button-success-text-focused-bg: color.change($button-success-bg, $alpha: 0.16) !default;
243+
$button-success-text-active-bg: color.change($button-success-bg, $alpha: 0.18) !default;
244+
$button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.12) !default;
245245
$button-success-text-selected-color: $button-success-bg !default;
246246

247247
@if $mode == "light" {
@@ -252,18 +252,18 @@ $button-success-text-selected-color: $button-success-bg !default;
252252
$button-normal-active-bg: color.adjust($button-normal-bg, $lightness: -30%, $space: hsl) !default;
253253
$button-normal-selected-bg: color.adjust($button-normal-bg, $lightness: -18%, $space: hsl) !default;
254254
$button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: -100%, $space: hsl) !default;
255-
$button-default-hover-bg: color.adjust($button-default-bg, $lightness: -8.5%, $space: hsl) !default;
256-
$button-default-focused-bg: color.adjust($button-default-bg, $lightness: -8.5%, $space: hsl) !default;
257-
$button-default-active-bg: color.adjust($button-default-bg, $lightness: -19.5%, $space: hsl) !default;
258-
$button-default-selected-bg: color.adjust($button-default-bg, $lightness: -19.5%, $space: hsl) !default;
259-
$button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -8.5%, $space: hsl) !default;
260-
$button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -8.5%, $space: hsl) !default;
261-
$button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -19.5%, $space: hsl) !default;
262-
$button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -19.5%, $space: hsl) !default;
263-
$button-success-hover-bg: color.adjust($button-success-bg, $lightness: -8.5%, $space: hsl) !default;
264-
$button-success-focused-bg: color.adjust($button-success-bg, $lightness: -8.5%, $space: hsl) !default;
265-
$button-success-active-bg: color.adjust($button-success-bg, $lightness: -19.5%, $space: hsl) !default;
266-
$button-success-selected-bg: color.adjust($button-success-bg, $lightness: -19.5%, $space: hsl) !default;
255+
$button-default-hover-bg: color.adjust($button-default-bg, $lightness: 3.53%, $space: hsl) !default;
256+
$button-default-focused-bg: color.adjust($button-default-bg, $lightness: 7.84%, $space: hsl) !default;
257+
$button-default-active-bg: color.adjust($button-default-bg, $lightness: 7.06%, $space: hsl) !default;
258+
$button-default-selected-bg: color.adjust($button-default-bg, $lightness: 6.27%, $space: hsl) !default;
259+
$button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 3.53%, $space: hsl) !default;
260+
$button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 7.84%, $space: hsl) !default;
261+
$button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 7.06%, $space: hsl) !default;
262+
$button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 6.27%, $space: hsl) !default;
263+
$button-success-hover-bg: color.adjust($button-success-bg, $lightness: 3.53%, $space: hsl) !default;
264+
$button-success-focused-bg: color.adjust($button-success-bg, $lightness: 7.84%, $space: hsl) !default;
265+
$button-success-active-bg: color.adjust($button-success-bg, $lightness: 7.06%, $space: hsl) !default;
266+
$button-success-selected-bg: color.adjust($button-success-bg, $lightness: 6.27%, $space: hsl) !default;
267267
}
268268

269269
@if $mode == "dark" {
@@ -274,18 +274,18 @@ $button-success-text-selected-color: $button-success-bg !default;
274274
$button-normal-active-bg: color.adjust($button-normal-bg, $lightness: 30%, $space: hsl) !default;
275275
$button-normal-selected-bg: color.adjust($button-normal-bg, $lightness: 18%, $space: hsl) !default;
276276
$button-normal-bg-inverted: color.adjust($button-normal-bg, $lightness: 100%, $space: hsl) !default;
277-
$button-default-hover-bg: color.adjust($button-default-bg, $lightness: 8.5%, $space: hsl) !default;
278-
$button-default-focused-bg: color.adjust($button-default-bg, $lightness: 8.5%, $space: hsl) !default;
279-
$button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: 19.5%, $space: hsl) !default;
280-
$button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: 19.5%, $space: hsl) !default;
281-
$button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: 8.5%, $space: hsl) !default;
282-
$button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: 8.5%, $space: hsl) !default;
283-
$button-danger-active-bg: color.adjust($button-danger-bg, $lightness: 19.5%, $space: hsl) !default;
284-
$button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: 19.5%, $space: hsl) !default;
285-
$button-success-hover-bg: color.adjust($button-success-bg, $lightness: 8.5%, $space: hsl) !default;
286-
$button-success-focused-bg: color.adjust($button-success-bg, $lightness: 8.5%, $space: hsl) !default;
287-
$button-success-active-bg: color.adjust($button-success-bg, $lightness: 19.5%, $space: hsl) !default;
288-
$button-success-selected-bg: color.adjust($button-success-bg, $lightness: 19.5%, $space: hsl) !default;
277+
$button-default-hover-bg: color.adjust($button-default-bg, $lightness: -3.53%, $space: hsl) !default;
278+
$button-default-focused-bg: color.adjust($button-default-bg, $lightness: -7.84%, $space: hsl) !default;
279+
$button-default-active-bg: color.adjust($button-default-focused-bg, $lightness: -7.06%, $space: hsl) !default;
280+
$button-default-selected-bg: color.adjust($button-default-focused-bg, $lightness: -6.27%, $space: hsl) !default;
281+
$button-danger-hover-bg: color.adjust($button-danger-bg, $lightness: -3.53%, $space: hsl) !default;
282+
$button-danger-focused-bg: color.adjust($button-danger-bg, $lightness: -7.84%, $space: hsl) !default;
283+
$button-danger-active-bg: color.adjust($button-danger-bg, $lightness: -7.06%, $space: hsl) !default;
284+
$button-danger-selected-bg: color.adjust($button-danger-bg, $lightness: -6.27%, $space: hsl) !default;
285+
$button-success-hover-bg: color.adjust($button-success-bg, $lightness: -3.53%, $space: hsl) !default;
286+
$button-success-focused-bg: color.adjust($button-success-bg, $lightness: -7.84%, $space: hsl) !default;
287+
$button-success-active-bg: color.adjust($button-success-bg, $lightness: -7.06%, $space: hsl) !default;
288+
$button-success-selected-bg: color.adjust($button-success-bg, $lightness: -6.27%, $space: hsl) !default;
289289
}
290290

291291
$button-disabled-text-color: $button-disabled-background !default;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ $tagbox-tag-color: color.change($base-text-color, $alpha: 0.6) !default;
1515
* $name 20. Tag background color
1616
* $type color
1717
*/
18-
$tagbox-tag-bg: null !default;
18+
$tagbox-tag-bg: $base-text-color !default;
1919
$tagbox-tag-hover-bg: null !default;
2020

2121
/**
@@ -28,20 +28,20 @@ $tagbox-tag-active-color: $base-text-color !default;
2828
* $name 40. Tag close button color
2929
* $type color
3030
*/
31-
$tagbox-tag-button-remove-bg: rgba(0, 0, 0, 0.36) !default;
31+
$tagbox-tag-button-remove-bg: $base-icon-color !default;
3232
$tagbox-tag-button-remove-color: null !default;
3333
$tagbox-tag-focused-bg: null !default;
3434
$tagbox-select-all-border-color: $base-border-color !default;
3535

3636
@if $mode == "light" {
37-
$tagbox-tag-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default;
37+
// $tagbox-tag-bg: color.adjust($base-bg, $lightness: -12%, $space: hsl) !default;
3838
$tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: -15%, $space: hsl) !default;
3939
$tagbox-tag-button-remove-color: $tagbox-tag-bg !default;
4040
$tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: -32%, $space: hsl) !default;
4141
}
4242

4343
@if $mode == "dark" {
44-
$tagbox-tag-bg: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default;
44+
// $tagbox-tag-bg: color.adjust($base-bg, $lightness: 12%, $space: hsl) !default;
4545
$tagbox-tag-hover-bg: color.adjust($base-bg, $lightness: 15%, $space: hsl) !default;
4646
$tagbox-tag-button-remove-color: color.adjust($base-bg, $lightness: 22%, $space: hsl) !default;
4747
$tagbox-tag-focused-bg: color.adjust($base-bg, $lightness: 32%, $space: hsl) !default;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,19 +56,21 @@ $texteditor-button-clear-icon-color: null !default;
5656
$texteditor-button-clear-icon-color-bg: null !default;
5757
$texteditor-invalid-focused-border-color: $base-invalid-color !default;
5858
$texteditor-invalid-faded-border-color: $base-invalid-faded-border-color !default;
59-
$texteditor-disabled-color: $base-disabled-color !default;
59+
$texteditor-disabled-color: null !default;
6060
$texteditor-input-border-radius: $base-border-radius !default;
6161
$texteditor-label-transition:
6262
font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
6363
transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
6464
top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;
6565

6666
@if $mode == "light" {
67+
$texteditor-disabled-color: rgba(0, 0, 0, 0.6) !default;
6768
$texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: 46%, $space: hsl) !default;
6869
$texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: 76%, $space: hsl) !default;
6970
}
7071

7172
@if $mode == "dark" {
73+
$texteditor-disabled-color: rgba(255, 255, 255, 0.6) !default;
7274
$texteditor-button-clear-icon-color: color.adjust($texteditor-color, $lightness: -76%, $space: hsl) !default;
7375
$texteditor-button-clear-icon-color-bg: color.adjust($texteditor-color, $lightness: -34%, $space: hsl) !default;
7476
}

0 commit comments

Comments
 (0)