@medway-ui/native 1.9.2 → 1.10.1

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);
@@ -452,40 +453,68 @@
   --color-gray-background-soft-muted: var(--color-gray-30);
 
   /* === Base green colors === */
-  --color-green-foreground: var(--color-green-darken-3);
-  --color-green-foreground-emphasis: var(--color-green-darken-4);
-  --color-green-foreground-onfill: var(--color-white);
-  --color-green-stroke: var(--color-green);
-  --color-green-stroke-emphasis: var(--color-green-darken-2);
-  --color-green-background-fill: var(--color-green-darken-2);
-  --color-green-background-fill-emphasis: var(--color-green-darken-3);
-  --color-green-background-soft: var(--color-green-16);
-  --color-green-background-soft-emphasis: var(--color-green-12);
-  --color-green-background-soft-muted: var(--color-green-6);
+  --color-green-foreground: var(--color-feedback-success-foreground);
+  --color-green-foreground-emphasis: var(
+    --color-feedback-success-foreground-emphasis
+  );
+  --color-green-foreground-onfill: var(
+    --color-feedback-success-foreground-onfill
+  );
+  --color-green-stroke: var(--color-feedback-success-stroke);
+  --color-green-stroke-emphasis: var(--color-feedback-success-stroke-emphasis);
+  --color-green-background-fill: var(--color-feedback-success-background-fill);
+  --color-green-background-fill-emphasis: var(
+    --color-feedback-success-background-fill-emphasis
+  );
+  --color-green-background-soft: var(--color-feedback-success-background-soft);
+  --color-green-background-soft-emphasis: var(
+    --color-feedback-success-background-soft-emphasis
+  );
+  --color-green-background-soft-muted: var(
+    --color-feedback-success-background-soft-muted
+  );
 
   /* === Base red colors === */
-  --color-red-foreground: var(--color-red-darken-2);
-  --color-red-foreground-emphasis: var(--color-red-darken-3);
-  --color-red-foreground-onfill: var(--color-white);
-  --color-red-stroke: var(--color-red);
-  --color-red-stroke-emphasis: var(--color-red-darken-1);
-  --color-red-background-fill: var(--color-red-darken-1);
-  --color-red-background-fill-emphasis: var(--color-red-darken-2);
-  --color-red-background-soft: var(--color-red-12);
-  --color-red-background-soft-emphasis: var(--color-red-8);
-  --color-red-background-soft-muted: var(--color-red-4);
+  --color-red-foreground: var(--color-feedback-error-foreground);
+  --color-red-foreground-emphasis: var(
+    --color-feedback-error-foreground-emphasis
+  );
+  --color-red-foreground-onfill: var(--color-feedback-error-foreground-onfill);
+  --color-red-stroke: var(--color-feedback-error-stroke);
+  --color-red-stroke-emphasis: var(--color-feedback-error-stroke-emphasis);
+  --color-red-background-fill: var(--color-feedback-error-background-fill);
+  --color-red-background-fill-emphasis: var(
+    --color-feedback-error-background-fill-emphasis
+  );
+  --color-red-background-soft: var(--color-feedback-error-background-soft);
+  --color-red-background-soft-emphasis: var(
+    --color-feedback-error-background-soft-emphasis
+  );
+  --color-red-background-soft-muted: var(
+    --color-feedback-error-background-soft-muted
+  );
 
   /* === Base yellow colors === */
-  --color-yellow-foreground: var(--color-yellow-darken-4);
-  --color-yellow-foreground-emphasis: var(--color-yellow-darken-5);
-  --color-yellow-foreground-onfill: var(--color-yellow-darken-5);
-  --color-yellow-stroke: var(--color-yellow-lighten-1);
-  --color-yellow-stroke-emphasis: var(--color-yellow);
-  --color-yellow-background-fill: var(--color-yellow-lighten-2);
-  --color-yellow-background-fill-emphasis: var(--color-yellow);
-  --color-yellow-background-soft: var(--color-yellow-24);
-  --color-yellow-background-soft-emphasis: var(--color-yellow-16);
-  --color-yellow-background-soft-muted: var(--color-yellow-8);
+  --color-yellow-foreground: var(--color-feedback-warning-foreground);
+  --color-yellow-foreground-emphasis: var(
+    --color-feedback-warning-foreground-emphasis
+  );
+  --color-yellow-foreground-onfill: var(
+    --color-feedback-warning-foreground-onfill
+  );
+  --color-yellow-stroke: var(--color-feedback-warning-stroke);
+  --color-yellow-stroke-emphasis: var(--color-feedback-warning-stroke-emphasis);
+  --color-yellow-background-fill: var(--color-feedback-warning-background-fill);
+  --color-yellow-background-fill-emphasis: var(
+    --color-feedback-warning-background-fill-emphasis
+  );
+  --color-yellow-background-soft: var(--color-feedback-warning-background-soft);
+  --color-yellow-background-soft-emphasis: var(
+    --color-feedback-warning-background-soft-emphasis
+  );
+  --color-yellow-background-soft-muted: var(
+    --color-feedback-warning-background-soft-muted
+  );
 
   /* === Base cm colors === */
   --color-cm-foreground: var(--color-cm-darken-2);
@@ -628,25 +657,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 +705,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 +745,7 @@
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 16px;
+  --radius-xl: 32px;
   --radius-pill: 320px;
   --radius-circular: 1600px;
   --radius-full: 9999px;
@@ -745,6 +789,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 +839,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);
@@ -823,40 +868,82 @@
     --color-gray-background-soft-muted: var(--color-gray-700);
 
     /* === Dark green colors === */
-    --color-green-foreground: var(--color-green-lighten-4);
-    --color-green-foreground-emphasis: var(--color-green-lighten-6);
-    --color-green-foreground-onfill: var(--color-white);
-    --color-green-stroke: var(--color-green-darken-2);
-    --color-green-stroke-emphasis: var(--color-green);
-    --color-green-background-fill: var(--color-green-darken-3);
-    --color-green-background-fill-emphasis: var(--color-green-darken-2);
-    --color-green-background-soft: var(--color-green-8);
-    --color-green-background-soft-emphasis: var(--color-green-24);
-    --color-green-background-soft-muted: var(--color-green-16);
+    --color-green-foreground: var(--color-feedback-success-foreground);
+    --color-green-foreground-emphasis: var(
+      --color-feedback-success-foreground-emphasis
+    );
+    --color-green-foreground-onfill: var(
+      --color-feedback-success-foreground-onfill
+    );
+    --color-green-stroke: var(--color-feedback-success-stroke);
+    --color-green-stroke-emphasis: var(
+      --color-feedback-success-stroke-emphasis
+    );
+    --color-green-background-fill: var(
+      --color-feedback-success-background-fill
+    );
+    --color-green-background-fill-emphasis: var(
+      --color-feedback-success-background-fill-emphasis
+    );
+    --color-green-background-soft: var(
+      --color-feedback-success-background-soft
+    );
+    --color-green-background-soft-emphasis: var(
+      --color-feedback-success-background-soft-emphasis
+    );
+    --color-green-background-soft-muted: var(
+      --color-feedback-success-background-soft-muted
+    );
 
     /* === Dark red colors === */
-    --color-red-foreground: var(--color-red-lighten-3);
-    --color-red-foreground-emphasis: var(--color-red-lighten-4);
-    --color-red-foreground-onfill: var(--color-white);
-    --color-red-stroke: var(--color-red-darken-1);
-    --color-red-stroke-emphasis: var(--color-red);
-    --color-red-background-fill: var(--color-red-darken-2);
-    --color-red-background-fill-emphasis: var(--color-red-darken-1);
-    --color-red-background-soft: var(--color-red-12);
-    --color-red-background-soft-emphasis: var(--color-red-24);
-    --color-red-background-soft-muted: var(--color-red-16);
+    --color-red-foreground: var(--color-feedback-error-foreground);
+    --color-red-foreground-emphasis: var(
+      --color-feedback-error-foreground-emphasis
+    );
+    --color-red-foreground-onfill: var(
+      --color-feedback-error-foreground-onfill
+    );
+    --color-red-stroke: var(--color-feedback-error-stroke);
+    --color-red-stroke-emphasis: var(--color-feedback-error-stroke-emphasis);
+    --color-red-background-fill: var(--color-feedback-error-background-fill);
+    --color-red-background-fill-emphasis: var(
+      --color-feedback-error-background-fill-emphasis
+    );
+    --color-red-background-soft: var(--color-feedback-error-background-soft);
+    --color-red-background-soft-emphasis: var(
+      --color-feedback-error-background-soft-emphasis
+    );
+    --color-red-background-soft-muted: var(
+      --color-feedback-error-background-soft-muted
+    );
 
     /* === Dark yellow colors === */
-    --color-yellow-foreground: var(--color-yellow-lighten-2);
-    --color-yellow-foreground-emphasis: var(--color-yellow-lighten-4);
-    --color-yellow-foreground-onfill: var(--color-yellow-darken-5);
-    --color-yellow-stroke: var(--color-yellow);
-    --color-yellow-stroke-emphasis: var(--color-yellow-lighten-1);
-    --color-yellow-background-fill: var(--color-yellow);
-    --color-yellow-background-fill-emphasis: var(--color-yellow-lighten-2);
-    --color-yellow-background-soft: var(--color-yellow-8);
-    --color-yellow-background-soft-emphasis: var(--color-yellow-24);
-    --color-yellow-background-soft-muted: var(--color-yellow-16);
+    --color-yellow-foreground: var(--color-feedback-warning-foreground);
+    --color-yellow-foreground-emphasis: var(
+      --color-feedback-warning-foreground-emphasis
+    );
+    --color-yellow-foreground-onfill: var(
+      --color-feedback-warning-foreground-onfill
+    );
+    --color-yellow-stroke: var(--color-feedback-warning-stroke);
+    --color-yellow-stroke-emphasis: var(
+      --color-feedback-warning-stroke-emphasis
+    );
+    --color-yellow-background-fill: var(
+      --color-feedback-warning-background-fill
+    );
+    --color-yellow-background-fill-emphasis: var(
+      --color-feedback-warning-background-fill-emphasis
+    );
+    --color-yellow-background-soft: var(
+      --color-feedback-warning-background-soft
+    );
+    --color-yellow-background-soft-emphasis: var(
+      --color-feedback-warning-background-soft-emphasis
+    );
+    --color-yellow-background-soft-muted: var(
+      --color-feedback-warning-background-soft-muted
+    );
 
     /* === Dark cm colors === */
     --color-cm-foreground: var(--color-cm-lighten-4);
@@ -1000,23 +1087,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>
   );
 }