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

package/lib/swatches/material-2-dark.json

@@ -3,7 +3,7 @@
     "name": "Material 2 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-2.json

@@ -3,7 +3,7 @@
     "name": "Material 2",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-aqua-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#3f51b5",
         "#2196f3",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

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

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#141218",
         "#2B2930",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#FEFBFF",
         "#F7F3FA",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.1.0-dev.2",
+    "version": "12.1.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "12.1.0-dev.2",
+  "version": "12.1.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -55,12 +55,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

@@ -28,7 +28,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 (
     $kendo-adaptive-bg: $kendo-adaptive-bg,

package/scss/appbar/_variables.scss

@@ -27,10 +27,10 @@ $kendo-appbar-zindex: k-z-index("banner") !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-lg, inherit )  !default;
+$kendo-appbar-font-size: var( --kendo-font-size-xl, inherit )  !default;
 /// The line height of the AppBar.
 /// @group appbar
-$kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-appbar-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The spacing between the AppBar sections.
 /// @group appbar

package/scss/calendar/_variables.scss

@@ -49,9 +49,6 @@ $kendo-calendar-header-border-width: 0px !default;
 /// The background color of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-bg: transparent !default;
-/// The text color of the header in the Calendar.
-/// @group calendar
-$kendo-calendar-header-text: k-color(primary-on-surface) !default;
 /// The border color of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-border: k-color(border) !default;
@@ -144,7 +141,7 @@ $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 
 /// The gap between the items in the Calendar view.
 /// @group calendar
-$kendo-calendar-view-gap: k-spacing(4) !default;
+$kendo-calendar-view-gap: k-spacing(6) !default;
 
 /// The background color of the weekend cells in the Calendar.
 /// @group calendar
@@ -158,7 +155,7 @@ $kendo-calendar-weekend-text: null !default;
 $kendo-calendar-today-style: color !default;
 /// The color of the current day in the Calendar.
 /// @group calendar
-$kendo-calendar-today-color: k-color(primary) !default;
+$kendo-calendar-today-color: k-color(primary-on-surface) !default;
 /// The font weight of the current day in the Calendar.
 /// @group calendar
 $kendo-calendar-today-font-weight: var( --kendo-font-weight-normal, normal ) !default;
@@ -233,7 +230,7 @@ $kendo-calendar-cell-selected-focus-shadow: null !default;
 
 /// The width of the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-width: k-spacing(19) !default;
+$kendo-calendar-navigation-width: 5em !default;
 /// The height of the items in the Calendar navigation.
 /// @group calendar
 $kendo-calendar-navigation-item-height: $kendo-calendar-cell-size !default;
@@ -379,7 +376,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

@@ -42,7 +42,7 @@ $kendo-card-bg: k-color(surface) !default;
 $kendo-card-text: k-color(on-app-surface) !default;
 /// The border color of the Card.
 /// @group card
-$kendo-card-border: k-color(border) !default;
+$kendo-card-border: transparent !default;
 /// The shadow of the Card.
 /// @group card
 $kendo-card-shadow: k-elevation(1) !default;
@@ -54,7 +54,7 @@ $kendo-card-focus-bg: null !default;
 $kendo-card-focus-text: null !default;
 /// The border color of the focused Card.
 /// @group card
-$kendo-card-focus-border: k-color(border) !default;
+$kendo-card-focus-border: transparent !default;
 
 // TODO: double-check: the default theme is not supposed to elevate the Card on focus
 
@@ -151,12 +151,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
@@ -244,7 +241,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/chip/_theme.scss

@@ -52,12 +52,12 @@
             &:active,
             &.k-active,
             &.k-selected {
-                background-color: if( $name == "base", color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, k-color($name) 12%, transparent));
+                background-color: if( $name == "base", $kendo-chip-outline-selected-bg, color-mix(in srgb, k-color($name) 12%, transparent));
             }
 
             &:hover,
             &.k-hover {
-                background-color: if( $name == "base", color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, k-color($name) 8%, transparent));
+                background-color: if( $name == "base", $kendo-chip-outline-hover-bg, color-mix(in srgb, k-color($name) 8%, transparent));
             }
 
             &:focus,

package/scss/chip/_variables.scss

@@ -146,14 +146,14 @@ $kendo-chip-outline-shadow: null !default;
 
 /// The base background color of the hovered outline Chip.
 /// @group chip
-$kendo-chip-outline-hover-bg: k-color(base-subtle-hover) !default;
+$kendo-chip-outline-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The base text color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-text: $kendo-chip-outline-text !default;
 
 /// The base background color of the selected outline Chip.
 /// @group chip
-$kendo-chip-outline-selected-bg: k-color(base-subtle-active) !default;
+$kendo-chip-outline-selected-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The base text color of the selected outline Chip.
 /// @group chip
 $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;

package/scss/color-preview/_variables.scss

@@ -9,8 +9,8 @@ $kendo-color-preview-text: null !default;
 $kendo-color-preview-border: k-color(border) !default;
 $kendo-color-preview-hover-border: k-color(border) !default;
 
-$kendo-color-preview-no-color-bg: $kendo-color-white !default;
-$kendo-color-preview-no-color-text: k-color(error) !default;
+$kendo-color-preview-no-color-bg: k-color(surface-alt) !default;
+$kendo-color-preview-no-color-text: k-color(error-on-surface) !default;
 $kendo-color-preview-no-color-border: null !default;
 
 $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$kendo-color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;

package/scss/coloreditor/_variables.scss

@@ -135,7 +135,7 @@ $kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group color-editor
-$kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+$kendo-color-editor-color-gradient-focus-outline-color: color-mix(in srgb, k-color(dark) 30%, transparent) !default;
 /// The outline width of the focused ColorGradient.
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;

package/scss/colorgradient/_variables.scss

@@ -166,13 +166,13 @@ $kendo-color-gradient-draghandle-text: null !default;
 $kendo-color-gradient-draghandle-bg: transparent !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-border: rgba( white, .8 ) !default;
+$kendo-color-gradient-draghandle-border: color-mix(in srgb, k-color(light) 80%, transparent) !default;
 /// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-black !default;
+$kendo-color-gradient-draghandle-focus-shadow: k-color(inverse) !default;
 /// The outline color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-black !default;
+$kendo-color-gradient-draghandle-hover-shadow: k-color(inverse) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group color-gradient
 $kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;

package/scss/colorpalette/_variables.scss

@@ -38,13 +38,13 @@ $kendo-color-palette-lg-tile-width: k-spacing(8) !default;
 $kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
-$kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
+$kendo-color-palette-tile-focus-shadow: 0 0 3px 1px color-mix(in srgb, k-color(dark) 30%, transparent), inset 0 0 0 1px rcolor-mix(in srgb, k-color(light) 50%, transparent) !default;
 /// The shadow of the ColorPalette hovered tile.
 /// @group color-palette
-$kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
+$kendo-color-palette-tile-hover-shadow: 0 0 3px 1px color-mix(in srgb, k-color(dark) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, k-color(light) 80%, transparent) !default;
 /// The shadow of the ColorPalette selected tile.
 /// @group color-palette
-$kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
+$kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px color-mix(in srgb, k-color(dark) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, k-color(light) 100%, transparent) !default;
 
 /// The size map of the ColorPalette.
 /// @group color-palette

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

@@ -37,7 +37,7 @@ $kendo-expander-focus-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20
 $kendo-expander-header-padding-x: k-spacing(6) !default;
 /// The vertical padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-y: k-spacing(3.5) !default;
+$kendo-expander-header-padding-y: k-spacing(3) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander

package/scss/filter/_variables.scss

@@ -22,10 +22,10 @@ $kendo-filter-operator-dropdown-width: 15em !default;
 
 /// The text color of the Filter preview field.
 /// @group filter
-$kendo-filter-preview-field-text: k-color(primary) !default;
+$kendo-filter-preview-field-text: k-color(primary-on-surface) !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

package/scss/floating-label/_variables.scss

@@ -51,7 +51,7 @@ $kendo-floating-label-text: k-color(subtle) !default;
 $kendo-floating-label-focus-bg: null !default;
 /// The text color of the focused Floating Label.
 /// @group floating-label
-$kendo-floating-label-focus-text: k-color(primary) !default;
+$kendo-floating-label-focus-text: k-color(primary-on-surface) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
     $kendo-floating-label-scale: $kendo-floating-label-scale,

package/scss/forms/_variables.scss

@@ -46,7 +46,7 @@ $kendo-form-legend-width: 100% !default;
 $kendo-form-legend-font-size: var( --kendo-font-size, inherit ) !default;
 /// The text capitalization of the Form legend.
 /// @group form
-$kendo-form-legend-text-transform: uppercase !default;
+$kendo-form-legend-text-transform: none !default;
 
 /// The bottom margin of the Form label.
 /// @group form
@@ -67,10 +67,10 @@ $kendo-form-hint-margin-top: k-spacing(1) !default;
 $kendo-form-sm-rows-spacing: k-spacing(4) !default;
 /// The row spacing of the medium Form.
 /// @group form
-$kendo-form-md-rows-spacing: k-spacing(6) !default;
+$kendo-form-md-rows-spacing: k-spacing(5) !default;
 /// The row spacing of the large Form.
 /// @group form
-$kendo-form-lg-rows-spacing: k-spacing(7) !default;
+$kendo-form-lg-rows-spacing: k-spacing(6) !default;
 
 /// The margin of the Form separator.
 /// @group form
@@ -115,7 +115,7 @@ $kendo-label-optional-margin-x: k-spacing(1.5) !default;
 $kendo-label-optional-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font style of the optional label in the Form.
 /// @group form
-$kendo-label-optional-font-style: italic !default;
+$kendo-label-optional-font-style: normal !default;
 
 
 /// The margin of the Form fieldset.

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(base-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) !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(app-surface) !default;
 $kendo-image-editor-content-text: null !default;
 $kendo-image-editor-content-border: null !default;
 
@@ -41,7 +41,7 @@ $kendo-image-editor-crop-bg: null !default;
 $kendo-image-editor-crop-text: null !default;
 $kendo-image-editor-crop-border: white !default;
 
-$kendo-image-editor-crop-overlay-bg: rgba( black, .3 ) !default;
+$kendo-image-editor-crop-overlay-bg: color-mix(in srgb, k-color(inverse) 30%, transparent) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/imageeditor/_variables.scss" with (
     $kendo-image-editor-margin-y: $kendo-image-editor-margin-y,

package/scss/list/_variables.scss

@@ -280,7 +280,7 @@ $kendo-list-item-focus-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(on-app
 $kendo-list-item-selected-bg: null !default;
 /// The text color of the selected List items.
 /// @group list
-$kendo-list-item-selected-text: k-color(primary) !default;
+$kendo-list-item-selected-text: k-color(primary-on-surface) !default;
 
 /// The background color of the List group items.
 /// @group list

package/scss/listview/_variables.scss

@@ -41,7 +41,7 @@ $kendo-listview-item-padding-y: k-spacing(1) !default;
 
 /// The text color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-text: k-color(primary)  !default;
+$kendo-listview-item-selected-text: k-color(primary-on-surface)  !default;
 /// The background color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-bg: null !default;

package/scss/orgchart/_variables.scss

@@ -86,7 +86,7 @@ $kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit )
 $kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-spacer !default;
 /// The line height of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-text: rgba( black, .54 ) !default;
+$kendo-orgchart-node-group-subtitle-text: k-color(subtle) !default;
 
 /// The width of the OrgChart Card.
 /// @group orgchart
@@ -127,7 +127,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/overlay/_variables.scss

@@ -13,7 +13,7 @@ $kendo-overlay-theme-colors: (
     "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
 ) !default;
 
-$kendo-overlay-bg: $kendo-color-black !default;
+$kendo-overlay-bg: k-color(inverse) !default;
 $kendo-overlay-opacity: .32 !default;
 
 @forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (

package/scss/pdf-viewer/_variables.scss

@@ -59,7 +59,7 @@ $kendo-pdf-viewer-page-spacing: k-spacing(7.5) !default;
 
 /// The background color of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-bg: white !default;
+$kendo-pdf-viewer-page-bg: k-color(surface-alt) !default;
 /// The text color of the PDFViewer page.
 /// @group pdf-viewer
 $kendo-pdf-viewer-page-text: k-color(on-app-surface) !default;
@@ -134,10 +134,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 (
     $kendo-pdf-viewer-border-width: $kendo-pdf-viewer-border-width,

package/scss/progressbar/_variables.scss

@@ -5,7 +5,7 @@
 
 /// The height of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-height: 5px !default;
+$kendo-progressbar-height: 4px !default;
 /// The horizontal width of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-horizontal-width: 100% !default;

package/scss/rating/_variables.scss

@@ -35,7 +35,7 @@ $kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The text color of the Rating icon.
 /// @group rating
-$kendo-rating-icon-text: k-color(subtle) !default;
+$kendo-rating-icon-text: k-color(on-app-surface) !default;
 /// The text color of the selected Rating icon.
 /// @group rating
 $kendo-rating-icon-selected-text: k-color(primary-active) !default;
@@ -48,10 +48,10 @@ $kendo-rating-icon-focus-text: k-color(primary-active) !default;
 
 /// The shadow of the focused Rating icon.
 /// @group rating
-$kendo-rating-icon-focus-shadow: 0 2px 4px rgba( black, .1 ) !default;
+$kendo-rating-icon-focus-shadow: 0 2px 4px color-mix(in srgb, k-color(inverse) 10%, transparent) !default;
 /// The shadow of the focused and selected Rating icon.
 /// @group rating
-$kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default;
+$kendo-rating-icon-focus-selected-shadow: 0 2px 4px color-mix(in srgb, k-color(inverse) 10%, transparent) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/rating/_variables.scss" with (
     $kendo-rating-font-family: $kendo-rating-font-family,