Revise z index

packages/bootstrap/scss/appbar/_variables.scss

@@ -20,7 +20,7 @@ $kendo-appbar-padding-y: k-spacing(2) !default;
 $kendo-appbar-border-width: 0px !default;
 /// The z-index of the AppBar.
 /// @group appbar
-$kendo-appbar-zindex: 1000 !default;
+$kendo-appbar-zindex: 900 !default;
 /// The font family of the AppBar.
 /// @group appbar
 $kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;

packages/bootstrap/scss/core/_index.scss

@@ -13,6 +13,9 @@
 // Radii
 @use "./border-radii/index.import.scss" as *;
 
+// Z-index
+@use "./z-index/index.import.scss" as *;
+
 @forward "../_variables.scss";
 
 // Variables

packages/bootstrap/scss/core/z-index/index.import.scss

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

packages/classic/scss/appbar/_variables.scss

@@ -20,7 +20,7 @@ $kendo-appbar-padding-y: k-spacing(2) !default;
 $kendo-appbar-border-width: 0px !default;
 /// The z-index of the AppBar.
 /// @group appbar
-$kendo-appbar-zindex: 1000 !default;
+$kendo-appbar-zindex: 900 !default;
 /// The font family of the AppBar.
 /// @group appbar
 $kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;

packages/classic/scss/core/_index.scss

@@ -13,6 +13,9 @@
 // Border Radius
 @use "./border-radii/index.import.scss" as *;
 
+// Z-index
+@use "./z-index/index.import.scss" as *;
+
 // Variables
 @forward "../_variables.scss";
 

packages/classic/scss/core/z-index/index.import.scss

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

packages/core/scss/components/action-sheet/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-action-sheet--layout-base() {
 
@@ -12,14 +13,14 @@
         position: fixed;
         top: 0;
         left: 0;
-        z-index: 9999;
+        z-index: k-zindex("overlay-base", -1);
         overflow: hidden;
         transform: translateZ(0);
 
         // Overlay
         > .k-overlay {
             position: absolute;
-            z-index: 1;
+            z-index: k-zindex("content-base");
         }
 
         // Nested animation container
@@ -29,7 +30,7 @@
             border-radius: 0;
             overflow: hidden;
             position: absolute;
-            z-index: 2;
+            z-index: k-zindex("content-base", 1);
             top: 0;
             left: 0;
             pointer-events: none;
@@ -42,7 +43,7 @@
         // No animation container
         > .k-actionsheet {
             position: absolute;
-            z-index: 2;
+            z-index: k-zindex("content-base", 1);
         }
 
         // Enable mouse events for action sheet

packages/core/scss/components/appbar/_layout.scss

@@ -1,5 +1,6 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-appbar--layout-base() {
 
@@ -94,7 +95,7 @@
     .k-appbar-fixed {
         width: 100%;
         position: fixed;
-        z-index: 1;
+        z-index: k-zindex("floating-base");
     }
 
 

packages/core/scss/components/badge/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../color-system/_functions.import.scss" as *;
 @use "./_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-badge--layout-base() {
 
@@ -90,7 +91,7 @@
 
         .k-badge-#{$placement} {
             position: absolute;
-            z-index: 9999;
+            z-index: k-zindex("floating-badge");
 
             &.k-top-start {
                 @if $translate {

packages/core/scss/components/bottom-navigation/_layout.scss

@@ -1,4 +1,5 @@
 @use "../../color-system/_constants.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-bottom-navigation--layout-base() {
@@ -111,7 +112,7 @@
     // Positioning
     .k-bottom-nav.k-pos-fixed {
         bottom: 0;
-        z-index: 1;
+        z-index: k-zindex("floating-base");
     }
 
 }

packages/core/scss/components/button/_layout.scss

@@ -3,6 +3,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-button--layout-base() {
 
@@ -172,7 +173,7 @@
         > .k-button:active,
         > .k-button.k-active,
         > .k-button.k-selected {
-            z-index: 2;
+            z-index: k-zindex("content-base", 1);
         }
 
         .k-button:not(:first-child):not(:last-child) {
@@ -272,7 +273,7 @@
         right: -$kendo-button-border-width;
         top: -$kendo-button-border-width;
         bottom: -$kendo-button-border-width;
-        z-index: 0;
+        z-index: k-zindex("base-normal");
         transition: opacity .2s ease-in-out;
     }
 
@@ -337,7 +338,7 @@
             right: -$kendo-button-border-width;
             top: -$kendo-button-border-width;
             bottom: -$kendo-button-border-width;
-            z-index: 0;
+            z-index: z-index("base-background");
             transition: opacity .2s ease-in-out;
         }
     }

packages/core/scss/components/calendar/_layout.scss

@@ -2,6 +2,7 @@
 @use "sass:math";
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-calendar--layout-base() {
@@ -47,7 +48,7 @@
         outline: 0;
         display: table;
         position: relative;
-        z-index: 1;
+        z-index: k-zindex("content-base");
     }
     .k-calendar-caption,
     .k-calendar-caption.k-calendar-th,
@@ -128,7 +129,7 @@
         gap: $kendo-calendar-nav-gap;
         align-items: center;
         position: relative;
-        z-index: 2;
+        z-index: k-zindex("content-base", 1);
     }
 
 
@@ -174,7 +175,7 @@
         box-sizing: content-box;
         gap: $kendo-calendar-view-gap;
         position: relative;
-        z-index: 1;
+        z-index: k-zindex("content-base");
         overflow: hidden;
 
         .k-today {
@@ -219,7 +220,7 @@
 
         .k-calendar-td {
             width: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
-            height: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );;
+            height: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
             inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
             block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
         }
@@ -272,7 +273,7 @@
     // scoped in calendar until it is used elsewhere
     .k-calendar .k-scrollable-placeholder {
         position: absolute;
-        z-index: -1;
+        z-index: k-zindex("base-background");
         width: 1px;
         top: 0;
         right: 0;
@@ -358,7 +359,7 @@
                 content: "\200b";
                 height: 0;
                 line-height: 0;
-                z-index: 1;
+                z-index: k-zindex("content-base");
                 width: 150%;
                 left: -25%;
                 box-shadow: 0 0 $kendo-calendar-cell-size math.div( $kendo-calendar-cell-size, 2 ) $kendo-calendar-bg;
@@ -388,7 +389,7 @@
         display: block;
         overflow: hidden;
         position: relative;
-        z-index: 1;
+        z-index: k-zindex("content-base");
 
         &::before,
         &::after {
@@ -397,7 +398,7 @@
             content: "\200b";
             height: 0;
             line-height: 0;
-            z-index: 1;
+            z-index: k-zindex("content-base");
             width: 200%;
             left: -50%;
             $shadow-size: 3 * $kendo-calendar-navigation-item-height;

packages/core/scss/components/card/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../typography/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../typography/_variables.scss" as *;
 
@@ -71,7 +72,7 @@
         flex-shrink: 0;
         overflow: hidden;
         position: relative;
-        z-index: 1;
+        z-index: k-zindex("content-base");
 
         .k-card-title,
         .k-card-subtitle {
@@ -242,7 +243,7 @@
             @include border-radius( $kendo-card-deck-scroll-button-radius );
             flex: 0 0 auto;
             position: absolute;
-            z-index: 1;
+            z-index: k-zindex("content-base");
 
             &:first-child {
                 left: $kendo-card-deck-scroll-button-offset;

packages/core/scss/components/chat/_layout.scss

@@ -1,6 +1,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../spacing/index.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 
@@ -452,7 +453,7 @@
             height: 100%;
             aspect-ratio: auto;
             position: absolute;
-            z-index: 2;
+            z-index: k-zindex("content-base", 1);
             top: 0;
 
             .k-button-icon {

packages/core/scss/components/checkbox/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../mixins/index.import.scss" as *;
 @use "../../spacing/index.import.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -182,7 +183,7 @@
             left: 50%;
             top: 50%;
             border-radius: 100%;
-            z-index: -1;
+            z-index: k-zindex("base-background");
             transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
             transform: translate(-50%, -50%) scale(0);
             transform-origin: center center;

packages/core/scss/components/color-preview/_layout.scss

@@ -1,5 +1,6 @@
 @use "./_variables.scss" as *;
 @use "../icons/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-color-preview--layout-base() {
 
@@ -60,7 +61,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        z-index: -1;
+        z-index: k-zindex("base-background");
         background: $kendo-color-preview-transparent-color-image;
         background-size: contain;
         background-position: 0 0;

packages/core/scss/components/coloreditor/_layout.scss

@@ -2,6 +2,8 @@
 @use "../../mixins/index.import.scss" as *;
 @use "./variables.scss" as *;
 @use "../colorpalette/_variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
+
 
 @mixin kendo-color-editor--layout-base() {
 
@@ -43,7 +45,7 @@
         justify-content: center;
         gap: $kendo-color-editor-preview-gap;
         position: relative;
-        z-index: 1;
+        z-index: k-zindex("content-base");
     }
 
     .k-coloreditor-preview .k-color-preview {

packages/core/scss/components/colorgradient/_layout.scss

@@ -2,6 +2,7 @@
 @use "sass:math";
 @use "../../mixins/index.import.scss" as *;
 @use "../../color-system/_constants.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 @use "./variables.scss" as *;
 
 @mixin kendo-color-gradient--layout-base() {
@@ -55,7 +56,7 @@
             position: absolute;
             top: 50%;
             left: 50%;
-            z-index: 1;
+            z-index: k-zindex("content-base");
             cursor: pointer;
         }
 
@@ -113,11 +114,11 @@
             display: block;
             border-radius: 10px;
             position: relative;
-            z-index: -1;
+            z-index: k-zindex("base-background");
         }
 
         .k-slider-track-wrap {
-            z-index: 1;
+            z-index: k-zindex("content-base");
         }
 
         .k-slider-selection {

packages/core/scss/components/colorpalette/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
 @use "./variables.scss" as *;
+@use "../../z-index/index.import.scss" as *;
 
 @mixin kendo-color-palette--layout-base() {
 
@@ -43,15 +44,15 @@
         &:hover,
         &.k-hover {
             position: relative;
-            z-index: 101;
+            z-index: k-zindex("content-base", 3);
         }
 
         &:focus,
         &.k-focus,
         &.k-selected,
         &.k-selected:hover {
             position: relative;
-            z-index: 100;
+            z-index: k-zindex("content-base", 2);
         }
     }