@dnb/eufemia 9.12.1 → 9.13.0

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

@@ -2048,6 +2048,16 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
   font-weight: 600;
   font-weight: var(--font-weight-bold); }
 
+.dnb-autocomplete__root
+.dnb-drawer-list__option--selected
+.dnb-drawer-list__option__item:nth-of-type(n + 2) {
+  color: #fff;
+  color: var(--color-white); }
+
+.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
+  color: #fff;
+  color: var(--color-white); }
+
 /*
 * Button theme
 *
@@ -2639,16 +2649,16 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-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--signal: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); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
       @media screen and (-ms-high-contrast: none) {
         html:not([data-whatintent='touch']) .dnb-button--signal:hover:not([disabled]) {
           opacity: 1; } }
@@ -2661,17 +2671,17 @@ html:not([data-whatintent='touch']) .dnb-accordion__variant--outlined.dnb-accord
       color: var(--color-ocean-green);
       background-color: #fdbb31;
       background-color: var(--color-accent-yellow);
-      --border-color: var(--color-emerald-green);
+      --border-color: var(--color-ocean-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-whatintent='touch'] .dnb-button--signal:active:not([disabled]),
         html:not([data-whatintent='touch']) html[data-whatintent='touch'] .dnb-button--signal:active: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); } }
+          -webkit-box-shadow: 0 0 0 0.125rem #00343e;
+                  box-shadow: 0 0 0 0.125rem #00343e;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-ocean-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-ocean-green); } }
     .dnb-button--signal:focus[disabled],
     html:not([data-whatintent='touch']) .dnb-button--signal:focus[disabled] {
       cursor: not-allowed; }
@@ -4082,6 +4092,14 @@ html:not([data-whatintent='touch']) .dnb-dropdown__trigger:hover:not([disabled])
 * Deprecated v1
 *
 */
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
 .dnb-step-indicator-v1 .dnb-step-indicator__item-content--static {
   color: #14555a;
   color: var(--color-emerald-green); }
@@ -4245,6 +4263,52 @@ html[data-whatinput='keyboard']
   color: #333;
   color: var(--color-black-80); }
 
+/*
+* Deprecated v1
+*
+*/
+/**
+ * This file is only used to make themes independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--static {
+  color: #14555a;
+  color: var(--color-emerald-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item-content--link {
+  color: #007272;
+  color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator__item {
+  margin-left: 4.5rem; }
+  .dnb-step-indicator-v1 .dnb-step-indicator__item:first-child {
+    margin-left: 0; }
+  @media screen and (max-width: 50em) {
+    .dnb-step-indicator-v1 .dnb-step-indicator__item {
+      margin-left: 2rem; } }
+
+.dnb-step-indicator-v1 .dnb-step-indicator::after {
+  color: #a5e1d2;
+  color: var(--color-mint-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator--active.dnb-step-indicator-v1 .dnb-step-indicator__item::after,
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content::after {
+  background-color: #007272;
+  background-color: var(--color-sea-green); }
+
+.dnb-step-indicator-v1 .dnb-step-indicator span[hidden],
+.dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content {
+  font-weight: 500;
+  font-weight: var(--font-weight-medium); }
+  .dnb-step-indicator-v1 .dnb-step-indicator span[hidden]:not(:hover),
+  .dnb-step-indicator-v1 .dnb-step-indicator--active .dnb-step-indicator__item-content:not(:hover) {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+
 /*
 * Switch theme
 *
@@ -5138,6 +5202,19 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
                     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-drawer-list__options--focusring {
+      outline: none; }
+      html[data-whatinput='mouse'] .dnb-drawer-list__options--focusring {
+        --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='mouse'] .dnb-drawer-list__options--focusring {
+            -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 (max-width: 40em) {
     .dnb-drawer-list__portal .dnb-drawer-list--mobile-view .dnb-drawer-list__options {
       border-radius: 0; } }
@@ -5239,7 +5316,21 @@ html:not([data-whatintent='touch']) .dnb-tabs__button:hover:not([disabled]) {
         background-size: cover;
         background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+); }
       .dnb-drawer-list__option--selected::before {
-        content: none; }
+        visibility: hidden; }
+    html[data-whatinput='keyboard'] .dnb-drawer-list__option--selected.dnb-drawer-list__option--focus::before {
+      visibility: visible;
+      --border-color: var(--color-mint-green);
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color);
+      -webkit-box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color);
+              box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-drawer-list__option--selected.dnb-drawer-list__option--focus::before {
+          -webkit-box-shadow: 0 0 0 0.125rem #a5e1d2;
+                  box-shadow: 0 0 0 0.125rem #a5e1d2;
+          -webkit-box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--color-mint-green);
+                  box-shadow: 0 0 0 var(--drawer-list-focus-border-width) var(--color-mint-green); } }
     .dnb-drawer-list__option--ignore .dnb-drawer-list__option__inner {
       color: #333;
       color: var(--color-black-80);