@transferwise/neptune-css 10.0.6-beta.36 → 10.0.6-beta.38

package/dist/props/neptune-tokens.css

@@ -1,50 +1,98 @@
 /**
  * Do not edit directly
- * Generated on Tue, 20 Apr 2021 11:20:11 GMT
+ * Generated on Mon, 23 Aug 2021 09:29:19 GMT
  */
 
 :root {
-  --color-primary: #37517e;
-  --color-secondary: #5d7079;
-  --color-accent: #00b9ff;
-  --color-positive: #2ed06e;
-  --color-negative: #f53636;
-  --color-warning: #ffa600;
-  --color-text-primary: #37517e;
-  --color-text-secondary: #5d7079;
-  --color-text-inactive: #a8aaac;
-  --color-text-control: #ffffff;
-  --color-text-important: #37517e;
-  --color-text-link: #00b9ff;
-  --color-text-link-hover: #00a4df;
-  --color-text-link-active: #008ec0;
-  --color-text-positive: #2ed06e;
-  --color-text-negative: #f53636;
-  --color-text-warning: #ffa600;
-  --color-control-accent: #00b9ff;
-  --color-control-accent-hover: #00a4df;
-  --color-control-accent-active: #008ec0;
-  --color-control-positive: #2ed06e;
-  --color-control-positive-hover: #28b862;
-  --color-control-positive-active: #1d8547;
-  --color-control-negative: #f53636;
-  --color-control-negative-hover: #cf3131;
-  --color-control-negative-active: #b62a18;
-  --color-control-warning: #ffa600;
-  --color-control-warning-hover: #df8700;
-  --color-control-warning-active: #c07500;
-  --color-border-neutral: #e2e6e8;
-  --color-border-focus: #00b9ff;
-  --color-border-positive: #2ed06e;
-  --color-border-negative: #f53636;
-  --color-border-warning: #ffa600;
+  --color-base-blue-light: #00b9ff;
+  --color-base-blue-mid: #00a2dd;
+  --color-base-blue-dark: #0097c7;
+  --color-base-blue-fade: #38c8ff1a;
+  --color-base-green-light: #6fd698;
+  --color-base-green-mid: #2ead4b;
+  --color-base-green-dark: #008026;
+  --color-base-green-fade: #36c7971a;
+  --color-base-red-light: #ffa6a9;
+  --color-base-red-mid: #e74848;
+  --color-base-red-dark: #cf2929;
+  --color-base-red-fade: #ff87871a;
+  --color-base-orange-light: #ffd184;
+  --color-base-orange-mid: #df8700;
+  --color-base-orange-dark: #9a6500;
+  --color-base-orange-fade: #ffac001a;
+  --color-base-smoke-light: #e2e6e8;
+  --color-base-smoke-mid: #c9cbce;
+  --color-base-smoke-dark: #a8aaac;
+  --color-base-smoke-fade: #86a7bd1a;
+  --color-base-navy-light: #37517e;
+  --color-base-navy-mid: #2e4369;
+  --color-base-navy-dark: #253655;
+  --color-base-navy-fade: #849cc51a;
+  --color-base-grey-light: #829ca9;
+  --color-base-grey-mid: #6f8691;
+  --color-base-grey-dark: #5d7079;
+  --color-base-grey-fade: #829ca91a;
+  --color-base-white-light: #ffffff;
+  --color-base-white-mid: #ebebeb;
+  --color-base-white-fade: #ffffff1a;
+  --color-base-black-light: #202020;
+  --color-base-black-mid: #181818;
+  --color-base-black-dark: #000000;
+  --color-base-black-fade: #0000001a;
+  --color-base-brand-blue: #00b9ff;
+  --color-base-brand-purple: #485cc7;
+  --color-base-brand-amber: #ffb619;
+  --color-base-brand-borderless: #44ee70;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Aug 2021 09:29:19 GMT
+ */
+
+:root {
+  --color-content-primary: #37517e;
+  --color-content-secondary: #5d7079;
+  --color-content-accent: #0097c7;
+  --color-content-accent-hover: #0084b3;
+  --color-content-accent-active: #0077a5;
+  --color-content-positive: #008026;
+  --color-content-positive-hover: #006d13;
+  --color-content-positive-active: #006002;
+  --color-content-negative: #cf2929;
+  --color-content-negative-hover: #b80419;
+  --color-content-negative-active: #a7000d;
+  --color-content-warning: #9a6500;
+  --color-content-warning-hover: #855400;
+  --color-content-warning-active: #764700;
+  --color-content-disabled: #a8aaac;
+  --color-interactive-accent: #00a2dd;
+  --color-interactive-accent-hover: #008fc9;
+  --color-interactive-accent-active: #0081ba;
+  --color-interactive-positive: #2ead4b;
+  --color-interactive-positive-hover: #069939;
+  --color-interactive-positive-active: #008b2b;
+  --color-interactive-negative: #e74848;
+  --color-interactive-negative-hover: #d03238;
+  --color-interactive-negative-active: #bf1e2c;
+  --color-interactive-warning: #df8700;
+  --color-interactive-warning-hover: #c97500;
+  --color-interactive-warning-active: #b86700;
+  --color-interactive-secondary: #c9cbce;
+  --color-interactive-secondary-hover: #b5b7ba;
+  --color-interactive-secondary-active: #a7a9ab;
+  --color-interactive-disabled: #a8aaac;
   --color-background-screen: #ffffff;
   --color-background-elevated: #ffffff;
-  --color-background-neutral: #f2f5f7;
-  --color-background-accent: #d8f1fa;
-  --color-background-positive: #d6f6e2;
-  --color-background-negative: #ffdfdf;
-  --color-background-warning: #fff4dd;
+  --color-background-neutral: #86a7bd1a;
+  --color-background-accent: #38c8ff1a;
+  --color-background-positive: #36c7971a;
+  --color-background-negative: #ff87871a;
+  --color-background-warning: #ffac001a;
+  --color-background-overlay: #0000001a;
+  --color-border-neutral: #0000001a;
+  --color-border-overlay: #0000001a;
+  --color-core-contrast: #000000;
   --radius-small: 3px;
   --radius-medium: 10px;
   --size-4: 4px;
@@ -65,6 +113,7 @@
   --size-112: 112px;
   --size-120: 120px;
   --size-128: 128px;
+  --space-content-horizontal: 16px;
   --font-size-12: 0.75rem;
   --font-size-14: 0.875rem;
   --font-size-16: 1rem;
@@ -78,4 +127,3 @@
   --font-weight-semi-bold: 600;
   --font-weight-bold: 800;
 }
-

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "10.0.6-beta.36+bdd71ad2f5",
+  "version": "10.0.6-beta.38+6b700c1737",
   "license": "MIT",
   "repository": {
     "type": "git",
     "fullname": "transferwise/neptune-web",
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "keywords": [],
   "author": {
     "name": "Wise",
@@ -44,16 +41,16 @@
     "lintless:fix": "yarn lintless --fix"
   },
   "dependencies": {
-    "@transferwise/neptune-tokens": "^1.0.0",
+    "@transferwise/neptune-tokens": "^4.0.0",
     "bootstrap": "github:transferwise/bootstrap#7.0.0",
     "svgo": "1.3.2"
   },
   "devDependencies": {
-    "@transferwise/less-config": "^3.0.3-beta.170+bdd71ad2f5",
+    "@transferwise/less-config": "^3.0.2",
     "yargs": "^17.1.1"
   },
   "resolutions": {
     "svgo": "1.3.2"
   },
-  "gitHead": "bdd71ad2f573b717cd8c4c7b77bdc20d65f7fcff"
+  "gitHead": "6b700c1737e158cd2e1baa8299575a58b16fa22c"
 }

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

@@ -2,25 +2,32 @@
 
 // Contextual backgrounds
 
+// @DEPRECATED: .bg-default use .bg-neutral instead
+.bg-neutral,
 .bg-default {
   background-color: var(--color-background-neutral) !important;
-  color: @color-base-grey-dark;
+  color: var(--color-content-secondary);
 }
 
+// @DEPRECATED: .bg-info use .bg-accent instead
+.bg-accent,
 .bg-info {
-  background-color: @color-base-blue-light !important;
-  color: @color-base-smoke-fade;
+  background-color: var(--color-background-accent) !important;
 }
 
 .bg-primary {
   background-color: @color-base-navy-light !important;
-  color: @color-base-smoke-fade;
+  color: @color-base-white-light;
 }
 
+// @DEPRECATED: .bg-success use .bg-positive instead
+.bg-positive,
 .bg-success {
   background-color: var(--color-background-positive) !important;
 }
 
+// @DEPRECATED: .bg-danger use .bg-negative instead
+.bg-negative,
 .bg-danger {
   background-color: var(--color-background-negative) !important;
 }
@@ -29,8 +36,21 @@
   background-color: var(--color-background-warning) !important;
 }
 
+.bg-elevated {
+  background-color: var(--color-background-elevated) !important;
+}
+
+.bg-screen {
+  background-color: var(--color-background-screen) !important;
+}
+
+.bg-overlay {
+  background-color: var(--color-background-overlay) !important;
+}
+
 .bg-primary,
-.bg-info {
+.bg-info,
+.bg-accent {
   h1,
   h2,
   h3,
@@ -43,7 +63,12 @@
   .h4,
   .h5,
   .h6,
+  .title-1,
+  .title-2,
+  .title-3,
+  .title-4,
+  .title-5,
   strong {
-    color: @color-base-white;
+    color: var(--color-base-white-light);
   }
 }

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

@@ -21,16 +21,16 @@
 .responsive-spacing-vertical(section-3, @size-48, @size-72, @size-96);
 
 .m-x-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
+  .margin(right,auto) !important;
+  .margin(left, auto) !important;
 }
 
 .m-r-auto {
-  margin-right: auto !important;
+  .margin(right,auto) !important;
 }
 
 .m-l-auto {
-  margin-left: auto !important;
+  .margin(left, auto) !important;
 }
 
 .section {

package/src/less/addons/_utilities.less

@@ -0,0 +1,141 @@
+@import (reference)
+  "../../variables/legacy-variables.less";
+@import (reference) "../mixins/_clearfix.less";
+@import (reference) "../mixins/_center-block.less";
+@import (reference) "../mixins/_hide-text.less";
+
+//
+// Utility classes
+// --------------------------------------------------
+
+// Floats
+// -------------------------
+
+.clearfix {
+  .clearfix();
+}
+
+.center-block {
+  .center-block();
+}
+
+.pull-right,
+.pull-xs-right {
+  .float(right) !important;
+}
+
+.pull-left,
+.pull-xs-left {
+  .float(right) !important;
+}
+
+.pull-xs-none {
+  float: none !important;
+}
+
+@media (min-width: @screen-sm-min) {
+  .pull-sm-left {
+    .float(right) !important;
+  }
+
+  .pull-sm-right {
+    .float(right) !important;
+  }
+
+  .pull-sm-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  .pull-md-left {
+    .float(right) !important;
+  }
+
+  .pull-md-right {
+    .float(right) !important;
+  }
+
+  .pull-md-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: @screen-lg-min) {
+  .pull-lg-left {
+    .float(right) !important;
+  }
+
+  .pull-lg-right {
+    .float(right) !important;
+  }
+
+  .pull-lg-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: @screen-xl-min) {
+  .pull-xl-left {
+    .float(right) !important;
+  }
+
+  .pull-xl-right {
+    .float(right) !important;
+  }
+
+  .pull-xl-none {
+    float: none !important;
+  }
+}
+
+// Toggling content
+// -------------------------
+
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
+.hide {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.text-hide {
+  .text-hide();
+}
+
+// Hide from screenreaders and browsers
+//
+// Credit: HTML5 Boilerplate
+
+.hidden {
+  display: none !important;
+}
+
+// For Affix plugin
+// -------------------------
+
+.affix {
+  position: fixed;
+}
+
+.rotate90 {
+  transform: rotate(90deg);
+}
+
+.rotate180 {
+  transform: rotate(180deg);
+}
+
+.rotate270 {
+  transform: rotate(270deg);
+}
+
+.rotate-90 {
+  transform: rotate(-90deg);
+}

package/src/less/alerts.less

@@ -6,10 +6,10 @@
 .alert {
   padding: var(--size-16);
   border-radius: var(--radius-medium);
-  color: var(--color-text-primary);
+  color: var(--color-content-primary);
   background-color: var(--color-background-neutral);
   min-width: 200px;
-  font-size: @font-size-base;
+  font-size: var(--font-size-16);
   margin-bottom: var(--size-16);
 
   // Adjust for the font baseline offset
@@ -76,35 +76,35 @@
 .alert-success,
 .alert-positive {
   .alert-variant(
-    @color-background-positive;
-    @color-base-green-dark;
-    darken(@color-base-green-dark, 10%);
+    var(--color-background-positive);
+    var(--color-content-positive);
+    var(--color-content-positive-hover);
   );
 }
 
 .alert-info,
 .alert-neutral {
   .alert-variant(
-    @color-background-neutral;
-    @color-text-primary;
-    darken(@color-text-primary, 10%);
+    var(--color-background-neutral);
+    var(--color-content-primary);
+    var(--color-content-primary);
   );
 }
 
 .alert-warning {
   .alert-variant(
-    @color-background-warning;
-    @color-base-orange-dark;
-    darken(@color-base-orange-dark, 10%);
+    var(--color-background-warning);
+    var(--color-content-warning);
+    var(--color-content-warning-hover);
   );
 }
 
 .alert-danger,
 .alert-negative {
   .alert-variant(
-    @color-background-negative;
-    @color-base-red-dark;
-    darken(@color-base-red-dark, 10%);
+    var(--color-background-negative);
+    var(--color-content-negative);
+    var(--color-content-negative-hover);
   );
 }
 

package/src/less/badge.less

@@ -1,5 +1,66 @@
-// TODO: remove bootstrap dependencies
-
-// variables
 @import (reference) '../variables/legacy-variables.less';
-@import 'bootstrap/less/badges.less';
+@import (reference) './mixins/_logical-properties.less';
+
+// Base class
+.badge {
+  display: inline-block;
+  min-width: var(--size-16);
+  padding: 5px var(--size-8);
+  font-size: @badge-font-size;
+  font-weight: @badge-font-weight;
+  color: var(--color-base-white-light);
+  line-height: @badge-line-height;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: center;
+  background-color: var(--color-interactive-negative);
+  border-radius: @badge-border-radius;
+  top: -1px;
+  position: relative;
+
+  // Empty badges collapse automatically
+
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+
+  .btn-xs &,
+  .btn-group-xs > .btn & {
+    top: 0;
+    padding: 1px 5px;
+  }
+
+  // Hover state, but only for links
+  a& {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+
+  // Account for badges in navs
+
+  .list-group-item > & {
+    .float(right);
+  }
+
+  .list-group-item > & + & {
+    .margin(right, 5px);
+  }
+
+  .nav-pills > li > a > &,
+  .nav-stacked > li > a > & {
+    .margin(left, 19px);
+  }
+
+  &-success {
+    background: var(--color-interactive-positive);
+  }
+}

package/src/less/breadcrumbs.less

@@ -1,5 +1,26 @@
-// TODO: remove bootstrap dependencies
-
-// variables
 @import (reference) '../variables/legacy-variables.less';
-@import 'bootstrap/less/breadcrumbs.less';
+
+//
+// Breadcrumbs
+// --------------------------------------------------
+.breadcrumb {
+  padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
+  margin-bottom: @line-height-computed;
+  list-style: none;
+  background-color: none;
+  border-radius: @border-radius-base;
+
+  > li {
+    display: inline-block;
+
+    + li::before {
+      content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
+      padding: 0 5px;
+      color: var(--color-base-white-light);
+    }
+  }
+
+  > .active {
+    color: var(--color-content-secondary);
+  }
+}