@progress/kendo-theme-classic 12.1.0-dev.2 → 12.1.0-dev.3

package/lib/swatches/classic-green-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Green Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#131413",

package/lib/swatches/classic-green.json

@@ -3,7 +3,7 @@
     "name": "Classic Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f3f4f3",

package/lib/swatches/classic-lavender-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Lavender Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#1b141a",

package/lib/swatches/classic-lavender.json

@@ -3,7 +3,7 @@
     "name": "Classic Lavender",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#fafafa",

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

@@ -3,7 +3,7 @@
     "name": "Classic Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#101010",

package/lib/swatches/classic-main.json

@@ -3,7 +3,7 @@
     "name": "Classic Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f0f0f0",

package/lib/swatches/classic-metro-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Metro Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#0e0e0e",

package/lib/swatches/classic-metro.json

@@ -3,7 +3,7 @@
     "name": "Classic Metro",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f9f9f9",

package/lib/swatches/classic-moonlight.json

@@ -3,7 +3,7 @@
     "name": "Classic Moonlight",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#1f2a35",
         "#303742",

package/lib/swatches/classic-opal-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#272727",

package/lib/swatches/classic-opal.json

@@ -3,7 +3,7 @@
     "name": "Classic Opal",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#def4fd",

package/lib/swatches/classic-silver-dark.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#000000",
         "#131314",

package/lib/swatches/classic-silver.json

@@ -3,7 +3,7 @@
     "name": "Classic Silver",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f3f3f4",

package/lib/swatches/classic-uniform.json

@@ -3,7 +3,7 @@
     "name": "Classic Uniform",
     "product": "kendo",
     "base": "@progress/kendo-theme-classic",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#f0f0f0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "12.1.0-dev.2",
+  "version": "12.1.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.5.0",
-    "@progress/kendo-theme-core": "12.1.0-dev.2",
-    "@progress/kendo-theme-utils": "12.1.0-dev.2"
+    "@progress/kendo-theme-core": "12.1.0-dev.3",
+    "@progress/kendo-theme-utils": "12.1.0-dev.3"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "e99d3c1caaddd333f4d74beb7f2061382f0d2241"
+  "gitHead": "71fe28c36a28e15bfd6c0934fa049a4933e9f184"
 }

package/scss/adaptive/_variables.scss

@@ -30,7 +30,7 @@ $kendo-adaptive-grid-sort-text: k-color(primary) !default;
 // Adaptive Scheduler
 $kendo-adaptive-scheduler-current-text: k-color(primary) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
-$kendo-adaptive-scheduler-subtle-text: k-color(subtle) !default;
+$kendo-adaptive-scheduler-subtle-text: k-color(on-app-surface) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with (

package/scss/avatar/_variables.scss

@@ -13,7 +13,7 @@ $kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
 $kendo-avatar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Avatar.
 /// @group avatar
-$kendo-avatar-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-avatar-line-height: var( --kendo-line-height-xs, normal ) !default;
 
 /// The sizes map of the Avatar.
 /// @group avatar

package/scss/breadcrumb/_variables.scss

@@ -53,17 +53,17 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height-lg, normal ) !default
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-bg: k-color(surface-alt) !default;
+$kendo-breadcrumb-bg: transparent !default;
 /// The base text color of the Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-text: k-color(on-app-surface) !default;
 /// The base border color of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-border: k-color(border) !default;
+$kendo-breadcrumb-border: transparent !default;
 
 /// The box shadow of the focused Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px k-color(border) !default;
 
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb

package/scss/calendar/_variables.scss

@@ -47,9 +47,6 @@ $kendo-calendar-header-border-width: 1px !default;
 /// The background color of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-bg: k-color(surface) !default;
-/// The text color of the header in the Calendar.
-/// @group calendar
-$kendo-calendar-header-text: k-color(on-app-surface) !default;
 /// The border color of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-border: k-color(border) !default;
@@ -58,7 +55,7 @@ $kendo-calendar-header-border: k-color(border) !default;
 $kendo-calendar-header-gradient: null !default;
 /// The shadow of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-shadow: unset !default;
+$kendo-calendar-header-shadow: null !default;
 
 /// The gap between the items in the navigation of the Calendar.
 /// @group calendar
@@ -240,7 +237,7 @@ $kendo-calendar-navigation-item-height: 2em !default;
 $kendo-calendar-navigation-bg: $kendo-calendar-header-bg !default;
 /// The text color of the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
+$kendo-calendar-navigation-text: k-color(on-app-surface) !default;
 /// The border color of the Calendar navigation.
 /// @group calendar
 $kendo-calendar-navigation-border: $kendo-calendar-header-border !default;
@@ -372,7 +369,6 @@ $kendo-calendar-sizes: (
     $kendo-calendar-header-padding-y: $kendo-calendar-header-padding-y,
     $kendo-calendar-header-border-width: $kendo-calendar-header-border-width,
     $kendo-calendar-header-bg: $kendo-calendar-header-bg,
-    $kendo-calendar-header-text: $kendo-calendar-header-text,
     $kendo-calendar-header-border: $kendo-calendar-header-border,
     $kendo-calendar-header-gradient: $kendo-calendar-header-gradient,
     $kendo-calendar-header-shadow: $kendo-calendar-header-shadow,

package/scss/card/_variables.scss

@@ -150,12 +150,9 @@ $kendo-card-subtitle-text: k-color(subtle) !default;
 /// The maximum width of the Card image.
 /// @group card
 $kendo-card-img-max-width: 100px !default;
-/// The size of the Avatar in the Card.
-/// @group card
-$kendo-card-avatar-size: 45px !default;
 /// The spacing between the Avatar and the text in the Card.
 /// @group card
-$kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
+$kendo-card-avatar-spacing: k-spacing(2) !default;
 
 /// The horizontal padding of the Card actions.
 /// @group card
@@ -245,7 +242,6 @@ $kendo-card-theme-colors: (
     $kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing,
     $kendo-card-subtitle-text: $kendo-card-subtitle-text,
     $kendo-card-img-max-width: $kendo-card-img-max-width,
-    $kendo-card-avatar-size: $kendo-card-avatar-size,
     $kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
     $kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
     $kendo-card-actions-padding-y: $kendo-card-actions-padding-y,

package/scss/checkbox/_variables.scss

@@ -102,7 +102,7 @@ $kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
 $kendo-checkbox-focus-border: null !default;
 /// The box shadow of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 2px rgba( black, .06 ) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 2px k-color(border) !default;
 /// The border color of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: null !default;
@@ -132,10 +132,10 @@ $kendo-checkbox-disabled-checked-border: null !default;
 
 /// The text color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: k-color(error) !default;
+$kendo-checkbox-invalid-text: k-color(error-on-surface) !default;
 /// The border color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: k-color(error) !default;
+$kendo-checkbox-invalid-border: k-color(error-on-surface) !default;
 
 
 // CheckBox indicator

package/scss/chip/_variables.scss

@@ -52,7 +52,7 @@ $kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-line-height: 1 !default;
+$kendo-chip-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The small Chip's line height that is related to the $kendo-font-size.
 /// @group chip
 $kendo-chip-sm-line-height: $kendo-chip-line-height !default;
@@ -99,10 +99,10 @@ $kendo-chip-base-bg: $kendo-button-bg !default;
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": k-color(error),
-    "info": k-color(info),
-    "warning": k-color(warning),
-    "success": k-color(success)
+    "error": k-color(error-subtle),
+    "info": k-color(info-subtle),
+    "warning": k-color(warning-subtle),
+    "success": k-color(success-subtle)
 ) !default;
 
 /// The base background color of the solid Chip.
@@ -110,13 +110,13 @@ $kendo-chip-theme-colors: (
 $kendo-chip-solid-bg: $kendo-chip-base-bg !default;
 /// The base text color of the solid Chip.
 /// @group chip
-$kendo-chip-solid-text: $kendo-button-text !default;
+$kendo-chip-solid-text: k-color(base-on-subtle) !default;
 /// The base border color of the solid Chip.
 /// @group chip
-$kendo-chip-solid-border: $kendo-button-border !default;
+$kendo-chip-solid-border: k-color(base-emphasis) !default;
 /// The base shadow of the solid Chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 16%, transparent) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px color-mix(in srgb, k-color(base-on-surface) 16%, transparent) !default;
 /// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -141,7 +141,7 @@ $kendo-chip-outline-text: k-color(base-on-surface) !default;
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of the outline Chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 16%, transparent) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px color-mix(in srgb, k-color(base-on-surface) 16%, transparent) !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip

package/scss/dialog/_variables.scss

@@ -29,7 +29,7 @@ $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 
 /// The background color of the Dialog.
 /// @group dialog
-$kendo-dialog-bg: k-color(app-surface) !default;
+$kendo-dialog-bg: k-color(surface-alt) !default;
 
 /// The theme colors map for the Dialog.
 /// @group dialog

package/scss/dock-manager/_variables.scss

@@ -64,7 +64,7 @@ $kendo-dock-manager-tabbed-pane-padding-x: k-spacing(2) !default;
 $kendo-dock-manager-unpinned-container-width: 300px !default;
 /// The background-color of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-bg: $kendo-color-white !default;
+$kendo-dock-manager-unpinned-container-bg: k-color(surface-alt) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;
@@ -74,7 +74,7 @@ $kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.0
 $kendo-dock-indicator-padding: k-spacing(1.5) !default;
 /// The background color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-bg: #f5f5f5 !default;
+$kendo-dock-indicator-bg: k-color(surface) !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-text: k-color(primary) !default;
@@ -89,14 +89,14 @@ $kendo-dock-indicator-outline-style: solid !default;
 $kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
 /// The box shadow of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) ) !default;
+$kendo-dock-indicator-shadow: k-elevation(3) !default;
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-hover-bg: k-color(primary) !default;
 /// The text color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-text: $kendo-color-white !default;
+$kendo-dock-indicator-hover-text: k-color(on-primary) !default;
 
 /// The width of the border around the dropping area in the DockManager component.
 /// @group dock-manager

package/scss/drawer/_variables.scss

@@ -39,16 +39,16 @@ $kendo-drawer-content-padding-y: null !default;
 $kendo-drawer-scrollbar-width: 7px !default;
 /// The color of the Drawer scrollbar track.
 /// @group drawer
-$kendo-drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
+$kendo-drawer-scrollbar-color: color-mix(in srgb, k-color(inverse) 70%, transparent) !default;
 /// The background color of the Drawer scrollbar thumb.
 /// @group drawer
-$kendo-drawer-scrollbar-bg: #dedede !default;
+$kendo-drawer-scrollbar-bg: color-mix(in srgb, k-color(inverse-subtle), k-color(on-inverse)) !default;
 /// The border radius of the Drawer scrollbar.
 /// @group drawer
 $kendo-drawer-scrollbar-radius: 20px !default;
 /// The hover color of the Drawer scrollbar track.
 /// @group drawer
-$kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
+$kendo-drawer-scrollbar-hover-color: $kendo-drawer-scrollbar-color !default;
 
 /// The horizontal padding of the Drawer items.
 /// @group drawer

package/scss/editor/_variables.scss

@@ -34,7 +34,7 @@ $kendo-editor-selected-bg: k-color(primary) !default;
 
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: k-color(primary-subtle) !default;
+$kendo-editor-highlighted-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor

package/scss/expansion-panel/_variables.scss

@@ -63,7 +63,7 @@ $kendo-expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: k-color(primary) !default;
+$kendo-expander-title-text: k-color(primary-on-surface) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander

package/scss/fab/_variables.scss

@@ -129,7 +129,7 @@ $kendo-fab-sizes: (
 $kendo-fab-shadow: k-elevation(5) !default;
 /// The shadow of the disabled FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: k-elevation(5) !default;
+$kendo-fab-disabled-shadow: null !default;
 /// The shadow of the active FAB.
 /// @group floating-action-button
 $kendo-fab-active-shadow: null !default;

package/scss/filter/_variables.scss

@@ -25,11 +25,11 @@ $kendo-filter-operator-dropdown-width: 15em !default;
 $kendo-filter-preview-field-text: k-color(primary) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
-$kendo-filter-preview-operator-text: k-color(subtle) !default;
+$kendo-filter-preview-operator-text: k-color(on-app-surface) !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter
-$kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$kendo-filter-toolbar-focus-shadow: 0 0 0 2px k-color(border-alt) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/filter/_variables.scss" with (

package/scss/gantt/_variables.scss

@@ -228,13 +228,13 @@ $kendo-gantt-validation-tooltip-width: 200px !default;
 $kendo-gantt-validation-tooltip-label-width: 50px !default;
 /// The border color of the Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-border: #656565 !default;
+$kendo-gantt-validation-tooltip-border: k-color(inverse-emphasis) !default;
 /// The border color of the valid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-valid-border: k-color(success) !default;
+$kendo-gantt-validation-tooltip-valid-border: k-color(success-emphasis) !default;
 /// The border color of the invalid Gantt validation Tooltip.
 /// @group gantt
-$kendo-gantt-validation-tooltip-invalid-border: k-color(error) !default;
+$kendo-gantt-validation-tooltip-invalid-border: k-color(error-emphasis) !default;
 
 /// The horizontal padding of the Gantt task Tooltip.
 /// @group gantt

package/scss/imageeditor/_variables.scss

@@ -29,7 +29,7 @@ $kendo-image-editor-bg: k-color(surface-alt) !default;
 $kendo-image-editor-text: k-color(on-app-surface) !default;
 $kendo-image-editor-border: k-color(border) !default;
 
-$kendo-image-editor-content-bg: #c6c6c6 !default;
+$kendo-image-editor-content-bg: k-color(surface) !default;
 $kendo-image-editor-content-text: null !default;
 $kendo-image-editor-content-border: null !default;
 

package/scss/input/_variables.scss

@@ -277,7 +277,7 @@ $kendo-input-suffix-bg: null !default;
 
 /// The border color of the invalid Input components.
 /// @group input
-$kendo-input-invalid-border: k-color(error) !default;
+$kendo-input-invalid-border: k-color(error-on-surface) !default;
 /// The shadow of the invalid Input components.
 /// @group input
 $kendo-input-invalid-shadow: null !default;
@@ -351,7 +351,7 @@ $kendo-picker-disabled-shadow: null !default;
 $kendo-picker-outline-bg: null !default;
 /// The text color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-text: $kendo-button-text !default;
+$kendo-picker-outline-text: k-color(on-app-surface) !default;
 /// The border color of the outline Picker components.
 /// @group picker
 $kendo-picker-outline-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
@@ -394,7 +394,7 @@ $kendo-picker-outline-hover-focus-border: null !default;
 $kendo-picker-flat-bg: null !default;
 /// The text color of the flat Picker components.
 /// @group picker
-$kendo-picker-flat-text: $kendo-button-text !default;
+$kendo-picker-flat-text: k-color(on-app-surface) !default;
 /// The border color of the flat Picker components.
 /// @group picker
 $kendo-picker-flat-border: $kendo-button-border !default;

package/scss/list/_variables.scss

@@ -256,7 +256,7 @@ $kendo-list-item-text: null !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: k-color(base-hover) !default;
+$kendo-list-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent ) !default;
 /// The text color of the hovered List items.
 /// @group list
 $kendo-list-item-hover-text: k-color(on-app-surface) !default;
@@ -269,7 +269,7 @@ $kendo-list-item-focus-bg: null !default;
 $kendo-list-item-focus-text: null !default;
 /// The box shadow of the focused List items.
 /// @group list
-$kendo-list-item-focus-shadow: inset 0 0 0 2px rgba( black, .12 ) !default;
+$kendo-list-item-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 /// The background color of the selected List items.
 /// @group list

package/scss/listview/_variables.scss

@@ -59,7 +59,7 @@ $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with (

package/scss/menu/_variables.scss

@@ -83,7 +83,7 @@ $kendo-menu-item-hover-gradient: null !default;
 $kendo-menu-item-active-bg: null !default;
 /// The text color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-text: k-color(on-app-surface) !default;
+$kendo-menu-item-active-text: k-color(primary-on-surface) !default;
 /// The border color of active Menu item.
 /// @group menu
 $kendo-menu-item-active-border: null !default;
@@ -100,7 +100,7 @@ $kendo-menu-item-focus-shadow: inset 0 0 3px 1px color-mix(in srgb, k-color(on-a
 $kendo-menu-item-selected-bg: null !default;
 /// The text color of selected Menu item.
 /// @group menu
-$kendo-menu-item-selected-text: unset !default;
+$kendo-menu-item-selected-text: k-color(primary-on-surface) !default;
 /// The border color of selected Menu item.
 /// @group menu
 $kendo-menu-item-selected-border: null !default;
@@ -241,7 +241,7 @@ $kendo-menu-popup-item-gradient: null !default;
 
 /// The background color of hovered Menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
+$kendo-menu-popup-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The text color of hovered Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;

package/scss/orgchart/_variables.scss

@@ -129,7 +129,7 @@ $kendo-orgchart-card-body-border-color: transparent !default;
 $kendo-orgchart-card-body-vbox-margin-right: list.slash( $kendo-orgchart-spacer, 2 ) !default;
 /// The min height of the OrgChart Card body title wrap.
 /// @group orgchart
-$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
+$kendo-orgchart-card-body-vbox-min-height: k-spacing(11) !default;
 
 /// The size of the OrgChart connecting line.
 /// @group orgchart

package/scss/pager/_variables.scss

@@ -70,7 +70,7 @@ $kendo-pager-border: k-color(border) !default;
 $kendo-pager-focus-bg: null !default;
 /// The box shadow of the focused Pager.
 /// @group pager
-$kendo-pager-focus-shadow: $kendo-focus-shadow !default;
+$kendo-pager-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 /// The border width of the Pager items.
 /// @group pager

package/scss/panelbar/_variables.scss

@@ -69,7 +69,7 @@ $kendo-panelbar-header-gradient: null !default;
 
 /// The background color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-bg: k-color(base-hover) !default;
+$kendo-panelbar-header-hover-bg: color-mix( in srgb, k-color(on-app-surface) 8%, transparent ) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-text: k-color(on-app-surface) !default;
@@ -163,7 +163,7 @@ $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
 /// The background color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-bg: k-color(base-subtle-hover) !default;
+$kendo-panelbar-item-hover-bg: color-mix( in srgb, k-color(on-app-surface) 8%, transparent ) !default;
 /// The text color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-text: null !default;

package/scss/pdf-viewer/_variables.scss

@@ -132,10 +132,10 @@ $kendo-pdf-viewer-highlight-annotation-hover-border: k-color(primary-hover) !def
 $kendo-pdf-viewer-free-text-annotation-border: k-color(primary) !default;
 /// The placeholder text color of the PDFViewer free text annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-free-text-annotation-placeholder-text: rgba(124, 22, 27, 0.5) !default;
+$kendo-pdf-viewer-free-text-annotation-placeholder-text: k-color(primary-on-subtle) !default;
 /// The text color of the PDFViewer free text annotation.
 /// @group pdf-viewer
-$kendo-pdf-viewer-free-text-annotation-text: rgba(124, 22, 27, 0.7) !default;
+$kendo-pdf-viewer-free-text-annotation-text: k-color(primary-on-subtle) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/pdf-viewer/_variables.scss" with (

package/scss/scheduler/_variables.scss

@@ -111,7 +111,7 @@ $kendo-scheduler-event-selected-border: null !default;
 $kendo-scheduler-event-selected-gradient: null !default;
 /// The shadow of the selected Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-selected-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
+$kendo-scheduler-event-selected-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 /// The shadow of the ongoing Scheduler event.
 /// @group scheduler