@pagopa/io-app-design-system 1.9.2 → 1.10.0

package/src/components/pictograms/Pictogram.tsx

@@ -1,6 +1,11 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ColorValue } from "react-native";
-import { IOColors } from "../../core/IOColors";
+import {
+  IOColors,
+  IOThemeDark,
+  IOThemeLight,
+  useIOTheme
+} from "../../core/IOColors";
 
 import PictogramMessages from "./svg/PictogramMessages";
 import PictogramAbacus from "./svg/PictogramAbacus";
@@ -10,6 +15,7 @@ import PictogramAttention from "./svg/PictogramAttention";
 import PictogramBaloons from "./svg/PictogramBaloons";
 import PictogramBeerMug from "./svg/PictogramBeerMug";
 import PictogramCameraRequest from "./svg/PictogramCameraRequest";
+import PictogramCameraDenied from "./svg/PictogramCameraDenied";
 import PictogramCompleted from "./svg/PictogramCompleted";
 import PictogramEmailToValidate from "./svg/PictogramEmailToValidate";
 import PictogramEmailValidation from "./svg/PictogramEmailValidation";
@@ -69,6 +75,8 @@ import PictogramBleedFeedback from "./svg/PictogramBleedFeedback";
 import PictogramBleedSecurity from "./svg/PictogramBleedSecurity";
 import PictogramBleedFeature from "./svg/PictogramBleedFeature";
 import PictogramBleedCie from "./svg/PictogramBleedCie";
+import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
+import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -110,6 +118,7 @@ export const IOPictograms = {
   umbrellaNew: PictogramUmbrellaNew,
   feedback: PictogramFeedback,
   cameraRequest: PictogramCameraRequest,
+  cameraDenied: PictogramCameraDenied,
   success: PictogramSuccess,
   fatalError: PictogramFatalError,
   help: PictogramHelp,
@@ -137,27 +146,68 @@ export const IOPictograms = {
 };
 
 export type IOPictograms = keyof typeof IOPictograms;
-export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 240;
+export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180;
 
 type IOPictogramsProps = {
   name: IOPictograms;
   color?: IOColors;
+  /* Not too happy about the API choice,
+  but at least we have the same <StatusBar …>
+  component props. */
+  pictogramStyle?: "default" | "light-content" | "dark-content";
   size?: IOPictogramSizeScale | "100%";
 };
 
 export type SVGPictogramProps = {
   size: IOPictogramSizeScale | "100%";
   color: ColorValue;
+  colorValues: Record<string, ColorValue>;
+};
+
+type PictogramPalette = {
+  hands: ColorValue;
+  main: ColorValue;
+  secondary: ColorValue;
 };
 
 export const Pictogram = ({
   name,
   color = "aqua",
+  pictogramStyle = "default",
   size = 120,
   ...props
 }: IOPictogramsProps) => {
   const PictogramElement = IOPictograms[name];
-  return <PictogramElement {...props} size={size} color={IOColors[color]} />;
+  const theme = useIOTheme();
+
+  const themeObj = useMemo(() => {
+    switch (pictogramStyle) {
+      case "dark-content":
+        return IOThemeLight;
+      case "light-content":
+        return IOThemeDark;
+      case "default":
+        return theme;
+    }
+  }, [pictogramStyle, theme]);
+
+  const colorValues: PictogramPalette = useMemo(
+    () => ({
+      hands: IOColors[themeObj["pictogram-hands"]],
+      main: IOColors[themeObj["pictogram-tint-main"]],
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+    }),
+    [themeObj]
+  );
+
+  return (
+    <PictogramElement
+      {...props}
+      size={size}
+      color={IOColors[color]}
+      colorValues={colorValues}
+    />
+  );
 };
 
 /*
@@ -169,7 +219,15 @@ export const Pictogram = ({
 */
 
 export type IOPictogramsBleed = Extract<
-  "charity" | "help" | "feedback" | "itWallet" | "security" | "feature" | "cie",
+  | "charity"
+  | "help"
+  | "feedback"
+  | "itWallet"
+  | "security"
+  | "feature"
+  | "cie"
+  | "cameraRequest"
+  | "cameraDenied",
   IOPictograms
 >;
 
@@ -182,17 +240,50 @@ export const IOPictogramsBleed: {
   itWallet: PictogramBleedITWallet,
   security: PictogramBleedSecurity,
   feature: PictogramBleedFeature,
-  cie: PictogramBleedCie
+  cie: PictogramBleedCie,
+  cameraRequest: PictogramBleedCameraRequest,
+  cameraDenied: PictogramBleedCameraDenied
 };
 
 export const PictogramBleed = ({
   name,
   color = "aqua",
   size = 80,
+  pictogramStyle = "default",
   ...props
 }: IOPictogramsProps) => {
   const PictogramElement = IOPictogramsBleed[name as IOPictogramsBleed];
-  return <PictogramElement {...props} size={size} color={IOColors[color]} />;
+
+  const theme = useIOTheme();
+
+  const themeObj = useMemo(() => {
+    switch (pictogramStyle) {
+      case "dark-content":
+        return IOThemeLight;
+      case "light-content":
+        return IOThemeDark;
+      case "default":
+        return theme;
+    }
+  }, [pictogramStyle, theme]);
+
+  const colorValues: PictogramPalette = useMemo(
+    () => ({
+      hands: IOColors[themeObj["pictogram-hands"]],
+      main: IOColors[themeObj["pictogram-tint-main"]],
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+    }),
+    [themeObj]
+  );
+
+  return (
+    <PictogramElement
+      {...props}
+      size={size}
+      color={IOColors[color]}
+      colorValues={colorValues}
+    />
+  );
 };
 
 /* Object Pictograms */

package/src/components/pictograms/svg/PictogramAccessDenied.tsx

@@ -4,41 +4,41 @@ import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramAccessDenied = ({
   size,
-  color,
+  colorValues,
   ...props
 }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m180.1 169.56-71.27-26.27c-4.97-1.83-9.8897-2.7-14.6397-2.57-9.17.24-15.28 3.56-18.15 9.87-2.07 4.56-1.33 7.86 2.27 10.07 5.54 3.41 14.62 2.48 16.23.48.88-1.09 2.26-3.77 1.9-6.91-.32-2.75-1.94-5.27-4.79-7.5l2.46-3.16c3.74 2.91 5.86 6.33 6.3097 10.19.49 4.16-1.1797 7.92-2.7497 9.88-3.35 4.17-14.98 4.4-21.45.42-5.31-3.27-6.7-8.78-3.81-15.14 3.5-7.71 11-11.93 21.68-12.21 5.24-.13 10.6797.81 16.1297 2.82l71.27 26.27-1.38 3.75-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m100.01 154.85-2.2297-3.32c.25-.17 6.0697-4.03 11.8297-3.77l-.19 4c-4.43-.22-9.36 3.06-9.41 3.1v-.01ZM78.7802 184.37c-4.15-2.1-6.77-5.1-7.8-8.92-1.97-7.36 2.91-14.96 3.12-15.28l3.35 2.19-1.67-1.09 1.68 1.09c-.04.06-4.12 6.45-2.61 12.08.72 2.66 2.65 4.8 5.73 6.37l-1.81 3.57.01-.01ZM112.46 190.12c-6.57-3.8-8.86-8.6-9.62-11.96-.83-3.65-.1-6.37-.02-6.67l3.84 1.11-1.92-.55 1.93.54c-.09.34-2.13 8.33 7.79 14.08l-2 3.46v-.01ZM93.8103 182.84l-3.33-2.22c2.4-3.6 3.28-6.79 2.61-9.46-.78-3.13-3.53-4.63-3.56-4.65l1.85-3.55c.18.09 4.31 2.28 5.57 7.15.99 3.83-.07 8.12-3.14 12.73Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M90.4501 199.23c-1.1 0-2.18-.17-3.2-.52-3.02-1.02-8.54-3.95-11.61-12.06-.51-1.34-.35-2.79.44-4 .78-1.2 2.08-1.96 3.5-2.05l18.64-1.12h.09c1.8799.06 3.6399.94 4.8299 2.4 1.22 1.5 1.73 3.46 1.4 5.38-1.02 5.86-5.0199 9.99-11.2699 11.61-.94.24-1.88.37-2.81.37l-.01-.01Zm7.8-15.75-18.44 1.11c-.21.01-.33.15-.38.23-.06.09-.12.24-.05.41 2.36 6.25 6.28 8.72 9.15 9.69 1.14.38 2.42.41 3.73.07 4.78-1.24 7.58-4.08 8.3399-8.43.13-.78-.07-1.57-.56-2.17-.4499-.55-1.0799-.88-1.7799-.92l-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M165.53 226.17c-32.54-15.26-72.9396-27.2-73.3396-27.32l1.13-3.84c.41.12 41.0896 12.15 73.9096 27.54l-1.7 3.62Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M100.56 220c-2.7599 0-4.9999-2.24-4.9999-5v-16.83l.72-.32c4.2499-1.87 7.3699-5.63 8.4299-10.15l.84-1.22v28.53c0 2.76-2.24 5-5 5l.01-.01ZM105.56 148.21l-5.6299 2.54-4.37-6.07v-38.51h9.9999v42.04Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M100.02 111.32c23.207 0 42.02-22.0097 42.02-49.16 0-27.1503-18.813-49.16-42.02-49.16C76.813 13 58 35.0097 58 62.16c0 27.1503 18.813 49.16 42.02 49.16Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M118.13 92.36c-.5 0-.98-.25-1.27-.7L81.73 36.21c-.44-.7-.24-1.63.46-2.07.7-.44 1.63-.23 2.07.46l35.13 55.45c.44.7.24 1.63-.46 2.07-.25.16-.53.23-.8.23v.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M82.9998 92.36c-.27 0-.55-.08-.8-.23-.7-.44-.91-1.37-.46-2.07L116.86 34.6c.44-.7 1.37-.91 2.07-.46.7.45.91 1.37.46 2.07L84.2598 91.66c-.29.45-.77.7-1.27.7h.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramAttention.tsx

@@ -2,27 +2,31 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramAttention = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramAttention = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m137.89 157.04-3.23-2.71-2.03-3.21-1.92-5.21 2.32-5.88 5.93-4.45 7.74-3.5 6.14.47 1.61-1.4 3.16-3.58 3.66-1.45 5.49.29 1.79-3.11-.48-2.25-1.99-6.51-1.24-7.65-.7-3.38 1.53-7.15 1.73-2.81 4.81-1.45 3.81.55 5.21 8.7 1.11-1.92c2.19-3.79 2.19-8.47 0-12.26l-30.62-53.04c-2.19-3.79-6.24-6.13-10.62-6.13H79.8701c-4.38 0-8.43 2.34-10.62 6.13l-30.61 53.03c-2.19 3.79-2.19 8.47 0 12.26l30.62 53.03c2.19 3.79 6.24 6.13 10.62 6.13H139l-1.1-1.54h-.01ZM146.15 158.58h2.04l.25-.45-2.29.45Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M139.17 211.62c-2.17-36.04 8.61-64.12 9.07-65.29l3.73 1.45c-.11.28-10.92 28.48-8.8 63.6l-3.99.24h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M141.88 159.04c-1.89 0-3.99-.32-5.94-1.31-2.79-1.43-4.71-3.93-5.7-7.42-1.9-6.71 3.38-13.54 9.46-17.33 6.97-4.34 14.18-4.71 18.38-.95 8.62 7.74 7.4 16.64 7.34 17.02l-3.96-.59c.04-.28.9-7.2-6.06-13.45-3.23-2.9-9.15-1.4-13.59 1.36-4.65 2.9-9.05 8.16-7.72 12.85.68 2.41 1.88 4.02 3.66 4.94 3.7 1.91 8.72.15 8.77.13l1.36 3.76c-.17.06-2.78.99-6 .99ZM188.26 209.3c-2.26-18.75-1.7-30.7-1.2-41.23.22-4.76.44-9.26.37-14.02-.2-15.04-3.78-31.52-3.81-31.69l-.02-.11c-3.42-21.01-7.81-25.83-10.11-26.83-.68-.29-1.77-.56-3.47.58-2.17 1.45-3.47 4.14-3.38 7.02.66 22.39 14.42 38.36 14.55 38.52l-3.01 2.64c-.61-.69-14.84-17.17-15.54-41.04-.13-4.24 1.85-8.25 5.16-10.46 2.43-1.62 4.95-1.93 7.29-.92 5.5 2.39 9.57 12.14 12.46 29.8.27 1.24 3.69 17.26 3.89 32.44.06 4.87-.15 9.43-.38 14.26-.49 10.38-1.04 22.15 1.17 40.57l-3.97.48v-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m190.41 178.07-3.58-1.79c10.31-20.61 14.77-39.24 12.34-43.07-.37-.57-.81-.88-1.46-.99-2.34-.4-6.31 1.88-8.27 3.42l-2.47-3.15c.66-.52 6.57-5.04 11.4-4.21 1.75.3 3.19 1.26 4.16 2.78 4.67 7.33-4.7 32.13-12.13 47l.01.01ZM156.68 132.7l-3.89-.92c.04-.18 1.07-4.42 5.23-6.75 3.32-1.87 7.56-1.97 12.6-.31l-1.25 3.8c-3.9-1.28-7.05-1.29-9.34-.03-2.62 1.44-3.33 4.19-3.34 4.22l-.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M113.19 106.19c-.83 0-1.5-.67-1.5-1.5V58.06c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v46.63c0 .83-.67 1.5-1.5 1.5ZM113.35 125.55c2.563 0 4.64-2.077 4.64-4.64 0-2.563-2.077-4.64-4.64-4.64-2.563 0-4.64 2.077-4.64 4.64 0 2.563 2.077 4.64 4.64 4.64Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramBleedCameraDenied.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedCameraDenied = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M19 165.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-15.47c0-3.8-12.11-6.43-19-7.3-6.89-.87-15.24-7.83-15.24-7.83-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-14.36-8.24-14.36-8.24l7.39-6.17-3.53-1.39-2.05-4.02 3.44-2.66 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V80.21c0-5.87-4.76-10.63-10.63-10.63H29.63C23.76 69.57 19 74.33 19 80.21V165.98ZM62.2699 49h-32.72c-1.5795 0-2.86 1.2805-2.86 2.86v9.97c0 1.5795 1.2805 2.86 2.86 2.86h32.72c1.5796 0 2.86-1.2805 2.86-2.86v-9.97c0-1.5795-1.2804-2.86-2.86-2.86Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M91.0899 143.19c-.38 0-.77-.15-1.06-.44-.59-.59-.59-1.54 0-2.12l26.0901-26.09c.59-.59 1.54-.59 2.12 0 .59.59.59 1.54 0 2.12l-26.0901 26.09c-.29.29-.68.44-1.06.44Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M117.18 143.19c-.38 0-.77-.15-1.06-.44l-26.0901-26.09c-.59-.59-.59-1.54 0-2.12.59-.59 1.54-.59 2.12 0l26.0901 26.09c.59.59.59 1.54 0 2.12-.29.29-.68.44-1.06.44Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M104.14 166.76c-21.02 0-38.12-17.1-38.12-38.12 0-21.02 17.1-38.12 38.12-38.12 21.02 0 38.12 17.1 38.12 38.12 0 21.02-17.1 38.12-38.12 38.12Zm0-73.23c-19.36 0-35.12 15.75-35.12 35.12 0 19.37 15.75 35.12 35.12 35.12 19.37 0 35.12-15.75 35.12-35.12 0-19.37-15.75-35.12-35.12-35.12ZM179.56 95.54h-23.67c-2.78 0-5.04-2.26-5.04-5.04v-9.23c0-2.78 2.26-5.04 5.04-5.04h23.67c2.78 0 5.04 2.26 5.04 5.04v9.23c0 2.78-2.26 5.04-5.04 5.04Zm-23.67-16.32c-1.13 0-2.04.92-2.04 2.04v9.23c0 1.13.92 2.04 2.04 2.04h23.67c1.13 0 2.04-.92 2.04-2.04v-9.23c0-1.13-.92-2.04-2.04-2.04h-23.67Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M240.21 133.29c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.84 132.12c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.85-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.68 146c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.52 185.71c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.38-10.85-1.36-5.4 3.12-9.75 3.31-9.94l2.9 3.04-1.45-1.52 1.46 1.51s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.42 7.81l2.54.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82v.01Z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramBleedCameraDenied;

package/src/components/pictograms/svg/PictogramBleedCameraRequest.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedCameraRequest = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M20 165.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-14.83c0-.39-9.03-5.96-15.92-6.83-6.89-.87-18.52-5.24-18.52-5.24-10.32-3.9-.23-16.35-.23-16.35l1.09 2.1c-11.11-.83-14.35-9.17-14.35-9.17l7.68-7.01-2.88-.69-.78-5.36 2.85-2.77 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V80.21c0-5.87-4.76-10.63-10.63-10.63H30.63C24.76 69.57 20 74.33 20 80.21V165.98Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M240.33 133.99c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.97 132.82c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.85-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.81 146.69c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.65 186.41c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.38-10.85-1.36-5.4 3.12-9.75 3.31-9.94l2.91 3.03s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.42 7.81l2.54.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82v.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M63.2699 49h-32.72c-1.5795 0-2.86 1.2805-2.86 2.86v9.97c0 1.5795 1.2805 2.86 2.86 2.86h32.72c1.5796 0 2.86-1.2805 2.86-2.86v-9.97c0-1.5795-1.2804-2.86-2.86-2.86Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M105.01 140.34c-.83 0-1.5-.67-1.5-1.5v-36.9c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v36.9c0 .83-.67 1.5-1.5 1.5ZM105.14 155.34c2.027 0 3.67-1.643 3.67-3.67s-1.643-3.67-3.67-3.67-3.67 1.643-3.67 3.67 1.643 3.67 3.67 3.67Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M105.14 166.76c-21.02 0-38.12-17.1-38.12-38.12 0-21.02 17.1-38.12 38.12-38.12 21.02 0 38.12 17.1 38.12 38.12 0 21.02-17.1 38.12-38.12 38.12Zm0-73.23c-19.36 0-35.12 15.75-35.12 35.12 0 19.37 15.75 35.12 35.12 35.12 19.37 0 35.12-15.75 35.12-35.12 0-19.37-15.75-35.12-35.12-35.12ZM180.56 95.54h-23.67c-2.78 0-5.04-2.26-5.04-5.04v-9.23c0-2.78 2.26-5.04 5.04-5.04h23.67c2.78 0 5.04 2.26 5.04 5.04v9.23c0 2.78-2.26 5.04-5.04 5.04Zm-23.67-16.32c-1.13 0-2.04.92-2.04 2.04v9.23c0 1.13.92 2.04 2.04 2.04h23.67c1.13 0 2.04-.92 2.04-2.04v-9.23c0-1.13-.92-2.04-2.04-2.04h-23.67Z"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedCameraRequest;

package/src/components/pictograms/svg/PictogramBleedCharity.tsx

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedCharity = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedCharity = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M133.46 173.8c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.11-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.88.22 1.51 1.01 1.52 1.92 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.17-3.8 21.12-8.32 26.15-8.25l-.06 4h-.08c-3.38 0-12.29 2.89-24.47 7.94-1.01.42-2.05.62-3.08.62l-.02.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M137.37 190.23c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.84 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.08-9.56 23.94-9.11l-.47 3.97c-2.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M240.29 213.7c-39.81-19.17-81.44-13.87-92.88-10.51-2.82.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.81-8.97 95.75 10.74l-1.73 3.6h-.01ZM169.508 150.199l-.698 3.939 10.348 1.834.698-3.939-10.348-1.834Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M191.07 170.8c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.258 156.644l-3.982.38 2.844 29.854 3.982-.379-2.844-29.855Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M133.75 39.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.5099-2.03-3.78.51-7.45 1.58-10.89 3.15-4.49 2.05-7.86 5.81-10.65 9.88l-3.1 4.53c-3.74-2.62-7.92-4.57-12.35-5.72-4.86-1.26-9.92-1.56-14.89-.88-4.97.68-9.77 2.33-14.1 4.86-4.33 2.52-8.13 5.87-11.16 9.85-3.04 3.98-5.25 8.52-6.53 13.35-1.28 4.83-1.59 9.87-.91 14.81.68 4.95 2.34 9.71 4.87 14.02 2.53 4.31 5.9 8.08 9.89 11.09L103.6 145.21l26.72-45.64 10.54-20.04c1.85-4.42 3.76-12.92 1.34-23.34-1.41-6.07-4.32-11.7-8.47-16.38l.02.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M25.2295 81.79c-.79 0-1.45-.62-1.5-1.42-1.37-25.26 18.17-33.75 28.7-34.71.83-.08 1.55.53 1.63 1.36.08.83-.53 1.55-1.35 1.63-1.12.11-27.54 2.92-25.98 31.56.04.83-.59 1.53-1.42 1.58h-.08Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramBleedCie.tsx

@@ -2,35 +2,39 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedCie = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedCie = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M19 155.41v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-17.77c0-.39-11.26-4.36-18.16-5.23-6.9-.87-16.08-7.6-16.08-7.6-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-15.11-10.96-15.11-10.96l8.14-3.44-1.41-2.87-3.59-2.58 2.86-2.61 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 2.47 9.5 2.47V69.63c0-5.87-4.76-10.63-10.63-10.63H29.63C23.76 59 19 63.76 19 69.63V155.41Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M180.31 177.12H30.9201c-4.6 0-8.34-3.74-8.34-8.34V70.42c0-4.6 3.74-8.34 8.34-8.34H181.51c4.6 0 8.34 3.74 8.34 8.34v37.71c0 .75-.61 1.35-1.35 1.35-.74 0-1.35-.61-1.35-1.35V70.42c0-3.1-2.53-5.63-5.63-5.63H30.9201c-3.1 0-5.63 2.53-5.63 5.63v98.37c0 3.1 2.53 5.63 5.63 5.63H180.31c3.1 0 5.63-2.53 5.63-5.63V152.5c0-.75.61-1.35 1.35-1.35.74 0 1.35.61 1.35 1.35v16.29c0 4.6-3.74 8.34-8.34 8.34l.01-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M240.209 121.41c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.839 120.23c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.86-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M176.68 134.11c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M240.52 173.83c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.37-10.85-1.36-5.4 3.12-9.76 3.31-9.94l2.9 3.04-1.45-1.52 1.46 1.51s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.41 7.81l2.55.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M54.21 143.18c-8.36 0-15.17-6.8-15.17-15.17 0-8.37 6.8-15.17 15.17-15.17 8.37 0 15.17 6.8 15.17 15.17 0 8.37-6.8 15.17-15.17 15.17Zm0-27.33c-6.71 0-12.17 5.46-12.17 12.17s5.46 12.17 12.17 12.17 12.17-5.46 12.17-12.17-5.46-12.17-12.17-12.17Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M74.0501 163.12c-.83 0-1.5-.67-1.5-1.5 0-10.11-8.23-18.34-18.34-18.34s-18.34 8.23-18.34 18.34c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5c0-11.77 9.57-21.34 21.34-21.34s21.34 9.57 21.34 21.34c0 .83-.67 1.5-1.5 1.5ZM128.57 144.21H86.04c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h42.53c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM115.18 82H40.5498c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5H115.18c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5ZM82.2198 93.76h-41.67c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5h41.67c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5ZM117.74 158.72H86.0498c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H117.74c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM134.76 151.66H86.0498c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H134.76c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramBleedFeature.tsx

@@ -4,41 +4,41 @@ import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramBleedFeature = ({
   size,
-  color,
+  colorValues,
   ...props
 }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M156.2 126.24h-.29c-2.76-.16-4.87-2.52-4.71-5.28l5.89-103.24c.16-2.76 2.55-4.88 5.28-4.72 2.76.16 4.87 2.52 4.71 5.28l-5.89 103.24c-.15 2.66-2.36 4.72-4.99 4.72Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M153.501 158.01c-.18 0-.36 0-.55-.02-2.03-.12-3.79-1.04-5.1-2.67-4.58-5.71-2.57-19.08-2.33-20.59.6-5.18 2.79-8.92 6.52-11.01 7.82-4.39 20.48-.22 29.72 4.05 6.08 2.81 12.88 4.15 19.63 3.89 8.93-.35 23.07-1.9 39.71-7.35l1.24 3.8c-17.08 5.59-31.61 7.19-40.8 7.55-7.38.29-14.82-1.18-21.46-4.26-11.87-5.49-21.14-6.98-26.09-4.2-2.58 1.45-4.06 4.09-4.52 8.07-.59 3.7-1.46 13.86 1.49 17.54.6.75 1.3 1.12 2.21 1.17 1.24.07 2.31-.3 3.25-1.15 3.12-2.81 4.1-9.88 4.21-12.36l4 .18c-.02.43-.53 10.64-5.53 15.15-1.62 1.46-3.51 2.2-5.62 2.2l.02.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M135.05 181.89c-2.99-.35-5.27-1.67-6.79-3.93-3.58-5.35-1.19-14.09-1.09-14.46l.08-.27.15-.24c1.08-1.75 10.85-17 20.37-15.36l-.68 3.94c-5.68-.97-13.58 9.26-16.14 13.28-.57 2.24-1.41 7.86.63 10.89.84 1.26 2.13 1.97 3.92 2.18l-.46 3.97h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M165.16 201.25h-.24c-17.54-.7-29.33-1.7-33.13-8.89-2.57-4.87-2.11-8.44 1.7-13.16 3.37-4.17 9.36-9.7 18.78-12.33 6.84-1.91 13.9.03 18.01 4.94 2.73 3.27 2.71 6.08 2.21 7.87-1.1 3.94-5.5 7.18-13.47 9.91l-1.3-3.78c8.56-2.93 10.51-5.77 10.91-7.2.13-.47.53-1.88-1.43-4.22-3.1-3.71-8.54-5.14-13.86-3.65-8.4 2.35-13.74 7.27-16.75 10.99-3.04 3.76-2.98 5.57-1.28 8.78 2.77 5.25 14.48 6.15 29.51 6.75 4.76-.96 61.18-12.3 76.36-12.3h.59l-.09 4c-14.14-.32-75.68 12.14-76.3 12.26l-.24.05.02-.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m169.52 172.88-3.6-1.74c6.24-12.95-5.67-19.12-6.18-19.37l1.79-3.57c.16.08 15.92 8.23 7.99 24.69v-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M175.67 165.75c-3.52 0-6.42-1.02-6.64-1.1l1.35-3.76-.68 1.88.67-1.88c.08.03 7.67 2.66 11.57-1.41l2.89 2.77c-2.64 2.75-6.13 3.51-9.16 3.51v-.01ZM127.15 164.45c-2.38-11.4-1.06-20.32 3.9-26.51 6.49-8.1 16.75-8.34 17.19-8.34l.06 4c-.09 0-8.87.25-14.16 6.88-4.16 5.21-5.19 13-3.08 23.16l-3.92.82.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M152.35 226.02h-.28c-2.76-.15-4.87-2.51-4.72-5.27l1.89-34.08c.15-2.76 2.54-4.87 5.27-4.72 2.76.15 4.87 2.51 4.72 5.27l-1.89 34.08c-.15 2.66-2.35 4.72-4.99 4.72ZM161.02 26l71.02 30.46c6.69 2.87 6.45 12.44-.37 14.97l-73.66 27.36L161.02 26Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M225.95 62.13c.57.04 1.13-.28 1.37-.83.3-.7-.02-1.52-.73-1.82l-60.7-26.1c-.71-.3-1.52.02-1.82.73-.3.7.02 1.52.73 1.82l60.7 26.1c.15.06.3.1.45.11v-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramBleedFeedback.tsx

@@ -2,27 +2,31 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedFeedback = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedFeedback = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m157.94 57.81-17.59 39.34 3.97 1.41 4.64 2.64 4.51 4.28.98 3.87-3.25 3.66-4.02.95 3.48 1.1 1.81 2.97-.43 2.95-2.57 2.02s.02 1.16.02 1.47c0 .31 1.8 3.07 1.8 3.07l.39 7.54-1.75 3.51-3.39 1.72-6.25.29-5.61-1.16-5.94-3.28-7.16 14.2 11.05 47.22 40.45-28.46 21.97-60.04-2.02-1.02-10.67-3.09-11.15-1.75-8.32-6.44-.72-6.05 4.35-8.4 8.35-4.07 14.95.04 11.61 5.22 2.46-5.91c5.46-13.11-1.08-28.14-14.4-33.07-12.36-4.58-26.16 1.21-31.54 13.25l-.01.02Zm-12.3 126.05c-5.49-8.64-14.73-5.51-14.73-5.51l-5.2-24.61c20.14-6.53 42.14 13.82 42.14 13.82l-22.21 16.3Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M168.65 159.17c-.19 0-.38-.04-.57-.11-.78-.31-1.15-1.2-.84-1.98l20.65-51.1c.31-.78 1.2-1.15 1.98-.84.78.31 1.15 1.2.84 1.98l-20.65 51.1c-.24.59-.81.95-1.41.95ZM196.19 82.71c-.21 0-.42-.04-.63-.14-.76-.35-1.1-1.25-.75-2.01.02-.06 2.5-5.6 2.62-12.14.15-8.49-3.61-14.65-11.18-18.31-.75-.36-1.07-1.27-.71-2.03.36-.76 1.27-1.07 2.03-.71 20.82 10.06 10.11 34.2 10 34.44-.25.56-.81.89-1.38.89v.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M144.48 116.46c-8.31 0-18.13-4.6-23.24-11.36-4.04-5.35-4.6-11.3-1.57-16.75 2.32-4.17 5.6-6.86 9.76-7.98 8.69-2.35 18 3.08 18.4 3.31l-2.06 3.48c-.08-.05-8.26-4.8-15.29-2.88-3.1.84-5.47 2.82-7.26 6.04-2.83 5.09-.87 9.52 1.26 12.35 5.1 6.74 16.07 11.12 23.47 9.38 1.99-.47 4.33-1.44 4.18-3.44-.27-3.62-7.49-9.63-17.75-10.46l.33-4.04c10.93.88 20.96 7.51 21.46 14.19.13 1.76-.31 6.04-7.29 7.68-1.39.33-2.86.48-4.39.48h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M138.02 128.25c-5.25 0-11.98-1.75-18.62-8.39-5.93-5.93-8.32-11.08-7.09-15.3 1.48-5.09 7.53-6.49 7.78-6.54l.89 3.95s-3.99.95-4.79 3.74c-.75 2.62 1.4 6.63 6.06 11.29 5.43 5.43 11.44 7.82 17.88 7.1 5.81-.65 9.72-3.61 10.44-4.5.08-.57-.05-1.43-.54-2.2-.33-.52-.95-1.19-2.02-1.4l.78-3.97c1.94.38 3.59 1.52 4.66 3.2 1.08 1.7 1.46 3.76 1.01 5.53-.56 2.24-5.18 5.27-10.08 6.63-1.66.46-3.84.86-6.37.87l.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M142.72 142.75c-.83 0-1.7-.04-2.61-.12-21.16-1.92-21.31-23.99-21.3-24.22h4.05c0 .77.19 18.6 17.62 20.18 3.14.28 7.19.15 8.63-2.15 2.01-3.2-1.07-9.8-2.31-11.87l3.47-2.08c.62 1.03 5.94 10.24 2.26 16.1-1.73 2.76-5.03 4.15-9.81 4.15v.01ZM235.72 159.91c-24.43 0-54.21-11.76-55.54-12.29l1.5-3.76c.34.13 33.93 13.39 58.12 11.88l.25 4.04c-1.42.09-2.86.13-4.32.13h-.01ZM196.48 116.11l-3.94-.93c.01-.06.41-2.12-1.24-4.31-1.6-2.14-5.49-4.85-14.92-5.63-8.59-.71-14.03-3.11-16.15-7.13-2.02-3.82-.24-7.57.11-8.25 9.27-20.23 30.13-12.4 30.34-12.32 25.05 10.56 48.09 8.75 48.33 8.73l.34 4.03c-.98.08-24.27 1.91-50.19-9.01-.66-.25-17.51-6.49-25.17 10.31-.03.05-.05.11-.08.16-.04.08-1.25 2.34-.09 4.49 1.42 2.62 5.99 4.38 12.89 4.95 8.88.73 14.91 3.21 17.93 7.37 2.7 3.72 1.87 7.38 1.83 7.54h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );

package/src/components/pictograms/svg/PictogramBleedHelp.tsx

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedHelp = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedHelp = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M133.94 165.85c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.12-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.11-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.89.22 1.51 1.01 1.52 1.92 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.63 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.09-3.77 20.95-8.25 26.02-8.25h.12l-.06 4c-3.34-.08-12.27 2.85-24.55 7.94-1.01.42-2.05.62-3.08.62l-.01.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M137.85 182.28c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.85 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.06-9.57 23.94-9.11l-.47 3.97c-2.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M240.77 205.74c-39.81-19.17-81.44-13.88-92.88-10.51-2.82.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.8-8.97 95.75 10.74l-1.73 3.6h-.01ZM169.987 142.243l-.698 3.938 10.349 1.834.698-3.938-10.349-1.834Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M191.551 162.85c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.743 148.684l-3.982.379 2.843 29.855 3.982-.379-2.843-29.855Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M85.52 154.04c32.872 0 59.52-26.648 59.52-59.52S118.392 35 85.52 35 26 61.648 26 94.52s26.648 59.52 59.52 59.52Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M82.4798 130.63c2.5626 0 4.64-2.077 4.64-4.64 0-2.563-2.0774-4.64-4.64-4.64-2.5626 0-4.64 2.077-4.64 4.64 0 2.563 2.0774 4.64 4.64 4.64ZM82.24 114.86c-.83 0-1.5-.67-1.5-1.5 0-18.43 5.9-22.29 12.15-26.38.95-.62 1.93-1.26 2.88-1.96 4.85-3.55 6.86-9.58 5.11-15.38-1.34-4.42-5.25-9.26-12.22-9.58h-.26c-.24 0-.54.01-.88-.04-4.42-.72-11.67 1.68-15.44 6.38-2.86 3.57-3.33 7.82-1.41 12.63.31.77-.07 1.64-.84 1.95-.77.31-1.64-.07-1.95-.84-2.93-7.34-.61-12.54 1.85-15.62 4.57-5.7 13.04-8.31 18.26-7.46.11.02.22 0 .33 0h.47c7.14.32 12.87 4.81 14.96 11.71 2.12 7.03-.32 14.36-6.22 18.67-1.01.74-2.03 1.4-3.01 2.05-5.79 3.79-10.79 7.06-10.79 23.87 0 .83-.67 1.5-1.5 1.5h.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );