@transferwise/neptune-css 14.28.1 → 14.28.2

package/dist/less/legacy-variables.less

@@ -5,7 +5,6 @@
 //== Media queries breakpoints
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 09 Jun 2026 08:11:03 GMT
 
 // @deprecated Use @screen-xs-min
 @screen-xs: 320px;

package/dist/less/neptune-tokens.less

@@ -1,6 +1,5 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 09 Jun 2026 08:11:03 GMT
 
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -222,7 +221,6 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 09 Jun 2026 08:11:03 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/dist/props/custom-media.css

@@ -1,6 +1,5 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 @custom-media --screen-400-zoom (width <= 320px);

package/dist/props/neptune-tokens.css

@@ -1,6 +1,5 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 :root {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.28.1",
+  "version": "14.28.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "scripts"
   ],
   "dependencies": {
-    "@transferwise/neptune-tokens": "^8.24.1"
+    "@transferwise/neptune-tokens": "^8.26.0"
   },
   "devDependencies": {
     "gulp": "^5.0.1",
@@ -44,7 +44,7 @@
     "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:compile-less": "gulp compileLess --src='src/less' --legacy-package",
     "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:*",

package/src/less/alerts.less

@@ -1,5 +1,4 @@
 @import (reference) "../variables/legacy-variables.less";
-@import (reference) "./addons/_spacing-utilities.less";
 @import (reference) "../variables/neptune-tokens.less";
 @import (reference) "./mixins/_alerts.less";
 
@@ -24,7 +23,7 @@
       align-items: flex-start;
       flex-direction: column;
       justify-content: center;
-      
+
       .alert__action {
         margin-top: var(--size-8);
       }

package/src/less/core/viewport-themes.less

@@ -1,51 +1,8 @@
-@import '@transferwise/neptune-tokens/themes/personal/tokens.less';
+@import "@transferwise/neptune-tokens/themes/personal/tokens.less";
+@import "@transferwise/neptune-tokens/tiny-viewport.less";
 
 @media (--screen-400-zoom) {
   .np-theme-personal {
-    --delta: 2;
-
-    --size-4: calc(@size-4 / var(--delta));
-    --size-5: calc(@size-5 / var(--delta));
-    --size-8: calc(@size-8 / var(--delta));
-    --size-10: calc(@size-10 / var(--delta));
-    --size-12: calc(@size-12 / var(--delta));
-    --size-14: calc(@size-14 / var(--delta));
-    --size-16: calc(@size-16 / var(--delta));
-    --size-24: calc(@size-24 / var(--delta));
-    --size-32: calc(@size-32 / var(--delta));
-    --size-40: calc(@size-40 / var(--delta));
-    --size-48: calc(@size-48 / var(--delta));
-    --size-52: calc(@size-52 / var(--delta));
-    --size-56: calc(@size-56 / var(--delta));
-    --size-60: calc(@size-60 / var(--delta));
-    --size-64: calc(@size-64 / var(--delta));
-    --size-72: calc(@size-72 / var(--delta));
-    --size-80: calc(@size-80 / var(--delta));
-    --size-88: calc(@size-88 / var(--delta));
-    --size-96: calc(@size-96 / var(--delta));
-    --size-104: calc(@size-104 / var(--delta));
-    --size-112: calc(@size-112 / var(--delta));
-    --size-120: calc(@size-120 / var(--delta));
-    --size-126: calc(@size-126 / var(--delta));
-    --size-128: calc(@size-128 / var(--delta));
-    --size-146: calc(@size-146 / var(--delta));
-    --size-154: calc(@size-154 / var(--delta));
-    --size-x-small: calc(@size-x-small / var(--delta));
-    --size-small: calc(@size-small / var(--delta));
-    --size-medium: calc(@size-medium / var(--delta));
-    --size-large: calc(@size-large / var(--delta));
-    --size-x-large: calc(@size-x-large / var(--delta));
-    --size-2x-large: calc(@size-2x-large / var(--delta));
-    --space-content-horizontal: calc(@space-content-horizontal / var(--delta));
-    --space-small: calc(@space-small / var(--delta));
-    --space-medium: calc(@space-medium / var(--delta));
-    --space-large: calc(@space-large / var(--delta));
-    --space-x-large: calc(@space-x-large / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
-
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

package/src/less/forms/bootstrap-forms.less

@@ -636,7 +636,7 @@ input[type="password"] {
 //
 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
 // forms begin stacked on extra small (mobile) devices and then go inline when
-// viewports reach <768px.
+// viewports reach <840px.
 //
 // Requires wrapping inputs and labels with `.form-group` for proper display of
 // default HTML form controls and our custom form controls (e.g., input groups).

package/src/less/modals.less

@@ -190,7 +190,7 @@
   // Automatically set modal's width for larger viewports
 
   .modal-dialog {
-    width: @modal-md;
+    width: (@screen-sm-min - 36px);
     margin: (@padding-base-vertical * 4) auto;
   }
 
@@ -224,16 +224,16 @@
   }
 }
 
-@media (min-width: (@modal-sm + 32px)) {
+@media (--screen-xs) {
   .modal-sm {
-    width: @modal-sm;
+    width: (@screen-xs-min - 20px);
     margin: (@padding-base-vertical * 4) auto;
   }
 }
 
 @media (--screen-md) {
   .modal-lg {
-    width: @modal-lg;
+    width: (@screen-md-min - 16px);
     margin: (@padding-base-vertical * 4) auto;
   }
 }

package/src/less/navbar.less

@@ -64,7 +64,7 @@
 // Navbar collapse (body)
 //
 // Group your navbar content into this for easy collapsing and expanding across
-// various device sizes. By default, this content is collapsed when <768px, but
+// various device sizes. By default, this content is collapsed when <840px, but
 // will expand past that for a horizontal display.
 //
 // To start (on mobile devices) the navbar links, forms, and buttons are stacked
@@ -291,7 +291,7 @@
 // Navbar nav links
 //
 // Builds on top of the `.nav` components with its own modifier class to make
-// the nav the full height of the horizontal nav (above 768px).
+// the nav the full height of the horizontal nav (above 840px).
 
 .navbar-nav {
   > li {

package/src/less/neptune.bundle.less

@@ -1,18 +1,24 @@
 @import "@transferwise/neptune-tokens/breakpoints.less";
 @import "@transferwise/neptune-tokens/tokens.css";
-@import '@transferwise/neptune-tokens/themes/personal/tokens.css';
-@import '@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css';
-@import '@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css';
-@import '@transferwise/neptune-tokens/themes/personal--dark/tokens.css';
-@import '@transferwise/neptune-tokens/themes/platform/tokens.css';
-@import '@transferwise/neptune-tokens/themes/platform--forest-green/tokens.css';
-@import '@transferwise/neptune-tokens/themes/business/tokens.css';
-@import '@transferwise/neptune-tokens/themes/business--dark/tokens.css';
-@import '@transferwise/neptune-tokens/themes/business--forest-green/tokens.css';
-@import '@transferwise/neptune-tokens/themes/business--bright-green/tokens.css';
-@import "./neptune-core.less";
-@import './core/viewport-themes.less';
-@import "./neptune-addons.less";
+@import "@transferwise/neptune-tokens/themes/personal/tokens.css";
+@import "@transferwise/neptune-tokens/themes/personal--forest-green/tokens.css";
+@import "@transferwise/neptune-tokens/themes/personal--bright-green/tokens.css";
+@import "@transferwise/neptune-tokens/themes/personal--dark/tokens.css";
+@import "@transferwise/neptune-tokens/themes/platform/tokens.css";
+@import "@transferwise/neptune-tokens/themes/platform--forest-green/tokens.css";
+@import "@transferwise/neptune-tokens/themes/business/tokens.css";
+@import "@transferwise/neptune-tokens/themes/business--dark/tokens.css";
+@import "@transferwise/neptune-tokens/themes/business--forest-green/tokens.css";
+@import "@transferwise/neptune-tokens/themes/business--bright-green/tokens.css";
+@import "./core/_fonts.less";
+@import "./core/_scaffolding.less";
+@import "./core/_typography.less";
+@import "./core/_typography-utilities.less";
+@import "./core/viewport-themes.less";
+@import "./addons/_background-utilities.less";
+@import "./addons/_display-utilities.less";
+@import "./addons/_spacing-utilities.less";
+@import "./addons/_border.less";
 
 // Components
 @import "./components/_component-animations.less";
@@ -54,3 +60,5 @@
 @import "./tick.less";
 @import "./utilities.less";
 @import "./wells.less";
+
+@import "./neptune-social-media.less";

package/src/less/table.less

@@ -216,7 +216,7 @@ table col[class*="col-"] {
 // Responsive tables
 //
 // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
-// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// by enabling horizontal scrolling. Only applies <840px. Everything above that
 // will display normally.
 
 .table-responsive {

package/src/less/wells.less

@@ -29,7 +29,7 @@
 }
 
 .well-lg,
-/// deprecated
+/// @deprecated
 .well-xl {
   .sized-well(--screen-lg);
 }