import { DeepPartial, Tuple } from 'ts-essentials'; import { DefaultTheme } from 'styled-components/macro'; import { Colors } from './colors'; import { Support } from './support'; declare const COMMON_THEME_DECLARATIONS: { baseColors: { COLOR_PRIMARY_100: string; COLOR_PRIMARY_200: string; COLOR_PRIMARY_300: string; COLOR_PRIMARY_400: string; COLOR_PRIMARY_500: string; COLOR_PRIMARY_600: string; COLOR_PRIMARY_700: string; COLOR_PRIMARY_800: string; COLOR_PRIMARY_900: string; COLOR_PRIMARY_TRANSPARENT_100: string; COLOR_PRIMARY_TRANSPARENT_200: string; COLOR_PRIMARY_TRANSPARENT_300: string; COLOR_PRIMARY_TRANSPARENT_400: string; COLOR_PRIMARY_TRANSPARENT_500: string; COLOR_PRIMARY_TRANSPARENT_600: string; COLOR_SUCCESS_100: string; COLOR_SUCCESS_200: string; COLOR_SUCCESS_300: string; COLOR_SUCCESS_400: string; COLOR_SUCCESS_500: string; COLOR_SUCCESS_600: string; COLOR_SUCCESS_700: string; COLOR_SUCCESS_800: string; COLOR_SUCCESS_900: string; COLOR_SUCCESS_TRANSPARENT_100: string; COLOR_SUCCESS_TRANSPARENT_200: string; COLOR_SUCCESS_TRANSPARENT_300: string; COLOR_SUCCESS_TRANSPARENT_400: string; COLOR_SUCCESS_TRANSPARENT_500: string; COLOR_SUCCESS_TRANSPARENT_600: string; COLOR_INFO_100: string; COLOR_INFO_200: string; COLOR_INFO_300: string; COLOR_INFO_400: string; COLOR_INFO_500: string; COLOR_INFO_600: string; COLOR_INFO_700: string; COLOR_INFO_800: string; COLOR_INFO_900: string; COLOR_INFO_TRANSPARENT_100: string; COLOR_INFO_TRANSPARENT_200: string; COLOR_INFO_TRANSPARENT_300: string; COLOR_INFO_TRANSPARENT_400: string; COLOR_INFO_TRANSPARENT_500: string; COLOR_INFO_TRANSPARENT_600: string; COLOR_WARNING_100: string; COLOR_WARNING_200: string; COLOR_WARNING_300: string; COLOR_WARNING_400: string; COLOR_WARNING_500: string; COLOR_WARNING_600: string; COLOR_WARNING_700: string; COLOR_WARNING_800: string; COLOR_WARNING_900: string; COLOR_WARNING_TRANSPARENT_100: string; COLOR_WARNING_TRANSPARENT_200: string; COLOR_WARNING_TRANSPARENT_300: string; COLOR_WARNING_TRANSPARENT_400: string; COLOR_WARNING_TRANSPARENT_500: string; COLOR_WARNING_TRANSPARENT_600: string; COLOR_DANGER_100: string; COLOR_DANGER_200: string; COLOR_DANGER_300: string; COLOR_DANGER_400: string; COLOR_DANGER_500: string; COLOR_DANGER_600: string; COLOR_DANGER_700: string; COLOR_DANGER_800: string; COLOR_DANGER_900: string; COLOR_DANGER_TRANSPARENT_100: string; COLOR_DANGER_TRANSPARENT_200: string; COLOR_DANGER_TRANSPARENT_300: string; COLOR_DANGER_TRANSPARENT_400: string; COLOR_DANGER_TRANSPARENT_500: string; COLOR_DANGER_TRANSPARENT_600: string; COLOR_BASIC_100: string; COLOR_BASIC_200: string; COLOR_BASIC_300: string; COLOR_BASIC_400: string; COLOR_BASIC_500: string; COLOR_BASIC_600: string; COLOR_BASIC_700: string; COLOR_BASIC_800: string; COLOR_BASIC_900: string; COLOR_BASIC_1000: string; COLOR_BASIC_1100: string; COLOR_BASIC_TRANSPARENT_100: string; COLOR_BASIC_TRANSPARENT_200: string; COLOR_BASIC_TRANSPARENT_300: string; COLOR_BASIC_TRANSPARENT_400: string; COLOR_BASIC_TRANSPARENT_500: string; COLOR_BASIC_TRANSPARENT_600: string; COLOR_BASIC_CONTROL_TRANSPARENT_100: string; COLOR_BASIC_CONTROL_TRANSPARENT_200: string; COLOR_BASIC_CONTROL_TRANSPARENT_300: string; COLOR_BASIC_CONTROL_TRANSPARENT_400: string; COLOR_BASIC_CONTROL_TRANSPARENT_500: string; COLOR_BASIC_CONTROL_TRANSPARENT_600: string; }; breakpoints: { container: string; xsContainer: string; smContainer: string; mdContainer: string; lgContainer: string; xlContainer: string; zero: string; }; spacing: { narrow: string; normal: string; wide: string; }; typography: { FONT_FAMILY_PRIMARY: string; FONT_FAMILY_SECONDARY: string; TEXT_HEADING_1_FONT_FAMILY: string; TEXT_HEADING_1_FONT_SIZE: string; TEXT_HEADING_1_FONT_WEIGHT: number; TEXT_HEADING_1_LINE_HEIGHT: string; TEXT_HEADING_2_FONT_FAMILY: string; TEXT_HEADING_2_FONT_SIZE: string; TEXT_HEADING_2_FONT_WEIGHT: number; TEXT_HEADING_2_LINE_HEIGHT: string; TEXT_HEADING_3_FONT_FAMILY: string; TEXT_HEADING_3_FONT_SIZE: string; TEXT_HEADING_3_FONT_WEIGHT: number; TEXT_HEADING_3_LINE_HEIGHT: string; TEXT_HEADING_4_FONT_FAMILY: string; TEXT_HEADING_4_FONT_SIZE: string; TEXT_HEADING_4_FONT_WEIGHT: number; TEXT_HEADING_4_LINE_HEIGHT: string; TEXT_HEADING_5_FONT_FAMILY: string; TEXT_HEADING_5_FONT_SIZE: string; TEXT_HEADING_5_FONT_WEIGHT: number; TEXT_HEADING_5_LINE_HEIGHT: string; TEXT_HEADING_6_FONT_FAMILY: string; TEXT_HEADING_6_FONT_SIZE: string; TEXT_HEADING_6_FONT_WEIGHT: number; TEXT_HEADING_6_LINE_HEIGHT: string; TEXT_SUBTITLE_FONT_FAMILY: string; TEXT_SUBTITLE_FONT_SIZE: string; TEXT_SUBTITLE_FONT_WEIGHT: number; TEXT_SUBTITLE_LINE_HEIGHT: string; TEXT_SUBTITLE_2_FONT_FAMILY: string; TEXT_SUBTITLE_2_FONT_SIZE: string; TEXT_SUBTITLE_2_FONT_WEIGHT: number; TEXT_SUBTITLE_2_LINE_HEIGHT: string; TEXT_PARAGRAPH_FONT_FAMILY: string; TEXT_PARAGRAPH_FONT_SIZE: string; TEXT_PARAGRAPH_FONT_WEIGHT: number; TEXT_PARAGRAPH_LINE_HEIGHT: string; TEXT_PARAGRAPH_2_FONT_FAMILY: string; TEXT_PARAGRAPH_2_FONT_SIZE: string; TEXT_PARAGRAPH_2_FONT_WEIGHT: number; TEXT_PARAGRAPH_2_LINE_HEIGHT: string; TEXT_LABEL_FONT_FAMILY: string; TEXT_LABEL_FONT_SIZE: string; TEXT_LABEL_FONT_WEIGHT: number; TEXT_LABEL_LINE_HEIGHT: string; TEXT_CAPTION_FONT_FAMILY: string; TEXT_CAPTION_FONT_SIZE: string; TEXT_CAPTION_FONT_WEIGHT: number; TEXT_CAPTION_LINE_HEIGHT: string; TEXT_CAPTION_2_FONT_FAMILY: string; TEXT_CAPTION_2_FONT_SIZE: string; TEXT_CAPTION_2_FONT_WEIGHT: number; TEXT_CAPTION_2_LINE_HEIGHT: string; TEXT_BUTTON_FONT_FAMILY: string; TEXT_BUTTON_FONT_WEIGHT: number; TEXT_BUTTON_TINY_FONT_SIZE: string; TEXT_BUTTON_TINY_LINE_HEIGHT: string; TEXT_BUTTON_SMALL_FONT_SIZE: string; TEXT_BUTTON_SMALL_LINE_HEIGHT: string; TEXT_BUTTON_MEDIUM_FONT_SIZE: string; TEXT_BUTTON_MEDIUM_LINE_HEIGHT: string; TEXT_BUTTON_LARGE_FONT_SIZE: string; TEXT_BUTTON_LARGE_LINE_HEIGHT: string; TEXT_BUTTON_GIANT_FONT_SIZE: string; TEXT_BUTTON_GIANT_LINE_HEIGHT: string; }; }; export declare type CommonTheme = typeof COMMON_THEME_DECLARATIONS & { colors: Colors; support: Support; }; export declare const tuple: >(t: T) => T; declare type Theme = { [key: string]: ThemeValue; }; declare type ThemeValue = string | number | Theme; declare type ComponentTheme = [string, Theme]; declare type ComponentThemeFn = (theme: CommonTheme) => ComponentTheme; export declare type ThemeFromFn = T extends (...args: any) => [any, infer TT] ? TT : never; export interface ThemedComponent { defaultTheme?: ComponentThemeFn; } export declare const isThemedComponent: (obj: any) => obj is ThemedComponent; /** * createTheme creates a theme for all given components. All components imported * must be included here. * * @remarks * Components "should" use the component name as namespace for it's theme * * Code sample: * * ```ts * const theme = createTheme([Button, Card], { * colors: { primary: 'blue', secondary: 'red', accent: 'green'}, * Button: { background: 'green' }, * Card: { color: 'red' } * }) * ``` * * @param components - List with themed components or theme functions to include in theme * @param baseTheme - Override the theme with this */ export declare const createTheme: (components: (ThemedComponent | ComponentThemeFn)[], baseTheme?: DeepPartial) => DefaultTheme; export {};