@frosted-ui/react-native 0.0.1-canary.91 → 0.0.1-canary.93

package/dist/lib/theme.js

@@ -1,79 +1,111 @@
 import { DarkTheme, DefaultTheme } from '@react-navigation/native';
-export const THEME = {
-    light: {
-        background: 'hsl(0 0% 100%)',
-        foreground: 'hsl(0 0% 3.9%)',
-        card: 'hsl(0 0% 100%)',
-        cardForeground: 'hsl(0 0% 3.9%)',
-        popover: 'hsl(0 0% 100%)',
-        popoverForeground: 'hsl(0 0% 3.9%)',
-        primary: 'hsl(0 0% 9%)',
-        primaryForeground: 'hsl(0 0% 98%)',
-        secondary: 'hsl(0 0% 96.1%)',
-        secondaryForeground: 'hsl(0 0% 9%)',
-        muted: 'hsl(0 0% 96.1%)',
-        mutedForeground: 'hsl(0 0% 45.1%)',
-        accent: 'hsl(0 0% 96.1%)',
-        accentForeground: 'hsl(0 0% 9%)',
-        destructive: 'hsl(0 84.2% 60.2%)',
-        border: 'hsl(0 0% 89.8%)',
-        input: 'hsl(0 0% 89.8%)',
-        ring: 'hsl(0 0% 63%)',
-        radius: '0.625rem',
-        chart1: 'hsl(12 76% 61%)',
-        chart2: 'hsl(173 58% 39%)',
-        chart3: 'hsl(197 37% 24%)',
-        chart4: 'hsl(43 74% 66%)',
-        chart5: 'hsl(27 87% 67%)',
-    },
-    dark: {
-        background: 'hsl(0 0% 3.9%)',
-        foreground: 'hsl(0 0% 98%)',
-        card: 'hsl(0 0% 3.9%)',
-        cardForeground: 'hsl(0 0% 98%)',
-        popover: 'hsl(0 0% 3.9%)',
-        popoverForeground: 'hsl(0 0% 98%)',
-        primary: 'hsl(0 0% 98%)',
-        primaryForeground: 'hsl(0 0% 9%)',
-        secondary: 'hsl(0 0% 14.9%)',
-        secondaryForeground: 'hsl(0 0% 98%)',
-        muted: 'hsl(0 0% 14.9%)',
-        mutedForeground: 'hsl(0 0% 63.9%)',
-        accent: 'hsl(0 0% 14.9%)',
-        accentForeground: 'hsl(0 0% 98%)',
-        destructive: 'hsl(0 70.9% 59.4%)',
-        border: 'hsl(0 0% 14.9%)',
-        input: 'hsl(0 0% 14.9%)',
-        ring: 'hsl(300 0% 45%)',
-        radius: '0.625rem',
-        chart1: 'hsl(220 70% 50%)',
-        chart2: 'hsl(160 60% 45%)',
-        chart3: 'hsl(30 80% 55%)',
-        chart4: 'hsl(280 65% 60%)',
-        chart5: 'hsl(340 75% 55%)',
-    },
-};
+import { useMemo } from 'react';
+import { useSemanticColors } from './theme-context';
+import { themeTokens } from './theme-tokens';
+const light = themeTokens.colors.light;
+const dark = themeTokens.colors.dark;
+/**
+ * Hook to get navigation theme using Frosted UI design system colors.
+ * Reacts to the accent color from ThemeProvider.
+ *
+ * React Navigation uses these colors to style the navigation UI elements
+ * (headers, tab bars, drawers, etc.) throughout your app.
+ *
+ * @see https://reactnavigation.org/docs/themes
+ */
+export function useNavTheme() {
+    const { accentColor, dangerColor } = useSemanticColors();
+    return useMemo(() => {
+        const lightAccent = light.palettes[accentColor];
+        const darkAccent = dark.palettes[accentColor];
+        const lightDanger = light.palettes[dangerColor];
+        const darkDanger = dark.palettes[dangerColor];
+        return {
+            light: {
+                ...DefaultTheme,
+                colors: {
+                    /**
+                     * background - The main background color of screens.
+                     * Used for: Screen backgrounds, the area behind content.
+                     */
+                    background: light.background,
+                    /**
+                     * border - Color for borders and dividers.
+                     * Used for: Header bottom border, tab bar top border,
+                     * separator lines between list items.
+                     */
+                    border: light.stroke,
+                    /**
+                     * card - Background color for card-like elements.
+                     * Used for: Header background, tab bar background,
+                     * drawer background, modal backgrounds.
+                     */
+                    card: light.panelSolid,
+                    /**
+                     * notification - Color for notification badges.
+                     * Used for: Badge dots on tab bar icons (e.g., unread count),
+                     * uses the danger color from ThemeProvider.
+                     */
+                    notification: lightDanger['9'],
+                    /**
+                     * primary - The primary/accent color for interactive elements.
+                     * Used for: Active tab icon tint, focused input borders,
+                     * header button colors, link colors.
+                     */
+                    primary: lightAccent['a11'],
+                    /**
+                     * text - Default text color.
+                     * Used for: Header title, tab bar labels, drawer item text,
+                     * and any navigation-related text.
+                     */
+                    text: light.palettes.gray['12'],
+                },
+            },
+            dark: {
+                ...DarkTheme,
+                colors: {
+                    /** background - Screen backgrounds in dark mode */
+                    background: dark.background,
+                    /** border - Borders/dividers in dark mode */
+                    border: dark.stroke,
+                    /** card - Header/tab bar backgrounds in dark mode */
+                    card: dark.panelSolid,
+                    /** notification - Badge color uses danger color */
+                    notification: darkDanger['9'],
+                    /** primary - Active/accent color in dark mode */
+                    primary: darkAccent['a11'],
+                    /** text - Text color in dark mode */
+                    text: dark.palettes.gray['12'],
+                },
+            },
+        };
+    }, [accentColor, dangerColor]);
+}
+/**
+ * @deprecated Use useNavTheme() hook instead for dynamic accent color support.
+ * Static navigation theme with hardcoded blue accent.
+ */
 export const NAV_THEME = {
     light: {
         ...DefaultTheme,
         colors: {
-            background: THEME.light.background,
-            border: THEME.light.border,
-            card: THEME.light.card,
-            notification: THEME.light.destructive,
-            primary: THEME.light.primary,
-            text: THEME.light.foreground,
+            background: light.background,
+            border: light.stroke,
+            card: light.panelSolid,
+            notification: light.palettes.red['9'],
+            primary: light.palettes.blue['a11'],
+            text: light.palettes.gray['12'],
         },
     },
     dark: {
         ...DarkTheme,
         colors: {
-            background: THEME.dark.background,
-            border: THEME.dark.border,
-            card: THEME.dark.card,
-            notification: THEME.dark.destructive,
-            primary: THEME.dark.primary,
-            text: THEME.dark.foreground,
+            background: dark.background,
+            border: dark.stroke,
+            card: dark.panelSolid,
+            notification: dark.palettes.red['9'],
+            primary: dark.palettes.blue['a11'],
+            text: dark.palettes.gray['12'],
         },
     },
 };

package/dist/lib/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAc,MAAM,0BAA0B,CAAC;AAE/E,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE;QACL,UAAU,EAAE,gBAAgB;QAC5B,UAAU,EAAE,gBAAgB;QAC5B,IAAI,EAAE,gBAAgB;QACtB,cAAc,EAAE,gBAAgB;QAChC,OAAO,EAAE,gBAAgB;QACzB,iBAAiB,EAAE,gBAAgB;QACnC,OAAO,EAAE,cAAc;QACvB,iBAAiB,EAAE,eAAe;QAClC,SAAS,EAAE,iBAAiB;QAC5B,mBAAmB,EAAE,cAAc;QACnC,KAAK,EAAE,iBAAiB;QACxB,eAAe,EAAE,iBAAiB;QAClC,MAAM,EAAE,iBAAiB;QACzB,gBAAgB,EAAE,cAAc;QAChC,WAAW,EAAE,oBAAoB;QACjC,MAAM,EAAE,iBAAiB;QACzB,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,UAAU;QAClB,MAAM,EAAE,iBAAiB;QACzB,MAAM,EAAE,kBAAkB;QAC1B,MAAM,EAAE,kBAAkB;QAC1B,MAAM,EAAE,iBAAiB;QACzB,MAAM,EAAE,iBAAiB;KAC1B;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,gBAAgB;QAC5B,UAAU,EAAE,eAAe;QAC3B,IAAI,EAAE,gBAAgB;QACtB,cAAc,EAAE,eAAe;QAC/B,OAAO,EAAE,gBAAgB;QACzB,iBAAiB,EAAE,eAAe;QAClC,OAAO,EAAE,eAAe;QACxB,iBAAiB,EAAE,cAAc;QACjC,SAAS,EAAE,iBAAiB;QAC5B,mBAAmB,EAAE,eAAe;QACpC,KAAK,EAAE,iBAAiB;QACxB,eAAe,EAAE,iBAAiB;QAClC,MAAM,EAAE,iBAAiB;QACzB,gBAAgB,EAAE,eAAe;QACjC,WAAW,EAAE,oBAAoB;QACjC,MAAM,EAAE,iBAAiB;QACzB,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,iBAAiB;QACvB,MAAM,EAAE,UAAU;QAClB,MAAM,EAAE,kBAAkB;QAC1B,MAAM,EAAE,kBAAkB;QAC1B,MAAM,EAAE,iBAAiB;QACzB,MAAM,EAAE,kBAAkB;QAC1B,MAAM,EAAE,kBAAkB;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAoC;IACxD,KAAK,EAAE;QACL,GAAG,YAAY;QACf,MAAM,EAAE;YACN,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU;YAClC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM;YAC1B,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;YACtB,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW;YACrC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO;YAC5B,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU;SAC7B;KACF;IACD,IAAI,EAAE;QACJ,GAAG,SAAS;QACZ,MAAM,EAAE;YACN,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU;YACjC,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM;YACzB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI;YACrB,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW;YACpC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO;YAC3B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU;SAC5B;KACF;CACF,CAAC"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"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"}

package/dist/lib/types.d.ts

@@ -4,11 +4,15 @@
  */
 export type AccentColor = 'tomato' | 'red' | 'ruby' | 'crimson' | 'pink' | 'plum' | 'purple' | 'violet' | 'iris' | 'cyan' | 'teal' | 'jade' | 'green' | 'grass' | 'brown' | 'blue' | 'orange' | 'indigo' | 'sky' | 'mint' | 'yellow' | 'amber' | 'lime' | 'lemon' | 'magenta' | 'gold' | 'bronze' | 'gray';
 /**
- * Semantic colors
+ * Semantic colors that map to accent colors based on ThemeProvider settings
  */
 export type SemanticColor = 'danger' | 'warning' | 'success' | 'info';
+/**
+ * Special color that uses the ThemeProvider's accentColor setting
+ */
+export type DynamicAccentColor = 'accent';
 /**
  * All available color values for component color props
  */
-export type Color = AccentColor | SemanticColor;
+export type Color = AccentColor | SemanticColor | DynamicAccentColor;
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,KAAK,GACL,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,OAAO,GACP,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,MAAM,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,KAAK,GACL,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,OAAO,GACP,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,QAAQ,GACR,MAAM,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,aAAa,GAAG,kBAAkB,CAAC"}