@transferwise/neptune-css 0.0.0-experimental-b8acfbb → 0.0.0-experimental-9513a35

package/dist/css/accordion.css

@@ -30,54 +30,86 @@
   transform: rotate(270deg) !important;
 }
 .chevron-color {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 .np-theme-personal .chevron-color {
   color: var(--color-interactive-primary);
 }
-.decision__content {
+.decision {
+  cursor: pointer;
+  margin-block-end: 0 !important;
+  border: 0;
+  align-items: center;
+  transition: background-color ease 350ms;
+  background-color: transparent;
+  display: block;
+}
+.decision:not(.np-option):focus-visible,
+.decision:not(.np-option):has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  outline-offset: var(--ring-outline-offset);
+  --ring-outline-offset: 0;
+}
+.decision__title {
+  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%;
 }
 @supports (hyphenate-limit-chars: 1) {
-  .decision__content {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
+  .decision__title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
   }
   @media (min-width: 840px) {
-    .decision__content {
+    .decision__title {
       hyphenate-limit-chars: 8 3;
     }
   }
   @media (min-width: 1160px) {
-    .decision__content {
+    .decision__title {
       hyphenate-limit-chars: 10 4 3;
     }
   }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .decision__content {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .decision__title {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
   }
   @media (min-width: 1160px) {
-    .decision__content {
+    .decision__title {
       -webkit-hyphenate-limit-before: 4;
     }
   }
-}.decision {
-  cursor: pointer;
-  margin-block-end: 0 !important;
-  border: 0;
-  align-items: center;
-  transition: background-color ease 350ms;
-  background-color: transparent;
-  display: block;
 }
-.decision:not(.np-option):focus-visible,
-.decision:not(.np-option):has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-  --ring-outline-offset: 0;
+.decision__title + p,
+.decision__title + ul:not(.list-unstyled),
+.decision__title + ol:not(.list-unstyled) {
+  margin-block-start: 8px;
+  margin-block-start: 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);
   word-wrap: break-word;
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -115,16 +147,20 @@
   margin-block-end: 0;
 }
 .decision dl {
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .decision .media,
 .decision.media {
   inline-size: 100%;
+  padding-block: 16px;
   padding-block: var(--size-16);
+  padding-inline: 12px;
   padding-inline: var(--size-12);
 }
 .np-theme-personal .decision .media,
 .np-theme-personal .decision.media {
+  padding: 16px;
   padding: var(--size-16);
 }
 .decision .media .media-left,
@@ -133,6 +169,7 @@
 }
 .decision .media .media-body,
 .decision.media .media-body {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @media (min-width: 320.02px) {
@@ -145,13 +182,16 @@
   background-color: rgba(134,167,189,0.07059);
 }
 .decision:not(.disabled):hover .circle-inverse {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .decision:not(.disabled):hover .circle-inverse {
+  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: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .decision:not(.disabled):hover .tw-checkbox-button,
@@ -186,14 +226,17 @@
 }
 /* Alignment */
 .media-right {
+  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .media-left {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
   .media-right,
   .media-left {
+    padding-inline-start: 32px;
     padding-inline-start: var(--size-32);
   }
 }
@@ -218,5 +261,6 @@
   vertical-align: middle;
 }
 .accordion-item.decision:not(.disabled):hover {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }

package/dist/css/alerts.css

@@ -2,15 +2,21 @@
  * DEPRECATED: use <InfoPrompt /> component instead
  */
 .alert {
+  padding: 16px;
   padding: var(--size-16);
   border-radius: 10px;
+  color: #37517e;
   color: var(--color-content-primary);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   min-inline-size: 200px;
+  margin-block-end: 16px;
   margin-block-end: 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 {
@@ -21,19 +27,25 @@
   justify-content: center;
 }
 .np-theme-personal .alert .alert__message .alert__action {
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
 }
 .alert .alert__icon {
+  inline-size: 32px;
   inline-size: var(--size-32);
+  block-size: 32px;
   block-size: var(--size-32);
   border-radius: 50%;
   flex: none;
 }
 .alert .close {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-theme-personal .alert .close {
+  margin-block-start: calc(8px * -1);
   margin-block-start: calc(var(--size-8) * -1);
+  margin-inline-end: calc(8px * -1);
   margin-inline-end: calc(var(--size-8) * -1);
 }
 .alert p,
@@ -41,6 +53,7 @@
   margin-block-end: 0;
 }
 .alert p + p {
+  margin-block-start: 8px;
   margin-block-start: var(--padding-x-small);
 }
 .arrow {
@@ -81,6 +94,7 @@
   inset-block-end: -5px;
 }
 .alert-detach.arrow {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .form-group .alert {
@@ -88,6 +102,7 @@
   padding-inline: 16px;
   margin-block-start: -2px;
   border-style: solid;
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
   border-block-width: 0 1px;
   border-inline-width: 1px;
@@ -135,7 +150,9 @@
 .form-group .checkbox ~ .alert,
 .form-group .alert-detach {
   border-width: 0;
+  margin-block-start: 12px;
   margin-block-start: var(--size-12);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .form-group .alert-focus,
@@ -147,7 +164,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,
@@ -162,6 +181,7 @@
 .alert-positive .alert-link,
 .alert-success .icon,
 .alert-positive .icon {
+  color: #008026;
   color: var(--color-content-positive);
 }
 .alert-success a:hover,
@@ -176,6 +196,7 @@
 .alert-positive .close:hover,
 .alert-success .close:focus,
 .alert-positive .close:focus {
+  color: #006d13;
   color: var(--color-content-positive-hover);
 }
 .bg-primary .alert-success,
@@ -213,7 +234,9 @@
 }
 .alert-info,
 .alert-neutral {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .alert-info a,
@@ -228,6 +251,7 @@
 .alert-neutral .alert-link,
 .alert-info .icon,
 .alert-neutral .icon {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .alert-info a:hover,
@@ -242,6 +266,7 @@
 .alert-neutral .close:hover,
 .alert-info .close:focus,
 .alert-neutral .close:focus {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .bg-primary .alert-info,
@@ -278,7 +303,9 @@
   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,
@@ -287,6 +314,7 @@
 .alert-warning .close,
 .alert-warning .alert-link,
 .alert-warning .icon {
+  color: #9a6500;
   color: var(--color-content-warning);
 }
 .alert-warning a:hover,
@@ -295,6 +323,7 @@
 .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 {
@@ -319,7 +348,9 @@
 }
 .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,
@@ -334,6 +365,7 @@
 .alert-negative .alert-link,
 .alert-danger .icon,
 .alert-negative .icon {
+  color: #cf2929;
   color: var(--color-content-negative);
 }
 .alert-danger a:hover,
@@ -348,6 +380,7 @@
 .alert-negative .close:hover,
 .alert-danger .close:focus,
 .alert-negative .close:focus {
+  color: #b80419;
   color: var(--color-content-negative-hover);
 }
 .bg-primary .alert-danger,
@@ -387,6 +420,7 @@
 input:focus ~ .alert-focus,
 .btn:focus ~ .alert-focus {
   display: block;
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .focus .alert-focus,
@@ -421,11 +455,13 @@ input:focus ~ .alert-focus,
   display: none !important;
 }
 .np-theme-personal .alert {
+  padding: 16px;
   padding: var(--size-16);
   flex-direction: row;
 }
 .np-theme-personal .alert .alert__message {
   padding-block-start: 0;
+  padding-inline-start: 16px;
   padding-inline-start: var(--padding-small);
 }
 .np-theme-personal .alert-success,
@@ -442,7 +478,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(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-theme-personal .alert-success a,
@@ -529,6 +567,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: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-theme-personal .alert-success a:hover,

package/dist/css/background.css

@@ -14,6 +14,7 @@
   color: #daffc0;
 }
 .bg--light {
+  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,24 +1,33 @@
 .badge {
   display: inline-block;
+  min-inline-size: 16px;
   min-inline-size: var(--size-16);
   padding-block: 5px;
+  padding-inline: 8px;
   padding-inline: var(--size-8);
   font-size: 10px;
-  font-weight: var(--wds-font-weight-title-body);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
   color: #fff;
-  line-height: var(--wds-line-height-title-section);
+  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);
   inset-block-start: -1px;
   position: relative;
 }
 .np-theme-personal .badge {
   display: inline-block;
+  min-inline-size: 16px;
   min-inline-size: var(--size-16);
+  padding-block: 4px;
   padding-block: var(--size-4);
+  padding-inline: 8px;
   padding-inline: var(--size-8);
   color: #fff;
   vertical-align: middle;
@@ -26,7 +35,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;
   inset-block-start: 0;
@@ -61,6 +72,7 @@ a.badge:focus {
   margin-inline-start: 19px;
 }
 .badge-success {
+  background: #2ead4b;
   background: var(--color-interactive-positive);
 }
 .np-theme-personal .badge-success {

package/dist/css/breadcrumbs.css

@@ -1,6 +1,7 @@
 .breadcrumb {
   padding-block: 8px;
   padding-inline: 0;
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
   list-style: none;
   background-color: none;
@@ -16,5 +17,6 @@
   color: #fff;
 }
 .breadcrumb > .active {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/dist/css/button-groups.css

@@ -1,30 +1,4 @@
-.btn-group .secondary {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .btn-group .secondary {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .btn-group .secondary {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .btn-group .secondary {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .btn-group .secondary {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .btn-group .secondary {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.btn-group,
+.btn-group,
 .btn-group-vertical {
   position: relative;
   display: inline-block;
@@ -284,9 +258,11 @@
   pointer-events: none;
 }
 .btn-group .btn + .btn-success {
+  border-inline-start: 1px solid #008026;
   border-inline-start: 1px solid var(--color-content-positive);
 }
 .btn-group .btn + .btn-primary {
+  border-inline-start: 1px solid #0097c7;
   border-inline-start: 1px solid var(--color-content-accent);
 }
 .btn-group.btn-block {
@@ -358,10 +334,10 @@
 .btn-group .btn-input + .dropdown-menu > li > a {
   white-space: normal;
 }
-.btn-group .body-2,
 .btn-group .np-text-body-default,
-.btn-group .wds-text-body-default,
+.btn-group .body-2,
 .btn-group .small {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @media (min-height: 592px) {
@@ -370,7 +346,14 @@
   }
 }
 .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);
   word-wrap: break-word;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 @supports (hyphenate-limit-chars: 1) {