REFACTOR: move shadow vars to css custom props (#22094)

app/assets/stylesheets/color_definitions.scss

@@ -135,4 +135,13 @@
   --gold: #{$gold};
   --silver: #{$silver};
   --bronze: #{$bronze};
+
+  --shadow-modal: 0 8px 60px rgba(0, 0, 0, #{$shadow-opacity-modal});
+  --shadow-composer: 0 -1px 40px rgba(0, 0, 0, #{$shadow-opacity-composer});
+  --shadow-menu-panel: 0 12px 12px rgba(0, 0, 0, #{$shadow-opacity-menu-panel});
+  --shadow-card: 0 4px 14px rgba(0, 0, 0, #{$shadow-opacity-card});
+  --shadow-dropdown: 0 2px 3px 0 rgba(0, 0, 0, #{$shadow-opacity-dropdown});
+  --shadow-header: 0 2px 4px -1px rgba(0, 0, 0, #{$shadow-opacity-header});
+  --shadow-footer-nav: 0 0 2px 0 rgba(0, 0, 0, #{$shadow-opacity-footer-nav});
+  --shadow-focus-danger: 0 0 6px 0 var(--danger);
 }

app/assets/stylesheets/common/admin/admin_base.scss

@@ -380,7 +380,7 @@ $mobile-breakpoint: 700px;
     width: 460px;
     right: 0;
     z-index: z("dropdown");
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     margin-top: -2px;
     background-color: var(--secondary);
     padding: 12px 12px 5px;

app/assets/stylesheets/common/admin/customize.scss

@@ -961,7 +961,7 @@ table.permalinks {
       height: calc(100vh - 450px);
       min-height: 200px;
       width: 100%;
-      box-shadow: shadow("footer-nav");
+      box-shadow: var(--shadow-footer-nav);
       border-radius: 4px;
     }
 

app/assets/stylesheets/common/admin/dashboard.scss

@@ -521,7 +521,7 @@
       }
     }
     &:hover {
-      box-shadow: shadow("card");
+      box-shadow: var(--shadow-card);
     }
   }
 }

app/assets/stylesheets/common/base/compose.scss

@@ -36,7 +36,7 @@ html.composer-open {
   transition: height 250ms ease, background 250ms ease, transform 250ms ease,
     max-width 250ms ease, padding-bottom 250ms ease;
   background-color: var(--secondary);
-  box-shadow: shadow("composer");
+  box-shadow: var(--shadow-composer);
 
   .reply-area {
     display: flex;
@@ -426,7 +426,7 @@ html.composer-open {
   width: 300px;
   background-color: var(--secondary);
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("dropdown-lite");
+  box-shadow: var(--shadow-dropdown);
   border-radius: 8px;
 
   ul {

app/assets/stylesheets/common/base/d-popover.scss

@@ -5,7 +5,7 @@ $d-popover-border: var(--primary-low);
   color: var(--primary);
   background: $d-popover-background;
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("menu-panel");
+  box-shadow: var(--shadow-menu-panel);
 }
 
 .tippy-box[data-placement^="top"] .tippy-svg-arrow > svg {

app/assets/stylesheets/common/base/dialog.scss

@@ -37,7 +37,7 @@
   position: relative;
   background-color: var(--secondary);
   animation: fade-in 250ms both;
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   min-width: 40vw;
 }
 

app/assets/stylesheets/common/base/discourse.scss

@@ -198,7 +198,7 @@ textarea {
 
   &:focus:required:invalid:focus {
     border-color: var(--danger);
-    box-shadow: shadow("focus-danger");
+    box-shadow: var(--shadow-focus-danger);
   }
 }
 

app/assets/stylesheets/common/base/groups.scss

@@ -46,7 +46,7 @@
       transition: all 0.25s;
 
       &:hover {
-        box-shadow: shadow("card");
+        box-shadow: var(--shadow-card);
         border-color: var(--primary-low-mid-or-secondary-high);
       }
     }

app/assets/stylesheets/common/base/header.scss

@@ -10,7 +10,7 @@
   width: 100%;
   z-index: z("header");
   background-color: var(--header_background);
-  box-shadow: shadow("header");
+  box-shadow: var(--shadow-header);
   backface-visibility: hidden; /** do magic for scrolling performance **/
 
   > .wrap {

app/assets/stylesheets/common/base/menu-panel.scss

@@ -1,7 +1,7 @@
 .menu-panel.slide-in {
   position: fixed;
   right: 0;
-  box-shadow: shadow("header");
+  box-shadow: var(--shadow-header);
 
   .panel-body {
     width: 100%;
@@ -21,7 +21,7 @@
 
 .menu-panel {
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("menu-panel");
+  box-shadow: var(--shadow-menu-panel);
   background-color: var(--secondary);
   z-index: z("header");
   padding: 0.5em;

app/assets/stylesheets/common/base/modal.scss

@@ -18,7 +18,7 @@
   margin: 0 auto;
   max-width: var(--modal-max-width);
   background-color: var(--secondary);
-  box-shadow: shadow("modal");
+  box-shadow: var(--shadow-modal);
 
   .select-kit {
     width: 220px;
@@ -44,7 +44,7 @@
   overflow: auto;
   height: auto;
   background-color: var(--secondary);
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   background-clip: padding-box;
 }
 
@@ -208,7 +208,7 @@
           position: absolute;
           top: 70%;
           padding: 5px 10px;
-          box-shadow: shadow("card");
+          box-shadow: var(--shadow-card);
           z-index: 5;
           background-color: var(--secondary);
           max-height: 150px;

app/assets/stylesheets/common/base/popup-menu.scss

@@ -3,7 +3,7 @@
   width: 14em;
   border: 1px solid var(--primary-low);
   z-index: z("dropdown");
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
 
   ul {
     margin: 0;

app/assets/stylesheets/common/base/reviewables.scss

@@ -495,7 +495,7 @@
       background: var(--primary-very-low);
       color: var(--primary-high);
       font-size: var(--font-down-2);
-      box-shadow: shadow("dropdown-lite");
+      box-shadow: var(--shadow-dropdown);
       margin-left: 50%;
       transform: translateX(-50%);
       border-radius: 4px;

app/assets/stylesheets/common/base/sidebar-more-section-links.scss

@@ -26,7 +26,7 @@
 .sidebar-more-section-links-details-content {
   background-color: var(--d-sidebar-background);
   transition: background-color 0.25s;
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   border: 1px solid var(--primary-low);
   margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
 

app/assets/stylesheets/common/base/static-login.scss

@@ -34,7 +34,7 @@ body.static-login {
     border: 1px solid var(--primary-low);
     text-align: center;
     padding: 2em;
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     border-radius: 5px;
     display: grid;
     place-items: center;

app/assets/stylesheets/common/base/tooltip.scss

@@ -54,7 +54,7 @@ $discourse-tooltip-border: var(--primary-medium);
     max-width: 250px;
     font-size: var(--font-down-1);
     color: var(--primary);
-    box-shadow: shadow("dropdown");
+    box-shadow: var(--shadow-dropdown);
     line-height: 1.4em;
   }
 }

app/assets/stylesheets/common/base/topic-post.scss

@@ -556,7 +556,7 @@ aside.quote {
   z-index: z("dropdown");
   background-color: var(--secondary);
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   flex-direction: column;
 
   &.animated {
@@ -1394,7 +1394,7 @@ span.mention {
         margin-left: 8px;
         background-color: var(--primary-low);
         color: var(--primary);
-        box-shadow: shadow("dropdown");
+        box-shadow: var(--shadow-dropdown);
       }
     }
   }

app/assets/stylesheets/common/base/topic.scss

@@ -69,7 +69,7 @@ $topic-progress-height: 42px;
       overflow-y: auto;
       z-index: z("timeline");
       padding: 10px 10px 35px 10px;
-      box-shadow: shadow("dropdown");
+      box-shadow: var(--shadow-dropdown);
       background: var(--tertiary-low);
 
       .close {

app/assets/stylesheets/common/components/buttons.scss

@@ -201,7 +201,7 @@
   border-radius: var(--d-border-radius);
   &:hover,
   &:focus {
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     outline: 1px solid #000;
   }
   &[href] {

app/assets/stylesheets/common/components/d-tooltip.scss

@@ -7,6 +7,6 @@
   color: var(--primary);
   background: var(--secondary);
   border: 1px solid var(--primary-low);
-  box-shadow: shadow("menu-panel");
+  box-shadow: var(--shadow-menu-panel);
   overflow-wrap: break-word;
 }

app/assets/stylesheets/common/components/footer-nav.scss

@@ -30,7 +30,7 @@ body.footer-nav-visible {
 
 .footer-nav {
   background-color: rgba(var(--header_background-rgb), 0.9);
-  box-shadow: shadow("footer-nav");
+  box-shadow: var(--shadow-footer-nav);
   height: var(--footer-nav-height);
   position: fixed;
   bottom: calc(var(--footer-nav-height) * -1);

app/assets/stylesheets/common/components/hashtag.scss

@@ -58,7 +58,7 @@ a.hashtag {
 .hashtag-autocomplete {
   max-height: 13.5em;
   overflow-y: auto;
-  box-shadow: shadow("dropdown-lite");
+  box-shadow: var(--shadow-dropdown);
   border-radius: 8px;
 
   &__fadeout {

app/assets/stylesheets/common/components/user-card.scss

@@ -37,7 +37,7 @@
 .user-card,
 .group-card {
   width: var(--card-width);
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   color: var(--primary);
   background: var(--secondary) center center;
   background-size: cover;

app/assets/stylesheets/common/foundation/color_transformations.scss

@@ -171,3 +171,12 @@ $hljs-attribute: dark-light-choose(
 $hljs-symbol: dark-light-choose(unquote("#990073"), unquote("#fbe")) !default;
 $hljs-bg: dark-light-choose(unquote("#f8f8f8"), unquote("#333")) !default;
 $hljs-builtin-name: dark-light-choose($tertiary-high, $tertiary-hover) !default;
+
+// shadow opacity variables
+$shadow-opacity-modal: dark-light-choose(0.6, 1) !default;
+$shadow-opacity-composer: dark-light-choose(0.12, 0.35) !default;
+$shadow-opacity-menu-panel: dark-light-choose(0.15, 0.35) !default;
+$shadow-opacity-card: dark-light-choose(0.15, 0.5) !default;
+$shadow-opacity-dropdown: dark-light-choose(0.2, 0.35) !default;
+$shadow-opacity-header: dark-light-choose(0.25, 0.45) !default;
+$shadow-opacity-footer-nav: dark-light-choose(0.2, 0.4) !default;

app/assets/stylesheets/common/foundation/variables.scss

@@ -132,49 +132,6 @@ $z-layers: (
   @return map-deep-get($z-layers, $layers...);
 }
 
-// Box-shadow
-// --------------------------------------------------
-
-$box-shadow-light: (
-  "modal": 0 8px 60px rgba(0, 0, 0, 0.6),
-  "composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
-  "menu-panel": 0 12px 12px 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),
-  "dropdown-lite": 0px 2px 12px 0px rgba(0, 0, 0, 0.1),
-  "header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
-  "footer-nav": 0 0 2px 0 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 3px 0 $tertiary,
-  "focus-danger": 0 0 6px 0 $danger,
-);
-
-// do not add a dark shadow without a light equivilant
-$box-shadow-dark: (
-  "modal": 0 8px 60px rgba(0, 0, 0, 1),
-  "composer": 0 -1px 40px rgba(0, 0, 0, 0.35),
-  "menu-panel": 0 8px 12px rgba(0, 0, 0, 0.35),
-  "card": 0 4px 14px rgba(0, 0, 0, 0.5),
-  "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.35),
-  "dropdown-lite": 0px 2px 12px 0px rgba(0, 0, 0, 0.25),
-);
-
-@function shadow($key) {
-  @if is-light-color-scheme() {
-    @return map-get($box-shadow-light, $key);
-  } @else {
-    $shadow-dark: map-get($box-shadow-dark, $key);
-    @if $shadow-dark != null {
-      @return $shadow-dark;
-    } @else {
-      @return map-get($box-shadow-light, $key);
-    }
-  }
-}
-
 // Color utilities
 // --------------------------------------------------
 

app/assets/stylesheets/common/input_tip.scss

@@ -20,7 +20,7 @@
   &.bad {
     background: var(--danger-medium);
     color: white;
-    box-shadow: shadow("dropdown");
+    box-shadow: var(--shadow-dropdown);
   }
   &.hide,
   &.good {

app/assets/stylesheets/common/select-kit/dropdown-select-box.scss

@@ -15,7 +15,7 @@
       .select-kit-body {
         border: 1px solid var(--primary-low);
         background-clip: padding-box;
-        box-shadow: shadow("dropdown");
+        box-shadow: var(--shadow-dropdown);
       }
 
       .select-kit-row {

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -40,7 +40,7 @@
       border-radius: 0;
       border: none;
       border: 1px solid var(--primary-low);
-      box-shadow: shadow("dropdown");
+      box-shadow: var(--shadow-dropdown);
       background: var(--secondary);
       max-width: 600px;
     }

app/assets/stylesheets/common/software-update-prompt.scss

@@ -9,7 +9,7 @@
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s;
-  box-shadow: shadow("header");
+  box-shadow: var(--shadow-header);
   z-index: z("header") - 10;
 
   .update-prompt-main-content {

app/assets/stylesheets/common/topic-entrance.scss

@@ -2,7 +2,7 @@
   border: 1px solid var(--primary-low);
   padding: 5px;
   background: var(--secondary);
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   z-index: z("dropdown");
 
   position: absolute;

app/assets/stylesheets/common/topic-timeline.scss

@@ -55,7 +55,7 @@
     left: 0;
     right: 0;
     border-top: 1px solid var(--primary-low);
-    box-shadow: shadow("composer");
+    box-shadow: var(--shadow-composer);
     padding: 20px 0px;
     z-index: z("fullscreen");
     @media screen and (max-height: 425px) {

app/assets/stylesheets/desktop/compose.scss

@@ -89,7 +89,7 @@
   overflow-y: auto;
   z-index: z("composer", "dropdown") + 1;
   padding: 1.5em;
-  box-shadow: shadow("dropdown");
+  box-shadow: var(--shadow-dropdown);
   background: var(--highlight-bg);
 
   &.urgent {

app/assets/stylesheets/desktop/login.scss

@@ -417,7 +417,7 @@
   }
   .invite-form,
   .invite-success {
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
   }
 }
 

app/assets/stylesheets/desktop/topic-post.scss

@@ -547,7 +547,7 @@ blockquote {
   width: 200px;
   position: fixed;
   z-index: z("dropdown") + 1; // 1 higher than .select-posts
-  box-shadow: shadow("card");
+  box-shadow: var(--shadow-card);
   padding: 0.714em;
   margin-bottom: 5px;
   right: 10px;

plugins/chat/assets/stylesheets/common/chat-message-actions.scss

@@ -127,7 +127,7 @@
 
     .select-kit-body {
       padding: 0.5rem;
-      box-shadow: shadow("card");
+      box-shadow: var(--shadow-card);
       border: 1px solid var(--primary-300);
     }
 

plugins/chat/assets/stylesheets/common/direct-message-creator.scss

@@ -114,7 +114,7 @@
     margin: 0;
     flex-wrap: wrap;
     border-bottom: 1px solid var(--primary-low);
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     position: absolute;
     width: 100%;
     z-index: z("dropdown");
@@ -180,7 +180,7 @@
     text-align: center;
     padding: 1rem;
     width: 100%;
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     background: var(--secondary);
     margin: 0;
     box-sizing: border-box;

plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss

@@ -8,7 +8,7 @@
     right: 0;
     height: 50vh;
     width: 100%;
-    box-shadow: shadow("card");
+    box-shadow: var(--shadow-card);
     z-index: z("header") + 2;
     max-width: 100vw;
     box-sizing: border-box;