@dnb/eufemia 9.24.0 → 9.26.1

package/cjs/style/themes/theme-ui/dnb-theme-ui.css

@@ -365,7 +365,9 @@ a.dnb-button {
     font-size: var(--font-size-medium);
     line-height: 1.75rem;
     line-height: calc(2rem - 0.25rem);
-    line-height: calc(var(--line-height-medium) - 0.25rem); }
+    line-height: calc(var(--line-height-medium) - 0.25rem);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium); }
     .dnb-p--lead > small {
       font-size: 1.125rem;
       font-size: var(--font-size-basis);
@@ -467,7 +469,9 @@ a.dnb-button {
   font-size: var(--font-size-medium);
   line-height: 1.75rem;
   line-height: calc(2rem - 0.25rem);
-  line-height: calc(var(--line-height-medium) - 0.25rem); }
+  line-height: calc(var(--line-height-medium) - 0.25rem);
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
   .dnb-lead > small,
   .dnb-h--medium > small {
     font-size: 1.125rem;
@@ -1562,7 +1566,6 @@ thead > tr > th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::aft
  */
 .dnb-code {
   display: inline-block;
-  margin: -0.25em 0;
   padding: 0.25em 0.25em;
   /* 2px 4px */
   font-size: inherit;
@@ -1575,6 +1578,8 @@ thead > tr > th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::aft
   border-radius: 0.1875em; }
   del .dnb-code {
     text-decoration: line-through; }
+  .dnb-code:not([class*='dnb-space']) {
+    margin: -0.25em 0; }
 
 .dnb-pre {
   display: block;
@@ -1719,8 +1724,7 @@ thead > tr > th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::aft
     background-color: currentColor;
     border-radius: 0.5px; }
   .dnb-hr--fullscreen::after {
-    left: -50vw;
-    right: -50vw;
+    left: -100vw;
     width: 200vw; }
   .dnb-hr--light::after {
     border-radius: 0.25px;
@@ -2322,82 +2326,6 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
         html:not([data-whatintent='touch']) .dnb-button--secondary:active:not([disabled]) {
           -webkit-box-shadow: 0 0 0 0.0625rem transparent;
                   box-shadow: 0 0 0 0.0625rem transparent; } }
-    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled] {
-      cursor: not-allowed; }
-    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
-      color: #14555a;
-      color: var(--color-emerald-green);
-      background-color: #fff;
-      background-color: var(--color-white);
-      --border-color: var(--color-emerald-green);
-      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-              box-shadow: 0 0 0 0.125rem var(--border-color);
-      border-color: transparent; }
-      @media screen and (-ms-high-contrast: none) {
-        html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
-                  box-shadow: 0 0 0 0.125rem #14555a;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
-                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
-      @media screen and (-ms-high-contrast: none) {
-        html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
-          opacity: 1; } }
-    .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],
-    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] {
-      cursor: not-allowed; }
-    .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),
-    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-      outline: none; }
-      html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
-      html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-        color: #14555a;
-        color: var(--color-emerald-green);
-        background-color: #fff;
-        background-color: var(--color-white); }
-      html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
-      html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-        --border-color: var(--color-emerald-green);
-        -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
-                box-shadow: inset 0 0 0 0.125rem var(--border-color);
-        /* iOS fix - because "inset" works not fine with border-radius */
-        /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
-        border-color: transparent; }
-        @supports (-webkit-touch-callout: none) {
-          html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
-          html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                    box-shadow: 0 0 0 0.125rem var(--border-color); } }
-        @media not all and (min-resolution: 0.001dpcm) {
-          @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
-            html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
-            html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-              -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
-                      box-shadow: 0 0 0 0.125rem var(--border-color); } } }
-        @media screen and (-ms-high-contrast: none) {
-          html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
-          html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
-            -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
-                    box-shadow: inset 0 0 0 0.125rem #14555a;
-            -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
-                    box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
-    .dnb-button--secondary:not(.dnb-button--has-text):active[disabled],
-    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
-      cursor: not-allowed; }
-    .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
-    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
-      color: #14555a;
-      color: var(--color-emerald-green);
-      background-color: #d2f0e9;
-      background-color: var(--color-mint-green-50);
-      --border-color: transparent;
-      -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
-              box-shadow: 0 0 0 0.0625rem var(--border-color);
-      border-color: transparent; }
-      @media screen and (-ms-high-contrast: none) {
-        .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
-        html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
-          -webkit-box-shadow: 0 0 0 0.0625rem transparent;
-                  box-shadow: 0 0 0 0.0625rem transparent; } }
     .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
       color: #b3dada;
       color: var(--color-sea-green-30);
@@ -2450,6 +2378,82 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
                 box-shadow: inset 0 0 0 1px var(--color-fire-red); } }
     .dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon {
       color: inherit; }
+  html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled] {
+    cursor: not-allowed; }
+  html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #fff;
+    background-color: var(--color-white);
+    --border-color: var(--color-emerald-green);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
+        -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                box-shadow: 0 0 0 0.125rem #14555a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+    @media screen and (-ms-high-contrast: none) {
+      html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]) {
+        opacity: 1; } }
+  .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],
+  html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled] {
+    cursor: not-allowed; }
+  .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),
+  html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+      color: #14555a;
+      color: var(--color-emerald-green);
+      background-color: #fff;
+      background-color: var(--color-white); }
+    html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+    html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: inset 0 0 0 0.125rem var(--border-color);
+              box-shadow: inset 0 0 0 0.125rem var(--border-color);
+      /* iOS fix - because "inset" works not fine with border-radius */
+      /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+      border-color: transparent; }
+      @supports (-webkit-touch-callout: none) {
+        html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+          -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                  box-shadow: 0 0 0 0.125rem var(--border-color); } }
+      @media not all and (min-resolution: 0.001dpcm) {
+        @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+          html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+          html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color); } } }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]), html[data-whatinput='keyboard']
+        html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]) {
+          -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
+                  box-shadow: inset 0 0 0 0.125rem #14555a;
+          -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
+                  box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green); } }
+  .dnb-button--secondary:not(.dnb-button--has-text):active[disabled],
+  html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
+    cursor: not-allowed; }
+  .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
+  html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50);
+    --border-color: transparent;
+    -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+            box-shadow: 0 0 0 0.0625rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
+      html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
+        -webkit-box-shadow: 0 0 0 0.0625rem transparent;
+                box-shadow: 0 0 0 0.0625rem transparent; } }
   .dnb-button--active {
     --border-color: var(--color-emerald-green);
     -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
@@ -2571,13 +2575,25 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
     .dnb-button--tertiary .dnb-button__icon {
       -ms-flex-item-align: start;
           align-self: flex-start;
-      margin-top: 0.75rem; }
+      margin-top: 0.75rem;
+      margin-top: calc(2.5rem / 2 - 0.5rem);
+      margin-top: calc(var(--button-height)/2 - 0.5rem);
+      margin-top: calc(var(--button-height) / 2 - 0.5rem); }
     .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
-      margin-top: 1rem; }
+      margin-top: 1rem;
+      margin-top: calc(3rem / 2 - 0.5rem);
+      margin-top: calc(var(--button-height--large)/2 - 0.5rem);
+      margin-top: calc(var(--button-height--large) / 2 - 0.5rem); }
     .dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
-      margin-top: 0.5rem; }
+      margin-top: 0.5rem;
+      margin-top: calc(2rem / 2 - 0.5rem);
+      margin-top: calc(var(--button-height--medium)/2 - 0.5rem);
+      margin-top: calc(var(--button-height--medium) / 2 - 0.5rem); }
     .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
-      margin-top: 0.25rem; }
+      margin-top: 0.25rem;
+      margin-top: calc(1.5rem / 2 - 0.5rem);
+      margin-top: calc(var(--button-height--small)/2 - 0.5rem);
+      margin-top: calc(var(--button-height--small) / 2 - 0.5rem); }
     .dnb-button--tertiary.dnb-button--icon-position-top {
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
@@ -3707,19 +3723,9 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
         -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                 box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
 
-.dnb-pagination__dots > div {
-  background-color: #14555a;
-  background-color: var(--color-emerald-green); }
-
-@media screen and (max-width: 40em) {
-  .dnb-pagination--many-pages .dnb-pagination__bar__inner .dnb-pagination__button:not([aria-current]):nth-of-type(2),
-  .dnb-pagination--many-pages .dnb-pagination__bar__inner .dnb-pagination__button:not([aria-current]):nth-last-of-type(2) {
-    width: 0;
-    overflow: hidden;
-    margin: 0;
-    padding: 0;
-    -webkit-box-shadow: none;
-            box-shadow: none; } }
+.dnb-pagination__dots {
+  color: #737373;
+  color: var(--color-black-55); }
 
 @-webkit-keyframes show-page {
   from {