From 397757ae626b49a70f58effcfa999d7cb83484d4 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Fri, 21 Feb 2020 10:17:18 -0500
Subject: [PATCH] ui: Create CSS variables for box-shadowing consistency
 (#7337)

* Table - Lowest (on-hover of table items)
* Buttons - Middle
* Form-elements - Removed, no box-shadowing in input forms mocks.
* Menu-panel -High
* Modal-dialog - Highest
* Stats-card -Middle/High(Active)
* Tooltip - Middle
* Card - Middle
* Expanded-single-select - Middle
* Tabular-details - High
* Discovery chain - High
---
 ui-v2/app/styles/base/components/buttons/skin.scss           | 2 +-
 ui-v2/app/styles/base/components/form-elements/skin.scss     | 1 -
 ui-v2/app/styles/base/components/menu-panel/skin.scss        | 2 +-
 ui-v2/app/styles/base/components/modal-dialog/skin.scss      | 2 +-
 ui-v2/app/styles/base/components/stats-card/skin.scss        | 4 ++--
 ui-v2/app/styles/base/components/tooltip/skin.scss           | 2 +-
 ui-v2/app/styles/base/decoration/base-variables.scss         | 5 +++++
 ui-v2/app/styles/components/card/skin.scss                   | 2 +-
 ui-v2/app/styles/components/expanded-single-select/skin.scss | 2 +-
 ui-v2/app/styles/components/table.scss                       | 2 +-
 ui-v2/app/styles/components/tabular-details/skin.scss        | 2 +-
 ui-v2/app/styles/variables/index.scss                        | 3 ++-
 ui-v2/app/templates/components/discovery-chain.hbs           | 4 ++--
 13 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/ui-v2/app/styles/base/components/buttons/skin.scss b/ui-v2/app/styles/base/components/buttons/skin.scss
index 7db009cb42..8a79fdb115 100644
--- a/ui-v2/app/styles/base/components/buttons/skin.scss
+++ b/ui-v2/app/styles/base/components/buttons/skin.scss
@@ -27,7 +27,7 @@
   @extend %button;
   border-width: 1px;
   border-radius: $decor-radius-100;
-  box-shadow: 0 3px 1px 0 rgba($black, 0.12);
+  box-shadow: $decor-elevation-200;
 }
 /* color */
 %copy-button {
diff --git a/ui-v2/app/styles/base/components/form-elements/skin.scss b/ui-v2/app/styles/base/components/form-elements/skin.scss
index 3c4140ae7e..69471f11ba 100644
--- a/ui-v2/app/styles/base/components/form-elements/skin.scss
+++ b/ui-v2/app/styles/base/components/form-elements/skin.scss
@@ -7,7 +7,6 @@
 %form-element-text-input {
   -moz-appearance: none;
   -webkit-appearance: none;
-  box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.06);
   border-radius: $decor-radius-100;
   border: $decor-border-100;
   outline: none;
diff --git a/ui-v2/app/styles/base/components/menu-panel/skin.scss b/ui-v2/app/styles/base/components/menu-panel/skin.scss
index 67dab26828..427a67994e 100644
--- a/ui-v2/app/styles/base/components/menu-panel/skin.scss
+++ b/ui-v2/app/styles/base/components/menu-panel/skin.scss
@@ -1,7 +1,7 @@
 %menu-panel {
   border: $decor-border-100;
   border-radius: $decor-radius-200;
-  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.21);
+  box-shadow: $decor-elevation-600;
 }
 %menu-panel {
   border-color: $gray-300;
diff --git a/ui-v2/app/styles/base/components/modal-dialog/skin.scss b/ui-v2/app/styles/base/components/modal-dialog/skin.scss
index e81eefcb14..c2907e3f47 100644
--- a/ui-v2/app/styles/base/components/modal-dialog/skin.scss
+++ b/ui-v2/app/styles/base/components/modal-dialog/skin.scss
@@ -2,7 +2,7 @@
   background-color: rgba($white, 0.9);
 }
 %modal-window {
-  box-shadow: 2px 8px 8px 0 rgba($black, 0.1);
+  box-shadow: $decor-elevation-800;
 }
 %modal-window {
   /*%frame-gray-000*/
diff --git a/ui-v2/app/styles/base/components/stats-card/skin.scss b/ui-v2/app/styles/base/components/stats-card/skin.scss
index 1899b22aba..df036158f8 100644
--- a/ui-v2/app/styles/base/components/stats-card/skin.scss
+++ b/ui-v2/app/styles/base/components/stats-card/skin.scss
@@ -14,11 +14,11 @@
 }
 %stats-card,
 %stats-card header::before {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: $decor-elevation-400;
 }
 %stats-card:hover,
 %stats-card:focus {
-  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: $decor-elevation-600;
 }
 %stats-card header > :not(a):last-child {
   border: $decor-border-100;
diff --git a/ui-v2/app/styles/base/components/tooltip/skin.scss b/ui-v2/app/styles/base/components/tooltip/skin.scss
index 493fb4a51a..806e7c22ab 100644
--- a/ui-v2/app/styles/base/components/tooltip/skin.scss
+++ b/ui-v2/app/styles/base/components/tooltip/skin.scss
@@ -23,5 +23,5 @@
   /* this isn't quite like the values in structure */
   /* but this looks closer visually */
   /* TODO: try and get this closer to structure */
-  box-shadow: 0 2px 5px 0 rgba($black, 0.31);
+  box-shadow: $decor-elevation-400;
 }
diff --git a/ui-v2/app/styles/base/decoration/base-variables.scss b/ui-v2/app/styles/base/decoration/base-variables.scss
index c22d70dda2..5342e1cc5a 100644
--- a/ui-v2/app/styles/base/decoration/base-variables.scss
+++ b/ui-v2/app/styles/base/decoration/base-variables.scss
@@ -7,3 +7,8 @@ $decor-border-000: none;
 $decor-border-100: 1px solid;
 $decor-border-200: 2px solid;
 $decor-border-300: 3px solid;
+$decor-elevation-100: 0 2px 4px rgba(0, 0, 0, 0.1);
+$decor-elevation-200: 0 5px 1px -2px rgba($black, 0.12);
+$decor-elevation-400: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1);
+$decor-elevation-600: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
+$decor-elevation-800: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);
diff --git a/ui-v2/app/styles/components/card/skin.scss b/ui-v2/app/styles/components/card/skin.scss
index f7cee4f3ee..7ccf5f1f9c 100644
--- a/ui-v2/app/styles/components/card/skin.scss
+++ b/ui-v2/app/styles/components/card/skin.scss
@@ -21,5 +21,5 @@
   list-style-type: none;
 }
 %card-intent {
-  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: $decor-elevation-400;
 }
diff --git a/ui-v2/app/styles/components/expanded-single-select/skin.scss b/ui-v2/app/styles/components/expanded-single-select/skin.scss
index d67d29c25f..2bf1ab2cc7 100644
--- a/ui-v2/app/styles/components/expanded-single-select/skin.scss
+++ b/ui-v2/app/styles/components/expanded-single-select/skin.scss
@@ -4,7 +4,7 @@
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
 %expanded-single-select input[type='radio']:focus + * {
-  box-shadow: 0 4px 8px 0 rgba($black, 0.05);
+  box-shadow: $decor-elevation-400;
 }
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss
index 2150ee4fe2..9b7f97ec6d 100644
--- a/ui-v2/app/styles/components/table.scss
+++ b/ui-v2/app/styles/components/table.scss
@@ -45,7 +45,7 @@ table:not(.sessions) td:first-child {
 }
 
 table:not(.sessions) tbody tr:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: $decor-elevation-100;
 }
 /* Header Tooltips/Icon*/
 th {
diff --git a/ui-v2/app/styles/components/tabular-details/skin.scss b/ui-v2/app/styles/components/tabular-details/skin.scss
index 23d50798ec..87fa1a415a 100644
--- a/ui-v2/app/styles/components/tabular-details/skin.scss
+++ b/ui-v2/app/styles/components/tabular-details/skin.scss
@@ -8,7 +8,7 @@
 %tabular-detail {
   border: 1px solid $gray-300;
   border-radius: $decor-radius-100;
-  box-shadow: 0 8px 10px 0 rgba($black, 0.1);
+  box-shadow: $decor-elevation-600;
   margin-bottom: 20px;
 }
 %tabular-detail::before,
diff --git a/ui-v2/app/styles/variables/index.scss b/ui-v2/app/styles/variables/index.scss
index eb90ae130c..1d71f3793a 100644
--- a/ui-v2/app/styles/variables/index.scss
+++ b/ui-v2/app/styles/variables/index.scss
@@ -6,8 +6,9 @@
 :root {
   --white: #{$white};
   --decor-border-100: #{$decor-border-100};
-  --decor-radius-300: #{$decor-radius-300};
+  --decor-radius-200: #{$decor-radius-200};
   --gray-500: #{$gray-500};
+  --decor-elevation-600: #{$decor-elevation-600};
 }
 
 $gray: $gray-200;
diff --git a/ui-v2/app/templates/components/discovery-chain.hbs b/ui-v2/app/templates/components/discovery-chain.hbs
index ea2fbcc975..d5638d5d01 100644
--- a/ui-v2/app/templates/components/discovery-chain.hbs
+++ b/ui-v2/app/templates/components/discovery-chain.hbs
@@ -6,9 +6,9 @@
 
         background-color: var(--white);
         border: var(--decor-border-100);
-        border-radius: var(--decor-radius-300);
+        border-radius: var(--decor-radius-200);
         border-color: var(--gray-500);
-        box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
+        box-shadow: var(--decor-elevation-600);
       }
     {{/if}}
     {{#if selected.edges }}