@transferwise/components 0.0.0-experimental-6bc68bd → 0.0.0-experimental-012dcef

package/src/styles/less/panels.css

@@ -19,7 +19,7 @@
 .panel-title {
   margin-block-start: 0;
   margin-block-end: 0;
-  line-height: calc(var(--wds-line-height-title-section) + 8px);
+  line-height: calc(var(--line-height-title) + 8px);
 }
 .panel-title > a {
   -webkit-text-decoration: none;
@@ -69,7 +69,7 @@
 }
 @media (min-width: 840px) {
   .panel-title {
-    line-height: calc(var(--wds-line-height-title-section) * 2);
+    line-height: calc(var(--line-height-title) * 2);
   }
   .panel-heading > .btn-sm {
     margin-block-start: 8px;

package/src/styles/less/panels.less

@@ -38,7 +38,7 @@
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
-  line-height: calc(var(--wds-line-height-title-section) + 8px);
+  line-height: calc(var(--line-height-title) + 8px);
 
   > a {
     text-decoration: none;
@@ -99,7 +99,7 @@
 
 @media (--screen-md) {
   .panel-title {
-    line-height: calc(var(--wds-line-height-title-section) * 2);
+    line-height: calc(var(--line-height-title) * 2);
   }
 
   .panel-heading {

package/src/styles/less/popovers.css

@@ -1,36 +1,4 @@
-.popover,
-.popover-content {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .popover,
-  .popover-content {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .popover,
-    .popover-content {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .popover,
-    .popover-content {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .popover,
-  .popover-content {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .popover,
-    .popover-content {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.close {
+.close {
   float: inline-end;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
@@ -78,7 +46,7 @@ button.close {
   inline-size: 276px;
   padding-block: 18px;
   padding-inline: 24px;
-  font-family: var(--wds-font-family-regular);
+  font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -93,6 +61,10 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -278,8 +250,16 @@ button.close {
   margin-inline: 0;
 }
 .popover-title {
-  margin: 0;
   padding: 0;
+  margin: 0;
+  color: var(--color-content-primary);
+  line-height: var(--line-height-title);
+  letter-spacing: 0;
+  word-wrap: break-word;
+  font-size: var(--font-size-18);
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: -0.014em;
+  line-height: 135%;
   background-color: var(--color-background-screen);
   border-block-end: 0;
   border-start-start-radius: 2px;
@@ -288,8 +268,45 @@ button.close {
   border-end-start-radius: 0;
   color: var(--color-content-primary) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover-title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover-title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover-title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-title {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover-title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
+.popover-title + p,
+.popover-title + ul:not(.list-unstyled),
+.popover-title + ol:not(.list-unstyled) {
+  margin-block-start: var(--size-8);
+}
 .popover-content {
   padding: 0;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   color: var(--color-content-secondary);
 }
@@ -458,13 +475,13 @@ button.popover-close {
   }
 }
 .popover-promotion .popover-title {
-  font-size: var(--wds-font-size-body-large);
-  line-height: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
+  line-height: var(--line-height-title);
 }
 @media (min-width: 840px) {
   .popover-promotion .popover-title {
-    font-size: var(--wds-font-size-title-body);
-    line-height: var(--wds-font-size-title-body);
+    font-size: var(--font-size-20);
+    line-height: var(--line-height-title);
   }
 }
 @media (max-width: 320px) {

package/src/styles/less/popovers.less

@@ -24,7 +24,7 @@
   // So reset our font and text properties to avoid inheriting weird values.
   .reset-text();
 
-  .wds-text-body-default;
+  .np-text-body-default;
 
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -221,7 +221,7 @@
   margin: 0; // reset heading margin
   padding: 0;
 
-  .wds-text-title-body();
+  .np-text-title-body();
 
   background-color: var(--color-background-screen);
   border-bottom: 0;
@@ -232,7 +232,7 @@
 .popover-content {
   padding: 0;
 
-  .wds-text-body-default;
+  .np-text-body-default;
 
   color: var(--color-content-secondary);
 }
@@ -348,12 +348,12 @@
   }
 
   .popover-title {
-    font-size: var(--wds-font-size-body-large);
-    line-height: var(--wds-font-size-body-large);
+    font-size: var(--font-size-16);
+    line-height: var(--line-height-title);
 
     @media (--screen-md) {
-      font-size: var(--wds-font-size-title-body);
-      line-height: var(--wds-font-size-title-body);
+      font-size: var(--font-size-20);
+      line-height: var(--line-height-title);
     }
   }
 

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

@@ -15,8 +15,8 @@
   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: var(--wds-font-size-body-large);
-  font-weight: var(--wds-font-weight-body-bold);
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-bold);
   color: #fff;
   text-align: end;
   background-color: var(--color-content-accent);

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

@@ -20,8 +20,8 @@
   top: calc(-1 * var(--progress-bar-border-width));
   left: calc(-1 * var(--progress-bar-start-shift));
   height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
-  font-size: var(--wds-font-size-body-large);
-  font-weight: var(--wds-font-weight-body-bold);
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-bold);
   color: #fff;
   .text-align(right);
   background-color: var(--color-content-accent);

package/src/styles/less/sequences.css

@@ -4,7 +4,7 @@
   margin-inline-start: 25px;
   margin-block-start: 0;
   margin-block-end: 0;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -81,7 +81,7 @@
 @media (min-width: 840px) {
   .sequence {
     padding-inline-end: 24px;
-    font-size: var(--wds-font-size-body-large);
+    font-size: var(--font-size-16);
   }
 }
 .sequence > li {
@@ -94,7 +94,7 @@
   display: block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: var(--font-weight-regular);
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -123,10 +123,6 @@
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
-.sequence > li .wds-text-title-screen,
-.sequence > li .wds-text-title-section,
-.sequence > li .wds-text-title-subsection,
-.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -163,7 +159,7 @@
   -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-content-primary);
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: var(--font-weight-semi-bold);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
@@ -188,7 +184,7 @@
 .sequence a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: var(--font-weight-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
@@ -207,8 +203,7 @@
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default,
-.sequence-inverse > .active .wds-text-body-default {
+.sequence-inverse > .active .np-text-body-default {
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
@@ -356,7 +351,7 @@
   font-size: var(--font-size-12);
 }
 .sequence-icon .icon {
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
   line-height: 23px;
 }
 .sequence-inverse .sequence-icon {
@@ -447,14 +442,14 @@
   block-size: 32px;
   line-height: 30px;
   margin-block-start: -6px;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
 }
 .sequence-icon-lg {
   inline-size: 40px;
   block-size: 40px;
   line-height: 38px;
   margin-block-start: -6px;
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
 }
 .sequence-icon-lg .icon {
   font-size: 22px;

package/src/styles/less/sequences.less

@@ -33,13 +33,13 @@
 
   margin-top: 0;
   margin-bottom: 0;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   border-color: var(--color-border-neutral);
 
   @media (min-width: @screen-md-min) {
     .padding(right, @sequence-spacing-horizontal);
 
-    font-size: var(--wds-font-size-body-large);
+    font-size: var(--font-size-16);
   }
 
   > li {
@@ -51,7 +51,7 @@
     > a {
       display: block;
       text-decoration: none;
-      font-weight: var(--wds-font-weight-body-regular);
+      font-weight: var(--font-weight-regular);
       color: var(--color-content-accent);
       outline-offset: -1px;
 
@@ -85,10 +85,6 @@
     .h2,
     .h3,
     .h4,
-    .wds-text-title-screen,
-    .wds-text-title-section,
-    .wds-text-title-subsection,
-    .wds-text-title-body,
     .btn-toolbar {
       margin-bottom: 16px;
     }
@@ -130,7 +126,7 @@
     > a {
       text-decoration: none;
       color: var(--color-content-primary);
-      font-weight: var(--wds-font-weight-title-body);
+      font-weight: var(--font-weight-semi-bold);
 
       &:hover,
       &:focus {
@@ -160,7 +156,7 @@
 
   a {
     text-decoration: none;
-    font-weight: var(--wds-font-weight-body-regular);
+    font-weight: var(--font-weight-regular);
   }
 }
 
@@ -190,8 +186,7 @@
 
     .small,
     .body-2,
-    .np-text-body-default,
-    .wds-text-body-default {
+    .np-text-body-default {
       color: var(--color-content-secondary);
     }
 
@@ -221,7 +216,7 @@
 
   > .active {
     &::before {
-      border-width: (@sequence-pip-size / 2); // TODO sequence-line-width?
+      border-width: (@sequence-pip-size / 2);  // TODO sequence-line-width?
     }
 
     ~ li::before {
@@ -253,7 +248,7 @@
   font-size: var(--font-size-12);
 
   .icon {
-    font-size: var(--wds-font-size-body-large);
+    font-size: var(--font-size-16);
     line-height: (@sequence-icon-size - 1px);
   }
 
@@ -371,7 +366,7 @@
   height: @sequence-icon-size-md;
   line-height: (@sequence-icon-size-md - 2px);
   margin-top: -6px;
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
 }
 
 .sequence-icon-lg {
@@ -379,7 +374,7 @@
   height: @sequence-icon-size-lg;
   line-height: (@sequence-icon-size-lg - 2px);
   margin-top: -6px;
-  font-size: var(--wds-font-size-body-large);
+  font-size: var(--font-size-16);
 
   .icon {
     font-size: 22px;

package/src/styles/less/table.css

@@ -30,7 +30,7 @@ th {
 .table > tfoot > tr > td {
   padding-block: var(--size-24);
   padding-inline: var(--size-16);
-  line-height: var(--wds-line-height-body-large);
+  line-height: var(--line-height-body);
   vertical-align: top;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
@@ -41,7 +41,7 @@ th {
 .table > .tfoot > ol > li {
   padding-block: var(--size-24);
   padding-inline: var(--size-16);
-  line-height: var(--wds-line-height-body-large);
+  line-height: var(--line-height-body);
   vertical-align: top;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
@@ -81,12 +81,12 @@ th {
 .table > tfoot,
 .table > .thead,
 .table > .tfoot {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--font-size-14);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
@@ -328,7 +328,7 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: var(--wds-font-weight-title-body);
+    font-weight: var(--font-weight-bold);
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -342,7 +342,7 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
-    font-size: var(--wds-font-size-body);
+    font-size: var(--font-size-14);
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -358,7 +358,7 @@ table col[class*="col-"] {
     border-radius: 3px;
     margin-block-end: var(--size-24);
     padding-block: var(--size-24) 0;
-    padding-inline: var(--wds-line-height-body-large);
+    padding-inline: var(--line-height-body);
   }
   .table > .tbody > dl > dd {
     padding: 0;

package/src/styles/less/table.less

@@ -50,7 +50,7 @@ th {
     > tr > th,
     > tr > td {
       padding: var(--size-24) var(--size-16);
-      line-height: var(--wds-line-height-body-large);
+      line-height: var(--line-height-body);
       vertical-align: top;
       border-top: 1px solid var(--color-border-neutral);
       border-bottom: 0;
@@ -62,7 +62,7 @@ th {
   > .tbody > dl > dd,
   > .tfoot > ol > li {
     padding: var(--size-24) var(--size-16);
-    line-height: var(--wds-line-height-body-large);
+    line-height: var(--line-height-body);
     vertical-align: top;
     border-top: 1px solid var(--color-border-neutral);
     border-bottom: 0;
@@ -115,13 +115,13 @@ th {
   > tfoot,
   > .thead,
   > .tfoot {
-    font-size: var(--wds-font-size-body);
+    font-size: var(--font-size-14);
     color: var(--color-content-primary);
   }
 
   > tbody,
   > .tbody {
-    font-size: var(--wds-font-size-body);
+    font-size: var(--font-size-14);
   }
 
   > tbody > tr > th,
@@ -290,7 +290,7 @@ table col[class*="col-"] {
 
         > li {
           display: table-cell;
-          font-weight: var(--wds-font-weight-title-body);
+          font-weight: var(--font-weight-bold);
           color: var(--color-content-primary);
         }
       }
@@ -308,7 +308,7 @@ table col[class*="col-"] {
 
         > dd {
           display: table-cell;
-          font-size: var(--wds-font-size-body);
+          font-size: var(--font-size-14);
           color: var(--color-content-secondary);
         }
       }
@@ -331,7 +331,7 @@ table col[class*="col-"] {
         border: 1px var(--color-interactive-secondary) solid;
         border-radius: @border-radius-base;
         margin-bottom: var(--size-24);
-        padding: var(--size-24) var(--wds-line-height-body-large) 0;
+        padding: var(--size-24) var(--line-height-body) 0;
 
         > dd {
           padding: 0;

package/src/styles/less/tooltip.css

@@ -1,34 +1,8 @@
-.tooltip-inner {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .tooltip-inner {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .tooltip-inner {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .tooltip-inner {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .tooltip-inner {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .tooltip-inner {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.tooltip {
+.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: var(--wds-font-family-regular);
+  font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -69,6 +43,10 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;

package/src/styles/less/tooltip.less

@@ -50,7 +50,7 @@
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  .wds-text-body-default;
+  .np-text-body-default;
 
   max-width: @tooltip-max-width;
   min-width: 120px;

package/src/styles/variables/legacy-variables.less

@@ -128,7 +128,7 @@
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-@font-family-sans-serif:  var(--wds-font-family-regular);
+@font-family-sans-serif:  var(--font-family-regular);
 @font-family-serif:       Georgia, "Times New Roman", Times, serif;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -167,7 +167,7 @@
 @line-height-computed:    24px; // ~24px
 
 //** By default, this inherits from the `<body>`.
-@headings-font-family:    var(--wds-font-family-regular);
+@headings-font-family:    var(--font-family-regular);
 @headings-font-weight:    @font-weight-semi-bold;
 @headings-line-height:    1.2;              //1.1;
 @headings-color:          @brand-navy-minus-10;
@@ -192,7 +192,7 @@
 @display3-line-height: 88px;
 @display4-line-height: 72px;
 
-@buttons-font-family:     var(--wds-font-family-regular);
+@buttons-font-family:     var(--font-family-regular);
 
 //** Global textual link color.
 @link-color:            @brand-light-blue;

package/build/styles/Label/Label.css

@@ -1,3 +0,0 @@
-:lang(ar) .np-label .np-info {
-  line-height: calc(1lh * 0.8);
-}

package/src/Label/Label.css

@@ -1,3 +0,0 @@
-:lang(ar) .np-label .np-info {
-  line-height: calc(1lh * 0.8);
-}

package/src/Label/Label.less

@@ -1,8 +0,0 @@
-.np-label .np-info{
-  :lang(ar) & {
-    // arabic fonts have uneven metrics above and below the x-heigh space,
-    // so we need to adjust the line-height to make it visually centered
-    line-height: calc(1lh * 0.8);
-  }
-}
-