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, + , ], }, };