@pagopa/io-app-design-system 1.36.13 → 1.36.15

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

@@ -0,0 +1,32 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
+
+type MdH2Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 16;
+const lineHeight = 24;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "SemiBold";
+
+/**
+ * `MdH2` typographic style
+ */
+export const MdH2 = (props: MdH2Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight
+    }
+  });

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

@@ -0,0 +1,32 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type MdH3Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 16;
+const lineHeight = 24;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+/**
+ * `MdH3` typographic style
+ */
+export const MdH3 = (props: MdH3Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight
+    }
+  });

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

@@ -0,0 +1,34 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
+
+type MdH4Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 14;
+const lineHeight = 24;
+const font: FontFamily = "TitilliumSansPro";
+const defaultColor: AllowedColors = "grey-700";
+const defaultWeight: AllowedWeight = "SemiBold";
+
+/**
+ * `MdH4` typographic style
+ */
+export const MdH4 = (props: MdH4Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      textTransform: "uppercase",
+      letterSpacing: 0.5,
+      lineHeight
+    }
+  });

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

@@ -0,0 +1,32 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type MdH5Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 12;
+const lineHeight = 16;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "grey-850";
+const defaultWeight: AllowedWeight = "Regular";
+
+/**
+ * `MdH5` typographic style
+ */
+export const MdH5 = (props: MdH5Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight
+    }
+  });

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

@@ -0,0 +1,33 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type MdH6Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 10;
+const lineHeight = 14;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "grey-700";
+const defaultWeight: AllowedWeight = "Regular";
+
+/**
+ * `MdH5` typographic style
+ */
+export const MdH6 = (props: MdH6Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight,
+      letterSpacing: 0.5
+    }
+  });

package/src/core/IOColors.ts

@@ -76,7 +76,6 @@ export const IOColors = asIOColors({
   "info-500": "#6BCFFB",
   "info-400": "#89D9FC" /* Dark mode */,
   "info-100": "#E1F5FE",
-  cobalt: "#2C489D" /* used in the `Bonus Vacanze` only */,
   "blueItalia-850": "#001F3D",
   "blueItalia-600": "#0052A3",
   "blueItalia-500": "#0066CC" /* pagoPA service */,
@@ -90,16 +89,13 @@ export const IOColors = asIOColors({
   greyLight: "#E6E9F2",
   bluegreyLight: "#CCD4DC",
   grey: "#909DA8",
-  milderGray: "#5F6F80",
   bluegrey: "#475A6D",
   bluegreyDark: "#17324D",
-  noCieButton: "#789CCD" /* Half-disabled noCIE CTA BG, LandingScreen.tsx */,
   blue: "#0073E6",
   blueUltraLight: "#99CCFF" /* Almost deprecated, avoid if possible */,
   aqua: "#00C5CA",
   aquaUltraLight: "#C1F4F2",
   antiqueFuchsia: "#9B5897" /* used in the CgnDiscountValueBox only */,
-  yellow: "#FFC824" /* Almost deprecated, used in `PaymentHistoryList` only */,
   orange: "#EA7614",
   red: "#C02927",
   green: "#005C3C",
@@ -145,18 +141,14 @@ const {
   greyLight,
   bluegreyLight,
   grey,
-  milderGray,
   bluegrey,
   bluegreyDark,
   black,
-  noCieButton,
   blue,
   blueUltraLight,
   aqua,
   aquaUltraLight,
-  cobalt,
   antiqueFuchsia,
-  yellow,
   orange,
   red,
   green,
@@ -169,18 +161,14 @@ export const IOColorsLegacy = {
   greyLight,
   bluegreyLight,
   grey,
-  milderGray,
   bluegrey,
   bluegreyDark,
   black,
-  noCieButton,
   blue,
   blueUltraLight,
   aqua,
   aquaUltraLight,
-  cobalt,
   antiqueFuchsia,
-  yellow,
   orange,
   red,
   green,
@@ -254,7 +242,6 @@ export type IOColorsStatusBackground = Extract<
 >;
 
 export const IOColorsExtra = {
-  cobalt: IOColors.cobalt,
   "blueItalia-850": IOColors["blueItalia-850"],
   "blueItalia-600": IOColors["blueItalia-600"],
   "blueItalia-500": IOColors["blueItalia-500"],