@duetds/components 10.2.3 → 10.2.4

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -40,7 +40,7 @@
   border-bottom: 1px solid rgb(212, 223, 229);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs {
-  border-bottom-color: rgb(222, 224, 228);
+  border-bottom-color: rgb(212, 221, 226);
 }
 
 .duet-tab-variation-checked .duet-tab-group-tabs {
@@ -121,7 +121,7 @@
   box-shadow: 0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229);
 }
 .duet-theme-turva .duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after {
-  box-shadow: 0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228);
+  box-shadow: 0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(212, 221, 226);
 }
 .duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border {
   z-index: 206;
@@ -177,7 +177,7 @@
 }
 .duet-theme-turva .duet-tab-button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-tab-button.duet-p-0 {
   padding: 0 !important;
@@ -202,9 +202,9 @@
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-tab-button.selected {
-  color: rgb(198, 12, 48);
-  border-color: rgb(222, 224, 228);
-  border-bottom-color: rgb(198, 12, 48);
+  color: rgb(230, 23, 64);
+  border-color: rgb(212, 221, 226);
+  border-bottom-color: rgb(230, 23, 64);
 }
 .duet-tab-button:focus {
   z-index: 205;
@@ -287,23 +287,23 @@
   height: 3px;
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button {
-  color: rgb(71, 78, 101);
+  color: rgb(53, 79, 101);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
   background: rgb(255, 255, 255);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before {
-  background-color: rgb(198, 12, 48);
+  background-color: rgb(230, 23, 64);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button:not(.selected) {
   z-index: 200;
-  box-shadow: 0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228);
+  box-shadow: 0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(212, 221, 226);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button:hover:not(.selected) {
   z-index: 200;
-  color: rgb(45, 52, 79);
-  background: rgb(234, 235, 239);
+  color: rgb(37, 60, 80);
+  background: rgb(228, 233, 237);
 }
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
@@ -339,15 +339,15 @@
   margin-left: 36px;
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button {
-  color: rgb(71, 78, 101);
+  color: rgb(53, 79, 101);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover {
-  color: rgb(45, 52, 79);
-  border-bottom: 2px solid rgb(198, 12, 48);
+  color: rgb(37, 60, 80);
+  border-bottom: 2px solid rgb(230, 23, 64);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  color: rgb(23, 28, 58);
-  border-bottom: 2px solid rgb(198, 12, 48);
+  color: rgb(23, 42, 59);
+  border-bottom: 2px solid rgb(230, 23, 64);
 }
 .duet-tab-variation-checked .duet-tab-button {
   position: relative;
@@ -366,7 +366,7 @@
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button {
   border-color: rgb(181, 198, 208);
-  border-bottom-color: rgb(113, 118, 132);
+  border-bottom-color: rgb(95, 122, 143);
 }
 
 @media (min-width: 36em) {
@@ -395,9 +395,9 @@
   border-bottom-color: #fff;
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button.selected {
-  color: rgb(23, 28, 58);
-  background: linear-gradient(180deg, rgb(245, 247, 250) 0%, rgb(255, 255, 255) 100%);
-  border-color: rgb(113, 118, 132);
+  color: rgb(23, 42, 59);
+  background: linear-gradient(180deg, rgb(245, 246, 247) 0%, rgb(255, 255, 255) 100%);
+  border-color: rgb(95, 122, 143);
   border-bottom-color: #fff;
 }
 
@@ -442,14 +442,14 @@
   }
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
-  color: rgb(113, 118, 132);
+  color: rgb(95, 122, 143);
 }
 
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected {
   color: rgb(0, 119, 179);
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected {
-  color: rgb(113, 118, 132);
+  color: rgb(95, 122, 143);
 }
 
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark {
@@ -497,10 +497,10 @@
 }
 .duet-theme-turva .duet-tab-group-content {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-theme-turva .duet-tab-group-content.checked-group-content::after {
-  background-color: rgb(113, 118, 132);
+  background-color: rgb(95, 122, 143);
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-group-tabs.duet-tab-variation-plain {

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

@@ -192,8 +192,8 @@ duet-tooltip,
 }
 .duet-theme-turva .duet-textarea {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(23, 28, 58);
-  border-color: rgb(143, 147, 158);
+  color: rgb(23, 42, 59);
+  border-color: rgb(120, 145, 164);
 }
 .has-error .duet-textarea {
   border-color: rgb(214, 28, 82) !important;
@@ -210,38 +210,38 @@ duet-tooltip,
   transition: color 300ms ease;
 }
 .duet-theme-turva .duet-textarea::-webkit-input-placeholder {
-  color: rgb(143, 147, 158);
+  color: rgb(120, 145, 164);
 }
 .duet-textarea:focus::-webkit-input-placeholder {
   color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder {
-  color: rgb(199, 202, 207);
+  color: rgb(178, 194, 205);
 }
 .duet-textarea::-moz-placeholder {
   color: rgb(98, 121, 138);
   opacity: 1 !important;
 }
 .duet-theme-turva .duet-textarea::-moz-placeholder {
-  color: rgb(143, 147, 158);
+  color: rgb(120, 145, 164);
 }
 .duet-textarea:focus::-moz-placeholder {
   color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-textarea:focus::-moz-placeholder {
-  color: rgb(199, 202, 207);
+  color: rgb(178, 194, 205);
 }
 .duet-textarea:-ms-input-placeholder {
   color: rgb(98, 121, 138);
 }
 .duet-theme-turva .duet-textarea:-ms-input-placeholder {
-  color: rgb(143, 147, 158);
+  color: rgb(120, 145, 164);
 }
 .duet-textarea:focus:-ms-input-placeholder {
   color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-textarea:focus:-ms-input-placeholder {
-  color: rgb(199, 202, 207);
+  color: rgb(178, 194, 205);
 }
 .duet-textarea[disabled] {
   color: rgb(98, 121, 138) !important;
@@ -250,9 +250,9 @@ duet-tooltip,
   border-color: rgb(245, 248, 250) !important;
 }
 .duet-theme-turva .duet-textarea[disabled] {
-  color: rgb(143, 147, 158) !important;
-  background: rgb(245, 247, 250) !important;
-  border-color: rgb(245, 247, 250) !important;
+  color: rgb(120, 145, 164) !important;
+  background: rgb(245, 246, 247) !important;
+  border-color: rgb(245, 246, 247) !important;
 }
 .duet-textarea[disabled]::-webkit-input-placeholder {
   color: rgb(8, 42, 77);
@@ -260,20 +260,20 @@ duet-tooltip,
   transition: color 300ms ease;
 }
 .duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-textarea[disabled]::-moz-placeholder {
   color: rgb(8, 42, 77);
   opacity: 1 !important;
 }
 .duet-theme-turva .duet-textarea[disabled]::-moz-placeholder {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-textarea[disabled]:-ms-input-placeholder {
   color: rgb(8, 42, 77);
 }
 .duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-textarea:hover:not(:disabled) {
   outline: 2px solid;
@@ -293,7 +293,7 @@ duet-tooltip,
   transition: none;
 }
 .duet-theme-turva .duet-textarea:focus {
-  border-color: rgb(23, 28, 58);
+  border-color: rgb(23, 42, 59);
 }
 .has-error .duet-textarea:focus {
   outline: 1px solid;
@@ -315,7 +315,7 @@ duet-tooltip,
 }
 .duet-theme-turva .duet-textarea-help {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(143, 147, 158);
+  color: rgb(120, 145, 164);
 }
 .has-error .duet-textarea-help {
   color: rgb(214, 28, 82);

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

@@ -148,7 +148,7 @@
   box-shadow: none;
 }
 .duet-theme-turva .duet-switch input:checked + .duet-slider {
-  background-color: rgb(198, 12, 48);
+  background-color: rgb(230, 23, 64);
 }
 .duet-switch input:checked + .duet-slider::before {
   background-color: rgb(255, 255, 255);
@@ -157,7 +157,7 @@
 }
 .duet-theme-turva .duet-switch input:checked + .duet-slider::before {
   background-color: rgb(255, 255, 255);
-  box-shadow: -1px 0 2px #660619;
+  box-shadow: -1px 0 2px #890e26;
 }
 .duet-switch input:disabled + .duet-slider::before {
   box-shadow: none;
@@ -173,7 +173,7 @@
   box-shadow: none;
 }
 .duet-theme-turva .duet-switch input:disabled:not(:checked) + .duet-slider {
-  background: #c7c9cf;
+  background: #bcc8d2;
 }
 .duet-theme-turva .duet-switch input:disabled:not(:checked) + .duet-slider::before {
   background: rgb(255, 255, 255);
@@ -182,7 +182,7 @@
   background: #80bbd9;
 }
 .duet-theme-turva .duet-switch input:disabled:checked + .duet-slider {
-  background: #e38698;
+  background: #f38ba0;
 }
 :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider {
   outline: 2px solid;
@@ -226,7 +226,7 @@
   cursor: not-allowed;
 }
 .duet-theme-turva .duet-slider {
-  background-color: rgb(143, 147, 158);
+  background-color: rgb(120, 145, 164);
 }
 .duet-theme-turva .duet-slider::before {
   background-color: rgb(255, 255, 255);

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

@@ -71,10 +71,10 @@
   background: rgb(255, 255, 255);
 }
 .duet-toolbar.duet-theme-turva .container {
-  border-bottom: 1px solid rgb(222, 224, 228);
+  border-bottom: 1px solid rgb(212, 221, 226);
 }
 .duet-toolbar.duet-theme-turva.primary {
-  background: rgb(198, 12, 48);
+  background: rgb(230, 23, 64);
 }
 .duet-toolbar.duet-theme-turva.primary .container {
   border-bottom: 0;

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.css

@@ -109,17 +109,17 @@
 }
 .duet-toolbar-dropdown.duet-theme-turva button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-toolbar-dropdown.duet-theme-turva button:hover {
-  color: rgb(23, 28, 58);
-  background: rgb(245, 247, 250);
+  color: rgb(23, 42, 59);
+  background: rgb(245, 246, 247);
 }
 .duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-toolbar-dropdown.duet-theme-turva button.active::after, .duet-toolbar-dropdown.duet-theme-turva button.open::after {
-  background: rgb(198, 12, 48);
+  background: rgb(230, 23, 64);
 }
 .duet-toolbar-dropdown.duet-theme-turva .items {
   background: rgb(255, 255, 255);
@@ -148,19 +148,19 @@
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button:hover {
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button.active {
   font-weight: 600;
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon {
-  color: rgb(255, 185, 190);
+  color: rgb(255, 201, 204);
 }
 
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button {

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.css

@@ -56,19 +56,19 @@
 }
 .duet-toolbar-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";
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-toolbar-dropdown-link.active {
   background: rgb(240, 247, 250);
 }
 .duet-toolbar-dropdown-link.active.duet-theme-turva {
-  background: rgb(245, 247, 250);
+  background: rgb(245, 246, 247);
 }
 .duet-toolbar-dropdown-link:hover {
   background: rgb(228, 241, 247);
 }
 .duet-toolbar-dropdown-link:hover.duet-theme-turva {
-  background: rgb(222, 224, 228);
+  background: rgb(212, 221, 226);
 }
 
 :host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva {

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

@@ -95,16 +95,16 @@
 }
 .duet-toolbar-item.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";
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-toolbar-item.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
 }
 .duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true] {
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 .duet-toolbar-item.duet-theme-turva.primary duet-icon {
-  color: rgb(255, 185, 190);
+  color: rgb(255, 201, 204);
 }
 .duet-toolbar-item:hover {
   color: rgb(8, 42, 77);
@@ -120,12 +120,12 @@
   background: rgb(3, 56, 102);
 }
 .duet-toolbar-item:hover.duet-theme-turva {
-  color: rgb(23, 28, 58);
-  background: rgb(245, 247, 250);
+  color: rgb(23, 42, 59);
+  background: rgb(245, 246, 247);
 }
 .duet-toolbar-item:hover.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 .duet-toolbar-item.active {
   color: rgb(8, 42, 77);
@@ -157,17 +157,17 @@
   transition: 300ms ease;
 }
 .duet-toolbar-item.active::after.duet-theme-turva {
-  background: rgb(198, 12, 48);
+  background: rgb(230, 23, 64);
 }
 .duet-toolbar-item.active.duet-theme-turva {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-toolbar-item.active.duet-theme-turva::after {
-  background: rgb(198, 12, 48);
+  background: rgb(230, 23, 64);
 }
 .duet-toolbar-item.active.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 
 duet-indicator {

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.css

@@ -63,13 +63,13 @@
 }
 .duet-toolbar-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";
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-toolbar-link.duet-theme-turva.negative {
   color: rgb(255, 255, 255);
 }
 .duet-toolbar-link.duet-theme-turva.negative duet-icon {
-  color: rgb(255, 185, 190);
+  color: rgb(255, 201, 204);
 }
 .duet-toolbar-link:hover {
   color: rgb(8, 42, 77);
@@ -80,12 +80,12 @@
   background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-link:hover.duet-theme-turva {
-  color: rgb(23, 28, 58);
-  background: rgb(245, 247, 250);
+  color: rgb(23, 42, 59);
+  background: rgb(245, 246, 247);
 }
 .duet-toolbar-link:hover.duet-theme-turva.negative {
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 .duet-toolbar-link.active {
   color: rgb(8, 42, 77);
@@ -93,7 +93,7 @@
 .duet-toolbar-link.active.negative {
   font-weight: 600;
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 .duet-toolbar-link.active.negative::after {
   display: none;
@@ -112,17 +112,17 @@
   transition: 300ms ease;
 }
 .duet-toolbar-link.active::after.duet-theme-turva {
-  background: rgb(198, 12, 48);
+  background: rgb(230, 23, 64);
 }
 .duet-toolbar-link.active.duet-theme-turva {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-toolbar-link.active.duet-theme-turva::after {
-  background: rgb(198, 12, 48);
+  background: rgb(230, 23, 64);
 }
 .duet-toolbar-link.active.duet-theme-turva.negative {
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(23, 42, 59, 0.2);
 }
 
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva {

package/lib/collection/components/duet-tooltip/duet-tooltip-button.css

@@ -50,7 +50,7 @@
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tooltip-button.duet-theme-turva {
-  color: rgb(198, 12, 48);
+  color: rgb(230, 23, 64);
 }
 .duet-tooltip-button.duet-tooltip-button-negative {
   color: rgb(255, 255, 255);
@@ -59,7 +59,7 @@
   color: rgb(0, 75, 129);
 }
 .duet-tooltip-button:hover.duet-theme-turva {
-  color: rgb(126, 2, 35);
+  color: rgb(140, 0, 30);
 }
 .duet-tooltip-button:hover.duet-tooltip-button-negative {
   color: rgb(255, 255, 255);

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.css

@@ -44,8 +44,8 @@
 }
 .duet-tooltip.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";
-  color: rgb(23, 28, 58);
-  border-color: rgb(222, 224, 228);
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
   box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
 }
 .duet-tooltip .arrow {
@@ -93,7 +93,7 @@
   border-top: 11px solid rgb(212, 223, 229);
 }
 .duet-theme-turva .duet-tooltip .arrow-container.top::before, .duet-theme-turva .duet-tooltip .arrow-container.top-start::before, .duet-theme-turva .duet-tooltip .arrow-container.top-end::before {
-  border-top: 11px solid rgb(222, 224, 228);
+  border-top: 11px solid rgb(212, 221, 226);
 }
 .duet-tooltip .arrow-container.bottom::after, .duet-tooltip .arrow-container.bottom-start::after, .duet-tooltip .arrow-container.bottom-end::after {
   bottom: 1px;
@@ -108,7 +108,7 @@
   border-bottom: 11px solid rgb(212, 223, 229);
 }
 .duet-theme-turva .duet-tooltip .arrow-container.bottom::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-start::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-end::before {
-  border-top: 11px solid rgb(222, 224, 228);
+  border-top: 11px solid rgb(212, 221, 226);
 }
 .duet-tooltip.duet-tooltip-has-label {
   right: auto !important;
@@ -154,7 +154,7 @@
   border-radius: 4px;
 }
 .duet-theme-turva .duet-tooltip-content-area::-webkit-scrollbar-thumb {
-  background: rgb(222, 224, 228);
+  background: rgb(212, 221, 226);
 }
 
 .duet-tooltip-close {
@@ -188,7 +188,7 @@
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva .duet-tooltip-close {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 
 :host(.duet-theme-turva2) .duet-tooltip {

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

@@ -30,6 +30,7 @@ export class DuetTooltip {
          * Inlined decorator, alphabetical order.
          */
         this.placement = "bottom";
+        this.hidePopUp = true; // between open and close animations we fully hide the popup
         /**
          * Theme of the tooltip.
          */
@@ -107,7 +108,11 @@ export class DuetTooltip {
          * Local methods
          */
         this.openTooltip = () => {
-            this.active = true;
+            this.hidePopUp = false;
+            // Set active with delay for animation to start non-hidden
+            setTimeout(() => {
+                this.active = true;
+            });
             setTimeout(() => {
                 this.contentEl.focus({ preventScroll: true });
                 this.buttonActive = true;
@@ -126,6 +131,12 @@ export class DuetTooltip {
             setTimeout(() => {
                 this.updatePlacement();
             }, 200);
+            // Animation timeout is 300ms, hide after it
+            setTimeout(() => {
+                if (!this.active) {
+                    this.hidePopUp = true;
+                }
+            }, 300);
         };
         this.toggleOpen = () => {
             this.active ? this.closeTooltip() : this.openTooltip();
@@ -251,15 +262,9 @@ export class DuetTooltip {
             // top of other tooltips and the header.
             zIndex: this.active ? "201" : "",
         };
-        const popupContainerStyles = {
-            position: "relative",
-            overflow: this.active ? "visible" : "hidden",
-        };
         const positionStyles = {
             top: `${this.tooltipY}px`,
             left: `${this.tooltipX}px`,
-            display: "block",
-            "pointer-events": this.active ? "auto" : "none",
         };
         const arrowStyles = {
             top: this.arrowY ? `${this.arrowY}px` : undefined,
@@ -268,7 +273,7 @@ export class DuetTooltip {
         return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.buttonActive, tooltipId: this.tooltipId, label: this.label, accessibleLabel: (this.accessibleInputLabel && `${this.accessibleInputLabel}, ${this.accessibleLabel}`) ||
                 (this.accessibleAboutLabel &&
                     `${this.accessibleLabel} ${this.aboutString[this.language]} ${this.accessibleAboutLabel}`) ||
-                this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme, negative: this.negative }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
+                this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme, negative: this.negative }), h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, hidden: this.hidePopUp, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null))));
     }
     static get is() { return "duet-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -648,7 +653,8 @@ export class DuetTooltip {
             "tooltipX": {},
             "arrowX": {},
             "arrowY": {},
-            "buttonActive": {}
+            "buttonActive": {},
+            "hidePopUp": {}
         };
     }
     static get elementRef() { return "element"; }

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

@@ -70,9 +70,9 @@
 }
 .duet-tray.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";
-  color: rgb(23, 28, 58);
-  background: rgb(245, 247, 250);
-  border-color: rgb(222, 224, 228);
+  color: rgb(23, 42, 59);
+  background: rgb(245, 246, 247);
+  border-color: rgb(212, 221, 226);
 }
 .duet-tray.duet-tray-is-active {
   visibility: visible;
@@ -129,7 +129,7 @@
   border-top: 1px solid rgb(212, 223, 229);
 }
 .duet-theme-turva .duet-tray-expandable-content {
-  border-color: rgb(222, 224, 228);
+  border-color: rgb(212, 221, 226);
 }
 
 .duet-tray-button {
@@ -169,7 +169,7 @@
   }
 }
 .duet-theme-turva .duet-tray-button {
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 .duet-tray-button.duet-tray-is-expanded {
   transform: rotate(-180deg);