@dnb/eufemia 10.8.0 → 10.9.0

package/components/progress-indicator/style/dnb-progress-indicator.css

@@ -10,6 +10,10 @@
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-background-color: grey;
+  --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-background-color: grey;
+  --progress-indicator-linear-bar-color: var(--color-black);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -45,6 +49,10 @@
 }
 .dnb-progress-indicator__circular svg {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
@@ -77,12 +85,44 @@
   stroke-linecap: round;
 }
 .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
-  stroke: grey;
+  stroke: var(--progress-indicator-circular-background-color);
 }
 .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke: var(--color-black);
+  stroke: var(--progress-indicator-circular-bar-color);
+}
+.dnb-progress-indicator__circular--small {
+  width: 1rem;
+  height: 1rem;
+}
+.dnb-progress-indicator__circular--medium {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.dnb-progress-indicator__circular--large {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.dnb-progress-indicator__circular--huge {
+  width: 20rem;
+  height: 20rem;
+}
+.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.1;
+}
+.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.3;
+}
+.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.5;
+}
+.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.7;
+}
+.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.9;
 }
 .dnb-progress-indicator__linear {
+  background-color: var(--progress-indicator-linear-background-color);
   position: relative;
   overflow: hidden;
   width: 100%;
@@ -91,6 +131,7 @@
   border-radius: 0.25rem;
 }
 .dnb-progress-indicator__linear__bar {
+  background-color: var(--progress-indicator-linear-bar-color);
   width: 100%;
   position: absolute;
   left: 0;
@@ -110,6 +151,22 @@
   width: auto;
   animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
+.dnb-progress-indicator__linear--small {
+  height: 0.25rem;
+  border-radius: 0.125rem;
+}
+.dnb-progress-indicator__linear--medium {
+  height: 1rem;
+  border-radius: 0.5rem;
+}
+.dnb-progress-indicator__linear--large {
+  height: 1.5rem;
+  border-radius: 0.75rem;
+}
+.dnb-progress-indicator__linear--huge {
+  height: 2rem;
+  border-radius: 1rem;
+}
 html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation {
   left: -35%;
   right: 100%;

package/components/progress-indicator/style/dnb-progress-indicator.min.css

@@ -1 +1 @@
-.dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{margin:0 1rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{margin-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{height:100%;position:absolute;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:grey}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--color-black)}.dnb-progress-indicator__linear{border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}
+.dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{margin:0 1rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{margin-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color)}.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}

package/components/progress-indicator/style/dnb-progress-indicator.scss

@@ -10,6 +10,10 @@
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-background-color: grey;
+  --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-background-color: grey;
+  --progress-indicator-linear-bar-color: var(--color-black);
 
   position: relative;
   display: inline-flex;
@@ -60,6 +64,7 @@
 
     svg {
       position: absolute;
+      inset: 0;
       width: 100%;
       height: 100%;
     }
@@ -109,16 +114,58 @@
     }
 
     &__line.light &__circle {
-      stroke: grey;
+      stroke: var(--progress-indicator-circular-background-color);
     }
 
     &__line.dark &__circle {
-      stroke: var(--color-black);
+      stroke: var(--progress-indicator-circular-bar-color);
+    }
+
+    &--small {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &--medium {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &--large {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    &--huge {
+      width: 20rem;
+      height: 20rem;
+    }
+
+    // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
+    &--small &__line.dark &__circle {
+      stroke-width: 3.1;
+    }
+
+    &--medium &__line.dark &__circle {
+      stroke-width: 3.3;
+    }
+
+    &--default &__line.dark &__circle {
+      stroke-width: 3.5;
+    }
+
+    &--large &__line.dark &__circle {
+      stroke-width: 3.7;
+    }
+
+    &--huge &__line.dark &__circle {
+      stroke-width: 3.9;
     }
   }
 
   // linear variant
   &__linear {
+    background-color: var(--progress-indicator-linear-background-color);
     position: relative;
     overflow: hidden;
     width: 100%;
@@ -129,6 +176,7 @@
     border-radius: 0.25rem;
 
     &__bar {
+      background-color: var(--progress-indicator-linear-bar-color);
       width: 100%;
       position: absolute;
       left: 0;
@@ -154,6 +202,26 @@
         cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
     }
 
+    &--small {
+      height: 0.25rem;
+      border-radius: 0.125rem;
+    }
+
+    &--medium {
+      height: 1rem;
+      border-radius: 0.5rem;
+    }
+
+    &--large {
+      height: 1.5rem;
+      border-radius: 0.75rem;
+    }
+
+    &--huge {
+      height: 2rem;
+      border-radius: 1rem;
+    }
+
     html[data-visual-test] &__bar1-animation {
       left: -35%;
       right: 100%;

package/components/progress-indicator/style/themes/dnb-progress-indicator-theme-sbanken.css

@@ -0,0 +1,18 @@
+/*
+* ProgressIndicator theme for Sbanken
+*
+*/
+.dnb-progress-indicator {
+  --progress-indicator-circular-background-color: var(
+    --sb-color-gray-light-2
+  );
+  --progress-indicator-circular-bar-color: var(
+    --sb-color-purple-alternative
+  );
+  --progress-indicator-linear-background-color: var(
+    --sb-color-gray-light-2
+  );
+  --progress-indicator-linear-bar-color: var(
+    --sb-color-purple-alternative
+  );
+}

package/components/progress-indicator/style/themes/dnb-progress-indicator-theme-sbanken.min.css

@@ -0,0 +1,9 @@
+.dnb-progress-indicator{--progress-indicator-circular-background-color:var(
+    --sb-color-gray-light-2
+  );--progress-indicator-circular-bar-color:var(
+    --sb-color-purple-alternative
+  );--progress-indicator-linear-background-color:var(
+    --sb-color-gray-light-2
+  );--progress-indicator-linear-bar-color:var(
+    --sb-color-purple-alternative
+  )}

package/components/progress-indicator/style/themes/dnb-progress-indicator-theme-sbanken.scss

@@ -0,0 +1,19 @@
+/*
+* ProgressIndicator theme for Sbanken
+*
+*/
+
+.dnb-progress-indicator {
+  --progress-indicator-circular-background-color: var(
+    --sb-color-gray-light-2
+  );
+  --progress-indicator-circular-bar-color: var(
+    --sb-color-purple-alternative
+  );
+  --progress-indicator-linear-background-color: var(
+    --sb-color-gray-light-2
+  );
+  --progress-indicator-linear-bar-color: var(
+    --sb-color-purple-alternative
+  );
+}

package/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.css

@@ -2,68 +2,9 @@
 * ProgressIndicator theme
 *
 */
-/*
- * Utilities
- */
-.dnb-progress-indicator__circular--small {
-  width: 1rem;
-  height: 1rem;
-}
-.dnb-progress-indicator__circular--medium {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.dnb-progress-indicator__circular--large {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-.dnb-progress-indicator__circular--huge {
-  width: 20rem;
-  height: 20rem;
-}
-.dnb-progress-indicator__circular__line {
-  animation-duration: 2s;
-}
-.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
-  stroke: var(--color-mint-green);
-}
-.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke: var(--color-emerald-green);
-}
-.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.1;
-}
-.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.3;
-}
-.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.5;
-}
-.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.7;
-}
-.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.9;
-}
-.dnb-progress-indicator__linear {
-  background-color: var(--color-black-8);
-}
-.dnb-progress-indicator__linear--small {
-  height: 0.25rem;
-  border-radius: 0.125rem;
-}
-.dnb-progress-indicator__linear--medium {
-  height: 1rem;
-  border-radius: 0.5rem;
-}
-.dnb-progress-indicator__linear--large {
-  height: 1.5rem;
-  border-radius: 0.75rem;
-}
-.dnb-progress-indicator__linear--huge {
-  height: 2rem;
-  border-radius: 1rem;
-}
-.dnb-progress-indicator__linear__bar {
-  background-color: var(--color-sea-green);
+.dnb-progress-indicator {
+  --progress-indicator-circular-background-color: var(--color-mint-green);
+  --progress-indicator-circular-bar-color: var(--color-emerald-green);
+  --progress-indicator-linear-background-color: var(--color-black-8);
+  --progress-indicator-linear-bar-color: var(--color-sea-green);
 }

package/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.min.css

@@ -1 +1 @@
-.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular__line{animation-duration:2s}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--color-mint-green)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--color-emerald-green)}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--color-black-8)}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}.dnb-progress-indicator__linear__bar{background-color:var(--color-sea-green)}
+.dnb-progress-indicator{--progress-indicator-circular-background-color:var(--color-mint-green);--progress-indicator-circular-bar-color:var(--color-emerald-green);--progress-indicator-linear-background-color:var(--color-black-8);--progress-indicator-linear-bar-color:var(--color-sea-green)}

package/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss

@@ -3,8 +3,6 @@
 *
 */
 
-@import '../../../../style/core/utilities.scss';
-
 .dnb-progress-indicator {
   // to get a reverse #v3 - use the following setup, strokeDashoffset has also to be:
   // const strokeDashoffset = -((maxOffset / 100) * progress-indicator)
@@ -12,88 +10,8 @@
   // --progress-indicator-circular-circle-offset--min: -1;
   // --progress-indicator-circular-circle-offset--max: -88;
 
-  // circular variant
-  &__circular {
-    &--small {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    &--medium {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    &--large {
-      width: 3.5rem;
-      height: 3.5rem;
-    }
-
-    &--huge {
-      width: 20rem;
-      height: 20rem;
-    }
-
-    &__line {
-      animation-duration: 2s;
-    }
-
-    &__line.light &__circle {
-      stroke: var(--color-mint-green);
-    }
-
-    &__line.dark &__circle {
-      stroke: var(--color-emerald-green);
-    }
-
-    // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
-    &--small &__line.dark &__circle {
-      stroke-width: 3.1;
-    }
-
-    &--medium &__line.dark &__circle {
-      stroke-width: 3.3;
-    }
-
-    &--default &__line.dark &__circle {
-      stroke-width: 3.5;
-    }
-
-    &--large &__line.dark &__circle {
-      stroke-width: 3.7;
-    }
-
-    &--huge &__line.dark &__circle {
-      stroke-width: 3.9;
-    }
-  }
-
-  // linear variant
-  &__linear {
-    background-color: var(--color-black-8);
-
-    &--small {
-      height: 0.25rem;
-      border-radius: 0.125rem;
-    }
-
-    &--medium {
-      height: 1rem;
-      border-radius: 0.5rem;
-    }
-
-    &--large {
-      height: 1.5rem;
-      border-radius: 0.75rem;
-    }
-
-    &--huge {
-      height: 2rem;
-      border-radius: 1rem;
-    }
-
-    &__bar {
-      background-color: var(--color-sea-green);
-    }
-  }
+  --progress-indicator-circular-background-color: var(--color-mint-green);
+  --progress-indicator-circular-bar-color: var(--color-emerald-green);
+  --progress-indicator-linear-background-color: var(--color-black-8);
+  --progress-indicator-linear-bar-color: var(--color-sea-green);
 }

package/components/section/Section.js

@@ -25,7 +25,7 @@ export default function Section(localProps) {
     } = props,
     attributes = _objectWithoutProperties(props, _excluded);
   const params = _objectSpread({
-    className: classnames(`dnb-section dnb-section--${variant ?? (style_type || 'default')}`, createSpacingClasses(props), className, spacing && `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`)
+    className: classnames(`dnb-section dnb-section--${variant ? variant : style_type || 'default'}`, createSpacingClasses(props), className, spacing && `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`)
   }, attributes);
   const internalRef = React.useRef();
   const elementRef = inner_ref || internalRef;

package/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","validateDOMAttributes","extendPropsWithContext","createSpacingClasses","defaultProps","element","Section","localProps","context","useContext","props","variant","style_type","spacing","inner_ref","className","children","attributes","_objectWithoutProperties","_excluded","params","_objectSpread","internalRef","useRef","elementRef","Element","createElement"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.\n   */\n  style_type?: SectionStyleTypes | string\n\n  /**\n   * Will add spacing around the given content. If `true`, then `large` is used. See the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). Defaults to `false`.\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  inner_ref?: React.RefObject<HTMLElement>\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    style_type,\n    spacing,\n    inner_ref,\n\n    className,\n    children,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ?? (style_type || 'default')}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      createSpacingClasses(props),\n      className\n    ),\n    ...(attributes as Record<string, unknown>),\n  }\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = inner_ref || internalRef\n  params['ref'] = elementRef\n\n  validateDOMAttributes(props, params)\n\n  const Element = element || 'section'\n\n  return <Element {...params}>{children}</Element>\n}\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SACEC,MAAM,EACNC,qBAAqB,EACrBC,sBAAsB,QACjB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAsE7D,MAAMC,YAAY,GAAG;EACnBC,OAAO,EAAE;AACX,CAAC;AAED,eAAe,SAASC,OAAOA,CAACC,UAA2B,EAAE;EAC3D,MAAMC,OAAO,GAAGX,KAAK,CAACY,UAAU,CAACV,OAAO,CAAC;EAGzC,MAAMW,KAAK,GAAGR,sBAAsB,CAClCK,UAAU,EACVH,YAAY,EACZI,OAAO,CAACF,OACV,CAAC;EAED,MAAM;MACJD,OAAO;MACPM,OAAO;MACPC,UAAU;MACVC,OAAO;MACPC,SAAS;MAETC,SAAS;MACTC;IAGF,CAAC,GAAGN,KAAK;IADJO,UAAU,GAAAC,wBAAA,CACXR,KAAK,EAAAS,SAAA;EAET,MAAMC,MAAM,GAAAC,aAAA;IACVN,SAAS,EAAEjB,UAAU,6BAEHa,OAAO,KAAKC,UAAU,IAAI,SAAS,CAAE,IAGrDT,oBAAoB,CAACO,KAAK,CAAC,EAC3BK,SAAS,EAHTF,OAAO,IACJ,wBAAuBb,MAAM,CAACa,OAAO,CAAC,GAAG,OAAO,GAAGA,OAAQ,EAGhE;EAAC,GACGI,UAAU,CACf;EAED,MAAMK,WAAW,GAAGzB,KAAK,CAAC0B,MAAM,CAAc,CAAC;EAC/C,MAAMC,UAAU,GAAGV,SAAS,IAAIQ,WAAW;EAC3CF,MAAM,CAAC,KAAK,CAAC,GAAGI,UAAU;EAE1BvB,qBAAqB,CAACS,KAAK,EAAEU,MAAM,CAAC;EAEpC,MAAMK,OAAO,GAAGpB,OAAO,IAAI,SAAS;EAEpC,OAAOR,KAAA,CAAA6B,aAAA,CAACD,OAAO,EAAKL,MAAM,EAAGJ,QAAkB,CAAC;AAClD"}
+{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","validateDOMAttributes","extendPropsWithContext","createSpacingClasses","defaultProps","element","Section","localProps","context","useContext","props","variant","style_type","spacing","inner_ref","className","children","attributes","_objectWithoutProperties","_excluded","params","_objectSpread","internalRef","useRef","elementRef","Element","createElement"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  validateDOMAttributes,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.\n   */\n  style_type?: SectionStyleTypes | string\n\n  /**\n   * Will add spacing around the given content. If `true`, then `large` is used. See the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). Defaults to `false`.\n   */\n  spacing?: SectionSpacing\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  inner_ref?: React.RefObject<HTMLElement>\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    element,\n    variant,\n    style_type,\n    spacing,\n    inner_ref,\n\n    className,\n    children,\n\n    ...attributes\n  } = props\n\n  const params = {\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      createSpacingClasses(props),\n      className\n    ),\n    ...(attributes as Record<string, unknown>),\n  }\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = inner_ref || internalRef\n  params['ref'] = elementRef\n\n  validateDOMAttributes(props, params)\n\n  const Element = element || 'section'\n\n  return <Element {...params}>{children}</Element>\n}\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SACEC,MAAM,EACNC,qBAAqB,EACrBC,sBAAsB,QACjB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAsE7D,MAAMC,YAAY,GAAG;EACnBC,OAAO,EAAE;AACX,CAAC;AAED,eAAe,SAASC,OAAOA,CAACC,UAA2B,EAAE;EAC3D,MAAMC,OAAO,GAAGX,KAAK,CAACY,UAAU,CAACV,OAAO,CAAC;EAGzC,MAAMW,KAAK,GAAGR,sBAAsB,CAClCK,UAAU,EACVH,YAAY,EACZI,OAAO,CAACF,OACV,CAAC;EAED,MAAM;MACJD,OAAO;MACPM,OAAO;MACPC,UAAU;MACVC,OAAO;MACPC,SAAS;MAETC,SAAS;MACTC;IAGF,CAAC,GAAGN,KAAK;IADJO,UAAU,GAAAC,wBAAA,CACXR,KAAK,EAAAS,SAAA;EAET,MAAMC,MAAM,GAAAC,aAAA;IACVN,SAAS,EAAEjB,UAAU,6BAEHa,OAAO,GAAGA,OAAO,GAAGC,UAAU,IAAI,SAAU,IAG5DT,oBAAoB,CAACO,KAAK,CAAC,EAC3BK,SAAS,EAHTF,OAAO,IACJ,wBAAuBb,MAAM,CAACa,OAAO,CAAC,GAAG,OAAO,GAAGA,OAAQ,EAGhE;EAAC,GACGI,UAAU,CACf;EAED,MAAMK,WAAW,GAAGzB,KAAK,CAAC0B,MAAM,CAAc,CAAC;EAC/C,MAAMC,UAAU,GAAGV,SAAS,IAAIQ,WAAW;EAC3CF,MAAM,CAAC,KAAK,CAAC,GAAGI,UAAU;EAE1BvB,qBAAqB,CAACS,KAAK,EAAEU,MAAM,CAAC;EAEpC,MAAMK,OAAO,GAAGpB,OAAO,IAAI,SAAS;EAEpC,OAAOR,KAAA,CAAA6B,aAAA,CAACD,OAAO,EAAKL,MAAM,EAAGJ,QAAkB,CAAC;AAClD"}

package/components/skeleton/style/dnb-skeleton.css

@@ -7,6 +7,13 @@
 /*
  * 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;
 }
@@ -40,6 +47,18 @@
   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, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
+  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
+  background-repeat: repeat !important;
+  background-size: 100% !important;
+  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+          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,
@@ -57,6 +76,9 @@
   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;
@@ -64,6 +86,12 @@
   -webkit-text-fill-color: transparent !important;
   -webkit-background-clip: text !important;
           background-clip: text !important;
+  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !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;
@@ -89,6 +117,28 @@ html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton
   animation: none !important;
 }
 
+@keyframes skeletonLinearAnimation {
+  0% {
+    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  }
+  50% {
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+  100% {
+    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 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");

package/components/skeleton/style/dnb-skeleton.min.css

@@ -1 +1 @@
-.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--code code,.dnb-skeleton--code code *,.dnb-skeleton--code pre,.dnb-skeleton--code pre *,.dnb-skeleton--font code,.dnb-skeleton--font code *,.dnb-skeleton--font pre,.dnb-skeleton--font pre *{--font-family-monospace:"DNBMonoSkeleton"!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;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")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}
+.dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.dnb-skeleton--block{display:block}.dnb-skeleton--overflow{overflow:hidden}.dnb-skeleton--grey{filter:grayscale(100%)}.dnb-skeleton--shape{background:transparent;box-shadow:none!important;color:transparent;overflow-x:hidden;pointer-events:none;position:relative}.dnb-skeleton--shape.dnb-skeleton:after,.dnb-skeleton--shape.dnb-skeleton:before{background:none!important;border-radius:inherit;bottom:0!important;box-shadow:none!important;content:""!important;height:auto!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;right:0!important;top:0!important;width:100%!important;z-index:100!important}.dnb-skeleton--shape.dnb-skeleton:before{background-color:var(--skeleton-color)!important}.dnb-skeleton--shape.dnb-skeleton:after{animation:skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px,var(--skeleton-color--contrast) 2px,transparent 0,transparent 6px)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-repeat:repeat!important;background-size:100%!important;-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}.dnb-skeleton--code code,.dnb-skeleton--code code *,.dnb-skeleton--code pre,.dnb-skeleton--code pre *,.dnb-skeleton--font code,.dnb-skeleton--font code *,.dnb-skeleton--font pre,.dnb-skeleton--font pre *{--font-family-monospace:"DNBMonoSkeleton"!important;font-family:var(--font-family-monospace)!important;font-style:unset!important}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font,.dnb-skeleton--font-only{--font-family-default:"DNBSkeleton"!important;font-family:var(--font-family-default)!important;font-style:unset!important;pointer-events:none}.dnb-skeleton--font .dnb-p::marker,.dnb-skeleton--font .dnb-skeleton--show-font::marker,.dnb-skeleton--font-only::marker,.dnb-skeleton--font::marker{color:var(--skeleton-color)}.dnb-skeleton--font,.dnb-skeleton--font .dnb-p,.dnb-skeleton--font .dnb-skeleton--show-font{-webkit-text-fill-color:transparent!important;--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);-webkit-background-clip:text!important;background-clip:text!important;background-color:var(--skeleton-color)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px,var(--skeleton-color--contrast) 2px,transparent 0,transparent 6px)!important;background-image:repeating-linear-gradient(-45deg,var(--skeleton-color--contrast) 1px 2px,transparent 0 6px)!important;background-position-x:30rem;background-position-y:50%!important;background-repeat:no-repeat!important;background-size:30rem 100%!important}html[data-visual-test] .dnb-skeleton--font,html[data-visual-test] .dnb-skeleton--font .dnb-p,html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font{animation:none!important}.dnb-skeleton__figure{border-radius:.25rem;position:relative}.dnb-skeleton__figure--circle{border-radius:50%;height:4rem;width:4rem}.dnb-skeleton__figure--product{align-items:center;display:flex}.dnb-skeleton__figure--product .dnb-skeleton__figure--circle+div{margin-left:1rem;width:50%}.dnb-skeleton--no-animation * .dnb-skeleton:after,.dnb-skeleton--no-animation .dnb-skeleton,.dnb-skeleton--no-animation .dnb-skeleton:after{animation:none!important}@keyframes skeletonLinearAnimation{0%{-webkit-clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{-webkit-clip-path:polygon(0 0,0 0,0 100%,0 100%);clip-path:polygon(0 0,0 0,0 100%,0 100%)}}@keyframes skeletonFontAnimation{0%{background-position-x:30rem}to{background-position-x:-30rem}}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:400;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")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:500;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Medium.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBSkeleton;font-style:normal;font-weight:600;src:url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNB-Skeleton-Bold.ttf) format("truetype")}@font-face{font-display:fallback;font-family:DNBMonoSkeleton;font-style:normal;font-weight:400;src:url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff2) format("woff2"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.woff) format("woff"),url(../../assets/fonts/dnb/skeleton/DNBMono-Skeleton-Regular.ttf) format("truetype")}