@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee

package/src/tile/Tile.css

@@ -5,28 +5,31 @@
   width: 100%;
 }
 .np-theme-personal .np-tile {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
+  background-color: #ffffff;
   background-color: var(--color-contrast);
 }
 .np-tile.decision {
   margin-top: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
+  border: 1px solid rgba(14,15,12,0.12157);
   border: 1px solid var(--color-border-neutral);
 }
 .np-theme-personal .np-tile.decision {
   border: none;
 }
 .np-theme-personal .np-tile.decision:hover {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .np-theme-personal .np-tile.decision:active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-theme-personal .np-tile.decision .np-text-body-default {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-tile.np-decision__tile--fixed-width {
@@ -36,7 +39,7 @@
   width: 100%;
 }
 .np-tile__description {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   margin-top: 12px;
   margin-top: var(--size-12);
@@ -57,7 +60,7 @@
   background-color: var(--color-background-screen);
 }
 .np-tile__description {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   font-weight: 400;
   font-weight: var(--font-weight-regular);

package/src/typeahead/Typeahead.css

@@ -162,10 +162,11 @@
   }
 }
 .np-theme-personal .typeahead .input-group:not(.disabled):not(:disabled):not(.input-group--has-error):focus-within .tw-icon-search {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .typeahead .tw-icon-search {
-  color: #c9cbce;
+  color: #868685;
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {

package/src/typeahead/typeaheadOption/TypeaheadOption.css

@@ -1,8 +1,5 @@
-.typeahead__option.tw-dropdown-item .dropdown-item:active strong {
-  color: #ffffff;
-}
 .typeahead__option.tw-dropdown-item--focused {
-  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px #868685;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   border-radius: 10px;
   border-radius: var(--radius-small);

package/src/typeahead/typeaheadOption/TypeaheadOption.less

@@ -1,12 +1,6 @@
 @import (reference) "../../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
 
 .typeahead__option.tw-dropdown-item {
-  .dropdown-item:active {
-    strong {
-      color: @color-navy-content-primary;
-    }
-  }
-
   &--focused {
     box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
     border-radius: var(--radius-small);

package/src/upload/Upload.css

@@ -22,7 +22,7 @@
 .upload-error-message {
   margin-top: 24px;
   margin-top: var(--padding-medium);
-  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid rgba(14,15,12,0.12157);
   border-top: 1px solid var(--color-border-neutral);
   text-align: start;
 }

package/src/uploadInput/uploadButton/UploadButton.css

@@ -13,6 +13,7 @@
   cursor: pointer;
 }
 .np-upload-input__upload-button .np-upload-input__title {
+  color: #163300;
   color: var(--color-content-link);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -25,6 +26,7 @@
 .np-upload-input__upload-button .np-upload-input__icon {
   padding-right: 16px;
   padding-right: var(--size-16);
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-upload-input__upload-button.is-dropping .np-upload-input__icon,
@@ -59,7 +61,7 @@
   display: block;
   position: absolute;
   height: 1px;
-  background-color: rgba(0,0,0,0.10196);
+  background-color: rgba(14,15,12,0.12157);
   background-color: var(--color-border-neutral);
   content: " ";
   left: 16px;
@@ -76,7 +78,7 @@
 .np-upload-input__upload-button--enabled.is-dropping,
 .np-upload-input__upload-button--enabled:hover,
 .np-upload-input__upload-button--enabled:active {
-  background: rgba(134,167,189,0.10196);
+  background: rgba(22,51,0,0.07843);
   background: var(--color-background-neutral);
 }
 .np-upload-input__upload-button--enabled.is-dropping:before,

package/src/uploadInput/uploadItem/UploadItem.css

@@ -24,7 +24,7 @@
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
   top: 0;
-  background: rgba(0,0,0,0.10196);
+  background: rgba(14,15,12,0.12157);
   background: var(--color-border-neutral);
 }
 .np-upload-input__item .np-upload-input__item-content {
@@ -43,7 +43,7 @@
   margin: 0;
   -moz-text-align-last: left;
        text-align-last: left;
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
@@ -87,8 +87,9 @@
   padding: 0 var(--size-4);
   border-radius: 50%;
   border: 0;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
+  color: #163300;
   color: var(--color-interactive-primary);
   transition: color, background-color 0.15s ease-in-out;
   outline-offset: 0;
@@ -107,10 +108,13 @@
   right: var(--clickAreaTopRightOffset);
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
+  color: #ffffff !important;
   color: var(--color-contrast-overlay) !important;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-upload-input__item.is-interactive {
@@ -136,7 +140,7 @@
 }
 .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
 .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {