@progress/kendo-theme-fluent 14.2.0-dev.1 → 14.2.0-dev.3

package/dist/meta/variables.json

@@ -1858,6 +1858,18 @@
         "type": "String",
         "value": "var(--kendo-list-lg-header-padding-y, var(--kendo-spacing-2\\.5))"
     },
+    "kendo-list-sm-sticky-header-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-list-sm-sticky-header-padding-y, var(--kendo-spacing-0\\.5))"
+    },
+    "kendo-list-md-sticky-header-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-list-md-sticky-header-padding-y, var(--kendo-spacing-1))"
+    },
+    "kendo-list-lg-sticky-header-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-list-lg-sticky-header-padding-y, var(--kendo-spacing-1\\.5))"
+    },
     "kendo-list-header-border-width": {
         "type": "String",
         "value": "var(--kendo-list-header-border-width, 0)"
@@ -2100,7 +2112,7 @@
     },
     "kendo-list-sizes": {
         "type": "Map",
-        "value": "(sm: (font-size: var(--kendo-list-sm-font-size, var(--kendo-font-size)), line-height: var(--kendo-list-sm-line-height, var(--kendo-line-height)), header-padding-x: var(--kendo-list-sm-header-padding-x, var(--kendo-spacing-1)), header-padding-y: var(--kendo-list-sm-header-padding-y, var(--kendo-spacing-1)), header-font-size: var(--kendo-list-sm-header-font-size, var(--kendo-font-size-sm)), header-line-height: var(--kendo-list-sm-header-line-height, var(--kendo-line-height-lg)), item-padding-x: var(--kendo-list-sm-item-padding-x, var(--kendo-spacing-1)), item-padding-y: var(--kendo-list-sm-item-padding-y, var(--kendo-spacing-1)), item-font-size: var(--kendo-list-sm-item-font-size, var(--kendo-font-size)), item-line-height: var(--kendo-list-sm-item-line-height, var(--kendo-line-height)), group-item-padding-x: var(--kendo-list-sm-group-item-padding-x, var(--kendo-spacing-2)), group-item-padding-y: var(--kendo-list-sm-group-item-padding-y, var(--kendo-spacing-1\\.5)), group-item-font-size: var(--kendo-list-sm-group-item-font-size, var(--kendo-font-size-sm)), group-item-line-height: var(--kendo-list-sm-group-item-line-height, var(--kendo-line-height-lg)), item-group-label-padding-x: var(--kendo-list-item-group-label-sm-padding-x, var(--kendo-spacing-0\\.5)), item-group-label-padding-y: var(--kendo-list-item-group-label-sm-padding-y, var(--kendo-spacing-0\\.5)), item-group-label-font-size: var(--kendo-list-item-group-label-sm-font-size, var(--kendo-font-size-xs)), item-group-label-line-height: inherit, filter-padding-x: var(--kendo-list-sm-filter-padding-x, var(--kendo-spacing-1)), filter-padding-y: var(--kendo-list-sm-filter-padding-y, var(--kendo-spacing-1))), md: (font-size: var(--kendo-list-md-font-size, var(--kendo-font-size)), line-height: var(--kendo-list-md-line-height, var(--kendo-line-height)), header-padding-x: var(--kendo-list-md-header-padding-x, var(--kendo-spacing-1\\.5)), header-padding-y: var(--kendo-list-md-header-padding-y, var(--kendo-spacing-1\\.5)), header-font-size: var(--kendo-list-md-header-font-size, var(--kendo-font-size-sm)), header-line-height: var(--kendo-list-md-header-line-height, var(--kendo-line-height-lg)), item-padding-x: var(--kendo-list-md-item-padding-x, var(--kendo-spacing-1\\.5)), item-padding-y: var(--kendo-list-md-item-padding-y, var(--kendo-spacing-1\\.5)), item-font-size: var(--kendo-list-md-item-font-size, var(--kendo-font-size)), item-line-height: var(--kendo-list-md-item-line-height, var(--kendo-line-height)), group-item-padding-x: var(--kendo-list-md-group-item-padding-x, var(--kendo-spacing-2)), group-item-padding-y: var(--kendo-list-md-group-item-padding-y, var(--kendo-spacing-2)), group-item-font-size: var(--kendo-list-md-group-item-font-size, var(--kendo-font-size-sm)), group-item-line-height: var(--kendo-list-md-group-item-line-height, var(--kendo-line-height-lg)), item-group-label-padding-x: var(--kendo-list-item-group-label-md-padding-x, var(--kendo-spacing-1)), item-group-label-padding-y: var(--kendo-list-item-group-label-md-padding-y, var(--kendo-spacing-1)), item-group-label-font-size: var(--kendo-list-item-group-label-md-font-size, var(--kendo-font-size-xs)), item-group-label-line-height: inherit, filter-padding-x: var(--kendo-list-md-filter-padding-x, var(--kendo-spacing-1\\.5)), filter-padding-y: var(--kendo-list-md-filter-padding-y, var(--kendo-spacing-1\\.5))), lg: (font-size: var(--kendo-list-lg-font-size, var(--kendo-font-size)), line-height: var(--kendo-list-lg-line-height, var(--kendo-line-height)), header-padding-x: var(--kendo-list-lg-header-padding-x, var(--kendo-spacing-2\\.5)), header-padding-y: var(--kendo-list-lg-header-padding-y, var(--kendo-spacing-2\\.5)), header-font-size: var(--kendo-list-lg-header-font-size, var(--kendo-font-size-sm)), header-line-height: var(--kendo-list-lg-header-line-height, var(--kendo-line-height-lg)), item-padding-x: var(--kendo-list-lg-item-padding-x, var(--kendo-spacing-2\\.5)), item-padding-y: var(--kendo-list-lg-item-padding-y, var(--kendo-spacing-2\\.5)), item-font-size: var(--kendo-list-lg-item-font-size, var(--kendo-font-size)), item-line-height: var(--kendo-list-lg-item-line-height, var(--kendo-line-height)), group-item-padding-x: var(--kendo-list-lg-group-item-padding-x, var(--kendo-spacing-2)), group-item-padding-y: var(--kendo-list-lg-group-item-padding-y, var(--kendo-spacing-2\\.5)), group-item-font-size: var(--kendo-list-lg-group-item-font-size, var(--kendo-font-size-sm)), group-item-line-height: var(--kendo-list-lg-group-item-line-height, var(--kendo-line-height-lg)), item-group-label-padding-x: var(--kendo-list-item-group-label-lg-padding-x, var(--kendo-spacing-1\\.5)), item-group-label-padding-y: var(--kendo-list-item-group-label-lg-padding-y, var(--kendo-spacing-1\\.5)), item-group-label-font-size: var(--kendo-list-item-group-label-lg-font-size, var(--kendo-font-size-xs)), item-group-label-line-height: inherit, filter-padding-x: var(--kendo-list-lg-filter-padding-x, var(--kendo-spacing-2\\.5)), filter-padding-y: var(--kendo-list-lg-filter-padding-y, calc(var(--kendo-spacing-2) + 1px))))",
+        "value": "(sm: (font-size: var(--kendo-list-sm-font-size, var(--kendo-font-size)), line-height: var(--kendo-list-sm-line-height, var(--kendo-line-height)), header-padding-x: var(--kendo-list-sm-header-padding-x, var(--kendo-spacing-1)), header-padding-y: var(--kendo-list-sm-header-padding-y, var(--kendo-spacing-1)), header-font-size: var(--kendo-list-sm-header-font-size, var(--kendo-font-size-sm)), header-line-height: var(--kendo-list-sm-header-line-height, var(--kendo-line-height-lg)), item-padding-x: var(--kendo-list-sm-item-padding-x, var(--kendo-spacing-1)), item-padding-y: var(--kendo-list-sm-item-padding-y, var(--kendo-spacing-1)), item-font-size: var(--kendo-list-sm-item-font-size, var(--kendo-font-size)), item-line-height: var(--kendo-list-sm-item-line-height, var(--kendo-line-height)), group-item-padding-x: var(--kendo-list-sm-group-item-padding-x, var(--kendo-spacing-2)), group-item-padding-y: var(--kendo-list-sm-group-item-padding-y, var(--kendo-spacing-1\\.5)), group-item-font-size: var(--kendo-list-sm-group-item-font-size, var(--kendo-font-size-sm)), group-item-line-height: var(--kendo-list-sm-group-item-line-height, var(--kendo-line-height-lg)), item-group-label-padding-x: var(--kendo-list-item-group-label-sm-padding-x, var(--kendo-spacing-0\\.5)), item-group-label-padding-y: var(--kendo-list-item-group-label-sm-padding-y, var(--kendo-spacing-0\\.5)), item-group-label-font-size: var(--kendo-list-item-group-label-sm-font-size, var(--kendo-font-size-xs)), item-group-label-line-height: inherit, filter-padding-x: var(--kendo-list-sm-filter-padding-x, var(--kendo-spacing-1)), filter-padding-y: var(--kendo-list-sm-filter-padding-y, var(--kendo-spacing-1)), sticky-header-padding-y: var(--kendo-list-sm-sticky-header-padding-y, var(--kendo-spacing-0\\.5))), md: (font-size: var(--kendo-list-md-font-size, var(--kendo-font-size)), line-height: var(--kendo-list-md-line-height, var(--kendo-line-height)), header-padding-x: var(--kendo-list-md-header-padding-x, var(--kendo-spacing-1\\.5)), header-padding-y: var(--kendo-list-md-header-padding-y, var(--kendo-spacing-1\\.5)), header-font-size: var(--kendo-list-md-header-font-size, var(--kendo-font-size-sm)), header-line-height: var(--kendo-list-md-header-line-height, var(--kendo-line-height-lg)), item-padding-x: var(--kendo-list-md-item-padding-x, var(--kendo-spacing-1\\.5)), item-padding-y: var(--kendo-list-md-item-padding-y, var(--kendo-spacing-1\\.5)), item-font-size: var(--kendo-list-md-item-font-size, var(--kendo-font-size)), item-line-height: var(--kendo-list-md-item-line-height, var(--kendo-line-height)), group-item-padding-x: var(--kendo-list-md-group-item-padding-x, var(--kendo-spacing-2)), group-item-padding-y: var(--kendo-list-md-group-item-padding-y, var(--kendo-spacing-2)), group-item-font-size: var(--kendo-list-md-group-item-font-size, var(--kendo-font-size-sm)), group-item-line-height: var(--kendo-list-md-group-item-line-height, var(--kendo-line-height-lg)), item-group-label-padding-x: var(--kendo-list-item-group-label-md-padding-x, var(--kendo-spacing-1)), item-group-label-padding-y: var(--kendo-list-item-group-label-md-padding-y, var(--kendo-spacing-1)), item-group-label-font-size: var(--kendo-list-item-group-label-md-font-size, var(--kendo-font-size-xs)), item-group-label-line-height: inherit, filter-padding-x: var(--kendo-list-md-filter-padding-x, var(--kendo-spacing-1\\.5)), filter-padding-y: var(--kendo-list-md-filter-padding-y, var(--kendo-spacing-1\\.5)), sticky-header-padding-y: var(--kendo-list-md-sticky-header-padding-y, var(--kendo-spacing-1))), lg: (font-size: var(--kendo-list-lg-font-size, var(--kendo-font-size)), line-height: var(--kendo-list-lg-line-height, var(--kendo-line-height)), header-padding-x: var(--kendo-list-lg-header-padding-x, var(--kendo-spacing-2\\.5)), header-padding-y: var(--kendo-list-lg-header-padding-y, var(--kendo-spacing-2\\.5)), header-font-size: var(--kendo-list-lg-header-font-size, var(--kendo-font-size-sm)), header-line-height: var(--kendo-list-lg-header-line-height, var(--kendo-line-height-lg)), item-padding-x: var(--kendo-list-lg-item-padding-x, var(--kendo-spacing-2\\.5)), item-padding-y: var(--kendo-list-lg-item-padding-y, var(--kendo-spacing-2\\.5)), item-font-size: var(--kendo-list-lg-item-font-size, var(--kendo-font-size)), item-line-height: var(--kendo-list-lg-item-line-height, var(--kendo-line-height)), group-item-padding-x: var(--kendo-list-lg-group-item-padding-x, var(--kendo-spacing-2)), group-item-padding-y: var(--kendo-list-lg-group-item-padding-y, var(--kendo-spacing-2\\.5)), group-item-font-size: var(--kendo-list-lg-group-item-font-size, var(--kendo-font-size-sm)), group-item-line-height: var(--kendo-list-lg-group-item-line-height, var(--kendo-line-height-lg)), item-group-label-padding-x: var(--kendo-list-item-group-label-lg-padding-x, var(--kendo-spacing-1\\.5)), item-group-label-padding-y: var(--kendo-list-item-group-label-lg-padding-y, var(--kendo-spacing-1\\.5)), item-group-label-font-size: var(--kendo-list-item-group-label-lg-font-size, var(--kendo-font-size-xs)), item-group-label-line-height: inherit, filter-padding-x: var(--kendo-list-lg-filter-padding-x, var(--kendo-spacing-2\\.5)), filter-padding-y: var(--kendo-list-lg-filter-padding-y, calc(var(--kendo-spacing-2) + 1px)), sticky-header-padding-y: var(--kendo-list-lg-sticky-header-padding-y, var(--kendo-spacing-1\\.5))))",
         "prettyValue": {
             "sm": {
                 "font-size": "var(--kendo-list-sm-font-size, var(--kendo-font-size))",
@@ -2122,7 +2134,8 @@
                 "item-group-label-font-size": "var(--kendo-list-item-group-label-sm-font-size, var(--kendo-font-size-xs))",
                 "item-group-label-line-height": "inherit",
                 "filter-padding-x": "var(--kendo-list-sm-filter-padding-x, var(--kendo-spacing-1))",
-                "filter-padding-y": "var(--kendo-list-sm-filter-padding-y, var(--kendo-spacing-1))"
+                "filter-padding-y": "var(--kendo-list-sm-filter-padding-y, var(--kendo-spacing-1))",
+                "sticky-header-padding-y": "var(--kendo-list-sm-sticky-header-padding-y, var(--kendo-spacing-0\\.5))"
             },
             "md": {
                 "font-size": "var(--kendo-list-md-font-size, var(--kendo-font-size))",
@@ -2144,7 +2157,8 @@
                 "item-group-label-font-size": "var(--kendo-list-item-group-label-md-font-size, var(--kendo-font-size-xs))",
                 "item-group-label-line-height": "inherit",
                 "filter-padding-x": "var(--kendo-list-md-filter-padding-x, var(--kendo-spacing-1\\.5))",
-                "filter-padding-y": "var(--kendo-list-md-filter-padding-y, var(--kendo-spacing-1\\.5))"
+                "filter-padding-y": "var(--kendo-list-md-filter-padding-y, var(--kendo-spacing-1\\.5))",
+                "sticky-header-padding-y": "var(--kendo-list-md-sticky-header-padding-y, var(--kendo-spacing-1))"
             },
             "lg": {
                 "font-size": "var(--kendo-list-lg-font-size, var(--kendo-font-size))",
@@ -2166,7 +2180,8 @@
                 "item-group-label-font-size": "var(--kendo-list-item-group-label-lg-font-size, var(--kendo-font-size-xs))",
                 "item-group-label-line-height": "inherit",
                 "filter-padding-x": "var(--kendo-list-lg-filter-padding-x, var(--kendo-spacing-2\\.5))",
-                "filter-padding-y": "var(--kendo-list-lg-filter-padding-y, calc(var(--kendo-spacing-2) + 1px))"
+                "filter-padding-y": "var(--kendo-list-lg-filter-padding-y, calc(var(--kendo-spacing-2) + 1px))",
+                "sticky-header-padding-y": "var(--kendo-list-lg-sticky-header-padding-y, var(--kendo-spacing-1\\.5))"
             }
         }
     },
@@ -2198,6 +2213,10 @@
         "type": "String",
         "value": "var(--kendo-list-header-shadow, )"
     },
+    "kendo-list-sticky-header-shadow": {
+        "type": "String",
+        "value": "var(--kendo-list-sticky-header-shadow, 0 2px 4px 0 rgba(0, 0, 0, 0.08))"
+    },
     "kendo-list-item-bg": {
         "type": "String",
         "value": "var(--kendo-list-item-bg, var(--kendo-color-surface-alt))"

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.2.0-dev.1",
+    "version": "14.2.0-dev.3",
     "api": "modern",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",

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

@@ -3,7 +3,7 @@
     "name": "Fluent 1 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.2.0-dev.1",
+    "version": "14.2.0-dev.3",
     "previewColors": [
         "oklch(21.85% 0.0025 67.57deg)",
         "oklch(24.42% 0.0024 67.57deg)",

package/lib/swatches/fluent-1.json

@@ -3,7 +3,7 @@
     "name": "Fluent 1",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.2.0-dev.1",
+    "version": "14.2.0-dev.3",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(98.26% 0.0016 66.88deg)",

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

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.2.0-dev.1",
+    "version": "14.2.0-dev.3",
     "previewColors": [
         "oklch(23.93% 0.0000 0deg)",
         "oklch(28.09% 0.0000 0deg)",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.2.0-dev.1",
+    "version": "14.2.0-dev.3",
     "previewColors": [
         "oklch(98.51% 0.0001 0deg)",
         "oklch(100.00% 0.0001 0deg)",

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": "14.2.0-dev.1",
+  "version": "14.2.0-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -55,8 +55,8 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.9.0",
-    "@progress/kendo-theme-core": "14.2.0-dev.1",
-    "@progress/kendo-theme-utils": "14.2.0-dev.1"
+    "@progress/kendo-theme-core": "14.2.0-dev.3",
+    "@progress/kendo-theme-utils": "14.2.0-dev.3"
   },
   "directories": {
     "doc": "docs",

package/scss/grid/_theme.scss

@@ -35,8 +35,8 @@
         }
 
         // Selected state
-        .k-table-td.k-selected,
-        .k-table-row.k-selected > .k-table-td {
+        .k-table-td.k-selected:not(.k-group-cell),
+        .k-table-row.k-selected > .k-table-td:not(.k-group-cell) {
             border-block-color: $kendo-grid-selected-border;
         }
 

package/scss/list/_variables.scss

@@ -57,6 +57,16 @@ $kendo-list-md-header-padding-y: var( --kendo-list-md-header-padding-y, #{k-spac
 /// @group list
 $kendo-list-lg-header-padding-y: var( --kendo-list-lg-header-padding-y, #{k-spacing(2.5)} ) !default;
 
+/// The vertical padding of the small List sticky header.
+/// @group list
+$kendo-list-sm-sticky-header-padding-y: var( --kendo-list-sm-sticky-header-padding-y, #{k-spacing(0.5)} ) !default;
+/// The vertical padding of the medium List sticky header.
+/// @group list
+$kendo-list-md-sticky-header-padding-y: var( --kendo-list-md-sticky-header-padding-y, #{k-spacing(1)} ) !default;
+/// The vertical padding of the large List sticky header.
+/// @group list
+$kendo-list-lg-sticky-header-padding-y: var( --kendo-list-lg-sticky-header-padding-y, #{k-spacing(1.5)} ) !default;
+
 /// The border width of the List header.
 /// @group list
 $kendo-list-header-border-width: var( --kendo-list-header-border-width, 0 ) !default;
@@ -262,7 +272,6 @@ $kendo-list-header-border: var( --kendo-list-header-border, inherit ) !default;
 /// @group list
 $kendo-list-header-shadow: var( --kendo-list-header-shadow, null ) !default;
 
-
 /// The background color of the List items.
 /// @group list
 $kendo-list-item-bg: var( --kendo-list-item-bg, #{k-color(surface-alt)} ) !default;
@@ -287,6 +296,10 @@ $kendo-list-item-focus-text: var( --kendo-list-item-focus-text, #{k-color(on-app
 /// @group list
 $kendo-list-item-focus-shadow: var( --kendo-list-item-focus-shadow, inset 0 0 0 2px #{k-color(border-alt)} ) !default;
 
+/// The box shadow of the List sticky header.
+/// @group list
+$kendo-list-sticky-header-shadow: var( --kendo-list-sticky-header-shadow, #{0 2px 4px 0 rgba(0, 0, 0, 0.08)} ) !default;
+
 /// The background color of the selected List items.
 /// @group list
 $kendo-list-item-selected-bg: var( --kendo-list-item-selected-bg, #{color-mix(in srgb, k-color(on-app-surface) 12%, transparent)} ) !default;
@@ -355,6 +368,9 @@ $kendo-list-item-description-text: var( --kendo-list-item-description-text, #{k-
     $kendo-list-sm-header-padding-y: $kendo-list-sm-header-padding-y,
     $kendo-list-md-header-padding-y: $kendo-list-md-header-padding-y,
     $kendo-list-lg-header-padding-y: $kendo-list-lg-header-padding-y,
+    $kendo-list-sm-sticky-header-padding-y: $kendo-list-sm-sticky-header-padding-y,
+    $kendo-list-md-sticky-header-padding-y: $kendo-list-md-sticky-header-padding-y,
+    $kendo-list-lg-sticky-header-padding-y: $kendo-list-lg-sticky-header-padding-y,
     $kendo-list-header-border-width: $kendo-list-header-border-width,
     $kendo-list-sm-header-font-size: $kendo-list-sm-header-font-size,
     $kendo-list-md-header-font-size: $kendo-list-md-header-font-size,
@@ -421,6 +437,7 @@ $kendo-list-item-description-text: var( --kendo-list-item-description-text, #{k-
     $kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
     $kendo-list-item-focus-text: $kendo-list-item-focus-text,
     $kendo-list-item-focus-shadow: $kendo-list-item-focus-shadow,
+    $kendo-list-sticky-header-shadow: $kendo-list-sticky-header-shadow,
     $kendo-list-item-selected-bg: $kendo-list-item-selected-bg,
     $kendo-list-item-selected-text: $kendo-list-item-selected-text,
     $kendo-list-item-selected-hover-bg: $kendo-list-item-selected-hover-bg,