Add beenvoice mobile companion app with full dark mode support.

Expo app with dashboard, time clock, invoices, and settings — native tabs, glass UI, theme-aware components, and iOS Live Activities. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-17 22:36:37 -04:00
parent 8a7a8df477
commit 14c880123c
93 changed files with 8849 additions and 7849 deletions
@@ -0,0 +1,111 @@
+/**
+ * beenvoice mobile theme — derived from `beenvoice/src/styles/globals.css`
+ * and root layout `brand-background` + `components/ui/card.tsx`.
+ *
+ * Default: data-interface-theme="beenvoice", data-radius="xl", data-color-theme="slate"
+ */
+
+/** hsl(0 0% 100%) */
+export const background = "#FFFFFF";
+
+/** hsl(240 10% 3.9%) */
+export const foreground = "#09090B";
+
+/** hsl(240 5.9% 10%) */
+export const primary = "#18181B";
+
+/** hsl(0 0% 98%) */
+export const primaryForeground = "#FAFAFA";
+
+/** hsl(240 4.8% 95.9%) */
+export const muted = "#F4F4F5";
+
+/** hsl(240 3.8% 46.1%) */
+export const mutedForeground = "#71717A";
+
+/** hsl(240 5.9% 90%) */
+export const border = "#E4E4E7";
+
+/** hsl(240 5.9% 90% / 0.5) — `border-border/50` on cards */
+export const border50 = "rgba(228, 228, 231, 0.5)";
+
+/** `bg-background/80` on glass surfaces */
+export const surface80 = "rgba(255, 255, 255, 0.8)";
+
+/** `bg-background/80` on chrome (tab bar, headers) — `backdrop-blur-md` */
+export const chrome80 = "rgba(255, 255, 255, 0.8)";
+
+/** brand-background grid: `#80808012` → alpha 0x12 / 255 */
+export const gridLine = "rgba(128, 128, 128, 0.0706)";
+
+export const gridSize = 24;
+
+/** brand-background blob: `bg-neutral-400/40` = #a3a3a3 @ 40% */
+export const blobCore = "rgba(163, 163, 163, 0.4)";
+
+/** dark mode blob: neutral-500/30 — kept for future */
+export const blobCoreDark = "rgba(115, 115, 115, 0.3)";
+
+export const blobDiameter = 800;
+
+/**
+ * Tailwind blur scale (approx px):
+ * blur-md = 12, blur-xl = 24, blur-3xl = 64
+ */
+export const blur = {
+  md: 12,
+  xl: 24,
+  blob: 64,
+} as const;
+
+/**
+ * expo-blur intensity is not 1:1 with CSS px — tuned to visually match.
+ * backdrop-blur-xl ≈ 24px, backdrop-blur-md ≈ 12px
+ */
+export const blurIntensity = {
+  card: 45,
+  chrome: 28,
+} as const;
+
+/**
+ * Radius: beenvoice `[data-slot=card] { border-radius: var(--radius-lg) }`
+ * with `--radius: 1rem` (xl preference) → 16px.
+ * Auth/marketing cards use the same glass card component.
+ */
+export const radius = {
+  sm: 4,
+  md: 8,
+  lg: 16,
+  xl: 20,
+  button: 12,
+  pill: 999,
+} as const;
+
+/** shadow-sm on default card */
+export const shadowSm = {
+  shadowColor: "#000000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.05,
+  shadowRadius: 2,
+  elevation: 1,
+} as const;
+
+/** shadow-md on stats cards */
+export const shadowMd = {
+  shadowColor: "#000000",
+  shadowOffset: { width: 0, height: 4 },
+  shadowOpacity: 0.08,
+  shadowRadius: 8,
+  elevation: 4,
+} as const;
+
+/** @keyframes blob — 7s ease infinite */
+export const blobAnimation = {
+  durationMs: 7000,
+  keyframes: [
+    { translateX: 0, translateY: 0, scale: 1 },
+    { translateX: 30, translateY: -50, scale: 1.1 },
+    { translateX: -20, translateY: 20, scale: 0.9 },
+    { translateX: 0, translateY: 0, scale: 1 },
+  ],
+} as const;