From edf056a4b9a8fc2a38073a08a54e51673cbaff50 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Mon, 9 Dec 2024 17:44:16 +0100
Subject: [PATCH] :lipstick: - style: further tweaks to Toolbar styling

---
 src/components/toolbar/toolbar.scss        | 13 +++++++------
 src/components/toolbar/toolbar.stories.tsx |  4 +++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index 22af29c..d745dd9 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/src/components/toolbar/toolbar.scss
@@ -79,20 +79,22 @@
     padding-inline: calc(var(--spacing-v) / 2);
   }
 
+  --typography-color-link: var(--typography-color-body);
   &--variant-primary {
     --toolbar-color-text-primary: var(--typography-color-background);
     background-color: var(--page-color-primary);
 
-    * {
+    > * {
+      --button-color-text-primary: var(--toolbar-color-text-primary);
       --typography-color-h: var(--toolbar-color-text-primary);
-      --typography-color-body: var(--toolbar-color-text-primary);
-      --mykn-button-color-text: var(--toolbar-color-text-primary);
+      --typography-color-link: var(--toolbar-color-text-primary);
       --typography-color-muted: var(--toolbar-color-text-primary);
     }
 
     @include dark {
       & {
         --toolbar-color-text-primary: var(--typography-color-body);
+        --typography-color-link: var(--typography-color-body);
       }
     }
   }
@@ -102,14 +104,14 @@
     background-color: var(--page-color-accent);
 
     * {
+      --button-color-text-transparent: var(--toolbar-color-text-accent);
       --typography-color-h: var(--toolbar-color-text-accent);
-      --typography-color-body: var(--toolbar-color-text-accent);
-      --mykn-button-color-text: var(--toolbar-color-text-accent);
       --typography-color-muted: var(--toolbar-color-text-accent);
     }
 
     @include dark {
       & {
+        --typography-color-link: var(--typography-color-background);
         --toolbar-color-text-accent: var(--typography-color-background);
       }
     }
@@ -159,7 +161,6 @@
 
   .mykn-a {
     text-decoration: none;
-    color: var(--typography-color-body);
 
     &[aria-current] {
       color: var(--page-color-primary);
diff --git a/src/components/toolbar/toolbar.stories.tsx b/src/components/toolbar/toolbar.stories.tsx
index 1c4143a..1059925 100644
--- a/src/components/toolbar/toolbar.stories.tsx
+++ b/src/components/toolbar/toolbar.stories.tsx
@@ -5,6 +5,7 @@ import { PAGE_DECORATOR } from "../../../.storybook/decorators";
 import { ButtonLinkProps, ButtonProps } from "../button";
 import { DropdownProps } from "../dropdown";
 import { FormControlProps } from "../form";
+import { IconInitials } from "../iconinitials";
 import { Logo } from "../logo";
 import { A, AProps, H3 } from "../typography";
 import { Toolbar, ToolbarProps } from "./toolbar";
@@ -23,7 +24,7 @@ export const ToolbarComponent: Story = {
     align: "center",
     pad: true,
     items: [
-      <Logo key="logo" abbreviated />,
+      <Logo key="Logo" abbreviated />,
       "spacer",
       {
         children: "Anchor",
@@ -65,6 +66,7 @@ export const ToolbarComponent: Story = {
       {
         placeholder: "FormControl",
       } as FormControlProps,
+      <IconInitials key="IconInitials" name="Maykin Media" />,
     ],
   },
 };