@progress/kendo-theme-material 10.6.0 → 11.0.0-dev.1

package/lib/swatches/material-smoke.json

@@ -3,8 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.6.0",
-    "api": "modern",
+    "version": "11.0.0-dev.1",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",
@@ -14,16 +13,6 @@
     ],
     "components": [],
     "groups": [
-        {
-            "name": "New color system",
-            "colorSystem": {
-                "kendo-enable-color-system": {
-                    "name": "New color system",
-                    "type": "boolean",
-                    "value": true
-                }
-            }
-        },
         {
             "name": "New theme colors",
             "colorsMap": {
@@ -613,237 +602,6 @@
                     "value": "#a6d7a8"
                 }
             }
-        },
-        {
-            "name": "Theme colors",
-            "variables": {
-                "primary-palette-name": {
-                    "name": "Primary",
-                    "type": "material-colorlist",
-                    "enum": [
-                        {
-                            "value": "red",
-                            "text": "Red",
-                            "preview": "#f44336"
-                        },
-                        {
-                            "value": "pink",
-                            "text": "Pink",
-                            "preview": "#e91e63"
-                        },
-                        {
-                            "value": "purple",
-                            "text": "Purple",
-                            "preview": "#9c27b0"
-                        },
-                        {
-                            "value": "deepPurple",
-                            "text": "Deep Purple",
-                            "preview": "#673ab7"
-                        },
-                        {
-                            "value": "indigo",
-                            "text": "Indigo",
-                            "preview": "#3f51b5"
-                        },
-                        {
-                            "value": "blue",
-                            "text": "Blue",
-                            "preview": "#2196f3"
-                        },
-                        {
-                            "value": "lightBlue",
-                            "text": "Light Blue",
-                            "preview": "#03a9f4"
-                        },
-                        {
-                            "value": "cyan",
-                            "text": "Cyan",
-                            "preview": "#00bcd4"
-                        },
-                        {
-                            "value": "teal",
-                            "text": "Teal",
-                            "preview": "#009688"
-                        },
-                        {
-                            "value": "green",
-                            "text": "Green",
-                            "preview": "#4caf50"
-                        },
-                        {
-                            "value": "lightGreen",
-                            "text": "Light Green",
-                            "preview": "#8bc34a"
-                        },
-                        {
-                            "value": "lime",
-                            "text": "Lime",
-                            "preview": "#cddc39"
-                        },
-                        {
-                            "value": "yellow",
-                            "text": "Yellow",
-                            "preview": "#ffeb3b"
-                        },
-                        {
-                            "value": "amber",
-                            "text": "Amber",
-                            "preview": "#ffc107"
-                        },
-                        {
-                            "value": "orange",
-                            "text": "Orange",
-                            "preview": "#ff9800"
-                        },
-                        {
-                            "value": "deepOrange",
-                            "text": "Deep Orange",
-                            "preview": "#ff5722"
-                        },
-                        {
-                            "value": "brown",
-                            "text": "Brown",
-                            "preview": "#795548"
-                        },
-                        {
-                            "value": "gray",
-                            "text": "Gray",
-                            "preview": "#9e9e9e"
-                        },
-                        {
-                            "value": "blueGray",
-                            "text": "Blue Gray",
-                            "preview": "#607d8b"
-                        }
-                    ],
-                    "value": "blueGray"
-                },
-                "secondary-palette-name": {
-                    "name": "Secondary",
-                    "type": "material-colorlist",
-                    "enum": [
-                        {
-                            "value": "red",
-                            "text": "Red",
-                            "preview": "#f44336"
-                        },
-                        {
-                            "value": "pink",
-                            "text": "Pink",
-                            "preview": "#e91e63"
-                        },
-                        {
-                            "value": "purple",
-                            "text": "Purple",
-                            "preview": "#9c27b0"
-                        },
-                        {
-                            "value": "deepPurple",
-                            "text": "Deep Purple",
-                            "preview": "#673ab7"
-                        },
-                        {
-                            "value": "indigo",
-                            "text": "Indigo",
-                            "preview": "#3f51b5"
-                        },
-                        {
-                            "value": "blue",
-                            "text": "Blue",
-                            "preview": "#2196f3"
-                        },
-                        {
-                            "value": "lightBlue",
-                            "text": "Light Blue",
-                            "preview": "#03a9f4"
-                        },
-                        {
-                            "value": "cyan",
-                            "text": "Cyan",
-                            "preview": "#00bcd4"
-                        },
-                        {
-                            "value": "teal",
-                            "text": "Teal",
-                            "preview": "#009688"
-                        },
-                        {
-                            "value": "green",
-                            "text": "Green",
-                            "preview": "#4caf50"
-                        },
-                        {
-                            "value": "lightGreen",
-                            "text": "Light Green",
-                            "preview": "#8bc34a"
-                        },
-                        {
-                            "value": "lime",
-                            "text": "Lime",
-                            "preview": "#cddc39"
-                        },
-                        {
-                            "value": "yellow",
-                            "text": "Yellow",
-                            "preview": "#ffeb3b"
-                        },
-                        {
-                            "value": "amber",
-                            "text": "Amber",
-                            "preview": "#ffc107"
-                        },
-                        {
-                            "value": "orange",
-                            "text": "Orange",
-                            "preview": "#ff9800"
-                        },
-                        {
-                            "value": "deepOrange",
-                            "text": "Deep Orange",
-                            "preview": "#ff5722"
-                        },
-                        {
-                            "value": "brown",
-                            "text": "Brown",
-                            "preview": "#795548"
-                        },
-                        {
-                            "value": "gray",
-                            "text": "Gray",
-                            "preview": "#9e9e9e"
-                        },
-                        {
-                            "value": "blueGray",
-                            "text": "Blue Gray",
-                            "preview": "#607d8b"
-                        }
-                    ],
-                    "value": "pink"
-                },
-                "theme-type": {
-                    "name": "Theme luminosity",
-                    "type": "color-mode",
-                    "enum": [
-                        {
-                            "value": "light",
-                            "text": "Light",
-                            "preview": "#ffffff"
-                        },
-                        {
-                            "value": "dark",
-                            "text": "Dark",
-                            "preview": "#000000"
-                        }
-                    ],
-                    "value": "light"
-                },
-                "adjust-contrast": {
-                    "name": "Adjust contrast",
-                    "type": "boolean",
-                    "value": true
-                }
-            }
         }
     ]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "10.6.0",
+  "version": "11.0.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "10.6.0",
-    "@progress/kendo-theme-utils": "10.6.0"
+    "@progress/kendo-theme-core": "11.0.0-dev.1",
+    "@progress/kendo-theme-utils": "11.0.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "61de20186b040b6e1ac5affab2bac1ef961b6a52"
+  "gitHead": "57358fb664667fda76ce2febcd9bf331796b263c"
 }

package/scss/action-buttons/_layout.scss

@@ -1,4 +1,3 @@
-@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/action-buttons/_layout.scss" as *;
 
 
@@ -6,26 +5,4 @@
 
     @include kendo-action-buttons--layout-base();
 
-    // Actions
-    .k-actions {
-
-        // Button
-        .k-button {
-            @include box-shadow( none );
-        }
-
-
-        // Button group
-        .k-button-group {
-            @include box-shadow( none );
-        }
-
-
-        // Split button
-        .k-split-button {
-            @include box-shadow( none );
-        }
-
-    }
-
 }

package/scss/action-buttons/_theme.scss

@@ -1,6 +1,3 @@
-@use "../core/_index.scss" as *;
-@use "../button/_variables.scss" as *;
-@use "../core/functions/index.import.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/action-buttons/_theme.scss" as *;
 
 
@@ -8,14 +5,4 @@
 
     @include kendo-action-buttons--theme-base();
 
-    // Actions
-    .k-actions {
-
-        .k-button-solid-base {
-            background-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
-            border-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
-        }
-
-    }
-
 }

package/scss/action-buttons/_variables.scss

@@ -2,9 +2,9 @@
 
 
 // Actions
-$kendo-actions-margin-top: k-spacing(4) !default;
-$kendo-actions-padding-x: k-spacing(2) !default;
-$kendo-actions-padding-y: k-spacing(2) !default;
+$kendo-actions-margin-top: 0 !default;
+$kendo-actions-padding-x: k-spacing(6) !default;
+$kendo-actions-padding-y: k-spacing(6) !default;
 $kendo-actions-border-width: 0px !default;
 $kendo-actions-button-spacing: k-spacing(2) !default;
 

package/scss/action-sheet/_layout.scss

@@ -3,4 +3,10 @@
 
 @mixin kendo-action-sheet--layout() {
     @include kendo-action-sheet--layout-base();
+
+    .k-actionsheet-action {
+        .k-icon-wrap {
+            align-self: center;
+        }
+    }
 }

package/scss/action-sheet/_variables.scss

@@ -15,11 +15,11 @@ $kendo-actionsheet-border-radius: 0px !default;
 
 $kendo-actionsheet-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
-$kendo-actionsheet-line-height: math.div( 20, 14 ) !default;
+$kendo-actionsheet-line-height: var( --kendo-line-height, inherit ) !default;
 
-$kendo-actionsheet-bg: $kendo-component-bg !default;
-$kendo-actionsheet-text: $kendo-component-text !default;
-$kendo-actionsheet-border: $kendo-component-border !default;
+$kendo-actionsheet-bg: k-color(surface) !default;
+$kendo-actionsheet-text: k-color(on-app-surface) !default;
+$kendo-actionsheet-border: k-color(border) !default;
 $kendo-actionsheet-shadow: k-elevation(7) !default;
 
 
@@ -27,53 +27,54 @@ $kendo-actionsheet-shadow: k-elevation(7) !default;
 $kendo-actionsheet-titlebar-padding-x: k-spacing(4) !default;
 $kendo-actionsheet-titlebar-padding-y: k-spacing(2) !default;
 $kendo-actionsheet-titlebar-border-width: 1px !default;
-$kendo-actionsheet-titlebar-font-size: var( --kendo-font-size-lg, inherit ) !default;
-$kendo-actionsheet-titlebar-font-family: null !default;
-$kendo-actionsheet-titlebar-line-height: 1.25 !default;
+$kendo-actionsheet-titlebar-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-actionsheet-titlebar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-actionsheet-titlebar-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-actionsheet-titlebar-gap: k-spacing(4) !default;
 
 $kendo-actionsheet-titlebar-bg: null !default;
 $kendo-actionsheet-titlebar-text: null !default;
-$kendo-actionsheet-titlebar-border: $kendo-component-border !default;
+$kendo-actionsheet-titlebar-border: k-color(border) !default;
 $kendo-actionsheet-titlebar-gradient: null !default;
 $kendo-actionsheet-titlebar-shadow: null !default;
 
 $kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, normal ) !default;
-$kendo-actionsheet-subtitle-text: $kendo-subtle-text !default;
+$kendo-actionsheet-subtitle-text: k-color(subtle) !default;
 
 $kendo-actionsheet-footer-border-width: 1px !default;
 
 $kendo-actionsheet-footer-bg: null !default;
 $kendo-actionsheet-footer-text: null !default;
-$kendo-actionsheet-footer-border: $kendo-component-border !default;
+$kendo-actionsheet-footer-border: k-color(border) !default;
 $kendo-actionsheet-footer-gradient: null !default;
 $kendo-actionsheet-footer-shadow: null !default;
 
 // Actionsheet item
 $kendo-actionsheet-item-min-height: 40px !default;
 $kendo-actionsheet-item-padding-x: k-spacing(4) !default;
-$kendo-actionsheet-item-padding-y: k-spacing(2) !default;
-$kendo-actionsheet-item-border-width: 1px !default;
-$kendo-actionsheet-item-spacing: k-spacing(3) !default;
+$kendo-actionsheet-item-padding-y: k-spacing(3.5) !default;
+$kendo-actionsheet-item-border-width: 0 !default;
+$kendo-actionsheet-item-spacing: k-spacing(4) !default;
 
 $kendo-actionsheet-item-title-font-weight: null !default;
 $kendo-actionsheet-item-title-text-transform: null !default;
 
-$kendo-actionsheet-item-description-font-size: .875em !default;
-$kendo-actionsheet-item-description-text: $kendo-subtle-text !default;
+$kendo-actionsheet-item-description-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-actionsheet-item-description-line-height: var( --kendo-line-height-sm, inherit ) !default;
+$kendo-actionsheet-item-description-text: k-color(subtle) !default;
 
-$kendo-actionsheet-item-hover-bg: rgba( black, .04 ) !default;
+$kendo-actionsheet-item-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 $kendo-actionsheet-item-hover-text: null !default;
 $kendo-actionsheet-item-hover-border: null !default;
 $kendo-actionsheet-item-hover-gradient: null !default;
 $kendo-actionsheet-item-hover-shadow: null !default;
 
-$kendo-actionsheet-item-focus-bg: rgba( black, .12 ) !default;
+$kendo-actionsheet-item-focus-bg: null !default;
 $kendo-actionsheet-item-focus-text: null !default;
 $kendo-actionsheet-item-focus-border: null !default;
 $kendo-actionsheet-item-focus-gradient: null !default;
-$kendo-actionsheet-item-focus-shadow: unset !default;
+$kendo-actionsheet-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent) !default;
 
 $kendo-actionsheet-item-disabled-bg: null !default;
 $kendo-actionsheet-item-disabled-text: null !default;
@@ -81,21 +82,20 @@ $kendo-actionsheet-item-disabled-border: null !default;
 $kendo-actionsheet-item-disabled-gradient: null !default;
 $kendo-actionsheet-item-disabled-shadow: null !default;
 
-$kendo-actionsheet-item-hover-background: rgba( black, .04 ) !default;
-$kendo-actionsheet-item-focus-background: rgba( black, .12 ) !default;
-$kendo-actionsheet-item-disabled-opacity: .42 !default;
-
 
 // Adaptive Actionsheet
 $kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !default;
-$kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(4) !default;
+$kendo-adaptive-actionsheet-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(3) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;
 
+$kendo-adaptive-actionsheet-titlebar-border: k-color(border) !default;
+
 $kendo-adaptive-actionsheet-content-padding-y: k-spacing(2) !default;
 $kendo-adaptive-actionsheet-content-padding-x: k-spacing(4) !default;
 
-$kendo-adaptive-actionsheet-footer-padding-y: k-spacing(2) !default;
-$kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
+$kendo-adaptive-actionsheet-footer-padding-y: k-spacing(3) !default;
+$kendo-adaptive-actionsheet-footer-padding-x: k-spacing(3) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/action-sheet/_variables.scss" with (
     $kendo-actionsheet-padding-x: $kendo-actionsheet-padding-x,
@@ -142,6 +142,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
     $kendo-actionsheet-item-title-font-weight: $kendo-actionsheet-item-title-font-weight,
     $kendo-actionsheet-item-title-text-transform: $kendo-actionsheet-item-title-text-transform,
     $kendo-actionsheet-item-description-font-size: $kendo-actionsheet-item-description-font-size,
+    $kendo-actionsheet-item-description-line-height: $kendo-actionsheet-item-description-line-height,
     $kendo-actionsheet-item-description-text: $kendo-actionsheet-item-description-text,
     $kendo-actionsheet-item-hover-bg: $kendo-actionsheet-item-hover-bg,
     $kendo-actionsheet-item-hover-text: $kendo-actionsheet-item-hover-text,
@@ -158,10 +159,8 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-spacing(4) !default;
     $kendo-actionsheet-item-disabled-border: $kendo-actionsheet-item-disabled-border,
     $kendo-actionsheet-item-disabled-gradient: $kendo-actionsheet-item-disabled-gradient,
     $kendo-actionsheet-item-disabled-shadow: $kendo-actionsheet-item-disabled-shadow,
-    $kendo-actionsheet-item-hover-background: $kendo-actionsheet-item-hover-background,
-    $kendo-actionsheet-item-focus-background: $kendo-actionsheet-item-focus-background,
-    $kendo-actionsheet-item-disabled-opacity: $kendo-actionsheet-item-disabled-opacity,
     $kendo-adaptive-actionsheet-font-size: $kendo-adaptive-actionsheet-font-size,
+    $kendo-adaptive-actionsheet-line-height: $kendo-adaptive-actionsheet-line-height,
     $kendo-adaptive-actionsheet-titlebar-padding-y: $kendo-adaptive-actionsheet-titlebar-padding-y,
     $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-x,
     $kendo-adaptive-actionsheet-content-padding-y: $kendo-adaptive-actionsheet-content-padding-y,

package/scss/adaptive/_variables.scss

@@ -2,20 +2,20 @@
 @use "../core/functions/index.import.scss" as *;
 
 // Adaptive Common
-$kendo-adaptive-bg: $kendo-component-bg !default;
-$kendo-adaptive-text: $kendo-component-text !default;
-$kendo-adaptive-border: $kendo-component-border !default;
+$kendo-adaptive-bg: k-color(surface-alt) !default;
+$kendo-adaptive-text: k-color(on-app-surface) !default;
+$kendo-adaptive-border: k-color(border) !default;
 
-$kendo-adaptive-content-bg: $kendo-app-bg !default;
-$kendo-adaptive-content-text: $kendo-app-text !default;
+$kendo-adaptive-content-bg: k-color(app-surface) !default;
+$kendo-adaptive-content-text: k-color(on-app-surface) !default;
 
-$kendo-adaptive-menu-bg: $kendo-color-primary !default;
-$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-adaptive-menu-bg )) !default;
+$kendo-adaptive-menu-bg: k-color(primary) !default;
+$kendo-adaptive-menu-text: k-color(on-primary) !default;
 
-$kendo-adaptive-menu-clear-text: $kendo-color-primary !default;
+$kendo-adaptive-menu-clear-text: k-color(primary) !default;
 
-$kendo-adaptive-menu-item-border: $kendo-component-border !default;
-$kendo-adaptive-menu-title-text: $kendo-component-text !default;
+$kendo-adaptive-menu-item-border: k-color(border) !default;
+$kendo-adaptive-menu-title-text: k-color(on-app-surface) !default;
 
 $kendo-adaptive-border-width: 1px !default;
 $kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
@@ -23,12 +23,12 @@ $kendo-adaptive-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: $kendo-color-primary !default;
+$kendo-adaptive-grid-sort-text: k-color(primary) !default;
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: $kendo-color-primary !default;
+$kendo-adaptive-scheduler-current-text: k-color(primary) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
-$kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
+$kendo-adaptive-scheduler-subtle-text: k-color(subtle) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with (
     $kendo-adaptive-bg: $kendo-adaptive-bg,

package/scss/appbar/_variables.scss

@@ -11,7 +11,7 @@ $kendo-appbar-margin-x: null !default;
 $kendo-appbar-margin-y: null !default;
 /// The horizontal padding of the AppBar.
 /// @group appbar
-$kendo-appbar-padding-x: k-spacing(2) !default;
+$kendo-appbar-padding-x: k-spacing(4) !default;
 /// The vertical padding of the AppBar.
 /// @group appbar
 $kendo-appbar-padding-y: k-spacing(2) !default;
@@ -26,7 +26,7 @@ $kendo-appbar-zindex: 1000 !default;
 $kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the AppBar.
 /// @group appbar
-$kendo-appbar-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-appbar-font-size: var( --kendo-font-size-lg, inherit )  !default;
 /// The line height of the AppBar.
 /// @group appbar
 $kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
@@ -37,25 +37,38 @@ $kendo-appbar-gap: k-spacing(2) !default;
 
 /// The background color of the AppBar based on light theme color.
 /// @group appbar
-$kendo-appbar-light-bg: $kendo-color-light !default;
+$kendo-appbar-light-bg: k-color(light) !default;
 /// TThe text color of the AppBar based on light theme color.
 /// @group appbar
-$kendo-appbar-light-text: if($kendo-enable-color-system, k-color( on-light ), k-contrast-color( $kendo-color-light )) !default;
+$kendo-appbar-light-text: k-color(on-light) !default;
 
 /// The background color of the AppBar based on dark theme color.
 /// @group appbar
-$kendo-appbar-dark-bg: $kendo-color-dark !default;
+$kendo-appbar-dark-bg: k-color(dark) !default;
 /// The text color of the AppBar based on dark theme color.
 /// @group appbar
-$kendo-appbar-dark-text: if($kendo-enable-color-system, k-color( on-dark ), k-contrast-color( $kendo-color-dark )) !default;
+$kendo-appbar-dark-text: k-color(on-dark) !default;
 
 /// The box shadow of the AppBar.
 /// @group appbar
-$kendo-appbar-box-shadow: k-elevation(4) !default;
+$kendo-appbar-box-shadow: null !default;
 /// The box shadow of the AppBar with bottom position.
 /// @group appbar
 $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;
 
+$kendo-appbar-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
+) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with (
     $kendo-appbar-margin-x: $kendo-appbar-margin-x,
     $kendo-appbar-margin-y: $kendo-appbar-margin-y,
@@ -72,5 +85,6 @@ $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;
     $kendo-appbar-dark-bg: $kendo-appbar-dark-bg,
     $kendo-appbar-dark-text: $kendo-appbar-dark-text,
     $kendo-appbar-box-shadow: $kendo-appbar-box-shadow,
-    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow
+    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow,
+    $kendo-appbar-theme-colors: $kendo-appbar-theme-colors
 );

package/scss/avatar/_variables.scss

@@ -26,7 +26,18 @@ $kendo-avatar-sizes: (
 
 /// The theme colors map of the Avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $kendo-theme-colors !default;
+$kendo-avatar-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with (
     $kendo-avatar-border-width: $kendo-avatar-border-width,

package/scss/badge/_layout.scss

@@ -1,6 +1,5 @@
 @use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *;
 
-
 @mixin kendo-badge--layout() {
     @include kendo-badge--layout-base();
 }