@dnb/eufemia 10.0.0-beta.6 → 10.0.0-beta.8

package/style/themes/theme-sbanken/sbanken-theme-basis.scss

@@ -13,6 +13,10 @@
 
 @import './sbanken-theme-elements.scss';
 
+:root {
+  --theme-color-body: var(--sb-color-text);
+}
+
 // ::selection appearance helper
 .dnb-selection::selection,
 .dnb-selection ::selection,

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

@@ -640,16 +640,17 @@ button.dnb-anchor {
 }
 
 .dnb-anchor {
+  --anchor-underline-thickness: 0.0938rem;
   display: inline;
-  padding: 0.05575em 0.125em;
+  padding: 0.05575em 0;
   font-size: var(--font-size-basis);
   text-decoration: underline;
   -webkit-text-decoration-color: currentcolor;
           text-decoration-color: currentcolor;
-  text-decoration-thickness: 0.0938rem;
+  text-decoration-thickness: var(--anchor-underline-thickness);
   text-underline-offset: 0.25em;
   border-radius: 0;
-  transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out;
+  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out;
 }
 sup .dnb-anchor, sub .dnb-anchor {
   padding: 0 0.025em;
@@ -735,6 +736,10 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 
 .dnb-anchor--focus {
   outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25em;
 }
 .dnb-anchor--focus:not(:active) {
@@ -744,12 +749,6 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 .dnb-anchor--focus:not(:active), .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
   text-decoration: none;
 }
-html[data-whatinput=mouse] .dnb-anchor--focus {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
 
 .dnb-anchor--no-style {
   color: inherit;
@@ -1443,9 +1442,7 @@ label + .dnb-autocomplete[class*=__form-status] .dnb-autocomplete__shell {
 .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon {
   order: 1;
 }
-.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left > *,
-.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top > *,
-.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
+.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text, .dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text {
   order: 2;
 }
 .dnb-button--stretch {
@@ -2286,12 +2283,12 @@ html[data-whatinput=keyboard] .dnb-date-picker table.dnb-no-focus:focus {
 .dnb-dialog__actions {
   padding-top: 1.5rem;
   display: flex;
+  flex-flow: row wrap;
   justify-content: center;
+  grid-gap: 1rem;
+  gap: 1rem;
   width: 100%;
 }
-.dnb-dialog__actions > :not(:last-child) {
-  margin-right: 1rem;
-}
 .dnb-dialog--information .dnb-dialog__actions {
   justify-content: left;
 }
@@ -3410,8 +3407,9 @@ button .dnb-form-status__text {
   width: 1em;
   height: 1em;
 }
-.dnb-icon img,
-.dnb-icon svg {
+.dnb-icon img, .dnb-core-style .dnb-icon img,
+.dnb-icon svg,
+.dnb-core-style .dnb-icon svg {
   width: inherit;
   height: inherit;
   shape-rendering: geometricprecision;
@@ -3459,9 +3457,12 @@ button .dnb-form-status__text {
   align-items: center;
   justify-content: center;
 }
-h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-icon {
+h1 > .dnb-icon, h2 > .dnb-icon, h3 > .dnb-icon, h4 > .dnb-icon, h5 > .dnb-icon, h6 > .dnb-icon {
   vertical-align: middle;
 }
+p > .dnb-icon {
+  vertical-align: inherit;
+}
 .dnb-icon.dnb-skeleton {
   color: var(--skeleton-color) !important;
 }
@@ -7566,26 +7567,29 @@ html[data-visual-test] .dnb-tooltip--hide {
  * Utilities
  */
 .dnb-visually-hidden--focusable:not(:focus):not(:focus-within) {
-  -webkit-user-select: none;
-          user-select: none;
-  -webkit-touch-callout: none;
-  pointer-events: none;
-  position: absolute;
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
-  max-width: 1px;
-  max-height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-  padding: 0;
-  margin: 0;
-  border: 0;
+  -webkit-user-select: none !important;
+          user-select: none !important;
+  -webkit-touch-callout: none !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  -webkit-clip-path: inset(50%) !important;
+          clip-path: inset(50%) !important;
+  max-width: 1px !important;
+  max-height: 1px !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
 }
 
 /**
  * NB: The content below is auto generated by the "themeFactory".
  * You may want to update it by running "yarn build" locally.
  */
+/*
+ * Utilities
+ */
 /*
  * Anchor mixins
  *
@@ -7594,14 +7598,17 @@ html[data-visual-test] .dnb-tooltip--hide {
  * Utilities
  */
 .dnb-anchor {
+  --anchor-underline-thickness: 0.125rem;
   font-weight: var(--sb-font-weight-bold);
   color: var(--sb-color-gray-dark-3);
   -webkit-text-decoration-color: var(--sb-color-green-dark);
           text-decoration-color: var(--sb-color-green-dark);
+  padding: calc((var(--line-height-basis) - 1.2em) / 2) 0.25em;
 }
 .dnb-anchor:hover {
   color: var(--sb-color-text);
   background-color: var(--sb-color-green-dark);
+  transition: none;
   border-radius: 0.5rem;
 }
 .dnb-anchor:active {
@@ -7609,15 +7616,58 @@ html[data-visual-test] .dnb-tooltip--hide {
   background-color: var(--sb-color-green);
   border-radius: 0.5rem;
 }
-.dnb-anchor:focus:not(:active) {
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active) {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left {
+  margin-left: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right {
+  margin-right: 0;
+}
+html[data-whatinput=keyboard] .dnb-anchor:focus:not(:active).dnb-anchor--icon-right .dnb-icon {
+  margin-right: 0;
+}
+.dnb-anchor.dnb-anchor--icon-left {
+  padding-left: 0;
+  margin-left: 1.125em;
+}
+.dnb-anchor.dnb-anchor--icon-left .dnb-icon {
+  font-size: 1em;
+  margin-right: 0.125em;
+  margin-left: -1.125em;
+}
+.dnb-anchor.dnb-anchor--icon-right {
+  padding-right: 0;
+  margin-right: 1.125em;
+}
+.dnb-anchor.dnb-anchor--icon-right .dnb-icon {
+  font-size: 1em;
+  margin-left: 0.125em;
+  margin-right: -1.125em;
+}
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left) {
+  padding-left: 0;
+}
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left)::before {
+  content: " ";
+}
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]) {
+  padding-right: 0;
+}
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank])::after {
+  content: " ";
+}
 
 .dnb-anchor--hover {
   color: var(--sb-color-text);
   background-color: var(--sb-color-green-dark);
+  transition: none;
   border-radius: 0.5rem;
 }
 
@@ -7632,6 +7682,18 @@ html[data-visual-test] .dnb-tooltip--hide {
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-left {
+  margin-left: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-right {
+  margin-right: 0;
+}
+.dnb-anchor--focus:not(:active).dnb-anchor--icon-right .dnb-icon {
+  margin-right: 0;
+}
 
 .dnb-anchor--contrast {
   color: var(--color-white);
@@ -7675,6 +7737,9 @@ html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus {
 * Button mixins
 *
 */
+.dnb-button--tertiary {
+  --button-tertiary-focus-overflow: -1rem;
+}
 .dnb-button--tertiary .dnb-button__text {
   position: relative;
 }
@@ -7753,17 +7818,23 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
 html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text::after {
   visibility: hidden;
 }
-.dnb-button--tertiary .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
   align-self: flex-start;
   margin-top: calc(var(--button-height) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium {
+  margin-top: calc(var(--button-height) / 2 - 0.75rem);
+}
+.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large {
+  margin-top: calc(var(--button-height) / 2 - 1rem);
+}
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon {
   margin-top: calc(var(--button-height--large) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon {
   margin-top: calc(var(--button-height--medium) / 2 - 0.5rem);
 }
-.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon {
   margin-top: calc(var(--button-height--small) / 2 - 0.5rem);
 }
 .dnb-button--tertiary.dnb-button--icon-position-top {
@@ -7774,7 +7845,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
 .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text {
   padding: 0;
 }
-.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon {
+.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon {
   margin-top: 0.5rem;
   align-self: center;
 }
@@ -7816,7 +7887,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   cursor: not-allowed;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled])::before {
-  right: -1rem;
+  right: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right {
   /* stylelint-disable */
@@ -7843,7 +7914,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
   cursor: not-allowed;
 }
 .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled])::before {
-  left: -1rem;
+  left: var(--button-tertiary-focus-overflow);
 }
 .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled] {
   cursor: not-allowed;
@@ -7980,6 +8051,7 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-but
   border-color: transparent;
 }
 .dnb-button--tertiary {
+  --button-tertiary-focus-overflow: 0;
   color: var(--sb-color-violet);
   background-color: transparent;
 }
@@ -8051,6 +8123,27 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-but
   left: -1.5rem;
   right: -1.5rem;
 }
+.dnb-button--tertiary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled] {
+  cursor: not-allowed;
+}
+.dnb-button--tertiary:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: inherit;
+  border-radius: inherit;
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled])::before, html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled])::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
 html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
   cursor: not-allowed;
 }