From 322d4d7baee0a2c7aa390b70382f3dcc7b5690da Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Tue, 5 Sep 2023 14:23:06 +0200
Subject: [PATCH 01/12] Introduces context to handle the experimental features

---
 example/src/App.tsx                          |   25 +-
 example/src/pages/Buttons.tsx                | 1122 +++++++++---------
 src/components/buttons/ButtonSolid.tsx       |   34 +-
 src/components/buttons/ButtonSolidLeg.tsx    |  243 ++++
 src/core/IODSExperimentalContextProvider.tsx |   32 +
 src/core/index.ts                            |    1 +
 6 files changed, 885 insertions(+), 572 deletions(-)
 create mode 100644 src/components/buttons/ButtonSolidLeg.tsx
 create mode 100644 src/core/IODSExperimentalContextProvider.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 5ec462d8..73cb3083 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -5,6 +5,7 @@ import {
 } from "@react-navigation/native";
 import * as React from "react";
 import {
+  IODSExperimentalContextProvider,
   IOStyles,
   IOThemeContext,
   IOThemeDark,
@@ -40,17 +41,19 @@ export default function App() {
     <IOThemeContext.Provider
       value={colorScheme === "dark" ? IOThemes.dark : IOThemes.light}
     >
-      <NavigationContainer
-        theme={
-          colorScheme === "dark"
-            ? IONavigationDarkTheme
-            : IONavigationLightTheme
-        }
-      >
-        <GestureHandlerRootView style={IOStyles.flex}>
-          <AppNavigator />
-        </GestureHandlerRootView>
-      </NavigationContainer>
+      <IODSExperimentalContextProvider>
+        <NavigationContainer
+          theme={
+            colorScheme === "dark"
+              ? IONavigationDarkTheme
+              : IONavigationLightTheme
+          }
+        >
+          <GestureHandlerRootView style={IOStyles.flex}>
+            <AppNavigator />
+          </GestureHandlerRootView>
+        </NavigationContainer>
+      </IODSExperimentalContextProvider>
     </IOThemeContext.Provider>
   );
 }
diff --git a/example/src/pages/Buttons.tsx b/example/src/pages/Buttons.tsx
index b4896121..a1141ea3 100644
--- a/example/src/pages/Buttons.tsx
+++ b/example/src/pages/Buttons.tsx
@@ -11,7 +11,9 @@ import {
   IconButton,
   IconButtonContained,
   IconButtonSolid,
-  VSpacer
+  ListItemSwitch,
+  VSpacer,
+  useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
 import React from "react";
 import { Alert, StyleSheet, View } from "react-native";
@@ -31,161 +33,98 @@ const onButtonPress = () => {
 };
 
 // sonarjs/cognitive-complexity
-export const Buttons = () => (
-  <Screen>
-    {/* The title should be dynamic, got from the route object */}
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{
-        marginBottom: 16,
-        paddingTop: IOVisualCostants.appMarginDefault
-      }}
-    >
-      ButtonSolid
-    </H2>
-    <ComponentViewerBox name="ButtonSolid · Primary Variant (using Pressable API)">
-      <ButtonSolid
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        onPress={onButtonPress}
-      />
-
-      <VSpacer size={16} />
-
-      <ButtonSolid
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        icon="qrCode"
-        onPress={onButtonPress}
-      />
-
-      <VSpacer size={16} />
-
-      <ButtonSolid
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        icon="qrCode"
-        iconPosition="end"
-        onPress={onButtonPress}
+export const Buttons = () => {
+  const { isExperimental, setExperimental } = useIOExperimentalDesign();
+  return (
+    <Screen>
+      {/* The title should be dynamic, got from the route object */}
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{
+          marginBottom: 16,
+          paddingTop: IOVisualCostants.appMarginDefault
+        }}
+      >
+        ButtonSolid
+      </H2>
+      <ListItemSwitch
+        label="Abilita Design Sperimentale"
+        value={isExperimental}
+        onSwitchValueChange={setExperimental}
       />
-
-      <VSpacer size={16} />
-
-      <View style={{ alignSelf: "center" }}>
-        <ButtonSolid
-          accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (centered)"}
-          onPress={onButtonPress}
-        />
-      </View>
-    </ComponentViewerBox>
-    <ComponentViewerBox name="ButtonSolid · Primary, Full width">
-      <View>
-        <ButtonSolid
-          fullWidth
-          accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (full width)"}
-          onPress={onButtonPress}
-        />
-      </View>
-    </ComponentViewerBox>
-    <ComponentViewerBox name="ButtonSolid · Primary, disabled">
-      <View>
+      <ComponentViewerBox name="ButtonSolid · Primary Variant (using Pressable API)">
         <ButtonSolid
-          disabled
           accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (disabled)"}
+          label={"Primary button"}
           onPress={onButtonPress}
         />
 
         <VSpacer size={16} />
 
         <ButtonSolid
-          disabled
           accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (disabled)"}
+          label={"Primary button"}
           icon="qrCode"
           onPress={onButtonPress}
         />
-      </View>
-    </ComponentViewerBox>
-
-    <ComponentViewerBox name="ButtonSolid · Danger variant">
-      <View>
-        <ButtonSolid
-          color="danger"
-          label={"Danger button"}
-          onPress={onButtonPress}
-          accessibilityLabel="Tap to trigger test alert"
-        />
 
         <VSpacer size={16} />
 
         <ButtonSolid
-          color="danger"
           accessibilityLabel="Tap to trigger test alert"
           label={"Primary button"}
-          icon="trashcan"
+          icon="qrCode"
+          iconPosition="end"
           onPress={onButtonPress}
         />
 
         <VSpacer size={16} />
 
-        <ButtonSolid
-          color="danger"
-          accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button"}
-          icon="trashcan"
-          iconPosition="end"
-          onPress={onButtonPress}
-        />
-      </View>
-    </ComponentViewerBox>
-    <ComponentViewerBox name="ButtonSolid · Danger, full width">
-      <View>
-        <ButtonSolid
-          fullWidth
-          color="danger"
-          accessibilityLabel="Tap to trigger test alert"
-          label={"Danger button (full width)"}
-          onPress={onButtonPress}
-        />
-      </View>
-    </ComponentViewerBox>
-
-    <ComponentViewerBox name="ButtonSolid · Danger, disabled">
-      <View>
-        <ButtonSolid
-          color="danger"
-          disabled
-          accessibilityLabel="Tap to trigger test alert"
-          label={"Danger button (disabled)"}
-          onPress={onButtonPress}
-        />
+        <View style={{ alignSelf: "center" }}>
+          <ButtonSolid
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (centered)"}
+            onPress={onButtonPress}
+          />
+        </View>
+      </ComponentViewerBox>
+      <ComponentViewerBox name="ButtonSolid · Primary, Full width">
+        <View>
+          <ButtonSolid
+            fullWidth
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (full width)"}
+            onPress={onButtonPress}
+          />
+        </View>
+      </ComponentViewerBox>
+      <ComponentViewerBox name="ButtonSolid · Primary, disabled">
+        <View>
+          <ButtonSolid
+            disabled
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (disabled)"}
+            onPress={onButtonPress}
+          />
 
-        <VSpacer size={16} />
+          <VSpacer size={16} />
 
-        <ButtonSolid
-          color="danger"
-          disabled
-          accessibilityLabel="Tap to trigger test alert"
-          label={"Danger button (disabled)"}
-          icon="trashcan"
-          onPress={onButtonPress}
-        />
-      </View>
-    </ComponentViewerBox>
+          <ButtonSolid
+            disabled
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (disabled)"}
+            icon="qrCode"
+            onPress={onButtonPress}
+          />
+        </View>
+      </ComponentViewerBox>
 
-    <View style={styles.primaryBlock}>
-      <ComponentViewerBox
-        name="ButtonSolid · Contrast variant"
-        colorMode="dark"
-      >
+      <ComponentViewerBox name="ButtonSolid · Danger variant">
         <View>
           <ButtonSolid
-            color="contrast"
-            label={"Contrast button"}
+            color="danger"
+            label={"Danger button"}
             onPress={onButtonPress}
             accessibilityLabel="Tap to trigger test alert"
           />
@@ -193,368 +132,403 @@ export const Buttons = () => (
           <VSpacer size={16} />
 
           <ButtonSolid
-            color="contrast"
-            label={"Contrast button"}
-            icon="add"
-            onPress={onButtonPress}
+            color="danger"
             accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button"}
+            icon="trashcan"
+            onPress={onButtonPress}
           />
 
           <VSpacer size={16} />
 
           <ButtonSolid
-            color="contrast"
-            label={"Contrast button"}
-            icon="add"
+            color="danger"
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button"}
+            icon="trashcan"
             iconPosition="end"
             onPress={onButtonPress}
-            accessibilityLabel="Tap to trigger test alert"
           />
         </View>
       </ComponentViewerBox>
-
-      <ComponentViewerBox
-        name="ButtonSolid · Contrast, full width"
-        colorMode="dark"
-      >
+      <ComponentViewerBox name="ButtonSolid · Danger, full width">
         <View>
           <ButtonSolid
             fullWidth
-            color="contrast"
-            label={"Contrast button"}
-            onPress={onButtonPress}
+            color="danger"
             accessibilityLabel="Tap to trigger test alert"
+            label={"Danger button (full width)"}
+            onPress={onButtonPress}
           />
         </View>
       </ComponentViewerBox>
 
-      <ComponentViewerBox
-        name="ButtonSolid · Contrast, disabled"
-        colorMode="dark"
-        last
-      >
+      <ComponentViewerBox name="ButtonSolid · Danger, disabled">
         <View>
           <ButtonSolid
+            color="danger"
             disabled
-            color="contrast"
-            label={"Contrast button (disabled)"}
-            onPress={onButtonPress}
             accessibilityLabel="Tap to trigger test alert"
+            label={"Danger button (disabled)"}
+            onPress={onButtonPress}
           />
 
           <VSpacer size={16} />
 
           <ButtonSolid
+            color="danger"
             disabled
-            color="contrast"
-            label={"Contrast button (disabled)"}
-            icon="add"
-            onPress={onButtonPress}
             accessibilityLabel="Tap to trigger test alert"
+            label={"Danger button (disabled)"}
+            icon="trashcan"
+            onPress={onButtonPress}
           />
         </View>
       </ComponentViewerBox>
-    </View>
-
-    <VSpacer size={40} />
-
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginBottom: 16, marginTop: 16 }}
-    >
-      ButtonOutline
-    </H2>
-    <ComponentViewerBox name="ButtonOutline · Primary variant (using Pressable API)">
-      <ButtonOutline
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        onPress={onButtonPress}
-      />
-
-      <VSpacer size={16} />
-
-      <ButtonOutline
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        icon="arrowLeft"
-        onPress={onButtonPress}
-      />
-
-      <VSpacer size={16} />
 
-      <ButtonOutline
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        icon="arrowRight"
-        iconPosition="end"
-        onPress={onButtonPress}
-      />
+      <View style={styles.primaryBlock}>
+        <ComponentViewerBox
+          name="ButtonSolid · Contrast variant"
+          colorMode="dark"
+        >
+          <View>
+            <ButtonSolid
+              color="contrast"
+              label={"Contrast button"}
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+
+            <VSpacer size={16} />
+
+            <ButtonSolid
+              color="contrast"
+              label={"Contrast button"}
+              icon="add"
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+
+            <VSpacer size={16} />
+
+            <ButtonSolid
+              color="contrast"
+              label={"Contrast button"}
+              icon="add"
+              iconPosition="end"
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+          </View>
+        </ComponentViewerBox>
+
+        <ComponentViewerBox
+          name="ButtonSolid · Contrast, full width"
+          colorMode="dark"
+        >
+          <View>
+            <ButtonSolid
+              fullWidth
+              color="contrast"
+              label={"Contrast button"}
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+          </View>
+        </ComponentViewerBox>
+
+        <ComponentViewerBox
+          name="ButtonSolid · Contrast, disabled"
+          colorMode="dark"
+          last
+        >
+          <View>
+            <ButtonSolid
+              disabled
+              color="contrast"
+              label={"Contrast button (disabled)"}
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+
+            <VSpacer size={16} />
+
+            <ButtonSolid
+              disabled
+              color="contrast"
+              label={"Contrast button (disabled)"}
+              icon="add"
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+          </View>
+        </ComponentViewerBox>
+      </View>
 
-      <VSpacer size={16} />
+      <VSpacer size={40} />
 
-      <View style={{ alignSelf: "center" }}>
-        <ButtonOutline
-          accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (centered)"}
-          onPress={onButtonPress}
-        />
-      </View>
-    </ComponentViewerBox>
-    <ComponentViewerBox name="ButtonOutline · Primary, full width">
-      <View>
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ButtonOutline
+      </H2>
+      <ComponentViewerBox name="ButtonOutline · Primary variant (using Pressable API)">
         <ButtonOutline
-          fullWidth
           accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (full width)"}
+          label={"Primary button"}
           onPress={onButtonPress}
         />
-      </View>
-    </ComponentViewerBox>
-    <ComponentViewerBox name="ButtonOutline · Primary, disabled">
-      <View>
+
+        <VSpacer size={16} />
+
         <ButtonOutline
-          disabled
           accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (disabled)"}
+          label={"Primary button"}
+          icon="arrowLeft"
           onPress={onButtonPress}
         />
 
         <VSpacer size={16} />
 
         <ButtonOutline
-          disabled
           accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (disabled)"}
+          label={"Primary button"}
           icon="arrowRight"
           iconPosition="end"
           onPress={onButtonPress}
         />
-      </View>
-    </ComponentViewerBox>
-
-    <View style={styles.primaryBlock}>
-      <ComponentViewerBox
-        name="ButtonOutline · Contrast variant"
-        colorMode="dark"
-      >
-        <View>
-          <ButtonOutline
-            color="contrast"
-            label={"Contrast button"}
-            onPress={onButtonPress}
-            accessibilityLabel="Tap to trigger test alert"
-          />
 
-          <VSpacer size={16} />
+        <VSpacer size={16} />
 
+        <View style={{ alignSelf: "center" }}>
           <ButtonOutline
-            color="contrast"
-            label={"Contrast button"}
-            icon="arrowLeft"
-            onPress={onButtonPress}
             accessibilityLabel="Tap to trigger test alert"
-          />
-
-          <VSpacer size={16} />
-
-          <ButtonOutline
-            color="contrast"
-            label={"Contrast button"}
-            icon="arrowRight"
-            iconPosition="end"
+            label={"Primary button (centered)"}
             onPress={onButtonPress}
-            accessibilityLabel="Tap to trigger test alert"
           />
         </View>
       </ComponentViewerBox>
-
-      <ComponentViewerBox
-        name="ButtonOutline · Contrast, full width"
-        colorMode="dark"
-      >
+      <ComponentViewerBox name="ButtonOutline · Primary, full width">
         <View>
           <ButtonOutline
             fullWidth
-            color="contrast"
-            label={"Contrast button"}
-            onPress={onButtonPress}
             accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (full width)"}
+            onPress={onButtonPress}
           />
         </View>
       </ComponentViewerBox>
-
-      <ComponentViewerBox
-        name="ButtonOutline · Contrast, disabled"
-        colorMode="dark"
-        last
-      >
+      <ComponentViewerBox name="ButtonOutline · Primary, disabled">
         <View>
           <ButtonOutline
             disabled
-            color="contrast"
-            label={"Contrast button (disabled)"}
-            onPress={onButtonPress}
             accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (disabled)"}
+            onPress={onButtonPress}
           />
 
           <VSpacer size={16} />
 
           <ButtonOutline
             disabled
-            color="contrast"
-            label={"Contrast button (disabled)"}
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (disabled)"}
             icon="arrowRight"
             iconPosition="end"
             onPress={onButtonPress}
-            accessibilityLabel="Tap to trigger test alert"
           />
         </View>
       </ComponentViewerBox>
-    </View>
-
-    <VSpacer size={40} />
-
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginBottom: 16, marginTop: 16 }}
-    >
-      ButtonLink
-    </H2>
-    <ComponentViewerBox name="ButtonLink · Primary variant (using Pressable API)">
-      <ButtonLink
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        onPress={onButtonPress}
-      />
 
-      <VSpacer size={16} />
-
-      <ButtonLink
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        icon="starEmpty"
-        onPress={onButtonPress}
-      />
-
-      <VSpacer size={16} />
-
-      <ButtonLink
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Primary button"}
-        icon="starEmpty"
-        iconPosition="end"
-        onPress={onButtonPress}
-      />
+      <View style={styles.primaryBlock}>
+        <ComponentViewerBox
+          name="ButtonOutline · Contrast variant"
+          colorMode="dark"
+        >
+          <View>
+            <ButtonOutline
+              color="contrast"
+              label={"Contrast button"}
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+
+            <VSpacer size={16} />
+
+            <ButtonOutline
+              color="contrast"
+              label={"Contrast button"}
+              icon="arrowLeft"
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+
+            <VSpacer size={16} />
+
+            <ButtonOutline
+              color="contrast"
+              label={"Contrast button"}
+              icon="arrowRight"
+              iconPosition="end"
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+          </View>
+        </ComponentViewerBox>
+
+        <ComponentViewerBox
+          name="ButtonOutline · Contrast, full width"
+          colorMode="dark"
+        >
+          <View>
+            <ButtonOutline
+              fullWidth
+              color="contrast"
+              label={"Contrast button"}
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+          </View>
+        </ComponentViewerBox>
+
+        <ComponentViewerBox
+          name="ButtonOutline · Contrast, disabled"
+          colorMode="dark"
+          last
+        >
+          <View>
+            <ButtonOutline
+              disabled
+              color="contrast"
+              label={"Contrast button (disabled)"}
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+
+            <VSpacer size={16} />
+
+            <ButtonOutline
+              disabled
+              color="contrast"
+              label={"Contrast button (disabled)"}
+              icon="arrowRight"
+              iconPosition="end"
+              onPress={onButtonPress}
+              accessibilityLabel="Tap to trigger test alert"
+            />
+          </View>
+        </ComponentViewerBox>
+      </View>
 
-      <VSpacer size={16} />
+      <VSpacer size={40} />
 
-      <View style={{ alignSelf: "center" }}>
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ButtonLink
+      </H2>
+      <ComponentViewerBox name="ButtonLink · Primary variant (using Pressable API)">
         <ButtonLink
           accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (centered)"}
+          label={"Primary button"}
           onPress={onButtonPress}
         />
-      </View>
-    </ComponentViewerBox>
-    <ComponentViewerBox name="ButtonLink · Primary, disabled">
-      <View>
+
+        <VSpacer size={16} />
+
         <ButtonLink
-          disabled
           accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (disabled)"}
+          label={"Primary button"}
+          icon="starEmpty"
           onPress={onButtonPress}
         />
 
         <VSpacer size={16} />
 
         <ButtonLink
-          disabled
           accessibilityLabel="Tap to trigger test alert"
-          label={"Primary button (disabled)"}
+          label={"Primary button"}
           icon="starEmpty"
           iconPosition="end"
           onPress={onButtonPress}
         />
-      </View>
-    </ComponentViewerBox>
-
-    <VSpacer size={40} />
-
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginBottom: 16, marginTop: 16 }}
-    >
-      IconButton
-    </H2>
-    <ComponentViewerBox name="IconButton · Primary variant">
-      <View style={IOStyles.row}>
-        <IconButton
-          accessibilityLabel="Tap to trigger test alert"
-          icon="search"
-          onPress={onButtonPress}
-        />
 
-        <HSpacer size={16} />
+        <VSpacer size={16} />
 
-        <IconButton
-          accessibilityLabel="Tap to trigger test alert"
-          icon="help"
-          onPress={onButtonPress}
-        />
+        <View style={{ alignSelf: "center" }}>
+          <ButtonLink
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (centered)"}
+            onPress={onButtonPress}
+          />
+        </View>
+      </ComponentViewerBox>
+      <ComponentViewerBox name="ButtonLink · Primary, disabled">
+        <View>
+          <ButtonLink
+            disabled
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (disabled)"}
+            onPress={onButtonPress}
+          />
 
-        <HSpacer size={16} />
+          <VSpacer size={16} />
 
-        <IconButton
-          accessibilityLabel="Tap to trigger test alert"
-          icon="help"
-          disabled
-          onPress={onButtonPress}
-        />
-      </View>
-    </ComponentViewerBox>
+          <ButtonLink
+            disabled
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (disabled)"}
+            icon="starEmpty"
+            iconPosition="end"
+            onPress={onButtonPress}
+          />
+        </View>
+      </ComponentViewerBox>
 
-    <ComponentViewerBox name="IconButton · Neutral variant">
-      <View style={IOStyles.row}>
-        <IconButton
-          color="neutral"
-          accessibilityLabel="Tap to trigger test alert"
-          icon="search"
-          onPress={onButtonPress}
-        />
+      <VSpacer size={40} />
 
-        <HSpacer size={16} />
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        IconButton
+      </H2>
+      <ComponentViewerBox name="IconButton · Primary variant">
+        <View style={IOStyles.row}>
+          <IconButton
+            accessibilityLabel="Tap to trigger test alert"
+            icon="search"
+            onPress={onButtonPress}
+          />
 
-        <IconButton
-          color="neutral"
-          accessibilityLabel="Tap to trigger test alert"
-          icon="help"
-          onPress={onButtonPress}
-        />
+          <HSpacer size={16} />
+
+          <IconButton
+            accessibilityLabel="Tap to trigger test alert"
+            icon="help"
+            onPress={onButtonPress}
+          />
 
-        <HSpacer size={16} />
+          <HSpacer size={16} />
 
-        <IconButton
-          color="neutral"
-          accessibilityLabel="Tap to trigger test alert"
-          icon="help"
-          disabled
-          onPress={onButtonPress}
-        />
-      </View>
-    </ComponentViewerBox>
+          <IconButton
+            accessibilityLabel="Tap to trigger test alert"
+            icon="help"
+            disabled
+            onPress={onButtonPress}
+          />
+        </View>
+      </ComponentViewerBox>
 
-    <View style={styles.primaryBlock}>
-      <ComponentViewerBox
-        name="IconButton · Contrast variant"
-        colorMode="dark"
-        last
-      >
+      <ComponentViewerBox name="IconButton · Neutral variant">
         <View style={IOStyles.row}>
           <IconButton
-            color="contrast"
+            color="neutral"
             accessibilityLabel="Tap to trigger test alert"
             icon="search"
             onPress={onButtonPress}
@@ -563,7 +537,7 @@ export const Buttons = () => (
           <HSpacer size={16} />
 
           <IconButton
-            color="contrast"
+            color="neutral"
             accessibilityLabel="Tap to trigger test alert"
             icon="help"
             onPress={onButtonPress}
@@ -572,7 +546,7 @@ export const Buttons = () => (
           <HSpacer size={16} />
 
           <IconButton
-            color="contrast"
+            color="neutral"
             accessibilityLabel="Tap to trigger test alert"
             icon="help"
             disabled
@@ -580,225 +554,261 @@ export const Buttons = () => (
           />
         </View>
       </ComponentViewerBox>
-    </View>
-
-    <VSpacer size={40} />
-
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginBottom: 16, marginTop: 16 }}
-    >
-      IconButtonSolid
-    </H2>
-
-    <ComponentViewerBox name="IconButtonSolid · Primary variant, large">
-      <View style={IOStyles.row}>
-        <IconButtonSolid
-          color="primary"
-          accessibilityLabel="Tap to trigger test alert"
-          icon="arrowBottom"
-          onPress={() => {
-            alert("Action triggered");
-          }}
-        />
-
-        <HSpacer size={16} />
 
-        <IconButtonSolid
-          color="primary"
-          accessibilityLabel="Tap to trigger test alert"
-          icon="arrowBottom"
-          disabled
-          onPress={() => {
-            alert("Action triggered");
-          }}
-        />
+      <View style={styles.primaryBlock}>
+        <ComponentViewerBox
+          name="IconButton · Contrast variant"
+          colorMode="dark"
+          last
+        >
+          <View style={IOStyles.row}>
+            <IconButton
+              color="contrast"
+              accessibilityLabel="Tap to trigger test alert"
+              icon="search"
+              onPress={onButtonPress}
+            />
+
+            <HSpacer size={16} />
+
+            <IconButton
+              color="contrast"
+              accessibilityLabel="Tap to trigger test alert"
+              icon="help"
+              onPress={onButtonPress}
+            />
+
+            <HSpacer size={16} />
+
+            <IconButton
+              color="contrast"
+              accessibilityLabel="Tap to trigger test alert"
+              icon="help"
+              disabled
+              onPress={onButtonPress}
+            />
+          </View>
+        </ComponentViewerBox>
       </View>
-    </ComponentViewerBox>
 
-    <View style={styles.primaryBlock}>
-      <ComponentViewerBox
-        name="IconButtonSolid · Contrast variant, large"
-        colorMode="dark"
-        last
+      <VSpacer size={40} />
+
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
       >
+        IconButtonSolid
+      </H2>
+
+      <ComponentViewerBox name="IconButtonSolid · Primary variant, large">
         <View style={IOStyles.row}>
           <IconButtonSolid
-            color="contrast"
+            color="primary"
             accessibilityLabel="Tap to trigger test alert"
             icon="arrowBottom"
-            onPress={onButtonPress}
+            onPress={() => {
+              alert("Action triggered");
+            }}
           />
 
           <HSpacer size={16} />
 
           <IconButtonSolid
-            color="contrast"
+            color="primary"
             accessibilityLabel="Tap to trigger test alert"
             icon="arrowBottom"
             disabled
-            onPress={onButtonPress}
+            onPress={() => {
+              alert("Action triggered");
+            }}
           />
         </View>
       </ComponentViewerBox>
-    </View>
-
-    <VSpacer size={40} />
-
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginBottom: 16, marginTop: 16 }}
-    >
-      IconButtonContained (Icebox)
-    </H2>
-    <ComponentViewerBox name="IconButtonContained · Primary variant">
-      <View style={IOStyles.row}>
-        <IconButtonContained
-          accessibilityLabel="Tap to trigger test alert"
-          icon="help"
-          onPress={() => {
-            alert("Action triggered");
-          }}
-        />
 
-        <IconButtonContained
-          accessibilityLabel="Tap to trigger test alert"
-          icon="help"
-          disabled
-          onPress={() => {
-            alert("Action triggered");
-          }}
-        />
+      <View style={styles.primaryBlock}>
+        <ComponentViewerBox
+          name="IconButtonSolid · Contrast variant, large"
+          colorMode="dark"
+          last
+        >
+          <View style={IOStyles.row}>
+            <IconButtonSolid
+              color="contrast"
+              accessibilityLabel="Tap to trigger test alert"
+              icon="arrowBottom"
+              onPress={onButtonPress}
+            />
+
+            <HSpacer size={16} />
+
+            <IconButtonSolid
+              color="contrast"
+              accessibilityLabel="Tap to trigger test alert"
+              icon="arrowBottom"
+              disabled
+              onPress={onButtonPress}
+            />
+          </View>
+        </ComponentViewerBox>
       </View>
-    </ComponentViewerBox>
 
-    <ComponentViewerBox name="IconButtonContained · Neutral variant">
-      <View style={IOStyles.row}>
-        <IconButtonContained
-          color="neutral"
-          accessibilityLabel="Tap to trigger test alert"
-          icon="help"
-          onPress={() => {
-            alert("Action triggered");
-          }}
-        />
+      <VSpacer size={40} />
 
-        <IconButtonContained
-          color="neutral"
-          accessibilityLabel="Tap to trigger test alert"
-          icon="help"
-          disabled
-          onPress={() => {
-            alert("Action triggered");
-          }}
-        />
-      </View>
-    </ComponentViewerBox>
-
-    <View style={styles.primaryBlock}>
-      <ComponentViewerBox
-        name="IconButtonContained · Contrast variant"
-        colorMode="dark"
-        last
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
       >
+        IconButtonContained (Icebox)
+      </H2>
+      <ComponentViewerBox name="IconButtonContained · Primary variant">
         <View style={IOStyles.row}>
           <IconButtonContained
-            color="contrast"
             accessibilityLabel="Tap to trigger test alert"
             icon="help"
-            onPress={onButtonPress}
+            onPress={() => {
+              alert("Action triggered");
+            }}
           />
 
           <IconButtonContained
-            color="contrast"
             accessibilityLabel="Tap to trigger test alert"
             icon="help"
             disabled
-            onPress={onButtonPress}
+            onPress={() => {
+              alert("Action triggered");
+            }}
           />
         </View>
       </ComponentViewerBox>
-    </View>
-
-    <VSpacer size={40} />
-
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginBottom: 16, marginTop: 16 }}
-    >
-      ButtonExtendedOutline
-    </H2>
-    <ComponentViewerBox name="ButtonExtendedOutline (using Pressable API)">
-      <View>
-        <ButtonExtendedOutline
-          label={"Label name"}
-          description={"This is a description of the element"}
-          onPress={() => {
-            alert("Action triggered");
-          }}
-        />
+
+      <ComponentViewerBox name="IconButtonContained · Neutral variant">
+        <View style={IOStyles.row}>
+          <IconButtonContained
+            color="neutral"
+            accessibilityLabel="Tap to trigger test alert"
+            icon="help"
+            onPress={() => {
+              alert("Action triggered");
+            }}
+          />
+
+          <IconButtonContained
+            color="neutral"
+            accessibilityLabel="Tap to trigger test alert"
+            icon="help"
+            disabled
+            onPress={() => {
+              alert("Action triggered");
+            }}
+          />
+        </View>
+      </ComponentViewerBox>
+
+      <View style={styles.primaryBlock}>
+        <ComponentViewerBox
+          name="IconButtonContained · Contrast variant"
+          colorMode="dark"
+          last
+        >
+          <View style={IOStyles.row}>
+            <IconButtonContained
+              color="contrast"
+              accessibilityLabel="Tap to trigger test alert"
+              icon="help"
+              onPress={onButtonPress}
+            />
+
+            <IconButtonContained
+              color="contrast"
+              accessibilityLabel="Tap to trigger test alert"
+              icon="help"
+              disabled
+              onPress={onButtonPress}
+            />
+          </View>
+        </ComponentViewerBox>
       </View>
-      <VSpacer size={16} />
-      <View>
-        <ButtonExtendedOutline
-          icon="chevronRight"
-          label={"Label only"}
-          onPress={() => {
-            alert("Action triggered");
-          }}
+
+      <VSpacer size={40} />
+
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ButtonExtendedOutline
+      </H2>
+      <ComponentViewerBox name="ButtonExtendedOutline (using Pressable API)">
+        <View>
+          <ButtonExtendedOutline
+            label={"Label name"}
+            description={"This is a description of the element"}
+            onPress={() => {
+              alert("Action triggered");
+            }}
+          />
+        </View>
+        <VSpacer size={16} />
+        <View>
+          <ButtonExtendedOutline
+            icon="chevronRight"
+            label={"Label only"}
+            onPress={() => {
+              alert("Action triggered");
+            }}
+          />
+        </View>
+      </ComponentViewerBox>
+
+      <VSpacer size={24} />
+
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        Specific buttons
+      </H2>
+
+      <ComponentViewerBox name="CalendarEventButton (using new ButtonOutline)">
+        <ButtonOutline
+          small
+          accessibilityLabel="Tap to trigger test alert"
+          label={"Aggiungi promemoria"}
+          icon="add"
+          onPress={onButtonPress}
         />
-      </View>
-    </ComponentViewerBox>
-
-    <VSpacer size={24} />
-
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginBottom: 16, marginTop: 16 }}
-    >
-      Specific buttons
-    </H2>
-
-    <ComponentViewerBox name="CalendarEventButton (using new ButtonOutline)">
-      <ButtonOutline
-        small
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Aggiungi promemoria"}
-        icon="add"
-        onPress={onButtonPress}
-      />
 
-      <VSpacer size={16} />
+        <VSpacer size={16} />
 
-      <ButtonOutline
-        small
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Aggiunto"}
-        icon="checkTickBig"
-        onPress={onButtonPress}
-      />
-    </ComponentViewerBox>
-
-    <ComponentViewerBox name="Login buttons">
-      <ButtonSolid
-        fullWidth
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Entra con SPID"}
-        icon="profile"
-        onPress={onButtonPress}
-      />
-      <VSpacer size={8} />
-      <ButtonSolid
-        fullWidth
-        accessibilityLabel="Tap to trigger test alert"
-        label={"Entra con CIE"}
-        icon="cie"
-        onPress={onButtonPress}
-      />
-    </ComponentViewerBox>
-  </Screen>
-);
+        <ButtonOutline
+          small
+          accessibilityLabel="Tap to trigger test alert"
+          label={"Aggiunto"}
+          icon="checkTickBig"
+          onPress={onButtonPress}
+        />
+      </ComponentViewerBox>
+
+      <ComponentViewerBox name="Login buttons">
+        <ButtonSolid
+          fullWidth
+          accessibilityLabel="Tap to trigger test alert"
+          label={"Entra con SPID"}
+          icon="profile"
+          onPress={onButtonPress}
+        />
+        <VSpacer size={8} />
+        <ButtonSolid
+          fullWidth
+          accessibilityLabel="Tap to trigger test alert"
+          label={"Entra con CIE"}
+          icon="cie"
+          onPress={onButtonPress}
+        />
+      </ComponentViewerBox>
+    </Screen>
+  );
+};
diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
index 02e322bb..2c6ba85a 100644
--- a/src/components/buttons/ButtonSolid.tsx
+++ b/src/components/buttons/ButtonSolid.tsx
@@ -9,13 +9,18 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
-import { IOColors } from "../../core/IOColors";
-import { IOButtonStyles } from "../../core/IOStyles";
 import { IOIcons, Icon } from "../icons";
 import { WithTestID } from "../../utils/types";
 import { HSpacer } from "../spacer/Spacer";
 import { BaseTypography } from "../typography/BaseTypography";
+import {
+  IOButtonStyles,
+  IOColors,
+  IOScaleValues,
+  IOSpringValues,
+  useIOExperimentalDesign
+} from "../../core";
+import ButtonSolidLegacy from "./ButtonSolidLeg";
 
 type ButtonSolidColor = "primary" | "danger" | "contrast";
 
@@ -115,7 +120,7 @@ export const ButtonSolid = React.memo(
     testID
   }: ButtonSolidProps) => {
     const isPressed = useSharedValue(0);
-
+    const { isExperimental } = useIOExperimentalDesign();
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
@@ -224,7 +229,26 @@ export const ButtonSolid = React.memo(
         </Animated.View>
       </Pressable>
     );
-    return <Button />;
+
+    return isExperimental ? (
+      <Button />
+    ) : (
+      <ButtonSolidLegacy
+        {...{
+          color,
+          accessibilityLabel,
+          label,
+          onPress,
+          accessibilityHint,
+          disabled,
+          fullWidth,
+          icon,
+          iconPosition,
+          small,
+          testID
+        }}
+      />
+    );
   }
 );
 
diff --git a/src/components/buttons/ButtonSolidLeg.tsx b/src/components/buttons/ButtonSolidLeg.tsx
new file mode 100644
index 00000000..2e95c39c
--- /dev/null
+++ b/src/components/buttons/ButtonSolidLeg.tsx
@@ -0,0 +1,243 @@
+/**
+ * TODO: This is actually a temporary file, optimized code merging with ButtonSolid.tsx is needed
+ */
+import * as React from "react";
+import { useCallback } from "react";
+import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import { WithTestID } from "../../utils/types";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import {
+  IOButtonLegacyStyles,
+  IOButtonStyles,
+  IOColors,
+  IOScaleValues,
+  IOSpringValues
+} from "../../core";
+import { HSpacer } from "../spacer";
+import { BaseTypography } from "../typography";
+
+export type ButtonSolid = WithTestID<{
+  color?: "primary" | "danger" | "contrast";
+  label: string;
+  small?: boolean;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  // Icons
+  icon?: IOIcons;
+  iconPosition?: "start" | "end";
+  // Accessibility
+  accessibilityLabel: string;
+  accessibilityHint?: string;
+  // Events
+  onPress: (event: GestureResponderEvent) => void;
+}>;
+
+type ColorStates = {
+  default: string;
+  pressed: string;
+  label: {
+    default: IOColors;
+    disabled: IOColors;
+  };
+};
+
+/*
+░░░ COMPONENT CONFIGURATION ░░░
+*/
+
+const mapLegacyColorStates: Record<
+  NonNullable<ButtonSolid["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    default: IOColors.blue,
+    pressed: IOColors["blue-600"],
+    label: {
+      default: "white",
+      disabled: "white"
+    }
+  },
+  // Danger button
+  danger: {
+    default: IOColors["error-600"],
+    pressed: IOColors["error-500"],
+    label: {
+      default: "white",
+      disabled: "white"
+    }
+  },
+  // Contrast button
+  contrast: {
+    default: IOColors.white,
+    pressed: IOColors["blue-50"],
+    label: {
+      default: "blue",
+      disabled: "white"
+    }
+  }
+};
+
+// Disabled state
+const colorPrimaryLegacyButtonDisabled: IOColors = "bluegreyLight";
+const legacyStyles = StyleSheet.create({
+  backgroundDisabled: {
+    backgroundColor: IOColors[colorPrimaryLegacyButtonDisabled]
+  }
+});
+
+/**
+ * ButtonSolid Component
+ *
+ * The `ButtonSolid` component is a reusable button component that provides a solid-colored button
+ * with customizable properties, such as color, label, icon, size, and press animations.
+ * Currently if the Design System is enabled, the component returns the Button of the @pagopa/io-app-design-system library
+ * otherwise it returns the legacy component.
+ *
+ * @property {string} color - The color of the button. Possible values are: "primary", "secondary", "success", "danger", "warning", "info", etc.
+ * @property {string} label - The label text displayed on the button.
+ * @property {boolean} small - If `true`, the button will be rendered with a smaller size.
+ * @property {boolean} fullWidth - If `true`, the button will occupy the full width of its container.
+ * @property {boolean} disabled - If `true`, the button will be disabled and not respond to user interactions.
+ * @property {string} icon - The name of the icon to be displayed on the button.
+ * @property {string} iconPosition - The position of the icon relative to the label. Possible values are: "start" (before the label) or "end" (after the label).
+ * @property {function} onPress - The callback function to be executed when the button is pressed.
+ * @property {string} accessibilityLabel - An accessibility label for the button.
+ * @property {string} accessibilityHint - An accessibility hint for the button.
+ * @property {string} testID - A test identifier for the button, used for testing purposes.
+ *
+ */
+export const ButtonSolidLegacy = ({
+  color = "primary",
+  label,
+  small = false,
+  fullWidth = false,
+  disabled = false,
+  icon,
+  iconPosition = "start",
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  testID
+}: ButtonSolid) => {
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
+
+  // Using a spring-based animation for our interpolations
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
+
+  // Interpolate animation values from `isPressed` values
+  const pressedAnimationStyle = useAnimatedStyle(() => {
+    // Link color states to the pressed states
+
+    const bgColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [mapLegacyColorStates[color].default, mapLegacyColorStates[color].pressed]
+    );
+
+    // Scale down button slightly when pressed
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      backgroundColor: bgColor,
+      transform: [{ scale }]
+    };
+  });
+
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  // Label & Icons colors
+  const foregroundLegacyColor: IOColors = disabled
+    ? mapLegacyColorStates[color]?.label?.disabled
+    : mapLegacyColorStates[color]?.label?.default;
+
+  // Icon size
+  const iconSize: IOIconSizeScale = small ? 16 : 20;
+
+  const LegacyButton = () => (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={"button"}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={true}
+      disabled={disabled}
+      style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
+    >
+      <Animated.View
+        style={[
+          IOButtonLegacyStyles.button,
+          iconPosition === "end" && { flexDirection: "row-reverse" },
+          small
+            ? IOButtonLegacyStyles.buttonSizeSmall
+            : IOButtonLegacyStyles.buttonSizeDefault,
+          disabled
+            ? legacyStyles.backgroundDisabled
+            : { backgroundColor: mapLegacyColorStates[color]?.default },
+          /* Prevent Reanimated from overriding background colors
+          if button is disabled */
+          !disabled && pressedAnimationStyle
+        ]}
+      >
+        {icon && (
+          <>
+            <Icon name={icon} size={iconSize} color={foregroundLegacyColor} />
+            <HSpacer size={8} />
+          </>
+        )}
+        <BaseTypography
+          weight={"Bold"}
+          color={foregroundLegacyColor}
+          style={[
+            IOButtonLegacyStyles.label,
+            small
+              ? IOButtonLegacyStyles.labelSizeSmall
+              : IOButtonLegacyStyles.labelSizeDefault
+          ]}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          /* A11y-related props:
+          DON'T UNCOMMENT THEM */
+          /* allowFontScaling
+          maxFontSizeMultiplier={1.3} */
+        >
+          {label}
+        </BaseTypography>
+      </Animated.View>
+    </Pressable>
+  );
+  /* REMOVE_LEGACY_COMPONENT: End ▶ */
+
+  return <LegacyButton />;
+};
+
+export default ButtonSolidLegacy;
diff --git a/src/core/IODSExperimentalContextProvider.tsx b/src/core/IODSExperimentalContextProvider.tsx
new file mode 100644
index 00000000..3a428a11
--- /dev/null
+++ b/src/core/IODSExperimentalContextProvider.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { constVoid } from "fp-ts/lib/function";
+
+type IOExperimentalContextType = {
+  isExperimental: boolean;
+  setExperimental: (isExperimental: boolean) => void;
+};
+/**
+ * Experimental Context for new UI Representations
+ */
+const IOExperimentalDesignContext =
+  React.createContext<IOExperimentalContextType>({
+    isExperimental: true,
+    setExperimental: constVoid
+  });
+
+export const useIOExperimentalDesign = () =>
+  React.useContext(IOExperimentalDesignContext);
+
+export const IODSExperimentalContextProvider = ({
+  children
+}: React.PropsWithChildren<any>) => {
+  const [isExperimental, setExperimental] = React.useState(false);
+
+  return (
+    <IOExperimentalDesignContext.Provider
+      value={{ isExperimental, setExperimental }}
+    >
+      {children}
+    </IOExperimentalDesignContext.Provider>
+  );
+};
diff --git a/src/core/index.ts b/src/core/index.ts
index bf207e86..ec67865a 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -4,3 +4,4 @@ export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";
 export * from "./IOStyleVariables";
+export * from "./IODSExperimentalContextProvider";

From b8243405ee116d97254b72e802dfb0c66cf0a5d7 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Thu, 7 Sep 2023 15:30:07 +0200
Subject: [PATCH 02/12] Button Solid code optimization

---
 src/components/buttons/ButtonSolid.tsx    |  85 +++++---
 src/components/buttons/ButtonSolidLeg.tsx | 243 ----------------------
 2 files changed, 55 insertions(+), 273 deletions(-)
 delete mode 100644 src/components/buttons/ButtonSolidLeg.tsx

diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
index 2c6ba85a..a8f6d9ef 100644
--- a/src/components/buttons/ButtonSolid.tsx
+++ b/src/components/buttons/ButtonSolid.tsx
@@ -14,13 +14,13 @@ import { WithTestID } from "../../utils/types";
 import { HSpacer } from "../spacer/Spacer";
 import { BaseTypography } from "../typography/BaseTypography";
 import {
+  IOButtonLegacyStyles,
   IOButtonStyles,
   IOColors,
   IOScaleValues,
   IOSpringValues,
   useIOExperimentalDesign
 } from "../../core";
-import ButtonSolidLegacy from "./ButtonSolidLeg";
 
 type ButtonSolidColor = "primary" | "danger" | "contrast";
 
@@ -105,6 +105,39 @@ const mapColorStates: Record<
   }
 };
 
+const mapLegacyColorStates: Record<
+  NonNullable<ButtonSolidProps["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    default: IOColors.blue,
+    pressed: IOColors["blue-600"],
+    label: {
+      default: "white",
+      disabled: "white"
+    }
+  },
+  // Danger button
+  danger: {
+    default: IOColors["error-600"],
+    pressed: IOColors["error-500"],
+    label: {
+      default: "white",
+      disabled: "white"
+    }
+  },
+  // Contrast button
+  contrast: {
+    default: IOColors.white,
+    pressed: IOColors["blue-50"],
+    label: {
+      default: "blue",
+      disabled: "white"
+    }
+  }
+};
+
 export const ButtonSolid = React.memo(
   ({
     color = "primary",
@@ -124,6 +157,16 @@ export const ButtonSolid = React.memo(
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
+    const colorMap = React.useMemo(
+      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+      [isExperimental]
+    );
+
+    const buttonStyles = React.useMemo(
+      () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
+      [isExperimental]
+    );
+
     // Using a spring-based animation for our interpolations
     const progressPressed = useDerivedValue(() =>
       withSpring(isPressed.value, IOSpringValues.button)
@@ -135,7 +178,7 @@ export const ButtonSolid = React.memo(
       const bgColor = interpolateColor(
         progressPressed.value,
         [0, 1],
-        [mapColorStates[color].default, mapColorStates[color].pressed]
+        [colorMap[color].default, colorMap[color].pressed]
       );
 
       // Scale down button slightly when pressed
@@ -163,8 +206,8 @@ export const ButtonSolid = React.memo(
 
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
-      ? mapColorStates[color]?.label?.disabled
-      : mapColorStates[color]?.label?.default;
+      ? colorMap[color]?.label?.disabled
+      : colorMap[color]?.label?.default;
 
     // Icon size
     const iconSize = small ? 16 : 20;
@@ -184,11 +227,11 @@ export const ButtonSolid = React.memo(
       >
         <Animated.View
           style={[
-            IOButtonStyles.button,
+            buttonStyles.button,
             iconPosition === "end" && { flexDirection: "row-reverse" },
             small
-              ? IOButtonStyles.buttonSizeSmall
-              : IOButtonStyles.buttonSizeDefault,
+              ? buttonStyles.buttonSizeSmall
+              : buttonStyles.buttonSizeDefault,
             disabled
               ? styles.backgroundDisabled
               : { backgroundColor: mapColorStates[color]?.default },
@@ -208,14 +251,14 @@ export const ButtonSolid = React.memo(
             </>
           )}
           <BaseTypography
-            font="ReadexPro"
+            font={isExperimental ? "ReadexPro" : undefined}
             weight={"Regular"}
             color={foregroundColor}
             style={[
-              IOButtonStyles.label,
+              buttonStyles.label,
               small
-                ? IOButtonStyles.labelSizeSmall
-                : IOButtonStyles.labelSizeDefault
+                ? buttonStyles.labelSizeSmall
+                : buttonStyles.labelSizeDefault
             ]}
             numberOfLines={1}
             ellipsizeMode="tail"
@@ -230,25 +273,7 @@ export const ButtonSolid = React.memo(
       </Pressable>
     );
 
-    return isExperimental ? (
-      <Button />
-    ) : (
-      <ButtonSolidLegacy
-        {...{
-          color,
-          accessibilityLabel,
-          label,
-          onPress,
-          accessibilityHint,
-          disabled,
-          fullWidth,
-          icon,
-          iconPosition,
-          small,
-          testID
-        }}
-      />
-    );
+    return <Button />;
   }
 );
 
diff --git a/src/components/buttons/ButtonSolidLeg.tsx b/src/components/buttons/ButtonSolidLeg.tsx
deleted file mode 100644
index 2e95c39c..00000000
--- a/src/components/buttons/ButtonSolidLeg.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-/**
- * TODO: This is actually a temporary file, optimized code merging with ButtonSolid.tsx is needed
- */
-import * as React from "react";
-import { useCallback } from "react";
-import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
-import Animated, {
-  Extrapolate,
-  interpolate,
-  interpolateColor,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring
-} from "react-native-reanimated";
-import { WithTestID } from "../../utils/types";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import {
-  IOButtonLegacyStyles,
-  IOButtonStyles,
-  IOColors,
-  IOScaleValues,
-  IOSpringValues
-} from "../../core";
-import { HSpacer } from "../spacer";
-import { BaseTypography } from "../typography";
-
-export type ButtonSolid = WithTestID<{
-  color?: "primary" | "danger" | "contrast";
-  label: string;
-  small?: boolean;
-  fullWidth?: boolean;
-  disabled?: boolean;
-  // Icons
-  icon?: IOIcons;
-  iconPosition?: "start" | "end";
-  // Accessibility
-  accessibilityLabel: string;
-  accessibilityHint?: string;
-  // Events
-  onPress: (event: GestureResponderEvent) => void;
-}>;
-
-type ColorStates = {
-  default: string;
-  pressed: string;
-  label: {
-    default: IOColors;
-    disabled: IOColors;
-  };
-};
-
-/*
-░░░ COMPONENT CONFIGURATION ░░░
-*/
-
-const mapLegacyColorStates: Record<
-  NonNullable<ButtonSolid["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    default: IOColors.blue,
-    pressed: IOColors["blue-600"],
-    label: {
-      default: "white",
-      disabled: "white"
-    }
-  },
-  // Danger button
-  danger: {
-    default: IOColors["error-600"],
-    pressed: IOColors["error-500"],
-    label: {
-      default: "white",
-      disabled: "white"
-    }
-  },
-  // Contrast button
-  contrast: {
-    default: IOColors.white,
-    pressed: IOColors["blue-50"],
-    label: {
-      default: "blue",
-      disabled: "white"
-    }
-  }
-};
-
-// Disabled state
-const colorPrimaryLegacyButtonDisabled: IOColors = "bluegreyLight";
-const legacyStyles = StyleSheet.create({
-  backgroundDisabled: {
-    backgroundColor: IOColors[colorPrimaryLegacyButtonDisabled]
-  }
-});
-
-/**
- * ButtonSolid Component
- *
- * The `ButtonSolid` component is a reusable button component that provides a solid-colored button
- * with customizable properties, such as color, label, icon, size, and press animations.
- * Currently if the Design System is enabled, the component returns the Button of the @pagopa/io-app-design-system library
- * otherwise it returns the legacy component.
- *
- * @property {string} color - The color of the button. Possible values are: "primary", "secondary", "success", "danger", "warning", "info", etc.
- * @property {string} label - The label text displayed on the button.
- * @property {boolean} small - If `true`, the button will be rendered with a smaller size.
- * @property {boolean} fullWidth - If `true`, the button will occupy the full width of its container.
- * @property {boolean} disabled - If `true`, the button will be disabled and not respond to user interactions.
- * @property {string} icon - The name of the icon to be displayed on the button.
- * @property {string} iconPosition - The position of the icon relative to the label. Possible values are: "start" (before the label) or "end" (after the label).
- * @property {function} onPress - The callback function to be executed when the button is pressed.
- * @property {string} accessibilityLabel - An accessibility label for the button.
- * @property {string} accessibilityHint - An accessibility hint for the button.
- * @property {string} testID - A test identifier for the button, used for testing purposes.
- *
- */
-export const ButtonSolidLegacy = ({
-  color = "primary",
-  label,
-  small = false,
-  fullWidth = false,
-  disabled = false,
-  icon,
-  iconPosition = "start",
-  onPress,
-  accessibilityLabel,
-  accessibilityHint,
-  testID
-}: ButtonSolid) => {
-  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-  // Using a spring-based animation for our interpolations
-  const progressPressed = useDerivedValue(() =>
-    withSpring(isPressed.value, IOSpringValues.button)
-  );
-
-  // Interpolate animation values from `isPressed` values
-  const pressedAnimationStyle = useAnimatedStyle(() => {
-    // Link color states to the pressed states
-
-    const bgColor = interpolateColor(
-      progressPressed.value,
-      [0, 1],
-      [mapLegacyColorStates[color].default, mapLegacyColorStates[color].pressed]
-    );
-
-    // Scale down button slightly when pressed
-    const scale = interpolate(
-      progressPressed.value,
-      [0, 1],
-      [1, animationScaleValue],
-      Extrapolate.CLAMP
-    );
-
-    return {
-      backgroundColor: bgColor,
-      transform: [{ scale }]
-    };
-  });
-
-  const onPressIn = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const onPressOut = useCallback(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-
-  // Label & Icons colors
-  const foregroundLegacyColor: IOColors = disabled
-    ? mapLegacyColorStates[color]?.label?.disabled
-    : mapLegacyColorStates[color]?.label?.default;
-
-  // Icon size
-  const iconSize: IOIconSizeScale = small ? 16 : 20;
-
-  const LegacyButton = () => (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityRole={"button"}
-      testID={testID}
-      onPress={onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      accessible={true}
-      disabled={disabled}
-      style={!fullWidth ? IOButtonStyles.dimensionsDefault : {}}
-    >
-      <Animated.View
-        style={[
-          IOButtonLegacyStyles.button,
-          iconPosition === "end" && { flexDirection: "row-reverse" },
-          small
-            ? IOButtonLegacyStyles.buttonSizeSmall
-            : IOButtonLegacyStyles.buttonSizeDefault,
-          disabled
-            ? legacyStyles.backgroundDisabled
-            : { backgroundColor: mapLegacyColorStates[color]?.default },
-          /* Prevent Reanimated from overriding background colors
-          if button is disabled */
-          !disabled && pressedAnimationStyle
-        ]}
-      >
-        {icon && (
-          <>
-            <Icon name={icon} size={iconSize} color={foregroundLegacyColor} />
-            <HSpacer size={8} />
-          </>
-        )}
-        <BaseTypography
-          weight={"Bold"}
-          color={foregroundLegacyColor}
-          style={[
-            IOButtonLegacyStyles.label,
-            small
-              ? IOButtonLegacyStyles.labelSizeSmall
-              : IOButtonLegacyStyles.labelSizeDefault
-          ]}
-          numberOfLines={1}
-          ellipsizeMode="tail"
-          /* A11y-related props:
-          DON'T UNCOMMENT THEM */
-          /* allowFontScaling
-          maxFontSizeMultiplier={1.3} */
-        >
-          {label}
-        </BaseTypography>
-      </Animated.View>
-    </Pressable>
-  );
-  /* REMOVE_LEGACY_COMPONENT: End ▶ */
-
-  return <LegacyButton />;
-};
-
-export default ButtonSolidLegacy;

From 3a70650b905ee218d40788d10c097698af786543 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Fri, 8 Sep 2023 10:40:07 +0200
Subject: [PATCH 03/12] map ButtonOutline legacy styles

---
 src/components/buttons/ButtonOutline.tsx | 159 ++++++++++++++++++-----
 src/components/buttons/ButtonSolid.tsx   |  14 +-
 2 files changed, 139 insertions(+), 34 deletions(-)

diff --git a/src/components/buttons/ButtonOutline.tsx b/src/components/buttons/ButtonOutline.tsx
index b1e5af2d..57f836a5 100644
--- a/src/components/buttons/ButtonOutline.tsx
+++ b/src/components/buttons/ButtonOutline.tsx
@@ -11,11 +11,13 @@ import Animated, {
   withSpring
 } from "react-native-reanimated";
 import {
+  IOButtonLegacyStyles,
   IOButtonStyles,
   IOColors,
   IOScaleValues,
   IOSpringValues,
-  hexToRgba
+  hexToRgba,
+  useIOExperimentalDesign
 } from "../../core/";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
@@ -134,12 +136,103 @@ const mapColorStates: Record<
   }
 };
 
+const mapLegacyColorStates: Record<
+  NonNullable<ButtonOutline["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    border: {
+      default: IOColors.blue,
+      pressed: IOColors.blue,
+      disabled: IOColors.bluegreyLight
+    },
+    background: {
+      default: hexToRgba(IOColors.blue, 0),
+      pressed: hexToRgba(IOColors.blue, 0.15),
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors.blue,
+      pressed: IOColors.blue,
+      disabled: IOColors.grey
+    }
+  },
+  // Neutral button
+  neutral: {
+    border: {
+      default: IOColors.grey,
+      pressed: IOColors.bluegrey,
+      disabled: IOColors.bluegreyLight
+    },
+    background: {
+      default: IOColors.white,
+      pressed: IOColors.greyUltraLight,
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors.bluegrey,
+      pressed: IOColors.bluegreyDark,
+      disabled: IOColors.grey
+    }
+  },
+  // Contrast button
+  contrast: {
+    border: {
+      default: IOColors.white,
+      pressed: IOColors.white,
+      disabled: hexToRgba(IOColors.white, 0.5)
+    },
+    background: {
+      default: hexToRgba(IOColors.white, 0),
+      pressed: hexToRgba(IOColors.white, 0.2),
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors.white,
+      pressed: IOColors.white,
+      disabled: hexToRgba(IOColors.white, 0.5)
+    }
+  },
+  // Danger button
+  danger: {
+    border: {
+      default: IOColors.red,
+      pressed: IOColors.red,
+      disabled: IOColors.bluegreyLight
+    },
+    background: {
+      default: hexToRgba(IOColors.red, 0),
+      pressed: hexToRgba(IOColors.red, 0.15),
+      disabled: "transparent"
+    },
+    label: {
+      default: IOColors.red,
+      pressed: IOColors.red,
+      disabled: IOColors.grey
+    }
+  }
+};
+
+const IOButtonLegacyStylesLocal = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-unused-styles
+  label: {
+    ...makeFontStyleObject("Bold")
+  },
+  // eslint-disable-next-line react-native/no-unused-styles
+  buttonWithBorder: {
+    borderWidth: 1
+  }
+});
+
 const DISABLED_OPACITY = 0.5;
 
 const IOButtonStylesLocal = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-unused-styles
   label: {
     ...makeFontStyleObject("Regular", false, "ReadexPro")
   },
+  // eslint-disable-next-line react-native/no-unused-styles
   buttonWithBorder: {
     borderWidth: 2
   }
@@ -158,8 +251,23 @@ export const ButtonOutline = ({
   accessibilityHint,
   testID
 }: ButtonOutline) => {
+  const { isExperimental } = useIOExperimentalDesign();
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
+  const colorMap = React.useMemo(
+    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+    [isExperimental]
+  );
+
+  const buttonStyles = React.useMemo(
+    () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
+    [isExperimental]
+  );
+
+  const buttonStylesLocal = React.useMemo(
+    () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
+    [isExperimental]
+  );
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
@@ -174,19 +282,13 @@ export const ButtonOutline = ({
     const backgroundColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].background.default,
-        mapColorStates[color].background.pressed
-      ]
+      [colorMap[color].background.default, colorMap[color].background.pressed]
     );
 
     const borderColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].border.default,
-        mapColorStates[color].border.pressed
-      ]
+      [colorMap[color].border.default, colorMap[color].border.pressed]
     );
 
     // Scale down button slightly when pressed
@@ -210,10 +312,7 @@ export const ButtonOutline = ({
     const labelColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].border.default,
-        mapColorStates[color].border.pressed
-      ]
+      [colorMap[color].border.default, colorMap[color].border.pressed]
     );
 
     return {
@@ -226,7 +325,7 @@ export const ButtonOutline = ({
     const iconColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [mapColorStates[color].label.default, mapColorStates[color].label.pressed]
+      [colorMap[color].label.default, colorMap[color].label.pressed]
     );
     return { color: iconColor };
   });
@@ -258,21 +357,19 @@ export const ButtonOutline = ({
     >
       <Animated.View
         style={[
-          IOButtonStyles.button,
-          IOButtonStylesLocal.buttonWithBorder,
+          buttonStyles.button,
+          buttonStylesLocal.buttonWithBorder,
           iconPosition === "end" && { flexDirection: "row-reverse" },
-          small
-            ? IOButtonStyles.buttonSizeSmall
-            : IOButtonStyles.buttonSizeDefault,
+          small ? buttonStyles.buttonSizeSmall : buttonStyles.buttonSizeDefault,
           disabled
             ? {
-                backgroundColor: mapColorStates[color]?.background?.disabled,
-                borderColor: mapColorStates[color]?.border?.disabled,
+                backgroundColor: colorMap[color]?.background?.disabled,
+                borderColor: colorMap[color]?.border?.disabled,
                 opacity: DISABLED_OPACITY
               }
             : {
-                backgroundColor: mapColorStates[color]?.background?.default,
-                borderColor: mapColorStates[color]?.border.default
+                backgroundColor: colorMap[color]?.background?.default,
+                borderColor: colorMap[color]?.border.default
               },
           /* Prevent Reanimated from overriding background colors
                     if button is disabled */
@@ -285,12 +382,12 @@ export const ButtonOutline = ({
               <AnimatedIconClassComponent
                 name={icon}
                 animatedProps={pressedColorIconAnimationStyle}
-                color={mapColorStates[color]?.label?.default}
+                color={colorMap[color]?.label?.default}
               />
             ) : (
               <AnimatedIcon
                 name={icon}
-                color={mapColorStates[color]?.label?.disabled}
+                color={colorMap[color]?.label?.disabled}
               />
             )}
             <HSpacer size={8} />
@@ -298,14 +395,12 @@ export const ButtonOutline = ({
         )}
         <Animated.Text
           style={[
-            IOButtonStylesLocal.label,
-            IOButtonStyles.label,
-            small
-              ? IOButtonStyles.labelSizeSmall
-              : IOButtonStyles.labelSizeDefault,
+            buttonStylesLocal.label,
+            buttonStyles.label,
+            small ? buttonStyles.labelSizeSmall : buttonStyles.labelSizeDefault,
             disabled
-              ? { color: mapColorStates[color]?.label?.disabled }
-              : { color: mapColorStates[color]?.label?.default },
+              ? { color: colorMap[color]?.label?.disabled }
+              : { color: colorMap[color]?.label?.default },
             !disabled && pressedColorLabelAnimationStyle
           ]}
           numberOfLines={1}
diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
index a8f6d9ef..10376b43 100644
--- a/src/components/buttons/ButtonSolid.tsx
+++ b/src/components/buttons/ButtonSolid.tsx
@@ -33,6 +33,14 @@ type ColorStates = {
   };
 };
 
+// Disabled state
+const colorPrimaryLegacyButtonDisabled: IOColors = "bluegreyLight";
+const legacyStyles = StyleSheet.create({
+  backgroundDisabled: {
+    backgroundColor: IOColors[colorPrimaryLegacyButtonDisabled]
+  }
+});
+
 const colorPrimaryButtonDisabled: IOColors = "grey-200";
 const DISABLED_OPACITY = 0.5;
 
@@ -233,8 +241,10 @@ export const ButtonSolid = React.memo(
               ? buttonStyles.buttonSizeSmall
               : buttonStyles.buttonSizeDefault,
             disabled
-              ? styles.backgroundDisabled
-              : { backgroundColor: mapColorStates[color]?.default },
+              ? isExperimental
+                ? styles.backgroundDisabled
+                : legacyStyles.backgroundDisabled
+              : { backgroundColor: colorMap[color]?.default },
             /* Prevent Reanimated from overriding background colors
                     if button is disabled */
             !disabled && pressedAnimationStyle

From 40644024bbeaa513d9c2ca325db14d54f39a84a7 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Fri, 8 Sep 2023 11:30:37 +0200
Subject: [PATCH 04/12] Maps ButtonLink and IconButton

---
 src/components/buttons/ButtonLink.tsx | 80 +++++++++++++--------------
 src/components/buttons/IconButton.tsx | 51 ++++++++++++++---
 2 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx
index 000f0ac9..c8920eb7 100644
--- a/src/components/buttons/ButtonLink.tsx
+++ b/src/components/buttons/ButtonLink.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
 import Animated, {
   Extrapolate,
@@ -14,14 +14,15 @@ import {
   IOButtonStyles,
   IOColors,
   IOScaleValues,
-  IOSpringValues
+  IOSpringValues,
+  useIOExperimentalDesign
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons/Icon";
 import { HSpacer } from "../spacer/Spacer";
 
-type ColorButtonLink = "primary" | "error" | "warning" | "success" | "info";
+type ColorButtonLink = "primary";
 export type ButtonLink = WithTestID<{
   color?: ColorButtonLink;
   label: string;
@@ -52,32 +53,18 @@ const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
       pressed: IOColors["blueIO-600"],
       disabled: IOColors["grey-700"]
     }
-  },
-  error: {
-    label: {
-      default: IOColors["error-850"],
-      pressed: IOColors["error-850"],
-      disabled: IOColors["grey-700"]
-    }
-  },
-  warning: {
-    label: {
-      default: IOColors["warning-850"],
-      pressed: IOColors["warning-850"],
-      disabled: IOColors["grey-700"]
-    }
-  },
-  success: {
-    label: {
-      default: IOColors["success-850"],
-      pressed: IOColors["success-850"],
-      disabled: IOColors["grey-700"]
-    }
-  },
-  info: {
+  }
+};
+
+const mapLegacyColorStates: Record<
+  NonNullable<ButtonLink["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
     label: {
-      default: IOColors["info-850"],
-      pressed: IOColors["info-850"],
+      default: IOColors.blue,
+      pressed: IOColors["blue-600"],
       disabled: IOColors["grey-700"]
     }
   }
@@ -91,6 +78,13 @@ const IOButtonStylesLocal = StyleSheet.create({
   }
 });
 
+const IOButtonLegacyStylesLocal = StyleSheet.create({
+  label: {
+    fontSize: 16,
+    ...makeFontStyleObject("Bold", false, "TitilliumWeb")
+  }
+});
+
 export const ButtonLink = React.memo(
   ({
     color = "primary",
@@ -104,6 +98,16 @@ export const ButtonLink = React.memo(
     testID
   }: ButtonLink) => {
     const isPressed = useSharedValue(0);
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const colorMap = useMemo(
+      () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+      [isExperimental]
+    );
+    const buttonStylesLocal = useMemo(
+      () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
+      [isExperimental]
+    );
 
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
@@ -136,10 +140,7 @@ export const ButtonLink = React.memo(
       const labelColor = interpolateColor(
         progressPressed.value,
         [0, 1],
-        [
-          mapColorStates[color].label.default,
-          mapColorStates[color].label.pressed
-        ]
+        [colorMap[color].label.default, colorMap[color].label.pressed]
       );
 
       return {
@@ -152,10 +153,7 @@ export const ButtonLink = React.memo(
       const iconColor = interpolateColor(
         progressPressed.value,
         [0, 1],
-        [
-          mapColorStates[color].label.default,
-          mapColorStates[color].label.pressed
-        ]
+        [colorMap[color].label.default, colorMap[color].label.pressed]
       );
 
       return { color: iconColor };
@@ -207,13 +205,13 @@ export const ButtonLink = React.memo(
                 <AnimatedIconClassComponent
                   name={icon}
                   animatedProps={pressedColorIconAnimationStyle}
-                  color={mapColorStates[color]?.label?.default}
+                  color={colorMap[color]?.label?.default}
                   size={iconSize}
                 />
               ) : (
                 <AnimatedIcon
                   name={icon}
-                  color={mapColorStates[color]?.label?.disabled}
+                  color={colorMap[color]?.label?.disabled}
                   size={iconSize}
                 />
               )}
@@ -222,10 +220,10 @@ export const ButtonLink = React.memo(
           )}
           <Animated.Text
             style={[
-              IOButtonStylesLocal.label,
+              buttonStylesLocal.label,
               disabled
-                ? { color: mapColorStates[color]?.label?.disabled }
-                : { color: mapColorStates[color]?.label?.default },
+                ? { color: colorMap[color]?.label?.disabled }
+                : { color: colorMap[color]?.label?.default },
               !disabled && pressedColorLabelAnimationStyle
             ]}
             numberOfLines={1}
diff --git a/src/components/buttons/IconButton.tsx b/src/components/buttons/IconButton.tsx
index 0cdbfbc9..ea0fa5d4 100644
--- a/src/components/buttons/IconButton.tsx
+++ b/src/components/buttons/IconButton.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, Pressable } from "react-native";
 import Animated, {
   Extrapolate,
@@ -15,7 +15,8 @@ import {
   IOIconButtonStyles,
   IOScaleValues,
   IOSpringValues,
-  hexToRgba
+  hexToRgba,
+  useIOExperimentalDesign
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
@@ -37,6 +38,36 @@ type ColorStates = {
   };
 };
 
+const mapLegacyColorStates: Record<
+  NonNullable<IconButton["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    icon: {
+      default: IOColors.blue,
+      pressed: IOColors["blue-600"],
+      disabled: hexToRgba(IOColors.blue, 0.25)
+    }
+  },
+  // Neutral button
+  neutral: {
+    icon: {
+      default: IOColors.black,
+      pressed: IOColors.bluegreyDark,
+      disabled: IOColors.grey
+    }
+  },
+  // Contrast button
+  contrast: {
+    icon: {
+      default: IOColors.white,
+      pressed: hexToRgba(IOColors.white, 0.85),
+      disabled: hexToRgba(IOColors.white, 0.25)
+    }
+  }
+};
+
 const mapColorStates: Record<NonNullable<IconButton["color"]>, ColorStates> = {
   // Primary button
   primary: {
@@ -78,6 +109,13 @@ export const IconButton = ({
 }: IconButton) => {
   const isPressed = useSharedValue(0);
 
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const colorMap = useMemo(
+    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+    [isExperimental]
+  );
+
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
 
@@ -107,7 +145,7 @@ export const IconButton = ({
     const iconColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [mapColorStates[color].icon.default, mapColorStates[color].icon.pressed]
+      [colorMap[color].icon.default, colorMap[color].icon.pressed]
     );
     return { color: iconColor };
   });
@@ -149,13 +187,10 @@ export const IconButton = ({
           <AnimatedIconClassComponent
             name={icon}
             animatedProps={animatedColor}
-            color={mapColorStates[color]?.icon?.default}
+            color={colorMap[color]?.icon?.default}
           />
         ) : (
-          <AnimatedIcon
-            name={icon}
-            color={mapColorStates[color]?.icon?.disabled}
-          />
+          <AnimatedIcon name={icon} color={colorMap[color]?.icon?.disabled} />
         )}
       </Animated.View>
     </Pressable>

From 3d0069e6531072e08ce89211e3b546497303bc7b Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Mon, 11 Sep 2023 14:42:47 +0200
Subject: [PATCH 05/12] Update src/components/buttons/ButtonSolid.tsx

Co-authored-by: Damiano Plebani <damiano.plebani@pagopa.it>
---
 src/components/buttons/ButtonSolid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
index 10376b43..d342590d 100644
--- a/src/components/buttons/ButtonSolid.tsx
+++ b/src/components/buttons/ButtonSolid.tsx
@@ -262,7 +262,7 @@ export const ButtonSolid = React.memo(
           )}
           <BaseTypography
             font={isExperimental ? "ReadexPro" : undefined}
-            weight={"Regular"}
+            weight={isExperimental ? "Regular" : "Bold"}
             color={foregroundColor}
             style={[
               buttonStyles.label,

From c589fae41e16329681284c20d19a12283e62877d Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Mon, 11 Sep 2023 14:44:24 +0200
Subject: [PATCH 06/12] Add references to remove legacy code once will be
 completely deprecated

---
 src/components/buttons/ButtonSolid.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
index 10376b43..6f7efb24 100644
--- a/src/components/buttons/ButtonSolid.tsx
+++ b/src/components/buttons/ButtonSolid.tsx
@@ -34,6 +34,7 @@ type ColorStates = {
 };
 
 // Disabled state
+// TODO: Remove this when legacy look is deprecated
 const colorPrimaryLegacyButtonDisabled: IOColors = "bluegreyLight";
 const legacyStyles = StyleSheet.create({
   backgroundDisabled: {
@@ -113,6 +114,7 @@ const mapColorStates: Record<
   }
 };
 
+// TODO: Remove this when legacy look is deprecated
 const mapLegacyColorStates: Record<
   NonNullable<ButtonSolidProps["color"]>,
   ColorStates

From 8c763c76bb61c15707e75e8b5b53b2d121186caf Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Mon, 11 Sep 2023 15:06:05 +0200
Subject: [PATCH 07/12] Maps TODOs for legacy attributes

---
 src/components/buttons/ButtonLink.tsx    | 2 ++
 src/components/buttons/ButtonOutline.tsx | 2 ++
 src/components/buttons/ButtonSolid.tsx   | 4 ++--
 src/components/buttons/IconButton.tsx    | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx
index c8920eb7..1093bc4c 100644
--- a/src/components/buttons/ButtonLink.tsx
+++ b/src/components/buttons/ButtonLink.tsx
@@ -56,6 +56,7 @@ const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
   }
 };
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
   NonNullable<ButtonLink["color"]>,
   ColorStates
@@ -78,6 +79,7 @@ const IOButtonStylesLocal = StyleSheet.create({
   }
 });
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const IOButtonLegacyStylesLocal = StyleSheet.create({
   label: {
     fontSize: 16,
diff --git a/src/components/buttons/ButtonOutline.tsx b/src/components/buttons/ButtonOutline.tsx
index 57f836a5..3572551b 100644
--- a/src/components/buttons/ButtonOutline.tsx
+++ b/src/components/buttons/ButtonOutline.tsx
@@ -136,6 +136,7 @@ const mapColorStates: Record<
   }
 };
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
   NonNullable<ButtonOutline["color"]>,
   ColorStates
@@ -214,6 +215,7 @@ const mapLegacyColorStates: Record<
   }
 };
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const IOButtonLegacyStylesLocal = StyleSheet.create({
   // eslint-disable-next-line react-native/no-unused-styles
   label: {
diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
index 65e455a3..592f850c 100644
--- a/src/components/buttons/ButtonSolid.tsx
+++ b/src/components/buttons/ButtonSolid.tsx
@@ -34,7 +34,7 @@ type ColorStates = {
 };
 
 // Disabled state
-// TODO: Remove this when legacy look is deprecated
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const colorPrimaryLegacyButtonDisabled: IOColors = "bluegreyLight";
 const legacyStyles = StyleSheet.create({
   backgroundDisabled: {
@@ -114,7 +114,7 @@ const mapColorStates: Record<
   }
 };
 
-// TODO: Remove this when legacy look is deprecated
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
   NonNullable<ButtonSolidProps["color"]>,
   ColorStates
diff --git a/src/components/buttons/IconButton.tsx b/src/components/buttons/IconButton.tsx
index ea0fa5d4..85379086 100644
--- a/src/components/buttons/IconButton.tsx
+++ b/src/components/buttons/IconButton.tsx
@@ -38,6 +38,7 @@ type ColorStates = {
   };
 };
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
   NonNullable<IconButton["color"]>,
   ColorStates

From 48c8ee281ff7096152fd9b71bbad2b8e68031c01 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Mon, 11 Sep 2023 17:06:31 +0200
Subject: [PATCH 08/12] Fixes

---
 src/components/buttons/ButtonOutline.tsx | 16 ++++++++++++----
 src/components/buttons/ButtonSolid.tsx   | 10 ++++------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/buttons/ButtonOutline.tsx b/src/components/buttons/ButtonOutline.tsx
index 3572551b..bbf9e107 100644
--- a/src/components/buttons/ButtonOutline.tsx
+++ b/src/components/buttons/ButtonOutline.tsx
@@ -21,7 +21,12 @@ import {
 } from "../../core/";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
+import {
+  AnimatedIcon,
+  IOIconSizeScale,
+  IOIcons,
+  IconClassComponent
+} from "../icons";
 import { HSpacer } from "../spacer/Spacer";
 
 type ColorButtonOutline = "primary" | "neutral" | "contrast" | "danger";
@@ -344,7 +349,10 @@ export const ButtonOutline = ({
     isPressed.value = 0;
   }, [isPressed]);
 
-  const Button = () => (
+  // Icon size
+  const iconSize: IOIconSizeScale = small ? 16 : 20;
+
+  return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -385,11 +393,13 @@ export const ButtonOutline = ({
                 name={icon}
                 animatedProps={pressedColorIconAnimationStyle}
                 color={colorMap[color]?.label?.default}
+                size={iconSize}
               />
             ) : (
               <AnimatedIcon
                 name={icon}
                 color={colorMap[color]?.label?.disabled}
+                size={iconSize}
               />
             )}
             <HSpacer size={8} />
@@ -417,8 +427,6 @@ export const ButtonOutline = ({
       </Animated.View>
     </Pressable>
   );
-
-  return <Button />;
 };
 
 export default ButtonOutline;
diff --git a/src/components/buttons/ButtonSolid.tsx b/src/components/buttons/ButtonSolid.tsx
index 592f850c..2017905f 100644
--- a/src/components/buttons/ButtonSolid.tsx
+++ b/src/components/buttons/ButtonSolid.tsx
@@ -177,6 +177,9 @@ export const ButtonSolid = React.memo(
       [isExperimental]
     );
 
+    // Icon size
+    const iconSize = React.useMemo(() => (small ? 16 : 20), [small]);
+
     // Using a spring-based animation for our interpolations
     const progressPressed = useDerivedValue(() =>
       withSpring(isPressed.value, IOSpringValues.button)
@@ -219,10 +222,7 @@ export const ButtonSolid = React.memo(
       ? colorMap[color]?.label?.disabled
       : colorMap[color]?.label?.default;
 
-    // Icon size
-    const iconSize = small ? 16 : 20;
-
-    const Button = () => (
+    return (
       <Pressable
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
@@ -284,8 +284,6 @@ export const ButtonSolid = React.memo(
         </Animated.View>
       </Pressable>
     );
-
-    return <Button />;
   }
 );
 

From 92b4ccd24b55d8ba2a6a1fd15269084a30f3d9ec Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Tue, 12 Sep 2023 10:37:00 +0200
Subject: [PATCH 09/12] set default context condition to false

---
 src/core/IODSExperimentalContextProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/IODSExperimentalContextProvider.tsx b/src/core/IODSExperimentalContextProvider.tsx
index 3a428a11..fbf00ff6 100644
--- a/src/core/IODSExperimentalContextProvider.tsx
+++ b/src/core/IODSExperimentalContextProvider.tsx
@@ -10,7 +10,7 @@ type IOExperimentalContextType = {
  */
 const IOExperimentalDesignContext =
   React.createContext<IOExperimentalContextType>({
-    isExperimental: true,
+    isExperimental: false,
     setExperimental: constVoid
   });
 

From 04daaf7653c987cecf2abc944fd6871bc48a5cdb Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Tue, 12 Sep 2023 10:49:46 +0200
Subject: [PATCH 10/12] updates snap for default context value

---
 .../__snapshots__/banner.test.tsx.snap        |  6 +--
 .../__snapshots__/button.test.tsx.snap        | 45 +++++++++----------
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
index 0739815b..03a95e79 100644
--- a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
+++ b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -189,13 +189,13 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
               style={
                 [
                   {
-                    "fontFamily": "Readex Pro",
+                    "fontFamily": "Titillium Web",
                     "fontSize": 16,
                     "fontStyle": "normal",
-                    "fontWeight": "400",
+                    "fontWeight": "700",
                   },
                   {
-                    "color": "#0B3EE3",
+                    "color": "#0073E6",
                   },
                   {
                     "color": undefined,
diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
index e8162f25..9d192bb9 100644
--- a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
+++ b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
@@ -237,13 +237,13 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
       style={
         [
           {
-            "fontFamily": "Readex Pro",
+            "fontFamily": "Titillium Web",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "400",
+            "fontWeight": "700",
           },
           {
-            "color": "#0B3EE3",
+            "color": "#0073E6",
           },
           {
             "color": undefined,
@@ -301,23 +301,23 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 8,
+          "borderRadius": 4,
           "elevation": 0,
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingHorizontal": 24,
+          "paddingHorizontal": 16,
           "textAlignVertical": "center",
         },
         {
-          "borderWidth": 2,
+          "borderWidth": 1,
         },
         false,
         {
-          "height": 48,
+          "height": 40,
         },
         {
-          "backgroundColor": "rgba(231,236,252,0)",
-          "borderColor": "#0B3EE3",
+          "backgroundColor": "rgba(0,115,230,0)",
+          "borderColor": "#0073E6",
         },
         {
           "backgroundColor": undefined,
@@ -337,9 +337,9 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
       style={
         [
           {
-            "fontFamily": "Readex Pro",
+            "fontFamily": "Titillium Web",
             "fontStyle": "normal",
-            "fontWeight": "400",
+            "fontWeight": "700",
           },
           {
             "alignSelf": "center",
@@ -348,7 +348,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
             "fontSize": 16,
           },
           {
-            "color": "#0B3EE3",
+            "color": "#0073E6",
           },
           {
             "color": undefined,
@@ -406,19 +406,19 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       [
         {
           "alignItems": "center",
-          "borderRadius": 8,
+          "borderRadius": 4,
           "elevation": 0,
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingHorizontal": 24,
+          "paddingHorizontal": 16,
           "textAlignVertical": "center",
         },
         false,
         {
-          "height": 48,
+          "height": 40,
         },
         {
-          "backgroundColor": "#0B3EE3",
+          "backgroundColor": "#0073E6",
         },
         {
           "backgroundColor": undefined,
@@ -434,7 +434,6 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
     <Text
       color="white"
       ellipsizeMode="tail"
-      font="ReadexPro"
       numberOfLines={1}
       style={
         [
@@ -449,13 +448,13 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           undefined,
           {
             "color": "#FFFFFF",
-            "fontFamily": "Readex Pro",
+            "fontFamily": "Titillium Web",
             "fontStyle": "normal",
-            "fontWeight": "400",
+            "fontWeight": "700",
           },
         ]
       }
-      weight="Regular"
+      weight="Bold"
     >
       label
     </Text>
@@ -527,7 +526,7 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
       }
       bbHeight={24}
       bbWidth={24}
-      color={4278927075}
+      color={4278219750}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -541,7 +540,7 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
             "borderWidth": 0,
           },
           {
-            "color": "#0B3EE3",
+            "color": "#0073E6",
           },
           {
             "flex": 0,
@@ -550,7 +549,7 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
           },
         ]
       }
-      tintColor={4278927075}
+      tintColor={4278219750}
       vbHeight={24}
       vbWidth={24}
       width={24}

From a6b642322b62d1e8b4ea426d8c02dfc9078c7620 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Tue, 12 Sep 2023 10:53:14 +0200
Subject: [PATCH 11/12] missing button mapped on experimental context

---
 .../buttons/IconButtonContained.tsx           | 68 ++++++++++++++++---
 1 file changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/components/buttons/IconButtonContained.tsx b/src/components/buttons/IconButtonContained.tsx
index 1e08ffc9..b03bc18c 100644
--- a/src/components/buttons/IconButtonContained.tsx
+++ b/src/components/buttons/IconButtonContained.tsx
@@ -23,7 +23,8 @@ import {
   IOIconButtonStyles,
   IOScaleValues,
   IOSpringValues,
-  hexToRgba
+  hexToRgba,
+  useIOExperimentalDesign
 } from "../../core";
 
 export type IconButtonContained = WithTestID<{
@@ -93,6 +94,51 @@ const mapColorStates: Record<
   }
 };
 
+const mapLegacyColorStates: Record<
+  NonNullable<IconButtonContained["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    background: {
+      default: hexToRgba(IOColors.blue, 0),
+      pressed: hexToRgba(IOColors.blue, 0.15),
+      disabled: "transparent"
+    },
+    icon: {
+      default: IOColors.blue,
+      pressed: IOColors.blue,
+      disabled: hexToRgba(IOColors.blue, 0.25)
+    }
+  },
+  // Neutral button
+  neutral: {
+    background: {
+      default: IOColors.white,
+      pressed: IOColors.greyUltraLight,
+      disabled: "transparent"
+    },
+    icon: {
+      default: IOColors.bluegrey,
+      pressed: IOColors.black,
+      disabled: IOColors.grey
+    }
+  },
+  // Contrast button
+  contrast: {
+    background: {
+      default: hexToRgba(IOColors.white, 0),
+      pressed: hexToRgba(IOColors.white, 0.2),
+      disabled: "transparent"
+    },
+    icon: {
+      default: IOColors.white,
+      pressed: IOColors.white,
+      disabled: hexToRgba(IOColors.white, 0.25)
+    }
+  }
+};
+
 const AnimatedIconClassComponent =
   Animated.createAnimatedComponent(IconClassComponent);
 
@@ -106,6 +152,12 @@ export const IconButtonContained = ({
   testID
 }: IconButtonContained) => {
   const isPressed = useSharedValue(0);
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const colorMap = React.useMemo(
+    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+    [isExperimental]
+  );
 
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
@@ -122,10 +174,7 @@ export const IconButtonContained = ({
     const backgroundColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].background.default,
-        mapColorStates[color].background.pressed
-      ]
+      [colorMap[color].background.default, colorMap[color].background.pressed]
     );
 
     // Scale down button slightly when pressed
@@ -147,7 +196,7 @@ export const IconButtonContained = ({
     const iconColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [mapColorStates[color].icon.default, mapColorStates[color].icon.pressed]
+      [colorMap[color].icon.default, colorMap[color].icon.pressed]
     );
     return { color: iconColor };
   });
@@ -185,13 +234,10 @@ export const IconButtonContained = ({
           <AnimatedIconClassComponent
             name={icon}
             animatedProps={animatedColor}
-            color={mapColorStates[color]?.icon?.default}
+            color={colorMap[color]?.icon?.default}
           />
         ) : (
-          <AnimatedIcon
-            name={icon}
-            color={mapColorStates[color]?.icon?.disabled}
-          />
+          <AnimatedIcon name={icon} color={colorMap[color]?.icon?.disabled} />
         )}
       </Animated.View>
     </Pressable>

From c84a43d93d61dff98402fda0e2017f0e827320f6 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Tue, 12 Sep 2023 11:20:37 +0200
Subject: [PATCH 12/12] updates snap

---
 .../buttons/__test__/__snapshots__/button.test.tsx.snap     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
index 9d192bb9..8d5842e2 100644
--- a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
+++ b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
@@ -652,7 +652,7 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
       }
       bbHeight={24}
       bbWidth={24}
-      color={4278927075}
+      color={4278219750}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -666,7 +666,7 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
             "borderWidth": 0,
           },
           {
-            "color": "#0B3EE3",
+            "color": "#0073E6",
           },
           {
             "flex": 0,
@@ -675,7 +675,7 @@ exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
           },
         ]
       }
-      tintColor={4278927075}
+      tintColor={4278219750}
       vbHeight={24}
       vbWidth={24}
       width={24}