@duetds/components 9.17.0 → 9.19.0

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

@@ -4,34 +4,37 @@
   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: inline-flex;
   width: 100%;
   min-width: calc(33.333% - 8px);
   max-width: 100%;
-  text-align: left;
   vertical-align: bottom;
+  text-align: left;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);
@@ -124,11 +127,14 @@ duet-caption:not(:last-of-type) {
   color: rgb(0, 75, 129);
 }
 .duet-input-container.has-clear .duet-input-clear-icon 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-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon 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-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva, .duet-theme-turva2 .duet-input-container.has-clear .duet-input-clear-icon button:focus, .duet-input-container.has-clear .duet-input-clear-icon button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-input-container.has-clear .duet-input-clear-icon button:active {
   opacity: 0.75;
@@ -180,9 +186,6 @@ duet-caption:not(:last-of-type) {
 .duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button {
   color: rgb(8, 42, 77);
 }
-.duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
-}
 
 .duet-input-label-container {
   display: flex;
@@ -214,12 +217,12 @@ duet-caption:not(:last-of-type) {
   line-height: 1.5 !important;
   color: rgb(8, 42, 77) !important;
   cursor: initial !important;
+  outline-color: initial !important;
   background: rgb(255, 255, 255) !important;
   background-clip: initial !important;
   border: 1px solid rgb(127, 150, 165) !important;
   border-radius: 4px !important;
-  box-shadow: initial !important;
-  transition: box-shadow 150ms ease, border 150ms ease !important;
+  transition: border 150ms ease !important;
 }
 .duet-input.input-padding-small {
   padding: 8px 10px !important;
@@ -310,9 +313,9 @@ duet-caption:not(:last-of-type) {
 .duet-input[disabled] {
   color: rgb(8, 42, 77) !important;
   cursor: not-allowed !important;
+  outline: none !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
-  box-shadow: none !important;
   opacity: 1 !important;
   -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
@@ -323,35 +326,32 @@ duet-caption:not(:last-of-type) {
   -webkit-text-fill-color: rgb(23, 28, 58) !important;
 }
 .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #909599 !important;
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #747475 !important;
+.duet-theme-turva .duet-input:hover:not(:disabled), .duet-input:hover:not(:disabled).duet-theme-turva, .duet-theme-turva2 .duet-input:hover:not(:disabled), .duet-input:hover:not(:disabled).duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .has-error .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-input:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-input:focus {
   border-color: rgb(0, 119, 179) !important;
-  outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
 .duet-theme-turva .duet-input:focus {
   border-color: rgb(23, 28, 58) !important;
-  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .duet-theme-turva .duet-input:focus + .duet-input-icon {
   color: rgb(23, 28, 58);
 }
 .has-error .duet-input:focus {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-input:focus {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-input:focus + .duet-input-icon {
   color: rgb(0, 119, 179);
@@ -360,7 +360,7 @@ duet-caption:not(:last-of-type) {
   display: none;
 }
 .duet-input:not(:focus):not(:hover):invalid {
-  box-shadow: none !important;
+  outline: none !important;
 }
 .duet-input[type=number]::-webkit-inner-spin-button, .duet-input[type=number]::-webkit-outer-spin-button, .duet-input[type=time]::-webkit-inner-spin-button, .duet-input[type=time]::-webkit-outer-spin-button {
   display: none;
@@ -402,8 +402,8 @@ duet-caption:not(:last-of-type) {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 .duet-input-relative {
@@ -435,23 +435,6 @@ duet-caption:not(:last-of-type) {
 .duet-input-variation-button-left .duet-input-relative {
   border-radius: 4px;
 }
-.duet-input-variation-button-left.has-focus .duet-input-relative {
-  border-color: rgb(0, 119, 179);
-  box-shadow: 0 0 0 1px #0077b3 !important;
-}
-.duet-input-variation-button-left.duet-theme-turva.has-focus .duet-input-relative {
-  border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px #171c3a !important;
-}
-.duet-input-variation-button-left:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #909599;
-}
-.duet-input-variation-button-left.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #747475;
-}
-.duet-input-variation-button-left .duet-input:focus, .duet-input-variation-button-left .duet-input:hover:not(.disabled) {
-  box-shadow: none !important;
-}
 
 .duet-input-variation-button .duet-input-relative .duet-input {
   border-right-width: 0 !important;
@@ -480,10 +463,10 @@ duet-caption:not(:last-of-type) {
   align-items: center;
   justify-content: flex-start;
   width: auto;
+  outline: initial;
   border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
-  box-shadow: initial;
-  transition: box-shadow 150ms ease, border 150ms ease;
+  transition: border 150ms ease;
 }
 .duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
   border-color: rgb(143, 147, 158);
@@ -496,13 +479,13 @@ duet-caption:not(:last-of-type) {
   border-width: 0 !important;
 }
 .duet-input-variation-revealable .duet-input-relative .duet-input:focus, .duet-input-variation-revealable .duet-input-relative .duet-input:hover {
+  outline: none !important;
   border-width: 0 !important;
-  box-shadow: none !important;
 }
 .duet-input-variation-revealable.disabled .duet-input-relative {
+  outline: none;
   background: rgb(245, 248, 250);
   border-color: rgb(212, 223, 229);
-  box-shadow: none;
 }
 .duet-input-variation-revealable.has-error .duet-input-relative {
   border-color: rgb(214, 28, 82);
@@ -511,26 +494,41 @@ duet-caption:not(:last-of-type) {
   border-color: rgb(214, 28, 82);
 }
 .duet-input-variation-revealable.has-focus .duet-input-relative {
+  outline: 2px solid;
+  outline-offset: -1px;
+  outline-color: rgb(62, 84, 102);
   border-color: rgb(0, 119, 179);
-  box-shadow: 0 0 0 1px #0077b3 !important;
 }
 .duet-input-variation-revealable.duet-theme-turva.has-focus .duet-input-relative {
+  outline: 2px solid;
+  outline-offset: -1px;
+  outline-color: rgb(53, 79, 101);
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #909599;
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
 }
-.duet-input-variation-revealable.duet-theme-turva:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #747475;
+.duet-theme-turva .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative, .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative.duet-theme-turva, .duet-theme-turva2 .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative, .duet-input-variation-revealable:hover:not(.disabled) .duet-input-relative.duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-input-variation-revealable.has-error:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-input-variation-revealable.duet-theme-turva.has-error:hover:not(.disabled) .duet-input-relative {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 
+.duet-input-container.has-chips.has-focus .duet-input-relative {
+  outline: 2px solid;
+  outline-offset: -1px;
+  outline-color: rgb(62, 84, 102);
+}
+.duet-theme-turva .duet-input-container.has-chips.has-focus .duet-input-relative {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgb(53, 79, 101);
+}
 .duet-input-container.has-chips .duet-input-relative {
   display: flex;
   flex-direction: row;
@@ -541,63 +539,62 @@ duet-caption:not(:last-of-type) {
   width: auto;
   border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
-  box-shadow: initial;
-  transition: box-shadow 150ms ease, border 150ms ease;
+  transition: border 150ms ease;
 }
 .duet-theme-turva .duet-input-container.has-chips .duet-input-relative {
   border-color: rgb(143, 147, 158);
 }
 .duet-input-container.has-chips .duet-input-relative .duet-input {
-  flex-basis: 4rem;
   flex-grow: 1;
+  flex-basis: 4rem;
   padding-left: 0 !important;
   margin-left: 12px !important;
   border-width: 0 !important;
 }
 .duet-input-container.has-chips .duet-input-relative .duet-input:focus, .duet-input-container.has-chips .duet-input-relative .duet-input:hover {
+  outline: none !important;
   border-width: 0 !important;
-  box-shadow: none !important;
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input-icon {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input {
-  color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input::-webkit-input-placeholder {
-  color: #7891a4;
+  color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus::-webkit-input-placeholder {
-  color: #b2c2cd;
+  color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input:-moz-placeholder {
-  color: #7891a4;
+  color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus::-moz-placeholder {
-  color: #b2c2cd;
+  color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input:-ms-input-placeholder {
-  color: #7891a4;
+  color: rgb(120, 145, 164);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus:-ms-input-placeholder {
-  color: #f1cab2;
+  color: rgb(241, 202, 178);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input[disabled] {
-  color: #172a3b !important;
-  background: #f5f6f7 !important;
-  border-color: #f5f6f7 !important;
-  -webkit-text-fill-color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
+  background: rgb(245, 246, 247) !important;
+  border-color: rgb(245, 246, 247) !important;
+  -webkit-text-fill-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus {
-  border-color: #172a3b !important;
+  border-color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input:focus + .duet-input-icon {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input-variation-button-left.has-focus .duet-input-relative {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-input-variation-revealable.has-focus .duet-input-relative {
-  border-color: #172a3b;
+  border-color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-label/duet-label.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-bottom: 12px !important;
   position: relative;
   z-index: 100;
@@ -90,5 +90,5 @@ label span {
 }
 
 :host(.duet-theme-turva2.duet-theme-turva) label {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

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

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 ::slotted([slot=page-heading]) {
@@ -49,11 +49,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   flex: 1 0 auto;
   width: 100%;

package/lib/collection/components/duet-link/duet-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;
   display: inline;
 }
 
@@ -36,6 +36,9 @@
 :host(.duet-link-button):last-child, :host(.duet-link-button):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-link-button):last-of-type {
+  margin-right: 8px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -52,11 +55,14 @@
   transition: 300ms ease;
 }
 .duet-link: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-link:focus, .duet-link: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-link:focus, .duet-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-link:focus, .duet-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-link.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";
@@ -93,8 +99,8 @@ button {
 }
 .duet-link-is-external.duet-link:not(.block, .button, .card) .duet-link-icon-tail,
 .duet-link-is-download.duet-link:not(.block, .button, .card) .duet-link-icon-tail {
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 
 .duet-tab-to-link {
@@ -130,7 +136,6 @@ button {
   left: 20px;
   width: auto;
   height: auto;
-  outline: 0;
   opacity: 1;
 }
 
@@ -233,8 +238,6 @@ button {
   background-color: rgb(255, 255, 255);
   border: solid 1px rgb(181, 198, 208);
   border-radius: 12px;
-  outline: 0 solid rgb(181, 198, 208);
-  outline-offset: -2px;
   transition: all 300ms ease;
 }
 .duet-link.button > *,
@@ -291,8 +294,8 @@ button {
 .duet-link.button:hover,
 .duet-link.list-button:hover,
 .duet-link.card:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
+  border-color: rgb(0, 119, 179);
 }
 @media (min-width: 48em) {
   .duet-link.button,
@@ -333,8 +336,8 @@ button {
 .duet-link.button.duet-theme-turva:hover,
 .duet-link.list-button.duet-theme-turva:hover,
 .duet-link.card.duet-theme-turva:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-link.button .block__chevron-icon,
 .duet-link.list-button .block__chevron-icon,
@@ -365,8 +368,8 @@ button {
   }
 }
 .duet-link.list-button:hover {
-  border-color: rgb(181, 198, 208);
   outline: 0;
+  border-color: rgb(181, 198, 208);
 }
 .duet-link.list-button:hover .duet-link-content {
   color: rgb(0, 119, 179);
@@ -431,29 +434,29 @@ button {
 }
 
 :host(.duet-theme-turva2) .duet-link.duet-theme-turva {
-  color: #b90329;
+  color: rgb(185, 3, 41);
 }
 :host(.duet-theme-turva2) .duet-link.duet-theme-turva:hover {
-  color: #8c001e;
+  color: rgb(140, 0, 30);
 }
 :host(.duet-theme-turva2) .duet-tab-to-link.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-link.button.duet-theme-turva,
 :host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva {
-  border-color: #b2c2cd;
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-link.button.duet-theme-turva .duet-link-content,
 :host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva .duet-link-content {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-link.button.duet-theme-turva:hover {
-  border-color: #e61740;
-  outline-color: #e61740;
+  outline-color: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva:hover {
-  border-color: #b2c2cd;
+  border-color: rgb(178, 194, 205);
 }
 :host(.duet-theme-turva2) .duet-link.list-button.duet-theme-turva:hover .duet-link-content {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-list/duet-list.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;
   display: block;
   width: 100%;
 }

package/lib/collection/components/duet-list-item/duet-list-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;
   flex-direction: column;
   display: flex;
   width: 100%;
@@ -46,9 +46,9 @@
 :host dd {
   width: 100%;
   margin-inline-start: 0;
+  text-align: left;
   -webkit-hyphens: auto;
   hyphens: auto;
-  text-align: left;
   overflow-wrap: break-word;
 }
 :host dt {
@@ -433,22 +433,22 @@
   }
 }
 :host(.duet-theme-turva2.duet-theme-turva) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 
 :host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,
 :host(.duet-theme-turva2.duet-list-striped.duet-theme-turva:nth-child(odd)) dd {
-  background: #f5f6f7;
+  background: rgb(245, 246, 247);
 }
 
 :host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva) {
-  border-block-start: 1px solid #d4dde2;
+  border-block-start: 1px solid rgb(212, 221, 226);
 }
 
 :host(.duet-theme-turva2.duet-list-bordered.duet-theme-turva:last-child) {
-  border-block-end: 1px solid #d4dde2;
+  border-block-end: 1px solid rgb(212, 221, 226);
 }
 
 :host(.duet-theme-turva2.duet-list-inner-bordered.duet-theme-turva:not(:last-child)) {
-  border-block-end: 1px solid #d4dde2;
+  border-block-end: 1px solid rgb(212, 221, 226);
 }