@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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

@@ -13,9 +13,18 @@ export class DuetBreadcrumbs {
             sv: "Ströbröd",
             en: "Breadcrumbs",
         });
-        this.children = undefined;
+        /**
+         * Theme
+         */
         this.theme = "";
+        /**
+         * Variation
+         */
         this.variation = "header";
+        /**
+         * Custom color to be used for text, as a design token entered in camelCase or kebab-case.
+         * Example: "color-primary".
+         */
         this.color = "";
     }
     /**
@@ -53,11 +62,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: 'b29fa1c29f832b5173a6f30e3e81383b816d0b18' }, h("nav", { key: 'f7e7663d0a602a4c9f02468d54113cf3350e85a1', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: '36f67b82a722d5c4017bb4cec37fd7149572d264' }, h("nav", { key: 'f8fe3f4e521969a60d9428a354a88152171613ec', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: '1424535cfc3acfc02cd33286a9842c59b4483d06', class: "container" }, h("div", { key: '3bed0500aa7c9f598a4c0fc57c037899f0cc9039', role: "list", class: "list", style: { color } }, h("slot", { key: '6e4cde5793075f7a75085823737ecfebf7b407a3' })), h("div", { key: '57d436b5f0aab642c590c4af70078e26791405eb', class: "bottom-border bottom-border--container" })), h("div", { key: 'd2ec591e3d2739dbf0a59c6216008b1ced2e5a48', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: '78f711e9262e47c989705552d2ab75e65ae17fbe', class: "container" }, h("div", { key: 'bfc70b5d984cc57ef2591f4a3ecf452db9ae0ed6', role: "list", class: "list", style: { color } }, h("slot", { key: '96e85ea897f84aef0111f41d1e91ac2a263e8d66' })), h("div", { key: 'b99f56d5dba834d934872b86fcb8e46205ae3084', class: "bottom-border bottom-border--container" })), h("div", { key: '1d96cf880260a6fa1fb39cbc0e76e7b5df8f208c', class: "bottom-border bottom-border--nav" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -75,6 +84,7 @@ export class DuetBreadcrumbs {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -95,12 +105,12 @@ export class DuetBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "\"header\" | \"footer\" | \"plain\"",
@@ -115,12 +125,12 @@ export class DuetBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"header\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -141,7 +151,6 @@ export class DuetBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""
             }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 8px !important;
   margin-bottom: 12px !important;
   position: relative;
@@ -127,7 +127,7 @@
   background: transparent;
   border-style: solid;
   border-width: 1px;
-  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, outline 300ms ease, padding 300ms ease, box-shadow 300ms ease;
+  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, padding 300ms ease, box-shadow 300ms ease;
 }
 .duet-button.duet-p-0 {
   padding: 0 !important;
@@ -136,11 +136,14 @@
   margin: 0 !important;
 }
 .duet-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-button:focus, .duet-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-button.duet-button-size-medium {
   height: 50px;
@@ -288,13 +291,13 @@
   border-color: rgb(222, 224, 228);
 }
 .duet-button.default:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-button.default:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-button.default.duet-button-negative {
   background-color: rgb(255, 255, 255);
@@ -310,61 +313,60 @@
   color: rgb(198, 12, 48) !important;
   border-color: rgb(198, 12, 48);
 }
-.duet-button.primary, .duet-button.input-button-primary {
+.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.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(198, 12, 48);
   border-color: rgb(198, 12, 48);
 }
-.duet-button.primary:hover, .duet-button.input-button-primary:hover {
+.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.primary:hover, .duet-theme-turva .duet-button.input-button-primary:hover, .duet-theme-turva .duet-button.input-button-left-primary:hover {
   background: rgb(126, 2, 35);
   border-color: rgb(126, 2, 35);
 }
-.duet-button.primary:focus, .duet-button.input-button-primary:focus {
-  outline: 0;
-  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(0, 119, 179, 0.75);
-}
-.duet-theme-turva .duet-button.primary:focus, .duet-theme-turva .duet-button.input-button-primary:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(23, 28, 58, 0.75);
-}
-.duet-button.secondary, .duet-button.input-button-secondary, .duet-button.input-button-embedded {
+.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-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, 28, 58) !important;
   border-color: rgb(23, 28, 58);
 }
-.duet-button.secondary:hover, .duet-button.input-button-secondary:hover, .duet-button.input-button-embedded:hover {
+.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-offset: -1px;
 }
-.duet-theme-turva .duet-button.secondary:hover, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-theme-turva .duet-button.input-button-embedded:hover {
+.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(198, 12, 48) !important;
   border-color: rgb(198, 12, 48);
 }
-.duet-button.secondary.duet-button-negative, .duet-button.input-button-secondary.duet-button-negative, .duet-button.input-button-embedded.duet-button-negative {
+.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-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(222, 224, 228) !important;
 }
-.duet-button.secondary.duet-button-negative:hover, .duet-button.input-button-secondary.duet-button-negative:hover, .duet-button.input-button-embedded.duet-button-negative:hover {
+.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-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(198, 12, 48) !important;
   border-color: rgb(198, 12, 48);
 }
@@ -392,13 +394,6 @@
   background: transparent;
   border-color: rgb(255, 255, 255);
 }
-.duet-button.negative:focus {
-  outline: 0;
-  box-shadow: 0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7);
-}
-.duet-theme-turva .duet-button.negative:focus {
-  box-shadow: 0 0 0 1px #0077b3, 0 0 0 4px rgba(255, 255, 255, 0.7);
-}
 .duet-button.destructive-primary {
   color: rgb(255, 255, 255) !important;
   background: rgb(214, 28, 82);
@@ -456,14 +451,14 @@
 .duet-button.plain.duet-p-0 .duet-button-contents {
   height: auto;
 }
-.duet-button.plain[disabled] {
+.duet-button.plain[disabled], .duet-button.plain[disabled]:hover {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed;
   background: transparent !important;
   border-color: transparent !important;
 }
-.duet-theme-turva .duet-button.plain[disabled] {
-  color: transparent !important;
+.duet-theme-turva .duet-button.plain[disabled], .duet-theme-turva .duet-button.plain[disabled]:hover {
+  color: rgb(113, 118, 132) !important;
   cursor: not-allowed;
   background: transparent !important;
   border-color: rgb(222, 224, 228) !important;
@@ -484,6 +479,9 @@
 .duet-button.plain.duet-button-negative:hover {
   color: rgba(255, 255, 255, 0.8) !important;
 }
+.duet-button.plain.duet-button-icon-only:focus {
+  outline-offset: 1px;
+}
 .duet-button.duet-button-icon-only {
   min-width: 48px;
   min-height: 48px;
@@ -502,20 +500,25 @@
   margin: 0;
   transform: translateX(-50%) translateY(-50%);
 }
-.duet-button.duet-button.input-button-primary, .duet-button.duet-button.input-button-secondary, .duet-button.duet-button.input-button-embedded {
+.duet-button.duet-button.input-button-primary, .duet-button.duet-button.input-button-secondary, .duet-button.duet-button.input-button-embedded, .duet-button.duet-button.input-button-left-primary, .duet-button.duet-button.input-button-left-secondary {
   box-sizing: content-box;
   min-width: 48px;
   min-height: 48px;
   padding: 0 !important;
   border-width: 1px;
+}
+.duet-button.duet-button.input-button-primary .duet-button-contents, .duet-button.duet-button.input-button-secondary .duet-button-contents, .duet-button.duet-button.input-button-embedded .duet-button-contents, .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-primary .duet-button-contents.icon-right, .duet-button.duet-button.input-button-secondary .duet-button-contents.icon-right, .duet-button.duet-button.input-button-embedded .duet-button-contents.icon-right, .duet-button.duet-button.input-button-left-primary .duet-button-contents.icon-right, .duet-button.duet-button.input-button-left-secondary .duet-button-contents.icon-right {
+  padding: 0 16px;
+}
+.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-bottom-left-radius: 0;
 }
-.duet-button.duet-button.input-button-primary .duet-button-contents, .duet-button.duet-button.input-button-secondary .duet-button-contents, .duet-button.duet-button.input-button-embedded .duet-button-contents {
-  position: static;
-}
 .duet-button.duet-button.input-button-primary .duet-button-icon.left.large,
 .duet-button.duet-button.input-button-primary .duet-button-icon.left.medium,
 .duet-button.duet-button.input-button-primary .duet-button-icon.left.small, .duet-button.duet-button.input-button-secondary .duet-button-icon.left.large,
@@ -533,6 +536,15 @@
 .duet-button.duet-button.input-button-embedded {
   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-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 4px;
+}
+.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.square {
   width: 52px;
   min-width: auto !important;
@@ -563,13 +575,13 @@
   border-color: rgb(222, 224, 228);
 }
 .duet-button.square:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-button.square:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-button.square .duet-button-contents {
   gap: 0;
@@ -577,17 +589,19 @@
 .duet-button[disabled], .duet-button[disabled]:hover, .duet-button.duet-button-negative[disabled], .duet-button.duet-button-negative[disabled]:hover {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed;
+  outline: none !important;
+  outline-color: rgb(212, 223, 229) !important;
+  outline-color: rgb(212, 223, 229) !important;
   background: rgb(212, 223, 229) !important;
   border-color: rgb(212, 223, 229) !important;
-  outline-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(143, 147, 158) !important;
   cursor: not-allowed;
+  outline-color: rgb(222, 224, 228) !important;
   background: rgb(222, 224, 228) !important;
   border-color: rgb(222, 224, 228) !important;
-  outline-color: rgb(222, 224, 228) !important;
 }
 
 .duet-button-is-loading.primary, .duet-button-is-loading.input-button-primary {
@@ -602,4 +616,91 @@
 .duet-button-is-loading .duet-button-contents {
   visibility: hidden;
   opacity: 0;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button {
+  border-radius: 8px;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default {
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .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 {
+  background-color: rgb(251, 225, 209) !important;
+}
+:host(.duet-theme-turva2) .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 {
+  background: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
+}
+: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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  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 {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative {
+  color: rgb(23, 42, 59) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative:hover {
+  color: rgb(255, 255, 255) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain {
+  color: rgb(230, 23, 64) !important;
+}
+:host(.duet-theme-turva2) .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 {
+  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 {
+  color: rgb(95, 122, 143) !important;
+  background: transparent !important;
+  border-color: rgb(251, 225, 209) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square {
+  border-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square.duet-button-negative {
+  background: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .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 {
+  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 {
+  color: rgb(230, 23, 64);
 }