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

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.4",
     "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.4",
     "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.4",
     "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.4",
     "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.4",
     "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.4",
   "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.4",
+    "@progress/kendo-theme-utils": "12.0.0-dev.4"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "3d3c1e57932a00e6c1a0e1fbbd14d7ba1e2fe4a9"
+  "gitHead": "40ed04da0bc564e727c8bffc99c00df652e70c12"
 }

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

@@ -78,18 +78,18 @@
             .k-button-outline-#{$theme-color} {
                 color: k-color(#{$theme-color}-on-surface);
 
+                &:hover,
+                &.k-hover {
+                    color: k-color(#{$theme-color}-on-surface);
+                    background-color: color-mix(in srgb, k-color(#{$theme-color}-hover) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
+                }
+
                 &:active,
                 &.k-active,
                 &.k-selected {
                     color: k-color(#{$theme-color}-on-surface);
                     background-color: color-mix(in srgb, k-color(#{$theme-color}-active) 13%, transparent) !important; // stylelint-disable-line declaration-no-important
                 }
-
-                &:hover,
-                &.k-hover {
-                    color: k-color(#{$theme-color}-on-surface);
-                    background-color: color-mix(in srgb, k-color(#{$theme-color}-hover) 3%, transparent) !important; // stylelint-disable-line declaration-no-important
-                }
             }
         }
 
@@ -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;
@@ -179,7 +179,7 @@ $kendo-calendar-other-month-text: var( --kendo-calendar-other-month-text, k-colo
 
 /// The background color of the calendar cells when hovered.
 /// @group calendar
-$kendo-calendar-cell-hover-bg: var( --kendo-calendar-cell-hover-bg, k-color(primary-subtle) ) !default;
+$kendo-calendar-cell-hover-bg: var( --kendo-calendar-cell-hover-bg, color-mix(in srgb, k-color(primary-subtle) 75%, k-color(on-primary)) ) !default;
 /// The text color of the calendar cells when hovered.
 /// @group calendar
 $kendo-calendar-cell-hover-text: var( --kendo-calendar-cell-hover-text, k-color(on-base) ) !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 *;
@@ -351,7 +352,7 @@ $kendo-grid-sticky-border: var( --kendo-grid-sticky-border, color-mix(in srgb, #
 $kendo-grid-sticky-alt-bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-bg} ) !default;
 /// The background color of the Grid sticky cell.
 /// @group grid
-$kendo-grid-sticky-hover-bg: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-hover-bg} ) !default;
+$kendo-grid-sticky-hover-bg: var( --kendo-grid-sticky-hover-bg, k-color(base-hover) ) !default;
 
 /// The background color of the Grid sticky header.
 /// @group grid

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;
@@ -123,7 +123,7 @@ $kendo-input-focus-bg: $kendo-input-bg !default;
 
 /// The border color of the focused solid Input components.
 /// @group input
-$kendo-input-focus-border: k-color(primary) !default;
+$kendo-input-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled solid Input components.
 /// @group input
@@ -171,7 +171,7 @@ $kendo-input-outline-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused outline Input components.
 /// @group input
-$kendo-input-outline-focus-border: k-color(primary) !default;
+$kendo-input-outline-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled outline Input components.
 /// @group input
@@ -219,7 +219,7 @@ $kendo-input-flat-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused flat Input components.
 /// @group input
-$kendo-input-flat-focus-border: k-color(primary) !default;
+$kendo-input-flat-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled flat Input components.
 /// @group input
@@ -267,7 +267,7 @@ $kendo-picker-focus-bg: k-color(surface-alt) !default;
 
 /// The border color of the focused solid Picker components.
 /// @group input
-$kendo-picker-focus-border: k-color(primary)  !default;
+$kendo-picker-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled solid Picker components.
 /// @group input
@@ -315,7 +315,7 @@ $kendo-picker-outline-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused outline Picker components.
 /// @group input
-$kendo-picker-outline-focus-border: k-color(primary) !default;
+$kendo-picker-outline-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the hovered and focused outline Picker components.
 /// @group input
@@ -327,7 +327,7 @@ $kendo-picker-outline-hover-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered and focused outline Picker components.
 /// @group input
-$kendo-picker-outline-hover-focus-border: k-color(primary) !default;
+$kendo-picker-outline-hover-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled outline Picker components.
 /// @group input
@@ -375,7 +375,7 @@ $kendo-picker-flat-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused flat Picker components.
 /// @group input
-$kendo-picker-flat-focus-border: k-color(primary) !default;
+$kendo-picker-flat-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the hovered and focused flat Picker components.
 /// @group input

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;