@duetds/components 10.0.0-alpha.9 → 10.1.0

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.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;
   height: 100%;
 }
 
@@ -44,6 +44,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-toolbar-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-dropdown button:focus, .duet-toolbar-dropdown button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-toolbar-dropdown button .label {
   display: flex;
   gap: 0.5rem;
@@ -57,10 +67,6 @@
 .duet-toolbar-dropdown button.open .caret {
   transform: rotate(180deg);
 }
-.duet-toolbar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-toolbar-dropdown button.active, .duet-toolbar-dropdown button.open {
   color: rgb(8, 42, 77);
 }
@@ -74,8 +80,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-dropdown .items {
   position: absolute;
@@ -109,9 +115,6 @@
   color: rgb(23, 28, 58);
   background: rgb(245, 247, 250);
 }
-.duet-toolbar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open {
   color: rgb(23, 28, 58);
 }
@@ -158,4 +161,31 @@
 }
 .duet-toolbar-dropdown.duet-theme-turva.negative button duet-icon {
   color: rgb(255, 185, 190);
+}
+
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button:hover {
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.active::after,
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.open::after {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.active,
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button.open {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button:hover,
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active,
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+  background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button:hover, :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.active, :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva.negative button.open {
+  color: rgb(255, 255, 255);
 }

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

@@ -6,15 +6,29 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetToolbarDropdown {
     constructor() {
-        this.onClick = () => {
-            this.open = !this.open;
-        };
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Variation.
+         */
         this.variation = "default";
-        this.accessibleLabel = undefined;
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Open
+         */
         this.open = false;
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        this.onClick = () => {
+            this.open = !this.open;
+        };
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -50,18 +64,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '293493435feefef5e3df0fedf5bce6506fb4ee15', role: "listitem" }, h("div", { key: 'c38df38acf0aebc018823ebbfe2cbf5ee9bc8f8d', class: {
+        return (h(Host, { key: '7af8e188b72d1dd79f3445c543736d3c18d694e4', role: "listitem" }, h("div", { key: '128c0412da716469ad79877951bf5b81f7987515', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: 'e502e36fda6d4e5e94312143d2f208be630d7e3b', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: 'efc3cbf2c159c3b8a528e8ee58312bc9546b561e', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '982df3536e15f8a4a0b17107cd025963826b47ea', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'c58be9183cc8949ad8380c435c92c2c144f443b8', class: "label" }, h("slot", { key: 'e69f9009757ba8711faba0832c9eb6bbc5ddb1b2', name: "label" }), h("duet-icon", { key: 'e267dbb94c717a8adc576335be6e5218aff054d4', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'a1bfb389572b8ba7ed3d55be3f8a57dfddbff95c', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '502ded69ce168a1de15bd937aa8c1995f2b5df88', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '8c4851a8137ab50f524c9d24618f612834f38669', class: "label" }, h("slot", { key: 'eebb0b4107c2060e48b334f35cff1458fc7b4d7c', name: "label" }), h("duet-icon", { key: '961bcc314c446a4b85ae1259b67d5566a0dd0656', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '843d1e28eb1a821021ff4e6c96269bb437980de7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'ac48022ff0eba0852b50b21c187c9cbd4f8e4772' })))));
+            } }, h("slot", { key: '60c2a9af5229e10192605b60f2aaf8d65e136d42' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +93,7 @@ export class DuetToolbarDropdown {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -99,12 +114,12 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": true,
                 "complexType": {
                     "original": "\"default\" | \"negative\"",
@@ -119,12 +134,12 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -139,11 +154,11 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -158,12 +173,12 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -178,12 +193,12 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -198,7 +213,6 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.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;
   width: 100%;
   height: 100%;
 }
@@ -41,11 +41,14 @@
   text-decoration: none;
 }
 .duet-toolbar-dropdown-link: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-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link: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-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-dropdown-link .label {
   flex: 1;
@@ -66,4 +69,14 @@
 }
 .duet-toolbar-dropdown-link:hover.duet-theme-turva {
   background: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva.active {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva:hover {
+  background: rgb(251, 225, 209);
 }

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

@@ -6,11 +6,25 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetToolbarDropdownLink {
     constructor() {
-        this.accessibleLabel = undefined;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
         this.targetLanguage = undefined;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Active
+         */
         this.active = false;
     }
     /**
@@ -31,11 +45,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c7578d87c6cc701110b2273867f9de679ce7675f' }, h("a", { key: '1f9b24bb8cd15ca161b0902ac695a73341d33f47', class: {
+        return (h(Host, { key: '34a5369d2806e4474bbb32400d5563fddcc3590a' }, h("a", { key: 'b16d10c8be40329d90136c486d568fb9511524d7', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '19566913fb85d69c28e44ac0d31c0eee45379051', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'edac55db2db896370c982e8783c027e9205b2235', class: "label" }, h("slot", { key: '9520108fc591d929db4216efcf5e5c823a5f90a8' })), this.active && (h("duet-icon", { key: '41b3c2604e5cd127d381cf0da0bfe2c43f494617', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'cce54b8721ad1d017e32ac331ebcc54d53fbd88c', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '515f4c68a3917e3403e59f938fc2a2ba296e1f63', class: "label" }, h("slot", { key: '43e7eddd00dc07766e9842a4070f09e908021551' })), this.active && (h("duet-icon", { key: 'e69da314290045e523944a6d3554158627151d48', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +67,7 @@ export class DuetToolbarDropdownLink {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -67,11 +82,11 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -92,12 +107,12 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "targetLanguage": {
                 "type": "string",
+                "attribute": "target-language",
                 "mutable": false,
                 "complexType": {
                     "original": "\"en\" | \"fi\" | \"sv\"",
@@ -112,12 +127,12 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target-language",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -132,12 +147,12 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -152,12 +167,12 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -172,7 +187,6 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.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;
   height: 100%;
 }
 
@@ -37,22 +37,19 @@
   line-height: 1.25;
   color: rgb(0, 75, 129);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
 }
 .duet-toolbar-item:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
-.duet-toolbar-item:focus.primary {
-  box-shadow: 0 0 0 4px rgba(8, 42, 77, 0.3), 0 0 0 1px #033866;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-item:focus.primary, .duet-toolbar-item:focus.primary.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-item .duet-toolbar-icon {
   position: relative;
@@ -61,20 +58,6 @@
   line-height: normal;
   vertical-align: baseline;
 }
-.duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
-  position: absolute;
-  top: 0;
-  left: 11px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: rgb(247, 178, 40);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px #c18b1f;
-}
-.duet-theme-turva .duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
-  background: rgb(247, 178, 40);
-}
 .duet-toolbar-item .trailing-icon {
   width: 16px;
   height: 16px;
@@ -93,6 +76,11 @@
 .duet-toolbar-item.primary, .duet-toolbar-item.secondary {
   color: rgb(255, 255, 255);
 }
+.duet-toolbar-item.primary:focus, .duet-toolbar-item.secondary:focus {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-toolbar-item.primary[aria-expanded=true], .duet-toolbar-item.secondary[aria-expanded=true] {
   background: rgba(8, 42, 77, 0.2);
 }
@@ -165,8 +153,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-item.active::after.duet-theme-turva {
   background: rgb(198, 12, 48);
@@ -180,4 +168,38 @@
 .duet-toolbar-item.active.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
   background: rgba(23, 28, 58, 0.2);
+}
+
+duet-indicator {
+  top: 4px;
+  left: 16px;
+  z-index: 1;
+}
+duet-indicator:has(+ .duet-toolbar-item .duet-toolbar-icon) {
+  left: 36px;
+}
+
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:not(.primary) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true] {
+  background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover:not(.primary) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover.primary {
+  background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva::after {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva:not(.primary) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva.primary {
+  background: rgba(23, 42, 59, 0.2);
 }