@transferwise/neptune-css 0.0.0-experimental-b2666ac → 0.0.0-experimental-d2bc8ee

package/dist/css/popovers.css

@@ -1,6 +1,5 @@
 .close {
   float: right;
-  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -9,16 +8,17 @@
   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,7 +29,6 @@
   outline-offset: var(--ring-outline-offset);
 }
 .close:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.close {
@@ -400,7 +399,7 @@ button.close {
 .popover-title {
   padding: 0;
   margin: 0;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   line-height: 1.2;
   line-height: var(--line-height-title);
@@ -461,7 +460,7 @@ button.close {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .popover-content > :last-child {
@@ -469,7 +468,6 @@ button.close {
 }
 .popover-close {
   float: right;
-  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -478,16 +476,17 @@ 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 {
@@ -498,7 +497,6 @@ button.close {
   outline-offset: var(--ring-outline-offset);
 }
 .popover-close:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.popover-close {
@@ -519,14 +517,12 @@ 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,7 +24,6 @@
 .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;
@@ -34,12 +33,13 @@
   animation-iteration-count: infinite;
 }
 .np-theme-personal .process-circle {
-  stroke: #37517e;
+  stroke: #0e0f0c;
   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: #c9cbce;
+  background-color: #868685;
   background-color: var(--color-interactive-secondary);
   border-radius: calc(4px + 4px);
   border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
@@ -26,7 +26,6 @@
   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);
@@ -43,22 +42,18 @@
   left: 0;
 }
 .progress-bar-primary {
-  background-color: #37517e;
+  background-color: #0e0f0c;
   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: #37517e solid 2px;
+  outline: #0e0f0c 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: #37517e solid 2px;
+  outline: #0e0f0c 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(0,0,0,0.10196);
+  border-bottom-color: rgba(14,15,12,0.12157);
   border-bottom-color: var(--color-border-neutral);
 }
 .tw-select .tw-dropdown-item--focused {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   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(0,0,0,0.10196);
+  border-color: rgba(14,15,12,0.12157);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -131,7 +131,7 @@
   display: block;
   line-height: 24px;
   position: relative;
-  border-color: rgba(0,0,0,0.10196);
+  border-color: rgba(14,15,12,0.12157);
   border-color: var(--color-border-neutral);
 }
 .sequence > li > a {
@@ -140,7 +140,6 @@
   text-decoration: none;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-  color: #0097c7;
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -148,11 +147,9 @@
 .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 {
@@ -196,7 +193,7 @@
   border-color: inherit;
   outline: 0;
   border-width: 0;
-  background-color: rgba(0,0,0,0.10196);
+  background-color: rgba(14,15,12,0.12157);
   background-color: var(--color-border-neutral);
   background-size: 200% 200%;
   background-position: 0 0%;
@@ -207,7 +204,7 @@
 .sequence > .active > a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
@@ -216,25 +213,24 @@
 .sequence > .active > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .sequence > .active > a:active {
-  color: #37517e;
+  color: #0e0f0c;
   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: rgba(14,15,12,0.12157);
   background-color: var(--color-border-neutral);
   background-image: none;
 }
 .sequence > .active ~ li::before {
-  border-color: rgba(0,0,0,0.10196);
+  border-color: rgba(14,15,12,0.12157);
   border-color: var(--color-border-neutral);
 }
 .sequence a {
@@ -247,159 +243,116 @@
   top: 0;
 }
 .sequence-inverse > li {
-  border-color: rgba(0,0,0,0.10196);
+  border-color: rgba(14,15,12,0.12157);
   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: #5d7079;
+  color: #454745;
   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: #00a2dd;
+  border-color: #9fe870;
   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(#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%);
 }
 .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%);
+  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%);
 }
 .sequence-info > .active::before {
-  border-color: #00a2dd;
+  border-color: #9fe870;
   border-color: var(--color-interactive-accent);
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
 }
 @keyframes sequence-pip-info {
   from {
-    border-color: rgba(255,255,255,0.10196);
+    border-color: rgba(14,15,12,0.12157);
+    border-color: var(--color-border-neutral);
   }
   to {
-    border-color: #00a2dd;
+    border-color: #9fe870;
     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(#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%, 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%);
 }
 .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%);
+  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%);
 }
 .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(255,255,255,0.10196);
+    border-color: rgba(14,15,12,0.12157);
+    border-color: var(--color-border-neutral);
   }
   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%, 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%);
 }
 .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%);
+  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%);
 }
 .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(255,255,255,0.10196);
+    border-color: rgba(14,15,12,0.12157);
+    border-color: var(--color-border-neutral);
   }
   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%, 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%);
 }
 .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%);
+  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%);
 }
 .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(255,255,255,0.10196);
+    border-color: rgba(14,15,12,0.12157);
+    border-color: var(--color-border-neutral);
   }
   to {
-    border-color: #e74848;
     border-color: var(--color-interactive-negative);
   }
 }
@@ -415,9 +368,6 @@
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.sequence-hollow.sequence-inverse > li::before {
-  background-color: #37517e;
-}
 .sequence-icon {
   position: absolute;
   display: block;
@@ -433,7 +383,7 @@
   text-decoration: none !important;
   border-width: 1px;
   border-style: solid;
-  border-color: rgba(0,0,0,0.10196);
+  border-color: rgba(14,15,12,0.12157);
   border-color: var(--color-border-neutral);
   top: 4px;
   font-size: 0.75rem;
@@ -449,21 +399,15 @@
   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: #00a2dd;
+  border-color: #9fe870;
   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: #80e142;
   border-color: var(--color-interactive-accent-hover);
 }
 .sequence-table {
@@ -499,7 +443,7 @@
   padding-right: initial;
 }
 .sequence-table > li > .sequence-table-th {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -552,7 +496,7 @@
 }
 .sequence-inverse > li > .sequence-table-th,
 .sequence-inverse > li > .sequence-table-td {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .sequence-icon-md {