@whitemordred/react-native-bootstrap5/lib/theme/bootstrapVariables.js

A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode

"use strict";
// Bootstrap 5.3 Complete CSS Variables System
// This file contains all Bootstrap CSS variables for full compatibility
Object.defineProperty(exports, "__esModule", { value: true });
exports.getBootstrapVariables = exports.bootstrapComponentVariables = exports.bootstrapDarkVariables = exports.bootstrapLightVariables = exports.bootstrapColors = exports.hexToRgb = void 0;
const react_native_1 = require("react-native");
// Helper function to convert hex to RGB values
const hexToRgb = (hex) => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : '0, 0, 0';
};
exports.hexToRgb = hexToRgb;
// Bootstrap 5.3 Complete Color System
exports.bootstrapColors = {
    // Core theme colors
    blue: '#0d6efd',
    indigo: '#6610f2',
    purple: '#6f42c1',
    pink: '#d63384',
    red: '#dc3545',
    orange: '#fd7e14',
    yellow: '#ffc107',
    green: '#198754',
    teal: '#20c997',
    cyan: '#0dcaf0',
    // Semantic colors
    primary: '#0d6efd',
    secondary: '#6c757d',
    success: '#198754',
    info: '#0dcaf0',
    warning: '#ffc107',
    danger: '#dc3545',
    light: '#f8f9fa',
    dark: '#212529',
    // Grays
    white: '#fff',
    gray: '#6c757d',
    'gray-dark': '#343a40',
    'gray-100': '#f8f9fa',
    'gray-200': '#e9ecef',
    'gray-300': '#dee2e6',
    'gray-400': '#ced4da',
    'gray-500': '#adb5bd',
    'gray-600': '#6c757d',
    'gray-700': '#495057',
    'gray-800': '#343a40',
    'gray-900': '#212529',
    black: '#000',
};
// Bootstrap 5.3 CSS Variables for Light Mode
exports.bootstrapLightVariables = {
    // Primary colors with RGB values
    '--bs-blue': exports.bootstrapColors.blue,
    '--bs-indigo': exports.bootstrapColors.indigo,
    '--bs-purple': exports.bootstrapColors.purple,
    '--bs-pink': exports.bootstrapColors.pink,
    '--bs-red': exports.bootstrapColors.red,
    '--bs-orange': exports.bootstrapColors.orange,
    '--bs-yellow': exports.bootstrapColors.yellow,
    '--bs-green': exports.bootstrapColors.green,
    '--bs-teal': exports.bootstrapColors.teal,
    '--bs-cyan': exports.bootstrapColors.cyan,
    '--bs-white': exports.bootstrapColors.white,
    '--bs-gray': exports.bootstrapColors.gray,
    '--bs-gray-dark': exports.bootstrapColors['gray-dark'],
    '--bs-primary': exports.bootstrapColors.primary,
    '--bs-secondary': exports.bootstrapColors.secondary,
    '--bs-success': exports.bootstrapColors.success,
    '--bs-info': exports.bootstrapColors.info,
    '--bs-warning': exports.bootstrapColors.warning,
    '--bs-danger': exports.bootstrapColors.danger,
    '--bs-light': exports.bootstrapColors.light,
    '--bs-dark': exports.bootstrapColors.dark,
    // RGB values for opacity support
    '--bs-primary-rgb': (0, exports.hexToRgb)(exports.bootstrapColors.primary),
    '--bs-secondary-rgb': (0, exports.hexToRgb)(exports.bootstrapColors.secondary),
    '--bs-success-rgb': (0, exports.hexToRgb)(exports.bootstrapColors.success),
    '--bs-info-rgb': (0, exports.hexToRgb)(exports.bootstrapColors.info),
    '--bs-warning-rgb': (0, exports.hexToRgb)(exports.bootstrapColors.warning),
    '--bs-danger-rgb': (0, exports.hexToRgb)(exports.bootstrapColors.danger),
    '--bs-light-rgb': (0, exports.hexToRgb)(exports.bootstrapColors.light),
    '--bs-dark-rgb': (0, exports.hexToRgb)(exports.bootstrapColors.dark),
    '--bs-white-rgb': '255, 255, 255',
    '--bs-black-rgb': '0, 0, 0',
    // Text emphasis colors
    '--bs-primary-text-emphasis': '#052c65',
    '--bs-secondary-text-emphasis': '#2b2f32',
    '--bs-success-text-emphasis': '#0a3622',
    '--bs-info-text-emphasis': '#055160',
    '--bs-warning-text-emphasis': '#664d03',
    '--bs-danger-text-emphasis': '#58151c',
    '--bs-light-text-emphasis': '#495057',
    '--bs-dark-text-emphasis': '#495057',
    // Background subtle colors
    '--bs-primary-bg-subtle': '#cfe2ff',
    '--bs-secondary-bg-subtle': '#e2e3e5',
    '--bs-success-bg-subtle': '#d1e7dd',
    '--bs-info-bg-subtle': '#cff4fc',
    '--bs-warning-bg-subtle': '#fff3cd',
    '--bs-danger-bg-subtle': '#f8d7da',
    '--bs-light-bg-subtle': '#fcfcfd',
    '--bs-dark-bg-subtle': '#ced4da',
    // Border subtle colors
    '--bs-primary-border-subtle': '#9ec5fe',
    '--bs-secondary-border-subtle': '#c4c8cb',
    '--bs-success-border-subtle': '#a3cfbb',
    '--bs-info-border-subtle': '#9eeaf9',
    '--bs-warning-border-subtle': '#ffe69c',
    '--bs-danger-border-subtle': '#f1aeb5',
    '--bs-light-border-subtle': '#e9ecef',
    '--bs-dark-border-subtle': '#adb5bd',
    // Body colors
    '--bs-body-color': '#212529',
    '--bs-body-color-rgb': '33, 37, 41',
    '--bs-body-bg': '#fff',
    '--bs-body-bg-rgb': '255, 255, 255',
    '--bs-emphasis-color': '#000',
    '--bs-emphasis-color-rgb': '0, 0, 0',
    // Secondary colors
    '--bs-secondary-color': 'rgba(33, 37, 41, 0.75)',
    '--bs-secondary-color-rgb': '33, 37, 41',
    '--bs-secondary-bg': '#e9ecef',
    '--bs-secondary-bg-rgb': '233, 236, 239',
    // Tertiary colors
    '--bs-tertiary-color': 'rgba(33, 37, 41, 0.5)',
    '--bs-tertiary-color-rgb': '33, 37, 41',
    '--bs-tertiary-bg': '#f8f9fa',
    '--bs-tertiary-bg-rgb': '248, 249, 250',
    // Link colors
    '--bs-link-color': '#0d6efd',
    '--bs-link-color-rgb': '13, 110, 253',
    '--bs-link-decoration': 'underline',
    '--bs-link-hover-color': '#0a58ca',
    '--bs-link-hover-color-rgb': '10, 88, 202',
    // Code colors
    '--bs-code-color': '#d63384',
    '--bs-highlight-bg': '#fff3cd',
    // Borders
    '--bs-border-width': '1px',
    '--bs-border-style': 'solid',
    '--bs-border-color': '#dee2e6',
    '--bs-border-color-translucent': 'rgba(0, 0, 0, 0.175)',
    // Border radius
    '--bs-border-radius': '0.375rem',
    '--bs-border-radius-sm': '0.25rem',
    '--bs-border-radius-lg': '0.5rem',
    '--bs-border-radius-xl': '1rem',
    '--bs-border-radius-2xl': '2rem',
    '--bs-border-radius-pill': '50rem',
    // Box shadow
    '--bs-box-shadow': '0 0.5rem 1rem rgba(0, 0, 0, 0.15)',
    '--bs-box-shadow-sm': '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)',
    '--bs-box-shadow-lg': '0 1rem 3rem rgba(0, 0, 0, 0.175)',
    '--bs-box-shadow-inset': 'inset 0 1px 2px rgba(0, 0, 0, 0.075)',
    // Focus styles
    '--bs-focus-ring-width': '0.25rem',
    '--bs-focus-ring-opacity': '0.25',
    '--bs-focus-ring-color': 'rgba(13, 110, 253, 0.25)',
    // Forms
    '--bs-form-valid-color': '#198754',
    '--bs-form-valid-border-color': '#198754',
    '--bs-form-invalid-color': '#dc3545',
    '--bs-form-invalid-border-color': '#dc3545',
    // Font
    '--bs-body-font-family': react_native_1.Platform.select({
        ios: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
        android: 'Roboto, "Helvetica Neue", Arial, sans-serif',
        web: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
        default: 'sans-serif'
    }),
    '--bs-body-font-size': '1rem',
    '--bs-body-font-weight': '400',
    '--bs-body-line-height': '1.5',
    // Headings
    '--bs-heading-color': 'inherit',
    // Gradients
    '--bs-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))',
};
// Bootstrap 5.3 CSS Variables for Dark Mode
exports.bootstrapDarkVariables = Object.assign({ 
    // Primary colors remain the same
    '--bs-blue': exports.bootstrapColors.blue, '--bs-indigo': exports.bootstrapColors.indigo, '--bs-purple': exports.bootstrapColors.purple, '--bs-pink': exports.bootstrapColors.pink, '--bs-red': exports.bootstrapColors.red, '--bs-orange': exports.bootstrapColors.orange, '--bs-yellow': exports.bootstrapColors.yellow, '--bs-green': exports.bootstrapColors.green, '--bs-teal': exports.bootstrapColors.teal, '--bs-cyan': exports.bootstrapColors.cyan, 
    // Adjusted theme colors for dark mode
    '--bs-primary': '#0d6efd', '--bs-secondary': '#6c757d', '--bs-success': '#198754', '--bs-info': '#0dcaf0', '--bs-warning': '#ffc107', '--bs-danger': '#dc3545', '--bs-light': '#343a40', '--bs-dark': '#dee2e6', 
    // RGB values
    '--bs-primary-rgb': (0, exports.hexToRgb)('#0d6efd'), '--bs-secondary-rgb': (0, exports.hexToRgb)('#6c757d'), '--bs-success-rgb': (0, exports.hexToRgb)('#198754'), '--bs-info-rgb': (0, exports.hexToRgb)('#0dcaf0'), '--bs-warning-rgb': (0, exports.hexToRgb)('#ffc107'), '--bs-danger-rgb': (0, exports.hexToRgb)('#dc3545'), '--bs-light-rgb': (0, exports.hexToRgb)('#343a40'), '--bs-dark-rgb': (0, exports.hexToRgb)('#dee2e6'), '--bs-white-rgb': '255, 255, 255', '--bs-black-rgb': '0, 0, 0', 
    // Dark mode text emphasis colors
    '--bs-primary-text-emphasis': '#6ea8fe', '--bs-secondary-text-emphasis': '#a7acb1', '--bs-success-text-emphasis': '#75b798', '--bs-info-text-emphasis': '#6edff6', '--bs-warning-text-emphasis': '#ffda6a', '--bs-danger-text-emphasis': '#ea868f', '--bs-light-text-emphasis': '#f8f9fa', '--bs-dark-text-emphasis': '#dee2e6', 
    // Dark mode background subtle colors
    '--bs-primary-bg-subtle': '#031633', '--bs-secondary-bg-subtle': '#161719', '--bs-success-bg-subtle': '#051b11', '--bs-info-bg-subtle': '#032830', '--bs-warning-bg-subtle': '#332701', '--bs-danger-bg-subtle': '#2c0b0e', '--bs-light-bg-subtle': '#343a40', '--bs-dark-bg-subtle': '#1a1d20', 
    // Dark mode border subtle colors
    '--bs-primary-border-subtle': '#084298', '--bs-secondary-border-subtle': '#41464b', '--bs-success-border-subtle': '#0f5132', '--bs-info-border-subtle': '#087990', '--bs-warning-border-subtle': '#997404', '--bs-danger-border-subtle': '#842029', '--bs-light-border-subtle': '#495057', '--bs-dark-border-subtle': '#343a40', 
    // Dark mode body colors
    '--bs-body-color': '#dee2e6', '--bs-body-color-rgb': '222, 226, 230', '--bs-body-bg': '#212529', '--bs-body-bg-rgb': '33, 37, 41', '--bs-emphasis-color': '#fff', '--bs-emphasis-color-rgb': '255, 255, 255', 
    // Dark mode secondary colors
    '--bs-secondary-color': 'rgba(222, 226, 230, 0.75)', '--bs-secondary-color-rgb': '222, 226, 230', '--bs-secondary-bg': '#343a40', '--bs-secondary-bg-rgb': '52, 58, 64', 
    // Dark mode tertiary colors
    '--bs-tertiary-color': 'rgba(222, 226, 230, 0.5)', '--bs-tertiary-color-rgb': '222, 226, 230', '--bs-tertiary-bg': '#2b3035', '--bs-tertiary-bg-rgb': '43, 48, 53', 
    // Dark mode link colors
    '--bs-link-color': '#6ea8fe', '--bs-link-color-rgb': '110, 168, 254', '--bs-link-decoration': 'underline', '--bs-link-hover-color': '#8bb9fe', '--bs-link-hover-color-rgb': '139, 185, 254', 
    // Dark mode specific
    '--bs-code-color': '#e685b5', '--bs-highlight-bg': '#664d03', 
    // Dark mode borders
    '--bs-border-color': '#495057', '--bs-border-color-translucent': 'rgba(255, 255, 255, 0.15)', 
    // Dark mode shadows
    '--bs-box-shadow': '0 0.5rem 1rem rgba(0, 0, 0, 0.5)', '--bs-box-shadow-sm': '0 0.125rem 0.25rem rgba(0, 0, 0, 0.25)', '--bs-box-shadow-lg': '0 1rem 3rem rgba(0, 0, 0, 0.5)', '--bs-box-shadow-inset': 'inset 0 1px 2px rgba(0, 0, 0, 0.25)', 
    // Dark mode focus
    '--bs-focus-ring-color': 'rgba(110, 168, 254, 0.25)' }, Object.fromEntries(Object.entries(exports.bootstrapLightVariables).filter(([key]) => !key.includes('color') &&
    !key.includes('bg') &&
    !key.includes('border') &&
    !key.includes('shadow') &&
    !key.includes('emphasis') &&
    !key.includes('subtle'))));
// Component-specific variables
exports.bootstrapComponentVariables = {
    // Button variables
    '--bs-btn-padding-x': '0.75rem',
    '--bs-btn-padding-y': '0.375rem',
    '--bs-btn-font-size': '1rem',
    '--bs-btn-font-weight': '400',
    '--bs-btn-line-height': '1.5',
    '--bs-btn-border-width': '1px',
    '--bs-btn-border-radius': '0.375rem',
    '--bs-btn-box-shadow': 'inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)',
    '--bs-btn-disabled-opacity': '0.65',
    '--bs-btn-focus-box-shadow': '0 0 0 0.25rem',
    // Form variables
    '--bs-form-control-bg': 'var(--bs-body-bg)',
    '--bs-form-control-disabled-bg': 'var(--bs-secondary-bg)',
    '--bs-form-control-border-color': 'var(--bs-border-color)',
    '--bs-form-control-border-width': '1px',
    '--bs-form-control-border-radius': '0.375rem',
    '--bs-form-control-padding-y': '0.375rem',
    '--bs-form-control-padding-x': '0.75rem',
    // Card variables
    '--bs-card-spacer-y': '1rem',
    '--bs-card-spacer-x': '1rem',
    '--bs-card-title-spacer-y': '0.5rem',
    '--bs-card-title-color': '',
    '--bs-card-subtitle-color': '',
    '--bs-card-border-width': '1px',
    '--bs-card-border-color': 'var(--bs-border-color-translucent)',
    '--bs-card-border-radius': '0.375rem',
    '--bs-card-box-shadow': '',
    '--bs-card-inner-border-radius': 'calc(0.375rem - 1px)',
    '--bs-card-cap-padding-y': '0.5rem',
    '--bs-card-cap-padding-x': '1rem',
    '--bs-card-cap-bg': 'rgba(0, 0, 0, 0.03)',
    '--bs-card-cap-color': '',
    '--bs-card-height': '',
    '--bs-card-color': '',
    '--bs-card-bg': 'var(--bs-body-bg)',
    '--bs-card-img-overlay-padding': '1rem',
    // Modal variables
    '--bs-modal-zindex': '1055',
    '--bs-modal-width': '500px',
    '--bs-modal-padding': '1rem',
    '--bs-modal-margin': '0.5rem',
    '--bs-modal-color': '',
    '--bs-modal-bg': 'var(--bs-body-bg)',
    '--bs-modal-border-color': 'var(--bs-border-color-translucent)',
    '--bs-modal-border-width': '1px',
    '--bs-modal-border-radius': '0.5rem',
    '--bs-modal-box-shadow': '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)',
    '--bs-modal-inner-border-radius': 'calc(0.5rem - 1px)',
    '--bs-modal-header-padding-x': '1rem',
    '--bs-modal-header-padding-y': '1rem',
    '--bs-modal-header-padding': '1rem 1rem',
    '--bs-modal-header-border-color': 'var(--bs-border-color)',
    '--bs-modal-header-border-width': '1px',
    '--bs-modal-title-line-height': '1.5',
    '--bs-modal-footer-gap': '0.5rem',
    '--bs-modal-footer-bg': '',
    '--bs-modal-footer-border-color': 'var(--bs-border-color)',
    '--bs-modal-footer-border-width': '1px',
    // Navbar variables
    '--bs-navbar-padding-y': '0.5rem',
    '--bs-navbar-padding-x': '0',
    '--bs-navbar-nav-link-padding-x': '0.5rem',
    '--bs-navbar-brand-font-size': '1.25rem',
    '--bs-navbar-brand-color': 'var(--bs-emphasis-color)',
    '--bs-navbar-brand-hover-color': 'var(--bs-emphasis-color)',
    '--bs-navbar-nav-link-color': 'rgba(var(--bs-emphasis-color-rgb), 0.65)',
    '--bs-navbar-nav-link-hover-color': 'rgba(var(--bs-emphasis-color-rgb), 0.8)',
    '--bs-navbar-nav-link-disabled-color': 'rgba(var(--bs-emphasis-color-rgb), 0.3)',
    '--bs-navbar-active-color': 'rgba(var(--bs-emphasis-color-rgb), 0.9)',
    '--bs-navbar-brand-padding-y': '0.3125rem',
    '--bs-navbar-toggler-padding-y': '0.25rem',
    '--bs-navbar-toggler-padding-x': '0.75rem',
    '--bs-navbar-toggler-font-size': '1.25rem',
    '--bs-navbar-toggler-icon-bg': 'url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 30 30\'%3e%3cpath stroke=\'rgba%28var(--bs-emphasis-color-rgb), 0.75%29\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' stroke-width=\'2\' d=\'M4 7h22M4 15h22M4 23h22\'/%3e%3c/svg%3e")',
    '--bs-navbar-toggler-border-color': 'rgba(var(--bs-emphasis-color-rgb), 0.15)',
    '--bs-navbar-toggler-border-radius': '0.375rem',
    '--bs-navbar-toggler-focus-width': '0.25rem',
    '--bs-navbar-toggler-transition': 'box-shadow 0.15s ease-in-out',
};
// Utility to merge variables for a specific mode
const getBootstrapVariables = (isDarkMode) => {
    const modeVariables = isDarkMode ? exports.bootstrapDarkVariables : exports.bootstrapLightVariables;
    return Object.assign(Object.assign({}, modeVariables), exports.bootstrapComponentVariables);
};
exports.getBootstrapVariables = getBootstrapVariables;