From 2864ed9c63a98753a87861ed450c86d24c9cbbcd Mon Sep 17 00:00:00 2001
From: thsparks <thsparks@microsoft.com>
Date: Wed, 25 Sep 2024 14:47:07 -0700
Subject: [PATCH] Use var for shadow color

---
 teachertool/src/components/styling/BlockPickerModal.module.scss | 2 +-
 teachertool/src/components/styling/CatalogOverlay.module.scss   | 2 +-
 .../src/components/styling/CriteriaInstanceDisplay.module.scss  | 2 +-
 theme/themepacks.less                                           | 1 +
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/teachertool/src/components/styling/BlockPickerModal.module.scss b/teachertool/src/components/styling/BlockPickerModal.module.scss
index eb1ff8837d4e..0f06d667225b 100644
--- a/teachertool/src/components/styling/BlockPickerModal.module.scss
+++ b/teachertool/src/components/styling/BlockPickerModal.module.scss
@@ -80,7 +80,7 @@
                             height: 3rem;
                             border-radius: 0.2rem;
                             color: white;
-                            border: 1px solid rgba(0, 0, 0, 0.5);
+                            border: 1px solid var(--pxt-page-dark-shadow);
                             font-size: 1rem;
                             font-weight: bold;
                             background-color: var(--category-color);
diff --git a/teachertool/src/components/styling/CatalogOverlay.module.scss b/teachertool/src/components/styling/CatalogOverlay.module.scss
index 66c5b8ff6acf..35e92076db91 100644
--- a/teachertool/src/components/styling/CatalogOverlay.module.scss
+++ b/teachertool/src/components/styling/CatalogOverlay.module.scss
@@ -5,7 +5,7 @@
     width: 100%;
     height: 100%;
     z-index: 49; // Above everything except toasts
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--pxt-page-dark-shadow);
 
     color: var(--pxt-page-foreground);
 
diff --git a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
index a85d034f2420..6e58aa4c08b8 100644
--- a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
+++ b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
@@ -58,7 +58,7 @@
                     .block-name-param {
                         border-radius: 1rem;
                         padding: 0.2rem 0.4rem;
-                        background-color: rgba(0, 0, 0, 0.3);
+                        background-color: var(--pxt-page-dark-shadow);
                     }
                 }
 
diff --git a/theme/themepacks.less b/theme/themepacks.less
index b3a21587b797..962afdddbfa0 100644
--- a/theme/themepacks.less
+++ b/theme/themepacks.less
@@ -15,6 +15,7 @@
     --pxt-page-foreground: black;
     --pxt-page-foreground-light: #767676;
     --pxt-page-foreground-shadow: rgba(0, 0, 0, 0.08);
+    --pxt-page-dark-shadow: rgba(0, 0, 0, 0.5);
     /// Header bar
     --pxt-headerbar-background: #475569;
     --pxt-headerbar-background-glass: #47556940;