@umituz/react-native-ai-generation-content 1.17.86 → 1.17.87

package/src/presentation/components/PhotoUploadCard/PhotoUploadCard.tsx

@@ -15,7 +15,6 @@ import {
   type ViewStyle,
   type StyleProp,
 } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
 import {
   AtomicText,
   AtomicIcon,
@@ -83,12 +82,12 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
 
   const borderColor = useMemo(() => {
     if (!cfg.showValidationStatus) {
-      return `${tokens.colors.primary}40`;
+      return tokens.colors.borderLight;
     }
     if (isValidating) return tokens.colors.primary;
     if (isValid === true) return tokens.colors.success;
     if (isValid === false) return tokens.colors.error;
-    return `${tokens.colors.primary}40`;
+    return tokens.colors.borderLight;
   }, [isValidating, isValid, tokens, cfg.showValidationStatus]);
 
   const styles = useMemo(
@@ -120,14 +119,8 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
           alignItems: "center",
           marginBottom: 20,
           borderWidth: 2,
-          borderColor: `${tokens.colors.primary}30`,
-        },
-        iconGradient: {
-          width: 88,
-          height: 88,
-          borderRadius: 44,
-          justifyContent: "center",
-          alignItems: "center",
+          borderColor: tokens.colors.borderLight,
+          backgroundColor: tokens.colors.surfaceSecondary,
         },
         title: {
           fontSize: 20,
@@ -150,7 +143,8 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
         },
         imageOverlay: {
           ...StyleSheet.absoluteFillObject,
-          backgroundColor: "rgba(0,0,0,0.15)",
+          backgroundColor: tokens.colors.modalOverlay,
+          opacity: 0.3,
         },
         changeButton: {
           position: "absolute",
@@ -185,7 +179,7 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
           height: 100,
           borderRadius: 50,
           borderWidth: 2,
-          borderColor: `${tokens.colors.primary}30`,
+          borderColor: tokens.colors.borderLight,
         },
       }),
     [tokens, imageUri, cfg],
@@ -226,19 +220,11 @@ export const PhotoUploadCard: React.FC<PhotoUploadCardProps> = ({
         ) : (
           <View style={styles.placeholder}>
             <View style={styles.iconCircle}>
-              <LinearGradient
-                colors={[
-                  `${tokens.colors.primary}20`,
-                  `${tokens.colors.primary}10`,
-                ]}
-                style={styles.iconGradient}
-              >
-                <AtomicIcon
-                  name={(icon as string) || "camera"}
-                  size={cfg.iconSize}
-                  customColor={tokens.colors.primary}
-                />
-              </LinearGradient>
+              <AtomicIcon
+                name={(icon as string) || "camera"}
+                size={cfg.iconSize}
+                customColor={tokens.colors.primary}
+              />
             </View>
             <AtomicText style={styles.title}>
               {title || translations.tapToUpload}

package/src/presentation/components/StylePresetsGrid.tsx

@@ -47,7 +47,10 @@ export const StylePresetsGrid: React.FC<StylePresetsGridProps> = ({
             key={preset.id}
             style={[
               styles.card,
-              { backgroundColor: tokens.colors.surface },
+              {
+                backgroundColor: tokens.colors.surface,
+                borderColor: tokens.colors.border,
+              },
             ]}
             onPress={() => onPresetPress(preset)}
             disabled={disabled}
@@ -58,7 +61,7 @@ export const StylePresetsGrid: React.FC<StylePresetsGridProps> = ({
                 <View
                   style={[
                     styles.badge,
-                    { backgroundColor: tokens.colors.primary + "20" },
+                    { backgroundColor: tokens.colors.surfaceVariant },
                   ]}
                 >
                   <AtomicText
@@ -109,7 +112,6 @@ const styles = StyleSheet.create({
     padding: 16,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: "rgba(0,0,0,0.05)",
   },
   cardHeader: {
     flexDirection: "row",

package/src/presentation/components/buttons/GenerateButton.tsx

@@ -1,6 +1,6 @@
 /**
  * GenerateButton Component
- * Generic AI generation button with gradient/solid variants
+ * Generic AI generation button using design system tokens
  * Props-driven for 100+ apps compatibility
  */
 
@@ -12,7 +12,6 @@ import {
   AtomicIcon,
   AtomicSpinner,
 } from "@umituz/react-native-design-system";
-import { LinearGradient } from "expo-linear-gradient";
 
 export interface GenerateButtonProps {
   readonly isDisabled?: boolean;
@@ -20,8 +19,6 @@ export interface GenerateButtonProps {
   readonly onPress: () => void;
   readonly text: string;
   readonly processingText?: string;
-  readonly variant?: "gradient" | "solid";
-  readonly gradientColors?: readonly [string, string, ...string[]];
   readonly icon?: string;
   readonly iconSize?: number;
   readonly costLabel?: string;
@@ -36,10 +33,8 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
   onPress,
   text,
   processingText,
-  variant = "gradient",
-  gradientColors = ["#FF6B9D", "#C74375", "#FF6B9D"],
   icon = "sparkles",
-  iconSize = 24,
+  iconSize = 20,
   costLabel,
   accessoryRight,
   onAccessoryRightPress,
@@ -50,79 +45,48 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
   const displayText = isProcessing && processingText ? processingText : text;
   const finalDisplayText = costLabel ? `${displayText} (${costLabel})` : displayText;
 
-  if (variant === "solid") {
-    return (
-      <View style={[styles.solidContainer, { marginTop: tokens.spacing.xl }, style]}>
-        <View style={styles.row}>
-          <TouchableOpacity
-            onPress={onPress}
-            disabled={disabled}
-            activeOpacity={0.8}
-            style={[
-              styles.solidButton,
-              {
-                backgroundColor: disabled
-                  ? tokens.colors.surfaceSecondary
-                  : tokens.colors.primary,
-                flex: 1,
-              },
-            ]}
-          >
-            <View style={styles.buttonContent}>
-              {isProcessing ? (
-                <AtomicSpinner size="sm" color="white" />
-              ) : (
-                <AtomicIcon name={icon} customSize={20} customColor="#FFFFFF" />
-              )}
-              <AtomicText type="bodyLarge" style={styles.solidButtonText}>
-                {finalDisplayText}
-              </AtomicText>
-            </View>
-          </TouchableOpacity>
-          {accessoryRight && (
-            <TouchableOpacity
-              onPress={onAccessoryRightPress}
-              style={[styles.accessory, { backgroundColor: tokens.colors.surfaceSecondary }]}
-            >
-              {accessoryRight}
-            </TouchableOpacity>
-          )}
-        </View>
-      </View>
-    );
-  }
-
   return (
-    <View style={[styles.gradientContainer, { marginTop: tokens.spacing.xl }, style]}>
+    <View style={[styles.container, { marginTop: tokens.spacing.xl }, style]}>
       <View style={styles.row}>
         <TouchableOpacity
           onPress={onPress}
           disabled={disabled}
-          activeOpacity={0.85}
-          style={[styles.buttonWrapper, accessoryRight ? { flex: 1 } : undefined]}
+          activeOpacity={0.8}
+          style={[
+            styles.button,
+            {
+              backgroundColor: disabled
+                ? tokens.colors.surfaceSecondary
+                : tokens.colors.primary,
+              borderRadius: tokens.borderRadius.lg,
+              flex: 1,
+            },
+          ]}
         >
-          <LinearGradient
-            colors={disabled ? ["#9CA3AF", "#6B7280"] : gradientColors}
-            start={[0, 0]}
-            end={[1, 0]}
-            style={[styles.gradientButton, disabled && styles.disabledButton]}
-          >
-            <View style={styles.buttonContent}>
-              {isProcessing ? (
-                <AtomicSpinner size="sm" color="white" />
-              ) : (
-                <AtomicIcon name={icon} customSize={iconSize} customColor="#FFF" />
-              )}
-              <AtomicText type="bodyLarge" style={styles.gradientButtonText}>
-                {finalDisplayText}
-              </AtomicText>
-            </View>
-          </LinearGradient>
+          <View style={styles.buttonContent}>
+            {isProcessing ? (
+              <AtomicSpinner size="sm" color={tokens.colors.textInverse} />
+            ) : (
+              <AtomicIcon name={icon} customSize={iconSize} customColor={tokens.colors.textInverse} />
+            )}
+            <AtomicText
+              type="bodyLarge"
+              style={[styles.buttonText, { color: tokens.colors.textInverse }]}
+            >
+              {finalDisplayText}
+            </AtomicText>
+          </View>
         </TouchableOpacity>
         {accessoryRight && (
           <TouchableOpacity
             onPress={onAccessoryRightPress}
-            style={[styles.accessory, { backgroundColor: tokens.colors.surface, height: 56, width: 56 }]}
+            style={[
+              styles.accessory,
+              {
+                backgroundColor: tokens.colors.surfaceSecondary,
+                borderRadius: tokens.borderRadius.lg,
+              },
+            ]}
           >
             {accessoryRight}
           </TouchableOpacity>
@@ -133,35 +97,15 @@ export const GenerateButton: React.FC<GenerateButtonProps> = ({
 };
 
 const styles = StyleSheet.create({
-  gradientContainer: {
-    alignItems: "center",
+  container: {
     paddingHorizontal: 16,
   },
-  solidContainer: {
-    paddingHorizontal: 16,
-  },
-  buttonWrapper: {
-    width: "100%",
-    maxWidth: 320,
-    borderRadius: 30,
-  },
-  gradientButton: {
-    paddingVertical: 18,
-    paddingHorizontal: 32,
-    borderRadius: 30,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  solidButton: {
-    borderRadius: 16,
+  button: {
     paddingVertical: 16,
     paddingHorizontal: 24,
     alignItems: "center",
     justifyContent: "center",
   },
-  disabledButton: {
-    opacity: 0.5,
-  },
   buttonContent: {
     flexDirection: "row",
     alignItems: "center",
@@ -175,19 +119,12 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   accessory: {
-    width: 60,
-    height: 60,
-    borderRadius: 16,
+    width: 56,
+    height: 56,
     alignItems: "center",
     justifyContent: "center",
   },
-  gradientButtonText: {
-    color: "#FFFFFF",
-    fontWeight: "700",
-    fontSize: 18,
-  },
-  solidButtonText: {
-    color: "#FFFFFF",
+  buttonText: {
     fontWeight: "600",
   },
 });

package/src/presentation/components/headers/FeatureHeader.tsx

@@ -11,34 +11,41 @@ import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { LinearGradient } from "expo-linear-gradient";
 
 export interface FeatureHeaderProps {
   readonly imageSource: ImageSourcePropType;
   readonly description: string;
-  readonly gradientColors?: readonly [string, string, ...string[]];
   readonly minHeight?: number;
 }
 
 export const FeatureHeader: React.FC<FeatureHeaderProps> = ({
   imageSource,
   description,
-  gradientColors = ["rgba(0,0,0,0.3)", "rgba(0,0,0,0.1)", "rgba(0,0,0,0.4)"],
   minHeight = 200,
 }) => {
   const tokens = useAppDesignTokens();
 
   return (
     <>
-      <View style={styles.headerContainer}>
+      <View
+        style={[
+          styles.headerContainer,
+          { borderColor: tokens.colors.border },
+        ]}
+      >
         <ImageBackground
           source={imageSource}
           style={[styles.heroImage, { minHeight }]}
           imageStyle={styles.heroImageStyle}
         >
-          <LinearGradient
-            colors={gradientColors}
-            style={[styles.gradient, { minHeight }]}
+          <View
+            style={[
+              styles.overlay,
+              {
+                minHeight,
+                backgroundColor: tokens.colors.modalOverlay,
+              },
+            ]}
           />
         </ImageBackground>
       </View>
@@ -65,7 +72,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     overflow: "hidden",
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
   },
   heroImage: {
     width: "100%",
@@ -73,7 +79,7 @@ const styles = StyleSheet.create({
   heroImageStyle: {
     borderRadius: 20,
   },
-  gradient: {
+  overlay: {
     flex: 1,
   },
   description: {

package/src/presentation/components/image-picker/DualImagePicker.tsx

@@ -17,8 +17,6 @@ export interface DualImagePickerProps {
   readonly onSelectTarget: () => void;
   readonly sourcePlaceholder: string;
   readonly targetPlaceholder: string;
-  readonly sourceGradient?: ImagePickerBoxProps["gradientColors"];
-  readonly targetGradient?: ImagePickerBoxProps["gradientColors"];
   readonly variant?: ImagePickerBoxProps["variant"];
   readonly layout?: "horizontal" | "vertical";
 }
@@ -31,8 +29,6 @@ export const DualImagePicker: React.FC<DualImagePickerProps> = ({
   onSelectTarget,
   sourcePlaceholder,
   targetPlaceholder,
-  sourceGradient = ["#667eea", "#764ba2"],
-  targetGradient = ["#f093fb", "#f5576c"],
   variant = "portrait",
   layout = "horizontal",
 }) => {
@@ -53,7 +49,6 @@ export const DualImagePicker: React.FC<DualImagePickerProps> = ({
           isDisabled={isDisabled}
           onPress={onSelectSource}
           placeholderText={sourcePlaceholder}
-          gradientColors={sourceGradient}
           variant={variant}
         />
       </View>
@@ -64,7 +59,6 @@ export const DualImagePicker: React.FC<DualImagePickerProps> = ({
           isDisabled={isDisabled}
           onPress={onSelectTarget}
           placeholderText={targetPlaceholder}
-          gradientColors={targetGradient}
           variant={variant}
         />
       </View>

package/src/presentation/components/image-picker/ImagePickerBox.tsx

@@ -1,6 +1,6 @@
 /**
  * ImagePickerBox Component
- * Generic image picker box with gradient design
+ * Generic image picker box with solid color design
  * Props-driven for 100+ apps compatibility
  */
 
@@ -17,14 +17,12 @@ import {
   useAppDesignTokens,
   AtomicIcon,
 } from "@umituz/react-native-design-system";
-import { LinearGradient } from "expo-linear-gradient";
 
 export interface ImagePickerBoxProps {
   readonly imageUri: string | null;
   readonly isDisabled?: boolean;
   readonly onPress: () => void;
   readonly placeholderText: string;
-  readonly gradientColors?: readonly [string, string, ...string[]];
   readonly variant?: "portrait" | "square" | "landscape";
   readonly size?: "sm" | "md" | "lg";
   readonly uploadIcon?: string;
@@ -44,7 +42,6 @@ export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
   isDisabled = false,
   onPress,
   placeholderText,
-  gradientColors = ["#667eea", "#764ba2"],
   variant = "portrait",
   size = "md",
   uploadIcon = "cloud-upload-outline",
@@ -70,42 +67,57 @@ export const ImagePickerBox: React.FC<ImagePickerBoxProps> = ({
         {imageUri ? (
           <View style={styles.imageContainer}>
             <Image source={{ uri: imageUri }} style={styles.image} />
-            <LinearGradient
-              colors={["transparent", "rgba(0,0,0,0.3)"]}
-              style={styles.imageOverlay}
+            <View
+              style={[
+                styles.imageOverlay,
+                { backgroundColor: tokens.colors.modalOverlay },
+              ]}
             >
               <View
                 style={[
                   styles.editBadge,
-                  { backgroundColor: `${gradientColors[1]}E6` },
+                  { backgroundColor: tokens.colors.primary },
                 ]}
               >
                 <AtomicIcon
                   name={editIcon}
                   customSize={Math.round(16 * multiplier)}
-                  customColor="#FFFFFF"
+                  customColor={tokens.colors.textInverse}
                 />
               </View>
-            </LinearGradient>
+            </View>
           </View>
         ) : (
-          <LinearGradient colors={gradientColors} style={styles.placeholder}>
+          <View
+            style={[
+              styles.placeholder,
+              { backgroundColor: tokens.colors.primary },
+            ]}
+          >
             <View style={styles.placeholderContent}>
-              <View style={styles.uploadIconContainer}>
+              <View
+                style={[
+                  styles.uploadIconContainer,
+                  { backgroundColor: tokens.colors.surface },
+                ]}
+              >
                 <AtomicIcon
                   name={uploadIcon}
                   customSize={iconSize}
-                  customColor="#FFFFFF"
+                  customColor={tokens.colors.primary}
                 />
               </View>
               <AtomicText
                 type="bodyMedium"
-                style={[styles.placeholderText, { color: "#FFFFFF" }]}
+                style={[
+                  styles.placeholderText,
+                  { color: tokens.colors.textInverse },
+                ]}
               >
                 {placeholderText}
               </AtomicText>
             </View>
-          </LinearGradient>
+          </View>
         )}
       </TouchableOpacity>
     </View>
@@ -153,7 +165,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
   uploadIconContainer: {
-    backgroundColor: "rgba(255,255,255,0.2)",
     borderRadius: 40,
     padding: 16,
     marginBottom: 12,

package/src/presentation/components/modals/SettingsSheet.tsx

@@ -53,7 +53,10 @@ export const SettingsSheet: React.FC<SettingsSheetProps> = ({
       animationType="slide"
       onRequestClose={onClose}
     >
-      <Pressable style={styles.backdrop} onPress={handleBackdropPress}>
+      <Pressable
+        style={[styles.backdrop, { backgroundColor: tokens.colors.modalOverlay }]}
+        onPress={handleBackdropPress}
+      >
         <Pressable
           style={[
             styles.sheet,
@@ -102,7 +105,6 @@ export const SettingsSheet: React.FC<SettingsSheetProps> = ({
 const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
     justifyContent: "flex-end",
   },
   sheet: {

package/src/presentation/components/result/ResultImageCard.tsx

@@ -11,7 +11,6 @@ import {
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { LinearGradient } from "expo-linear-gradient";
 import type { ResultImageConfig } from "../../types/result-config.types";
 import { DEFAULT_RESULT_CONFIG } from "../../types/result-config.types";
 
@@ -45,12 +44,12 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
 
   const badgeBackground = useMemo(() => {
     if (cfg.badgeStyle === "light") {
-      return "rgba(255, 255, 255, 0.9)";
+      return tokens.colors.surface;
     } else if (cfg.badgeStyle === "dark") {
-      return "rgba(0, 0, 0, 0.6)";
+      return tokens.colors.modalOverlay;
     }
-    return null;
-  }, [cfg.badgeStyle]);
+    return tokens.colors.primary;
+  }, [cfg.badgeStyle, tokens]);
 
   const styles = useMemo(
     () =>
@@ -76,24 +75,17 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
           gap: 4,
           paddingHorizontal: 10,
           paddingVertical: 5,
-          backgroundColor: badgeBackground ?? undefined,
+          backgroundColor: badgeBackground,
           borderRadius: 12,
           overflow: "hidden",
         },
-        gradientBadge: {
-          flexDirection: "row",
-          alignItems: "center",
-          gap: 4,
-          paddingHorizontal: 10,
-          paddingVertical: 5,
-        },
         badgeText: {
           fontSize: 10,
           fontWeight: "700",
           color:
             cfg.badgeStyle === "light"
               ? tokens.colors.textPrimary
-              : "#FFFFFF",
+              : tokens.colors.textInverse,
           letterSpacing: 0.5,
         },
       }),
@@ -104,35 +96,20 @@ export const ResultImageCard: React.FC<ResultImageCardProps> = ({
     if (!cfg.showBadge) return null;
 
     const iconColor =
-      cfg.badgeStyle === "light" ? tokens.colors.primary : "#FFFFFF";
+      cfg.badgeStyle === "light"
+        ? tokens.colors.primary
+        : tokens.colors.textInverse;
 
-    const badgeContent = (
-      <>
+    return (
+      <View style={styles.badge}>
         <AtomicIcon
           name={cfg.badgeIcon ?? "sparkles"}
           size="xs"
           customColor={iconColor}
         />
         <AtomicText style={styles.badgeText}>{badgeText}</AtomicText>
-      </>
+      </View>
     );
-
-    if (cfg.badgeStyle === "gradient") {
-      return (
-        <View style={styles.badge}>
-          <LinearGradient
-            colors={[tokens.colors.primary, tokens.colors.secondary]}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            style={styles.gradientBadge}
-          >
-            {badgeContent}
-          </LinearGradient>
-        </View>
-      );
-    }
-
-    return <View style={styles.badge}>{badgeContent}</View>;
   };
 
   return (