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

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

@@ -2,11 +2,11 @@
   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-bottom: 12px !important;
   position: relative;
   z-index: 100;
@@ -72,22 +72,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: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -166,6 +166,7 @@
   min-width: 8rem;
   padding: 12px 14px !important;
   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: 1rem;
   font-weight: 400;
@@ -173,7 +174,6 @@
   line-height: 1.5;
   color: rgb(8, 42, 77);
   text-align: left;
-  text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   background: rgb(255, 255, 255);
@@ -186,41 +186,46 @@
   text-overflow: ellipsis;
 }
 .duet-multiselect:hover {
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
   border-color: rgb(127, 150, 165);
-  box-shadow: 0 0 0 1px #909599;
+}
+.duet-theme-turva .duet-multiselect:hover, .duet-multiselect:hover.duet-theme-turva, .duet-theme-turva2 .duet-multiselect:hover, .duet-multiselect:hover.duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-theme-turva .duet-multiselect:hover {
   border-color: rgb(143, 147, 158);
-  box-shadow: 0 0 0 1px #747475;
 }
 .has-error .duet-multiselect:hover {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-multiselect:hover {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-multiselect:focus, .duet-multiselect.duet-multiselect-active {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   border-color: rgb(0, 119, 179);
-  outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
+.duet-theme-turva .duet-multiselect:focus, .duet-multiselect:focus.duet-theme-turva, .duet-theme-turva2 .duet-multiselect:focus, .duet-multiselect:focus.duet-theme-turva2, .duet-theme-turva .duet-multiselect.duet-multiselect-active, .duet-multiselect.duet-multiselect-active.duet-theme-turva, .duet-theme-turva2 .duet-multiselect.duet-multiselect-active, .duet-multiselect.duet-multiselect-active.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-theme-turva .duet-multiselect:focus, .duet-theme-turva .duet-multiselect.duet-multiselect-active {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .has-error .duet-multiselect:focus, .has-error .duet-multiselect.duet-multiselect-active {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-multiselect:focus, .duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-multiselect[disabled] {
   color: rgb(8, 42, 77) !important;
   cursor: default !important;
+  outline: none !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
-  box-shadow: none !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
@@ -286,18 +291,18 @@
 .duet-multiselect-checkboxes {
   position: absolute;
   z-index: 700;
+  visibility: hidden;
   width: 100%;
   padding: 16px;
   margin: 8px 0 0;
-  visibility: hidden;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(212, 223, 229);
   border-radius: 4px;
   box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
   opacity: 0;
-  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
   transform: scale(0.96) translateZ(0) translateY(-20px);
   transform-origin: top right;
+  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
 }
 .duet-theme-turva .duet-multiselect-checkboxes {
   background: rgb(255, 255, 255);
@@ -307,8 +312,8 @@
 .duet-multiselect-checkboxes.duet-multiselect-checkboxes-active {
   visibility: visible;
   opacity: 1;
-  transition-property: transform, opacity;
   transform: scale(1.0001) translateZ(0) translateY(0);
+  transition-property: transform, opacity;
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons {
   padding: 8px 0;
@@ -327,11 +332,14 @@
   border-radius: 4px;
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons 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: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus, .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons 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-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus, .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus.duet-theme-turva, .duet-theme-turva2 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus, .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:first-child {
   border-right: 1px solid rgb(212, 223, 229);
@@ -390,36 +398,36 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect:focus,
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect.duet-multiselect-active {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect[disabled] {
-  color: #172a3b !important;
-  background: #f5f6f7 !important;
-  border-color: #f5f6f7 !important;
-  -webkit-text-fill-color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
+  background: rgb(245, 246, 247) !important;
+  border-color: rgb(245, 246, 247) !important;
+  -webkit-text-fill-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect svg {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect .duet-multiselect-badge {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
   background: #e8eaeb;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes {
-  border-color: #d4dde2;
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-nav/duet-nav.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%;
 }
 

package/lib/collection/components/duet-notification/duet-notification.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;
   display: block;
   width: 100%;
 }
@@ -36,13 +36,13 @@
   cursor: pointer;
 }
 :host(:first-of-type) .duet-notification {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: var(--notification-border-top-radius, 8px);
+  border-top-right-radius: var(--notification-border-top-radius, 8px);
 }
 :host(:last-of-type) .duet-notification {
   border-bottom: 0;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: var(--notification-border-bottom-radius, 8px);
+  border-bottom-left-radius: var(--notification-border-bottom-radius, 8px);
 }
 .duet-notification.duet-theme-turva {
   color: rgb(23, 28, 58);
@@ -69,11 +69,13 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-notification:focus-within {
+  outline: 2px solid;
+  outline-offset: -2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 1;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-notification-container {
@@ -146,17 +148,17 @@
 }
 
 :host(.duet-theme-turva2) .duet-notification.duet-theme-turva {
-  color: #172a3b;
-  border-bottom-color: #fbe1d1;
+  color: rgb(23, 42, 59);
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
-    background: #fdf7f2;
+    background: rgb(253, 247, 242);
   }
 }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.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;
   display: block;
   width: 100%;
 }
@@ -41,6 +41,7 @@
   height: 48px;
   padding: 0 20px;
   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: 1rem;
   font-weight: 400;
@@ -48,15 +49,25 @@
   line-height: 48px;
   color: rgb(8, 42, 77);
   text-align: left;
-  text-decoration: none;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  text-decoration: none;
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background-color: rgb(255, 255, 255);
   border-bottom: 1px solid rgb(212, 223, 229);
   border-radius: 0;
-  -webkit-appearance: none;
-  appearance: none;
+}
+.duet-drawer-toggle:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-drawer-toggle:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-drawer-toggle:focus, :host(.user-is-tabbing) .duet-drawer-toggle:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
   .duet-drawer-toggle {
@@ -81,15 +92,6 @@
 .duet-drawer-toggle:active {
   opacity: 0.75;
 }
-.duet-drawer-toggle:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-drawer-toggle:hover {
   color: rgb(0, 75, 129);
 }
@@ -110,8 +112,8 @@
     height: 3px;
     content: "";
     background: rgb(0, 119, 179);
-    transition: 300ms ease;
     transform: translateY(3px);
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-drawer-toggle::after {
     background: rgb(198, 12, 48);
@@ -166,9 +168,9 @@
   margin-left: 8px;
   line-height: normal;
   pointer-events: none;
-  transition: 300ms ease;
   transform: translateY(-50%);
   transform-origin: 50% 50%;
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-drawer-caret {
@@ -198,15 +200,17 @@
 }
 @media (min-width: 62em) {
   .duet-drawer-content {
+    --notification-border-top-radius: 0;
+    --notification-border-bottom-radius: 4px;
     position: absolute;
     top: 100%;
     z-index: 600;
     display: block;
+    visibility: hidden;
     width: 450px;
     max-height: 420px;
     padding-left: 0;
     overflow-y: auto;
-    visibility: hidden;
     background-color: rgb(255, 255, 255);
     border: 1px solid rgb(212, 223, 229);
     border-radius: 4px;
@@ -214,9 +218,9 @@
     border-top-right-radius: 0;
     box-shadow: 0 4px 10px 0 rgba(0, 41, 77, 0.15);
     opacity: 0;
-    transition: 300ms ease;
     transform: scale(0.95) translateZ(0) translateY(-10px);
     transform-origin: 50% 0;
+    transition: 300ms ease;
   }
   .duet-theme-turva .duet-drawer-content {
     background-color: rgb(255, 255, 255);
@@ -240,14 +244,14 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle {
-  color: #172a3b;
-  border-color: #d4dde2;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true],
 :host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
-  color: #8c001e;
-  border-color: #f5f6f7;
+  color: rgb(140, 0, 30);
+  border-color: rgb(245, 246, 247);
 }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -129,7 +129,10 @@ export class DuetNotificationDrawer {
         return (h("div", { key: 'd4fa93920c2ed5c6dbde47edb4a06376a78c168d', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: '5e885d2aeb194f364e832f547fe2e78d23bf57c3', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '2e9f920cccc92fa5d5b9fd934792fc66481263b5', class: "duet-drawer-icon" }, h("duet-icon", { key: 'e4d62dc6a17fa186cd25dcaa63fbfe1803f350e0', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: 'd6009add6874a0ddd1428236dd70037f9c80baf5', variation: "change" }))), h("span", { key: '17cacff5693e84208c2b4b4d6421c0b728cb8dd5', class: "duet-drawer-label" }, this.label), h("div", { key: '3cb4c839a2246de6668bf12ece0c0b8afe89d739', class: "duet-drawer-caret" }, h("duet-icon", { key: '17a1a0ee733bdd0b58922f82606041fa8ee417d4', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'cf870b4388a40e9fc2c955f26120dbe7820d93eb', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '91cf715c35fa62f878e0f48052db7e949451ffd5', ref: el => (this.drawerButtonEl = el), type: "button", class: {
+                "duet-drawer-toggle": true,
+                "duet-theme-turva": this.theme === "turva",
+            }, id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: '3d590c90c7879a63935be538952e2680d4f86bfe', class: "duet-drawer-icon" }, h("duet-icon", { key: '2772c893d000888882576b557b5c440a1f3c4c05', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("duet-indicator", { key: 'cfaf4ba17a8c84ca5c4111afc7e9f7a2f9c212ec', variation: "change" }))), h("span", { key: '3482261cfcde71451f58ee0834e396c4b28c2116', class: "duet-drawer-label" }, this.label), h("div", { key: 'a9701f65c33155543085e7fc9c295c901f99d104', class: "duet-drawer-caret" }, h("duet-icon", { key: '71ea296b4ebbc97281106f896ec07c5d30c6932f', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '6bef1c7a6d6cd6edfc6d2668ffa62e8e69f1bbd9', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",

package/lib/collection/components/duet-number-input/duet-number-input.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: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
@@ -27,8 +27,8 @@
   min-width: calc(33.333% - 8px);
   max-width: 100%;
   line-height: 1.25;
-  text-align: left;
   vertical-align: bottom;
+  text-align: left;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
@@ -70,10 +70,21 @@
   width: 50%;
   height: 100%;
   text-align: center;
-  cursor: pointer;
-  background: transparent;
   -webkit-appearance: none;
   appearance: none;
+  cursor: pointer;
+  background: transparent;
+}
+.duet-number-buttons .duet-number-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus, :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus, :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-number-buttons .duet-number-button[aria-disabled=true], .duet-number-buttons .duet-number-button:disabled {
   pointer-events: none;
@@ -84,15 +95,8 @@
 .duet-number-buttons .duet-number-button:active duet-icon {
   transform: translateY(1px);
 }
-.duet-number-buttons .duet-number-button:focus {
-  outline: 0;
-}
 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
   z-index: 2;
-  box-shadow: 0 0 0 2px #0077b3 !important;
-}
-.duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
-  box-shadow: 0 0 0 2px #171c3a !important;
 }
 .duet-number-buttons .duet-number-button:first-of-type {
   border-left: 1px solid rgb(181, 198, 208);
@@ -114,6 +118,7 @@
   position: absolute;
   top: 20%;
   left: 0;
+  z-index: -1;
   width: 1px;
   height: 60%;
   content: "";
@@ -131,5 +136,5 @@
   background: linear-gradient(to left, rgba(178, 194, 205, 0.2) 0%, rgba(178, 194, 205, 0.2) 1px, rgba(178, 194, 205, 0.1) 1px, rgba(178, 194, 205, 0) 100%);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:last-of-type::before {
-  background: #d4dde2;
+  background: rgb(212, 221, 226);
 }

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

@@ -3,9 +3,9 @@
   top: 0;
   left: 0;
   display: block;
+  visibility: visible;
   width: 100%;
   height: 100%;
-  visibility: visible;
   background: rgb(8, 42, 77);
   opacity: 0.3;
 }
@@ -107,5 +107,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-overlay.duet-theme-turva {
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-page-heading/duet-page-heading.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;
   display: block;
   width: 100%;
 }
@@ -216,8 +216,8 @@
 .duet-page-heading.duet-theme-turva .brand-shaped-icon {
   background: rgba(198, 12, 48, 0.9);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
   mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
 }
 .duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon {
@@ -235,19 +235,19 @@
   background-image: none;
 }
 :host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon {
-  background: #172a3b;
+  background: rgb(23, 42, 59);
   border-radius: 16%;
-  transform: rotate(0);
   -webkit-mask-image: none;
   mask-image: none;
+  transform: rotate(0);
 }
 :host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon {
   top: 0;
   transform: rotate(0);
 }
 :host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step {
-  background-color: #b2c2cd;
+  background-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step.active {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }