Use var for shadow color

microsoft · Sep 25, 2024 · 2864ed9 · 2864ed9
1 parent 52da0b9
commit 2864ed9
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;