@transferwise/neptune-css 0.0.0-experimental-e1f83e6 → 0.0.0-experimental-0924c1b

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-e1f83e6",
+  "version": "0.0.0-experimental-0924c1b",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/badge.less

@@ -7,9 +7,9 @@
   min-width: var(--size-16);
   padding: 5px var(--size-8);
   font-size: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   color: #fff;
-  line-height: var(--line-height-control);
+  line-height: var(--wds-line-height-title-section);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;

package/src/less/buttons.less

@@ -22,11 +22,11 @@
   border: 1px solid transparent;
   white-space: nowrap;
   padding-bottom: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 
   .button-size(
     var(--btn-padding);
-    var(--font-size-16);
+    var(--wds-font-size-body-large);
     var(--line-height-24);
     var(--btn-radius-base);
     var(--btn-height);
@@ -475,7 +475,7 @@
 .navbar .btn {
   .button-size(
     var(--btn-sm-padding);
-    var(--font-size-14);
+    var(--wds-font-size-body);
     var(--line-height-22);
     var(--btn-sm-radius-base);
     var(--btn-sm-height);
@@ -512,7 +512,7 @@
   .navbar-collapse .btn {
     .button-size(
       var(--btn-padding);
-      var(--font-size-16);
+      var(--wds-font-size-body-large);
       var(--line-height-24);
       var(--border-radius-base);
       var(--btn-height);
@@ -547,7 +547,7 @@ input[type="button"] {
 
 // @TODO Deprecate / Remove
 .btn-input {
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   .padding(left, @padding-base-horizontal);
 
   .padding(right, @padding-base-horizontal);
@@ -584,7 +584,7 @@ input[type="button"] {
 
     &.btn-addon,
     &.btn-input-inverse {
-      font-weight: var(--font-weight-semi-bold);
+      font-weight: var(--wds-font-weight-title-body);
     }
   }
 }

package/src/less/core/_scaffolding.less

@@ -8,9 +8,6 @@
 @import "../../variables/legacy-variables.less";
 
 :root {
-  // page default font size should be set in absolute units (pixels)
-  // TODO: move this token to rest of foundation tokens (neptune-tokens)
-  --base-font-size: 16px;
   --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal
     calc(@padding-large-vertical - 2px);
   --btn-padding: @btn-padding-vertical @btn-padding-horizontal calc(@btn-padding-vertical - 2px);
@@ -67,7 +64,7 @@
 }
 
 html {
-  font-size: var(--base-font-size);
+  font-size: var(--wds-font-size-body);
   font-family: var(--wds-font-family-regular);
   color: var(--color-content-secondary);
   background-color: var(--color-background-screen);
@@ -221,11 +218,11 @@ ul {
 
 dt,
 dd {
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
 }
 
 dt {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 
 dd {

package/src/less/core/_typography-utilities.less

@@ -145,15 +145,15 @@
 }
 
 .font-weight-bold {
-  font-weight: var(--font-weight-bold) !important;
+  font-weight: var(--wds-font-weight-title-screen) !important;
 }
 
 .font-weight-semi-bold {
-  font-weight: var(--font-weight-semi-bold) !important;
+  font-weight: var(--wds-font-weight-title-group) !important;
 }
 
 .font-weight-normal {
-  font-weight: var(--font-weight-regular) !important;
+  font-weight: var(--wds-font-weight-body-regular) !important;
 }
 
 .font-italic {

package/src/less/core/_typography.less

@@ -99,8 +99,8 @@ h6,
 /* DEPRECATED: use `.wds-text-title-body` instead */
 .lead {
   margin-bottom: var(--size-24);
-  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);
 }
 
 // DEPRECATED: use `.wds-text-body-default` instead
@@ -161,18 +161,18 @@ small,
 a,
 .np-text-link-default,
 .np-text-link-large {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   .link-underline();
 }
 
 .np-text-link-large {
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   letter-spacing: -0.011em;
   line-height: 150%;
 }
 
 .np-text-link-default {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   letter-spacing: -0.006em;
   line-height: 155%;
 }
@@ -347,7 +347,7 @@ p {
 
 strong,
 b {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   color: var(--color-content-primary);
 }
 
@@ -365,7 +365,7 @@ address {
 blockquote {
   margin: var(--size-16) 0;
   padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   .border(left, 2px, solid, var(--color-content-accent));
 
   p {
@@ -383,8 +383,8 @@ blockquote {
   footer {
     display: block;
     color: var(--color-content-secondary);
-    font-size: var(--font-size-14);
-    line-height: var(--line-height-body);
+    font-size: var(--wds-font-size-body);
+    line-height: var(--wds-line-height-body-large);
 
     &::before {
       content: "\2014 \00A0"; // em dash, nbsp
@@ -397,7 +397,7 @@ blockquote {
 
   @media (--screen-lg) {
     margin: var(--size-32);
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 }
 
@@ -434,8 +434,8 @@ pre {
   padding: var(--size-16);
   overflow: auto;
   color: var(--color-content-secondary);
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body-large);
   word-wrap: break-word;
   word-break: break-all;
   background-color: var(--color-background-neutral);
@@ -464,7 +464,7 @@ kbd {
 
   kbd {
     padding: 0;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--wds-font-weight-title-body);
     font-size: 100%;
   }
 }

package/src/less/dropdowns.less

@@ -309,8 +309,8 @@
 .dropdown-header {
   display: block;
   padding: 8px 16px;
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body-large);
   color: var(--color-content-secondary);
   white-space: nowrap; // as with > li > a
 

package/src/less/forms/bootstrap-forms.less

@@ -43,7 +43,7 @@ label,
 .secondary {
   color: var(--color-content-secondary);
   transition: color ease-in-out 0.15s;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 20px;
 }
 
@@ -103,8 +103,8 @@ input[type="checkbox"]:focus {
 output {
   display: block;
   padding-top: (@padding-base-vertical + 1);
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-control);
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-title-section);
   color: var(--color-content-primary);
 }
 
@@ -138,7 +138,7 @@ output {
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 
   .input-size(
     var(--input-height-base),
@@ -222,7 +222,7 @@ input[type="search"] {
 
     &.input-lg,
     .input-group-lg & {
-      line-height: calc(var(--input-height-large) - var(--line-height-body));
+      line-height: calc(var(--input-height-large) - var(--wds-line-height-body-large));
     }
   }
 }
@@ -349,7 +349,7 @@ input[type="password"] {
 .form-control-static {
   // Remove default margin from `p`
   margin-bottom: 0;
-  min-height: calc(var(--line-height-control) * 2);
+  min-height: calc(var(--wds-line-height-title-section) * 2);
   color: var(--color-content-secondary);
   background-color: var(--color-background-neutral);
   border: 1px solid var(--color-interactive-secondary);
@@ -388,7 +388,7 @@ input[type="password"] {
   .form-control {
     height: @input-height-small;
     padding: var(--input-padding-small);
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
     line-height: @input-line-height-small;
     border-radius: @input-border-radius-small;
   }
@@ -405,9 +405,9 @@ input[type="password"] {
 
   .form-control-static {
     height: @input-height-small;
-    min-height: calc(var(--line-height-control) + @input-font-size-small);
+    min-height: calc(var(--wds-line-height-title-section) + @input-font-size-small);
     padding: var(--input-padding-small);
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
     line-height: @input-line-height-small;
   }
 }
@@ -445,7 +445,7 @@ input[type="password"] {
 
   .form-control-static {
     height: var(--input-height-large);
-    min-height: calc(var(--line-height-control) + @input-font-size-large);
+    min-height: calc(var(--wds-line-height-title-section) + @input-font-size-large);
     padding: var(--input-padding-large);
     font-size: @input-font-size-large;
     line-height: @input-line-height-large;
@@ -626,7 +626,7 @@ input[type="password"] {
 // Reposition feedback icon if input has visible label above
 .has-feedback label {
   & ~ .form-control-feedback {
-    top: var(--line-height-control); // Height of the `label` and its margin
+    top: var(--wds-line-height-title-section); // Height of the `label` and its margin
   }
 
   &.sr-only ~ .form-control-feedback {
@@ -737,7 +737,7 @@ input[type="password"] {
   // and other content below items
   .radio,
   .checkbox {
-    min-height: calc(var(--line-height-control) + (@padding-base-vertical + 1));
+    min-height: calc(var(--wds-line-height-title-section) + (@padding-base-vertical + 1));
   }
 
   // Make form groups behave like rows
@@ -774,7 +774,7 @@ input[type="password"] {
       // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
       .control-label {
         padding-top: 17px;
-        font-size: var(--font-size-20);
+        font-size: var(--wds-font-size-title-body);
       }
     }
   }
@@ -784,7 +784,7 @@ input[type="password"] {
       // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
       .control-label {
         padding-top: 8px;
-        font-size: var(--font-size-14);
+        font-size: var(--wds-font-size-body);
       }
     }
   }
@@ -820,7 +820,7 @@ input[type="password"] {
 
 .form-group {
   position: relative;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 
 .form-group .row {

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

@@ -309,9 +309,9 @@
       padding-top: 1px; // `0` would look off due to checkbox misalignment
 
       :not(.np-theme-personal) & {
-        font-weight: var(--font-weight-regular);
-        font-size: var(--font-size-16);
-        line-height: var(--line-height-20);
+        font-weight: var(--wds-font-weight-body-regular);
+        font-size: var(--wds-font-size-body-large);
+        line-height: var(--wds-line-height-title-subsection);
         // Account for our funky font baseline
         padding-top: 3px;
       }

package/src/less/input-groups.less

@@ -106,8 +106,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);

package/src/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 & {

package/src/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

package/src/less/navbar.less

@@ -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/less/navs.less

@@ -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);
   }
 }
 

package/src/less/panels.less

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

package/src/less/popovers.less

@@ -348,12 +348,12 @@
   }
 
   .popover-title {
-    font-size: var(--font-size-16);
-    line-height: var(--line-height-title);
+    font-size: var(--wds-font-size-body-large);
+    line-height: var(--wds-font-size-body-large);
 
     @media (--screen-md) {
-      font-size: var(--font-size-20);
-      line-height: var(--line-height-title);
+      font-size: var(--wds-font-size-title-body);
+      line-height: var(--wds-font-size-title-body);
     }
   }
 

package/src/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(--font-size-16);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--wds-font-size-body-large);
+  font-weight: var(--wds-font-weight-body-bold);
   color: #fff;
   .text-align(right);
   background-color: var(--color-content-accent);

package/src/less/sequences.less

@@ -33,13 +33,13 @@
 
   margin-top: 0;
   margin-bottom: 0;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   border-color: var(--color-border-neutral);
 
   @media (min-width: @screen-md-min) {
     .padding(right, @sequence-spacing-horizontal);
 
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 
   > li {
@@ -51,7 +51,7 @@
     > a {
       display: block;
       text-decoration: none;
-      font-weight: var(--font-weight-regular);
+      font-weight: var(--wds-font-weight-body-regular);
       color: var(--color-content-accent);
       outline-offset: -1px;
 
@@ -130,7 +130,7 @@
     > a {
       text-decoration: none;
       color: var(--color-content-primary);
-      font-weight: var(--font-weight-semi-bold);
+      font-weight: var(--wds-font-weight-title-body);
 
       &:hover,
       &:focus {
@@ -160,7 +160,7 @@
 
   a {
     text-decoration: none;
-    font-weight: var(--font-weight-regular);
+    font-weight: var(--wds-font-weight-body-regular);
   }
 }
 
@@ -253,7 +253,7 @@
   font-size: var(--font-size-12);
 
   .icon {
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: (@sequence-icon-size - 1px);
   }
 
@@ -371,7 +371,7 @@
   height: @sequence-icon-size-md;
   line-height: (@sequence-icon-size-md - 2px);
   margin-top: -6px;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 
 .sequence-icon-lg {
@@ -379,7 +379,7 @@
   height: @sequence-icon-size-lg;
   line-height: (@sequence-icon-size-lg - 2px);
   margin-top: -6px;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 
   .icon {
     font-size: 22px;

package/src/less/table.less

@@ -50,7 +50,7 @@ th {
     > tr > th,
     > tr > td {
       padding: var(--size-24) var(--size-16);
-      line-height: var(--line-height-body);
+      line-height: var(--wds-line-height-body-large);
       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(--line-height-body);
+    line-height: var(--wds-line-height-body-large);
     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(--font-size-14);
+    font-size: var(--wds-font-size-body);
     color: var(--color-content-primary);
   }
 
   > tbody,
   > .tbody {
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
   }
 
   > tbody > tr > th,
@@ -290,7 +290,7 @@ table col[class*="col-"] {
 
         > li {
           display: table-cell;
-          font-weight: var(--font-weight-bold);
+          font-weight: var(--wds-font-weight-title-body);
           color: var(--color-content-primary);
         }
       }
@@ -308,7 +308,7 @@ table col[class*="col-"] {
 
         > dd {
           display: table-cell;
-          font-size: var(--font-size-14);
+          font-size: var(--wds-font-size-body);
           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(--line-height-body) 0;
+        padding: var(--size-24) var(--wds-line-height-body-large) 0;
 
         > dd {
           padding: 0;