From 677e126fbf5d681ef1666b119333b0a89480ba31 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 20 Feb 2018 12:18:20 -0500
Subject: [PATCH] UX: Implementing a box-shadow system, cleaning up existing
 shadows

---
 .../stylesheets/common/admin/admin_base.scss  |  3 +--
 .../stylesheets/common/base/compose.scss      |  2 +-
 .../common/base/crawler_layout.scss           |  2 +-
 .../stylesheets/common/base/discourse.scss    |  6 +++---
 app/assets/stylesheets/common/base/emoji.scss |  2 --
 .../stylesheets/common/base/header.scss       |  2 +-
 .../stylesheets/common/base/menu-panel.scss   |  3 ++-
 app/assets/stylesheets/common/base/modal.scss | 19 ++++--------------
 .../stylesheets/common/base/share_link.scss   |  2 +-
 .../common/base/topic-admin-menu.scss         |  3 ++-
 .../stylesheets/common/base/topic-post.scss   |  6 +++++-
 .../stylesheets/common/base/user-badges.scss  |  1 -
 .../stylesheets/common/components/badges.scss |  4 +---
 .../stylesheets/common/components/banner.scss |  1 -
 .../common/components/buttons.scss            |  2 --
 .../common/components/keyboard_shortcuts.scss |  2 +-
 .../common/foundation/variables.scss          | 20 +++++++++++++++++++
 app/assets/stylesheets/common/input_tip.scss  |  2 +-
 .../common/select-kit/category-drop.scss      |  6 ++----
 .../common/select-kit/combo-box.scss          | 12 ++++-------
 .../select-kit/dropdown-select-box.scss       |  3 +--
 .../common/select-kit/legacy-combo-box.scss   |  2 +-
 .../common/select-kit/mini-tag-chooser.scss   |  6 +++---
 .../common/select-kit/multi-select.scss       |  7 +++----
 .../common/select-kit/tag-drop.scss           |  6 ++----
 .../stylesheets/common/topic-entrance.scss    |  2 +-
 .../stylesheets/common/topic-timeline.scss    |  2 +-
 app/assets/stylesheets/desktop/compose.scss   |  2 +-
 app/assets/stylesheets/desktop/discourse.scss |  4 ++--
 .../stylesheets/desktop/topic-post.scss       |  5 ++---
 app/assets/stylesheets/desktop/user-card.scss |  2 +-
 app/assets/stylesheets/mobile/topic-list.scss |  2 +-
 app/assets/stylesheets/mobile/topic.scss      |  4 ----
 33 files changed, 69 insertions(+), 78 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 670d93d8947..c9f786c9b1f 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -205,7 +205,7 @@ $mobile-breakpoint: 700px;
     width: 460px;
     right: 0;
     z-index: z("dropdown");
-    box-shadow: 0 2px 6px rgba(0,0,0, .8);
+    box-shadow: shadow("card");
     margin-top: -2px;
     background-color: $secondary;
     padding: 12px 12px 5px;
@@ -519,7 +519,6 @@ $mobile-breakpoint: 700px;
       background-color: $secondary;
       border: 1px solid $primary-low;
       border-radius: 3px;
-      box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
       transition: border linear 0.2s, box-shadow linear 0.2s;
 
       li.select2-search-choice {
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 1a93bad72d4..0c2f2d0a1c9 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -19,7 +19,7 @@
   z-index: z("composer","content");
   transition: height 250ms ease, background 250ms ease, transform 250ms ease, max-width 250ms ease;
   background-color: $secondary;
-  box-shadow: 0 -1px 40px rgba(0,0,0, .12);
+  box-shadow: shadow("composer");
 
   .reply-area {
     display: flex;
diff --git a/app/assets/stylesheets/common/base/crawler_layout.scss b/app/assets/stylesheets/common/base/crawler_layout.scss
index 615d5b080ff..9d072e7c70d 100644
--- a/app/assets/stylesheets/common/base/crawler_layout.scss
+++ b/app/assets/stylesheets/common/base/crawler_layout.scss
@@ -6,7 +6,7 @@ body.crawler {
     z-index: z("max");
     background-color: #fff;
     padding: 10px;
-    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
+    box-shadow: shadow("header");
   }
   div.topic-list div[itemprop='itemListElement'] {
     padding: 10px 0;
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 613fa8301ee..21060272c52 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -165,7 +165,7 @@ textarea {
 
   &:focus:required:invalid:focus {
     border-color: $danger;
-    box-shadow: 0 0 6px $danger;
+    box-shadow: shadow("focus-danger");
   }
 }
 
@@ -196,7 +196,7 @@ input {
     border-radius: 0;
     &:focus {
       border-color: $tertiary;
-      box-shadow: $tertiary 0 0 6px 0px;
+      box-shadow: shadow("focus");
       outline: 0;
     }
   }
@@ -208,7 +208,7 @@ textarea {
   border: 1px solid $primary-medium;
   &:focus {
     border-color: $tertiary;
-    box-shadow: $tertiary 0 0 6px 0px;
+    box-shadow: shadow("focus");
     outline: 0;
   }
 }
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index f1a18dd5564..7af43b61a7d 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -5,14 +5,12 @@ img.emoji {
 }
 
 .emoji-picker {
-  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
   background-clip: padding-box;
   z-index: z("modal","content"); 
   position: fixed;
   display: none;
   flex-direction: row;
   height: 300px;
-  border-radius: 3px;
   color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
   background-color: $secondary;
   border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index a8655f2986d..84f4b7c367f 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -4,7 +4,7 @@
   top: 0;
   z-index: z("header");
   background-color: $header_background;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25);
+  box-shadow: shadow("header");
 
   .docked & {
     position: fixed;
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 4953f8b3f0e..ad8c9cca530 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -1,6 +1,7 @@
 .menu-panel.slide-in {
   position: fixed;
   right: 0;
+  box-shadow: shadow("header");
 
   .panel-body {
     position: absolute;
@@ -19,7 +20,7 @@
 
 .menu-panel {
   border: 1px solid $primary-low;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
+  box-shadow: shadow("menu-panel");
   background-color: $secondary;
   z-index: z("header");
   padding: 0.5em;
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 2a5b765cd37..6d52ce436d8 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -17,7 +17,7 @@
   overflow: auto;
   height: auto;
   background-color: $secondary;
-  box-shadow: 0 2px 2px rgba(0,0,0, .25);
+  box-shadow: shadow("card");
   background-clip: padding-box;
 }
 
@@ -45,8 +45,7 @@
 
 .modal-backdrop,
 .modal-backdrop.fade.in {
-  -webkit-animation: fade .3s;
-          animation: fade .3s;
+  animation: fade .3s;
   opacity: .9;
   filter: alpha(opacity=90);
 }
@@ -57,22 +56,12 @@
     to { opacity: .9 }
 }
 
-@-webkit-keyframes fade {
-  from { opacity: 0 }
-    to { opacity: .9 }
-}
-
 // slide in
 @keyframes slidein {
   from { transform: translateY(-20%); }
     to { transform: translateY(0); }
 }
 
-@-webkit-keyframes slidein {
-  from { -webkit-transform: translateY(-20%); }
-    to { -webkit-transform: translateY(0); }
-}
-
 .modal-outer-container {
   display:table;
   table-layout: fixed;
@@ -85,6 +74,7 @@
   margin: 0 auto;
   background-color: $secondary;
   background-clip: padding-box;
+  box-shadow: shadow("modal");
 
   .select-kit {
     width: 220px;
@@ -93,8 +83,7 @@
 
 .create-account.in .modal-inner-container,
 .login-modal.in .modal-inner-container {
-  -webkit-animation: slidein .3s;
-          animation: slidein .3s;
+  animation: slidein .3s;
 }
 
 
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 8a5f9145ca4..2914ceb9a12 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -4,7 +4,7 @@
   position: absolute;
   left: 20px;
   z-index: z("dropdown");
-  box-shadow: 0 1px 5px rgba(0,0,0, .4);
+  box-shadow: shadow("card");
   background-color: $secondary;
   padding: 6px 10px 10px 10px;
   width: 300px;
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 56f5ba16e65..b3fb88d0908 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -12,8 +12,9 @@
   background-color: $secondary;
   width: 205px;
   padding: 10px;
-  border: 1px solid $primary-low; 
+  border: 1px solid $primary-low;
   z-index: z("dropdown");
+  box-shadow: shadow("card");
 
   ul {
     list-style: none;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index baee2ab77a7..8650e42eb43 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -398,7 +398,11 @@ kbd
   background-color: $secondary;
   border: 1px solid $primary-low;
   border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0,0,0, .8);
+  box-shadow: shadow("kbd");
+  background: dark-light-choose(#fafafa, #333);
+  border: 1px solid dark-light-choose(#ccc, #555);
+  border-bottom: medium none dark-light-choose(#fff, #000);
+  
   color: $primary;
   display: inline-block;
   font-size: $font-down-1;
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index bc426d3e0ae..9742fb7226d 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -124,7 +124,6 @@
   background-color: $primary-low;
   margin-right: 5px;
   margin-bottom: 10px;
-  box-shadow: 1px 1px 3px rgba(0.0, 0.0, 0.0, 0.2);
 
   .check-display {
     position: absolute;
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index d7123032baa..a416c0a905a 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -211,11 +211,9 @@
 
 .badge-group {
   @extend %badge;
-  padding: 4px 5px 2px 5px;
+  padding: 2px 5px;
   color: $primary;
-  text-shadow: 0 1px 0 rgba($primary, 0.1);
   background-color: $primary-low;
   border-color: $primary-low;
   font-size: $font-down-1;
-  box-shadow: inset 0 1px 0 rgba(0,0,0, 0.22);
 }
diff --git a/app/assets/stylesheets/common/components/banner.scss b/app/assets/stylesheets/common/components/banner.scss
index 47e09f43f31..c70a20bc979 100644
--- a/app/assets/stylesheets/common/components/banner.scss
+++ b/app/assets/stylesheets/common/components/banner.scss
@@ -5,7 +5,6 @@
 #banner {
   padding: 10px;
   background: $tertiary-low;
-  box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
   color: $primary;
   z-index: z("base") + 1;
   overflow: auto;
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 059f09d7405..2dd074265be 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -119,8 +119,6 @@
 
 .btn-social {
   color: #fff;
-  text-shadow: 0 1px 0 rgba($primary, 0.2);
-  box-shadow: inset 0 1px 0 rgba(0,0,0, 0.1);
   &:hover {
     color: #fff;
   }
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index 13010953fe4..643c314463d 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -33,7 +33,7 @@
     b {
       padding: 2px 6px;
       border-radius: 4px;
-      box-shadow: 0 2px 0 rgba(0,0,0,0.2),0 0 0 1px dark-light-choose(#fff,#000) inset;
+      box-shadow: shadow("kbd");
       background: dark-light-choose(#fafafa, #333);
       border: 1px solid dark-light-choose(#ccc, #555);
       border-bottom: medium none dark-light-choose(#fff, #000);
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 59d0dfb0bcd..f028ab048dd 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -103,6 +103,26 @@ $z-layers: (
   @return map-deep-get($z-layers, $layers...);
 }
 
+
+// Box-shadow
+// --------------------------------------------------
+
+$box-shadow: (
+  "modal":        0 8px 60px rgba(0, 0, 0, 0.6),
+  "composer":     0 -1px 40px rgba(0, 0, 0, 0.12),
+  "menu-panel":   0 6px 14px rgba(0, 0, 0, 0.15),
+  "card":         0 4px 14px rgba(0, 0, 0, 0.15),
+  "dropdown":     0 2px 3px 0 rgba(0, 0, 0, 0.2),
+  "header":       0 2px 4px -1px rgba(0, 0, 0, 0.25),
+  "kbd":         (0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px dark-light-choose(#fff, #000) inset),
+  "focus":        0 0 6px 0 $tertiary,
+  "focus-danger": 0 0 6px 0 $danger
+);
+
+@function shadow($key) {
+  @return map-get($box-shadow, $key);
+}
+
 // Color utilities
 // --------------------------------------------------
 
diff --git a/app/assets/stylesheets/common/input_tip.scss b/app/assets/stylesheets/common/input_tip.scss
index 0d5de0c8abe..7a57d21069a 100644
--- a/app/assets/stylesheets/common/input_tip.scss
+++ b/app/assets/stylesheets/common/input_tip.scss
@@ -9,7 +9,7 @@
   &.bad {
     background: $danger-medium;
     color: white;
-    box-shadow: 1px 1px 5px rgba(0,0,0, .7);
+    box-shadow: shadow("dropdown");
   }
   &.hide, &.good {
     display: none;
diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 391f80d8ae9..91a9bf9d71a 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -49,8 +49,7 @@
 
       &.is-expanded .category-drop-header {
         border: 1px solid $tertiary;
-        -webkit-box-shadow: $tertiary 0 0 6px 0px;
-                box-shadow: $tertiary 0 0 6px 0px;
+        box-shadow: shadow("focus");
       }
 
       .select-kit-collection {
@@ -82,8 +81,7 @@
         width: auto;
         min-width: 300px;
         border-radius: 0;
-        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
-                box-shadow: 0 2px 2px rgba(0,0,0,0.4);
+        box-shadow: shadow("dropdown");
       }
 
       .select-kit-row {
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index e69bfdcdcdc..b9ce024633a 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -32,8 +32,7 @@
 
       &.is-focused {
         border: 1px solid $tertiary;
-        -webkit-box-shadow: $tertiary 0 0 6px 0px;
-                box-shadow: $tertiary 0 0 6px 0px;
+        box-shadow: shadow("focus");
       }
     }
 
@@ -47,8 +46,7 @@
     &.is-highlighted {
       .select-kit-header {
         border: 1px solid $tertiary;
-        -webkit-box-shadow: $tertiary 0 0 6px 0px;
-                box-shadow: $tertiary 0 0 6px 0px;
+        box-shadow: shadow("focus");
       }
     }
 
@@ -56,14 +54,12 @@
       .select-kit-wrapper {
         display: block;
         border: 1px solid $tertiary;
-        -webkit-box-shadow: $tertiary 0 0 6px 0px;
-                box-shadow: $tertiary 0 0 6px 0px;
+        box-shadow: shadow("focus");
       }
 
       .select-kit-header {
         border-color: transparent;
-        -webkit-box-shadow: none;
-                box-shadow: none;
+        box-shadow: none;
       }
 
       .select-kit-body {
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 98f7173e366..c229b004223 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -16,8 +16,7 @@
     .select-kit-body {
       border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       background-clip: padding-box;
-      -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
-              box-shadow: 0 2px 2px rgba(0,0,0,0.4);
+      box-shadow: shadow("dropdown");
       max-width: 300px;
       width: 300px;
     }
diff --git a/app/assets/stylesheets/common/select-kit/legacy-combo-box.scss b/app/assets/stylesheets/common/select-kit/legacy-combo-box.scss
index 3ba9f7ad942..2b72735d4ca 100644
--- a/app/assets/stylesheets/common/select-kit/legacy-combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/legacy-combo-box.scss
@@ -79,7 +79,7 @@
 }
 
 .select2-container-active {
-  box-shadow:  $tertiary 0 0 6px 0px;
+  box-shadow: shadow("focus");
 }
 
 .select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-selection-limit {
diff --git a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
index 956c9a80647..362e9b187af 100644
--- a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
@@ -7,8 +7,7 @@
       &.is-expanded {
         .select-kit-header {
           border: 1px solid $tertiary;
-          -webkit-box-shadow: $tertiary 0 0 6px 0px;
-                  box-shadow: $tertiary 0 0 6px 0px;
+          box-shadow: shadow("focus");
         }
       }
 
@@ -21,7 +20,8 @@
       .select-kit-body {
         max-width: 500px;
         width: 500px;
-        border: 1px solid $primary-low;
+        border: 1px solid $tertiary;
+        box-shadow: shadow("focus")
       }
 
       .select-kit-filter {
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index de862610259..db3734bfb63 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -24,7 +24,7 @@
       border: 1px solid $primary-medium;
 
       &.is-focused {
-        box-shadow: $tertiary 0 0 6px 0px;
+        box-shadow: shadow("focus");
         border-radius: 0;
       }
     }
@@ -40,7 +40,7 @@
       .multi-select-header {
         border-radius: 0;
         border-bottom: 1px solid transparent;
-        box-shadow: $tertiary 0 0 6px 0px;
+        box-shadow: shadow("focus");
       }
     }
 
@@ -48,7 +48,7 @@
       .select-kit-wrapper {
         display: block;
         border: 1px solid $tertiary;
-        box-shadow: $tertiary 0 0 6px 0px;
+        box-shadow: shadow("focus");
         border-radius: 0;
       }
 
@@ -101,7 +101,6 @@
           margin: 0;
           outline: 0;
           border: 0;
-          -webkit-box-shadow: none;
           box-shadow: none;
           border-radius: 0;
           height: 21px;
diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss
index cc647cf79ba..0909948f968 100644
--- a/app/assets/stylesheets/common/select-kit/tag-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/tag-drop.scss
@@ -19,8 +19,7 @@
 
       &.is-expanded .tag-drop-header {
         border: 1px solid $tertiary;
-        -webkit-box-shadow: $tertiary 0 0 6px 0px;
-                box-shadow: $tertiary 0 0 6px 0px;
+        box-shadow: shadow("focus");
       }
 
       .select-kit-collection {
@@ -50,8 +49,7 @@
         width: auto;
         min-width: 150px;
         border-radius: 0;
-        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.4);
-                box-shadow: 0 2px 2px rgba(0,0,0,0.4);
+        box-shadow: shadow("dropdown");
       }
 
       .select-kit-row {
diff --git a/app/assets/stylesheets/common/topic-entrance.scss b/app/assets/stylesheets/common/topic-entrance.scss
index 03caf20de59..1f20b3ac562 100644
--- a/app/assets/stylesheets/common/topic-entrance.scss
+++ b/app/assets/stylesheets/common/topic-entrance.scss
@@ -3,7 +3,7 @@
   border: 1px solid $primary-low; 
   padding: 5px;
   background: $secondary;
-  box-shadow: 0 0 2px rgba(0,0,0, .2);
+  box-shadow: shadow("card");
   z-index: z("dropdown");
 
   position: absolute;
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 6a9899154d7..f5e77393ca2 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -52,7 +52,7 @@
     left: 0;
     right: 0;
     border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
-    box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25);
+    box-shadow: shadow("composer");
     padding-top: 20px;
     z-index: z("fullscreen");
     @media screen and (max-height: 425px) {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 00e4a9f85a9..30c278b6dc5 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -79,7 +79,7 @@
   overflow-y: auto;
   z-index: z("composer","popover");
   padding: 10px 10px 35px 10px;
-  box-shadow: 3px 3px 3px rgba(0,0,0, 0.34);
+  box-shadow: shadow("card");
   background: $highlight-medium;
 
   &.urgent {
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 8dce9693b50..273e967534c 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -244,7 +244,7 @@ input {
 
       &:focus {
         border-color: scale-color($danger, $lightness: -30%);
-        box-shadow: 0 0 6px $danger;
+        box-shadow: shadow("focus-danger");
       }
     }
 
@@ -287,7 +287,7 @@ input {
 
       &:focus {
         border-color: $success;
-        box-shadow: 0 0 6px $success;
+        box-shadow: shadow("focus");
       }
     }
 
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index dd652652031..d9e5627bb17 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -663,7 +663,7 @@ $topic-avatar-width: 45px;
   list-style: none;
   background-color: $secondary;
   border: 1px solid $primary-low;
-  box-shadow: 0 1px 5px rgba(0,0,0, .4);
+  box-shadow: shadow("dropdown");
   background-clip: padding-box;
   span {
     font-size: $font-down-1;
@@ -778,13 +778,12 @@ $topic-avatar-width: 45px;
     }
     &:active {
       @include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%));
-      box-shadow: inset 0 1px 3px rgba(0,0,0, 0.2);
       color: $secondary;
     }
     &[disabled] {
       text-shadow: 0 1px 0 rgba($primary, 0.2);
       @include linear-gradient($tertiary, darken($tertiary, 20%));
-      @include box-shadow((inset 0 1px 0 rgba(0,0,0, 0.33), inset 0 -1px 2px rgba($primary, 0.2)));
+      @include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.33));
     }
   }
 }
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index 8f09dd9fc8b..2450fd71dc9 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -10,7 +10,7 @@ $user_card_background: $secondary;
   left: -9999px;
   top: -9999px;
   z-index: z("usercard");
-  box-shadow: 1px 2px 6px rgba(0,0,0, .25);
+  box-shadow: shadow("card");
   margin-top: -2px;
   color: $user_card_primary;
   background: $user_card_background center center;
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 8e7022e8e5e..8fdff1c9a23 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -345,7 +345,7 @@ tr.category-topic-link {
   background-color: $secondary;
   border: 1px solid dark-light-choose(rgba(0, 0, 0, 0.2), $primary);
   border-radius: 5px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: shadow("dropdown");
   background-clip: padding-box;
   margin: 1px 0 20px;
   .title {font-weight: bold; display: block;}
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index dafbfd69e5d..703bba38ceb 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -52,10 +52,6 @@
   }
 }
 
-.docked #topic-progress {
-  box-shadow: 0 0 3px rbga(0,0,0, .5);
-}
-
 #topic-progress-wrapper {
   position: fixed;
   width: 0;