@dnb/eufemia 10.8.0 → 10.9.0

package/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

package/components/skeleton/style/themes/dnb-skeleton-theme-sbanken.css

@@ -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
+ *
+ */

package/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
+ *
+ */

package/components/skeleton/style/themes/dnb-skeleton-theme-ui.css

@@ -1,62 +1,7 @@
 /*
- * Skeleton Theme
+ * No theme is provided
  *
- */
-:root {
-  --skeleton-color: var(--color-black-8);
-  --skeleton-color--contrast: var(--color-white);
-}
-
-.dnb-skeleton {
-  --skeleton-delay: 5s;
-}
-.dnb-skeleton img,
-.dnb-skeleton video {
-  filter: brightness(0%) contrast(0%) opacity(0.5);
-}
-.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--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-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);
-}
-
-@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;
-  }
-}
+ * Theming variables for the Skeleton component is required globally
+ * and is thus defined in src/style/themes/theme-ui/ui-theme-basis.scss
+ *
+ */

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

@@ -1 +0,0 @@
-:root{--skeleton-color:var(--color-black-8);--skeleton-color--contrast:var(--color-white)}.dnb-skeleton{--skeleton-delay:5s}.dnb-skeleton img,.dnb-skeleton video{filter:brightness(0) contrast(0) opacity(.5)}.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--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{--border-color:var(--skeleton-color);animation:skeletonFontAnimation 5s linear infinite var(--skeleton-delay);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}@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}}

package/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;
-  }
-}

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

@@ -6,6 +6,10 @@
  * Utilities
  */
 .dnb-tooltip {
+  --tooltip-color: white;
+  --tooltip-background-color: black;
+  --tooltip-border-color: 1px solid black;
+  --tooltip-border-radius: 1rem;
   position: absolute;
   z-index: 3100;
   display: flex;
@@ -13,6 +17,10 @@
   justify-content: center;
   align-items: center;
   padding: 0 1rem;
+  color: var(--tooltip-color);
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  box-shadow: var(--shadow-default);
   opacity: 0;
   visibility: hidden;
   transition: opacity 200ms var(--easing-default);
@@ -70,6 +78,8 @@ html[data-visual-test] .dnb-tooltip--hide {
   left: 0;
   width: 1rem;
   height: 1rem;
+  background-color: var(--tooltip-background-color);
+  border: var(--tooltip-border-color);
   transform: translateY(70%) rotate(45deg);
 }
 .dnb-tooltip__arrow__position--bottom {

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

@@ -1 +1 @@
-.dnb-tooltip{align-items:center;display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}
+.dnb-tooltip{--tooltip-color:#fff;--tooltip-background-color:#000;--tooltip-border-color:1px solid #000;--tooltip-border-radius:1rem;align-items:center;background-color:var(--tooltip-background-color);border-radius:var(--tooltip-border-radius);box-shadow:var(--shadow-default);color:var(--tooltip-color);display:flex;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;transition:opacity .2s var(--easing-default);visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--active{animation:show-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{animation:show-tooltip 1ms var(--easing-default) forwards}.dnb-tooltip--hide{animation:hide-tooltip .2s var(--easing-default) forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{animation:hide-tooltip 1ms linear forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{animation:hide-tooltip 1ms linear 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{background-color:var(--tooltip-background-color);border:var(--tooltip-border-color);bottom:0;content:"";height:1rem;left:0;position:absolute;transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{align-self:flex-start}.dnb-tooltip__arrow__arrow--right{align-self:flex-end}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}

package/components/tooltip/style/dnb-tooltip.scss

@@ -6,6 +6,11 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-tooltip {
+  --tooltip-color: white;
+  --tooltip-background-color: black;
+  --tooltip-border-color: 1px solid black;
+  --tooltip-border-radius: 1rem;
+
   position: absolute;
   z-index: 3100; // over modal
 
@@ -15,6 +20,11 @@
   align-items: center;
 
   padding: 0 1rem;
+  color: var(--tooltip-color);
+
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  @include defaultDropShadow();
 
   &--large {
     padding: 0.25rem 1rem;
@@ -89,6 +99,10 @@
 
       width: 1rem;
       height: 1rem;
+      background-color: var(--tooltip-background-color);
+
+      border: var(--tooltip-border-color);
+
       transform: translateY(70%) rotate(45deg);
     }
 

package/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.css

@@ -0,0 +1,9 @@
+/*
+* Tooltip theme for Sbanken
+*
+*/
+.dnb-tooltip {
+  --tooltip-color: var(--sb-color-white);
+  --tooltip-background-color: var(--sb-color-gray-dark-3);
+  --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3);
+}

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

@@ -0,0 +1 @@
+.dnb-tooltip{--tooltip-color:var(--sb-color-white);--tooltip-background-color:var(--sb-color-gray-dark-3);--tooltip-border-color:1px solid var(--sb-color-gray-dark-3)}

package/components/tooltip/style/themes/dnb-tooltip-theme-sbanken.scss

@@ -0,0 +1,10 @@
+/*
+* Tooltip theme for Sbanken
+*
+*/
+
+.dnb-tooltip {
+  --tooltip-color: var(--sb-color-white);
+  --tooltip-background-color: var(--sb-color-gray-dark-3);
+  --tooltip-border-color: 1px solid var(--sb-color-gray-dark-3);
+}

package/components/tooltip/style/themes/dnb-tooltip-theme-ui.css

@@ -2,16 +2,8 @@
 * Tooltip theme
 *
 */
-/*
- * Utilities
- */
 .dnb-tooltip {
-  border-radius: 1rem;
-  color: var(--color-white);
-  background-color: var(--color-black-80);
-  box-shadow: var(--shadow-default);
-}
-.dnb-tooltip__arrow::before {
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: var(--color-black-80);
+  --tooltip-color: var(--color-white);
+  --tooltip-background-color: var(--color-black-80);
+  --tooltip-border-color: 1px solid rgb(0 0 0 / 10%);
 }

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

@@ -1 +1 @@
-.dnb-tooltip{background-color:var(--color-black-80);border-radius:1rem;box-shadow:var(--shadow-default);color:var(--color-white)}.dnb-tooltip__arrow:before{background-color:var(--color-black-80);border:1px solid rgba(0,0,0,.1)}
+.dnb-tooltip{--tooltip-color:var(--color-white);--tooltip-background-color:var(--color-black-80);--tooltip-border-color:1px solid rgba(0,0,0,.1)}

package/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss

@@ -3,20 +3,8 @@
 *
 */
 
-@import '../../../../style/core/utilities.scss';
-
 .dnb-tooltip {
-  border-radius: 1rem;
-
-  color: var(--color-white);
-  background-color: var(--color-black-80);
-
-  @include defaultDropShadow();
-
-  &__arrow {
-    &::before {
-      border: 1px solid rgb(0 0 0 / 10%);
-      background-color: var(--color-black-80);
-    }
-  }
+  --tooltip-color: var(--color-white);
+  --tooltip-background-color: var(--color-black-80);
+  --tooltip-border-color: 1px solid rgb(0 0 0 / 10%);
 }

package/elements/blockquote/style/blockquote-mixins.scss

@@ -1,6 +1,17 @@
 @use '../../../style/elements/ui-spacing.scss';
 
 @mixin blockquoteStyle() {
+  --blockquote-padding-top: 2rem;
+  --blockquote-padding-left: 1.5rem;
+  --blockquote-padding-bottom: 3rem;
+
+  // quote
+  --blockquote-quote-size: 3rem;
+  --blockquote-quote-padding: 6rem;
+
+  // font
+  --blockquote-cite-style: italic;
+
   display: inline-block;
   width: auto;
 
@@ -19,10 +30,10 @@
   &::before {
     content: '';
     position: absolute;
-    top: 2rem;
-    left: 1.5rem;
-    width: 3em;
-    height: 3em;
+    top: var(--blockquote-padding-top);
+    left: var(--blockquote-padding-left);
+    width: var(--blockquote-quote-size);
+    height: var(--blockquote-quote-size);
 
     background-size: cover;
 
@@ -33,15 +44,15 @@
   // stylelint-disable-next-line
   &,
   &.dnb-blockquote--left {
-    padding-left: 6rem;
-    padding-top: 2rem;
-    padding-bottom: 3rem;
+    padding-left: var(--blockquote-quote-padding);
+    padding-top: var(--blockquote-padding-top);
+    padding-bottom: var(--blockquote-padding-bottom);
   }
 
   &.dnb-blockquote--top {
-    padding-left: 1.5rem;
-    padding-top: 6rem;
-    padding-bottom: 3rem;
+    padding-left: var(--blockquote-padding-left);
+    padding-top: var(--blockquote-quote-padding);
+    padding-bottom: var(--blockquote-padding-bottom);
   }
 
   &.dnb-blockquote--no-background {
@@ -59,7 +70,7 @@
 
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-basis);
-    font-style: italic; // to have / or avoid italic on cite
+    font-style: var(--blockquote-cite-style);
 
     &::before {
       content: '—';

package/elements/blockquote/style/themes/dnb-blockquote-theme-sbanken.scss

@@ -1,9 +1,28 @@
+@use '../../../../style/core/utilities.scss';
+
 .dnb-blockquote {
-  color: var(--sb-color-text);
+  --blockquote-padding-top: 1.5rem;
+  --blockquote-quote-padding: 5.5rem;
+  --blockquote-cite-style: normal;
+
   background-color: var(--sb-color-violet-light-4);
 
   border-radius: 1.125rem;
 
+  @include utilities.allBelow('small') {
+    --blockquote-padding-bottom: 1.5rem;
+    --blockquote-quote-size: 2rem;
+    --blockquote-quote-padding: 4rem;
+
+    &.dnb-blockquote--top {
+      --blockquote-padding-top: 1rem;
+    }
+
+    &:not(.dnb-blockquote--top) {
+      --blockquote-padding-left: 1rem;
+    }
+  }
+
   &::before {
     filter: brightness(0) saturate(100%) invert(20%) sepia(99%)
       saturate(6711%) hue-rotate(265deg) brightness(71%) contrast(115%); // simulate the color #4e08bc - --sb-color-violet
@@ -16,14 +35,4 @@
         saturate(6079%) hue-rotate(204deg) brightness(78%) contrast(99%);
     }
   }
-
-  h1,
-  h2,
-  h3,
-  .dnb-h--xx-large,
-  .dnb-h--large,
-  .dnb-h--medium,
-  .dnb-lead {
-    color: var(--sb-color-text);
-  }
 }

package/elements/typography/style/themes/dnb-typography-theme-sbanken.scss

@@ -14,6 +14,7 @@
 // Headings
 @include typography.headingClasses() {
   color: var(--sb-color-text);
+  font-variant-ligatures: none;
 }
 
 @include typography.typographySelectors() {

package/es/components/breadcrumb/BreadcrumbItem.js

@@ -82,7 +82,7 @@ const BreadcrumbItem = localProps => {
     icon: currentIcon,
     className: "dnb-breadcrumb__item__span__icon"
   }), React.createElement(P, {
-    left: "0"
+    space: "0"
   }, currentText)));
 };
 export default BreadcrumbItem;

package/es/components/breadcrumb/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","style","String","createElement","className","undefined","_extends","icon_position","on_click","left"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport interface BreadcrumbItemProps {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n}\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return homeIcon\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  if (theme?.name === 'sbanken') {\n    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)\n  }\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive = (href || onClick) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span className=\"dnb-breadcrumb__item__span\" {...props}>\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P left=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nexport default BreadcrumbItem\n"],"mappings":"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"}
+{"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","style","String","createElement","className","undefined","_extends","icon_position","on_click","space"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport interface BreadcrumbItemProps {\n  /**\n   * Text displaying the title of the item's corresponding page\n   * Default: If variant='home', default is \"Home\". Otherwise it is required.\n   */\n  text?: React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: HomeIcon / chevron_left\n   */\n  icon?: IconIcon\n\n  /**\n   * Href should be the link to the item's corresponding page.\n   * Default: null\n   */\n  href?: string\n\n  /**\n   * Set a custom click event. In this case, you should not define the prop href.\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n   * Default: null\n   */\n  variant?: 'home' | 'previous' | 'current'\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /** Internal */\n  itemNr?: number\n}\n\nconst defaultProps = {\n  text: null,\n  href: null,\n  icon: null,\n  onClick: null,\n  variant: null,\n  skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n  variant: string,\n  isSmallScreen: boolean\n) => {\n  switch (variant) {\n    case 'home':\n      return homeIcon\n    case 'single':\n    case 'collapse':\n      return 'chevron_left'\n    default:\n      return isSmallScreen ? 'chevron_left' : 'chevron_right'\n  }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const {\n    translation: {\n      Breadcrumb: { homeText },\n    },\n  } = context\n\n  // Extract additional props from global context\n  const {\n    text,\n    href,\n    icon,\n    onClick,\n    variant,\n    skeleton,\n    itemNr,\n    ...props\n  } = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.BreadcrumbItem\n  )\n\n  const theme = useTheme()\n  const isSmallScreen = useMediaQuery({\n    matchOnSSR: true,\n    when: { max: 'medium' },\n  })\n\n  let currentIcon =\n    icon || (variant === 'home' && homeIcon) || 'chevron_left'\n  if (theme?.name === 'sbanken') {\n    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen)\n  }\n  const currentText = text || (variant === 'home' && homeText) || ''\n  const isInteractive = (href || onClick) && variant !== 'current'\n  const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n  return (\n    <li\n      className=\"dnb-breadcrumb__item\"\n      aria-current={variant === 'current' ? 'page' : undefined}\n      style={style}\n    >\n      {isInteractive ? (\n        <Button\n          variant=\"tertiary\"\n          href={href}\n          icon={currentIcon}\n          icon_position=\"left\"\n          on_click={onClick}\n          text={currentText}\n          skeleton={skeleton}\n          {...props}\n        />\n      ) : (\n        <span className=\"dnb-breadcrumb__item__span\" {...props}>\n          <IconPrimary\n            icon={currentIcon}\n            className=\"dnb-breadcrumb__item__span__icon\"\n          />\n          <P space=\"0\">{currentText}</P>\n        </span>\n      )}\n    </li>\n  )\n}\n\nexport default BreadcrumbItem\n"],"mappings":"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"}