@dnb/eufemia 10.7.0 → 10.9.0

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/radio/Radio.d.ts

@@ -83,6 +83,10 @@ export interface RadioProps
    */
   on_change?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
+  /**
+   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
+   */
+  innerRef?: React.Ref;
 }
 export default class Radio extends React.Component<RadioProps, any> {
   static defaultProps: object;

package/cjs/components/radio/Radio.js

@@ -20,7 +20,7 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
 var _FormRowHelpers = require("../form-row/FormRowHelpers");
 var _AlignmentHelper, _span, _span2;
-const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "element", "label", "label_sr_only", "label_position", "size", "readOnly", "skeleton", "className", "class", "id", "group", "value", "checked", "disabled", "children", "on_change", "on_state_update"];
+const _excluded = ["status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "element", "label", "label_sr_only", "label_position", "size", "readOnly", "skeleton", "className", "class", "id", "group", "value", "checked", "disabled", "children", "on_change", "on_state_update", "innerRef"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -165,7 +165,7 @@ class Radio extends _react.default.PureComponent {
         this._refInput.current.focus();
       }
     });
-    this._refInput = _react.default.createRef();
+    this._refInput = props.innerRef || _react.default.createRef();
     this._id = props.id || (0, _componentHelper.makeUniqueId)();
     this.state = {
       _listenForPropChanges: true
@@ -200,7 +200,8 @@ class Radio extends _react.default.PureComponent {
           disabled: _disabled,
           children,
           on_change,
-          on_state_update
+          on_state_update,
+          innerRef
         } = props,
         rest = _objectWithoutProperties(props, _excluded);
       let {
@@ -356,7 +357,8 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes = _objectSpread(_objectS
   value: _propTypes.default.string,
   attributes: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
   skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  readOnly: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
+  readOnly: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  innerRef: _propTypes.default.object
 }, _SpacingHelper.spacingPropTypes), {}, {
   class: _propTypes.default.string,
   className: _propTypes.default.string,