@transferwise/neptune-css 0.0.0-experimental-ff2b208 → 0.0.0-experimental-25d5b27

package/dist/css/table.css

@@ -1,5 +1,4 @@
 table {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-collapse: separate;
 }
@@ -12,7 +11,6 @@ table th[class*="col-"] {
 caption {
   padding-block-start: 16px;
   padding-block-end: 16px;
-  color: #5d7079;
   color: var(--color-content-secondary);
   text-align: start;
 }
@@ -22,7 +20,6 @@ th {
 .table {
   inline-size: 100%;
   max-inline-size: 100%;
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .table > thead > tr > th,
@@ -31,15 +28,10 @@ th {
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
-  padding-block: 24px;
   padding-block: var(--size-24);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  line-height: 1.5;
   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;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
   transition: border ease 0.15s;
@@ -47,15 +39,10 @@ th {
 .table > .thead > ol > li,
 .table > .tbody > dl > dd,
 .table > .tfoot > ol > li {
-  padding-block: 24px;
   padding-block: var(--size-24);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  line-height: 1.5;
   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;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
   transition: border ease 0.15s;
@@ -85,31 +72,24 @@ th {
   border-block-start: 0;
 }
 .table > tbody + tbody {
-  border-block-start: 1px solid rgba(0,0,0,0.10196);
-  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
 }
 .table .table {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table > thead,
 .table > tfoot,
 .table > .thead,
 .table > .tfoot {
-  font-size: 0.875rem;
   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(--wds-font-size-body);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .table-condensed > thead > tr > th,
@@ -118,22 +98,18 @@ th {
 .table-condensed > thead > tr > td,
 .table-condensed > tbody > tr > td,
 .table-condensed > tfoot > tr > td {
-  padding: 8px;
   padding: var(--size-8);
 }
 .table-condensed > .thead > ol > li,
 .table-condensed > .tbody > dl > dd {
-  padding: 8px;
   padding: var(--size-8);
 }
 .table-bordered {
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
   border-radius: 3px;
 }
 .table-bordered thead,
 .table-bordered .thead {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 @media (max-width: 839.98px) {
@@ -142,12 +118,10 @@ th {
   }
 }
 .table-striped > tbody > tr:nth-of-type(odd) {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 @media (min-width: 840px) {
   .table-striped > .tbody > dl:nth-of-type(odd) {
-    background-color: rgba(134,167,189,0.10196);
     background-color: var(--color-background-neutral);
   }
 }
@@ -189,7 +163,6 @@ table col[class*="col-"] {
 .table > thead > tr.active > th,
 .table > tbody > tr.active > th,
 .table > tfoot > tr.active > th {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table-hover > tbody > tr > td.active:hover,
@@ -197,7 +170,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.active:hover > td,
 .table-hover > tbody > tr:hover > .active,
 .table-hover > tbody > tr.active:hover > th {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table > thead > tr > td.success,
@@ -212,7 +184,6 @@ table col[class*="col-"] {
 .table > thead > tr.success > th,
 .table > tbody > tr.success > th,
 .table > tfoot > tr.success > th {
-  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
 }
 .table-hover > tbody > tr > td.success:hover,
@@ -220,7 +191,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.success:hover > td,
 .table-hover > tbody > tr:hover > .success,
 .table-hover > tbody > tr.success:hover > th {
-  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
 }
 .table > thead > tr > td.info,
@@ -235,7 +205,6 @@ table col[class*="col-"] {
 .table > thead > tr.info > th,
 .table > tbody > tr.info > th,
 .table > tfoot > tr.info > th {
-  background-color: rgba(56,200,255,0.10196);
   background-color: var(--color-background-accent);
 }
 .table-hover > tbody > tr > td.info:hover,
@@ -243,7 +212,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.info:hover > td,
 .table-hover > tbody > tr:hover > .info,
 .table-hover > tbody > tr.info:hover > th {
-  background-color: rgba(56,200,255,0.10196);
   background-color: var(--color-background-accent);
 }
 .table > thead > tr > td.warning,
@@ -258,7 +226,6 @@ table col[class*="col-"] {
 .table > thead > tr.warning > th,
 .table > tbody > tr.warning > th,
 .table > tfoot > tr.warning > th {
-  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 .table-hover > tbody > tr > td.warning:hover,
@@ -266,7 +233,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.warning:hover > td,
 .table-hover > tbody > tr:hover > .warning,
 .table-hover > tbody > tr.warning:hover > th {
-  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 .table > thead > tr > td.danger,
@@ -281,7 +247,6 @@ table col[class*="col-"] {
 .table > thead > tr.danger > th,
 .table > tbody > tr.danger > th,
 .table > tfoot > tr.danger > th {
-  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
 }
 .table-hover > tbody > tr > td.danger:hover,
@@ -289,7 +254,6 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.danger:hover > td,
 .table-hover > tbody > tr:hover > .danger,
 .table-hover > tbody > tr.danger:hover > th {
-  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
 }
 .table > thead > tr > td.default,
@@ -323,7 +287,6 @@ table col[class*="col-"] {
 @media screen and (max-width: 839.98px) {
   .table-responsive {
     inline-size: 100%;
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -349,7 +312,6 @@ table col[class*="col-"] {
     border-block-end: 0;
   }
   .table-responsive.table-bordered {
-    border: 1px solid rgba(134,167,189,0.10196);
     border: 1px solid var(--color-background-neutral);
     border-radius: 3px;
   }
@@ -366,9 +328,7 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: 600;
     font-weight: var(--wds-font-weight-title-body);
-    color: #37517e;
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -382,9 +342,7 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
-    font-size: 0.875rem;
     font-size: var(--wds-font-size-body);
-    color: #5d7079;
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -396,14 +354,10 @@ table col[class*="col-"] {
     display: none;
   }
   .table > .tbody > dl {
-    border: 1px #c9cbce solid;
     border: 1px var(--color-interactive-secondary) solid;
     border-radius: 3px;
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    padding-block: 24px 0;
     padding-block: var(--size-24) 0;
-    padding-inline: 1.5;
     padding-inline: var(--wds-line-height-body-large);
   }
   .table > .tbody > dl > dd {
@@ -442,7 +396,6 @@ table col[class*="col-"] {
   color: #ffffff;
 }
 .table-calendar > tbody > tr > td > a:not([disabled]):hover {
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
   color: #fff;
 }

package/dist/css/tick.css

@@ -8,7 +8,6 @@
 .tw-checkbox-check::after {
   content: "";
   position: absolute;
-  background: #ffffff;
   background: var(--color-background-screen);
   transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
@@ -20,7 +19,6 @@
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .tw-checkbox-check::before {

package/dist/css/tooltip.css

@@ -28,13 +28,11 @@
   position: absolute;
   z-index: 1070;
   display: block;
-  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;
   line-break: auto;
-  line-height: 24px;
   line-height: var(--size-24);
   text-align: start;
   -webkit-text-decoration: none;
@@ -74,14 +72,10 @@
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;
-  padding-block: 16px;
   padding-block: var(--size-16);
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  color: #37517e;
   color: var(--color-content-primary);
   text-align: center;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 3px;
   box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
@@ -132,7 +126,6 @@
   margin-inline-start: -5px;
   border-block-width: 5px 0;
   border-inline-width: 5px;
-  border-block-start-color: #ffffff;
   border-block-start-color: var(--color-background-screen);
 }
 .tooltip.right .tooltip-arrow {
@@ -141,7 +134,6 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 0 5px;
-  border-inline-end-color: #ffffff;
   border-inline-end-color: var(--color-background-screen);
 }
 .tooltip.left .tooltip-arrow {
@@ -150,7 +142,6 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 5px 0;
-  border-inline-start-color: #ffffff;
   border-inline-start-color: var(--color-background-screen);
 }
 .tooltip.bottom .tooltip-arrow {
@@ -159,7 +150,6 @@
   margin-inline-start: -5px;
   border-block-width: 0 5px;
   border-inline-width: 5px;
-  border-block-end-color: #ffffff;
   border-block-end-color: var(--color-background-screen);
 }
 [data-toggle="tooltip"]:not(.btn) {
@@ -167,7 +157,6 @@
 }
 [data-toggle="tooltip"]:not(.btn):hover,
 [data-toggle="tooltip"]:not(.btn):focus {
-  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
   outline: 0;
 }

package/dist/css/wells.css

@@ -1,43 +1,28 @@
 .well,
 .well-xs {
-  min-block-size: 24px;
   min-block-size: var(--size-24);
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
-  border-radius: 10px;
   border-radius: var(--radius-small);
-  border: solid 1px rgba(0,0,0,0.10196);
   border: solid 1px var(--color-border-neutral);
-  padding: 24px;
   padding: var(--size-24);
   box-shadow: none;
 }
 @media only screen and (min-width: 600px) {
   .well-sm {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }
 }
 @media only screen and (min-width: 840px) {
   .well-md {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }
@@ -45,15 +30,10 @@
 @media only screen and (min-width: 1160px) {
   .well-lg,
   .well-xl {
-    min-block-size: 24px;
     min-block-size: var(--size-24);
-    margin-block-end: 24px;
     margin-block-end: var(--size-24);
-    border-radius: 10px;
     border-radius: var(--radius-small);
-    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
-    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }

package/package.json

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

package/src/less/core/_scaffolding.less

@@ -8,6 +8,9 @@
 @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);
@@ -64,7 +67,7 @@
 }
 
 html {
-  font-size: var(--wds-font-size-body);
+  font-size: var(--base-font-size);
   font-family: var(--wds-font-family-regular);
   color: var(--color-content-secondary);
   background-color: var(--color-background-screen);

package/src/less/core/fonts/_fonts-ar.less

@@ -3,6 +3,9 @@
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
+  ascent-override: 90%;
+  descent-override: 20%;
+  line-gap-override: 0%;
   src: url(../fonts/vazirmatn/vazirmatn-arabic-wght-normal.woff2) format("woff2");
   unicode-range:
     U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
@@ -19,6 +22,9 @@
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
+  ascent-override: 90%;
+  descent-override: 20%;
+  line-gap-override: 0%;
   src: url(../fonts/vazirmatn/vazirmatn-latin-wght-normal.woff2) format("woff2");
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
@@ -30,6 +36,9 @@
   font-style: normal;
   font-display: swap;
   font-weight: 100 900;
+  ascent-override: 90%;
+  descent-override: 20%;
+  line-gap-override: 0%;
   src: url(../fonts/vazirmatn/vazirmatn-latin-ext-wght-normal.woff2) format("woff2");
   unicode-range:
     U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,