@dnb/eufemia 9.16.0 → 9.17.0

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

@@ -2534,11 +2534,12 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
       -ms-flex-item-align: start;
           align-self: flex-start;
       margin-top: 0.75rem; }
-    .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon,
-    .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
-      margin-top: 0.25rem; }
+    .dnb-button--tertiary.dnb-button--size-large .dnb-button__icon {
+      margin-top: 1rem; }
     .dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon {
       margin-top: 0.5rem; }
+    .dnb-button--tertiary.dnb-button--size-small .dnb-button__icon {
+      margin-top: 0.25rem; }
     .dnb-button--tertiary.dnb-button--icon-position-top {
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
@@ -2558,7 +2559,8 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
         font-size: 0.875rem;
         font-size: var(--font-size-x-small); }
         .dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text::after {
-          left: 0; }
+          left: 0;
+          right: 0; }
       .dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text {
         font-size: 1rem;
         font-size: var(--font-size-small); }
@@ -2567,16 +2569,6 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
             -ms-flex-order: 3;
                 order: 3;
         height: 0; }
-    .dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon,
-    .dnb-button--tertiary:not(.dnb-button--size-large) .dnb-button__icon.dnb-icon--medium {
-      margin-top: 0.5rem; }
-    .dnb-button--tertiary.dnb-button--size-large,
-    .dnb-core-style .dnb-button--tertiary.dnb-button--size-large {
-      line-height: 2rem;
-      line-height: var(--button-height--medium); }
-    .dnb-button--tertiary.dnb-button--size-large.dnb-button--has-icon:not(.dnb-button--has-text) {
-      width: 2rem;
-      width: var(--button-width--medium); }
     .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left {
       padding-left: 0;
       padding-right: 0.5rem; }
@@ -3334,22 +3326,12 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
   -webkit-box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80);
           box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80); }
 
-.dnb-global-status__title {
-  color: #fff;
-  color: var(--color-white); }
-  .dnb-global-status__title.dnb-p {
-    font-weight: 500;
-    font-weight: var(--font-weight-medium); }
-
 .dnb-global-status__icon {
   font-size: 1rem; }
 
 .dnb-global-status__message__content {
   color: #333;
   color: var(--color-black-80); }
-  .dnb-global-status__message__content > .dnb-p {
-    font-weight: 500;
-    font-weight: var(--font-weight-medium); }
 
 .dnb-global-status__message.dnb-section--white ::-moz-selection {
   background-color: #a5e1d2;
@@ -3359,50 +3341,14 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
   background-color: #a5e1d2;
   background-color: var(--color-mint-green); }
 
-.dnb-global-status__message .dnb-hr {
+.dnb-global-status__content .dnb-hr {
   color: #dc2a2a;
   color: var(--color-fire-red); }
 
-.dnb-global-status--info .dnb-global-status__message .dnb-hr {
+.dnb-global-status--info .dnb-global-status__content .dnb-hr {
   color: #007272;
   color: var(--color-sea-green); }
 
-.dnb-global-status__close-button, .dnb-global-status__close-button.dnb-button--tertiary {
-  color: #fff;
-  color: var(--color-white); }
-  html:not([data-whatintent='touch']) .dnb-global-status__close-button:hover[disabled], html:not([data-whatintent='touch']) .dnb-global-status__close-button.dnb-button--tertiary:hover[disabled] {
-    cursor: not-allowed; }
-  html:not([data-whatintent='touch']) .dnb-global-status__close-button:hover:not([disabled]) .dnb-button__text, html:not([data-whatintent='touch']) .dnb-global-status__close-button.dnb-button--tertiary:hover:not([disabled]) .dnb-button__text {
-    color: inherit; }
-    html:not([data-whatintent='touch']) .dnb-global-status__close-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch']) .dnb-global-status__close-button.dnb-button--tertiary:hover:not([disabled]) .dnb-button__text::after {
-      color: inherit; }
-  .dnb-global-status__close-button:not([disabled]):focus::before, .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):focus::before {
-    outline: none; }
-    html[data-whatinput='keyboard'] .dnb-global-status__close-button:not([disabled]):focus::before, html[data-whatinput='keyboard'] .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):focus::before {
-      --border-color: var(--color-white);
-      -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[data-whatinput='keyboard'] .dnb-global-status__close-button:not([disabled]):focus::before, html[data-whatinput='keyboard'] .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):focus::before {
-          -webkit-box-shadow: 0 0 0 0.125rem #fff;
-                  box-shadow: 0 0 0 0.125rem #fff;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
-                  box-shadow: 0 0 0 0.125rem var(--color-white); } }
-  .dnb-global-status__close-button:not([disabled]):active::before, .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):active::before {
-    outline: none; }
-    html[data-whatinput='mouse'] .dnb-global-status__close-button:not([disabled]):active::before, html[data-whatinput='mouse'] .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):active::before {
-      --border-color: var(--color-white);
-      -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[data-whatinput='mouse'] .dnb-global-status__close-button:not([disabled]):active::before, html[data-whatinput='mouse'] .dnb-global-status__close-button.dnb-button--tertiary:not([disabled]):active::before {
-          -webkit-box-shadow: 0 0 0 0.125rem #fff;
-                  box-shadow: 0 0 0 0.125rem #fff;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
-                  box-shadow: 0 0 0 0.125rem var(--color-white); } }
-
 /*
  * Np theme is provided
  *
@@ -3513,7 +3459,6 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
                 box-shadow: inset 0 0 0 1px #737373;
         -webkit-box-shadow: inset 0 0 0 1px var(--color-black-55);
                 box-shadow: inset 0 0 0 1px var(--color-black-55); } }
-  .dnb-input[data-input-state='focus'] .dnb-input__shell,
   .dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover,
   .dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell {
     --border-color: var(--color-sea-green);
@@ -3521,13 +3466,23 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
             box-shadow: 0 0 0 0.125rem var(--border-color);
     border-color: transparent; }
     @media screen and (-ms-high-contrast: none) {
-      .dnb-input[data-input-state='focus'] .dnb-input__shell,
       .dnb-input:not([data-input-state='disabled']) .dnb-input__shell:hover,
       .dnb-input:not([data-input-state='disabled']):hover .dnb-input__shell {
         -webkit-box-shadow: 0 0 0 0.125rem #007272;
                 box-shadow: 0 0 0 0.125rem #007272;
         -webkit-box-shadow: 0 0 0 0.125rem var(--color-sea-green);
                 box-shadow: 0 0 0 0.125rem var(--color-sea-green); } }
+  .dnb-input[data-input-state='focus']:not([data-input-state='disabled']) .dnb-input__shell {
+    --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) {
+      .dnb-input[data-input-state='focus']:not([data-input-state='disabled']) .dnb-input__shell {
+        -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); } }
   .dnb-input__status--error.dnb-input:not([data-input-state='focus']) .dnb-input__shell {
     color: #dc2a2a;
     color: var(--color-fire-red); }
@@ -3970,8 +3925,8 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
     color: var(--color-fire-red); }
 
 .dnb-section--fire-red-8 {
-  color: #fff;
-  color: var(--color-white); }
+  color: #333;
+  color: var(--color-black-80); }
   .dnb-section--fire-red-8::after {
     color: #fdeeee;
     color: var(--color-fire-red-8); }
@@ -3980,33 +3935,91 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
 .dnb-section--emerald-green .dnb-anchor,
 .dnb-section--sea-green .dnb-anchor {
   color: #fff;
-  color: var(--color-white); }
-  .dnb-section--fire-red .dnb-anchor:hover,
+  color: var(--color-white);
+  -webkit-box-shadow: 0 0.09375rem 0 0 #fff;
+          box-shadow: 0 0.09375rem 0 0 #fff;
+  -webkit-box-shadow: 0 0.09375rem 0 0 var(--color-white);
+          box-shadow: 0 0.09375rem 0 0 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--sea-green .dnb-anchor:hover {
-    color: #007272;
-    color: var(--color-sea-green); }
-  .dnb-section--fire-red .dnb-anchor:focus,
-  .dnb-section--emerald-green .dnb-anchor:focus,
-  .dnb-section--sea-green .dnb-anchor:focus {
+  .dnb-section--emerald-green .dnb-anchor:active,
+  .dnb-section--sea-green .dnb-anchor:hover,
+  .dnb-section--sea-green .dnb-anchor:active {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #fff;
+    background-color: var(--color-white);
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  .dnb-section--fire-red .dnb-anchor:active,
+  .dnb-section--emerald-green .dnb-anchor:active,
+  .dnb-section--sea-green .dnb-anchor:active {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #fff;
+    background-color: var(--color-white); }
+  .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 {
     color: #fff;
     color: var(--color-white);
+    background-color: transparent;
     outline: none; }
-    html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-anchor:focus, html[data-whatinput='keyboard']
-    .dnb-section--emerald-green .dnb-anchor:focus, html[data-whatinput='keyboard']
-    .dnb-section--sea-green .dnb-anchor:focus {
-      --border-color: var(--color-black-8);
+    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 {
+      --border-color: var(--color-white);
       -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[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-anchor:focus, html[data-whatinput='keyboard']
-        .dnb-section--emerald-green .dnb-anchor:focus, html[data-whatinput='keyboard']
-        .dnb-section--sea-green .dnb-anchor:focus {
-          -webkit-box-shadow: 0 0 0 0.125rem #ebebeb;
-                  box-shadow: 0 0 0 0.125rem #ebebeb;
-          -webkit-box-shadow: 0 0 0 0.125rem var(--color-black-8);
-                  box-shadow: 0 0 0 0.125rem var(--color-black-8); } }
+        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 {
+          -webkit-box-shadow: 0 0 0 0.125rem #fff;
+                  box-shadow: 0 0 0 0.125rem #fff;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
+                  box-shadow: 0 0 0 0.125rem var(--color-white); } }
+
+.dnb-section--fire-red .dnb-button--tertiary,
+.dnb-section--emerald-green .dnb-button--tertiary,
+.dnb-section--sea-green .dnb-button--tertiary {
+  color: #fff;
+  color: var(--color-white); }
+  .dnb-section--fire-red .dnb-button--tertiary:hover,
+  .dnb-section--emerald-green .dnb-button--tertiary:hover,
+  .dnb-section--sea-green .dnb-button--tertiary:hover {
+    color: #fff;
+    color: var(--color-white); }
+  .dnb-section--fire-red .dnb-button--tertiary:hover .dnb-button__text::after,
+  .dnb-section--emerald-green .dnb-button--tertiary:hover .dnb-button__text::after,
+  .dnb-section--sea-green .dnb-button--tertiary:hover .dnb-button__text::after {
+    color: #fff !important;
+    color: var(--color-white) !important; }
+  .dnb-section--fire-red .dnb-button--tertiary:focus,
+  .dnb-section--emerald-green .dnb-button--tertiary:focus,
+  .dnb-section--sea-green .dnb-button--tertiary:focus {
+    color: #fff;
+    color: var(--color-white); }
+    .dnb-section--fire-red .dnb-button--tertiary:focus::before,
+    .dnb-section--emerald-green .dnb-button--tertiary:focus::before,
+    .dnb-section--sea-green .dnb-button--tertiary:focus::before {
+      outline: none; }
+      html[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard']
+      .dnb-section--emerald-green .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard']
+      .dnb-section--sea-green .dnb-button--tertiary:focus::before {
+        --border-color: var(--color-white);
+        -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[data-whatinput='keyboard'] .dnb-section--fire-red .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard']
+          .dnb-section--emerald-green .dnb-button--tertiary:focus::before, html[data-whatinput='keyboard']
+          .dnb-section--sea-green .dnb-button--tertiary:focus::before {
+            -webkit-box-shadow: 0 0 0 0.125rem #fff;
+                    box-shadow: 0 0 0 0.125rem #fff;
+            -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
+                    box-shadow: 0 0 0 0.125rem var(--color-white); } }
 
 .dnb-section--signal-orange {
   color: #00343e;
@@ -4689,8 +4702,10 @@ html[data-whatinput='keyboard']
   font-size: 1.125rem;
   font-size: var(--font-size-basis);
   text-align: center;
+  display: block;
   color: #007272;
-  color: var(--color-sea-green); }
+  color: var(--color-sea-green);
+  padding: 0.5rem 0 0.25rem 0; }
 
 html:not([data-whatintent='touch']) .dnb-tabs__button:hover[disabled] {
   cursor: not-allowed; }
@@ -4699,48 +4714,49 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
   background-color: #d2f0e9;
   background-color: var(--color-mint-green-50); }
   html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled])::after {
-    height: 3px;
-    border-radius: 1.5px;
+    height: 2px;
+    border-radius: 2px;
     background-color: #007272;
     background-color: var(--color-sea-green); }
 
-.dnb-tabs__button:focus::before {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: -0.5rem;
-  bottom: 0;
-  right: -0.5rem;
-  height: inherit;
-  border-radius: inherit;
-  outline: none; }
-  html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
-    --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[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
-        -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); } }
-
-.dnb-tabs__button:focus::before {
-  top: 2px;
-  bottom: 2px;
-  right: 0;
-  left: 0;
-  border-radius: 0.25rem; }
+.dnb-tabs__button:focus {
+  overflow: visible; }
+  .dnb-tabs__button:focus::before {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: -0.5rem;
+    bottom: 0;
+    right: -0.5rem;
+    height: inherit;
+    border-radius: inherit;
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
+      --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[data-whatinput='keyboard'] .dnb-tabs__button:focus::before {
+          -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); } }
+  .dnb-tabs__button:focus::before {
+    top: 0.5rem;
+    left: -0.375rem;
+    right: -0.375rem;
+    bottom: 0.5rem;
+    border-radius: 1.5rem; }
 
 .dnb-tabs__button[disabled] .dnb-tabs__button__title {
   color: #b3dada;
   color: var(--color-sea-green-30); }
 
 .dnb-tabs__button:not([disabled]):active::after, .dnb-tabs__button:not([disabled]).selected::after {
-  height: 3px;
-  border-radius: 1.5px;
+  height: 2px;
+  border-radius: 2px;
   background-color: #007272;
   background-color: var(--color-sea-green); }