@progress/kendo-theme-fluent 5.12.1-dev.2 → 5.12.1-dev.3

package/dist/all.scss

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

package/dist/fluent-main.scss

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

package/lib/swatches/all.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
+    "name": "All",
+    "product": "kendo",
+    "base": "@progress/kendo-theme-fluent",
+    "version": "5.12.1-dev.3",
+    "api": "modern",
+    "previewColors": [
+        "#ffffff",
+        "#f5f5f5",
+        "#ff6358",
+        "#d6534a",
+        "#424242"
+    ],
+    "components": [],
+    "groups": []
+}

package/lib/swatches/fluent-main.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
+    "name": "Fluent Main",
+    "product": "kendo",
+    "base": "@progress/kendo-theme-fluent",
+    "version": "5.12.1-dev.3",
+    "api": "modern",
+    "previewColors": [
+        "#ffffff",
+        "#f5f5f5",
+        "#ff6358",
+        "#d6534a",
+        "#424242"
+    ],
+    "components": [],
+    "groups": []
+}

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": "5.12.1-dev.2",
+  "version": "5.12.1-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^1.0.0",
-    "@progress/kendo-theme-core": "^5.12.1-dev.2",
-    "@progress/kendo-theme-utils": "^5.12.1-dev.2"
+    "@progress/kendo-theme-core": "^5.12.1-dev.3",
+    "@progress/kendo-theme-utils": "^5.12.1-dev.3"
   },
-  "gitHead": "14365a5e53996a453f9d6ad72894a3e4666e6ede"
+  "gitHead": "8c82f49a750901799f12f09ca977f65b74ff9577"
 }

package/scss/adaptive/_layout.scss

@@ -166,7 +166,7 @@
         }
 
         .k-scheduler-toolbar {
-            padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md;
+            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
 
             > * {
                 margin: 0;
@@ -201,7 +201,7 @@
         }
 
         .k-scheduler-footer {
-            padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md;
+            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
             display: flex;
             justify-content: space-between;
 

package/scss/badge/_variables.scss

@@ -21,58 +21,58 @@ $kendo-badge-font-weight: var( --kendo-font-weight, normal ) !default;
 
 /// Horizontal padding of the badge.
 /// @group badge
-$kendo-badge-padding-x-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-badge-padding-x-md: map.get( $kendo-spacing, 1 ) !default;
-$kendo-badge-padding-x-lg: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-badge-sm-padding-x: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-badge-md-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-badge-lg-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// Vertical padding of the badge.
 /// @group badge
-$kendo-badge-padding-y-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-badge-padding-y-md: map.get( $kendo-spacing, 1 ) !default;
-$kendo-badge-padding-y-lg: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-badge-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-badge-md-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-badge-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the badge.
 /// @group badge
-$kendo-badge-font-size-sm: var( --kendo-font-size-xs, inherit ) !default;
-$kendo-badge-font-size-md: var( --kendo-font-size-xs, inherit ) !default;
-$kendo-badge-font-size-lg: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
 
 /// Line heights of the badge.
 /// @group badge
-$kendo-badge-line-height-sm: var( --kendo-line-height-xs, normal ) !default;
-$kendo-badge-line-height-md: var( --kendo-line-height-xs, normal ) !default;
-$kendo-badge-line-height-lg: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-sm-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-md-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-lg-line-height: var( --kendo-line-height-xs, normal ) !default;
 
 /// Badge min width used for circle badge.
 /// @group badge
-$kendo-badge-min-width-sm: calc( #{$kendo-badge-line-height-sm} * 1em + #{$kendo-badge-padding-y-sm} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
-$kendo-badge-min-width-md: calc( #{$kendo-badge-line-height-md} * 1em + #{$kendo-badge-padding-y-md} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
-$kendo-badge-min-width-lg: calc( #{$kendo-badge-line-height-lg} * 1em + #{$kendo-badge-padding-y-lg} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height} * 1em + #{$kendo-badge-md-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height} * 1em + #{$kendo-badge-lg-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
 
 
 /// Sizes map for the badge.
 /// @group badge
 $kendo-badge-sizes: (
     sm: (
-        padding-x: $kendo-badge-padding-x-sm,
-        padding-y: $kendo-badge-padding-y-sm,
-        font-size: $kendo-badge-font-size-sm,
-        line-height: $kendo-badge-line-height-sm,
-        min-width: $kendo-badge-min-width-sm
+        padding-x: $kendo-badge-sm-padding-x,
+        padding-y: $kendo-badge-sm-padding-y,
+        font-size: $kendo-badge-sm-font-size,
+        line-height: $kendo-badge-sm-line-height,
+        min-width: $kendo-badge-sm-min-width
     ),
     md: (
-        padding-x: $kendo-badge-padding-x-md,
-        padding-y: $kendo-badge-padding-y-md,
-        font-size: $kendo-badge-font-size-md,
-        line-height: $kendo-badge-line-height-md,
-        min-width: $kendo-badge-min-width-md
+        padding-x: $kendo-badge-md-padding-x,
+        padding-y: $kendo-badge-md-padding-y,
+        font-size: $kendo-badge-md-font-size,
+        line-height: $kendo-badge-md-line-height,
+        min-width: $kendo-badge-md-min-width
     ),
     lg: (
-        padding-x: $kendo-badge-padding-x-lg,
-        padding-y: $kendo-badge-padding-y-lg,
-        font-size: $kendo-badge-font-size-lg,
-        line-height: $kendo-badge-line-height-lg,
-        min-width: $kendo-badge-min-width-lg
+        padding-x: $kendo-badge-lg-padding-x,
+        padding-y: $kendo-badge-lg-padding-y,
+        font-size: $kendo-badge-lg-font-size,
+        line-height: $kendo-badge-lg-line-height,
+        min-width: $kendo-badge-lg-min-width
     )
 ) !default;
 

package/scss/breadcrumb/_variables.scss

@@ -155,6 +155,10 @@ $kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-b
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-disabled-text: $kendo-breadcrumb-link-disabled-text !default;
 
+$kendo-breadcrumb-current-item-bg: null !default;
+$kendo-breadcrumb-current-item-text: null !default;
+$kendo-breadcrumb-current-item-border: null !default;
+
 /// The horizontal padding of the breadcrumb link icon
 /// @group breadcrumb
 $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;

package/scss/button/_variables.scss

@@ -8,27 +8,27 @@ $kendo-button-border-width: 1px !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$kendo-button-padding-x-sm: map.get( $kendo-spacing, 5 ) !default;
-$kendo-button-padding-x-md: map.get( $kendo-spacing, 5 ) !default;
-$kendo-button-padding-x-lg: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-sm-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-md-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-lg-padding-x: map.get( $kendo-spacing, 5 ) !default;
 
 /// Vertical padding of the button.
 /// @group button
-$kendo-button-padding-y-sm: map.get( $kendo-spacing, 1 ) !default;
-$kendo-button-padding-y-md: map.get( $kendo-spacing, 1.5 ) !default;
-$kendo-button-padding-y-lg: map.get( $kendo-spacing, 2 ) !default;
+$kendo-button-sm-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-button-md-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-button-lg-padding-y: map.get( $kendo-spacing, 2 ) !default;
 
 /// Font sizes of the button.
 /// @group button
-$kendo-button-font-size-sm: var( --kendo-font-size, inherit ) !default;
-$kendo-button-font-size-md: var( --kendo-font-size, inherit ) !default;
-$kendo-button-font-size-lg: var( --kendo-font-size, inherit ) !default;
+$kendo-button-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-button-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-button-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// Line heights used along with $font-size.
+/// Line heights used along with $kendo-font-size.
 /// @group button
-$kendo-button-line-height-sm: var( --kendo-line-height, normal ) !default;
-$kendo-button-line-height-md: var( --kendo-line-height, normal ) !default;
-$kendo-button-line-height-lg: var( --kendo-line-height, normal ) !default;
+$kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 // Font family of the button.
 $kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
@@ -38,38 +38,38 @@ $kendo-button-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
 /// Calculated height of the button.
 /// @group button
-$kendo-button-calc-size: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
-$kendo-button-calc-size-sm: calc( ( #{$kendo-button-line-height-sm} * 1em ) + ( #{$kendo-button-padding-y-sm} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
-$kendo-button-calc-size-md: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
-$kendo-button-calc-size-lg: calc( ( #{$kendo-button-line-height-lg} * 1em ) + ( #{$kendo-button-padding-y-lg} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
-$kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) ) !default;
-$kendo-button-inner-calc-size-sm: calc( ( #{$kendo-button-line-height-sm} * 1em ) + ( #{$kendo-button-padding-y-sm} * 2 ) ) !default;
-$kendo-button-inner-calc-size-md: calc( ( #{$kendo-button-line-height-md} * 1em ) + ( #{$kendo-button-padding-y-md} * 2 ) ) !default;
-$kendo-button-inner-calc-size-lg: calc( ( #{$kendo-button-line-height-lg} * 1em ) + ( #{$kendo-button-padding-y-lg} * 2 ) ) !default;
+$kendo-button-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
+$kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
 
 /// Sizes map for the button.
 /// @group button
 $kendo-button-sizes: (
     sm: (
-        padding-x: $kendo-button-padding-x-sm,
-        padding-y: $kendo-button-padding-y-sm,
-        font-size: $kendo-button-font-size-sm,
-        line-height: $kendo-button-line-height-sm
+        padding-x: $kendo-button-sm-padding-x,
+        padding-y: $kendo-button-sm-padding-y,
+        font-size: $kendo-button-sm-font-size,
+        line-height: $kendo-button-sm-line-height
     ),
     md: (
-        padding-x: $kendo-button-padding-x-md,
-        padding-y: $kendo-button-padding-y-md,
-        font-size: $kendo-button-font-size-md,
-        line-height: $kendo-button-line-height-md
+        padding-x: $kendo-button-md-padding-x,
+        padding-y: $kendo-button-md-padding-y,
+        font-size: $kendo-button-md-font-size,
+        line-height: $kendo-button-md-line-height
     ),
     lg: (
-        padding-x: $kendo-button-padding-x-lg,
-        padding-y: $kendo-button-padding-y-lg,
-        font-size: $kendo-button-font-size-lg,
-        line-height: $kendo-button-line-height-lg
+        padding-x: $kendo-button-lg-padding-x,
+        padding-y: $kendo-button-lg-padding-y,
+        font-size: $kendo-button-lg-font-size,
+        line-height: $kendo-button-lg-line-height
     )
 ) !default;
 

package/scss/card/_layout.scss

@@ -278,8 +278,8 @@
 
         > .k-card-deck {
             // hide scrollbar
-            margin-block-end: -$default-scrollbar-width;
-            padding-block-end: $default-scrollbar-width;
+            margin-block-end: -#{$kendo-scrollbar-width};
+            padding-block-end: $kendo-scrollbar-width;
             flex: 1 1 auto;
         }
     }

package/scss/chat/_variables.scss

@@ -114,13 +114,13 @@ $kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
 
 /// The horizontal padding of the toolbar in the chat.
 /// @group chat
-$kendo-chat-toolbar-padding-x: $kendo-toolbar-padding-x-md !default;
+$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
 /// The vertical padding of the toolbar in the chat.
 /// @group chat
-$kendo-chat-toolbar-padding-y: $kendo-toolbar-padding-y-md !default;
+$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 /// The spacing of the toolbar in the chat.
 /// @group chat
-$kendo-chat-toolbar-spacing: $kendo-toolbar-spacing-md !default;
+$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
 /// The background of the toolbar in the chat.
 /// @group chat
 $kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;

package/scss/checkbox/_variables.scss

@@ -205,7 +205,7 @@ $kendo-checkbox-list-spacing: map.get( $kendo-spacing, 4 ) !default;
 $kendo-checkbox-list-item-padding-x: 0px !default;
 /// Vertical padding of checkbox list items.
 /// @group checkbox
-$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+$kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 
 // Checkbox ripple

package/scss/chip/_variables.scss

@@ -51,53 +51,53 @@ $kendo-chip-focus-outline-style: solid !default;
 
 /// Horizontal padding of the chip.
 /// @group chip
-$kendo-chip-padding-x-sm: map.get( $kendo-spacing, 2 ) !default;
-$kendo-chip-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
-$kendo-chip-padding-x-lg: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chip-sm-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chip-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-chip-lg-padding-x: map.get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y-sm: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-chip-padding-y-md: map.get( $kendo-spacing, 1 ) !default;
-$kendo-chip-padding-y-lg: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-chip-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-chip-md-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-chip-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
-$kendo-chip-font-size-sm: var( --kendo-font-size, inherit ) !default;
-$kendo-chip-font-size-md: var( --kendo-font-size, inherit ) !default;
-$kendo-chip-font-size-lg: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// Line heights of the chip that are connected to the $font-size.
+/// Line heights of the chip that are connected to the $kendo-font-size.
 /// @group chip
-$kendo-chip-line-height-sm: var( --kendo-line-height, normal ) !default;
-$kendo-chip-line-height-md: var( --kendo-line-height, normal ) !default;
-$kendo-chip-line-height-lg: var( --kendo-line-height, normal ) !default;
+$kendo-chip-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-chip-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-chip-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Calculated height of the chip.
 /// @group chip
-$kendo-chip-calc-size: calc( #{$kendo-chip-line-height-md} * 1em + #{$kendo-chip-padding-y-md} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
-$kendo-chip-calc-size-sm: calc( #{$kendo-chip-line-height-sm} * 1em + #{$kendo-chip-padding-y-sm} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
+$kendo-chip-calc-size: calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
+$kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + #{$kendo-chip-sm-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
 
 /// Sizes map for the chip.
 /// @group chip
 $kendo-chip-sizes: (
     sm: (
-        padding-x: $kendo-chip-padding-x-sm,
-        padding-y: $kendo-chip-padding-y-sm,
-        font-size: $kendo-chip-font-size-sm,
-        line-height: $kendo-chip-line-height-sm
+        padding-x: $kendo-chip-sm-padding-x,
+        padding-y: $kendo-chip-sm-padding-y,
+        font-size: $kendo-chip-sm-font-size,
+        line-height: $kendo-chip-sm-line-height
     ),
     md: (
-        padding-x: $kendo-chip-padding-x-md,
-        padding-y: $kendo-chip-padding-y-md,
-        font-size: $kendo-chip-font-size-md,
-        line-height: $kendo-chip-line-height-md
+        padding-x: $kendo-chip-md-padding-x,
+        padding-y: $kendo-chip-md-padding-y,
+        font-size: $kendo-chip-md-font-size,
+        line-height: $kendo-chip-md-line-height
     ),
     lg: (
-        padding-x: $kendo-chip-padding-x-lg,
-        padding-y: $kendo-chip-padding-y-lg,
-        font-size: $kendo-chip-font-size-lg,
-        line-height: $kendo-chip-line-height-lg
+        padding-x: $kendo-chip-lg-padding-x,
+        padding-y: $kendo-chip-lg-padding-y,
+        font-size: $kendo-chip-lg-font-size,
+        line-height: $kendo-chip-lg-line-height
     )
 ) !default;
 

package/scss/coloreditor/_layout.scss

@@ -2,18 +2,18 @@
 @use "../colorpalette/_variables.scss" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-coloreditor--layout() {
+@mixin kendo-color-editor--layout() {
 
         .k-coloreditor {
-            @include border-radius( var( --kendo-coloreditor-border-radius, #{$kendo-coloreditor-border-radius} ) );
-            min-width: var( --kendo-coloreditor-min-width, #{$kendo-coloreditor-min-width} );
-            border-width: var( --kendo-coloreditor-border-width, #{$kendo-coloreditor-border-width} );
+            @include border-radius( var( --kendo-color-editor-border-radius, #{$kendo-color-editor-border-radius} ) );
+            min-width: var( --kendo-color-editor-min-width, #{$kendo-color-editor-min-width} );
+            border-width: var( --kendo-color-editor-border-width, #{$kendo-color-editor-border-width} );
             border-style: solid;
             box-sizing: border-box;
             outline: 0;
-            font-family: var( --kendo-coloreditor-font-family, #{$kendo-coloreditor-font-family} );
-            font-size: var( --kendo-coloreditor-font-size, #{$kendo-coloreditor-font-size} );
-            line-height: var( --kendo-coloreditor-line-height, #{$kendo-coloreditor-line-height} );
+            font-family: var( --kendo-color-editor-font-family, #{$kendo-color-editor-font-family} );
+            font-size: var( --kendo-color-editor-font-size, #{$kendo-color-editor-font-size} );
+            line-height: var( --kendo-color-editor-line-height, #{$kendo-color-editor-line-height} );
             display: inline-flex;
             flex-direction: column;
             align-items: stretch;
@@ -27,19 +27,19 @@
 
         .k-coloreditor .k-colorgradient:focus,
         .k-coloreditor .k-colorgradient.k-focus {
-            outline: var( --kendo-coloreditor-colorgradient-focus-outline, #{$kendo-coloreditor-colorgradient-focus-outline} ) dotted;
-            outline-offset: var( --kendo-coloreditor-colorgradient-focus-outline-offset, #{$kendo-coloreditor-colorgradient-focus-outline-offset} );
+            outline: var( --kendo-color-editor-color-gradient-focus-outline, #{$kendo-color-editor-color-gradient-focus-outline} ) dotted;
+            outline-offset: var( --kendo-color-editor-color-gradient-focus-outline-offset, #{$kendo-color-editor-color-gradient-focus-outline-offset} );
             border-radius: 0;
         }
 
         // Header
         .k-coloreditor-header {
-            padding-inline: var( --kendo-coloreditor-header-padding-x, #{$kendo-coloreditor-header-padding-x} );
-            padding-block-start: var( --kendo-coloreditor-header-padding-y, #{$kendo-coloreditor-header-padding-y} );
+            padding-inline: var( --kendo-color-editor-header-padding-x, #{$kendo-color-editor-header-padding-x} );
+            padding-block-start: var( --kendo-color-editor-header-padding-y, #{$kendo-color-editor-header-padding-y} );
         }
 
         .k-coloreditor-header-actions {
-            gap: var( --kendo-coloreditor-header-actions-spacing, #{$kendo-coloreditor-header-actions-spacing} );
+            gap: var( --kendo-color-editor-header-actions-spacing, #{$kendo-color-editor-header-actions-spacing} );
         }
 
         .k-coloreditor-preview {
@@ -47,22 +47,22 @@
             flex-flow: column nowrap;
             align-items: stretch;
             justify-content: space-between;
-            gap: var( --kendo-coloreditor-preview-spacing, #{$kendo-coloreditor-preview-spacing} );
+            gap: var( --kendo-color-editor-preview-spacing, #{$kendo-color-editor-preview-spacing} );
             position: relative;
             z-index: 1;
         }
         .k-coloreditor-preview .k-color-preview {
-            width: var( --kendo-coloreditor-color-preview-width, #{$kendo-coloreditor-color-preview-width} );
-            height: var( --kendo-coloreditor-color-preview-height, #{$kendo-coloreditor-color-preview-height} );
+            width: var( --kendo-color-editor-color-preview-width, #{$kendo-color-editor-color-preview-width} );
+            height: var( --kendo-color-editor-color-preview-height, #{$kendo-color-editor-color-preview-height} );
         }
 
         // Views
         .k-coloreditor-views {
-            min-width: calc( var( --kendo-color-preview-width, #{$kendo-colorpalette-tile-width}) * var( --kendo-color-preview-columns, 10) );
-            padding-inline: var( --kendo-coloreditor-views-padding-x, #{$kendo-coloreditor-views-padding-x} );
-            padding-block-start: calc( var( --kendo-coloreditor-views-padding-y, #{$kendo-coloreditor-views-padding-y} ) * 2 );
-            padding-block-end: var( --kendo-coloreditor-views-padding-y, #{$kendo-coloreditor-views-padding-y} );
-            gap: var( --kendo-coloreditor-views-spacing, #{$kendo-coloreditor-views-spacing} );
+            min-width: calc( var( --kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var( --kendo-color-preview-columns, 10) );
+            padding-inline: var( --kendo-color-editor-views-padding-x, #{$kendo-color-editor-views-padding-x} );
+            padding-block-start: calc( var( --kendo-color-editor-views-padding-y, #{$kendo-color-editor-views-padding-y} ) * 2 );
+            padding-block-end: var( --kendo-color-editor-views-padding-y, #{$kendo-color-editor-views-padding-y} );
+            gap: var( --kendo-color-editor-views-spacing, #{$kendo-color-editor-views-spacing} );
 
             .k-colorgradient {
                 padding: 0;
@@ -76,15 +76,15 @@
             }
 
             .k-colorpalette-tile {
-                width: var( --kendo-color-preview-width, $kendo-colorpalette-tile-width );
-                height: var( --kendo-color-preview-height, $kendo-colorpalette-tile-height );
+                width: var( --kendo-color-preview-width, $kendo-color-palette-tile-width );
+                height: var( --kendo-color-preview-height, $kendo-color-palette-tile-height );
             }
         }
 
         // Footer
         .k-coloreditor-footer.k-actions {
-            padding-block: var( --kendo-coloreditor-footer-padding-y, #{$kendo-coloreditor-footer-padding-y} );
-            padding-inline: var( --kendo-coloreditor-footer-padding-y, #{$kendo-coloreditor-footer-padding-y} );
+            padding-block: var( --kendo-color-editor-footer-padding-y, #{$kendo-color-editor-footer-padding-y} );
+            padding-inline: var( --kendo-color-editor-footer-padding-y, #{$kendo-color-editor-footer-padding-y} );
             margin: 0;
         }
 

package/scss/coloreditor/_theme.scss

@@ -1,32 +1,32 @@
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
-@mixin kendo-coloreditor--theme() {
+@mixin kendo-color-editor--theme() {
 
     .k-coloreditor {
         @include fill(
-            var( --kendo-coloreditor-text, #{$kendo-coloreditor-text} ),
-            var( --kendo-coloreditor-bg, #{$kendo-coloreditor-bg} ),
-            var( --kendo-coloreditor-border, #{$kendo-coloreditor-border} )
+            var( --kendo-color-editor-text, #{$kendo-color-editor-text} ),
+            var( --kendo-color-editor-bg, #{$kendo-color-editor-bg} ),
+            var( --kendo-color-editor-border, #{$kendo-color-editor-border} )
         );
         @include box-shadow(
-            var( --kendo-coloreditor-shadow, #{$kendo-coloreditor-shadow} )
+            var( --kendo-color-editor-shadow, #{$kendo-color-editor-shadow} )
         );
     }
 
     .k-coloreditor:focus,
     .k-coloreditor.k-focus {
         @include fill(
-            $border: var( --kendo-coloreditor-focus-border, #{$kendo-coloreditor-focus-border} )
+            $border: var( --kendo-color-editor-focus-border, #{$kendo-color-editor-focus-border} )
         );
         @include box-shadow(
-            var( --kendo-coloreditor-focus-shadow, #{$kendo-coloreditor-focus-shadow} )
+            var( --kendo-color-editor-focus-shadow, #{$kendo-color-editor-focus-shadow} )
         );
     }
 
     .k-coloreditor .k-colorgradient:focus,
     .k-coloreditor .k-colorgradient.k-focus {
         box-shadow: none;
-        outline-color: var( --kendo-coloreditor-colorgradient-focus-outline-color, #{$kendo-coloreditor-colorgradient-focus-outline-color} );
+        outline-color: var( --kendo-color-editor-color-gradient-focus-outline-color, #{$kendo-color-editor-color-gradient-focus-outline-color} );
     }
 }