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

package/dist/css/badge.css

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

package/dist/css/buttons.css

@@ -40,10 +40,10 @@
   white-space: nowrap;
   padding-block-end: 10px;
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   padding: var(--btn-padding);
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 1.5rem;
   line-height: var(--line-height-24);
   border-radius: var(--btn-radius-base);
@@ -82,7 +82,7 @@
 }
 .btn .dropdown-menu > li > a {
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 1.5rem;
   line-height: var(--line-height-24);
 }
@@ -1131,7 +1131,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .navbar .btn {
   padding: var(--btn-sm-padding);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.375rem;
   line-height: var(--line-height-22);
   border-radius: var(--btn-sm-radius-base);
@@ -1140,7 +1140,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .btn-sm .dropdown-menu > li > a,
 .navbar .btn .dropdown-menu > li > a {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.375rem;
   line-height: var(--line-height-22);
 }
@@ -1178,7 +1178,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   .navbar-collapse .btn {
     padding: var(--btn-padding);
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: 1.5rem;
     line-height: var(--line-height-24);
     border-radius: var(--border-radius-base);
@@ -1186,7 +1186,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   }
   .navbar-collapse .btn .dropdown-menu > li > a {
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: 1.5rem;
     line-height: var(--line-height-24);
   }
@@ -1211,7 +1211,7 @@ input[type="button"].btn-block {
 }
 .btn-input {
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   padding-inline-start: 16px;
   padding-inline-end: 16px;
 }
@@ -1249,7 +1249,7 @@ input[type="button"].btn-block {
 .btn-input.btn-lg.btn-addon,
 .btn-input.btn-lg.btn-input-inverse {
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .btn-input-inverse {
   --color-content-primary: #ffffff;

package/dist/css/dropdowns.css

@@ -320,9 +320,9 @@
   padding-block: 8px;
   padding-inline: 16px;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   color: #5d7079;
   color: var(--color-content-secondary);
   white-space: nowrap;

package/dist/css/input-groups.css

@@ -125,7 +125,7 @@ label,
   color: var(--color-content-secondary);
   transition: color ease-in-out 0.15s;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 20px;
 }
 input[type="search"] {
@@ -170,9 +170,9 @@ output {
   display: block;
   padding-block-start: 9px;
   font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.2;
-  line-height: var(--line-height-control);
+  font-size: var(--wds-font-size-body-large);
+  line-height: 1.22;
+  line-height: var(--wds-line-height-title-section);
   color: #37517e;
   color: var(--color-content-primary);
 }
@@ -188,7 +188,7 @@ output {
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   min-block-size: var(--input-height-base);
   padding: var(--input-padding);
   border-radius: 3px;
@@ -302,7 +302,7 @@ input[type="search"] {
   .input-group-lg input[type="datetime-local"],
   .input-group-lg input[type="month"] {
     line-height: calc(var(--input-height-large) - 1.5);
-    line-height: calc(var(--input-height-large) - var(--line-height-body));
+    line-height: calc(var(--input-height-large) - var(--wds-line-height-body-large));
   }
 }
 .form-group {
@@ -383,8 +383,8 @@ fieldset[disabled] .checkbox label {
 }
 .form-control-static {
   margin-block-end: 0;
-  min-block-size: calc(1.2 * 2);
-  min-block-size: calc(var(--line-height-control) * 2);
+  min-block-size: calc(1.22 * 2);
+  min-block-size: calc(var(--wds-line-height-title-section) * 2);
   color: #5d7079;
   color: var(--color-content-secondary);
   background-color: rgba(134,167,189,0.10196);
@@ -447,7 +447,7 @@ select[multiple].input-sm {
   block-size: 32px;
   padding: var(--input-padding-small);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 24px;
   border-radius: 3px;
 }
@@ -465,11 +465,11 @@ select[multiple].input-sm {
 .form-group-sm .form-control-static,
 .navbar .form-control-static {
   block-size: 32px;
-  min-block-size: calc(1.2 + 14px);
-  min-block-size: calc(var(--line-height-control) + 14px);
+  min-block-size: calc(1.22 + 14px);
+  min-block-size: calc(var(--wds-line-height-title-section) + 14px);
   padding: var(--input-padding-small);
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 24px;
 }
 .input-lg {
@@ -535,8 +535,8 @@ select[multiple].input-lg {
 }
 .form-group-lg .form-control-static {
   block-size: var(--input-height-large);
-  min-block-size: calc(1.2 + 22px);
-  min-block-size: calc(var(--line-height-control) + 22px);
+  min-block-size: calc(1.22 + 22px);
+  min-block-size: calc(var(--wds-line-height-title-section) + 22px);
   padding: var(--input-padding-large);
   font-size: 22px;
   line-height: 32px;
@@ -1411,8 +1411,8 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative);
 }
 .has-feedback label ~ .form-control-feedback {
-  inset-block-start: 1.2;
-  inset-block-start: var(--line-height-control);
+  inset-block-start: 1.22;
+  inset-block-start: var(--wds-line-height-title-section);
 }
 .has-feedback label.sr-only ~ .form-control-feedback {
   inset-block-start: 0;
@@ -1477,8 +1477,8 @@ select[multiple].input-lg {
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox {
-  min-block-size: calc(1.2 + (8px + 1));
-  min-block-size: calc(var(--line-height-control) + (8px + 1));
+  min-block-size: calc(1.22 + (8px + 1));
+  min-block-size: calc(var(--wds-line-height-title-section) + (8px + 1));
 }
 .form-horizontal .form-group {
   margin-inline-start: -12px;
@@ -1503,15 +1503,15 @@ select[multiple].input-lg {
 @media (min-width: 600px) {
   .form-horizontal .form-group-lg .control-label {
     padding-block-start: 17px;
-    font-size: 1.25rem;
-    font-size: var(--font-size-20);
+    font-size: 1.125rem;
+    font-size: var(--wds-font-size-title-body);
   }
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-sm .control-label {
     padding-block-start: 8px;
     font-size: 0.875rem;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
   }
 }
 .radio,
@@ -1840,11 +1840,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 :not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.25rem;
-  line-height: var(--line-height-20);
+  font-size: var(--wds-font-size-body-large);
+  line-height: 1.25;
+  line-height: var(--wds-line-height-title-subsection);
   padding-block-start: 3px;
 }
 .np-theme-personal .np-radio.radio > label,
@@ -1881,7 +1881,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .form-group {
   position: relative;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .form-group .row {
   margin-inline-start: -6px;
@@ -2483,9 +2483,9 @@ select[multiple].input-group-sm > .input-group-addon {
 .input-group-addon {
   padding: var(--input-group-addon-padding);
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   color: #5d7079;
   color: var(--color-content-secondary);
   text-align: center;

package/dist/css/list-group.css

@@ -18,7 +18,7 @@
   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 {

package/dist/css/modals.css

@@ -88,8 +88,8 @@
 }
 .modal-title {
   margin: 0;
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  line-height: 1.22;
+  line-height: var(--wds-line-height-title-section);
 }
 .modal-body {
   position: relative;

package/dist/css/navbar.css

@@ -436,9 +436,9 @@
   padding-block: 8px;
   padding-inline: 16px;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   color: #5d7079;
   color: var(--color-content-secondary);
   white-space: nowrap;
@@ -489,9 +489,9 @@
   color: #37517e;
   color: var(--color-content-primary);
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
@@ -508,7 +508,7 @@
   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 {
@@ -558,10 +558,10 @@
 .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);
@@ -577,11 +577,11 @@
 .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;
@@ -635,7 +635,7 @@
   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 {
@@ -749,7 +749,7 @@ button.close {
 .navbar {
   position: relative;
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   min-block-size: 56px;
   margin-block-end: 40px;
   border: 0 solid transparent;
@@ -915,11 +915,11 @@ button.close {
   border: 0;
   margin-inline-end: 12px;
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   line-height: 1.5;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   margin-block-end: 8px;
   color: #ffffff;
 }
@@ -1010,8 +1010,8 @@ button.close {
 @media (min-width: 840px) {
   .navbar-nav > li > a.navbar-title-link,
   .navbar-nav > li > button.navbar-title-link {
-    font-size: 1.25rem;
-    font-size: var(--font-size-20);
+    font-size: 1.125rem;
+    font-size: var(--wds-font-size-title-body);
   }
 }
 .navbar-nav > li.divider {
@@ -1021,7 +1021,7 @@ button.close {
   .navbar-nav > li > a,
   .navbar-nav > li > button {
     font-size: 1rem;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     padding-block: 9px 7px;
     padding-inline: 16px;
     -webkit-touch-callout: none;
@@ -1080,7 +1080,7 @@ button.close {
   .navbar-nav > li > a {
     padding-block-end: 6px;
     font-size: 0.875rem;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
   }
 }
 .navbar-form {
@@ -1181,7 +1181,7 @@ button.close {
 }
 .navbar-nav > li > .dropdown-menu > li > a {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 @media (max-width: 840px) {
   .navbar-nav > li > .dropdown-menu > li > a {
@@ -1203,8 +1203,8 @@ button.close {
   color: #0077a5;
   color: var(--color-content-accent-active);
   background-color: transparent;
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-nav > li > .dropdown-menu > .active > a:hover,
 .navbar-nav > li > .dropdown-menu > .active > a:focus {
@@ -1268,7 +1268,7 @@ button.close {
   margin-block-start: 13px;
   margin-block-end: 11px;
   font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-btn.btn-sm {
   margin-block-start: 13px;
@@ -1355,8 +1355,8 @@ button.close {
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > .dropdown-toggle {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > .dropdown-toggle,
@@ -1390,8 +1390,8 @@ button.close {
     background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a {
-    font-weight: 700;
-    font-weight: var(--font-weight-bold);
+    font-weight: 600;
+    font-weight: var(--wds-font-weight-title-body);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
@@ -1457,8 +1457,8 @@ button.close {
 .navbar-inverse .navbar-nav > .active > .dropdown-toggle {
   color: #0077a5;
   color: var(--color-content-accent-active);
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 600;
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > .dropdown-toggle,
@@ -1724,18 +1724,18 @@ button.close {
 }
 .navbar-title {
   float: inline-start;
-  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.35;
+  line-height: var(--wds-line-height-title-body);
   margin-block-start: 12px;
   margin-block-end: 12px;
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-weight: 1.35;
+  font-weight: var(--wds-line-height-title-body);
 }
 .navbar-subtitle {
   font-size: 0.875rem;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   margin-block-end: 8px;
 }
 .navbar-title,
@@ -1818,8 +1818,8 @@ button.close {
   }
 }
 .nav-toolbar h1 {
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  line-height: 1.22;
+  line-height: var(--wds-line-height-title-section);
 }
 .nav-toolbar .close {
   -webkit-text-decoration: none;
@@ -1861,7 +1861,7 @@ button.close {
 @media (min-width: 600px) {
   .simple-nav .navbar-nav > li > a {
     font-size: 1rem !important;
-    font-size: var(--font-size-16) !important;
+    font-size: var(--wds-font-size-body-large) !important;
   }
 }
 @media (min-width: 1160px) {

package/dist/css/navs.css

@@ -16,9 +16,9 @@
   color: #37517e;
   color: var(--color-content-primary);
   font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   font-size: 1rem;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
@@ -35,7 +35,7 @@
   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 {
@@ -85,10 +85,10 @@
 .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);
@@ -104,11 +104,11 @@
 .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;
@@ -162,7 +162,7 @@
   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 {