@medway-ui/native 1.9.1 → 1.10.0

package/setup/tailwind.js

@@ -1,10 +1,18 @@
 const path = require('path');
 const { resolveMedwayUiPaths } = require('./monorepo');
 
+function resolveFromProject(request, projectRoot) {
+  return require.resolve(request, { paths: [projectRoot] });
+}
+
+// O jiti vem como dependência do tailwindcss, então nem sempre fica visível na raiz do app (pnpm).
+function resolveJiti(projectRoot) {
+  const tailwindRoot = path.dirname(resolveFromProject('tailwindcss/package.json', projectRoot));
+  return require.resolve('jiti', { paths: [projectRoot, tailwindRoot] });
+}
+
 function loadDesignTokens(projectRoot) {
-  const tokensPath = require.resolve('@medway-ui/core/tokens', {
-    paths: [projectRoot],
-  });
+  const tokensPath = resolveFromProject('@medway-ui/core/tokens', projectRoot);
 
   try {
     return require(tokensPath);
@@ -14,7 +22,7 @@ function loadDesignTokens(projectRoot) {
       throw error;
     }
 
-    const jiti = require('jiti')(path.join(projectRoot, 'tailwind.config.js'));
+    const jiti = require(resolveJiti(projectRoot))(path.join(projectRoot, 'tailwind.config.js'));
     return jiti(tokensPath);
   }
 }
@@ -42,11 +50,11 @@ const NATIVE_MONTSERRAT_BY_WEIGHT = {
   black: 'MontserratBlack',
 };
 
-function createNativeMontserratFontPlugin() {
-  // Lazy-require so greenfield web tooling can still import this file if needed.
-  const plugin = require('tailwindcss/plugin');
+function createNativeMontserratFontPlugin(projectRoot) {
+  const plugin = require(resolveFromProject('tailwindcss/plugin', projectRoot));
 
   return plugin(({ addBase, addUtilities }) => {
+    // No app o NativeWind descarta o seletor universal (só guarda variáveis): texto sem font-* fica sem família.
     addBase({
       '*': {
         fontFamily: 'Montserrat',
@@ -121,7 +129,7 @@ function createMedwayUiTailwindConfig(options = {}) {
         boxShadow,
       },
     },
-    plugins: [createNativeMontserratFontPlugin()],
+    plugins: [createNativeMontserratFontPlugin(projectRoot)],
   };
 }
 

package/setup/tokens.native.css

@@ -387,6 +387,7 @@
   --color-state-focus: var(--color-gray-70);
   --color-state-active: var(--color-primary-16);
   --color-state-error: var(--color-red-16);
+  --color-state-success: var(--color-green-16);
 
   /* === Base feedback success colors === */
   --color-feedback-success-foreground: var(--color-green-darken-3);
@@ -628,25 +629,39 @@
   --color-gradient-prev-bg-2: var(--color-gray-10);
 
   /* === Base gradient r1 === */
-  --color-gradient-r1-blur-1: var(--color-secondary);
-  --color-gradient-r1-blur-2: var(--color-primary-lighten-3);
+  --color-gradient-r1-blur-1: var(--color-secondary-lighten-1);
+  --color-gradient-r1-blur-2: var(--color-cm);
   --color-gradient-r1-blur-3: var(--color-primary-lighten-5);
-  --color-gradient-r1-bg-1: var(--color-primary);
-  --color-gradient-r1-bg-2: var(--color-primary-lighten-1);
+  --color-gradient-r1-bg-1: var(--color-primary-lighten-2);
+  --color-gradient-r1-bg-2: var(--color-primary-lighten-6);
 
   /* === Base gradient rplus === */
-  --color-gradient-rplus-blur-1: var(--color-primary-lighten-1);
+  --color-gradient-rplus-blur-1: var(--color-prev);
   --color-gradient-rplus-blur-2: var(--color-primary-lighten-3);
   --color-gradient-rplus-blur-3: var(--color-primary-lighten-5);
-  --color-gradient-rplus-bg-1: var(--color-primary-lighten-1);
-  --color-gradient-rplus-bg-2: var(--color-primary);
+  --color-gradient-rplus-bg-1: var(--color-primary-lighten-4);
+  --color-gradient-rplus-bg-2: var(--color-prev-lighten-3);
 
   /* === Base gradient pt === */
-  --color-gradient-pt-blur-1: var(--color-secondary);
-  --color-gradient-pt-blur-2: var(--color-secondary-darken-2);
-  --color-gradient-pt-blur-3: var(--color-secondary-darken-4);
+  --color-gradient-pt-blur-1: var(--color-cir);
+  --color-gradient-pt-blur-2: var(--color-secondary-darken-1);
+  --color-gradient-pt-blur-3: var(--color-secondary-darken-2);
   --color-gradient-pt-bg-1: var(--color-gray-600);
-  --color-gradient-pt-bg-2: var(--color-gray-450);
+  --color-gradient-pt-bg-2: var(--color-gray-300);
+
+  /* === Base gradient default === */
+  --color-gradient-default-blur-1: var(--color-gray-10);
+  --color-gradient-default-blur-2: var(--color-secondary-lighten-5);
+  --color-gradient-default-blur-3: var(--color-primary-lighten-6);
+  --color-gradient-default-bg-1: var(--color-gray-150);
+  --color-gradient-default-bg-2: var(--color-gray-50);
+
+  /* === Base gradient neutral === */
+  --color-gradient-neutral-blur-1: var(--color-white);
+  --color-gradient-neutral-blur-2: var(--color-gray-70);
+  --color-gradient-neutral-blur-3: var(--color-gray-150);
+  --color-gradient-neutral-bg-1: var(--color-gray-50);
+  --color-gradient-neutral-bg-2: var(--color-gray-30);
 
   /* === Typography fontfamily === */
   /* RN: single family name (loaded via expo-font as "Montserrat"). */
@@ -662,7 +677,7 @@
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  --font-weight-extrabold: 900;
+  --font-weight-extrabold: 800;
 
   /* === Typography size === */
   --text-xxs: 10px;
@@ -702,6 +717,7 @@
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 16px;
+  --radius-xl: 32px;
   --radius-pill: 320px;
   --radius-circular: 1600px;
   --radius-full: 9999px;
@@ -745,6 +761,7 @@
     --color-state-focus: var(--color-gray-700);
     --color-state-active: var(--color-white-16);
     --color-state-error: var(--color-red-16);
+    --color-state-success: var(--color-green-16);
 
     /* === Base feedback success colors === */
     --color-feedback-success-foreground: var(--color-green-lighten-4);
@@ -794,7 +811,7 @@
     /* === Dark surface colors === */
     --color-surface-elevated: var(--color-gray-800);
     --color-surface-card: var(--color-gray-850);
-    --color-surface-navigation: var(--color-gray-850);
+    --color-surface-navigation: var(--color-gray-900);
     --color-surface-section: var(--color-gray-850);
     --color-surface-page: var(--color-gray-950);
     --color-surface-disable: var(--color-black-8);
@@ -1000,23 +1017,37 @@
 
     /* === Dark gradient r1 === */
     --color-gradient-r1-blur-1: var(--color-secondary);
-    --color-gradient-r1-blur-2: var(--color-primary-lighten-1);
+    --color-gradient-r1-blur-2: var(--color-primary-lighten-2);
     --color-gradient-r1-blur-3: var(--color-primary-lighten-2);
     --color-gradient-r1-bg-1: var(--color-primary);
-    --color-gradient-r1-bg-2: var(--color-primary-darken-2);
+    --color-gradient-r1-bg-2: var(--color-primary-darken-1);
 
     /* === Dark gradient rplus === */
-    --color-gradient-rplus-blur-1: var(--color-primary-lighten-5);
+    --color-gradient-rplus-blur-1: var(--color-prev-darken-1);
     --color-gradient-rplus-blur-2: var(--color-primary-lighten-3);
     --color-gradient-rplus-blur-3: var(--color-primary-lighten-1);
     --color-gradient-rplus-bg-1: var(--color-primary);
-    --color-gradient-rplus-bg-2: var(--color-primary-darken-2);
+    --color-gradient-rplus-bg-2: var(--color-prev-darken-6);
 
     /* === Dark gradient pt === */
-    --color-gradient-pt-blur-1: var(--color-secondary);
-    --color-gradient-pt-blur-2: var(--color-secondary-darken-1);
-    --color-gradient-pt-blur-3: var(--color-secondary-darken-3);
+    --color-gradient-pt-blur-1: var(--color-cir-darken-1);
+    --color-gradient-pt-blur-2: var(--color-secondary-darken-2);
+    --color-gradient-pt-blur-3: var(--color-secondary-darken-4);
     --color-gradient-pt-bg-1: var(--color-gray-800);
     --color-gradient-pt-bg-2: var(--color-gray-900);
+
+    /* === Dark gradient default === */
+    --color-gradient-default-blur-1: var(--color-primary-lighten-1);
+    --color-gradient-default-blur-2: var(--color-secondary-lighten-2);
+    --color-gradient-default-blur-3: var(--color-primary-lighten-3);
+    --color-gradient-default-bg-1: var(--color-gray-850);
+    --color-gradient-default-bg-2: var(--color-gray-900);
+
+    /* === Dark gradient neutral === */
+    --color-gradient-neutral-blur-1: var(--color-gray-900);
+    --color-gradient-neutral-blur-2: var(--color-gray-850);
+    --color-gradient-neutral-blur-3: var(--color-gray-800);
+    --color-gradient-neutral-bg-1: var(--color-gray-850);
+    --color-gradient-neutral-bg-2: var(--color-gray-950);
   }
 }

package/src/components/Alert.tsx

@@ -29,15 +29,17 @@ const AlertContext = createContext<{
   onClose?: () => void;
 } | null>(null);
 
+const alertBackgroundClassName: Record<AlertVariant, string> = {
+  regular: "bg-primary-background-soft",
+  emphasis: "bg-secondary-background-soft",
+  success: "bg-feedback-success-background-soft",
+  warning: "bg-feedback-warning-background-soft",
+  error: "bg-feedback-error-background-soft",
+};
+
 const alertVariants = cva("relative w-full rounded-md px-4 py-3 flex-col gap-1", {
   variants: {
-    variant: {
-      regular: "bg-primary-background-soft",
-      emphasis: "bg-secondary-background-soft",
-      success: "bg-green-background-soft",
-      warning: "bg-yellow-background-soft",
-      error: "bg-red-background-soft",
-    },
+    variant: alertBackgroundClassName,
   },
   defaultVariants: { variant: "regular" },
 });
@@ -47,30 +49,45 @@ const alertTextColorVariants = cva("", {
     variant: {
       regular: "text-primary-foreground",
       emphasis: "text-secondary-foreground",
-      success: "text-green-foreground",
-      warning: "text-yellow-foreground",
-      error: "text-red-foreground",
+      success: "text-feedback-success-foreground",
+      warning: "text-feedback-warning-foreground",
+      error: "text-feedback-error-foreground",
     },
   },
   defaultVariants: { variant: "regular" },
 });
 
+const alertDescriptionColorClassName: Record<AlertVariant, string> = {
+  regular: "text-primary-foreground-emphasis",
+  emphasis: "text-secondary-foreground-emphasis",
+  success: "text-feedback-success-foreground-emphasis",
+  warning: "text-feedback-warning-foreground-emphasis",
+  error: "text-feedback-error-foreground-emphasis",
+};
+
 const alertButtonVariants = cva(
-  "flex-row items-center justify-center rounded-pill px-3 min-h-10",
+  "flex-row items-center justify-center rounded-pill px-3 min-h-10 disabled:opacity-50",
   {
     variants: {
       variant: {
         regular: "",
-        basic: "bg-transparent",
+        basic: "",
       },
       alertVariant: {
-        regular: "bg-primary-background-soft",
-        emphasis: "bg-secondary-background-soft",
-        success: "bg-green-background-soft",
-        warning: "bg-yellow-background-soft",
-        error: "bg-red-background-soft",
+        regular: "active:bg-primary-background-soft-emphasis",
+        emphasis: "active:bg-secondary-background-soft-emphasis",
+        success: "active:bg-feedback-success-background-soft-emphasis",
+        warning: "active:bg-feedback-warning-background-soft-emphasis",
+        error: "active:bg-feedback-error-background-soft-emphasis",
       },
     },
+    compoundVariants: (Object.keys(alertBackgroundClassName) as AlertVariant[]).map(
+      (alertVariant) => ({
+        variant: "regular" as const,
+        alertVariant,
+        className: alertBackgroundClassName[alertVariant],
+      })
+    ),
     defaultVariants: { variant: "regular", alertVariant: "regular" },
   }
 );
@@ -89,7 +106,7 @@ function Alert({ className, variant = "regular", onClose, children, ...props }:
     <AlertContext.Provider value={ctx}>
       <View
         accessibilityRole="alert"
-        className={cn(alertVariants({ variant }), className)}
+        className={cn(alertVariants({ variant }), onClose && "pr-12", className)}
         {...props}
       >
         {children}
@@ -131,7 +148,7 @@ function AlertTitle({ className, children, ...props }: ViewProps & { children?:
     <View className={cn("", className)} {...props}>
       <Text
         numberOfLines={1}
-        className={cn("text-md font-medium", alertTextColorVariants({ variant }))}
+        className={cn("text-md font-semibold", alertTextColorVariants({ variant }))}
       >
         {children}
       </Text>
@@ -145,7 +162,7 @@ function AlertDescription({ className, children, ...props }: ViewProps & { child
     <View className={cn("", className)} {...props}>
       <Text
         numberOfLines={3}
-        className={cn("text-sm font-medium leading-5", alertTextColorVariants({ variant }))}
+        className={cn("text-sm font-medium leading-sm", alertDescriptionColorClassName[variant])}
       >
         {children}
       </Text>

package/src/components/AlertDialog.tsx

@@ -1,10 +1,12 @@
 import { createContext, useContext, useMemo, type ReactNode } from "react";
-import { View, Text, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
 import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
 import { cva } from "class-variance-authority";
 import { CloseMd } from "@medway-ui/icons/native";
 import { useThemeColor } from "@/hooks/useThemeColor";
+import { useBackdropStyle } from "@/lib/backdrop";
 import { cn } from "@/lib/utils";
+import { Text } from "@/components/Text";
 import { Button, type ButtonProps } from "@/components/Button";
 import { Tag, type TagProps } from "@/components/Tag";
 
@@ -66,9 +68,9 @@ const alertDialogIconContainerVariants = cva(
       variant: {
         regular: "bg-primary-background-fill",
         emphasis: "bg-secondary-background-fill",
-        warning: "bg-yellow-background-fill",
-        error: "bg-red-background-fill",
-        success: "bg-green-background-fill",
+        warning: "bg-feedback-warning-background-fill",
+        error: "bg-feedback-error-background-fill",
+        success: "bg-feedback-success-background-fill",
       },
     },
     defaultVariants: { variant: DEFAULT_VARIANT },
@@ -80,9 +82,9 @@ const alertDialogIconTextVariants = cva("", {
     variant: {
       regular: "text-primary-foreground-onfill",
       emphasis: "text-secondary-foreground-onfill",
-      warning: "text-yellow-foreground-onfill",
-      error: "text-red-foreground-onfill",
-      success: "text-green-foreground-onfill",
+      warning: "text-feedback-warning-foreground-onfill",
+      error: "text-feedback-error-foreground-onfill",
+      success: "text-feedback-success-foreground-onfill",
     },
   },
   defaultVariants: { variant: DEFAULT_VARIANT },
@@ -96,14 +98,6 @@ const alertDialogTagVariantMap: Record<AlertDialogVariant, TagProps["variant"]>
   success: "success-soft",
 };
 
-const actionVariantMap: Record<AlertDialogVariant, NonNullable<ButtonProps["variant"]>> = {
-  regular: "regular",
-  emphasis: "emphasis",
-  warning: "warning",
-  error: "error",
-  success: "success",
-};
-
 function AlertDialog({ variant = DEFAULT_VARIANT, ...props }: AlertDialogProps) {
   const ctx = useMemo(() => ({ variant }), [variant]);
   return (
@@ -122,9 +116,12 @@ function AlertDialogPortal({ ...props }: AlertDialogPrimitive.PortalProps) {
 }
 
 function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.OverlayProps) {
+  const backdropStyle = useBackdropStyle(className);
+
   return (
     <AlertDialogPrimitive.Overlay
-      className={cn("absolute inset-0 bg-black-48", className)}
+      className={cn("absolute inset-0", className)}
+      style={backdropStyle}
       {...props}
     />
   );
@@ -138,11 +135,13 @@ function AlertDialogContent({
   ...props
 }: AlertDialogContentProps) {
   const closeIconColor = useThemeColor("gray-foreground");
+  const backdropStyle = useBackdropStyle(overlayClassName);
 
   return (
     <AlertDialogPrimitive.Portal>
       <AlertDialogPrimitive.Overlay
-        className={cn("absolute inset-0 bg-black-48", overlayClassName)}
+        className={cn("absolute inset-0", overlayClassName)}
+        style={backdropStyle}
       />
       <AlertDialogPrimitive.Content
         className="absolute inset-0 items-center justify-center px-4"
@@ -150,7 +149,7 @@ function AlertDialogContent({
       >
         <View
           className={cn(
-            "relative flex-col w-full rounded-xl bg-background shadow-lg overflow-hidden",
+            "relative flex-col w-full rounded-lg bg-surface-elevated shadow-lg overflow-hidden",
             className
           )}
         >
@@ -247,7 +246,7 @@ function AlertDialogAction({
 }: AlertDialogActionProps) {
   const ctx = useContext(AlertDialogContext);
   const primitiveCtx = AlertDialogPrimitive.useRootContext();
-  const resolvedVariant = variant ?? actionVariantMap[ctx?.variant ?? DEFAULT_VARIANT];
+  const resolvedVariant = variant ?? ctx?.variant ?? DEFAULT_VARIANT;
 
   return (
     <View className={cn("flex-1", className)}>

package/src/components/Badge.tsx

@@ -57,13 +57,13 @@ const badgeVariants = cva("flex-row items-center justify-center rounded-pill", {
       cir: "bg-cir-background-fill",
       "cir-soft": "bg-surface-card",
       // The design paints pediatrics with the warning tokens, all but the filled label.
-      ped: "bg-yellow-background-fill",
+      ped: "bg-feedback-warning-background-fill",
       "ped-soft": "bg-surface-card",
       prev: "bg-prev-background-fill",
       "prev-soft": "bg-surface-card",
       freemium: "bg-primary",
-      error: "bg-red-background-soft",
-      warning: "bg-yellow-background-soft",
+      error: "bg-feedback-error-background-soft",
+      warning: "bg-feedback-warning-background-soft",
       neutral: "bg-gray-background-soft",
     },
     size: {
@@ -93,7 +93,7 @@ const SOFT_TINT: Partial<Record<BadgeVariant, string>> = {
   "cm-soft": "bg-cm-background-soft",
   "go-soft": "bg-go-background-soft",
   "cir-soft": "bg-cir-background-soft",
-  "ped-soft": "bg-yellow-background-soft",
+  "ped-soft": "bg-feedback-warning-background-soft",
   "prev-soft": "bg-prev-background-soft",
 };
 
@@ -112,13 +112,13 @@ const badgeTextVariants = cva("font-bold", {
       cir: "text-cir-foreground-onfill",
       "cir-soft": "text-cir-foreground",
       ped: "text-ped-foreground-onfill",
-      "ped-soft": "text-yellow-foreground",
+      "ped-soft": "text-feedback-warning-foreground",
       prev: "text-prev-foreground-onfill",
       "prev-soft": "text-prev-foreground",
       // White, not the design's onfill token: that one turns dark in dark mode, on a fill that stays navy.
       freemium: "font-semibold text-white",
-      error: "text-red-stroke-emphasis",
-      warning: "text-yellow-foreground",
+      error: "text-feedback-error-foreground",
+      warning: "text-feedback-warning-foreground",
       neutral: "text-primary-foreground",
     },
     size: {
@@ -151,13 +151,13 @@ const badgeDotVariants = cva("rounded-circular", {
       "go-soft": "bg-go-background-fill",
       cir: "bg-cir-background-fill",
       "cir-soft": "bg-cir-background-fill",
-      ped: "bg-yellow-background-fill",
-      "ped-soft": "bg-yellow-background-fill",
+      ped: "bg-feedback-warning-background-fill",
+      "ped-soft": "bg-feedback-warning-background-fill",
       prev: "bg-prev-background-fill",
       "prev-soft": "bg-prev-background-fill",
       freemium: "bg-primary",
-      error: "bg-red-background-fill",
-      warning: "bg-yellow-background-fill",
+      error: "bg-feedback-error-background-fill",
+      warning: "bg-feedback-warning-background-fill",
       neutral: "bg-gray-background-fill",
     },
     size: {
@@ -197,6 +197,8 @@ const FREEMIUM_GRADIENT: ViewStyle = {
 
 const SHINE_DURATION_MS = 2000;
 
+const SHINE_BAND_FRAME: ViewStyle = { position: "absolute", top: 0, bottom: 0 };
+
 function BadgeShine() {
   const progress = useSharedValue(0);
   const width = useSharedValue(0);
@@ -234,10 +236,9 @@ function BadgeShine() {
       className="absolute inset-0 overflow-hidden rounded-pill"
       onLayout={handleLayout}
     >
-      <Animated.View
-        className="absolute bottom-0 top-0 bg-white-24"
-        style={bandStyle}
-      />
+      <Animated.View style={[SHINE_BAND_FRAME, bandStyle]}>
+        <View className="flex-1 bg-white-24" />
+      </Animated.View>
     </View>
   );
 }

package/src/components/Button.tsx

@@ -91,23 +91,23 @@ const buttonVariants = cva(
         "emphasis-basic":
           "bg-transparent active:bg-secondary-background-soft-emphasis disabled:bg-transparent",
         error:
-          "bg-red-background-fill active:bg-red-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-error-background-fill active:bg-feedback-error-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "error-soft":
-          "bg-red-background-soft active:bg-red-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-error-background-soft active:bg-feedback-error-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "error-basic":
-          "bg-transparent active:bg-red-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-error-background-soft-emphasis disabled:bg-transparent",
         warning:
-          "bg-yellow-background-fill active:bg-yellow-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-warning-background-fill active:bg-feedback-warning-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "warning-soft":
-          "bg-yellow-background-soft active:bg-yellow-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-warning-background-soft active:bg-feedback-warning-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "warning-basic":
-          "bg-transparent active:bg-yellow-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-warning-background-soft-emphasis disabled:bg-transparent",
         success:
-          "bg-green-background-fill active:bg-green-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-success-background-fill active:bg-feedback-success-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "success-soft":
-          "bg-green-background-soft active:bg-green-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-success-background-soft active:bg-feedback-success-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "success-basic":
-          "bg-transparent active:bg-green-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-success-background-soft-emphasis disabled:bg-transparent",
         outlined:
           "border border-gray-stroke-muted bg-transparent active:bg-state-hover disabled:border-gray-stroke-muted",
         gradient:
@@ -132,24 +132,24 @@ const buttonVariants = cva(
 const buttonTextVariants = cva("font-semibold shrink-0", {
   variants: {
     variant: {
-      regular: "text-primary-foreground-onfill disabled:text-gray-foreground-onfill",
-      "regular-soft": "text-primary-foreground disabled:text-gray-foreground-muted",
-      "regular-basic": "text-primary-foreground disabled:text-gray-foreground-muted",
-      emphasis: "text-secondary-foreground-onfill disabled:text-gray-foreground-onfill",
-      "emphasis-soft": "text-secondary-foreground disabled:text-gray-foreground-muted",
-      "emphasis-basic": "text-secondary-foreground disabled:text-gray-foreground-muted",
-      error: "text-red-foreground-onfill disabled:text-gray-foreground-onfill",
-      "error-soft": "text-red-foreground disabled:text-gray-foreground-muted",
-      "error-basic": "text-red-foreground disabled:text-gray-foreground-muted",
-      warning: "text-yellow-foreground-onfill disabled:text-gray-foreground-onfill",
-      "warning-soft": "text-yellow-foreground disabled:text-gray-foreground-muted",
-      "warning-basic": "text-yellow-foreground disabled:text-gray-foreground-muted",
-      success: "text-green-foreground-onfill disabled:text-gray-foreground-onfill",
-      "success-soft": "text-green-foreground disabled:text-gray-foreground-muted",
-      "success-basic": "text-green-foreground disabled:text-gray-foreground-muted",
-      outlined: "text-foreground disabled:text-gray-foreground-muted",
-      gradient: "text-white disabled:text-gray-foreground-onfill",
-      medbrain: "text-secondary disabled:text-gray-foreground-onfill",
+      regular: "text-primary-foreground-onfill",
+      "regular-soft": "text-primary-foreground",
+      "regular-basic": "text-primary-foreground",
+      emphasis: "text-secondary-foreground-onfill",
+      "emphasis-soft": "text-secondary-foreground",
+      "emphasis-basic": "text-secondary-foreground",
+      error: "text-feedback-error-foreground-onfill",
+      "error-soft": "text-feedback-error-foreground",
+      "error-basic": "text-feedback-error-foreground",
+      warning: "text-feedback-warning-foreground-onfill",
+      "warning-soft": "text-feedback-warning-foreground",
+      "warning-basic": "text-feedback-warning-foreground",
+      success: "text-feedback-success-foreground-onfill",
+      "success-soft": "text-feedback-success-foreground",
+      "success-basic": "text-feedback-success-foreground",
+      outlined: "text-foreground",
+      gradient: "text-white",
+      medbrain: "text-secondary",
     },
     size: {
       sm: "text-xs",
@@ -157,10 +157,39 @@ const buttonTextVariants = cva("font-semibold shrink-0", {
       lg: "text-md",
       xl: "text-lg",
     },
+    disabled: {
+      true: "",
+      false: "",
+    },
   },
+  compoundVariants: [
+    {
+      variant: ["regular", "emphasis", "error", "warning", "success", "gradient", "medbrain"],
+      disabled: true,
+      className: "text-gray-foreground-onfill",
+    },
+    {
+      variant: [
+        "regular-soft",
+        "regular-basic",
+        "emphasis-soft",
+        "emphasis-basic",
+        "error-soft",
+        "error-basic",
+        "warning-soft",
+        "warning-basic",
+        "success-soft",
+        "success-basic",
+        "outlined",
+      ],
+      disabled: true,
+      className: "text-gray-foreground-muted",
+    },
+  ],
   defaultVariants: {
     variant: "regular",
     size: "md",
+    disabled: false,
   },
 });
 
@@ -185,6 +214,10 @@ function Button({
   const resolvedSize = size ?? "md";
   const resolvedVariant = variant ?? "regular";
   const isIconOnly = !children && !alert && (!!iconLeft || !!iconRight);
+  const isDisabled = !!disabled || loading;
+  const textClassName = cn(
+    buttonTextVariants({ variant: resolvedVariant, size, disabled: isDisabled })
+  );
 
   return (
     <View style={[{ position: "relative" }, containerStyle]}>
@@ -197,9 +230,9 @@ function Button({
       )}
 
       <Pressable
-        disabled={disabled || loading}
+        disabled={isDisabled}
         accessibilityRole="button"
-        accessibilityState={{ disabled: disabled || loading, busy: loading }}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
         className={cn(
           buttonVariants({ variant, size }),
           isIconOnly && ICON_ONLY_SIZES[resolvedSize],
@@ -218,7 +251,7 @@ function Button({
             <View className="opacity-0 flex-row items-center gap-2">
               {iconLeft}
               {children != null && (
-                <Text className={cn(buttonTextVariants({ variant: resolvedVariant, size }))}>
+                <Text className={textClassName}>
                   {children}
                 </Text>
               )}
@@ -242,7 +275,7 @@ function Button({
               iconLeft
             )}
             {children != null && (
-              <Text className={cn(buttonTextVariants({ variant: resolvedVariant, size }))}>
+              <Text className={textClassName}>
                 {children}
               </Text>
             )}