@pagopa/io-app-design-system 1.9.3 → 1.11.0

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

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramCharity = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramCharity = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M221.881 180.37c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.6-9.25-.7-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.04-.06-2.06.29-2.85.99-.8.72-1.27 1.72-1.32 2.8-.09 2.07 1.38 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.75 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.56-7.08-4.1-6.89-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.64-2.14 5.77-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.38 1.07-10.42 1.36-2.31 5.61-7.36 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M141.65 166.14c-2.31-1.73-10.9-2.99-22.99-3.37-5.84-.18-10.47-5.09-10.32-10.94.11-4.48 3.04-8.44 7.28-9.87l2.11-.71 1.27 3.79-2.11.71c-2.66.89-4.49 3.37-4.56 6.17-.09 3.66 2.8 6.73 6.45 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M181.73 225.31c-16.99-25.12-39-41.13-65.42-47.6l-.51-.12c-2.85-.7-5.15-2.77-6.15-5.53-1.04-2.87-.5-6.13 1.4-8.5l3.28-4.1 3.12 2.5-3.29 4.1c-1.04 1.3-1.33 3.07-.77 4.64.55 1.51 1.8 2.63 3.35 3.01l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24.02-.01ZM161.573 142.908l-2.586 3.052 8.02 6.793 2.585-3.052-8.019-6.793Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M169.83 171.57c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.37 1.58 25.42l-3.46 2-.01.01ZM149.299 143.674 136.725 170.9l3.631 1.677 12.575-27.226-3.632-1.677Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M134.75 27.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.51-2.03-3.7799.51-7.4499 1.58-10.8899 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.09L104.6 133.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="M26.2295 69.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/PictogramCie.tsx

@@ -2,35 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramCie = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramCie = ({ size, colorValues, ...props }: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M7 150.41v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-8.43c0-.39-11.44-17.76-18.33-18.63-6.89-.87-15.91-3.54-15.91-3.54-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-12.16-11.46-12.16-11.46l5.18-2.95-1.41-2.87-.67-2.83-.07-2.37 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.71V64.63c0-5.87-4.76-10.63-10.63-10.63H17.63C11.76 54 7 58.76 7 64.63V150.41Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M168.31 172.12H18.9201c-4.6 0-8.34-3.74-8.34-8.34V65.41c0-4.59 3.74-8.33 8.34-8.33H169.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.35V65.41c0-3.1-2.53-5.63-5.63-5.63H18.9201c-3.1 0-5.63 2.53-5.63 5.63v98.37c0 3.1 2.53 5.63 5.63 5.63H168.31c3.1 0 5.63-2.53 5.63-5.63v-16.29c0-.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.34h.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M229.74 144.18c-14.45-19.53-40.46-50.52-48.71-50.52v-4c12.97 0 47.98 46.8 51.93 52.14l-3.22 2.38ZM165.6 115.05c-18.46-2.42-27.63-6.04-28.84-11.37-.74-3.26 1.84-5.94 3.48-7.01 9.19-5.9 38.25 5.61 41.53 6.94l-1.5 3.71c-11.66-4.73-32.25-10.89-37.85-7.29 0 0-2.06 1.44-1.75 2.77.2.85 2.36 5.25 25.45 8.28l-.52 3.97Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M165.45 128.27c-27.17-5.71-30.83-11.35-31.22-15.1-.52-5.04 5.75-7.95 6.47-8.27l1.62 3.66c-1.42.63-4.29 2.49-4.1 4.2.15 1.37 2.6 6.25 28.07 11.6l-.82 3.91h-.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M201.77 185.46c-2.43-3.36-4.81-6.87-7.33-10.59-11.38-16.79-23.15-34.16-38.58-35.71-8.27-.83-13.23-3.3-14.76-7.35-2.06-5.44 3.13-11.13 3.35-11.37l2.94 2.72c-1.04 1.14-3.53 4.66-2.55 7.25.93 2.43 4.98 4.13 11.42 4.77 17.29 1.74 29.59 19.89 41.49 37.45 2.5 3.69 4.86 7.18 7.26 10.49l-3.24 2.34Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M43.6602 138.19c-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="M63.5003 158.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.5ZM118.02 139.21H75.4902c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H118.02c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM104.62 77H29.9902c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5H104.62c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5ZM71.6702 88.77h-41.68c-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.5h.01ZM107.18 153.73H75.4902c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H107.18c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM124.2 146.66H75.4902c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H124.2c.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/PictogramDonation.tsx

@@ -5,23 +5,27 @@ import { SVGPictogramProps } from "../Pictogram";
 /**
  * @deprecated Use `charity` key instead
  */
-const PictogramDonation = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramDonation = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M147.212 192.138c.852.489 1.722.687 2.557.688 1.688-.002 3.239-.8 4.178-1.531 7.01-3.154 96.182-35.614 99.267-36.674h.001l.189-.065-1.328-3.835-.574.197c-5.355 1.842-93.089 33.823-99.504 36.809-.155.077-.319.189-.457.301 0 0-.006.004-.015.011h-.001c-.157.12-1.433 1.085-2.287.591-1.146-.68-6.407-6.424 2.924-52.883 4.407-21.91 2.285-38.661-6.295-49.7966-10.504-13.6464-27.726-14.7298-33.383-15.0824l-.888-.0516c-3.536.0774-11.8661.7223-12.832 5.1851-.6467 2.9494 1.932 5.8989 8.503 9.5534-12.1766.4299-28.967 2.4593-35.0553 9.9833-.0776.1032-.1466.2063-.2069.3181-.6037 1.1179-1.1901 3.5084.3794 5.3917.4798.573 1.161 1.147 2.2752 1.557-2.1345 1.696-3.9916 3.899-3.8706 6.38.207 4.187 5.5364 5.984 7.287 6.569.1294.043.2587.078.3967.095.1811.026 1.7075.206 4.0963.206l-.0087.009c1.4315 0 3.1716-.066 5.1144-.271-.581 2.115-.8166 4.783.629 6.892 1.3194 1.935 3.6737 2.898 6.9248 2.898l.0087-.009c.8537 0 1.7678-.06 2.7509-.198 1.8857-.095 5.7711-.365 9.6731-1.091-3.196 15.023-15.1229 77.882 4.582 96.651 1.561 2.063 15.359 19.055 45.05 19.055v.008c15.574 0 65.53-14.678 90.374-28.642l-2-3.534C138 262 121 220.936 115.442 218.433c-.086-.12-.181-.232-.284-.326-19.07-17.837-5.227-85.166-3.106-94.877 2.869-.886 5.268-2.124 6.21-3.856l-3.579-1.934c-1 1.84-9.71 3.525-17.0745 3.903-3.0701.422-5.2432.069-5.9417-.945-.8383-1.215-.129-3.711.5702-5.31 3.7122-.764 7.786-2.086 11.701-4.33l-2.026-3.517c-9.8141 5.624-21.1456 4.764-22.7496 4.609-3.1218-1.083-4.2773-2.21-4.3118-2.855-.0756-1.499 3.5311-4.206 6.9223-5.792 3.4963-.397 8.28-1.458 14.887-3.5632l-1.2418-3.8609c-17.3595 5.5291-19.8 2.9924-19.9035 2.8807-.138-.1634-.0518-.5504.0259-.7653 6.5712-7.6702 29.8555-8.3581 36.8925-8.3839 1.285-.0086 2.38-.8857 2.664-2.1326.285-1.2726-.336-2.5624-1.517-3.13-10.487-5.0561-10.849-7.3434-10.849-7.3434.483-.9373 4.915-1.9433 8.779-2.0379l.724.0516.008.0004c5.757.3615 21.029 1.3204 30.408 13.4998 7.83 10.1639 9.693 25.8227 5.528 46.5287-10.391 51.726-3.295 55.841-.966 57.191Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M89.9306 0C76.0999 0 64.8867 11.1786 64.8867 24.9668 64.8867 11.1786 53.6769 0 39.8462 0c-.2464 0-.4929.00332-.7393.00996C21.2631.52456 11.9649 21.5073 23.268 35.2822l32.1174 39.1467c4.9122 5.986 14.0938 5.986 19.006 0l32.1176-39.1467C117.809 21.5073 108.51.52457 90.6666.00996A27.44628 27.44628 0 0 0 89.9273 0h.0033Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M87.1816 7.87002c0-.72428.5872-1.31143 1.3115-1.31143 5.9448 0 10.2533 2.29037 13.0539 5.63291 2.77 3.3058 3.994 7.5532 3.994 11.4157 0 .7242-.587 1.3114-1.311 1.3114s-1.311-.5872-1.311-1.3114c0-3.3505-1.07-6.9716-3.3825-9.7312-2.2813-2.7228-5.8413-4.69455-11.0434-4.69455-.7243 0-1.3115-.58715-1.3115-1.31143Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,31 +2,31 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramEmpty = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramEmpty = ({ size, colorValues, ...props }: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M102.76 55c27.83 0 50.39 22.56 50.39 50.39 0 1.8-.1 3.58-.28 5.33l-3.63-2.63-3.97-1.84s-5.58.69-6.49 0c-.91-.69-3.36.07-3.68.25-.32.18-3.22 3.07-3.22 3.07l-1.28 3.54v3.94l1.28 2.9v1.89l-5.56-1.38s-.81-.19-2.71-.63c-1.89-.44-7.77-.02-7.96-.87-.19-.85-.1-.92-1.53-1.1-1.43-.17-4.95-.81-4.95-.81l-2.77-.35-2.72-.24s-3.41.83-3.63.98c-.2299.15-2.6699 6.32-2.6699 6.32v1.98l-.93 1.54-2.44 1.36-3.35 3.73.43 8.12 4.02 4.73-4.02 5.58.99 3.82c-22.7-4.9-39.71-25.08-39.71-49.25 0-27.83 22.56-50.39 50.3899-50.39V55Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M202.651 164.54c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.6-9.25-.7-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.05-.06-2.06.29-2.85.99-.8004.72-1.2704 1.72-1.3204 2.8-.09 2.07 1.3904 3.83 3.4304 4.11 9.84 1.33 22.46 3.45 26.75 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.1104-.55-7.0804-4.1-6.9004-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.6404-2.14 5.7704-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.37 1.07-10.42 1.36-2.31 5.61-7.36 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55v.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M122.41 150.3c-2.3-1.73-10.9-2.99-22.9898-3.37-5.84-.18-10.47-5.09-10.32-10.94.11-4.47 3.04-8.44 7.28-9.87l2.11-.71 1.27 3.79-2.11.71c-2.66.89-4.49 3.37-4.55 6.17-.09 3.66 2.8 6.73 6.45 6.85 13.6498.43 22.1598 1.83 25.2698 4.17l-2.4 3.2h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M162.49 209.47c-16.99-25.12-39-41.13-65.4198-47.6l-.51-.12c-2.85-.7-5.15-2.77-6.15-5.53-1.04-2.86-.5-6.12 1.4-8.5l3.29-4.1 3.12 2.5-3.29 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8 2.63 3.35 3.02l.5.12c27.4098 6.71 50.2198 23.28 67.7798 49.25l-3.31 2.24v-.02ZM142.327 127.059l-2.585 3.052 8.021 6.792 2.585-3.052-8.021-6.792Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M150.6 155.74c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.38 1.58 25.42l-3.46 2-.01.01ZM130.063 127.83l-12.575 27.227 3.632 1.677 12.574-27.226-3.631-1.678Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M123.15 84.47c-.39 0-.79-.15-1.08-.46-.57-.6-.55-1.55.05-2.12l31.26-29.92c.6-.57 1.55-.55 2.12.05.57.6.55 1.55-.05 2.12l-31.26 29.92c-.29.28-.66.42-1.04.42v-.01ZM106.62 75.54c-.82 0-1.49-.66-1.5-1.48l-.45-41.54c0-.83.66-1.51 1.48-1.52h.02c.82 0 1.49.66 1.5 1.48l.45 41.54c0 .83-.66 1.51-1.48 1.52h-.02ZM87.8601 82.24c-.39 0-.78-.15-1.07-.45l-26.8-27.47c-.58-.59-.57-1.54.03-2.12.59-.58 1.54-.57 2.12.03l26.8 27.47c.58.59.57 1.54-.03 2.12-.29.28-.67.43-1.05.43v-.01ZM82.0598 100.99c-.06 0-.12 0-.18-.01l-45.55-5.36c-.82-.1-1.41-.84-1.31-1.67.1-.82.84-1.41 1.66-1.31l45.56 5.36c.82.1 1.41.84 1.31 1.67-.09.76-.74 1.32-1.49 1.32Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -4,25 +4,25 @@ import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramEmptyArchive = ({
   size,
-  color,
+  colorValues,
   ...props
 }: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M76.1996 43.73 189.8 73.56c3.22.83 6.51-1.11 7.34-4.33l5.65-21.86c.83-3.22-1.11-6.51-4.33-7.34L84.8596 10.19c-3.22-.83-6.51 1.11-7.34 4.33l-5.65 21.86c-.83 3.22 1.11 6.51 4.33 7.34v.01ZM179.55 157.73v-72.6c0-2.56-2.08-4.64-4.64-4.64H65.8197c-2.56 0-4.64 2.08-4.64 4.64v71.44c0 2.56 2.08 4.64 4.64 4.64H129.69l-.55-4.65 4.67-6.35 6.64-4.86 9.01-2.33 15.19 3.55"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M188.171 70.34c-.13 0-.26-.02-.39-.05L80.9709 41.46c-1.65-.44-3.03-1.49-3.88-2.97-.85-1.48-1.08-3.2-.64-4.85l2.95-10.93c.22-.8 1.03-1.27 1.84-1.06.8.22 1.27 1.04 1.06 1.84l-2.95 10.93c-.24.87-.12 1.78.34 2.57.45.78 1.18 1.34 2.06 1.57L188.561 67.38c.8.22 1.27 1.04 1.06 1.84-.18.67-.79 1.11-1.45 1.11v.01ZM131.44 155.34H71.6796c-3.08 0-5.58-2.5-5.58-5.58V89.99c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v59.77c0 1.42 1.16 2.58 2.58 2.58H131.44c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM64.44 56.92c-.36 0-.73-.13-1.01-.39l-23.4-21.46c-.61-.56-.65-1.51-.09-2.12.56-.61 1.51-.65 2.12-.09l23.39 21.46c.61.56.65 1.51.09 2.12-.3.32-.7.49-1.11.49l.01-.01ZM60.7404 68.7c-.07 0-.15 0-.22-.02l-33.24-4.92c-.82-.12-1.39-.88-1.26-1.7.12-.82.89-1.39 1.7-1.26l33.24 4.92c.82.12 1.39.88 1.26 1.7-.11.75-.75 1.28-1.48 1.28Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M174.141 230.45c-14.96-4.85-23.75-15.74-32.24-26.27-12.08-14.98-23.49-29.12-51.7505-29.39-.14 0-.28-.02-.42-.05-3.46-.78-9.81-4.65-9.03-13.7l3.99.34c-.62 7.24 4.68 9.11 5.75 9.41 29.9805.37 42.4905 15.88 54.5805 30.88 8.5 10.54 16.53 20.5 30.36 24.98l-1.231 3.81-.009-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M98.4708 174.84c-8.32-6.55-8.42-13.34-8.42-13.63h4-2l2-.02c0 .21.2 5.24 6.8902 10.51l-2.4702 3.14ZM211.62 193.75l-41.86-40.14c-5.14-4.93-11.67-7.68-18.4-7.76h-.32c-8.7 0-15.49 4.21-20.17 12.52-1.55 2.75-1.65 5.99-.26 8.47.89 1.58 2.13 2.54 3.81 2.92 2.99.68 8.89-.15 20.02-7.99l2.3 3.27c-10.04 7.07-17.63 9.88-23.21 8.62-2.77-.63-4.99-2.31-6.42-4.87-2.07-3.69-1.96-8.44.27-12.39 6.87-12.18 16.82-14.61 24.02-14.56 7.74.09 15.24 3.24 21.12 8.87l41.86 40.14-2.77 2.89.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );

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

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramFatalError = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramFatalError = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m163.7 156.28-8.51-5.4-3.63-6.05 2.33-3.93 4.14-5.57-5.33-6.74-.55-5.22 7.37-2.49-1.05-4.44 3.79-2.49s9.52 1.63 9.77 1.63c.2 0 17.76 13.61 24.84 19.11 3.66-5.07 8.6-15.33 8.6-29.28 0-8.14-2.04-16.16-5.93-23.34-3.89-7.18-9.52-13.29-16.39-17.8-6.86-4.51-14.75-7.27-22.96-8.04-4.96-.47-9.94-.2-14.79.79-6.31 1.28-11.72 5.07-16.46 9.42l-15 13.78 17 28.16-24.5 24.7 15 29.15-21.4996 23.71 9.9996 24.21 57.96-49.85-4.21-4.02h.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M84.1001 58.86c6.14 2.27 11.78 5.73 16.5799 10.17l-5.0399 9.55 20.4699 30.29-20.4699 24.83 16.9699 27.31-16.9699 24.82 9.4899 21.35-72.4499-65.43c-4.8-4.44-8.68-9.78-11.4-15.71-2.73-5.93-4.25-12.33-4.49-18.85-.24-6.52.82-13.01 3.1-19.13 2.29-6.11 5.76-11.71 10.23-16.49 4.46-4.77 9.83-8.63 15.79-11.34 5.96-2.71 12.4-4.23 18.95-4.47 6.55-.24 13.09.81 19.23 3.09l.01.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M228.62 188.2c-6.57-23.39-19.88-61.6-27.59-64.53l1.42-3.74c12.13 4.61 28.23 60.79 30.03 67.19l-3.85 1.08h-.01ZM179.01 138.19c-16.4-8.82-23.68-15.46-22.92-20.87.47-3.31 3.83-4.9 5.75-5.32 10.67-2.24 33.76 18.83 36.36 21.24l-2.72 2.93c-9.22-8.56-26.31-21.63-32.8-20.26 0 0-2.44.62-2.62 1.97-.12.87.34 5.74 20.85 16.78l-1.89 3.52-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M174.17 150.49c-23.37-14.99-24.79-21.56-23.82-25.21 1.3-4.9 8.2-5.39 8.98-5.43l.21 3.99c-1.55.09-4.89.81-5.33 2.47-.35 1.33.21 6.76 22.12 20.81l-2.16 3.37Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M187.81 216.85c-1.08-4.01-2.06-8.13-3.09-12.5-4.67-19.74-9.51-40.15-23.38-47.08-7.43-3.71-11.2-7.79-11.19-12.11 0-5.82 6.88-9.29 7.17-9.44l1.78 3.58c-1.38.69-4.96 3.1-4.96 5.87 0 2.6 3.19 5.63 8.98 8.52 15.54 7.77 20.59 29.11 25.48 49.74 1.03 4.34 2 8.44 3.06 12.39l-3.86 1.04.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M30.7095 64.21c-.24 0-.48-.07-.69-.21L8.52952 49.25c-.56-.38-.7-1.14-.32-1.7.38-.56 1.14-.69 1.69-.32L31.3895 61.98c.56.38.7 1.14.32 1.7-.24.34-.62.53-1.01.53h.01ZM40.0601 55.47c-.54 0-1.04-.37-1.18-.92l-7.63-30.03c-.17-.65.23-1.32.88-1.48.65-.16 1.32.23 1.48.88l7.63 30.03c.17.65-.23 1.32-.88 1.48-.1.03-.2.04-.3.04ZM77.7702 174.8c-.37 0-.74-.14-1.03-.41l-38.61-36.71c-7.1-6.75-12.09-16.59-12.72-25.08-3.29-44.4 36.91-48.46 37.32-48.5.83-.07 1.55.54 1.62 1.36.07.82-.54 1.55-1.36 1.63-1.54.14-37.67 3.87-34.59 45.29.58 7.79 5.21 16.87 11.8 23.13l38.61 36.71c.6.57.62 1.52.05 2.12-.29.31-.69.47-1.09.47v-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,39 +2,43 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramFeature = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramFeature = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M93.3604 126.53c-.71 0-1.44-.15-2.13-.48-2.5-1.18-3.57-4.16-2.39-6.66L132.94 25.87c1.18-2.5 4.16-3.57 6.66-2.39 2.5 1.18 3.57 4.16 2.39 6.66l-44.1096 93.53c-.85 1.81-2.65 2.87-4.53 2.87l.01-.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M152.65 156.79c-25.22 0-35.15-10.21-35.61-10.69l-.13-.16c-4.39-5.74-17.89-20.46-27.39-19.73-3.14.24-5.64 2.15-7.64 5.84-1.94 3.21-6.54 12.31-5.19 16.82.28.92.79 1.53 1.61 1.92 1.13.53 2.25.58 3.45.15 3.94-1.44 7.5-7.62 8.53-9.89l3.64 1.66c-.18.39-4.47 9.67-10.8 11.98-2.22.81-4.42.71-6.54-.29-1.84-.87-3.13-2.39-3.73-4.38-2.11-7.01 4.76-18.66 5.55-19.96 2.62-4.82 6.27-7.48 10.8-7.83 13.3-1.02 29.36 19.33 30.8 21.18.87.84 12.71 11.65 41.86 8.94l.37 3.98c-3.41.32-6.61.46-9.59.46h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M51.0402 169.86c-2.64-1.44-4.26-3.52-4.82-6.19-1.32-6.3 4.17-13.51 4.41-13.81l.17-.22.23-.17c1.66-1.21 16.43-11.7 24.64-6.62l-2.11 3.4c-4.92-3.04-16.06 3.5-19.94 6.27-1.37 1.87-4.25 6.76-3.49 10.33.31 1.48 1.24 2.62 2.82 3.49l-1.92 3.51.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M141.66 216.45c-35.07 0-68.7497-16.76-70.2397-17.51-15.93-7.18-26.49-12.51-27.32-20.6-.56-5.48 1.2-8.61 6.51-11.57 4.69-2.61 12.31-5.49 22.03-4.4 7.05.79 12.88 5.23 14.85 11.32 1.31 4.05.24 6.65-.89 8.12-2.49 3.24-7.79 4.6-16.2 4.15l.21-3.99c9.04.48 11.91-1.41 12.81-2.59.29-.38 1.19-1.55.26-4.45-1.49-4.6-5.99-7.96-11.49-8.58-8.67-.97-15.47 1.6-19.64 3.92-4.22 2.35-4.84 4.05-4.47 7.66.61 5.94 11.23 11.17 25.06 17.4.45.23 37.7897 18.8 73.6097 16.99l.2 4c-1.76.09-3.53.13-5.29.13Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m86.3804 174.4-2.69-2.96c4.44-4.04 6.07-8.61 4.86-13.61-.95-3.89-3.31-6.65-3.34-6.68l3.01-2.64c.12.13 11.68 13.59-1.84 25.88v.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M100.11 171.22c-5.84 0-10.85-4.39-11.11-4.63l2.66-2.98c.06.05 6.12 5.33 11.25 3.02l1.64 3.65c-1.49.67-3 .94-4.45.94h.01ZM54.1802 151.43l-3.94-.71c2.06-11.46 6.62-19.24 13.54-23.12 9.05-5.08 18.66-1.46 19.06-1.3l-1.44 3.73c-.08-.03-8.31-3.09-15.7 1.08-5.81 3.28-9.68 10.11-11.52 20.32Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M52.4304 217.61c-.71 0-1.44-.15-2.12-.48-2.5-1.17-3.57-4.15-2.4-6.65l14.51-30.9c1.17-2.5 4.15-3.57 6.65-2.4s3.57 4.15 2.4 6.65l-14.51 30.9c-.85 1.81-2.65 2.88-4.53 2.88ZM134.58 37.11l58.03 60.29c5.47 5.68 1.2 15.12-6.67 14.78l-85.01-3.72 33.65-71.35Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M184.82 100.66c-.39 0-.79-.15-1.08-.46l-49.57-51.59c-.57-.6-.55-1.55.04-2.12.6-.57 1.54-.56 2.12.04l49.57 51.59c.57.6.55 1.55-.04 2.12-.29.28-.67.42-1.04.42Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,27 +2,31 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramFeedback = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramFeedback = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m114.24 60.39-26.41 33.4 3.46 2.32 3.8 3.66 3.27 5.19v3.94l-4 2.71-4.08-.07 3.06 1.9 1.02 3.28-1.13 2.72-2.95 1.31s-.26 1.11-.34 1.41c-.08.3.98 3.38.98 3.38l-1.46 7.32-2.53 2.93-3.67.83-6.06-1.24-5.09-2.47-4.9-4.58L56.9 140.2l-.9 47.91 45.66-17.42 35.63-52.16-1.69-1.46-9.46-5.56-10.25-4.39-6.4-8.19.78-5.97 6.21-6.99 8.99-1.87 14.31 3.67 9.85 7.83 3.79-5.06c8.42-11.23 5.8-27.21-5.75-35.18-10.72-7.4-25.35-5.2-33.43 5.02v.01ZM71.81 178.11c-3.15-9.61-12.77-8.86-12.77-8.86l1.01-24.84c20.88-1.35 36.99 23.48 36.99 23.48L71.81 178.1v.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M100.22 160.11c-.3102 0-.6202-.09-.8902-.29-.67-.49-.81-1.43-.32-2.1l32.2002-43.91c.49-.67 1.43-.81 2.1-.32.67.49.81 1.43.32 2.1l-32.2 43.91c-.29.4-.75.61-1.21.61ZM145.19 93.58c-.33 0-.66-.11-.94-.33-.65-.52-.75-1.46-.23-2.11.04-.05 3.76-4.75 5.46-10.99 2.21-8.1.11-14.91-6.25-20.25-.63-.53-.72-1.48-.18-2.11.53-.63 1.48-.72 2.11-.18 17.49 14.69 1.37 35.21 1.2 35.42-.3.37-.73.56-1.17.56v-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M91.7298 113.89h-.32c-9.06-.16-19.97-8-23.82-17.13-2.57-6.1-1.66-11.94 2.57-16.43 3.23-3.43 7.03-5.21 11.29-5.27h.25c8.78 0 16.25 7.33 16.56 7.64l-2.82 2.83c-.07-.07-6.63-6.48-13.74-6.48h-.2c-3.17.06-5.93 1.37-8.42 4.02-3.94 4.19-3.15 8.91-1.79 12.13 3.24 7.69 12.68 14.56 20.2 14.69 2.03.03 4.5-.33 4.84-2.28.62-3.53-4.83-11.05-14.45-14.33l1.29-3.79c10.25 3.5 18.2402 12.29 17.1002 18.81-.3002 1.69-1.7202 5.59-8.5302 5.59h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M83.8496 123.72c-5.34 0-14.79-1.83-21.61-13.29-4.24-7.12-5.27-12.63-3.06-16.37 2.66-4.52 8.79-4.38 9.04-4.38l-.12 4 .06-2-.05 2s-4.05-.06-5.49 2.42c-1.36 2.33-.27 6.69 3.06 12.28 3.88 6.52 9.06 10.27 15.4 11.15 5.72.79 10.19-1.09 11.09-1.77.22-.53.3-1.38.02-2.24-.19-.58-.62-1.37-1.6-1.83l1.72-3.61c1.76.84 3.07 2.33 3.68 4.2.62 1.89.48 3.96-.38 5.54-1.08 2.01-6.24 3.79-11.27 3.9h-.5.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M83.3394 138.63c-1.97 0-4.24-.45-6.8-1.35-19.8-6.99-14.57-28.16-14.52-28.37l3.87 1s-1.15 4.64-.19 9.85c1.25 6.72 5.34 11.35 12.16 13.76 2.94 1.04 6.85 1.89 8.78.04 2.69-2.56 1.36-9.65.68-11.93l3.83-1.15c.34 1.14 3.2 11.25-1.75 15.97-1.53 1.46-3.56 2.19-6.08 2.19l.02-.01ZM166.88 178.05c-10.96-1.06-23.28-5.82-36.6-14.16-9.87-6.17-16.45-11.96-16.73-12.2l2.65-3c.26.23 26.34 22.99 51.07 25.38l-.38 3.98h-.01ZM136.97 125.59l-3.54-1.85c.02-.05.91-1.93-.13-4.43-1.01-2.44-4.08-5.98-12.92-9.02-8.06-2.77-12.68-6.39-13.73-10.76-1-4.14 1.61-7.31 2.11-7.87 13.8-17.12 31.88-4.55 32.06-4.42.03.02.06.04.08.06 21.25 16.88 43.78 20.01 44.01 20.04l-.52 3.97c-.96-.13-23.83-3.3-45.93-20.83-1.01-.7-15.37-10.26-26.62 3.74-.04.05-.08.09-.12.13-.06.07-1.77 1.94-1.18 4.28.72 2.86 4.67 5.65 11.14 7.88 8.33 2.86 13.5 6.71 15.38 11.42 1.68 4.22 0 7.52-.08 7.66h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );

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

@@ -2,31 +2,31 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramHelp = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramHelp = ({ size, colorValues, ...props }: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M220.46 181.2c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.59-9.25-.71-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.05-.07-2.06.29-2.85.99-.81.72-1.28 1.72-1.32 2.81-.09 2.07 1.39 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.75 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.55-7.08-4.1-6.9-8.25.1-2.17 1.04-4.16 2.65-5.61 1.59-1.43 3.64-2.14 5.77-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.37 1.07-10.42 1.36-2.31 5.61-7.37 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55v.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M140.22 166.97c-2.3-1.73-10.9-2.99-22.99-3.37-5.84-.18-10.47-5.09-10.32-10.94.11-4.48 3.04-8.44 7.28-9.87l2.11-.71 1.27 3.79-2.11.71c-2.66.89-4.49 3.37-4.55 6.17-.09 3.66 2.8 6.73 6.45 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M180.309 226.14c-16.99-25.12-39-41.13-65.42-47.6l-.5-.12c-2.85-.7-5.15-2.77-6.15-5.53-1.04-2.86-.5-6.12 1.4-8.5l3.29-4.1 3.12 2.5-3.29 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8 2.63 3.35 3.02l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24-.01-.02ZM160.152 143.719l-2.585 3.053 8.021 6.792 2.585-3.052-8.021-6.793Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M168.409 172.4c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.37 1.58 25.42l-3.46 2-.01.01ZM147.883 144.507l-12.574 27.227 3.631 1.677 12.575-27.227-3.632-1.677Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M76.52 132.04c32.872 0 59.52-26.648 59.52-59.52S109.392 13 76.52 13 17 39.648 17 72.52s26.648 59.52 59.52 59.52Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M73.4798 108.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.64ZM73.24 92.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-.71-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>
 );

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

@@ -2,53 +2,57 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramITWallet = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramITWallet = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M8 47c0-8.8366 7.1634-16 16-16h71c8.837 0 16 7.1634 16 16v151c0 8.837-7.163 16-16 16H24c-8.8366 0-16-7.163-16-16V47Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12 50.9292C12 42.1317 19.1317 35 27.9292 35h64.1416C100.868 35 108 42.1317 108 50.9292V195.071c0 8.797-7.132 15.929-15.9292 15.929H27.9292C19.1317 211 12 203.868 12 195.071V50.9292ZM27.9292 37C20.2363 37 14 43.2363 14 50.9292V195.071C14 202.764 20.2363 209 27.9292 209h64.1416C99.7637 209 106 202.764 106 195.071V50.9292C106 43.2363 99.7637 37 92.0708 37H27.9292Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M38 45c0-1.6569 1.3431-3 3-3h37c1.6569 0 3 1.3431 3 3s-1.3431 3-3 3H41c-1.6569 0-3-1.3431-3-3Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M20.1953 82.8647c0-5.1408 4.1675-9.3083 9.3083-9.3083h61.9925c5.1408 0 9.3079 4.1675 9.3079 9.3083v34.5113c0 5.141-4.1671 9.308-9.3079 9.308H29.5036c-5.1408 0-9.3083-4.167-9.3083-9.308V82.8647Zm9.3083-7.3083c-4.0363 0-7.3083 3.272-7.3083 7.3083v34.5113c0 4.036 3.272 7.308 7.3083 7.308h61.9925c4.0362 0 7.3082-3.272 7.3082-7.308V82.8647c0-4.0363-3.272-7.3083-7.3082-7.3083H29.5036Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M99.6784 114.82H21.0693v-2h78.6091v2ZM88.1746 80.0301c-3.3303 0-6.0301 2.6997-6.0301 6.0301 0 3.3303 2.6998 6.03 6.0301 6.03s6.0301-2.6997 6.0301-6.03c0-3.3304-2.6998-6.0301-6.0301-6.0301Zm-8.0301 6.0301c0-4.4349 3.5952-8.0301 8.0301-8.0301 4.4349 0 8.0301 3.5952 8.0301 8.0301 0 4.4349-3.5952 8.03-8.0301 8.03-4.4349 0-8.0301-3.5951-8.0301-8.03ZM48.9111 84.5038c0 .5522-.4477 1-1 1h-19.812c-.5523 0-1-.4478-1-1 0-.5523.4477-1 1-1h19.812c.5523 0 1 .4477 1 1ZM48.9111 88.9774c0 .5523-.4477 1-1 1h-19.812c-.5523 0-1-.4477-1-1 0-.5522.4477-1 1-1h19.812c.5523 0 1 .4478 1 1ZM51.1054 69.4472c-.494.247-1.0947.0468-1.3417-.4472l-5.1055-10.2111c-.247-.494-.0468-1.0947.4472-1.3417.4939-.247 1.0946-.0467 1.3416.4472l5.1056 10.2112c.247.494.0467 1.0946-.4472 1.3416ZM67.122 68.5211c-.4848-.2644-.6635-.8718-.399-1.3567l5.0423-9.2442c.2645-.4849.8719-.6635 1.3567-.3991.4849.2645.6635.8719.3991 1.3568l-5.0423 9.2442c-.2645.4849-.8719.6635-1.3568.399ZM52.942 132.336c.5202.186.7912.758.6055 1.278l-4.3274 12.117c-.1857.52-.7579.791-1.2781.605-.5201-.185-.7911-.758-.6054-1.278l4.3274-12.116c.1857-.52.7579-.791 1.278-.606ZM68.9084 131.581c.5015-.232 1.0956-.013 1.3271.489l5.1618 11.184c.2315.501.0126 1.095-.4889 1.327-.5014.231-1.0955.012-1.327-.489l-5.1619-11.184c-.2314-.502-.0125-1.096.4889-1.327Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="m230.646 170.292-4-.03c.15-22.75-14.42-47.52-23.12-60.26-3.67-5.38-8.74-9.39-14.65-11.6195-22.53-8.49-48.66-4.9-58.85-2.97-3.68.7-6.26 3.91-6.01 7.4695.08 1.19.34 4.81 7.74 6.01 15.25 2.46 28.76-.31 28.9-.34l.82 3.92c-.58.12-14.38 2.95-30.36.38-8.71-1.4-10.84-6.04-11.09-9.68-.39-5.5795 3.59-10.6095 9.26-11.6795 10.52-2 37.53-5.69 61 3.15 6.69 2.52 12.41 7.0495 16.54 13.1095 8.96 13.13 23.97 38.71 23.82 62.54Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M166.026 134.772c-.25 0-.5-.01-.74-.04-2.86-.28-4.82-2.19-5.36-5.23-.75-4.24 1.3-10.09 6.11-17.36 3.44-5.21 7.03-9.24 7.18-9.41l2.98 2.67c-3.83 4.28-13.5 16.84-12.33 23.41.28 1.59 1.04 1.88 1.81 1.95 4.02.4 12.54-5.66 14.87-11.62l3.72 1.46c-2.77 7.07-12.05 14.18-18.25 14.18l.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M186.457 135.552c-.76-3.95-6.5-7.16-8.65-8.07l1.55-3.69c.4.17 9.71 4.14 11.03 11l-3.93.75v.01ZM152.287 133.012c-3.2 0-6.37-.78-8.24-3.29-2.41-3.24-3.22-8.18-2-12.31.99-3.35 3.17-5.81 6.13-6.91.74-.28 1.53-.47 2.35-.57l.5 3.97c-.52.06-1.01.18-1.46.35-2.25.84-3.25 2.8-3.69 4.29-.86 2.93-.3 6.54 1.37 8.78 2.42 3.25 11.11.99 13.96-.06l1.38 3.75c-.84.31-5.61 1.99-10.31 1.99l.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M165.897 147.652c-2.27 0-4.46-.51-6.55-1.52-8.18-3.97-11.68-14.35-11.83-14.79l3.8-1.25c.03.09 3.14 9.23 9.79 12.45 2.91 1.41 6.03 1.48 9.51.21 3.5-1.27 5.57-2.79 5.68-4.17.14-1.9-3.15-4.62-5.42-5.85l1.9-3.52c.81.44 7.89 4.42 7.51 9.66-.23 3.15-3.02 5.72-8.3 7.64-2.08.76-4.12 1.14-6.09 1.14Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M186.956 187.162c-12.94-17.55-15.65-42.07-15.76-43.1l3.98-.42c.03.24 2.71 24.48 15 41.15l-3.22 2.37Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );

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

@@ -2,39 +2,43 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramIdentity = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramIdentity = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m141.77 150.53-6.78-5.15-5.25-8.14-4.4-2.54-2.43-3.7.41-5.76 1.29-4.15-10.77 8.77-12.07 5.45-6.83.88-2.61-4.45 3.59-7.1 10.84-8.99 13.26-8.03-2.57-6.63 3.1-7.02 14.34-2.62h10.44V38.46c0-3.02-2.44-5.46-5.46-5.46H26.46C23.44 33 21 35.44 21 38.46V201c0 3.02 2.44 5.46 5.46 5.46h113.42c3.02 0 5.46-2.44 5.46-5.46v-50.47h-3.57Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M83.1695 98.1c-11.8 0-21.4-9.6-21.4-21.4 0-11.8 9.6-21.4 21.4-21.4 11.8 0 21.4005 9.6 21.4005 21.4 0 11.8-9.6005 21.4-21.4005 21.4Zm0-39.79c-10.14 0-18.4 8.25-18.4 18.4 0 10.15 8.25 18.4 18.4 18.4 10.15 0 18.4005-8.25 18.4005-18.4 0-10.15-8.2505-18.4-18.4005-18.4Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M52.9199 128.34c-.83 0-1.5-.67-1.5-1.5 0-17.5 14.24-31.75 31.75-31.75 11.53 0 21.3501 5.44 26.9301 14.94.42.71.18 1.63-.53 2.05-.72.42-1.63.18-2.05-.53-5.02-8.55-13.9001-13.46-24.3401-13.46-15.85 0-28.75 12.9-28.75 28.75 0 .83-.67 1.5-1.5 1.5h-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M97.6999 138.17c-2.49 0-4.81-1.24-6.19-3.42-1.69-2.66-1.54-6.01.4-8.52C103.41 111.3 134 98.56 135.3 98.03l.27-.09c42.2-10.7 61.59-21.58 61.78-21.69l1.98 3.47c-.79.45-19.92 11.22-62.63 22.06-2.18.92-31.13 13.28-41.6201 26.89-1.09 1.41-.81 2.96-.19 3.93.61.96 1.88 1.86 3.61 1.48 8.9801-2 22.0001-7.96 33.0201-24.95l3.36 2.17c-11.75 18.13-25.79 24.51-35.5001 26.68-.56.12-1.11.18-1.66.18l-.02.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M127.91 137.26c-2.88-.57-4.99-1.99-6.25-4.22-2.57-4.52-.44-10.68-.34-10.94l3.77 1.34-1.88-.67 1.89.66c-.46 1.3-1.33 5.21.06 7.64.68 1.18 1.84 1.92 3.55 2.26l-.78 3.92-.02.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M145.83 153.23c-4.25 0-9.23-2.03-13.89-6.89-3.67-3.83-5.16-7.83-4.44-11.91 1.47-8.28 11.79-13.42 12.23-13.63l1.76 3.59c-.09.04-8.94 4.47-10.05 10.75-.48 2.74.66 5.58 3.39 8.43 6.02 6.28 12.57 6.79 15.68 4.07 2.55-2.23 2.19-6.2-.92-10.1l3.13-2.49c5.19 6.5 3.95 12.52.42 15.61-1.87 1.64-4.42 2.58-7.31 2.58v-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M154.04 138.88c-6.55 0-10.76-.44-11.05-.48l.43-3.98c.47.05 46.78 4.75 73.2-18.54l2.65 3c-8.03 7.08-23.01 16.14-48.75 19.07-6.27.71-11.94.93-16.48.93Zm-33.08-30.97c-.65-.46-6.32-4.62-6.02-9.54.15-2.5 1.72-4.57 4.67-6.16 9.43-5.08 39.97-1.85 41.27-1.71l-.43 3.98c-8.48-.92-32.02-2.48-38.94 1.25-1.64.89-2.51 1.86-2.57 2.88-.14 2.3 3.17 5.21 4.34 6.04l-2.31 3.26h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M125.35 156.14H42.9095c-.91 0-1.64-.73-1.64-1.64 0-.91.73-1.64 1.64-1.64H125.35c.91 0 1.64.73 1.64 1.64 0 .91-.73 1.64-1.64 1.64Zm0 12.43H42.9095c-.91 0-1.64-.73-1.64-1.64 0-.91.73-1.64 1.64-1.64H125.35c.91 0 1.64.73 1.64 1.64 0 .91-.73 1.64-1.64 1.64Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,39 +2,43 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramIdentityAdd = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramIdentityAdd = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M133.44 75.65c-16.61 0-30.08-13.47-30.08-30.08 0-2.1.22-4.14.62-6.12H31.59c-5.3-.01-9.59 4.28-9.59 9.58v147.34c0 5.29 4.29 9.59 9.59 9.59h93.93c5.29 0 9.59-4.29 9.59-9.59v-33.63l-1.88-.95-4.62-5.91.72-4.64-2.31-3.09s-3.93-5.85-3.82-6.3c.11-.44 1.56-6.44 1.56-6.44l-3.55-4.25-9.39-1.1-9.28-4.88-2.16-6.52s5.62-2.78 6.58-2.85c.96-.07 13.14-.72 13.14-.72l15.01.62v-40.1c-.55.03-1.1.05-1.66.05l-.01-.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M77.6902 107.37c-10.59 0-19.2-8.61-19.2-19.2s8.61-19.2 19.2-19.2 19.2 8.61 19.2 19.2-8.61 19.2-19.2 19.2Zm0-35.71c-9.1 0-16.51 7.41-16.51 16.51 0 9.1 7.41 16.51 16.51 16.51 9.1 0 16.51-7.41 16.51-16.51 0-9.1-7.41-16.51-16.51-16.51Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M50.5502 134.51c-.74 0-1.35-.6-1.35-1.35 0-15.71 12.78-28.49 28.49-28.49 10.35 0 19.16 4.89 24.1698 13.41.38.64.16 1.47-.48 1.84-.64.38-1.4698.16-1.8398-.48-4.51-7.68-12.47-12.08-21.84-12.08-14.23 0-25.8 11.57-25.8 25.8 0 .74-.6 1.35-1.35 1.35ZM115.55 159.46H41.5598c-.81 0-1.47-.66-1.47-1.47 0-.81.66-1.47 1.47-1.47H115.55c.81 0 1.47.66 1.47 1.47 0 .81-.66 1.47-1.47 1.47ZM115.55 170.61H41.5598c-.81 0-1.47-.66-1.47-1.47 0-.81.66-1.47 1.47-1.47H115.55c.81 0 1.47.66 1.47 1.47 0 .81-.66 1.47-1.47 1.47Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M145.69 154.12h-.09c-13.77-.08-21.67-2.85-24.15-8.48-1.78-4.04-.1-8.38 1.61-11.3-15.4-.05-24.0198-5.81-24.6498-11.96-.34-3.3 1.8698-7.55 9.2098-8.64 11.49-1.7 34.5.28 44 1.23-3.89-7.63-6.04-21.08-3.03-27.96 1.41-3.21 3.89-4.98 7.01-4.98 7.83 0 14.93 16.71 19.5 30.72.54 1.66 1.67 3.02 3.19 3.85 4.76 2.59 18.84 4.24 39.56 2.09l.41 3.98c-18.97 1.97-35.41.97-41.89-2.56-2.42-1.32-4.22-3.49-5.08-6.12-5.46-16.72-11.78-27.96-15.7-27.97-.95 0-2.33.27-3.34 2.58-3 6.84.41 22.66 4.82 27.43.57.61.69 1.52.31 2.26-.38.75-1.19 1.17-2.01 1.08-.33-.04-33.3-3.75-47.17-1.69-3.75.55-6.03 2.23-5.82 4.27.4 3.88 8.48 9.19 24.51 8.26.8-.05 1.57.4 1.92 1.13.35.73.23 1.6-.32 2.2-1.49 1.67-5.01 6.8-3.38 10.46 1.71 3.86 9 6.02 20.52 6.08h.1c3.34 0 9.06-.92 10.62-2.39 1.09-1.03 1.7-2.92.16-5.12-1.4-2-1.85-1.99-4.81-1.89-.35.01-.72.03-1.12.04l-.1-4c.38 0 .74-.02 1.08-.03 3.24-.12 5.58-.2 8.23 3.59 2.81 4.02 1.68 8.08-.68 10.32-3.01 2.86-10.78 3.48-13.4 3.48l-.02.04Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M148.65 168.29c-4.11 0-7.61-.53-8.75-.92-6.91-2.37-11.02-5.72-12.23-9.96-1.44-5.09 1.97-9.32 2.11-9.5l3.1 2.53s-2.24 2.84-1.35 5.91c.83 2.85 4.17 5.36 9.67 7.24 1.46.5 10.68 1.55 16.73-.6 1.75-.62 3.03-2.06 3.41-3.85.38-1.78-.15-3.53-1.48-4.8-1-.96-2.48-2.08-3.98-1.96l-.33-3.99c2.38-.2 4.76.83 7.08 3.06 2.31 2.22 3.29 5.41 2.61 8.53-.68 3.16-2.92 5.69-5.98 6.78-3.27 1.16-7.16 1.54-10.62 1.54l.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M190.28 170.42c-20.19 0-31-3.71-31.62-3.93l1.33-3.77-.67 1.89.66-1.89c.2.07 20.68 7.04 57.79 1.59l.58 3.96c-10.77 1.58-20.15 2.15-28.08 2.15h.01ZM128.19 134.25c-.78 0-1.2-.02-1.27-.02l.17-4c.08 0 8.16.3 25.54-2.16l.56 3.96c-14.06 1.99-22.08 2.22-25 2.22Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M125.89 65.44c-.81 0-1.47-.66-1.47-1.47v-28.5c0-.81.66-1.47 1.47-1.47.81 0 1.47.66 1.47 1.47v28.5c0 .81-.66 1.47-1.47 1.47Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M140.14 51.19h-28.5c-.81 0-1.47-.66-1.47-1.47 0-.81.66-1.47 1.47-1.47h28.5c.81 0 1.47.66 1.47 1.47 0 .81-.66 1.47-1.47 1.47Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );