@transferwise/neptune-css 11.0.1-beta-66e6490bc3.13 → 11.0.1

package/dist/less/neptune-tokens.less

@@ -1,91 +1,48 @@
 
 // Do not edit directly
-// Generated on Thu, 11 Nov 2021 16:13:36 GMT
+// Generated on Tue, 20 Apr 2021 11:20:11 GMT
 
-@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-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-background-screen: #ffffff;
 @color-background-elevated: #ffffff;
-@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;
-@color-navy-content-primary: #ffffff;
-@color-navy-content-secondary: #c9cbce;
-@color-navy-content-accent: #00b9ff;
-@color-navy-content-accent-hover: #00a6ea;
-@color-navy-content-accent-active: #0097db;
-@color-navy-content-positive: #6fd698;
-@color-navy-content-positive-hover: #5ac285;
-@color-navy-content-positive-active: #4bb377;
-@color-navy-content-negative: #ffa6a9;
-@color-navy-content-negative-hover: #ea9396;
-@color-navy-content-negative-active: #da8488;
-@color-navy-content-warning: #ffd184;
-@color-navy-content-warning-hover: #e9bd71;
-@color-navy-content-warning-active: #daae63;
-@color-navy-content-disabled: #a8aaac;
-@color-navy-interactive-accent: #00a2dd;
-@color-navy-interactive-accent-hover: #008fc9;
-@color-navy-interactive-accent-active: #0081ba;
-@color-navy-interactive-positive: #2ead4b;
-@color-navy-interactive-positive-hover: #069939;
-@color-navy-interactive-positive-active: #008b2b;
-@color-navy-interactive-negative: #e74848;
-@color-navy-interactive-negative-hover: #d03238;
-@color-navy-interactive-negative-active: #bf1e2c;
-@color-navy-interactive-warning: #df8700;
-@color-navy-interactive-warning-hover: #c97500;
-@color-navy-interactive-warning-active: #b86700;
-@color-navy-interactive-secondary: #a8aaac;
-@color-navy-interactive-secondary-hover: #959799;
-@color-navy-interactive-secondary-active: #87898b;
-@color-navy-interactive-disabled: #a8aaac;
-@color-navy-background-screen: #2e4369;
-@color-navy-background-elevated: #37517e;
-@color-navy-background-neutral: #86a7bd1a;
-@color-navy-background-accent: #38c8ff1a;
-@color-navy-background-positive: #36c7971a;
-@color-navy-background-negative: #ff87871a;
-@color-navy-background-warning: #ffac001a;
-@color-navy-background-overlay: #ffffff1a;
-@color-navy-border-neutral: #ffffff1a;
-@color-navy-border-overlay: #ffffff1a;
-@color-navy-core-contrast: #ffffff;
+@color-background-neutral: #f2f5f7;
+@color-background-accent: #d8f1fa;
+@color-background-positive: #d6f6e2;
+@color-background-negative: #ffdfdf;
+@color-background-warning: #fff4dd;
 @radius-small: 3px;
 @radius-medium: 10px;
 @size-4: 4px;
@@ -106,7 +63,6 @@
 @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;
@@ -119,3 +75,41 @@
 @font-weight-regular: 500;
 @font-weight-semi-bold: 600;
 @font-weight-bold: 800;
+
+// Including colours which aren't semantic props yet.
+
+// Do not edit directly
+// Generated on Tue, 20 Apr 2021 11:20:11 GMT
+
+@color-base-blue-light: #00b9ff;
+@color-base-blue-mid: #00a4df;
+@color-base-blue-dark: #008ec0;
+@color-base-blue-fade: #d8f1fa;
+@color-base-green-light: #2ed06e;
+@color-base-green-mid: #28b862;
+@color-base-green-dark: #1d8547;
+@color-base-green-fade: #d6f6e2;
+@color-base-red-light: #f53636;
+@color-base-red-mid: #cf3131;
+@color-base-red-dark: #b62a18;
+@color-base-red-fade: #ffdfdf;
+@color-base-orange-light: #ffa600;
+@color-base-orange-mid: #df8700;
+@color-base-orange-dark: #c07500;
+@color-base-orange-fade: #fff4dd;
+@color-base-smoke-light: #e2e6e8;
+@color-base-smoke-mid: #d3d5d8;
+@color-base-smoke-dark: #a8aaac;
+@color-base-smoke-fade: #f2f5f7;
+@color-base-navy-light: #37517e;
+@color-base-navy-mid: #2e4369;
+@color-base-navy-dark: #253655;
+@color-base-navy-fade: #a8afbb;
+@color-base-grey-light: #829ca9;
+@color-base-grey-mid: #6f8691;
+@color-base-grey-dark: #5d7079;
+@color-base-brand-blue: #00b9ff;
+@color-base-brand-purple: #485cc7;
+@color-base-brand-amber: #ffb619;
+@color-base-brand-borderless: #44ee70;
+@color-base-white: #ffffff;

package/dist/props/legacy-custom-props.css

@@ -0,0 +1,65 @@
+/*
+  DEPRECATED
+  Use neptune-tokens.css instead. If the token you want isn't available there, raise an issue in @transferwise/neptune-tokens.
+*/
+:root {
+  --border-radius: 3px;
+  --spacer: 8px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --color-text-link-hover: #00a4df;
+  --color-text-link-active: #008ec0;
+  --brand-white: #fff;
+  --link-color: #00b9ff;
+  --brand-pale-blue: #dbf0fd;
+  --brand-navy-minus-20: #253655;
+  --brand-navy-minus-10: #2e4369;
+  --brand-navy: #37517e;
+  --brand-blue-minus-20: #111824;
+  --brand-blue-minus-10: #192439;
+  --brand-blue: #223049;
+  --brand-light-blue-minus-10: #00a4df;
+  --brand-light-blue: #00b9ff;
+  --brand-grey-plus-10: #6f8691;
+  --brand-smoke-minus-10: #a8aaac;
+  --brand-smoke: #d3d5d8;
+  --brand-smoke-plus-10: #e2e6e8;
+  --brand-smoke-plus-20: #f2f5f7;
+  --brand-green-minus-10: #28b862;
+  --brand-green: #2ed06e;
+  --gray-base: #f2f5f7;
+  --gray-darker: #384347;
+  --gray-light: #829ca9;
+  --brand-primary: #37517e;
+  --body-bg: #fff;
+  --text-bold-color: #2e4369;
+  --font-size-xx-large: 2.8rem; /* 42px */
+  --font-size-x-large: 1.8666666667rem; /* 28px */
+  --font-size-large: 1.4666666667rem; /* 22px */
+  --font-size-medium: 1.2rem; /* 18px */
+  --font-size: 0.9375rem; /* 15px */
+  --font-size-small: 0.9333333333rem; /* 14px */
+  --font-size-x-small: 0.8rem; /* 12px */
+  --line-height: 1.6; /* 24/15 */
+}
+
+@media (--screen-md) {
+  :root {
+    --font-size-xx-large: 2.625rem; /* 42px */
+    --font-size-x-large: 1.75rem; /* 28px */
+    --font-size-large: 1.375rem; /* 22px */
+    --font-size-medium: 1.125rem; /* 18px */
+    --font-size: 1rem; /* 16px */
+    --font-size-small: 0.875rem; /* 14px */
+    --font-size-x-small: 0.75rem; /* 12px */
+    --line-height: 1.5; /* 24/16px */
+  }
+}

package/dist/props/neptune-tokens.css

@@ -1,93 +1,50 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Nov 2021 16:13:36 GMT
+ * Generated on Tue, 20 Apr 2021 11:20:11 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-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-background-screen: #ffffff;
   --color-background-elevated: #ffffff;
-  --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;
-  --color-navy-content-primary: #ffffff;
-  --color-navy-content-secondary: #c9cbce;
-  --color-navy-content-accent: #00b9ff;
-  --color-navy-content-accent-hover: #00a6ea;
-  --color-navy-content-accent-active: #0097db;
-  --color-navy-content-positive: #6fd698;
-  --color-navy-content-positive-hover: #5ac285;
-  --color-navy-content-positive-active: #4bb377;
-  --color-navy-content-negative: #ffa6a9;
-  --color-navy-content-negative-hover: #ea9396;
-  --color-navy-content-negative-active: #da8488;
-  --color-navy-content-warning: #ffd184;
-  --color-navy-content-warning-hover: #e9bd71;
-  --color-navy-content-warning-active: #daae63;
-  --color-navy-content-disabled: #a8aaac;
-  --color-navy-interactive-accent: #00a2dd;
-  --color-navy-interactive-accent-hover: #008fc9;
-  --color-navy-interactive-accent-active: #0081ba;
-  --color-navy-interactive-positive: #2ead4b;
-  --color-navy-interactive-positive-hover: #069939;
-  --color-navy-interactive-positive-active: #008b2b;
-  --color-navy-interactive-negative: #e74848;
-  --color-navy-interactive-negative-hover: #d03238;
-  --color-navy-interactive-negative-active: #bf1e2c;
-  --color-navy-interactive-warning: #df8700;
-  --color-navy-interactive-warning-hover: #c97500;
-  --color-navy-interactive-warning-active: #b86700;
-  --color-navy-interactive-secondary: #a8aaac;
-  --color-navy-interactive-secondary-hover: #959799;
-  --color-navy-interactive-secondary-active: #87898b;
-  --color-navy-interactive-disabled: #a8aaac;
-  --color-navy-background-screen: #2e4369;
-  --color-navy-background-elevated: #37517e;
-  --color-navy-background-neutral: #86a7bd1a;
-  --color-navy-background-accent: #38c8ff1a;
-  --color-navy-background-positive: #36c7971a;
-  --color-navy-background-negative: #ff87871a;
-  --color-navy-background-warning: #ffac001a;
-  --color-navy-background-overlay: #ffffff1a;
-  --color-navy-border-neutral: #ffffff1a;
-  --color-navy-border-overlay: #ffffff1a;
-  --color-navy-core-contrast: #ffffff;
+  --color-background-neutral: #f2f5f7;
+  --color-background-accent: #d8f1fa;
+  --color-background-positive: #d6f6e2;
+  --color-background-negative: #ffdfdf;
+  --color-background-warning: #fff4dd;
   --radius-small: 3px;
   --radius-medium: 10px;
   --size-4: 4px;
@@ -108,7 +65,6 @@
   --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;
@@ -122,3 +78,4 @@
   --font-weight-semi-bold: 600;
   --font-weight-bold: 800;
 }
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "11.0.1-beta-66e6490bc3.13+66e6490bc3",
+  "version": "11.0.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "lintless:fix": "yarn lintless --fix"
   },
   "dependencies": {
-    "@transferwise/neptune-tokens": "5.0.0",
+    "@transferwise/neptune-tokens": "^1.0.0",
     "bootstrap": "github:transferwise/bootstrap#7.0.0",
     "svgo": "1.3.2"
   },
@@ -52,5 +52,5 @@
   "resolutions": {
     "svgo": "1.3.2"
   },
-  "gitHead": "66e6490bc3beb64d1c0dc3b42d2cdf12a931d7f8"
+  "gitHead": "8d133c694b7ecf946904375ebb917ed50f3b6ea4"
 }

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

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

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/alerts.less

@@ -6,10 +6,10 @@
 .alert {
   padding: var(--size-16);
   border-radius: var(--radius-medium);
-  color: var(--color-content-primary);
+  color: var(--color-text-primary);
   background-color: var(--color-background-neutral);
   min-width: 200px;
-  font-size: var(--font-size-16);
+  font-size: @font-size-base;
   margin-bottom: var(--size-16);
 
   // Adjust for the font baseline offset
@@ -46,7 +46,7 @@
     padding: 4px 16px 3px;
     margin-top: -2px;
     border-style: solid;
-    border-color: var(--color-border-neutral);
+    border-color: @input-border;
     border-width: 0 1px 1px 1px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -76,35 +76,35 @@
 .alert-success,
 .alert-positive {
   .alert-variant(
-    var(--color-background-positive);
-    var(--color-content-positive);
-    var(--color-content-positive-hover);
+    @color-background-positive;
+    @color-base-green-dark;
+    darken(@color-base-green-dark, 10%);
   );
 }
 
 .alert-info,
 .alert-neutral {
   .alert-variant(
-    var(--color-background-neutral);
-    var(--color-content-primary);
-    var(--color-content-primary);
+    @color-background-neutral;
+    @color-text-primary;
+    darken(@color-text-primary, 10%);
   );
 }
 
 .alert-warning {
   .alert-variant(
-    var(--color-background-warning);
-    var(--color-content-warning);
-    var(--color-content-warning-hover);
+    @color-background-warning;
+    @color-base-orange-dark;
+    darken(@color-base-orange-dark, 10%);
   );
 }
 
 .alert-danger,
 .alert-negative {
   .alert-variant(
-    var(--color-background-negative);
-    var(--color-content-negative);
-    var(--color-content-negative-hover);
+    @color-background-negative;
+    @color-base-red-dark;
+    darken(@color-base-red-dark, 10%);
   );
 }
 
@@ -112,7 +112,7 @@
 input:focus ~ .alert-focus,
 .btn:focus ~ .alert-focus {
   display: block;
-  border-color: var(--color-interactive-accent);
+  border-color: @alert-info-border;
 }
 
 .focus .alert-focus,

package/src/less/background.less

@@ -7,7 +7,7 @@
   background-position: bottom;
 
   &--dark {
-    background-color: var(--color-navy-background-neutral);
+    background-color: @color-base-navy-light;
     background-image: url(../img/bg-dark.svg);
   }
 

package/src/less/badge.less

@@ -1,66 +1,5 @@
-@import (reference) '../variables/legacy-variables.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: 10px;
-  font-weight: var(--font-weight-bold);
-  color: #fff;
-  line-height: var(--line-height-body);
-  vertical-align: middle;
-  white-space: nowrap;
-  text-align: center;
-  background-color: var(--color-interactive-negative);
-  border-radius: var(--radius-medium);
-  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;
-  }
+// TODO: remove bootstrap dependencies
 
-  // 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);
-  }
-}
+// variables
+@import (reference) '../variables/legacy-variables.less';
+@import 'bootstrap/less/badges.less';