fix dark mode button theming (#850)

closes #836 --------- Co-authored-by: create-issue-branch[bot] <53036503+create-issue-branch[bot]@users.noreply.github.com> Co-authored-by: Lois Wells <[email protected]> Co-authored-by: Lois Wells <[email protected]>
RaspberryPiFoundation · Dec 21, 2023 · f3d835e · f3d835e
1 parent 9c2f519
commit f3d835e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -44,6 +44,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Instructions image widths (#827)
 - Save status spacing (#827)
 - Disappearing borders on tablet (#827)
+- Dark mode button theming (#850)
 
 ## [0.20.0] - 2023-11-24
 

diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss
@@ -123,13 +123,14 @@
     }
 
     &:hover {
-      color: var(--rpf-button-secondary-background-color-hover);
+      background-color: var(--rpf-button-secondary-background-color-hover);
+      color: var(--rpf-button-secondary-text-color-hover);
       border-color: var(
-        --rpf-button-secondary-background-color-hover
+        --rpf-button-secondary-border-color-hover
       ) !important;
 
       svg {
-        fill: var(--rpf-button-secondary-background-color-hover);
+        fill: var(--rpf-button-secondary-text-color-hover);
       }
     }
 
@@ -181,10 +182,10 @@
     }
 
     &:hover {
-      color: $rpf-grey-600;
+      color: var(--rpf-button-tertiary-text-color-hover);
 
       svg {
-        fill: $rpf-grey-600;
+        fill: var(--rpf-button-tertiary-text-color-hover);
       }
     }
   }

diff --git a/src/assets/stylesheets/ContextMenu.scss b/src/assets/stylesheets/ContextMenu.scss
@@ -2,7 +2,6 @@
 @use "./rpf_design_system/colours" as *;
 
 .context-menu__drop {
-  display: flex;
   padding: $space-0-5 $space-1;
   margin: 0;
 

diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
@@ -61,12 +61,15 @@ code {
 
   --rpf-button-secondary-background-color: var(--rpf-teal-800);
   --rpf-button-secondary-background-color-focus: $rpf-brand-raspberry; // scss var?
-  --rpf-button-secondary-background-color-hover: var(--rpf-grey-600);
+  --rpf-button-secondary-background-color-hover: var(--rpf-teal-100);
+  --rpf-button-secondary-border-color-hover: var(--rpf-teal-900);
   --rpf-button-secondary-background-color-active: var(--rpf-teal-900);
   --rpf-button-secondary-background-color-disabled: var(
     --rpf-grey-50
   ); // might not exist
   --rpf-button-secondary-text-color: var(--rpf-black);
+
+  --rpf-button-tertiary-text-color-hover: var(--rpf-grey-600);
 }
 
 .--dark {
@@ -83,9 +86,13 @@ code {
     --rpf-button-secondary-background-color: var(--rpf-grey-800);
     --rpf-button-secondary-background-color-active: var(--rpf-teal-200);
     --rpf-button-secondary-color-disabled-background: var(--rpf-grey-700);
+    --rpf-button-secondary-background-color-hover: var(--rpf-grey-600);
+    --rpf-button-secondary-border-color-hover: var(--rpf-teal-400);
     --rpf-button-secondary-color-disabled: var(--rpf-grey-100);
     --rpf-button-secondary-color: var(--rpf-white);
     --rpf-button-secondary-text-color: var(--rpf-white);
+
+    --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);
   }
 }