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

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 4px !important;
   margin-bottom: 2px !important;
   display: inline-block;
@@ -43,10 +43,10 @@
   font-style: normal;
   font-weight: 600;
   line-height: 1.25;
+  vertical-align: middle;
   color: rgb(8, 42, 77);
   text-align: center;
   word-break: break-word;
-  vertical-align: middle;
   background: #d9ebf4;
   border-radius: 20rem;
 }
@@ -83,14 +83,14 @@
 }
 .duet-badge.subtle {
   color: rgb(98, 121, 138);
-  background: none;
   outline: 1px solid rgb(212, 223, 229);
   outline-offset: -1px;
+  background: none;
 }
 .duet-badge.subtle.duet-theme-turva {
   color: rgb(113, 118, 132);
-  background: none;
   outline-color: rgb(222, 224, 228);
+  background: none;
 }
 .duet-badge.background-strong.default {
   color: rgb(255, 255, 255);
@@ -123,22 +123,22 @@
   background: rgb(48, 131, 105);
 }
 .duet-badge.background-strong.subtle {
-  border-color: rgb(181, 198, 208);
   outline-color: rgb(8, 42, 77);
+  border-color: rgb(181, 198, 208);
 }
 .duet-badge.background-strong.subtle.duet-theme-turva {
-  border-color: rgb(199, 202, 207);
   outline-color: rgb(23, 28, 58);
+  border-color: rgb(199, 202, 207);
 }
 
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.default {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
   background: #e8eaeb;
 }
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.default {
   color: rgb(255, 255, 255);
-  background: #172a3b;
+  background: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-badge.duet-theme-turva.background-strong.subtle {
-  outline-color: #172a3b;
+  outline-color: rgb(23, 42, 59);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 36px !important;
   margin-bottom: 36px !important;
   display: flex;
@@ -56,11 +56,9 @@
   position: relative;
   display: none;
   overflow: hidden;
-  /* stylelint-disable */
 }
-@container duet-banner-container (min-width: 0px) {
+@container duet-banner-container (min-width: 0) {
   .duet-banner .visual {
-    /* stylelint-enable */
     display: block;
   }
 }
@@ -100,8 +98,8 @@
 }
 .duet-banner .action {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
   padding-top: 16px;
@@ -125,13 +123,8 @@
 .duet-banner.duet-theme-turva .visual .brand-shape {
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
 }
-.duet-banner.size-medium, .duet-banner.size-large {
-  /* stylelint-disable */
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.size-medium, .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-rows: none;
     grid-template-columns: 50% 50%;
   }
@@ -164,19 +157,12 @@
   }
 }
 @container duet-banner-container (min-width: 586px) {
-  .duet-banner.size-medium, .duet-banner.size-large {
-    /* stylelint-enable */
-  }
   .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {
     left: 80%;
   }
 }
-.duet-banner.size-large {
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 900px) {
   .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-rows: none;
     grid-template-columns: 50% 50%;
   }
@@ -221,12 +207,8 @@
   max-width: 720px;
   padding: 0;
 }
-.duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
-    /* stylelint-enable */
     padding: 48px;
   }
 }
@@ -234,9 +216,6 @@
 :host(.duet-theme-turva2) .duet-banner {
   border-radius: 8px;
 }
-:host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
-  /* stylelint-disable */
-}
 :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
@@ -246,7 +225,6 @@
 }
 @container duet-banner-container (min-width: 486px) {
   :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-columns: 1fr 1fr;
     gap: 28px;
     border-radius: 12px;

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.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: list-item;
   width: auto;
 }
@@ -60,8 +60,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-breadcrumb:focus {
-  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);
 }
-:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva: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-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumbs.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%;
 }
@@ -143,12 +143,12 @@
 }
 
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header {
-  color: #172a3b;
-  background: #fdf7f2;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover {
   color: rgb(126, 2, 35);
 }
 :host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.footer {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 8px !important;
   margin-bottom: 12px !important;
   position: relative;
@@ -127,7 +127,7 @@
   background: transparent;
   border-style: solid;
   border-width: 1px;
-  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, outline 300ms ease, padding 300ms ease, box-shadow 300ms ease;
+  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, padding 300ms ease, box-shadow 300ms ease;
 }
 .duet-button.duet-p-0 {
   padding: 0 !important;
@@ -136,11 +136,14 @@
   margin: 0 !important;
 }
 .duet-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-button:focus, .duet-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-button.duet-button-size-medium {
   height: 50px;
@@ -288,13 +291,13 @@
   border-color: rgb(222, 224, 228);
 }
 .duet-button.default:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-button.default:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-button.default.duet-button-negative {
   background-color: rgb(255, 255, 255);
@@ -329,13 +332,6 @@
   background: rgb(126, 2, 35);
   border-color: rgb(126, 2, 35);
 }
-.duet-button.primary:focus, .duet-button.input-button-primary:focus, .duet-button.input-button-left-primary:focus {
-  outline: 0;
-  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(0, 119, 179, 0.75);
-}
-.duet-theme-turva .duet-button.primary:focus, .duet-theme-turva .duet-button.input-button-primary:focus, .duet-theme-turva .duet-button.input-button-left-primary:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(23, 28, 58, 0.75);
-}
 .duet-button.secondary, .duet-button.input-button-secondary, .duet-button.input-button-left-secondary, .duet-button.input-button-embedded {
   color: rgb(8, 42, 77) !important;
   background: transparent;
@@ -348,6 +344,12 @@
 .duet-button.secondary:hover, .duet-button.input-button-secondary:hover, .duet-button.input-button-left-secondary:hover, .duet-button.input-button-embedded:hover {
   color: rgb(0, 119, 179) !important;
   border-color: rgb(0, 119, 179);
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
+}
+.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-theme-turva .duet-button.secondary:hover, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-theme-turva .duet-button.input-button-embedded:hover {
   color: rgb(198, 12, 48) !important;
@@ -392,13 +394,6 @@
   background: transparent;
   border-color: rgb(255, 255, 255);
 }
-.duet-button.negative:focus {
-  outline: 0;
-  box-shadow: 0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7);
-}
-.duet-theme-turva .duet-button.negative:focus {
-  box-shadow: 0 0 0 1px #0077b3, 0 0 0 4px rgba(255, 255, 255, 0.7);
-}
 .duet-button.destructive-primary {
   color: rgb(255, 255, 255) !important;
   background: rgb(214, 28, 82);
@@ -484,6 +479,9 @@
 .duet-button.plain.duet-button-negative:hover {
   color: rgba(255, 255, 255, 0.8) !important;
 }
+.duet-button.plain.duet-button-icon-only:focus {
+  outline-offset: 1px;
+}
 .duet-button.duet-button-icon-only {
   min-width: 48px;
   min-height: 48px;
@@ -577,13 +575,13 @@
   border-color: rgb(222, 224, 228);
 }
 .duet-button.square:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-button.square:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-button.square .duet-button-contents {
   gap: 0;
@@ -591,17 +589,19 @@
 .duet-button[disabled], .duet-button[disabled]:hover, .duet-button.duet-button-negative[disabled], .duet-button.duet-button-negative[disabled]:hover {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed;
+  outline: none !important;
+  outline-color: rgb(212, 223, 229) !important;
+  outline-color: rgb(212, 223, 229) !important;
   background: rgb(212, 223, 229) !important;
   border-color: rgb(212, 223, 229) !important;
-  outline-color: rgb(212, 223, 229) !important;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button[disabled]:hover, .duet-theme-turva .duet-button.duet-button-negative [disabled], .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
   color: rgb(143, 147, 158) !important;
   cursor: not-allowed;
+  outline-color: rgb(222, 224, 228) !important;
   background: rgb(222, 224, 228) !important;
   border-color: rgb(222, 224, 228) !important;
-  outline-color: rgb(222, 224, 228) !important;
 }
 
 .duet-button-is-loading.primary, .duet-button-is-loading.input-button-primary {
@@ -622,77 +622,85 @@
   border-radius: 8px;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default {
-  color: #e61740 !important;
-  border-color: #fbe1d1;
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default:hover {
-  border-color: #e61740;
-  outline-color: #e61740;
+  outline-color: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative {
-  background-color: #fbe1d1 !important;
+  background-color: rgb(251, 225, 209) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative:hover {
-  color: #e61740 !important;
-  border-color: #e61740;
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-primary {
-  background: #e61740;
-  border-color: #e61740;
+  background: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded {
-  color: #172a3b !important;
-  border-color: #172a3b;
+  color: rgb(23, 42, 59) !important;
+  border-color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded:hover {
-  color: #e61740 !important;
-  border-color: #e61740;
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative {
-  color: #fbe1d1 !important;
+  color: rgb(251, 225, 209) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover {
-  color: #e61740 !important;
-  border-color: #e61740;
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-embedded {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-secondary {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative {
-  color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative:hover {
   color: rgb(255, 255, 255) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain {
-  color: #e61740 !important;
+  color: rgb(230, 23, 64) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain.duet-button-negative {
   color: rgb(255, 255, 255) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain:hover {
-  color: #8c001e !important;
+  color: rgb(140, 0, 30) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled]:hover {
-  color: #5f7a8f !important;
+  color: rgb(95, 122, 143) !important;
   background: transparent !important;
-  border-color: #fbe1d1 !important;
+  border-color: rgb(251, 225, 209) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square {
-  border-color: #fbe1d1;
+  border-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square.duet-button-negative {
-  background: #e61740;
-  border-color: #e61740;
+  background: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button.square:hover {
-  border-color: #e61740;
-  outline-color: #e61740;
+  outline-color: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled]:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
-  color: #7891a4 !important;
+  color: rgb(120, 145, 164) !important;
   cursor: not-allowed;
-  background: #d4dde2 !important;
-  border-color: #d4dde2 !important;
-  outline-color: #d4dde2 !important;
+  outline-color: rgb(212, 221, 226) !important;
+  background: rgb(212, 221, 226) !important;
+  border-color: rgb(212, 221, 226) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-button-is-loading.default {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }

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

@@ -2,11 +2,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;
   position: relative;
   display: block;
   width: 100%;
@@ -69,5 +69,5 @@ figure {
 
 :host(.duet-theme-turva2) .duet-callout.duet-theme-turva .author,
 :host(.duet-theme-turva2) .duet-callout.duet-theme-turva blockquote {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

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

@@ -2,11 +2,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;
   margin-bottom: 16px !important;
   display: flex;
   flex: 0 0 100%;
@@ -15,8 +15,8 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(98, 121, 138);
   vertical-align: top;
+  color: rgb(98, 121, 138);
 }
 :host.duet-p-0 {
   padding: 0 !important;
@@ -48,5 +48,5 @@
 }
 
 :host(.duet-theme-turva2.duet-caption-selected.duet-theme-turva) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }