npm - @dnb/eufemia - Versions diffs - 10.4.1 → 10.5.0 - Mend

@dnb/eufemia 10.4.1 → 10.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (282) hide show

package/es/style/themes/theme-sbanken/sbanken-theme-basis.css CHANGED Viewed

@@ -1235,13 +1235,6 @@ sub {
  * NB: The content below is auto generated by the "themeFactory".
  * You may want to update it by running "yarn build" locally.
  */
-/*
- * Anchor mixins
- *
- */
-/*
- * Utilities
- */
 .dnb-blockquote {
   color: var(--sb-color-text);
   background-color: var(--sb-color-violet-light-4);

package/es/style/themes/theme-sbanken/sbanken-theme-components.css CHANGED Viewed

@@ -647,27 +647,36 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-p .dnb-anchor, .dnb-lead .dnb-anchor, .dnb-h--xx-large .dnb-anchor, .dnb-h--x-large .dnb-anchor, .dnb-h--large .dnb-anchor, .dnb-h--medium .dnb-anchor, .dnb-h--basis .dnb-anchor, .dnb-h--small .dnb-anchor, .dnb-h--x-small .dnb-anchor {
   font-size: inherit;
 }
-.dnb-anchor:focus {
+.dnb-anchor.focus-visible {
+  background-color: transparent;
+  transition: none;
   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) {
+.dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
-}
-.dnb-anchor:focus:not(:active), .dnb-section .dnb-anchor:focus:not(:active).dnb-anchor {
-  text-decoration: none;
-}
-html[data-whatinput=keyboard] .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-visible, .dnb-section .dnb-anchor.focus-visible.dnb-anchor {
+  text-decoration: none;
+}
+.dnb-anchor:focus-visible, .dnb-section .dnb-anchor:focus-visible.dnb-anchor {
+  text-decoration: none;
 }
-.dnb-anchor:hover, .dnb-anchor:active {
+.dnb-anchor:hover {
   border-radius: 0.25em;
 }
-.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
+.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor {
   text-decoration: none;
 }
 .dnb-anchor:active {
@@ -724,6 +733,8 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 }
 .dnb-anchor--focus {
+  background-color: transparent;
+  transition: none;
   outline: none;
   --border-color: var(--focus-ring-color);
   --border-width: var(--focus-ring-width);
@@ -731,11 +742,7 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   border-color: transparent;
   border-radius: 0.25em;
 }
-.dnb-anchor--focus:not(:active) {
-  background-color: transparent;
-  transition: none;
-}
-.dnb-anchor--focus:not(:active), .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
+.dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
   text-decoration: none;
 }
@@ -760,7 +767,11 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   background-color: transparent;
 }
-.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus {
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius.focus-visible {
+  border-radius: 0;
+}
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
@@ -4105,13 +4116,6 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 /*
  * Utilities
  */
-/*
- * Anchor mixins
- *
- */
-/*
- * Utilities
- */
 .dnb-number-format {
   display: inline-block;
   position: relative;
@@ -7561,9 +7565,6 @@ html[data-visual-test] .dnb-tooltip--hide {
  * NB: The content below is auto generated by the "themeFactory".
  * You may want to update it by running "yarn build" locally.
  */
-/*
- * Utilities
- */
 /*
  * Anchor mixins
  *
@@ -7590,24 +7591,38 @@ html[data-visual-test] .dnb-tooltip--hide {
   background-color: var(--sb-color-green);
   border-radius: 0.5rem;
 }
-.dnb-anchor:focus {
+.dnb-anchor.focus-visible {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
-.dnb-anchor:focus:not(:active) {
+.dnb-anchor:focus-visible {
+  color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
+  border-radius: 0.25rem;
+}
+.dnb-anchor.focus-visible.dnb-anchor--icon-left {
+  margin-left: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-left {
+.dnb-anchor:focus-visible.dnb-anchor--icon-left {
   margin-left: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-left .dnb-icon {
+.dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon {
   margin-left: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-right {
+.dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+.dnb-anchor.focus-visible.dnb-anchor--icon-right {
+  margin-right: 0;
+}
+.dnb-anchor:focus-visible.dnb-anchor--icon-right {
+  margin-right: 0;
+}
+.dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-right .dnb-icon {
+.dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
 .dnb-anchor.dnb-anchor--icon-left {
@@ -7659,9 +7674,6 @@ html[data-visual-test] .dnb-tooltip--hide {
   background-color: var(--sb-color-blue-light-3);
   border-radius: 0.25rem;
 }
-.dnb-anchor--focus:not(:active) {
-  background-color: var(--sb-color-blue-light-3);
-}
 .dnb-anchor--focus.dnb-anchor--icon-left {
   margin-left: 0;
 }
@@ -7675,28 +7687,39 @@ html[data-visual-test] .dnb-tooltip--hide {
   margin-right: 0;
 }
-.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus {
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius.focus-visible {
+  border-radius: 0;
+}
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
 .dnb-anchor--contrast {
   color: var(--color-white);
 }
-.dnb-anchor--contrast:hover, .dnb-anchor--contrast:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  text-decoration: none;
+.dnb-anchor--contrast:hover {
+  color: var(--sb-color-text);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
 .dnb-anchor--contrast:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
+  color: var(--color-white);
+  background-color: transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
+  --border-color: var(--color-white);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
-html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast:focus-visible {
+  color: var(--color-white);
+  background-color: transparent;
+  outline: none;
   --border-color: var(--color-white);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
@@ -9360,21 +9383,28 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-rad
 .dnb-section--fire-red .dnb-anchor, .dnb-section--emerald-green .dnb-anchor, .dnb-section--sea-green .dnb-anchor {
   color: var(--color-white);
 }
-.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:active {
+.dnb-section--fire-red .dnb-anchor:hover, .dnb-section--emerald-green .dnb-anchor:hover, .dnb-section--sea-green .dnb-anchor:hover {
   color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  text-decoration: none;
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
 .dnb-section--fire-red .dnb-anchor:active, .dnb-section--emerald-green .dnb-anchor:active, .dnb-section--sea-green .dnb-anchor:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
+  color: var(--color-white);
+  background-color: transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-section--fire-red .dnb-anchor:not(:disabled):focus, .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, .dnb-section--sea-green .dnb-anchor:not(:disabled):focus {
+.dnb-section--fire-red .dnb-anchor.focus-visible, .dnb-section--emerald-green .dnb-anchor.focus-visible, .dnb-section--sea-green .dnb-anchor.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
+  --border-color: var(--color-white);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
-html[data-whatinput=keyboard] .dnb-section--fire-red .dnb-anchor:not(:disabled):focus, html[data-whatinput=keyboard] .dnb-section--emerald-green .dnb-anchor:not(:disabled):focus, html[data-whatinput=keyboard] .dnb-section--sea-green .dnb-anchor:not(:disabled):focus {
+.dnb-section--fire-red .dnb-anchor:focus-visible, .dnb-section--emerald-green .dnb-anchor:focus-visible, .dnb-section--sea-green .dnb-anchor:focus-visible {
+  color: var(--color-white);
+  background-color: transparent;
+  outline: none;
   --border-color: var(--color-white);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);