@duetds/components 10.2.3 → 10.3.0

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

@@ -49,7 +49,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva, .duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -107,23 +107,6 @@
   right: auto;
   left: 0%;
 }
-.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);
-}
-.duet-toolbar-dropdown.duet-theme-turva button:hover {
-  color: rgb(23, 28, 58);
-  background: rgb(245, 247, 250);
-}
-.duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open {
-  color: rgb(23, 28, 58);
-}
-.duet-toolbar-dropdown.duet-theme-turva button.active::after, .duet-toolbar-dropdown.duet-theme-turva button.open::after {
-  background: rgb(198, 12, 48);
-}
-.duet-toolbar-dropdown.duet-theme-turva .items {
-  background: rgb(255, 255, 255);
-}
 .duet-toolbar-dropdown.negative button {
   color: rgb(255, 255, 255);
 }
@@ -143,49 +126,53 @@
 .duet-toolbar-dropdown.negative button duet-icon {
   color: rgb(198, 225, 238);
 }
-.duet-toolbar-dropdown.duet-theme-turva.negative button {
-  color: rgb(255, 255, 255);
-}
-.duet-toolbar-dropdown.duet-theme-turva.negative button:hover {
-  color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 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);
-}
-.duet-toolbar-dropdown.duet-theme-turva.negative button.open {
-  color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
-}
-.duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon {
-  color: rgb(255, 185, 190);
-}
 
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button {
+.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, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button:hover {
+
+.duet-toolbar-dropdown.duet-theme-turva button:hover {
   color: rgb(23, 42, 59);
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.active::after,
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.open::after {
+
+.duet-toolbar-dropdown.duet-theme-turva button.active::after,
+.duet-toolbar-dropdown.duet-theme-turva button.open::after {
   background: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.active,
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.open {
+
+.duet-toolbar-dropdown.duet-theme-turva button.active,
+.duet-toolbar-dropdown.duet-theme-turva button.open {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button:hover,
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active,
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+
+.duet-toolbar-dropdown.duet-theme-turva.negative button {
+  color: rgb(255, 255, 255);
+}
+
+.duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon {
+  color: rgb(241, 202, 178);
+}
+
+.duet-toolbar-dropdown.duet-theme-turva.negative button.active {
+  font-weight: 600;
+}
+
+.duet-toolbar-dropdown.duet-theme-turva.negative button:hover,
+.duet-toolbar-dropdown.duet-theme-turva.negative button.active,
+.duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+  color: rgb(255, 255, 255);
   background: rgba(23, 42, 59, 0.2);
 }
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button {
+
+.duet-theme-turva .items {
+  background: rgb(255, 255, 255);
+}
+
+.duet-toolbar-dropdown.duet-theme-turva.negative button {
   color: rgb(255, 255, 255);
 }
-:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button:hover, :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active, :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+.duet-toolbar-dropdown.duet-theme-turva.negative button:hover, .duet-toolbar-dropdown.duet-theme-turva.negative button.active, .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
   color: rgb(255, 255, 255);
 }

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

@@ -45,7 +45,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -54,29 +54,22 @@
   flex: 1;
   text-align: left;
 }
-.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);
-}
 .duet-toolbar-dropdown-link.active {
   background: rgb(240, 247, 250);
 }
-.duet-toolbar-dropdown-link.active.duet-theme-turva {
-  background: rgb(245, 247, 250);
-}
 .duet-toolbar-dropdown-link:hover {
   background: rgb(228, 241, 247);
 }
-.duet-toolbar-dropdown-link:hover.duet-theme-turva {
-  background: rgb(222, 224, 228);
-}
 
-:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva {
+.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, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva.active {
+
+.duet-toolbar-dropdown-link.duet-theme-turva.active {
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva:hover {
+
+.duet-toolbar-dropdown-link.duet-theme-turva:hover {
   background: rgb(251, 225, 209);
 }

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

@@ -46,7 +46,7 @@
   outline-offset: -4px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva, .duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: -4px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -93,19 +93,6 @@
 .duet-toolbar-item.secondary[aria-expanded=true] {
   background: rgb(3, 56, 102);
 }
-.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);
-}
-.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);
-}
-.duet-toolbar-item.duet-theme-turva.primary duet-icon {
-  color: rgb(255, 185, 190);
-}
 .duet-toolbar-item:hover {
   color: rgb(8, 42, 77);
   background: rgb(240, 247, 250);
@@ -119,14 +106,6 @@
 .duet-toolbar-item:hover.secondary {
   background: rgb(3, 56, 102);
 }
-.duet-toolbar-item:hover.duet-theme-turva {
-  color: rgb(23, 28, 58);
-  background: rgb(245, 247, 250);
-}
-.duet-toolbar-item:hover.duet-theme-turva.primary {
-  color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
-}
 .duet-toolbar-item.active {
   color: rgb(8, 42, 77);
 }
@@ -156,19 +135,6 @@
   transform: translateY(1px);
   transition: 300ms ease;
 }
-.duet-toolbar-item.active::after.duet-theme-turva {
-  background: rgb(198, 12, 48);
-}
-.duet-toolbar-item.active.duet-theme-turva {
-  color: rgb(23, 28, 58);
-}
-.duet-toolbar-item.active.duet-theme-turva::after {
-  background: rgb(198, 12, 48);
-}
-.duet-toolbar-item.active.duet-theme-turva.primary {
-  color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
-}
 
 duet-indicator {
   top: 4px;
@@ -179,27 +145,47 @@ duet-indicator:has(+ .duet-toolbar-item .duet-toolbar-icon) {
   left: 36px;
 }
 
-:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:not(.primary) {
+.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";
+}
+
+.duet-toolbar-item.duet-theme-turva:not(.primary) {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true] {
+
+.duet-toolbar-item.duet-theme-turva.primary {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-item.duet-theme-turva.primary duet-icon {
+  color: rgb(241, 202, 178);
+}
+
+.duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true] {
   background: rgba(23, 42, 59, 0.2);
 }
-:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover {
+
+.duet-toolbar-item.duet-theme-turva:hover {
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover:not(.primary) {
+
+.duet-toolbar-item.duet-theme-turva:hover:not(.primary) {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover.primary {
+
+.duet-toolbar-item.duet-theme-turva:hover.primary {
+  color: rgb(255, 255, 255);
   background: rgba(23, 42, 59, 0.2);
 }
-:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva::after {
+
+.duet-toolbar-item.active.duet-theme-turva::after {
   background: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva:not(.primary) {
+
+.duet-toolbar-item.active.duet-theme-turva:not(.primary) {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva.primary {
+
+.duet-toolbar-item.active.duet-theme-turva.primary {
+  color: rgb(255, 255, 255);
   background: rgba(23, 42, 59, 0.2);
 }

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

@@ -45,7 +45,7 @@
   outline-offset: -4px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva, .duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: -4px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -61,16 +61,6 @@
 .duet-toolbar-link.negative duet-icon {
   color: rgb(198, 225, 238);
 }
-.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);
-}
-.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);
-}
 .duet-toolbar-link:hover {
   color: rgb(8, 42, 77);
   background: rgb(240, 247, 250);
@@ -79,21 +69,13 @@
   color: rgb(255, 255, 255);
   background: rgba(8, 42, 77, 0.2);
 }
-.duet-toolbar-link:hover.duet-theme-turva {
-  color: rgb(23, 28, 58);
-  background: rgb(245, 247, 250);
-}
-.duet-toolbar-link:hover.duet-theme-turva.negative {
-  color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
-}
 .duet-toolbar-link.active {
   color: rgb(8, 42, 77);
 }
 .duet-toolbar-link.active.negative {
   font-weight: 600;
   color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
+  background: rgba(8, 42, 77, 0.2);
 }
 .duet-toolbar-link.active.negative::after {
   display: none;
@@ -111,58 +93,52 @@
   transform: translateY(1px);
   transition: 300ms ease;
 }
-.duet-toolbar-link.active::after.duet-theme-turva {
-  background: rgb(198, 12, 48);
-}
-.duet-toolbar-link.active.duet-theme-turva {
-  color: rgb(23, 28, 58);
-}
-.duet-toolbar-link.active.duet-theme-turva::after {
-  background: rgb(198, 12, 48);
-}
-.duet-toolbar-link.active.duet-theme-turva.negative {
-  color: rgb(255, 255, 255);
-  background: rgba(23, 28, 58, 0.2);
-}
 
-:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva {
+.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, 42, 59);
   background: transparent;
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva.negative {
+.duet-toolbar-link.duet-theme-turva.negative {
   color: rgb(255, 255, 255);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva.negative duet-icon {
+.duet-toolbar-link.duet-theme-turva.negative duet-icon {
   color: rgb(255, 229, 230);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover {
+
+.duet-toolbar-link.duet-theme-turva:hover {
   color: rgb(23, 42, 59);
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative {
+.duet-toolbar-link.duet-theme-turva:hover.negative {
   color: rgb(255, 255, 255);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative duet-icon {
+.duet-toolbar-link.duet-theme-turva:hover.negative duet-icon {
   color: rgb(255, 229, 230);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative {
+
+.duet-toolbar-link.duet-theme-turva:hover.negative {
   background: rgba(23, 42, 59, 0.2);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva {
+
+.duet-toolbar-link.active.duet-theme-turva {
   color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva.negative {
+.duet-toolbar-link.active.duet-theme-turva.negative {
   color: rgb(255, 255, 255);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva.negative duet-icon {
+.duet-toolbar-link.active.duet-theme-turva.negative duet-icon {
   color: rgb(255, 229, 230);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva::after {
+
+.duet-toolbar-link.active.duet-theme-turva::after {
   background: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.active.negative {
+
+.duet-toolbar-link.active.negative {
   background: rgba(23, 42, 59, 0.2);
 }
-:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva.negative {
+
+.duet-toolbar-link.active.duet-theme-turva.negative {
   background: rgba(23, 42, 59, 0.2);
 }

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

@@ -46,21 +46,15 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva2 {
+.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
-.duet-tooltip-button.duet-theme-turva {
-  color: rgb(198, 12, 48);
-}
 .duet-tooltip-button.duet-tooltip-button-negative {
   color: rgb(255, 255, 255);
 }
 .duet-tooltip-button:hover {
   color: rgb(0, 75, 129);
 }
-.duet-tooltip-button:hover.duet-theme-turva {
-  color: rgb(126, 2, 35);
-}
 .duet-tooltip-button:hover.duet-tooltip-button-negative {
   color: rgb(255, 255, 255);
 }
@@ -91,13 +85,15 @@
   text-align: left;
   white-space: normal;
 }
-.duet-theme-turva .duet-tooltip-label {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
 
-:host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva {
+.duet-tooltip-button.duet-theme-turva {
   color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva:hover {
+
+.duet-tooltip-button.duet-theme-turva:hover {
   color: rgb(230, 23, 64);
+}
+
+.duet-theme-turva .duet-tooltip-label {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }

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

@@ -42,12 +42,6 @@
   transform-origin: 100% 100%;
   transition: 300ms ease;
 }
-.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);
-  box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
-}
 .duet-tooltip .arrow {
   position: absolute;
   width: 22px;
@@ -92,9 +86,6 @@
   border: 11px solid transparent;
   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);
-}
 .duet-tooltip .arrow-container.bottom::after, .duet-tooltip .arrow-container.bottom-start::after, .duet-tooltip .arrow-container.bottom-end::after {
   bottom: 1px;
   left: 2px;
@@ -107,9 +98,6 @@
   border: 11px solid transparent;
   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);
-}
 .duet-tooltip.duet-tooltip-has-label {
   right: auto !important;
   left: 0;
@@ -140,7 +128,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-content-area:focus, :host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-content-area:focus, :host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva2 {
+.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-content-area:focus, :host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-content-area:focus, :host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tooltip-content-area::-webkit-scrollbar {
@@ -153,9 +141,6 @@
   background: rgb(212, 223, 229);
   border-radius: 4px;
 }
-.duet-theme-turva .duet-tooltip-content-area::-webkit-scrollbar-thumb {
-  background: rgb(222, 224, 228);
-}
 
 .duet-tooltip-close {
   position: absolute;
@@ -182,36 +167,38 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-tooltip-close:focus, .duet-tooltip-close:focus.duet-theme-turva, .duet-theme-turva2 .duet-tooltip-close:focus, .duet-tooltip-close:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-tooltip-close:focus, .duet-tooltip-close:focus.duet-theme-turva, .duet-theme-turva .duet-tooltip-close:focus, .duet-tooltip-close:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva .duet-tooltip-close {
-  color: rgb(23, 28, 58);
-}
-
-:host(.duet-theme-turva2) .duet-tooltip {
   color: rgb(23, 42, 59);
-  border-color: rgb(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-tooltip.duet-theme-turva {
+
+.duet-theme-turva.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, 42, 59);
   border-color: rgb(212, 221, 226);
+  box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
 }
-:host(.duet-theme-turva2) .duet-tooltip .arrow-container.top::before,
-:host(.duet-theme-turva2) .duet-tooltip .arrow-container.top-start::before,
-:host(.duet-theme-turva2) .duet-tooltip .arrow-container.top-end::before {
+
+.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(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom::before,
-:host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom-start::before,
-:host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom-end::before {
+
+.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-bottom: 11px solid rgb(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-tooltip-content-area::-webkit-scrollbar-thumb {
+
+.duet-theme-turva .duet-tooltip-content-area::-webkit-scrollbar-thumb {
   background: rgb(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-tooltip-close {
+
+.duet-theme-turva .duet-tooltip-close {
   color: rgb(23, 42, 59);
 }

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"; }