@navinc/base-react-components
Version:
Nav's Pattern Library
77 lines (76 loc) • 2.76 kB
TypeScript
declare const variants: {
readonly 'nav-blue': {
readonly xl: {
readonly fontFamily: "postgrotesk, Averta, Helvetica, sans-serif";
readonly fontSize: "32px";
readonly lineHeight: "38px";
readonly htmlElement: "h1";
};
readonly lg: {
readonly fontFamily: "postgrotesk, Averta, Helvetica, sans-serif";
readonly fontSize: "24px";
readonly lineHeight: "30px";
readonly htmlElement: "h2";
};
readonly md: {
readonly fontFamily: "postgrotesk, Averta, Helvetica, sans-serif";
readonly fontSize: "20px";
readonly lineHeight: "30px";
readonly htmlElement: "h3";
};
readonly sm: {
readonly fontFamily: "postgrotesk, Roboto, Helvetica, sans-serif";
readonly fontSize: "18px";
readonly lineHeight: "28px";
readonly htmlElement: "h4";
};
readonly xs: {
readonly fontFamily: "postgrotesk, Roboto, Helvetica, sans-serif";
readonly fontSize: "16px";
readonly lineHeight: "24px";
readonly htmlElement: "h4";
};
};
readonly 'nav-purple': {
readonly xl: {
readonly fontFamily: "Cosmica, sans-serif";
readonly fontSize: "56px";
readonly lineHeight: "64px";
readonly htmlElement: "h1";
};
readonly lg: {
readonly fontFamily: "Cosmica, sans-serif";
readonly fontSize: "48px";
readonly lineHeight: "56px";
readonly htmlElement: "h2";
};
readonly md: {
readonly fontFamily: "Cosmica, sans-serif";
readonly fontSize: "32px";
readonly lineHeight: "36px";
readonly htmlElement: "h3";
};
readonly sm: {
readonly fontFamily: "Cosmica, sans-serif";
readonly fontSize: "24px";
readonly lineHeight: "32px";
readonly htmlElement: "h4";
};
readonly xs: {
readonly fontFamily: "Cosmica, sans-serif";
readonly fontSize: "20px";
readonly lineHeight: "28px";
readonly htmlElement: "h5";
};
};
};
declare type VarientOptions = keyof typeof variants['nav-purple'];
declare type HeaderProps = {
size?: VarientOptions;
};
export declare const Header: import("styled-components").StyledComponent<"h1", import("styled-components").DefaultTheme, {
as: "h1" | "h2" | "h3" | "h4";
size: "md" | "xs" | "sm" | "lg" | "xl";
theme: import("styled-components").DefaultTheme;
} & HeaderProps, "size" | "theme" | "as">;
export default Header;