@transferwise/components 0.0.0-experimental-7e4ad0e → 0.0.0-experimental-5036e0b

package/build/main.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   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 {
+  /**
+     * 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.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/build/styles/css/neptune.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   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 {
+  /**
+     * 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.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/build/styles/main.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   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 {
+  /**
+     * 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.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/build/styles/styles/less/neptune.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   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 {
+  /**
+     * 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.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-7e4ad0e",
+  "version": "0.0.0-experimental-5036e0b",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -87,7 +87,7 @@
     "storybook-addon-tag-badges": "^3.0.6",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.27.0",
+    "@transferwise/neptune-css": "0.0.0-experimental-5036e0b",
     "@wise/components-theming": "1.10.1",
     "@wise/wds-configs": "0.0.0"
   },

package/src/display/Display.story.tsx

@@ -14,6 +14,8 @@ export const Basic = () => {
   const DE = 'äöüßabcdefghijklmnopqrstuvwxyz';
   const UA = 'Ми будуємо найбільш міжнародний рахунок у світі';
   const JA = 'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてで';
+  const ZN =
+    '的一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年样能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去最性性齉龘龘靐齉爩鱻猋驫麤籲爨癵驫鲙鬯鬻厵纛';
   return (
     <>
       <div lang="en">
@@ -77,7 +79,7 @@ export const Basic = () => {
       </div>
       <hr />
       <div lang="ja">
-        <h1>Everything eles, e.g 🇯🇵</h1>
+        <h1>Japanese</h1>
         Large
         <Display type={Typography.DISPLAY_LARGE}>{JA}</Display>
         <hr />
@@ -87,6 +89,18 @@ export const Basic = () => {
         Small
         <Display type={Typography.DISPLAY_SMALL}>{JA}</Display>
       </div>
+      <hr />
+      <div lang="zh-CN">
+        <h1>Simplified Chinese</h1>
+        Large
+        <Display type={Typography.DISPLAY_LARGE}>{ZN}</Display>
+        <hr />
+        Medium
+        <Display type={Typography.DISPLAY_MEDIUM}>{ZN}</Display>
+        <hr />
+        Small
+        <Display type={Typography.DISPLAY_SMALL}>{ZN}</Display>
+      </div>
     </>
   );
 };

package/src/main.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   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 {
+  /**
+     * 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.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,

package/src/styles/less/core/_typography.less

@@ -25,7 +25,7 @@ h6,
   line-height: var(--line-height-title);
   letter-spacing: 0;
   .np-text-hyphenated;
-  
+
   + p,
   + ul:not(.list-unstyled),
   + ol:not(.list-unstyled) {
@@ -204,8 +204,21 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: var(--font-family-display);
   font-synthesis: none;
+
+  :lang(ja) &,
+  :lang(th) &,
+  :lang(zh-CN) &,
+  :lang(zh-HK) & {
+    /**
+     * 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.
+     */
+    font-family: var(--font-family-regular);
+  }
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */

package/src/styles/less/neptune.css

@@ -3492,10 +3492,57 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
+  font-family: 'Wise Sans', 'Inter', sans-serif;
+  font-family: var(--font-family-display);
   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 {
+  /**
+     * 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.
+     */
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+}
+
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
 
 .np-text-display-extra-large,