@duetds/components 10.2.4 → 10.3.1

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

@@ -157,7 +157,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-button:focus, .duet-button:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
@@ -169,26 +169,15 @@
   font-size: 1rem;
   border-radius: 25px;
 }
-.duet-theme-turva .duet-button.duet-button-size-medium {
-  padding-right: 24px;
-  padding-left: 24px;
-  border-radius: 12.5px;
-}
 .duet-button.duet-button-size-medium.square {
   border-radius: 12.5px;
 }
 .duet-button.duet-button-size-medium.icon-left {
   padding-left: 24px;
 }
-.duet-theme-turva .duet-button.duet-button-size-medium.icon-left {
-  padding-left: 18px;
-}
 .duet-button.duet-button-size-medium.icon-right {
   padding-right: 24px;
 }
-.duet-theme-turva .duet-button.duet-button-size-medium.icon-right {
-  padding-right: 18px;
-}
 .duet-button.duet-button-size-small {
   height: 40px;
   padding-right: 20px;
@@ -196,26 +185,15 @@
   font-size: 0.875rem;
   border-radius: 20px;
 }
-.duet-theme-turva .duet-button.duet-button-size-small {
-  padding-right: 18px;
-  padding-left: 18px;
-  border-radius: 10px;
-}
 .duet-button.duet-button-size-small.square {
   border-radius: 10px;
 }
 .duet-button.duet-button-size-small.icon-left {
   padding-left: 18px;
 }
-.duet-theme-turva .duet-button.duet-button-size-small.icon-left {
-  padding-left: 14px;
-}
 .duet-button.duet-button-size-small.icon-right {
   padding-right: 18px;
 }
-.duet-theme-turva .duet-button.duet-button-size-small.icon-right {
-  padding-right: 14px;
-}
 .duet-button.duet-button-size-x-small {
   height: 32px;
   padding-right: 12px;
@@ -248,10 +226,6 @@
 .duet-button.duet-button-is-small:not(.duet-button-icon-only).duet-p-0 {
   padding: 0 !important;
 }
-.duet-theme-turva .duet-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(230, 23, 64) !important;
-}
 .duet-button .duet-button-contents {
   position: relative;
   display: flex;
@@ -303,90 +277,51 @@
   background: rgb(255, 255, 255);
   border-color: rgb(181, 198, 208);
 }
-.duet-theme-turva .duet-button.default {
-  color: rgb(230, 23, 64) !important;
-  border-color: rgb(212, 221, 226);
-}
 .duet-button.default:hover {
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .duet-button.default:hover {
-  outline-color: rgb(230, 23, 64);
-  border-color: rgb(230, 23, 64);
-}
 .duet-button.default.duet-button-negative {
   background-color: rgb(255, 255, 255);
 }
-.duet-theme-turva .duet-button.default.duet-button-negative {
-  background-color: rgb(212, 221, 226) !important;
-}
 .duet-button.default.duet-button-negative:hover {
   color: rgb(0, 119, 179) !important;
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .duet-button.default.duet-button-negative:hover {
-  color: rgb(230, 23, 64) !important;
-  border-color: rgb(230, 23, 64);
-}
 .duet-button.primary, .duet-button.input-button-primary, .duet-button.input-button-left-primary {
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179);
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .duet-button.primary, .duet-theme-turva .duet-button.input-button-primary, .duet-theme-turva .duet-button.input-button-left-primary {
-  color: rgb(255, 255, 255) !important;
-  background: rgb(230, 23, 64);
-  border-color: rgb(230, 23, 64);
-}
 .duet-button.primary:hover, .duet-button.input-button-primary:hover, .duet-button.input-button-left-primary:hover {
   background: #005f8f;
   border-color: #005f8f;
   box-shadow: 0 4px 20px 0 rgba(34, 34, 34, 0.1);
 }
-.duet-theme-turva .duet-button.primary:hover, .duet-theme-turva .duet-button.input-button-primary:hover, .duet-theme-turva .duet-button.input-button-left-primary:hover {
-  background: rgb(140, 0, 30);
-  border-color: rgb(140, 0, 30);
-}
 .duet-button.secondary, .duet-button.input-button-secondary, .duet-button.input-button-left-secondary, .duet-button.input-button-embedded {
   color: rgb(8, 42, 77) !important;
   background: transparent;
   border-color: rgb(8, 42, 77);
 }
-.duet-theme-turva .duet-button.secondary, .duet-theme-turva .duet-button.input-button-secondary, .duet-theme-turva .duet-button.input-button-left-secondary, .duet-theme-turva .duet-button.input-button-embedded {
-  color: rgb(23, 42, 59) !important;
-  border-color: rgb(23, 42, 59);
-}
 .duet-button.secondary:hover, .duet-button.input-button-secondary:hover, .duet-button.input-button-left-secondary:hover, .duet-button.input-button-embedded:hover {
   color: rgb(0, 119, 179) !important;
   border-color: rgb(0, 119, 179);
   outline: 2px solid;
-  outline-color: rgb(98, 121, 138);
+  outline-color: rgb(127, 150, 165) !important;
   outline-offset: -1px;
 }
-.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva2 {
-  outline-color: rgb(120, 145, 164);
-}
-.duet-theme-turva .duet-button.secondary:hover, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-theme-turva .duet-button.input-button-embedded:hover {
-  color: rgb(230, 23, 64) !important;
-  border-color: rgb(230, 23, 64);
+.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva {
+  outline-color: rgb(120, 145, 164) !important;
 }
 .duet-button.secondary.duet-button-negative, .duet-button.input-button-secondary.duet-button-negative, .duet-button.input-button-left-secondary.duet-button-negative, .duet-button.input-button-embedded.duet-button-negative {
   color: rgb(212, 223, 229) !important;
   border-color: rgb(255, 255, 255);
 }
-.duet-theme-turva .duet-button.secondary.duet-button-negative, .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative, .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative, .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative {
-  color: rgb(212, 221, 226) !important;
-}
 .duet-button.secondary.duet-button-negative:hover, .duet-button.input-button-secondary.duet-button-negative:hover, .duet-button.input-button-left-secondary.duet-button-negative:hover, .duet-button.input-button-embedded.duet-button-negative:hover {
   color: rgb(0, 119, 179) !important;
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .duet-button.secondary.duet-button-negative:hover, .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover, .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative:hover, .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover {
-  color: rgb(230, 23, 64) !important;
-  border-color: rgb(230, 23, 64);
-}
 .duet-button.input-button-embedded {
   width: 40px;
   min-width: 40px !important;
@@ -403,9 +338,6 @@
   background: rgb(255, 255, 255);
   border-color: rgb(255, 255, 255);
 }
-.duet-theme-turva .duet-button.negative {
-  color: rgb(23, 42, 59) !important;
-}
 .duet-button.negative:hover {
   color: rgb(255, 255, 255) !important;
   background: transparent;
@@ -416,39 +348,21 @@
   background: rgb(214, 28, 82);
   border-color: rgb(214, 28, 82);
 }
-.duet-theme-turva .duet-button.destructive-primary {
-  color: rgb(255, 255, 255) !important;
-  background: rgb(214, 28, 82);
-  border-color: rgb(214, 28, 82);
-}
 .duet-button.destructive-primary:hover {
   background: #ab1642;
   border-color: #ab1642;
   box-shadow: 0 4px 20px 0 rgba(34, 34, 34, 0.1);
 }
-.duet-theme-turva .duet-button.destructive-primary:hover {
-  background: #ab1642;
-}
 .duet-button.destructive, .duet-button.destructive-secondary {
   color: rgb(214, 28, 82) !important;
   background: rgb(255, 255, 255);
   border-color: rgb(214, 28, 82);
 }
-.duet-theme-turva .duet-button.destructive, .duet-theme-turva .duet-button.destructive-secondary {
-  color: rgb(214, 28, 82) !important;
-  background: rgb(255, 255, 255);
-  border-color: rgb(214, 28, 82);
-}
 .duet-button.destructive:hover, .duet-button.destructive-secondary:hover {
   color: rgb(255, 255, 255) !important;
   background: #ab1642;
   border-color: #ab1642;
 }
-.duet-theme-turva .duet-button.destructive:hover, .duet-theme-turva .duet-button.destructive-secondary:hover {
-  color: rgb(255, 255, 255) !important;
-  background: #ab1642;
-  border-color: #ab1642;
-}
 .duet-button.plain {
   min-width: 48px;
   padding-right: 0 !important;
@@ -460,11 +374,6 @@
   border-color: transparent;
   border-radius: 4px;
 }
-.duet-theme-turva .duet-button.plain {
-  color: rgb(230, 23, 64) !important;
-  background: transparent;
-  border-color: transparent;
-}
 .duet-button.plain.duet-p-0 .duet-button-contents {
   height: auto;
 }
@@ -474,25 +383,13 @@
   background: transparent !important;
   border-color: transparent !important;
 }
-.duet-theme-turva .duet-button.plain[disabled], .duet-theme-turva .duet-button.plain[disabled]:hover {
-  color: rgb(95, 122, 143) !important;
-  cursor: not-allowed;
-  background: transparent !important;
-  border-color: rgb(212, 221, 226) !important;
-}
 .duet-button.plain:hover {
   color: rgb(0, 75, 129) !important;
   background: transparent !important;
 }
-.duet-theme-turva .duet-button.plain:hover {
-  color: rgb(140, 0, 30) !important;
-}
 .duet-button.plain.duet-button-negative {
   color: rgb(255, 255, 255) !important;
 }
-.duet-theme-turva .duet-button.plain.duet-button-negative {
-  color: rgb(255, 255, 255) !important;
-}
 .duet-button.plain.duet-button-negative:hover {
   color: rgba(255, 255, 255, 0.8) !important;
 }
@@ -532,8 +429,8 @@
 }
 .duet-button.duet-button.input-button-primary, .duet-button.duet-button.input-button-secondary, .duet-button.duet-button.input-button-embedded {
   border-top-left-radius: 0;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px !important;
+  border-bottom-right-radius: 4px !important;
   border-bottom-left-radius: 0;
 }
 .duet-button.duet-button.input-button-primary .duet-button-icon.left.large,
@@ -554,14 +451,17 @@
   border-left-width: 0;
 }
 .duet-button.duet-button.input-button-left-primary, .duet-button.duet-button.input-button-left-secondary {
-  border-top-left-radius: 4px;
+  border-top-left-radius: 4px !important;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 4px !important;
 }
 .duet-button.duet-button.input-button-left-primary .duet-button-contents, .duet-button.duet-button.input-button-left-secondary .duet-button-contents {
   position: static;
 }
+.duet-button.duet-button.input-button-secondary, .duet-button.duet-button.input-button-left-secondary {
+  border-color: rgb(127, 150, 165);
+}
 .duet-button.square {
   width: 52px;
   min-width: auto !important;
@@ -583,23 +483,11 @@
   background: rgb(0, 119, 179);
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .duet-button.square.duet-button-negative {
-  color: rgb(255, 255, 255) !important;
-  background: rgb(230, 23, 64);
-  border-color: rgb(230, 23, 64);
-}
-.duet-theme-turva .duet-button.square {
-  border-color: rgb(212, 221, 226);
-}
 .duet-button.square:hover {
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .duet-button.square:hover {
-  outline-color: rgb(230, 23, 64);
-  border-color: rgb(230, 23, 64);
-}
 .duet-button.square .duet-button-contents {
   gap: 0;
 }
@@ -613,13 +501,6 @@
   border-color: rgb(212, 223, 229) !important;
   box-shadow: none !important;
 }
-.duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button[disabled]:hover, .duet-theme-turva .duet-button.duet-button-negative [disabled], .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
-  color: rgb(120, 145, 164) !important;
-  cursor: not-allowed;
-  outline-color: rgb(212, 221, 226) !important;
-  background: rgb(212, 221, 226) !important;
-  border-color: rgb(212, 221, 226) !important;
-}
 
 .duet-button-is-loading.primary, .duet-button-is-loading.input-button-primary {
   color: rgb(255, 255, 255);
@@ -627,101 +508,148 @@
 .duet-button-is-loading.default {
   color: rgb(0, 119, 179);
 }
-.duet-button-is-loading.default.duet-theme-turva {
-  color: rgb(230, 23, 64);
-}
 .duet-button-is-loading .duet-button-contents {
   visibility: hidden;
   opacity: 0;
 }
 
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button {
+.duet-theme-turva .duet-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(230, 23, 64) !important;
+  border-radius: 8px;
+}
+.duet-theme-turva .duet-button.duet-button-size-medium {
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 8px;
+}
+.duet-theme-turva .duet-button.duet-button-size-medium.icon-left {
+  padding-left: 14px;
+}
+.duet-theme-turva .duet-button.duet-button-size-medium.icon-right {
+  padding-right: 14px;
+}
+.duet-theme-turva .duet-button.duet-button-size-small {
+  padding-right: 18px;
+  padding-left: 18px;
   border-radius: 8px;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default {
+.duet-theme-turva .duet-button.duet-button-size-small.icon-left {
+  padding-left: 18px;
+}
+.duet-theme-turva .duet-button.duet-button-size-small.icon-right {
+  padding-right: 18px;
+}
+.duet-theme-turva .duet-button.default {
   color: rgb(230, 23, 64) !important;
   border-color: rgb(178, 194, 205);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default:hover {
+.duet-theme-turva .duet-button.default:hover {
   outline-color: rgb(230, 23, 64);
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative {
+.duet-theme-turva .duet-button.default.duet-button-negative {
   background-color: rgb(251, 225, 209) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative:hover {
+.duet-theme-turva .duet-button.default.duet-button-negative:hover {
   color: rgb(230, 23, 64) !important;
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-primary {
+.duet-theme-turva .duet-button.primary, .duet-theme-turva .duet-button.input-button-primary, .duet-theme-turva .duet-button.input-button-left-primary {
+  color: rgb(255, 255, 255) !important;
   background: rgb(230, 23, 64);
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.primary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-primary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-primary:hover {
+.duet-theme-turva .duet-button.primary:hover, .duet-theme-turva .duet-button.input-button-primary:hover, .duet-theme-turva .duet-button.input-button-left-primary:hover {
   background: rgb(140, 0, 30);
   border-color: rgb(140, 0, 30);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded {
+.duet-theme-turva .duet-button.secondary, .duet-theme-turva .duet-button.input-button-secondary, .duet-theme-turva .duet-button.input-button-left-secondary, .duet-theme-turva .duet-button.input-button-embedded {
   color: rgb(23, 42, 59) !important;
   border-color: rgb(23, 42, 59);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded:hover {
+.duet-theme-turva .duet-button.secondary:hover, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-theme-turva .duet-button.input-button-embedded:hover {
   color: rgb(230, 23, 64) !important;
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative {
+.duet-theme-turva .duet-button.secondary.duet-button-negative, .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative, .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative, .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative {
   color: rgb(251, 225, 209) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover {
+.duet-theme-turva .duet-button.secondary.duet-button-negative:hover, .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover, .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative:hover, .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover {
   color: rgb(230, 23, 64) !important;
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-embedded {
+.duet-theme-turva .duet-button.duet-button.input-button-primary, .duet-theme-turva .duet-button.duet-button.input-button-secondary, .duet-theme-turva .duet-button.duet-button.input-button-embedded {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-secondary {
+.duet-theme-turva .duet-button.duet-button.input-button-left-primary, .duet-theme-turva .duet-button.duet-button.input-button-left-secondary {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative {
+.duet-theme-turva .duet-button.duet-button.input-button-secondary, .duet-theme-turva .duet-button.duet-button.input-button-left-secondary {
+  border-color: rgb(120, 145, 164);
+}
+.duet-theme-turva .duet-button.negative {
   color: rgb(23, 42, 59) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative:hover {
+.duet-theme-turva .duet-button.negative:hover {
+  color: rgb(255, 255, 255) !important;
+}
+.duet-theme-turva .duet-button.destructive-primary {
   color: rgb(255, 255, 255) !important;
+  background: rgb(214, 28, 82);
+  border-color: rgb(214, 28, 82);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain {
+.duet-theme-turva .duet-button.destructive-primary:hover {
+  background: #ab1642;
+}
+.duet-theme-turva .duet-button.destructive, .duet-theme-turva .duet-button.destructive-secondary {
+  color: rgb(214, 28, 82) !important;
+  background: rgb(255, 255, 255);
+  border-color: rgb(214, 28, 82);
+}
+.duet-theme-turva .duet-button.destructive:hover, .duet-theme-turva .duet-button.destructive-secondary:hover {
+  color: rgb(255, 255, 255) !important;
+  background: #ab1642;
+  border-color: #ab1642;
+}
+.duet-theme-turva .duet-button.plain {
   color: rgb(230, 23, 64) !important;
+  background: transparent;
+  border-color: transparent;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain.duet-button-negative {
+.duet-theme-turva .duet-button.plain.duet-button-negative {
   color: rgb(255, 255, 255) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain:hover {
+.duet-theme-turva .duet-button.plain:hover {
   color: rgb(140, 0, 30) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled]:hover {
+.duet-theme-turva .duet-button.plain[disabled], .duet-theme-turva .duet-button.plain[disabled]:hover {
   color: rgb(95, 122, 143) !important;
+  cursor: not-allowed;
   background: transparent !important;
   border-color: rgb(251, 225, 209) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square {
+.duet-theme-turva .duet-button.square {
   border-color: rgb(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square.duet-button-negative {
+.duet-theme-turva .duet-button.square.duet-button-negative {
+  color: rgb(255, 255, 255) !important;
   background: rgb(230, 23, 64);
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square:hover {
+.duet-theme-turva .duet-button.square:hover {
   outline-color: rgb(230, 23, 64);
   border-color: rgb(230, 23, 64);
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled]:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
+.duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button[disabled]:hover, .duet-theme-turva .duet-button.duet-button-negative [disabled], .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
   color: rgb(120, 145, 164) !important;
   cursor: not-allowed;
   outline-color: rgb(212, 221, 226) !important;
   background: rgb(212, 221, 226) !important;
   border-color: rgb(212, 221, 226) !important;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button-is-loading.default {
+.duet-theme-turva .duet-button-is-loading.default {
   color: rgb(230, 23, 64);
 }

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

@@ -257,12 +257,27 @@ export class DuetButton {
         // enforce consistency for external links
         const icon = isExternalLink ? "action-new-window" : this.icon;
         const iconRight = isExternalLink ? true : this.iconRight;
-        const commonChildren = (h("span", { key: '4b6618222c037ec329c118f7ad247b9fd514e878', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color, this.theme) } }, icon && (h("span", { key: '67492c9b50231879ba232f7c6bcdadcb2d219875', "aria-hidden": "true", class: {
+        const getSpinnerColor = () => {
+            if (this.disabled) {
+                return "primary";
+            }
+            if (this.variation === "destructive-secondary") {
+                return "color-status-foreground-danger-primary";
+            }
+            if (this.variation === "default" || this.variation.includes("secondary")) {
+                return "primary";
+            }
+            if (this.variation.includes("destructive")) {
+                return "gray-lightest";
+            }
+            return "currentColor";
+        };
+        const commonChildren = (h("span", { class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color, this.theme) } }, icon && (h("span", { "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, h("duet-icon", { key: 'fce0630d78df187c2a7f3946ff3d262c43e5ce95', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: '34d608211bac6921c4aec51f71a9b33e2ac2b7b0', class: "duet-button-contents-slot" }, h("slot", { key: 'b2478d851993c148be6a83a76f9f725469bc9944' }))));
+            } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { class: "duet-button-contents-slot" }, h("slot", null))));
         const size = this.size == "medium" || this.size == "small" || this.size == "x-small" ? this.size : "medium";
         const commonProps = {
             onFocus: this.onFocus,
@@ -297,7 +312,7 @@ export class DuetButton {
             "aria-details": this.accessibleDetails,
             "aria-description": this.accessibleDescription,
         };
-        return (h(Host, { key: 'c70e2d9cbe884c7b6cc3012721f01ce6d54b4555', class: {
+        return (h(Host, { class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
@@ -305,13 +320,13 @@ export class DuetButton {
                 "duet-expand": this.expand,
                 [this.variation]: true,
                 "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
-            } }, h("span", { key: 'c8be7792d2ae572befbfbe921a3ec453c073637d', onClick: this.handleClick, class: {
+            } }, h("span", { onClick: this.handleClick, class: {
                 "duet-button-container": true,
                 "duet-button-is-loading": this.loading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-button-negative": this.negative || this.variation === "negative",
                 [this.variation]: true,
-            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { key: 'da956cda627d2afc5084ee69629b54ffabcb672b', color: "currentColor" })), h("slot", { key: '0ead01a475d6242c0049a259f9b9c725830d4b80', name: "proxybutton" })));
+            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { color: getSpinnerColor() })), h("slot", { name: "proxybutton" })));
     }
     static get is() { return "duet-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,18 +56,14 @@ figure {
 .duet-callout .author {
   color: rgb(8, 42, 77);
 }
+.duet-callout.duet-m-0 {
+  margin: 0 !important;
+}
+
 .duet-callout.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-callout.duet-theme-turva .author,
 .duet-callout.duet-theme-turva blockquote {
   color: rgb(23, 42, 59);
-}
-.duet-callout.duet-m-0 {
-  margin: 0 !important;
-}
-
-:host(.duet-theme-turva2) .duet-callout.duet-theme-turva .author,
-:host(.duet-theme-turva2) .duet-callout.duet-theme-turva blockquote {
-  color: rgb(23, 42, 59);
 }

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

@@ -37,11 +37,11 @@ export class DuetCallout {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (h(Host, { key: 'b082df5828c66c540240a355c2143bdc97cdeda2' }, h("div", { key: '318c40bc242a649eb1e74191703e77ef9f567dac', class: {
+        return (h(Host, { key: 'c491469b698a73c9a411cf3f660770be81879bd7' }, h("div", { key: '4c7e1af2f3c229e617d04c0aaf1355bce04a2d6d', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("figure", { key: '4c7ff23d3c646e8e37452488aba5b9a28344625f', class: "container" }, h("duet-icon", { key: 'd5234359ce6513b20a552366603498b7dc5729f5', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '67ab9a0d89f6abff523b8ca16a20c2a67865b86a' }, h("slot", { key: 'fc4670a439f114411b42ce3dcd8ef7f365fa650c' })), this.hasAuthorSlot && (h("figcaption", { key: '9d1b92d3229bef3447e7b5590efc766d4efb2ad6', class: "author" }, h("span", { key: '5310ad556c87706338d0a75058107d2e4d1fe241' }, "\u2014 "), h("slot", { key: 'f7281f1633a536bd242831e952ca1bc240b98b1c', name: "author" })))))));
+            } }, h("figure", { key: 'eb03690c450a0d767e18bffdbce24d83e3334e65', class: "container" }, h("duet-icon", { key: '1695f3f5c59f29b3497a9df3269e791bc19095a6', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", { key: '6297aefa621ef90e3cb100bcfd07c798cf9b378a' }, h("slot", { key: '14186875763fbf1989d9de9cb90706be15de8508' })), this.hasAuthorSlot && (h("figcaption", { key: 'c17e4fe83fb3c067c4c91369ee6d80a2a6abf3a8', class: "author" }, h("span", { key: 'fac4c2303e1ff78e28fd1538ab43d1b19e84610f' }, "\u2014 "), h("slot", { key: '648acac653c20369d7d52a5537c43175cb4dbd5d', name: "author" })))))));
     }
     static get is() { return "duet-callout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,23 +30,19 @@
   line-height: 1.25;
 }
 
-:host(.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(72, 100, 122);
-}
-
 :host(.duet-caption-selected) {
   color: rgb(0, 119, 179);
 }
 
-:host(.duet-caption-selected.duet-theme-turva) {
-  color: rgb(23, 42, 59);
-}
-
 :host(.duet-m-0) {
   margin: 0 !important;
 }
 
-:host(.duet-theme-turva2.duet-caption-selected.duet-theme-turva) {
+:host(.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(72, 100, 122);
+}
+
+:host(.duet-theme-turva.duet-caption-selected.duet-theme-turva) {
   color: rgb(23, 42, 59);
 }

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

@@ -33,13 +33,13 @@ export class DuetCaption {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6536dfff2137c85741a34401a550ecd205ba897a', class: {
+        return (h(Host, { key: 'f0006c630adf5dfdffecf1694f5f132b6bbfc285', class: {
                 "duet-caption": true,
                 "duet-caption-selected": this.selected,
                 "duet-caption-small": this.size === "small",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, h("slot", { key: '61789c613b54670e42ca147df64c22c5896d7cec' })));
+            } }, h("slot", { key: '6d6fcee0296c8e2c445b048b3cde5a6fdee74f66' })));
     }
     static get is() { return "duet-caption"; }
     static get encapsulation() { return "shadow"; }