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

@@ -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 {

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;

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;

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*/

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;

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;
 }

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);

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;
 }

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 + *,

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 {

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,

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;

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 }}