npm - @duetds/components - Versions diffs - 9.17.0 → 9.18.0 - Mend

@duetds/components 9.17.0 → 9.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (900) hide show

package/lib/collection/components/duet-tab-group/duet-tab-group.css CHANGED Viewed

@@ -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;
   -webkit-tap-highlight-color: transparent;
   display: block;
   width: 100%;
@@ -196,9 +196,9 @@
 .duet-tab-button.selected {
   z-index: 201;
   color: rgb(0, 119, 179);
+  outline: 0;
   background: rgb(255, 255, 255);
   border-bottom: 3px solid rgb(0, 119, 179);
-  outline: 0;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-tab-button.selected {
@@ -211,10 +211,12 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-variation-default .duet-tab-button {
   z-index: 200;
@@ -252,9 +254,12 @@
   background-color: rgb(0, 119, 179);
 }
 .duet-tab-variation-default .duet-tab-button.selected:focus-visible {
-  outline: 2px solid rgba(0, 119, 179, 0.8);
+  outline: 2px solid;
   outline-offset: -5px;
-  box-shadow: none !important;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva, .duet-theme-turva2 .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-variation-default .duet-tab-button.selected:focus-visible::before {
   height: 0;
@@ -301,8 +306,8 @@
   background: rgb(234, 235, 239);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
-  border-color: rgb(222, 224, 228);
   outline-color: rgba(199, 202, 207, 0.8);
+  border-color: rgb(222, 224, 228);
 }
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
@@ -351,8 +356,8 @@
 .duet-tab-variation-checked .duet-tab-button {
   position: relative;
   display: inline-block;
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   width: 200px;
   min-width: 200px;
   padding: 8px 4px;
@@ -473,11 +478,14 @@
   text-align: left;
 }
 .duet-tab-group-content:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
+.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva, .duet-theme-turva2 .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-group-content.checked-group-content {
   padding: 28px 0 28px 0;
@@ -507,25 +515,25 @@
   /* Checked variation selected state */
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-group-tabs.duet-tab-variation-plain {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover {
-  border-bottom: 2px solid #e61740;
+  border-bottom: 2px solid rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  border-bottom: 2px solid #e61740;
+  border-bottom: 2px solid rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tab-button.selected {
-  color: #172a3b;
-  border-color: #fbe1d1;
-  border-bottom-color: #e61740;
+  color: rgb(23, 42, 59);
+  border-color: rgb(251, 225, 209);
+  border-bottom-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
-  border-color: #fbe1d1;
+  border-color: rgb(251, 225, 209);
 }

package/lib/collection/components/duet-tab-group/duet-tab-group.js CHANGED Viewed

@@ -212,14 +212,15 @@ export class DuetTabGroup {
                 "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
                 selected: element.selected,
                 [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
+                "duet-theme-turva": this.theme === "turva",
             }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label), element.indicator && (h("duet-indicator", { variation: element.indicator, "accessible-label": element.indicatorAccessibleLabel })))));
-        return (h("div", { key: '82bdbb06df621e50abe48e5112df78c99213c193', class: {
+        return (h("div", { key: '51383834734cbd21b65ec6c777f10a01e8768b9e', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '56bbfe2c4f72ffd7ca9f56df5df3f22bcb59ca3d', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'adc23a0fa4da0ce1c9d54e8a2e56fbbfb0e62903', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
@@ -230,11 +231,11 @@ export class DuetTabGroup {
             } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
                 "duet-tab-group-scrollable-wrapper": true,
                 "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
-            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: 'c26feb7c39a92f1a3d44d09fb2e97a9667e54f41', class: {
+            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: 'a99b36748d41112484ad3ff44449602467d7fa27', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'c6cb02cb9b42a53c57e63e9aafb505af31e9b2de' }))));
+            } }, h("slot", { key: '7ad5439efab3c4b036cd46bde973cb50090284bc' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-table/duet-table.css CHANGED Viewed

@@ -2,11 +2,11 @@ duet-table {
   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-bottom: 20px !important;
   display: block;
   font-variant-numeric: tabular-nums;
@@ -21,11 +21,11 @@ duet-table tr {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 duet-table.duet-m-0 {
   margin: 0 !important;
@@ -46,16 +46,16 @@ duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead * {
   height: 1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
   border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }
 duet-table.duet-theme-turva table {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 duet-table td {
+  color: rgb(8, 42, 77);
   -webkit-hyphens: auto;
   hyphens: auto;
-  color: rgb(8, 42, 77);
 }
 duet-table.duet-theme-turva td {
   color: rgb(23, 28, 58);
@@ -101,8 +101,8 @@ duet-table span.duet-table-cell-heading {
   height: 1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
   border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }
 .duet-table-flattened td {
   line-height: 1.25;
@@ -381,14 +381,14 @@ duet-table span.duet-table-cell-heading {
 }
 duet-table.duet-theme-turva2.duet-theme-turva td {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 duet-table.duet-theme-turva2.duet-theme-turva tbody th {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva.duet-table-sticky thead th,
 duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva.duet-table-sticky thead td {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
   background: rgba(23, 42, 59, 0.04);
@@ -397,27 +397,30 @@ duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva tbody:not(:only
   background: rgba(23, 42, 59, 0.04);
 }
 duet-table.duet-theme-turva2.duet-table-striped.duet-theme-turva tfoot td {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-plain.duet-theme-turva tbody th,
 duet-table.duet-theme-turva2.duet-table-plain.duet-theme-turva tbody td {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-plain.duet-theme-turva tbody td {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-fixed.duet-theme-turva:not(.duet-table-flattened) tfoot {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
 }
 duet-table.duet-theme-turva2.duet-table-sortable.duet-theme-turva:not(.duet-table-flattened) tfoot {
-  border-top-color: #fbe1d1;
+  border-top-color: rgb(212, 221, 226);
+}
+duet-table.duet-theme-turva2.duet-theme-turva .duet-table-selected-column {
+  background: rgba(95, 122, 143, 0.08);
 }

package/lib/collection/components/duet-textarea/duet-textarea.css CHANGED Viewed

@@ -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: 16px !important;
   margin-bottom: 12px !important;
   display: block;
@@ -109,6 +109,16 @@ duet-tooltip,
   border-radius: 4px;
   transition: 150ms ease;
 }
+.duet-textarea:focus {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva, .duet-theme-turva2 .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-theme-turva .duet-textarea {
   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(23, 28, 58);
@@ -192,35 +202,32 @@ duet-tooltip,
   color: rgb(23, 28, 58);
 }
 .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #909599;
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #747475;
+.duet-theme-turva .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva, .duet-theme-turva2 .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .has-error .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-textarea:focus {
   border-color: rgb(0, 119, 179);
-  outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
 .duet-theme-turva .duet-textarea:focus {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .has-error .duet-textarea:focus {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-textarea:focus {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-textarea:not(:focus):not(:hover):invalid {
-  box-shadow: none;
+  outline: none;
 }
 .duet-textarea-help {
@@ -250,8 +257,8 @@ duet-tooltip,
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 .duet-character-count {
@@ -260,33 +267,33 @@ duet-tooltip,
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled] {
-  background: #f5f6f7 !important;
-  border-color: #f5f6f7 !important;
+  background: rgb(245, 246, 247) !important;
+  border-color: rgb(245, 246, 247) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:-webkit-input-placeholder {
-  color: #7891a4;
+  color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder {
-  color: #b2c2cd;
+  color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-moz-placeholder {
-  color: #b2c2cd;
+  color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus:-ms-input-placeholder {
-  color: #b2c2cd;
+  color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-moz-placeholder {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-toggle/duet-toggle.css CHANGED Viewed

@@ -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;
   -webkit-user-select: none;
@@ -68,8 +68,8 @@ duet-label {
   height: 1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
   border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }
 .duet-switch input:checked + .duet-slider {
   background-color: rgb(0, 119, 179);
@@ -116,10 +116,12 @@ duet-label {
   background: #e38698;
 }
 :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75);
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-switch input:focus + .duet-slider {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75);
+.duet-theme-turva :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider, :host(.user-is-tabbing) .duet-switch input:focus + .duet-slider.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-slider {
@@ -154,7 +156,7 @@ duet-label {
 }
 :host(.duet-theme-turva2) .duet-switch input:checked + .duet-slider {
-  background-color: #e61740;
+  background-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-switch input:checked + .duet-slider::before {
   box-shadow: -1px 0 2px #890e26;

package/lib/collection/components/duet-toolbar/duet-toolbar.css CHANGED Viewed

@@ -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;
   position: relative;
   width: 100%;
 }
@@ -81,8 +81,8 @@
 }
 :host(.duet-theme-turva2) .duet-toolbar.duet-theme-turva .container {
-  border-bottom-color: #fbe1d1;
+  border-bottom-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-toolbar.duet-theme-turva.primary {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.css CHANGED Viewed

@@ -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);
 }
@@ -161,19 +164,19 @@
 }
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-dropdown.duet-theme-turva button:hover {
-  color: #172a3b;
-  background: #fdf7f2;
+  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: #e61740;
+  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: #172a3b;
+  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,