@transferwise/neptune-css 0.0.0-experimental-1181467

package/src/variables/neptune-tokens.less

@@ -0,0 +1,12 @@
+@import "@transferwise/neptune-tokens/tokens.less";
+@import "@transferwise/neptune-tokens/colors-base.less";
+
+// 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/src/variables/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/upgrades/scripts/2021-11-v11-v12.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+/* eslint-disable no-console, compat/compat */
+
+const replace = require('replace-in-file');
+const { argv } = require('yargs');
+
+const mappings = {
+  'color-text-primary': 'color-content-primary',
+  'color-text-secondary': 'color-content-secondary',
+  'color-text-link': 'color-content-accent',
+  'color-text-link-hover': 'color-content-accent-hover',
+  'color-text-link-active': 'color-content-accent-active',
+  'color-text-positive': 'color-content-positive',
+  'color-text-negative': 'color-content-negative',
+  'color-text-warning': 'color-content-warning',
+  'color-text-inactive': 'color-content-disabled',
+  'color-text-important': 'color-content-primary',
+  'color-control-accent': 'color-interactive-accent',
+  'color-control-accent-hover': 'color-interactive-accent-hover',
+  'color-control-accent-active': 'color-interactive-accent-active',
+  'color-control-positive': 'color-interactive-positive',
+  'color-control-positive-hover': 'color-interactive-positive-hover',
+  'color-control-positive-active': 'color-interactive-positive-active',
+  'color-control-negative': 'color-interactive-negative',
+  'color-control-negative-hover': 'color-interactive-negative-hover',
+  'color-control-negative-active': 'color-interactive-negative-active',
+  'color-control-warning': 'color-interactive-warning',
+  'color-control-warning-hover': 'color-interactive-warning-hover',
+  'color-control-warning-active': 'color-interactive-warning-active',
+  'color-border-focus': 'color-accent',
+  'color-border-positive': 'color-positive',
+  'color-border-warning': 'color-warning',
+  'color-border-negative': 'color-negative',
+};
+
+// Special case mappings that are not exchanging variable for variable
+const from = [new RegExp('@color-text-control', 'g'), /var\(--color-text-control\)/g];
+const to = ['#fff', '#fff'];
+
+Object.keys(mappings).forEach((value) => {
+  from.push(new RegExp(`@${value}`, 'g'));
+  from.push(new RegExp(`--${value}`, 'g'));
+});
+
+Object.values(mappings).forEach((value) => {
+  to.push(`@${value}`);
+  to.push(`--${value}`);
+});
+
+const { files, dry, verbose, extensions, ignore } = argv;
+
+const options = {
+  files: `${files}/**/*.{${extensions}}`,
+  from,
+  to,
+  dry: !!dry,
+  verbose: !!verbose,
+  ignore,
+};
+
+replace(options);