diff --git a/packages/bootstrap/scss/dataviz/_variables.scss b/packages/bootstrap/scss/dataviz/_variables.scss index 2d443f28ea1..2cccc7af8fa 100644 --- 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 index cdbd098e064..afa97bf5f00 100644 --- 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 index bd87fd22571..9eb8dc4a537 100644 --- 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 index 3162c9af32f..2c1ae15fa40 100644 --- 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 index 5228a5694e2..8afc1d1f865 100644 --- 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 index 517cbab8bab..452f0aabc85 100644 --- 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; diff --git a/packages/classic/scss/dataviz/_variables.scss b/packages/classic/scss/dataviz/_variables.scss index 02aba2c5cee..772129ec350 100644 --- a/packages/classic/scss/dataviz/_variables.scss +++ b/packages/classic/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 ), #ff6358) !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 ), #ffd246) !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 ), #78d237) !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 ), #28b4c8) !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 ), #2d73f5) !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 ), #aa46be) !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/classic/scss/editor/_variables.scss b/packages/classic/scss/editor/_variables.scss index b1c77b40401..459808fc45b 100644 --- a/packages/classic/scss/editor/_variables.scss +++ b/packages/classic/scss/editor/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:color"; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; @use "../input/_variables.scss" as *; @@ -33,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/classic/scss/grid/_variables.scss b/packages/classic/scss/grid/_variables.scss index 8603a629656..6774f2150a9 100644 --- a/packages/classic/scss/grid/_variables.scss +++ b/packages/classic/scss/grid/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:color"; @use "sass:math"; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; @@ -262,7 +263,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-hover-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, #ffffff, 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, #ffffff, 25%)) !default; $kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-try-shade( $kendo-grid-sticky-selected-bg, .5 )) !default; // Must be a solid color diff --git a/packages/classic/scss/stepper/_variables.scss b/packages/classic/scss/stepper/_variables.scss index b7fef212924..ff770ce8559 100644 --- a/packages/classic/scss/stepper/_variables.scss +++ b/packages/classic/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-legacy( $kendo-stepper-indicator-done-bg )) !default; diff --git a/packages/core/scss/color-system/_functions.import.scss b/packages/core/scss/color-system/_functions.import.scss index 31c5345d875..579da870129 100644 --- a/packages/core/scss/color-system/_functions.import.scss +++ b/packages/core/scss/color-system/_functions.import.scss @@ -1,3 +1,4 @@ +@use "sass:color"; @use "sass:map"; @use "sass:list"; @use "sass:string"; @@ -210,10 +211,10 @@ ) { $_variations: ( #{$name}: $color, - #{$name}-bold: k-color-mix(black, $color, 25%), - #{$name}-bolder: k-color-mix(black, $color, 50%), - #{$name}-subtle: k-color-mix(white, $color, 25%), - #{$name}-subtler: k-color-mix(white, $color, 50%), + #{$name}-bold: color.mix(black, $color, 25%), + #{$name}-bolder: color.mix(black, $color, 50%), + #{$name}-subtle: color.mix(white, $color, 25%), + #{$name}-subtler: color.mix(white, $color, 50%), ); $result: map.merge($result, $_variations); diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss index ff0f8596be4..396ae2bbd1d 100644 --- a/packages/default/scss/dataviz/_variables.scss +++ b/packages/default/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 ), #ff6358) !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 ), #ffe162) !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 ), #4cd180) !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 ), #4b5ffa) !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 ), #ac58ff) !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 ), #ff5892) !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/default/scss/editor/_variables.scss b/packages/default/scss/editor/_variables.scss index 88081c1cc01..fe83ed85985 100644 --- a/packages/default/scss/editor/_variables.scss +++ b/packages/default/scss/editor/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:color"; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; @use "../input/_variables.scss" as *; @@ -33,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/default/scss/grid/_variables.scss b/packages/default/scss/grid/_variables.scss index 52cdc637fe5..d17033801aa 100644 --- a/packages/default/scss/grid/_variables.scss +++ b/packages/default/scss/grid/_variables.scss @@ -1,3 +1,4 @@ +@use "sass:color"; @use "sass:math"; @use "../core/_index.scss" as *; @use "../core/functions/index.import.scss" as *; @@ -262,7 +263,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-hover-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, #ffffff, 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, #ffffff, 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/default/scss/stepper/_variables.scss b/packages/default/scss/stepper/_variables.scss index 95d9346b1d6..f8d75d8b6f3 100644 --- a/packages/default/scss/stepper/_variables.scss +++ b/packages/default/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-legacy( $kendo-stepper-indicator-done-bg )) !default;