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

package/src/styles/less/input-groups.less

@@ -62,20 +62,33 @@
   > .form-control,
   > .input-group-addon,
   > .input-group-btn .btn {
+    --min-height: calc(
+      2 * var(--size-12)
+      + var(--wds-font-size-title-subsection) * var(--wds-line-height-title-subsection)
+    );
     .input-lg();
-
-    .np-text-title-subsection();
-
+    .wds-text-title-subsection();
+    min-height: var(--min-height);
     margin-bottom: 0;
+
+    select& {
+      min-height: var(--min-height);
+    }
   }
 }
 
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon {
+  --min-height: calc(2 * var(--size-4) + var(--wds-font-size-body) * var(--wds-line-height-body));
   .input-sm();
+  min-height: var(--min-height);
+
+  select& {
+    min-height: var(--min-height);
+  }
 
   .icon {
-    font-size: var(--font-size-20);
+    font-size: var(--wds-font-size-title-subsection);
   }
 }
 
@@ -106,8 +119,8 @@
 // -------------------------
 .input-group-addon {
   padding: var(--input-group-addon-padding);
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-body);
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-body-large);
   color: var(--color-content-secondary);
   text-align: center;
   background-color: var(--color-background-screen);
@@ -246,7 +259,7 @@
 }
 
 // inputs focus and hover states (not disabled)
-.input-group:hover:not(.disabled,:disabled) {
+.input-group:hover:not(.disabled, :disabled) {
   .form-control,
   .input-group-addon,
   .btn-input,
@@ -255,11 +268,11 @@
   }
 }
 
-.form-control:hover:not(.disabled,:disabled) {
+.form-control:hover:not(.disabled, :disabled) {
   border-color: var(--color-interactive-secondary-hover);
 }
 
-.input-group:focus-within:not(.disabled,:disabled) {
+.input-group:focus-within:not(.disabled, :disabled) {
   .form-control,
   .input-group-addon,
   .btn-input,
@@ -272,7 +285,7 @@
   }
 }
 
-.form-control:focus-within:not(.disabled,:disabled) {
+.form-control:focus-within:not(.disabled, :disabled) {
   border-color: var(--color-interactive-accent);
 
   .np-theme-personal & {

package/src/styles/less/link-callout.css

@@ -1,6 +1,5 @@
 .link-callout > .tw-icon-chevron-up {
   display: inline-block;
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
   pointer-events: none;
   transition: transform 0.2s ease-in-out;

package/src/styles/less/list-group.css

@@ -2,23 +2,17 @@
   list-style-type: none;
   margin-block-end: 20px;
   padding-inline-start: 0;
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid #0000001a;
   border-inline-start: 1px solid var(--color-border-neutral);
-  border-inline-end: 1px solid rgba(0,0,0,0.10196);
-  border-inline-end: 1px solid #0000001a;
   border-inline-end: 1px solid var(--color-border-neutral);
 }
 .list-group-item {
   display: block;
   padding-block: 16px 16px;
   padding-inline: 14px 16px;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-inline-start: 2px solid transparent;
   margin-block-start: 1px;
-  line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   transition: all ease 0.15s;
 }
 .panel-group .list-group-item {
@@ -38,76 +32,25 @@
 }
 .list-group-item-heading {
   margin-block-end: 0;
-  margin: 0;
-  line-height: 1.2;
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
-  word-wrap: break-word;
-  font-weight: 500;
-  font-weight: var(--font-weight-medium);
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  letter-spacing: -0.006em;
-  line-height: 140%;
-  color: #37517e;
   color: var(--color-content-primary);
 }
-@supports (hyphenate-limit-chars: 1) {
-  .list-group-item-heading {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .list-group-item-heading {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .list-group-item-heading {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .list-group-item-heading {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .list-group-item-heading {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.list-group-item-heading + p,
-.list-group-item-heading + ul:not(.list-unstyled),
-.list-group-item-heading + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
-}
 .list-group-item-text {
   margin-block-end: 0;
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 a.list-group-item {
-  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 a.list-group-item .list-group-item-heading {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 a.list-group-item:not(.disabled):not(:disabled):hover,
 a.list-group-item:not(.disabled):not(:disabled):focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0084b3;
   color: var(--color-content-accent-hover);
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .list-group-item[ng-click] {
@@ -118,13 +61,9 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 }
 .list-group-item.active {
   z-index: 2;
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
-  box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
-  margin-block-start: 24px;
   margin-block-start: var(--size-24);
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .list-group-item.active:first-child {
@@ -153,98 +92,75 @@ a.list-group-item:not(.disabled):not(:disabled):focus {
 }
 .list-group-inactive .list-group-item:hover,
 .list-group-inactive .list-group-item.active {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 @media (min-width: 600px) {
   .list-group-inactive .list-group-item:hover .circle,
   .list-group-inactive .list-group-item.active .circle {
-    background-color: rgba(134,167,189,0.10196);
     background-color: var(--color-background-neutral);
   }
 }
 .list-group-inactive .list-group-item.active {
-  margin-block-start: 24px;
   margin-block-start: var(--size-24);
 }
 .list-group-item-success {
-  border-inline-start: 3px solid #008026;
   border-inline-start: 3px solid var(--color-content-positive);
 }
 .list-group-item.list-group-item-success {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group-item-success .list-group-item-text {
-  color: #008026;
   color: var(--color-content-positive);
 }
 a.list-group-item-success {
-  color: #008026;
   color: var(--color-content-positive);
 }
 a.list-group-item-success:hover {
-  color: #008026;
   color: var(--color-content-positive);
 }
 .list-group-item-info {
-  border-inline-start: 3px solid #0097c7;
   border-inline-start: 3px solid var(--color-content-accent);
 }
 .list-group-item.list-group-item-info {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group-item-info .list-group-item-text {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 a.list-group-item-info {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 a.list-group-item-info:hover {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 .list-group-item-warning {
-  border-inline-start: 3px solid #9a6500;
   border-inline-start: 3px solid var(--color-content-warning);
 }
 .list-group-item.list-group-item-warning {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group-item-warning .list-group-item-text {
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 a.list-group-item-warning {
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 a.list-group-item-warning:hover {
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 .list-group-item-danger {
-  border-inline-start: 3px solid #cf2929;
   border-inline-start: 3px solid var(--color-content-negative);
 }
 .list-group-item.list-group-item-danger {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group-item-danger .list-group-item-text {
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 a.list-group-item-danger {
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 a.list-group-item-danger:hover {
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 .list-group:hover .list-group-item:not(.active) {
@@ -254,18 +170,15 @@ a.list-group-item-danger:hover {
   opacity: 0.94;
 }
 .list-group:hover .list-group-item:hover {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .list-group:hover .list-group-item:hover .media {
   opacity: 1;
 }
 .list-group-inactive:hover .list-group-item:not(.active) {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .list-group-inactive:hover .list-group-item:hover {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 @keyframes listSlideOver {

package/src/styles/less/list-group.less

@@ -35,7 +35,7 @@
   .border(left, 2px, solid, transparent);
 
   margin-top: 1px;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   transition: all ease @panel-focus-transtion;
 
   .panel-group & {
@@ -61,7 +61,7 @@
 
 .list-group-item-heading {
   margin-bottom: 0;
-  .np-text-title-group;
+  .wds-text-title-group;
 
   color: var(--color-content-primary);
 }
@@ -200,8 +200,12 @@ a.list-group-item {
 }
 
 @keyframes listSlideOver {
-  0% { transform: translateX(100vw); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
 @media (max-width: @screen-sm-max) {
@@ -250,7 +254,6 @@ a.list-group-item {
     }
 
     .list-group-item.active .collapse .well {
-
       // Annoying but makes sure the last content is visible in iOS safari
 
       padding-bottom: 72px;

package/src/styles/less/media.css

@@ -20,17 +20,14 @@
 }
 /* Alignment */
 .media-right {
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .media-left {
-  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
   .media-right,
   .media-left {
-    padding-inline-start: 32px;
     padding-inline-start: var(--size-32);
   }
 }

package/src/styles/less/mixins/_reset-text.less

@@ -1,7 +1,7 @@
 @import (reference) "_logical-properties.less";
 
 .reset-text() {
-  font-family: var(--font-family-regular);
+  font-family: var(--wds-font-family-regular);
 
   // We deliberately do NOT reset font-size.
 

package/src/styles/less/mixins/_text-emphasis.less

@@ -22,6 +22,9 @@
   &.np-text-title-screen,
   &.np-text-title-section,
   &.np-text-title-subsection,
+  &.wds-text-title-screen,
+  &.wds-text-title-section,
+  &.wds-text-title-subsection,
   h1,
   h2,
   h3,
@@ -33,7 +36,10 @@
   .title-3,
   .np-text-title-screen,
   .np-text-title-section,
-  .np-text-title-subsection {
+  .np-text-title-subsection,
+  .wds-text-title-screen,
+  .wds-text-title-section,
+  .wds-text-title-subsection {
     color: @large-color !important;
   }
 }

package/src/styles/less/modals.css

@@ -27,14 +27,11 @@
 .modal-dialog {
   position: relative;
   inline-size: auto;
-  margin: 16px;
   margin: var(--size-16);
 }
 .modal-content {
   position: relative;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
-  border: 1px solid rgba(134,167,189,0.10196);
   border: 1px solid var(--color-background-neutral);
   border-radius: 3px;
   box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
@@ -47,7 +44,6 @@
   box-shadow: none;
 }
 .np-theme-personal .modal-content {
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .modal-backdrop {
@@ -77,10 +73,7 @@
 }
 .modal-header {
   padding: 24px;
-  border-block-end: 1px solid rgba(0,0,0,0.10196);
-  border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
-  min-block-size: calc(24px + 24px);
   min-block-size: calc(24px + var(--size-24));
 }
 .modal-header .close {
@@ -88,24 +81,19 @@
 }
 .modal-title {
   margin: 0;
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  line-height: var(--wds-line-height-title-section);
 }
 .modal-body {
   position: relative;
   padding: 24px;
 }
 .modal-footer {
-  padding-block: 16px;
   padding-block: var(--size-16);
   padding-inline: 24px;
   text-align: end;
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
 }
 .modal-footer .btn + .btn {
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
   margin-block-end: 0;
 }
@@ -139,14 +127,12 @@
   .modal-header {
     padding-block: 28px;
     padding-inline: 32px;
-    min-block-size: calc(28px + 24px);
     min-block-size: calc(28px + var(--size-24));
   }
   .modal-body {
     padding: 32px;
   }
   .modal-footer {
-    padding-block: 16px;
     padding-block: var(--size-16);
     padding-inline: 32px;
   }

package/src/styles/less/modals.less

@@ -134,7 +134,7 @@
 
 .modal-title {
   margin: 0;
-  line-height: var(--line-height-title);
+  line-height: var(--wds-line-height-title-section);
 }
 
 // Modal body