@transferwise/neptune-css 0.0.0-experimental-1181467

package/dist/less/neptune-tokens.less

@@ -0,0 +1,272 @@
+
+// Do not edit directly
+// Generated on Thu, 23 Feb 2023 10:44:58 GMT
+
+@color-dark-content-primary: #e2e6e8;
+@color-dark-content-secondary: #c9cbce;
+@color-dark-content-tertiary: #a8aaac;
+@color-dark-content-accent: #00b9ff;
+@color-dark-content-accent-hover: #00a6ea;
+@color-dark-content-accent-active: #0097db;
+@color-dark-content-positive: #6fd698;
+@color-dark-content-positive-hover: #5ac285;
+@color-dark-content-positive-active: #4bb377;
+@color-dark-content-negative: #ffa6a9;
+@color-dark-content-negative-hover: #ea9396;
+@color-dark-content-negative-active: #da8488;
+@color-dark-content-warning: #ffd184;
+@color-dark-content-warning-hover: #e9bd71;
+@color-dark-content-warning-active: #daae63;
+@color-dark-interactive-accent: #00a2dd;
+@color-dark-interactive-accent-hover: #008fc9;
+@color-dark-interactive-accent-active: #0081ba;
+@color-dark-interactive-positive: #2ead4b;
+@color-dark-interactive-positive-hover: #069939;
+@color-dark-interactive-positive-active: #008b2b;
+@color-dark-interactive-negative: #e74848;
+@color-dark-interactive-negative-hover: #d03238;
+@color-dark-interactive-negative-active: #bf1e2c;
+@color-dark-interactive-warning: #df8700;
+@color-dark-interactive-warning-hover: #c97500;
+@color-dark-interactive-warning-active: #b86700;
+@color-dark-interactive-secondary: #a8aaac;
+@color-dark-interactive-secondary-hover: #959799;
+@color-dark-interactive-secondary-active: #87898b;
+@color-dark-background-screen: #181818;
+@color-dark-background-elevated: #202020;
+@color-dark-background-neutral: #86a7bd1a;
+@color-dark-background-accent: #38c8ff1a;
+@color-dark-background-positive: #36c7971a;
+@color-dark-background-negative: #ff87871a;
+@color-dark-background-warning: #ffac001a;
+@color-dark-background-overlay: #ffffff1a;
+@color-dark-border-neutral: #ffffff1a;
+@color-dark-border-overlay: #ffffff1a;
+@color-dark-core-contrast: #ffffff;
+@color-content-primary: #37517e;
+@color-content-secondary: #5d7079;
+@color-content-tertiary: #768e9c;
+@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-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-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-tertiary: #a8aaac;
+@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-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-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;
+@padding-x-small: 8px;
+@padding-small: 16px;
+@padding-medium: 24px;
+@padding-large: 32px;
+@radius-full: 50%;
+@radius-small: 10px;
+@radius-medium: 16px;
+@radius-large: 24px;
+@size-4: 4px;
+@size-8: 8px;
+@size-10: 10px;
+@size-12: 12px;
+@size-14: 14px;
+@size-16: 16px;
+@size-24: 24px;
+@size-32: 32px;
+@size-40: 40px;
+@size-48: 48px;
+@size-52: 52px;
+@size-56: 56px;
+@size-60: 60px;
+@size-64: 64px;
+@size-72: 72px;
+@size-80: 80px;
+@size-88: 88px;
+@size-96: 96px;
+@size-104: 104px;
+@size-112: 112px;
+@size-120: 120px;
+@size-126: 126px;
+@size-128: 128px;
+@size-146: 146px;
+@size-154: 154px;
+@size-x-small: 24px;
+@size-small: 32px;
+@size-medium: 40px;
+@size-large: 48px;
+@size-x-large: 56px;
+@size-2x-large: 72px;
+@space-content-horizontal: 16px;
+@space-small: 16px;
+@space-medium: 32px;
+@space-large: 40px;
+@space-x-large: 56px;
+@font-size-12: 0.75rem;
+@font-size-14: 0.875rem;
+@font-size-16: 1rem;
+@font-size-18: 1.125rem;
+@font-size-20: 1.25rem;
+@font-size-22: 1.375rem;
+@font-size-24: 1.5rem;
+@font-size-26: 1.625rem;
+@font-size-28: 1.75rem;
+@font-size-30: 1.875rem;
+@font-size-32: 2rem;
+@letter-spacing-xxs: 0.005em;
+@letter-spacing-xs: 0.01em;
+@letter-spacing-sm: 0.0125em;
+@letter-spacing-md: 0.015em;
+@letter-spacing-lg: 0.02em;
+@letter-spacing-xl: 0.025em;
+@letter-spacing-negative-xxs: -0.005em;
+@letter-spacing-negative-xs: -0.01em;
+@letter-spacing-negative-sm: -0.0125em;
+@letter-spacing-negative-md: -0.015em;
+@letter-spacing-negative-lg: -0.02em;
+@letter-spacing-negative-xl: -0.025em;
+@letter-spacing-negative-xxl: -0.03em;
+@letter-spacing-negative-xxxl: -0.04em;
+@letter-spacing-negative-xxxxl: -0.05em;
+@line-height-18: 1.125rem;
+@line-height-20: 1.25rem;
+@line-height-22: 1.375rem;
+@line-height-24: 1.5rem;
+@line-height-28: 1.75rem;
+@line-height-30: 1.875rem;
+@line-height-32: 2rem;
+@line-height-34: 2.125rem;
+@line-height-36: 2.25rem;
+@line-height-42: 2.625rem;
+@line-height-48: 3rem;
+@line-height-title: 1.2;
+@line-height-body: 1.5;
+@line-height-control: 1.2;
+@font-weight-light: 300;
+@font-weight-regular: 400;
+@font-weight-medium: 500;
+@font-weight-semi-bold: 600;
+@font-weight-bold: 800;
+@font-weight-black: 900;
+@font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
+@font-family-display: 'Wise Sans', 'Inter', sans-serif;
+
+// Do not edit directly
+// Generated on Thu, 23 Feb 2023 10:44:58 GMT
+
+@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: #768e9c;
+@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;
+
+// DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors
+@color-primary: #37517e;
+@color-secondary: #5d7079;
+@color-accent: #00b9ff;
+@color-positive: #2ed06e;
+@color-negative: #f53636;
+@color-warning: #ffa600;
+
+@color-base-white: @color-base-white-light;

package/dist/less/zindex.less

@@ -0,0 +1,17 @@
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// These used to live in Bootstrap.
+
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-popover: 1060;
+@zindex-tooltip: 1070;
+@zindex-navbar-fixed: 1030;
+@zindex-modal-background: 1040;
+@zindex-modal: 1050;
+
+@zindex-mobile-nav-background: 1055;
+@zindex-mobile-nav: 1060;

package/dist/props/custom-media.css

@@ -0,0 +1,9 @@
+@custom-media --screen-xs (min-width: 480px);
+@custom-media --screen-xs-max (max-width: 575px); /* --screen-sm - 1 */
+@custom-media --screen-sm (min-width: 576px);
+@custom-media --screen-sm-max (max-width: 767px); /* --screen-md - 1 */
+@custom-media --screen-md (min-width: 768px);
+@custom-media --screen-md-max (max-width: 991px); /* --screen-lg - 1 */
+@custom-media --screen-lg (min-width: 992px);
+@custom-media --screen-lg-max (max-width: 1199px); /* --screen-xl - 1 */
+@custom-media --screen-xl (min-width: 1200px);

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

@@ -0,0 +1,69 @@
+/*
+  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: var(--radius-small);
+  --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 */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-x-large: 1.8666666667rem; /* 28px */
+  /* stylelint-disable-next-line number-max-precision */
+  --font-size-large: 1.4666666667rem; /* 22px */
+  --font-size-medium: 1.2rem; /* 18px */
+  --font-size: 0.9375rem; /* 15px */
+  /* stylelint-disable-next-line number-max-precision */
+  --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

@@ -0,0 +1,150 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 23 Feb 2023 10:44:58 GMT
+ */
+
+:root {
+  --color-content-primary: #37517e;
+  --color-content-secondary: #5d7079;
+  --color-content-tertiary: #768e9c;
+  --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-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-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;
+  --padding-x-small: 8px;
+  --padding-small: 16px;
+  --padding-medium: 24px;
+  --padding-large: 32px;
+  --radius-full: 50%;
+  --radius-small: 10px;
+  --radius-medium: 16px;
+  --radius-large: 24px;
+  --size-4: 4px;
+  --size-8: 8px;
+  --size-10: 10px;
+  --size-12: 12px;
+  --size-14: 14px;
+  --size-16: 16px;
+  --size-24: 24px;
+  --size-32: 32px;
+  --size-40: 40px;
+  --size-48: 48px;
+  --size-52: 52px;
+  --size-56: 56px;
+  --size-60: 60px;
+  --size-64: 64px;
+  --size-72: 72px;
+  --size-80: 80px;
+  --size-88: 88px;
+  --size-96: 96px;
+  --size-104: 104px;
+  --size-112: 112px;
+  --size-120: 120px;
+  --size-126: 126px;
+  --size-128: 128px;
+  --size-146: 146px;
+  --size-154: 154px;
+  --size-x-small: 24px;
+  --size-small: 32px;
+  --size-medium: 40px;
+  --size-large: 48px;
+  --size-x-large: 56px;
+  --size-2x-large: 72px;
+  --space-content-horizontal: 16px;
+  --space-small: 16px;
+  --space-medium: 32px;
+  --space-large: 40px;
+  --space-x-large: 56px;
+  --font-size-12: 0.75rem;
+  --font-size-14: 0.875rem;
+  --font-size-16: 1rem;
+  --font-size-18: 1.125rem;
+  --font-size-20: 1.25rem;
+  --font-size-22: 1.375rem;
+  --font-size-24: 1.5rem;
+  --font-size-26: 1.625rem;
+  --font-size-28: 1.75rem;
+  --font-size-30: 1.875rem;
+  --font-size-32: 2rem;
+  --letter-spacing-xxs: 0.005em;
+  --letter-spacing-xs: 0.01em;
+  --letter-spacing-sm: 0.0125em;
+  --letter-spacing-md: 0.015em;
+  --letter-spacing-lg: 0.02em;
+  --letter-spacing-xl: 0.025em;
+  --letter-spacing-negative-xxs: -0.005em;
+  --letter-spacing-negative-xs: -0.01em;
+  --letter-spacing-negative-sm: -0.0125em;
+  --letter-spacing-negative-md: -0.015em;
+  --letter-spacing-negative-lg: -0.02em;
+  --letter-spacing-negative-xl: -0.025em;
+  --letter-spacing-negative-xxl: -0.03em;
+  --letter-spacing-negative-xxxl: -0.04em;
+  --letter-spacing-negative-xxxxl: -0.05em;
+  --line-height-18: 1.125rem;
+  --line-height-20: 1.25rem;
+  --line-height-22: 1.375rem;
+  --line-height-24: 1.5rem;
+  --line-height-28: 1.75rem;
+  --line-height-30: 1.875rem;
+  --line-height-32: 2rem;
+  --line-height-34: 2.125rem;
+  --line-height-36: 2.25rem;
+  --line-height-42: 2.625rem;
+  --line-height-48: 3rem;
+  --line-height-title: 1.2;
+  --line-height-body: 1.5;
+  --line-height-control: 1.2;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 800;
+  --font-weight-black: 900;
+  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
+  --font-family-display: 'Wise Sans', 'Inter', sans-serif;
+}
+
+/* DEPRECATED, use neptune-tokens instead: https://transferwise.github.io/neptune-web/styles/tokens/Colors */
+:root {
+  --color-primary: #37517e;
+  --color-secondary: #5d7079;
+  --color-accent: #00b9ff;
+  --color-positive: #2ed06e;
+  --color-negative: #f53636;
+  --color-warning: #ffa600;
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@transferwise/neptune-css",
+  "description": "Neptune CSS library",
+  "version": "0.0.0-experimental-1181467",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "fullname": "transferwise/neptune-web",
+    "url": "git+https://github.com/transferwise/neptune-web.git"
+  },
+  "keywords": [],
+  "author": {
+    "name": "Wise",
+    "url": "https://wise.com/"
+  },
+  "bugs": {
+    "url": "https://github.com/transferwise/neptune-web/issues"
+  },
+  "homepage": "https://transferwise.github.io/neptune-web",
+  "files": [
+    "dist",
+    "src",
+    "scripts",
+    "upgrades/scripts"
+  ],
+  "dependencies": {
+    "@transferwise/neptune-tokens": "^8.4.0",
+    "bootstrap": "github:transferwise/bootstrap#v7.0.0",
+    "inquirer": "^8.2.0",
+    "inquirer-file-tree-selection-prompt": "^1.0.13",
+    "replace-in-file": "6.3.5"
+  },
+  "devDependencies": {
+    "@transferwise/less-config": "^3.0.6",
+    "yargs": "^17.1.1"
+  },
+  "bin": {
+    "neptune-css-upgrade-util": "scripts/neptune-css-upgrader.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm-run-all build:*",
+    "build:clean": "rm -rf dist",
+    "build:copy-assets": "npm-run-all --parallel copy:*",
+    "build:compile-less": "gulp compileLess --src='src/less'",
+    "build:copy-props": "gulp copyPropsAndVars --src='src/props' --dest='dist/props'",
+    "build:copy-vars": "gulp copyPropsAndVars --src='src/variables' --dest='dist/less'",
+    "dev": "npm-run-all --parallel dev:*",
+    "dev:less": "gulp watchLess --src='src/less/**'",
+    "dev:props": "gulp watchPropsAndVars --src='src/props'",
+    "dev:vars": "gulp watchPropsAndVars --src='src/variables'",
+    "docs": "pnpm run build",
+    "copy:images": "cpx 'src/img/**' dist/img",
+    "copy:fonts": "cpx 'src/fonts/*' dist/fonts",
+    "prettier": "prettier --write src/less/*.less"
+  }
+}

package/scripts/neptune-css-upgrader.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+/* eslint-disable no-console, compat/compat */
+
+const { exec } = require('child_process');
+const path = require('path');
+
+const inquirer = require('inquirer');
+const inquirerFileTreeSelection = require('inquirer-file-tree-selection-prompt');
+
+inquirer.registerPrompt('file-tree-selection', inquirerFileTreeSelection);
+
+const IGNORE_PATTERN = '**/node_modules/*';
+const EXTENSIONS = {
+  LESS: 'less',
+  CSS: 'css',
+  BOTH: 'less,css',
+};
+
+const fetchSettings = () => {
+  const questions = [
+    {
+      name: 'upgradeScript',
+      type: 'file-tree-selection',
+      root: path.join(__dirname, '../upgrades/scripts'),
+      message: '✨ Which upgrade would you like to run?',
+    },
+    {
+      type: 'list',
+      name: 'extension',
+      message: '✨ What file extensions should I look at?',
+      choices: Object.values(EXTENSIONS),
+    },
+    {
+      name: 'files',
+      type: 'file-tree-selection',
+      onlyShowDir: true,
+      root: process.cwd(),
+      message: '✨ And what directory would you like to transform?',
+    },
+  ];
+  return inquirer.prompt(questions);
+};
+
+const fetchOptions = () => {
+  const questions = [
+    {
+      name: 'dry',
+      type: 'confirm',
+      message: '✨ Dry run? (no changes are made to files)',
+    },
+    {
+      name: 'verbose',
+      type: 'confirm',
+      message: '✨ Extra logging?',
+      default: false,
+    },
+  ];
+  return inquirer.prompt(questions);
+};
+
+const okToProceed = () => {
+  const questions = [
+    {
+      name: 'confirm',
+      type: 'confirm',
+      message: 'Does everything look ok?',
+    },
+  ];
+  return inquirer.prompt(questions);
+};
+
+const run = async () => {
+  const { upgradeScript, extension, files } = await fetchSettings();
+  const { dry, verbose } = await fetchOptions();
+
+  console.log(`✨ Please review the following:`);
+  console.log(`✨ Upgrade script: ${upgradeScript}`);
+  console.log(`✨ File extension(s): ${extension}`);
+  console.log(`✨ Directory: ${files}`);
+  console.log(`✨ Dry run: ${dry}`);
+
+  const { confirm } = await okToProceed();
+
+  const config = `--files=${files} --extensions=${extension} --ignore=${IGNORE_PATTERN}`;
+  const options = `${dry ? '--dry' : ''} ${verbose ? '--verbose' : ''}`;
+
+  const handleOutput = (error, stdout, stderr) => {
+    if (error) {
+      console.log(stderr);
+      return;
+    }
+    console.log(stdout);
+  };
+
+  const command = `node ${upgradeScript} ${config} ${options}`;
+
+  if (confirm) {
+    console.log('🚀 Running codemod, please wait a few seconds...');
+    console.log(command);
+    exec(command, handleOutput);
+  } else {
+    console.log('👋 Exiting');
+  }
+};
+
+run();