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: [
- ,
+ ,
"spacer",
{
children: "Anchor",
@@ -65,6 +66,7 @@ export const ToolbarComponent: Story = {
{
placeholder: "FormControl",
} as FormControlProps,
+ ,
],
},
};