@upv/react-ui-core
Version:
**USHI Design System — Modern UI Component Library**
542 lines (541 loc) • 14.4 kB
TypeScript
declare const breakpoints: {
mobile: string;
tablet: string;
laptop: string;
desktop: string;
ultraWide: string;
};
export type Breakpoint = keyof typeof breakpoints;
declare const lightColors: {
primary: string;
primaryHover: string;
primarySelected: string;
secondary: string;
secondaryHover: string;
secondarySelected: string;
accent: string;
accentHover: string;
accentSelected: string;
background: string;
backgroundHover: string;
surface: string;
surfaceHover: string;
surfaceDisabled: string;
surfaceEntry: string;
surfaceAlt: string;
surfaceGlass: string;
borderGlass: string;
overlay: string;
textPrimary: string;
textonPrimary: string;
textSecondary: string;
textonSecondary: string;
textDisabled: string;
muted: string;
border: string;
divider: string;
buttonBackground: string;
buttonText: string;
buttonDisabled: string;
buttonDisabledText: string;
pill: string;
success: string;
warning: string;
error: string;
info: string;
};
export declare const lightTheme: {
fonts: {
fontFamily: string;
fontSize: string;
fontWeightLight: string;
fontWeightRegular: string;
fontWeightMedium: string;
fontWeightBold: string;
fontWeightExtraBold: string;
};
typography: {
default: {
fontFamily: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
hero: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
display: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
title: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
heading1: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
heading2: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
heading3: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
heading4: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
bodyLarge: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
body: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
bodySmall: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
caption: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
quote: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
overline: {
fontSize: string;
fontWeight: string;
textTransform: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
disclaimer: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
legalText: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
error: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
};
zIndices: {
navbar: number;
sidebar: number;
drawer: number;
};
spacing: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
sidebarWidth: string;
};
radii: {
sm: string;
md: string;
lg: string;
rounded: string;
};
elevations: {
low: string;
md: string;
high: string;
};
transitions: {
default: string;
fast: string;
};
breakpoints: {
mobile: string;
tablet: string;
laptop: string;
desktop: string;
ultraWide: string;
};
border: {
sm: string;
md: string;
lg: string;
};
colors: {
primary: string;
primaryHover: string;
primarySelected: string;
secondary: string;
secondaryHover: string;
secondarySelected: string;
accent: string;
accentHover: string;
accentSelected: string;
background: string;
backgroundHover: string;
surface: string;
surfaceHover: string;
surfaceDisabled: string;
surfaceEntry: string;
surfaceAlt: string;
surfaceGlass: string;
borderGlass: string;
overlay: string;
textPrimary: string;
textonPrimary: string;
textSecondary: string;
textonSecondary: string;
textDisabled: string;
muted: string;
border: string;
divider: string;
buttonBackground: string;
buttonText: string;
buttonDisabled: string;
buttonDisabledText: string;
pill: string;
success: string;
warning: string;
error: string;
info: string;
};
gradients: {
primary: string;
secondary: string;
accent: string;
success: string;
warning: string;
error: string;
info: string;
radialPrimary: string;
radialSecondary: string;
conicAccent: string;
};
shadow: string;
};
export declare const darkTheme: {
colors: {
primary: string;
primaryHover: string;
primarySelected: string;
secondary: string;
secondaryHover: string;
secondarySelected: string;
background: string;
surface: string;
overlay: string;
textPrimary: string;
textSecondary: string;
textDisabled: string;
border: string;
divider: string;
buttonBackground: string;
buttonText: string;
buttonDisabled: string;
buttonDisabledText: string;
success: string;
warning: string;
error: string;
info: string;
accent: string;
accentHover: string;
accentSelected: string;
backgroundHover: string;
surfaceHover: string;
surfaceDisabled: string;
surfaceEntry: string;
surfaceAlt: string;
surfaceGlass: string;
borderGlass: string;
textonPrimary: string;
textonSecondary: string;
muted: string;
pill: string;
};
gradients: {
primary: string;
secondary: string;
accent: string;
success: string;
warning: string;
error: string;
info: string;
radialPrimary: string;
radialSecondary: string;
conicAccent: string;
};
fonts: {
fontFamily: string;
fontSize: string;
fontWeightLight: string;
fontWeightRegular: string;
fontWeightMedium: string;
fontWeightBold: string;
fontWeightExtraBold: string;
};
typography: {
default: {
fontFamily: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
hero: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
display: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
title: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
heading1: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
heading2: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
heading3: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
heading4: {
fontSize: string;
fontWeight: string;
lineHeight: string;
letterSpacing: string;
mobileSize: string;
mobileLineHeight: string;
};
bodyLarge: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
body: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
bodySmall: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
caption: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
quote: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
overline: {
fontSize: string;
fontWeight: string;
textTransform: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
disclaimer: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
legalText: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
error: {
fontSize: string;
fontWeight: string;
lineHeight: string;
mobileSize: string;
mobileLineHeight: string;
letterSpacing: string;
};
};
zIndices: {
navbar: number;
sidebar: number;
drawer: number;
};
spacing: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
sidebarWidth: string;
};
radii: {
sm: string;
md: string;
lg: string;
rounded: string;
};
elevations: {
low: string;
md: string;
high: string;
};
transitions: {
default: string;
fast: string;
};
breakpoints: {
mobile: string;
tablet: string;
laptop: string;
desktop: string;
ultraWide: string;
};
border: {
sm: string;
md: string;
lg: string;
};
shadow: string;
};
export type AppTheme = typeof lightTheme;
export declare const getColorVariant: (color: string, variant: "Hover" | "Selected", colors: typeof lightColors) => string;
export declare const themeUtils: {
getColorVariant: (color: string, variant: "Hover" | "Selected", colors: typeof lightColors) => string;
};
export declare const isValidColorKey: (key: string, themeColors: typeof lightColors) => key is keyof typeof lightColors;
export {};