[IOAPPX-467] Remove legacy color palette

example/src/components/AssetViewerBox.tsx

@@ -158,7 +158,7 @@ export const AssetViewerBox = ({
     >
       {name && (
         <BodySmall
-          color={"bluegrey"}
+          color={"grey-700"}
           style={{ alignSelf: "flex-start" }}
           weight={"Regular"}
         >

example/src/components/ComponentViewerBox.tsx

@@ -22,10 +22,10 @@ const styles = StyleSheet.create({
     fontSize: 10
   },
   componenentLabelLight: {
-    color: IOColors.bluegrey
+    color: IOColors["grey-700"]
   },
   componenentLabelDark: {
-    color: IOColors.greyLight
+    color: IOColors["grey-100"]
   }
 });
 

example/src/components/LogoPaymentViewerBox.tsx

@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
   },
   iconLabel: {
     fontSize: 10,
-    color: IOColors.bluegrey
+    color: IOColors["grey-700"]
   }
 });
 

example/src/pages/Accordion.tsx

@@ -96,7 +96,7 @@ const renderRawAccordion = () => (
       <RawAccordion
         headerStyle={{
           paddingVertical: 16,
-          backgroundColor: IOColors.greyLight
+          backgroundColor: IOColors["grey-200"]
         }}
         header={
           <View style={IOStyles.row}>

example/src/pages/Alert.tsx

@@ -105,7 +105,7 @@ export const DSAlert = () => {
   return (
     <Screen>
       <H3
-        color={"bluegrey"}
+        color={"grey-700"}
         style={{
           paddingTop: IOVisualCostants.appMarginDefault,
           marginBottom: 16
@@ -117,7 +117,7 @@ export const DSAlert = () => {
       <VStack space={8}>
         {["info", "warning", "error"].map(variant => (
           <VStack space={4} key={variant}>
-            <H6 color={"bluegrey"} style={{ textTransform: "capitalize" }}>
+            <H6 color={"grey-700"} style={{ textTransform: "capitalize" }}>
               {variant}
             </H6>
             <HStack space={4}>
@@ -146,7 +146,7 @@ export const DSAlert = () => {
 
       {/* Content only */}
       <H3
-        color={"bluegrey"}
+        color={"grey-700"}
         style={{
           marginBottom: 16
         }}
@@ -194,9 +194,7 @@ export const DSAlert = () => {
 
       <VSpacer size={40} />
 
-      <H3 color={"bluegrey"} style={{ marginBottom: 16 }}>
-        Title + Content
-      </H3>
+      <H3 style={{ marginBottom: 16 }}>Title + Content</H3>
 
       <Alert
         ref={viewRef}
@@ -243,9 +241,7 @@ export const DSAlert = () => {
 
       <VSpacer size={40} />
 
-      <H2 color={"bluegrey"} style={{ marginBottom: 16 }}>
-        Content + Action
-      </H2>
+      <H2 style={{ marginBottom: 16 }}>Content + Action</H2>
 
       <Alert
         ref={viewRef}
@@ -296,9 +292,7 @@ export const DSAlert = () => {
       <VSpacer size={40} />
 
       {/* Full width */}
-      <H2 color={"bluegrey"} style={{ marginBottom: 16 }}>
-        Full width
-      </H2>
+      <H2 style={{ marginBottom: 16 }}>Full width</H2>
       <FullWidthComponent>
         <Alert
           fullWidth

example/src/pages/Badges.tsx

@@ -75,7 +75,7 @@ const renderBadge = () => (
         <View
           style={{
             alignSelf: "flex-start",
-            backgroundColor: IOColors.bluegrey,
+            backgroundColor: IOColors["grey-700"],
             padding: 16,
             borderRadius: IOBadgeRadius + 16,
             borderCurve: "continuous"

example/src/pages/Buttons.tsx

@@ -21,7 +21,7 @@ import { Screen } from "../components/Screen";
 
 const styles = StyleSheet.create({
   primaryBlockLegacy: {
-    backgroundColor: IOColors.blue,
+    backgroundColor: IOColors["blue-500"],
     padding: 16,
     borderRadius: 8
   },
@@ -43,7 +43,6 @@ export const Buttons = () => {
     <Screen>
       {/* The title should be dynamic, got from the route object */}
       <H2
-        color={"bluegrey"}
         style={{
           marginBottom: 16,
           paddingTop: IOVisualCostants.appMarginDefault
@@ -289,9 +288,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
-        ButtonOutline
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ButtonOutline</H2>
       <ComponentViewerBox name="ButtonOutline · Primary variant (using Pressable API)">
         <ButtonOutline
           accessibilityHint="Tap to trigger test alert"
@@ -444,9 +441,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
-        ButtonLink
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ButtonLink</H2>
       <ComponentViewerBox name="ButtonLink · Primary variant (using Pressable API)">
         <ButtonLink
           accessibilityHint="Tap to trigger test alert"
@@ -598,9 +593,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
-        IconButton
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>IconButton</H2>
       <ComponentViewerBox name="IconButton · Primary variant">
         <View style={IOStyles.row}>
           <IconButton
@@ -707,9 +700,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
-        IconButtonSolid
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>IconButtonSolid</H2>
 
       <ComponentViewerBox name="IconButtonSolid · Primary variant, large">
         <View style={IOStyles.row}>
@@ -771,7 +762,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>
         IconButtonContained (Icebox)
       </H2>
       <ComponentViewerBox name="IconButtonContained · Primary variant">
@@ -853,9 +844,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
-        Specific buttons
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>Specific buttons</H2>
 
       <ComponentViewerBox name="CalendarEventButton (using new ButtonOutline)">
         <ButtonOutline

example/src/pages/Colors.tsx

@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
     marginBottom: 12
   },
   smallCapsLightMode: {
-    color: IOColors.bluegrey
+    color: IOColors["grey-700"]
   },
   smallCapsDarkMode: {
     color: IOColors["grey-450"]
@@ -139,11 +139,7 @@ const renderColorThemeGroup = (
 
   return (
     <View style={{ marginBottom: 40 }}>
-      {name && (
-        <H3 color={"bluegrey"} style={{ marginBottom: sectionTitleMargin }}>
-          {name}
-        </H3>
-      )}
+      {name && <H3 style={{ marginBottom: sectionTitleMargin }}>{name}</H3>}
       {/* Show the two different columns
       with both light and dark modes */}
       <View style={IOStyles.row}>
@@ -219,11 +215,7 @@ const renderColorGroup = (
   colorObject: Record<string, ColorValue>
 ) => (
   <View style={{ marginBottom: 24 }}>
-    {name && (
-      <H3 color={"bluegrey"} style={{ marginBottom: sectionTitleMargin }}>
-        {name}
-      </H3>
-    )}
+    {name && <H3 style={{ marginBottom: sectionTitleMargin }}>{name}</H3>}
 
     {Object.entries(colorObject).map(([name, colorValue]) => (
       <ColorBox key={name} name={name} color={colorValue} />
@@ -234,7 +226,6 @@ const renderColorGroup = (
 export const Colors = () => (
   <Screen>
     <H2
-      color={"bluegrey"}
       style={{
         marginBottom: sectionTitleMargin,
         paddingTop: IOVisualCostants.appMarginDefault
@@ -251,9 +242,7 @@ export const Colors = () => (
     {/* Extra */}
     {renderColorGroup("Extra", IOColorsExtra)}
 
-    <H2 color={"bluegrey"} style={{ marginBottom: sectionTitleMargin }}>
-      Theme
-    </H2>
+    <H2 style={{ marginBottom: sectionTitleMargin }}>Theme</H2>
 
     {renderColorThemeGroup("Main", IOThemeLight, IOThemeDark)}
 
@@ -264,9 +253,7 @@ export const Colors = () => (
     )}
 
     {/* Gradients */}
-    <H2 color={"bluegrey"} style={{ marginBottom: sectionTitleMargin }}>
-      Gradients
-    </H2>
+    <H2 style={{ marginBottom: sectionTitleMargin }}>Gradients</H2>
     <View style={styles.gradientItemsWrapper}>
       {Object.entries(IOColorGradients).map(([name, colorValues]) => (
         <GradientBox key={name} name={name} colors={colorValues} />
@@ -308,7 +295,7 @@ const ColorBox = ({
     {name && (
       <LabelMini
         numberOfLines={1}
-        color={mode === "dark" ? "grey-200" : "bluegrey"}
+        color={mode === "dark" ? "grey-200" : "grey-700"}
         weight={"Regular"}
       >
         {name}

example/src/pages/HeaderFirstLevel.tsx

@@ -84,9 +84,7 @@ export const HeaderFirstLevelScreen = () => {
       <VSpacer />
       {["info", "warning", "error"].map(variant => (
         <VStack space={4} key={variant}>
-          <H6 color={"bluegrey"} style={{ textTransform: "capitalize" }}>
-            {variant}
-          </H6>
+          <H6 style={{ textTransform: "capitalize" }}>{variant}</H6>
           <HStack space={4}>
             <ButtonSolid
               label="w/ Action"

example/src/pages/HeaderSecondLevel.tsx

@@ -131,9 +131,7 @@ export const HeaderSecondLevelScreen = () => {
       <VSpacer />
       {["info", "warning", "error"].map(variant => (
         <VStack space={4} key={variant}>
-          <H6 color={"bluegrey"} style={{ textTransform: "capitalize" }}>
-            {variant}
-          </H6>
+          <H6 style={{ textTransform: "capitalize" }}>{variant}</H6>
           <HStack space={4}>
             <ButtonSolid
               label="w/ Action"

example/src/pages/ListItem.tsx

@@ -691,7 +691,7 @@ const renderListItemTransaction = () => (
           amount: "",
           amountAccessibilityLabel: ""
         }}
-        paymentLogoIcon={<Icon name="notice" color="red" />}
+        paymentLogoIcon={<Icon name="notice" color="error-600" />}
         onPress={onButtonPress}
       />
 
@@ -705,7 +705,7 @@ const renderListItemTransaction = () => (
           amountAccessibilityLabel: "€ 100",
           refund: true
         }}
-        paymentLogoIcon={<Icon name="refund" color="bluegrey" />}
+        paymentLogoIcon={<Icon name="refund" />}
         onPress={onButtonPress}
       />
 

example/src/pages/Pictograms.tsx

@@ -4,7 +4,6 @@ import {
   IOColors,
   IOPictograms,
   IOPictogramsBleed,
-  IOPictogramsLegacy,
   IOPictogramsObject,
   IOVisualCostants,
   Pictogram,
@@ -58,17 +57,13 @@ const sortPictogramSet = (
   );
 
 const filteredIOPictograms = filterPictogramSet(
-  {
-    ...IOPictogramsObject,
-    ...IOPictogramsLegacy
-  },
+  IOPictogramsObject,
   IOPictograms
 );
 
 const sortedIOPictograms = sortPictogramSet(filteredIOPictograms);
 const sortedIOPictogramsBleed = sortPictogramSet(IOPictogramsBleed);
 const sortedIOPictogramsObject = sortPictogramSet(IOPictogramsObject);
-const sortedIOPictogramsLegacy = sortPictogramSet(IOPictogramsLegacy);
 
 export const Pictograms = () => (
   <Screen>
@@ -188,25 +183,5 @@ export const Pictograms = () => (
         <Pictogram name="charity" pictogramStyle="dark-content" />
       </View>
     </ComponentViewerBox>
-
-    <H2
-      style={{
-        marginBottom: 16,
-        paddingTop: IOVisualCostants.appMarginDefault
-      }}
-    >
-      Legacy Pictograms
-    </H2>
-    <View style={styles.itemsWrapper}>
-      {Object.entries(sortedIOPictogramsLegacy).map(([pictogramItemName]) => (
-        <AssetViewerBox
-          key={pictogramItemName}
-          name={pictogramItemName}
-          image={
-            <Pictogram name={pictogramItemName as IOPictograms} size="100%" />
-          }
-        />
-      ))}
-    </View>
   </Screen>
 );