diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/Examples.tsx index 3cc30b48613..e44ae23dcd2 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/button/Examples.tsx @@ -6,8 +6,8 @@ import React from 'react' import ComponentBox from '../../../../shared/tags/ComponentBox' import { bell_medium as Bell, question } from '@dnb/eufemia/src/icons' -import { Button, IconPrimary } from '@dnb/eufemia/src' -import { VisibilityByTheme } from '@dnb/eufemia/src/shared' +import { Button, IconPrimary, Section } from '@dnb/eufemia/src' +import { VisibilityByTheme, Theme } from '@dnb/eufemia/src/shared' export const ButtonPrimary = () => ( @@ -524,3 +524,30 @@ export const TertiaryButtonAlignment = () => { ) } + +export const ButtonHasDarkBackground = () => ( + +
+ + + + + +
+
+) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx index acce0f4c64c..6fbe4c15ebd 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/button/demos.mdx @@ -17,6 +17,7 @@ import { ButtonSignal, ButtonSignalLarge, ButtonIcon, + ButtonHasDarkBackground, } from 'Docs/uilib/components/button/Examples' ## Demos @@ -90,3 +91,14 @@ This is, as all of the demos, only an example of how to achieve various needs, a + + + +### Button on dark background + +When placing the button on a dark background wrap the content of the dark section with `` +to get the correct styles. + + + + diff --git a/packages/dnb-eufemia/src/components/button/Button.js b/packages/dnb-eufemia/src/components/button/Button.js index f046f21ad0c..5a42d1f45a9 100644 --- a/packages/dnb-eufemia/src/components/button/Button.js +++ b/packages/dnb-eufemia/src/components/button/Button.js @@ -191,6 +191,8 @@ export default class Button extends React.PureComponent { 'dnb-button', `dnb-button--${usedVariant || 'primary'}`, usedSize && usedSize !== 'default' && `dnb-button--size-${usedSize}`, + this.context?.theme?.darkBackground && + `dnb-button--on-dark-background`, icon && `dnb-button--icon-position-${icon_position}`, isTrue(stretch) && 'dnb-button--stretch', icon && iconSize && `dnb-button--icon-size-${iconSize}`, diff --git a/packages/dnb-eufemia/src/components/button/__tests__/Button.screenshot.test.ts b/packages/dnb-eufemia/src/components/button/__tests__/Button.screenshot.test.ts index 5662106185a..d2c4135b32b 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/Button.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/button/__tests__/Button.screenshot.test.ts @@ -310,6 +310,42 @@ describe.each(['sbanken'])('Button for %s', (themeName) => { }) expect(screenshot).toMatchImageSnapshot() }) + + describe.each(['primary', 'secondary', 'tertiary'])( + 'on dark background %s', + (variant) => { + it('default', async () => { + const screenshot = await makeScreenshot({ + selector: `[data-visual-test="button-${variant}-on-dark"]`, + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('hover', async () => { + const screenshot = await makeScreenshot({ + selector: `[data-visual-test="button-${variant}-on-dark"]`, + simulate: 'hover', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('active', async () => { + const screenshot = await makeScreenshot({ + selector: `[data-visual-test="button-${variant}-on-dark"]`, + simulate: 'active', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('focus', async () => { + const screenshot = await makeScreenshot({ + selector: `[data-visual-test="button-${variant}-on-dark"]`, + simulate: 'focus', + }) + expect(screenshot).toMatchImageSnapshot() + }) + } + ) }) describe.each(['ui'])('Button for %s', (themeName) => { diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-primary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-primary-have-to-match-focus-state.snap.png index d60521a4da1..c088438a133 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-primary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-primary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-secondary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-secondary-have-to-match-focus-state.snap.png index 925e69ad754..f1b0722fa35 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-secondary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-secondary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-secondary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-secondary-have-to-match-hover-state.snap.png index cf85510b030..ad2646fe9c8 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-secondary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-error-secondary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-active-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-active-state.snap.png index 0785d2e8b2a..adfb591e4c7 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-active-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-active-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-focus-state.snap.png index c0c1f88dd23..6c14881c105 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-hover-state.snap.png index d8e4c5b18f2..27120b36440 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-icon-have-to-match-icon-button-with-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-primary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-primary-have-to-match-focus-state.snap.png index 9451d318e2b..667e01b30d4 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-primary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-primary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-secondary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-secondary-have-to-match-focus-state.snap.png index 76055c4822a..769ab17b4bf 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-secondary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-secondary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-secondary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-secondary-have-to-match-hover-state.snap.png index 757c320f08c..63cfe921e1f 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-secondary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-secondary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-tertiary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-tertiary-have-to-match-focus-state.snap.png index 569e5d93917..bb4f71b3387 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-tertiary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-tertiary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-tertiary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-tertiary-have-to-match-hover-state.snap.png index 28122162184..3fc1b3a2def 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-tertiary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-eiendom-tertiary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-primary-have-to-match-active-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-primary-have-to-match-active-state.snap.png index 6ac33472bd9..8316ff67fc5 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-primary-have-to-match-active-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-primary-have-to-match-active-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-primary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-primary-have-to-match-focus-state.snap.png index 7e5cb4511e6..8efbd5f9790 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-primary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-primary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-secondary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-secondary-have-to-match-focus-state.snap.png index 2350e0fc7b5..17f648e0b12 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-secondary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-error-secondary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-have-to-match-tertiary-icon-button-focus.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-have-to-match-tertiary-icon-button-focus.snap.png index a3056f71716..6dba7064e7e 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-have-to-match-tertiary-icon-button-focus.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-have-to-match-tertiary-icon-button-focus.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-icon-have-to-match-icon-button-with-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-icon-have-to-match-icon-button-with-focus-state.snap.png index 724aba84087..d724ce17d8b 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-icon-have-to-match-icon-button-with-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-icon-have-to-match-icon-button-with-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-active.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-active.snap.png new file mode 100644 index 00000000000..5e4c8fef7d3 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-active.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-default.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-default.snap.png new file mode 100644 index 00000000000..bea9373dd88 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-default.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-focus.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-focus.snap.png new file mode 100644 index 00000000000..8cc75fd62c3 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-focus.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-hover.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-hover.snap.png new file mode 100644 index 00000000000..cbab53ee251 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-primary-hover.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-active.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-active.snap.png new file mode 100644 index 00000000000..5f920e72ed8 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-active.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-default.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-default.snap.png new file mode 100644 index 00000000000..2b24f6d38a4 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-default.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-focus.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-focus.snap.png new file mode 100644 index 00000000000..406268ec6e5 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-focus.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-hover.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-hover.snap.png new file mode 100644 index 00000000000..876abe03e0f Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-secondary-hover.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-active.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-active.snap.png new file mode 100644 index 00000000000..f050008ee65 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-active.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-default.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-default.snap.png new file mode 100644 index 00000000000..f050008ee65 Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-default.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-focus.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-focus.snap.png new file mode 100644 index 00000000000..28d7cf0c4ab Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-focus.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-hover.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-hover.snap.png new file mode 100644 index 00000000000..4bf3f63f06a Binary files /dev/null and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-on-dark-background-tertiary-hover.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-primary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-primary-have-to-match-focus-state.snap.png index 007cd12be48..1478c3610b6 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-primary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-primary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-primary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-primary-have-to-match-hover-state.snap.png index 3c00c753ee6..8d4ffea8532 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-primary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-primary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-secondary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-secondary-have-to-match-focus-state.snap.png index 720dc20a4d9..81081bac2d5 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-secondary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-secondary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-tertiary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-tertiary-have-to-match-focus-state.snap.png index d8bec786554..81cb8f8f076 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-tertiary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-tertiary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-tertiary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-tertiary-have-to-match-hover-state.snap.png index 972aac2b8b7..997d18e9724 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-tertiary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-tertiary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-primary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-primary-have-to-match-focus-state.snap.png index d60521a4da1..c088438a133 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-primary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-primary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-primary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-primary-have-to-match-hover-state.snap.png index 48bf610815c..df3ea62f464 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-primary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-primary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-secondary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-secondary-have-to-match-focus-state.snap.png index 925e69ad754..f1b0722fa35 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-secondary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-secondary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-secondary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-secondary-have-to-match-hover-state.snap.png index cf85510b030..ad2646fe9c8 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-secondary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-error-secondary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-active-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-active-state.snap.png index eee311c27d3..f6473cdfd91 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-active-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-active-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-focus-state.snap.png index c0c1f88dd23..6c14881c105 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-hover-state.snap.png index d8e4c5b18f2..27120b36440 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-icon-have-to-match-icon-button-with-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-focus-state.snap.png index 9451d318e2b..667e01b30d4 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-hover-state.snap.png index e730afa0a3d..27e1bb08ec8 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-primary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-secondary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-secondary-have-to-match-focus-state.snap.png index 76055c4822a..769ab17b4bf 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-secondary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-secondary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-secondary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-secondary-have-to-match-hover-state.snap.png index 757c320f08c..63cfe921e1f 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-secondary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-secondary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-signal-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-signal-have-to-match-focus-state.snap.png index 733b0fde57b..929df345bcb 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-signal-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-signal-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-tertiary-have-to-match-focus-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-tertiary-have-to-match-focus-state.snap.png index 2599721187f..a2d3946edd5 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-tertiary-have-to-match-focus-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-tertiary-have-to-match-focus-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-tertiary-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-tertiary-have-to-match-hover-state.snap.png index 37a48ea628d..b3c890940a0 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-tertiary-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-ui-tertiary-have-to-match-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap index 3b954fb6dd4..a3aedab5b30 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap @@ -797,6 +797,8 @@ html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__tex --button-secondary-border--default ); --button-secondary-border--disabled: var(--sb-color-gray-light); + --button-tertiary-color: var(--sb-color-violet); + --button-tertiary-border: var(--sb-color-violet); border: none; } .dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--primary, .dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--secondary { @@ -912,7 +914,7 @@ html:not([data-whatintent=touch]) .dnb-button--primary:focus-visible:not([disabl --button-tertiary-underline-bottom: -0.5rem; --button-tertiary-text-bottom--icon: 0.5rem; --button-tertiary-text-top--icon: 0; - color: var(--sb-color-violet); + color: var(--button-tertiary-color); background-color: transparent; } .dnb-button--tertiary .dnb-button__text::after { @@ -939,7 +941,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] { cursor: not-allowed; } html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(:focus-visible) .dnb-button__text::after { - color: var(--sb-color-violet); + color: var(--button-tertiary-border); transition: none; } html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text) { @@ -969,12 +971,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):no html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text) > * { z-index: 2; } -.dnb-button--tertiary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled] { - cursor: not-allowed; -} -.dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after { - color: var(--sb-color-violet); -} html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled] { cursor: not-allowed; } @@ -1003,11 +999,27 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) > * { z-index: 2; } -html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text::after { - visibility: hidden; -} .dnb-button--tertiary[disabled] { color: var(--sb-color-gray-dark); +} +.dnb-button--on-dark-background { + --button-primary-color: var(--sb-color-text); + --button-primary-color--hover: var(--sb-color-purple-alternative); + --button-primary-color--active: var(--sb-color-purple-alternative); + --button-primary-background: var(--sb-color-green); + --button-primary-background--hover: var(--sb-color-violet-light-2); + --button-primary-background--active: var(--sb-color-violet-light-3); + --button-secondary-color: var(--sb-color-white); + --button-secondary-color--hover: var(--sb-color-purple-alternative); + --button-secondary-color--active: var(--sb-color-purple-alternative); + --button-secondary-background: transparent; + --button-secondary-background--hover: var(--sb-color-violet-light-2); + --button-secondary-background--active: var(--sb-color-violet-light-3); + --button-secondary-border--default: var(--sb-color-green); + --button-secondary-border--hover: var(--sb-color-violet-light); + --button-secondary-border--active: var(--sb-color-violet-light); + --button-tertiary-color: var(--sb-color-white); + --button-tertiary-border: var(--sb-color-green); }" `; diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss index 7d1522811ff..0f264c9cc90 100644 --- a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss +++ b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss @@ -46,6 +46,10 @@ ); --button-secondary-border--disabled: var(--sb-color-gray-light); + // tertiary + --button-tertiary-color: var(--sb-color-violet); + --button-tertiary-border: var(--sb-color-violet); + border: none; &#{&}--has-text#{&}--size-large { @@ -167,7 +171,7 @@ --button-tertiary-text-bottom--icon: 0.5rem; --button-tertiary-text-top--icon: 0; - color: var(--sb-color-violet); + color: var(--button-tertiary-color); background-color: transparent; .dnb-button__text::after { @@ -219,7 +223,7 @@ @include hover() { // underline &:not(:focus-visible) .dnb-button__text::after { - color: var(--sb-color-violet); + color: var(--button-tertiary-border); transition: none; } @@ -229,24 +233,36 @@ @include focus-tertiary(); } } - - @include active() { - // underline - .dnb-button__text::after { - color: var(--sb-color-violet); - } - } - @include focus-visible() { @include focus-tertiary(); - // underline - .dnb-button__text::after { - visibility: hidden; - } } &[disabled] { color: var(--sb-color-gray-dark); } } + &--on-dark-background { + // primary + --button-primary-color: var(--sb-color-text); + --button-primary-color--hover: var(--sb-color-purple-alternative); + --button-primary-color--active: var(--sb-color-purple-alternative); + --button-primary-background: var(--sb-color-green); + --button-primary-background--hover: var(--sb-color-violet-light-2); + --button-primary-background--active: var(--sb-color-violet-light-3); + + // secondary + --button-secondary-color: var(--sb-color-white); + --button-secondary-color--hover: var(--sb-color-purple-alternative); + --button-secondary-color--active: var(--sb-color-purple-alternative); + --button-secondary-background: transparent; + --button-secondary-background--hover: var(--sb-color-violet-light-2); + --button-secondary-background--active: var(--sb-color-violet-light-3); + --button-secondary-border--default: var(--sb-color-green); + --button-secondary-border--hover: var(--sb-color-violet-light); + --button-secondary-border--active: var(--sb-color-violet-light); + + // tertiary + --button-tertiary-color: var(--sb-color-white); + --button-tertiary-border: var(--sb-color-green); + } } diff --git a/packages/dnb-eufemia/src/shared/Theme.tsx b/packages/dnb-eufemia/src/shared/Theme.tsx index 6ece34bb6b5..6c3af16d3b7 100644 --- a/packages/dnb-eufemia/src/shared/Theme.tsx +++ b/packages/dnb-eufemia/src/shared/Theme.tsx @@ -16,6 +16,7 @@ export type ThemeSizes = 'basis' export type PropMapping = string export type ContrastMode = boolean export type DarkMode = boolean +export type DarkBackground = boolean export type ThemeProps = { name?: ThemeNames @@ -24,6 +25,7 @@ export type ThemeProps = { propMapping?: PropMapping contrastMode?: ContrastMode darkMode?: DarkMode + darkBackground?: DarkBackground element?: DynamicElement | false } @@ -41,6 +43,7 @@ export default function Theme(themeProps: ThemeAllProps) { propMapping, contrastMode, darkMode, + darkBackground, ...restProps } = themeProps @@ -52,6 +55,7 @@ export default function Theme(themeProps: ThemeAllProps) { propMapping, contrastMode, darkMode, + darkBackground, }, null, context?.theme @@ -66,6 +70,11 @@ export default function Theme(themeProps: ThemeAllProps) { ) } +Theme.Provider = ({ element, ...themeProps }: ThemeAllProps) => { + return +} +Theme.Provider['_supportsSpacingProps'] = 'children' + export function ThemeWrapper({ children, theme,