Skip to content

Commit 3920615

Browse files
epetrowepetrow
committed
chore: unify color mix usage
1 parent 4e54a40 commit 3920615

File tree

15 files changed

+105
-91
lines changed

15 files changed

+105
-91
lines changed

‎packages/bootstrap/scss/dataviz/_variables.scss

+25-24
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "../core/_index.scss" as *;
23
@use "../core/functions/index.import.scss" as *;
34

@@ -6,50 +7,50 @@
67
/// The first base series color and its light and dark shades.
78
/// @group charts
89
$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), $kendo-color-primary) !default;
9-
$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix( black, $kendo-series-a, 25% )) !default;
10-
$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix( black, $kendo-series-a, 50% )) !default;
11-
$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix( white, $kendo-series-a, 25% )) !default;
12-
$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-color-mix( white, $kendo-series-a, 50% )) !default;
10+
$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), color.mix( black, $kendo-series-a, 25% )) !default;
11+
$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), color.mix( black, $kendo-series-a, 50% )) !default;
12+
$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), color.mix( white, $kendo-series-a, 25% )) !default;
13+
$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), color.mix( white, $kendo-series-a, 50% )) !default;
1314

1415
/// The second base series color and its light and dark shades.
1516
/// @group charts
1617
$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), $kendo-color-tertiary) !default;
17-
$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix( black, $kendo-series-b, 25% )) !default;
18-
$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix( black, $kendo-series-b, 50% )) !default;
19-
$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix( white, $kendo-series-b, 25% )) !default;
20-
$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-color-mix( white, $kendo-series-b, 50% )) !default;
18+
$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), color.mix( black, $kendo-series-b, 25% )) !default;
19+
$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), color.mix( black, $kendo-series-b, 50% )) !default;
20+
$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), color.mix( white, $kendo-series-b, 25% )) !default;
21+
$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), color.mix( white, $kendo-series-b, 50% )) !default;
2122

2223
/// The third base series color and its light and dark shades.
2324
/// @group charts
2425
$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #20c997) !default;
25-
$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix( black, $kendo-series-c, 25% )) !default;
26-
$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix( black, $kendo-series-c, 50% )) !default;
27-
$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix( white, $kendo-series-c, 25% )) !default;
28-
$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-color-mix( white, $kendo-series-c, 50% )) !default;
26+
$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), color.mix( black, $kendo-series-c, 25% )) !default;
27+
$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), color.mix( black, $kendo-series-c, 50% )) !default;
28+
$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), color.mix( white, $kendo-series-c, 25% )) !default;
29+
$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), color.mix( white, $kendo-series-c, 50% )) !default;
2930

3031
/// The fourth base series color and its light and dark shades.
3132
/// @group charts
3233
$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), $kendo-color-success) !default;
33-
$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix( black, $kendo-series-d, 25% )) !default;
34-
$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix( black, $kendo-series-d, 50% )) !default;
35-
$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix( white, $kendo-series-d, 25% )) !default;
36-
$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-color-mix( white, $kendo-series-d, 50% )) !default;
34+
$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), color.mix( black, $kendo-series-d, 25% )) !default;
35+
$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), color.mix( black, $kendo-series-d, 50% )) !default;
36+
$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), color.mix( white, $kendo-series-d, 25% )) !default;
37+
$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), color.mix( white, $kendo-series-d, 50% )) !default;
3738

3839
/// The fifth base series color and its light and dark shades.
3940
/// @group charts
4041
$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), $kendo-color-warning) !default;
41-
$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix( black, $kendo-series-e, 25% )) !default;
42-
$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix( black, $kendo-series-e, 50% )) !default;
43-
$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix( white, $kendo-series-e, 25% )) !default;
44-
$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-color-mix( white, $kendo-series-e, 50% )) !default;
42+
$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), color.mix( black, $kendo-series-e, 25% )) !default;
43+
$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), color.mix( black, $kendo-series-e, 50% )) !default;
44+
$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), color.mix( white, $kendo-series-e, 25% )) !default;
45+
$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), color.mix( white, $kendo-series-e, 50% )) !default;
4546

4647
/// The sixth base series color and its light and dark shades.
4748
/// @group charts
4849
$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), $kendo-color-error) !default;
49-
$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix( black, $kendo-series-f, 25% )) !default;
50-
$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix( black, $kendo-series-f, 50% )) !default;
51-
$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix( white, $kendo-series-f, 25% )) !default;
52-
$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-color-mix( white, $kendo-series-f, 50% )) !default;
50+
$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), color.mix( black, $kendo-series-f, 25% )) !default;
51+
$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), color.mix( black, $kendo-series-f, 50% )) !default;
52+
$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), color.mix( white, $kendo-series-f, 25% )) !default;
53+
$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), color.mix( white, $kendo-series-f, 50% )) !default;
5354

5455
/// The series colors in order:
5556
/// base, light, dark, lighter, darker

‎packages/bootstrap/scss/editor/_variables.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// @use "sass:map";
1+
@use "sass:color";
22
@use "../core/_index.scss" as *;
33
@use "../input/_variables.scss" as *;
44
@use "../core/functions/index.import.scss" as *;
@@ -34,7 +34,7 @@ $kendo-editor-selected-bg: $kendo-color-primary !default;
3434

3535
/// The highlighted background color of the Editor.
3636
/// @group editor
37-
$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) !default;
37+
$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) !default;
3838

3939
/// The horizontal margin of the Editor's export tool icon.
4040
/// @group editor

‎packages/bootstrap/scss/gantt/_variables.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "sass:math";
23
@use "../core/_index.scss" as *;
34
@use "../core/functions/index.import.scss" as *;
@@ -53,7 +54,7 @@ $kendo-gantt-nonwork-border: null !default;
5354
$kendo-gantt-line-size: 2px !default;
5455
/// The background fill color of the Gantt connecting lines.
5556
/// @group gantt
56-
$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
57+
$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
5758
/// The background fill of the selected Gantt connecting lines.
5859
/// @group gantt
5960
$kendo-gantt-line-selected-fill: $kendo-selected-bg !default;
@@ -92,13 +93,13 @@ $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
9293

9394
/// The background color of the Gantt summary.
9495
/// @group gantt
95-
$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
96+
$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
9697
/// The background color of the Gantt summary progress.
9798
/// @group gantt
9899
$kendo-gantt-summary-progress-bg: $kendo-gantt-text !default;
99100
/// The background color of the selected Gantt summary.
100101
/// @group gantt
101-
$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
102+
$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
102103
/// The background color of the selected Gantt summary progress.
103104
/// @group gantt
104105
$kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
@@ -126,7 +127,7 @@ $kendo-gantt-task-border: if($kendo-enable-color-system, k-color( border-alt ),
126127
$kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), #ced4da, #6c757d )) !default;
127128
/// The background color of selected the Gantt task.
128129
/// @group gantt
129-
$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
130+
$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
130131
/// The text color of the selected Gantt task.
131132
/// @group gantt
132133
$kendo-gantt-task-selected-text: $kendo-selected-text !default;

‎packages/bootstrap/scss/grid/_variables.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "sass:math";
23
@use "../core/_index.scss" as *;
34
@use "../table/_variables.scss" as *;
@@ -263,7 +264,7 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
263264
$kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
264265
$kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
265266

266-
$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-color-mix( $kendo-selected-bg, $kendo-grid-bg, 25% )) !default;
267+
$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), color.mix( $kendo-selected-bg, $kendo-grid-bg, 25% )) !default;
267268
$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade( $kendo-grid-sticky-selected-bg, .4 )) !default;
268269

269270
// Must be a solid color

‎packages/bootstrap/scss/stepper/_variables.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "../core/_index.scss" as *;
23
@use "../core/functions/index.import.scss" as *;
34

@@ -136,7 +137,7 @@ $kendo-stepper-indicator-done-hover-border: null !default;
136137

137138
/// The background color of the Stepper's disabled done indicator.
138139
/// @group stepper
139-
$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default;
140+
$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), color.mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) !default;
140141
/// The text color of the Stepper's disabled done indicator.
141142
/// @group stepper
142143
$kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg )) !default;

‎packages/bootstrap/scss/switch/_variables.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:color";
12
@use "../core/_index.scss" as *;
23
@use "../core/functions/index.import.scss" as *;
34

@@ -65,7 +66,7 @@ $kendo-switch-off-track-focus-bg: null !default;
6566
$kendo-switch-off-track-focus-text: null !default;
6667
/// The border color of the track when the focused Switch is not checked.
6768
/// @group switch
68-
$kendo-switch-off-track-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )) !default;
69+
$kendo-switch-off-track-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-switch-off-track-bg, $kendo-color-primary )) !default;
6970
/// The background gradient of the track when the focused Switch is not checked.
7071
/// @group switch
7172
$kendo-switch-off-track-focus-gradient: null !default;

0 commit comments

Comments
 (0)