Dark-first color palette, glass surface styles with blur backing, typography with text shadows, and spacing constants.
56 lines
1.1 KiB
TypeScript
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;
|