npm - @transferwise/components - Versions diffs - 0.0.0-experimental-68931a1 → 0.0.0-experimental-02ec4e3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1946) hide show

package/src/styles/less/navbar.less CHANGED Viewed

@@ -29,7 +29,7 @@
 .navbar {
   position: relative;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
   margin-bottom: @navbar-margin-bottom;
   border: 0 solid transparent;
@@ -250,9 +250,9 @@
     outline: 0;
   }
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--line-height-body);
+  font-size: var(--wds-font-size-body-large);
+  font-weight: var(--wds-font-weight-title-body);
+  line-height: var(--wds-line-height-body-large);
   margin-bottom: 8px;
   color: @color-navy-content-primary;
@@ -344,7 +344,7 @@
       &.navbar-title-link {
         @media (--screen-md) {
-          font-size: var(--font-size-20);
+          font-size: var(--wds-font-size-title-body);
         }
       }
     }
@@ -358,7 +358,7 @@
     > li {
       > a,
       > button {
-        font-size: var(--font-size-16);
+        font-size: var(--wds-font-size-body-large);
         padding: @navbar-padding-mobile;
         -webkit-touch-callout: none; // When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.
       }
@@ -420,7 +420,7 @@
       > a {
         padding-bottom: (@navbar-padding-vertical - 2px);
-        font-size: var(--font-size-14);
+        font-size: var(--wds-font-size-body);
       }
     }
   }
@@ -481,7 +481,7 @@
       .arrow-pointer(@dropdown-arrow-width);
       > li > a {
-        font-size: var(--font-size-14);
+        font-size: var(--wds-font-size-body);
         @media (max-width: @grid-float-breakpoint) {
           position: relative;
@@ -504,7 +504,7 @@
       > .active > a {
         color: var(--color-content-accent-active);
         background-color: transparent;
-        font-weight: var(--font-weight-bold);
+        font-weight: var(--wds-font-weight-title-body);
         &:hover,
         &:focus {
@@ -595,7 +595,7 @@
     .navbar-vertical-align(22);
   }
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   @media (max-width: @grid-float-breakpoint-max) {
     display: block;
@@ -684,7 +684,7 @@
       > a,
       > .dropdown-toggle {
-        font-weight: var(--font-weight-bold);
+        font-weight: var(--wds-font-weight-title-body);
         &,
         &:hover,
         &:focus {
@@ -727,7 +727,7 @@
         }
         > .active > a {
-          font-weight: var(--font-weight-bold);
+          font-weight: var(--wds-font-weight-title-body);
           &,
           &:hover,
           &:focus {
@@ -804,7 +804,7 @@
       > a,
       > .dropdown-toggle {
         color: var(--color-content-accent-active);
-        font-weight: var(--font-weight-bold);
+        font-weight: var(--wds-font-weight-title-body);
         &,
         &:hover,
         &:focus {
@@ -1105,15 +1105,15 @@
 .navbar-title {
   .float(left);
-  font-size: var(--font-size-20);
-  line-height: var(--line-height-title);
+  font-size: var(--wds-font-size-title-body);
+  line-height: var(--wds-line-height-title-body);
   margin-top: 12px;
   margin-bottom: 12px;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--wds-line-height-title-body);
 }
 .navbar-subtitle {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   margin-bottom: 8px;
 }
@@ -1201,7 +1201,7 @@
   }
   h1 {
-    line-height: var(--line-height-title);
+    line-height: var(--wds-line-height-title-section);
   }
   .close {
@@ -1256,7 +1256,7 @@
 @media (min-width: @screen-sm-min) {
   .simple-nav .navbar-nav > li > a {
-    font-size: var(--font-size-16) !important;
+    font-size: var(--wds-font-size-body-large) !important;
   }
 }

package/src/styles/less/navs.css CHANGED Viewed

@@ -13,37 +13,28 @@
   outline-offset: -1px;
   padding-block: 9px 7px;
   padding-inline: 24px;
-  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body-large);
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .nav > li > a:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .nav > .active > a {
-  color: #0097c7;
   color: var(--color-content-accent);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .nav > .active > a:hover,
 .nav > .active > a:focus {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .nav > .active > a:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .nav > .disabled > a:hover,
@@ -55,7 +46,6 @@
 .nav .open > a,
 .nav .open > a:hover,
 .nav .open > a:focus {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .nav .nav-divider {
@@ -74,8 +64,6 @@
   background-color: #2e4369;
 }
 .nav-tabs {
-  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);
 }
 .nav-tabs > li {
@@ -84,31 +72,24 @@
 }
 .nav-tabs > li > a {
   margin-inline-end: 2px;
-  line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   border-block-end: 3px solid transparent;
-  font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .nav-tabs > .active > a {
-  border-block-end: 3px solid rgba(0,0,0,0.10196);
-  border-block-end: 3px solid #0000001a;
   border-block-end: 3px solid var(--color-border-neutral);
 }
 .nav-tabs > .active > a:hover,
 .nav-tabs > .active > a:focus {
-  color: #0097c7;
   color: var(--color-content-accent);
   cursor: default;
 }
 .nav-pills > li {
   float: inline-start;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .nav-pills > li > a {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .nav-stacked > li {
   float: none;
@@ -116,7 +97,6 @@
 .nav-stacked > li > a {
   border-inline-start: 3px solid transparent;
   padding-inline-start: 21px;
-  padding-inline-end: 24px;
   padding-inline-end: var(--size-24);
   transition: color 0.2s ease-in-out;
 }
@@ -125,7 +105,6 @@
 }
 @media (min-width: 1160px) {
   .nav-stacked > li > a {
-    padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
     padding-inline-start: 29px !important;
   }
@@ -136,7 +115,6 @@
 .nav-stacked > li.active > a,
 .nav-stacked > li.active > a:hover,
 .nav-stacked > li.active > a:focus {
-  border-inline-start: 3px solid #00a2dd;
   border-inline-start: 3px solid var(--color-interactive-accent);
   padding-inline-start: 21px;
 }
@@ -159,10 +137,8 @@
 }
 .nav-justified.nav-pills > li > a {
   padding-block: 0;
-  padding-inline: 4px;
   padding-inline: var(--size-4);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
 }
 @media (min-width: 840px) {
   .nav-justified-2-p-x {
@@ -206,15 +182,12 @@
 }
 .nav-tabs-justified > li > a {
   margin-inline-end: 0;
-  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);
   border-radius: 3px;
 }
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
   border-block-end: 0;
 }

package/src/styles/less/navs.less CHANGED Viewed

@@ -30,8 +30,8 @@
       outline-offset: -1px;
       padding: @nav-link-padding;
       color: var(--color-content-primary);
-      font-weight: var(--font-weight-regular);
-      font-size: var(--font-size-16);
+      font-weight: var(--wds-font-weight-body-regular);
+      font-size: var(--wds-font-size-body-large);
       &:hover,
       &:focus {
@@ -47,7 +47,7 @@
   > .active > a {
     color: var(--color-content-accent);
-    font-weight: var(--font-weight-semi-bold);
+    font-weight: var(--wds-font-weight-title-body);
     &:hover,
     &:focus {
@@ -127,11 +127,11 @@
     > a {
       .margin(right, 2px);
-      line-height: var(--line-height-body);
+      line-height: var(--wds-line-height-body-large);
       //border: 1px solid transparent;
       //border-radius: @border-radius-base @border-radius-base 0 0;
       border-bottom: 3px solid transparent;
-      font-size: var(--font-size-16);
+      font-size: var(--wds-font-size-body-large);
     }
   }
@@ -153,11 +153,11 @@
   > li {
     .float(left);
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
     // Links rendered as pills
     > a {
-      font-size: var(--font-size-14);
+      font-size: var(--wds-font-size-body);
     }
   }
 }
@@ -231,7 +231,7 @@
   &.nav-pills > li > a {
     padding: 0 var(--size-4);
-    line-height: var(--line-height-body);
+    line-height: var(--wds-line-height-body-large);
   }
 }