feat(Skeleton): Sbanken styling (#2622)

Use Sbanken grey tone.
Refactored the skeleton style and relocated the globally required
`--skeleton-color` and `--skeleton-color-contrast` variables following a
discussion with @snorrekim .

packages/dnb-eufemia/src/components/skeleton/__tests__/Skeleton.screenshot.test.ts

@@ -8,8 +8,11 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe('Skeleton', () => {
-  setupPageScreenshot({ url: '/uilib/components/skeleton/demos' })
+describe.each(['ui', 'sbanken'])('Skeleton for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/components/skeleton/demos',
+  })
 
   it('have to match skeleton article figure', async () => {
     const screenshot = await makeScreenshot({

packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap

@@ -17,6 +17,13 @@ exports[`Skeleton scss has to match style dependencies css 1`] = `
 /*
  * Utilities
  */
+.dnb-skeleton {
+  --skeleton-delay: 5s;
+}
+.dnb-skeleton img,
+.dnb-skeleton video {
+  filter: brightness(0%) contrast(0%) opacity(0.5);
+}
 .dnb-skeleton--block {
   display: block;
 }
@@ -50,6 +57,16 @@ exports[`Skeleton scss has to match style dependencies css 1`] = `
   background: none !important;
   box-shadow: none !important;
 }
+.dnb-skeleton--shape.dnb-skeleton::before {
+  background-color: var(--skeleton-color) !important;
+}
+.dnb-skeleton--shape.dnb-skeleton::after {
+  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
+  background-repeat: repeat !important;
+  background-size: 100% !important;
+  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  animation: skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);
+}
 .dnb-skeleton--code pre,
 .dnb-skeleton--code pre *,
 .dnb-skeleton--code code,
@@ -67,12 +84,20 @@ exports[`Skeleton scss has to match style dependencies css 1`] = `
   font-family: var(--font-family-default) !important;
   font-style: unset !important;
 }
+.dnb-skeleton--font-only::marker, .dnb-skeleton--font::marker, .dnb-skeleton--font .dnb-skeleton--show-font::marker, .dnb-skeleton--font .dnb-p::marker {
+  color: var(--skeleton-color);
+}
 .dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p {
   background-position-y: 50% !important;
   background-repeat: no-repeat !important;
   background-size: 30rem 100% !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
+  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
+  --border-color: var(--skeleton-color);
+  background-color: var(--skeleton-color) !important;
+  background-position-x: 30rem;
+  animation: skeletonFontAnimation 5s linear infinite var(--skeleton-delay);
 }
 html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font, html[data-visual-test] .dnb-skeleton--font .dnb-p {
   animation: none !important;
@@ -98,6 +123,25 @@ html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton
   animation: none !important;
 }
 
+@keyframes skeletonLinearAnimation {
+  0% {
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  }
+  50% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+  }
+}
+@keyframes skeletonFontAnimation {
+  0% {
+    background-position-x: 30rem;
+  }
+  100% {
+    background-position-x: -30rem;
+  }
+}
 @font-face {
   font-family: DNBSkeleton;
   src: url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2") format("woff2"), url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff") format("woff"), url("../../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf") format("truetype");

packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss

@@ -8,6 +8,13 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-skeleton {
+  --skeleton-delay: 5s;
+
+  img,
+  video {
+    filter: brightness(0%) contrast(0%) opacity(0.5);
+  }
+
   &--block {
     display: block;
   }
@@ -53,6 +60,24 @@
     box-shadow: none !important;
   }
 
+  &--shape#{&}::before {
+    background-color: var(--skeleton-color) !important; // to take presence
+  }
+
+  &--shape#{&}::after {
+    background-image: repeating-linear-gradient(
+      -45deg,
+      var(--skeleton-color--contrast) 1px 2px,
+      transparent 0 6px
+    ) !important;
+    background-repeat: repeat !important;
+    background-size: 100% !important; // to take presence
+
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+    animation: skeletonLinearAnimation 1.5s linear infinite
+      var(--skeleton-delay);
+  }
+
   &--code,
   &--font {
     pre,
@@ -75,6 +100,10 @@
 
     font-family: var(--font-family-default) !important;
     font-style: unset !important;
+
+    &::marker {
+      color: var(--skeleton-color);
+    }
   }
 
   &--font,
@@ -87,6 +116,19 @@
     -webkit-text-fill-color: transparent !important;
     background-clip: text !important;
 
+    background-image: repeating-linear-gradient(
+      -45deg,
+      var(--skeleton-color--contrast) 1px 2px,
+      transparent 0 6px
+    ) !important;
+
+    --border-color: var(--skeleton-color);
+    background-color: var(--skeleton-color) !important;
+
+    background-position-x: 30rem;
+    animation: skeletonFontAnimation 5s linear infinite
+      var(--skeleton-delay);
+
     html[data-visual-test] & {
       animation: none !important;
     }
@@ -120,6 +162,30 @@
   }
 }
 
+@keyframes skeletonLinearAnimation {
+  0% {
+    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  }
+
+  50% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+
+  100% {
+    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+  }
+}
+
+@keyframes skeletonFontAnimation {
+  0% {
+    background-position-x: 30rem;
+  }
+
+  100% {
+    background-position-x: -30rem;
+  }
+}
+
 $fonts-path: '../../assets/fonts/dnb' !default;
 
 // Skeleton-Regular

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

@@ -0,0 +1,7 @@
+/*
+ * No theme is provided
+ *
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-sbanken/customisations.scss
+ *
+ */

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

@@ -1,89 +1,7 @@
 /*
- * Skeleton Theme
+ * No theme is provided
+ *
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-ui/ui-theme-basis.scss
  *
  */
-
-:root {
-  --skeleton-color: var(--color-black-8);
-  --skeleton-color--contrast: var(--color-white);
-}
-
-.dnb-skeleton {
-  --skeleton-delay: 5s;
-
-  img,
-  video {
-    filter: brightness(0%) contrast(0%) opacity(0.5);
-  }
-
-  &--shape#{&}::before {
-    background-color: var(--skeleton-color) !important; // to take presence
-  }
-
-  &--shape#{&}::after {
-    background-image: repeating-linear-gradient(
-      -45deg,
-      var(--skeleton-color--contrast) 1px 2px,
-      transparent 0 6px
-    ) !important;
-    background-repeat: repeat !important;
-    background-size: 100% !important; // to take presence
-
-    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-    animation: skeletonLinearAnimation 1.5s linear infinite
-      var(--skeleton-delay);
-  }
-
-  // Font
-  &--font-only,
-  &--font,
-  &--font &--show-font,
-  &--font .dnb-p {
-    // Additional changes
-    &::marker {
-      color: var(--skeleton-color);
-    }
-  }
-
-  // Font
-  &--font,
-  &--font &--show-font,
-  &--font .dnb-p {
-    background-image: repeating-linear-gradient(
-      -45deg,
-      var(--skeleton-color--contrast) 1px 2px,
-      transparent 0 6px
-    ) !important;
-
-    --border-color: var(--skeleton-color);
-    background-color: var(--skeleton-color) !important;
-
-    background-position-x: 30rem;
-    animation: skeletonFontAnimation 5s linear infinite
-      var(--skeleton-delay);
-  }
-}
-
-@keyframes skeletonLinearAnimation {
-  0% {
-    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
-  }
-
-  50% {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-
-  100% {
-    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
-  }
-}
-
-@keyframes skeletonFontAnimation {
-  0% {
-    background-position-x: 30rem;
-  }
-
-  100% {
-    background-position-x: -30rem;
-  }
-}

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

@@ -37,4 +37,8 @@
   --scrollbar-track-color: var(--sb-color-gray-light-2);
   --scrollbar-thumb-color: var(--sb-color-gray-dark-3);
   --scrollbar-thumb-hover-color: var(--sb-color-purple);
+
+  // Skeleton
+  --skeleton-color: var(--sb-color-gray-light-2);
+  --skeleton-color--contrast: var(--sb-color-white);
 }

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

@@ -30,6 +30,7 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/logo/style/themes/dnb-logo-theme-sbanken.scss';
 @import '../../../components/pagination/style/themes/dnb-pagination-theme-sbanken.scss';
 @import '../../../components/section/style/themes/dnb-section-theme-sbanken.scss';
+@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/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss';
@@ -46,7 +47,6 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/modal/style/themes/dnb-modal-theme-ui.scss';
 @import '../../../components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss';
 @import '../../../components/radio/style/themes/dnb-radio-theme-ui.scss';
-@import '../../../components/skeleton/style/themes/dnb-skeleton-theme-ui.scss';
 @import '../../../components/slider/style/themes/dnb-slider-theme-ui.scss';
 @import '../../../components/space/style/themes/dnb-space-theme-ui.scss';
 @import '../../../components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss';

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

@@ -18,6 +18,10 @@
   --scrollbar-track-color: var(--color-black-8);
   --scrollbar-thumb-color: var(--color-sea-green);
   --scrollbar-thumb-hover-color: var(--color-emerald-green);
+
+  // Skeleton
+  --skeleton-color: var(--color-black-8);
+  --skeleton-color--contrast: var(--color-white);
 }
 
 // ::selection appearance helper