feat: add glassmorphism design system
Dark-first color palette, glass surface styles with blur backing, typography with text shadows, and spacing constants.
This commit is contained in:
55
src/theme/glass.ts
Normal file
55
src/theme/glass.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user