💄 - style: further tweaks to Toolbar styling

maykinmedia · Dec 9, 2024 · edf056a · edf056a
1 parent 69f9b83
commit edf056a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -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" />,
     ],
   },
 };