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

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.1.1-dev.2",
+    "version": "10.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.1.1-dev.2",
+    "version": "10.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.1.1-dev.2",
+    "version": "10.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "9.1.1-dev.2",
+  "version": "10.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^3.1.0",
-    "@progress/kendo-theme-core": "9.1.1-dev.2",
-    "@progress/kendo-theme-utils": "9.1.1-dev.2"
+    "@progress/kendo-theme-core": "10.0.0-dev.0",
+    "@progress/kendo-theme-utils": "10.0.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "ce826b0f553eb3a49efdef386c2f488ca4fbc8d1"
+  "gitHead": "a7d870863610924d89ac6d01cdc1fb97a26da5e9"
 }

package/scss/action-buttons/_index.scss

@@ -0,0 +1,19 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+// Expose
+@mixin kendo-action-buttons--styles() {
+    @include import-once( "action-buttons" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-action-buttons--layout();
+        @include kendo-action-buttons--theme();
+        @include kendo-utils--flex-grid--justify-content();
+    }
+}

package/scss/action-sheet/_index.scss

@@ -0,0 +1,25 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../listgroup/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-action-sheet--styles() {
+    @include import-once( "action-sheet" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-listgroup--styles();
+        @include kendo-popup--styles();
+        @include kendo-action-sheet--layout();
+        @include kendo-action-sheet--theme();
+        @include kendo-utils--layout--overflow();
+        @include kendo-utils--typography--text-align();
+    }
+}

package/scss/adaptive/_index.scss

@@ -0,0 +1,29 @@
+// Dependencies (TODO: extract variables)
+@use "../core/_index.scss" as *;
+@use "../listgroup/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../radio/_index.scss" as *;
+@use "../switch/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-adaptive--styles() {
+    @include import-once( "adaptive" ) {
+        @include core-styles();
+        @include kendo-listgroup--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-switch--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-adaptive--layout();
+        @include kendo-adaptive-grid--layout();
+        @include kendo-adaptive-scheduler--layout();
+        @include kendo-adaptive-common--layout();
+        @include kendo-adaptive--theme();
+    }
+}

package/scss/all.scss

@@ -1,5 +1,4 @@
 @forward "./index.scss";
-@use "./index.scss" as kendo-theme;
+@use "./index.scss" as *;
 
-@include kendo-theme.config();
-@include kendo-theme.styles();
+@include kendo-theme--styles();

package/scss/appbar/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-appbar--styles() {
+    @include import-once( "appbar" ) {
+        @include core-styles();
+        @include kendo-appbar--layout();
+        @include kendo-appbar--theme();
+    }
+}

package/scss/autocomplete/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@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
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-autocomplete--styles() {
+    @include import-once( "autocomplete" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
+        @include kendo-autocomplete--layout();
+        @include kendo-autocomplete--theme();
+    }
+}

package/scss/avatar/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-avatar--styles() {
+    @include import-once( "avatar" ) {
+        @include core-styles();
+        @include kendo-avatar--layout();
+        @include kendo-avatar--theme();
+    }
+}

package/scss/badge/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-badge--styles() {
+    @include import-once( "badge" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-badge--layout();
+        @include kendo-badge--theme();
+    }
+}

package/scss/bottom-navigation/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-bottom-navigation--styles() {
+    @include import-once( "bottom-navigation" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-bottom-navigation--layout();
+        @include kendo-bottom-navigation--theme();
+        @include kendo-utils--layout--position();
+    }
+}

package/scss/breadcrumb/_index.scss

@@ -0,0 +1,23 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-breadcrumb--styles() {
+    @include import-once( "breadcrumb" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-icon--styles();
+        @include kendo-breadcrumb--layout();
+        @include kendo-breadcrumb--theme();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--flex-wrap();
+    }
+}

package/scss/breadcrumb/_variables.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
-@use "../icon/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
 
 /// The horizontal margin of the Breadcrumb
 /// @group breadcrumb

package/scss/button/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../badge/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-button--styles() {
+    @include import-once( "button" ) {
+        @include core-styles();
+        @include kendo-badge--styles();
+        @include kendo-icon--styles();
+        @include kendo-button--layout();
+        @include kendo-button--theme();
+    }
+}

package/scss/calendar/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-calendar--styles() {
+    @include import-once( "calendar" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
+        @include kendo-calendar--layout();
+        @include kendo-calendar--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-content();
+        @include kendo-utils--interactivity--pointer-events();
+    }
+}

package/scss/captcha/_index.scss

@@ -0,0 +1,29 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../slider/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-captcha--styles() {
+    @include import-once( "captcha" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-textbox--styles();
+        @include kendo-slider--styles();
+        @include kendo-captcha--layout();
+        @include kendo-captcha--theme();
+        @include kendo-utils--typography--text-color();
+        @include kendo-utils--layout--position();
+    }
+}

package/scss/card/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../typography/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-card--styles() {
+    @include import-once( "card" ) {
+        @include core-styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-icon--styles();
+        @include kendo-typography--styles();
+        @include kendo-card--layout();
+        @include kendo-card--theme();
+        @include kendo-utils--typography--text-overflow();
+        @include kendo-utils--typography--white-space();
+        @include kendo-utils--layout--display();
+    }
+}

package/scss/chart-wizard/_index.scss

@@ -1,35 +1,36 @@
-// Module meta
-$_kendo-module-meta: (
-    name: "chart-wizard",
-    dependencies: (
-        "icon",
-        "window",
-        "splitter",
-        "dataviz",
-        "expander",
-        "grid",
-        "tabstrip",
-        "listview",
-        "form",
-        "combobox"
-    )
-);
-
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../window/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../dataviz/_index.scss" as *;
+@use "../expansion-panel/_index.scss" as *;
+@use "../grid/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+@use "../listview/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../combobox/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
 @use "./_layout.scss" as *;
 @use "./_theme.scss" as *;
 
-
-// Register
-@use "../core/module-system/index.scss" as module;
-@include module.register( $_kendo-module-meta... );
-
-
 // Expose
-@mixin chart-wizard-styles() {
-    @include module.render( "chart-wizard" ) {
+@mixin kendo-chart-wizard--styles() {
+    @include import-once( "chart-wizard" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-window--styles();
+        @include kendo-splitter--styles();
+        @include kendo-dataviz--styles();
+        @include kendo-expander--styles();
+        @include kendo-grid--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-listview--styles();
+        @include kendo-form--styles();
+        @include kendo-combobox--styles();
         @include kendo-chart-wizard--layout();
         @include kendo-chart-wizard--theme();
     }

package/scss/chart-wizard/_layout.scss

@@ -1,5 +1,5 @@
 @use "../core/_index.scss" as *;
-@use "../icon/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../expansion-panel/_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
 

package/scss/chat/_index.scss

@@ -0,0 +1,27 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../card/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-chat--styles() {
+    @include import-once( "chat" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-card--styles();
+        @include kendo-icon--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-chat--layout();
+        @include kendo-chat-card--layout();
+        @include kendo-chat-typing-indicator--layout();
+        @include kendo-chat-toolbar--layout();
+        @include kendo-chat--theme();
+    }
+}

package/scss/checkbox/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-checkbox--styles() {
+    @include import-once( "checkbox" ) {
+        @include core-styles();
+        @include kendo-checkbox--layout();
+        @include kendo-checkbox--theme();
+    }
+}

package/scss/checkbox/_variables.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "../list/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/functions/index.import.scss" as *;
 
 // Checkbox
 
@@ -167,25 +168,25 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// The image of the hovered CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-hover-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-indeterminate-text}'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-indeterminate-text}'/></svg>") ) !default;
 /// The image of the hovered and checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-hover-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the hovered and indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-hover-indeterminate-text}'/></svg>") ) !default;
+$kendo-checkbox-hover-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-hover-indeterminate-text}'/></svg>") ) !default;
 /// The image of the checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-disabled-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-disabled-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-disabled-indeterminate-text}'/></svg>") ) !default;
+$kendo-checkbox-disabled-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-disabled-indeterminate-text}'/></svg>") ) !default;
 
 
 // Checkbox label

package/scss/chip/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-chip--styles() {
+    @include import-once( "chip" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-chip--layout();
+        @include kendo-chip--theme();
+        @include kendo-utils--typography--text-overflow();
+    }
+}

package/scss/color-preview/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-preview--styles() {
+    @include import-once( "color-preview" ) {
+        @include core-styles();
+        @include kendo-color-preview--layout();
+        @include kendo-color-preview--theme();
+    }
+}

package/scss/color-preview/_variables.scss

@@ -1,4 +1,5 @@
 @use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/functions/index.import.scss" as *;
 
 /// Border radius of the color preview.
 /// @group color-preview
@@ -29,7 +30,7 @@ $kendo-color-preview-no-color-text: if($kendo-enable-color-system, k-color( erro
 /// @group color-preview
 $kendo-color-preview-no-color-border: currentColor !default;
 // Background image of the color preview when no color is selected.
-$kendo-color-preview-no-color-image: 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-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;
 
 // Background image of the color preview mask.
 $kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

package/scss/coloreditor/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@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
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-color-editor--styles() {
+    @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();
+    }
+}