Files
lively/src/theme/glass.ts
Mathis Pruvot 1cccfbcb11 feat: add glassmorphism design system
Dark-first color palette, glass surface styles with blur
backing, typography with text shadows, and spacing constants.
2026-05-28 11:48:54 +00:00

56 lines
1.1 KiB
TypeScript

import { Platform, ViewStyle } from "react-native";
import { colors } from "./colors";
export const glassIntensity = {
subtle: 15,
medium: 25,
strong: 40,
heavy: 60,
} as const;
export type GlassVariant = "subtle" | "medium" | "strong" | "heavy";
export const glassSurface = (
variant: GlassVariant = "medium"
): ViewStyle => ({
backgroundColor: colors.glass.background,
borderWidth: 1,
borderColor: colors.glass.border,
overflow: "hidden",
...Platform.select({
ios: {
shadowColor: colors.shadow.soft,
shadowOffset: { width: 0, height: 8 },
shadowOpacity: variant === "strong" ? 0.3 : 0.15,
shadowRadius: 24,
},
android: {
elevation: variant === "strong" ? 12 : 6,
},
}),
});
export const glassRadius = {
xs: 8,
sm: 12,
md: 16,
lg: 24,
xl: 32,
pill: 999,
} as const;
export const glassBorder = {
thin: {
borderWidth: 0.5,
borderColor: colors.glass.border,
},
normal: {
borderWidth: 1,
borderColor: colors.glass.border,
},
accent: {
borderWidth: 1,
borderColor: colors.glass.borderLight,
},
} as const;