@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
142 lines (141 loc) • 4.46 kB
TypeScript
export declare const FONT_FAMILY: {
readonly font_family_digit_password_small_square: "\"DigitPasswordSmallSquare\", sans-serif";
readonly font_family_digit_password_large_square: "\"DigitPasswordLargeSquare\", sans-serif";
readonly font_family_gt_america_expanded: "\"GT-America-Expanded Font\", sans-serif";
readonly font_family_gt_america_extended: "\"GT-America-Extended Font\", sans-serif";
readonly font_family_roboto_condensed: "\"Roboto-Mono Font\", sans-serif";
readonly font_family_nunito_sans: "\"Nunito-Sans Font\", sans-serif";
};
declare const FONT_SIZE: {
readonly font_heading_50: "3rem";
readonly font_heading_100: "2.5rem";
readonly font_heading_150: "2rem";
readonly font_heading_200: "1.5rem";
readonly font_heading_250: "1.25rem";
readonly font_body_50: "1.125rem";
readonly font_body_100: "1rem";
readonly font_body_150: "0.875rem";
readonly font_body_200: "0.75rem";
};
declare const LINE_HEIGHT: {
readonly line_height_50: "3.5rem";
readonly line_height_100: "3rem";
readonly line_height_150: "2.5rem";
readonly line_height_200: "1.5rem";
readonly line_height_250: "1.25rem";
readonly line_height_300: "1rem";
};
export declare const FONT_WEIGHT: {
readonly font_weight_000: 0;
readonly font_weight_300: 300;
readonly font_weight_400: 400;
readonly font_weight_500: 500;
readonly font_weight_600: 600;
};
export declare const HEADING: {
readonly DISPLAY: {
readonly DESKTOP: {
readonly font_size: "3rem";
readonly line_height: "3.5rem";
};
readonly MOBILE: {
readonly font_size: "3rem";
readonly line_height: "3.5rem";
};
};
readonly H1: {
readonly DESKTOP: {
readonly font_size: "2.5rem";
readonly line_height: "3rem";
};
readonly MOBILE: {
readonly font_size: "2.5rem";
readonly line_height: "3rem";
};
};
readonly H2: {
readonly DESKTOP: {
readonly font_size: "2rem";
readonly line_height: "2.5rem";
};
readonly MOBILE: {
readonly font_size: "2rem";
readonly line_height: "2.5rem";
};
};
readonly H3: {
readonly DESKTOP: {
readonly font_size: "1.5rem";
readonly line_height: "2.5rem";
};
readonly MOBILE: {
readonly font_size: "1.5rem";
readonly line_height: "2.5rem";
};
};
readonly H4: {
readonly DESKTOP: {
readonly font_size: "1.25rem";
readonly line_height: "1.5rem";
};
readonly MOBILE: {
readonly font_size: "1.25rem";
readonly line_height: "1.5rem";
};
};
};
export declare const PARAGRAPH: {
readonly LARGE: {
readonly DESKTOP: {
readonly font_size: "1.125rem";
readonly line_height: "1.5rem";
};
readonly MOBILE: {
readonly font_size: "1.125rem";
readonly line_height: "1.5rem";
};
};
readonly MEDIUM: {
readonly DESKTOP: {
readonly font_size: "1rem";
readonly line_height: "1.5rem";
};
readonly MOBILE: {
readonly font_size: "1rem";
readonly line_height: "1.5rem";
};
};
readonly SMALL: {
readonly DESKTOP: {
readonly font_size: "0.875rem";
readonly line_height: "1.25rem";
};
readonly MOBILE: {
readonly font_size: "0.875rem";
readonly line_height: "1.25rem";
};
};
readonly CAPTION: {
readonly DESKTOP: {
readonly font_size: "0.75rem";
readonly line_height: "1rem";
};
readonly MOBILE: {
readonly font_size: "0.75rem";
readonly line_height: "1rem";
};
};
};
export declare const TEXT_ALIGN: {
readonly left: "left";
readonly center: "center";
readonly right: "right";
};
export type FontFamilyType = typeof FONT_FAMILY;
export type FontSizeType = typeof FONT_SIZE;
export type LineHeightType = typeof LINE_HEIGHT;
export type HeadingType = typeof HEADING;
export type ParagraphType = typeof PARAGRAPH;
export type FontWeightType = typeof FONT_WEIGHT;
export type TextAlignType = typeof TEXT_ALIGN;
export {};