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,