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

package/scss/color-preview/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/color-preview/_theme.scss";
+@use "@progress/kendo-theme-default/scss/color-preview/_theme.scss" as *;
 
 
 @mixin kendo-color-preview--theme() {

package/scss/color-preview/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Color Preview
 $kendo-color-preview-border-radius: k-border-radius(md) !default;
 $kendo-color-preview-border-width: 1px !default;
@@ -12,3 +15,18 @@ $kendo-color-preview-no-color-border: null !default;
 
 $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$kendo-color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
 $kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
+
+
+@forward "@progress/kendo-theme-default/scss/color-preview/_variables.scss" with (
+    $kendo-color-preview-border-radius: $kendo-color-preview-border-radius,
+    $kendo-color-preview-border-width: $kendo-color-preview-border-width,
+    $kendo-color-preview-bg: $kendo-color-preview-bg,
+    $kendo-color-preview-text: $kendo-color-preview-text,
+    $kendo-color-preview-border: $kendo-color-preview-border,
+    $kendo-color-preview-hover-border: $kendo-color-preview-hover-border,
+    $kendo-color-preview-no-color-bg: $kendo-color-preview-no-color-bg,
+    $kendo-color-preview-no-color-text: $kendo-color-preview-no-color-text,
+    $kendo-color-preview-no-color-border: $kendo-color-preview-no-color-border,
+    $kendo-color-preview-no-color-image: $kendo-color-preview-no-color-image,
+    $kendo-color-preview-transparent-color-image: $kendo-color-preview-transparent-color-image
+);

package/scss/coloreditor/_index.scss

@@ -1,45 +1,24 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "color-editor",
-    dependencies: (
-        "button",
-        "action-buttons",
-        "color-gradient",
-        "color-palette",
-        "color-preview"
-    )
-);
-
-
 // Dependencies
-@import "../action-buttons/_index.scss";
-@import "../color-preview/_index.scss";
-@import "../colorpalette/_index.scss";
-@import "../colorgradient/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../color-preview/_index.scss" as *;
+@use "../colorpalette/_index.scss" as *;
+@use "../colorgradient/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-color-editor--styles() {
-    @include module-render( "color-editor" ) {
+    @include import-once( "color-editor" ) {
+        @include core-styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-color-preview--styles();
+        @include kendo-color-palette--styles();
+        @include kendo-color-gradient--styles();
         @include kendo-color-editor--layout();
         @include kendo-color-editor--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-color-editor--styles();
-}

package/scss/coloreditor/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/coloreditor/_layout.scss";
+@use "@progress/kendo-theme-default/scss/coloreditor/_layout.scss" as *;
 
 
 @mixin kendo-color-editor--layout() {

package/scss/coloreditor/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/coloreditor/_theme.scss";
+@use "@progress/kendo-theme-default/scss/coloreditor/_theme.scss" as *;
 
 
 @mixin kendo-color-editor--theme() {

package/scss/coloreditor/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // ColorEditor/FlatColorPicker
 
 /// The spacer of the ColorEditor.
@@ -78,3 +80,31 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
+
+
+@forward "@progress/kendo-theme-default/scss/coloreditor/_variables.scss" with (
+    $kendo-color-editor-spacer: $kendo-color-editor-spacer,
+    $kendo-color-editor-min-width: $kendo-color-editor-min-width,
+    $kendo-color-editor-border-width: $kendo-color-editor-border-width,
+    $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
+    $kendo-color-editor-font-family: $kendo-color-editor-font-family,
+    $kendo-color-editor-font-size: $kendo-color-editor-font-size,
+    $kendo-color-editor-line-height: $kendo-color-editor-line-height,
+    $kendo-color-editor-text: $kendo-color-editor-text,
+    $kendo-color-editor-bg: $kendo-color-editor-bg,
+    $kendo-color-editor-border: $kendo-color-editor-border,
+    $kendo-color-editor-focus-border: $kendo-color-editor-focus-border,
+    $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
+    $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y,
+    $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x,
+    $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap,
+    $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
+    $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
+    $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap,
+    $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y,
+    $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x,
+    $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
+    $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
+    $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
+    $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset
+);

package/scss/colorgradient/_index.scss

@@ -1,42 +1,26 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "color-gradient",
-    dependencies: (
-        "button",
-        "icon",
-        "numeric-textbox",
-        "slider",
-        "textbox"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-@import "../button/_index.scss";
-@import "../slider/_index.scss";
-@import "../textbox/_index.scss";
-@import "../numerictextbox/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../slider/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-color-gradient--styles() {
-    @include module-render( "color-gradient" ) {
+    @include import-once( "color-gradient" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-button--styles();
+        @include kendo-slider--styles();
+        @include kendo-textbox--styles();
+        @include kendo-numeric-textbox--styles();
         @include kendo-color-gradient--layout();
         @include kendo-color-gradient--theme();
         @include kendo-utils--flex-grid--flex();
@@ -44,7 +28,3 @@ $_kendo-module-meta: (
         @include kendo-utils--typography--text-color();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-color-gradient--styles();
-}

package/scss/colorgradient/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/colorgradient/_layout.scss";
+@use "@progress/kendo-theme-default/scss/colorgradient/_layout.scss" as *;
 
 
 @mixin kendo-color-gradient--layout() {

package/scss/colorgradient/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/colorgradient/_theme.scss";
+@use "@progress/kendo-theme-default/scss/colorgradient/_theme.scss" as *;
 
 
 @mixin kendo-color-gradient--theme() {

package/scss/colorgradient/_variables.scss

@@ -1,3 +1,6 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+
 // ColorGradient
 
 /// The spacer of the ColorGradient.
@@ -117,10 +120,10 @@ $kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;
 
 /// The vertical margin of the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-canvas-draghandle-margin-y: - k-math-div( $kendo-color-gradient-draghandle-height, 2 ) !default;
+$kendo-color-gradient-canvas-draghandle-margin-y: - math.div( $kendo-color-gradient-draghandle-height, 2 ) !default;
 /// The horizontal margin of the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-canvas-draghandle-margin-x: - k-math-div( $kendo-color-gradient-draghandle-width, 2 ) !default;
+$kendo-color-gradient-canvas-draghandle-margin-x: - math.div( $kendo-color-gradient-draghandle-width, 2 ) !default;
 
 /// The width of the ColorGradient input.
 /// @group color-gradient
@@ -141,3 +144,50 @@ $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold,
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/colorgradient/_variables.scss" with (
+    $kendo-color-gradient-spacer: $kendo-color-gradient-spacer,
+    $kendo-color-gradient-width: $kendo-color-gradient-width,
+    $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
+    $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius,
+    $kendo-color-gradient-padding-y: $kendo-color-gradient-padding-y,
+    $kendo-color-gradient-padding-x: $kendo-color-gradient-padding-x,
+    $kendo-color-gradient-gap: $kendo-color-gradient-gap,
+    $kendo-color-gradient-font-family: $kendo-color-gradient-font-family,
+    $kendo-color-gradient-font-size: $kendo-color-gradient-font-size,
+    $kendo-color-gradient-line-height: $kendo-color-gradient-line-height,
+    $kendo-color-gradient-text: $kendo-color-gradient-text,
+    $kendo-color-gradient-bg: $kendo-color-gradient-bg,
+    $kendo-color-gradient-border: $kendo-color-gradient-border,
+    $kendo-color-gradient-focus-border: $kendo-color-gradient-focus-border,
+    $kendo-color-gradient-focus-shadow: $kendo-color-gradient-focus-shadow,
+    $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius,
+    $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap,
+    $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height,
+    $kendo-color-gradient-slider-track-size: $kendo-color-gradient-slider-track-size,
+    $kendo-color-gradient-slider-border-radius: $kendo-color-gradient-slider-border-radius,
+    $kendo-color-gradient-slider-draghandle-border-width: $kendo-color-gradient-slider-draghandle-border-width,
+    $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size,
+    $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size,
+    $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr,
+    $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width,
+    $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height,
+    $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width,
+    $kendo-color-gradient-draghandle-outline-width: $kendo-color-gradient-draghandle-outline-width,
+    $kendo-color-gradient-draghandle-border-radius: $kendo-color-gradient-draghandle-border-radius,
+    $kendo-color-gradient-draghandle-text: $kendo-color-gradient-draghandle-text,
+    $kendo-color-gradient-draghandle-bg: $kendo-color-gradient-draghandle-bg,
+    $kendo-color-gradient-draghandle-border: $kendo-color-gradient-draghandle-border,
+    $kendo-color-gradient-draghandle-shadow: $kendo-color-gradient-draghandle-shadow,
+    $kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-focus-shadow,
+    $kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-hover-shadow,
+    $kendo-color-gradient-canvas-draghandle-margin-y: $kendo-color-gradient-canvas-draghandle-margin-y,
+    $kendo-color-gradient-canvas-draghandle-margin-x: $kendo-color-gradient-canvas-draghandle-margin-x,
+    $kendo-color-gradient-input-width: $kendo-color-gradient-input-width,
+    $kendo-color-gradient-input-gap: $kendo-color-gradient-input-gap,
+    $kendo-color-gradient-input-label-gap: $kendo-color-gradient-input-label-gap,
+    $kendo-color-gradient-input-label-text: $kendo-color-gradient-input-label-text,
+    $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight,
+    $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer
+);

package/scss/colorpalette/_index.scss

@@ -1,35 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "color-palette",
-    dependencies: ()
-);
-
-
 // Dependencies
-
+@use "../core/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-color-palette--styles() {
-    @include module-render( "color-palette" ) {
+    @include import-once( "color-palette" ) {
+        @include core-styles();
         @include kendo-color-palette--layout();
         @include kendo-color-palette--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-color-palette--styles();
-}

package/scss/colorpalette/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/colorpalette/_layout.scss";
+@use "@progress/kendo-theme-default/scss/colorpalette/_layout.scss" as *;
 
 
 @mixin kendo-color-palette--layout() {

package/scss/colorpalette/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/colorpalette/_theme.scss";
+@use "@progress/kendo-theme-default/scss/colorpalette/_theme.scss" as *;
 
 
 @mixin kendo-color-palette--theme() {

package/scss/colorpalette/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // ColorPalette
 
 /// The font family of the ColorPalette.
@@ -25,3 +27,15 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0
 /// The shadow of the ColorPalette selected tile.
 /// @group color-palette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/colorpalette/_variables.scss" with (
+    $kendo-color-palette-font-family: $kendo-color-palette-font-family,
+    $kendo-color-palette-font-size: $kendo-color-palette-font-size,
+    $kendo-color-palette-line-height: $kendo-color-palette-line-height,
+    $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
+    $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
+    $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
+    $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
+    $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow
+);

package/scss/colorpicker/_index.scss

@@ -1,46 +1,26 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "color-picker",
-    dependencies: (
-        "button",
-        "color-editor",
-        "icon",
-        "input",
-        "popup",
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../button/_index.scss";
-@import "../coloreditor/_index.scss";
-@import "../popup/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../coloreditor/_index.scss" as *;
+@use "../popup/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-color-picker--styles() {
-    @include module-render( "color-picker" ) {
+    @include import-once( "color-picker" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-color-editor--styles();
+        @include kendo-popup--styles();
+        @include kendo-icon--styles();
         @include kendo-color-picker--layout();
         @include kendo-color-picker--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-color-picker--styles();
-}

package/scss/colorpicker/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/colorpicker/_layout.scss";
+@use "@progress/kendo-theme-default/scss/colorpicker/_layout.scss" as *;
 
 
 @mixin kendo-color-picker--layout() {

package/scss/colorpicker/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/colorpicker/_theme.scss";
+@use "@progress/kendo-theme-default/scss/colorpicker/_theme.scss" as *;
 
 
 @mixin kendo-color-picker--theme() {

package/scss/combobox/_index.scss

@@ -1,47 +1,26 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "combobox",
-    dependencies: (
-        "button",
-        "floating-label",
-        "icon",
-        "input",
-        "list",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../icons/_index.scss";
-@import "../popup/_index.scss";
-@import "../list/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-combobox--styles() {
-    @include module-render( "combobox" ) {
+    @include import-once( "combobox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-icon--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
         @include kendo-combobox--layout();
         @include kendo-combobox--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-combobox--styles();
-}

package/scss/combobox/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/combobox/_layout.scss";
+@use "@progress/kendo-theme-default/scss/combobox/_layout.scss" as *;
 
 
 @mixin kendo-combobox--layout() {

package/scss/combobox/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/combobox/_theme.scss";
+@use "@progress/kendo-theme-default/scss/combobox/_theme.scss" as *;
 
 
 @mixin kendo-combobox--theme() {

package/scss/core/_index.scss

@@ -1,32 +1,58 @@
-$wcag-min-contrast-ratio: 4.5 !default;
-
 // Color System
-@import "./color-system/_swatch.scss";
+@use "./color-system/_swatch.scss" as *;
 
-// Typography
-@import "./typography/index.import.scss";
+// Elevation
+@use "./elevation/index.import.scss" as *;
 
-// Variables
-@import "../_variables.scss";
+// Typography
+@use "./typography/index.import.scss" as *;
 
 // Spacing
-@import "./spacing/index.import.scss";
+@use "./spacing/index.import.scss" as *;
 
-@import "@progress/kendo-theme-core/scss/index.import.scss";
+// Border Radius
+@use "./border-radii/index.import.scss" as *;
 
-// Backward compatibility
-@import "./color-system/_swatch-legacy.scss";
+// Variables
+@forward "../_variables.scss";
+
+@forward "@progress/kendo-theme-core/scss/index.import.scss" with (
+    // Color System Switch
+    $kendo-enable-color-system: $kendo-enable-color-system !default,
+    // Color System
+    $_default-colors: $kendo-colors,
+    $kendo-colors: $kendo-colors !default,
+    // Elevation
+    $_default-elevation: $kendo-elevation,
+    $kendo-elevation: $kendo-elevation !default,
+    // Typography
+    $_default-font-sizes: $kendo-font-sizes,
+    $kendo-font-sizes: $kendo-font-sizes !default,
+    $kendo-font-size: $kendo-font-size !default,
 
-// Expose
-@include exports("kendo-core-styles") {
-    @include kendo-core--styles();
+    $_default-line-heights: $kendo-line-heights,
+    $kendo-line-heights: $kendo-line-heights !default,
+    $kendo-line-height: $kendo-line-height !default,
 
-    // Elevation System
-    @include kendo-elevation--styles();
-    // Typography
-    @include kendo-core--typography--styles();
+    $_default-font-weights: $kendo-font-weights,
+    $kendo-font-weights: $kendo-font-weights !default,
+    $kendo-font-weight: $kendo-font-weight !default,
+
+    $_default-letter-spacings: $kendo-letter-spacings,
+    $kendo-letter-spacings: $kendo-letter-spacings !default,
+    $kendo-letter-spacing: $kendo-letter-spacing !default,
+
+    $_default-font-families: $kendo-font-families,
+    $kendo-font-families: $kendo-font-families !default,
+    $kendo-font-family: $kendo-font-family !default,
     // Spacing
-    @include kendo-spacing--styles();
-    // Radii
-    @include kendo-border-radius--styles();
-}
+    $_default-spacing: $kendo-spacing,
+    $kendo-spacing: $kendo-spacing !default,
+    // Border Radii
+    $_default-border-radii: $kendo-border-radii,
+    $kendo-border-radii: $kendo-border-radii !default
+);
+
+// Backward compatibility
+@forward "./color-system/_swatch-legacy.scss";
+