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

package/scss/chip/_variables.scss

@@ -1,5 +1,7 @@
-@import "../button/_variables.scss";
-
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 // Chip
 
@@ -99,10 +101,10 @@ $kendo-chip-base-bg: $kendo-button-bg !default;
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": k-map-get( $kendo-theme-colors, "error" ),
-    "info": k-map-get( $kendo-theme-colors, "info" ),
-    "warning": k-map-get( $kendo-theme-colors, "warning" ),
-    "success": k-map-get( $kendo-theme-colors, "success" )
+    "error": map.get( $kendo-theme-colors, "error" ),
+    "info": map.get( $kendo-theme-colors, "info" ),
+    "warning": map.get( $kendo-theme-colors, "warning" ),
+    "success": map.get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of the solid Chip.
@@ -160,7 +162,7 @@ $kendo-chip-outline-shadow: 0 0 0 2px rgba( $kendo-chip-base-bg, .16 ) !default;
 $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: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-chip-outline-hover-bg )) !default;
+$kendo-chip-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-legacy( $kendo-chip-outline-hover-bg )) !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip
@@ -178,3 +180,50 @@ $kendo-chip-list-sizes: (
     md: k-spacing(1),
     lg: k-spacing(1)
 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/chip/_variables.scss" with (
+    $kendo-chip-border-width: $kendo-chip-border-width,
+    $kendo-chip-spacing: $kendo-chip-spacing,
+    $kendo-chip-padding-x: $kendo-chip-padding-x,
+    $kendo-chip-sm-padding-x: $kendo-chip-sm-padding-x,
+    $kendo-chip-md-padding-x: $kendo-chip-md-padding-x,
+    $kendo-chip-lg-padding-x: $kendo-chip-lg-padding-x,
+    $kendo-chip-padding-y: $kendo-chip-padding-y,
+    $kendo-chip-sm-padding-y: $kendo-chip-sm-padding-y,
+    $kendo-chip-md-padding-y: $kendo-chip-md-padding-y,
+    $kendo-chip-lg-padding-y: $kendo-chip-lg-padding-y,
+    $kendo-chip-font-size: $kendo-chip-font-size,
+    $kendo-chip-sm-font-size: $kendo-chip-sm-font-size,
+    $kendo-chip-md-font-size: $kendo-chip-md-font-size,
+    $kendo-chip-lg-font-size: $kendo-chip-lg-font-size,
+    $kendo-chip-line-height: $kendo-chip-line-height,
+    $kendo-chip-sm-line-height: $kendo-chip-sm-line-height,
+    $kendo-chip-md-line-height: $kendo-chip-md-line-height,
+    $kendo-chip-lg-line-height: $kendo-chip-lg-line-height,
+    $kendo-chip-calc-size: $kendo-chip-calc-size,
+    $kendo-chip-sm-calc-size: $kendo-chip-sm-calc-size,
+    $kendo-chip-sizes: $kendo-chip-sizes,
+    $kendo-chip-base-bg: $kendo-chip-base-bg,
+    $kendo-chip-theme-colors: $kendo-chip-theme-colors,
+    $kendo-chip-solid-bg: $kendo-chip-solid-bg,
+    $kendo-chip-solid-text: $kendo-chip-solid-text,
+    $kendo-chip-solid-border: $kendo-chip-solid-border,
+    $kendo-chip-solid-shadow: $kendo-chip-solid-shadow,
+    $kendo-chip-solid-gradient: $kendo-chip-solid-gradient,
+    $kendo-chip-solid-focus-bg: $kendo-chip-solid-focus-bg,
+    $kendo-chip-solid-focus-text: $kendo-chip-solid-focus-text,
+    $kendo-chip-solid-hover-bg: $kendo-chip-solid-hover-bg,
+    $kendo-chip-solid-hover-text: $kendo-chip-solid-hover-text,
+    $kendo-chip-solid-selected-bg: $kendo-chip-solid-selected-bg,
+    $kendo-chip-solid-selected-text: $kendo-chip-solid-selected-text,
+    $kendo-chip-outline-bg: $kendo-chip-outline-bg,
+    $kendo-chip-outline-text: $kendo-chip-outline-text,
+    $kendo-chip-outline-border: $kendo-chip-outline-border,
+    $kendo-chip-outline-shadow: $kendo-chip-outline-shadow,
+    $kendo-chip-outline-hover-bg: $kendo-chip-outline-hover-bg,
+    $kendo-chip-outline-hover-text: $kendo-chip-outline-hover-text,
+    $kendo-chip-outline-selected-bg: $kendo-chip-outline-selected-bg,
+    $kendo-chip-outline-selected-text: $kendo-chip-outline-selected-text,
+    $kendo-chip-list-sizes: $kendo-chip-list-sizes
+);

package/scss/color-preview/_index.scss

@@ -1,37 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "color-preview",
-    dependencies: (
-        "icon"
-    )
-);
-
-
 // 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-preview--styles() {
-    @include module-render( "color-preview" ) {
+    @include import-once( "color-preview" ) {
+        @include core-styles();
         @include kendo-color-preview--layout();
         @include kendo-color-preview--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-color-preview--styles();
-}

package/scss/color-preview/_layout.scss

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

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: 2px !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.
@@ -46,7 +49,7 @@ $kendo-color-gradient-border: $kendo-component-border !default;
 $kendo-color-gradient-focus-border: $kendo-hover-border !default;
 /// The box shadow of the focused ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-focus-shadow: null !default;
+$kendo-color-gradient-focus-shadow: none !default;
 
 /// The border radius of the ColorGradient canvas.
 /// @group color-gradient
@@ -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
@@ -133,7 +136,7 @@ $kendo-color-gradient-input-gap: calc( #{$kendo-color-gradient-spacer} / 2 ) !de
 $kendo-color-gradient-input-label-gap: k-spacing(1) !default;
 /// The text color of the ColorGradient input labels.
 /// @group color-gradient
-$kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
+$kendo-color-gradient-input-label-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
@@ -141,3 +144,51 @@ $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} / 2 ) !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-draghandle-shadow: $kendo-color-gradient-draghandle-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() {