[IOAPPX-458] Enable the new UI + Add dynamic typeface selection

locales/en/index.yml

@@ -478,7 +478,7 @@ profile:
     cieID:
       cieIdTest:
         title: CieID
-    designSystemEnvironment: Experimental Design System
+    experimentalEnvironment: Experimental interface
     newScanSection: New 'Scan' feature
     sessionRefresh: Activate Session Refresh
     appVersion: Version

locales/it/index.yml

@@ -480,7 +480,7 @@ profile:
         title: CieID
     trial:
       titleSection: Partecipa alla sperimentazione
-    designSystemEnvironment: Design System sperimentale
+    experimentalEnvironment: Interfaccia sperimentale
     newScanSection: Nuova funzione 'Inquadra'
     sessionRefresh: Attiva il refresh della sessione
     appVersion: Versione

package.json

@@ -53,7 +53,7 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "4.3.0",
+    "@pagopa/io-app-design-system": "5.0.0-2",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-cieid": "^0.3.5",
     "@pagopa/io-react-native-crypto": "^1.0.1",

ts/App.tsx

@@ -1,6 +1,7 @@
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import {
   IODSExperimentalContextProvider,
+  IONewTypefaceContextProvider,
   IOThemeContextProvider,
   ToastProvider
 } from "@pagopa/io-app-design-system";
@@ -68,23 +69,25 @@ const App = (): JSX.Element => (
   <GestureHandlerRootView style={{ flex: 1 }}>
     <SafeAreaProvider>
       <IODSExperimentalContextProvider>
-        <IOThemeContextProvider theme={"light"}>
-          <ToastProvider>
-            <Provider store={store}>
-              <PersistGate loading={undefined} persistor={persistor}>
-                <BottomSheetModalProvider>
-                  <LightModalProvider>
-                    <StatusMessages>
-                      <RootContainer
-                        routingInstumentation={navigationIntegration}
-                      />
-                    </StatusMessages>
-                  </LightModalProvider>
-                </BottomSheetModalProvider>
-              </PersistGate>
-            </Provider>
-          </ToastProvider>
-        </IOThemeContextProvider>
+        <IONewTypefaceContextProvider>
+          <IOThemeContextProvider theme={"light"}>
+            <ToastProvider>
+              <Provider store={store}>
+                <PersistGate loading={undefined} persistor={persistor}>
+                  <BottomSheetModalProvider>
+                    <LightModalProvider>
+                      <StatusMessages>
+                        <RootContainer
+                          routingInstumentation={navigationIntegration}
+                        />
+                      </StatusMessages>
+                    </LightModalProvider>
+                  </BottomSheetModalProvider>
+                </PersistGate>
+              </Provider>
+            </ToastProvider>
+          </IOThemeContextProvider>
+        </IONewTypefaceContextProvider>
       </IODSExperimentalContextProvider>
     </SafeAreaProvider>
   </GestureHandlerRootView>

ts/components/IOMarkdown/renderRules.tsx

@@ -318,7 +318,6 @@ export const DEFAULT_RULES: IOMarkdownRenderRules = {
         key={getTxtNodeKey(blockQuote)}
         pictogramName={getPictogramName(pictogramName?.[1])}
         color="neutral"
-        size="big"
         title={title?.[1]}
         content={content}
       />