@transferwise/neptune-css 14.13.4 → 14.14.0

package/dist/css/input-groups.css

@@ -1501,7 +1501,8 @@ select[multiple].input-lg {
   box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
-.tw-checkbox-button .tw-checkbox-check {
+.tw-checkbox-button .tw-checkbox-check,
+.tw-checkbox-button .np-tw-checkbox-indeterminate {
   width: 20px;
   height: 20px;
   margin: 0;
@@ -1542,26 +1543,32 @@ input[type="checkbox"]:focus-visible + .tw-checkbox-button {
 }
 .tw-checkbox-button:checked,
 .tw-checkbox-button.checked,
-input[type="checkbox"]:checked + .tw-checkbox-button {
+input[type="checkbox"]:checked + .tw-checkbox-button,
+input[type="checkbox"]:indeterminate + .tw-checkbox-button {
   border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
   background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
+.np-theme-personal .tw-checkbox-button:checked,
+.np-theme-personal .tw-checkbox-button.checked,
+.np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:indeterminate + .tw-checkbox-button {
+  background-color: var(--color-interactive-primary);
+  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+}
 .tw-checkbox-button:checked .tw-checkbox-check,
 .tw-checkbox-button.checked .tw-checkbox-check,
 input[type="checkbox"]:checked + .tw-checkbox-button .tw-checkbox-check {
   display: inline-block;
 }
-.np-theme-personal .tw-checkbox-button:checked,
-.np-theme-personal .tw-checkbox-button.checked,
-.np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button {
-  background-color: var(--color-interactive-primary);
-  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+input[type="checkbox"]:indeterminate + .tw-checkbox-button .np-tw-checkbox-indeterminate {
+  display: inline-block;
 }
 .tw-checkbox-button:checked:hover,
 .tw-checkbox-button.checked:hover,
-input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
+input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
   border-color: #008fc9 !important;
   border-color: var(--color-interactive-accent-hover) !important;
   background-color: #008fc9;
@@ -1569,14 +1576,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbo
 }
 .np-theme-personal .tw-checkbox-button:checked:hover,
 .np-theme-personal .tw-checkbox-button.checked:hover,
-.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
   border-color: var(--color-interactive-primary-hover) !important;
   background-color: var(--color-interactive-primary-hover);
   box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
 }
 .tw-checkbox-button:checked:active,
 .tw-checkbox-button.checked:active,
-input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
+input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
   border-color: #0081ba !important;
   border-color: var(--color-interactive-accent-active) !important;
   background-color: #0081ba;
@@ -1584,7 +1593,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkb
 }
 .np-theme-personal .tw-checkbox-button:checked:active,
 .np-theme-personal .tw-checkbox-button.checked:active,
-.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
   border-color: var(--color-interactive-primary-active) !important;
   background-color: var(--color-interactive-primary-active);
   box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
@@ -1601,19 +1611,22 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkb
   background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
-.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button {
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
   border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
   background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
-.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:indeterminate + .tw-checkbox-button {
   border-color: #d03238 !important;
   border-color: var(--color-interactive-negative-hover) !important;
   background-color: #d03238;
   background-color: var(--color-interactive-negative-hover);
 }
-.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
   border-color: #bf1e2c !important;
   border-color: var(--color-interactive-negative-active) !important;
   background-color: #bf1e2c;

package/dist/css/neptune.css

@@ -10953,7 +10953,8 @@ select[multiple].input-lg {
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 
-.tw-checkbox-button .tw-checkbox-check {
+.tw-checkbox-button .tw-checkbox-check,
+.tw-checkbox-button .np-tw-checkbox-indeterminate {
   width: 20px;
   height: 20px;
   margin: 0;
@@ -11002,29 +11003,36 @@ input[type="checkbox"]:focus-visible + .tw-checkbox-button {
 
 .tw-checkbox-button:checked,
 .tw-checkbox-button.checked,
-input[type="checkbox"]:checked + .tw-checkbox-button {
+input[type="checkbox"]:checked + .tw-checkbox-button,
+input[type="checkbox"]:indeterminate + .tw-checkbox-button {
   border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
   background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 
+.np-theme-personal .tw-checkbox-button:checked,
+.np-theme-personal .tw-checkbox-button.checked,
+.np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:indeterminate + .tw-checkbox-button {
+  background-color: var(--color-interactive-primary);
+  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+}
+
 .tw-checkbox-button:checked .tw-checkbox-check,
 .tw-checkbox-button.checked .tw-checkbox-check,
 input[type="checkbox"]:checked + .tw-checkbox-button .tw-checkbox-check {
   display: inline-block;
 }
 
-.np-theme-personal .tw-checkbox-button:checked,
-.np-theme-personal .tw-checkbox-button.checked,
-.np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button {
-  background-color: var(--color-interactive-primary);
-  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+input[type="checkbox"]:indeterminate + .tw-checkbox-button .np-tw-checkbox-indeterminate {
+  display: inline-block;
 }
 
 .tw-checkbox-button:checked:hover,
 .tw-checkbox-button.checked:hover,
-input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
+input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
   border-color: #008fc9 !important;
   border-color: var(--color-interactive-accent-hover) !important;
   background-color: #008fc9;
@@ -11033,7 +11041,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbo
 
 .np-theme-personal .tw-checkbox-button:checked:hover,
 .np-theme-personal .tw-checkbox-button.checked:hover,
-.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
   border-color: var(--color-interactive-primary-hover) !important;
   background-color: var(--color-interactive-primary-hover);
   box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
@@ -11041,7 +11050,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbo
 
 .tw-checkbox-button:checked:active,
 .tw-checkbox-button.checked:active,
-input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
+input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
   border-color: #0081ba !important;
   border-color: var(--color-interactive-accent-active) !important;
   background-color: #0081ba;
@@ -11050,7 +11060,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkb
 
 .np-theme-personal .tw-checkbox-button:checked:active,
 .np-theme-personal .tw-checkbox-button.checked:active,
-.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+.np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
   border-color: var(--color-interactive-primary-active) !important;
   background-color: var(--color-interactive-primary-active);
   box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
@@ -11070,21 +11081,24 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkb
   background-color: var(--color-interactive-negative);
 }
 
-.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button {
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
   border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
   background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 
-.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:indeterminate + .tw-checkbox-button {
   border-color: #d03238 !important;
   border-color: var(--color-interactive-negative-hover) !important;
   background-color: #d03238;
   background-color: var(--color-interactive-negative-hover);
 }
 
-.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
+.checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
   border-color: #bf1e2c !important;
   border-color: var(--color-interactive-negative-active) !important;
   background-color: #bf1e2c;

package/package.json

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

package/src/less/forms/checkbox-radio.less

@@ -39,7 +39,7 @@
     box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   }
 
-  .tw-checkbox-check {
+  .tw-checkbox-check, .np-tw-checkbox-indeterminate {
     width: 20px;
     height: 20px;
     margin: 0;
@@ -79,23 +79,36 @@
 
   &:checked,
   &.checked,
-  input[type="checkbox"]:checked + & {
+  input[type="checkbox"]:checked + &,
+  input[type="checkbox"]:indeterminate + & {
     border-color: var(--color-interactive-accent) !important;
     background-color: var(--color-interactive-accent);
 
+    .np-theme-personal & {
+      background-color: var(--color-interactive-primary);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+    }
+  }
+
+  &:checked,
+  &.checked,
+  input[type="checkbox"]:checked + & {
     .tw-checkbox-check {
       display: inline-block;
     }
 
-    .np-theme-personal & {
-      background-color: var(--color-interactive-primary);
-      box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+  }
+
+  input[type="checkbox"]:indeterminate + & {
+    .np-tw-checkbox-indeterminate {
+      display: inline-block;
     }
   }
 
   &:checked:hover,
   &.checked:hover,
-  input[type="checkbox"]:not(.disabled, :disabled):checked:hover + & {
+  input[type="checkbox"]:not(.disabled, :disabled):checked:hover + &,
+  input[type="checkbox"]:not(.disabled, :disabled):indeterminate:hover + & {
     border-color: var(--color-interactive-accent-hover) !important;
     background-color: var(--color-interactive-accent-hover);
 
@@ -108,7 +121,8 @@
 
   &:checked:active,
   &.checked:active,
-  input[type="checkbox"]:not(.disabled, :disabled):checked:active + & {
+  input[type="checkbox"]:not(.disabled, :disabled):checked:active + &,
+  input[type="checkbox"]:not(.disabled, :disabled):indeterminate:active + & {
     border-color: var(--color-interactive-accent-active) !important;
     background-color: var(--color-interactive-accent-active);
 
@@ -129,17 +143,20 @@
     }
   }
 
-  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked + & {
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked + &,
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):indeterminate + & {
     border-color: var(--color-interactive-negative) !important;
     background-color: var(--color-interactive-negative);
   }
 
-  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:hover + & {
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:hover + &,
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:indeterminate + & {
     border-color: var(--color-interactive-negative-hover) !important;
     background-color: var(--color-interactive-negative-hover);
   }
 
-  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:active + & {
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:active + &,
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):indeterminate + & {
     border-color: var(--color-interactive-negative-active) !important;
     background-color: var(--color-interactive-negative-active);
   }

package/src/less/tick.less

@@ -34,4 +34,4 @@
     height: 2px;
     width: 11px;
   }
-}
+}