@transferwise/neptune-css 14.8.1 → 14.9.0

package/dist/css/wells.css

@@ -1 +1,74 @@
-.well,.well-xs{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}@media only screen and (min-width:576px){.well-sm{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}}@media only screen and (min-width:768px){.well-md{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}}@media only screen and (min-width:992px){.well-lg{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}}@media only screen and (min-width:1200px){.well-xl{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);border-radius:10px;border-radius:var(--radius-small);box-shadow:none;margin-bottom:24px;margin-bottom:var(--size-24);min-height:24px;min-height:var(--size-24);padding:24px;padding:var(--size-24)}}
+.well,
+.well-xs {
+  min-height: 24px;
+  min-height: var(--size-24);
+  margin-bottom: 24px;
+  margin-bottom: var(--size-24);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  border: solid 1px rgba(0,0,0,0.10196);
+  border: solid 1px var(--color-border-neutral);
+  padding: 24px;
+  padding: var(--size-24);
+  box-shadow: none;
+}
+@media only screen and (min-width: 576px) {
+  .well-sm {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .well-md {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .well-lg {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .well-xl {
+    min-height: 24px;
+    min-height: var(--size-24);
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    border-radius: 10px;
+    border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
+    border: solid 1px var(--color-border-neutral);
+    padding: 24px;
+    padding: var(--size-24);
+    box-shadow: none;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.8.1",
+  "version": "14.9.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,12 +28,13 @@
   "devDependencies": {
     "modern-normalize": "^2.0.0",
     "yargs": "^17.1.1",
-    "@transferwise/less-config": "3.0.6"
+    "@transferwise/less-config": "3.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "analyze:css-selectors": "node ./scripts/analyze-css-selectors.js",
     "build": "npm-run-all build:*",
     "build:clean": "rm -rf dist",
     "build:copy-assets": "npm-run-all --parallel copy:*",

package/scripts/analyze-css-selectors.js

@@ -0,0 +1,39 @@
+/* eslint-disable no-console */
+
+const fs = require('node:fs');
+const path = require('node:path');
+
+const postcss = require('postcss');
+
+const root = postcss.parse(fs.readFileSync(path.join(__dirname, '../dist/css/neptune.css')));
+
+/** @type {Set<string>} */
+const selectors = new Set();
+
+/**
+ * @param {postcss.ChildNode} node
+ */
+function visitNode(node) {
+  switch (node.type) {
+    case 'rule': {
+      for (const selector of node.selectors) {
+        selectors.add(selector);
+      }
+      break;
+    }
+    case 'atrule': {
+      for (const childNode of node.nodes) {
+        visitNode(childNode);
+      }
+      break;
+    }
+    default:
+  }
+}
+
+for (const node of root.nodes) {
+  visitNode(node);
+}
+
+const sortedClassNameSelectors = [...selectors].filter((selector) => selector.includes('.')).sort();
+console.log(JSON.stringify(sortedClassNameSelectors, null, 2));

package/src/less/{mixins → addons}/_center-block.less

@@ -1,7 +1,5 @@
-// Center-align a block level element
-
-.center-block() {
-  display: block;
+.center-block {
   margin-left: auto;
   margin-right: auto;
+  display: block;
 }

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

@@ -1,37 +1,14 @@
 @import "../mixins/_spacing.less";
 
-.spacing(0, 0);
-.spacing(1, var(--size-8));
-.spacing(2, var(--size-16));
-.spacing(3, var(--size-24));
-.spacing(4, var(--size-32));
-.spacing(5, var(--size-40));
-
-.spacing-vertical(4, var(--size-32));
-.spacing-vertical(5, var(--size-40));
-
-.gap-y-1 {
-  row-gap: var(--size-8);
-}
+@import "../utilities/gap.less";
+@import "../utilities/margin.less";
+@import "../utilities/padding.less";
 
 .responsive-spacing(panel, var(--size-16), var(--size-24), var(--size-32));
 .responsive-spacing-vertical(section-1, var(--size-16), var(--size-24), var(--size-32));
 .responsive-spacing-vertical(section-2, var(--size-32), var(--size-48), var(--size-64));
 .responsive-spacing-vertical(section-3, var(--size-48), var(--size-72), var(--size-96));
 
-.m-x-auto {
-  .margin(right,auto) !important;
-  .margin(left, auto) !important;
-}
-
-.m-r-auto {
-  .margin(right,auto) !important;
-}
-
-.m-l-auto {
-  .margin(left, auto) !important;
-}
-
 .section {
   padding-top: var(--size-48);
   padding-bottom: var(--size-48);

package/src/less/border-radius.less

@@ -1,3 +1 @@
-.rounded-sm {
-  border-radius: 2px;
-}
+@import "./utilities/border-radius.less";

package/src/less/buttons.less

@@ -200,7 +200,7 @@
 .btn-link,
 .btn-accent:not(.disabled, :disabled).btn-priority-3 {
   color: var(--color-content-accent);
-  text-decoration: @link-decoration;
+  text-decoration: underline;
   border-color: transparent;
 
   &,
@@ -214,7 +214,7 @@
   &:not(.disabled, :disabled):hover,
   &:not(.disabled, :disabled):focus-visible {
     color: var(--color-content-accent-hover);
-    text-decoration: @link-decoration;
+    text-decoration: underline;
     border-color: transparent;
     background-color: transparent;
   }
@@ -226,18 +226,15 @@
   .np-theme-personal & {
     color: var(--color-interactive-primary);
     border-color: transparent;
-    text-decoration-thickness: 2px;
     .link-underline();
 
     &:not(.disabled, :disabled):hover,
     &:not(.disabled, :disabled):focus-visible {
       color: var(--color-interactive-primary-hover);
       border-color: transparent;
-      text-decoration-thickness: 2px;
     }
 
     &:not(.disabled, :disabled):active {
-      text-decoration-thickness: 2px;
       color: var(--color-interactive-primary-active);
       background-color: var(--color-background-screen-active) !important;
     }
@@ -252,7 +249,6 @@
   text-decoration: underline;
 
   .np-theme-personal & {
-    text-decoration-thickness: 2px;
     .link-underline();
   }
 }

package/src/less/core/_scaffolding.less

@@ -5,8 +5,13 @@
 @import (reference) "../mixins/_logical-properties.less";
 @import (reference) "../mixins/_links.less";
 @import (reference) "../core/_typography.less";
+@import (reference) "../utilities/border-radius.less";
 @import "../../variables/legacy-variables.less";
 
+/* TODO: Remove utility imports to prevent duplicates */
+@import "../utilities/border-radius.less";
+@import "../utilities/screen-reader.less";
+
 :root {
   // page default font size should be set in absolute units (pixels)
   --base-font-size: 16px;
@@ -333,11 +338,11 @@ video {
 }
 
 .img-rounded {
-  border-radius: var(--radius-small);
+  .rounded();
 }
 
 .img-circle {
-  border-radius: 50%;
+  .rounded-full();
 }
 
 .disabled,
@@ -346,28 +351,3 @@ video {
   opacity: 0.45;
   cursor: not-allowed !important;
 }
-
-// Only display content to screen readers
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-}
-
-// Use in conjunction with `.sr-only` to only display content when it's focused.
-.sr-only-focusable {
-  &:active,
-  &:focus {
-    position: static;
-    width: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    clip: auto;
-  }
-}

package/src/less/core/_typography-utilities.less

@@ -3,247 +3,27 @@
 @import (reference) "../mixins/_links.less";
 @import "../mixins/_text-emphasis.less";
 
-// Deprecated classes in next iterations.
-
-//.text-danger (Replaced by .text-negative)
-//.text-success( Replaced by .text-positive)
-
-.text-xs-left {
-  .text-align(left);
-}
-
-.text-xs-right {
-  .text-align(right);
-}
-
-.text-xs-center {
-  text-align: center;
-}
-
-.text-xs-justify {
-  text-align: justify;
-}
-
-.text-xs-nowrap {
-  white-space: nowrap;
-}
-
-@media (--screen-sm) {
-  .text-sm-left {
-    .text-align(left);
-  }
-
-  .text-sm-right {
-    .text-align(right);
-  }
-
-  .text-sm-center {
-    text-align: center;
-  }
-
-  .text-sm-justify {
-    text-align: justify;
-  }
-
-  .text-sm-nowrap {
-    white-space: nowrap;
-  }
-}
-
-@media (--screen-md) {
-  .text-md-left {
-    .text-align(left);
-  }
-
-  .text-md-right {
-    .text-align(right);
-  }
-
-  .text-md-center {
-    text-align: center;
-  }
-
-  .text-md-justify {
-    text-align: justify;
-  }
-
-  .text-md-nowrap {
-    white-space: nowrap;
-  }
-}
-
-@media (--screen-lg) {
-  .text-lg-left {
-    .text-align(left);
-  }
-
-  .text-lg-right {
-    .text-align(right);
-  }
-
-  .text-lg-center {
-    text-align: center;
-  }
-
-  .text-lg-justify {
-    text-align: justify;
-  }
-
-  .text-lg-nowrap {
-    white-space: nowrap;
-  }
-}
-
-@media (--screen-xl) {
-  .text-xl-left {
-    .text-align(left);
-  }
-
-  .text-xl-right {
-    .text-align(right);
-  }
-
-  .text-xl-center {
-    text-align: center;
-  }
-
-  .text-xl-justify {
-    text-align: justify;
-  }
-
-  .text-xl-nowrap {
-    white-space: nowrap;
-  }
-}
-
-.text-lowercase {
-  text-transform: lowercase;
-}
-
-.text-uppercase {
-  text-transform: uppercase;
-}
-
-.text-capitalize {
-  text-transform: capitalize;
-}
-
-.text-underline {
-  .link-underline(true);
-}
-
-.text-no-decoration {
-  text-decoration: none !important;
-}
-
-.text-ellipsis,
-.text-ellipses {
-  display: block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.text-max-width {
-  max-width: 600px;
-}
-
-.text-word-break {
-  word-break: break-all;
-}
-
-.font-weight-bold {
-  font-weight: var(--font-weight-bold) !important;
-}
-
-.font-weight-semi-bold {
-  font-weight: var(--font-weight-semi-bold) !important;
-}
-
-.font-weight-normal {
-  font-weight: var(--font-weight-regular) !important;
-}
-
+/* TODO: Remove utility imports to prevent duplicates */
+@import "../utilities/color.less";
+@import "../utilities/font-weight.less";
+@import "../utilities/max-width.less";
+@import "../utilities/overflow-wrap.less";
+@import "../utilities/text-align.less";
+@import "../utilities/text-decoration-line.less";
+@import "../utilities/text-overflow.less";
+@import "../utilities/text-transform.less";
+@import "../utilities/white-space.less";
+
+/**
+ * @deprecated Obsolete since the brand has turned green.
+ */
 .font-italic {
   font-style: italic !important;
 }
 
-// Contextual colors `.text-*`
-
-.text-primary {
-  .text-emphasis-variant(var(--color-content-primary), var(--color-content-primary), var(--color-content-primary));
-
-  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
-  .bg-primary & {
-    color: @color-navy-content-primary !important;
-  }
-}
-
-.text-secondary {
-  color: var(--color-content-secondary) !important;
-}
-
-.text-positive,
-.text-success {
-  .text-emphasis-variant(
-    var(--color-content-positive),
-    var(--color-content-positive),
-    var(--color-content-positive-hover)
-  );
-
-  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
-  .bg-primary & {
-    color: @color-navy-content-positive !important;
-  }
-}
-
-.text-accent,
-.text-info {
-  .text-emphasis-variant(var(--color-content-accent), var(--color-content-accent), var(--color-content-accent-hover));
-  color: var(--color-interactive-primary) !important;
-
-  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
-  .bg-primary & {
-    color: @color-navy-content-accent !important;
-  }
-}
-
-.text-warning {
-  .text-emphasis-variant(
-    var(--color-content-warning),
-    var(--color-content-warning),
-    var(--color-content-warning-hover),
-  );
-
-  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
-  .bg-primary & {
-    color: @color-navy-content-warning !important;
-  }
-}
-
-.text-negative,
-.text-danger {
-  .text-emphasis-variant(
-    var(--color-sentiment-negative),
-    var(--color-sentiment-negative),
-    var(--color-sentiment-negative-hover)
-  );
-
-  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
-  .bg-primary & {
-    color: @color-navy-content-negative !important;
-  }
-}
-
-.text-inverse {
-  .text-emphasis-variant(@color-navy-content-primary, @color-navy-content-primary, @color-navy-content-secondary);
-}
-
-.text-muted {
-  color: var(--color-content-tertiary) !important;
-}
-
-// @deprecated: we no longer have "colored dot" design feature in new brand
+/**
+ * @deprecated Obsolete since the brand has turned green.
+ */
 .colored-dot {
   &::after {
     content: none;

package/src/less/flex.less

@@ -1,24 +1,15 @@
 // mixins
-@import (reference) "./mixins/_flex.less";
 @import (reference) "./mixins/_logical-properties.less";
 
-.flex-properties(~"");
-
-@media (--screen-sm) {
-  .flex-properties(--sm);
-}
-
-@media (--screen-md) {
-  .flex-properties(--md);
-}
-
-@media (--screen-lg) {
-  .flex-properties(--lg);
-}
-
-@media (--screen-xl) {
-  .flex-properties(--xl);
-}
+/* TODO: Remove utility imports to prevent duplicates */
+@import "./utilities/align-items.less";
+@import "./utilities/align-self.less";
+@import "./utilities/display.less";
+@import "./utilities/flex-direction.less";
+@import "./utilities/flex-grow.less";
+@import "./utilities/flex-wrap.less";
+@import "./utilities/justify-content.less";
+@import "./utilities/order.less";
 
 /* Items */
 .flex__inner {

package/src/less/navbar.less

@@ -4,12 +4,15 @@
 @import (reference) "./mixins/_arrows.less";
 @import (reference) "./mixins/_border-radius.less";
 @import (reference) "./mixins/_clearfix.less";
-@import (reference) "./mixins/_center-block.less";
 @import (reference) "./mixins/_hide-text.less";
 @import (reference) "./mixins/_grid.less";
 @import (reference) "./mixins/_tab-focus.less";
 @import (reference) "./mixins/_logical-properties.less";
-@import "./addons/_utilities.less";
+
+/* TODO: Remove utility imports to prevent duplicates */
+@import "./addons/_center-block.less";
+@import "./utilities/float.less";
+
 @import "dropdowns.less";
 @import "navs.less";
 @import "navbar-base.less";
@@ -104,3 +107,8 @@
 .navbar-background--inverse {
   background-color: @color-navy-background-elevated;
 }
+
+/* TODO: Remove to prefer direct utility imports */
+.clearfix {
+  .clearfix();
+}

package/src/less/neptune-addons.less

@@ -1,4 +1,7 @@
 @import "./addons/_background-utilities.less";
-@import "./addons/_display-utilities.less";
 @import "./addons/_spacing-utilities.less";
 @import "./addons/_border.less";
+
+/* TODO: Remove utility imports to prevent duplicates */
+@import "./utilities/display.less";
+@import "./utilities/outline-style.less";