diff --git a/src/components/Button/Button-v2.module.css b/src/components/Button/Button-v2.module.css index c0b7e358a..4a063ab78 100644 --- a/src/components/Button/Button-v2.module.css +++ b/src/components/Button/Button-v2.module.css @@ -200,6 +200,7 @@ } } +/* TODO-AH: EDS-1344 confirm color: var(--eds-theme-color-text-utility-interactive-secondary-hover) and -active */ .button--secondary.button--variant-neutral { color: var(--eds-theme-color-text-utility-default-secondary); border-color: currentColor; @@ -216,18 +217,19 @@ } } +/* TODO-AH: EDS-1344 confirm color: var(--eds-theme-color-text-utility-interactive-secondary-hover) and -active */ .button--tertiary.button--variant-neutral { color: var(--eds-theme-color-text-utility-default-secondary); border-color: transparent; background-color: var(--eds-theme-color-background-utility-default-no-emphasis); &:hover { - border-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover); + border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-hover); background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover); } &:active { - border-color: var(--eds-theme-color-background-utility-default-no-emphasis-active); + border-color: var(--eds-theme-color-background-utility-default-medium-emphasis-active); background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active); } } @@ -314,7 +316,7 @@ } .button--tertiary.button--variant-default:hover { - border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover); + border-color: var(--eds-theme-color-border-utility-interactive-hover); } .button--variant-critical:hover { @@ -331,7 +333,7 @@ } .button--tertiary.button--variant-critical:hover { - border-color: var(--eds-theme-color-background-utility-critical-no-emphasis-hover); + border-color: var(--eds-theme-color-border-utility-critical-hover); } .button--primary.button--variant-inverse:hover { @@ -344,7 +346,7 @@ } .button--tertiary.button--variant-inverse:hover { - border-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover); + border-color: var(--eds-theme-color-border-utility-inverse); } .button--tertiary.button--context-standalone:hover { @@ -366,7 +368,7 @@ } .button--tertiary.button--variant-default:active { - border-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active); + border-color: var(--eds-theme-color-border-utility-interactive-active); } .button--variant-critical:active { @@ -382,14 +384,6 @@ border-color: var(--eds-theme-color-border-utility-critical-active); } -.button--tertiary.button--variant-critical:active { - border-color: var(--eds-theme-color-background-utility-critical-no-emphasis-active); -} - -.button--primary.button--variant-inverse:active { - background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis-active); -} - .button--secondary.button--variant-inverse:active, .button--tertiary.button--variant-inverse:active { background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-active); diff --git a/src/components/Button/Button-v2.stories.tsx b/src/components/Button/Button-v2.stories.tsx index af3e4385b..4babd87c6 100644 --- a/src/components/Button/Button-v2.stories.tsx +++ b/src/components/Button/Button-v2.stories.tsx @@ -215,13 +215,13 @@ function ExtendedButton(args: ExtendArgs) { * Steps to use: * * * import `ButtonProps` - * * use the type param. to augment the types for `Button` with the libraries type, e.g., `type ExtendedProps = ButtonProps;` + * * use the type param. to augment the types for `Button` with the libraries type, e.g., `type ExtendedProps = ButtonProps;` * * Now export a new function component that uses the new prop type and returns a composed function * * When using this pattern, you likely want to also specify the library's Button component using `as` * * ```tsx - * type ExtendedProps = ButtonProps; + * type ExtendedProps = ButtonProps; * * export default function Button({children, ...other}: ExtendedProps) { * return ( @@ -235,12 +235,12 @@ function ExtendedButton(args: ExtendArgs) { export const UsingExtendedLink: StoryObj = { render: (args) => (
- Lorem ipsum dolor sit amet,{' '} + Lorem ipsum dolor sit amet, . Morbi porta at ante quis molestie. Nam + scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id + tellus ante.{' '} consectetur adipiscing elit - . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. - Nullam sit amet iaculis erat. Nulla id tellus ante.{' '}
), }; diff --git a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap index 28fcf49ff..fb19d9f29 100644 --- a/src/components/Button/__snapshots__/Button-v2.test.tsx.snap +++ b/src/components/Button/__snapshots__/Button-v2.test.tsx.snap @@ -554,7 +554,7 @@ exports[` - . Morbi porta at ante quis molestie. Nam scelerisque id diam at iaculis. Nullam sit amet iaculis erat. Nulla id tellus ante. - `;