@factorialco/f0-react-native 0.24.1 → 0.26.0

package/src/components/Avatars/IconAvatar/__snapshots__/index.spec.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`IconAvatar Snapshot - different sizes 1`] = `
 <View
-  className="flex aspect-square items-center justify-center border border-solid border-f1-border-secondary h-6 w-6 rounded-sm"
+  className="flex aspect-square items-center justify-center border border-solid border-f0-border-secondary h-6 w-6 rounded-sm"
 >
   <RNSVGSvgView
     align="xMidYMid"
     bbHeight="100%"
     bbWidth="100%"
-    className="shrink-0 w-4 h-4 stroke-sm text-f1-foreground-secondary"
+    className="shrink-0 w-4 h-4 stroke-sm text-f0-foreground-secondary"
     fill="none"
     focusable={false}
     meetOrSlice={0}
@@ -90,13 +90,13 @@ exports[`IconAvatar Snapshot - different sizes 1`] = `
 
 exports[`IconAvatar Snapshot - different sizes 2`] = `
 <View
-  className="flex aspect-square items-center justify-center border border-solid border-f1-border-secondary h-9 w-9 rounded-md"
+  className="flex aspect-square items-center justify-center border border-solid border-f0-border-secondary h-9 w-9 rounded-md"
 >
   <RNSVGSvgView
     align="xMidYMid"
     bbHeight="100%"
     bbWidth="100%"
-    className="shrink-0 w-5 h-5 stroke-md text-f1-foreground-secondary"
+    className="shrink-0 w-5 h-5 stroke-md text-f0-foreground-secondary"
     fill="none"
     focusable={false}
     meetOrSlice={0}
@@ -178,13 +178,13 @@ exports[`IconAvatar Snapshot - different sizes 2`] = `
 
 exports[`IconAvatar Snapshot - different sizes 3`] = `
 <View
-  className="flex aspect-square items-center justify-center border border-solid border-f1-border-secondary h-10 w-10 rounded-lg"
+  className="flex aspect-square items-center justify-center border border-solid border-f0-border-secondary h-10 w-10 rounded-lg"
 >
   <RNSVGSvgView
     align="xMidYMid"
     bbHeight="100%"
     bbWidth="100%"
-    className="shrink-0 w-6 h-6 stroke-lg text-f1-foreground-secondary"
+    className="shrink-0 w-6 h-6 stroke-lg text-f0-foreground-secondary"
     fill="none"
     focusable={false}
     meetOrSlice={0}

package/src/components/Avatars/IconAvatar/index.tsx

@@ -19,12 +19,12 @@ export const IconAvatar = ({ icon, size = "md", className }: Props) => {
   return (
     <View
       className={cn(
-        "flex aspect-square items-center justify-center border border-solid border-f1-border-secondary",
+        "flex aspect-square items-center justify-center border border-solid border-f0-border-secondary",
         sizes[size],
         className
       )}
     >
-      <Icon icon={icon} size={size} className="text-f1-foreground-secondary" />
+      <Icon icon={icon} size={size} className="text-f0-foreground-secondary" />
     </View>
   )
 }

package/src/components/Avatars/ModuleAvatar/index.tsx

@@ -37,7 +37,7 @@ const iconContainerVariants = tv({
 })
 
 const iconSizeVariants = tv({
-  base: "relative text-f1-foreground-inverse drop-shadow",
+  base: "relative text-f0-foreground-inverse drop-shadow",
   variants: {
     size: {
       sm: "h-[14px] w-[14px]",

package/src/components/Avatars/PersonAvatar/__snapshots__/index.spec.tsx.snap

@@ -14,7 +14,7 @@ exports[`PersonAvatar Snapshot 1`] = `
       role="img"
     >
       <Text
-        className="text-f1-foreground-inverse/90 text-md"
+        className="text-f0-foreground-inverse/90 text-md"
         data-a11y-color-contrast-ignore={true}
       >
         DM

package/src/components/Avatars/TeamAvatar/__snapshots__/index.spec.tsx.snap

@@ -14,7 +14,7 @@ exports[`TeamAvatar Snapshot 1`] = `
       role="img"
     >
       <Text
-        className="text-f1-foreground-inverse/90 text-md"
+        className="text-f0-foreground-inverse/90 text-md"
         data-a11y-color-contrast-ignore={true}
       >
         F0

package/src/components/Badge/index.tsx

@@ -6,11 +6,11 @@ const badgeVariants = tv({
   base: "flex shrink-0 items-center justify-center rounded-full",
   variants: {
     type: {
-      neutral: "bg-transparent text-f1-icon",
-      highlight: "text-f1-special-highlight",
-      positive: "bg-f1-background-positive-bold text-f1-foreground-inverse",
-      critical: "bg-f1-icon-critical text-f1-foreground-inverse",
-      warning: "bg-f1-background-warning-bold text-f1-foreground-inverse",
+      neutral: "bg-transparent text-f0-icon",
+      highlight: "text-f0-special-highlight",
+      positive: "bg-f0-background-positive-bold text-f0-foreground-inverse",
+      critical: "bg-f0-icon-critical text-f0-foreground-inverse",
+      warning: "bg-f0-background-warning-bold text-f0-foreground-inverse",
     },
     size: {
       xs: "h-2.5 w-2.5",

package/src/components/Button/__snapshots__/index.spec.tsx.snap

@@ -25,7 +25,7 @@ exports[`Button Snapshot - critical variant 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-secondary border border-f1-border h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-secondary border border-f0-border h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -39,7 +39,7 @@ exports[`Button Snapshot - critical variant 1`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-critical"
+      className="text-base font-medium text-f0-foreground-critical"
     >
       Test Button
     </Text>
@@ -72,7 +72,7 @@ exports[`Button Snapshot - default button 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -86,7 +86,7 @@ exports[`Button Snapshot - default button 1`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       Test Button
     </Text>
@@ -119,7 +119,7 @@ exports[`Button Snapshot - different sizes 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-6 rounded-sm gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-6 rounded-sm gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -133,7 +133,7 @@ exports[`Button Snapshot - different sizes 1`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       Test Button
     </Text>
@@ -166,7 +166,7 @@ exports[`Button Snapshot - different sizes 2`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -180,7 +180,7 @@ exports[`Button Snapshot - different sizes 2`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       Test Button
     </Text>
@@ -213,7 +213,7 @@ exports[`Button Snapshot - different sizes 3`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-10 rounded-md gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-10 rounded-md gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -227,7 +227,7 @@ exports[`Button Snapshot - different sizes 3`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       Test Button
     </Text>
@@ -260,7 +260,7 @@ exports[`Button Snapshot - disabled state 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded opacity-50 gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-8 rounded opacity-50 gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -274,7 +274,7 @@ exports[`Button Snapshot - disabled state 1`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       Test Button
     </Text>
@@ -307,7 +307,7 @@ exports[`Button Snapshot - loading state 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded opacity-50 gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-8 rounded opacity-50 gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -321,7 +321,7 @@ exports[`Button Snapshot - loading state 1`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       Test Button
     </Text>
@@ -354,7 +354,7 @@ exports[`Button Snapshot - outline variant 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-inverse-secondary border border-f1-border h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-inverse-secondary border border-f0-border h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -368,7 +368,7 @@ exports[`Button Snapshot - outline variant 1`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground"
+      className="text-base font-medium text-f0-foreground"
     >
       Test Button
     </Text>
@@ -401,7 +401,7 @@ exports[`Button Snapshot - round button with hidden label 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded aspect-square p-0"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-8 rounded aspect-square p-0"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -442,7 +442,7 @@ exports[`Button Snapshot - with emoji 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -456,12 +456,12 @@ exports[`Button Snapshot - with emoji 1`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       👋
     </Text>
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       Test Button
     </Text>
@@ -494,7 +494,7 @@ exports[`Button Snapshot - with icon 1`] = `
       }
     }
     accessible={true}
-    className="flex-row items-center justify-center border-none grow-0 bg-f1-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
+    className="flex-row items-center justify-center border-none grow-0 bg-f0-background-accent-bold h-8 rounded gap-1 px-2 sm:px-3 lg:px-4"
     collapsable={false}
     focusable={true}
     onBlur={[Function]}
@@ -508,7 +508,7 @@ exports[`Button Snapshot - with icon 1`] = `
     onStartShouldSetResponder={[Function]}
   >
     <Text
-      className="text-base font-medium text-f1-foreground-inverse"
+      className="text-base font-medium text-f0-foreground-inverse"
     >
       Test Button
     </Text>

package/src/components/Button/index.tsx

@@ -22,12 +22,12 @@ const buttonVariants = tv({
   base: "flex-row items-center justify-center rounded border-none grow-0",
   variants: {
     variant: {
-      default: "bg-f1-background-accent-bold",
-      outline: "bg-f1-background-inverse-secondary border border-f1-border",
-      neutral: "bg-f1-background-secondary",
-      critical: "bg-f1-background-secondary border border-f1-border",
+      default: "bg-f0-background-accent-bold",
+      outline: "bg-f0-background-inverse-secondary border border-f0-border",
+      neutral: "bg-f0-background-secondary",
+      critical: "bg-f0-background-secondary border border-f0-border",
       ghost: "bg-transparent",
-      promote: "bg-f1-background-promote border border-f1-border-promote",
+      promote: "bg-f0-background-promote border border-f0-border-promote",
     },
     size: {
       sm: "h-6 rounded-sm",
@@ -55,12 +55,12 @@ const pressedVariants = tv({
   base: "",
   variants: {
     variant: {
-      default: "bg-f1-background-accent-bold-hover",
-      outline: "bg-f1-background-tertiary border-opacity-70",
-      neutral: "bg-f1-background-secondary-hover",
-      critical: "bg-f1-background-critical-bold border-transparent",
-      ghost: "bg-f1-background-secondary-hover",
-      promote: "bg-f1-background-promote-hover",
+      default: "bg-f0-background-accent-bold-hover",
+      outline: "bg-f0-background-tertiary border-opacity-70",
+      neutral: "bg-f0-background-secondary-hover",
+      critical: "bg-f0-background-critical-bold border-transparent",
+      ghost: "bg-f0-background-secondary-hover",
+      promote: "bg-f0-background-promote-hover",
     },
   },
   defaultVariants: {
@@ -71,41 +71,41 @@ const pressedVariants = tv({
 const getIconColor = (variant: ButtonVariant, isPressed: boolean) => {
   switch (variant) {
     case "default":
-      return "text-f1-icon-inverse"
+      return "text-f0-icon-inverse"
     case "critical":
-      return isPressed ? "text-f1-icon-inverse" : "text-f1-icon-critical-bold"
+      return isPressed ? "text-f0-icon-inverse" : "text-f0-icon-critical-bold"
     default:
-      return "text-f1-icon"
+      return "text-f0-icon"
   }
 }
 
 const getIconOnlyColor = (variant: ButtonVariant, isPressed: boolean) => {
   switch (variant) {
     case "critical":
-      return isPressed ? "text-f1-icon-inverse" : "text-f1-icon-critical-bold"
+      return isPressed ? "text-f0-icon-inverse" : "text-f0-icon-critical-bold"
     case "default":
-      return "text-f1-icon-inverse"
+      return "text-f0-icon-inverse"
     case "outline":
     case "neutral":
     case "ghost":
     case "promote":
     default:
-      return "text-f1-icon-bold"
+      return "text-f0-icon-bold"
   }
 }
 
 const getTextColorClass = (variant: ButtonVariant, isPressed: boolean) => {
   if (isPressed && variant === "critical") {
-    return "text-f1-foreground-inverse"
+    return "text-f0-foreground-inverse"
   }
 
   switch (variant) {
     case "default":
-      return "text-f1-foreground-inverse"
+      return "text-f0-foreground-inverse"
     case "critical":
-      return "text-f1-foreground-critical"
+      return "text-f0-foreground-critical"
     default:
-      return "text-f1-foreground"
+      return "text-f0-foreground"
   }
 }
 
@@ -226,7 +226,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
       {showBadge && variant === "outline" && (
         <View
           accessibilityLabel="Notification Badge"
-          className="absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-f1-icon-accent"
+          className="absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-f0-icon-accent"
         />
       )}
     </View>

package/src/components/Counter/__snapshots__/index.spec.tsx.snap

@@ -5,10 +5,10 @@ exports[`Counter Snapshot 1`] = `
   className="flex items-start"
 >
   <View
-    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f0-background-secondary border border-f0-border"
   >
     <Text
-      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f0-foreground"
     >
       42
     </Text>
@@ -21,10 +21,10 @@ exports[`Counter Snapshot vairan bold types 1`] = `
   className="flex items-start"
 >
   <View
-    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-accent-bold"
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f0-background-accent-bold"
   >
     <Text
-      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground-inverse"
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f0-foreground-inverse"
     >
       42
     </Text>
@@ -37,10 +37,10 @@ exports[`Counter Snapshot vairan defauly types 1`] = `
   className="flex items-start"
 >
   <View
-    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f0-background-secondary border border-f0-border"
   >
     <Text
-      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f0-foreground"
     >
       42
     </Text>
@@ -53,10 +53,10 @@ exports[`Counter Snapshot vairan defauly types 2`] = `
   className="flex items-start"
 >
   <View
-    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f0-background-secondary border border-f0-border"
   >
     <Text
-      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f0-foreground"
     >
       42
     </Text>
@@ -69,10 +69,10 @@ exports[`Counter Snapshot vairan md size 1`] = `
   className="flex items-start"
 >
   <View
-    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-secondary border border-f1-border"
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f0-background-secondary border border-f0-border"
   >
     <Text
-      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground"
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f0-foreground"
     >
       42
     </Text>
@@ -85,10 +85,10 @@ exports[`Counter Snapshot vairan selected types 1`] = `
   className="flex items-start"
 >
   <View
-    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f1-background-selected-bold outline-f1-border-selected"
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-5 h-5 bg-f0-background-selected-bold outline-f0-border-selected"
   >
     <Text
-      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f1-foreground-inverse"
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap text-f0-foreground-inverse"
     >
       42
     </Text>
@@ -101,10 +101,10 @@ exports[`Counter Snapshot vairan sm size 1`] = `
   className="flex items-start"
 >
   <View
-    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-4 h-4 bg-f1-background-secondary border border-f1-border"
+    className="flex items-center justify-center rounded-xs grow-0 px-0.5 min-w-4 h-4 bg-f0-background-secondary border border-f0-border"
   >
     <Text
-      className="text-center text-sm font-medium tabular-nums whitespace-nowrap leading-none py-0.5 text-f1-foreground"
+      className="text-center text-sm font-medium tabular-nums whitespace-nowrap leading-none py-0.5 text-f0-foreground"
     >
       42
     </Text>

package/src/components/Counter/index.tsx

@@ -11,9 +11,9 @@ const counterContainerVariants = tv({
       sm: "min-w-4 h-4",
     },
     type: {
-      default: "bg-f1-background-secondary border border-f1-border",
-      selected: "bg-f1-background-selected-bold outline-f1-border-selected",
-      bold: "bg-f1-background-accent-bold",
+      default: "bg-f0-background-secondary border border-f0-border",
+      selected: "bg-f0-background-selected-bold outline-f0-border-selected",
+      bold: "bg-f0-background-accent-bold",
     },
   },
   defaultVariants: {
@@ -30,9 +30,9 @@ const counterTextVariants = tv({
       sm: "leading-none py-0.5",
     },
     type: {
-      default: "text-f1-foreground",
-      selected: "text-f1-foreground-inverse",
-      bold: "text-f1-foreground-inverse",
+      default: "text-f0-foreground",
+      selected: "text-f0-foreground-inverse",
+      bold: "text-f0-foreground-inverse",
     },
   },
   defaultVariants: {

package/src/components/ExampleComponent.tsx

@@ -15,8 +15,8 @@ export const ExampleComponent: React.FC<ExampleComponentProps> = ({
   text = "Hello World",
 }) => {
   return (
-    <View className="rounded-lg bg-f1-background p-4">
-      <Text className="text-base font-medium text-f1-foreground">{text}</Text>
+    <View className="rounded-lg bg-f0-background p-4">
+      <Text className="text-base font-medium text-f0-foreground">{text}</Text>
     </View>
   )
 }

package/src/components/Icon/README.md

@@ -32,7 +32,7 @@ The Icon component is designed to work with UniWind, allowing you to style icons
 
 ```tsx
 // Style using Tailwind CSS classes
-<Icon icon={AppIcons.Archive} className="text-f1-icon-secondary" />
+<Icon icon={AppIcons.Archive} className="text-f0-icon-secondary" />
 ```
 
 ## Available Icons

package/src/components/Navigation/PageHeader/__snapshots__/index.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`PageHeader Snapshot - renders correctly with multiple actions 1`] = `
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-3xl font-semibold text-f1-foreground"
+    className="text-3xl font-semibold text-f0-foreground"
   >
     Test Page Title
   </Text>
@@ -110,7 +110,7 @@ exports[`PageHeader Snapshot - renders correctly with one action 1`] = `
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-3xl font-semibold text-f1-foreground"
+    className="text-3xl font-semibold text-f0-foreground"
   >
     Test Page Title
   </Text>
@@ -169,7 +169,7 @@ exports[`PageHeader Snapshot - renders correctly with one action with a badge 1`
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-3xl font-semibold text-f1-foreground"
+    className="text-3xl font-semibold text-f0-foreground"
   >
     Test Page Title
   </Text>
@@ -231,7 +231,7 @@ exports[`PageHeader Snapshot - renders correctly with only a title 1`] = `
   className="flex-row items-center justify-between px-5 py-3"
 >
   <Text
-    className="text-3xl font-semibold text-f1-foreground"
+    className="text-3xl font-semibold text-f0-foreground"
   >
     Test Page Title
   </Text>

package/src/components/Navigation/PageHeader/index.tsx

@@ -36,7 +36,7 @@ const NotificationsAction = ({ label, onPress, showBadge }: ActionT) => {
 export const PageHeader = memo(({ title, actions }: Props) => {
   return (
     <View className="flex-row items-center justify-between px-5 py-3">
-      <Text className="text-3xl font-semibold text-f1-foreground">{title}</Text>
+      <Text className="text-3xl font-semibold text-f0-foreground">{title}</Text>
       <View className="flex-row gap-2">
         {actions?.map((action) => {
           switch (action.type) {