@progress/kendo-theme-fluent 12.0.2-dev.1 → 12.1.0-dev.1

package/dist/meta/sassdoc-raw-data.json

@@ -1827,8 +1827,8 @@
     {
         "description": "The horizontal margin of the AppBar.\n",
         "commentRange": {
-            "start": 4,
-            "end": 5
+            "start": 5,
+            "end": 6
         },
         "context": {
             "type": "variable",
@@ -1836,8 +1836,8 @@
             "value": "var( --kendo-appbar-margin-x, k-spacing(0) )",
             "scope": "default",
             "line": {
-                "start": 6,
-                "end": 6
+                "start": 7,
+                "end": 7
             }
         },
         "group": [
@@ -1852,8 +1852,8 @@
     {
         "description": "The vertical margin of the AppBar.\n",
         "commentRange": {
-            "start": 7,
-            "end": 8
+            "start": 8,
+            "end": 9
         },
         "context": {
             "type": "variable",
@@ -1861,8 +1861,8 @@
             "value": "var( --kendo-appbar-margin-y, k-spacing(0) )",
             "scope": "default",
             "line": {
-                "start": 9,
-                "end": 9
+                "start": 10,
+                "end": 10
             }
         },
         "group": [
@@ -1877,8 +1877,8 @@
     {
         "description": "The horizontal padding of the AppBar.\n",
         "commentRange": {
-            "start": 10,
-            "end": 11
+            "start": 11,
+            "end": 12
         },
         "context": {
             "type": "variable",
@@ -1886,8 +1886,8 @@
             "value": "var( --kendo-appbar-padding-x, k-spacing(5) )",
             "scope": "default",
             "line": {
-                "start": 12,
-                "end": 12
+                "start": 13,
+                "end": 13
             }
         },
         "group": [
@@ -1902,8 +1902,8 @@
     {
         "description": "The vertical padding of the AppBar.\n",
         "commentRange": {
-            "start": 13,
-            "end": 14
+            "start": 14,
+            "end": 15
         },
         "context": {
             "type": "variable",
@@ -1911,8 +1911,8 @@
             "value": "var( --kendo-appbar-padding-y, k-spacing(3.5) )",
             "scope": "default",
             "line": {
-                "start": 15,
-                "end": 15
+                "start": 16,
+                "end": 16
             }
         },
         "group": [
@@ -1927,8 +1927,8 @@
     {
         "description": "The width of the border around the AppBar.\n",
         "commentRange": {
-            "start": 16,
-            "end": 17
+            "start": 17,
+            "end": 18
         },
         "context": {
             "type": "variable",
@@ -1936,8 +1936,8 @@
             "value": "var( --kendo-appbar-border-width, 0px )",
             "scope": "default",
             "line": {
-                "start": 18,
-                "end": 18
+                "start": 19,
+                "end": 19
             }
         },
         "group": [
@@ -1952,17 +1952,17 @@
     {
         "description": "The z-index of the AppBar.\n",
         "commentRange": {
-            "start": 19,
-            "end": 20
+            "start": 20,
+            "end": 21
         },
         "context": {
             "type": "variable",
             "name": "kendo-appbar-zindex",
-            "value": "var( --kendo-appbar-zindex, 1000 )",
+            "value": "var( --kendo-appbar-zindex, k-z-index(\"banner\") )",
             "scope": "default",
             "line": {
-                "start": 21,
-                "end": 21
+                "start": 22,
+                "end": 22
             }
         },
         "group": [
@@ -1977,8 +1977,8 @@
     {
         "description": "The font family of the AppBar.\n",
         "commentRange": {
-            "start": 22,
-            "end": 23
+            "start": 23,
+            "end": 24
         },
         "context": {
             "type": "variable",
@@ -1986,8 +1986,8 @@
             "value": "var( --kendo-appbar-font-family, var( --kendo-font-family, inherit ) )",
             "scope": "default",
             "line": {
-                "start": 24,
-                "end": 24
+                "start": 25,
+                "end": 25
             }
         },
         "group": [
@@ -2002,8 +2002,8 @@
     {
         "description": "The font size of the AppBar.\n",
         "commentRange": {
-            "start": 25,
-            "end": 26
+            "start": 26,
+            "end": 27
         },
         "context": {
             "type": "variable",
@@ -2011,8 +2011,8 @@
             "value": "var( --kendo-appbar-font-size, var( --kendo-font-size, inherit ) )",
             "scope": "default",
             "line": {
-                "start": 27,
-                "end": 27
+                "start": 28,
+                "end": 28
             }
         },
         "group": [
@@ -2027,8 +2027,8 @@
     {
         "description": "The line height of the AppBar.\n",
         "commentRange": {
-            "start": 28,
-            "end": 29
+            "start": 29,
+            "end": 30
         },
         "context": {
             "type": "variable",
@@ -2036,8 +2036,8 @@
             "value": "var( --kendo-appbar-line-height, var( --kendo-line-height, normal ) )",
             "scope": "default",
             "line": {
-                "start": 30,
-                "end": 30
+                "start": 31,
+                "end": 31
             }
         },
         "group": [
@@ -2052,8 +2052,8 @@
     {
         "description": "The spacing between the AppBar sections.\n",
         "commentRange": {
-            "start": 32,
-            "end": 33
+            "start": 33,
+            "end": 34
         },
         "context": {
             "type": "variable",
@@ -2061,8 +2061,8 @@
             "value": "var( --kendo-appbar-spacing, k-spacing(2) )",
             "scope": "default",
             "line": {
-                "start": 34,
-                "end": 34
+                "start": 35,
+                "end": 35
             }
         },
         "group": [
@@ -2077,8 +2077,8 @@
     {
         "description": "The text color of the AppBar.\n",
         "commentRange": {
-            "start": 36,
-            "end": 37
+            "start": 37,
+            "end": 38
         },
         "context": {
             "type": "variable",
@@ -2086,8 +2086,8 @@
             "value": "var( --kendo-appbar-text, k-color(on-app-surface) )",
             "scope": "default",
             "line": {
-                "start": 38,
-                "end": 38
+                "start": 39,
+                "end": 39
             }
         },
         "group": [
@@ -2102,8 +2102,8 @@
     {
         "description": "The background color of the AppBar.\n",
         "commentRange": {
-            "start": 39,
-            "end": 40
+            "start": 40,
+            "end": 41
         },
         "context": {
             "type": "variable",
@@ -2111,8 +2111,8 @@
             "value": "var( --kendo-appbar-bg, k-color(surface) )",
             "scope": "default",
             "line": {
-                "start": 41,
-                "end": 41
+                "start": 42,
+                "end": 42
             }
         },
         "group": [
@@ -2127,8 +2127,8 @@
     {
         "description": "The border color of the AppBar.\n",
         "commentRange": {
-            "start": 42,
-            "end": 43
+            "start": 43,
+            "end": 44
         },
         "context": {
             "type": "variable",
@@ -2136,8 +2136,8 @@
             "value": "var( --kendo-appbar-border, color-mix(in srgb, k-color(border) 26%, transparent) )",
             "scope": "default",
             "line": {
-                "start": 44,
-                "end": 44
+                "start": 45,
+                "end": 45
             }
         },
         "group": [
@@ -2152,8 +2152,8 @@
     {
         "description": "The background color of the AppBar based on light theme color.\n",
         "commentRange": {
-            "start": 46,
-            "end": 47
+            "start": 47,
+            "end": 48
         },
         "context": {
             "type": "variable",
@@ -2161,8 +2161,8 @@
             "value": "k-color(light)",
             "scope": "default",
             "line": {
-                "start": 48,
-                "end": 48
+                "start": 49,
+                "end": 49
             }
         },
         "group": [
@@ -2177,8 +2177,8 @@
     {
         "description": "The text color of the AppBar based on light theme color.\n",
         "commentRange": {
-            "start": 49,
-            "end": 50
+            "start": 50,
+            "end": 51
         },
         "context": {
             "type": "variable",
@@ -2186,8 +2186,8 @@
             "value": "k-color(on-light)",
             "scope": "default",
             "line": {
-                "start": 51,
-                "end": 51
+                "start": 52,
+                "end": 52
             }
         },
         "group": [
@@ -2202,8 +2202,8 @@
     {
         "description": "The background color of the AppBar based on dark theme color.\n",
         "commentRange": {
-            "start": 53,
-            "end": 54
+            "start": 54,
+            "end": 55
         },
         "context": {
             "type": "variable",
@@ -2211,8 +2211,8 @@
             "value": "k-color(dark)",
             "scope": "default",
             "line": {
-                "start": 55,
-                "end": 55
+                "start": 56,
+                "end": 56
             }
         },
         "group": [
@@ -2227,8 +2227,8 @@
     {
         "description": "The text color of the AppBar based on dark theme color.\n",
         "commentRange": {
-            "start": 56,
-            "end": 57
+            "start": 57,
+            "end": 58
         },
         "context": {
             "type": "variable",
@@ -2236,8 +2236,8 @@
             "value": "k-color(on-dark)",
             "scope": "default",
             "line": {
-                "start": 58,
-                "end": 58
+                "start": 59,
+                "end": 59
             }
         },
         "group": [
@@ -2252,8 +2252,8 @@
     {
         "description": "The theme colors map for the AppBar variations.\n",
         "commentRange": {
-            "start": 60,
-            "end": 61
+            "start": 61,
+            "end": 62
         },
         "context": {
             "type": "variable",
@@ -2261,8 +2261,8 @@
             "value": "(\n    \"primary\": k-color(primary),\n    \"secondary\": k-color(secondary),\n    \"tertiary\": k-color(tertiary),\n    \"info\": k-color(info),\n    \"success\": k-color(success),\n    \"warning\": k-color(warning),\n    \"error\": k-color(error),\n    \"dark\": k-color(dark),\n    \"light\": k-color(light),\n    \"inverse\": if($kendo-is-dark-theme, k-color(light), k-color(dark)),\n)",
             "scope": "default",
             "line": {
-                "start": 62,
-                "end": 73
+                "start": 63,
+                "end": 74
             }
         },
         "group": [
@@ -35427,7 +35427,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-grid-column-menu-tabbed-bg",
-            "value": "var( --kendo-grid-column-menu-tabbed-bg, var(--kendo-base-bg, inherit) )",
+            "value": "var( --kendo-grid-column-menu-tabbed-bg, k-color(surface) )",
             "scope": "default",
             "line": {
                 "start": 481,

package/dist/meta/variables.json

@@ -922,6 +922,31 @@
         "type": "List",
         "value": "(color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out)"
     },
+    "kendo-z-step": {
+        "type": "Number",
+        "value": "1"
+    },
+    "kendo-z-layers": {
+        "type": "Map",
+        "value": "(bottom: -1, base: 0, handle: 10, selection: 100, badge: 300, animation: 600, banner: 1000, floating: 5000, overlay: 10000, drawer: 11000, modal: 11500, popup: 12000, loading: 20000, top: 100000, scroll: 200000)",
+        "prettyValue": {
+            "bottom": -1,
+            "base": 0,
+            "handle": 10,
+            "selection": 100,
+            "badge": 300,
+            "animation": 600,
+            "banner": 1000,
+            "floating": 5000,
+            "overlay": 10000,
+            "drawer": 11000,
+            "modal": 11500,
+            "popup": 12000,
+            "loading": 20000,
+            "top": 100000,
+            "scroll": 200000
+        }
+    },
     "kendo-h1-font-size": {
         "type": "Number",
         "value": "80px"
@@ -12943,7 +12968,7 @@
     },
     "kendo-grid-column-menu-tabbed-bg": {
         "type": "String",
-        "value": "var(--kendo-grid-column-menu-tabbed-bg, var(--kendo-base-bg, inherit))"
+        "value": "var(--kendo-grid-column-menu-tabbed-bg, var(--kendo-color-surface, #ffffff))"
     },
     "kendo-grid-drag-cell-width": {
         "type": "String",

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.2-dev.1",
+    "version": "12.1.0-dev.1",
     "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.2-dev.1",
+    "version": "12.1.0-dev.1",
     "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.2-dev.1",
+    "version": "12.1.0-dev.1",
     "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.2-dev.1",
+    "version": "12.1.0-dev.1",
     "previewColors": [
         "#1F1F1F",
         "#292929",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "12.0.2-dev.1",
+    "version": "12.1.0-dev.1",
     "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.2-dev.1",
+  "version": "12.1.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.5.0",
-    "@progress/kendo-theme-core": "12.0.2-dev.1",
-    "@progress/kendo-theme-utils": "12.0.2-dev.1"
+    "@progress/kendo-theme-core": "12.1.0-dev.1",
+    "@progress/kendo-theme-utils": "12.1.0-dev.1"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "d445807a67dc48f595ab5f34026a6b1da89ff9e8"
+  "gitHead": "7b3a495779befd95451b5e9193f492f0cc917a6e"
 }

package/scss/appbar/_variables.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "../core/z-index/index.import.scss" as *;
 @use "../core/_index.scss" as *;
 
 /// The horizontal margin of the AppBar.
@@ -18,7 +19,7 @@ $kendo-appbar-padding-y: var( --kendo-appbar-padding-y, k-spacing(3.5) ) !defaul
 $kendo-appbar-border-width: var( --kendo-appbar-border-width, 0px ) !default;
 /// The z-index of the AppBar.
 /// @group appbar
-$kendo-appbar-zindex: var( --kendo-appbar-zindex, 1000 ) !default;
+$kendo-appbar-zindex: var( --kendo-appbar-zindex, k-z-index("banner") ) !default;
 /// The font family of the AppBar.
 /// @group appbar
 $kendo-appbar-font-family: var( --kendo-appbar-font-family, var( --kendo-font-family, inherit ) ) !default;

package/scss/bottom-navigation/_layout.scss

@@ -1,4 +1,5 @@
 @use "./_variables.scss" as *;
+@use "../core/z-index/index.import.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *;
 
 @mixin kendo-bottom-navigation--layout() {

package/scss/button/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "../core/_index.scss" as *;
+@use "../core/z-index/index.import.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *;
 
@@ -114,7 +115,7 @@
             inset-inline-end: calc(-1 * #{$kendo-button-border-width});
             inset-block-start: calc(-1 * #{$kendo-button-border-width});
             inset-block-end: calc(-1 * #{$kendo-button-border-width});
-            z-index: 0;
+            z-index: k-z-index("base");
             transition: opacity .2s ease-in-out;
         }
 

package/scss/colorpalette/_layout.scss

@@ -10,23 +10,6 @@
         opacity: .3;
     }
 
-    .k-colorpalette-tile {
-
-        &:hover,
-        &.k-hover {
-            position: relative;
-            z-index: 101;
-        }
-
-        &:focus,
-        &.k-focus,
-        &.k-selected,
-        &.k-selected:hover {
-            position: relative;
-            z-index: 100;
-        }
-    }
-
     @each $size, $size-props in $kendo-color-palette-sizes {
         $_tile-width: map.get( $size-props, width );
         $_tile-height: map.get( $size-props, height );

package/scss/core/z-index/index.import.scss

@@ -0,0 +1 @@
+@forward "@progress/kendo-theme-core/scss/z-index/index.import.scss";

package/scss/dock-manager/_layout.scss

@@ -28,10 +28,6 @@
             padding-block-end: $kendo-dock-manager-tabbed-pane-padding-x;
         }
     }
-
-    .k-docking-preview {
-        z-index: 10;
-    }
 }
 
 @mixin  kendo-dock-indicator--layout() {

package/scss/drawer/_layout.scss

@@ -1,5 +1,6 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/z-index/index.import.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/drawer/_layout.scss" as *;
 
 @mixin kendo-drawer--layout() {
@@ -28,7 +29,7 @@
             inset-block-start: 50%;
             inset-inline-start: $kendo-drawer-item-ripple-spacing-x;
             transform: translateY(-50%);
-            z-index: 2;
+            z-index: k-z-index("base", 2);
             opacity: 0;
             transition: opacity .3s;
             pointer-events: none;

package/scss/expansion-panel/_layout.scss

@@ -1,5 +1,6 @@
 @use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/z-index/index.import.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/expansion-panel/_layout.scss" as *;
 
 @mixin kendo-expander--layout() {
@@ -23,7 +24,7 @@
             inset: $kendo-expander-focus-offset;
             outline-width: $kendo-expander-focus-outline-width;
             outline-style: $kendo-expander-focus-outline-style;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
             pointer-events: none;
         }
     }

package/scss/fab/_layout.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "./_variables.scss" as *;
-@use "../core/_index.scss" as *;
+@use "../core/z-index/index.import.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/fab/_layout.scss" as *;
 
 @mixin kendo-fab--layout() {
@@ -15,7 +15,7 @@
             inset: $kendo-fab-focus-offset;
             outline-width: $kendo-fab-focus-outline-width;
             outline-style: $kendo-fab-focus-outline-style;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
         &:focus::after,
@@ -26,7 +26,7 @@
             inset: calc( #{ $kendo-fab-focus-offset} + 1px );
             outline-width: calc( #{ $kendo-fab-focus-outline-width} - 1px );
             outline-style: $kendo-fab-focus-outline-style;
-            z-index: 1;
+            z-index: k-z-index("base", 1);
         }
 
         &.k-rounded-full {

package/scss/grid/_variables.scss

@@ -478,7 +478,7 @@ $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: var( --kendo-grid-col
 
 /// The background color of the Grid tabbed column menu.
 /// @group grid
-$kendo-grid-column-menu-tabbed-bg: var( --kendo-grid-column-menu-tabbed-bg, var(--kendo-base-bg, inherit) ) !default;
+$kendo-grid-column-menu-tabbed-bg: var( --kendo-grid-column-menu-tabbed-bg, k-color(surface) ) !default;
 
 /// The default width of the Grid drag cell.
 /// @group grid