@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
442 lines • 11.6 kB
TypeScript
export declare const semanticColors: {
readonly textPrimary: "#212529";
readonly textSecondary: "#6c757d";
readonly textMuted: "#adb5bd";
readonly textDisabled: "#dee2e6";
readonly backgroundPrimary: "#ffffff";
readonly backgroundSecondary: "#f8f9fa";
readonly backgroundTertiary: "#e9ecef";
readonly surfaceElevated: "#ffffff";
readonly surfaceCard: "#ffffff";
readonly surfaceModal: "#ffffff";
readonly borderPrimary: "#dee2e6";
readonly borderSecondary: "#e9ecef";
readonly borderFocus: "#86b7fe";
readonly linkDefault: "#0d6efd";
readonly linkHover: "#0a58ca";
readonly linkVisited: "#6f42c1";
readonly successBg: "#d1e7dd";
readonly infoBg: "#d1ecf1";
readonly warningBg: "#fff3cd";
readonly dangerBg: "#f8d7da";
};
export declare const semanticColorsDark: {
readonly textPrimary: "#ffffff";
readonly textSecondary: "#adb5bd";
readonly textMuted: "#6c757d";
readonly textDisabled: "#495057";
readonly backgroundPrimary: "#0d1117";
readonly backgroundSecondary: "#161b22";
readonly backgroundTertiary: "#21262d";
readonly surfaceElevated: "#21262d";
readonly surfaceCard: "#161b22";
readonly surfaceModal: "#21262d";
readonly borderPrimary: "#30363d";
readonly borderSecondary: "#21262d";
readonly borderFocus: "#1f6feb";
readonly linkDefault: "#58a6ff";
readonly linkHover: "#79c0ff";
readonly linkVisited: "#d2a8ff";
readonly successBg: "#1a2e1a";
readonly infoBg: "#0c2d48";
readonly warningBg: "#3d2914";
readonly dangerBg: "#4c1e1e";
};
export declare const defaultTheme: {
colors: {
input: {
background: string;
border: string;
borderFocus: string;
placeholder: string;
};
button: {
primaryBg: string;
primaryText: string;
primaryBorder: string;
primaryHover: string;
primaryActive: string;
primaryDisabled: string;
};
textPrimary: "#212529";
textSecondary: "#6c757d";
textMuted: "#adb5bd";
textDisabled: "#dee2e6";
backgroundPrimary: "#ffffff";
backgroundSecondary: "#f8f9fa";
backgroundTertiary: "#e9ecef";
surfaceElevated: "#ffffff";
surfaceCard: "#ffffff";
surfaceModal: "#ffffff";
borderPrimary: "#dee2e6";
borderSecondary: "#e9ecef";
borderFocus: "#86b7fe";
linkDefault: "#0d6efd";
linkHover: "#0a58ca";
linkVisited: "#6f42c1";
successBg: "#d1e7dd";
infoBg: "#d1ecf1";
warningBg: "#fff3cd";
dangerBg: "#f8d7da";
primary: string;
secondary: string;
success: string;
info: string;
warning: string;
danger: string;
light: string;
dark: string;
white: string;
black: string;
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
};
darkColors: {
input: {
background: string;
border: string;
borderFocus: string;
placeholder: string;
};
button: {
primaryBg: string;
primaryText: string;
primaryBorder: string;
primaryHover: string;
primaryActive: string;
primaryDisabled: string;
};
textPrimary: "#ffffff";
textSecondary: "#adb5bd";
textMuted: "#6c757d";
textDisabled: "#495057";
backgroundPrimary: "#0d1117";
backgroundSecondary: "#161b22";
backgroundTertiary: "#21262d";
surfaceElevated: "#21262d";
surfaceCard: "#161b22";
surfaceModal: "#21262d";
borderPrimary: "#30363d";
borderSecondary: "#21262d";
borderFocus: "#1f6feb";
linkDefault: "#58a6ff";
linkHover: "#79c0ff";
linkVisited: "#d2a8ff";
successBg: "#1a2e1a";
infoBg: "#0c2d48";
warningBg: "#3d2914";
dangerBg: "#4c1e1e";
primary: string;
secondary: string;
success: string;
info: string;
warning: string;
danger: string;
light: string;
dark: string;
white: string;
black: string;
blue: string;
indigo: string;
purple: string;
pink: string;
red: string;
orange: string;
yellow: string;
green: string;
teal: string;
cyan: string;
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
};
spacing: {
0: number;
px: number;
0.5: number;
1: number;
1.5: number;
2: number;
2.5: number;
3: number;
3.5: number;
4: number;
5: number;
6: number;
7: number;
8: number;
9: number;
10: number;
11: number;
12: number;
14: number;
16: number;
20: number;
24: number;
28: number;
32: number;
36: number;
40: number;
44: number;
48: number;
52: number;
56: number;
60: number;
64: number;
72: number;
80: number;
96: number;
auto: string;
};
typography: {
fontFamily: {
sans: string;
serif: string;
mono: string;
};
fontSizes: {
xs: number;
sm: number;
base: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
'4xl': number;
'5xl': number;
'6xl': number;
'7xl': number;
'8xl': number;
'9xl': number;
};
fontWeights: {
thin: "100";
extralight: "200";
light: "300";
normal: "400";
medium: "500";
semibold: "600";
bold: "700";
extrabold: "800";
black: "900";
};
lineHeights: {
none: number;
tight: number;
snug: number;
normal: number;
relaxed: number;
loose: number;
3: number;
4: number;
5: number;
6: number;
7: number;
8: number;
9: number;
10: number;
};
letterSpacing: {
tighter: number;
tight: number;
normal: number;
wide: number;
wider: number;
widest: number;
};
};
borderRadius: {
none: number;
xs: number;
sm: number;
base: number;
md: number;
lg: number;
xl: number;
'2xl': number;
'3xl': number;
full: number;
};
shadows: {
none: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
xs: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
sm: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
base: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
md: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
lg: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
xl: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
'2xl': {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
inner: {
shadowColor: string;
shadowOffset: {
width: number;
height: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
};
};
animation: {
duration: {
fastest: number;
fast: number;
normal: number;
slow: number;
slowest: number;
};
easing: {
linear: string;
easeIn: string;
easeOut: string;
easeInOut: string;
easeInQuart: string;
easeOutQuart: string;
easeInOutQuart: string;
};
};
breakpoints: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
xxl: number;
};
zIndex: {
hide: number;
auto: string;
base: number;
docked: number;
dropdown: number;
sticky: number;
banner: number;
overlay: number;
modal: number;
popover: number;
skipLink: number;
toast: number;
tooltip: number;
};
};
export type ThemeMode = 'light' | 'dark' | 'system' | 'auto';
export interface ThemePreferences {
mode: ThemeMode;
followSystemTheme: boolean;
persistTheme: boolean;
enableAnimations: boolean;
highContrast: boolean;
reduceMotion: boolean;
}
export declare const defaultThemePreferences: ThemePreferences;
export type Theme = typeof defaultTheme;
export interface ThemeVariant {
name: string;
colors: Record<string, any>;
darkColors: Record<string, any>;
}
export declare const themeVariants: Record<string, ThemeVariant>;
//# sourceMappingURL=defaultTheme.d.ts.map