@progress/kendo-theme-material 7.3.0-dev.1 → 8.0.0-dev.0

package/dist/all.scss

@@ -771,7 +771,7 @@ $kendo-color-level-step: 8% !default;
                 #{$name}-active: k-color-darken( $color, 10% ),
                 #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
                 #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
-                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-color( $color )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),
                 #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
             );
 
@@ -2982,7 +2982,7 @@ $palettes: (
 // #endregion
 
 // Config
-$kendo-enable-color-system: false !default;
+$kendo-enable-color-system: true !default;
 
 // Colors
 $_default-colors: (
@@ -6766,7 +6766,7 @@ $kendo-zindex-loading: 100 !default;
     $kendo-app-border: k-color( border );
     $kendo-link-text: $kendo-color-secondary;
     $kendo-link-hover-text: k-color( secondary-hover );
-    $kendo-component-bg: $kendo-body-bg;
+    $kendo-component-bg: k-color( surface-alt );
     $kendo-component-text: $kendo-body-text;
     $kendo-component-border: $kendo-app-border;
     $kendo-base-bg: $kendo-body-bg;
@@ -20492,10 +20492,10 @@ $kendo-button-theme-colors: k-map-merge(
 
 /// The base background of the Button.
 /// @group button
-$kendo-button-bg: $kendo-base-bg !default;
+$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), $kendo-base-bg) !default;
 /// The base text color of the Button.
 /// @group button
-$kendo-button-text: $kendo-base-text !default;
+$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), $kendo-base-text) !default;
 /// The base border color of the Button.
 /// @group button
 $kendo-button-border: $kendo-button-bg !default;
@@ -20572,10 +20572,10 @@ $kendo-button-focus-shadow: null !default;
 
 /// The base background color of the disabled Button.
 /// @group button
-$kendo-button-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-try-shade( $kendo-body-bg, 12% )) !default;
+$kendo-button-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-try-shade( $kendo-body-bg, 12% )) !default;
 /// The base text color of the disabled Button.
 /// @group button
-$kendo-button-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), $kendo-disabled-text) !default;
+$kendo-button-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), $kendo-disabled-text) !default;
 /// The base border color of the disabled Button.
 /// @group button
 $kendo-button-disabled-border: if($kendo-enable-color-system, transparent, $kendo-button-disabled-bg) !default;
@@ -23262,8 +23262,8 @@ $_kendo-module-meta: (
         .k-button-solid-#{$name} {
             @include box-shadow( $kendo-button-shadow );
             color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color )) );
-            background-color: if( $name == "base", $kendo-button-bg, $color );
-            border-color: if( $name == "base", $kendo-button-bg, $color );
+            background-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
+            border-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
 
             // Hover state
             &:hover,
@@ -25261,7 +25261,7 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-text: rgba( $kendo-component-border, .12 ) !default;
+$kendo-input-separator-text: $kendo-component-border !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
@@ -38833,8 +38833,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
             border-color: if($kendo-enable-color-system, transparent, k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
-            background-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
-            color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), k-color-tint( $kendo-disabled-text, 4));
+            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-try-tint( k-try-shade( $kendo-body-bg, 12% ), 5));
+            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-color-tint( $kendo-disabled-text, 4));
             opacity: 1;
         }
     }
@@ -42293,7 +42293,7 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
         .k-bottom-nav-flat-#{$name} {
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
-                @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .06 ), rgba($kendo-bottom-nav-flat-text, .05)) );
+                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) );
             }
         }
     }
@@ -44322,7 +44322,7 @@ $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 $kendo-tabstrip-item-dragging-shadow: $box-shadow-depth-3 !default;
 
 $kendo-tabstrip-item-disabled-bg: null !default;
-$kendo-tabstrip-item-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), k-map-get( $theme, disabled-text )) !default;
+$kendo-tabstrip-item-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-map-get( $theme, disabled-text )) !default;
 $kendo-tabstrip-item-disabled-border: null !default;
 $kendo-tabstrip-item-disabled-gradient: null !default;
 $kendo-tabstrip-item-disabled-opacity: 1 !default;
@@ -59701,7 +59701,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         }
 
         &.k-event-inverse {
-            color: if($kendo-enable-color-system, k-color( on-app-surface ), k-contrast-legacy( $kendo-scheduler-event-text ));
+            color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text ));
         }
 
         &.k-event-ongoing {
@@ -61043,10 +61043,10 @@ $kendo-timeline-track-arrow-height: 36px !default;
 
 /// The background color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .09 ), k-true-mix(#000000, $kendo-body-bg, 8%)) !default;
+$kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-true-mix(#000000, $kendo-body-bg, 8%)) !default;
 /// The text color of the disabled Timeline track arrow.
 /// @group timeline
-$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, rgba ), .32 ), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default;
+$kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-true-mix($kendo-button-text, $kendo-body-bg, 65%)) !default;
 /// The border color of the disabled Timeline track arrow.
 /// @group timeline
 $kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, transparent, k-true-mix($kendo-button-border, $kendo-body-bg, 65%)) !default;

package/dist/material-aqua-dark.scss

@@ -1,5 +1,141 @@
-$primary-palette-name: cyan;
-$secondary-palette-name: amber;
-$theme-type: dark;
-$adjust-contrast: true;
+$kendo-enable-color-system: true;
+
+$kendo-colors: (
+	app-surface: #121212,
+	on-app-surface: #ffffff,
+	subtle: rgba(255, 255, 255, 0.7),
+	surface: #252525,
+	surface-alt: #121212,
+	border: rgba(white, 0.12),
+	border-alt: rgba(white, 0.15),
+	base-subtle: #3c3c3c,
+	base-subtle-hover: #454545,
+	base-subtle-active: #565656,
+	base: #212121,
+	base-hover: #333333,
+	base-active: #565656,
+	base-emphasis: #686868,
+	base-on-subtle: #ffffff,
+	on-base: #ffffff,
+	base-on-surface: #ffffff,
+	primary-subtle: #00262a,
+	primary-subtle-hover: #00424a,
+	primary-subtle-active: #005e6a,
+	primary: #00bcd4,
+	primary-hover: #14c1d7,
+	primary-active: #3dccde,
+	primary-emphasis: #008d9f,
+	primary-on-subtle: #a6e8f0,
+	on-primary: black,
+	primary-on-surface: #80deea,
+	secondary-subtle: #332701,
+	secondary-subtle-hover: #594402,
+	secondary-subtle-active: #806104,
+	secondary: #ffc107,
+	secondary-hover: #ffc61b,
+	secondary-active: #ffd043,
+	secondary-emphasis: #bf9105,
+	secondary-on-subtle: #ffe9a8,
+	on-secondary: black,
+	secondary-on-surface: #ffe083,
+	tertiary-subtle: #001e1b,
+	tertiary-subtle-hover: #003530,
+	tertiary-subtle-active: #004b44,
+	tertiary: #009688,
+	tertiary-hover: #149e92,
+	tertiary-active: #3dafa5,
+	tertiary-emphasis: #007166,
+	tertiary-on-subtle: #a6dad5,
+	on-tertiary: black,
+	tertiary-on-surface: #80cbc4,
+	info-subtle: #00122f,
+	info-subtle-hover: #001f52,
+	info-subtle-active: #002c75,
+	info: #0058e9,
+	info-hover: #1465eb,
+	info-active: #3d80ee,
+	info-emphasis: #0042af,
+	info-on-subtle: #a6c5f7,
+	on-info: white,
+	info-on-surface: #80acf4,
+	success-subtle: #0b2400,
+	success-subtle-hover: #133f00,
+	success-subtle-active: #1c5a00,
+	success: #37b400,
+	success-hover: #47ba14,
+	success-active: #67c63d,
+	success-emphasis: #298700,
+	success-on-subtle: #b9e5a6,
+	on-success: black,
+	success-on-surface: #9bda80,
+	warning-subtle: #332600,
+	warning-subtle-hover: #594300,
+	warning-subtle-active: #806000,
+	warning: #ffc000,
+	warning-hover: #ffc514,
+	warning-active: #ffcf3d,
+	warning-emphasis: #bf9000,
+	warning-on-subtle: #ffe9a6,
+	on-warning: black,
+	warning-on-surface: #ffe080,
+	error-subtle: #310500,
+	error-subtle-hover: #550800,
+	error-subtle-active: #7a0c00,
+	error: #f31700,
+	error-hover: #f42a14,
+	error-active: #f64f3d,
+	error-emphasis: #b61100,
+	error-on-subtle: #fbaea6,
+	on-error: black,
+	error-on-surface: #f98b80,
+	inverse-subtle: #fafafa,
+	inverse-subtle-hover: #f5f5f5,
+	inverse-subtle-active: #eeeeee,
+	inverse: #f5f5f5,
+	inverse-hover: #ebebeb,
+	inverse-active: #d6d6d6,
+	inverse-emphasis: #e0e0e0,
+	inverse-on-subtle: #212121,
+	on-inverse: black,
+	inverse-on-surface: #616161,
+	series-a: #9c27b0,
+	series-a-bold: #751d84,
+	series-a-bolder: #4e1458,
+	series-a-subtle: #b55dc4,
+	series-a-subtler: #ce93d8,
+	series-b: #2196f3,
+	series-b-bold: #1971b6,
+	series-b-bolder: #114b7a,
+	series-b-subtle: #59b0f6,
+	series-b-subtler: #90cbf9,
+	series-c: #009688,
+	series-c-bold: #007166,
+	series-c-bolder: #004b44,
+	series-c-subtle: #40b0a6,
+	series-c-subtler: #80cbc4,
+	series-d: #ffeb3b,
+	series-d-bold: #bfb02c,
+	series-d-bolder: #80761e,
+	series-d-subtle: #fff06c,
+	series-d-subtler: #fff59d,
+	series-e: #f44336,
+	series-e-bold: #b73229,
+	series-e-bolder: #7a221b,
+	series-e-subtle: #f77268,
+	series-e-subtler: #faa19b,
+	series-f: #4caf50,
+	series-f-bold: #39833c,
+	series-f-bolder: #265828,
+	series-f-subtle: #79c37c,
+	series-f-subtler: #a6d7a8,
+);
+
+@if not ($kendo-enable-color-system) {
+	$primary-palette-name: cyan !global;
+	$secondary-palette-name: amber !global;
+	$theme-type: dark !global;
+	$adjust-contrast: true !global;
+};
+
+
 @import "all.scss";

package/dist/material-arctic.scss

@@ -1,5 +1,131 @@
-$primary-palette-name: blue;
-$secondary-palette-name: teal;
-$theme-type: light;
-$adjust-contrast: true;
+$kendo-enable-color-system: true;
+
+$kendo-colors: (
+	app-surface: #ffffff,
+	on-app-surface: rgba(0, 0, 0, 0.87),
+	subtle: rgba(0, 0, 0, 0.54),
+	surface: #f5f5f5,
+	surface-alt: #ffffff,
+	border: rgba(black, 0.12),
+	border-alt: rgba(black, 0.15),
+	base-subtle: #e0e0e0,
+	base-subtle-hover: #d6d6d6,
+	base-subtle-active: #c2c2c2,
+	base: #ffffff,
+	base-hover: whitesmoke,
+	base-active: #e0e0e0,
+	base-emphasis: #adadad,
+	base-on-subtle: rgba(0, 0, 0, 0.87),
+	on-base: rgba(0, 0, 0, 0.87),
+	base-on-surface: rgba(0, 0, 0, 0.87),
+	primary-subtle: #d0e0f2,
+	primary-subtle-hover: #adc9e9,
+	primary-subtle-active: #8ab2e0,
+	primary: #1565c0,
+	primary-hover: #1461b8,
+	primary-active: #1259a9,
+	primary-emphasis: #508cd0,
+	primary-on-subtle: #072343,
+	on-primary: white,
+	primary-on-surface: #0b3360,
+	secondary-subtle: #cce1de,
+	secondary-subtle-hover: #a6cbc6,
+	secondary-subtle-active: #80b4ae,
+	secondary: #00695c,
+	secondary-hover: #006558,
+	secondary-active: #005c51,
+	secondary-emphasis: #408f85,
+	secondary-on-subtle: #002520,
+	on-secondary: white,
+	secondary-on-surface: #00352e,
+	tertiary-subtle: #cce1de,
+	tertiary-subtle-hover: #a6cbc6,
+	tertiary-subtle-active: #80b4ae,
+	tertiary: #00695c,
+	tertiary-hover: #006558,
+	tertiary-active: #005c51,
+	tertiary-emphasis: #408f85,
+	tertiary-on-subtle: #002520,
+	on-tertiary: white,
+	tertiary-on-surface: #00352e,
+	info-subtle: #ccdefb,
+	info-subtle-hover: #a6c5f7,
+	info-subtle-active: #80acf4,
+	info: #0058e9,
+	info-hover: #0054e0,
+	info-active: #004dcd,
+	info-emphasis: #4082ef,
+	info-on-subtle: #001f52,
+	on-info: white,
+	info-on-surface: #002c75,
+	success-subtle: #d7f0cc,
+	success-subtle-hover: #b9e5a6,
+	success-subtle-active: #9bda80,
+	success: #37b400,
+	success-hover: #35ad00,
+	success-active: #309e00,
+	success-emphasis: #69c740,
+	success-on-subtle: #133f00,
+	on-success: black,
+	success-on-surface: #1c5a00,
+	warning-subtle: #fff2cc,
+	warning-subtle-hover: #ffe9a6,
+	warning-subtle-active: #ffe080,
+	warning: #ffc000,
+	warning-hover: #f5b800,
+	warning-active: #e0a900,
+	warning-emphasis: #ffd040,
+	warning-on-subtle: #594300,
+	on-warning: black,
+	warning-on-surface: #806000,
+	error-subtle: #fdd1cc,
+	error-subtle-hover: #fbaea6,
+	error-subtle-active: #f98b80,
+	error: #f31700,
+	error-hover: #e91600,
+	error-active: #d61400,
+	error-emphasis: #f65140,
+	error-on-subtle: #550800,
+	on-error: black,
+	error-on-surface: #7a0c00,
+	series-a: #9c27b0,
+	series-a-bold: #751d84,
+	series-a-bolder: #4e1458,
+	series-a-subtle: #b55dc4,
+	series-a-subtler: #ce93d8,
+	series-b: #2196f3,
+	series-b-bold: #1971b6,
+	series-b-bolder: #114b7a,
+	series-b-subtle: #59b0f6,
+	series-b-subtler: #90cbf9,
+	series-c: #009688,
+	series-c-bold: #007166,
+	series-c-bolder: #004b44,
+	series-c-subtle: #40b0a6,
+	series-c-subtler: #80cbc4,
+	series-d: #ffeb3b,
+	series-d-bold: #bfb02c,
+	series-d-bolder: #80761e,
+	series-d-subtle: #fff06c,
+	series-d-subtler: #fff59d,
+	series-e: #f44336,
+	series-e-bold: #b73229,
+	series-e-bolder: #7a221b,
+	series-e-subtle: #f77268,
+	series-e-subtler: #faa19b,
+	series-f: #4caf50,
+	series-f-bold: #39833c,
+	series-f-bolder: #265828,
+	series-f-subtle: #79c37c,
+	series-f-subtler: #a6d7a8,
+);
+
+@if not ($kendo-enable-color-system) {
+	$primary-palette-name: blue !global;
+	$secondary-palette-name: teal !global;
+	$theme-type: light !global;
+	$adjust-contrast: true !global;
+};
+
+
 @import "all.scss";

package/dist/material-burnt-teal.scss

@@ -1,5 +1,131 @@
-$primary-palette-name: teal;
-$secondary-palette-name: orange;
-$theme-type: light;
-$adjust-contrast: true;
+$kendo-enable-color-system: true;
+
+$kendo-colors: (
+	app-surface: #ffffff,
+	on-app-surface: rgba(0, 0, 0, 0.87),
+	subtle: rgba(0, 0, 0, 0.54),
+	surface: #f5f5f5,
+	surface-alt: #ffffff,
+	border: rgba(black, 0.12),
+	border-alt: rgba(black, 0.15),
+	base-subtle: #e0e0e0,
+	base-subtle-hover: #d6d6d6,
+	base-subtle-active: #c2c2c2,
+	base: #ffffff,
+	base-hover: whitesmoke,
+	base-active: #e0e0e0,
+	base-emphasis: #adadad,
+	base-on-subtle: rgba(0, 0, 0, 0.87),
+	on-base: rgba(0, 0, 0, 0.87),
+	base-on-surface: rgba(0, 0, 0, 0.87),
+	primary-subtle: #cce1de,
+	primary-subtle-hover: #a6cbc6,
+	primary-subtle-active: #80b4ae,
+	primary: #00695c,
+	primary-hover: #006558,
+	primary-active: #005c51,
+	primary-emphasis: #408f85,
+	primary-on-subtle: #002520,
+	on-primary: white,
+	primary-on-surface: #00352e,
+	secondary-subtle: #fce2cc,
+	secondary-subtle-hover: #f9cca6,
+	secondary-subtle-active: #f7b680,
+	secondary: #ef6c00,
+	secondary-hover: #e56800,
+	secondary-active: #d25f00,
+	secondary-emphasis: #f39140,
+	secondary-on-subtle: #542600,
+	on-secondary: black,
+	secondary-on-surface: #783600,
+	tertiary-subtle: #cce1de,
+	tertiary-subtle-hover: #a6cbc6,
+	tertiary-subtle-active: #80b4ae,
+	tertiary: #00695c,
+	tertiary-hover: #006558,
+	tertiary-active: #005c51,
+	tertiary-emphasis: #408f85,
+	tertiary-on-subtle: #002520,
+	on-tertiary: white,
+	tertiary-on-surface: #00352e,
+	info-subtle: #ccdefb,
+	info-subtle-hover: #a6c5f7,
+	info-subtle-active: #80acf4,
+	info: #0058e9,
+	info-hover: #0054e0,
+	info-active: #004dcd,
+	info-emphasis: #4082ef,
+	info-on-subtle: #001f52,
+	on-info: white,
+	info-on-surface: #002c75,
+	success-subtle: #d7f0cc,
+	success-subtle-hover: #b9e5a6,
+	success-subtle-active: #9bda80,
+	success: #37b400,
+	success-hover: #35ad00,
+	success-active: #309e00,
+	success-emphasis: #69c740,
+	success-on-subtle: #133f00,
+	on-success: black,
+	success-on-surface: #1c5a00,
+	warning-subtle: #fff2cc,
+	warning-subtle-hover: #ffe9a6,
+	warning-subtle-active: #ffe080,
+	warning: #ffc000,
+	warning-hover: #f5b800,
+	warning-active: #e0a900,
+	warning-emphasis: #ffd040,
+	warning-on-subtle: #594300,
+	on-warning: black,
+	warning-on-surface: #806000,
+	error-subtle: #fdd1cc,
+	error-subtle-hover: #fbaea6,
+	error-subtle-active: #f98b80,
+	error: #f31700,
+	error-hover: #e91600,
+	error-active: #d61400,
+	error-emphasis: #f65140,
+	error-on-subtle: #550800,
+	on-error: black,
+	error-on-surface: #7a0c00,
+	series-a: #9c27b0,
+	series-a-bold: #751d84,
+	series-a-bolder: #4e1458,
+	series-a-subtle: #b55dc4,
+	series-a-subtler: #ce93d8,
+	series-b: #2196f3,
+	series-b-bold: #1971b6,
+	series-b-bolder: #114b7a,
+	series-b-subtle: #59b0f6,
+	series-b-subtler: #90cbf9,
+	series-c: #009688,
+	series-c-bold: #007166,
+	series-c-bolder: #004b44,
+	series-c-subtle: #40b0a6,
+	series-c-subtler: #80cbc4,
+	series-d: #ffeb3b,
+	series-d-bold: #bfb02c,
+	series-d-bolder: #80761e,
+	series-d-subtle: #fff06c,
+	series-d-subtler: #fff59d,
+	series-e: #f44336,
+	series-e-bold: #b73229,
+	series-e-bolder: #7a221b,
+	series-e-subtle: #f77268,
+	series-e-subtler: #faa19b,
+	series-f: #4caf50,
+	series-f-bold: #39833c,
+	series-f-bolder: #265828,
+	series-f-subtle: #79c37c,
+	series-f-subtler: #a6d7a8,
+);
+
+@if not ($kendo-enable-color-system) {
+	$primary-palette-name: teal !global;
+	$secondary-palette-name: orange !global;
+	$theme-type: light !global;
+	$adjust-contrast: true !global;
+};
+
+
 @import "all.scss";

package/dist/material-dataviz-v4.scss

@@ -1,7 +1,46 @@
-$kendo-series-a: #3f51b5;
-$kendo-series-b: #2196f3;
-$kendo-series-c: #43a047;
-$kendo-series-d: #ffc107;
-$kendo-series-e: #ff5722;
-$kendo-series-f: #e91e63;
+$kendo-enable-color-system: true;
+
+$kendo-colors: (
+	series-a: #3f51b5,
+	series-a-bold: #2f3d88,
+	series-a-bolder: #20295b,
+	series-a-subtle: #6f7dc8,
+	series-a-subtler: #9fa8da,
+	series-b: #2196f3,
+	series-b-bold: #1971b6,
+	series-b-bolder: #114b7a,
+	series-b-subtle: #59b0f6,
+	series-b-subtler: #90cbf9,
+	series-c: #43a047,
+	series-c-bold: #327835,
+	series-c-bolder: #225024,
+	series-c-subtle: #72b875,
+	series-c-subtler: #a1d0a3,
+	series-d: #ffc107,
+	series-d-bold: #bf9105,
+	series-d-bolder: #806104,
+	series-d-subtle: #ffd145,
+	series-d-subtler: #ffe083,
+	series-e: #ff5722,
+	series-e-bold: #bf411a,
+	series-e-bolder: #802c11,
+	series-e-subtle: #ff8159,
+	series-e-subtler: #ffab91,
+	series-f: #e91e63,
+	series-f-bold: #af174a,
+	series-f-bolder: #750f32,
+	series-f-subtle: #ef568a,
+	series-f-subtler: #f48fb1,
+);
+
+@if not ($kendo-enable-color-system) {
+	$kendo-series-a: #3f51b5 !global;
+	$kendo-series-b: #2196f3 !global;
+	$kendo-series-c: #43a047 !global;
+	$kendo-series-d: #ffc107 !global;
+	$kendo-series-e: #ff5722 !global;
+	$kendo-series-f: #e91e63 !global;
+};
+
+
 @import "all.scss";