@transferwise/neptune-css 0.0.0-experimental-72f7598 → 0.0.0-experimental-00df4a6

package/dist/css/droppable.css

@@ -12,7 +12,7 @@
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: 3px;
-  overflow: hidden;
+  overflow: auto;
   transition: border-color 0.15s linear;
 }.droppable:hover {
   border-color: #b5b7ba;
@@ -50,7 +50,10 @@
   margin-top: 16px !important;
   margin-top: var(--padding-small) !important;
 }.np-theme-personal .droppable-area.droppable-negative {
-  border-color: var(--color-sentiment-negative) !important;
+  border: 2px solid var(--color-sentiment-negative) !important;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  min-height: 315px;
 }.np-theme-personal .droppable-area.droppable-complete.droppable-dropping .droppable-card:first-child {
   opacity: 0;
 }.np-theme-personal .droppable-area.droppable-complete .thumbnail {
@@ -127,26 +130,23 @@
 }.droppable-dropping .droppable-dropping-card {
   display: flex;
 }.droppable-processing-card {
+  align-items: baseline;
   display: none;
 }.droppable-processing-card .droppable-card-content {
   opacity: 1;
 }.droppable-processing .droppable-processing-card {
   display: flex;
-  transform: translateX(0);
+  align-items: baseline;
 }.droppable-processing .droppable-processing-card .droppable-card-content {
   opacity: 1;
 }.droppable-complete .droppable-processing-card {
   display: flex;
-  transform: translateX(-100%);
 }.droppable-complete .droppable-processing-card .droppable-card-content {
   opacity: 0;
 }.droppable-complete-card {
   display: flex;
-  transform: translateX(100%);
 }.droppable-complete-card .droppable-card-content {
   opacity: 0;
-}.droppable-complete .droppable-complete-card {
-  transform: translateX(0);
 }.droppable-complete .droppable-complete-card .droppable-card-content {
   opacity: 1;
 }.droppable-processing .droppable-default-card .droppable-card-content,
@@ -161,7 +161,9 @@
     display: none;
   }
   .droppable-desktop {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
   }
 }.droppable-active {
   border-style: solid;

package/dist/css/input-groups.css

@@ -683,8 +683,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-success .radio-inline label,
 .np-theme-personal .has-success .checkbox-inline label,
 .np-theme-personal .has-success .input-group-addon {
-  color: #37517e !important;
-  color: var(--color-content-primary) !important;
+  color: var(--color-sentiment-positive) !important;
   border-color: var(--color-sentiment-positive) !important;
 }
 .np-theme-personal .has-success .form-control,
@@ -725,8 +724,7 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-positive) !important;
 }
 .np-theme-personal .has-success .form-control-feedback {
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-positive);
 }
 .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled) {
@@ -1061,8 +1059,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-warning .radio-inline label,
 .np-theme-personal .has-warning .checkbox-inline label,
 .np-theme-personal .has-warning .input-group-addon {
-  color: #37517e !important;
-  color: var(--color-content-primary) !important;
+  color: var(--color-sentiment-warning) !important;
   border-color: var(--color-sentiment-warning) !important;
 }
 .np-theme-personal .has-warning .form-control,
@@ -1103,8 +1100,7 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-warning) !important;
 }
 .np-theme-personal .has-warning .form-control-feedback {
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-warning);
 }
 .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled) {
@@ -1250,8 +1246,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-error .radio-inline label,
 .np-theme-personal .has-error .checkbox-inline label,
 .np-theme-personal .has-error .input-group-addon {
-  color: #37517e !important;
-  color: var(--color-content-primary) !important;
+  color: var(--color-sentiment-negative) !important;
   border-color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .has-error .form-control,
@@ -1292,8 +1287,7 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative-hover) !important;
 }
 .np-theme-personal .has-error .form-control-feedback {
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-negative);
 }
 .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled) {
@@ -2233,6 +2227,15 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
 .np-theme-personal .form-group .np-upload-input label {
   margin-bottom: 0;
 }
+.np-theme-personal .form-group:focus-within .control-label,
+.np-theme-personal .form-group:focus-within > label,
+.np-theme-personal .has-warning .control-label,
+.np-theme-personal .has-warning label,
+.np-theme-personal .has-success .control-label,
+.np-theme-personal .has-success label {
+  color: #5d7079 !important;
+  color: var(--color-content-secondary) !important;
+}
 .np-theme-personal .form-group .alert:before,
 .np-theme-personal .error-messages:before {
   content: none;

package/dist/css/neptune-addons.css

@@ -1083,7 +1083,6 @@ html:not([dir="rtl"]) .p-x-5 {
   padding-bottom: 40px !important;
   padding-bottom: var(--size-40) !important;
 }
-.gap-y-8,
 .gap-y-1 {
   row-gap: 8px;
   row-gap: var(--size-8);

package/dist/css/neptune-core.css

@@ -929,6 +929,8 @@ h6,
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-2,
 .body-3,
+.label,
+.control-label,
 .small,
 .tiny,
 body,
@@ -944,8 +946,6 @@ small,
 /* DEPRECATED: use .np-text-body-default-bold instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-2,
-.label,
-.control-label,
 .np-text-body-default-bold {
   font-size: 0.875rem;
   font-size: var(--font-size-14);

package/dist/css/neptune.css

@@ -2546,6 +2546,8 @@ h6,
 
 .body-2,
 .body-3,
+.label,
+.control-label,
 .small,
 .tiny,
 body,
@@ -2564,8 +2566,6 @@ small,
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 
 .control-2,
-.label,
-.control-label,
 .np-text-body-default-bold {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
@@ -5088,7 +5088,6 @@ html:not([dir="rtl"]) .p-x-5 {
   padding-bottom: var(--size-40) !important;
 }
 
-.gap-y-8,
 .gap-y-1 {
   row-gap: 8px;
   row-gap: var(--size-8);
@@ -10047,8 +10046,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-success .radio-inline label,
 .np-theme-personal .has-success .checkbox-inline label,
 .np-theme-personal .has-success .input-group-addon {
-  color: #37517e !important;
-  color: var(--color-content-primary) !important;
+  color: var(--color-sentiment-positive) !important;
   border-color: var(--color-sentiment-positive) !important;
 }
 
@@ -10093,8 +10091,7 @@ select[multiple].input-lg {
 }
 
 .np-theme-personal .has-success .form-control-feedback {
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-positive);
 }
 
 .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled),
@@ -10465,8 +10462,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-warning .radio-inline label,
 .np-theme-personal .has-warning .checkbox-inline label,
 .np-theme-personal .has-warning .input-group-addon {
-  color: #37517e !important;
-  color: var(--color-content-primary) !important;
+  color: var(--color-sentiment-warning) !important;
   border-color: var(--color-sentiment-warning) !important;
 }
 
@@ -10511,8 +10507,7 @@ select[multiple].input-lg {
 }
 
 .np-theme-personal .has-warning .form-control-feedback {
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-warning);
 }
 
 .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled),
@@ -10674,8 +10669,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-error .radio-inline label,
 .np-theme-personal .has-error .checkbox-inline label,
 .np-theme-personal .has-error .input-group-addon {
-  color: #37517e !important;
-  color: var(--color-content-primary) !important;
+  color: var(--color-sentiment-negative) !important;
   border-color: var(--color-sentiment-negative) !important;
 }
 
@@ -10720,8 +10714,7 @@ select[multiple].input-lg {
 }
 
 .np-theme-personal .has-error .form-control-feedback {
-  color: #37517e;
-  color: var(--color-content-primary);
+  color: var(--color-sentiment-negative);
 }
 
 .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled),
@@ -11793,6 +11786,16 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
   margin-bottom: 0;
 }
 
+.np-theme-personal .form-group:focus-within .control-label,
+.np-theme-personal .form-group:focus-within > label,
+.np-theme-personal .has-warning .control-label,
+.np-theme-personal .has-warning label,
+.np-theme-personal .has-success .control-label,
+.np-theme-personal .has-success label {
+  color: #5d7079 !important;
+  color: var(--color-content-secondary) !important;
+}
+
 .np-theme-personal .form-group .alert:before,
 .np-theme-personal .error-messages:before {
   content: none;
@@ -13570,7 +13573,7 @@ li > a > .currency-flag:first-child {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: 3px;
-  overflow: hidden;
+  overflow: auto;
   transition: border-color 0.15s linear;
 }
 
@@ -13630,7 +13633,10 @@ li > a > .currency-flag:first-child {
 }
 
 .np-theme-personal .droppable-area.droppable-negative {
-  border-color: var(--color-sentiment-negative) !important;
+  border: 2px solid var(--color-sentiment-negative) !important;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  min-height: 315px;
 }
 
 .np-theme-personal .droppable-area.droppable-complete.droppable-dropping .droppable-card:first-child {
@@ -13749,6 +13755,7 @@ li > a > .currency-flag:first-child {
 }
 
 .droppable-processing-card {
+  align-items: baseline;
   display: none;
 }
 
@@ -13758,7 +13765,7 @@ li > a > .currency-flag:first-child {
 
 .droppable-processing .droppable-processing-card {
   display: flex;
-  transform: translateX(0);
+  align-items: baseline;
 }
 
 .droppable-processing .droppable-processing-card .droppable-card-content {
@@ -13767,7 +13774,6 @@ li > a > .currency-flag:first-child {
 
 .droppable-complete .droppable-processing-card {
   display: flex;
-  transform: translateX(-100%);
 }
 
 .droppable-complete .droppable-processing-card .droppable-card-content {
@@ -13776,17 +13782,12 @@ li > a > .currency-flag:first-child {
 
 .droppable-complete-card {
   display: flex;
-  transform: translateX(100%);
 }
 
 .droppable-complete-card .droppable-card-content {
   opacity: 0;
 }
 
-.droppable-complete .droppable-complete-card {
-  transform: translateX(0);
-}
-
 .droppable-complete .droppable-complete-card .droppable-card-content {
   opacity: 1;
 }
@@ -13811,7 +13812,9 @@ li > a > .currency-flag:first-child {
     display: none;
   }
   .droppable-desktop {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-72f7598",
+  "version": "0.0.0-experimental-00df4a6",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/addons/_spacing-utilities.less

@@ -10,8 +10,6 @@
 .spacing-vertical(4, var(--size-32));
 .spacing-vertical(5, var(--size-40));
 
-.gap-y-8,
-// DEPRECATED: Use .gap-y-8 instead
 .gap-y-1 {
   row-gap: var(--size-8);
 }

package/src/less/core/_typography.less

@@ -113,7 +113,7 @@ h6,
 
 /* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-2, .body-3, .small, .tiny,
+.body-2, .body-3, .label, .control-label, .small, .tiny,
 body, small,
 .np-text-body-default {
   font-size: var(--font-size-14);
@@ -125,10 +125,6 @@ body, small,
 /* DEPRECATED: use .np-text-body-default-bold instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-2,
-
-// DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
-.label, .control-label,
-
 .np-text-body-default-bold {
   font-size: var(--font-size-14);
   line-height: 155%;

package/src/less/droppable.less

@@ -9,7 +9,7 @@
   text-align: center;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: @border-radius-base;
-  overflow: hidden;
+  overflow: auto;
   transition: border-color 0.15s linear;
 
   &:hover {
@@ -52,7 +52,9 @@
       }
     }
     &.droppable-negative {
-      border-color: var(--color-sentiment-negative) !important;
+      border: 2px solid var(--color-sentiment-negative) !important;
+      background-color: var(--color-background-screen);
+      min-height: 315px;
     }
     &.droppable-complete {
       &.droppable-dropping .droppable-card:first-child {
@@ -160,6 +162,7 @@
 
 // Processing hidden by default
 .droppable-processing-card {
+  align-items: baseline;
   display: none;
 
   .droppable-card-content {
@@ -171,7 +174,7 @@
 
 .droppable-processing .droppable-processing-card {
   display: flex;
-  transform: translateX(0);
+  align-items: baseline;
 
   .droppable-card-content {
     opacity: 1;
@@ -181,7 +184,6 @@
 .droppable-complete {
   .droppable-processing-card {
     display: flex;
-    transform: translateX(-100%);
 
     .droppable-card-content {
       opacity: 0;
@@ -192,7 +194,6 @@
 // Completed card translated out and hidden by default
 .droppable-complete-card {
   display: flex;
-  transform: translateX(100%);
 
   .droppable-card-content {
     opacity: 0;
@@ -202,7 +203,6 @@
 // stylelint-disable-next-line no-duplicate-selectors
 .droppable-complete {
   .droppable-complete-card {
-    transform: translateX(0);
 
     .droppable-card-content {
       opacity: 1;
@@ -235,7 +235,9 @@
   }
 
   .droppable-desktop {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
   }
 }
 

package/src/less/forms/bootstrap-forms.less

@@ -240,7 +240,6 @@ input[type='search'] {
   }
 
   &:focus-within {
-    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
     .control-label,
     > label {
       color: var(--color-content-accent);
@@ -451,7 +450,6 @@ input[type="password"] {
     line-height: @input-line-height-large;
   }
 
-  // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
   .control-label {
     position: absolute;
     top: 12px;
@@ -506,7 +504,6 @@ input[type="password"] {
 // Focus state
 .focus,
 .has-focus {
-  // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
   .control-label {
     color: var(--color-content-accent-active);
   }
@@ -566,7 +563,7 @@ input[type="password"] {
 
   .np-theme-personal & {
     .form-control-validation(
-      var(--color-content-primary);
+      var(--color-sentiment-positive);
       var(--color-sentiment-positive);
       var(--color-sentiment-positive);
     );
@@ -598,7 +595,7 @@ input[type="password"] {
 
   .np-theme-personal & {
     .form-control-validation(
-      var(--color-content-primary);
+      var(--color-sentiment-warning);
       var(--color-sentiment-warning);
       var(--color-sentiment-warning);
     );
@@ -614,7 +611,7 @@ input[type="password"] {
 
   .np-theme-personal & {
     .form-control-validation(
-      var(--color-content-primary);
+      var(--color-sentiment-negative);
       var(--color-sentiment-negative);
       var(--color-sentiment-negative-hover);
     );
@@ -681,7 +678,6 @@ input[type="password"] {
       width: 100%;
     }
 
-    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
     .control-label {
       margin-bottom: 0;
       vertical-align: calc(-2px);
@@ -746,7 +742,6 @@ input[type="password"] {
   // Reset spacing and right align labels, but scope to media queries so that
   // labels on narrow viewports stack the same as a default form example.
   @media (min-width: @screen-sm-min) {
-    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
     .control-label {
       .text-align(right);
 
@@ -769,7 +764,6 @@ input[type="password"] {
   // inputs and labels within a `.form-group`.
   .form-group-lg {
     @media (min-width: @screen-sm-min) {
-      // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
       .control-label {
         padding-top: 17px;
         font-size: var(--font-size-20);
@@ -779,7 +773,6 @@ input[type="password"] {
 
   .form-group-sm {
     @media (min-width: @screen-sm-min) {
-      // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
       .control-label {
         padding-top: 8px;
         font-size: var(--font-size-14);
@@ -1173,6 +1166,15 @@ input[type="password"] {
       margin-bottom: 0;
   }
 
+  .form-group:focus-within .control-label,
+  .form-group:focus-within > label,
+  .has-warning .control-label,
+  .has-warning label,
+  .has-success .control-label,
+  .has-success label {
+    color: var(--color-content-secondary) !important;
+  }
+
   .form-group .alert:before,
   .error-messages:before {
     content: none;

package/src/less/mixins/_forms.less

@@ -5,10 +5,8 @@
 .form-control-validation(@text-color; @border-color; @border-hover;) {
   border-color: @border-color !important;
 
-  // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
-  .control-label,
-
   // Color the label and help text
+  .control-label,
   .radio,
   .checkbox,
   .radio-inline,

package/src/less/navbar.less

@@ -53,7 +53,6 @@
       width: 100%;
     }
 
-    // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
     .control-label {
       margin-bottom: 0;
       vertical-align: calc(-2px);