soconnor
14c880123c
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>
112 lines
2.8 KiB
TypeScript
112 lines
2.8 KiB
TypeScript
/**
|
|
* 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;
|