@progress/kendo-theme-default 7.1.0-dev.1 → 7.1.0-dev.10

package/scss/button/_variables.scss

@@ -105,28 +105,28 @@ $kendo-button-sizes: (
 /// @group button
 $kendo-button-theme-colors: k-map-merge(
     $kendo-theme-colors,
-    ( "base": #f5f5f5 )
+    ( "base": if($kendo-enable-color-system, k-color( base ), #f5f5f5) )
 ) !default;
 
 /// The base background of the Button.
 /// @group button
-$kendo-button-bg: #f5f5f5 !default;
+$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #f5f5f5) !default;
 /// The base text color of the Button.
 /// @group button
-$kendo-button-text: #424242 !default;
+$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), #424242) !default;
 /// The base border color of the Button.
 /// @group button
-$kendo-button-border: rgba( black, .08 ) !default;
+$kendo-button-border: if($kendo-enable-color-system, k-color( border ), rgba( black, .08 )) !default;
 /// The base background gradient of the Button.
 /// @group button
-$kendo-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$kendo-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default;
 /// The base shadow of the Button.
 /// @group button
 $kendo-button-shadow: null !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
+$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-button-bg, .5 )) !default;
 /// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
@@ -142,7 +142,7 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: k-try-shade( $kendo-button-bg, 1.5 ) !default;
+$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-button-bg, 1.5 )) !default;
 /// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
@@ -161,7 +161,7 @@ $kendo-button-active-shadow: null !default;
 $kendo-button-selected-bg: $kendo-color-primary !default;
 /// The text color of the selected Button.
 /// @group button
-$kendo-button-selected-text: k-contrast-legacy( $kendo-button-selected-bg ) !default;
+$kendo-button-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-button-selected-bg )) !default;
 /// The border color of the selected Button.
 /// @group button
 $kendo-button-selected-border: $kendo-button-selected-bg !default;
@@ -186,7 +186,7 @@ $kendo-button-focus-border: null !default;
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: 0 0 0 2px rgba( $kendo-button-border, .08 ) !default;
+$kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 )) !default;
 
 /// The base background of the disabled Button.
 /// @group button
@@ -205,7 +205,7 @@ $kendo-button-disabled-gradient: null !default;
 $kendo-button-disabled-shadow: null !default;
 
 // Solid Button
-$kendo-solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$kendo-solid-button-gradient: if($kendo-enable-color-system, null, (rgba( black, 0 ), rgba( black, .02 ))) !default;
 $kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: 0 !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;

package/scss/calendar/_theme.scss

@@ -159,7 +159,7 @@
     .k-calendar { // stylelint-disable-line
 
         $kendo-calendar-range-gap: 1px !default;
-        $kendo-calendar-range-bg: rgba( $kendo-calendar-cell-selected-bg, .25 );
+        $kendo-calendar-range-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-calendar-cell-selected-bg, .25 ));
         $kendo-calendar-range-split-size: 5px !default;
 
         .k-range-start,

package/scss/card/_layout.scss

@@ -191,6 +191,10 @@
         gap: $kendo-card-actions-gap;
     }
 
+    .k-card-horizontal .k-actions-horizontal {
+        width: auto;
+    }
+
     // List
     .k-card-list {
         display: flex;

package/scss/card/_theme.scss

@@ -64,9 +64,9 @@
     // Card theme colors
     @each $name, $color in $kendo-theme-colors {
         .k-card-#{$name} {
-            background-color: k-color-tint($color, 10);
-            color: k-color-shade($color, 6);
-            border-color: k-color-tint($color, 9);
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10));
+            color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6));
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9));
 
             .k-card-subtitle {
                 color: inherit;

package/scss/chat/_variables.scss

@@ -57,7 +57,7 @@ $kendo-chat-bubble-hover-shadow: k-elevation(2) !default;
 $kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
 
 $kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
-$kendo-chat-alt-bubble-text: k-contrast-legacy( $kendo-chat-alt-bubble-bg ) !default;
+$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) !default;
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
 $kendo-chat-alt-bubble-shadow: k-elevation(1) !default;
 $kendo-chat-alt-bubble-hover-shadow: k-elevation(2) !default;

package/scss/checkbox/_variables.scss

@@ -81,7 +81,7 @@ $kendo-checkbox-hover-border: null !default;
 $kendo-checkbox-checked-bg: $kendo-color-primary !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: k-contrast-legacy( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -107,7 +107,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
 $kendo-checkbox-focus-checked-border: null !default;
 /// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $kendo-color-primary, .3 ) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox

package/scss/chip/_theme.scss

@@ -28,24 +28,24 @@
                 }
             } @else {
                 @include fill(
-                    k-try-shade( $color, 65% ),
-                    k-try-tint( $color, 80% ),
-                    k-try-tint( $color, 25% ),
+                    if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )),
+                    if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )),
+                    if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )),
                     $kendo-chip-solid-gradient
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px rgba( $color, .16 ) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), rgba( $color, .16 )) );
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: k-try-tint($color, 65% ) );
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) );
                 }
 
                 &.k-selected {
-                    @include fill( $bg: k-try-tint( $color, 50% ) );
+                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) );
                 }
             }
         }
@@ -83,54 +83,56 @@
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
-                    if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
-                    if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                    if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
+                    if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
+                    if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
-                        $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
+                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
-                        $bg: if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color)
+                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
+                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
                     );
                 }
             } @else {
                 @include fill(
-                    k-try-shade( $color, 25% ),
-                    if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ),
-                    k-try-shade( $color, 25% )
+                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )),
+                    if($kendo-enable-color-system, k-color( app-surface ), if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
+                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% ))
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
-                        $bg: k-try-shade( $color, 25% )
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
+                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )),
+                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% ))
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
-                        $bg: k-try-shade( $color, 25% )
+                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
+                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )),
+                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% ))
                     );
                 }
             }

package/scss/chip/_variables.scss

@@ -92,7 +92,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the Chip.
 /// @group chip
-$kendo-chip-base-bg: $kendo-button-bg !default;
+$kendo-chip-base-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg) !default;
 
 /// The theme colors map for the Chip.
 /// @group chip
@@ -115,7 +115,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
 $kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of the solid Chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
 /// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -129,7 +129,7 @@ $kendo-chip-solid-focus-text: null !default;
 
 /// The base background color of the hovered solid Chip.
 /// @group chip
-$kendo-chip-solid-hover-bg: $kendo-button-hover-bg !default;
+$kendo-chip-solid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg) !default;
 /// The base text color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
@@ -152,14 +152,14 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default;
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of the outline Chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-text: k-contrast-legacy( $kendo-chip-outline-hover-bg ) !default;
+$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip

package/scss/common/_indicators.scss

@@ -1,11 +1,9 @@
 @include exports( "common/indicators/current-time" ) {
 
-    $kendo-current-time-width: 1px !default;
     $kendo-current-time-color: #ff0000 !default;
 
     // Layout
     .k-current-time {
-        width: $kendo-current-time-width;
         position: absolute;
 
         &.k-current-time-arrow-left,

package/scss/core/_index.scss

@@ -3,8 +3,14 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Variables
 @import "../_variables.scss";
 
+// Color System
+@import "./color-system/_swatch.scss";
+
 @import "@progress/kendo-theme-core/scss/index.import.scss";
 
+// Backward compatibility
+@import "./color-system/_swatch-legacy.scss";
+
 // Expose
 @include exports("kendo-core-styles") {
     @include kendo-core--styles();

package/scss/core/color-system/_palettes.scss

@@ -0,0 +1,256 @@
+$_default-palette-gray: (
+    white: #ffffff,
+    1: #fafafa,
+    2: #f5f5f5,
+    3: #ebebeb,
+    4: #e0e0e0,
+    5: #d6d6d6,
+    6: #c2c2c2,
+    7: #adadad,
+    8: #999999,
+    9: #808080,
+    10: #666666,
+    11: #525252,
+    12: #3d3d3d,
+    13: #292929,
+    14: #1f1f1f,
+    15: #141414,
+    black: #000000,
+);
+
+$_default-palette-coral: (
+    1: #fff6f5,
+    2: #ffeceb,
+    3: #ffdedb,
+    4: #ffc8c4,
+    5: #ffb1ac,
+    6: #ff9d97,
+    7: #ff8a82,
+    8: #ff766d,
+    9: #ff6358,
+    10: #ea5a51,
+    11: #d45349,
+    12: #bf4a42,
+    13: #a33f38,
+    14: #80322c,
+    15: #5c201c,
+);
+
+$_default-palette-sky-blue: (
+    1: #ebf8fe,
+    2: #d8f1fd,
+    3: #c5eafc,
+    4: #a3dffb,
+    5: #81d4fA,
+    6: #61c9f9,
+    7: #42bff7,
+    8: #22b3f5,
+    9: #03a9f4,
+    10: #039ae0,
+    11: #028ccb,
+    12: #027fb7,
+    13: #026999,
+    14: #02557a,
+    15: #023f5c,
+);
+
+$_default-palette-green: (
+    1: #edf8e9,
+    2: #dcf0d3,
+    3: #cbe9bf,
+    4: #b7e1a5,
+    5: #9bda80,
+    6: #81d15f,
+    7: #69c740,
+    8: #4ebe1f,
+    9: #37b400,
+    10: #32a500,
+    11: #2d9600,
+    12: #298700,
+    13: #227100,
+    14: #1c5a00,
+    15: #1c5a00,
+);
+
+$_default-palette-blue: (
+    1: #e9f0fd,
+    2: #d2e2fb,
+    3: #bdd4f8,
+    4: #9ec0f6,
+    5: #80acf4,
+    6: #6098f2,
+    7: #4082ef,
+    8: #206eec,
+    9: #0058e9,
+    10: #0052d6,
+    11: #004ac2,
+    12: #0042af,
+    13: #003892,
+    14: #002c75,
+    15: #002259,
+);
+
+$_default-palette-yellow: (
+    1: #fffae9,
+    2: #fff4d3,
+    3: #ffeebd,
+    4: #ffe79e,
+    5: #ffe080,
+    6: #ffd760,
+    7: #ffd040,
+    8: #ffc720,
+    9: #ffc000,
+    10: #eaaf00,
+    11: #d49f00,
+    12: #bf9000,
+    13: #a07800,
+    14: #806000,
+    15: #5e4700,
+);
+
+$_default-palette-red: (
+    1: #feeeed,
+    2: #fcddda,
+    3: #fbc8c3,
+    4: #faaaa2,
+    5: #f98b80,
+    6: #f76f60,
+    7: #f65140,
+    8: #f43520,
+    9: #f31700,
+    10: #df1600,
+    11: #ca1400,
+    12: #b61100,
+    13: #980f00,
+    14: #7a0c00,
+    15: #7a0c00,
+);
+
+$_default-palette-lemon-yellow: (
+    1: #fffcf1,
+    2: #fffae2,
+    3: #fff7d4,
+    4: #fff4c2,
+    5: #fff0b1,
+    6: #ffed9d,
+    7: #ffe989,
+    8: #ffe676,
+    9: #ffe162,
+    10: #ead05a,
+    11: #d4bc52,
+    12: #bfa94a,
+    13: #a3913f,
+    14: #807131,
+    15: #5c5223,
+);
+
+$_default-palette-spring-green: (
+    1: #effaf3,
+    2: #e0f6e8,
+    3: #d1f1dd,
+    4: #c0edd1,
+    5: #a6e8c0,
+    6: #8fe2af,
+    7: #79dda0,
+    8: #62d78f,
+    9: #4cd180,
+    10: #46c074,
+    11: #3fae6a,
+    12: #399d60,
+    13: #2f834f,
+    14: #266940,
+    15: #1c4f30,
+);
+
+$_default-palette-royal-blue: (
+    1: #f0f2ff,
+    2: #e1e4fe,
+    3: #d2d7fe,
+    4: #bbc3fd,
+    5: #a5affd,
+    6: #8e9bfc,
+    7: #7887fb,
+    8: #6173fb,
+    9: #4b5ffa,
+    10: #4558e5,
+    11: #3f50d1,
+    12: #3847bc,
+    13: #2f3c9d,
+    14: #26307d,
+    15: #1c245e,
+);
+
+$_default-palette-lavender-purple: (
+    1: #f7f0ff,
+    2: #f0e0ff,
+    3: #e8d1ff,
+    4: #dfbfff,
+    5: #d6acff,
+    6: #cc97ff,
+    7: #c182ff,
+    8: #b76dff,
+    9: #ac58ff,
+    10: #9e51ea,
+    11: #8f49d4,
+    12: #8142bf,
+    13: #6b37a0,
+    14: #562c80,
+    15: #3f205e,
+);
+
+$_default-palette-flamingo-pink: (
+    1: #fff0f5,
+    2: #ffe1eb,
+    3: #ffd1e1,
+    4: #ffbfd6,
+    5: #ffacc9,
+    6: #ff97bb,
+    7: #ff82ae,
+    8: #ff6da0,
+    9: #ff5892,
+    10: #ea5186,
+    11: #d4497a,
+    12: #bf426e,
+    13: #a0375c,
+    14: #802c49,
+    15: #5e2036,
+);
+
+
+// stylelint-disable scss/no-global-function-names
+$kendo-palette-gray: $_default-palette-gray !default;
+$kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
+
+$kendo-palette-coral: $_default-palette-coral !default;
+$kendo-palette-coral: map-merge($_default-palette-coral, $kendo-palette-coral);
+
+$kendo-palette-sky-blue: $_default-palette-sky-blue !default;
+$kendo-palette-sky-blue: map-merge($_default-palette-sky-blue, $kendo-palette-sky-blue);
+
+$kendo-palette-green: $_default-palette-green !default;
+$kendo-palette-green: map-merge($_default-palette-green, $kendo-palette-green);
+
+$kendo-palette-blue: $_default-palette-blue !default;
+$kendo-palette-blue: map-merge($_default-palette-blue, $kendo-palette-blue);
+
+$kendo-palette-yellow: $_default-palette-yellow !default;
+$kendo-palette-yellow: map-merge($_default-palette-yellow, $kendo-palette-yellow);
+
+$kendo-palette-red: $_default-palette-red !default;
+$kendo-palette-red: map-merge($_default-palette-red, $kendo-palette-red);
+
+$kendo-palette-lemon-yellow: $_default-palette-lemon-yellow !default;
+$kendo-palette-lemon-yellow: map-merge($_default-palette-lemon-yellow, $kendo-palette-lemon-yellow);
+
+$kendo-palette-spring-green: $_default-palette-spring-green !default;
+$kendo-palette-spring-green: map-merge($_default-palette-spring-green, $kendo-palette-spring-green);
+
+$kendo-palette-royal-blue: $_default-palette-royal-blue !default;
+$kendo-palette-royal-blue: map-merge($_default-palette-royal-blue, $kendo-palette-royal-blue);
+
+$kendo-palette-lavender-purple: $_default-palette-lavender-purple !default;
+$kendo-palette-lavender-purple: map-merge($_default-palette-lavender-purple, $kendo-palette-lavender-purple);
+
+$kendo-palette-flamingo-pink: $_default-palette-flamingo-pink !default;
+$kendo-palette-flamingo-pink: map-merge($_default-palette-flamingo-pink, $kendo-palette-flamingo-pink);
+// stylelint-enable scss/no-global-function-names

package/scss/core/color-system/_swatch-legacy.scss

@@ -0,0 +1,62 @@
+@if ($kendo-enable-color-system) {
+    $kendo-color-primary: k-color( primary );
+    $kendo-color-primary-contrast: k-color( on-primary );
+    $kendo-color-secondary: k-color( secondary );
+    $kendo-color-tertiary: k-color( tertiary );
+    $kendo-color-info: k-color( info );
+    $kendo-color-success: k-color( success );
+    $kendo-color-warning: k-color( warning );
+    $kendo-color-error: k-color( error );
+    $kendo-color-dark: k-color( dark );
+    $kendo-color-light: k-color( light );
+    $kendo-color-inverse: $kendo-color-dark;
+    $kendo-body-bg: k-color( app-surface );
+    $kendo-body-text: k-color( on-app-surface );
+    $kendo-subtle-text: k-color( subtle );
+    $kendo-app-bg: k-color( surface );
+    $kendo-app-text: $kendo-body-text;
+    $kendo-app-border: k-color( border );
+    $kendo-link-text: $kendo-color-primary;
+    $kendo-link-hover-text: k-color( primary-hover );
+    $kendo-component-bg: $kendo-body-bg;
+    $kendo-component-text: $kendo-body-text;
+    $kendo-component-border: $kendo-app-border;
+    $kendo-base-bg: k-color( surface );
+    $kendo-base-text: $kendo-body-text;
+    $kendo-base-border: $kendo-app-border;
+    $kendo-base-gradient: null;
+    $kendo-hover-bg: k-color( base-hover );
+    $kendo-hover-text: $kendo-base-text;
+    $kendo-hover-border: $kendo-base-border;
+    $kendo-hover-gradient: null;
+    $kendo-selected-bg: $kendo-color-primary;
+    $kendo-selected-text: $kendo-color-primary-contrast;
+    $kendo-selected-border: $kendo-base-border;
+    $kendo-selected-gradient: $kendo-base-gradient;
+    $kendo-selected-hover-bg: k-color( primary-hover );
+    $kendo-selected-hover-text: $kendo-selected-text;
+    $kendo-selected-hover-border: $kendo-base-border;
+    $kendo-selected-hover-gradient: $kendo-base-gradient;
+    $kendo-disabled-text: k-color( on-app-surface );
+    $kendo-component-header-bg: $kendo-base-bg;
+    $kendo-component-header-text: $kendo-base-text;
+    $kendo-component-header-border: $kendo-base-border;
+    $kendo-component-header-gradient: null;
+    $kendo-invalid-bg: null;
+    $kendo-invalid-text: $kendo-color-error;
+    $kendo-invalid-border: $kendo-color-error;
+    $kendo-invalid-shadow: null;
+
+    $kendo-theme-colors: (
+        "primary": $kendo-color-primary,
+        "secondary": $kendo-color-secondary,
+        "tertiary": $kendo-color-tertiary,
+        "info": $kendo-color-info,
+        "success": $kendo-color-success,
+        "warning": $kendo-color-warning,
+        "error": $kendo-color-error,
+        "dark": $kendo-color-dark,
+        "light": $kendo-color-light,
+        "inverse": $kendo-color-inverse,
+    );
+}