@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/styles/less/buttons.css

@@ -2,32 +2,8 @@
   block-size: 32px;
 }
 .btn {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .btn {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .btn {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .btn {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .btn {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .btn {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.btn {
+  line-height: 150%;
+  letter-spacing: -0.011em;
   word-wrap: break-word;
   display: inline-block;
   margin-block-end: 0;
@@ -39,9 +15,12 @@
   border: 1px solid transparent;
   white-space: nowrap;
   padding-block-end: 10px;
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
   padding: var(--btn-padding);
-  font-size: var(--wds-font-size-body-large);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 1.5rem;
   line-height: var(--line-height-24);
   border-radius: var(--btn-radius-base);
   min-block-size: var(--btn-height);
@@ -78,7 +57,9 @@
   }
 }
 .btn .dropdown-menu > li > a {
-  font-size: var(--wds-font-size-body-large);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 1.5rem;
   line-height: var(--line-height-24);
 }
 .np-theme-personal .btn {
@@ -101,6 +82,7 @@
   outline-color: var(--color-sentiment-negative);
 }
 .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
+  color: #008fc9;
   color: var(--color-interactive-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -119,28 +101,36 @@ fieldset[disabled] a.btn {
   pointer-events: none;
 }
 .btn-default {
+  color: #0097c7;
   color: var(--color-content-accent);
   background-color: transparent;
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   transition: color, background-color 0.15s ease-in-out;
 }
 .btn-default:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: #FFF;
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active,
 .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
 .open > .dropdown-toggle.btn-default {
   color: #FFF;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
 .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.btn-default:not(.disabled):not(:disabled):hover {
   color: #FFF;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -149,31 +139,40 @@ fieldset[disabled] a.btn {
 }
 .btn-default .badge {
   color: transparent;
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
 }
 .np-theme-personal .btn-default {
   color: var(--color-interactive-control);
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   transition: color, background-color 0.15s ease-in-out;
 }
 .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: var(--color-interactive-control);
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active,
 .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
 .open > .dropdown-toggle.np-theme-personal .btn-default {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
 .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.np-theme-personal .btn-default:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -181,6 +180,7 @@ fieldset[disabled] a.btn {
   background-image: none;
 }
 .np-theme-personal .btn-default .badge {
+  color: #00a2dd;
   color: var(--color-interactive-accent);
   background-color: var(--color-interactive-control);
 }
@@ -192,21 +192,27 @@ fieldset[disabled] a.btn {
 }
 .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: var(--color-interactive-control);
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
 .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
 .open > .dropdown-toggle.np-theme-personal .btn-default.btn-priority-2 {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
 .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-default.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -220,14 +226,18 @@ fieldset[disabled] a.btn {
 .btn-accent,
 .btn-primary {
   color: #fff;
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   transition: color, background-color 0.15s ease-in-out;
 }
 .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .btn-primary:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: #fff;
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -237,7 +247,9 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.btn-accent,
 .open > .dropdown-toggle.btn-primary {
   color: #fff;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -247,7 +259,9 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.btn-accent:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.btn-primary:not(.disabled):not(:disabled):hover {
   color: #fff;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .btn-accent:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -258,20 +272,25 @@ fieldset[disabled] a.btn {
 }
 .btn-accent .badge,
 .btn-primary .badge {
+  color: #00a2dd;
   color: var(--color-interactive-accent);
   background-color: #fff;
 }
 .btn-accent.btn-priority-2,
 .btn-primary.btn-priority-2 {
+  color: #00a2dd;
   color: var(--color-interactive-accent);
   background-color: transparent;
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   transition: color, background-color 0.15s ease-in-out;
 }
 .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: #fff;
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -281,7 +300,9 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.btn-accent.btn-priority-2,
 .open > .dropdown-toggle.btn-primary.btn-priority-2 {
   color: #fff;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -291,7 +312,9 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
   color: #fff;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -303,19 +326,24 @@ fieldset[disabled] a.btn {
 .btn-accent.btn-priority-2 .badge,
 .btn-primary.btn-priority-2 .badge {
   color: transparent;
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 .np-theme-personal .btn-accent,
 .np-theme-personal .btn-primary {
   color: var(--color-interactive-control);
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   transition: color, background-color 0.15s ease-in-out;
 }
 .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .np-theme-personal .btn-primary:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: var(--color-interactive-control);
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -325,7 +353,9 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.np-theme-personal .btn-accent,
 .open > .dropdown-toggle.np-theme-personal .btn-primary {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -335,7 +365,9 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.np-theme-personal .btn-accent:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.np-theme-personal .btn-primary:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-accent:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -346,6 +378,7 @@ fieldset[disabled] a.btn {
 }
 .np-theme-personal .btn-accent .badge,
 .np-theme-personal .btn-primary .badge {
+  color: #00a2dd;
   color: var(--color-interactive-accent);
   background-color: var(--color-interactive-control);
 }
@@ -359,7 +392,9 @@ fieldset[disabled] a.btn {
 .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: var(--color-interactive-control);
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -369,7 +404,9 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.np-theme-personal .btn-accent.btn-priority-2,
 .open > .dropdown-toggle.np-theme-personal .btn-primary.btn-priority-2 {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -379,7 +416,9 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.np-theme-personal .btn-primary.btn-priority-2:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-accent.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -395,6 +434,7 @@ fieldset[disabled] a.btn {
 }
 .btn-link,
 .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -416,6 +456,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .btn-link:not(.disabled):not(:disabled):focus-visible,
 .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):focus-visible {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -424,6 +465,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 }
 .btn-link:not(.disabled):not(:disabled):not(.btn-loading):active,
 .btn-accent:not(.disabled):not(:disabled).btn-priority-3:not(.disabled):not(:disabled):not(.btn-loading):active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .np-theme-personal .btn-link,
@@ -450,6 +492,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-accent.btn-priority-3:disabled {
   background: transparent;
   border-color: transparent;
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -463,14 +506,18 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-positive,
 .btn-success {
   color: #fff;
+  background-color: #2ead4b;
   background-color: var(--color-interactive-positive);
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
   transition: color, background-color 0.15s ease-in-out;
 }
 .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .btn-success:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: #fff;
+  background-color: #069939;
   background-color: var(--color-interactive-positive-hover);
+  border-color: #069939;
   border-color: var(--color-interactive-positive-hover);
 }
 .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -480,7 +527,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.btn-positive,
 .open > .dropdown-toggle.btn-success {
   color: #fff;
+  background-color: #008b2b;
   background-color: var(--color-interactive-positive-active);
+  border-color: #008b2b;
   border-color: var(--color-interactive-positive-active);
 }
 .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -490,7 +539,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.btn-positive:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.btn-success:not(.disabled):not(:disabled):hover {
   color: #fff;
+  background-color: #008b2b;
   background-color: var(--color-interactive-positive-active);
+  border-color: #008b2b;
   border-color: var(--color-interactive-positive-active);
 }
 .btn-positive:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -501,20 +552,25 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 }
 .btn-positive .badge,
 .btn-success .badge {
+  color: #2ead4b;
   color: var(--color-interactive-positive);
   background-color: #fff;
 }
 .btn-positive.btn-priority-2,
 .btn-success.btn-priority-2 {
+  color: #2ead4b;
   color: var(--color-interactive-positive);
   background-color: transparent;
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
   transition: color, background-color 0.15s ease-in-out;
 }
 .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: #fff;
+  background-color: #069939;
   background-color: var(--color-interactive-positive-hover);
+  border-color: #069939;
   border-color: var(--color-interactive-positive-hover);
 }
 .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -524,7 +580,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.btn-positive.btn-priority-2,
 .open > .dropdown-toggle.btn-success.btn-priority-2 {
   color: #fff;
+  background-color: #008b2b;
   background-color: var(--color-interactive-positive-active);
+  border-color: #008b2b;
   border-color: var(--color-interactive-positive-active);
 }
 .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -534,7 +592,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
   color: #fff;
+  background-color: #008b2b;
   background-color: var(--color-interactive-positive-active);
+  border-color: #008b2b;
   border-color: var(--color-interactive-positive-active);
 }
 .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -546,19 +606,24 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-positive.btn-priority-2 .badge,
 .btn-success.btn-priority-2 .badge {
   color: transparent;
+  background-color: #2ead4b;
   background-color: var(--color-interactive-positive);
 }
 .np-theme-personal .btn-positive,
 .np-theme-personal .btn-success {
   color: var(--color-interactive-control);
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   transition: color, background-color 0.15s ease-in-out;
 }
 .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .np-theme-personal .btn-success:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: var(--color-interactive-control);
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -568,7 +633,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.np-theme-personal .btn-positive,
 .open > .dropdown-toggle.np-theme-personal .btn-success {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -578,7 +645,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.np-theme-personal .btn-positive:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.np-theme-personal .btn-success:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .btn-positive:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -589,6 +658,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 }
 .np-theme-personal .btn-positive .badge,
 .np-theme-personal .btn-success .badge {
+  color: #00a2dd;
   color: var(--color-interactive-accent);
   background-color: var(--color-interactive-control);
 }
@@ -602,7 +672,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: var(--color-interactive-control);
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -612,7 +684,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.np-theme-personal .btn-positive.btn-priority-2,
 .open > .dropdown-toggle.np-theme-personal .btn-success.btn-priority-2 {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -622,7 +696,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.np-theme-personal .btn-success.btn-priority-2:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-control);
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .btn-positive.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -705,14 +781,18 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-danger,
 .btn-negative {
   color: #fff;
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
   transition: color, background-color 0.15s ease-in-out;
 }
 .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .btn-negative:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: #fff;
+  background-color: #d03238;
   background-color: var(--color-interactive-negative-hover);
+  border-color: #d03238;
   border-color: var(--color-interactive-negative-hover);
 }
 .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -722,7 +802,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.btn-danger,
 .open > .dropdown-toggle.btn-negative {
   color: #fff;
+  background-color: #bf1e2c;
   background-color: var(--color-interactive-negative-active);
+  border-color: #bf1e2c;
   border-color: var(--color-interactive-negative-active);
 }
 .btn-danger:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -732,7 +814,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.btn-danger:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.btn-negative:not(.disabled):not(:disabled):hover {
   color: #fff;
+  background-color: #bf1e2c;
   background-color: var(--color-interactive-negative-active);
+  border-color: #bf1e2c;
   border-color: var(--color-interactive-negative-active);
 }
 .btn-danger:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -743,20 +827,25 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 }
 .btn-danger .badge,
 .btn-negative .badge {
+  color: #e74848;
   color: var(--color-interactive-negative);
   background-color: #fff;
 }
 .btn-danger.btn-priority-2,
 .btn-negative.btn-priority-2 {
+  color: #e74848;
   color: var(--color-interactive-negative);
   background-color: transparent;
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
   transition: color, background-color 0.15s ease-in-out;
 }
 .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .btn-negative.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):hover {
   color: #fff;
+  background-color: #d03238;
   background-color: var(--color-interactive-negative-hover);
+  border-color: #d03238;
   border-color: var(--color-interactive-negative-hover);
 }
 .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -766,7 +855,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.btn-danger.btn-priority-2,
 .open > .dropdown-toggle.btn-negative.btn-priority-2 {
   color: #fff;
+  background-color: #bf1e2c;
   background-color: var(--color-interactive-negative-active);
+  border-color: #bf1e2c;
   border-color: var(--color-interactive-negative-active);
 }
 .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -776,7 +867,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .open > .dropdown-toggle.btn-danger.btn-priority-2:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.btn-negative.btn-priority-2:not(.disabled):not(:disabled):hover {
   color: #fff;
+  background-color: #bf1e2c;
   background-color: var(--color-interactive-negative-active);
+  border-color: #bf1e2c;
   border-color: var(--color-interactive-negative-active);
 }
 .btn-danger.btn-priority-2:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -788,6 +881,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-danger.btn-priority-2 .badge,
 .btn-negative.btn-priority-2 .badge {
   color: transparent;
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .np-theme-personal .btn-danger,
@@ -880,15 +974,21 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 }
 .bootstrap-select .btn-default,
 .btn-input {
+  color: #37517e;
   color: var(--color-content-primary);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
   transition: color, background-color 0.15s ease-in-out;
 }
 .bootstrap-select .btn-default:not(.disabled):not(:disabled):not(.btn-loading):hover,
 .btn-input:not(.disabled):not(:disabled):not(.btn-loading):hover {
+  color: #37517e;
   color: var(--color-content-primary);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .bootstrap-select .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active,
@@ -897,8 +997,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-input:not(.disabled):not(:disabled):not(.btn-loading).active,
 .open > .dropdown-toggle.bootstrap-select .btn-default,
 .open > .dropdown-toggle.btn-input {
+  color: #37517e;
   color: var(--color-content-primary);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
 }
 .bootstrap-select .btn-default:not(.disabled):not(:disabled):not(.btn-loading):active:not(.disabled):not(:disabled):hover,
@@ -907,8 +1010,11 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-input:not(.disabled):not(:disabled):not(.btn-loading).active:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.bootstrap-select .btn-default:not(.disabled):not(:disabled):hover,
 .open > .dropdown-toggle.btn-input:not(.disabled):not(:disabled):hover {
+  color: #37517e;
   color: var(--color-content-primary);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
 }
 .bootstrap-select .btn-default:not(.disabled):not(:disabled):not(.btn-loading).active,
@@ -919,7 +1025,9 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 }
 .bootstrap-select .btn-default .badge,
 .btn-input .badge {
+  color: #ffffff;
   color: var(--color-background-screen);
+  background-color: #37517e;
   background-color: var(--color-content-primary);
 }
 .btn-image {
@@ -937,6 +1045,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   background: #384347;
 }
 .btn-input .caret {
+  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
 }
 .btn-inverse {
@@ -974,13 +1083,17 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 }
 .btn-lg {
   padding: var(--btn-lg-padding);
+  font-size: 1.125rem;
   font-size: var(--font-size-18);
+  line-height: 1.75rem;
   line-height: var(--line-height-28);
   border-radius: var(--btn-lg-radius-base);
   min-block-size: var(--btn-lg-height);
 }
 .btn-lg .dropdown-menu > li > a {
+  font-size: 1.125rem;
   font-size: var(--font-size-18);
+  line-height: 1.75rem;
   line-height: var(--line-height-28);
 }
 .np-theme-personal .btn-lg {
@@ -993,14 +1106,18 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-sm,
 .navbar .btn {
   padding: var(--btn-sm-padding);
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 1.375rem;
   line-height: var(--line-height-22);
   border-radius: var(--btn-sm-radius-base);
   min-block-size: var(--btn-sm-height);
 }
 .btn-sm .dropdown-menu > li > a,
 .navbar .btn .dropdown-menu > li > a {
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 1.375rem;
   line-height: var(--line-height-22);
 }
 .np-theme-personal .btn-sm,
@@ -1010,13 +1127,17 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 }
 .btn-xs {
   padding: var(--btn-xs-padding);
+  font-size: 0.75rem;
   font-size: var(--font-size-12);
+  line-height: 1.25rem;
   line-height: var(--line-height-20);
   border-radius: var(--btn-sm-radius-base);
   min-block-size: 22px;
 }
 .btn-xs .dropdown-menu > li > a {
+  font-size: 0.75rem;
   font-size: var(--font-size-12);
+  line-height: 1.25rem;
   line-height: var(--line-height-20);
 }
 .np-theme-personal .btn-xs {
@@ -1024,6 +1145,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   line-height: 18px;
 }
 .np-theme-personal .btn-xs .btn-loader {
+  margin-inline-start: calc(8px / 2) !important;
   margin-inline-start: calc(var(--padding-x-small) / 2) !important;
   block-size: 18px;
   background-size: 12px 12px !important;
@@ -1031,13 +1153,17 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 @media (max-width: 839px) {
   .navbar-collapse .btn {
     padding: var(--btn-padding);
-    font-size: var(--wds-font-size-body-large);
+    font-size: 1rem;
+    font-size: var(--font-size-16);
+    line-height: 1.5rem;
     line-height: var(--line-height-24);
     border-radius: var(--border-radius-base);
     min-block-size: var(--btn-height);
   }
   .navbar-collapse .btn .dropdown-menu > li > a {
-    font-size: var(--wds-font-size-body-large);
+    font-size: 1rem;
+    font-size: var(--font-size-16);
+    line-height: 1.5rem;
     line-height: var(--line-height-24);
   }
   .np-theme-personal .navbar-collapse .btn {
@@ -1051,6 +1177,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   inline-size: 100%;
 }
 .btn-block + .btn-block {
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 input[type="submit"].btn-block,
@@ -1059,17 +1186,20 @@ input[type="button"].btn-block {
   inline-size: 100%;
 }
 .btn-input {
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   padding-inline-start: 16px;
   padding-inline-end: 16px;
 }
 .btn-input:not(.disabled):not(:disabled):hover {
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .btn-input:not(.disabled):not(:disabled).active,
 .btn-input:not(.disabled):not(:disabled):active,
 .btn-input:not(.disabled):not(:disabled).focus,
 .btn-input:not(.disabled):not(:disabled):focus-visible {
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
   outline: 0 none !important;
 }
@@ -1077,9 +1207,11 @@ input[type="button"].btn-block {
 .np-theme-personal .btn-input:not(.disabled):not(:disabled):active,
 .np-theme-personal .btn-input:not(.disabled):not(:disabled).focus,
 .np-theme-personal .btn-input:not(.disabled):not(:disabled):focus-visible {
+  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
 }
 .btn-input .caret {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 .btn-input.btn-sm {
@@ -1087,11 +1219,13 @@ input[type="button"].btn-block {
   padding-inline-end: 12px;
 }
 .btn-input.btn-lg {
+  font-size: 1.25rem;
   font-size: var(--font-size-20);
 }
 .btn-input.btn-lg.btn-addon,
 .btn-input.btn-lg.btn-input-inverse {
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
 }
 .btn-input-inverse {
   --color-content-primary: #ffffff;
@@ -1150,8 +1284,11 @@ input[type="button"].btn-block {
   padding-inline: 16px;
 }
 .bootstrap-select.open > .dropdown-toggle.btn-default {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .btn-loader {
@@ -1190,6 +1327,7 @@ input[type="button"].btn-block {
   background-size: 16px 16px;
 }
 .np-theme-personal .btn-sm .btn-loader {
+  margin-inline-start: calc(16px / 2) !important;
   margin-inline-start: calc(var(--padding-small) / 2) !important;
 }
 @keyframes rotating {
@@ -1205,7 +1343,9 @@ input[type="button"].btn-block {
 }
 .btn-input.btn .tw-icon {
   position: absolute;
+  inset-inline-end: 16px;
   inset-inline-end: var(--size-16);
+  inset-block-start: 16px;
   inset-block-start: var(--size-16);
 }
 .btn-input.btn .tw-icon:not(.tw-chevron):not(.tw-icon-chevron-down) {
@@ -1213,7 +1353,9 @@ input[type="button"].btn-block {
   position: initial;
 }
 .btn-input.btn.btn-sm .tw-icon {
+  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
+  inset-block-start: 8px;
   inset-block-start: var(--size-8);
 }
 .btn-input.btn.btn-lg .tw-icon {