@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
586 lines • 12.1 kB
TypeScript
import { Theme } from './defaultTheme';
import { getBootstrapVariables } from './bootstrapVariables';
export declare const generateThemeVariants: (baseColor: string) => {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
export declare const bootstrapThemeVariants: {
primary: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
secondary: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
success: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
info: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
warning: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
danger: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
light: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
dark: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
blue: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
indigo: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
purple: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
pink: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
red: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
orange: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
yellow: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
green: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
teal: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
cyan: {
base: string;
rgb: string;
emphasis: {
light: string;
dark: string;
};
subtle: {
light: string;
dark: string;
};
border: {
light: string;
dark: string;
};
};
};
export interface BootstrapTheme extends Theme {
variants: typeof bootstrapThemeVariants;
cssVariables: ReturnType<typeof getBootstrapVariables>;
}
export declare const createBootstrapTheme: (baseTheme: Theme, isDarkMode: boolean) => BootstrapTheme;
export declare const bootstrapUtilities: {
text: {
primary: {
color: string;
};
secondary: {
color: string;
};
success: {
color: string;
};
info: {
color: string;
};
warning: {
color: string;
};
danger: {
color: string;
};
light: {
color: string;
};
dark: {
color: string;
};
body: {
color: string;
};
muted: {
color: string;
};
white: {
color: string;
};
black: {
color: string;
};
blue: {
color: string;
};
indigo: {
color: string;
};
purple: {
color: string;
};
pink: {
color: string;
};
red: {
color: string;
};
orange: {
color: string;
};
yellow: {
color: string;
};
green: {
color: string;
};
teal: {
color: string;
};
cyan: {
color: string;
};
'black-50': {
color: string;
};
'white-50': {
color: string;
};
'primary-emphasis': {
color: string;
};
'secondary-emphasis': {
color: string;
};
'success-emphasis': {
color: string;
};
'info-emphasis': {
color: string;
};
'warning-emphasis': {
color: string;
};
'danger-emphasis': {
color: string;
};
'light-emphasis': {
color: string;
};
'dark-emphasis': {
color: string;
};
};
bg: {
primary: {
backgroundColor: string;
};
secondary: {
backgroundColor: string;
};
success: {
backgroundColor: string;
};
info: {
backgroundColor: string;
};
warning: {
backgroundColor: string;
};
danger: {
backgroundColor: string;
};
light: {
backgroundColor: string;
};
dark: {
backgroundColor: string;
};
body: {
backgroundColor: string;
};
white: {
backgroundColor: string;
};
transparent: {
backgroundColor: string;
};
blue: {
backgroundColor: string;
};
indigo: {
backgroundColor: string;
};
purple: {
backgroundColor: string;
};
pink: {
backgroundColor: string;
};
red: {
backgroundColor: string;
};
orange: {
backgroundColor: string;
};
yellow: {
backgroundColor: string;
};
green: {
backgroundColor: string;
};
teal: {
backgroundColor: string;
};
cyan: {
backgroundColor: string;
};
'primary-subtle': {
backgroundColor: string;
};
'secondary-subtle': {
backgroundColor: string;
};
'success-subtle': {
backgroundColor: string;
};
'info-subtle': {
backgroundColor: string;
};
'warning-subtle': {
backgroundColor: string;
};
'danger-subtle': {
backgroundColor: string;
};
'light-subtle': {
backgroundColor: string;
};
'dark-subtle': {
backgroundColor: string;
};
};
border: {
primary: {
borderColor: string;
};
secondary: {
borderColor: string;
};
success: {
borderColor: string;
};
info: {
borderColor: string;
};
warning: {
borderColor: string;
};
danger: {
borderColor: string;
};
light: {
borderColor: string;
};
dark: {
borderColor: string;
};
white: {
borderColor: string;
};
blue: {
borderColor: string;
};
indigo: {
borderColor: string;
};
purple: {
borderColor: string;
};
pink: {
borderColor: string;
};
red: {
borderColor: string;
};
orange: {
borderColor: string;
};
yellow: {
borderColor: string;
};
green: {
borderColor: string;
};
teal: {
borderColor: string;
};
cyan: {
borderColor: string;
};
'primary-subtle': {
borderColor: string;
};
'secondary-subtle': {
borderColor: string;
};
'success-subtle': {
borderColor: string;
};
'info-subtle': {
borderColor: string;
};
'warning-subtle': {
borderColor: string;
};
'danger-subtle': {
borderColor: string;
};
'light-subtle': {
borderColor: string;
};
'dark-subtle': {
borderColor: string;
};
};
};
//# sourceMappingURL=bootstrapTheme.d.ts.map