@transferwise/neptune-css 0.0.0-experimental-7cfec48 → 0.0.0-experimental-1ed1574

package/dist/css/accordion.css

@@ -27,10 +27,10 @@
   transform: rotate(270deg) !important;
 }
 .chevron-color {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 .np-theme-personal .chevron-color {
-  color: #163300;
   color: var(--color-interactive-primary);
 }
 @media (min-width: 768px) {
@@ -55,11 +55,14 @@
 }
 .decision__title {
   margin: 0;
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
+  line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  font-size: 1.125rem;
   font-size: var(--font-size-18);
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   letter-spacing: -0.014em;
   line-height: 135%;
@@ -67,13 +70,17 @@
 .decision__title + p,
 .decision__title + ul:not(.list-unstyled),
 .decision__title + ol:not(.list-unstyled) {
+  margin-top: 8px;
   margin-top: var(--size-8);
 }
 .decision__content {
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
+  margin-top: 4px;
   margin-top: var(--size-4);
 }
 .decision + .decision {
@@ -83,15 +90,18 @@
   margin-bottom: 0;
 }
 .decision dl {
+  margin-top: 8px;
   margin-top: var(--size-8);
 }
 .decision .media,
 .decision.media {
   width: 100%;
+  padding: 16px 12px;
   padding: var(--size-16) var(--size-12);
 }
 .np-theme-personal .decision .media,
 .np-theme-personal .decision.media {
+  padding: 16px;
   padding: var(--size-16);
 }
 .decision .media .media-left,
@@ -100,7 +110,7 @@
 }
 .decision .media .media-body,
 .decision.media .media-body {
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @media (min-width: 480px) {
@@ -117,12 +127,12 @@
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .decision:not(.disabled):hover .circle-inverse {
-  background-color: rgba(22,51,0,0.07843);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .decision:not(.disabled):hover .tw-checkbox-button,
 .decision:not(.disabled):hover .tw-radio-button {
-  border-color: #9fe870;
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
@@ -133,7 +143,6 @@
   align-items: initial;
 }
 .np-theme-personal .decision:not(.disabled):hover {
-  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
 }
 .media {
@@ -158,17 +167,21 @@
 }
 /* Alignment */
 .media-right {
+  padding-left: 16px;
   padding-left: var(--size-16);
 }
 [dir="rtl"] .media-right {
+  padding-right: 16px;
   padding-right: var(--size-16);
   padding-left: 0;
   padding-left: initial;
 }
 .media-left {
+  padding-right: 16px;
   padding-right: var(--size-16);
 }
 [dir="rtl"] .media-left {
+  padding-left: 16px;
   padding-left: var(--size-16);
   padding-right: 0;
   padding-right: initial;
@@ -176,10 +189,12 @@
 @media (max-width: 320px) {
   .media-right,
   .media-left {
+    padding-left: 32px;
     padding-left: var(--size-32);
   }
   [dir="rtl"] .media-right,
   [dir="rtl"] .media-left {
+    padding-right: 32px;
     padding-right: var(--size-32);
     padding-left: 0;
     padding-left: initial;

package/dist/css/alerts.css

@@ -1,15 +1,19 @@
 .alert {
+  padding: 16px;
   padding: var(--size-16);
   border-radius: 10px;
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
-  background-color: rgba(22,51,0,0.07843);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   min-width: 200px;
+  margin-bottom: 16px;
   margin-bottom: var(--size-16);
 }
 .np-theme-personal .alert {
+  padding: 24px;
   padding: var(--padding-medium);
+  border-radius: 16px;
   border-radius: var(--radius-medium);
 }
 .np-theme-personal .alert .alert__message {
@@ -20,20 +24,26 @@
   justify-content: center;
 }
 .alert .alert__icon {
+  width: 48px;
   width: var(--size-48);
+  height: 48px;
   height: var(--size-48);
   border-radius: 50%;
   flex: none;
 }
 .alert .alert__message {
+  padding-left: 16px;
   padding-left: var(--padding-small);
   margin-top: 2px;
 }
 .alert .close {
+  margin-top: 4px;
   margin-top: var(--size-4);
 }
 .np-theme-personal .alert .close {
+  margin-top: calc(8px * -1);
   margin-top: calc(var(--size-8) * -1);
+  margin-right: calc(8px * -1);
   margin-right: calc(var(--size-8) * -1);
 }
 .alert p,
@@ -41,6 +51,7 @@
   margin-bottom: 0;
 }
 .alert p + p {
+  margin-top: 8px;
   margin-top: var(--padding-x-small);
 }
 .arrow {
@@ -117,13 +128,14 @@
   bottom: -5px;
 }
 .alert-detach.arrow {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .form-group .alert {
   padding: 4px 16px 3px;
   margin-top: -2px;
   border-style: solid;
-  border-color: rgba(14,15,12,0.12157);
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
   border-width: 0 1px 1px;
   border-top-left-radius: 0;
@@ -206,7 +218,9 @@
 .form-group .checkbox ~ .alert,
 .form-group .alert-detach {
   border-width: 0;
+  margin-top: 12px;
   margin-top: var(--size-12);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .form-group .alert-focus,
@@ -218,7 +232,9 @@
 }
 .alert-success,
 .alert-positive {
+  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
+  color: #008026;
   color: var(--color-content-positive);
 }
 .alert-success a,
@@ -233,6 +249,7 @@
 .alert-positive .alert-link,
 .alert-success .icon,
 .alert-positive .icon {
+  color: #008026;
   color: var(--color-content-positive);
 }
 .alert-success a:hover,
@@ -247,13 +264,47 @@
 .alert-positive .close:hover,
 .alert-success .close:focus,
 .alert-positive .close:focus {
+  color: #006d13;
   color: var(--color-content-positive-hover);
 }
+.bg-primary .alert-success,
+.bg-primary .alert-positive {
+  background-color: rgba(54,199,151,0.10196);
+  color: #6fd698;
+}
+.bg-primary .alert-success a,
+.bg-primary .alert-positive a,
+.bg-primary .alert-success b,
+.bg-primary .alert-positive b,
+.bg-primary .alert-success strong,
+.bg-primary .alert-positive strong,
+.bg-primary .alert-success .close,
+.bg-primary .alert-positive .close,
+.bg-primary .alert-success .alert-link,
+.bg-primary .alert-positive .alert-link,
+.bg-primary .alert-success .icon,
+.bg-primary .alert-positive .icon {
+  color: #6fd698;
+}
+.bg-primary .alert-success a:hover,
+.bg-primary .alert-positive a:hover,
+.bg-primary .alert-success a:focus,
+.bg-primary .alert-positive a:focus,
+.bg-primary .alert-success .alert-link:hover,
+.bg-primary .alert-positive .alert-link:hover,
+.bg-primary .alert-success .alert-link:focus,
+.bg-primary .alert-positive .alert-link:focus,
+.bg-primary .alert-success .close:hover,
+.bg-primary .alert-positive .close:hover,
+.bg-primary .alert-success .close:focus,
+.bg-primary .alert-positive .close:focus {
+  color: #5ac285;
+}
 .alert-info,
 .alert-neutral {
-  background-color: rgba(22,51,0,0.07843);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .alert-info a,
@@ -268,7 +319,7 @@
 .alert-neutral .alert-link,
 .alert-info .icon,
 .alert-neutral .icon {
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .alert-info a:hover,
@@ -283,11 +334,46 @@
 .alert-neutral .close:hover,
 .alert-info .close:focus,
 .alert-neutral .close:focus {
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
 }
+.bg-primary .alert-info,
+.bg-primary .alert-neutral {
+  background-color: rgba(134,167,189,0.10196);
+  color: #ffffff;
+}
+.bg-primary .alert-info a,
+.bg-primary .alert-neutral a,
+.bg-primary .alert-info b,
+.bg-primary .alert-neutral b,
+.bg-primary .alert-info strong,
+.bg-primary .alert-neutral strong,
+.bg-primary .alert-info .close,
+.bg-primary .alert-neutral .close,
+.bg-primary .alert-info .alert-link,
+.bg-primary .alert-neutral .alert-link,
+.bg-primary .alert-info .icon,
+.bg-primary .alert-neutral .icon {
+  color: #ffffff;
+}
+.bg-primary .alert-info a:hover,
+.bg-primary .alert-neutral a:hover,
+.bg-primary .alert-info a:focus,
+.bg-primary .alert-neutral a:focus,
+.bg-primary .alert-info .alert-link:hover,
+.bg-primary .alert-neutral .alert-link:hover,
+.bg-primary .alert-info .alert-link:focus,
+.bg-primary .alert-neutral .alert-link:focus,
+.bg-primary .alert-info .close:hover,
+.bg-primary .alert-neutral .close:hover,
+.bg-primary .alert-info .close:focus,
+.bg-primary .alert-neutral .close:focus {
+  color: #ffffff;
+}
 .alert-warning {
+  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
+  color: #9a6500;
   color: var(--color-content-warning);
 }
 .alert-warning a,
@@ -296,6 +382,7 @@
 .alert-warning .close,
 .alert-warning .alert-link,
 .alert-warning .icon {
+  color: #9a6500;
   color: var(--color-content-warning);
 }
 .alert-warning a:hover,
@@ -304,11 +391,34 @@
 .alert-warning .alert-link:focus,
 .alert-warning .close:hover,
 .alert-warning .close:focus {
+  color: #855400;
   color: var(--color-content-warning-hover);
 }
+.bg-primary .alert-warning {
+  background-color: rgba(255,172,0,0.10196);
+  color: #ffd184;
+}
+.bg-primary .alert-warning a,
+.bg-primary .alert-warning b,
+.bg-primary .alert-warning strong,
+.bg-primary .alert-warning .close,
+.bg-primary .alert-warning .alert-link,
+.bg-primary .alert-warning .icon {
+  color: #ffd184;
+}
+.bg-primary .alert-warning a:hover,
+.bg-primary .alert-warning a:focus,
+.bg-primary .alert-warning .alert-link:hover,
+.bg-primary .alert-warning .alert-link:focus,
+.bg-primary .alert-warning .close:hover,
+.bg-primary .alert-warning .close:focus {
+  color: #e9bd71;
+}
 .alert-danger,
 .alert-negative {
+  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
+  color: #cf2929;
   color: var(--color-content-negative);
 }
 .alert-danger a,
@@ -323,6 +433,7 @@
 .alert-negative .alert-link,
 .alert-danger .icon,
 .alert-negative .icon {
+  color: #cf2929;
   color: var(--color-content-negative);
 }
 .alert-danger a:hover,
@@ -337,13 +448,47 @@
 .alert-negative .close:hover,
 .alert-danger .close:focus,
 .alert-negative .close:focus {
+  color: #b80419;
   color: var(--color-content-negative-hover);
 }
+.bg-primary .alert-danger,
+.bg-primary .alert-negative {
+  background-color: rgba(255,135,135,0.10196);
+  color: #ffa6a9;
+}
+.bg-primary .alert-danger a,
+.bg-primary .alert-negative a,
+.bg-primary .alert-danger b,
+.bg-primary .alert-negative b,
+.bg-primary .alert-danger strong,
+.bg-primary .alert-negative strong,
+.bg-primary .alert-danger .close,
+.bg-primary .alert-negative .close,
+.bg-primary .alert-danger .alert-link,
+.bg-primary .alert-negative .alert-link,
+.bg-primary .alert-danger .icon,
+.bg-primary .alert-negative .icon {
+  color: #ffa6a9;
+}
+.bg-primary .alert-danger a:hover,
+.bg-primary .alert-negative a:hover,
+.bg-primary .alert-danger a:focus,
+.bg-primary .alert-negative a:focus,
+.bg-primary .alert-danger .alert-link:hover,
+.bg-primary .alert-negative .alert-link:hover,
+.bg-primary .alert-danger .alert-link:focus,
+.bg-primary .alert-negative .alert-link:focus,
+.bg-primary .alert-danger .close:hover,
+.bg-primary .alert-negative .close:hover,
+.bg-primary .alert-danger .close:focus,
+.bg-primary .alert-negative .close:focus {
+  color: #ea9396;
+}
 .form-group:focus-within .alert-focus,
 input:focus ~ .alert-focus,
 .btn:focus ~ .alert-focus {
   display: block;
-  border-color: #9fe870;
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .focus .alert-focus,
@@ -378,12 +523,14 @@ input:focus ~ .alert-focus,
   display: none !important;
 }
 .np-theme-personal .alert {
+  padding: 24px;
   padding: var(--size-24);
 }
 .np-theme-personal .alert .desktop {
   flex-direction: row;
 }
 .np-theme-personal .alert .desktop .alert__message {
+  padding-left: 16px;
   padding-left: var(--padding-small);
   padding-top: 0;
 }
@@ -392,6 +539,7 @@ input:focus ~ .alert-focus,
 }
 .np-theme-personal .alert .mobile .alert__message {
   padding-left: 0;
+  padding-top: 16px;
   padding-top: var(--padding-small);
 }
 .np-theme-personal .alert-success,
@@ -408,9 +556,9 @@ input:focus ~ .alert-focus,
 .bg-primary .np-theme-personal .alert-warning,
 .bg-primary .np-theme-personal .alert-danger,
 .bg-primary .np-theme-personal .alert-negative {
-  background-color: rgba(22,51,0,0.07843);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-theme-personal .alert-success a,
@@ -497,7 +645,7 @@ input:focus ~ .alert-focus,
 .bg-primary .np-theme-personal .alert-warning .icon,
 .bg-primary .np-theme-personal .alert-danger .icon,
 .bg-primary .np-theme-personal .alert-negative .icon {
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-theme-personal .alert-success a:hover,
@@ -584,7 +732,6 @@ input:focus ~ .alert-focus,
 .bg-primary .np-theme-personal .alert-warning .close:focus,
 .bg-primary .np-theme-personal .alert-danger .close:focus,
 .bg-primary .np-theme-personal .alert-negative .close:focus {
-  color: #0d1f00;
   color: var(--color-content-link-hover);
 }
 .np-theme-personal .alert-success .np-link,
@@ -594,7 +741,6 @@ input:focus ~ .alert-focus,
 .np-theme-personal .alert-warning .np-link,
 .np-theme-personal .alert-danger .np-link,
 .np-theme-personal .alert-negative .np-link {
-  color: #163300;
   color: var(--color-content-link);
 }
 .np-theme-personal .alert-success .np-link:hover,
@@ -611,6 +757,5 @@ input:focus ~ .alert-focus,
 .np-theme-personal .alert-warning .np-link:focus,
 .np-theme-personal .alert-danger .np-link:focus,
 .np-theme-personal .alert-negative .np-link:focus {
-  color: #0d1f00;
   color: var(--color-content-link-hover);
 }

package/dist/css/background.css

@@ -4,13 +4,17 @@
   background-size: 100%;
   background-position: bottom;
 }
+.bg--dark {
+  background-color: rgba(134,167,189,0.10196);
+  background-image: url("../img/bg-dark.svg");
+}
 .np-theme-personal .bg--dark {
-  background-color: #163300;
   background-color: var(--color-forest-green);
   background-image: none;
   color: #daffc0;
 }
 .bg--light {
-  background-color: rgba(22,51,0,0.07843);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  background-image: url("../img/bg-light.svg");
 }

package/dist/css/badge.css

@@ -1,22 +1,30 @@
 .badge {
   display: inline-block;
+  min-width: 16px;
   min-width: var(--size-16);
+  padding: 5px 8px;
   padding: 5px var(--size-8);
   font-size: 10px;
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   color: #fff;
+  line-height: 1.2;
   line-height: var(--line-height-control);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   top: -1px;
   position: relative;
 }
 .np-theme-personal .badge {
   display: inline-block;
+  min-width: 16px;
   min-width: var(--size-16);
+  padding: 4px 8px;
   padding: var(--size-4) var(--size-8);
   color: #fff;
   vertical-align: middle;
@@ -24,7 +32,9 @@
   text-align: center;
   line-height: normal;
   line-height: initial;
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   position: relative;
   top: 0;
@@ -72,9 +82,9 @@ a.badge:focus {
   margin-left: initial;
 }
 .badge-success {
+  background: #2ead4b;
   background: var(--color-interactive-positive);
 }
 .np-theme-personal .badge-success {
-  background: #2f5711;
   background: var(--color-sentiment-positive);
 }

package/dist/css/breadcrumbs.css

@@ -1,5 +1,6 @@
 .breadcrumb {
   padding: 8px 0;
+  margin-bottom: 24px;
   margin-bottom: var(--size-24);
   list-style: none;
   background-color: none;
@@ -14,6 +15,6 @@
   color: #fff;
 }
 .breadcrumb > .active {
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/dist/css/button-groups.css

@@ -304,12 +304,16 @@ html:not([dir="rtl"]) .btn-group > .btn-group:first-child:not(:last-child) > .dr
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
 }[dir="rtl"] .btn-group .btn + .btn-success {
+  border-right: 1px solid #008026;
   border-right: 1px solid var(--color-content-positive);
 }html:not([dir="rtl"]) .btn-group .btn + .btn-success {
+  border-left: 1px solid #008026;
   border-left: 1px solid var(--color-content-positive);
 }[dir="rtl"] .btn-group .btn + .btn-primary {
+  border-right: 1px solid #0097c7;
   border-right: 1px solid var(--color-content-accent);
 }html:not([dir="rtl"]) .btn-group .btn + .btn-primary {
+  border-left: 1px solid #0097c7;
   border-left: 1px solid var(--color-content-accent);
 }.btn-group.btn-block {
   display: inline-flex;
@@ -386,17 +390,19 @@ html:not([dir="rtl"]) .btn-group > .btn-group:first-child:not(:last-child) > .dr
 }.btn-group .np-text-body-default,
 .btn-group .body-2,
 .btn-group .small {
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }@media (min-height: 592px) {
   .btn-group .dropdown-menu {
     max-height: 592px;
   }
 }.btn-group .secondary {
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }