diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip.mdx index b27627efffd..655859ace30 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/tooltip.mdx @@ -4,6 +4,7 @@ description: 'The Tooltip component is primarily meant to enhance the UX for var showTabs: true hideTabs: - title: Events +theme: 'sbanken' --- import TooltipInfo from 'Docs/uilib/components/tooltip/info' diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap b/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap index db099ed2013..94e81de3030 100644 --- a/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -109,6 +109,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -116,6 +120,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -173,6 +181,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 34c73d7f80f..0088027029b 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -123,6 +123,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -130,6 +134,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -187,6 +195,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -660,6 +670,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -667,6 +681,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -724,6 +742,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -1444,6 +1464,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -1451,6 +1475,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -1508,6 +1536,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap index fe5091abe82..317eb91f1a9 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-with-href-have-to-match-hover-state.snap.png b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-with-href-have-to-match-hover-state.snap.png index a0adf0bda01..3c4e748d4af 100644 Binary files a/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-with-href-have-to-match-hover-state.snap.png and b/packages/dnb-eufemia/src/components/button/__tests__/__image_snapshots__/button-for-sbanken-with-href-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 76d6ac8affb..fb741fbe4b0 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 @@ -109,6 +109,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -116,6 +120,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -173,6 +181,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap index a63ee0c12d8..30b243ee11c 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap @@ -123,6 +123,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -130,6 +134,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -187,6 +195,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -660,6 +670,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -667,6 +681,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -724,6 +742,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -1351,6 +1371,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -1358,6 +1382,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -1415,6 +1443,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -1944,6 +1974,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -1951,6 +1985,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -2008,6 +2046,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index 18e3625d2fc..5e6fe0f3881 100644 --- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -130,6 +130,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -137,6 +141,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -194,6 +202,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index 7ea79fa0251..10645e3b71c 100644 --- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -131,6 +131,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -138,6 +142,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -195,6 +203,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap index cd2bbb281ee..ab18aaf1d84 100644 --- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap @@ -202,6 +202,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -209,6 +213,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -266,6 +274,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.tsx.snap b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.tsx.snap index 0716a366750..f2bc0f9d342 100644 --- a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap index 073fef7a7f3..c27cd70ad2f 100644 --- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap index d2a38465b97..d2de42e029d 100644 --- a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap index c9d5aa2ce09..cf233d8ae2a 100644 --- a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap @@ -123,6 +123,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -130,6 +134,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -187,6 +195,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -660,6 +670,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -667,6 +681,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -724,6 +742,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-sbanken-have-to-match-input-with-clear-button-in-hover-state.snap.png b/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-sbanken-have-to-match-input-with-clear-button-in-hover-state.snap.png index b2ebceff441..e699a6d7d64 100644 Binary files a/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-sbanken-have-to-match-input-with-clear-button-in-hover-state.snap.png and b/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-sbanken-have-to-match-input-with-clear-button-in-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap index 7c58cc713bb..7d19a710d18 100644 --- a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -653,6 +663,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -660,6 +674,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -717,6 +735,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap index 5e0cf626935..0084e18b244 100644 --- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap @@ -123,6 +123,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -130,6 +134,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -187,6 +195,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.tsx.snap b/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.tsx.snap index 534bf32e7ae..e728e2fb095 100644 --- a/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.tsx.snap @@ -23,6 +23,10 @@ exports[`NumberFormat scss has to match style dependencies css 1`] = ` * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -30,6 +34,10 @@ exports[`NumberFormat scss has to match style dependencies css 1`] = ` justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -87,6 +95,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap index fc00f7b735f..dca690f9355 100644 --- a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap index 0517d87bc87..be556b49efc 100644 --- a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap index b6e428ee3d4..d233a4376ec 100644 --- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -567,6 +577,10 @@ button.dnb-button::-moz-focus-inner { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -574,6 +588,10 @@ button.dnb-button::-moz-focus-inner { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -631,6 +649,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.tsx.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.tsx.snap index 98ef3a8de64..da310184981 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap index 3333009a756..0051005b853 100644 --- a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -116,6 +116,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -123,6 +127,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -180,6 +188,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap index fbf65c23f2b..95936203678 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -158,6 +158,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -165,6 +169,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -222,6 +230,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.screenshot.test.ts b/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.screenshot.test.ts index d5c9eeed0ff..72519cdb6dd 100644 --- a/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.screenshot.test.ts @@ -8,8 +8,9 @@ import { setupPageScreenshot, } from '../../../core/jest/jestSetupScreenshots' -describe('Tooltip', () => { +describe.each(['ui', 'sbanken'])('Tooltip for %s', (themeName) => { setupPageScreenshot({ + themeName, url: '/uilib/components/tooltip/demos', }) diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-sbanken-have-to-match-tooltip-in-large-size.snap.png b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-sbanken-have-to-match-tooltip-in-large-size.snap.png new file mode 100644 index 00000000000..dc5449aa198 Binary files /dev/null and b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-sbanken-have-to-match-tooltip-in-large-size.snap.png differ diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-sbanken-have-to-match-tooltip-on-button-hover-state.snap.png b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-sbanken-have-to-match-tooltip-on-button-hover-state.snap.png new file mode 100644 index 00000000000..4f417d59378 Binary files /dev/null and b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-sbanken-have-to-match-tooltip-on-button-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-have-to-match-tooltip-in-large-size.snap.png b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-ui-have-to-match-tooltip-in-large-size.snap.png similarity index 98% rename from packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-have-to-match-tooltip-in-large-size.snap.png rename to packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-ui-have-to-match-tooltip-in-large-size.snap.png index 73b905f1048..53d0645da23 100644 Binary files a/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-have-to-match-tooltip-in-large-size.snap.png and b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-ui-have-to-match-tooltip-in-large-size.snap.png differ diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-ui-have-to-match-tooltip-on-button-hover-state.snap.png b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-ui-have-to-match-tooltip-on-button-hover-state.snap.png new file mode 100644 index 00000000000..cd11dba2c72 Binary files /dev/null and b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-for-ui-have-to-match-tooltip-on-button-hover-state.snap.png differ diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-have-to-match-tooltip-on-button-hover-state.snap.png b/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-have-to-match-tooltip-on-button-hover-state.snap.png deleted file mode 100644 index 3b93afc5d65..00000000000 Binary files a/packages/dnb-eufemia/src/components/tooltip/__tests__/__image_snapshots__/tooltip-have-to-match-tooltip-on-button-hover-state.snap.png and /dev/null differ diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap index 5b5852b7235..5100e1de962 100644 --- a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap @@ -16,6 +16,10 @@ exports[`Tooltip scss has to match style dependencies css 1`] = ` * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -23,6 +27,10 @@ exports[`Tooltip scss has to match style dependencies css 1`] = ` justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -80,6 +88,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { @@ -130,17 +140,9 @@ exports[`Tooltip scss have to match default theme snapshot 1`] = ` * Tooltip theme * */ -/* - * Utilities - */ .dnb-tooltip { - border-radius: 1rem; - color: var(--color-white); - background-color: var(--color-black-80); - box-shadow: var(--shadow-default); -} -.dnb-tooltip__arrow::before { - border: 1px solid rgba(0, 0, 0, 0.1); - background-color: var(--color-black-80); + --tooltip-color: var(--color-white); + --tooltip-background-color: var(--color-black-80); + --tooltip-border-color: 1px solid rgb(0 0 0 / 10%); }" `; diff --git a/packages/dnb-eufemia/src/components/tooltip/style/dnb-tooltip.scss b/packages/dnb-eufemia/src/components/tooltip/style/dnb-tooltip.scss index aa14fdba7b6..aac578c6a56 100644 --- a/packages/dnb-eufemia/src/components/tooltip/style/dnb-tooltip.scss +++ b/packages/dnb-eufemia/src/components/tooltip/style/dnb-tooltip.scss @@ -6,6 +6,11 @@ @import '../../../style/core/utilities.scss'; .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; + position: absolute; z-index: 3100; // over modal @@ -15,6 +20,11 @@ align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + @include defaultDropShadow(); &--large { padding: 0.25rem 1rem; @@ -89,6 +99,10 @@ width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + + border: var(--tooltip-border-color); + transform: translateY(70%) rotate(45deg); } diff --git a/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.scss b/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.scss new file mode 100644 index 00000000000..bd4792fc456 --- /dev/null +++ b/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.scss @@ -0,0 +1,10 @@ +/* +* Tooltip theme for Sbanken +* +*/ + +.dnb-tooltip { + --tooltip-color: var(--sb-color-white); + --tooltip-background-color: var(--sb-color-gray-dark-3); + --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3); +} diff --git a/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss b/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss index d6750e5e56d..9653a933110 100644 --- a/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss @@ -3,20 +3,8 @@ * */ -@import '../../../../style/core/utilities.scss'; - .dnb-tooltip { - border-radius: 1rem; - - color: var(--color-white); - background-color: var(--color-black-80); - - @include defaultDropShadow(); - - &__arrow { - &::before { - border: 1px solid rgb(0 0 0 / 10%); - background-color: var(--color-black-80); - } - } + --tooltip-color: var(--color-white); + --tooltip-background-color: var(--color-black-80); + --tooltip-border-color: 1px solid rgb(0 0 0 / 10%); } diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap index c1590e49d0f..7389e551eec 100644 --- a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap @@ -202,6 +202,10 @@ p > .dnb-icon { * Utilities */ .dnb-tooltip { + --tooltip-color: white; + --tooltip-background-color: black; + --tooltip-border-color: 1px solid black; + --tooltip-border-radius: 1rem; position: absolute; z-index: 3100; display: flex; @@ -209,6 +213,10 @@ p > .dnb-icon { justify-content: center; align-items: center; padding: 0 1rem; + color: var(--tooltip-color); + background-color: var(--tooltip-background-color); + border-radius: var(--tooltip-border-radius); + box-shadow: var(--shadow-default); opacity: 0; visibility: hidden; transition: opacity 200ms var(--easing-default); @@ -266,6 +274,8 @@ html[data-visual-test] .dnb-tooltip--hide { left: 0; width: 1rem; height: 1rem; + background-color: var(--tooltip-background-color); + border: var(--tooltip-border-color); transform: translateY(70%) rotate(45deg); } .dnb-tooltip__arrow__position--bottom { diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss index 3b38b4e3358..bb341983104 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss @@ -33,6 +33,7 @@ $fonts-path: '../../../../assets/fonts/dnb' !default; @import '../../../components/skeleton/style/themes/dnb-skeleton-theme-sbanken.scss'; @import '../../../components/table/style/themes/dnb-table-theme-sbanken.scss'; @import '../../../components/textarea/style/themes/dnb-textarea-theme-sbanken.scss'; +@import '../../../components/tooltip/style/themes/dnb-tooltip-theme-sbanken.scss'; @import '../../../components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss'; @import '../../../components/badge/style/themes/dnb-badge-theme-ui.scss'; @import '../../../components/checkbox/style/themes/dnb-checkbox-theme-ui.scss'; @@ -54,7 +55,6 @@ $fonts-path: '../../../../assets/fonts/dnb' !default; @import '../../../components/tabs/style/themes/dnb-tabs-theme-ui.scss'; @import '../../../components/timeline/style/themes/dnb-timeline-theme-ui.scss'; @import '../../../components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss'; -@import '../../../components/tooltip/style/themes/dnb-tooltip-theme-ui.scss'; @import '../../../components/upload/style/themes/dnb-upload-theme-ui.scss'; @import '../../../fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss'; @import '../../../fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss';