feat(skip-link): sbanken styling

packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.tsx

@@ -109,3 +109,14 @@ export function FormsetReset() {
     </Wrapper>
   )
 }
+export function SkipLink() {
+  return (
+    <Wrapper className={fieldsetReset}>
+      <ComponentBox hideCode data-visual-test="skip-link">
+        <a href="#something" className="dnb-skip-link">
+          I am a skip link
+        </a>
+      </ComponentBox>
+    </Wrapper>
+  )
+}

packages/dnb-eufemia/src/style/core/helper-classes/__tests__/HelperClasses.screenshot.test.ts

@@ -8,8 +8,9 @@ import {
   setupPageScreenshot,
 } from '../../../../core/jest/jestSetupScreenshots'
 
-describe('HelperClasses', () => {
+describe.each(['ui', 'sbanken'])('HelperClasses for %s', (themeName) => {
   setupPageScreenshot({
+    themeName,
     url: '/uilib/helpers/classes/visual-tests',
   })
 
@@ -59,4 +60,15 @@ describe('HelperClasses', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match focused skip link', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="skip-link"]',
+      simulateSelector: '[data-visual-test="skip-link"] .dnb-skip-link',
+      simulate: 'focus',
+      waitAfterSimulate: 300,
+      screenshotSelector: '[data-visual-test="skip-link"] .dnb-skip-link',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })

packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss

@@ -10,7 +10,7 @@
   white-space: nowrap;
 
   font-size: var(--font-size-basis);
-  color: var(--color-sea-green);
+  color: var(--skip-link-color);
   text-decoration: none;
   text-align: center;
 
@@ -51,16 +51,16 @@
     height: 100%;
     border-radius: 1.5rem; // same as anchor
 
-    background-color: var(--color-white);
+    background-color: var(--skip-link-background);
 
     @include focusRing('mouse');
   }
 
   &:hover::before {
-    background-color: var(--color-mint-green-50);
+    background-color: var(--skip-link-background--hover);
   }
   &:active::before {
-    background-color: var(--color-emerald-green);
+    background-color: var(--skip-link-background--active);
   }
 
   // focus
@@ -72,15 +72,21 @@
   &:focus {
     opacity: 1;
   }
-  &:hover,
+
+  &:hover {
+    color: var(--skip-link-color--hover);
+    background-color: transparent;
+    box-shadow: none;
+  }
+
   &:focus:not(:hover):not(:active) {
-    color: var(--color-sea-green);
+    color: var(--skip-link-color);
     background-color: transparent;
     box-shadow: none;
   }
   // stylelint-disable-next-line
   &:active {
-    color: var(--color-white);
+    color: var(--skip-link-color--active);
     background-color: transparent;
   }
 }

packages/dnb-eufemia/src/style/themes/theme-sbanken/globals.scss

@@ -19,6 +19,14 @@
   // Skeleton
   --skeleton-color: var(--sb-color-gray-light-2);
   --skeleton-color--contrast: var(--sb-color-white);
+
+  // Skip Link
+  --skip-link-color: var(--sb-color-blue-dark);
+  --skip-link-color--hover: var(--sb-color-purple-alternative);
+  --skip-link-color--active: var(--sb-color-purple-alternative);
+  --skip-link-background: var(--sb-color-blue-light-3);
+  --skip-link-background--hover: var(--sb-color-green);
+  --skip-link-background--active: var(--sb-color-white);
 }
 
 // ::selection appearance helper

packages/dnb-eufemia/src/style/themes/theme-ui/globals.scss

@@ -17,6 +17,14 @@
   // Skeleton
   --skeleton-color: var(--color-black-8);
   --skeleton-color--contrast: var(--color-white);
+
+  // Skip Link
+  --skip-link-color: var(--color-sea-green);
+  --skip-link-color--hover: var(--color-sea-green);
+  --skip-link-color--active: var(--color-white);
+  --skip-link-background: var(--color-white);
+  --skip-link-background--hover: var(--color-mint-green-50);
+  --skip-link-background--active: var(--color-emerald-green);
 }
 
 // ::selection appearance helper