fix(Textarea): use transparent default border on web; dedupe RN Textarea metrics by reusing Input constant

cursoragent · cursoragent · commit 33e5ca596b00 · 2026-04-02T22:57:05.000Z
diff --git a/packages/design-system-react-native/src/components/Textarea/Textarea.constants.ts b/packages/design-system-react-native/src/components/Textarea/Textarea.constants.ts
@@ -1,73 +1,11 @@
-import { typography } from '@metamask/design-tokens';
-
-import { TextVariant } from '../../types';
+import { MAP_TEXT_VARIANT_INPUT_METRICS } from '../Input/Input.constants';
 
 /**
  * Typographic metrics for Textarea: same tokens as `text-*` utilities but **without** `lineHeight`.
  * React Native `TextInput` with multiline aligns text more predictably when line height is not set
  * from the design-system paragraph specs.
  */
-export const MAP_TEXT_VARIANT_TEXTAREA_METRICS: Record<
-  TextVariant,
-  { fontSize: number; letterSpacing: number }
-> = {
-  [TextVariant.DisplayLg]: {
-    fontSize: typography.sDisplayLG.fontSize,
-    letterSpacing: typography.sDisplayLG.letterSpacing,
-  },
-  [TextVariant.DisplayMd]: {
-    fontSize: typography.sDisplayMD.fontSize,
-    letterSpacing: typography.sDisplayMD.letterSpacing,
-  },
-  [TextVariant.HeadingLg]: {
-    fontSize: typography.sHeadingLG.fontSize,
-    letterSpacing: typography.sHeadingLG.letterSpacing,
-  },
-  [TextVariant.HeadingMd]: {
-    fontSize: typography.sHeadingMD.fontSize,
-    letterSpacing: typography.sHeadingMD.letterSpacing,
-  },
-  [TextVariant.HeadingSm]: {
-    fontSize: typography.sHeadingSM.fontSize,
-    letterSpacing: typography.sHeadingSM.letterSpacing,
-  },
-  [TextVariant.BodyLg]: {
-    fontSize: typography.sBodyLGMedium.fontSize,
-    letterSpacing: typography.sBodyLGMedium.letterSpacing,
-  },
-  [TextVariant.BodyMd]: {
-    fontSize: typography.sBodyMD.fontSize,
-    letterSpacing: typography.sBodyMD.letterSpacing,
-  },
-  [TextVariant.BodySm]: {
-    fontSize: typography.sBodySM.fontSize,
-    letterSpacing: typography.sBodySM.letterSpacing,
-  },
-  [TextVariant.BodyXs]: {
-    fontSize: typography.sBodyXS.fontSize,
-    letterSpacing: typography.sBodyXS.letterSpacing,
-  },
-  [TextVariant.PageHeading]: {
-    fontSize: typography.sPageHeading.fontSize,
-    letterSpacing: typography.sPageHeading.letterSpacing,
-  },
-  [TextVariant.SectionHeading]: {
-    fontSize: typography.sSectionHeading.fontSize,
-    letterSpacing: typography.sSectionHeading.letterSpacing,
-  },
-  [TextVariant.ButtonLabelMd]: {
-    fontSize: typography.sButtonLabelMd.fontSize,
-    letterSpacing: typography.sButtonLabelMd.letterSpacing,
-  },
-  [TextVariant.ButtonLabelLg]: {
-    fontSize: typography.sButtonLabelLg.fontSize,
-    letterSpacing: typography.sButtonLabelLg.letterSpacing,
-  },
-  [TextVariant.AmountDisplayLg]: {
-    fontSize: typography.sAmountDisplayLg.fontSize,
-    letterSpacing: typography.sAmountDisplayLg.letterSpacing,
-  },
-};
+export const MAP_TEXT_VARIANT_TEXTAREA_METRICS = MAP_TEXT_VARIANT_INPUT_METRICS;
 
 /**
  * Default number of lines displayed in the Textarea.
diff --git a/packages/design-system-react/src/components/Textarea/Textarea.tsx b/packages/design-system-react/src/components/Textarea/Textarea.tsx
@@ -30,7 +30,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       'placeholder:text-alternative',
       isError
         ? 'border-error-default focus:border-error-default'
-        : 'border-default focus:border-primary-default',
+        : 'border-transparent focus:border-primary-default',
       CLASSMAP_TEXTAREA_RESIZE[resize],
       CLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant],
       CLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant],
