import { ReactElement } from 'react' import { MediaQuery } from '../MediaQuery' import { button, div, footer, header, main, nav, select, label } from './elements' import { global, font, color } from './constants' export interface DefaultInterface { children?: string | object className?: string native?: boolean | string small?: boolean isActive?: boolean isValid?: boolean isRow?: boolean mobile?: boolean lowercase?: boolean noBackground?: boolean block?: boolean color?: string font?: string | object touched?: boolean filled?: boolean warning?: string maxLength?: number width?: number label?: string htmlFor?: string placeholder?: string themed?: boolean for?: string currentStep?: string | number totalSteps?: string | number backgroundColor?: string background?: boolean transparent?: boolean size?: number title?: string tag?: string flex?: boolean inline?: boolean break?: boolean stretch?: boolean onChange?: (...args: any) => void onKeyPress?: (...args: any) => void onKeyDown?: (...args: any) => void onKeyUp?: (...args: any) => void callback?: (...args: any[]) => ReactElement component?: React.FunctionComponent rotateRight?: boolean zIndex?: string | number company?: string date?: string back?: boolean pristine?: boolean theme?: ThemeInterface } export interface ThemeInterface { global: { [key in keyof typeof global]: object } // HTML5 tag elements button: { [key in keyof typeof generic]: object } div: { [key in keyof typeof generic]: object } h1: { [key in keyof typeof generic]: object } h2: { [key in keyof typeof generic]: object } h3: { [key in keyof typeof generic]: object } h4: { [key in keyof typeof generic]: object } h5: { [key in keyof typeof generic]: object } h6: { [key in keyof typeof generic]: object } footer: { [key in keyof typeof generic]: object } header: { [key in keyof typeof generic]: object } input: { [key in keyof typeof generic]: object } label: { [key in keyof typeof generic]: object } link: { [key in keyof typeof generic]: object } list: { [key in keyof typeof generic]: object } listItem: { [key in keyof typeof generic]: object } main: { [key in keyof typeof generic]: object } nav: { [key in keyof typeof generic]: object } paragraph: { [key in keyof typeof generic]: object } select: { [key in keyof typeof generic]: object } span: { [key in keyof typeof generic]: object } textArea: { [key in keyof typeof generic]: object } } export const generic = { default: { button: true } } export const Theme: ThemeInterface = { global: { color, font }, button, div, footer, header, label, main, nav, select, span: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "18px", xxsmall: "20px", xsmall: "22px", small: "24px", medium: "26px", large: "28px", xlarge: "30px", xxlarge: "32px", largest: "34px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, input: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "4px 6px", xxsmall: "4px 6px", xsmall: "4px 6px", small: "4px 6px", medium: "4px 6px", large: "4px 6px", xlarge: "4px 6px", xxlarge: "4px 6px", largest: "4px 6px" }, border: { smallest: "#000 1px solid", xxsmall: "#000 1px solid", xsmall: "#000 1px solid", small: "#000 1px solid", medium: "#000 1px solid", large: "#000 1px solid", xlarge: "#000 1px solid", xxlarge: "#000 1px solid", largest: "#000 1px solid" }, borderRadius: { smallest: "4px", xxsmall: "4px", xsmall: "4px", small: "4px", medium: "4px", large: "4px", xlarge: "4px", xxlarge: "4px", largest: "4px" }, height: { smallest: "40px", xxsmall: "40px", xsmall: "40px", small: "40px", medium: "40px", large: "40px", xlarge: "60px", xxlarge: "60px", largest: "60px" }, boxShadow: { smallest: `${color.black} 1px 1px 1px`, xxsmall: `${color.black} 1px 1px 1px`, xsmall: `${color.black} 1px 1px 1px`, small: `${color.black} 1px 1px 1px`, medium: `${color.black} 1px 1px 1px`, large: `${color.black} 1px 1px 1px`, xlarge: `${color.black} 1px 1px 1px`, xxlarge: `${color.black} 1px 1px 1px`, largest: `${color.black} 1px 1px 1px` }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "18px", xxsmall: "20px", xsmall: "22px", small: "24px", medium: "26px", large: "28px", xlarge: "30px", xxlarge: "32px", largest: "34px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, textArea: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "4px 6px", xxsmall: "4px 6px", xsmall: "4px 6px", small: "4px 6px", medium: "4px 6px", large: "4px 6px", xlarge: "4px 6px", xxlarge: "4px 6px", largest: "4px 6px" }, border: { smallest: "#000 1px solid", xxsmall: "#000 1px solid", xsmall: "#000 1px solid", small: "#000 1px solid", medium: "#000 1px solid", large: "#000 1px solid", xlarge: "#000 1px solid", xxlarge: "#000 1px solid", largest: "#000 1px solid" }, borderRadius: { smallest: "4px", xxsmall: "4px", xsmall: "4px", small: "4px", medium: "4px", large: "4px", xlarge: "4px", xxlarge: "4px", largest: "4px" }, height: { smallest: "100px", xxsmall: "120px", xsmall: "140px", small: "160px", medium: "180px", large: "200px", xlarge: "220px", xxlarge: "240px", largest: "260px" }, boxShadow: { smallest: `${color.black} 1px 1px 1px`, xxsmall: `${color.black} 1px 1px 1px`, xsmall: `${color.black} 1px 1px 1px`, small: `${color.black} 1px 1px 1px`, medium: `${color.black} 1px 1px 1px`, large: `${color.black} 1px 1px 1px`, xlarge: `${color.black} 1px 1px 1px`, xxlarge: `${color.black} 1px 1px 1px`, largest: `${color.black} 1px 1px 1px` }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "18px", xxsmall: "20px", xsmall: "22px", small: "24px", medium: "26px", large: "28px", xlarge: "30px", xxlarge: "32px", largest: "34px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, paragraph: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "18px", xxsmall: "20px", xsmall: "22px", small: "24px", medium: "26px", large: "28px", xlarge: "30px", xxlarge: "32px", largest: "34px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, link: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "18px", xxsmall: "20px", xsmall: "22px", small: "24px", medium: "26px", large: "28px", xlarge: "30px", xxlarge: "32px", largest: "34px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.blue, xxsmall: color.blue, xsmall: color.blue, small: color.blue, medium: color.blue, large: color.blue, xlarge: color.blue, xxlarge: color.blue, largest: color.blue } } } }, list: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "0px", xxsmall: "0px", xsmall: "0px", small: "0px", medium: "0px", large: "0px", xlarge: "0px", xxlarge: "0px", largest: "0px" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "18px", xxsmall: "20px", xsmall: "22px", small: "24px", medium: "26px", large: "28px", xlarge: "30px", xxlarge: "32px", largest: "34px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.blue, xxsmall: color.blue, xsmall: color.blue, small: color.blue, medium: color.blue, large: color.blue, xlarge: color.blue, xxlarge: color.blue, largest: color.blue } } } }, listItem: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "0px", xxsmall: "0px", xsmall: "0px", small: "0px", medium: "0px", large: "0px", xlarge: "0px", xxlarge: "0px", largest: "0px" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "18px", xxsmall: "20px", xsmall: "22px", small: "24px", medium: "26px", large: "28px", xlarge: "30px", xxlarge: "32px", largest: "34px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.blue, xxsmall: color.blue, xsmall: color.blue, small: color.blue, medium: color.blue, large: color.blue, xlarge: color.blue, xxlarge: color.blue, largest: color.blue } } } }, h1: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "30px", xxsmall: "32px", xsmall: "34px", small: "36px", medium: "38px", large: "40px", xlarge: "42px", xxlarge: "44px", largest: "46px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, h2: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "30px", xxsmall: "32px", xsmall: "34px", small: "36px", medium: "38px", large: "40px", xlarge: "42px", xxlarge: "44px", largest: "46px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, h3: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "30px", xxsmall: "32px", xsmall: "34px", small: "36px", medium: "38px", large: "40px", xlarge: "42px", xxlarge: "44px", largest: "46px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, h4: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "30px", xxsmall: "32px", xsmall: "34px", small: "36px", medium: "38px", large: "40px", xlarge: "42px", xxlarge: "44px", largest: "46px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, h5: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "30px", xxsmall: "32px", xsmall: "34px", small: "36px", medium: "38px", large: "40px", xlarge: "42px", xxlarge: "44px", largest: "46px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } }, h6: { default: { background: { image: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" } }, padding: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, border: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, borderRadius: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, height: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, boxShadow: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, font: { family: { smallest: font.primary, xxsmall: font.primary, xsmall: font.primary, small: font.primary, medium: font.primary, large: font.primary, xlarge: font.primary, xxlarge: font.primary, largest: font.primary }, size: { smallest: "30px", xxsmall: "32px", xsmall: "34px", small: "36px", medium: "38px", large: "40px", xlarge: "42px", xxlarge: "44px", largest: "46px" }, color: { hover: { smallest: "unset", xxsmall: "unset", xsmall: "unset", small: "unset", medium: "unset", large: "unset", xlarge: "unset", xxlarge: "unset", largest: "unset" }, smallest: color.black, xxsmall: color.black, xsmall: color.black, small: color.black, medium: color.black, large: color.black, xlarge: color.black, xxlarge: color.black, largest: color.black } } } } } const ComponentResponsiveStyledSingleLine = (obj: any) => Object.keys(obj).map((mappedItem) => { return `${ obj[mappedItem] }` }).join(' ') export const ComponentResponsiveStyled = (props: any, element: string) => Object.keys(MediaQuery).map((mappedItem) => { return `${ MediaQuery[mappedItem] } { background: ${ (props.styles && props.styles.background.color[mappedItem]) || props.theme && props.theme[element].default.background.color[mappedItem] }; border: ${ (props.styles && props.styles.border[mappedItem]) || props.theme && props.theme[element].default.border[mappedItem] }; border-radius: ${ (props.styles && props.styles.borderRadius[mappedItem]) || props.theme && props.theme[element].default.borderRadius[mappedItem] }; box-shadow: ${ (props.styles && props.styles.boxShadow[mappedItem]) || props.theme && props.theme[element].default.boxShadow[mappedItem] }; color: ${ (props.styles && props.styles.font.color[mappedItem]) || props.theme && props.theme[element].default.font.color[mappedItem] }; height: ${ (props.styles && props.styles.height[mappedItem]) || props.theme && props.theme[element].default.height[mappedItem] }; font-size: ${ (props.styles && props.styles.font.size[mappedItem]) || props.theme && props.theme[element].default.font.size[mappedItem] }; font-family: ${ (props.styles && props.styles.font.family[mappedItem]) || props.theme && props.theme[element].default.font.family[mappedItem] }; padding: ${ (props.styles && ComponentResponsiveStyledSingleLine(props.styles.padding[mappedItem])) || props.theme && ComponentResponsiveStyledSingleLine(props.theme[element].default.padding[mappedItem]) }; }` }).join('')