@umituz/react-native-onboarding 3.5.3 → 3.5.4

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.5.3",
+  "version": "3.5.4",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
-    "typecheck": "echo 'TypeScript validation passed'",
-    "lint": "echo 'Lint passed'",
-    "version:patch": "npm version patch -m 'chore: release v%s'",
-    "version:minor": "npm version minor -m 'chore: release v%s'",
-    "version:major": "npm version major -m 'chore: release v%s'"
+    "typecheck": "npx tsc --noEmit 2>&1",
+    "lint": "eslint . --fix"
   },
   "keywords": [
     "react-native",
@@ -31,10 +28,10 @@
     "url": "https://github.com/umituz/react-native-onboarding"
   },
   "peerDependencies": {
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-design-system": "^2.1.0",
     "@expo/vector-icons": ">=14.0.0",
+    "@umituz/react-native-design-system": "^2.1.0",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-storage": "latest",
     "expo-image": ">=2.0.0",
     "expo-linear-gradient": ">=13.0.0",
     "expo-video": ">=1.0.0",
@@ -44,19 +41,28 @@
     "zustand": "^4.5.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@umituz/react-native-storage": "latest",
-    "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-design-system": "^2.1.0",
     "@expo/vector-icons": "^14.0.0",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/datetimepicker": "^8.5.1",
+    "@react-native/eslint-config": "^0.83.1",
+    "@types/react": "~19.1.10",
+    "@types/react-native": "^0.72.8",
+    "@typescript-eslint/eslint-plugin": "^8.50.1",
+    "@typescript-eslint/parser": "^8.50.1",
+    "@umituz/react-native-design-system": "^2.1.0",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-storage": "latest",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "expo-image": "~2.0.0",
     "expo-linear-gradient": "^15.0.7",
     "expo-video": "~2.0.0",
-    "zustand": "^5.0.0",
-    "@types/react": "~19.1.10",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "^5.6.0",
-    "typescript": "~5.9.2"
+    "typescript": "~5.9.2",
+    "zustand": "^5.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/domain/entities/OnboardingQuestion.ts

@@ -43,6 +43,11 @@ export interface QuestionOption {
    * Optional value (if different from label)
    */
   value?: string;
+
+  /**
+   * Type of icon: 'emoji' or 'icon' (default: 'icon')
+   */
+  iconType?: 'emoji' | 'icon';
 }
 
 /**
@@ -145,6 +150,11 @@ export interface OnboardingQuestion {
    */
   icon?: string;
 
+  /**
+   * Type of icon: 'emoji' or 'icon' (default: 'icon')
+   */
+  iconType?: 'emoji' | 'icon';
+
   /**
    * Skip this question if condition is met
    * @param answers - Previous answers

package/src/infrastructure/hooks/useOnboardingNavigation.ts

@@ -49,7 +49,7 @@ export const useOnboardingNavigation = (
       await onComplete();
     }
     // Emit event for app-level handling
-    /* eslint-disable-next-line no-console */
+     
     if (__DEV__) console.log("[useOnboardingNavigation] Emitting onboarding-complete event");
     DeviceEventEmitter.emit("onboarding-complete");
   }, [onComplete]);

package/src/infrastructure/services/{OnboardingSlideService.ts → SlideManager.ts}

@@ -9,9 +9,9 @@ import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
 
 /**
- * Service for managing onboarding slide operations
+ * SlideManager
  */
-export class OnboardingSlideService {
+export class SlideManager {
   /**
    * Filter slides based on skipIf conditions
    * @param slides - All available slides

package/src/infrastructure/services/{OnboardingValidationService.ts → ValidationManager.ts}

@@ -8,9 +8,9 @@
 import type { OnboardingQuestion } from "../../domain/entities/OnboardingQuestion";
 
 /**
- * Service for validating onboarding question answers
+ * ValidationManager
  */
-export class OnboardingValidationService {
+export class ValidationManager {
   /**
    * Validate answer against question validation rules
    * @param question - The question to validate against

package/src/presentation/components/BaseSlide.tsx

@@ -0,0 +1,41 @@
+/**
+ * BaseSlide Component
+ * Single Responsibility: Provide a base layout for all onboarding slides
+ */
+
+import React from "react";
+import { View, StyleSheet, ScrollView } from "react-native";
+
+export interface BaseSlideProps {
+    children: React.ReactNode;
+}
+
+export const BaseSlide = ({ children }: BaseSlideProps) => {
+    return (
+        <ScrollView
+            style={styles.container}
+            contentContainerStyle={styles.content}
+            showsVerticalScrollIndicator={false}
+            bounces={false}
+        >
+            <View style={styles.slideContainer}>
+                {children}
+            </View>
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flexGrow: 1,
+        justifyContent: "center",
+        paddingVertical: 40,
+    },
+    slideContainer: {
+        paddingHorizontal: 24,
+        alignItems: "center",
+    },
+});

package/src/presentation/components/OnboardingFooter.tsx

@@ -35,8 +35,8 @@ export const OnboardingFooter = ({
   const { colors } = useOnboardingTheme();
 
   const buttonText = isLastSlide
-    ? getStartedButtonText || t("onboarding.getStarted") || "Get Started"
-    : nextButtonText || t("general.continue") || "Continue";
+    ? getStartedButtonText || t("onboarding.getStarted")
+    : nextButtonText || t("general.continue");
 
   const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
 
@@ -84,7 +84,7 @@ export const OnboardingFooter = ({
           type="labelSmall"
           style={[styles.progressText, { color: colors.progressTextColor }]}
         >
-          {currentIndex + 1} {t("general.of") || "of"} {totalSlides}
+          {currentIndex + 1} {t("general.of")} {totalSlides}
         </AtomicText>
       )}
     </View>

package/src/presentation/components/OnboardingHeader.tsx

@@ -24,7 +24,7 @@ export const OnboardingHeader = ({
   const { t } = useLocalization();
   const { colors } = useOnboardingTheme();
 
-  const skipText = skipButtonText || t("onboarding.skip") || "Skip";
+  const skipText = skipButtonText || t("onboarding.skip");
 
   return (
     <View style={styles.header}>

package/src/presentation/components/OnboardingResetSetting.tsx

@@ -15,9 +15,9 @@ export interface OnboardingResetSettingProps {
 
 export const OnboardingResetSetting = ({
     onReset,
-    title = "Reset Onboarding",
-    description = "Show onboarding flow again",
-    iconName = "refresh-outline",
+    title,
+    description,
+    iconName = "extension-puzzle",
     iconColor,
     titleColor,
     visible = __DEV__,

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -14,7 +14,6 @@ import { OnboardingSlide as OnboardingSlideComponent } from "./OnboardingSlide";
 import { QuestionSlide } from "./QuestionSlide";
 import { OnboardingFooter } from "./OnboardingFooter";
 import { BackgroundVideo } from "./BackgroundVideo";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingScreenContentProps {
   containerStyle?: any;

package/src/presentation/components/OnboardingSlide.tsx

@@ -1,106 +1,121 @@
+/**
+ * OnboardingSlide Component
+ * Single Responsibility: Render a single onboarding slide
+ */
+
 import React from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
-import type { OnboardingThemeVariant } from "../../domain/entities/OnboardingTheme";
+import { BaseSlide } from "./BaseSlide";
 import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingSlideProps {
   slide: OnboardingSlideType;
-  variant?: OnboardingThemeVariant;
+  variant?: "default" | "card" | "minimal" | "fullscreen";
 }
 
 export const OnboardingSlide = ({
   slide,
-  variant = "default"
+  variant = "default",
 }: OnboardingSlideProps) => {
   const { colors } = useOnboardingTheme();
 
+  const hasIcon = !!slide.icon;
   const isEmoji = slide.iconType === 'emoji';
-  const hasIcon = slide.icon && slide.icon.length > 0;
   const iconSize = variant === "minimal" ? 80 : 72;
 
   return (
-    <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false} bounces={false}>
-      <View style={styles.slideContainer}>
-        {hasIcon && (
-          <View style={styles.iconBox}>
-            {isEmoji ? (
-              <AtomicText style={{ fontSize: iconSize }}>{slide.icon}</AtomicText>
-            ) : (
-              <AtomicIcon name={slide.icon} customSize={iconSize} customColor={colors.iconColor} />
-            )}
-          </View>
-        )}
+    <BaseSlide>
+      {hasIcon && (
+        <View style={styles.iconBox}>
+          {isEmoji ? (
+            <AtomicText style={{ fontSize: iconSize }}>{slide.icon}</AtomicText>
+          ) : (
+            <AtomicIcon
+              name={slide.icon as any}
+              customSize={iconSize}
+              customColor={colors.iconColor}
+            />
+          )}
+        </View>
+      )}
 
-        <AtomicText type="headlineMedium" style={[styles.title, { color: colors.textColor }]}>
-          {slide.title}
-        </AtomicText>
+      <AtomicText
+        type="displaySmall"
+        style={[styles.title, { color: colors.textColor }]}
+      >
+        {slide.title}
+      </AtomicText>
 
-        <AtomicText type="bodyLarge" style={[styles.description, { color: colors.subTextColor }]}>
+      {slide.description && (
+        <AtomicText
+          type="bodyLarge"
+          style={[styles.description, { color: colors.subTextColor }]}
+        >
           {slide.description}
         </AtomicText>
+      )}
 
-        {slide.features && slide.features.length > 0 && (
-          <View style={styles.featuresContainer}>
-            {slide.features.map((feature, index) => (
-              <View key={index} style={styles.featureItem}>
-                <AtomicIcon name="checkmark-circle" size="sm" customColor={colors.iconColor} />
-                <AtomicText type="bodyMedium" style={[styles.featureText, { color: colors.textColor }]}>
-                  {feature}
-                </AtomicText>
-              </View>
-            ))}
-          </View>
-        )}
-      </View>
-    </ScrollView>
+      {slide.features && slide.features.length > 0 && (
+        <View style={styles.features}>
+          {slide.features.map((feature, index) => (
+            <View
+              key={index}
+              style={[
+                styles.featureItem,
+                { backgroundColor: colors.featureItemBg },
+              ]}
+            >
+              <AtomicIcon
+                name="checkmark-circle"
+                size="sm"
+                customColor={colors.iconColor}
+              />
+              <AtomicText
+                type="bodyMedium"
+                style={[styles.featureText, { color: colors.textColor }]}
+              >
+                {feature}
+              </AtomicText>
+            </View>
+          ))}
+        </View>
+      )}
+    </BaseSlide>
   );
 };
 
 const styles = StyleSheet.create({
-  content: {
-    flexGrow: 1,
-    paddingTop: 40,
-  },
-  slideContainer: {
-    paddingHorizontal: 30,
-    alignItems: "center",
-  },
   iconBox: {
-    marginBottom: 40,
-    height: 120,
+    marginBottom: 32,
+    height: 100,
     justifyContent: "center",
     alignItems: "center",
   },
   title: {
+    fontWeight: "800",
     textAlign: "center",
     marginBottom: 16,
-    fontWeight: "800",
   },
   description: {
     textAlign: "center",
     lineHeight: 24,
     marginBottom: 32,
-    opacity: 0.9,
   },
-  featuresContainer: {
+  features: {
     width: "100%",
     gap: 12,
-    marginTop: 8,
   },
   featureItem: {
     flexDirection: "row",
     alignItems: "center",
+    padding: 16,
+    borderRadius: 16,
     gap: 12,
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-    padding: 12,
-    borderRadius: 12,
   },
   featureText: {
+    fontWeight: "600",
     flex: 1,
   },
 });
-
-
-

package/src/presentation/components/QuestionSlide.tsx

@@ -1,23 +1,29 @@
+/**
+ * QuestionSlide Component
+ * Single Responsibility: Render a question-type slide
+ */
+
 import React from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
-import type { OnboardingThemeVariant } from "../../domain/entities/OnboardingTheme";
 import { QuestionSlideHeader } from "./QuestionSlideHeader";
 import { QuestionRenderer } from "./QuestionRenderer";
+import { BaseSlide } from "./BaseSlide";
 import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface QuestionSlideProps {
   slide: OnboardingSlide;
   value: any;
   onChange: (value: any) => void;
-  variant?: OnboardingThemeVariant;
+  variant?: "default" | "card" | "minimal" | "fullscreen";
 }
 
 export const QuestionSlide = ({
   slide,
   value,
   onChange,
+  variant: _variant = "default",
 }: QuestionSlideProps) => {
   const { colors } = useOnboardingTheme();
   const { question } = slide;
@@ -25,37 +31,29 @@ export const QuestionSlide = ({
   if (!question) return null;
 
   return (
-    <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false} bounces={false}>
-      <View style={styles.slideContainer}>
-        <QuestionSlideHeader slide={slide} />
-
-        <View style={styles.questionContainer}>
-          <QuestionRenderer question={question} value={value} onChange={onChange} />
-        </View>
+    <BaseSlide>
+      <QuestionSlideHeader slide={slide} />
 
-        {question.validation?.required && !value && (
-          <AtomicText
-            type="labelSmall"
-            style={[styles.requiredHint, { color: colors.errorColor }]}
-          >
-            * This field is required
-          </AtomicText>
-        )}
+      <View style={styles.questionContainer}>
+        <QuestionRenderer question={question} value={value} onChange={onChange} />
       </View>
-    </ScrollView>
+
+      {question.validation?.required && !value && (
+        <AtomicText
+          type="labelSmall"
+          style={[styles.requiredHint, { color: colors.errorColor }]}
+        >
+          * This field is required
+        </AtomicText>
+      )}
+    </BaseSlide>
   );
 };
 
 const styles = StyleSheet.create({
-  content: {
-    flexGrow: 1,
-    paddingTop: 40,
-  },
-  slideContainer: {
-    paddingHorizontal: 24,
-  },
   questionContainer: {
     marginTop: 24,
+    width: "100%",
   },
   requiredHint: {
     marginTop: 12,
@@ -63,5 +61,3 @@ const styles = StyleSheet.create({
     fontWeight: "600",
   },
 });
-
-

package/src/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface MultipleChoiceQuestionProps {
@@ -14,10 +15,7 @@ export const MultipleChoiceQuestion = ({
   value = [],
   onChange,
 }: MultipleChoiceQuestionProps) => {
-  const tokens = useAppDesignTokens();
-
-  const isEmoji = (icon: string) =>
-    /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
+  const { colors } = useOnboardingTheme();
 
   const handleToggle = (optionId: string) => {
     const newValue = value.includes(optionId)
@@ -29,10 +27,10 @@ export const MultipleChoiceQuestion = ({
     }
     onChange(newValue);
   };
-
   const renderOption = (option: QuestionOption) => {
     const isSelected = value.includes(option.id);
-    const textColor = isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary;
+    const textColor = isSelected ? colors.textColor : colors.subTextColor;
+    const isEmoji = option.iconType === 'emoji';
 
     return (
       <TouchableOpacity
@@ -40,8 +38,8 @@ export const MultipleChoiceQuestion = ({
         style={[
           styles.option,
           {
-            backgroundColor: isSelected ? tokens.colors.primary + '10' : tokens.colors.surface,
-            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+            backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
+            borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
           }
         ]}
         onPress={() => handleToggle(option.id)}
@@ -49,7 +47,7 @@ export const MultipleChoiceQuestion = ({
       >
         {option.icon && (
           <View style={styles.optionIcon}>
-            {isEmoji(option.icon) ? (
+            {isEmoji ? (
               <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
             ) : (
               <AtomicIcon name={option.icon as any} customSize={24} customColor={textColor} />
@@ -62,13 +60,13 @@ export const MultipleChoiceQuestion = ({
         <View style={[
           styles.checkbox,
           {
-            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-            backgroundColor: isSelected ? tokens.colors.primary : 'transparent',
+            borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
+            backgroundColor: isSelected ? colors.iconColor : 'transparent',
             borderWidth: isSelected ? 0 : 2,
           }
         ]}>
           {isSelected && (
-            <AtomicIcon name="checkmark" customSize={16} customColor="#FFFFFF" />
+            <AtomicIcon name="checkmark" customSize={16} customColor={colors.buttonTextColor} />
           )}
         </View>
       </TouchableOpacity>
@@ -79,7 +77,7 @@ export const MultipleChoiceQuestion = ({
     <View style={styles.container}>
       {question.options?.map(renderOption)}
       {question.validation?.maxSelections && (
-        <AtomicText type="labelSmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
+        <AtomicText type="labelSmall" style={[styles.hint, { color: colors.subTextColor }]}>
           Select up to {question.validation.maxSelections} options
         </AtomicText>
       )}

package/src/presentation/components/questions/RatingQuestion.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface RatingQuestionProps {
@@ -14,7 +15,7 @@ export const RatingQuestion = ({
   value = 0,
   onChange,
 }: RatingQuestionProps) => {
-  const tokens = useAppDesignTokens();
+  const { colors } = useOnboardingTheme();
   const max = question.validation?.max ?? 5;
 
   return (
@@ -27,14 +28,14 @@ export const RatingQuestion = ({
               <AtomicIcon
                 name={isFilled ? "star" : "star-outline"}
                 customSize={48}
-                customColor={isFilled ? tokens.colors.warning : tokens.colors.border}
+                customColor={isFilled ? "#FFD700" : colors.subTextColor}
               />
             </TouchableOpacity>
           );
         })}
       </View>
       {value > 0 && (
-        <AtomicText type="headlineSmall" style={[styles.valueText, { color: tokens.colors.textPrimary }]}>
+        <AtomicText type="headlineSmall" style={[styles.valueText, { color: colors.textColor }]}>
           {value} / {max}
         </AtomicText>
       )}

package/src/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface SingleChoiceQuestionProps {
@@ -14,14 +15,12 @@ export const SingleChoiceQuestion = ({
   value,
   onChange,
 }: SingleChoiceQuestionProps) => {
-  const tokens = useAppDesignTokens();
-
-  const isEmoji = (icon: string) =>
-    /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
+  const { colors } = useOnboardingTheme();
 
   const renderOption = (option: QuestionOption) => {
     const isSelected = value === option.id;
-    const textColor = isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary;
+    const textColor = isSelected ? colors.textColor : colors.subTextColor;
+    const isEmoji = option.iconType === 'emoji';
 
     return (
       <TouchableOpacity
@@ -29,8 +28,8 @@ export const SingleChoiceQuestion = ({
         style={[
           styles.option,
           {
-            backgroundColor: isSelected ? tokens.colors.primary + '10' : tokens.colors.surface,
-            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+            backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
+            borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
           }
         ]}
         onPress={() => onChange(option.id)}
@@ -38,7 +37,7 @@ export const SingleChoiceQuestion = ({
       >
         {option.icon && (
           <View style={styles.optionIcon}>
-            {isEmoji(option.icon) ? (
+            {isEmoji ? (
               <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
             ) : (
               <AtomicIcon
@@ -55,7 +54,7 @@ export const SingleChoiceQuestion = ({
         <View style={[
           styles.radio,
           {
-            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+            borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
             borderWidth: isSelected ? 6 : 2,
           }
         ]} />

package/src/presentation/components/questions/TextInputQuestion.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, TextInput, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface TextInputQuestionProps {
@@ -14,7 +15,7 @@ export const TextInputQuestion = ({
   value = "",
   onChange,
 }: TextInputQuestionProps) => {
-  const tokens = useAppDesignTokens();
+  const { colors } = useOnboardingTheme();
   const { validation } = question;
 
   return (
@@ -23,15 +24,15 @@ export const TextInputQuestion = ({
         style={[
           styles.input,
           {
-            backgroundColor: tokens.colors.surface,
-            borderColor: tokens.colors.borderLight,
-            color: tokens.colors.textPrimary,
+            backgroundColor: colors.featureItemBg,
+            borderColor: colors.headerButtonBorder,
+            color: colors.textColor,
           }
         ]}
         value={value}
         onChangeText={onChange}
-        placeholder={question.placeholder || "Type your answer..."}
-        placeholderTextColor={tokens.colors.textSecondary}
+        placeholder={question.placeholder}
+        placeholderTextColor={colors.subTextColor}
         maxLength={validation?.maxLength}
         multiline={(validation?.maxLength ?? 0) > 100}
         numberOfLines={(validation?.maxLength ?? 0) > 100 ? 5 : 1}
@@ -39,7 +40,7 @@ export const TextInputQuestion = ({
         autoCorrect={true}
       />
       {validation?.maxLength && (
-        <AtomicText type="labelSmall" style={[styles.charCount, { color: tokens.colors.textSecondary }]}>
+        <AtomicText type="labelSmall" style={[styles.charCount, { color: colors.subTextColor }]}>
           {value.length} / {validation.maxLength}
         </AtomicText>
       )}

package/src/presentation/hooks/useOnboardingScreenState.ts

@@ -9,8 +9,8 @@ import { useOnboarding } from "../../infrastructure/storage/OnboardingStore";
 import { useOnboardingNavigation } from "../../infrastructure/hooks/useOnboardingNavigation";
 import { useOnboardingAnswers } from "../../infrastructure/hooks/useOnboardingAnswers";
 import { useOnboardingContainerStyle } from "./useOnboardingContainerStyle";
-import { OnboardingSlideService } from "../../infrastructure/services/OnboardingSlideService";
-import { OnboardingValidationService } from "../../infrastructure/services/OnboardingValidationService";
+import { SlideManager } from "../../infrastructure/services/SlideManager";
+import { ValidationManager } from "../../infrastructure/services/ValidationManager";
 import { shouldUseGradient } from "../../infrastructure/utils/gradientUtils";
 
 export interface UseOnboardingScreenStateProps {
@@ -52,7 +52,7 @@ export function useOnboardingScreenState({
       return [];
     }
     const userData = onboardingStore.userData;
-    return OnboardingSlideService.filterSlides(slides, userData);
+    return SlideManager.filterSlides(slides, userData);
   }, [slides, onboardingStore.userData]);
 
   // Navigation hook
@@ -82,7 +82,7 @@ export function useOnboardingScreenState({
 
   // Get current slide
   const currentSlide = useMemo(
-    () => OnboardingSlideService.getSlideAtIndex(filteredSlides, currentIndex),
+    () => SlideManager.getSlideAtIndex(filteredSlides, currentIndex),
     [filteredSlides, currentIndex],
   );
 
@@ -97,14 +97,14 @@ export function useOnboardingScreenState({
   // Handle next slide with useCallback for performance
   const handleNext = useCallback(async () => {
     if (!currentSlide) return;
-    
+
     try {
       await saveCurrentAnswer(currentSlide);
       if (isLastSlide) {
         await completeOnboarding();
       } else {
         goToNext();
-        const nextSlide = OnboardingSlideService.getSlideAtIndex(
+        const nextSlide = SlideManager.getSlideAtIndex(
           filteredSlides,
           currentIndex + 1,
         );
@@ -123,7 +123,7 @@ export function useOnboardingScreenState({
   const handlePrevious = useCallback(() => {
     try {
       goToPrevious();
-      const prevSlide = OnboardingSlideService.getSlideAtIndex(
+      const prevSlide = SlideManager.getSlideAtIndex(
         filteredSlides,
         currentIndex - 1,
       );
@@ -156,7 +156,7 @@ export function useOnboardingScreenState({
     if (!currentSlide?.question) {
       return true;
     }
-    return OnboardingValidationService.validateAnswer(
+    return ValidationManager.validateAnswer(
       currentSlide.question,
       currentAnswer,
     );

package/src/presentation/providers/OnboardingThemeProvider.tsx

@@ -17,6 +17,7 @@ interface OnboardingColors {
     iconBg: string;
     iconBorder: string;
     errorColor: string;
+    featureItemBg: string;
 }
 
 interface OnboardingThemeValue {
@@ -24,7 +25,7 @@ interface OnboardingThemeValue {
     useGradient: boolean;
 }
 
-const OnboardingTheme = createContext<OnboardingThemeValue | null>(null);
+const OnboardingThemeInternal = createContext<OnboardingThemeValue | undefined>(undefined);
 
 export interface OnboardingThemeProviderProps {
     children: React.ReactNode;
@@ -38,28 +39,29 @@ export const OnboardingThemeProvider = ({
     const tokens = useAppDesignTokens();
 
     const colors = useMemo<OnboardingColors>(() => {
+        const primaryContent = tokens.colors.onPrimary || "#FFFFFF";
+
         if (useGradient) {
-            // For gradient backgrounds (Christmas gradients), use white text
             return {
-                iconColor: "#FFFFFF",
-                textColor: "#FFFFFF",
-                subTextColor: "rgba(255, 255, 255, 0.85)",
-                buttonBg: "#FFFFFF",
+                iconColor: primaryContent,
+                textColor: primaryContent,
+                subTextColor: primaryContent + "CC",
+                buttonBg: primaryContent,
                 buttonTextColor: tokens.colors.primary,
-                progressBarBg: "rgba(255, 255, 255, 0.25)",
-                progressFillColor: "#FFFFFF",
-                dotColor: "rgba(255, 255, 255, 0.4)",
-                activeDotColor: "#FFFFFF",
-                progressTextColor: "rgba(255, 255, 255, 0.85)",
-                headerButtonBg: "rgba(255, 255, 255, 0.2)",
-                headerButtonBorder: "rgba(255, 255, 255, 0.35)",
-                iconBg: "rgba(255, 255, 255, 0.2)",
-                iconBorder: "rgba(255, 255, 255, 0.35)",
+                progressBarBg: primaryContent + "40",
+                progressFillColor: primaryContent,
+                dotColor: primaryContent + "66",
+                activeDotColor: primaryContent,
+                progressTextColor: primaryContent + "CC",
+                headerButtonBg: primaryContent + "33",
+                headerButtonBorder: primaryContent + "59",
+                iconBg: primaryContent + "33",
+                iconBorder: primaryContent + "59",
                 errorColor: "#FFCDD2",
+                featureItemBg: primaryContent + "1A",
             };
         }
 
-        // For non-gradient backgrounds, use theme colors
         return {
             iconColor: tokens.colors.primary,
             textColor: tokens.colors.textPrimary,
@@ -76,6 +78,7 @@ export const OnboardingThemeProvider = ({
             iconBg: tokens.colors.primary + '15',
             iconBorder: tokens.colors.primary + '30',
             errorColor: tokens.colors.error,
+            featureItemBg: tokens.colors.surfaceSecondary || tokens.colors.surfaceVariant || "rgba(0,0,0,0.05)",
         };
     }, [tokens, useGradient]);
 
@@ -85,14 +88,14 @@ export const OnboardingThemeProvider = ({
     );
 
     return (
-        <OnboardingTheme.Provider value={value}>
+        <OnboardingThemeInternal.Provider value={value}>
             {children}
-        </OnboardingTheme.Provider>
+        </OnboardingThemeInternal.Provider>
     );
 };
 
 export const useOnboardingTheme = (): OnboardingThemeValue => {
-    const theme = useContext(OnboardingTheme);
+    const theme = useContext(OnboardingThemeInternal);
     if (!theme) {
         throw new Error('useOnboardingTheme must be used within OnboardingThemeProvider');
     }

package/src/presentation/screens/OnboardingScreen.tsx

@@ -67,7 +67,7 @@ export const OnboardingScreen = ({
   showDots = true,
   showProgressText = true,
   storageKey,
-  autoComplete = false,
+  autoComplete: _autoComplete = false,
   renderHeader,
   renderFooter,
   renderSlide,