@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
172 lines (171 loc) • 10.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.bootstrapUtilities = exports.createBootstrapTheme = exports.bootstrapThemeVariants = exports.generateThemeVariants = void 0;
const bootstrapVariables_1 = require("./bootstrapVariables");
// Theme emphasis and subtle colors generator
const generateThemeVariants = (baseColor) => {
const rgb = (0, bootstrapVariables_1.hexToRgb)(baseColor);
return {
base: baseColor,
rgb: rgb,
emphasis: {
light: adjustColor(baseColor, -0.6), // Darker for light mode
dark: adjustColor(baseColor, 0.4), // Lighter for dark mode
},
subtle: {
light: adjustColor(baseColor, 0.8), // Much lighter for light mode
dark: adjustColor(baseColor, -0.8), // Much darker for dark mode
},
border: {
light: adjustColor(baseColor, 0.6), // Lighter for light mode
dark: adjustColor(baseColor, -0.6), // Darker for dark mode
},
};
};
exports.generateThemeVariants = generateThemeVariants;
// Helper function to adjust color brightness
function adjustColor(hex, percent) {
const num = parseInt(hex.replace('#', ''), 16);
const amt = Math.round(2.55 * percent * 100);
const R = (num >> 16) + amt;
const G = (num >> 8 & 0x00FF) + amt;
const B = (num & 0x0000FF) + amt;
return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
(G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
(B < 255 ? B < 1 ? 0 : B : 255))
.toString(16).slice(1);
}
// Generate all Bootstrap theme variants
exports.bootstrapThemeVariants = {
primary: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.primary),
secondary: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.secondary),
success: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.success),
info: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.info),
warning: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.warning),
danger: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.danger),
light: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.light),
dark: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.dark),
// Extended colors
blue: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.blue),
indigo: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.indigo),
purple: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.purple),
pink: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.pink),
red: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.red),
orange: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.orange),
yellow: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.yellow),
green: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.green),
teal: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.teal),
cyan: (0, exports.generateThemeVariants)(bootstrapVariables_1.bootstrapColors.cyan),
};
// Create Bootstrap-enhanced theme
const createBootstrapTheme = (baseTheme, isDarkMode) => {
return Object.assign(Object.assign({}, baseTheme), { variants: exports.bootstrapThemeVariants, cssVariables: (0, bootstrapVariables_1.getBootstrapVariables)(isDarkMode) });
};
exports.createBootstrapTheme = createBootstrapTheme;
// Utility classes mapping
exports.bootstrapUtilities = {
// Text color utilities
text: {
primary: { color: bootstrapVariables_1.bootstrapColors.primary },
secondary: { color: bootstrapVariables_1.bootstrapColors.secondary },
success: { color: bootstrapVariables_1.bootstrapColors.success },
info: { color: bootstrapVariables_1.bootstrapColors.info },
warning: { color: bootstrapVariables_1.bootstrapColors.warning },
danger: { color: bootstrapVariables_1.bootstrapColors.danger },
light: { color: bootstrapVariables_1.bootstrapColors.light },
dark: { color: bootstrapVariables_1.bootstrapColors.dark },
body: { color: 'var(--bs-body-color)' },
muted: { color: bootstrapVariables_1.bootstrapColors['gray-600'] },
white: { color: bootstrapVariables_1.bootstrapColors.white },
black: { color: bootstrapVariables_1.bootstrapColors.black },
// Extended colors
blue: { color: bootstrapVariables_1.bootstrapColors.blue },
indigo: { color: bootstrapVariables_1.bootstrapColors.indigo },
purple: { color: bootstrapVariables_1.bootstrapColors.purple },
pink: { color: bootstrapVariables_1.bootstrapColors.pink },
red: { color: bootstrapVariables_1.bootstrapColors.red },
orange: { color: bootstrapVariables_1.bootstrapColors.orange },
yellow: { color: bootstrapVariables_1.bootstrapColors.yellow },
green: { color: bootstrapVariables_1.bootstrapColors.green },
teal: { color: bootstrapVariables_1.bootstrapColors.teal },
cyan: { color: bootstrapVariables_1.bootstrapColors.cyan },
// Opacity variants
'black-50': { color: 'rgba(0, 0, 0, 0.5)' },
'white-50': { color: 'rgba(255, 255, 255, 0.5)' },
// Emphasis variants
'primary-emphasis': { color: 'var(--bs-primary-text-emphasis)' },
'secondary-emphasis': { color: 'var(--bs-secondary-text-emphasis)' },
'success-emphasis': { color: 'var(--bs-success-text-emphasis)' },
'info-emphasis': { color: 'var(--bs-info-text-emphasis)' },
'warning-emphasis': { color: 'var(--bs-warning-text-emphasis)' },
'danger-emphasis': { color: 'var(--bs-danger-text-emphasis)' },
'light-emphasis': { color: 'var(--bs-light-text-emphasis)' },
'dark-emphasis': { color: 'var(--bs-dark-text-emphasis)' },
},
// Background color utilities
bg: {
primary: { backgroundColor: bootstrapVariables_1.bootstrapColors.primary },
secondary: { backgroundColor: bootstrapVariables_1.bootstrapColors.secondary },
success: { backgroundColor: bootstrapVariables_1.bootstrapColors.success },
info: { backgroundColor: bootstrapVariables_1.bootstrapColors.info },
warning: { backgroundColor: bootstrapVariables_1.bootstrapColors.warning },
danger: { backgroundColor: bootstrapVariables_1.bootstrapColors.danger },
light: { backgroundColor: bootstrapVariables_1.bootstrapColors.light },
dark: { backgroundColor: bootstrapVariables_1.bootstrapColors.dark },
body: { backgroundColor: 'var(--bs-body-bg)' },
white: { backgroundColor: bootstrapVariables_1.bootstrapColors.white },
transparent: { backgroundColor: 'transparent' },
// Extended colors
blue: { backgroundColor: bootstrapVariables_1.bootstrapColors.blue },
indigo: { backgroundColor: bootstrapVariables_1.bootstrapColors.indigo },
purple: { backgroundColor: bootstrapVariables_1.bootstrapColors.purple },
pink: { backgroundColor: bootstrapVariables_1.bootstrapColors.pink },
red: { backgroundColor: bootstrapVariables_1.bootstrapColors.red },
orange: { backgroundColor: bootstrapVariables_1.bootstrapColors.orange },
yellow: { backgroundColor: bootstrapVariables_1.bootstrapColors.yellow },
green: { backgroundColor: bootstrapVariables_1.bootstrapColors.green },
teal: { backgroundColor: bootstrapVariables_1.bootstrapColors.teal },
cyan: { backgroundColor: bootstrapVariables_1.bootstrapColors.cyan },
// Subtle variants
'primary-subtle': { backgroundColor: 'var(--bs-primary-bg-subtle)' },
'secondary-subtle': { backgroundColor: 'var(--bs-secondary-bg-subtle)' },
'success-subtle': { backgroundColor: 'var(--bs-success-bg-subtle)' },
'info-subtle': { backgroundColor: 'var(--bs-info-bg-subtle)' },
'warning-subtle': { backgroundColor: 'var(--bs-warning-bg-subtle)' },
'danger-subtle': { backgroundColor: 'var(--bs-danger-bg-subtle)' },
'light-subtle': { backgroundColor: 'var(--bs-light-bg-subtle)' },
'dark-subtle': { backgroundColor: 'var(--bs-dark-bg-subtle)' },
},
// Border color utilities
border: {
primary: { borderColor: bootstrapVariables_1.bootstrapColors.primary },
secondary: { borderColor: bootstrapVariables_1.bootstrapColors.secondary },
success: { borderColor: bootstrapVariables_1.bootstrapColors.success },
info: { borderColor: bootstrapVariables_1.bootstrapColors.info },
warning: { borderColor: bootstrapVariables_1.bootstrapColors.warning },
danger: { borderColor: bootstrapVariables_1.bootstrapColors.danger },
light: { borderColor: bootstrapVariables_1.bootstrapColors.light },
dark: { borderColor: bootstrapVariables_1.bootstrapColors.dark },
white: { borderColor: bootstrapVariables_1.bootstrapColors.white },
// Extended colors
blue: { borderColor: bootstrapVariables_1.bootstrapColors.blue },
indigo: { borderColor: bootstrapVariables_1.bootstrapColors.indigo },
purple: { borderColor: bootstrapVariables_1.bootstrapColors.purple },
pink: { borderColor: bootstrapVariables_1.bootstrapColors.pink },
red: { borderColor: bootstrapVariables_1.bootstrapColors.red },
orange: { borderColor: bootstrapVariables_1.bootstrapColors.orange },
yellow: { borderColor: bootstrapVariables_1.bootstrapColors.yellow },
green: { borderColor: bootstrapVariables_1.bootstrapColors.green },
teal: { borderColor: bootstrapVariables_1.bootstrapColors.teal },
cyan: { borderColor: bootstrapVariables_1.bootstrapColors.cyan },
// Subtle variants
'primary-subtle': { borderColor: 'var(--bs-primary-border-subtle)' },
'secondary-subtle': { borderColor: 'var(--bs-secondary-border-subtle)' },
'success-subtle': { borderColor: 'var(--bs-success-border-subtle)' },
'info-subtle': { borderColor: 'var(--bs-info-border-subtle)' },
'warning-subtle': { borderColor: 'var(--bs-warning-border-subtle)' },
'danger-subtle': { borderColor: 'var(--bs-danger-border-subtle)' },
'light-subtle': { borderColor: 'var(--bs-light-border-subtle)' },
'dark-subtle': { borderColor: 'var(--bs-dark-border-subtle)' },
},
};