@transferwise/components 0.0.0-experimental-8b2286f → 0.0.0-experimental-c3b48d7

package/src/sentimentSurface/SentimentSurface.less

@@ -4,327 +4,79 @@
     color: var(--color-sentiment-content-primary);
   }
 
-  &-negative {
-    .np-theme-personal&,
-    .np-theme-business&,
-    .np-theme-platform&,
-    .np-theme-personal--bright-green&,
-    .np-theme-business--bright-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #CB272F, #B8232B, #A72027,
-                    #CB272F, #B8232B, #A72027,
-                    #FBEAEA, #F9E1E1, #F8D8D8,
-                    #F5D3D4, #F0BDBE, #ECACAD,
-                    #FBEAEA, #F9E1E1, #F8D8D8,
-                    #FBEAEA, #F9E1E1, #F8D8D8
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #FFFFFF, #F5CCCC, #F1B7B7,
-                    #FBEAEA, #F5CCCC, #F1B7B7,
-                    #CB272F, #B8232B, #A72027,
-                    #9B141B, #831116, #6D0e13,
-                    #CB272F, #B8232B, #A72027,
-                    #CB272F, #B8232B, #A72027
-                );
-      }
-    }
+  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
+}
 
-    .np-theme-personal--dark&,
-    .np-theme-business--dark&,
-    .np-theme-personal--forest-green&,
-    .np-theme-business--forest-green&,
-    .np-theme-platform--forest-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #FFA8AD, #FFBDC0, #FFD1D3,
-                    #FFA8AD, #FFBDC0, #FFD1D3,
-                    #410B0D, #641115, #761418,
-                    #601013, #7A1519, #90181D,
-                    #410B0D, #641115, #761418,
-                    #410B0D, #641115, #761418
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #410B0D, #641115, #761418,
-                    #410B0D, #641115, #761418,
-                    #FFA8AD, #FFBDC0, #FFD1D3,
-                    #D9898D, #D68084, #D06C71,
-                    #FFA8AD, #FFBDC0, #FFD1D3,
-                    #FFA8AD, #FFBDC0, #FFD1D3
-                );
-      }
-    }
+.np-theme-personal,
+.np-theme-business,
+.np-theme-platform,
+.np-theme-personal--bright-green,
+.np-theme-business--bright-green {
+  &.wds-sentiment-surface-negative-base {
+    @import "@transferwise/neptune-tokens/sentiment/negative/light/base.less";
   }
-
-  &-warning {
-    .np-theme-personal&,
-    .np-theme-business&,
-    .np-theme-platform&,
-    .np-theme-personal--bright-green&,
-    .np-theme-business--bright-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #4A3B1C, #302612, #2C2311,  // content-primary (default, hover, active)
-                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-primary
-                    #FFF7D7, #FFF0B2, #FFE98F,  // interactive-secondary
-                    #FFEC9E, #FFE187, #FFD55F,  // interactive-secondary-neutral
-                    #4A3B1C, #302612, #2C2311,  // interactive-control
-                    #FFF7D7, #FFF0B2, #FFE98F   // background-surface
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #4A3B1C, #302612, #2C2311,  // content-primary
-                    #4A3B1C, #302612, #2C2311,  // interactive-primary
-                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-secondary
-                    #FFEC9E, #FFEDB8, #FFF2CC,  // interactive-secondary-neutral
-                    #FFD11A, #FFBF0F, #FFBB00,  // interactive-control
-                    #FFD11A, #FFBF0F, #FFBB00   // background-surface
-                );
-      }
-    }
-
-    .np-theme-personal--dark&,
-    .np-theme-business--dark&,
-    .np-theme-personal--forest-green&,
-    .np-theme-business--forest-green&,
-    .np-theme-platform--forest-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #FADC65, #F9D648, #F8CD20,  // content-primary
-                    #FADC65, #F9D648, #F8CD20,  // interactive-primary
-                    #3A3523, #504930, #665D3D,  // interactive-secondary
-                    #4D462A, #5D532F, #685D33,  // interactive-secondary-neutral
-                    #3A3523, #504930, #665D3D,  // interactive-control
-                    #3A3523, #504930, #665D3D   // background-surface
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #3A3523, #504930, #665D3D,  // content-primary
-                    #3A3523, #504930, #665D3D,  // interactive-primary
-                    #FADC65, #F9D648, #F8CD20,  // interactive-secondary
-                    #E3C85D, #DFC044, #D9B526,  // interactive-secondary-neutral
-                    #FADC65, #F9D648, #F8CD20,  // interactive-control
-                    #FADC65, #F9D648, #F8CD20   // background-surface
-                );
-      }
-    }
+  &.wds-sentiment-surface-negative-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/negative/light/elevated.less";
   }
-  &-success {
-    .np-theme-personal&,
-    .np-theme-business&,
-    .np-theme-platform&,
-    .np-theme-personal--bright-green&,
-    .np-theme-business--bright-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #054D28, #043A1E, #022614,  // content-primary (default, hover, active)
-                    #054D28, #043A1E, #022614,  // interactive-primary
-                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-secondary
-                    #BCD9B8, #AACFA5, #94C38E,  // interactive-secondary-neutral
-                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-control
-                    #E2F6D5, #D3F2C0, #C5EDAB   // background-surface
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
-                    #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
-                    #054D28, #043A1E, #022614,  // interactive-secondary
-                    #256A43, #2A794C, #329057,  // interactive-secondary-neutral
-                    #054D28, #043A1E, #022614,  // interactive-control
-                    #054D28, #043A1E, #022614   // background-surface
-                );
-      }
-    }
-
-    .np-theme-personal--dark&,
-    .np-theme-business--dark&,
-    .np-theme-personal--forest-green&,
-    .np-theme-business--forest-green&,
-    .np-theme-platform--forest-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                   #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
-                   #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
-                   #054D28, #043A1E, #022614,  // interactive-secondary
-                   #256A43, #2A794C, #329057,  // interactive-secondary-neutral
-                   #054D28, #043A1E, #022614,  // interactive-control
-                   #054D28, #043A1E, #022614   // background-surface
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #252C20, #323B2B, #3E4A36,  // content-primary
-                    #252C20, #323B2B, #3E4A36,  // interactive-primary
-                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-secondary
-                    #A8CF91, #94C478, #83BB63,  // interactive-secondary-neutral
-                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-control
-                    #BAE5A0, #C8EAB3, #D6F0C7   // background-surface
-                );
-      }
-    }
+  &.wds-sentiment-surface-warning-base {
+    @import "@transferwise/neptune-tokens/sentiment/warning/light/base.less";
   }
-  &-neutral {
-    .np-theme-personal&,
-    .np-theme-business&,
-    .np-theme-platform&,
-    .np-theme-personal--bright-green&,
-    .np-theme-business--bright-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #454745, #353635, #232423,                                            // content-primary (default, hover, active)
-                    #454745, #353635, #232423,                                            // interactive-primary
-                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary
-                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17),  // interactive-secondary-neutral
-                    #F1F1ED, #E7E7E1, #DFDED5,                                            // interactive-control
-                    rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17)  // background-surface
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #F1F1ED, #E7E7E1, #DFDED5,  // content-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-primary
-                    #454745, #353635, #232423,  // interactive-secondary
-                    #585958, #6A6C6A, #7D7E7D,  // interactive-secondary-neutral
-                    #454745, #353635, #232423,  // interactive-control
-                    #454745, #353635, #232423   // background-surface
-                );
-      }
-    }
-
-    .np-theme-personal--dark&,
-    .np-theme-business--dark&,
-    .np-theme-personal--forest-green&,
-    .np-theme-business--forest-green&,
-    .np-theme-platform--forest-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // content-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,                                                       // interactive-primary
-                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary
-                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30),  // interactive-secondary-neutral
-                    #2A2C29, #414441, #595B58,                                                       // interactive-control
-                    rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30)   // background-surface
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #2A2C29, #414441, #595B58,  // content-primary
-                    #2A2C29, #414441, #595B58,  // interactive-primary
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-secondary
-                    #E4E4DC, #DCDCD2, #D3D2C6,  // interactive-secondary-neutral
-                    #F1F1ED, #E7E7E1, #DFDED5,  // interactive-control
-                    #F1F1ED, #E7E7E1, #DFDED5   // background-surface
-                );
-      }
-    }
+  &.wds-sentiment-surface-warning-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/warning/light/elevated.less";
   }
-  &-proposition {
-    .np-theme-personal&,
-    .np-theme-business&,
-    .np-theme-platform&,
-    .np-theme-personal--bright-green&,
-    .np-theme-business--bright-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #0E0F0C, #0A2826, #074140,  // content-primary (default, hover, active)
-                    #054D4D, #043A3A, #022626,  // interactive-primary
-                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-secondary
-                    #B4D5D5, #A3CCCC, #9AC6C6,  // interactive-secondary-neutral
-                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-control
-                    #E0F7F7, #CAF1F1, #B6ECEC   // background-surface
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
-                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
-                    #054D4D, #043A3A, #022626,  // interactive-secondary
-                    #1F6161, #247070, #298080,  // interactive-secondary-neutral
-                    #054D4D, #043A3A, #022626,  // interactive-control
-                    #054D4D, #043A3A, #022626   // background-surface
-                );
-      }
-    }
-
-    .np-theme-personal--dark&,
-    .np-theme-business--dark&,
-    .np-theme-personal--forest-green&,
-    .np-theme-business--forest-green&,
-    .np-theme-platform--forest-green& {
-      &-base {
-        .sentiment-surface-tokens(
-                    #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
-                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
-                    #054D4D, #043A3A, #022626,  // interactive-secondary
-                    #1F6161, #247070, #298080,  // interactive-secondary-neutral
-                    #054D4D, #043A3A, #022626,  // interactive-control
-                    #054D4D, #043A3A, #022626   // background-surface
-                );
-      }
-      &-elevated {
-        .sentiment-surface-tokens(
-                    #0E0F0C, #0A2826, #074140,  // content-primary
-                    #0B312F, #104744, #16605C,  // interactive-primary
-                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-secondary
-                    #B4D5D5, #A3CCCC, #9AC6C6,  // interactive-secondary-neutral
-                    #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-control
-                    #E0F7F7, #CAF1F1, #B6ECEC   // background-surface
-                );
-      }
-    }
+  &.wds-sentiment-surface-success-base {
+    @import "@transferwise/neptune-tokens/sentiment/success/light/base.less";
+  }
+  &.wds-sentiment-surface-success-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/success/light/elevated.less";
+  }
+  &.wds-sentiment-surface-neutral-base {
+    @import "@transferwise/neptune-tokens/sentiment/neutral/light/base.less";
+  }
+  &.wds-sentiment-surface-neutral-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/neutral/light/elevated.less";
+  }
+  &.wds-sentiment-surface-proposition-base {
+    @import "@transferwise/neptune-tokens/sentiment/proposition/light/base.less";
+  }
+  &.wds-sentiment-surface-proposition-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/proposition/light/elevated.less";
   }
-
-  --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
 }
 
-.sentiment-surface-tokens(
-    @content-primary,
-    @content-primary-hover,
-    @content-primary-active,
-    @interactive-primary,
-    @interactive-primary-hover,
-    @interactive-primary-active,
-    @interactive-secondary,
-    @interactive-secondary-hover,
-    @interactive-secondary-active,
-    @interactive-secondary-neutral,
-    @interactive-secondary-neutral-hover,
-    @interactive-secondary-neutral-active,
-    @interactive-control,
-    @interactive-control-hover,
-    @interactive-control-active,
-    @background-surface,
-    @background-surface-hover,
-    @background-surface-active
-) {
-  --color-sentiment-content-primary: @content-primary;
-  --color-sentiment-content-primary-hover: @content-primary-hover;
-  --color-sentiment-content-primary-active: @content-primary-active;
-
-  --color-sentiment-interactive-primary: @interactive-primary;
-  --color-sentiment-interactive-primary-hover: @interactive-primary-hover;
-  --color-sentiment-interactive-primary-active: @interactive-primary-active;
-
-  --color-sentiment-interactive-secondary: @interactive-secondary;
-  --color-sentiment-interactive-secondary-hover: @interactive-secondary-hover;
-  --color-sentiment-interactive-secondary-active: @interactive-secondary-active;
-
-  --color-sentiment-interactive-secondary-neutral: @interactive-secondary-neutral;
-  --color-sentiment-interactive-secondary-neutral-hover: @interactive-secondary-neutral-hover;
-  --color-sentiment-interactive-secondary-neutral-active: @interactive-secondary-neutral-active;
-
-  --color-sentiment-interactive-control: @interactive-control;
-  --color-sentiment-interactive-control-hover: @interactive-control-hover;
-  --color-sentiment-interactive-control-active: @interactive-control-active;
-
-  --color-sentiment-background-surface: @background-surface;
-  --color-sentiment-background-surface-hover: @background-surface-hover;
-  --color-sentiment-background-surface-active: @background-surface-active;
+.np-theme-personal--dark,
+.np-theme-business--dark,
+.np-theme-personal--forest-green,
+.np-theme-business--forest-green,
+.np-theme-platform--forest-green {
+  &.wds-sentiment-surface-negative-base {
+    @import "@transferwise/neptune-tokens/sentiment/negative/dark/base.less";
+  }
+  &.wds-sentiment-surface-negative-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/negative/dark/elevated.less";
+  }
+  &.wds-sentiment-surface-warning-base {
+    @import "@transferwise/neptune-tokens/sentiment/warning/dark/base.less";
+  }
+  &.wds-sentiment-surface-warning-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/warning/dark/elevated.less";
+  }
+  &.wds-sentiment-surface-success-base {
+    @import "@transferwise/neptune-tokens/sentiment/success/dark/base.less";
+  }
+  &.wds-sentiment-surface-success-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/success/dark/elevated.less";
+  }
+  &.wds-sentiment-surface-neutral-base {
+    @import "@transferwise/neptune-tokens/sentiment/neutral/dark/base.less";
+  }
+  &.wds-sentiment-surface-neutral-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/neutral/dark/elevated.less";
+  }
+  &.wds-sentiment-surface-proposition-base {
+    @import "@transferwise/neptune-tokens/sentiment/proposition/dark/base.less";
+  }
+  &.wds-sentiment-surface-proposition-elevated {
+    @import "@transferwise/neptune-tokens/sentiment/proposition/dark/elevated.less";
+  }
 }

package/src/sentimentSurface/SentimentSurface.story.tsx

@@ -170,6 +170,10 @@ const tokenCategories = [
       '--color-sentiment-background-surface-active',
     ],
   },
+  {
+    name: 'Border',
+    tokens: ['--color-sentiment-border-overlay'],
+  },
 ];
 
 const TokenSwatch = ({ token }: { token: string }) => (

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

@@ -8,17 +8,7 @@
 
 /* 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,
@@ -124,12 +114,8 @@ 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%;
@@ -153,8 +139,7 @@ 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);
@@ -219,11 +204,8 @@ a,
 .np-text-display-large,
 .np-text-display-medium,
 .np-text-display-small {
-  &,
-  &--forced {
-    font-family: var(--font-family-display);
-    font-synthesis: none;
-  }
+  font-family: var(--font-family-display);
+  font-synthesis: none;
 
   :lang(ja) &,
   :lang(th) &,
@@ -234,12 +216,8 @@ a,
      * 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 `--forced` BEM modifier to the original class name to guarantee it.
      */
     font-family: var(--font-family-regular);
-    line-height: var(--line-height-title);
   }
 }
 

package/src/styles/less/neptune.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 Mon, 18 May 2026 08:34:10 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 Mon, 18 May 2026 08:34:11 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 Mon, 18 May 2026 08:34:11 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 Mon, 18 May 2026 08:34:11 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 Mon, 18 May 2026 08:34:11 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 Mon, 18 May 2026 08:34:11 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 Mon, 18 May 2026 08:34:11 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 Mon, 18 May 2026 08:34:11 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 Mon, 18 May 2026 08:34: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 Mon, 18 May 2026 08:34: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 Mon, 18 May 2026 08:34:12 GMT
  */
 
 .np-theme-business--bright-green {
@@ -3238,16 +3238,7 @@ a,
 .np-text-display-extra-large,
 .np-text-display-large,
 .np-text-display-medium,
-.np-text-display-small,
-.display-1--forced,
-.display-2--forced,
-.display-3--forced,
-.display-4--forced,
-.display-5--forced,
-.np-text-display-extra-large--forced,
-.np-text-display-large--forced,
-.np-text-display-medium--forced,
-.np-text-display-small--forced {
+.np-text-display-small {
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-synthesis: none;
@@ -3294,14 +3285,9 @@ a,
      * 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 `--forced` BEM modifier to the original class name to guarantee it.
      */
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
 }
 
 /* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */