From 0e5981947d22a390ac6c2e26cc88530dcc06644a Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Mon, 16 Dec 2024 17:56:38 +0100
Subject: [PATCH 1/2] :lipstick: - style: improve dark mode

---
 src/components/badge/badge.scss   | 2 +-
 src/components/button/button.scss | 5 ++++-
 src/style/tokens/dark.scss        | 8 ++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
index dad355bb..fef62cff 100644
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -44,7 +44,7 @@
   }
 
   &:before {
-    background-color: white;
+    background-color: var(--typography-color-background);
     z-index: -2;
   }
 
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 72833a47..1983e4ff 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -272,7 +272,10 @@
       --mykn-button-color-background: var(--page-color-#{$variant});
       --mykn-button-color-border: var(--page-color-#{$variant});
       --mykn-button-color-shadow: var(--page-color-shadow);
-      --mykn-button-color-text: var(--page-color-background);
+      --mykn-button-color-text: var(
+        --button-color-text-#{$variant},
+        var(--page-color-background)
+      );
 
       &:focus,
       &:hover {
diff --git a/src/style/tokens/dark.scss b/src/style/tokens/dark.scss
index 05fe4080..d87bba09 100644
--- a/src/style/tokens/dark.scss
+++ b/src/style/tokens/dark.scss
@@ -8,15 +8,15 @@
 
   --typography-color-background: #313741;
   --typography-color-background-alt: #252f3d;
-  --typography-color-body: #e3e5e8;
+  --typography-color-body: #c5c6ce;
   --typography-color-border: #535353;
-  --typography-color-h: #e3e5e8;
+  --typography-color-h: var(--typography-color-body);
   --typography-color-muted: #8c8c8c;
 
   --button-color-text-outline: #f3f3f3;
-  --button-color-text-primary: #313741;
-
+  --button-color-text-primary: var(--typography-color-body);
   --button-color-text-secondary: #313741;
+  --button-color-text-danger: var(--typography-color-body);
 
   --button-color-background-outline-hover: #f3f3f3;
   --button-color-background-outline-active: #f3f3f3;

From ee0d4654d5786ce227bd343d7a5285f53c6bc036 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Mon, 16 Dec 2024 18:06:30 +0100
Subject: [PATCH 2/2] :iphone: - style: improve responsive design of Toolbar
 component

---
 src/components/form/form/form.scss  |  4 ----
 src/components/toolbar/toolbar.scss | 33 +++++++++++++++--------------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/form/form/form.scss b/src/components/form/form/form.scss
index 5b011f42..ef9c9051 100644
--- a/src/components/form/form/form.scss
+++ b/src/components/form/form/form.scss
@@ -16,8 +16,4 @@
     flex-direction: row;
     width: auto;
   }
-
-  .mykn-toolbar .mykn-button {
-    justify-content: center !important;
-  }
 }
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index d745dd9f..52627b91 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -80,6 +80,7 @@
   }
 
   --typography-color-link: var(--typography-color-body);
+
   &--variant-primary {
     --toolbar-color-text-primary: var(--typography-color-background);
     background-color: var(--page-color-primary);
@@ -227,22 +228,6 @@
       height: 100%;
     }
 
-    &#{$self}--align-start .mykn-a,
-    &#{$self}--align-start .mykn-button,
-    &#{$self}--align-start .mykn-dropdown {
-      display: flex;
-      justify-content: start;
-      text-align: start;
-    }
-
-    &#{$self}--align-end .mykn-a,
-    &#{$self}--align-end .mykn-button,
-    &#{$self}--align-end .mykn-dropdown {
-      display: flex;
-      justify-content: end;
-      text-align: end;
-    }
-
     &#{$self}--align-center .mykn-a,
     &#{$self}--align-center .mykn-button,
     &#{$self}--align-center .mykn-dropdown,
@@ -279,6 +264,22 @@
         justify-content: space-between;
         text-align: center;
       }
+
+      &#{$self}--align-start .mykn-a,
+      &#{$self}--align-start .mykn-button,
+      &#{$self}--align-start .mykn-dropdown {
+        display: flex;
+        justify-content: start;
+        text-align: start;
+      }
+
+      &#{$self}--align-end .mykn-a,
+      &#{$self}--align-end .mykn-button,
+      &#{$self}--align-end .mykn-dropdown {
+        display: flex;
+        justify-content: end;
+        text-align: end;
+      }
     }
   }
 }