diff --git a/packages/bootstrap/docs/customization-editor.md b/packages/bootstrap/docs/customization-editor.md
index 0eb4f1d9ea..965c138d42 100644
--- a/packages/bootstrap/docs/customization-editor.md
+++ b/packages/bootstrap/docs/customization-editor.md
@@ -110,7 +110,7 @@ The following table lists the available variables for customization.
| $kendo-editor-highlighted-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) |
+ if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) |
var(--kendo-color-primary-subtle, #cfe2ff) |
diff --git a/packages/bootstrap/docs/customization-gantt.md b/packages/bootstrap/docs/customization-gantt.md
index e147a4ebdf..5bfb02e758 100644
--- a/packages/bootstrap/docs/customization-gantt.md
+++ b/packages/bootstrap/docs/customization-gantt.md
@@ -170,7 +170,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-line-fill |
String |
- if($kendo-enable-color-system, k-color( on-base ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( on-base ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) |
var(--kendo-color-on-base, #212529) |
@@ -290,7 +290,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-summary-bg |
String |
- if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) |
var(--kendo-color-subtle, #596169) |
@@ -310,7 +310,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-summary-selected-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) |
var(--kendo-color-primary-subtle-active, #9ec5fe) |
@@ -400,7 +400,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-task-selected-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) |
var(--kendo-color-primary-subtle-active, #9ec5fe) |
diff --git a/packages/bootstrap/docs/customization-stepper.md b/packages/bootstrap/docs/customization-stepper.md
index 61c113c5d0..2326e04766 100644
--- a/packages/bootstrap/docs/customization-stepper.md
+++ b/packages/bootstrap/docs/customization-stepper.md
@@ -430,7 +430,7 @@ The following table lists the available variables for customization.
| $kendo-stepper-indicator-done-disabled-bg |
String |
- 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%)) |
+ 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%)) |
color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 60%, transparent) |
diff --git a/packages/bootstrap/docs/customization-switch.md b/packages/bootstrap/docs/customization-switch.md
index d4e5420036..dc108f9f5d 100644
--- a/packages/bootstrap/docs/customization-switch.md
+++ b/packages/bootstrap/docs/customization-switch.md
@@ -194,7 +194,7 @@ The following table lists the available variables for customization.
| $kendo-switch-off-track-focus-border |
String |
- if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )) |
+ if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-switch-off-track-bg, $kendo-color-primary )) |
var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md
index 20cba8d3ff..dde80a33b8 100644
--- a/packages/bootstrap/docs/customization.md
+++ b/packages/bootstrap/docs/customization.md
@@ -9086,7 +9086,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-editor-highlighted-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) |
+ if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) |
var(--kendo-color-primary-subtle, #cfe2ff) |
@@ -11549,7 +11549,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-gantt-line-fill |
String |
- if($kendo-enable-color-system, k-color( on-base ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( on-base ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) |
var(--kendo-color-on-base, #212529) |
@@ -11669,7 +11669,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-gantt-summary-bg |
String |
- if($kendo-enable-color-system, k-color( subtle ), k-color-mix( $kendo-gantt-text, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) |
var(--kendo-color-subtle, #596169) |
@@ -11689,7 +11689,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-gantt-summary-selected-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) |
var(--kendo-color-primary-subtle-active, #9ec5fe) |
@@ -11779,7 +11779,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-gantt-task-selected-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle-active ), k-color-mix( $kendo-selected-bg, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( primary-subtle-active ), color.mix( $kendo-selected-bg, $kendo-gantt-bg )) |
var(--kendo-color-primary-subtle-active, #9ec5fe) |
@@ -24491,7 +24491,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-stepper-indicator-done-disabled-bg |
String |
- 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%)) |
+ 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%)) |
color-mix(in srgb, var(--kendo-color-primary, #0d6efd) 60%, transparent) |
@@ -24965,7 +24965,7 @@ The following table lists the available variables for customizing the Bootstrap
| $kendo-switch-off-track-focus-border |
String |
- if($kendo-enable-color-system, k-color( primary-emphasis ), k-color-mix( $kendo-switch-off-track-bg, $kendo-color-primary )) |
+ if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-switch-off-track-bg, $kendo-color-primary )) |
var(--kendo-color-primary-emphasis, rgba(13, 110, 253, 0.4)) |
diff --git a/packages/classic/docs/customization-editor.md b/packages/classic/docs/customization-editor.md
index 05dc9b5b9b..ac0238e344 100644
--- a/packages/classic/docs/customization-editor.md
+++ b/packages/classic/docs/customization-editor.md
@@ -110,7 +110,7 @@ The following table lists the available variables for customization.
| $kendo-editor-highlighted-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) |
+ if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) |
var(--kendo-color-primary-subtle, #fff2eb) |
diff --git a/packages/classic/docs/customization-stepper.md b/packages/classic/docs/customization-stepper.md
index a486a9edd2..fd2347ede2 100644
--- a/packages/classic/docs/customization-stepper.md
+++ b/packages/classic/docs/customization-stepper.md
@@ -430,7 +430,7 @@ The following table lists the available variables for customization.
| $kendo-stepper-indicator-done-disabled-bg |
String |
- 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% )) |
+ 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% )) |
color-mix(in srgb, var(--kendo-color-primary, #f35800) 60%, transparent) |
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md
index 569c91f39c..38668e5553 100644
--- a/packages/classic/docs/customization.md
+++ b/packages/classic/docs/customization.md
@@ -9297,7 +9297,7 @@ The following table lists the available variables for customizing the Classic th
| $kendo-editor-highlighted-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix( $kendo-color-primary, #ffffff, 20% )) |
+ if($kendo-enable-color-system, k-color( primary-subtle ), color.mix( $kendo-color-primary, #ffffff, 20% )) |
var(--kendo-color-primary-subtle, #fff2eb) |
@@ -24872,7 +24872,7 @@ The following table lists the available variables for customizing the Classic th
| $kendo-stepper-indicator-done-disabled-bg |
String |
- 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% )) |
+ 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% )) |
color-mix(in srgb, var(--kendo-color-primary, #f35800) 60%, transparent) |
diff --git a/packages/core/docs/customization.md b/packages/core/docs/customization.md
index 736670473e..9b9aea8bd0 100644
--- a/packages/core/docs/customization.md
+++ b/packages/core/docs/customization.md
@@ -34,7 +34,7 @@ k-color-luminance($color) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L602-L608
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L603-L609
@function k-color-luminance($color) {
$red: list.nth( $_linear-channel-values, k-color-red( $color ) + 1 );
$green: list.nth( $_linear-channel-values, k-color-green( $color ) + 1 );
@@ -70,7 +70,7 @@ k-color-contrast-ratio($background, $foreground) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L619-L624
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L620-L625
@function k-color-contrast-ratio($background, $foreground) {
$backLum: k-color-luminance( $background ) + .05;
$foreLum: k-color-luminance( $foreground ) + .05;
@@ -102,7 +102,7 @@ k-is-dark($color) // => Boolean
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L631-L633
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L632-L634
@function k-is-dark($color) {
@return if( k-color-luminance( $color ) < .5, true, false );
}
@@ -131,7 +131,7 @@ k-is-light($color) // => Boolean
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L640-L642
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L641-L643
@function k-is-light($color) {
@return if( k-color-luminance( $color ) < .5, false, true );
}
@@ -170,7 +170,7 @@ k-contrast-color($background, $dark, $light, $min-ratio) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L654-L673
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L655-L674
@function k-contrast-color($background, $dark, $light, $min-ratio) {
$foregrounds: $light, $dark, #ffffff, #000000;
$max-ratio: 0;
@@ -222,7 +222,7 @@ k-generate-color-variations($name, $color, $theme) // => Map
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/color-system/_functions.import.scss#L199-L313
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/color-system/_functions.import.scss#L200-L314
@function k-generate-color-variations($name, $color, $theme) {
$result: ();
@@ -237,10 +237,10 @@ k-generate-color-variations($name, $color, $theme) // => Map
) {
$_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);
@@ -364,7 +364,7 @@ k-color($key) // => String
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/color-system/_functions.import.scss#L321-L329
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/color-system/_functions.import.scss#L322-L330
@function k-color($key) {
$_color: map.get($kendo-colors, $key);
@@ -408,7 +408,7 @@ k-color-tint($color, $level) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L211-L213
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L212-L214
@function k-color-tint($color, $level) {
@return k-color-level( $color, -$level );
}
@@ -446,7 +446,7 @@ k-color-shade($color, $level) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L224-L226
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L225-L227
@function k-color-shade($color, $level) {
@return k-color-level( $color, $level );
}
@@ -478,7 +478,7 @@ k-try-shade($color, $level) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L234-L242
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L235-L243
@function k-try-shade($color, $level) {
$_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
@@ -516,7 +516,7 @@ k-try-tint($color, $level) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L250-L258
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L251-L259
@function k-try-tint($color, $level) {
$_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
@@ -554,7 +554,7 @@ k-try-darken($color, $level) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L266-L273
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L267-L274
@function k-try-darken($color, $level) {
$_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
@@ -591,7 +591,7 @@ k-try-lighten($color, $level) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L281-L288
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L282-L289
@function k-try-lighten($color, $level) {
$_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );
@@ -634,7 +634,7 @@ k-rgba-to-mix($color, $bg) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L299-L303
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L300-L304
@function k-rgba-to-mix($color, $bg) {
$percent: k-color-alpha( $color ) * 100%;
@@ -672,9 +672,9 @@ k-color-alpha($color) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L16-L18
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L17-L19
@function k-color-alpha($color) {
- @return alpha( $color );
+ @return color.alpha( $color );
}
```
@@ -707,9 +707,9 @@ k-color-red($color) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L26-L28
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L27-L29
@function k-color-red($color) {
- @return red( $color );
+ @return math.round(color.channel( $color, "red" ));
}
```
@@ -742,9 +742,9 @@ k-color-green($color) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L36-L38
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L37-L39
@function k-color-green($color) {
- @return green( $color );
+ @return math.round(color.channel( $color, "green" ));
}
```
@@ -777,9 +777,9 @@ k-color-blue($color) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L46-L48
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L47-L49
@function k-color-blue($color) {
- @return blue( $color );
+ @return math.round(color.channel( $color, "blue" ));
}
```
@@ -812,9 +812,9 @@ k-color-hue($color) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L56-L58
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L57-L59
@function k-color-hue($color) {
- @return hue( $color );
+ @return color.channel( $color, "hue" );
}
```
@@ -847,9 +847,9 @@ k-color-saturation($color) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L66-L68
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L67-L69
@function k-color-saturation($color) {
- @return saturation( $color );
+ @return color.channel( $color, "saturation" );
}
```
@@ -882,9 +882,9 @@ k-color-lightness($color) // => Number
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L76-L78
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L77-L79
@function k-color-lightness($color) {
- @return lightness( $color );
+ @return color.channel( $color, "lightness" );
}
```
@@ -923,9 +923,9 @@ k-color-mix($color1, $color2, $weight) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L88-L90
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L89-L91
@function k-color-mix($color1, $color2, $weight) {
- @return mix( $color1, $color2, $weight );
+ @return color.mix( $color1, $color2, $weight );
}
```
@@ -961,9 +961,9 @@ k-color-darken($color, $amount) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L99-L101
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L100-L102
@function k-color-darken($color, $amount) {
- @return darken( $color, $amount );
+ @return color.adjust( $color, $lightness: - $amount );
}
```
@@ -999,9 +999,9 @@ k-color-lighten($color, $amount) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L110-L112
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L111-L113
@function k-color-lighten($color, $amount) {
- @return lighten( $color, $amount );
+ @return color.adjust( $color, $lightness: $amount );
}
```
@@ -1037,9 +1037,9 @@ k-color-adjust-hue($color, $degrees) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L121-L123
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L122-L124
@function k-color-adjust-hue($color, $degrees) {
- @return adjust-hue( $color, $degrees );
+ @return color.adjust( $color, $hue: $degrees );
}
```
@@ -1075,9 +1075,9 @@ k-color-saturate($color, $amount) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L132-L134
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L133-L135
@function k-color-saturate($color, $amount) {
- @return saturate( $color, $amount );
+ @return color.adjust( $color, $saturation: $amount );
}
```
@@ -1113,9 +1113,9 @@ k-color-desaturate($color, $amount) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L143-L145
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L144-L146
@function k-color-desaturate($color, $amount) {
- @return desaturate( $color, $amount );
+ @return color.adjust( $color, $saturation: - $amount );
}
```
@@ -1148,9 +1148,9 @@ k-color-grayscale($color) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L153-L155
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L154-L156
@function k-color-grayscale($color) {
- @return grayscale( $color );
+ @return color.grayscale( $color );
}
```
@@ -1184,9 +1184,9 @@ k-color-complement($color) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L164-L166
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L165-L167
@function k-color-complement($color) {
- @return complement( $color );
+ @return color.complement( $color );
}
```
@@ -1219,9 +1219,9 @@ k-color-invert($color) // => Color
#### Source
```scss
-// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L174-L176
+// Location https://github.com/telerik/kendo-themes/blob/develop/packages/core/scss/functions/_color.import.scss#L175-L177
@function k-color-invert($color) {
- @return invert( $color );
+ @return color.invert( $color );
}
```
diff --git a/packages/default/docs/customization-editor.md b/packages/default/docs/customization-editor.md
index 8d57dfafbc..911c67a805 100644
--- a/packages/default/docs/customization-editor.md
+++ b/packages/default/docs/customization-editor.md
@@ -110,7 +110,7 @@ The following table lists the available variables for customization.
| $kendo-editor-highlighted-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%)) |
+ if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) |
var(--kendo-color-primary-subtle, #ffeceb) |
diff --git a/packages/default/docs/customization-stepper.md b/packages/default/docs/customization-stepper.md
index 83bd186532..e70c5e62da 100644
--- a/packages/default/docs/customization-stepper.md
+++ b/packages/default/docs/customization-stepper.md
@@ -430,7 +430,7 @@ The following table lists the available variables for customization.
| $kendo-stepper-indicator-done-disabled-bg |
String |
- 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%)) |
+ 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%)) |
color-mix(in srgb, var(--kendo-color-primary, #ff6358) 60%, transparent) |
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md
index 20b48eeb92..2a6e4aa5f7 100644
--- a/packages/default/docs/customization.md
+++ b/packages/default/docs/customization.md
@@ -8846,7 +8846,7 @@ The following table lists the available variables for customizing the Default th
| $kendo-editor-highlighted-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle ), k-color-mix($kendo-color-primary, #ffffff, 20%)) |
+ if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) |
var(--kendo-color-primary-subtle, #ffeceb) |
@@ -24311,7 +24311,7 @@ The following table lists the available variables for customizing the Default th
| $kendo-stepper-indicator-done-disabled-bg |
String |
- 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%)) |
+ 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%)) |
color-mix(in srgb, var(--kendo-color-primary, #ff6358) 60%, transparent) |
diff --git a/packages/material/docs/customization-dock-manager.md b/packages/material/docs/customization-dock-manager.md
index 8e8aed62db..6067c16f89 100644
--- a/packages/material/docs/customization-dock-manager.md
+++ b/packages/material/docs/customization-dock-manager.md
@@ -310,7 +310,7 @@ The following table lists the available variables for customization.
| $kendo-dock-indicator-hover-bg |
String |
- if($kendo-enable-color-system, k-color( primary-hover ), mix( $kendo-color-white, $kendo-color-primary, 8% )) |
+ if($kendo-enable-color-system, k-color( primary-hover ), color.mix( $kendo-color-white, $kendo-color-primary, 8% )) |
var(--kendo-color-primary-hover, #3a4ba7) |
diff --git a/packages/material/docs/customization-editor.md b/packages/material/docs/customization-editor.md
index fd7b7338ed..57a9371f16 100644
--- a/packages/material/docs/customization-editor.md
+++ b/packages/material/docs/customization-editor.md
@@ -110,7 +110,7 @@ The following table lists the available variables for customization.
| $kendo-editor-highlighted-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle ), mix($kendo-color-primary, #ffffff, 20%)) |
+ if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) |
var(--kendo-color-primary-subtle, #d1d5ee) |
diff --git a/packages/material/docs/customization-gantt.md b/packages/material/docs/customization-gantt.md
index 81d060f659..573dd13bfc 100644
--- a/packages/material/docs/customization-gantt.md
+++ b/packages/material/docs/customization-gantt.md
@@ -170,7 +170,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-line-fill |
String |
- if($kendo-enable-color-system, k-color( subtle ), mix( $kendo-gantt-text, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) |
var(--kendo-color-subtle, #757575) |
@@ -290,7 +290,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-summary-bg |
String |
- if($kendo-enable-color-system, k-color( primary-emphasis ), mix( $kendo-color-primary, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-color-primary, $kendo-gantt-bg )) |
var(--kendo-color-primary-emphasis, #97a0d7) |
@@ -310,7 +310,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-summary-selected-bg |
String |
- if($kendo-enable-color-system, k-color( secondary-subtle-active ), mix( $kendo-color-secondary, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( secondary-subtle-active ), color.mix( $kendo-color-secondary, $kendo-gantt-bg )) |
var(--kendo-color-secondary-subtle-active, #f79bb3) |
@@ -360,7 +360,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-task-bg |
String |
- if($kendo-enable-color-system, k-color( primary-emphasis ), mix( $kendo-color-primary, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-color-primary, $kendo-gantt-bg )) |
var(--kendo-color-primary-emphasis, #97a0d7) |
@@ -400,7 +400,7 @@ The following table lists the available variables for customization.
| $kendo-gantt-task-selected-bg |
String |
- if($kendo-enable-color-system, k-color( secondary-subtle-active ), mix( $kendo-color-secondary, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( secondary-subtle-active ), color.mix( $kendo-color-secondary, $kendo-gantt-bg )) |
var(--kendo-color-secondary-subtle-active, #f79bb3) |
diff --git a/packages/material/docs/customization-input.md b/packages/material/docs/customization-input.md
index 7966bea2ab..34dda3fb53 100644
--- a/packages/material/docs/customization-input.md
+++ b/packages/material/docs/customization-input.md
@@ -425,7 +425,7 @@ The following table lists the available variables for customization.
| $kendo-input-disabled-border |
String |
- if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, math.div( alpha( $kendo-component-border ), 2 ) )) |
+ if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, math.div( color.alpha( $kendo-component-border ), 2 ) )) |
color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 3%, transparent) |
diff --git a/packages/material/docs/customization-menu.md b/packages/material/docs/customization-menu.md
index 04a133334a..5f2820e021 100644
--- a/packages/material/docs/customization-menu.md
+++ b/packages/material/docs/customization-menu.md
@@ -200,7 +200,7 @@ The following table lists the available variables for customization.
| $kendo-menu-item-hover-bg |
String |
- if($kendo-enable-color-system, k-color( base-hover ), rgba( $kendo-menu-text, $kendo-flat-button-hover-opacity * alpha( $kendo-menu-text ) )) |
+ if($kendo-enable-color-system, k-color( base-hover ), rgba( $kendo-menu-text, $kendo-flat-button-hover-opacity * color.alpha( $kendo-menu-text ) )) |
var(--kendo-color-base-hover, #ebebeb) |
@@ -240,7 +240,7 @@ The following table lists the available variables for customization.
| $kendo-menu-item-active-bg |
String |
- if($kendo-enable-color-system, k-color( base-active ), rgba( $kendo-menu-text, $kendo-flat-button-active-opacity * alpha( $kendo-menu-text ) )) |
+ if($kendo-enable-color-system, k-color( base-active ), rgba( $kendo-menu-text, $kendo-flat-button-active-opacity * color.alpha( $kendo-menu-text ) )) |
var(--kendo-color-base-active, #d6d6d6) |
diff --git a/packages/material/docs/customization-pivotgrid.md b/packages/material/docs/customization-pivotgrid.md
index 60d68d9529..e202422c81 100644
--- a/packages/material/docs/customization-pivotgrid.md
+++ b/packages/material/docs/customization-pivotgrid.md
@@ -260,7 +260,7 @@ The following table lists the available variables for customization.
| $kendo-pivotgrid-hover-bg |
String |
- if($kendo-enable-color-system, k-color( base-hover ), darken( $kendo-pivotgrid-bg, 7% )) |
+ if($kendo-enable-color-system, k-color( base-hover ), color.adjust( $kendo-pivotgrid-bg, $lightness: - 7% )) |
var(--kendo-color-base-hover, #ebebeb) |
diff --git a/packages/material/docs/customization-stepper.md b/packages/material/docs/customization-stepper.md
index c2fd955c5b..4d259faf73 100644
--- a/packages/material/docs/customization-stepper.md
+++ b/packages/material/docs/customization-stepper.md
@@ -430,7 +430,7 @@ The following table lists the available variables for customization.
| $kendo-stepper-indicator-done-disabled-bg |
String |
- if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) |
+ 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%)) |
color-mix(in srgb, var(--kendo-color-primary, #3f51b5) 60%, transparent) |
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md
index 3e0264a41a..8b2363885d 100644
--- a/packages/material/docs/customization.md
+++ b/packages/material/docs/customization.md
@@ -8116,7 +8116,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-dock-indicator-hover-bg |
String |
- if($kendo-enable-color-system, k-color( primary-hover ), mix( $kendo-color-white, $kendo-color-primary, 8% )) |
+ if($kendo-enable-color-system, k-color( primary-hover ), color.mix( $kendo-color-white, $kendo-color-primary, 8% )) |
var(--kendo-color-primary-hover, #3a4ba7) |
@@ -8866,7 +8866,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-editor-highlighted-bg |
String |
- if($kendo-enable-color-system, k-color( primary-subtle ), mix($kendo-color-primary, #ffffff, 20%)) |
+ if($kendo-enable-color-system, k-color( primary-subtle ), color.mix($kendo-color-primary, #ffffff, 20%)) |
var(--kendo-color-primary-subtle, #d1d5ee) |
@@ -11279,7 +11279,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-gantt-line-fill |
String |
- if($kendo-enable-color-system, k-color( subtle ), mix( $kendo-gantt-text, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( subtle ), color.mix( $kendo-gantt-text, $kendo-gantt-bg )) |
var(--kendo-color-subtle, #757575) |
@@ -11399,7 +11399,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-gantt-summary-bg |
String |
- if($kendo-enable-color-system, k-color( primary-emphasis ), mix( $kendo-color-primary, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-color-primary, $kendo-gantt-bg )) |
var(--kendo-color-primary-emphasis, #97a0d7) |
@@ -11419,7 +11419,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-gantt-summary-selected-bg |
String |
- if($kendo-enable-color-system, k-color( secondary-subtle-active ), mix( $kendo-color-secondary, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( secondary-subtle-active ), color.mix( $kendo-color-secondary, $kendo-gantt-bg )) |
var(--kendo-color-secondary-subtle-active, #f79bb3) |
@@ -11469,7 +11469,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-gantt-task-bg |
String |
- if($kendo-enable-color-system, k-color( primary-emphasis ), mix( $kendo-color-primary, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( primary-emphasis ), color.mix( $kendo-color-primary, $kendo-gantt-bg )) |
var(--kendo-color-primary-emphasis, #97a0d7) |
@@ -11509,7 +11509,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-gantt-task-selected-bg |
String |
- if($kendo-enable-color-system, k-color( secondary-subtle-active ), mix( $kendo-color-secondary, $kendo-gantt-bg )) |
+ if($kendo-enable-color-system, k-color( secondary-subtle-active ), color.mix( $kendo-color-secondary, $kendo-gantt-bg )) |
var(--kendo-color-secondary-subtle-active, #f79bb3) |
@@ -12854,7 +12854,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-input-disabled-border |
String |
- if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, math.div( alpha( $kendo-component-border ), 2 ) )) |
+ if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, math.div( color.alpha( $kendo-component-border ), 2 ) )) |
color-mix(in srgb, var(--kendo-color-on-app-surface, #212121) 3%, transparent) |
@@ -15034,7 +15034,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-menu-item-hover-bg |
String |
- if($kendo-enable-color-system, k-color( base-hover ), rgba( $kendo-menu-text, $kendo-flat-button-hover-opacity * alpha( $kendo-menu-text ) )) |
+ if($kendo-enable-color-system, k-color( base-hover ), rgba( $kendo-menu-text, $kendo-flat-button-hover-opacity * color.alpha( $kendo-menu-text ) )) |
var(--kendo-color-base-hover, #ebebeb) |
@@ -15074,7 +15074,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-menu-item-active-bg |
String |
- if($kendo-enable-color-system, k-color( base-active ), rgba( $kendo-menu-text, $kendo-flat-button-active-opacity * alpha( $kendo-menu-text ) )) |
+ if($kendo-enable-color-system, k-color( base-active ), rgba( $kendo-menu-text, $kendo-flat-button-active-opacity * color.alpha( $kendo-menu-text ) )) |
var(--kendo-color-base-active, #d6d6d6) |
@@ -19116,7 +19116,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-pivotgrid-hover-bg |
String |
- if($kendo-enable-color-system, k-color( base-hover ), darken( $kendo-pivotgrid-bg, 7% )) |
+ if($kendo-enable-color-system, k-color( base-hover ), color.adjust( $kendo-pivotgrid-bg, $lightness: - 7% )) |
var(--kendo-color-base-hover, #ebebeb) |
@@ -24302,7 +24302,7 @@ The following table lists the available variables for customizing the Material t
| $kendo-stepper-indicator-done-disabled-bg |
String |
- if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60%)) |
+ 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%)) |
color-mix(in srgb, var(--kendo-color-primary, #3f51b5) 60%, transparent) |