@transferwise/neptune-css 0.0.0-experimental-b8acfbb → 0.0.0-experimental-9513a35

package/dist/css/sequences.css

@@ -4,7 +4,9 @@
   margin-inline-start: 25px;
   margin-block-start: 0;
   margin-block-end: 0;
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -81,20 +83,24 @@
 @media (min-width: 840px) {
   .sequence {
     padding-inline-end: 24px;
-    font-size: var(--wds-font-size-body-large);
+    font-size: 1rem;
+    font-size: var(--font-size-16);
   }
 }
 .sequence > li {
   display: block;
   line-height: 24px;
   position: relative;
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li > a {
   display: block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  color: #0097c7;
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -102,9 +108,11 @@
 .sequence > li > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .sequence > li > a:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .sequence > li p {
@@ -123,10 +131,6 @@
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
-.sequence > li .wds-text-title-screen,
-.sequence > li .wds-text-title-section,
-.sequence > li .wds-text-title-subsection,
-.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -152,6 +156,7 @@
   border-color: inherit;
   outline: 0;
   border-width: 0;
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-size: 200% 200%;
   background-position: 0 0%;
@@ -162,38 +167,47 @@
 .sequence > .active > a {
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active > a:active {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active::before {
+  border-color: #0097c7;
   border-color: var(--color-content-accent);
 }
 .sequence > .active::after,
 .sequence > .active ~ li::after {
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-image: none;
 }
 .sequence > .active ~ li::before {
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--wds-font-weight-body-regular);
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
 }
 .sequence-inverse > li {
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence-inverse > li > a {
@@ -207,8 +221,8 @@
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default,
-.sequence-inverse > .active .wds-text-body-default {
+.sequence-inverse > .active .np-text-body-default {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
@@ -220,16 +234,21 @@
   border-color: #37517e;
 }
 .sequence-info > li {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence-info > li::after {
+  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-info.sequence-inverse > li::after {
+  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-info > .active::before {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 @keyframes sequence-pip-info {
@@ -237,6 +256,7 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #00a2dd;
     border-color: var(--color-interactive-accent);
   }
 }
@@ -244,6 +264,7 @@
   border-color: #37517e;
 }
 .sequence-primary > li::after {
+  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(#37517e 0, #37517e 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-primary.sequence-inverse > li::after {
@@ -262,16 +283,21 @@
   }
 }
 .sequence-success > li {
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
 }
 .sequence-success > li::after {
+  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-success.sequence-inverse > li::after {
+  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-success > .active::before {
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
+  background-color: #2ead4b;
   background-color: var(--color-interactive-positive);
 }
 @keyframes sequence-pip-success {
@@ -279,20 +305,26 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #2ead4b;
     border-color: var(--color-interactive-positive);
   }
 }
 .sequence-warning > li {
+  border-color: #df8700;
   border-color: var(--color-interactive-warning);
 }
 .sequence-warning > li::after {
+  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-warning.sequence-inverse > li::after {
+  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-warning > .active::before {
+  border-color: #df8700;
   border-color: var(--color-interactive-warning);
+  background-color: #df8700;
   background-color: var(--color-interactive-warning);
 }
 @keyframes sequence-pip-warning {
@@ -300,20 +332,26 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #df8700;
     border-color: var(--color-interactive-warning);
   }
 }
 .sequence-danger > li {
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
 }
 .sequence-danger > li::after {
+  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-danger.sequence-inverse > li::after {
+  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-danger > .active::before {
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 @keyframes sequence-pip-danger {
@@ -321,17 +359,20 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #e74848;
     border-color: var(--color-interactive-negative);
   }
 }
 .sequence-hollow > li::before {
   border-width: 2px;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .sequence-hollow > .active::before {
   border-width: 4px;
 }
 .sequence-hollow > .active ~ li::before {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .sequence-hollow.sequence-inverse > li::before {
@@ -341,6 +382,7 @@
   position: absolute;
   display: block;
   margin-inline-start: -35px;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 50%;
   inline-size: 24px;
@@ -351,12 +393,15 @@
   text-decoration: none !important;
   border-width: 1px;
   border-style: solid;
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
   inset-block-start: 4px;
+  font-size: 0.75rem;
   font-size: var(--font-size-12);
 }
 .sequence-icon .icon {
-  font-size: var(--wds-font-size-body-large);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
   line-height: 23px;
 }
 .sequence-inverse .sequence-icon {
@@ -364,12 +409,16 @@
   border-color: #ffffff;
 }
 .sequence a .sequence-icon {
+  color: #0097c7;
   color: var(--color-content-accent);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence a:hover .sequence-icon,
 .sequence a:focus .sequence-icon {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .sequence-table {
@@ -384,7 +433,9 @@
 .sequence-table > li > .sequence-table-td,
 .sequence-table > li > .sequence-table-th {
   display: table-cell;
+  padding-block: 4px;
   padding-block: var(--size-4);
+  padding-inline: 12px;
   padding-inline: var(--size-12);
   padding-inline-start: 0;
 }
@@ -393,6 +444,7 @@
   padding-inline-end: 0;
 }
 .sequence-table > li > .sequence-table-th {
+  color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -440,6 +492,7 @@
 }
 .sequence-inverse > li > .sequence-table-th,
 .sequence-inverse > li > .sequence-table-td {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-icon-md {
@@ -447,14 +500,16 @@
   block-size: 32px;
   line-height: 30px;
   margin-block-start: -6px;
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
 }
 .sequence-icon-lg {
   inline-size: 40px;
   block-size: 40px;
   line-height: 38px;
   margin-block-start: -6px;
-  font-size: var(--wds-font-size-body-large);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
 }
 .sequence-icon-lg .icon {
   font-size: 22px;

package/dist/css/table.css

@@ -1,4 +1,5 @@
 table {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-collapse: separate;
 }
@@ -11,6 +12,7 @@ table th[class*="col-"] {
 caption {
   padding-block-start: 16px;
   padding-block-end: 16px;
+  color: #5d7079;
   color: var(--color-content-secondary);
   text-align: start;
 }
@@ -20,6 +22,7 @@ th {
 .table {
   inline-size: 100%;
   max-inline-size: 100%;
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .table > thead > tr > th,
@@ -28,10 +31,15 @@ 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: var(--wds-line-height-body-large);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
   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;
@@ -39,10 +47,15 @@ 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: var(--wds-line-height-body-large);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
   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;
@@ -72,24 +85,31 @@ 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: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .table-condensed > thead > tr > th,
@@ -98,18 +118,22 @@ 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) {
@@ -118,10 +142,12 @@ 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);
   }
 }
@@ -163,6 +189,7 @@ 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,
@@ -170,6 +197,7 @@ 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,
@@ -184,6 +212,7 @@ 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,
@@ -191,6 +220,7 @@ 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,
@@ -205,6 +235,7 @@ 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,
@@ -212,6 +243,7 @@ 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,
@@ -226,6 +258,7 @@ 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,
@@ -233,6 +266,7 @@ 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,
@@ -247,6 +281,7 @@ 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,
@@ -254,6 +289,7 @@ 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,
@@ -287,6 +323,7 @@ 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;
@@ -312,6 +349,7 @@ 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;
   }
@@ -328,7 +366,9 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: var(--wds-font-weight-title-body);
+    font-weight: 700;
+    font-weight: var(--font-weight-bold);
+    color: #37517e;
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -342,7 +382,9 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
-    font-size: var(--wds-font-size-body);
+    font-size: 0.875rem;
+    font-size: var(--font-size-14);
+    color: #5d7079;
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -354,11 +396,15 @@ 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: var(--wds-line-height-body-large);
+    padding-inline: 1.5;
+    padding-inline: var(--line-height-body);
   }
   .table > .tbody > dl > dd {
     padding: 0;
@@ -396,6 +442,7 @@ 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,6 +8,7 @@
 .tw-checkbox-check::after {
   content: "";
   position: absolute;
+  background: #ffffff;
   background: var(--color-background-screen);
   transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
@@ -19,6 +20,7 @@
 }
 .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 {