Merge pull request #3159 from weaveworks/162-use-standard-z-indices

Use only z-index values from the theme

client/.sass-lint.yml

@@ -5,3 +5,8 @@ files:
 rules:
   no-important: 1
   no-color-literals: 2
+  variable-for-property:
+    - 2
+    -
+      properties:
+      - 'z-index'

client/.stylelintrc

@@ -4,6 +4,7 @@
     "stylelint-config-styled-components",
     "stylelint-config-recommended",
   ],
+  "plugins": ["stylelint-declaration-use-variable"],
   "rules": {
     "block-no-empty": null,
     "color-named": "never",
@@ -15,5 +16,6 @@
       "ignoreProperties": ["tab-size", "hyphens"],
     }],
     "selector-type-no-unknown": null,
+    "sh-waqar/declaration-use-variable": [["z-index"]],
   },
 }

client/app/styles/_base.scss

@@ -84,7 +84,7 @@ a {
   left: 0;
   opacity: 0;
   pointer-events: none;
-  z-index: 1000;
+  z-index: $layer-modal;
 
   &.faded {
     // NOTE: Not sure if we should block the pointer events here..
@@ -213,11 +213,11 @@ a {
     position: relative;
 
     > * {
-      z-index: 20;
+      z-index: $layer-front;
       flex: 1 1;
     }
 
-    .time-control { z-index: 2001; }
+    .time-control { z-index: $layer-modal; }
 
     .logo {
       margin: -16px 0 0 8px;
@@ -282,8 +282,7 @@ a {
       left: 10px;
       transform: translateX(-50%);
       white-space: nowrap;
-      // above everything
-      z-index: 20000;
+      z-index: $layer-tooltip;
 
       // Adjusted from http://www.cssarrowplease.com/
       &:after {
@@ -658,7 +657,7 @@ a {
   &-wrapper {
     position: fixed;
     display: flex;
-    z-index: 1024;
+    z-index: $layer-front;
     right: $details-window-padding-left;
     top: 100px;
     bottom: 48px;
@@ -678,7 +677,7 @@ a {
   background-color: $color-white;
   @extend .shadow-2;
   // keep node-details above the terminal.
-  z-index: 2;
+  z-index: $layer-front;
 
   &:last-child {
     margin-bottom: 0;
@@ -696,7 +695,7 @@ a {
 
     .close-details {
       position: relative;
-      z-index: 1024;
+      z-index: $layer-front;
     }
 
     > span {
@@ -1667,7 +1666,7 @@ a {
     user-select: none;
     top: 0;
     left: 4px;
-    z-index: 1024;
+    z-index: $layer-front;
     padding: 4px;
     color: $text-secondary-color;
 
@@ -1687,7 +1686,7 @@ a {
     overflow: hidden;
     background: $color-white;
     position: relative;
-    z-index: 1;
+    z-index: $layer-front;
     display: flex;
     border-radius: $border-radius;
     width: 100%;
@@ -1787,7 +1786,7 @@ a {
 //
 
 .help-panel {
-  z-index: 2048;
+  z-index: $layer-modal;
   background-color: $color-white;
   @extend .shadow-2;
   display: flex;
@@ -1975,7 +1974,7 @@ a {
   position: absolute;
   padding: 10px;
   left: 10px;
-  z-index: 10000;
+  z-index: $layer-modal;
 
   opacity: 0.3;
 
@@ -2119,7 +2118,7 @@ a {
     background-color: $color-white;
     padding: 20px;
     @extend .shadow-2;
-    z-index: 2048;
+    z-index: $layer-modal;
   }
 
   &-item {

client/package.json

@@ -44,7 +44,7 @@
     "reselect": "3.0.1",
     "reselect-map": "1.0.3",
     "styled-components": "2.2.4",
-    "weaveworks-ui-components": "0.4.58",
+    "weaveworks-ui-components": "0.4.64",
     "whatwg-fetch": "2.0.3",
     "xterm": "2.9.2"
   },
@@ -88,6 +88,7 @@
     "stylelint-config-recommended": "2.1.0",
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-custom-processor-loader": "0.4.0",
+    "stylelint-declaration-use-variable": "1.6.1",
     "stylelint-processor-styled-components": "1.3.1",
     "url": "0.11.0",
     "url-loader": "0.6.2",

client/webpack.local.config.js

@@ -5,7 +5,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const SassLintPlugin = require('sasslint-webpack-plugin');
 const ContrastStyleCompiler = require('./app/scripts/contrast-compiler');
-const { themeColorsAsScss } = require('weaveworks-ui-components/lib/theme');
+const { themeVarsAsScss } = require('weaveworks-ui-components/lib/theme');
 
 /**
  * This is the Webpack configuration file for local development.
@@ -134,7 +134,7 @@ module.exports = {
           }, {
             loader: 'sass-loader',
             options: {
-              data: themeColorsAsScss(),
+              data: themeVarsAsScss(),
               includePaths: [
                 path.resolve(__dirname, './node_modules/xterm'),
                 path.resolve(__dirname, './node_modules/font-awesome'),

client/webpack.production.config.js

@@ -6,7 +6,7 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ContrastStyleCompiler = require('./app/scripts/contrast-compiler');
-const { themeColorsAsScss } = require('weaveworks-ui-components/lib/theme');
+const { themeVarsAsScss } = require('weaveworks-ui-components/lib/theme');
 
 const GLOBALS = {
   'process.env': {NODE_ENV: '"production"'}
@@ -134,7 +134,7 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               minimize: true,
-              data: themeColorsAsScss(),
+              data: themeVarsAsScss(),
               includePaths: [
                 path.resolve(__dirname, './node_modules/xterm'),
                 path.resolve(__dirname, './node_modules/font-awesome'),