@transferwise/neptune-css 14.2.3-beta-03dc86c830.0 → 14.2.3

package/dist/css/ring.css

@@ -0,0 +1 @@
+:root{--ring-outline-width:2px;--ring-outline-offset:2px;--ring-outline-color:var(--color-content-primary)}:root .np-theme-personal,:root.np-theme-personal{--ring-outline-color:var(--color-interactive-primary)}.focus-ring:focus{outline:none}.focus-ring:focus-visible{outline:2px solid #37517e;outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:2px;outline-offset:var(--ring-outline-offset)}.ring-offset-0{--ring-outline-offset:0}.ring-inset{--ring-outline-width:3px;--ring-outline-offset:calc(var(--ring-outline-width)*-1)}.ring-negative{--ring-outline-color:var(--color-sentiment-negative)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.2.3-beta-03dc86c830.0+03dc86c830",
+  "version": "14.2.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -53,5 +53,5 @@
   "bin": {
     "neptune-css-upgrade-util": "scripts/neptune-css-upgrader.js"
   },
-  "gitHead": "03dc86c830d73faf4b1aadce08ea9c97cdcf7409"
+  "gitHead": "e8eb4c7770839c938152472fd7ba7fc89fd33dd5"
 }

package/src/less/buttons.less

@@ -4,6 +4,7 @@
 @import "./mixins/_tab-focus.less";
 @import (reference) "./mixins/_logical-properties.less";
 @import (reference) "./core/_typography.less";
+@import (reference) "./ring.less";
 
 .btn {
   .np-text-body-large-bold;
@@ -41,16 +42,42 @@
   user-select: none;
 
   &:not(.disabled, :disabled, .np-dropdown-toggle):active,
-  &:not(.disabled, :disabled, .np-dropdown-toggle).active,
-  &:not(.disabled, :disabled, .np-dropdown-toggle):focus,
+  &:not(.disabled, :disabled, .np-dropdown-toggle).active {
+    .tab-focus();
+
+    outline-offset: -2px;
+
+    .np-theme-personal & {
+      outline: none;
+    }
+  }
+
+  &:not(.disabled, :disabled, .np-dropdown-toggle):focus-visible,
   &:not(.disabled, :disabled, .np-dropdown-toggle).focus {
     .tab-focus();
 
     outline-offset: -2px;
 
     .np-theme-personal & {
-      outline: 3px solid var(--color-interactive-primary);
-      outline-offset: 2px;
+      .ring();
+    }
+
+    &.btn-negative {
+      .np-theme-personal & {
+        outline-color: var(--color-sentiment-negative);
+      }
+
+      .np-theme-personal .critical-comms--cta & {
+        outline-color: var(--color-contrast);
+      }
+    }
+  }
+
+  &:not(.disabled, :disabled, .np-dropdown-toggle) {
+    &.btn-negative {
+      .np-theme-personal .critical-comms--cta & {
+        border: none;
+      }
     }
   }
 
@@ -63,9 +90,7 @@
     }
   }
 
-  &:not(.disabled, :disabled):hover,
-  &:not(.disabled, :disabled):focus,
-  &:not(.disabled, :disabled).focus {
+  &:not(.disabled, :disabled):hover {
     color: var(--color-interactive-accent-hover);
     text-decoration: none;
   }
@@ -178,7 +203,7 @@
   }
 
   &:not(.disabled, :disabled):hover,
-  &:not(.disabled, :disabled):focus {
+  &:not(.disabled, :disabled):focus-visible {
     color: var(--color-content-accent-hover);
     text-decoration: @link-decoration;
     border-color: transparent;
@@ -195,11 +220,10 @@
     text-decoration-thickness: 2px;
 
     &:not(.disabled, :disabled):hover,
-    &:not(.disabled, :disabled):focus {
+    &:not(.disabled, :disabled):focus-visible {
       color: var(--color-interactive-primary-hover);
       border-color: transparent;
       text-decoration-thickness: 2px;
-      background-color: transparent;
     }
 
     &:not(.disabled, :disabled):active {
@@ -395,7 +419,7 @@
   color: @brand-white;
 
   &:not(.disabled, :disabled):hover,
-  &:not(.disabled, :disabled):focus {
+  &:not(.disabled, :disabled):focus-visible {
     background-color: @brand-grey-plus-10;
     background-color: rgba(24, 33, 56, 0.56);
   }
@@ -539,7 +563,7 @@ input[type="button"] {
   &:not(.disabled, :disabled).active,
   &:not(.disabled, :disabled):active,
   &:not(.disabled, :disabled).focus,
-  &:not(.disabled, :disabled):focus {
+  &:not(.disabled, :disabled):focus-visible {
     border-color: var(--color-interactive-accent-active);
     outline: 0 none !important;
 

package/src/less/decision.less

@@ -1,20 +1,20 @@
 @import (reference) "../variables/neptune-tokens.less";
 @import (reference) "./core/_typography.less";
+@import (reference) "./ring.less";
 
 .decision {
   cursor: pointer;
   margin-bottom: 0 !important;
   border: 0;
   align-items: center;
-  transition: background-color ease 350ms, outline-offset 0.1s ease;
+  transition: background-color ease 350ms;
   background-color: transparent;
   display: block;
 
-  &:not(.np-option):focus,
   &:not(.np-option):focus-visible,
-  &:not(.np-option):focus-within {
-    outline: 3px solid var(--color-interactive-primary);
-    outline-offset: 2px;
+  &:not(.np-option):has(:focus-visible) {
+    .ring();
+    .ring-offset-0();
   }
 
   &__title {

package/src/less/dropdowns.less

@@ -42,14 +42,6 @@
   // Bit of a hack for our calculators to make the two controls the same width.
   min-width: 104px;
 
-  .np-theme-personal &,
-  .np-theme-personal--forest-green &,
-  .np-theme-personal--dark & {
-    background-color: var(--color-background-elevated);
-    border-radius: var(--radius-medium);
-    box-shadow: 0 0 40px rgb(69 71 69 / 20%);
-  }
-
   @media (min-width: @screen-sm-min) {
     min-width: 160px;
   }
@@ -83,12 +75,6 @@
       display: block;
       white-space: normal;
     }
-
-    .np-theme-personal &,
-    .np-theme-personal--forest-green &,
-    .np-theme-personal--dark & {
-      border-radius: var(--radius-small);
-    }
   }
 
   > li:first-child > a {

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

@@ -7,6 +7,7 @@
 @import (reference) '../mixins/_logical-properties.less';
 @import (reference) '../core/_typography.less';
 
+
 //
 // Forms
 // --------------------------------------------------
@@ -1030,7 +1031,7 @@ input[type="password"] {
   .form-control,
   .radio > label,
   .checkbox > label {
-    box-shadow: 0 0 0 1px var(--color-interactive-secondary);
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
     transition: box-shadow 0.3s ease-in-out;
   }
 
@@ -1044,39 +1045,20 @@ input[type="password"] {
   .form-control:not(.disabled, :disabled):hover,
   .radio > label:not(.disabled, :disabled):hover,
   .checkbox > label:not(.disabled, :disabled):hover {
-    box-shadow: 0 0 0 2px var(--color-interactive-secondary-hover);
-  }
-
-  .btn-input:not(.disabled, :disabled):active,
-  .btn-input:not(.disabled, :disabled):focus,
-  .btn-input:not(.disabled, :disabled):focus-within,
-  .input-group:not(.disabled, :disabled):active,
-  .input-group:not(.disabled, :disabled):focus,
-  .input-group:not(.disabled, :disabled):focus-within,
-  .form-control:not(.disabled, :disabled):active,
-  .form-control:not(.disabled, :disabled):focus,
-  .form-control:not(.disabled, :disabled):focus-within,
-  .radio > label:not(.disabled, :disabled):active,
-  .radio > label:not(.disabled, :disabled):focus,
-  .radio > label:not(.disabled, :disabled):focus-within,
-  .checkbox > label:not(.disabled, :disabled):active,
-  .checkbox > label:not(.disabled, :disabled):focus,
-  .checkbox > label:not(.disabled, :disabled):focus-within {
-    box-shadow: 0 0 0 3px var(--color-interactive-primary);
+    box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
   }
 
-  .checkbox > label:not(.disabled, :disabled):active input[type=checkbox]+.tw-checkbox-button,
-  .checkbox > label:not(.disabled, :disabled):focus input[type=checkbox]+.tw-checkbox-button,
-  .checkbox > label:not(.disabled, :disabled):focus-within input[type=checkbox]+.tw-checkbox-button {
-    box-shadow: inset 0 0 0 3px var(--color-interactive-primary-hover);
-    background-color: var(--color-interactive-primary-hover);
-  }
-
-  .radio > label:not(.disabled, :disabled):active input[type=radio]+.tw-radio-button,
-  .radio > label:not(.disabled, :disabled):focus input[type=radio]+.tw-radio-button,
-  .radio > label:not(.disabled, :disabled):focus-within input[type=radio]+.tw-radio-button {
-    outline: 3px solid var(--color-interactive-primary);
-    offset: 2px;
+  .btn-input:not(.disabled, :disabled):focus-visible,
+  .btn-input:not(.disabled, :disabled):has(:focus-visible),
+  .input-group:not(.disabled, :disabled):focus-visible,
+  .input-group:not(.disabled, :disabled):has(.form-control:focus-visible),
+  .form-control:not(.disabled, :disabled):focus-visible,
+  .form-control:not(.disabled, :disabled):has(:focus-visible),
+  .radio > label:not(.disabled, :disabled):focus-visible,
+  .radio > label:not(.disabled, :disabled):has(:focus-visible),
+  .checkbox > label:not(.disabled, :disabled):focus-visible,
+  .checkbox > label:not(.disabled, :disabled):has(:focus-visible) {
+    box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
   }
 
   .has-error {
@@ -1085,14 +1067,14 @@ input[type="password"] {
     .form-control,
     .radio > label,
     .checkbox > label {
-      box-shadow: 0 0 0 2px var(--color-sentiment-negative);
+      box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
     }
 
     .input-group:not(.disabled, :disabled):hover,
     .form-control:not(.disabled, :disabled):hover,
     .radio > label:not(.disabled, :disabled):hover,
     .checkbox > label:not(.disabled, :disabled):hover {
-      box-shadow: 0 0 0 2px var(--color-sentiment-negative-hover);
+      box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
     }
 
     .input-group:not(.disabled, :disabled):active,
@@ -1107,7 +1089,7 @@ input[type="password"] {
     .checkbox > label:not(.disabled, :disabled):active,
     .checkbox > label:not(.disabled, :disabled):focus,
     .checkbox > label:not(.disabled, :disabled):focus-within {
-      box-shadow: 0 0 0 3px var(--color-sentiment-negative);
+      box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
     }
 
     .tw-radio-button{

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

@@ -51,7 +51,7 @@
     border-color: var(--color-interactive-secondary-hover);
 
     .np-theme-personal & {
-      box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
     }
   }
 
@@ -79,7 +79,7 @@
 
     .np-theme-personal & {
       background-color: var(--color-interactive-primary);
-      box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
     }
   }
 
@@ -92,7 +92,7 @@
     .np-theme-personal & {
       border-color: var(--color-interactive-primary-hover) !important;
       background-color: var(--color-interactive-primary-hover);
-      box-shadow: inset 0 0 0 3px var(--color-interactive-primary-hover);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
     }
   }
 
@@ -105,7 +105,7 @@
     .np-theme-personal & {
       border-color: var(--color-interactive-primary-active) !important;
       background-color: var(--color-interactive-primary-active);
-      box-shadow: inset 0 0 0 3px var(--color-interactive-primary-active);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
     }
   }
 
@@ -141,14 +141,15 @@
   border-radius: 50%;
   border: 1px solid var(--color-interactive-secondary);
   background: var(--color-background-screen);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding: 0;
-  vertical-align: middle;
   transition: border 0.15s ease-in-out;
 
   .np-theme-personal & {
     border-color: transparent;
-    box-shadow: 0 0 0 1px var(--color-interactive-secondary);
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
     position: relative;
     top: 0;
     left: 0;
@@ -159,22 +160,9 @@
     text-align: center;
     width: 12px;
     height: 12px;
-    margin: 5px;
     display: block;
     opacity: 0;
     transition: all 0.15s ease-in-out;
-
-    .np-theme-personal & {
-      max-height: 0;
-      max-width: 0;
-      opacity: 1;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      margin: auto;
-    }
   }
 
   .radio:not(.disabled, :disabled):hover &,
@@ -183,9 +171,12 @@
 
     .np-theme-personal & {
       border-color: transparent;
-      box-shadow: 0 0 0 2px var(--color-interactive-secondary-hover);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
+
+      &[checked],
       &.checked {
-        box-shadow: 0 0 0 1px var(--color-interactive-primary-hover);
+        box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+
         .tw-radio-check {
           background-color: var(--color-interactive-primary-hover);
         }
@@ -212,7 +203,7 @@
 
     .np-theme-personal & {
       border-color: transparent !important;
-      box-shadow: 0 0 0 1px var(--color-interactive-primary);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
 
       .tw-radio-check {
         background-color: var(--color-interactive-primary);
@@ -284,6 +275,7 @@
     align-items: center;
     // Added rtl mixing even the horizontal values are equal, to increase specificity created in line 11
     .padding-shorthand(var(--size-8) var(--size-16));
+
     line-height: var(--line-height-24);
 
     .np-checkbox__text,

package/src/less/input-groups.less

@@ -175,16 +175,25 @@
   .border-radius(right, @border-radius-base);
 }
 
+/* TODO: Remove this rule group once the brand refresh is out */
 // stylelint-disable-next-line no-duplicate-selectors
 .input-group {
   > :first-child .btn,
   > :first-child .btn-group {
     .border-radius(right, 0);
+
+    .np-theme-personal & {
+      .border-radius(left, var(--radius-small));
+    }
   }
 
   > :last-child .btn,
   > :last-child .btn-group {
     .border-radius(left, 0);
+
+    .np-theme-personal & {
+      .border-radius(left, var(--radius-small));
+    }
   }
 }
 

package/src/less/mixins/_buttons.less

@@ -15,13 +15,6 @@
   border-color: @border;
   transition: color, background-color 0.15s ease-in-out;
 
-  &:not(.disabled, :disabled):focus,
-  &:not(.disabled, :disabled).focus {
-    color: @color-hover;
-    background-color: @background-hover;
-    border-color: @border-hover;
-  }
-
   &:not(.disabled, :disabled):hover {
     color: @color-hover;
     background-color: @background-hover;
@@ -35,9 +28,7 @@
     background-color: @background-active;
     border-color: @border-active;
 
-    &:not(.disabled, :disabled):hover,
-    &:not(.disabled, :disabled):focus,
-    &:not(.disabled, :disabled).focus {
+    &:not(.disabled, :disabled):hover {
       color: @color-active;
       background-color: @background-active;
       border-color: @border-active;

package/src/less/neptune.bundle.less

@@ -34,6 +34,7 @@
 @import "./popovers.less";
 @import "./process.less";
 @import "./progress-bars.less";
+@import "./ring.less";
 @import "./sequences.less";
 @import "./table.less";
 @import "./tooltip.less";

package/src/less/ring.less

@@ -0,0 +1,38 @@
+:root {
+  --ring-outline-width: 2px;
+  --ring-outline-offset: 2px;
+  --ring-outline-color: var(--color-content-primary);
+
+  &.np-theme-personal,
+  & .np-theme-personal {
+    --ring-outline-color: var(--color-interactive-primary);
+  }
+}
+
+.ring() {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+
+.focus-ring {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    .ring();
+  }
+}
+
+.ring-offset-0 {
+  --ring-outline-offset: 0;
+}
+
+.ring-inset {
+  --ring-outline-width: 3px;
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+}
+
+.ring-negative {
+  --ring-outline-color: var(--color-sentiment-negative);
+}