[IOAPPFD0-187] Update legacy typography scale (#138)

## Short description This PR updates the legacy variants of some typographic styles, according to the design guidelines. ## List of changes proposed in this pull request - Update `Hero`, `H1`, `H2`, `H3` and `H4` typographic styles ## How to test 1. Launch the app 2. Go to the **Typography** page
pagopa · Nov 21, 2023 · 2f4962b · 2f4962b
1 parent a8a6c00
commit 2f4962b
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 88 deletions.
diff --git a/example/src/pages/Icons.tsx b/example/src/pages/Icons.tsx
@@ -227,11 +227,7 @@ export const Icons = () => {
         </View>
       </ComponentViewerBox>
 
-      <H3
-        color={theme["textHeading-default"]}
-        weight={"Bold"}
-        style={{ marginBottom: 12 }}
-      >
+      <H3 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
         Sizes
       </H3>
       <View style={styles.itemsWrapper}>

diff --git a/src/components/typography/H1.tsx b/src/components/typography/H1.tsx
@@ -4,7 +4,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Bold">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
 type H1Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -18,7 +18,9 @@ const defaultWeight: AllowedWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont: FontFamily = "TitilliumWeb";
-const legacyDefaultWeight: AllowedWeight = "Bold";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
+const legacyH1FontSize = 31;
+const legacyH1LineHeight = 43;
 
 /**
  * `H1` typographic style
@@ -31,6 +33,9 @@ export const H1 = (props: H1Props) => {
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
     defaultColor,
     font: isExperimental ? font : legacyFont,
-    fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h1FontSize : legacyH1FontSize,
+      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight
+    }
   });
 };
diff --git a/src/components/typography/H2.tsx b/src/components/typography/H2.tsx
@@ -4,7 +4,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 type H2Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -18,7 +18,9 @@ const defaultWeight: AllowedWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont: FontFamily = "TitilliumWeb";
-const legacyDefaultWeight: AllowedWeight = "Bold";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
+const legacyH2FontSize = 28;
+const legacyH2LineHeight = 40;
 
 /**
  * `H2` typographic style
@@ -31,6 +33,9 @@ export const H2 = (props: H2Props) => {
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
     defaultColor,
     font: isExperimental ? font : legacyFont,
-    fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
+      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
+    }
   });
 };
diff --git a/src/components/typography/H3.tsx b/src/components/typography/H3.tsx
@@ -4,7 +4,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
 
 type H3Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -20,7 +20,9 @@ const defaultWeight: AllowedWeight = "Regular";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: FontFamily = "TitilliumWeb";
 const legacyDefaultColor: AllowedColors = "bluegreyDark";
-const legacyDefaultWeight: AllowedWeight = "Bold";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
+const legacyH3FontSize = 24;
+const legacyH3LineHeight = 34;
 /**
  * `H3` typographic style
  */
@@ -31,6 +33,9 @@ export const H3 = (props: H3Props) => {
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
     defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
     font: isExperimental ? font : legacyFontName,
-    fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h3FontSize : legacyH3FontSize,
+      lineHeight: isExperimental ? h3LineHeight : legacyH3LineHeight
+    }
   });
 };
diff --git a/src/components/typography/H4.tsx b/src/components/typography/H4.tsx
@@ -20,6 +20,7 @@ const defaultWeight: AllowedWeight = "Regular";
 const legacyFontName: FontFamily = "TitilliumWeb";
 const legacyDefaultColor: AllowedColors = "bluegreyDark";
 const legacyDefaultWeight: AllowedWeight = "SemiBold";
+const legacyH4FontSize = 22;
 
 /**
  * `H4` typographic style
@@ -31,6 +32,9 @@ export const H4 = (props: H4Props) => {
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
     defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
     font: isExperimental ? font : legacyFontName,
-    fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? h4FontSize : legacyH4FontSize,
+      lineHeight: h4LineHeight
+    }
   });
 };
diff --git a/src/components/typography/Hero.tsx b/src/components/typography/Hero.tsx
@@ -4,7 +4,7 @@ import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
 type HeroProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
@@ -18,6 +18,10 @@ const defaultWeight: AllowedWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont: FontFamily = "TitilliumWeb";
+const legacyWeight: AllowedWeight = "SemiBold";
+const legacyHeroFontSize = 35;
+const legacyHeroLineHeight = 49;
+
 /**
  * `Hero` typographic style
  */
@@ -26,9 +30,12 @@ export const Hero = (props: HeroProps) => {
 
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight,
+    defaultWeight: isExperimental ? defaultWeight : legacyWeight,
     defaultColor,
     font: isExperimental ? font : legacyFont,
-    fontStyle: { fontSize: heroFontSize, lineHeight: heroLineHeight }
+    fontStyle: {
+      fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
+      lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
+    }
   });
 };