@transferwise/neptune-css 14.12.0 → 14.13.0

package/dist/css/input-groups.css

@@ -683,7 +683,8 @@ 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: var(--color-sentiment-positive) !important;
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-positive) !important;
 }
 .np-theme-personal .has-success .form-control,
@@ -724,7 +725,8 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-positive) !important;
 }
 .np-theme-personal .has-success .form-control-feedback {
-  color: var(--color-sentiment-positive);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled) {
@@ -1059,7 +1061,8 @@ 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: var(--color-sentiment-warning) !important;
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-warning) !important;
 }
 .np-theme-personal .has-warning .form-control,
@@ -1100,7 +1103,8 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-warning) !important;
 }
 .np-theme-personal .has-warning .form-control-feedback {
-  color: var(--color-sentiment-warning);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled) {
@@ -1246,7 +1250,8 @@ 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: var(--color-sentiment-negative) !important;
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .has-error .form-control,
@@ -1287,7 +1292,8 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative-hover) !important;
 }
 .np-theme-personal .has-error .form-control-feedback {
-  color: var(--color-sentiment-negative);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled) {
@@ -2227,19 +2233,6 @@ 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 .has-error .control-label,
-.np-theme-personal .has-error label {
-  color: var(--color-sentiment-negative) !important;
-}
 .np-theme-personal .form-group .alert:before,
 .np-theme-personal .error-messages:before {
   content: none;

package/dist/css/neptune-core.css

@@ -929,8 +929,6 @@ h6,
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-2,
 .body-3,
-.label,
-.control-label,
 .small,
 .tiny,
 body,
@@ -946,6 +944,8 @@ 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,8 +2546,6 @@ h6,
 
 .body-2,
 .body-3,
-.label,
-.control-label,
 .small,
 .tiny,
 body,
@@ -2566,6 +2564,8 @@ 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);
@@ -10046,7 +10046,8 @@ 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: var(--color-sentiment-positive) !important;
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-positive) !important;
 }
 
@@ -10091,7 +10092,8 @@ select[multiple].input-lg {
 }
 
 .np-theme-personal .has-success .form-control-feedback {
-  color: var(--color-sentiment-positive);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 
 .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled),
@@ -10462,7 +10464,8 @@ 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: var(--color-sentiment-warning) !important;
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-warning) !important;
 }
 
@@ -10507,7 +10510,8 @@ select[multiple].input-lg {
 }
 
 .np-theme-personal .has-warning .form-control-feedback {
-  color: var(--color-sentiment-warning);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 
 .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled),
@@ -10669,7 +10673,8 @@ 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: var(--color-sentiment-negative) !important;
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-negative) !important;
 }
 
@@ -10714,7 +10719,8 @@ select[multiple].input-lg {
 }
 
 .np-theme-personal .has-error .form-control-feedback {
-  color: var(--color-sentiment-negative);
+  color: #37517e;
+  color: var(--color-content-primary);
 }
 
 .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled),
@@ -11786,21 +11792,6 @@ 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 .has-error .control-label,
-.np-theme-personal .has-error label {
-  color: var(--color-sentiment-negative) !important;
-}
-
 .np-theme-personal .form-group .alert:before,
 .np-theme-personal .error-messages:before {
   content: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.12.0",
+  "version": "14.13.0",
   "license": "MIT",
   "repository": {
     "type": "git",

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, .label, .control-label, .small, .tiny,
+.body-2, .body-3, .small, .tiny,
 body, small,
 .np-text-body-default {
   font-size: var(--font-size-14);
@@ -125,6 +125,10 @@ 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/forms/bootstrap-forms.less

@@ -240,6 +240,7 @@ 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);
@@ -263,7 +264,7 @@ input[type='search'] {
   // margin-bottom: (@padding-base-vertical * 1.5);
 
   label {
-    min-height: var(--input-height-base); 
+    min-height: var(--input-height-base);
     margin-bottom: 0;
     cursor: pointer;
   }
@@ -450,6 +451,7 @@ 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;
@@ -504,6 +506,7 @@ 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);
   }
@@ -563,7 +566,7 @@ input[type="password"] {
 
   .np-theme-personal & {
     .form-control-validation(
-      var(--color-sentiment-positive);
+      var(--color-content-primary);
       var(--color-sentiment-positive);
       var(--color-sentiment-positive);
     );
@@ -595,7 +598,7 @@ input[type="password"] {
 
   .np-theme-personal & {
     .form-control-validation(
-      var(--color-sentiment-warning);
+      var(--color-content-primary);
       var(--color-sentiment-warning);
       var(--color-sentiment-warning);
     );
@@ -611,7 +614,7 @@ input[type="password"] {
 
   .np-theme-personal & {
     .form-control-validation(
-      var(--color-sentiment-negative);
+      var(--color-content-primary);
       var(--color-sentiment-negative);
       var(--color-sentiment-negative-hover);
     );
@@ -678,6 +681,7 @@ 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);
@@ -742,6 +746,7 @@ 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);
 
@@ -764,6 +769,7 @@ 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);
@@ -773,6 +779,7 @@ 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);
@@ -1116,27 +1123,27 @@ input[type="password"] {
       }
     }
 
-    .checkbox:hover .tw-checkbox-button, 
+    .checkbox:hover .tw-checkbox-button,
     .radio:not(.disabled):hover .tw-radio-button,
-    .tw-checkbox-button:not(.disabled,:disabled):hover, 
-    input[type=checkbox]:hover+.tw-checkbox-button, 
+    .tw-checkbox-button:not(.disabled,:disabled):hover,
+    input[type=checkbox]:hover+.tw-checkbox-button,
     input[type=radio]:not(.disabled,:disabled):hover+.tw-radio-button,
     input[type=checkbox]:not(.disabled,:disabled):hover+.tw-checkbox-button {
       box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
     }
 
-    .tw-checkbox-button.checked, 
-    .tw-checkbox-button:checked, 
+    .tw-checkbox-button.checked,
+    .tw-checkbox-button:checked,
     input[type=checkbox]:checked+.tw-checkbox-button,
-    .tw-checkbox-button.checked:hover, 
-    .tw-checkbox-button:checked:hover, 
+    .tw-checkbox-button.checked:hover,
+    .tw-checkbox-button:checked:hover,
     input[type=checkbox]:not(.disabled,:disabled):checked:hover+.tw-checkbox-button {
       box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
       background: var(--color-sentiment-negative);
     }
 
-    .checkbox>label:not(.disabled,:disabled):active input[type=checkbox]+.tw-checkbox-button, 
-    .checkbox>label:not(.disabled,:disabled):focus-visible input[type=checkbox]+.tw-checkbox-button, 
+    .checkbox>label:not(.disabled,:disabled):active input[type=checkbox]+.tw-checkbox-button,
+    .checkbox>label:not(.disabled,:disabled):focus-visible input[type=checkbox]+.tw-checkbox-button,
     .checkbox>label:not(.disabled,:disabled):has(:focus-visible) input[type=checkbox]+.tw-checkbox-button {
       box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
     }
@@ -1166,20 +1173,6 @@ 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;
-  }
-
-  .has-error .control-label,
-  .has-error label {
-    color: var(--color-sentiment-negative) !important;
-  }
-
   .form-group .alert:before,
   .error-messages:before {
     content: none;

package/src/less/mixins/_forms.less

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

package/src/less/navbar.less

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