@transferwise/neptune-css 0.0.0-experimental-bca35d9 → 0.0.0-experimental-e674a91

package/dist/css/popovers.css

@@ -1,5 +1,6 @@
 .close {
   float: right;
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -8,17 +9,16 @@
   float: left;
 }
 .np-theme-personal .close {
-  color: #163300;
   color: var(--color-interactive-primary);
 }
 .close:hover {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 .np-theme-personal .close:hover {
-  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
 }
 .close:focus {
@@ -29,6 +29,7 @@
   outline-offset: var(--ring-outline-offset);
 }
 .close:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.close {
@@ -399,7 +400,7 @@ button.close {
 .popover-title {
   padding: 0;
   margin: 0;
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
   line-height: 1.2;
   line-height: var(--line-height-title);
@@ -418,8 +419,7 @@ button.close {
 }
 @supports (hyphenate-limit-chars: 1) {
   .popover-title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 768px) {
@@ -435,8 +435,7 @@ button.close {
 }
 @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
   .popover-title {
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
@@ -460,7 +459,7 @@ button.close {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .popover-content > :last-child {
@@ -468,6 +467,7 @@ button.close {
 }
 .popover-close {
   float: right;
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -476,17 +476,16 @@ button.close {
   float: left;
 }
 .np-theme-personal .popover-close {
-  color: #163300;
   color: var(--color-interactive-primary);
 }
 .popover-close:hover {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 .np-theme-personal .popover-close:hover {
-  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
 }
 .popover-close:focus {
@@ -497,6 +496,7 @@ button.close {
   outline-offset: var(--ring-outline-offset);
 }
 .popover-close:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.popover-close {
@@ -517,12 +517,14 @@ button.popover-close {
   font-weight: inherit !important;
   -webkit-text-decoration: none !important;
   text-decoration: none !important;
+  border-bottom: 1px dotted #0097c7 !important;
   border-bottom: 1px dotted var(--color-content-accent) !important;
   cursor: pointer;
 }
 [data-toggle="popover"]:not(.btn):hover,
 [data-toggle="popover"]:not(.btn):focus,
 [data-toggle="popover"]:not(.btn)[aria-describedby] {
+  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
   outline: 0;
 }

package/dist/css/process.css

@@ -24,6 +24,7 @@
 .process-circle {
   transform-origin: center center;
   transition: stroke 1s 0.2s linear;
+  stroke: #0097c7;
   stroke: var(--color-content-accent);
   stroke-opacity: 1;
   stroke-linecap: round;
@@ -33,13 +34,12 @@
   animation-iteration-count: infinite;
 }
 .np-theme-personal .process-circle {
-  stroke: #0e0f0c;
+  stroke: #37517e;
   stroke: var(--color-content-primary);
 }
 .np-theme-personal--forest-green .process-circle,
 .np-theme-personal--bright-green .process-circle,
 .np-theme-personal--dark .process-circle {
-  stroke: #163300;
   stroke: var(--color-interactive-primary);
 }
 .process-inverse .process-circle {
@@ -63,51 +63,51 @@
   height: 0;
 }
 .process-success .process-icon-horizontal {
+  background-color: #008026;
   background-color: var(--color-content-positive);
   bottom: 0;
   left: 0;
 }
 .np-theme-personal .process-success .process-icon-horizontal {
-  background-color: #054d28;
   background-color: var(--color-sentiment-positive);
 }
 .process-success .process-icon-vertical {
+  background-color: #008026;
   background-color: var(--color-content-positive);
   top: 100%;
   right: 0;
 }
 .np-theme-personal .process-success .process-icon-vertical {
-  background-color: #054d28;
   background-color: var(--color-sentiment-positive);
 }
 .process-success .process-circle {
+  stroke: #008026;
   stroke: var(--color-content-positive);
 }
 .np-theme-personal .process-success .process-circle {
-  stroke: #054d28;
   stroke: var(--color-sentiment-positive);
 }
 .process-danger .process-icon-horizontal {
+  background-color: #cf2929;
   background-color: var(--color-content-negative);
   left: 0;
 }
 .np-theme-personal .process-danger .process-icon-horizontal {
-  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
 }
 .process-danger .process-icon-vertical {
+  background-color: #cf2929;
   background-color: var(--color-content-negative);
   top: 0;
 }
 .np-theme-personal .process-danger .process-icon-vertical {
-  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
 }
 .process-danger .process-circle {
+  stroke: #cf2929;
   stroke: var(--color-content-negative);
 }
 .np-theme-personal .process-danger .process-circle {
-  stroke: #cb272f;
   stroke: var(--color-sentiment-negative);
 }
 .process-success .process-circle,

package/dist/css/progress-bars.css

@@ -9,7 +9,7 @@
   margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
   margin-bottom: calc((24px - 4px) / 2);
   margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  background-color: #868685;
+  background-color: #c9cbce;
   background-color: var(--color-interactive-secondary);
   border-radius: calc(4px + 4px);
   border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
@@ -26,6 +26,7 @@
   font-weight: var(--font-weight-bold);
   color: #fff;
   text-align: right;
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
   border: var(--progress-bar-border-width) solid #ffffff;
   border: var(--progress-bar-border-width) solid var(--color-background-screen);
@@ -42,18 +43,22 @@
   left: 0;
 }
 .progress-bar-primary {
-  background-color: #0e0f0c;
+  background-color: #37517e;
   background-color: var(--color-content-primary);
 }
 .progress-bar-success {
+  background-color: #008026;
   background-color: var(--color-content-positive);
 }
 .progress-bar-info {
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
 }
 .progress-bar-warning {
+  background-color: #9a6500;
   background-color: var(--color-content-warning);
 }
 .progress-bar-danger {
+  background-color: #cf2929;
   background-color: var(--color-content-negative);
 }

package/dist/css/ring.css

@@ -11,7 +11,7 @@
   outline: none;
 }
 .focus-ring:focus-visible {
-  outline: #0e0f0c solid 2px;
+  outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);
@@ -38,7 +38,7 @@ dialog:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
-  outline: #0e0f0c solid 2px;
+  outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);

package/dist/css/select.css

@@ -18,11 +18,11 @@
   border-bottom-style: solid;
   border-bottom-width: 1px;
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  border-bottom-color: rgba(14,15,12,0.12157);
+  border-bottom-color: rgba(0,0,0,0.10196);
   border-bottom-color: var(--color-border-neutral);
 }
 .tw-select .tw-dropdown-item--focused {
-  background-color: rgba(22,51,0,0.07843);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .tw-select .tw-dropdown-item .currency-flag {

package/dist/css/sequences.css

@@ -6,7 +6,7 @@
   margin-bottom: 0;
   font-size: 0.875rem;
   font-size: var(--font-size-14);
-  border-color: rgba(14,15,12,0.12157);
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -131,7 +131,7 @@
   display: block;
   line-height: 24px;
   position: relative;
-  border-color: rgba(14,15,12,0.12157);
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li > a {
@@ -140,6 +140,7 @@
   text-decoration: none;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  color: #0097c7;
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -147,9 +148,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 {
@@ -193,7 +196,7 @@
   border-color: inherit;
   outline: 0;
   border-width: 0;
-  background-color: rgba(14,15,12,0.12157);
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-size: 200% 200%;
   background-position: 0 0%;
@@ -204,7 +207,7 @@
 .sequence > .active > a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
@@ -213,24 +216,25 @@
 .sequence > .active > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active > a:active {
-  color: #0e0f0c;
+  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(14,15,12,0.12157);
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-image: none;
 }
 .sequence > .active ~ li::before {
-  border-color: rgba(14,15,12,0.12157);
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence a {
@@ -243,116 +247,159 @@
   top: 0;
 }
 .sequence-inverse > li {
-  border-color: rgba(14,15,12,0.12157);
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
+.sequence-inverse > li > a {
+  color: #ffffff;
+}
+.sequence-inverse > li::after {
+  background-color: #37517e;
+}
+.sequence-inverse > .active > a {
+  color: #ffffff;
+}
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
 .sequence-inverse > .active .np-text-body-default {
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
 .sequence-inverse > .active ~ li::after {
+  background-color: #37517e;
   background-image: none !important;
 }
+.sequence-inverse > .active ~ li::before {
+  border-color: #37517e;
+}
 .sequence-info > li {
-  border-color: #9fe870;
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence-info > li::after {
-  background-image: linear-gradient(#9fe870 0, #9fe870 50%, rgba(14,15,12,0.12157) 50%, rgba(14,15,12,0.12157) 100%);
+  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(#9fe870 0, #9fe870 50%, rgba(14,15,12,0.12157) 50%, rgba(14,15,12,0.12157) 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%);
+  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: #9fe870;
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
-  background-color: #9fe870;
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 @keyframes sequence-pip-info {
   from {
-    border-color: rgba(14,15,12,0.12157);
-    border-color: var(--color-border-neutral);
+    border-color: rgba(255,255,255,0.10196);
   }
   to {
-    border-color: #9fe870;
+    border-color: #00a2dd;
     border-color: var(--color-interactive-accent);
   }
 }
+.sequence-primary > li {
+  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 {
+  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-primary > .active::before {
+  border-color: #37517e;
+  background-color: #37517e;
+}
+@keyframes sequence-pip-primary {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #37517e;
+  }
+}
 .sequence-success > li {
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
 }
 .sequence-success > li::after {
-  background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(14,15,12,0.12157) 50%, rgba(14,15,12,0.12157) 100%);
+  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(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(14,15,12,0.12157) 50%, rgba(14,15,12,0.12157) 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%);
+  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 {
   from {
-    border-color: rgba(14,15,12,0.12157);
-    border-color: var(--color-border-neutral);
+    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(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(14,15,12,0.12157) 50%, rgba(14,15,12,0.12157) 100%);
+  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(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(14,15,12,0.12157) 50%, rgba(14,15,12,0.12157) 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%);
+  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 {
   from {
-    border-color: rgba(14,15,12,0.12157);
-    border-color: var(--color-border-neutral);
+    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(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(14,15,12,0.12157) 50%, rgba(14,15,12,0.12157) 100%);
+  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(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(14,15,12,0.12157) 50%, rgba(14,15,12,0.12157) 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%);
+  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 {
   from {
-    border-color: rgba(14,15,12,0.12157);
-    border-color: var(--color-border-neutral);
+    border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #e74848;
     border-color: var(--color-interactive-negative);
   }
 }
@@ -368,6 +415,9 @@
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
+.sequence-hollow.sequence-inverse > li::before {
+  background-color: #37517e;
+}
 .sequence-icon {
   position: absolute;
   display: block;
@@ -383,7 +433,7 @@
   text-decoration: none !important;
   border-width: 1px;
   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);
   top: 4px;
   font-size: 0.75rem;
@@ -399,15 +449,21 @@
   font-size: var(--font-size-16);
   line-height: 23px;
 }
+.sequence-inverse .sequence-icon {
+  background-color: #37517e;
+  border-color: #ffffff;
+}
 .sequence a .sequence-icon {
+  color: #0097c7;
   color: var(--color-content-accent);
-  border-color: #9fe870;
+  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: #80e142;
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .sequence-table {
@@ -443,7 +499,7 @@
   padding-right: initial;
 }
 .sequence-table > li > .sequence-table-th {
-  color: #0e0f0c;
+  color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -496,7 +552,7 @@
 }
 .sequence-inverse > li > .sequence-table-th,
 .sequence-inverse > li > .sequence-table-td {
-  color: #454745;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-icon-md {