@transferwise/components 0.0.0-experimental-a300766 → 0.0.0-experimental-b50b79b

package/src/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:43 GMT
+ * Generated on Wed, 13 May 2026 12:45:11 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:44 GMT
+ * Generated on Wed, 13 May 2026 12:45:12 GMT
  */
 
 .np-theme-business--bright-green {
@@ -3244,47 +3244,49 @@ a,
   font-synthesis: none;
 }
 
-:lang(ja) .display-1,
-:lang(ja) .display-2,
-:lang(ja) .display-3,
-:lang(ja) .display-4,
-:lang(ja) .display-5,
-:lang(ja) .np-text-display-extra-large,
-:lang(ja) .np-text-display-large,
-:lang(ja) .np-text-display-medium,
-:lang(ja) .np-text-display-small,
-:lang(th) .display-1,
-:lang(th) .display-2,
-:lang(th) .display-3,
-:lang(th) .display-4,
-:lang(th) .display-5,
-:lang(th) .np-text-display-extra-large,
-:lang(th) .np-text-display-large,
-:lang(th) .np-text-display-medium,
-:lang(th) .np-text-display-small,
-:lang(zh-CN) .display-1,
-:lang(zh-CN) .display-2,
-:lang(zh-CN) .display-3,
-:lang(zh-CN) .display-4,
-:lang(zh-CN) .display-5,
-:lang(zh-CN) .np-text-display-extra-large,
-:lang(zh-CN) .np-text-display-large,
-:lang(zh-CN) .np-text-display-medium,
-:lang(zh-CN) .np-text-display-small,
-:lang(zh-HK) .display-1,
-:lang(zh-HK) .display-2,
-:lang(zh-HK) .display-3,
-:lang(zh-HK) .display-4,
-:lang(zh-HK) .display-5,
-:lang(zh-HK) .np-text-display-extra-large,
-:lang(zh-HK) .np-text-display-large,
-:lang(zh-HK) .np-text-display-medium,
-:lang(zh-HK) .np-text-display-small {
+:lang(ja) .display-1:not(.wds-text-display--forced),
+:lang(ja) .display-2:not(.wds-text-display--forced),
+:lang(ja) .display-3:not(.wds-text-display--forced),
+:lang(ja) .display-4:not(.wds-text-display--forced),
+:lang(ja) .display-5:not(.wds-text-display--forced),
+:lang(ja) .np-text-display-extra-large:not(.wds-text-display--forced),
+:lang(ja) .np-text-display-large:not(.wds-text-display--forced),
+:lang(ja) .np-text-display-medium:not(.wds-text-display--forced),
+:lang(ja) .np-text-display-small:not(.wds-text-display--forced),
+:lang(th) .display-1:not(.wds-text-display--forced),
+:lang(th) .display-2:not(.wds-text-display--forced),
+:lang(th) .display-3:not(.wds-text-display--forced),
+:lang(th) .display-4:not(.wds-text-display--forced),
+:lang(th) .display-5:not(.wds-text-display--forced),
+:lang(th) .np-text-display-extra-large:not(.wds-text-display--forced),
+:lang(th) .np-text-display-large:not(.wds-text-display--forced),
+:lang(th) .np-text-display-medium:not(.wds-text-display--forced),
+:lang(th) .np-text-display-small:not(.wds-text-display--forced),
+:lang(zh-CN) .display-1:not(.wds-text-display--forced),
+:lang(zh-CN) .display-2:not(.wds-text-display--forced),
+:lang(zh-CN) .display-3:not(.wds-text-display--forced),
+:lang(zh-CN) .display-4:not(.wds-text-display--forced),
+:lang(zh-CN) .display-5:not(.wds-text-display--forced),
+:lang(zh-CN) .np-text-display-extra-large:not(.wds-text-display--forced),
+:lang(zh-CN) .np-text-display-large:not(.wds-text-display--forced),
+:lang(zh-CN) .np-text-display-medium:not(.wds-text-display--forced),
+:lang(zh-CN) .np-text-display-small:not(.wds-text-display--forced),
+:lang(zh-HK) .display-1:not(.wds-text-display--forced),
+:lang(zh-HK) .display-2:not(.wds-text-display--forced),
+:lang(zh-HK) .display-3:not(.wds-text-display--forced),
+:lang(zh-HK) .display-4:not(.wds-text-display--forced),
+:lang(zh-HK) .display-5:not(.wds-text-display--forced),
+:lang(zh-HK) .np-text-display-extra-large:not(.wds-text-display--forced),
+:lang(zh-HK) .np-text-display-large:not(.wds-text-display--forced),
+:lang(zh-HK) .np-text-display-medium:not(.wds-text-display--forced),
+:lang(zh-HK) .np-text-display-small:not(.wds-text-display--forced) {
   /**
      * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
@@ -4351,53 +4353,48 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --padding-x-small: 4px;
-    --padding-small: 8px;
-    --padding-medium: 12px;
-    --padding-large: 16px;
-    --size-4: 2px;
-    --size-5: 2.5px;
-    --size-8: 4px;
-    --size-10: 5px;
-    --size-12: 6px;
-    --size-14: 7px;
-    --size-16: 8px;
-    --size-24: 12px;
-    --size-32: 16px;
-    --size-40: 20px;
-    --size-48: 24px;
-    --size-52: 26px;
-    --size-56: 28px;
-    --size-60: 30px;
-    --size-64: 32px;
-    --size-72: 36px;
-    --size-80: 40px;
-    --size-88: 44px;
-    --size-96: 48px;
-    --size-104: 52px;
-    --size-112: 56px;
-    --size-120: 60px;
-    --size-126: 63px;
-    --size-128: 64px;
-    --size-146: 73px;
-    --size-154: 77px;
-    --size-160: 80px;
-    --size-x-small: 12px;
-    --size-small: 16px;
-    --size-medium: 20px;
-    --size-large: 24px;
-    --size-x-large: 28px;
-    --size-2x-large: 36px;
-    --space-content-horizontal: 8px;
-    --space-small: 8px;
-    --space-medium: 16px;
-    --space-large: 20px;
-    --space-x-large: 28px;
-  }
-}
-
-@media (max-width: 320px) {
-  .np-theme-personal {
+    --delta: 2;
+    --size-4: calc(4px / var(--delta));
+    --size-5: calc(5px / var(--delta));
+    --size-8: calc(8px / var(--delta));
+    --size-10: calc(10px / var(--delta));
+    --size-12: calc(12px / var(--delta));
+    --size-14: calc(14px / var(--delta));
+    --size-16: calc(16px / var(--delta));
+    --size-24: calc(24px / var(--delta));
+    --size-32: calc(32px / var(--delta));
+    --size-40: calc(40px / var(--delta));
+    --size-48: calc(48px / var(--delta));
+    --size-52: calc(52px / var(--delta));
+    --size-56: calc(56px / var(--delta));
+    --size-60: calc(60px / var(--delta));
+    --size-64: calc(64px / var(--delta));
+    --size-72: calc(72px / var(--delta));
+    --size-80: calc(80px / var(--delta));
+    --size-88: calc(88px / var(--delta));
+    --size-96: calc(96px / var(--delta));
+    --size-104: calc(104px / var(--delta));
+    --size-112: calc(112px / var(--delta));
+    --size-120: calc(120px / var(--delta));
+    --size-126: calc(126px / var(--delta));
+    --size-128: calc(128px / var(--delta));
+    --size-146: calc(146px / var(--delta));
+    --size-154: calc(154px / var(--delta));
+    --size-x-small: calc(24px / var(--delta));
+    --size-small: calc(32px / var(--delta));
+    --size-medium: calc(40px / var(--delta));
+    --size-large: calc(48px / var(--delta));
+    --size-x-large: calc(56px / var(--delta));
+    --size-2x-large: calc(72px / var(--delta));
+    --space-content-horizontal: calc(16px / var(--delta));
+    --space-small: calc(16px / var(--delta));
+    --space-medium: calc(32px / var(--delta));
+    --space-large: calc(40px / var(--delta));
+    --space-x-large: calc(56px / 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/styles/less/core/_typography.less

@@ -8,7 +8,17 @@
 
 /* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.h1, .h2, .h3, .h4, .h5, .h6, .title-1, .title-2, .title-3, .title-4, .title-5,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.title-1,
+.title-2,
+.title-3,
+.title-4,
+.title-5,
 h1,
 h2,
 h3,
@@ -114,8 +124,12 @@ h6,
 
 /* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-2, .body-3, .small, .tiny,
-body, small,
+.body-2,
+.body-3,
+.small,
+.tiny,
+body,
+small,
 .np-text-body-default {
   font-size: var(--font-size-14);
   line-height: 155%;
@@ -139,7 +153,8 @@ body, small,
 
 /* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-1, .value,
+.body-1,
+.value,
 .np-text-body-large {
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-16);
@@ -207,15 +222,17 @@ a,
   font-family: var(--font-family-display);
   font-synthesis: none;
 
-  :lang(ja) &,
-  :lang(th) &,
-  :lang(zh-CN) &,
-  :lang(zh-HK) & {
+  :lang(ja) &:not(.wds-text-display--forced),
+  :lang(th) &:not(.wds-text-display--forced),
+  :lang(zh-CN) &:not(.wds-text-display--forced),
+  :lang(zh-HK) &:not(.wds-text-display--forced) {
     /**
      * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
      * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
      * font files are browser-cached and we carried over to launchpad, where it causes issues
      * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
+     * There are exceptions for small UI parts where Wise Sans is fine or expected — e.g. the
+     * numeric input of ExpressiveMoneyInput. Add .wds-text-display--forced to opt out.
      */
     font-family: var(--font-family-regular);
   }

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

@@ -1,51 +1,47 @@
 @media (max-width: 320px) {
   .np-theme-personal {
-    --padding-x-small: 4px;
-    --padding-small: 8px;
-    --padding-medium: 12px;
-    --padding-large: 16px;
-    --size-4: 2px;
-    --size-5: 2.5px;
-    --size-8: 4px;
-    --size-10: 5px;
-    --size-12: 6px;
-    --size-14: 7px;
-    --size-16: 8px;
-    --size-24: 12px;
-    --size-32: 16px;
-    --size-40: 20px;
-    --size-48: 24px;
-    --size-52: 26px;
-    --size-56: 28px;
-    --size-60: 30px;
-    --size-64: 32px;
-    --size-72: 36px;
-    --size-80: 40px;
-    --size-88: 44px;
-    --size-96: 48px;
-    --size-104: 52px;
-    --size-112: 56px;
-    --size-120: 60px;
-    --size-126: 63px;
-    --size-128: 64px;
-    --size-146: 73px;
-    --size-154: 77px;
-    --size-160: 80px;
-    --size-x-small: 12px;
-    --size-small: 16px;
-    --size-medium: 20px;
-    --size-large: 24px;
-    --size-x-large: 28px;
-    --size-2x-large: 36px;
-    --space-content-horizontal: 8px;
-    --space-small: 8px;
-    --space-medium: 16px;
-    --space-large: 20px;
-    --space-x-large: 28px;
-  }
-}
-@media (max-width: 320px) {
-  .np-theme-personal {
+    --delta: 2;
+    --size-4: calc(4px / var(--delta));
+    --size-5: calc(5px / var(--delta));
+    --size-8: calc(8px / var(--delta));
+    --size-10: calc(10px / var(--delta));
+    --size-12: calc(12px / var(--delta));
+    --size-14: calc(14px / var(--delta));
+    --size-16: calc(16px / var(--delta));
+    --size-24: calc(24px / var(--delta));
+    --size-32: calc(32px / var(--delta));
+    --size-40: calc(40px / var(--delta));
+    --size-48: calc(48px / var(--delta));
+    --size-52: calc(52px / var(--delta));
+    --size-56: calc(56px / var(--delta));
+    --size-60: calc(60px / var(--delta));
+    --size-64: calc(64px / var(--delta));
+    --size-72: calc(72px / var(--delta));
+    --size-80: calc(80px / var(--delta));
+    --size-88: calc(88px / var(--delta));
+    --size-96: calc(96px / var(--delta));
+    --size-104: calc(104px / var(--delta));
+    --size-112: calc(112px / var(--delta));
+    --size-120: calc(120px / var(--delta));
+    --size-126: calc(126px / var(--delta));
+    --size-128: calc(128px / var(--delta));
+    --size-146: calc(146px / var(--delta));
+    --size-154: calc(154px / var(--delta));
+    --size-x-small: calc(24px / var(--delta));
+    --size-small: calc(32px / var(--delta));
+    --size-medium: calc(40px / var(--delta));
+    --size-large: calc(48px / var(--delta));
+    --size-x-large: calc(56px / var(--delta));
+    --size-2x-large: calc(72px / var(--delta));
+    --space-content-horizontal: calc(16px / var(--delta));
+    --space-small: calc(16px / var(--delta));
+    --space-medium: calc(32px / var(--delta));
+    --space-large: calc(40px / var(--delta));
+    --space-x-large: calc(56px / 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/styles/less/core/viewport-themes.less

@@ -1,8 +1,51 @@
-@import "@transferwise/neptune-tokens/themes/personal/tokens.less";
-@import "@transferwise/neptune-tokens/tiny-viewport.less";
+@import '@transferwise/neptune-tokens/themes/personal/tokens.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);