@whitemordred/react-native-bootstrap5
Version:
A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode
421 lines (420 loc) • 12.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.themeVariants = exports.defaultThemePreferences = exports.defaultTheme = exports.semanticColorsDark = exports.semanticColors = void 0;
// Bootstrap 5 enhanced theme system with professional dark/light mode support
const react_native_1 = require("react-native");
// Enhanced color system with semantic naming
exports.semanticColors = {
// Text colors
textPrimary: '#212529',
textSecondary: '#6c757d',
textMuted: '#adb5bd',
textDisabled: '#dee2e6',
// Background colors
backgroundPrimary: '#ffffff',
backgroundSecondary: '#f8f9fa',
backgroundTertiary: '#e9ecef',
// Surface colors
surfaceElevated: '#ffffff',
surfaceCard: '#ffffff',
surfaceModal: '#ffffff',
// Border colors
borderPrimary: '#dee2e6',
borderSecondary: '#e9ecef',
borderFocus: '#86b7fe',
// Interactive colors
linkDefault: '#0d6efd',
linkHover: '#0a58ca',
linkVisited: '#6f42c1',
// Status colors
successBg: '#d1e7dd',
infoBg: '#d1ecf1',
warningBg: '#fff3cd',
dangerBg: '#f8d7da',
};
exports.semanticColorsDark = {
// Text colors
textPrimary: '#ffffff',
textSecondary: '#adb5bd',
textMuted: '#6c757d',
textDisabled: '#495057',
// Background colors
backgroundPrimary: '#0d1117',
backgroundSecondary: '#161b22',
backgroundTertiary: '#21262d',
// Surface colors
surfaceElevated: '#21262d',
surfaceCard: '#161b22',
surfaceModal: '#21262d',
// Border colors
borderPrimary: '#30363d',
borderSecondary: '#21262d',
borderFocus: '#1f6feb',
// Interactive colors
linkDefault: '#58a6ff',
linkHover: '#79c0ff',
linkVisited: '#d2a8ff',
// Status colors
successBg: '#1a2e1a',
infoBg: '#0c2d48',
warningBg: '#3d2914',
dangerBg: '#4c1e1e',
};
exports.defaultTheme = {
// Enhanced Bootstrap 5 colors - Complete palette
colors: Object.assign(Object.assign({
// Core theme colors
primary: '#0d6efd', secondary: '#6c757d', success: '#198754', info: '#0dcaf0', warning: '#ffc107', danger: '#dc3545', light: '#f8f9fa', dark: '#212529', white: '#ffffff', black: '#000000',
// Extended Bootstrap colors
blue: '#0d6efd', indigo: '#6610f2', purple: '#6f42c1', pink: '#d63384', red: '#dc3545', orange: '#fd7e14', yellow: '#ffc107', green: '#198754', teal: '#20c997', cyan: '#0dcaf0',
// Extended gray scale
gray: {
50: '#fafafa',
100: '#f8f9fa',
200: '#e9ecef',
300: '#dee2e6',
400: '#ced4da',
500: '#adb5bd',
600: '#6c757d',
700: '#495057',
800: '#343a40',
900: '#212529',
950: '#0d1117'
} }, exports.semanticColors), {
// Component-specific colors
input: {
background: '#ffffff',
border: '#ced4da',
borderFocus: '#86b7fe',
placeholder: '#6c757d',
}, button: {
primaryBg: '#0d6efd',
primaryText: '#ffffff',
primaryBorder: '#0d6efd',
primaryHover: '#0b5ed7',
primaryActive: '#0a58ca',
primaryDisabled: '#6c757d',
} }),
// Professional dark mode colors
darkColors: Object.assign(Object.assign({
// Core theme colors
primary: '#4fc3f7', secondary: '#8e8e93', success: '#32d74b', info: '#64d2ff', warning: '#ff9f0a', danger: '#ff453a', light: '#1c1c1e', dark: '#f2f2f7', white: '#000000', black: '#ffffff',
// Extended Bootstrap colors for dark mode
blue: '#4fc3f7', indigo: '#8b5cf6', purple: '#a855f7', pink: '#ec4899', red: '#ff453a', orange: '#fb923c', yellow: '#ff9f0a', green: '#32d74b', teal: '#14b8a6', cyan: '#64d2ff',
// Extended gray scale for dark mode
gray: {
50: '#000000',
100: '#0d1117',
200: '#161b22',
300: '#21262d',
400: '#30363d',
500: '#484f58',
600: '#6e7681',
700: '#8b949e',
800: '#b1bac4',
900: '#c9d1d9',
950: '#f0f6fc'
} }, exports.semanticColorsDark), {
// Component-specific dark colors
input: {
background: '#21262d',
border: '#30363d',
borderFocus: '#1f6feb',
placeholder: '#8b949e',
}, button: {
primaryBg: '#238be6',
primaryText: '#ffffff',
primaryBorder: '#238be6',
primaryHover: '#2ea043',
primaryActive: '#238be6',
primaryDisabled: '#484f58',
} }),
// Enhanced spacing system
spacing: {
0: 0,
px: 1, // 1px
0.5: 2, // 0.125rem
1: 4, // 0.25rem
1.5: 6, // 0.375rem
2: 8, // 0.5rem
2.5: 10, // 0.625rem
3: 12, // 0.75rem
3.5: 14, // 0.875rem
4: 16, // 1rem
5: 20, // 1.25rem
6: 24, // 1.5rem
7: 28, // 1.75rem
8: 32, // 2rem
9: 36, // 2.25rem
10: 40, // 2.5rem
11: 44, // 2.75rem
12: 48, // 3rem
14: 56, // 3.5rem
16: 64, // 4rem
20: 80, // 5rem
24: 96, // 6rem
28: 112, // 7rem
32: 128, // 8rem
36: 144, // 9rem
40: 160, // 10rem
44: 176, // 11rem
48: 192, // 12rem
52: 208, // 13rem
56: 224, // 14rem
60: 240, // 15rem
64: 256, // 16rem
72: 288, // 18rem
80: 320, // 20rem
96: 384, // 24rem
auto: 'auto'
},
// Enhanced typography system
typography: {
fontFamily: {
sans: react_native_1.Platform.select({
ios: 'System',
android: 'Roboto',
web: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
default: 'System'
}),
serif: react_native_1.Platform.select({
ios: 'Times New Roman',
android: 'serif',
web: 'Georgia, "Times New Roman", Times, serif',
default: 'serif'
}),
mono: react_native_1.Platform.select({
ios: 'Courier New',
android: 'monospace',
web: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
default: 'monospace'
})
},
fontSizes: {
xs: 12, // 0.75rem
sm: 14, // 0.875rem
base: 16, // 1rem
lg: 18, // 1.125rem
xl: 20, // 1.25rem
'2xl': 24, // 1.5rem
'3xl': 30, // 1.875rem
'4xl': 36, // 2.25rem
'5xl': 48, // 3rem
'6xl': 60, // 3.75rem
'7xl': 72, // 4.5rem
'8xl': 96, // 6rem
'9xl': 128 // 8rem
},
fontWeights: {
thin: '100',
extralight: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900'
},
lineHeights: {
none: 1,
tight: 1.25,
snug: 1.375,
normal: 1.5,
relaxed: 1.625,
loose: 2,
3: 0.75,
4: 1,
5: 1.25,
6: 1.5,
7: 1.75,
8: 2,
9: 2.25,
10: 2.5
},
letterSpacing: {
tighter: -0.05,
tight: -0.025,
normal: 0,
wide: 0.025,
wider: 0.05,
widest: 0.1
}
},
// Enhanced border radius system
borderRadius: {
none: 0,
xs: 2,
sm: 4,
base: 6,
md: 8,
lg: 12,
xl: 16,
'2xl': 20,
'3xl': 24,
full: 9999
},
// Enhanced shadows with dark mode support
shadows: {
none: {
shadowColor: 'transparent',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0
},
xs: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 1,
elevation: 1
},
sm: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 2
},
base: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 3,
elevation: 3
},
md: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.15,
shadowRadius: 6,
elevation: 6
},
lg: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.15,
shadowRadius: 15,
elevation: 15
},
xl: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 20 },
shadowOpacity: 0.25,
shadowRadius: 25,
elevation: 25
},
'2xl': {
shadowColor: '#000',
shadowOffset: { width: 0, height: 25 },
shadowOpacity: 0.25,
shadowRadius: 50,
elevation: 50
},
inner: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.06,
shadowRadius: 2,
elevation: -2
}
},
// Animation durations and easing
animation: {
duration: {
fastest: 100,
fast: 200,
normal: 300,
slow: 400,
slowest: 500
},
easing: {
linear: 'linear',
easeIn: 'ease-in',
easeOut: 'ease-out',
easeInOut: 'ease-in-out',
easeInQuart: 'cubic-bezier(0.5, 0, 0.75, 0)',
easeOutQuart: 'cubic-bezier(0.25, 1, 0.5, 1)',
easeInOutQuart: 'cubic-bezier(0.76, 0, 0.24, 1)'
}
},
// Breakpoints for responsive design
breakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400
},
// Z-index scale
zIndex: {
hide: -1,
auto: 'auto',
base: 0,
docked: 10,
dropdown: 1000,
sticky: 1020,
banner: 1030,
overlay: 1040,
modal: 1050,
popover: 1060,
skipLink: 1070,
toast: 1080,
tooltip: 1090
}
};
// Default theme preferences
exports.defaultThemePreferences = {
mode: 'system',
followSystemTheme: true,
persistTheme: true,
enableAnimations: true,
highContrast: false,
reduceMotion: false
};
// Predefined theme variants
exports.themeVariants = {
bootstrap: {
name: 'Bootstrap Classic',
colors: {},
darkColors: {}
},
github: {
name: 'GitHub',
colors: {
primary: '#0969da',
success: '#1a7f37',
danger: '#d1242f',
warning: '#9a6700',
backgroundPrimary: '#ffffff',
backgroundSecondary: '#f6f8fa'
},
darkColors: {
primary: '#58a6ff',
success: '#3fb950',
danger: '#f85149',
warning: '#d29922',
backgroundPrimary: '#0d1117',
backgroundSecondary: '#161b22'
}
},
material: {
name: 'Material Design',
colors: {
primary: '#1976d2',
secondary: '#dc004e',
success: '#388e3c',
warning: '#f57c00',
danger: '#d32f2f'
},
darkColors: {
primary: '#90caf9',
secondary: '#f48fb1',
success: '#81c784',
warning: '#ffb74d',
danger: '#e57373'
}
}
};