feat(Theming): refactor the internal structure + align DNB Eiendom th…

…eme and Anchor styles (#2653)

## Summary

We want to clean up all the different theming structures that have been
used into one.

* removed all customization sass mixins
* added and fixed eiendom anchor theme (it didn't work before)
* eiendom and sbanken now has the same theme structure
* {theme}-basis.scss files no longer have code, they only import so it's
easier to control what each import does
* theme-mapping seperated from theme properties
* global.scss contains all the "extra" code that isn't part of a
structure (this would also be a good place to look for future
improvements)

packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts

@@ -8,187 +8,196 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe.each(['ui', 'sbanken'])('Anchor for %s', (themeName) => {
-  setupPageScreenshot({ themeName, url: '/uilib/components/anchor' })
-
-  it('have to match the preview states', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-states"]',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-
-  it('have to match breaking lines', async () => {
-    const screenshot = await makeScreenshot({
-      style: {
-        'white-space': 'nowrap',
-      },
-      selector: '[data-visual-test="anchor-newline"]',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-
-  it('have to match anchor with skeleton', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-skeleton"]',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-
-  it('have to match anchor with icon-right', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-icon-right"]',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
+describe.each(['ui', 'sbanken', 'eiendom'])(
+  'Anchor for %s',
+  (themeName) => {
+    setupPageScreenshot({ themeName, url: '/uilib/components/anchor' })
 
-  it('have to match anchor with icon left', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-icon-left"]',
+    it('have to match the preview states', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-states"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match anchor with icon node', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-icon-node"]',
+    it('have to match breaking lines', async () => {
+      const screenshot = await makeScreenshot({
+        style: {
+          'white-space': 'nowrap',
+        },
+        selector: '[data-visual-test="anchor-newline"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match anchor with paragraph', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-paragraph"]',
-      matchConfig: {
-        failureThreshold: 0.0013,
-      },
+    it('have to match anchor with skeleton', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-skeleton"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match anchor in heading', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-heading"]',
+    it('have to match anchor with icon-right', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-icon-right"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the "default" state', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-default"]',
+    it('have to match anchor with icon left', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-icon-left"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the "focus" state', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-default"]',
-      simulateSelector: '[data-visual-test="anchor-default"] .dnb-anchor',
-      simulate: 'focus',
+    it('have to match anchor with icon node', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-icon-node"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the "hover" state', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-default"]',
-      simulateSelector: '[data-visual-test="anchor-default"] .dnb-anchor',
-      simulate: 'hover',
+    it('have to match anchor with paragraph', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-paragraph"]',
+        matchConfig: {
+          failureThreshold: 0.0013,
+        },
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the "active" state', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-default"]',
-      simulateSelector: '[data-visual-test="anchor-default"] .dnb-anchor',
-      simulate: 'active',
+    it('have to match anchor in heading', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-heading"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the anchor-contrast "default" state', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-contrast"]',
+    it('have to match the "default" state', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-default"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the anchor-contrast "focus" state', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-contrast"]',
-      simulateSelector: '[data-visual-test="anchor-contrast"] .dnb-anchor',
-      simulate: 'focus',
+    it('have to match the "focus" state', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-default"]',
+        simulateSelector:
+          '[data-visual-test="anchor-default"] .dnb-anchor',
+        simulate: 'focus',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the anchor-contrast "hover" state', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-contrast"]',
-      simulateSelector: '[data-visual-test="anchor-contrast"] .dnb-anchor',
-      simulate: 'hover',
+    it('have to match the "hover" state', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-default"]',
+        simulateSelector:
+          '[data-visual-test="anchor-default"] .dnb-anchor',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the anchor-contrast "active" state', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-contrast"]',
-      simulateSelector: '[data-visual-test="anchor-contrast"] .dnb-anchor',
-      simulate: 'active',
+    it('have to match the "active" state', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-default"]',
+        simulateSelector:
+          '[data-visual-test="anchor-default"] .dnb-anchor',
+        simulate: 'active',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  it('have to match the dnb-anchor--no-underline', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="anchor-in-section"]',
+    it('have to match the anchor-contrast "default" state', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="anchor-contrast"]',
+      })
+      expect(screenshot).toMatchImageSnapshot()
     })
-    expect(screenshot).toMatchImageSnapshot()
-  })
 
-  if (themeName === 'sbanken') {
-    it('have to match the dnb-anchor--inline class', async () => {
+    it('have to match the anchor-contrast "focus" state', async () => {
       const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="anchor-inline"]',
+        selector: '[data-visual-test="anchor-contrast"]',
+        simulateSelector:
+          '[data-visual-test="anchor-contrast"] .dnb-anchor',
+        simulate: 'focus',
       })
       expect(screenshot).toMatchImageSnapshot()
     })
 
-    it('have to match the dnb-anchor--inline hover', async () => {
+    it('have to match the anchor-contrast "hover" state', async () => {
       const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="anchor-inline"]',
+        selector: '[data-visual-test="anchor-contrast"]',
         simulateSelector:
-          '[data-visual-test="anchor-inline"] a.dnb-anchor',
+          '[data-visual-test="anchor-contrast"] .dnb-anchor',
         simulate: 'hover',
       })
       expect(screenshot).toMatchImageSnapshot()
     })
 
-    it('have to match the dnb-anchor--inline active', async () => {
+    it('have to match the anchor-contrast "active" state', async () => {
       const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="anchor-inline"]',
+        selector: '[data-visual-test="anchor-contrast"]',
         simulateSelector:
-          '[data-visual-test="anchor-inline"] a.dnb-anchor',
+          '[data-visual-test="anchor-contrast"] .dnb-anchor',
         simulate: 'active',
       })
       expect(screenshot).toMatchImageSnapshot()
     })
 
-    it('have to match the dnb-anchor--inline focus', async () => {
+    it('have to match the dnb-anchor--no-underline', async () => {
       const screenshot = await makeScreenshot({
-        selector: '[data-visual-test="anchor-inline"]',
-        simulateSelector:
-          '[data-visual-test="anchor-inline"] a.dnb-anchor',
-        simulate: 'focus',
+        selector: '[data-visual-test="anchor-in-section"]',
       })
       expect(screenshot).toMatchImageSnapshot()
     })
+
+    if (themeName === 'sbanken') {
+      it('have to match the dnb-anchor--inline class', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="anchor-inline"]',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+
+      it('have to match the dnb-anchor--inline hover', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="anchor-inline"]',
+          simulateSelector:
+            '[data-visual-test="anchor-inline"] a.dnb-anchor',
+          simulate: 'hover',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+
+      it('have to match the dnb-anchor--inline active', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="anchor-inline"]',
+          simulateSelector:
+            '[data-visual-test="anchor-inline"] a.dnb-anchor',
+          simulate: 'active',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+
+      it('have to match the dnb-anchor--inline focus', async () => {
+        const screenshot = await makeScreenshot({
+          selector: '[data-visual-test="anchor-inline"]',
+          simulateSelector:
+            '[data-visual-test="anchor-inline"] a.dnb-anchor',
+          simulate: 'focus',
+        })
+        expect(screenshot).toMatchImageSnapshot()
+      })
+    }
   }
-})
+)
 
-describe.each(['ui', 'sbanken'])(
+describe.each(['ui', 'sbanken', 'eiendom'])(
   'Anchor target blank for %s',
   (themeName) => {
     setupPageScreenshot({ themeName, url: '/uilib/components/anchor' })
@@ -225,7 +234,7 @@ describe.each(['ui', 'sbanken'])(
   }
 )
 
-describe.each(['ui', 'sbanken'])(
+describe.each(['ui', 'sbanken', 'eiendom'])(
   'Anchor legacy icon usage for %s',
   (themeName) => {
     setupPageScreenshot({ themeName, url: '/uilib/components/anchor' })