@transferwise/components 0.0.0-experimental-68931a1 → 0.0.0-experimental-02ec4e3

package/build/styles/css/buttons.css

@@ -2,8 +2,32 @@
   block-size: 32px;
 }
 .btn {
-  line-height: 150%;
-  letter-spacing: -0.011em;
+  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 {
   word-wrap: break-word;
   display: inline-block;
   margin-block-end: 0;
@@ -15,12 +39,9 @@
   border: 1px solid transparent;
   white-space: nowrap;
   padding-block-end: 10px;
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   padding: var(--btn-padding);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.5rem;
+  font-size: var(--wds-font-size-body-large);
   line-height: var(--line-height-24);
   border-radius: var(--btn-radius-base);
   min-block-size: var(--btn-height);
@@ -57,9 +78,7 @@
   }
 }
 .btn .dropdown-menu > li > a {
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.5rem;
+  font-size: var(--wds-font-size-body-large);
   line-height: var(--line-height-24);
 }
 .np-theme-personal .btn {
@@ -82,7 +101,6 @@
   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;
@@ -101,36 +119,28 @@ 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,
@@ -139,40 +149,31 @@ 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,
@@ -180,7 +181,6 @@ 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,27 +192,21 @@ 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,
@@ -226,18 +220,14 @@ 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,
@@ -247,9 +237,7 @@ 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,
@@ -259,9 +247,7 @@ 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,
@@ -272,25 +258,20 @@ 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,
@@ -300,9 +281,7 @@ 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,
@@ -312,9 +291,7 @@ 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,
@@ -326,24 +303,19 @@ 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,
@@ -353,9 +325,7 @@ 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,
@@ -365,9 +335,7 @@ 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,
@@ -378,7 +346,6 @@ 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);
 }
@@ -392,9 +359,7 @@ 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,
@@ -404,9 +369,7 @@ 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,
@@ -416,9 +379,7 @@ 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,
@@ -434,7 +395,6 @@ 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;
@@ -456,7 +416,6 @@ 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;
@@ -465,7 +424,6 @@ 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,
@@ -492,7 +450,6 @@ 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;
@@ -506,18 +463,14 @@ 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,
@@ -527,9 +480,7 @@ 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,
@@ -539,9 +490,7 @@ 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,
@@ -552,25 +501,20 @@ 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,
@@ -580,9 +524,7 @@ 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,
@@ -592,9 +534,7 @@ 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,
@@ -606,24 +546,19 @@ 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,
@@ -633,9 +568,7 @@ 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,
@@ -645,9 +578,7 @@ 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,
@@ -658,7 +589,6 @@ 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);
 }
@@ -672,9 +602,7 @@ 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,
@@ -684,9 +612,7 @@ 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,
@@ -696,9 +622,7 @@ 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,
@@ -781,18 +705,14 @@ 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,
@@ -802,9 +722,7 @@ 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,
@@ -814,9 +732,7 @@ 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,
@@ -827,25 +743,20 @@ 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,
@@ -855,9 +766,7 @@ 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,
@@ -867,9 +776,7 @@ 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,
@@ -881,7 +788,6 @@ 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,
@@ -974,21 +880,15 @@ 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,
@@ -997,11 +897,8 @@ 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,
@@ -1010,11 +907,8 @@ 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,
@@ -1025,9 +919,7 @@ 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 {
@@ -1045,7 +937,6 @@ 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 {
@@ -1083,17 +974,13 @@ 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 {
@@ -1106,18 +993,14 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-sm,
 .navbar .btn {
   padding: var(--btn-sm-padding);
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 1.375rem;
+  font-size: var(--wds-font-size-body);
   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: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 1.375rem;
+  font-size: var(--wds-font-size-body);
   line-height: var(--line-height-22);
 }
 .np-theme-personal .btn-sm,
@@ -1127,17 +1010,13 @@ 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 {
@@ -1145,7 +1024,6 @@ 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;
@@ -1153,17 +1031,13 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 @media (max-width: 839px) {
   .navbar-collapse .btn {
     padding: var(--btn-padding);
-    font-size: 1rem;
-    font-size: var(--font-size-16);
-    line-height: 1.5rem;
+    font-size: var(--wds-font-size-body-large);
     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: 1rem;
-    font-size: var(--font-size-16);
-    line-height: 1.5rem;
+    font-size: var(--wds-font-size-body-large);
     line-height: var(--line-height-24);
   }
   .np-theme-personal .navbar-collapse .btn {
@@ -1177,7 +1051,6 @@ 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,
@@ -1186,20 +1059,17 @@ input[type="button"].btn-block {
   inline-size: 100%;
 }
 .btn-input {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-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;
 }
@@ -1207,11 +1077,9 @@ 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 {
@@ -1219,13 +1087,11 @@ 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: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .btn-input-inverse {
   --color-content-primary: #ffffff;
@@ -1284,11 +1150,8 @@ 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 {
@@ -1327,7 +1190,6 @@ 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 {
@@ -1343,9 +1205,7 @@ 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) {
@@ -1353,9 +1213,7 @@ 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 {