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

package/lib/swatches/all.json

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

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

@@ -3,7 +3,7 @@
     "name": "Fluent 1 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.2",
+    "version": "12.0.0-dev.3",
     "previewColors": [
         "#1b1a19",
         "#21201f",

package/lib/swatches/fluent-1.json

@@ -3,7 +3,7 @@
     "name": "Fluent 1",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.2",
+    "version": "12.0.0-dev.3",
     "previewColors": [
         "#ffffff",
         "#faf9f8",

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

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.2",
+    "version": "12.0.0-dev.3",
     "previewColors": [
         "#1F1F1F",
         "#292929",
@@ -139,7 +139,7 @@
                 "primary-on-subtle": {
                     "name": "Primary On Subtle",
                     "type": "color",
-                    "value": "#0A2E4A"
+                    "value": "#EBF3FC"
                 },
                 "on-primary": {
                     "name": "On Primary",
@@ -149,7 +149,7 @@
                 "primary-on-surface": {
                     "name": "Primary On Surface",
                     "type": "color",
-                    "value": "#0F6CBD"
+                    "value": "#479EF5"
                 },
                 "secondary-subtle": {
                     "name": "Secondary Subtle",
@@ -554,52 +554,52 @@
                 "inverse-subtle": {
                     "name": "Inverse Subtle",
                     "type": "color",
-                    "value": "#d2d0ce"
+                    "value": "#ADADAD"
                 },
                 "inverse-subtle-hover": {
                     "name": "Inverse Subtle Hover",
                     "type": "color",
-                    "value": "#c8c6c4"
+                    "value": "#999999"
                 },
                 "inverse-subtle-active": {
                     "name": "Inverse Subtle Active",
                     "type": "color",
-                    "value": "#b3b0ad"
+                    "value": "#757575"
                 },
                 "inverse": {
                     "name": "Inverse",
                     "type": "color",
-                    "value": "#faf9f8"
+                    "value": "#D6D6D6"
                 },
                 "inverse-hover": {
                     "name": "Inverse Hover",
                     "type": "color",
-                    "value": "#f3f2f1"
+                    "value": "#ADADAD"
                 },
                 "inverse-active": {
                     "name": "Inverse Active",
                     "type": "color",
-                    "value": "#edebe9"
+                    "value": "#999999"
                 },
                 "inverse-emphasis": {
                     "name": "Inverse Emphasis",
                     "type": "color",
-                    "value": "#e1dfdd"
+                    "value": "#525252"
                 },
                 "inverse-on-subtle": {
                     "name": "Inverse On Subtle",
                     "type": "color",
-                    "value": "#323130"
+                    "value": "#292929"
                 },
                 "on-inverse": {
                     "name": "On Inverse",
                     "type": "color",
-                    "value": "#1b1a19"
+                    "value": "#292929"
                 },
                 "inverse-on-surface": {
                     "name": "Inverse On Surface",
                     "type": "color",
-                    "value": "#ffffff"
+                    "value": "#ADADAD"
                 },
                 "series-a": {
                     "name": "Series A",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.0-dev.2",
+    "version": "12.0.0-dev.3",
     "previewColors": [
         "#fafafa",
         "#ffffff",

package/package.json

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

package/scss/badge/_variables.scss

@@ -37,7 +37,7 @@ $kendo-badge-sm-padding-y: k-spacing(0.5) !default;
 $kendo-badge-md-padding-y: var( --kendo-badge-padding-y, k-spacing(1) ) !default;
 /// Vertical padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-y: calc(k-spacing(0.5) + 1px) !default;
+$kendo-badge-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font size of the small Badge.
 /// @group badge

package/scss/bottom-navigation/_theme.scss

@@ -49,7 +49,7 @@
             .k-bottom-nav-item {
                 &:focus,
                 &.k-focus {
-                    color: k-color(#{$name});
+                    color: k-color(#{$name}-on-surface);
                     background-color: inherit;
                     border-color: transparent;
                     box-shadow: 0 0 0 2px k-color(border-alt) inset;
@@ -58,7 +58,7 @@
                 &:active,
                 &.k-active,
                 &.k-selected {
-                    color: k-color(#{$name});
+                    color: k-color(#{$name}-on-surface);
                     background-color: inherit;
                     border-color: transparent;
                 }

package/scss/breadcrumb/_layout.scss

@@ -7,12 +7,6 @@
 
     @include kendo-breadcrumb--layout-base();
 
-    // Breadcrumb
-    .k-breadcrumb {
-        font-size: $kendo-breadcrumb-font-size;
-        line-height: $kendo-breadcrumb-line-height;
-    }
-
     // Breadcrumb links
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {

package/scss/breadcrumb/_variables.scss

@@ -212,13 +212,13 @@ $kendo-breadcrumb-current-item-border: null  !default;
 
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: var(--kendo-breadcrumb-sm-icon-link-padding-y, k-spacing(2) ) !default;
+$kendo-breadcrumb-sm-icon-link-padding-y: var(--kendo-breadcrumb-sm-icon-link-padding-y, k-spacing(0.5) ) !default;
 /// The vertical padding of the medium Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: var(--kendo-breadcrumb-md-icon-link-padding-y, k-spacing(2.5) ) !default;
+$kendo-breadcrumb-md-icon-link-padding-y: var(--kendo-breadcrumb-md-icon-link-padding-y, k-spacing(1.5) ) !default;
 /// The vertical padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: var(--kendo-breadcrumb-lg-icon-link-padding-y, k-spacing(3) ) !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: var(--kendo-breadcrumb-lg-icon-link-padding-y, k-spacing(2) ) !default;
 
 /// The horizontal padding of the small Breadcrumb link icon.
 /// @group breadcrumb
@@ -228,10 +228,10 @@ $kendo-breadcrumb-sm-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padd
 $kendo-breadcrumb-md-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padding-x, $kendo-breadcrumb-md-icon-link-padding-y ) !default;
 /// The horizontal padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padding-x, $kendo-breadcrumb-lg-icon-link-padding-y ) !default;
+$kendo-breadcrumb-lg-icon-link-padding-x: var( --kendo-breadcrumb-icon-link-padding-x, k-spacing(2.5) ) !default;
 
 // Root link spacing
-$kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, $kendo-icon-spacing ) !default;
+$kendo-breadcrumb-link-icon-spacing: k-spacing(0.5) !default;
 
 
 /// The sizes map for the Breadcrumb.

package/scss/button/_theme.scss

@@ -158,4 +158,28 @@
     .k-button-group[disabled] {
         background-color: inherit;
     }
+
+    .k-disabled,
+    :disabled {
+
+        .k-button-solid {
+            color: $kendo-button-disabled-text;
+            background-color: $kendo-button-disabled-bg;
+            border-color: $kendo-button-disabled-border;
+        }
+
+        .k-button-outline {
+            color: $kendo-button-outline-disabled-text;
+            background-color: $kendo-button-outline-disabled-bg;
+            border-color: $kendo-button-outline-disabled-border;
+        }
+
+        .k-button-flat,
+        .k-button-clear,
+        .k-button-link {
+            color: $kendo-button-flat-disabled-text;
+            background-color: $kendo-button-flat-disabled-bg;
+            border-color: $kendo-button-flat-disabled-border;
+        }
+    }
 }

package/scss/button/_variables.scss

@@ -18,13 +18,13 @@ $kendo-button-lg-padding-x: var( --kendo-button-lg-padding-x, k-spacing(4) ) !de
 
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: var( --kendo-button-sm-padding-y, calc( #{k-spacing(0.5)} + 1px ) ) !default;
+$kendo-button-sm-padding-y: calc(var( --kendo-button-sm-padding-y, #{k-spacing(0.5)} ) + 1px) !default;
 /// The vertical padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-y: var( --kendo-button-md-padding-y, calc( #{k-spacing(1)} + 1px ) ) !default;
+$kendo-button-md-padding-y: calc(var( --kendo-button-md-padding-y, #{k-spacing(1)} ) + 1px) !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: var( --kendo-button-lg-padding-y, calc( #{k-spacing(2)} + 1px ) ) !default;
+$kendo-button-lg-padding-y: calc(var( --kendo-button-lg-padding-y, #{k-spacing(2)} ) + 1px) !default;
 
 /// The font size of the small Button.
 /// @group button

package/scss/calendar/_variables.scss

@@ -143,13 +143,13 @@ $kendo-calendar-weekend-text: var( --kendo-calendar-weekend-text, inherit ) !def
 
 /// The text color of the calendar today cell.
 /// @group calendar
-$kendo-calendar-today-text: var( --kendo-calendar-today-text, k-color(app-surface) ) !default; // use contrast function
+$kendo-calendar-today-text: var( --kendo-calendar-today-text, k-color(on-primary) ) !default; // use contrast function
 /// The background color of the calendar today cell.
 /// @group calendar
 $kendo-calendar-today-bg: var( --kendo-calendar-today-bg, k-color(primary) ) !default;
 /// The text color of the calendar today cell when hovered.
 /// @group calendar
-$kendo-calendar-today-hover-text: var( --kendo-calendar-today-hover-text, k-color(app-surface) ) !default;  // use contrast function
+$kendo-calendar-today-hover-text: var( --kendo-calendar-today-hover-text, k-color(on-primary) ) !default;  // use contrast function
 /// The background color of the calendar today cell when hovered.
 /// @group calendar
 $kendo-calendar-today-hover-bg: var( --kendo-calendar-today-hover-bg, $kendo-calendar-today-bg ) !default;

package/scss/chart-wizard/_variables.scss

@@ -5,7 +5,7 @@
 
 /// The color of the area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-color: var( --kendo-chart-wizard-icon-area-color, k-color(primary) ) !default;
+$kendo-chart-wizard-icon-area-color: var( --kendo-chart-wizard-icon-area-color, k-color(primary-on-subtle) ) !default;
 /// The background color of the area around the chart type icon.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-area-bg: var( --kendo-chart-wizard-icon-area-bg, k-color(primary-subtle) ) !default;

package/scss/checkbox/_variables.scss

@@ -89,7 +89,7 @@ $kendo-checkbox-hover-border: var( --kendo-checkbox-hover-border, $kendo-checkbo
 $kendo-checkbox-checked-bg: var( --kendo-checkbox-checked-bg, k-color(primary) ) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: var( --kendo-checkbox-checked-text, k-color(app-surface) ) !default;
+$kendo-checkbox-checked-text: var( --kendo-checkbox-checked-text, k-color(surface-alt) ) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: var( --kendo-checkbox-checked-border, $kendo-checkbox-checked-bg ) !default;

package/scss/chip/_variables.scss

@@ -49,7 +49,7 @@ $kendo-chip-lg-padding-x: k-spacing(2) !default;
 $kendo-chip-sm-padding-y: calc( #{k-spacing(0.5)} / 2 ) !default;
 /// The vertical padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-y: var( --kendo-chip-padding-y, calc( #{k-spacing(1.5)} / 2 ) ) !default;
+$kendo-chip-md-padding-y: calc( var( --kendo-chip-padding-y, #{k-spacing(1.5)} ) / 2 ) !default;
 /// The vertical padding of the large Chip.
 /// @group chip
 $kendo-chip-lg-padding-y: calc( #{k-spacing(2.5)} / 2 ) !default;

package/scss/dialog/_variables.scss

@@ -26,7 +26,7 @@ $kendo-dialog-button-spacing: var( --kendo-dialog-button-spacing, k-spacing(3) )
 
 /// The background color of the Dialog.
 /// @group dialog
-$kendo-dialog-bg: var( --kendo-dialog-bg, k-color(app-surface) ) !default;
+$kendo-dialog-bg: var( --kendo-dialog-bg, k-color(surface-alt) ) !default;
 
 /// The box shadow around the Dialog.
 /// @group dialog

package/scss/drawer/_variables.scss

@@ -112,7 +112,7 @@ $kendo-drawer-item-ripple-spacing-x: var( --kendo-drawer-item-ripple-spacing-x,
 
 /// The border color of the drawer item ripple
 /// @group drawer
-$kendo-drawer-item-ripple-border: var( --kendo-drawer-item-ripple-border, k-color(primary) ) !default;
+$kendo-drawer-item-ripple-border: var( --kendo-drawer-item-ripple-border, k-color(primary-on-surface) ) !default;
 /// The background color of the Drawer item.
 /// @group drawer
 $kendo-drawer-item-bg: var( --kendo-drawer-item-bg, $kendo-drawer-bg ) !default;
@@ -157,7 +157,7 @@ $kendo-drawer-item-selected-bg: var( --kendo-drawer-item-selected-bg, $kendo-dra
 $kendo-drawer-item-selected-text: var( --kendo-drawer-item-selected-text, $kendo-drawer-item-text ) !default;
 /// The text color of the selected Drawer item icon.
 /// @group drawer
-$kendo-drawer-item-selected-icon-text: var( --kendo-drawer-item-selected-icon-text, k-color(primary) ) !default;
+$kendo-drawer-item-selected-icon-text: var( --kendo-drawer-item-selected-icon-text, k-color(primary-on-surface) ) !default;
 /// The background color of the selected and hovered Drawer item.
 /// @group drawer
 $kendo-drawer-item-selected-hover-bg: var( --kendo-drawer-item-selected-hover-bg, k-color(surface-alt) ) !default;

package/scss/expansion-panel/_theme.scss

@@ -17,7 +17,7 @@
 
             .k-expander-title {
                 @include fill(
-                    $color: k-color(primary),
+                    $color: k-color(primary-on-surface),
                 );
             }
 

package/scss/filter/_layout.scss

@@ -3,4 +3,9 @@
 
 @mixin kendo-filter--layout() {
     @include kendo-filter--layout-base();
+
+    .k-filter .k-toolbar:focus,
+    .k-filter .k-toolbar.k-focus {
+        border-width: $kendo-filter-toolbar-focus-border-width;
+    }
 }

package/scss/filter/_variables.scss

@@ -34,9 +34,12 @@ $kendo-filter-preview-operator-text: var( --kendo-filter-preview-operator-text,
 /// @group filter
 $kendo-filter-line-bg: var( --kendo-filter-line-bg, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
+/// The border width of the Filter.
+/// @group filter
+$kendo-filter-toolbar-focus-border-width: var( --kendo-filter-toolbar-focus-border-width, 2px ) !default;
 /// The border color of the focused Filter.
 /// @group filter
-$kendo-filter-toolbar-focus-border: var( --kendo-filter-toolbar-focus-border, #{k-color(base-emphasis)} ) !default;
+$kendo-filter-toolbar-focus-border: var( --kendo-filter-toolbar-focus-border, #{k-color(border)} ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/filter/variables" with (
     $kendo-filter-padding-x: $kendo-filter-padding-x,

package/scss/grid/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
 @use "../table/_variables.scss" as *;

package/scss/input/_layout.scss

@@ -153,14 +153,6 @@
         .k-input-#{$size},
         .k-picker-#{$size} {
 
-            .k-input-values {
-                padding: 0;
-            }
-            .k-input-values > .k-searchbar,
-            .k-input-values > .k-input-inner {
-                margin: 0;
-            }
-
             .k-input-spinner {
                 width: if( $kendo-use-input-spinner-width, var( --kendo-input-spinner-width, #{$_button-width} ), auto );
 

package/scss/input/_theme.scss

@@ -101,9 +101,6 @@
         &:focus,
         &.k-focus,
         &:focus-within {
-            color: $kendo-picker-focus-text;
-            background-color: $kendo-picker-focus-bg;
-
             &::after {
                 border-color: $kendo-picker-focus-border;
             }

package/scss/input/_variables.scss

@@ -32,14 +32,14 @@ $kendo-input-lg-padding-x: k-spacing(4.5) !default;
 $kendo-input-sm-padding-y: calc( #{k-spacing(0.5)} + 1px ) !default;
 /// The vertical padding of the medium Input components.
 /// @group input
-$kendo-input-md-padding-y: var( --kendo-input-padding-y, calc( #{k-spacing(1)} + 1px ) ) !default;
+$kendo-input-md-padding-y: calc(var( --kendo-input-padding-y, #{k-spacing(1)} ) + 1px) !default;
 /// The vertical padding of the large Input components.
 /// @group input
 $kendo-input-lg-padding-y: k-spacing(2) !default;
 
 /// The font size of the small Input components.
 /// @group input
-$kendo-input-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-input-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Input components.
 /// @group input
 $kendo-input-md-font-size: var( --kendo-input-font-size, var( --kendo-font-size, inherit ) ) !default;
@@ -49,7 +49,7 @@ $kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height of the small Input components.
 /// @group input
-$kendo-input-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
+$kendo-input-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the medium Input components.
 /// @group input
 $kendo-input-md-line-height: var( --kendo-input-line-height, var( --kendo-line-height, normal ) ) !default;

package/scss/list/_variables.scss

@@ -35,19 +35,19 @@ $kendo-list-header-border-width: var( --kendo-list-header-border-width, 0 ) !def
 
 /// The font size of the List header.
 /// @group list
-$kendo-list-sm-header-font-size: var( --kendo-list-sm-header-font-size, var(--kendo-font-size, inherit) ) !default;
-$kendo-list-md-header-font-size: var( --kendo-list-md-header-font-size, var(--kendo-font-size, inherit) ) !default;
-$kendo-list-lg-header-font-size: var( --kendo-list-lg-header-font-size, var(--kendo-font-size, inherit) ) !default;
+$kendo-list-sm-header-font-size: var( --kendo-list-sm-header-font-size, var(--kendo-font-size-sm, inherit) ) !default;
+$kendo-list-md-header-font-size: var( --kendo-list-md-header-font-size, var(--kendo-font-size-sm, inherit) ) !default;
+$kendo-list-lg-header-font-size: var( --kendo-list-lg-header-font-size, var(--kendo-font-size-sm, inherit) ) !default;
 
 /// The line height of the List header.
 /// @group list
-$kendo-list-sm-header-line-height: var( --kendo-list-sm-header-line-height, var(--kendo-line-height, normal) ) !default;
-$kendo-list-md-header-line-height: var( --kendo-list-md-header-line-height, var(--kendo-line-height, normal) ) !default;
-$kendo-list-lg-header-line-height: var( --kendo-list-lg-header-line-height, var(--kendo-line-height, normal) ) !default;
+$kendo-list-sm-header-line-height: var( --kendo-list-sm-header-line-height, var(--kendo-line-height-lg, normal) ) !default;
+$kendo-list-md-header-line-height: var( --kendo-list-md-header-line-height, var(--kendo-line-height-lg, normal) ) !default;
+$kendo-list-lg-header-line-height: var( --kendo-list-lg-header-line-height, var(--kendo-line-height-lg, normal) ) !default;
 
 /// The font weight of the List header.
 /// @group list
-$kendo-list-header-font-weight: var( --kendo-list-header-font-weight, var(--kendo-font-weight-bold, normal) ) !default;
+$kendo-list-header-font-weight: var( --kendo-list-header-font-weight, var(--kendo-font-weight-semibold, 600) ) !default;
 /// The horizontal padding of the List filter, when no size is set.
 /// @group list
 $kendo-list-sm-filter-padding-x: var( --kendo-list-sm-filter-padding-x, #{k-spacing(1)} ) !default;
@@ -120,19 +120,19 @@ $kendo-list-group-item-border-width: var( --kendo-list-group-item-border-width,
 
 /// The font size of the List group items.
 /// @group list
-$kendo-list-sm-group-item-font-size: var( --kendo-list-sm-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
-$kendo-list-md-group-item-font-size: var( --kendo-list-md-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
-$kendo-list-lg-group-item-font-size: var( --kendo-list-lg-group-item-font-size, var(--kendo-font-size, inherit) ) !default;
+$kendo-list-sm-group-item-font-size: var( --kendo-list-sm-group-item-font-size, var(--kendo-font-size-sm, inherit) ) !default;
+$kendo-list-md-group-item-font-size: var( --kendo-list-md-group-item-font-size, var(--kendo-font-size-sm, inherit) ) !default;
+$kendo-list-lg-group-item-font-size: var( --kendo-list-lg-group-item-font-size, var(--kendo-font-size-sm, inherit) ) !default;
 
 /// The line height of the List group items.
 /// @group list
-$kendo-list-sm-group-item-line-height: var( --kendo-list-sm-group-item-line-height, var(--kendo-line-height, normal) ) !default;
-$kendo-list-md-group-item-line-height: var( --kendo-list-md-group-item-line-height, var(--kendo-line-height, normal) ) !default;
-$kendo-list-lg-group-item-line-height: var( --kendo-list-lg-group-item-line-height, var(--kendo-line-height, normal) ) !default;
+$kendo-list-sm-group-item-line-height: var( --kendo-list-sm-group-item-line-height, var(--kendo-line-height-lg, normal) ) !default;
+$kendo-list-md-group-item-line-height: var( --kendo-list-md-group-item-line-height, var(--kendo-line-height-lg, normal) ) !default;
+$kendo-list-lg-group-item-line-height: var( --kendo-list-lg-group-item-line-height, var(--kendo-line-height-lg, normal) ) !default;
 
 /// The font weight of the List group item.
 /// @group list
-$kendo-list-group-item-font-weight: var( --kendo-list-group-item-font-weight, var(--kendo-font-weight-bold, normal) ) !default;
+$kendo-list-group-item-font-weight: var( --kendo-list-group-item-font-weight, var(--kendo-font-weight-semibold, 600) ) !default;
 
 /// The padding of the List content.
 /// @group list
@@ -232,16 +232,16 @@ $kendo-list-border: var( --kendo-list-border, #{color-mix(in srgb, k-color(borde
 
 /// The background color of the List header.
 /// @group list
-$kendo-list-header-bg: var( --kendo-list-header-bg, #{k-color(app-surface)} ) !default;
+$kendo-list-header-bg: var( --kendo-list-header-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the List header.
 /// @group list
-$kendo-list-header-text: var( --kendo-list-header-text, #{k-color(primary)} ) !default;
+$kendo-list-header-text: var( --kendo-list-header-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the List header.
 /// @group list
 $kendo-list-header-border: var( --kendo-list-header-border, inherit ) !default;
 /// The box shadow of the List header.
 /// @group list
-$kendo-list-header-shadow: var( --kendo-list-header-shadow, #{$kendo-box-shadow-depth-3} ) !default;
+$kendo-list-header-shadow: var( --kendo-list-header-shadow, null ) !default;
 
 
 /// The background color of the List items.
@@ -294,7 +294,7 @@ $kendo-list-item-disabled-text: var( --kendo-list-item-disabled-text, #{color-mi
 $kendo-list-group-item-bg: var( --kendo-list-group-item-bg, #{k-color(surface-alt)} ) !default;
 /// The text color of the List group items.
 /// @group list
-$kendo-list-group-item-text: var( --kendo-list-group-item-text, #{k-color(primary)} ) !default;
+$kendo-list-group-item-text: var( --kendo-list-group-item-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the List group items.
 /// @group list
 $kendo-list-group-item-border: var( --kendo-list-group-item-border, inherit ) !default;

package/scss/listview/_variables.scss

@@ -41,7 +41,7 @@ $kendo-listview-border: var( --kendo-listview-border, color-mix(in srgb, k-color
 
 /// The text color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-text: var( --kendo-listview-item-selected-text, initial ) !default;
+$kendo-listview-item-selected-text: var( --kendo-listview-item-selected-text, k-color(on-app-surface) ) !default;
 /// The background color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-bg: var( --kendo-listview-item-selected-bg, #{color-mix(in srgb, k-color(on-app-surface) 12%, transparent)} ) !default;
@@ -51,7 +51,7 @@ $kendo-listview-item-selected-border: var( --kendo-listview-item-selected-border
 
 /// The text color of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-text: var( --kendo-listview-item-focus-text, initial ) !default;
+$kendo-listview-item-focus-text: var( --kendo-listview-item-focus-text, k-color(on-app-surface) ) !default;
 /// The background color of the focused ListView items.
 /// @group listview
 $kendo-listview-item-focus-bg: var( --kendo-listview-item-focus-bg, initial ) !default;

package/scss/menu/_layout.scss

@@ -32,6 +32,11 @@
         }
     }
 
+    .k-menu-group {
+        padding: k-spacing(1);
+        gap: k-spacing(0.5);
+    }
+
     // Sub menu group focus styles
     .k-menu-group,
     .k-menu.k-context-menu {

package/scss/menu/_variables.scss

@@ -146,7 +146,7 @@ $kendo-menu-popup-bg: var( --kendo-menu-popup-bg, #{k-color(surface-alt)} ) !def
 $kendo-menu-popup-border: var( --kendo-menu-popup-border, initial ) !default;
 /// The shadow of the Menu popup.
 /// @group menu
-$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, var( --kendo-box-shadow-depth-6, none ) ) !default;
+$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, k-elevation(5) ) !default;
 
 /// The horizontal padding of the Menu item in popup.
 /// @group menu

package/scss/pdf-viewer/_theme.scss

@@ -4,8 +4,4 @@
 
 @mixin kendo-pdf-viewer--theme() {
     @include kendo-pdf-viewer--theme-base();
-
-    .k-pdf-viewer .k-toolbar {
-        border-bottom-color: transparent;
-    }
 }

package/scss/popup/_variables.scss

@@ -39,7 +39,7 @@ $kendo-popup-text: var( --kendo-popup-text, #{k-color(on-app-surface)} ) !defaul
 $kendo-popup-border: var( --kendo-popup-border, transparent ) !default;
 /// Box shadow around the popup.
 /// @group popup
-$kendo-popup-shadow: var( --kendo-popup-shadow, var( --kendo-box-shadow-depth-5, none ) ) !default;
+$kendo-popup-shadow: var( --kendo-popup-shadow, k-elevation(5) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/popup/_variables.scss" with (
     $kendo-popup-border-width: $kendo-popup-border-width,

package/scss/progressbar/_variables.scss

@@ -34,7 +34,7 @@ $kendo-progressbar-padding-y: var( --kendo-progressbar-padding-y, #{k-spacing(0)
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: var( --kendo-progressbar-bg, #{k-color(secondary)} ) !default;
+$kendo-progressbar-bg: var( --kendo-progressbar-bg, #{k-color(secondary-on-surface)} ) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: var( --kendo-progressbar-text, #{k-color(on-app-surface)} ) !default;

package/scss/scheduler/_variables.scss

@@ -83,7 +83,7 @@ $kendo-scheduler-event-min-height: var( --kendo-scheduler-event-min-height, calc
 $kendo-scheduler-event-bg: var( --kendo-scheduler-event-bg, k-color(primary) ) !default;
 /// The text color of the Scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-text: var( --kendo-scheduler-event-text, k-color(app-surface) ) !default;
+$kendo-scheduler-event-text: var( --kendo-scheduler-event-text, k-color(on-primary) ) !default;
 /// The border color of the Scheduler event.
 /// @group scheduler
 $kendo-scheduler-event-border: var( --kendo-scheduler-event-border, $kendo-scheduler-event-bg ) !default;

package/scss/skeleton/_variables.scss

@@ -17,7 +17,7 @@ $kendo-skeleton-circle-border-radius: var( --kendo-skeleton-circle-border-radius
 
 /// The background color of the Skeleton item.
 /// @group skeleton
-$kendo-skeleton-item-bg: var( --kendo-skeleton-item-bg, k-color(secondary) ) !default;
+$kendo-skeleton-item-bg: var( --kendo-skeleton-item-bg, color-mix(in srgb, k-color(on-app-surface) 9%, transparent) ) !default;
 /// The background color of the Skeleton wave animation.
 /// @group skeleton
 $kendo-skeleton-wave-bg: var( --kendo-skeleton-wave-bg, k-color(base) ) !default;