@klyftig/mobile-ui 1.3.10 → 1.4.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.10",
+  "version": "1.4.0",
   "scripts": {
-    "pack-install": "npm pack && mv klyftig-ui-*.tgz /tmp/klyftig-ui-local.tgz && cd ../../mobile && npm install /tmp/klyftig-ui-local.tgz"
+    "sync": "bash scripts/sync-to-kaelo.sh",
+    "pack-install": "npm pack && mv klyftig-mobile-ui-*.tgz /tmp/klyftig-mobile-ui-local.tgz && cd ../kaelo/mobile && npm install /tmp/klyftig-mobile-ui-local.tgz"
   },
   "description": "Klyftig shared UI components for React Native / Expo",
   "main": "src/index.ts",
@@ -23,6 +24,7 @@
     "react-native": ">=0.83.0",
     "expo-glass-effect": "*",
     "expo-linear-gradient": "*",
+    "expo-blur": "*",
     "@expo/vector-icons": "*",
     "react-native-svg": "*",
     "react-native-safe-area-context": "*"

package/src/components/AdaptiveGlassView.tsx

@@ -35,7 +35,9 @@ export const AdaptiveGlassView: React.FC<AdaptiveGlassViewProps> = ({
     // dark shadow or tab-bar region), which makes the control look "darkened"
     // until the user scrolls. A subtle translucent white keeps the appearance
     // consistent while still reading as glass.
-    const baseStyle: ViewStyle = { backgroundColor: 'rgba(255,255,255,0.55)' };
+    // Warm-tinted to match the app ground — a cool white base reads as a grey
+    // patch when it sits over the warm off-white background.
+    const baseStyle: ViewStyle = { backgroundColor: 'rgba(250,249,246,0.55)' };
     return (
       <GlassView
         glassEffectStyle={variant}

package/src/components/CenterDialog.tsx

@@ -79,7 +79,7 @@ const styles = StyleSheet.create({
     padding: 24,
     width: '85%',
     maxWidth: 360,
-    shadowColor: '#000',
+    shadowColor: '#3A3226',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
     shadowRadius: 12,

package/src/components/ErrorBoundary.tsx

@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5F4EF',
+    backgroundColor: colors.background.primary,
     paddingHorizontal: 32,
   },
   emoji: {

package/src/components/FAB.tsx

@@ -198,7 +198,7 @@ const styles = StyleSheet.create({
   fabFallback: {
     backgroundColor: colors.glass.fabFallback,
     elevation: 8,
-    shadowColor: '#000',
+    shadowColor: '#3A3226',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
     shadowRadius: 12,
@@ -239,7 +239,7 @@ const styles = StyleSheet.create({
     borderRadius: SUB_BUTTON_SIZE / 2,
     justifyContent: 'center',
     alignItems: 'center',
-    shadowColor: '#000',
+    shadowColor: '#3A3226',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.25,
     shadowRadius: 4,

package/src/components/GlassButton.tsx

@@ -1,6 +1,9 @@
 import React, { useRef } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, ActivityIndicator, Animated } from 'react-native';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { colors, shadows } from '../theme/colors';
+import { textStyles } from '../theme/typography';
+import { theme } from '../theme/theme';
 
 interface GlassButtonProps {
   title: string;
@@ -156,10 +159,10 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
           ]}
         >
           {loading ? (
-            <ActivityIndicator color="#1A1A1A" size={isCompact ? 'small' : 'large'} />
+            <ActivityIndicator color={colors.text.primary} size={isCompact ? 'small' : 'large'} />
           ) : (
             <>
-              {icon && <Icon name={icon} size={isCompact ? 16 : 20} color="#1A1A1A" style={styles.buttonIcon} />}
+              {icon && <Icon name={icon} size={isCompact ? 16 : 20} color={colors.text.primary} style={styles.buttonIcon} />}
               <Text style={[styles.secondaryButtonText, isCompact && styles.secondaryButtonTextCompact]}>{title}</Text>
             </>
           )}
@@ -176,27 +179,22 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#1A1A1A',
+    backgroundColor: colors.accent.brand,
     borderWidth: 1,
     borderColor: 'rgba(255,255,255,0.15)',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.2,
-    shadowRadius: 16,
-    elevation: 6,
+    ...shadows.lg,
   },
   primaryButtonCompact: {
     height: 40,
-    borderRadius: 10,
+    borderRadius: theme.borderRadius.control,
     paddingHorizontal: 20,
   },
   primaryButtonDisabled: {
     opacity: 0.5,
   },
   primaryButtonText: {
-    fontSize: 16,
-    fontWeight: '700',
-    letterSpacing: 0.5,
+    ...textStyles.subtitle,
+    letterSpacing: 0.2,
     color: '#FFFFFF',
   },
   primaryButtonTextCompact: {
@@ -205,49 +203,41 @@ const styles = StyleSheet.create({
   },
   dangerButton: {
     height: 56,
-    borderRadius: 16,
+    borderRadius: theme.borderRadius.card,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#F44336',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    shadowRadius: 6,
-    elevation: 4,
+    backgroundColor: colors.accent.error,
+    ...shadows.md,
   },
   dangerButtonText: {
-    fontSize: 16,
-    fontWeight: '700',
-    color: '#fff',
-    letterSpacing: 0.5,
+    ...textStyles.subtitle,
+    letterSpacing: 0.2,
+    color: '#FFFFFF',
   },
+  // Tinted with the brand rather than left white-on-white. A white fill with an
+  // 8%-alpha border over the warm ground read as a DISABLED control — there was
+  // no visual difference between "secondary action" and "you cannot press this".
   secondaryButton: {
     height: 56,
-    borderRadius: 16,
+    borderRadius: theme.borderRadius.card,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.accent.brandSoft,
     borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.08)',
+    borderColor: 'rgba(31,94,74,0.14)',
     overflow: 'hidden',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
-    elevation: 0,
   },
   secondaryButtonCompact: {
     height: 40,
-    borderRadius: 10,
+    borderRadius: theme.borderRadius.control,
     paddingHorizontal: 20,
   },
   secondaryButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    letterSpacing: 0.5,
-    color: '#1A1A1A',
+    ...textStyles.subtitle,
+    letterSpacing: 0.2,
+    color: colors.accent.brand,
   },
   secondaryButtonTextCompact: {
     fontSize: 14,
@@ -269,10 +259,12 @@ const styles = StyleSheet.create({
   textButtonNotFull: {
     alignSelf: 'center',
   },
+  // Brand-colored so a bare text action reads as tappable; the old neutral grey
+  // was indistinguishable from disabled helper text.
   textButtonText: {
     fontSize: 15,
     fontWeight: '600',
-    color: '#6B6B6B',
+    color: colors.accent.brand,
   },
   textButtonTextCompact: {
     fontSize: 14,

package/src/components/GlassCard.tsx

@@ -1,9 +1,20 @@
 import React from 'react';
-import { View, StyleSheet, ViewStyle } from 'react-native';
+import { View, StyleSheet, ViewStyle, ViewProps } from 'react-native';
 import { AdaptiveGlassView } from './AdaptiveGlassView';
 import { useTheme } from '../hooks/useTheme';
+import { theme } from '../theme/theme';
+import { shadows } from '../theme/colors';
 
-interface GlassCardProps {
+/**
+ * Extends ViewProps so callers can pass accessibility props (`accessible`,
+ * `accessibilityLabel`, `accessibilityRole`, `testID`, …) straight through to
+ * the underlying view. A card that composes several Texts into one figure
+ * usually wants to expose itself to screen readers as a single element.
+ *
+ * Only the non-glass branch forwards them — the native glass view takes a
+ * fixed prop set, so `useGlass` cards stay presentational.
+ */
+interface GlassCardProps extends Omit<ViewProps, 'style'> {
   children: React.ReactNode;
   style?: ViewStyle;
   intensity?: number;
@@ -17,6 +28,9 @@ export const GlassCard: React.FC<GlassCardProps> = ({
   style,
   padding = 16,
   useGlass = false,
+  intensity: _intensity,
+  tint: _tint,
+  ...viewProps
 }) => {
   const { colors } = useTheme();
 
@@ -34,6 +48,7 @@ export const GlassCard: React.FC<GlassCardProps> = ({
 
   return (
     <View
+      {...viewProps}
       style={[
         styles.card,
         { backgroundColor: colors.background.card, borderColor: colors.border.light },
@@ -48,12 +63,8 @@ export const GlassCard: React.FC<GlassCardProps> = ({
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: 20,
+    borderRadius: theme.borderRadius.card,
     borderWidth: 1,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
-    elevation: 3,
+    ...shadows.md,
   },
 });

package/src/components/GlassContainer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, ViewStyle } from 'react-native';
+import { colors } from '../theme/colors';
 
 interface GlassContainerProps {
   children: React.ReactNode;
@@ -21,6 +22,9 @@ export const GlassContainer: React.FC<GlassContainerProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#FFFFFF',
+    // The app ground. It must stay DARKER than background.card — cards are
+    // separated from the page by contrast rather than by heavy shadow, so a
+    // white ground makes every white card's edge disappear.
+    backgroundColor: colors.background.primary,
   },
 });

package/src/components/GlassFooter.tsx

@@ -0,0 +1,114 @@
+import React, { useCallback } from 'react';
+import { View, StyleSheet, Platform, type ViewStyle, type StyleProp, type LayoutChangeEvent } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { LinearGradient } from 'expo-linear-gradient';
+import { GlassView } from 'expo-glass-effect';
+import { GLASS_AVAILABLE } from '../utils/glass';
+import { colors } from '../theme/colors';
+
+interface GlassFooterProps {
+  children: React.ReactNode;
+  /** Safe-area inset to pad below the content (usually insets.bottom). */
+  bottomInset?: number;
+  /**
+   * Reports the bar's metrics on layout.
+   *
+   * `obstruction` is what a scroll view should reserve: the whole bar plus its
+   * fade. Content is not readable anywhere inside that band — the blur, the
+   * legibility scrim and the gradient all wash it out, not just the button —
+   * so reserving only as far as the button's top edge still leaves the last
+   * element greyed out and looking cut off.
+   */
+  onMetrics?: (metrics: { height: number; obstruction: number }) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Height of the gradient that softens the top edge of the bar. */
+export const GLASS_FOOTER_FADE = 20;
+
+/** Space above the controls, inside the bar. */
+const CONTENT_PADDING_TOP = 10;
+
+/**
+ * A translucent bottom action bar that scroll content passes beneath.
+ *
+ * The point is the affordance: an opaque bar terminates the page, so a screen
+ * that continues below it looks finished when it isn't. Letting content stay
+ * faintly visible through the bar tells the user there is more to scroll.
+ *
+ * Three rendering paths, because no single one covers the fleet:
+ *   - iOS 26+     → the native Liquid Glass material.
+ *   - elsewhere   → expo-blur. Android needs the experimental blur method;
+ *                   without it BlurView renders as a flat translucent fill.
+ *   - either way  → a tinted scrim over the blur keeps button labels legible
+ *                   no matter what scrolls underneath, and a gradient softens
+ *                   the top edge so the bar doesn't read as a hard seam.
+ */
+export const GlassFooter: React.FC<GlassFooterProps> = ({
+  children,
+  bottomInset = 0,
+  onMetrics,
+  style,
+}) => {
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      const height = e.nativeEvent.layout.height;
+      onMetrics?.({ height, obstruction: height + GLASS_FOOTER_FADE });
+    },
+    [onMetrics]
+  );
+
+  return (
+    <View style={[styles.wrap, style]} onLayout={handleLayout} pointerEvents="box-none">
+      <LinearGradient
+        pointerEvents="none"
+        colors={[`${colors.background.primary}00`, colors.background.primary]}
+        style={styles.fade}
+      />
+
+      {GLASS_AVAILABLE ? (
+        <GlassView glassEffectStyle="regular" style={StyleSheet.absoluteFill} />
+      ) : (
+        <BlurView
+          intensity={Platform.OS === 'android' ? 24 : 40}
+          tint="light"
+          // Android's default blur is a no-op; this opts into the real one.
+          experimentalBlurMethod={Platform.OS === 'android' ? 'dimezisBlurView' : undefined}
+          style={StyleSheet.absoluteFill}
+        />
+      )}
+
+      {/* Legibility scrim — the blur alone can't guarantee contrast against
+          arbitrary scrolling content. */}
+      <View pointerEvents="none" style={styles.scrim} />
+
+      <View style={[styles.content, { paddingBottom: bottomInset }]}>{children}</View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrap: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'visible',
+  },
+  fade: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: -GLASS_FOOTER_FADE,
+    height: GLASS_FOOTER_FADE,
+  },
+  scrim: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(250,249,246,0.72)',
+  },
+  content: {
+    paddingHorizontal: 20,
+    paddingTop: CONTENT_PADDING_TOP,
+    gap: 12,
+  },
+});

package/src/components/GlassInput.tsx

@@ -1,7 +1,9 @@
-import React, { useState, useCallback, useEffect, memo } from 'react';
+import React, { useState, useCallback, memo } from 'react';
 import { View, TextInput as RNTextInput, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import type { NativeSyntheticEvent, TextInputContentSizeChangeEventData } from 'react-native';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
+import { colors } from '../theme/colors';
 
 interface GlassInputProps {
   label?: string;
@@ -13,6 +15,13 @@ interface GlassInputProps {
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
   multiline?: boolean;
   numberOfLines?: number;
+  // Only meaningful with multiline. Instead of `inputWrapperMultiline`'s fixed
+  // minHeight (96, a sensible default for a notes/description field), sizes
+  // the box to the actual content: compact for one short line, growing up to
+  // `numberOfLines` only when the value actually needs it. For a title-style
+  // field (e.g. a composite dish name) where most values are short, a fixed
+  // multi-line reservation looks oversized.
+  autoGrow?: boolean;
   // Off by default for fields where iOS would otherwise replace partially-edited
   // multi-word values with its autocorrect suggestion and snap the caret to end.
   autoCorrect?: boolean;
@@ -35,6 +44,13 @@ interface GlassInputProps {
 // so the caret follows taps and typing normally.
 const SELECTION_START = { start: 0, end: 0 } as const;
 
+// Matches `input`'s fontSize: 16 at RN's default ~1.2 line-height ratio.
+// Used only by autoGrow to clamp the measured content height per line.
+const LINE_HEIGHT = 20;
+// inputWrapperAutoGrow's paddingVertical (12 top + 12 bottom) — added on top
+// of the measured text height to get the wrapper's total minHeight.
+const AUTO_GROW_PADDING_V = 24;
+
 const GlassInputComponent: React.FC<GlassInputProps> = ({
   label,
   value,
@@ -56,29 +72,24 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
   selectTextOnFocus,
   multiline = false,
   numberOfLines,
+  autoGrow = false,
 }) => {
   const { colors } = useTheme();
   const [isSecure, setIsSecure] = useState(secureTextEntry);
   const [isFocused, setIsFocused] = useState(false);
-  // Reinforces the `selection` prop below: on Android, setting `selection` on
-  // the SAME render as a `value` that's longer than the field's width is
-  // often ignored — the native EditText hasn't measured/laid out the text yet,
-  // so it doesn't know where to scroll to reveal position 0. `setNativeProps`
-  // does NOT reliably fix this on Android either (selection isn't reliably
-  // forwarded through that imperative path for TextInput) — it has to be a
-  // genuine PROP change through normal React reconciliation to hit the native
-  // "set selection and scroll" command. A fresh object (new reference) fed
-  // through state a tick after mount, once layout has committed, does that.
-  const [delayedSelectionStart, setDelayedSelectionStart] = useState<typeof SELECTION_START | undefined>(undefined);
+  const [contentHeight, setContentHeight] = useState(0);
+  const isAutoGrow = multiline && autoGrow;
+
+  const handleContentSizeChange = useCallback((e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+    setContentHeight(e.nativeEvent.contentSize.height);
+  }, []);
 
-  useEffect(() => {
-    setDelayedSelectionStart(undefined);
-    if (isFocused || multiline) return;
-    const id = setTimeout(() => {
-      setDelayedSelectionStart({ start: 0, end: 0 });
-    }, 50);
-    return () => clearTimeout(id);
-  }, [value, isFocused, multiline]);
+  // Text-only height (no padding) — the wrapper's own paddingVertical is
+  // added on top via inputWrapperAutoGrow, matching how inputWrapperMultiline
+  // composes minHeight with its own paddingVertical for the fixed variant.
+  const growTextHeight = numberOfLines
+    ? Math.min(Math.max(contentHeight, LINE_HEIGHT), numberOfLines * LINE_HEIGHT)
+    : Math.max(contentHeight, LINE_HEIGHT);
 
   const handleFocus = useCallback(() => {
     setIsFocused(true);
@@ -106,15 +117,21 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
           disabled && styles.inputContainerDisabled,
         ]}
       >
-        <View style={[styles.inputWrapper, multiline && styles.inputWrapperMultiline]}>
+        <View
+          style={[
+            styles.inputWrapper,
+            multiline && !isAutoGrow && styles.inputWrapperMultiline,
+            isAutoGrow && [styles.inputWrapperAutoGrow, { minHeight: growTextHeight + AUTO_GROW_PADDING_V }],
+          ]}
+        >
           {icon && (
-            <Icon name={icon} size={20} color="#9B9B9B" style={styles.leftIcon} />
+            <Icon name={icon} size={20} color={colors.text.tertiary} style={styles.leftIcon} />
           )}
           <RNTextInput
             value={value}
             onChangeText={onChangeText}
             placeholder={placeholder}
-            placeholderTextColor="#C5C5C5"
+            placeholderTextColor={colors.text.disabled}
             secureTextEntry={isSecure}
             keyboardType={keyboardType}
             autoCapitalize={autoCapitalize}
@@ -123,8 +140,9 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             editable={!disabled}
             onFocus={handleFocus}
             onBlur={handleBlur}
+            onContentSizeChange={isAutoGrow ? handleContentSizeChange : undefined}
             selectTextOnFocus={selectTextOnFocus}
-            selection={!isFocused && !multiline ? (delayedSelectionStart ?? SELECTION_START) : undefined}
+            selection={!isFocused && !multiline ? SELECTION_START : undefined}
             multiline={multiline}
             numberOfLines={numberOfLines}
             textAlignVertical={multiline ? 'top' : undefined}
@@ -137,7 +155,8 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
               styles.input,
               icon && styles.inputWithLeftIcon,
               (rightText || showPasswordToggle) && styles.inputWithRightIcon,
-              multiline && styles.inputMultiline,
+              multiline && !isAutoGrow && styles.inputMultiline,
+              isAutoGrow && [styles.inputAutoGrow, { height: growTextHeight }],
             ]}
           />
           {rightText && (
@@ -154,7 +173,7 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
               <Icon
                 name={isSecure ? 'eye-off' : 'eye'}
                 size={20}
-                color="#9B9B9B"
+                color={colors.text.tertiary}
               />
             </TouchableOpacity>
           )}
@@ -183,8 +202,8 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(0,0,0,0.08)',
   },
   inputContainerFocused: {
-    borderColor: '#1A1A1A',
-    backgroundColor: '#FFFFFF',
+    borderColor: colors.accent.brand,
+    backgroundColor: colors.background.card,
   },
   inputContainerDisabled: {
     opacity: 0.6,
@@ -206,6 +225,17 @@ const styles = StyleSheet.create({
     minHeight: 72,
     paddingTop: 4,
   },
+  // minHeight is applied inline (computed from measured content) — see
+  // isAutoGrow in the component.
+  inputWrapperAutoGrow: {
+    height: undefined,
+    paddingVertical: 12,
+    alignItems: 'flex-start',
+  },
+  // height is applied inline (computed from measured content).
+  inputAutoGrow: {
+    paddingTop: 0,
+  },
   leftIcon: {
     marginRight: 12,
   },
@@ -214,7 +244,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     height: '100%',
     paddingVertical: 0,
-    color: '#1A1A1A',
+    color: colors.text.primary,
   },
   inputWithLeftIcon: {
     marginLeft: 0,
@@ -226,7 +256,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
     marginLeft: 8,
-    color: '#6B6B6B',
+    color: colors.text.secondary,
   },
   eyeIcon: {
     padding: 8,

package/src/components/GlassList.tsx

@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     borderWidth: 1,
     marginBottom: 12,
-    shadowColor: '#000',
+    shadowColor: '#3A3226',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.06,
     shadowRadius: 8,

package/src/components/GlassStats.tsx

@@ -4,6 +4,7 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { AdaptiveGlassView } from './AdaptiveGlassView';
 import { useTheme } from '../hooks/useTheme';
+import { colors } from '../theme/colors';
 
 interface GlassStatsCardProps {
   icon: string;
@@ -46,7 +47,7 @@ export const GlassStatsCard: React.FC<GlassStatsCardProps> = ({
         <AdaptiveGlassView
           variant="regular"
           style={styles.gradient}
-          fallbackStyle={{ backgroundColor: '#FFFFFF' }}
+          fallbackStyle={{ backgroundColor: colors.background.card }}
         >
           {cardChildren}
         </AdaptiveGlassView>
@@ -125,10 +126,10 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 20,
     overflow: 'hidden',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.background.card,
     borderWidth: 1,
     borderColor: 'rgba(0,0,0,0.06)',
-    shadowColor: '#000',
+    shadowColor: '#3A3226',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.06,
     shadowRadius: 8,
@@ -171,7 +172,7 @@ const styles = StyleSheet.create({
     borderRadius: 16,
     overflow: 'hidden',
     borderWidth: 1,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: colors.background.card,
   },
   macroGradient: {
     padding: 16,

package/src/components/ProgressCard.tsx

@@ -149,7 +149,7 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 20,
     borderWidth: 1,
-    shadowColor: '#000',
+    shadowColor: '#3A3226',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.06,
     shadowRadius: 8,

package/src/components/RecipeRow.tsx

@@ -13,6 +13,7 @@ import {
 import { LinearGradient } from 'expo-linear-gradient';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
+import { colors } from '../theme/colors';
 
 export interface RecipeRowProps {
   title: string;
@@ -180,7 +181,7 @@ const styles = StyleSheet.create({
     borderRadius: 18,
     borderWidth: 1,
     overflow: 'hidden',
-    shadowColor: '#000',
+    shadowColor: '#3A3226',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.06,
     shadowRadius: 8,
@@ -197,7 +198,7 @@ const styles = StyleSheet.create({
     height: 60,
     borderRadius: 14,
     overflow: 'hidden',
-    backgroundColor: '#F0EFEA',
+    backgroundColor: colors.background.secondary,
   },
   thumbImage: {
     width: '100%',

package/src/components/SegmentedToggle.tsx

@@ -129,7 +129,7 @@ const styles = StyleSheet.create({
     borderRadius: 0,
   },
   segmentActiveShadow: {
-    shadowColor: '#000',
+    shadowColor: '#3A3226',
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.06,
     shadowRadius: 3,

package/src/components/WheelPicker.tsx

@@ -8,6 +8,7 @@ import {
   NativeScrollEvent,
 } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
+import { colors } from '../theme/colors';
 
 export interface WheelPickerProps {
   values: number[];
@@ -21,7 +22,11 @@ export interface WheelPickerProps {
 }
 
 const DEFAULT_ITEM_HEIGHT = 48;
-const DEFAULT_VISIBLE_COUNT = 5;
+// 3 rows — the selected value plus one neighbour either side. Five rows meant
+// 240dp for a single control, which on the onboarding Goal step pushed the
+// bottom row under the pinned footer and forced the whole step to scroll.
+// One neighbour each way is enough to read as a wheel rather than a text field.
+const DEFAULT_VISIBLE_COUNT = 3;
 // Render this many rows above and below the active index. The remaining rows
 // are virtual — the scroll container still spans the full height so snapping
 // and momentum behave normally, but we don't mount 600 <Text> nodes on first
@@ -131,7 +136,7 @@ export function WheelPicker({
         pointerEvents="none"
         style={[
           styles.selectionOverlay,
-          { top: padding, height: itemHeight, backgroundColor: 'rgba(0,0,0,0.06)' },
+          { top: padding, height: itemHeight, backgroundColor: colors.background.secondary },
         ]}
       />
       <ScrollView

package/src/components/progress/CArcProgress.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { View, StyleSheet, Animated } from 'react-native';
 import Svg, { Circle, G } from 'react-native-svg';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
+import { colors } from '../../theme/colors';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
@@ -88,7 +89,7 @@ export const CArcProgress: React.FC<CArcProgressProps> = ({
       </Svg>
       {/* Center icon */}
       <View style={styles.centerIcon}>
-        <Icon name="fire" size={size * 0.22} color="#FF6B35" />
+        <Icon name="fire" size={size * 0.22} color={colors.accent.warning} />
       </View>
     </View>
   );

package/src/components/progress/CircularProgress.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { View, Text, StyleSheet, Animated } from 'react-native';
 import Svg, { Circle, G } from 'react-native-svg';
 import { useTheme } from '../../hooks/useTheme';
+import { textStyles } from '../../theme/typography';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
@@ -100,7 +101,7 @@ export const CircularProgress: React.FC<CircularProgressProps> = ({
             cx={size / 2}
             cy={size / 2}
             r={radius}
-            stroke="rgba(0,0,0,0.08)"
+            stroke={colors.background.track}
             strokeWidth={strokeWidth}
             fill="transparent"
           />
@@ -163,14 +164,23 @@ const createStyles = (colors: any) => StyleSheet.create({
     color: colors.text.secondary,
     marginBottom: 4,
   },
+  // The number at the center of a ring is the hero of whatever card it sits
+  // in, so it takes the display treatment: tabular figures (the value ticks as
+  // the ring animates and would otherwise jitter) and negative tracking, which
+  // Plus Jakarta Sans needs above ~24px to stop looking inflated.
+  // No lineHeight: `valueSize` overrides fontSize at the call site (up to 36+),
+  // and a fixed lineHeight from the ramp would clip the taller digits.
   value: {
     fontSize: 24,
-    fontWeight: '800',
+    fontWeight: textStyles.metric.fontWeight,
+    letterSpacing: textStyles.metric.letterSpacing,
+    fontVariant: textStyles.metric.fontVariant,
     color: colors.text.primary,
   },
   unit: {
     fontSize: 14,
     fontWeight: '600',
+    letterSpacing: 0,
     color: colors.text.secondary,
   },
   target: {

package/src/index.ts

@@ -1,6 +1,7 @@
 // Theme
 export { colors, shadows } from './theme/colors';
-export { typography, fonts, fontFamily } from './theme/typography';
+export { typography, textStyles, numeric, fonts, fontFamily } from './theme/typography';
+export type { TextStyleName } from './theme/typography';
 export { spacing } from './theme/spacing';
 export { theme } from './theme/theme';
 export type { Theme } from './theme/theme';
@@ -21,6 +22,7 @@ export type { CircleIconButtonProps, CircleIconButtonVariant } from './component
 export { GlassCard } from './components/GlassCard';
 export { GlassContainer } from './components/GlassContainer';
 export { GlassHeaderBackground } from './components/GlassHeaderBackground';
+export { GlassFooter, GLASS_FOOTER_FADE } from './components/GlassFooter';
 export { GlassInput } from './components/GlassInput';
 export { GlassListItem, GlassToggleItem } from './components/GlassList';
 export { GlassStatsCard, GlassMacroCard, GlassNutrientRow } from './components/GlassStats';

package/src/theme/colors.ts

@@ -1,54 +1,95 @@
 /**
- * Cal AI-inspired clean, light-only color palette
- * Warm off-white backgrounds, pure white cards, subtle shadows
+ * Warm Editorial palette — light-only.
+ *
+ * Design intent: a warm off-white ground with pure-white cards, so surfaces
+ * separate by CONTRAST rather than by heavy shadow. One deep brand green
+ * carries every primary action and the hero calorie ring; the macro hues are
+ * deliberately desaturated so four rings can sit side by side without the
+ * dashboard reading as a color test card.
+ *
+ * Every key here predates this palette and is consumed across the app — this
+ * file changes VALUES only. Adding keys is fine; renaming or removing one is a
+ * breaking change for @klyftig/mobile-ui consumers.
+ *
+ * Not defined here: the Nutri-Score grade colors (A–E). Those are the official
+ * regulated Nutri-Score swatches and live in Kaelo's utils/healthScore.ts —
+ * they are not ours to restyle.
  */
 
 export const colors = {
   background: {
-    primary: '#FFFFFF',       // Clean white background
-    card: '#FFFFFF',
-    secondary: '#F5F5F5',
+    primary: '#FAF9F6',       // Warm ground — the page behind every card
+    card: '#FFFFFF',          // Cards sit ABOVE the ground, not flush with it
+    secondary: '#F2F1EC',     // Sunken fills: pills, inert chips, inputs
+    track: '#E9E7E0',         // Unfilled portion of rings and progress bars
     tabBar: '#FFFFFF',
-    gradient: ['#FFFFFF', '#FFFFFF', '#FFFFFF'] as const, // backward compat
+    gradient: ['#FAF9F6', '#FAF9F6', '#FAF9F6'] as const, // backward compat
   },
   text: {
-    primary: '#1A1A1A',
-    secondary: '#6B6B6B',
-    tertiary: '#9B9B9B',
-    disabled: '#C5C5C5',
+    primary: '#14140F',       // Warm near-black; pure #000 reads cold here
+    secondary: '#6E6B63',
+    tertiary: '#A3A099',
+    disabled: '#C9C6BE',
   },
   icon: {
-    primary: '#1A1A1A',
-    secondary: '#6B6B6B',
-    tertiary: '#9B9B9B',
+    primary: '#14140F',
+    secondary: '#6E6B63',
+    tertiary: '#A3A099',
   },
   border: {
-    light: 'rgba(0,0,0,0.06)',
-    medium: 'rgba(0,0,0,0.10)',
-    heavy: 'rgba(0,0,0,0.15)',
+    // Warm-tinted alpha. Neutral black borders over a warm ground read grey
+    // and slightly dirty.
+    light: 'rgba(20,20,15,0.06)',
+    medium: 'rgba(20,20,15,0.10)',
+    heavy: 'rgba(20,20,15,0.15)',
   },
   glass: {                      // backward compat aliases
     background: '#FFFFFF',
-    backgroundLight: '#F7F7F4',
+    backgroundLight: '#F2F1EC',
     backgroundHeavy: '#FFFFFF',
     tabBarFallback: '#FFFFFF',
-    fabFallback: '#1A1A1A',
-    headerFallback: 'rgba(255, 255, 255, 0.95)',
+    // Neutral ink: the FAB is NAVIGATION. The camera button beside it is the
+    // primary action and is the one that carries the brand color.
+    fabFallback: '#14140F',
+    headerFallback: 'rgba(250, 249, 246, 0.95)',
   },
   accent: {
-    blue: '#2196F3',
-    brand: '#1A1A1A',           // Black primary buttons (Cal AI style)
-    brandLight: '#4A4A4A',
-    success: '#4CAF50',
-    warning: '#FF9800',
-    error: '#F44336',
-    green: '#4CAF50',
+    blue: '#4A7FB5',
+    brand: '#1F5E4A',           // Deep green — primary buttons, selection, hero ring
+    brandSoft: '#E7F0EC',       // Tinted fill for secondary / low-emphasis buttons
+    brandPressed: '#17493A',
+    brandLight: '#5C9179',      // Lighter brand tone for chart gradient fills
+    success: '#2F7D5B',
+    warning: '#C4863A',
+    error: '#B4483C',
+    green: '#2F7D5B',
+  },
+  /**
+   * Categorical accents — for things that must be told APART rather than
+   * ranked: meal slots, nav destinations, feature identities.
+   *
+   * Deliberately a fixed, ordered set. Every one of these was previously an
+   * ad-hoc Tailwind default (violet-500, sky-500, teal-500, …) picked at the
+   * call site, which is why the app accumulated four unrelated palettes. Pick
+   * from here; do not introduce a new hue at a call site.
+   *
+   * These are desaturated to sit on the warm ground without shouting, and are
+   * distinguishable from each other and from the macro hues.
+   */
+  categorical: {
+    amber: '#C4863A',
+    blue: '#4A7FB5',
+    plum: '#6B4E71',
+    green: '#2F7D5B',
+    teal: '#3E7B78',
+    clay: '#B4674A',
   },
   macro: {
-    protein: '#E91E63',
-    carbs: '#2196F3',
-    fat: '#FF9800',
-    calories: '#4CAF50',
+    protein: '#C0567A',
+    carbs: '#4A7FB5',
+    fat: '#D08A3E',
+    fiber: '#8A7B52',           // Muted olive — distinct from both fat and brand
+    calories: '#1F5E4A',        // Hero metric carries the brand color
   },
   shadow: {
     text: 'transparent',
@@ -57,20 +98,47 @@ export const colors = {
   },
 };
 
+/**
+ * Elevation scale. shadowColor is warm (#3A3226) rather than pure black —
+ * a neutral shadow over a warm ground casts a grey halo that makes white cards
+ * look dirty at the edges.
+ */
 export const shadows = {
+  sm: {
+    shadowColor: '#3A3226',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 3,
+    elevation: 1,
+  },
+  md: {
+    shadowColor: '#3A3226',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.07,
+    shadowRadius: 10,
+    elevation: 3,
+  },
+  lg: {
+    shadowColor: '#3A3226',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.10,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  // Pre-existing names, now aliased onto the scale above.
   card: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
+    shadowColor: '#3A3226',
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.07,
+    shadowRadius: 10,
     elevation: 3,
   },
   cardElevated: {
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.08,
-    shadowRadius: 12,
-    elevation: 5,
+    shadowColor: '#3A3226',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.10,
+    shadowRadius: 24,
+    elevation: 8,
   },
   text: { color: 'transparent', offset: { width: 0, height: 0 }, radius: 0 },
   textLight: { color: 'transparent', offset: { width: 0, height: 0 }, radius: 0 },

package/src/theme/theme.ts

@@ -3,18 +3,27 @@
  */
 
 import { colors, shadows } from './colors';
-import { typography } from './typography';
+import { typography, textStyles, numeric } from './typography';
 import { spacing } from './spacing';
 
 export const theme = {
   colors,
   shadows,
   typography,
+  textStyles,
+  numeric,
   spacing,
 
-  // Border radius
+  /**
+   * Border radius. `control` (12) / `card` (16) / `sheet` (20) are the three
+   * that should cover almost every surface — reach for a raw number only when
+   * none of them fits.
+   */
   borderRadius: {
     sm: 8,
+    control: 12,
+    card: 16,
+    sheet: 20,
     md: 12,
     lg: 16,
     xl: 20,

package/src/theme/typography.ts

@@ -1,6 +1,7 @@
 /**
  * Typography system — Plus Jakarta Sans
  */
+import type { TextStyle } from 'react-native';
 
 /** Font family names (must match the loaded .ttf file names) */
 export const fonts = {
@@ -10,15 +11,26 @@ export const fonts = {
   bold: 'PlusJakartaSans_700Bold',
 } as const;
 
-/** Maps a numeric fontWeight string to the correct fontFamily */
-export function fontFamily(weight?: string): string {
-  switch (weight) {
+/**
+ * Maps a React Native fontWeight to the matching Plus Jakarta Sans family.
+ *
+ * Plus Jakarta Sans is loaded as four separate static faces, so weight has to
+ * be resolved to a family name — RN cannot synthesize it from a numeric weight.
+ * Accepts the named aliases ('bold', 'semibold', …) as well as the numeric
+ * strings, because both forms appear in style objects across the app.
+ */
+export function fontFamily(weight?: string | number): string {
+  switch (String(weight)) {
     case '700':
     case '800':
+    case '900':
+    case 'bold':
       return fonts.bold;
     case '600':
+    case 'semibold':
       return fonts.semiBold;
     case '500':
+    case 'medium':
       return fonts.medium;
     default:
       return fonts.regular;
@@ -54,3 +66,89 @@ export const typography = {
     relaxed: 1.75,
   },
 };
+
+/**
+ * Tabular figures. Every number that ticks, counts, or sits in a column needs
+ * this — proportional digits change width as the value changes, so a live
+ * timer or an animated counter visibly jitters without it.
+ */
+export const numeric: TextStyle = {
+  fontVariant: ['tabular-nums'],
+};
+
+/**
+ * The type ramp. Prefer these over ad-hoc fontSize/fontWeight pairs so the
+ * hierarchy stays consistent across screens.
+ *
+ * Negative tracking on the large sizes is deliberate: Plus Jakarta Sans is
+ * drawn for text sizes and spaces too loosely once it passes ~24px, which is
+ * what makes big numerals look inflated rather than composed.
+ *
+ * `display` and `metric` already carry tabular figures.
+ */
+export type TextStyleName =
+  | 'display'
+  | 'metric'
+  | 'title'
+  | 'subtitle'
+  | 'body'
+  | 'bodySmall'
+  | 'label'
+  | 'caption';
+
+export const textStyles: Record<TextStyleName, TextStyle> = {
+  /** Hero numerals only — the one number a screen is about. */
+  display: {
+    fontSize: 40,
+    fontWeight: '700',
+    lineHeight: 44,
+    letterSpacing: -1.0,
+    ...numeric,
+  },
+  /** The anchor value of a card. */
+  metric: {
+    fontSize: 28,
+    fontWeight: '700',
+    lineHeight: 32,
+    letterSpacing: -0.6,
+    ...numeric,
+  },
+  /** Screen and section titles. */
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    lineHeight: 26,
+    letterSpacing: -0.3,
+  },
+  /** Card headings. */
+  subtitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 22,
+    letterSpacing: -0.2,
+  },
+  body: {
+    fontSize: 16,
+    fontWeight: '400',
+    lineHeight: 24,
+  },
+  bodySmall: {
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 20,
+  },
+  /** Small caps eyebrow above a value — "FOOD", "EXERCISE", "TOTAL". */
+  label: {
+    fontSize: 13,
+    fontWeight: '600',
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+  },
+  /** Supporting text under a value. */
+  caption: {
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: 16,
+  },
+};