@duetds/components 10.0.0-alpha.29 → 10.0.0-alpha.30

package/lib/collection/components/duet-list-item/duet-list-item.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   flex-direction: column;
   display: flex;
   width: 100%;
@@ -46,9 +46,9 @@
 :host dd {
   width: 100%;
   margin-inline-start: 0;
+  text-align: left;
   -webkit-hyphens: auto;
   hyphens: auto;
-  text-align: left;
   overflow-wrap: break-word;
 }
 :host dt {
@@ -433,22 +433,22 @@
   }
 }
 :host(.duet-theme-turva2.duet-theme-turva) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 
 :host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,
 :host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dd {
-  background: #f5f6f7;
+  background: rgb(245, 246, 247);
 }
 
 :host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva) {
-  border-block-start: 1px solid #d4dde2;
+  border-block-start: 1px solid rgb(212, 221, 226);
 }
 
 :host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva:last-child) {
-  border-block-end: 1px solid #d4dde2;
+  border-block-end: 1px solid rgb(212, 221, 226);
 }
 
 :host(.duet-theme-turva2.duet-list-inner-bordered.duet-theme-turva:not(:last-child)) {
-  border-block-end: 1px solid #d4dde2;
+  border-block-end: 1px solid rgb(212, 221, 226);
 }

package/lib/collection/components/duet-logo/duet-logo.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 8px !important;
   display: inline-block;
   width: auto;
@@ -42,11 +42,14 @@
   border-radius: 4px;
 }
 .duet-logo:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva, .duet-theme-turva2 .duet-logo:focus, .duet-logo:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-logo.duet-logo-en {
   width: 166px;
@@ -58,6 +61,11 @@
   width: 110px;
   height: 40px;
 }
+.duet-logo.duet-logo-inverse:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-logo svg {
   display: block;
   width: 100%;

package/lib/collection/components/duet-logo/duet-logo.js

@@ -148,9 +148,10 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '9aa8d797449d771c669f1b489937b72f4f334346', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '2ffc72c161a6527fdeb4b14b9acc82cfe12d80b1', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '9aa8d797449d771c669f1b489937b72f4f334346', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'e217a8575a7d1511925d6d3f53c57463f8569cc5', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
+                "duet-logo-inverse": this.inverse,
                 "duet-logo-only-symbol": this.onlySymbol,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-logo-en": this.language === "en",

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   width: 100%;
   pointer-events: none;
@@ -180,8 +180,8 @@
   height: 100%;
 }
 .duet-menu-bar .container > :first-child {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   justify-content: flex-start;
   width: auto;
   height: 40px;
@@ -198,8 +198,8 @@
   max-height: 100%;
 }
 .duet-menu-bar .container > :last-child {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   justify-content: flex-end;
 }
 .duet-menu-bar .container ::slotted(*) {
@@ -213,16 +213,16 @@
   padding-left: 16px;
   margin-left: 16px;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 0.875rem;
   font-style: normal;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.1;
   color: rgb(62, 84, 102);
-  text-overflow: ellipsis;
+  -webkit-hyphens: auto;
+  hyphens: auto;
   border-left: 1px solid rgb(212, 223, 229);
 }
 .duet-menu-bar .container .duet-logo-info-text.duet-theme-turva {
@@ -294,12 +294,12 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .center {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .right {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-logo-info-text {
-  color: #354f65;
-  border-left-color: #d4dde2;
+  color: rgb(53, 79, 101);
+  border-left-color: rgb(212, 221, 226);
 }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -39,11 +39,14 @@
   cursor: pointer;
 }
 .duet-menu-bar-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-button .menu-bar-button-icon {
   width: 20px;
@@ -79,6 +82,6 @@
 
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-menu-bar-button.duet-theme-turva:hover {
-    color: #e61740;
+    color: rgb(230, 23, 64);
   }
 }

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -55,6 +55,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-menu-bar-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-menu-bar-dropdown button:focus, .duet-menu-bar-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-dropdown button:focus, .duet-menu-bar-dropdown button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 @media (min-width: 62em) {
   .duet-menu-bar-dropdown button {
     padding: 0 16px;
@@ -68,10 +78,6 @@
 .duet-menu-bar-dropdown button:hover {
   color: rgb(0, 119, 179);
 }
-.duet-menu-bar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-menu-bar-dropdown button .label {
   display: flex;
   gap: 0.5rem;
@@ -97,8 +103,8 @@
   height: 2px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 .duet-theme-turva .duet-menu-bar-dropdown button.active::after {
   background: rgb(198, 12, 48);
@@ -140,9 +146,6 @@
 .duet-menu-bar-dropdown.duet-theme-turva button:hover {
   color: rgb(198, 12, 48);
 }
-.duet-menu-bar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-menu-bar-dropdown.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }
@@ -154,14 +157,14 @@
 }
 
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button:hover {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
   height: 100%;
 }
@@ -41,11 +41,14 @@
   text-decoration: none;
 }
 .duet-menu-bar-dropdown-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-dropdown-link.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -59,8 +62,8 @@
 }
 
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva:hover {
-  background: #fbebe1;
+  background: rgb(251, 235, 225);
 }

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -36,16 +36,19 @@
   font-weight: inherit;
   color: inherit;
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
 }
 .duet-menu-bar-item:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-item .leading-icon,
 .duet-menu-bar-item .trailing-icon {
@@ -103,8 +106,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-item.active::after {
@@ -128,16 +131,16 @@
 }
 
 :host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva[aria-expanded=true] {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva:hover {
-    color: #e61740;
+    color: rgb(230, 23, 64);
   }
 }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -34,15 +34,18 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: inherit;
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-menu-bar-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-link .menu-bar-link-icon {
   width: 20px;
@@ -81,8 +84,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-link.active::after {
@@ -106,13 +109,13 @@
 }
 
 :host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-menu-bar-link.duet-theme-turva:hover {
-    color: #e61740;
+    color: rgb(230, 23, 64);
   }
 }

package/lib/collection/components/duet-modal/duet-modal.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-modal-container {
@@ -29,9 +29,9 @@
   bottom: 0;
   left: 0;
   z-index: 900;
+  visibility: hidden;
   max-height: 100vh;
   overflow-y: auto;
-  visibility: hidden;
   opacity: 0;
   transition: 300ms ease;
   transition-delay: 200ms;
@@ -121,9 +121,9 @@
   background: rgb(255, 255, 255);
   border-radius: 16px;
   opacity: 0;
+  transform: scale(0.96);
   transition: 300ms ease;
   transition-delay: 0ms;
-  transform: scale(0.96);
 }
 .duet-theme-turva .duet-modal {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -131,9 +131,9 @@
 }
 .duet-modal-active .duet-modal {
   opacity: 1;
+  transform: none;
   transition: 300ms ease;
   transition-delay: 200ms;
-  transform: none;
 }
 .duet-modal-active .duet-modal.slide-up {
   top: 0;
@@ -157,9 +157,9 @@
 .duet-modal.loader duet-paragraph.duet-loader-message {
   position: absolute;
   opacity: 0;
-  transition: all 300ms ease;
   transform: scaleY(0);
   transform-origin: top;
+  transition: all 300ms ease;
 }
 .duet-modal.loader duet-paragraph.duet-loader-message.show {
   opacity: 1;
@@ -301,6 +301,7 @@
   width: 100%;
   padding-right: 60px;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.25rem;
   font-style: normal;
@@ -308,10 +309,9 @@
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
   color: rgb(8, 42, 77);
-  text-decoration: none;
-  text-overflow: ellipsis;
   letter-spacing: -0.01rem;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-modal-heading.duet-p-0 {
   padding: 0 !important;
@@ -321,9 +321,9 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-modal {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-modal-sticky-header {
-  background: #fdf7f2;
-  border-bottom: 1px solid #d4dde2;
+  background: rgb(253, 247, 242);
+  border-bottom: 1px solid rgb(212, 221, 226);
 }