feat: z-index tokens are defined (#482)

docs/design-system/z-index.stories.mdx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Design System/Z-index" />
+
+# Z-index
+
+Z-index values define a set of variables to set z-order of elements.
+
+| Variable | Value | Description |
+|----|:----:|----|
+| `--bl-index-deep` | -1 | Deep z-index can be used to move an element behind everyting else |
+| `--bl-index-base` | 1 | Base z-index for just leveling up an element in z-stack |
+| `--bl-index-popover` | 100 | Z-index value for popover items |
+| `--bl-index-tooltip` | 200 | Tooltip-like elements can be used on top of popovers |
+| `--bl-index-sticky` | 300 | Z-index for sticky elements |
+| `--bl-index-overlay` | 400 | Z-index for overlay elements like backdrops |
+| `--bl-index-dialog` | 500 | Z-index for dialog and modals |
+| `--bl-index-notification` | 600 | Top z-index for showing toast or notification elements |

src/components/dialog/bl-dialog.css

@@ -21,9 +21,7 @@
 
 .dialog-polyfill .container {
   position: fixed;
-
-  /* FIXME: Use z-index variable */
-  z-index: 999;
+  z-index: var(--bl-index-dialog);
  }
 
 .dialog::backdrop {
@@ -40,12 +38,10 @@
   height: 100vh;
   align-items: center;
   justify-content: center;
+  z-index: var(--bl-index-dialog);
 
   /* FIXME: Use css variables for alpha colors */
   background: #273142b3;
-
-  /* FIXME: Use z-index variable */
-  z-index: 999;
  }
 
  :host([open]) .dialog-polyfill {

src/components/drawer/bl-drawer.css

@@ -13,7 +13,7 @@
   background: var(--bl-color-primary-background);
   box-shadow: var(--bl-size-xs) 0 var(--bl-size-2xl) rgba(0 0 0 / 50%);
   transition: right var(--bl-drawer-animation-duration, .25s);
-  z-index: 999;
+  z-index: var(--bl-index-sticky);
 }
 
 :host([open]) .drawer {

src/components/dropdown/bl-dropdown.css

@@ -9,9 +9,7 @@
     --border-color: var(--bl-color-primary);
 
     position: fixed;
-
-    /* FIXME: Use z-index variable */
-    z-index: 1;
+    z-index: var(--bl-index-popover);
     display: none;
     flex-direction: column;
     align-items: flex-start;

src/components/popover/bl-popover.css

@@ -11,7 +11,7 @@
   border: 1px solid var(--border-color);
   padding: var(--padding);
   border-radius: var(--border-radius);
-  z-index: 999;
+  z-index: var(--bl-index-popover);
   width: max-content;
   hyphens: auto;
   background-color: var(--background-color);

src/components/select/bl-select.css

@@ -24,9 +24,6 @@
   --menu-margin-top: var(--bl-size-2xs);
   --font-size: var(--bl-font-size-m);
   --disabled-color: var(--bl-color-tertiary);
-
-  /* TODO: Use predefined z-index values */
-  --z-index: 100;
   --menu-height: 250px;
   --popover-position: var(--bl-popover-position, fixed);
 }
@@ -198,7 +195,7 @@
   overflow-y: auto;
   display: none;
   flex-direction: column;
-  z-index: var(--z-index);
+  z-index: var(--bl-index-popover);
   width: 100%;
   top: var(--top);
   left: var(--left);

src/components/tooltip/bl-tooltip.css

@@ -13,7 +13,7 @@
   pointer-events: none;
   font: var(--bl-font-title-3-regular);
   padding: var(--bl-size-m);
-  z-index: 999;
+  z-index: var(--bl-index-tooltip);
   width: max-content;
   hyphens: auto;
 

src/themes/default.css

@@ -54,6 +54,16 @@
   --bl-size-5xl: 4rem; /* 64px */
   --bl-size-6xl: 5rem; /* 80px */
 
+  /* Z-indexes */
+  --bl-index-deep: -1;
+  --bl-index-base: 1;
+  --bl-index-popover: 100;
+  --bl-index-tooltip: 200;
+  --bl-index-sticky: 300;
+  --bl-index-overlay: 400;
+  --bl-index-dialog: 500;
+  --bl-index-notification: 600;
+
   /* Typography */
   --bl-font-family: 'RubikVariable', sans-serif;