npm - @duetds/components - Versions diffs - 9.10.0 → 9.11.0 - Mend

@duetds/components 9.10.0 → 9.11.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 (775) hide show

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

@@ -324,4 +324,34 @@
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect:focus,
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect.duet-multiselect-active {
+  border-color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect[disabled] {
+  color: rgb(35, 46, 61) !important;
+  background: rgb(253, 247, 242) !important;
+  border-color: rgb(253, 247, 242) !important;
+  -webkit-text-fill-color: rgb(35, 46, 61) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect svg {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect .duet-multiselect-badge {
+  color: rgb(35, 46, 61);
+  background: #e9eaec;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes {
+  border-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
+  color: rgb(35, 46, 61);
 }

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

@@ -154,4 +154,20 @@
 ::slotted(duet-paragraph) {
   margin-bottom: 2px !important;
+}
+:host(.duet-theme-turva2) .duet-notification.duet-theme-turva {
+  color: rgb(35, 46, 61);
+  border-bottom-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
+  background: rgb(197, 29, 65);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
+    background: rgb(253, 247, 242);
+  }
 }

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.css CHANGED Viewed

@@ -252,4 +252,16 @@
     opacity: 1;
     transform: scale(1) translateZ(0) translateY(0);
   }
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle {
+  color: rgb(35, 46, 61);
+  border-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true],
+:host(.duet-theme-turva2) .duet-theme-turva .duet-drawer-toggle[aria-expanded=true]:hover {
+  border-color: rgb(253, 247, 242);
 }

package/lib/collection/components/duet-number-input/duet-number-input.css CHANGED Viewed

@@ -125,4 +125,11 @@
 }
 :host(.duet-theme-turva) .duet-number-buttons .duet-number-button:last-of-type::before {
   background: rgb(222, 224, 228);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:first-of-type::before {
+  background: linear-gradient(to left, rgba(244, 213, 193, 0.2) 0%, rgba(244, 213, 193, 0.2) 1px, rgba(244, 213, 193, 0.1) 1px, rgba(244, 213, 193, 0) 100%);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-number-buttons .duet-number-button:last-of-type::before {
+  background: rgb(248, 229, 217);
 }

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

@@ -104,4 +104,8 @@
 }
 .duet-overlay.transition-quickly {
   transition: 300ms ease;
+}
+:host(.duet-theme-turva2) .duet-overlay.duet-theme-turva {
+  background: rgb(35, 46, 61);
 }

package/lib/collection/components/duet-page-heading/duet-page-heading.css CHANGED Viewed

@@ -195,6 +195,20 @@
     height: 75px;
   }
 }
+.duet-page-heading .progress-indicator {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+}
+.duet-page-heading .progress-step {
+  width: 100%;
+  height: 4px;
+  background-color: rgb(181, 198, 208);
+  border-radius: 2px;
+}
+.duet-page-heading .progress-step.active {
+  background-color: rgb(0, 119, 179);
+}
 .duet-page-heading.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";
   color: rgb(8, 42, 77);
@@ -210,17 +224,19 @@
   position: relative;
   top: -3px;
 }
-.duet-page-heading .progress-indicator {
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
+.duet-page-heading.duet-theme-turva .progress-step {
+  background-color: rgb(199, 202, 207);
 }
-.duet-page-heading .progress-step {
-  width: 100%;
-  height: 4px;
-  background-color: rgb(181, 198, 208);
-  border-radius: 2px;
+.duet-page-heading.duet-theme-turva .progress-step.active {
+  background-color: rgb(198, 12, 48);
 }
-.duet-page-heading .progress-step.active {
-  background-color: rgb(0, 119, 179);
+:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon {
+  background: rgba(197, 29, 65, 0.9);
+}
+:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step {
+  background-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step.active {
+  background-color: rgb(197, 29, 65);
 }

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

@@ -76,4 +76,8 @@
 :host(.duet-theme-turva) .duet-pagination-total-pages {
   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);
+}
+:host(.duet-theme-turva2.duet-theme-turva) .duet-pagination-total-pages {
+  color: rgb(35, 46, 61);
 }

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

@@ -103,4 +103,11 @@
 ::slotted(a):active {
   opacity: 0.75;
   transition: none;
+}
+:host(.duet-theme-turva2) .duet-paragraph.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) ::slotted(a).duet-theme-turva {
+  color: rgb(197, 29, 65);
 }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.css CHANGED Viewed

@@ -65,4 +65,8 @@
 slot {
   --divider-margin: var(--space-x-small, 8px);
+}
+:host(.duet-theme-turva2) .duet-popup-menu-list.duet-theme-turva {
+  color: rgb(35, 46, 61) !important;
 }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.css CHANGED Viewed

@@ -79,4 +79,14 @@
 }
 .duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+:host(.duet-theme-turva2) .duet-popup-menu-item.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-popup-menu-item.active.duet-theme-turva {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-popup-menu-item:hover.duet-theme-turva {
+  background: rgb(248, 229, 217);
 }

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

@@ -100,4 +100,23 @@
 }
 .duet-progress.duet-theme-turva progress[value] ::-moz-progress-bar {
   background-color: rgb(255, 241, 241);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar {
+  background-color: rgb(253, 247, 242);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar > span {
+  background-color: rgb(197, 29, 65);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value] {
+  color: rgb(197, 29, 65);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
+  background-color: rgb(253, 247, 242);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
+  background-color: rgb(197, 29, 65);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-moz-progress-bar {
+  background-color: rgb(253, 247, 242);
 }

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

@@ -177,4 +177,24 @@
 .duet-theme-turva .duet-radio[disabled]:checked + label::after {
   background: rgb(143, 147, 158);
   border-color: rgb(143, 147, 158);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-label {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio + label::before {
+  border-color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio:checked + label::after {
+  background: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label {
+  color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled] + label::before {
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-radio[disabled]:checked + label::after {
+  background: rgb(244, 213, 193);
+  border-color: rgb(244, 213, 193);
 }

package/lib/collection/components/duet-range-slider/duet-range-slider.css CHANGED Viewed

@@ -216,4 +216,44 @@
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-output {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-range-disabled.duet-theme-turva .duet-output {
+  color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range {
+  background: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-webkit-slider-thumb {
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-moz-range-thumb {
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-thumb {
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled {
+  background: rgb(244, 213, 193) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-webkit-slider-thumb {
+  background: rgb(244, 213, 193);
+  border-color: transparent;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-moz-range-thumb {
+  background: rgb(244, 213, 193);
+  border-color: transparent;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range:disabled::-ms-thumb {
+  background: rgb(244, 213, 193);
+  border-color: transparent;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-fill-lower {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range::-ms-fill-upper {
+  background: rgb(244, 213, 193);
 }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.css CHANGED Viewed

@@ -46,4 +46,8 @@
 }
 .duet-range-stepper ::part(button) {
   border: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range-step-counter {
+  color: rgb(35, 46, 61);
 }

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

@@ -208,4 +208,11 @@
   transition: transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
   scroll-snap-align: center;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(244, 213, 193);
 }

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

@@ -306,4 +306,37 @@ duet-tooltip,
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-placeholder {
+  background: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select:hover + .duet-select {
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select:focus + .duet-select {
+  border-color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select:focus + .duet-select .duet-select-icon {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select[disabled] + .duet-select {
+  color: rgb(35, 46, 61) !important;
+  background: rgb(253, 247, 242) !important;
+  border-color: rgb(253, 247, 242) !important;
+  -webkit-text-fill-color: rgb(35, 46, 61) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select {
+  color: rgb(35, 46, 61);
+  background: rgb(255, 255, 255); /* unchanged unless you want a Turva2 token */
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select svg {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.has-error .duet-select {
+  border-color: rgb(214, 28, 82) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-help {
+  color: rgb(244, 213, 193);
 }

package/lib/collection/components/duet-share-chart/duet-share-chart.css CHANGED Viewed

@@ -75,4 +75,8 @@
 }
 .duet-share-chart-item-list .duet-share-chart-item-value {
   font-weight: 600;
+}
+:host(.duet-theme-turva2) .duet-share-chart-item-list li.duet-theme-turva {
+  color: rgb(35, 46, 61);
 }

package/lib/collection/components/duet-show-more/duet-show-more.css CHANGED Viewed

@@ -50,4 +50,8 @@
 }
 .duet-show-more.duet-theme-turva .content:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+:host(.duet-theme-turva2) .duet-show-more.duet-theme-turva {
+  color: rgb(35, 46, 61);
 }

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

@@ -174,4 +174,32 @@ slot {
 }
 .duet-theme-turva slot {
   color: rgb(23, 28, 58);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg {
+    background: rgb(35, 46, 61);
+  }
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
+  background: rgb(253, 247, 242);
+  border-bottom-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) slot {
+  color: rgb(35, 46, 61);
 }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.css CHANGED Viewed

@@ -52,4 +52,8 @@
 .duet-theme-turva ::slotted(:not(:last-child))::after {
   background: rgb(23, 28, 58);
+}
+:host(.duet-theme-turva2) .duet-theme-turva ::slotted(:not(:last-child))::after {
+  background: rgb(35, 46, 61);
 }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.css CHANGED Viewed

@@ -118,4 +118,14 @@ slot[name=description]::slotted(*) {
 }
 .duet-theme-turva slot[name=description]::slotted(*) {
   color: rgb(113, 118, 132);
+}
+:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva.active .label-content::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) slot[name=description]::slotted(*) {
+  color: rgb(35, 46, 61);
 }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.css CHANGED Viewed

@@ -233,4 +233,24 @@ slot:not([name=label]) {
 }
 .duet-theme-turva slot:not([name=label]) {
   color: rgb(23, 28, 58);
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link.active .label-text::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header {
+  background: rgb(253, 247, 242);
+  border-bottom-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .top span {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) slot:not([name=label]) {
+  color: rgb(35, 46, 61);
 }

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

@@ -131,4 +131,17 @@ slot {
 slot[name=label] {
   font-size: 1rem;
   font-weight: 600;
+}
+:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) slot {
+  color: rgb(35, 46, 61);
 }

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

@@ -96,4 +96,7 @@
   100% {
     transform: translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%);
   }
+}
+:host(.duet-theme-turva2) .duet-spinner {
+  color: rgb(197, 29, 65) !important;
 }

package/lib/collection/components/duet-spinner/duet-spinner.js CHANGED Viewed

@@ -1,6 +1,3 @@
-/*!
- * Built with Duet Design System
- */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
@@ -23,11 +20,11 @@ export class DuetSpinner {
      */
     render() {
         const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color);
-        return (h(Host, { key: 'dcb6140eeae0e31c85319ee668193865ba6a5e57', class: {
+        return (h(Host, { key: '5fb47202b93a29ab498ec181b1a000343a10bdc6', class: {
                 "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
                 "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
                 "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, h("div", { key: 'd3d38db9f52dbd35af639463194130c6c265d24d', class: {
+            } }, h("div", { key: '73c9c88cc51e8a135933f551095d872ea02f7e2d', class: {
                 "duet-spinner": true,
                 [this.size]: true,
             }, style: { color }, "aria-label": this.accessibleLabel })));
@@ -145,4 +142,5 @@ export class DuetSpinner {
             }
         };
     }
+    static get elementRef() { return "element"; }
 }

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

@@ -195,4 +195,17 @@
   .duet-step-heading-slot {
     display: block;
   }
+}
+:host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-current .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-counter {
+  background-color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.is-complete .duet-step-heading:hover .duet-step-counter,
+:host(.duet-theme-turva2) .duet-theme-turva.is-disabled .duet-step-heading:hover .duet-step-counter {
+  background-color: #9e1734;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-step-content-wrapper {
+  border-color: rgb(248, 229, 217);
 }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css CHANGED Viewed

@@ -162,4 +162,18 @@
   .duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
     box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1);
   }
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva {
+  background: rgb(253, 247, 242);
+  border-bottom-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .items {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .mobile-background {
+  background: rgb(35, 46, 61);
 }

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

@@ -218,4 +218,35 @@
   .duet-submenu-bar-dropdown.duet-theme-turva .items {
     background: rgb(255, 255, 255);
   }
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button {
+  color: rgb(35, 46, 61);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button:hover {
+    background: rgb(248, 229, 217);
+  }
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after {
+  background: rgb(197, 29, 65);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active,
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open {
+    color: rgb(197, 29, 65);
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active::after,
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open::after {
+    background: rgb(197, 29, 65);
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open {
+    background: rgb(248, 229, 217);
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva .items {
+    background: rgb(253, 247, 242);
+  }
 }

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.css CHANGED Viewed

@@ -111,4 +111,22 @@
 }
 .duet-submenu-bar-dropdown-link.highlight.duet-theme-turva {
   color: rgb(126, 2, 35);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after {
+  background: rgb(197, 29, 65);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active {
+    background: rgb(253, 247, 242);
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva:hover {
+    background: rgb(248, 229, 217);
+  }
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.highlight {
+  color: rgb(197, 29, 65);
 }

package/lib/collection/components/duet-submenu-bar-item/duet-submenu-bar-item.css CHANGED Viewed

@@ -130,4 +130,24 @@
 }
 .duet-submenu-bar-item:hover.duet-theme-turva.active {
   color: rgb(126, 2, 35);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-item.active.duet-theme-turva {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva.active .label::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva.active::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva:hover {
+  color: rgb(35, 46, 61);
+  background: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva:hover.active {
+  color: rgb(197, 29, 65);
 }

package/lib/collection/components/duet-submenu-bar-link/duet-submenu-bar-link.css CHANGED Viewed

@@ -135,4 +135,26 @@
   .duet-submenu-bar-link:hover.duet-theme-turva.active {
     color: rgb(126, 2, 35);
   }
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active .label::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active::after {
+  background: rgb(197, 29, 65);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active {
+    color: rgb(197, 29, 65);
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva:hover {
+    color: rgb(35, 46, 61);
+    background: rgb(248, 229, 217);
+  }
+  :host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva:hover.active {
+    color: rgb(197, 29, 65);
+  }
 }