and-design-components-library

/// <reference types="react" /> import colors from './colors'; import icons from './icons'; declare const fonts: { title: string; body: string; }; declare const space: { 0: string; 0.25: string; 0.5: string; 0.75: string; 1: string; 2: string; 2.25: string; 3: string; 4: string; 5: string; 6: string; 7: string; 8: string; 9: string; }; export declare type Spaces = keyof typeof space; declare const shadows: { defaultShadow: string; tabShadow: string; cardShadow: string; cardHoverShadow: string; }; declare const typography: { fonts: { title: string; body: string; }; bodySmall: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; bodyMedium: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; bodyLarge: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; button: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; linkText: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h1: { fontFamily: string; fontSize: string; fontWeight: string; lineHeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h2: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h3: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h4: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h5: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h6: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; }; declare const screens: { xsmall: number; small: number; medium: number; large: number; xlarge: number; }; export declare type ScreenSize = keyof typeof screens; declare const maxContainerWidth = "1280px"; declare const theme: { colors: Record<"greySuperLight" | "greyLight" | "greyTextDarkBg" | "greyMid" | "greyDark" | "charcoalBg" | "red" | "charcoal" | "white" | "blue" | "purple" | "green" | "redAccent" | "greenAccent" | "blueAccent" | "purpleAccent" | "yellowAccent" | "burnRed" | "burnBlue" | "burnGreen" | "burnPurple", string>; fonts: { title: string; body: string; }; icons: { readonly chevron: () => JSX.Element; readonly cross: () => JSX.Element; readonly search: () => JSX.Element; readonly error: () => JSX.Element; readonly spinner: () => JSX.Element; readonly loading: () => JSX.Element; }; screens: { xsmall: number; small: number; medium: number; large: number; xlarge: number; }; shadows: { defaultShadow: string; tabShadow: string; cardShadow: string; cardHoverShadow: string; }; space: { 0: string; 0.25: string; 0.5: string; 0.75: string; 1: string; 2: string; 2.25: string; 3: string; 4: string; 5: string; 6: string; 7: string; 8: string; 9: string; }; typography: { fonts: { title: string; body: string; }; bodySmall: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; bodyMedium: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; bodyLarge: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; button: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; linkText: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h1: { fontFamily: string; fontSize: string; fontWeight: string; lineHeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h2: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h3: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h4: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h5: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; h6: { fontFamily: string; fontSize: string; lineHeight: string; fontWeight: string; margin: string; letterSpacing: string; paragraphSpacing: string; textCase: string; textDecoration: string; }; }; maxContainerWidth: string; }; declare type ANDTheme = typeof theme & { linkComponent?: unknown; }; declare type RecursivePartial<T> = { [P in keyof T]?: RecursivePartial<T[P]>; }; /** * Will extend theme with new theme properties * @param {ANDTheme} baseTheme the theme you want to extend from, by default it is set to light theme * @param {RecursivePartial<ANDTheme>} extendedTheme the properties of a new theme you want to apply from baseTheme */ declare const extendTheme: ({ baseTheme, extendedTheme }: { baseTheme?: ANDTheme; extendedTheme: RecursivePartial<ANDTheme>; }) => ANDTheme; declare const mainTheme: ANDTheme; export type { mainTheme }; export { colors, shadows, space, icons, fonts, screens, extendTheme, typography, maxContainerWidth }; export default mainTheme;