chore: unify color mix usage

telerik · Nov 22, 2024 · d7fbb2d · d7fbb2d
1 parent 5c40178
commit d7fbb2d
Show file tree

Hide file tree

Showing 15 changed files with 105 additions and 91 deletions.
diff --git a/packages/bootstrap/scss/dataviz/_variables.scss b/packages/bootstrap/scss/dataviz/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
 
@@ -6,50 +7,50 @@
 /// The first base series color and its light and dark shades.
 /// @group charts
 $kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), $kendo-color-primary) !default;
-$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-color-mix( black, $kendo-series-a, 25% )) !default;
-$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-color-mix( black, $kendo-series-a, 50% )) !default;
-$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-color-mix( white, $kendo-series-a, 25% )) !default;
-$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-color-mix( white, $kendo-series-a, 50% )) !default;
+$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), color.mix( black, $kendo-series-a, 25% )) !default;
+$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), color.mix( black, $kendo-series-a, 50% )) !default;
+$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), color.mix( white, $kendo-series-a, 25% )) !default;
+$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), color.mix( white, $kendo-series-a, 50% )) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
 $kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), $kendo-color-tertiary) !default;
-$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-color-mix( black, $kendo-series-b, 25% )) !default;
-$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-color-mix( black, $kendo-series-b, 50% )) !default;
-$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-color-mix( white, $kendo-series-b, 25% )) !default;
-$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-color-mix( white, $kendo-series-b, 50% )) !default;
+$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), color.mix( black, $kendo-series-b, 25% )) !default;
+$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), color.mix( black, $kendo-series-b, 50% )) !default;
+$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), color.mix( white, $kendo-series-b, 25% )) !default;
+$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), color.mix( white, $kendo-series-b, 50% )) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
 $kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), #20c997) !default;
-$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-color-mix( black, $kendo-series-c, 25% )) !default;
-$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-color-mix( black, $kendo-series-c, 50% )) !default;
-$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-color-mix( white, $kendo-series-c, 25% )) !default;
-$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-color-mix( white, $kendo-series-c, 50% )) !default;
+$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), color.mix( black, $kendo-series-c, 25% )) !default;
+$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), color.mix( black, $kendo-series-c, 50% )) !default;
+$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), color.mix( white, $kendo-series-c, 25% )) !default;
+$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), color.mix( white, $kendo-series-c, 50% )) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), $kendo-color-success) !default;
-$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-color-mix( black, $kendo-series-d, 25% )) !default;
-$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-color-mix( black, $kendo-series-d, 50% )) !default;
-$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-color-mix( white, $kendo-series-d, 25% )) !default;
-$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-color-mix( white, $kendo-series-d, 50% )) !default;
+$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), color.mix( black, $kendo-series-d, 25% )) !default;
+$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), color.mix( black, $kendo-series-d, 50% )) !default;
+$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), color.mix( white, $kendo-series-d, 25% )) !default;
+$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), color.mix( white, $kendo-series-d, 50% )) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), $kendo-color-warning) !default;
-$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-color-mix( black, $kendo-series-e, 25% )) !default;
-$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-color-mix( black, $kendo-series-e, 50% )) !default;
-$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-color-mix( white, $kendo-series-e, 25% )) !default;
-$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-color-mix( white, $kendo-series-e, 50% )) !default;
+$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), color.mix( black, $kendo-series-e, 25% )) !default;
+$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), color.mix( black, $kendo-series-e, 50% )) !default;
+$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), color.mix( white, $kendo-series-e, 25% )) !default;
+$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), color.mix( white, $kendo-series-e, 50% )) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), $kendo-color-error) !default;
-$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-color-mix( black, $kendo-series-f, 25% )) !default;
-$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-color-mix( black, $kendo-series-f, 50% )) !default;
-$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-color-mix( white, $kendo-series-f, 25% )) !default;
-$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-color-mix( white, $kendo-series-f, 50% )) !default;
+$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), color.mix( black, $kendo-series-f, 25% )) !default;
+$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), color.mix( black, $kendo-series-f, 50% )) !default;
+$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), color.mix( white, $kendo-series-f, 25% )) !default;
+$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), color.mix( white, $kendo-series-f, 50% )) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker

diff --git a/packages/bootstrap/scss/editor/_variables.scss b/packages/bootstrap/scss/editor/_variables.scss
@@ -1,4 +1,4 @@
-// @use "sass:map";
+@use "sass:color";
 @use "../core/_index.scss" as *;
 @use "../input/_variables.scss" as *;
 @use "../core/functions/index.import.scss" as *;
@@ -34,7 +34,7 @@ $kendo-editor-selected-bg: $kendo-color-primary !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) !default;
+$kendo-editor-highlighted-bg: if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor

diff --git a/packages/bootstrap/scss/gantt/_variables.scss b/packages/bootstrap/scss/gantt/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
@@ -53,7 +54,7 @@ $kendo-gantt-nonwork-border: null !default;
 $kendo-gantt-line-size: 2px !default;
 /// The background fill color of the Gantt connecting lines.
 /// @group gantt
-$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
+$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
 /// The background fill of the selected Gantt connecting lines.
 /// @group gantt
 $kendo-gantt-line-selected-fill: $kendo-selected-bg !default;
@@ -92,13 +93,13 @@ $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
 
 /// The background color of the Gantt summary.
 /// @group gantt
-$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
+$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) !default;
 /// The background color of the Gantt summary progress.
 /// @group gantt
 $kendo-gantt-summary-progress-bg: $kendo-gantt-text !default;
 /// The background color of the selected Gantt summary.
 /// @group gantt
-$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;
+$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
 /// The background color of the selected Gantt summary progress.
 /// @group gantt
 $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 ),
 $kendo-gantt-task-progress-bg: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-gantt-bg ), #ced4da, #6c757d )) !default;
 /// The background color of selected the Gantt task.
 /// @group gantt
-$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;
+$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) !default;
 /// The text color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-text: $kendo-selected-text !default;

diff --git a/packages/bootstrap/scss/grid/_variables.scss b/packages/bootstrap/scss/grid/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../table/_variables.scss" as *;
@@ -263,7 +264,7 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
 
-$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;
+$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;
 $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;
 
 // Must be a solid color

diff --git a/packages/bootstrap/scss/stepper/_variables.scss b/packages/bootstrap/scss/stepper/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
 
@@ -136,7 +137,7 @@ $kendo-stepper-indicator-done-hover-border: null !default;
 
 /// The background color of the Stepper's disabled done indicator.
 /// @group stepper
-$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;
+$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;
 /// The text color of the Stepper's disabled done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-stepper-indicator-done-bg )) !default;

diff --git a/packages/bootstrap/scss/switch/_variables.scss b/packages/bootstrap/scss/switch/_variables.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
 
@@ -65,7 +66,7 @@ $kendo-switch-off-track-focus-bg: null !default;
 $kendo-switch-off-track-focus-text: null !default;
 /// The border color of the track when the focused Switch is not checked.
 /// @group switch
-$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;
+$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;
 /// The background gradient of the track when the focused Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-focus-gradient: null !default;