@transferwise/neptune-css 0.0.0-experimental-e1f83e6 → 0.0.0-experimental-b878f82

package/dist/css/panels.css

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

package/dist/css/popovers.css

@@ -81,8 +81,8 @@ 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-family: Inter, Vazirmatn, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', Helvetica, Arial, sans-serif;
+  font-family: var(--wds-font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -480,16 +480,16 @@ button.popover-close {
 }
 .popover-promotion .popover-title {
   font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  font-size: var(--wds-font-size-body-large);
+  line-height: 1rem;
+  line-height: var(--wds-font-size-body-large);
 }
 @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);
+    font-size: 1.125rem;
+    font-size: var(--wds-font-size-title-body);
+    line-height: 1.125rem;
+    line-height: var(--wds-font-size-title-body);
   }
 }
 @media (max-width: 320px) {

package/dist/css/progress-bars.css

@@ -21,9 +21,9 @@
   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);
+  font-size: var(--wds-font-size-body-large);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-body-bold);
   color: #fff;
   text-align: end;
   background-color: #0097c7;

package/dist/css/sequences.css

@@ -5,7 +5,7 @@
   margin-block-start: 0;
   margin-block-end: 0;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
@@ -84,7 +84,7 @@
   .sequence {
     padding-inline-end: 24px;
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 }
 .sequence > li {
@@ -99,7 +99,7 @@
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   color: #0097c7;
   color: var(--color-content-accent);
   outline-offset: -1px;
@@ -174,7 +174,7 @@
   color: #37517e;
   color: var(--color-content-primary);
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
@@ -205,7 +205,7 @@
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
@@ -406,7 +406,7 @@
 }
 .sequence-icon .icon {
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 23px;
 }
 .sequence-inverse .sequence-icon {
@@ -506,7 +506,7 @@
   line-height: 30px;
   margin-block-start: -6px;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .sequence-icon-lg {
   inline-size: 40px;
@@ -514,7 +514,7 @@
   line-height: 38px;
   margin-block-start: -6px;
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .sequence-icon-lg .icon {
   font-size: 22px;

package/dist/css/table.css

@@ -36,7 +36,7 @@ th {
   padding-inline: 16px;
   padding-inline: var(--size-16);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
   border-block-start: 1px solid rgba(0,0,0,0.10196);
   border-block-start: 1px solid #0000001a;
@@ -52,7 +52,7 @@ th {
   padding-inline: 16px;
   padding-inline: var(--size-16);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
   border-block-start: 1px solid rgba(0,0,0,0.10196);
   border-block-start: 1px solid #0000001a;
@@ -98,14 +98,14 @@ th {
 .table > .thead,
 .table > .tfoot {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   color: #37517e;
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
@@ -366,8 +366,8 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: 700;
-    font-weight: var(--font-weight-bold);
+    font-weight: 600;
+    font-weight: var(--wds-font-weight-title-body);
     color: #37517e;
     color: var(--color-content-primary);
   }
@@ -383,7 +383,7 @@ table col[class*="col-"] {
   .table > .tbody > dl > dd {
     display: table-cell;
     font-size: 0.875rem;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
     color: #5d7079;
     color: var(--color-content-secondary);
   }
@@ -404,7 +404,7 @@ table col[class*="col-"] {
     padding-block: 24px 0;
     padding-block: var(--size-24) 0;
     padding-inline: 1.5;
-    padding-inline: var(--line-height-body);
+    padding-inline: var(--wds-line-height-body-large);
   }
   .table > .tbody > dl > dd {
     padding: 0;

package/dist/css/tooltip.css

@@ -28,8 +28,8 @@
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: Inter, Helvetica, Arial, sans-serif;
-  font-family: var(--font-family-regular);
+  font-family: Inter, Vazirmatn, 'Noto Sans SC', 'Zen Kaku Gothic Antique', 'Noto Sans KR', 'Noto Sans Thai', 'Noto Sans Hebrew', Helvetica, Arial, sans-serif;
+  font-family: var(--wds-font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;

package/dist/less/legacy-variables.less

@@ -157,7 +157,7 @@
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-@font-family-sans-serif:  var(--font-family-regular);
+@font-family-sans-serif:  var(--wds-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;
@@ -196,7 +196,7 @@
 @line-height-computed:    24px; // ~24px
 
 //** By default, this inherits from the `<body>`.
-@headings-font-family:    var(--font-family-regular);
+@headings-font-family:    var(--wds-font-family-regular);
 @headings-font-weight:    @font-weight-semi-bold;
 @headings-line-height:    1.2;              //1.1;
 @headings-color:          @brand-navy-minus-10;
@@ -221,7 +221,7 @@
 @display3-line-height: 88px;
 @display4-line-height: 72px;
 
-@buttons-font-family:     var(--font-family-regular);
+@buttons-font-family:     var(--wds-font-family-regular);
 
 //** Global textual link color.
 @link-color:            @brand-light-blue;

package/dist/props/neptune-tokens.css

@@ -255,18 +255,18 @@
   --wds-letter-spacing-display-medium: 0;
 
   --wds-font-weight-display-small: 900;
-  --wds-font-size-display-small: 2.6875rem;
-  --wds-line-height-display-small: 1.4498;
+  --wds-font-size-display-small: 2.5rem;
+  --wds-line-height-display-small: 1.45;
   --wds-letter-spacing-display-small: 0;
 
   --wds-font-weight-display-number-small: 600;
-  --wds-font-size-display-number-small: 2.6875rem;
+  --wds-font-size-display-number-small: 2.5rem;
   --wds-line-height-display-number-small: 1.24;
   --wds-letter-spacing-display-number-small: 0;
 
   --wds-font-weight-display-number-medium: 800;
   --wds-font-size-display-number-medium: 3.25rem;
-  --wds-line-height-display-number-medium: 0.8;
+  --wds-line-height-display-number-medium: 0.846;
   --wds-letter-spacing-display-number-medium: 0;
 
   --wds-font-weight-display-number-large: 800;
@@ -275,52 +275,52 @@
   --wds-letter-spacing-display-number-large: 0;
 
   --wds-font-weight-title-screen: 600;
-  --wds-font-size-title-screen: 2.125rem;
+  --wds-font-size-title-screen: 1.875rem;
   --wds-line-height-title-screen: 1.6;
   --wds-letter-spacing-title-screen: 0;
   --wds-paragraph-spacing-title-screen: 0.875rem;
 
   --wds-font-weight-title-section: 600;
-  --wds-font-size-title-section: 1.875rem;
-  --wds-line-height-title-section: 1.68;
+  --wds-font-size-title-section: 1.625rem;
+  --wds-line-height-title-section: 1.681;
   --wds-letter-spacing-title-section: 0;
   --wds-paragraph-spacing-title-section: 0.875rem;
 
   --wds-font-weight-title-subsection: 600;
-  --wds-font-size-title-subsection: 1.625rem;
-  --wds-line-height-title-subsection: 1.74;
+  --wds-font-size-title-subsection: 1.375rem;
+  --wds-line-height-title-subsection: 1.741;
   --wds-letter-spacing-title-subsection: 0;
   --wds-paragraph-spacing-title-subsection: 0.875rem;
 
   --wds-font-weight-title-body: 600;
-  --wds-font-size-title-body: 1.375rem;
-  --wds-line-height-title-body: 1.84;
+  --wds-font-size-title-body: 1.1875rem;
+  --wds-line-height-title-body: 1.842;
   --wds-letter-spacing-title-body: 0;
   --wds-paragraph-spacing-title-body: 0.875rem;
 
   --wds-font-weight-title-group: 500;
-  --wds-font-size-title-group: 1.0625rem;
+  --wds-font-size-title-group: 0.9375rem;
   --wds-line-height-title-group: 1.9;
   --wds-letter-spacing-title-group: 0;
   --wds-paragraph-spacing-title-group: 0.875rem;
 
   --wds-font-weight-body-large-regular: 300;
   --wds-font-weight-body-large-bold: 600;
-  --wds-font-size-body-large: 1.1875rem;
-  --wds-line-height-body-large: 1.75;
+  --wds-font-size-body-large: 1.0625rem;
+  --wds-line-height-body-large: 1.753;
   --wds-letter-spacing-body-large: 0;
   --wds-paragraph-spacing-body-large: 0.875rem;
 
   --wds-font-weight-body-regular: 300;
   --wds-font-weight-body-bold: 600;
-  --wds-font-size-body: 1.0625rem;
+  --wds-font-size-body: 0.9375rem;
   --wds-line-height-body: 1.8;
   --wds-letter-spacing-body: 0;
   --wds-paragraph-spacing-body: 0.875rem;
 
   --wds-font-weight-nav-regular: 300;
   --wds-font-weight-nav-bold: 600;
-  --wds-font-size-nav: 0.9375rem;
+  --wds-font-size-nav: 0.8125rem;
   --wds-line-height-nav: 1.9;
   --wds-letter-spacing-nav: 0;
 }

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-b878f82",
   "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