@progress/kendo-theme-classic 9.1.1-dev.2 → 10.0.0-dev.0

package/scss/core/border-radii/index.import.scss

@@ -1 +1,50 @@
-@import "@progress/kendo-theme-core/scss/border-radii/index.import.scss";
+@use "sass:map";
+@use "../spacing/index.import.scss" as *;
+
+/// The none border radius used across the Components.
+/// @group radii
+$kendo-border-radius-none: map.get($kendo-spacing, 0) !default;
+/// The extra small border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xs: map.get($kendo-spacing, 1px) !default;
+/// The small border radius used across the Components.
+/// @group radii
+$kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
+/// The medium border radius used across the Components.
+/// @group radii
+$kendo-border-radius-md: map.get($kendo-spacing, 1) !default;
+/// The large border radius used across the Components.
+/// @group radii
+$kendo-border-radius-lg: map.get($kendo-spacing, 1.5) !default;
+/// The extra large border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xl: map.get($kendo-spacing, 2) !default;
+/// The third largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xxl: map.get($kendo-spacing, 3) !default;
+/// The second largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xxxl: map.get($kendo-spacing, 4) !default;
+/// The largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-full: 9999px !default;
+
+
+$_default-border-radii: (
+    none: $kendo-border-radius-none,
+    xs: $kendo-border-radius-xs,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    xl: $kendo-border-radius-xl,
+    xxl: $kendo-border-radius-xxl,
+    xxxl: $kendo-border-radius-xxxl,
+    full: $kendo-border-radius-full
+
+) !default;
+
+$kendo-border-radii: $_default-border-radii !default;
+
+/// The global radii Map.
+/// @group radii
+$kendo-border-radii: map.merge($_default-border-radii, $kendo-border-radii);

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

@@ -1,5 +1,7 @@
+@use "sass:map";
+
 $_default-palette-ash-gray: (
-    white: #ffffff,
+    "white": #ffffff,
     1: #fafafa,
     2: #f0f0f0,
     3: #ebebeb,
@@ -15,7 +17,7 @@ $_default-palette-ash-gray: (
     13: #404040,
     14: #333333,
     15: #272727,
-    black: #000000,
+    "black": #000000,
 );
 
 $_default-palette-tangerine-orange: (
@@ -239,65 +241,65 @@ $_default-palette-orchid-purple: (
 /// The Ash Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
 /// @group palette
 $kendo-palette-ash-gray: $_default-palette-ash-gray !default;
-$kendo-palette-ash-gray: map-merge($_default-palette-ash-gray, $kendo-palette-ash-gray);
+$kendo-palette-ash-gray: map.merge($_default-palette-ash-gray, $kendo-palette-ash-gray);
 
 /// The Tangerine Orange Palette provides colors to the Primary variable group.
 /// @group palette
 $kendo-palette-tangerine-orange: $_default-palette-tangerine-orange !default;
-$kendo-palette-tangerine-orange: map-merge($_default-palette-tangerine-orange, $kendo-palette-tangerine-orange);
+$kendo-palette-tangerine-orange: map.merge($_default-palette-tangerine-orange, $kendo-palette-tangerine-orange);
 
 /// The Dodger Blue Palette provides colors to the Tertiary variable group.
 /// @group palette
 $kendo-palette-dodger-blue: $_default-palette-dodger-blue !default;
-$kendo-palette-dodger-blue: map-merge($_default-palette-dodger-blue, $kendo-palette-dodger-blue);
+$kendo-palette-dodger-blue: map.merge($_default-palette-dodger-blue, $kendo-palette-dodger-blue);
 
 /// The Grass Green Palette provides colors to the Success variable group.
 /// @group palette
 $kendo-palette-grass-green: $_default-palette-grass-green !default;
-$kendo-palette-grass-green: map-merge($_default-palette-grass-green, $kendo-palette-grass-green);
+$kendo-palette-grass-green: map.merge($_default-palette-grass-green, $kendo-palette-grass-green);
 
 /// The Lake Blue Palette provides colors to the Info variable group.
 /// @group palette
 $kendo-palette-lake-blue: $_default-palette-lake-blue !default;
-$kendo-palette-lake-blue: map-merge($_default-palette-lake-blue, $kendo-palette-lake-blue);
+$kendo-palette-lake-blue: map.merge($_default-palette-lake-blue, $kendo-palette-lake-blue);
 
 /// The Honey Yellow Palette provides colors to the Warning variable group.
 /// @group palette
 $kendo-palette-honey-yellow: $_default-palette-honey-yellow !default;
-$kendo-palette-honey-yellow: map-merge($_default-palette-honey-yellow, $kendo-palette-honey-yellow);
+$kendo-palette-honey-yellow: map.merge($_default-palette-honey-yellow, $kendo-palette-honey-yellow);
 
 /// The Brick Red Palette provides colors to the Error variable group.
 /// @group palette
 $kendo-palette-brick-red: $_default-palette-brick-red !default;
-$kendo-palette-brick-red: map-merge($_default-palette-brick-red, $kendo-palette-brick-red);
+$kendo-palette-brick-red: map.merge($_default-palette-brick-red, $kendo-palette-brick-red);
 
 /// The Coral Palette provides colors to the Series A variable group.
 /// @group palette
 $kendo-palette-coral: $_default-palette-coral !default;
-$kendo-palette-coral: map-merge($_default-palette-coral, $kendo-palette-coral);
+$kendo-palette-coral: map.merge($_default-palette-coral, $kendo-palette-coral);
 
 /// The Pineapple Yellow provides colors to the Series B variable group.
 /// @group palette
 $kendo-palette-pineapple-yellow: $_default-palette-pineapple-yellow !default;
-$kendo-palette-pineapple-yellow: map-merge($_default-palette-pineapple-yellow, $kendo-palette-pineapple-yellow);
+$kendo-palette-pineapple-yellow: map.merge($_default-palette-pineapple-yellow, $kendo-palette-pineapple-yellow);
 
 /// The Apple Green provides colors to the Series C variable group.
 /// @group palette
 $kendo-palette-apple-green: $_default-palette-apple-green !default;
-$kendo-palette-apple-green: map-merge($_default-palette-apple-green, $kendo-palette-apple-green);
+$kendo-palette-apple-green: map.merge($_default-palette-apple-green, $kendo-palette-apple-green);
 
 /// The Pacific Blue provides colors to the Series D variable group.
 /// @group palette
 $kendo-palette-pacific-blue: $_default-palette-pacific-blue !default;
-$kendo-palette-pacific-blue: map-merge($_default-palette-pacific-blue, $kendo-palette-pacific-blue);
+$kendo-palette-pacific-blue: map.merge($_default-palette-pacific-blue, $kendo-palette-pacific-blue);
 
 /// The Bright Blue provides colors to the Series E variable group.
 /// @group palette
 $kendo-palette-bright-blue: $_default-palette-bright-blue !default;
-$kendo-palette-bright-blue: map-merge($_default-palette-bright-blue, $kendo-palette-bright-blue);
+$kendo-palette-bright-blue: map.merge($_default-palette-bright-blue, $kendo-palette-bright-blue);
 
 /// The Orchid Purple provides colors to the Series F variable group.
 /// @group palette
 $kendo-palette-orchid-purple: $_default-palette-orchid-purple !default;
-$kendo-palette-orchid-purple: map-merge($_default-palette-orchid-purple, $kendo-palette-orchid-purple);
+$kendo-palette-orchid-purple: map.merge($_default-palette-orchid-purple, $kendo-palette-orchid-purple);
 // stylelint-enable scss/no-global-function-names

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

@@ -1,74 +1,345 @@
-@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: $kendo-body-bg;
-    $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: k-color( surface-alt );
-    $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: k-color( primary );
-    $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: k-color( primary-hover );
-    $kendo-selected-hover-gradient: $kendo-base-gradient;
-    $kendo-disabled-text: null;
-    $kendo-disabled-bg: null;
-    $kendo-disabled-border: null;
-    $kendo-disabled-opacity: .6;
-    $kendo-disabled-filter: grayscale(.1);
-    $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: $kendo-base-gradient;
-    $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,
-    );
-
-    $kendo-disabled-styling: (
-        bg: $kendo-disabled-bg,
-        color: $kendo-disabled-text,
-        border: $kendo-disabled-border,
-        opacity: $kendo-disabled-opacity,
-        filter: $kendo-disabled-filter
-    );
-}
+@use "../functions/index.import.scss" as *;
+@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
+
+// Color settings
+$kendo-is-dark-theme: false !default;
+
+// Theme colors
+/// The color that focuses the user attention.
+/// Used for primary buttons and for elements of primary importance across the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-primary: if($kendo-enable-color-system, k-color( primary ), #f35800) !default;
+$kendo-color-primary-lighter: if($kendo-enable-color-system, null, k-color-tint( $kendo-color-primary, 2 )) !default;
+$kendo-color-primary-darker: if($kendo-enable-color-system, null, k-color-shade( $kendo-color-primary, 2 )) !default;
+
+/// The color used along with the primary color denoted by $kendo-color-primary.
+/// Used to provide contrast between the background and foreground colors.
+/// @group color-system
+/// @type Color
+$kendo-color-primary-contrast: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) !default;
+
+/// The secondary color of the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-secondary: if($kendo-enable-color-system, k-color( secondary ), #e9e9e9) !default;
+$kendo-color-secondary-lighter: if($kendo-enable-color-system, null, k-color-tint( $kendo-color-secondary, 2 )) !default;
+$kendo-color-secondary-darker: if($kendo-enable-color-system, null, k-color-shade( $kendo-color-secondary, 2 )) !default;
+
+/// The color used along with the secondary color denoted by $kendo-color-secondary.
+/// Used to provide contrast between the background and foreground colors.
+/// @group color-system
+/// @type Color
+$kendo-color-secondary-contrast: if($kendo-enable-color-system, k-color( on-secondary ), k-contrast-color( $kendo-color-secondary )) !default;
+
+/// The tertiary color of the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-tertiary: if($kendo-enable-color-system, k-color( tertiary ), #03a9f4) !default;
+$kendo-color-tertiary-lighter: if($kendo-enable-color-system, null, k-color-tint( $kendo-color-tertiary, 2 )) !default;
+$kendo-color-tertiary-darker: if($kendo-enable-color-system, null, k-color-shade( $kendo-color-tertiary, 2 )) !default;
+
+/// The color used along with the tertiary color denoted by $kendo-color-tertiary.
+/// Used to provide contrast between the background and foreground colors.
+/// @group color-system
+/// @type Color
+$kendo-color-tertiary-contrast: if($kendo-enable-color-system, k-color( on-tertiary ), k-contrast-color( $kendo-color-tertiary )) !default;
+
+/// The color for informational messages and states.
+/// @group color-system
+/// @type Color
+$kendo-color-info: if($kendo-enable-color-system, k-color( info ), #2498bc) !default;
+$kendo-color-info-lighter: if($kendo-enable-color-system, null, k-color-tint( $kendo-color-info, 2 )) !default;
+$kendo-color-info-darker: if($kendo-enable-color-system, null, k-color-shade( $kendo-color-info, 2 )) !default;
+
+/// The color for success messages and states.
+/// @group color-system
+/// @type Color
+$kendo-color-success: if($kendo-enable-color-system, k-color( success ), #3ea44e) !default;
+$kendo-color-success-lighter: if($kendo-enable-color-system, null, k-color-tint( $kendo-color-success, 2 )) !default;
+$kendo-color-success-darker: if($kendo-enable-color-system, null, k-color-shade( $kendo-color-success, 2 )) !default;
+
+/// The color for warning messages and states.
+/// @group color-system
+/// @type Color
+$kendo-color-warning: if($kendo-enable-color-system, k-color( warning ), #ff9800) !default;
+$kendo-color-warning-lighter: if($kendo-enable-color-system, null, k-color-tint( $kendo-color-warning, 2 )) !default;
+$kendo-color-warning-darker: if($kendo-enable-color-system, null, k-color-shade( $kendo-color-warning, 2 )) !default;
+
+/// The color for error messages and states.
+/// @group color-system
+/// @type Color
+$kendo-color-error: if($kendo-enable-color-system, k-color( error ), #d92800) !default;
+$kendo-color-error-lighter: if($kendo-enable-color-system, null, k-color-tint( $kendo-color-error, 2 )) !default;
+$kendo-color-error-darker: if($kendo-enable-color-system, null, k-color-shade( $kendo-color-error, 2 )) !default;
+
+/// The dark color of the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-dark: if($kendo-enable-color-system, k-color( dark ), #404040) !default;
+
+/// The light color of the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-light: if($kendo-enable-color-system, k-color( light ), #ebebeb) !default;
+
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
+/// @group color-system
+$kendo-color-inverse: if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
+
+// Generic styles
+
+/// Background color of the body.
+/// @group common
+$kendo-body-bg: if($kendo-enable-color-system, k-color( app-surface ) , #ffffff) !default;
+/// Text color of the body.
+/// @group common
+$kendo-body-text: if($kendo-enable-color-system, k-color( on-app-surface ), #272727) !default;
+
+/// Subtle text color.
+/// @group common
+$kendo-subtle-text: if($kendo-enable-color-system, k-color( subtle ), #646464) !default;
+
+$kendo-app-bg: $kendo-body-bg !default;
+$kendo-app-text: $kendo-body-text !default;
+$kendo-app-border: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-app-bg, 2 )) !default;
+
+/// The background of the components' chrome area.
+$kendo-base-bg: if($kendo-enable-color-system, k-color( surface ), #f0f0f0) !default;
+/// The text color of the components' chrome area.
+$kendo-base-text: $kendo-body-text !default;
+/// The border color of the components' chrome area.
+$kendo-base-border: if($kendo-enable-color-system, $kendo-app-border, k-try-shade( $kendo-base-bg, 2 )) !default;
+/// The gradient background of the components' chrome area.
+$kendo-base-gradient: if($kendo-enable-color-system, null, (rgba( white, .1 ), rgba( white, 0 ))) !default;
+
+// Components
+
+/// Background color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
+/// @group component
+$kendo-component-bg: if($kendo-enable-color-system, k-color( surface-alt ), $kendo-body-bg) !default;
+/// Text color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+/// @group component
+$kendo-component-text: $kendo-body-text !default;
+/// Border color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+/// @group component
+$kendo-component-border: if($kendo-enable-color-system, $kendo-app-border, $kendo-base-border) !default;
+
+/// Background color of the component header.
+/// @group component
+$kendo-component-header-bg: $kendo-base-bg !default;
+/// Text color of the component header.
+/// @group component
+$kendo-component-header-text: $kendo-base-text !default;
+/// Border color of the component header.
+/// @group component
+$kendo-component-header-border: $kendo-base-border !default;
+/// Gradient of the component header.
+/// @group component
+$kendo-component-header-gradient: $kendo-base-gradient !default;
+
+/// The background of hovered items.
+$kendo-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-base-bg, 1 )) !default;
+/// The text color of hovered items.
+$kendo-hover-text: $kendo-base-text !default;
+/// The border color of hovered items.
+$kendo-hover-border: if($kendo-enable-color-system, $kendo-base-border, k-try-shade( $kendo-hover-bg, 2 )) !default;
+/// The gradient background of hovered items.
+$kendo-hover-gradient: if($kendo-enable-color-system, null, $kendo-base-gradient) !default;
+
+/// The background of selected items.
+$kendo-selected-bg: $kendo-color-primary !default;
+/// The text color of selected items.
+$kendo-selected-text: if($kendo-enable-color-system, $kendo-color-primary-contrast, k-contrast-legacy( $kendo-selected-bg )) !default;
+/// The border color of selected items.
+$kendo-selected-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-selected-bg, 2 )) !default;
+/// The gradient background of selected items.
+$kendo-selected-gradient: $kendo-base-gradient !default;
+
+/// The background of selected and hovered items.
+$kendo-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-selected-bg, 1 )) !default;
+/// The text color of selected and hovered items.
+$kendo-selected-hover-text: if($kendo-enable-color-system, $kendo-selected-text, k-contrast-legacy( $kendo-selected-hover-bg )) !default;
+/// The border of selected and hovered items.
+$kendo-selected-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-selected-border) !default;
+/// The gradient of selected and hovered items.
+$kendo-selected-hover-gradient: if($kendo-enable-color-system, $kendo-base-gradient, $kendo-selected-gradient) !default;
+
+
+// Link
+/// Text color of the links.
+/// @group common
+$kendo-link-text: $kendo-color-primary !default;
+/// Text color of the links on hover.
+/// @group common
+$kendo-link-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), $kendo-color-primary-darker) !default;
+
+
+/// Background color of the invalid items.
+/// @group component
+$kendo-invalid-bg: null !default;
+/// Text color of the invalid items.
+/// @group component
+$kendo-invalid-text: $kendo-color-error !default;
+/// Border color of the invalid items.
+/// @group component
+$kendo-invalid-border: $kendo-color-error !default;
+/// Shadow of the invalid items.
+/// @group component
+$kendo-invalid-shadow: null !default;
+
+/// Background color of the valid items.
+/// @group component
+$kendo-valid-bg: null !default;
+/// Text color of the valid items.
+/// @group component
+$kendo-valid-text: $kendo-color-success !default;
+/// Border color of the valid items.
+/// @group component
+$kendo-valid-border: $kendo-color-success !default;
+/// Shadow of the valid items.
+/// @group component
+$kendo-valid-shadow: null !default;
+
+// Disabled Styling
+
+/// Background color of the disabled items.
+/// @group component
+$kendo-disabled-bg: null !default;
+/// Text color of the disabled items.
+/// @group component
+$kendo-disabled-text: null !default;
+/// Border color of the disabled items.
+/// @group component
+$kendo-disabled-border: null !default;
+/// Opacity of the disabled items.
+/// @group component
+$kendo-disabled-opacity: .6 !default;
+/// Filter color of the disabled items.
+/// @group component
+$kendo-disabled-filter: grayscale(.1) !default;
+
+$kendo-disabled-styling: (
+    bg: $kendo-disabled-bg,
+    color: $kendo-disabled-text,
+    border: $kendo-disabled-border,
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter,
+) !default;
+
+$kendo-palettes: () !default;
+
+$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
+) !default;
+
+@forward "@progress/kendo-theme-default/scss/core/color-system/_swatch-legacy.scss" with (
+    $kendo-color-primary: $kendo-color-primary,
+    $kendo-color-primary-lighter: $kendo-color-primary-lighter,
+    $kendo-color-primary-darker: $kendo-color-primary-darker,
+    $kendo-color-primary-contrast: $kendo-color-primary-contrast,
+
+    $kendo-color-secondary: $kendo-color-secondary,
+    $kendo-color-secondary-lighter: $kendo-color-secondary-lighter,
+    $kendo-color-secondary-darker: $kendo-color-secondary-darker,
+    $kendo-color-secondary-contrast: $kendo-color-secondary-contrast,
+
+    $kendo-color-tertiary: $kendo-color-tertiary,
+    $kendo-color-tertiary-lighter: $kendo-color-tertiary-lighter,
+    $kendo-color-tertiary-darker: $kendo-color-tertiary-darker,
+    $kendo-color-tertiary-contrast: $kendo-color-tertiary-contrast,
+
+    $kendo-color-info: $kendo-color-info,
+    $kendo-color-info-lighter: $kendo-color-info-lighter,
+    $kendo-color-info-darker: $kendo-color-info-darker,
+
+    $kendo-color-success: $kendo-color-success,
+    $kendo-color-success-lighter: $kendo-color-success-lighter,
+    $kendo-color-success-darker: $kendo-color-success-darker,
+
+    $kendo-color-warning: $kendo-color-warning,
+    $kendo-color-warning-lighter: $kendo-color-warning-lighter,
+    $kendo-color-warning-darker: $kendo-color-warning-darker,
+
+    $kendo-color-error: $kendo-color-error,
+    $kendo-color-error-lighter: $kendo-color-error-lighter,
+    $kendo-color-error-darker: $kendo-color-error-darker,
+
+    $kendo-color-dark: $kendo-color-dark,
+
+    $kendo-color-light: $kendo-color-light,
+
+    $kendo-color-inverse: $kendo-color-inverse,
+
+    $kendo-body-bg: $kendo-body-bg,
+    $kendo-body-text: $kendo-body-text,
+
+    $kendo-subtle-text: $kendo-subtle-text,
+
+    $kendo-app-bg: $kendo-app-bg,
+    $kendo-app-text: $kendo-app-text,
+    $kendo-app-border: $kendo-app-border,
+
+    $kendo-component-bg: $kendo-component-bg,
+    $kendo-component-text: $kendo-component-text,
+    $kendo-component-border: $kendo-component-border,
+
+    $kendo-base-bg: $kendo-base-bg,
+    $kendo-base-text: $kendo-base-text,
+    $kendo-base-border: $kendo-base-border,
+    $kendo-base-gradient: $kendo-base-gradient,
+
+    $kendo-component-header-bg: $kendo-component-header-bg,
+    $kendo-component-header-text: $kendo-component-header-text,
+    $kendo-component-header-border: $kendo-component-header-border,
+    $kendo-component-header-gradient: $kendo-component-header-gradient,
+
+    $kendo-hover-bg: $kendo-hover-bg,
+    $kendo-hover-text: $kendo-hover-text,
+    $kendo-hover-border: $kendo-hover-border,
+    $kendo-hover-gradient: $kendo-hover-gradient,
+
+    $kendo-selected-bg: $kendo-selected-bg,
+    $kendo-selected-text: $kendo-selected-text,
+    $kendo-selected-border: $kendo-selected-border,
+    $kendo-selected-gradient: $kendo-selected-gradient,
+
+    $kendo-selected-hover-bg: $kendo-selected-hover-bg,
+    $kendo-selected-hover-text: $kendo-selected-hover-text,
+    $kendo-selected-hover-border: $kendo-selected-hover-border,
+    $kendo-selected-hover-gradient: $kendo-selected-hover-gradient,
+
+    $kendo-link-text: $kendo-link-text,
+    $kendo-link-hover-text: $kendo-link-hover-text,
+
+    $kendo-invalid-bg: $kendo-invalid-bg,
+    $kendo-invalid-text: $kendo-invalid-text,
+    $kendo-invalid-border: $kendo-invalid-border,
+    $kendo-invalid-shadow: $kendo-invalid-shadow,
+
+    $kendo-valid-bg: $kendo-valid-bg,
+    $kendo-valid-text: $kendo-valid-text,
+    $kendo-valid-border: $kendo-valid-border,
+    $kendo-valid-shadow: $kendo-valid-shadow,
+
+    $kendo-disabled-bg: $kendo-disabled-bg,
+    $kendo-disabled-text: $kendo-disabled-text,
+    $kendo-disabled-border: $kendo-disabled-border,
+    $kendo-disabled-opacity: $kendo-disabled-opacity,
+    $kendo-disabled-filter: $kendo-disabled-filter,
+
+    $kendo-disabled-styling: $kendo-disabled-styling,
+    $kendo-theme-colors: $kendo-theme-colors
+);