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

package/dist/css/panels.css

@@ -19,6 +19,7 @@
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
+  line-height: calc(1.2 + 8px);
   line-height: calc(var(--line-height-title) + 8px);
 }
 .panel-title > a {
@@ -67,6 +68,7 @@
 }
 @media (min-width: 768px) {
   .panel-title {
+    line-height: calc(1.2 * 2);
     line-height: calc(var(--line-height-title) * 2);
   }
   .panel-heading > .btn-sm {
@@ -369,6 +371,7 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   }
 }
 .panel-group {
+  margin-bottom: 24px;
   margin-bottom: var(--size-24);
 }
 .panel-group .panel {

package/dist/css/popovers.css

@@ -2,21 +2,21 @@
 }@media (min-width: 768px) {
 }.close {
   float: right;
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
 }[dir="rtl"] .close {
   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 {
   outline: none;
@@ -24,6 +24,7 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }.close:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }button.close {
   padding: 0;
@@ -42,11 +43,13 @@
   z-index: 1060;
   width: 276px;
   padding: 18px 24px;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--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: left;
   -webkit-text-decoration: none;
@@ -57,9 +60,11 @@
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
+  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);
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -323,11 +328,14 @@
 }.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);
   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%;
@@ -339,34 +347,37 @@
 }.popover-title + p,
 .popover-title + ul:not(.list-unstyled),
 .popover-title + ol:not(.list-unstyled) {
+  margin-top: 8px;
   margin-top: var(--size-8);
 }.popover-content {
   padding: 0;
+  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);
 }.popover-content > :last-child {
   margin-bottom: 0;
 }.popover-close {
   float: right;
+  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
 }[dir="rtl"] .popover-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 {
   outline: none;
@@ -374,6 +385,7 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }.popover-close:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }button.popover-close {
   padding: 0;
@@ -391,11 +403,13 @@
   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;
 }.nav > li > a [data-toggle="popover"] {
@@ -407,6 +421,7 @@
     right: 0 !important;
     left: 0 !important;
     width: 272px;
+    margin: 32px auto !important;
     margin: var(--size-32) auto !important;
   }
   .popover-modal::before {
@@ -466,25 +481,34 @@
   }
 }.popover-promotion {
   text-align: center;
+  padding: 24px;
   padding: var(--size-24);
 }@media (max-width: 576px) {
   .popover-promotion {
     width: auto !important;
+    padding: 24px !important;
     padding: var(--size-24) !important;
+    margin: 16px !important;
     margin: var(--size-16) !important;
   }
 }@media (min-width: 566px) and (max-width: 992px) {
   .popover-promotion {
     width: 540px !important;
+    padding: 28px 32px !important;
     padding: 28px var(--size-32) !important;
+    margin: 32px auto !important;
     margin: var(--size-32) auto !important;
   }
 }.popover-promotion .popover-title {
+  font-size: 1rem;
   font-size: var(--font-size-16);
+  line-height: 1.2;
   line-height: var(--line-height-title);
 }@media (min-width: 768px) {
   .popover-promotion .popover-title {
+    font-size: 1.25rem;
     font-size: var(--font-size-20);
+    line-height: 1.2;
     line-height: var(--line-height-title);
   }
 }@media (max-width: 480px) {

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: #2f5711;
   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: #2f5711;
   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: #2f5711;
   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: #a8200d;
   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: #a8200d;
   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: #a8200d;
   stroke: var(--color-sentiment-negative);
 }
 .process-success .process-circle,

package/dist/css/progress-bars.css

@@ -1,8 +1,10 @@
 .progress {
   height: 2px;
+  margin-top: calc((24px - 2px) / 2);
   margin-top: calc((var(--size-24) - 2px) / 2);
+  margin-bottom: calc((24px - 2px) / 2);
   margin-bottom: calc((var(--size-24) - 2px) / 2);
-  background-color: rgba(22,51,0,0.07843);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: calc(2px / 2);
 }
@@ -10,10 +12,13 @@
   float: left;
   width: 0%;
   height: 100%;
+  font-size: 1rem;
   font-size: var(--font-size-16);
+  font-weight: 700;
   font-weight: var(--font-weight-bold);
   color: #fff;
   text-align: right;
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
   transition: width 0.6s ease;
 }
@@ -50,18 +55,22 @@
   border-bottom-right-radius: 2px / 2;
 }
 .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

@@ -1,10 +1,12 @@
 .tw-select .tw-icon {
   display: inline-block;
+  margin-right: 8px;
   margin-right: var(--size-8);
   margin-top: -2px;
   vertical-align: middle;
 }
 [dir="rtl"] .tw-select .tw-icon {
+  margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 0;
   margin-right: initial;
@@ -16,17 +18,19 @@
   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 {
+  margin-right: 8px;
   margin-right: var(--size-8);
 }
 [dir="rtl"] .tw-select .tw-dropdown-item .currency-flag {
+  margin-left: 8px;
   margin-left: var(--size-8);
   margin-right: 0;
   margin-right: initial;
@@ -35,25 +39,31 @@
   white-space: normal;
 }
 .tw-select .dropdown-toggle.btn-input.btn-sm {
+  padding-right: 32px;
   padding-right: var(--size-32);
 }
 [dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-sm {
+  padding-left: 32px;
   padding-left: var(--size-32);
   padding-right: 0;
   padding-right: initial;
 }
 .tw-select .dropdown-toggle.btn-input.btn-md {
+  padding-right: 40px;
   padding-right: var(--size-40);
 }
 [dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-md {
+  padding-left: 40px;
   padding-left: var(--size-40);
   padding-right: 0;
   padding-right: initial;
 }
 .tw-select .dropdown-toggle.btn-input.btn-lg {
+  padding-right: 48px;
   padding-right: var(--size-48);
 }
 [dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-lg {
+  padding-left: 48px;
   padding-left: var(--size-48);
   padding-right: 0;
   padding-right: initial;