@factorialco/f0-react-native 0.25.0 → 0.27.0

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

@@ -2,7 +2,7 @@
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 1`] = `
 <View
-  className="w-6 h-6 rounded-sm flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
+  className="w-6 h-6 rounded-sm flex aspect-square items-center justify-center border border-solid border-f0-border-secondary bg-f0-background dark:bg-f0-background-inverse-secondary"
 >
   <Text
     className="text-xs"
@@ -14,7 +14,7 @@ exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 1`]
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 2`] = `
 <View
-  className="w-9 h-9 rounded-md flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
+  className="w-9 h-9 rounded-md flex aspect-square items-center justify-center border border-solid border-f0-border-secondary bg-f0-background dark:bg-f0-background-inverse-secondary"
 >
   <Text
     className="text-sm"
@@ -26,7 +26,7 @@ exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 2`]
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 3`] = `
 <View
-  className="w-10 h-10 rounded-lg flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
+  className="w-10 h-10 rounded-lg flex aspect-square items-center justify-center border border-solid border-f0-border-secondary bg-f0-background dark:bg-f0-background-inverse-secondary"
 >
   <Text
     className="text-md"

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

@@ -27,7 +27,7 @@ export const EmojiAvatar = ({ emoji, size = "md", className }: Props) => {
       className={cn(
         className,
         sizes[size],
-        "flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
+        "flex aspect-square items-center justify-center border border-solid border-f0-border-secondary bg-f0-background dark:bg-f0-background-inverse-secondary"
       )}
     >
       <EmojiImage emoji={emoji} size={emojiSize[size]} />

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

@@ -8,10 +8,10 @@ exports[`FileAvatar Snapshot - different file types 1`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-accent"
+        className="font-semibold text-sm text-f0-foreground-accent"
       >
         PDF
       </Text>
@@ -28,10 +28,10 @@ exports[`FileAvatar Snapshot - different file types 2`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-info"
+        className="font-semibold text-sm text-f0-foreground-info"
       >
         IMG
       </Text>
@@ -48,10 +48,10 @@ exports[`FileAvatar Snapshot - different file types 3`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-info"
+        className="font-semibold text-sm text-f0-foreground-info"
       >
         DOC
       </Text>
@@ -68,10 +68,10 @@ exports[`FileAvatar Snapshot - different file types 4`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-positive"
+        className="font-semibold text-sm text-f0-foreground-positive"
       >
         XLS
       </Text>
@@ -88,10 +88,10 @@ exports[`FileAvatar Snapshot - different file types 5`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-warning"
+        className="font-semibold text-sm text-f0-foreground-warning"
       >
         PPT
       </Text>
@@ -108,10 +108,10 @@ exports[`FileAvatar Snapshot - different file types 6`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-secondary"
+        className="font-semibold text-sm text-f0-foreground-secondary"
       >
         TXT
       </Text>
@@ -128,10 +128,10 @@ exports[`FileAvatar Snapshot - different file types 7`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-info"
+        className="font-semibold text-sm text-f0-foreground-info"
       >
         VID
       </Text>
@@ -148,10 +148,10 @@ exports[`FileAvatar Snapshot - different file types 8`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-accent"
+        className="font-semibold text-sm text-f0-foreground-accent"
       >
         AUD
       </Text>
@@ -168,10 +168,10 @@ exports[`FileAvatar Snapshot - different file types 9`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-warning"
+        className="font-semibold text-sm text-f0-foreground-warning"
       >
         ZIP
       </Text>
@@ -188,10 +188,10 @@ exports[`FileAvatar Snapshot - different file types 10`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-positive"
+        className="font-semibold text-sm text-f0-foreground-positive"
       >
         CSV
       </Text>
@@ -208,10 +208,10 @@ exports[`FileAvatar Snapshot - different file types 11`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-accent"
+        className="font-semibold text-sm text-f0-foreground-accent"
       >
         HTM
       </Text>
@@ -228,10 +228,10 @@ exports[`FileAvatar Snapshot - different file types 12`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground-secondary"
+        className="font-semibold text-sm text-f0-foreground-secondary"
       >
         MD
       </Text>
@@ -248,10 +248,10 @@ exports[`FileAvatar Snapshot - different file types 13`] = `
     className="h-fit w-fit"
   >
     <View
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f1-border-secondary bg-f1-background"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded border border-solid border-f0-border-secondary bg-f0-background"
     >
       <Text
-        className="font-semibold text-sm text-f1-foreground"
+        className="font-semibold text-sm text-f0-foreground"
       >
         FIL
       </Text>

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

@@ -93,14 +93,14 @@ export const FileAvatar = ({
         <Avatar
           size={size}
           className={cn(
-            "border border-solid border-f1-border-secondary bg-f1-background",
+            "border border-solid border-f0-border-secondary bg-f0-background",
             className
           )}
           {...props}
         >
           <Text
             className={cn(
-              "font-semibold text-f1-foreground-inverse/90",
+              "font-semibold text-f0-foreground-inverse/90",
               textSizes[size],
               fileColor
             )}

package/src/components/Avatars/FileAvatar/utils.ts

@@ -9,19 +9,19 @@ type FileLike = {
 }
 
 const FILE_TYPE_MAP: Record<string, FileTypeInfo> = {
-  pdf: { type: "PDF", color: "text-f1-foreground-accent" },
-  image: { type: "IMG", color: "text-f1-foreground-info" },
-  doc: { type: "DOC", color: "text-f1-foreground-info" },
-  excel: { type: "XLS", color: "text-f1-foreground-positive" },
-  ppt: { type: "PPT", color: "text-f1-foreground-warning" },
-  txt: { type: "TXT", color: "text-f1-foreground-secondary" },
-  video: { type: "VID", color: "text-f1-foreground-info" },
-  audio: { type: "AUD", color: "text-f1-foreground-accent" },
-  archive: { type: "ZIP", color: "text-f1-foreground-warning" },
-  csv: { type: "CSV", color: "text-f1-foreground-positive" },
-  html: { type: "HTML", color: "text-f1-foreground-accent" },
-  markdown: { type: "MD", color: "text-f1-foreground-secondary" },
-  default: { type: "FILE", color: "text-f1-foreground" },
+  pdf: { type: "PDF", color: "text-f0-foreground-accent" },
+  image: { type: "IMG", color: "text-f0-foreground-info" },
+  doc: { type: "DOC", color: "text-f0-foreground-info" },
+  excel: { type: "XLS", color: "text-f0-foreground-positive" },
+  ppt: { type: "PPT", color: "text-f0-foreground-warning" },
+  txt: { type: "TXT", color: "text-f0-foreground-secondary" },
+  video: { type: "VID", color: "text-f0-foreground-info" },
+  audio: { type: "AUD", color: "text-f0-foreground-accent" },
+  archive: { type: "ZIP", color: "text-f0-foreground-warning" },
+  csv: { type: "CSV", color: "text-f0-foreground-positive" },
+  html: { type: "HTML", color: "text-f0-foreground-accent" },
+  markdown: { type: "MD", color: "text-f0-foreground-secondary" },
+  default: { type: "FILE", color: "text-f0-foreground" },
 }
 
 const MIME_MATCH_MAP: Record<string, keyof typeof FILE_TYPE_MAP> = {

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>