@transferwise/components 46.165.2 → 46.165.3

package/src/styles/less/forms/checkbox-radio.css

@@ -1,6 +1,5 @@
 .radio,
 .checkbox {
-  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .radio > label,
@@ -18,9 +17,7 @@
   inset-inline-start: 40px;
 }
 .tw-checkbox-button {
-  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
-  background: #ffffff;
   background: var(--color-background-screen);
   inline-size: 22px;
   block-size: 22px;
@@ -33,7 +30,6 @@
 }
 .np-theme-personal .tw-checkbox-button {
   border: none;
-  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .tw-checkbox-button .tw-checkbox-check,
@@ -42,19 +38,16 @@
   block-size: 20px;
   margin: 0;
   display: none;
-  color: #ffffff;
   color: var(--color-background-screen);
 }
 .tw-checkbox-button:not(.disabled):not(:disabled):hover,
 input[type="checkbox"]:hover + .tw-checkbox-button,
 .checkbox:hover .tw-checkbox-button {
-  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .tw-checkbox-button:not(.disabled):not(:disabled):hover,
 .np-theme-personal input[type="checkbox"]:hover + .tw-checkbox-button,
 .np-theme-personal .checkbox:hover .tw-checkbox-button {
-  box-shadow: inset 0 0 0 1px #b5b7ba;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
 }
 .tw-checkbox-button:not(.disabled):not(:disabled):focus,
@@ -65,7 +58,6 @@ input[type="checkbox"]:focus + .tw-checkbox-button,
 .tw-checkbox-button:not(.disabled):not(:disabled):active,
 .tw-checkbox-button:not(.disabled):not(:disabled).active,
 input[type="checkbox"]:active + .tw-checkbox-button {
-  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
   outline: none;
 }
@@ -80,9 +72,7 @@ input[type="checkbox"]:focus-visible + .tw-checkbox-button {
 .tw-checkbox-button.checked,
 input[type="checkbox"]:checked + .tw-checkbox-button,
 input[type="checkbox"]:indeterminate + .tw-checkbox-button {
-  border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 .np-theme-personal .tw-checkbox-button:checked,
@@ -104,9 +94,7 @@ input[type="checkbox"]:indeterminate + .tw-checkbox-button .np-tw-checkbox-indet
 .tw-checkbox-button.checked:hover,
 input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
 input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
-  border-color: #008fc9 !important;
   border-color: var(--color-interactive-accent-hover) !important;
-  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .tw-checkbox-button:checked:hover,
@@ -121,9 +109,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-c
 .tw-checkbox-button.checked:active,
 input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
 input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
-  border-color: #0081ba !important;
   border-color: var(--color-interactive-accent-active) !important;
-  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .tw-checkbox-button:checked:active,
@@ -136,44 +122,34 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .checkbox.has-error .tw-checkbox-button,
 .tw-checkbox-button.has-error {
-  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
 }
 .checkbox.has-error .tw-checkbox-button:checked,
 .tw-checkbox-button.has-error:checked,
 .checkbox.has-error .tw-checkbox-button.checked,
 .tw-checkbox-button.has-error.checked {
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button,
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
-  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:indeterminate + .tw-checkbox-button {
-  border-color: #d03238 !important;
   border-color: var(--color-interactive-negative-hover) !important;
-  background-color: #d03238;
   background-color: var(--color-interactive-negative-hover);
 }
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
-  border-color: #bf1e2c !important;
   border-color: var(--color-interactive-negative-active) !important;
-  background-color: #bf1e2c;
   background-color: var(--color-interactive-negative-active);
 }
 .tw-radio-button {
   inline-size: 24px;
   block-size: 24px;
   border-radius: 50%;
-  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
-  background: #ffffff;
   background: var(--color-background-screen);
   display: inline-flex;
   align-items: center;
@@ -183,7 +159,6 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .np-theme-personal .tw-radio-button {
   border: none;
-  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   position: relative;
   inset-block-start: 0;
@@ -200,13 +175,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
 .tw-radio-button:not(.disabled):not(:disabled):hover {
-  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
 .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover {
   border-color: transparent;
-  box-shadow: inset 0 0 0 1px #b5b7ba;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked,
@@ -225,19 +198,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .tw-radio-button:not(.disabled):not(:disabled).focus,
 .tw-radio-button:not(.disabled):not(:disabled):active,
 .tw-radio-button:not(.disabled):not(:disabled).active {
-  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
   outline: none;
 }
 .tw-radio-button:checked,
 .tw-radio-button.checked {
-  border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
 }
 .tw-radio-button:checked .tw-radio-check,
 .tw-radio-button.checked .tw-radio-check {
   opacity: 1;
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 .np-theme-personal .tw-radio-button:checked,
@@ -253,14 +223,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio.has-error .tw-radio-button,
 .tw-radio-button.has-error {
-  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
 }
 .radio.has-error .tw-radio-button:checked .tw-radio-check,
 .tw-radio-button.has-error:checked .tw-radio-check,
 .radio.has-error .tw-radio-button.checked .tw-radio-check,
 .tw-radio-button.has-error.checked .tw-radio-check {
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .radio .tw-radio-button {
@@ -307,9 +275,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-checkbox.checkbox > label {
   display: flex;
   align-items: center;
-  padding-block: 8px;
   padding-block: var(--size-8);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 .np-radio.radio > label .np-checkbox__text,
@@ -323,11 +289,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
 :not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
-  font-weight: 400;
   font-weight: var(--font-weight-regular);
-  font-size: 1rem;
   font-size: var(--font-size-16);
-  line-height: 1.25rem;
   line-height: var(--line-height-20);
   padding-block-start: 3px;
 }

package/src/styles/less/grid.css

@@ -1219,7 +1219,6 @@
 [class*="col-md"],
 [class*="col-lg"],
 [class*="col-xl"] {
-  margin-block-end: calc(8px * 2);
   margin-block-end: calc(var(--size-8) * 2);
 }
 [class*="col-xs"] {
@@ -1254,21 +1253,16 @@
 }
 @media (max-width: 599.98px) {
   .row-equal-height .col-xs-12 {
-    margin-block-end: 12px;
     margin-block-end: var(--size-12);
   }
 }
 @media (max-width: 599.98px) {
   .row {
-    margin-inline-end: calc(8px * -1);
     margin-inline-end: calc(var(--size-8) * -1);
-    margin-inline-start: calc(8px * -1);
     margin-inline-start: calc(var(--size-8) * -1);
   }
   [class*="col-"] {
-    padding-inline-end: 8px;
     padding-inline-end: var(--size-8);
-    padding-inline-start: 8px;
     padding-inline-start: var(--size-8);
   }
 }