@pagopa/io-app-design-system 2.0.2 → 2.1.0-0

package/src/components/modules/ModuleNavigation.tsx

@@ -18,7 +18,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { HStack, VStack } from "../stack";
-import { Chip, LabelSmallAlt } from "../typography";
+import { Chip, LabelSmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -79,14 +79,15 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
           {iconComponent ?? imageComponent}
 
           <View style={{ flexShrink: 1 }}>
-            <LabelSmallAlt
+            <LabelSmall
               color={theme["interactiveElem-default"]}
+              weight="Semibold"
               numberOfLines={2}
               lineBreakMode="middle"
               style={{ flexShrink: 1 }}
             >
               {title}
-            </LabelSmallAlt>
+            </LabelSmall>
             {subtitle && (
               <Chip color={theme["textBody-tertiary"]}>{subtitle}</Chip>
             )}

package/src/components/modules/ModulePaymentNotice.tsx

@@ -7,7 +7,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { HStack, VStack } from "../stack";
-import { H6, LabelSmall, LabelSmallAlt } from "../typography";
+import { H6, LabelSmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
@@ -98,12 +98,13 @@ const ModulePaymentNoticeContent = ({
           </LabelSmall>
         )}
         {subtitle && (
-          <LabelSmallAlt
+          <LabelSmall
             color={theme["interactiveElem-default"]}
             numberOfLines={2}
+            weight="Semibold"
           >
             {subtitle}
-          </LabelSmallAlt>
+          </LabelSmall>
         )}
       </View>
       <View style={styles.endBlock}>

package/src/components/searchInput/SearchInput.tsx

@@ -326,7 +326,7 @@ const styles = StyleSheet.create({
   placeholder: {
     ...makeFontStyleObject(
       inputFontSizePlaceholder,
-      "ReadexPro",
+      "Titillio",
       undefined,
       "Regular"
     )

package/src/components/tag/Tag.tsx

@@ -169,8 +169,8 @@ export const Tag = ({
       {variantProps && text && <View style={styles.spacer} />}
       {text && (
         <IOText
-          font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
-          weight={isExperimental ? "Regular" : "Semibold"}
+          font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+          weight={"Semibold"}
           size={12}
           lineHeight={16}
           color={theme["textBody-tertiary"]}

package/src/components/textInput/TextInputBase.tsx

@@ -107,12 +107,7 @@ const styles = StyleSheet.create({
     ...(Platform.OS === "android" && { marginLeft: -4 })
   },
   textInputStyleFont: {
-    ...makeFontStyleObject(
-      inputLabelFontSize,
-      "ReadexPro",
-      undefined,
-      "Regular"
-    )
+    ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular")
   },
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   textInputStyleLegacyFont: {

package/src/components/typography/Body.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOTheme } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -16,6 +16,12 @@ type BodyStyleProps = TypographicStyleProps & {
 export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
 
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Regular";
+
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Regular";
+
 /**
  * `Body` typographic style
  */
@@ -25,6 +31,7 @@ export const Body = forwardRef<View, BodyStyleProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -33,8 +40,12 @@ export const Body = forwardRef<View, BodyStyleProps>(
     const BodyProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "body", // iOS only
-      font: "TitilliumSansPro",
-      weight: customWeight ?? "Regular",
+      font: isExperimental ? fontName : legacyFontName,
+      weight: customWeight
+        ? customWeight
+        : isExperimental
+        ? fontWeight
+        : legacyFontWeight,
       size: bodyFontSize,
       lineHeight: bodyLineHeight,
       color: customColor ?? defaultColor,

package/src/components/typography/ButtonText.tsx

@@ -9,8 +9,8 @@ export const buttonTextFontSize: IOFontSize = 16;
 /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
 const defaultColor: IOColors = "white";
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";

package/src/components/typography/Caption.tsx

@@ -7,7 +7,7 @@ import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 const defaultColor: keyof IOTheme = "textBody-default";
 
 export const captionFontSize: IOFontSize = 12;
-const fontName: IOFontFamily = "ReadexPro";
+const fontName: IOFontFamily = "Titillio";
 const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153

package/src/components/typography/Chip.tsx

@@ -4,7 +4,7 @@ import { useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOFontFamily } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-const fontName: IOFontFamily = "ReadexPro";
+const fontName: IOFontFamily = "Titillio";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
 /**

package/src/components/typography/H1.tsx

@@ -8,12 +8,10 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 
 export const h1FontSize: IOFontSize = 28;
 export const h1LineHeight = 42;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyH1FontSize: IOFontSize = 31;
-const legacyH1LineHeight = 43;
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
 const legacyFontWeight: IOFontWeight = "Semibold";
 
@@ -30,8 +28,8 @@ export const H1 = forwardRef<View, TypographicStyleProps>(
       dynamicTypeRamp: "largeTitle", // iOS only
       font: isExperimental ? fontName : legacyFontName,
       weight: isExperimental ? fontWeight : legacyFontWeight,
-      size: isExperimental ? h1FontSize : legacyH1FontSize,
-      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight,
+      size: h1FontSize,
+      lineHeight: h1LineHeight,
       color: customColor ?? theme[defaultColor]
     };
 

package/src/components/typography/H2.tsx

@@ -8,8 +8,8 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 
 export const h2FontSize: IOFontSize = 26;
 export const h2LineHeight = 39;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyH2FontSize: IOFontSize = 28;

package/src/components/typography/H3.tsx

@@ -9,8 +9,8 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 /* Common typographic styles */
 export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";

package/src/components/typography/H4.tsx

@@ -8,8 +8,8 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 
 export const h4FontSize: IOFontSize = 20;
 export const h4LineHeight = 24;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";

package/src/components/typography/H5.tsx

@@ -1,11 +1,17 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOTheme } from "../../core";
-import { IOFontSize } from "../../utils/fonts";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
 const defaultColor: keyof IOTheme = "textHeading-default";
 
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
+
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
+
 export const h5FontSize: IOFontSize = 14;
 export const h5LineHeight = 16;
 
@@ -15,12 +21,13 @@ export const h5LineHeight = 16;
 export const H5 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
     const H5Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "subheadline", // iOS only
-      font: "TitilliumSansPro",
-      weight: "Semibold",
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
       size: h5FontSize,
       lineHeight: h5LineHeight,
       color: customColor ?? theme[defaultColor],

package/src/components/typography/H6.tsx

@@ -8,12 +8,10 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 
 export const h6FontSize: IOFontSize = 16;
 export const h6LineHeight = 24;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontSize: IOFontSize = 18;
-const legacyLineHeight = 25;
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
 const legacyFontWeight: IOFontWeight = "Semibold";
 
@@ -29,8 +27,8 @@ export const H6 = forwardRef<View, TypographicStyleProps>(
       ...props,
       dynamicTypeRamp: "headline", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      size: isExperimental ? h6FontSize : legacyFontSize,
-      lineHeight: isExperimental ? h6LineHeight : legacyLineHeight,
+      size: h6FontSize,
+      lineHeight: h6LineHeight,
       weight: isExperimental ? fontWeight : legacyFontWeight,
       color: customColor ?? theme[defaultColor]
     };

package/src/components/typography/Hero.tsx

@@ -8,8 +8,8 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 
 export const heroFontSize: IOFontSize = 32;
 export const heroLineHeight = 48;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyHeroFontSize: IOFontSize = 35;

package/src/components/typography/Label.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOTheme } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -13,6 +13,12 @@ type LabelProps = TypographicStyleProps & {
   weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
 } & TypographicStyleAsLinkProps;
 
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
+
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
+
 /**
  * `LabelSmall` typographic style
  */
@@ -22,6 +28,7 @@ export const Label = forwardRef<View, LabelProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -29,8 +36,12 @@ export const Label = forwardRef<View, LabelProps>(
 
     const LabelProps: IOTextProps = {
       ...props,
-      font: "TitilliumSansPro",
-      weight: customWeight ?? "Semibold",
+      font: isExperimental ? fontName : legacyFontName,
+      weight: customWeight
+        ? customWeight
+        : isExperimental
+        ? fontWeight
+        : legacyFontWeight,
       size: 16,
       lineHeight: 24,
       color: customColor ?? defaultColor,

package/src/components/typography/LabelMini.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOTheme } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -13,6 +13,12 @@ type LabelMiniProps = TypographicStyleProps & {
   weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
 } & TypographicStyleAsLinkProps;
 
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
+
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
+
 /**
  * `LabelMini` typographic style
  */
@@ -22,6 +28,7 @@ export const LabelMini = forwardRef<View, LabelMiniProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -30,8 +37,12 @@ export const LabelMini = forwardRef<View, LabelMiniProps>(
     const LabelMiniProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
-      font: "TitilliumSansPro",
-      weight: customWeight ?? "Semibold",
+      font: isExperimental ? fontName : legacyFontName,
+      weight: customWeight
+        ? customWeight
+        : isExperimental
+        ? fontWeight
+        : legacyFontWeight,
       size: 12,
       lineHeight: 18,
       color: customColor ?? defaultColor,

package/src/components/typography/LabelSmall.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOTheme } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -13,6 +13,12 @@ type LabelSmallProps = TypographicStyleProps & {
   weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
 } & TypographicStyleAsLinkProps;
 
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
+
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
+
 /**
  * `LabelSmall` typographic style
  */
@@ -22,6 +28,7 @@ export const LabelSmall = forwardRef<View, LabelSmallProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -30,8 +37,12 @@ export const LabelSmall = forwardRef<View, LabelSmallProps>(
     const LabelSmallProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
-      font: "TitilliumSansPro",
-      weight: customWeight ?? "Semibold",
+      font: isExperimental ? fontName : legacyFontName,
+      weight: customWeight
+        ? customWeight
+        : isExperimental
+        ? fontWeight
+        : legacyFontWeight,
       size: 14,
       lineHeight: 21,
       color: customColor ?? defaultColor,

package/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap

@@ -81,10 +81,10 @@ exports[`Test Typography Components H1 Snapshot 1`] = `
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
-        "fontSize": 31,
+        "fontSize": 28,
         "fontStyle": "normal",
         "fontWeight": "600",
-        "lineHeight": 43,
+        "lineHeight": 42,
       },
     ]
   }
@@ -104,10 +104,10 @@ exports[`Test Typography Components H1 Snapshot 2`] = `
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Sans Pro",
-        "fontSize": 31,
+        "fontSize": 28,
         "fontStyle": "normal",
         "fontWeight": "600",
-        "lineHeight": 43,
+        "lineHeight": 42,
       },
     ]
   }
@@ -438,10 +438,10 @@ exports[`Test Typography Components H6 Snapshot 1`] = `
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
-        "fontSize": 18,
+        "fontSize": 16,
         "fontStyle": "normal",
         "fontWeight": "600",
-        "lineHeight": 25,
+        "lineHeight": 24,
       },
     ]
   }

package/src/components/typography/index.tsx

@@ -14,7 +14,6 @@ export * from "./H6";
 export * from "./Hero";
 export * from "./Label";
 export * from "./LabelSmall";
-export * from "./LabelSmallAlt";
 export * from "./LabelMini";
 export * from "./BodyMonospace";
 export * from "./common";

package/src/components/typography/markdown/MdH1.tsx

@@ -14,8 +14,8 @@ export const MdH1 = forwardRef<View, TypographicStyleProps>(
 
     const MdH1Props: IOTextProps = {
       ...props,
-      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
-      weight: isExperimental ? "Regular" : "Semibold",
+      font: isExperimental ? "Titillio" : "TitilliumSansPro",
+      weight: "Semibold",
       size: 20,
       lineHeight: 24,
       color: customColor ?? theme["textHeading-tertiary"]

package/src/components/typography/markdown/MdH2.tsx

@@ -13,11 +13,9 @@ export const MdH2 = forwardRef<View, TypographicStyleProps>(
 
     const MdH2Props: IOTextProps = {
       ...props,
-      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
-      weight: isExperimental ? "Regular" : "Semibold",
-      /* We set 18 instead of 16 to diffrentiate from the H3 typographic style.
-It should be 16 with `SemiBold` font weight. */
-      size: 18,
+      font: isExperimental ? "Titillio" : "TitilliumSansPro",
+      weight: "Semibold",
+      size: 16,
       lineHeight: 24,
       color: customColor ?? theme["textHeading-tertiary"]
     };

package/src/components/typography/markdown/MdH3.tsx

@@ -13,8 +13,8 @@ export const MdH3 = forwardRef<View, TypographicStyleProps>(
 
     const MdH3Props: IOTextProps = {
       ...props,
-      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
-      weight: isExperimental ? "Regular" : "Semibold",
+      font: isExperimental ? "Titillio" : "TitilliumSansPro",
+      weight: "Regular",
       size: 16,
       lineHeight: 24,
       color: customColor ?? theme["textHeading-tertiary"]

package/src/core/IOColors.ts

@@ -283,6 +283,7 @@ const themeKeys = [
   // Status
   "errorIcon",
   "errorText",
+  "successText",
   // Pictograms
   "pictogram-hands",
   "pictogram-tint-main",
@@ -321,6 +322,7 @@ export const IOThemeLight: IOTheme = {
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
+  successText: "success-700",
   // Pictograms
   "pictogram-hands": "blueIO-500",
   "pictogram-tint-main": "turquoise-150",
@@ -361,6 +363,7 @@ export const IOThemeDark: IOTheme = {
   // Status
   errorIcon: "error-400",
   errorText: "error-400",
+  successText: "success-400",
   // Pictograms
   "pictogram-hands": "white",
   "pictogram-tint-main": "turquoise-150",

package/src/utils/fonts.ts

@@ -16,11 +16,11 @@ const fonts = {
     ios: "Titillium Sans Pro",
     default: "TitilliumSansPro"
   }),
-  ReadexPro: Platform.select({
-    android: "ReadexPro",
-    web: "ReadexPro",
-    ios: "Readex Pro",
-    default: "ReadexPro"
+  Titillio: Platform.select({
+    android: "Titillio",
+    web: "Titillio",
+    ios: "Titillio",
+    default: "Titillio"
   }),
   DMMono: Platform.select({
     android: "DMMono",
@@ -28,7 +28,7 @@ const fonts = {
     ios: "DM Mono",
     default: "DMMono"
   })
-};
+} as const;
 
 export type IOFontFamily = keyof typeof fonts;
 
@@ -44,10 +44,18 @@ export type IOFontSize = (typeof allFontSizes)[number];
  * Font Weights
  */
 
-const weights = ["Light", "Regular", "Medium", "Semibold", "Bold"] as const;
+const weights = [
+  "Thin",
+  "Light",
+  "Regular",
+  "Medium",
+  "Semibold",
+  "Bold",
+  "Black"
+] as const;
 export type IOFontWeight = (typeof weights)[number];
 
-const weightValues = ["300", "400", "500", "600", "700"] as const;
+const weightValues = ["200", "300", "400", "500", "600", "700", "900"] as const;
 export type IOFontWeightNumeric = (typeof weightValues)[number];
 
 /**
@@ -55,11 +63,13 @@ export type IOFontWeightNumeric = (typeof weightValues)[number];
  * used on iOS
  */
 export const fontWeights: Record<IOFontWeight, IOFontWeightNumeric> = {
+  Thin: "200",
   Light: "300",
   Regular: "400",
   Medium: "500",
   Semibold: "600",
-  Bold: "700"
+  Bold: "700",
+  Black: "900"
 };
 
 type FontStyleObject = {
@@ -96,7 +106,7 @@ export const makeFontFamilyName = (
   font: IOFontFamily,
   weight: IOFontWeight = defaultWeight,
   fontStyle: TextStyle["fontStyle"] = "normal"
-): FontStyleObject["fontFamily"] =>
+): string =>
   Platform.select({
     web: fonts[font],
     android: `${fonts[font]}-${weight || "Regular"}${