@duetds/components 10.2.3 → 10.3.0

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

@@ -45,15 +45,11 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-action-button:focus, .duet-action-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-action-button:focus, .duet-action-button:focus.duet-theme-turva2 {
+.duet-theme-turva .duet-action-button:focus, .duet-action-button:focus.duet-theme-turva, .duet-theme-turva .duet-action-button:focus, .duet-action-button:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);
 }
-.duet-action-button.duet-theme-turva {
-  color: rgb(23, 28, 58);
-  background: rgb(245, 247, 250);
-}
 .duet-action-button duet-icon {
   display: block;
 }
@@ -66,37 +62,27 @@
 .duet-action-button:not(:disabled):hover {
   background: #e9ecee;
 }
-.duet-action-button:not(:disabled):hover.duet-theme-turva {
-  background: #e9ebee;
-}
 .duet-action-button:active:focus {
   background: #dddfe1 !important;
 }
-.duet-action-button:active:focus.duet-theme-turva {
-  background: #dddee1 !important;
-}
 .duet-action-button:disabled {
   color: rgb(127, 150, 165);
   cursor: default;
   background: rgb(245, 248, 250);
   opacity: 0.75;
 }
-.duet-action-button.duet-theme-turva:disabled {
-  color: rgb(143, 147, 158);
-  background: rgb(245, 247, 250);
-}
 
-:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva {
+.duet-action-button.duet-theme-turva {
   color: rgb(23, 42, 59);
   background: rgb(253, 247, 242);
 }
-:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:not(:disabled):hover {
+.duet-action-button.duet-theme-turva:not(:disabled):hover {
   background: #f0ebe6;
 }
-:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:active:focus {
+.duet-action-button.duet-theme-turva:active:focus {
   background: #e4deda !important;
 }
-:host(.duet-theme-turva2) .duet-action-button.duet-theme-turva:disabled {
+.duet-action-button.duet-theme-turva:disabled {
   color: rgb(120, 145, 164);
   background: rgb(245, 246, 247);
 }

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

@@ -68,9 +68,6 @@
 .duet-alert-wrapper.duet-m-0 {
   margin: 0 !important;
 }
-.duet-alert-wrapper.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-alert-wrapper.warning {
   color: rgb(38, 26, 4);
   background: rgb(255, 247, 221);
@@ -202,4 +199,8 @@
 }
 .duet-alert-expander:hover {
   filter: brightness(85%);
+}
+
+.duet-alert-wrapper.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";
 }

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

@@ -47,10 +47,10 @@
   font-weight: 600;
   line-height: 1.25;
   vertical-align: middle;
-  color: rgb(8, 42, 77);
+  color: rgb(3, 56, 102);
   text-align: center;
   word-break: break-word;
-  background: #d9ebf4;
+  background: rgb(217, 236, 245);
   border-radius: 20rem;
 }
 .duet-badge.duet-p-0 {
@@ -63,85 +63,40 @@
   padding: 5.4444444444px 12px 4.4444444444px;
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 700;
-  color: rgb(23, 28, 58);
-  background: #e8e8eb;
 }
 .duet-badge.warning {
-  background: #fdecc9;
-}
-.duet-badge.warning.duet-theme-turva {
-  background: #fdecc9;
+  color: rgb(81, 55, 9);
+  background: rgb(255, 232, 160);
 }
 .duet-badge.danger {
-  background: #f7d2dc;
-}
-.duet-badge.danger.duet-theme-turva {
-  background: #f7d2dc;
+  color: rgb(120, 4, 56);
+  background: rgb(255, 211, 219);
 }
 .duet-badge.success {
-  background: #d6e6e1;
-}
-.duet-badge.success.duet-theme-turva {
-  background: #d6e6e1;
+  color: rgb(13, 71, 59);
+  background: rgb(191, 239, 218);
 }
 .duet-badge.subtle {
-  color: rgb(98, 121, 138);
-  outline: 1px solid rgb(212, 223, 229);
-  outline-offset: -1px;
-  background: none;
-}
-.duet-badge.subtle.duet-theme-turva {
-  color: rgb(113, 118, 132);
-  outline-color: rgb(222, 224, 228);
-  background: none;
+  color: rgb(62, 84, 102);
+  background: rgb(228, 236, 239);
 }
 .duet-badge.background-strong.default {
-  color: rgb(255, 255, 255);
-  background: rgb(0, 119, 179);
-}
-.duet-badge.background-strong.default.duet-theme-turva {
-  color: rgb(255, 255, 255);
-  background: rgb(23, 28, 58);
+  color: rgb(240, 247, 250);
+  background: rgb(0, 97, 155);
 }
 .duet-badge.background-strong.warning {
-  background: #f9c153;
-}
-.duet-badge.background-strong.warning.duet-theme-turva {
-  background: #f9c153;
+  color: rgb(38, 26, 4);
+  background: rgb(247, 178, 40);
 }
 .duet-badge.background-strong.danger {
-  color: rgb(255, 255, 255);
-  background: rgb(214, 28, 82);
-}
-.duet-badge.background-strong.danger.duet-theme-turva {
-  color: rgb(255, 255, 255);
-  background: rgb(214, 28, 82);
+  color: rgb(255, 240, 243);
+  background: rgb(185, 16, 74);
 }
 .duet-badge.background-strong.success {
-  color: rgb(255, 255, 255);
-  background: rgb(48, 131, 105);
-}
-.duet-badge.background-strong.success.duet-theme-turva {
-  color: rgb(255, 255, 255);
-  background: rgb(48, 131, 105);
+  color: rgb(244, 250, 247);
+  background: rgb(29, 106, 88);
 }
 .duet-badge.background-strong.subtle {
-  outline-color: rgb(8, 42, 77);
-  border-color: rgb(181, 198, 208);
-}
-.duet-badge.background-strong.subtle.duet-theme-turva {
-  outline-color: rgb(23, 28, 58);
-  border-color: rgb(199, 202, 207);
-}
-
-:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.default {
-  color: rgb(23, 42, 59);
-  background: #e8eaeb;
-}
-:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.default {
-  color: rgb(255, 255, 255);
-  background: rgb(23, 42, 59);
-}
-:host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.subtle {
-  outline-color: rgb(23, 42, 59);
+  color: rgb(245, 248, 250);
+  background: rgb(98, 121, 138);
 }

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, 28, 58);
-  background: rgb(245, 247, 250);
-}
-.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover {
-  color: rgb(126, 2, 35);
-}
 .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(198, 12, 48);
-}
 .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 {
-  color: rgb(126, 2, 35);
+.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);
 }