@transferwise/neptune-css 0.0.0-experimental-526a2be → 0.0.0-experimental-26ff56b

package/dist/css/panels.css

@@ -7,7 +7,6 @@
 }
 .panel-body {
   padding: 16px;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .panel-heading {
@@ -20,8 +19,7 @@
 .panel-title {
   margin-block-start: 0;
   margin-block-end: 0;
-  line-height: calc(1.2 + 8px);
-  line-height: calc(var(--line-height-title) + 8px);
+  line-height: calc(var(--wds-line-height-title-section) + 8px);
 }
 .panel-title > a {
   -webkit-text-decoration: none;
@@ -71,8 +69,7 @@
 }
 @media (min-width: 840px) {
   .panel-title {
-    line-height: calc(1.2 * 2);
-    line-height: calc(var(--line-height-title) * 2);
+    line-height: calc(var(--wds-line-height-title-section) * 2);
   }
   .panel-heading > .btn-sm {
     margin-block-start: 8px;
@@ -270,7 +267,6 @@
   }
 }
 .panel-group {
-  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .panel-group .panel {

package/dist/css/popovers.css

@@ -1,6 +1,37 @@
-.close {
+.popover,
+.popover-content {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .popover,
+  .popover-content {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover,
+    .popover-content {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover,
+    .popover-content {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover,
+  .popover-content {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover,
+    .popover-content {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.close {
   float: inline-end;
-  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -9,7 +40,6 @@
   color: var(--color-interactive-primary);
 }
 .close:hover {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -26,7 +56,6 @@
   outline-offset: var(--ring-outline-offset);
 }
 .close:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.close {
@@ -49,13 +78,11 @@ button.close {
   inline-size: 276px;
   padding-block: 18px;
   padding-inline: 24px;
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
-  font-family: var(--font-family-regular);
+  font-family: var(--wds-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: start;
   -webkit-text-decoration: none;
@@ -66,14 +93,7 @@ button.close {
   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);
   word-wrap: break-word;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
   border-radius: 3px;
@@ -258,21 +278,8 @@ button.close {
   margin-inline: 0;
 }
 .popover-title {
-  padding: 0;
   margin: 0;
-  color: #37517e;
-  color: var(--color-content-primary);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
-  word-wrap: break-word;
-  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%;
-  background-color: #ffffff;
+  padding: 0;
   background-color: var(--color-background-screen);
   border-block-end: 0;
   border-start-start-radius: 2px;
@@ -281,50 +288,9 @@ button.close {
   border-end-start-radius: 0;
   color: var(--color-content-primary) !important;
 }
-@supports (hyphenate-limit-chars: 1) {
-  .popover-title {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .popover-title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .popover-title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .popover-title {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .popover-title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.popover-title + p,
-.popover-title + ul:not(.list-unstyled),
-.popover-title + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: 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);
   word-wrap: break-word;
-  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -360,7 +326,6 @@ button.close {
 }
 .popover-close {
   float: inline-end;
-  color: #0097c7;
   color: var(--color-content-accent);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -369,7 +334,6 @@ button.close {
   color: var(--color-interactive-primary);
 }
 .popover-close:hover {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -386,7 +350,6 @@ button.close {
   outline-offset: var(--ring-outline-offset);
 }
 .popover-close:active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 button.popover-close {
@@ -407,14 +370,12 @@ button.popover-close {
   font-weight: inherit !important;
   -webkit-text-decoration: none !important;
   text-decoration: none !important;
-  border-block-end: 1px dotted #0097c7 !important;
   border-block-end: 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;
 }
@@ -428,7 +389,6 @@ button.popover-close {
     inset-inline-end: 0 !important;
     inset-inline-start: 0 !important;
     inline-size: 272px;
-    margin-block: 32px !important;
     margin-block: var(--size-32) !important;
     margin-inline: auto;
   }
@@ -468,7 +428,6 @@ button.popover-close {
   block-size: 100vh;
   block-size: 100dvh;
   cursor: pointer;
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
   opacity: 0.7;
   animation: cover-fade-in 0.35s 0s linear forwards;
@@ -480,15 +439,12 @@ button.popover-close {
 }
 .popover-promotion {
   text-align: center;
-  padding: 24px;
   padding: var(--size-24);
 }
 @media (max-width: 599.98px) {
   .popover-promotion {
     inline-size: auto !important;
-    padding: 24px !important;
     padding: var(--size-24) !important;
-    margin: 16px !important;
     margin: var(--size-16) !important;
   }
 }
@@ -496,25 +452,19 @@ button.popover-close {
   .popover-promotion {
     inline-size: 540px !important;
     padding-block: 28px !important;
-    padding-inline: 32px;
     padding-inline: var(--size-32);
-    margin-block: 32px !important;
     margin-block: var(--size-32) !important;
     margin-inline: auto;
   }
 }
 .popover-promotion .popover-title {
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-font-size-body-large);
 }
 @media (min-width: 840px) {
   .popover-promotion .popover-title {
-    font-size: 1.25rem;
-    font-size: var(--font-size-20);
-    line-height: 1.2;
-    line-height: var(--line-height-title);
+    font-size: var(--wds-font-size-title-body);
+    line-height: var(--wds-font-size-title-body);
   }
 }
 @media (max-width: 320px) {

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,7 +33,6 @@
   animation-iteration-count: infinite;
 }
 .np-theme-personal .process-circle {
-  stroke: #37517e;
   stroke: var(--color-content-primary);
 }
 .np-theme-personal--forest-green .process-circle,
@@ -43,7 +41,6 @@
   stroke: var(--color-interactive-primary);
 }
 .process-inverse .process-circle {
-  stroke: #ffffff;
   stroke: var(--color-background-screen);
 }
 .process-icon-container {
@@ -66,7 +63,6 @@
   block-size: 0;
 }
 .process-success .process-icon-horizontal {
-  background-color: #008026;
   background-color: var(--color-content-positive);
   inset-block-end: 0;
   inset-inline-start: 0;
@@ -75,7 +71,6 @@
   background-color: var(--color-sentiment-positive);
 }
 .process-success .process-icon-vertical {
-  background-color: #008026;
   background-color: var(--color-content-positive);
   inset-block-start: 100%;
   inset-inline-end: 0;
@@ -84,14 +79,12 @@
   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: var(--color-sentiment-positive);
 }
 .process-danger .process-icon-horizontal {
-  background-color: #cf2929;
   background-color: var(--color-content-negative);
   inset-inline-start: 0;
 }
@@ -99,7 +92,6 @@
   background-color: var(--color-sentiment-negative);
 }
 .process-danger .process-icon-vertical {
-  background-color: #cf2929;
   background-color: var(--color-content-negative);
   inset-block-start: 0;
 }
@@ -107,7 +99,6 @@
   background-color: var(--color-sentiment-negative);
 }
 .process-danger .process-circle {
-  stroke: #cf2929;
   stroke: var(--color-content-negative);
 }
 .np-theme-personal .process-danger .process-circle {

package/dist/css/progress-bars.css

@@ -2,16 +2,11 @@
   --progress-bar-height: 4px;
   --progress-bar-border-width: 4px;
   --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
-  block-size: 4px;
   block-size: var(--progress-bar-height);
   overflow: hidden;
-  margin-block-start: calc((24px - 4px) / 2);
   margin-block-start: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  margin-block-end: calc((24px - 4px) / 2);
   margin-block-end: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  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));
 }
 .progress-bar {
@@ -20,15 +15,11 @@
   inset-block-start: calc(-1 * var(--progress-bar-border-width));
   inset-inline-start: calc(-1 * var(--progress-bar-start-shift));
   block-size: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
+  font-size: var(--wds-font-size-body-large);
+  font-weight: var(--wds-font-weight-body-bold);
   color: #fff;
   text-align: end;
-  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);
   border-radius: inherit;
 }
@@ -37,22 +28,17 @@
   inset-inline-start: 0;
 }
 .progress-bar-primary {
-  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,9 +11,7 @@
   outline: none;
 }
 .focus-ring:focus-visible {
-  outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);
 }
 details:focus,
@@ -38,9 +36,7 @@ dialog:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
-  outline: #37517e solid 2px;
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 2px;
   outline-offset: var(--ring-outline-offset);
 }
 .ring-offset-0 {

package/dist/css/select.css

@@ -1,6 +1,5 @@
 .tw-select .tw-icon {
   display: inline-block;
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
   margin-block-start: -2px;
   vertical-align: middle;
@@ -12,31 +11,24 @@
   border-block-end-style: solid;
   border-block-end-width: 1px;
   /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  border-block-end-color: rgba(0,0,0,0.10196);
-  border-block-end-color: #0000001a;
   border-block-end-color: var(--color-border-neutral);
 }
 .tw-select .tw-dropdown-item--focused {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .tw-select .tw-dropdown-item .currency-flag {
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
 }
 .tw-select .tw-dropdown-item > a {
   white-space: normal;
 }
 .tw-select .dropdown-toggle.btn-input.btn-sm {
-  padding-inline-end: 32px;
   padding-inline-end: var(--size-32);
 }
 .tw-select .dropdown-toggle.btn-input.btn-md {
-  padding-inline-end: 40px;
   padding-inline-end: var(--size-40);
 }
 .tw-select .dropdown-toggle.btn-input.btn-lg {
-  padding-inline-end: 48px;
   padding-inline-end: var(--size-48);
 }
 .tw-select .dropdown-toggle tw-chevron-down-icon > span {