@transferwise/components 0.0.0-experimental-95dfe69 → 0.0.0-experimental-526a2be

package/src/styles/less/panels.css

@@ -7,6 +7,7 @@
 }
 .panel-body {
   padding: 16px;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .panel-heading {
@@ -19,6 +20,7 @@
 .panel-title {
   margin-block-start: 0;
   margin-block-end: 0;
+  line-height: calc(1.2 + 8px);
   line-height: calc(var(--line-height-title) + 8px);
 }
 .panel-title > a {
@@ -69,6 +71,7 @@
 }
 @media (min-width: 840px) {
   .panel-title {
+    line-height: calc(1.2 * 2);
     line-height: calc(var(--line-height-title) * 2);
   }
   .panel-heading > .btn-sm {
@@ -267,6 +270,7 @@
   }
 }
 .panel-group {
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .panel-group .panel {

package/src/styles/less/popovers.css

@@ -1,5 +1,6 @@
 .close {
   float: inline-end;
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -8,6 +9,7 @@
   color: var(--color-interactive-primary);
 }
 .close:hover {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -24,6 +26,7 @@
   outline-offset: var(--ring-outline-offset);
 }
 .close:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.close {
@@ -46,11 +49,13 @@ button.close {
   inline-size: 276px;
   padding-block: 18px;
   padding-inline: 24px;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
+  line-height: 24px;
   line-height: var(--size-24);
   text-align: start;
   -webkit-text-decoration: none;
@@ -61,11 +66,14 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
   word-wrap: break-word;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
   border-radius: 3px;
@@ -252,14 +260,19 @@ button.close {
 .popover-title {
   padding: 0;
   margin: 0;
+  color: #37517e;
   color: var(--color-content-primary);
+  line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
   word-wrap: break-word;
+  font-size: 1.125rem;
   font-size: var(--font-size-18);
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   letter-spacing: -0.014em;
   line-height: 135%;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-block-end: 0;
   border-start-start-radius: 2px;
@@ -299,15 +312,19 @@ button.close {
 .popover-title + p,
 .popover-title + ul:not(.list-unstyled),
 .popover-title + ol:not(.list-unstyled) {
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .popover-content {
   padding: 0;
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
   word-wrap: break-word;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -343,6 +360,7 @@ button.close {
 }
 .popover-close {
   float: inline-end;
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -351,6 +369,7 @@ button.close {
   color: var(--color-interactive-primary);
 }
 .popover-close:hover {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -367,6 +386,7 @@ button.close {
   outline-offset: var(--ring-outline-offset);
 }
 .popover-close:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.popover-close {
@@ -387,12 +407,14 @@ button.popover-close {
   font-weight: inherit !important;
   -webkit-text-decoration: none !important;
   text-decoration: none !important;
+  border-block-end: 1px dotted #0097c7 !important;
   border-block-end: 1px dotted var(--color-content-accent) !important;
   cursor: pointer;
 }
 [data-toggle="popover"]:not(.btn):hover,
 [data-toggle="popover"]:not(.btn):focus,
 [data-toggle="popover"]:not(.btn)[aria-describedby] {
+  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
   outline: 0;
 }
@@ -406,6 +428,7 @@ button.popover-close {
     inset-inline-end: 0 !important;
     inset-inline-start: 0 !important;
     inline-size: 272px;
+    margin-block: 32px !important;
     margin-block: var(--size-32) !important;
     margin-inline: auto;
   }
@@ -445,6 +468,7 @@ button.popover-close {
   block-size: 100vh;
   block-size: 100dvh;
   cursor: pointer;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   opacity: 0.7;
   animation: cover-fade-in 0.35s 0s linear forwards;
@@ -456,12 +480,15 @@ button.popover-close {
 }
 .popover-promotion {
   text-align: center;
+  padding: 24px;
   padding: var(--size-24);
 }
 @media (max-width: 599.98px) {
   .popover-promotion {
     inline-size: auto !important;
+    padding: 24px !important;
     padding: var(--size-24) !important;
+    margin: 16px !important;
     margin: var(--size-16) !important;
   }
 }
@@ -469,18 +496,24 @@ button.popover-close {
   .popover-promotion {
     inline-size: 540px !important;
     padding-block: 28px !important;
+    padding-inline: 32px;
     padding-inline: var(--size-32);
+    margin-block: 32px !important;
     margin-block: var(--size-32) !important;
     margin-inline: auto;
   }
 }
 .popover-promotion .popover-title {
+  font-size: 1rem;
   font-size: var(--font-size-16);
+  line-height: 1.2;
   line-height: var(--line-height-title);
 }
 @media (min-width: 840px) {
   .popover-promotion .popover-title {
+    font-size: 1.25rem;
     font-size: var(--font-size-20);
+    line-height: 1.2;
     line-height: var(--line-height-title);
   }
 }

package/src/styles/less/process.css

@@ -24,6 +24,7 @@
 .process-circle {
   transform-origin: center center;
   transition: stroke 1s 0.2s linear;
+  stroke: #0097c7;
   stroke: var(--color-content-accent);
   stroke-opacity: 1;
   stroke-linecap: round;
@@ -33,6 +34,7 @@
   animation-iteration-count: infinite;
 }
 .np-theme-personal .process-circle {
+  stroke: #37517e;
   stroke: var(--color-content-primary);
 }
 .np-theme-personal--forest-green .process-circle,
@@ -41,6 +43,7 @@
   stroke: var(--color-interactive-primary);
 }
 .process-inverse .process-circle {
+  stroke: #ffffff;
   stroke: var(--color-background-screen);
 }
 .process-icon-container {
@@ -63,6 +66,7 @@
   block-size: 0;
 }
 .process-success .process-icon-horizontal {
+  background-color: #008026;
   background-color: var(--color-content-positive);
   inset-block-end: 0;
   inset-inline-start: 0;
@@ -71,6 +75,7 @@
   background-color: var(--color-sentiment-positive);
 }
 .process-success .process-icon-vertical {
+  background-color: #008026;
   background-color: var(--color-content-positive);
   inset-block-start: 100%;
   inset-inline-end: 0;
@@ -79,12 +84,14 @@
   background-color: var(--color-sentiment-positive);
 }
 .process-success .process-circle {
+  stroke: #008026;
   stroke: var(--color-content-positive);
 }
 .np-theme-personal .process-success .process-circle {
   stroke: var(--color-sentiment-positive);
 }
 .process-danger .process-icon-horizontal {
+  background-color: #cf2929;
   background-color: var(--color-content-negative);
   inset-inline-start: 0;
 }
@@ -92,6 +99,7 @@
   background-color: var(--color-sentiment-negative);
 }
 .process-danger .process-icon-vertical {
+  background-color: #cf2929;
   background-color: var(--color-content-negative);
   inset-block-start: 0;
 }
@@ -99,6 +107,7 @@
   background-color: var(--color-sentiment-negative);
 }
 .process-danger .process-circle {
+  stroke: #cf2929;
   stroke: var(--color-content-negative);
 }
 .np-theme-personal .process-danger .process-circle {

package/src/styles/less/progress-bars.css

@@ -2,11 +2,16 @@
   --progress-bar-height: 4px;
   --progress-bar-border-width: 4px;
   --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
+  block-size: 4px;
   block-size: var(--progress-bar-height);
   overflow: hidden;
+  margin-block-start: calc((24px - 4px) / 2);
   margin-block-start: calc((var(--size-24) - var(--progress-bar-height)) / 2);
+  margin-block-end: calc((24px - 4px) / 2);
   margin-block-end: calc((var(--size-24) - var(--progress-bar-height)) / 2);
+  background-color: #c9cbce;
   background-color: var(--color-interactive-secondary);
+  border-radius: calc(4px + 4px);
   border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
 }
 .progress-bar {
@@ -15,11 +20,15 @@
   inset-block-start: calc(-1 * var(--progress-bar-border-width));
   inset-inline-start: calc(-1 * var(--progress-bar-start-shift));
   block-size: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
+  font-size: 1rem;
   font-size: var(--font-size-16);
+  font-weight: 700;
   font-weight: var(--font-weight-bold);
   color: #fff;
   text-align: end;
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
+  border: var(--progress-bar-border-width) solid #ffffff;
   border: var(--progress-bar-border-width) solid var(--color-background-screen);
   border-radius: inherit;
 }
@@ -28,17 +37,22 @@
   inset-inline-start: 0;
 }
 .progress-bar-primary {
+  background-color: #37517e;
   background-color: var(--color-content-primary);
 }
 .progress-bar-success {
+  background-color: #008026;
   background-color: var(--color-content-positive);
 }
 .progress-bar-info {
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
 }
 .progress-bar-warning {
+  background-color: #9a6500;
   background-color: var(--color-content-warning);
 }
 .progress-bar-danger {
+  background-color: #cf2929;
   background-color: var(--color-content-negative);
 }

package/src/styles/less/ring.css

@@ -11,7 +11,9 @@
   outline: none;
 }
 .focus-ring:focus-visible {
+  outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);
 }
 details:focus,
@@ -36,7 +38,9 @@ dialog:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
+  outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);
 }
 .ring-offset-0 {

package/src/styles/less/select.css

@@ -1,5 +1,6 @@
 .tw-select .tw-icon {
   display: inline-block;
+  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
   margin-block-start: -2px;
   vertical-align: middle;
@@ -11,24 +12,31 @@
   border-block-end-style: solid;
   border-block-end-width: 1px;
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  border-block-end-color: rgba(0,0,0,0.10196);
+  border-block-end-color: #0000001a;
   border-block-end-color: var(--color-border-neutral);
 }
 .tw-select .tw-dropdown-item--focused {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .tw-select .tw-dropdown-item .currency-flag {
+  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
 }
 .tw-select .tw-dropdown-item > a {
   white-space: normal;
 }
 .tw-select .dropdown-toggle.btn-input.btn-sm {
+  padding-inline-end: 32px;
   padding-inline-end: var(--size-32);
 }
 .tw-select .dropdown-toggle.btn-input.btn-md {
+  padding-inline-end: 40px;
   padding-inline-end: var(--size-40);
 }
 .tw-select .dropdown-toggle.btn-input.btn-lg {
+  padding-inline-end: 48px;
   padding-inline-end: var(--size-48);
 }
 .tw-select .dropdown-toggle tw-chevron-down-icon > span {