@progress/kendo-theme-fluent 9.1.0-dev.1 → 9.1.0-dev.2

package/dist/meta/variables.json

@@ -9883,6 +9883,22 @@
         "type": "String",
         "value": "var(--kendo-line-height, normal)"
     },
+    "kendo-menu-bg": {
+        "type": "Color",
+        "value": "transparent"
+    },
+    "kendo-menu-text": {
+        "type": "String",
+        "value": "var(--kendo-body-text, inherit)"
+    },
+    "kendo-menu-border": {
+        "type": "String",
+        "value": "initial"
+    },
+    "kendo-menu-shadow": {
+        "type": "String",
+        "value": "none"
+    },
     "kendo-menu-item-padding-x": {
         "type": "String",
         "value": "var(--kendo-spacing-2, 0.5rem)"
@@ -9899,41 +9915,9 @@
         "type": "String",
         "value": "var(--kendo-icon-spacing, 0.5rem)"
     },
-    "kendo-menu-separator-margin": {
-        "type": "String",
-        "value": "var(--kendo-spacing-1, 0.25rem)"
-    },
-    "kendo-menu-separator-width": {
-        "type": "Number",
-        "value": "1px"
-    },
-    "kendo-menu-item-focus-outline-offset": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-spacing-0\\.5, 0.125rem) * -1)"
-    },
-    "kendo-menu-item-focus-outline-width": {
-        "type": "Number",
-        "value": "1px"
-    },
-    "kendo-menu-item-focus-outline-style": {
-        "type": "String",
-        "value": "solid"
-    },
-    "kendo-menu-text": {
-        "type": "String",
-        "value": "var(--kendo-body-text, inherit)"
-    },
-    "kendo-menu-bg": {
-        "type": "Color",
-        "value": "transparent"
-    },
-    "kendo-menu-border": {
+    "kendo-menu-item-selected-font-weight": {
         "type": "String",
-        "value": "initial"
-    },
-    "kendo-menu-shadow": {
-        "type": "String",
-        "value": "none"
+        "value": "var(--kendo-font-weight-bold, normal)"
     },
     "kendo-menu-item-text": {
         "type": "String",
@@ -9951,6 +9935,14 @@
         "type": "String",
         "value": "var(--kendo-hover-bg, initial)"
     },
+    "kendo-menu-item-active-text": {
+        "type": "String",
+        "value": "var(--kendo-hover-text, inherit)"
+    },
+    "kendo-menu-item-active-bg": {
+        "type": "String",
+        "value": "var(--kendo-selected-bg, initial)"
+    },
     "kendo-menu-item-focus-text": {
         "type": "String",
         "value": "var(--kendo-body-text, inherit)"
@@ -9963,13 +9955,17 @@
         "type": "String",
         "value": "var(--kendo-focus-outline, none)"
     },
-    "kendo-menu-item-expanded-text": {
-        "type": "String",
-        "value": "var(--kendo-hover-text, inherit)"
+    "kendo-menu-item-focus-outline-offset": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-spacing-0\\.5, 0.125rem) * -1)"
     },
-    "kendo-menu-item-expanded-bg": {
+    "kendo-menu-item-focus-outline-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-menu-item-focus-outline-style": {
         "type": "String",
-        "value": "var(--kendo-selected-bg, initial)"
+        "value": "solid"
     },
     "kendo-menu-item-disabled-text": {
         "type": "String",
@@ -9979,6 +9975,30 @@
         "type": "Color",
         "value": "transparent"
     },
+    "kendo-menu-item-selected-text": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-menu-item-selected-bg": {
+        "type": "Null",
+        "value": "null"
+    },
+    "kendo-menu-separator-margin-inline": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1, 0.25rem)"
+    },
+    "kendo-menu-separator-margin-block": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-menu-separator-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-menu-separator-border": {
+        "type": "String",
+        "value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
+    },
     "kendo-menu-popup-padding-x": {
         "type": "String",
         "value": "var(--kendo-spacing-0, 0px)"
@@ -10176,11 +10196,11 @@
         "type": "String",
         "value": "var(--kendo-color-base-emphasis, #605e5c)"
     },
-    "kendo-menu-popup-item-expanded-text": {
+    "kendo-menu-popup-item-active-text": {
         "type": "String",
         "value": "var(--kendo-color-on-app-surface, #323130)"
     },
-    "kendo-menu-popup-item-expanded-bg": {
+    "kendo-menu-popup-item-active-bg": {
         "type": "String",
         "value": "var(--kendo-color-base-active, #edebe9)"
     },

package/lib/swatches/all.json

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

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

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.1.0-dev.1",
+    "version": "9.1.0-dev.2",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "9.1.0-dev.1",
+    "version": "9.1.0-dev.2",
     "api": "modern",
     "previewColors": [
         "#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": "9.1.0-dev.1",
+  "version": "9.1.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,13 +52,13 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "3.0.0",
-    "@progress/kendo-theme-core": "9.1.0-dev.1",
-    "@progress/kendo-theme-utils": "9.1.0-dev.1"
+    "@progress/kendo-svg-icons": "^3.1.0",
+    "@progress/kendo-theme-core": "9.1.0-dev.2",
+    "@progress/kendo-theme-utils": "9.1.0-dev.2"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "ddc5029123cb01e0c0b640ffb9caf17f47160625"
+  "gitHead": "96a26672d9be0e3000f416723965ce410b8b1ff0"
 }

package/scss/menu/_layout.scss

@@ -51,6 +51,10 @@
             outline-width: var( --kendo-menu-item-focus-outline-width, #{$kendo-menu-item-focus-outline-width} );
             outline-style: var( --kendo-menu-item-focus-outline-style, #{$kendo-menu-item-focus-outline-style} );
         }
+
+        &.k-selected {
+            font-weight: var( --kendo-menu-item-selected-font-weight, #{$kendo-menu-item-selected-font-weight} );
+        }
     }
 
 
@@ -100,10 +104,11 @@
         }
 
         > .k-separator {
-            margin: 0 var( --kendo-menu-separator-margin, #{$kendo-menu-separator-margin} );
+            margin-block: var(--kendo-menu-separator-margin-block, #{$kendo-menu-separator-margin-block});
+            margin-inline: var(--kendo-menu-separator-margin-inline, #{$kendo-menu-separator-margin-inline});
             width: 0;
             height: auto;
-            border-bottom-width: var( --kendo-menu-separator-width, $kendo-menu-separator-width);
+            border-left-width: var( --kendo-menu-separator-width, #{$kendo-menu-separator-width});
             border-style: solid;
         }
     }
@@ -112,6 +117,7 @@
     // Orientation -- vertical
     .k-menu-vertical {
         flex-direction: column;
+        width: 100%;
 
         > .k-menu-item > .k-menu-link {
             padding-inline-end: var( --kendo-menu-popup-md-item-padding-end, #{$kendo-menu-popup-md-item-padding-end} );
@@ -127,7 +133,8 @@
         }
 
         > .k-separator {
-            margin: var( --kendo-menu-separator-margin, #{$kendo-menu-separator-margin} ) 0;
+            margin-block: var(--kendo-menu-separator-margin-inline, #{$kendo-menu-separator-margin-inline});
+            margin-inline: 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
@@ -151,6 +158,10 @@
         *::after {
             box-sizing: border-box;
         }
+
+        .k-menu-item {
+            font-weight: initial;
+        }
     }
 
 
@@ -178,10 +189,11 @@
         }
 
         .k-separator {
-            margin: var( --kendo-menu-separator-margin, $kendo-menu-separator-margin ) 0;
+            margin-block: var( --kendo-menu-separator-margin-inline, #{$kendo-menu-separator-margin-inline} );
+            margin-inline: 0;
             height: 0;
             border-width: 0;
-            border-top-width: var( --kendo-menu-separator-width, $kendo-menu-separator-width);
+            border-top-width: var( --kendo-menu-separator-width, #{$kendo-menu-separator-width});
             border-style: solid;
             display: block;
         }
@@ -283,69 +295,20 @@
         margin: 0;
         padding: 0;
         border: 0;
-        position: relative;
+        display: flex;
+        align-items: center;
 
         .k-menu {
             overflow: hidden;
             flex-wrap: nowrap;
         }
+    }
 
-        .k-menu-scroll-button {
-            padding: 0;
-            border-width: 0;
-            border-style: solid;
-            border-color: inherit;
-            color: inherit;
-            background: inherit;
-            position: absolute;
-
-            &.k-scroll-up {
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: var( --kendo-icon-size, 1rem );
-                border-bottom-width: 1px;
-
-                .k-font-icon::before {
-                    content: "\e013";
-                }
-            }
-
-            &.k-scroll-right {
-                top: 0;
-                right: 0;
-                height: 100%;
-                width: var( --kendo-icon-size, 1rem );
-                border-left-width: 1px;
-
-                .k-font-icon::before {
-                    content: "\e014";
-                }
-            }
-
-            &.k-scroll-down {
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                height: var( --kendo-icon-size, 1rem );
-                border-top-width: 1px;
-
-                .k-font-icon::before {
-                    content: "\e015";
-                }
-            }
-
-            &.k-scroll-left {
-                top: 0;
-                left: 0;
-                height: 100%;
-                width: var( --kendo-icon-size, 1rem );
-                border-right-width: 1px;
+    .k-menu-scroll-wrapper-vertical {
+        flex-direction: column;
 
-                .k-font-icon::before {
-                    content: "\e016";
-                }
-            }
+        > .k-menu-scroll-button {
+            width: 100%;
         }
     }
 

package/scss/menu/_theme.scss

@@ -27,18 +27,29 @@
 
             &:active,
             &.k-active {
-                color: var( --kendo-menu-item-expanded-text, #{$kendo-menu-item-expanded-text} );
-                background-color: var( --kendo-menu-item-expanded-bg, #{$kendo-menu-item-expanded-bg} );
+                color: var( --kendo-menu-item-active-text, #{$kendo-menu-item-active-text} );
+                background-color: var( --kendo-menu-item-active-bg, #{$kendo-menu-item-active-bg} );
             }
 
             &.k-disabled {
                 color: var( --kendo-menu-item-disabled-text, #{$kendo-menu-item-disabled-text} );
                 background-color: var( --kendo-menu-item-disabled-bg, #{$kendo-menu-item-disabled-bg} );
             }
+
+            &.k-selected {
+                color: var( --kendo-menu-item-selected-text, #{$kendo-menu-item-selected-text} );
+                background-color: var( --kendo-menu-item-selected-bg, #{$kendo-menu-item-selected-bg} );
+            }
         }
 
         .k-link > .k-icon {
-            color: var( --kendo-menu-icon-color, $kendo-menu-icon-color );
+            color: var( --kendo-menu-icon-color, #{$kendo-menu-icon-color} );
+        }
+
+        > .k-separator {
+            @include fill(
+                $border: var( --kendo-menu-separator-border, #{$kendo-menu-separator-border} )
+            );
         }
 
     }
@@ -67,8 +78,8 @@
                 &:active,
                 &.k-active,
                 &.k-selected {
-                    color: var( --kendo-menu-popup-item-expanded-text, #{$kendo-menu-popup-item-expanded-text} );
-                    background-color: var( --kendo-menu-popup-item-expanded-bg, #{$kendo-menu-popup-item-expanded-bg} );
+                    color: var( --kendo-menu-popup-item-active-text, #{$kendo-menu-popup-item-active-text} );
+                    background-color: var( --kendo-menu-popup-item-active-bg, #{$kendo-menu-popup-item-active-bg} );
                 }
 
                 &.k-disabled {
@@ -88,6 +99,12 @@
                 }
             }
         }
+
+        > .k-separator {
+            @include fill(
+                $border: var( --kendo-menu-separator-border, #{$kendo-menu-separator-border} )
+            );
+        }
     }
 
     .k-menu-scroll-wrapper .k-menu-scroll-button {