@productshiv/baapui
Version:
A truly cross-platform multi-design UI framework that works with React, Next.js, React Native, and any React-based framework.
410 lines (375 loc) • 12.6 kB
text/typescript
import { Theme } from '../types';
// Skeuomorphic Color Palette - Rich, realistic colors
const SKEUOMORPHIC_COLORS = {
// Primary Colors - Rich blues with depth
primary: '#2c5aa0',
primaryLight: '#4a7bc8',
primaryDark: '#1e3f73',
primaryVariant: '#3d6bb3',
// Secondary Colors - Warm oranges
secondary: '#d4731b',
secondaryLight: '#e89142',
secondaryDark: '#a85a15',
secondaryVariant: '#c4661a',
// Surface Colors - Paper-like textures
surface: '#f8f6f2',
surfaceVariant: '#ede9e4',
surfaceDark: '#2c2a27',
surfaceVariantDark: '#3a3835',
// Background Colors - Natural tones
background: '#fafaf8',
backgroundVariant: '#f2f0ed',
backgroundDark: '#1a1917',
backgroundVariantDark: '#242220',
// Text Colors - Rich blacks and whites
onPrimary: '#ffffff',
onSecondary: '#ffffff',
onSurface: '#2d2c2a',
onSurfaceDark: '#e8e6e3',
onBackground: '#2d2c2a',
onBackgroundDark: '#e8e6e3',
// State Colors - Natural variations
success: '#2d7d32',
successLight: '#4caf50',
successDark: '#1b5e20',
warning: '#f57c00',
warningLight: '#ff9800',
warningDark: '#e65100',
error: '#d32f2f',
errorLight: '#f44336',
errorDark: '#b71c1c',
info: '#1976d2',
infoLight: '#2196f3',
infoDark: '#0d47a1',
// Neutral Colors - Paper and metal tones
neutral: '#6d6d6d',
neutralLight: '#9e9e9e',
neutralDark: '#424242',
// Border Colors - Realistic edges
border: '#d0ccc4',
borderLight: '#e0ddd6',
borderDark: '#a8a39a',
// Shadow Colors - Multiple layers
shadowLight: 'rgba(0, 0, 0, 0.08)',
shadowMedium: 'rgba(0, 0, 0, 0.16)',
shadowDark: 'rgba(0, 0, 0, 0.24)',
shadowInner: 'rgba(0, 0, 0, 0.12)',
// Highlight Colors - Realistic light reflections
highlight: 'rgba(255, 255, 255, 0.6)',
highlightStrong: 'rgba(255, 255, 255, 0.8)',
// Disabled Colors
disabled: '#bdbdbd',
disabledText: '#9e9e9e',
};
// Complex Shadow System - Multiple layers for depth
const SKEUOMORPHIC_SHADOWS = {
// Button Shadows - Realistic button depth
button: {
default: [
{ x: 0, y: 2, blur: 4, color: SKEUOMORPHIC_COLORS.shadowLight },
{ x: 0, y: 4, blur: 8, color: SKEUOMORPHIC_COLORS.shadowMedium },
{ x: 0, y: 1, blur: 0, color: SKEUOMORPHIC_COLORS.border },
],
pressed: [
{ x: 0, y: 1, blur: 2, color: SKEUOMORPHIC_COLORS.shadowInner },
{ x: 0, y: 0, blur: 0, color: SKEUOMORPHIC_COLORS.borderDark },
],
hover: [
{ x: 0, y: 3, blur: 6, color: SKEUOMORPHIC_COLORS.shadowLight },
{ x: 0, y: 6, blur: 12, color: SKEUOMORPHIC_COLORS.shadowMedium },
{ x: 0, y: 1, blur: 0, color: SKEUOMORPHIC_COLORS.border },
],
},
// Card Shadows - Paper-like depth
card: [
{ x: 0, y: 2, blur: 8, color: SKEUOMORPHIC_COLORS.shadowLight },
{ x: 0, y: 4, blur: 16, color: SKEUOMORPHIC_COLORS.shadowMedium },
{ x: 0, y: 1, blur: 0, color: SKEUOMORPHIC_COLORS.borderLight },
],
// Input Shadows - Inset depth
input: {
default: [
{ x: 0, y: 0, blur: 0, color: SKEUOMORPHIC_COLORS.border },
{ x: 0, y: 1, blur: 2, color: SKEUOMORPHIC_COLORS.shadowInner, inset: true },
],
focused: [
{ x: 0, y: 0, blur: 0, color: SKEUOMORPHIC_COLORS.primary },
{ x: 0, y: 1, blur: 3, color: SKEUOMORPHIC_COLORS.shadowInner, inset: true },
{ x: 0, y: 0, blur: 4, color: `${SKEUOMORPHIC_COLORS.primary}40` },
],
},
// Modal Shadows - Deep overlay
modal: [
{ x: 0, y: 8, blur: 32, color: SKEUOMORPHIC_COLORS.shadowDark },
{ x: 0, y: 4, blur: 16, color: SKEUOMORPHIC_COLORS.shadowMedium },
{ x: 0, y: 2, blur: 8, color: SKEUOMORPHIC_COLORS.shadowLight },
],
// Text Shadows - Realistic text depth
text: {
default: [{ x: 0, y: 1, blur: 2, color: SKEUOMORPHIC_COLORS.shadowLight }],
strong: [{ x: 0, y: 2, blur: 4, color: SKEUOMORPHIC_COLORS.shadowMedium }],
embossed: [
{ x: 0, y: 1, blur: 0, color: SKEUOMORPHIC_COLORS.highlight },
{ x: 0, y: -1, blur: 0, color: SKEUOMORPHIC_COLORS.shadowLight },
],
},
};
// Gradients - Rich, multi-stop gradients
const SKEUOMORPHIC_GRADIENTS = {
button: {
primary: [
{ offset: 0, color: SKEUOMORPHIC_COLORS.primaryLight },
{ offset: 0.5, color: SKEUOMORPHIC_COLORS.primary },
{ offset: 1, color: SKEUOMORPHIC_COLORS.primaryDark },
],
secondary: [
{ offset: 0, color: SKEUOMORPHIC_COLORS.secondaryLight },
{ offset: 0.5, color: SKEUOMORPHIC_COLORS.secondary },
{ offset: 1, color: SKEUOMORPHIC_COLORS.secondaryDark },
],
pressed: [
{ offset: 0, color: SKEUOMORPHIC_COLORS.primaryDark },
{ offset: 0.5, color: SKEUOMORPHIC_COLORS.primary },
{ offset: 1, color: SKEUOMORPHIC_COLORS.primaryLight },
],
},
surface: [
{ offset: 0, color: SKEUOMORPHIC_COLORS.surface },
{ offset: 0.5, color: SKEUOMORPHIC_COLORS.surfaceVariant },
{ offset: 1, color: SKEUOMORPHIC_COLORS.surface },
],
input: [
{ offset: 0, color: SKEUOMORPHIC_COLORS.surfaceVariant },
{ offset: 1, color: SKEUOMORPHIC_COLORS.surface },
],
card: [
{ offset: 0, color: SKEUOMORPHIC_COLORS.surface },
{ offset: 0.3, color: SKEUOMORPHIC_COLORS.surfaceVariant },
{ offset: 0.7, color: SKEUOMORPHIC_COLORS.surfaceVariant },
{ offset: 1, color: SKEUOMORPHIC_COLORS.surface },
],
};
// Typography - Enhanced text styles with realistic effects
const SKEUOMORPHIC_TYPOGRAPHY = {
h1: {
fontSize: 32,
fontWeight: 'bold' as const,
lineHeight: 40,
letterSpacing: -0.5,
textShadow: SKEUOMORPHIC_SHADOWS.text.strong,
},
h2: {
fontSize: 28,
fontWeight: 'bold' as const,
lineHeight: 36,
letterSpacing: -0.25,
textShadow: SKEUOMORPHIC_SHADOWS.text.strong,
},
h3: {
fontSize: 24,
fontWeight: '600' as const,
lineHeight: 32,
letterSpacing: 0,
textShadow: SKEUOMORPHIC_SHADOWS.text.default,
},
h4: {
fontSize: 20,
fontWeight: '600' as const,
lineHeight: 28,
letterSpacing: 0,
textShadow: SKEUOMORPHIC_SHADOWS.text.default,
},
h5: {
fontSize: 18,
fontWeight: '600' as const,
lineHeight: 24,
letterSpacing: 0,
textShadow: SKEUOMORPHIC_SHADOWS.text.default,
},
h6: {
fontSize: 16,
fontWeight: '600' as const,
lineHeight: 22,
letterSpacing: 0.15,
textShadow: SKEUOMORPHIC_SHADOWS.text.default,
},
body: {
fontSize: 16,
fontWeight: 'normal' as const,
lineHeight: 24,
letterSpacing: 0.15,
},
body2: {
fontSize: 14,
fontWeight: 'normal' as const,
lineHeight: 20,
letterSpacing: 0.25,
},
caption: {
fontSize: 12,
fontWeight: 'normal' as const,
lineHeight: 16,
letterSpacing: 0.4,
},
button: {
fontSize: 14,
fontWeight: '600' as const,
lineHeight: 20,
letterSpacing: 0.75,
textTransform: 'uppercase' as const,
textShadow: SKEUOMORPHIC_SHADOWS.text.default,
},
overline: {
fontSize: 10,
fontWeight: '600' as const,
lineHeight: 16,
letterSpacing: 1.5,
textTransform: 'uppercase' as const,
},
};
// Spacing - Consistent spacing system
const SKEUOMORPHIC_SPACING = {
xs: 4,
sm: 8,
md: 16,
lg: 24,
xl: 32,
xxl: 48,
xxxl: 64,
};
// Border Radius - Realistic rounded corners
const SKEUOMORPHIC_BORDER_RADIUS = {
none: 0,
sm: 4,
md: 8,
lg: 12,
xl: 16,
xxl: 24,
full: 9999,
};
// Border Widths - Multiple border styles
const SKEUOMORPHIC_BORDER_WIDTHS = {
none: 0,
thin: 1,
medium: 2,
thick: 3,
heavy: 4,
};
// Light Theme
export const skeuomorphicLightTheme: Theme = {
mode: 'light',
design: 'skeuomorphic',
colors: {
primary: SKEUOMORPHIC_COLORS.primary,
secondary: SKEUOMORPHIC_COLORS.secondary,
background: SKEUOMORPHIC_COLORS.background,
surface: SKEUOMORPHIC_COLORS.surface,
error: SKEUOMORPHIC_COLORS.error,
warning: SKEUOMORPHIC_COLORS.warning,
success: SKEUOMORPHIC_COLORS.success,
info: SKEUOMORPHIC_COLORS.info,
text: SKEUOMORPHIC_COLORS.onSurface,
textSecondary: SKEUOMORPHIC_COLORS.neutral,
border: SKEUOMORPHIC_COLORS.border,
lightShadow: SKEUOMORPHIC_COLORS.shadowLight,
darkShadow: SKEUOMORPHIC_COLORS.shadowDark,
},
shadows: {
small: { shadowColor: SKEUOMORPHIC_COLORS.shadowLight, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 4 },
medium: { shadowColor: SKEUOMORPHIC_COLORS.shadowMedium, shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.16, shadowRadius: 8 },
large: { shadowColor: SKEUOMORPHIC_COLORS.shadowDark, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.24, shadowRadius: 16 },
},
spacing: SKEUOMORPHIC_SPACING,
typography: {
h1: SKEUOMORPHIC_TYPOGRAPHY.h1,
h2: SKEUOMORPHIC_TYPOGRAPHY.h2,
h3: SKEUOMORPHIC_TYPOGRAPHY.h3,
body: SKEUOMORPHIC_TYPOGRAPHY.body,
button: SKEUOMORPHIC_TYPOGRAPHY.button,
caption: SKEUOMORPHIC_TYPOGRAPHY.caption,
},
shape: {
borderRadius: SKEUOMORPHIC_BORDER_RADIUS,
},
};
// Dark Theme
export const skeuomorphicDarkTheme: Theme = {
mode: 'dark',
design: 'skeuomorphic',
colors: {
primary: SKEUOMORPHIC_COLORS.primaryLight,
secondary: SKEUOMORPHIC_COLORS.secondaryLight,
background: SKEUOMORPHIC_COLORS.backgroundDark,
surface: SKEUOMORPHIC_COLORS.surfaceDark,
error: SKEUOMORPHIC_COLORS.errorLight,
warning: SKEUOMORPHIC_COLORS.warningLight,
success: SKEUOMORPHIC_COLORS.successLight,
info: SKEUOMORPHIC_COLORS.infoLight,
text: SKEUOMORPHIC_COLORS.onSurfaceDark,
textSecondary: SKEUOMORPHIC_COLORS.neutralLight,
border: SKEUOMORPHIC_COLORS.borderDark,
lightShadow: SKEUOMORPHIC_COLORS.shadowLight,
darkShadow: SKEUOMORPHIC_COLORS.shadowDark,
},
shadows: {
small: { shadowColor: SKEUOMORPHIC_COLORS.shadowLight, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.08, shadowRadius: 4 },
medium: { shadowColor: SKEUOMORPHIC_COLORS.shadowMedium, shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.16, shadowRadius: 8 },
large: { shadowColor: SKEUOMORPHIC_COLORS.shadowDark, shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.24, shadowRadius: 16 },
},
spacing: SKEUOMORPHIC_SPACING,
typography: {
h1: SKEUOMORPHIC_TYPOGRAPHY.h1,
h2: SKEUOMORPHIC_TYPOGRAPHY.h2,
h3: SKEUOMORPHIC_TYPOGRAPHY.h3,
body: SKEUOMORPHIC_TYPOGRAPHY.body,
button: SKEUOMORPHIC_TYPOGRAPHY.button,
caption: SKEUOMORPHIC_TYPOGRAPHY.caption,
},
shape: {
borderRadius: SKEUOMORPHIC_BORDER_RADIUS,
},
};
// Export utility functions for skeuomorphic styling
export const getSkeuomorphicButtonStyle = (variant: 'primary' | 'secondary' = 'primary', pressed = false) => {
const gradient = pressed
? SKEUOMORPHIC_GRADIENTS.button.pressed
: SKEUOMORPHIC_GRADIENTS.button[variant];
const shadows = pressed
? SKEUOMORPHIC_SHADOWS.button.pressed
: SKEUOMORPHIC_SHADOWS.button.default;
return {
background: gradient,
shadows,
borderWidth: SKEUOMORPHIC_BORDER_WIDTHS.thin,
borderColor: pressed ? SKEUOMORPHIC_COLORS.borderDark : SKEUOMORPHIC_COLORS.border,
borderRadius: SKEUOMORPHIC_BORDER_RADIUS.md,
};
};
export const getSkeuomorphicInputStyle = (focused = false) => {
return {
background: SKEUOMORPHIC_GRADIENTS.input,
shadows: focused ? SKEUOMORPHIC_SHADOWS.input.focused : SKEUOMORPHIC_SHADOWS.input.default,
borderWidth: SKEUOMORPHIC_BORDER_WIDTHS.thin,
borderColor: focused ? SKEUOMORPHIC_COLORS.primary : SKEUOMORPHIC_COLORS.border,
borderRadius: SKEUOMORPHIC_BORDER_RADIUS.sm,
};
};
export const getSkeuomorphicCardStyle = () => {
return {
background: SKEUOMORPHIC_GRADIENTS.card,
shadows: SKEUOMORPHIC_SHADOWS.card,
borderWidth: SKEUOMORPHIC_BORDER_WIDTHS.thin,
borderColor: SKEUOMORPHIC_COLORS.borderLight,
borderRadius: SKEUOMORPHIC_BORDER_RADIUS.lg,
};
};
// Export all constants for component usage
export {
SKEUOMORPHIC_COLORS,
SKEUOMORPHIC_SHADOWS,
SKEUOMORPHIC_GRADIENTS,
SKEUOMORPHIC_TYPOGRAPHY,
SKEUOMORPHIC_SPACING,
SKEUOMORPHIC_BORDER_RADIUS,
SKEUOMORPHIC_BORDER_WIDTHS,
};