@duetds/components 10.2.4 → 10.3.0

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

@@ -120,12 +120,6 @@
   bottom: 30px;
   left: 15px;
 }
-.duet-banner.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-banner.duet-theme-turva .visual .brand-shape {
-  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.size-medium, .duet-banner.size-large {
     grid-template-rows: none;
@@ -216,10 +210,11 @@
   }
 }
 
-:host(.duet-theme-turva2) .duet-banner {
+.duet-banner.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";
   border-radius: 12px;
 }
-:host(.duet-theme-turva2) .duet-banner .visual .brand-shape {
+.duet-banner.duet-theme-turva .visual .brand-shape {
   right: 0;
   bottom: 0;
   left: 0;
@@ -230,29 +225,29 @@
   mask-size: contain;
   scale: 101%;
 }
-:host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
+.duet-banner.duet-theme-turva.size-medium .visual, .duet-banner.duet-theme-turva.size-large .visual {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 }
 @container duet-banner-container (min-width: 486px) {
-  :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
+  .duet-banner.duet-theme-turva.size-medium, .duet-banner.duet-theme-turva.size-large {
     grid-template-columns: 1fr 1fr;
     gap: 28px;
     border-radius: 12px;
   }
-  :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
+  .duet-banner.duet-theme-turva.size-medium .visual, .duet-banner.duet-theme-turva.size-large .visual {
     border-top-left-radius: 12px;
     border-top-right-radius: 0;
     border-bottom-left-radius: 12px;
   }
-  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image-container, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image-container {
+  .duet-banner.duet-theme-turva.size-medium .visual .image-container, .duet-banner.duet-theme-turva.size-large .visual .image-container {
     padding: 20px;
     padding-right: 0;
   }
-  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image {
+  .duet-banner.duet-theme-turva.size-medium .visual .image, .duet-banner.duet-theme-turva.size-large .visual .image {
     border-radius: 12px;
   }
-  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {
+  .duet-banner.duet-theme-turva.size-medium .visual .brand-shape, .duet-banner.duet-theme-turva.size-large .visual .brand-shape {
     display: none;
   }
 }

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

@@ -84,15 +84,9 @@ export class DuetBanner {
                 }
             }
         };
-        this.isTurva2 = () => { var _a; return (_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2"); };
         this.getBackgroundColor = () => {
             if (this.theme === "turva" && this.backgroundColor === "primary-lighter") {
-                if (this.isTurva2()) {
-                    return getColorByName("turva-nude-50", this.theme);
-                }
-                else {
-                    return getColorByName("gray-lighter", this.theme);
-                }
+                return getColorByName("turva-nude-50", this.theme);
             }
             return getColorByName(this.backgroundColor, this.theme);
         };
@@ -137,14 +131,14 @@ export class DuetBanner {
             },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: '38f57d004daf85f022fb1e8289a00d63dbe78a31', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0667b2510bdf502f24178e226897239cc0905843', class: {
+        return (h(Host, { key: 'ec3c5d6beeaa0ce741981f6a971688e960eed3b6', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '4cbac455a959574b24943d69631a22d14fabbe73', class: {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, h("div", { key: 'b7266d2d9986afecfc9fa233950090500ac811b4', class: "visual" }, h("div", { key: 'a3b71e01ad58dd30a19413c2daad81fc0e5f617d', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '8f687c33222c1f483c4354506729bd508c784f0f' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '884f621a10b6dfbce2073ffe2bcce6d3582d4dcd', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: 'cab35290e96c82eaee8605e89646a239de7396b0', style: bannerStyles, class: "brand-shape" })), h("div", { key: 'b05d73b8fa653e30db6e5310c017b2890ba0d572', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'b5cb84dbabf050477d224f323b18b25d26e65a42', class: "heading" }, h("duet-heading", { key: '581d34f383f4679e06407583eadeacc0e2f651b4', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '285c1d82691487108eb3e52c8df65eb495b803dc' }, h("slot", { key: 'ba3c94dfe9dfc6900d41fe31ecd716e4c08bbaaa', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'f9d06d854f0dab9e11c1945436eca5757696818d', class: "description", style: { color } }, h("slot", { key: '72d05e038ee1a75f3c2ff6d353c0cc7891f00e06', name: "description" }))), this.hasActionSlot && (h("div", { key: '6f27c979244fd9093fbe55d3fb375f7b6c18711c', class: "action" }, h("slot", { key: '82532736b2e53a5020afc769526a0b824716cd66', name: "action" })))))));
+            }, style: bannerStyles }, h("div", { key: 'ee894a68d724b43fafecb28eb7897a65f87aa23d', class: "visual" }, h("div", { key: 'ee775cc574ef4c35ffb102c2b48edc4503d2b125', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '10e81967a6f3b1b043c0b827205bd84ca35ab619' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '648394976e5fde03c6ca0173ffd4afa10dfdaa09', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: '1c812c43664c2382e7184ed3585861bbb5c5449c', style: bannerStyles, class: "brand-shape" })), h("div", { key: 'd392ef10ca33710d1fdfaa1358a2cb7b8304fc7c', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'fd7c929f342d4b88a10b36fe786c2c54d87547c3', class: "heading" }, h("duet-heading", { key: '0da56a19fd6b42387d740287d0dc0e071b8d3b40', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '7477ecbec68bd3914dd52b6252deee05dd50fa19' }, h("slot", { key: 'c0be31d29707a4838a22e5b1d408dc238362656e', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'f9a6bc030a79e97ddf077df73fa0128091ae6191', class: "description", style: { color } }, h("slot", { key: '82bdd4eff6b737f1761bf68985996fc68f1fa569', name: "description" }))), this.hasActionSlot && (h("div", { key: 'e4a9e4ec9f5d9df23c09e35231237a4edf5bf567', class: "action" }, h("slot", { key: 'add56a2f4dd3b1ecf2c10d105b54d15caf11fd29', name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.css

@@ -64,6 +64,6 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva2 {
+.duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }

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

@@ -82,13 +82,6 @@
   display: block;
   background: rgb(212, 223, 229);
 }
-.duet-breadcrumbs.header.duet-theme-turva {
-  color: rgb(23, 42, 59);
-  background: rgb(245, 246, 247);
-}
-.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover {
-  color: rgb(140, 0, 30);
-}
 .duet-breadcrumbs.footer {
   color: rgb(255, 255, 255);
   background: rgb(8, 42, 77);
@@ -126,10 +119,6 @@
   display: block;
   background: rgba(255, 255, 255, 0.2);
 }
-.duet-breadcrumbs.footer.duet-theme-turva {
-  color: rgb(255, 255, 255);
-  background: rgb(230, 23, 64);
-}
 .duet-breadcrumbs.plain .container {
   max-width: none;
   min-height: auto;
@@ -142,13 +131,14 @@
   display: none;
 }
 
-:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header {
+.duet-breadcrumbs.duet-theme-turva.header {
   color: rgb(23, 42, 59);
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover {
+.duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover {
   color: rgb(140, 0, 30);
 }
-:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.footer {
+.duet-breadcrumbs.duet-theme-turva.footer {
+  color: rgb(255, 255, 255);
   background: rgb(230, 23, 64);
 }

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, .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,61 +277,33 @@
   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);
@@ -365,28 +311,17 @@
   outline-color: rgb(98, 121, 138);
   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 {
+.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .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-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-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, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva {
   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-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;
 }
@@ -583,23 +480,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 +498,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 +505,145 @@
 .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;
 }
-:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default {
+.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;
+}
+.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.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-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);
 }