UNPKG

@upv/react-ui-core

Version:

**USHI Design System — Modern UI Component Library**

542 lines (541 loc) 14.4 kB
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 {};