From 05094e2fd950a1fe115d26b2b40564c8cbe47daf Mon Sep 17 00:00:00 2001
From: Rhyne Vlaservich <rhyneav@gmail.com>
Date: Mon, 26 Dec 2022 13:08:04 -0500
Subject: [PATCH] Fix dark mode alerts, buttons, and popovers

---
 src/components/_alerts.scss   |  4 ++--
 src/components/_buttons.scss  | 11 +++--------
 src/components/_popovers.scss |  4 ++--
 src/core/_config.scss         |  2 +-
 4 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/_alerts.scss b/src/components/_alerts.scss
index 2c53f30..0a26cba 100644
--- a/src/components/_alerts.scss
+++ b/src/components/_alerts.scss
@@ -1,10 +1,10 @@
 @mixin btn-close-color($base-color-name) {
-  @include color('color', #{$base-color-name}-light-10);
+  @include color('color', #{$base-color-name}-text);
 
   &:hover,
   &:active,
   &:focus {
-    @include color('color', #{$base-color-name}-dark-10);
+    @include color('color', #{$base-color-name}-dark);
   }
 }
 
diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index 142ea36..2c7d936 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -98,17 +98,12 @@ a {
   button.btn-#{$colorName}-outline,
   .paper-btn.btn-#{$colorName}-outline,
   [type='button'].btn-#{$colorName}-outline {
-    background-color: $white;
-    border-color: darken($color-light, 10%);
-    @if $colorName == primary {
-      color: $color;
-    } @else {
-      color: $color-text;
-    }
+    @include color('background-color', main-background);
+    @include color('color', #{$colorName});
+    @include color('border-color', #{$colorName});
 
     &:hover {
       background-color: $color-light;
-      border-color: $color;
     }
 
     &:hover {
diff --git a/src/components/_popovers.scss b/src/components/_popovers.scss
index 8e03459..954d94a 100644
--- a/src/components/_popovers.scss
+++ b/src/components/_popovers.scss
@@ -19,10 +19,10 @@
     @include border-style();
     @include transition(opacity);
     @include color('background-color', 'light-dark');
-    @include color('border-color', 'primary');
+    @include color('border-color', 'light-dark');
+    @include color('color', 'primary-inverse');
     border-style: solid;
     border-width: 2px;
-    color: $white;
     font-size: 0.7em;
     left: 50%;
     min-width: 80px;
diff --git a/src/core/_config.scss b/src/core/_config.scss
index 314e8b9..f1ff701 100644
--- a/src/core/_config.scss
+++ b/src/core/_config.scss
@@ -125,7 +125,7 @@ $dark-secondary-text: $dark-secondary-dark !default;
 $dark-success-text: $dark-success-dark !default;
 $dark-warning-text: $dark-warning-dark !default;
 $dark-danger-text: $dark-danger-dark !default;
-$dark-muted-text: $dark-muted-dark !default;
+$dark-muted-text: $dark-muted-light !default;
 
 $dark-shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
 $dark-shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;