common-styles-css
Version:
its a library common css styles
212 lines (205 loc) • 17.9 kB
text/typescript
import * as styled_components_dist_types from 'styled-components/dist/types';
import * as react from 'react';
import * as styled_components from 'styled-components';
type TWrap = "wrap" | "nowrap";
type TDirection = "row" | "column";
type TContent = "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
type TItems = "center" | "flex-start" | "flex-end" | "stretch" | "baseline";
type TMedia = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
type IFlexProps = {
wrap?: {
[K in TMedia]?: TWrap;
} | TWrap;
direction?: {
[K in TMedia]?: TDirection;
} | TDirection;
content?: {
[K in TMedia]?: TContent;
} | TContent;
align_items?: {
[K in TMedia]?: TItems;
} | TItems;
align_content?: {
[K in TMedia]?: TItems;
} | TItems;
gap?: {
[K in TMedia]?: number;
} | number;
row_gap?: {
[K in TMedia]?: number;
} | number;
column_gap?: {
[K in TMedia]?: number;
} | number;
};
interface IRowProps extends IFlexProps {
width?: string;
}
interface IColumnProps extends IFlexProps {
size: {
[K in TMedia]?: number;
} | number;
difference: {
[K in TMedia]?: number;
} | number;
}
declare const Row: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IRowProps>> & string;
declare const Column: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IColumnProps>> & string;
declare const Subtext: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
declare const colors: {
readonly "primary-25": "rgba(184, 243, 151, 1)";
readonly "primary-50": "rgba(248, 254, 244, 1)";
readonly "primary-100": "rgba(241, 253, 234, 1)";
readonly "primary-200": "rgba(227, 250, 213, 1)";
readonly "primary-300": "rgba(212, 248, 193, 1 )";
readonly "primary-400": "rgba(198, 245, 172, 1)";
readonly "primary-500": "rgba(184, 243, 151, 1)";
readonly "primary-600": "rgba(166, 219, 136, 1)";
readonly "primary-700": "rgba(157, 207, 128, 1)";
readonly "primary-800": "rgba(147, 194, 121, 1)";
readonly "primary-900": "rgba(138, 182, 113, 1)";
readonly "secondary-50": " rgba(240, 231, 254, 1)";
readonly "secondary-100": " rgba(208, 181, 251, 1)";
readonly "secondary-200": " rgba(185, 145, 249, 1)";
readonly "secondary-300": " rgba(152, 95, 246, 1)";
readonly "secondary-400": " rgba(133, 64, 245, 1)";
readonly "secondary-500": " rgba(102, 16, 242, 1)";
readonly "secondary-600": " rgba(93, 15, 220, 1)";
readonly "secondary-700": " rgba(72, 11, 172, 1)";
readonly "secondary-800": " rgba(56, 9, 133, 1)";
readonly "secondary-900": " rgba(43, 7, 102, 1)";
readonly "gray-25": "rgba(252, 252, 252, 1)";
readonly "gray-50": "rgba(249, 250, 251, 1)";
readonly "gray-100": "rgba(242, 244, 247, 1)";
readonly "gray-200": "rgba(234, 236, 240, 1)";
readonly "gray-300": "rgba(208, 213, 221, 1)";
readonly "gray-400": "rgba(152, 162, 179, 1)";
readonly "gray-500": "rgba(102, 112, 133, 1)";
readonly "gray-600": "rgba(71, 84, 103, 1)";
readonly "gray-700": "rgba(52, 64, 84, 1)";
readonly "gray-800": "rgba(29, 41, 57, 1)";
readonly "gray-900": "rgba(16, 24, 40, 1)";
readonly "success-50": "rgb(234, 249, 241, 1)";
readonly "success-100": "rgba(212, 244, 226, 1)";
readonly "success-200": "rgba(169, 233, 197, 1)";
readonly "success-300": "rgba(126, 221, 169, 1)";
readonly "success-400": "rgba(83, 210, 140, 1)";
readonly "success-500": "rgba(40, 199, 111, 1)";
readonly "success-600": "rgba(36, 179, 100, 1)";
readonly "success-700": "rgba(34, 169, 94, 1)";
readonly "success-800": "rgba(32, 159, 89, 1)";
readonly "success-900": "rgba(30, 149, 83, 1)";
readonly "danger-50": "rgb(253, 238, 238, 1)";
readonly "danger-100": "rgba(251, 221, 221, 1)";
readonly "danger-200": "rgba(247, 187, 187, 1)";
readonly "danger-300": "rgba(242, 152, 153, 1)";
readonly "danger-400": "rgba(238, 118, 119, 1)";
readonly "danger-500": "rgba(234, 84, 85, 1)";
readonly "danger-600": "rgba(211, 76, 77, 1)";
readonly "danger-700": "rgba(199, 71, 72, 1)";
readonly "danger-800": "rgba(187, 67, 68, 1)";
readonly "danger-900": "rgba(175, 63, 64, 1)";
readonly "warning-50": "rgb(255, 245, 236, 1)";
readonly "warning-100": "rgba(255, 236, 217, 1)";
readonly "warning-200": "rgba(255, 217, 180, 1)";
readonly "warning-300": "rgba(255, 197, 142, 1)";
readonly "warning-400": "rgba(255, 178, 105, 1)";
readonly "warning-500": "rgba(255, 159, 67, 1)";
readonly "warning-600": "rgba(230, 143, 60, 1)";
readonly "warning-700": "rgba(217, 135, 57, 1)";
readonly "warning-800": "rgba(204, 127, 54, 1)";
readonly "warning-900": "rgba(191, 119, 50, 1)";
readonly "extra-white": "rgba(255, 255, 255, 1)";
readonly "typography-heading": "rgba(24, 28, 50, 1)";
readonly "typography-body": "rgba(63, 66, 84, 1)";
readonly "typography-muted": "rgba(161, 165, 183, 1)";
readonly "typography-placeholder": "rgba(161, 165, 183, 1)";
readonly "opacity-primary8": "rgba(184, 243, 151, 0.07999999821186066)";
readonly "opacity-primary16": "rgba(184, 243, 151, 0.1599999964237213)";
readonly "opacity-primary24": "rgba(184, 243, 151, 0.23999999463558197)";
readonly "opacity-primary32": "rgba(184, 243, 151, 0.3199999928474426)";
readonly "opacity-primary40": "rgba(184, 243, 151, 0.4000000059604645)";
readonly "opacity-primary48": "rgba(184, 243, 151, 0.47999998927116394)";
readonly "opacity-secondary8": "rgba(102, 16, 242, 0.07999999821186066)";
readonly "opacity-secondary16": "rgba(102, 16, 242, 0.1599999964237213)";
readonly "opacity-secondary24": "rgba(102, 16, 242, 0.23999999463558197)";
readonly "opacity-secondary32": "rgba(102, 16, 242, 0.3199999928474426)";
readonly "opacity-secondary40": "rgba(102, 16, 242, 0.4000000059604645)";
readonly "opacity-secondary48": "rgba(102, 16, 242, 0.47999998927116394)";
readonly "opacity-gray8": "rgba(102, 112, 133, 0.07999999821186066)";
readonly "opacity-gray16": "rgba(102, 112, 133, 0.1599999964237213)";
readonly "opacity-gray24": "rgba(102, 112, 133, 0.23999999463558197)";
readonly "opacity-gray32": "rgba(102, 112, 133, 0.3199999928474426)";
readonly "opacity-gray40": "rgba(102, 112, 133, 0.4000000059604645)";
readonly "opacity-gray48": "rgba(102, 112, 133, 0.47999998927116394)";
readonly "opacity-success8": "rgba(40, 199, 111, 0.08)";
readonly "opacity-success16": "rgba(40, 199, 111, 0.016)";
readonly "opacity-success24": "rgba(40, 199, 111, 0.024)";
readonly "opacity-success32": "rgba(40, 199, 111, 0.032)";
readonly "opacity-success40": "rgba(40, 199, 111, 0.4)";
readonly "opacity-success48": "rgba(40, 199, 111, 0.48)";
readonly "opacity-warning8": "rgba(255, 159, 67, 0,08)";
readonly "opacity-warning16": "rgba(255, 159, 67, 0.016)";
readonly "opacity-warning24": "rgba(255, 159, 67, 0.024)";
readonly "opacity-warning32": "rgba(255, 159, 67, 0.032)";
readonly "opacity-warning40": "rgba(255, 159, 67, 0.4)";
readonly "opacity-warning48": "rgba(255, 159, 67, 0.48)";
readonly "opacity-danger8": "rgba(234, 84, 85, 0,08)";
readonly "opacity-danger16": "rgba(234, 84, 85, 0.016)";
readonly "opacity-danger24": "rgba(234, 84, 85, 0.024)";
readonly "opacity-danger32": "rgba(234, 84, 85, 0.032)";
readonly "opacity-danger40": "rgba(234, 84, 85, 0.4)";
readonly "opacity-danger48": "rgba(234, 84, 85, 0.48)";
readonly primary: "linear-gradient(90deg, rgba(184, 243, 151, 1) 0%, rgba(212, 248, 193, 1) 100%)";
readonly secondary: "linear-gradient(90deg,rgba(102, 16, 242, 1) 0%,rgba(152, 95, 246, 1) 100%";
readonly gray: "linear-gradient(90deg,rgba(102, 112, 133, 1) 0%,rgba(208, 213, 221, 1) 100%";
readonly success: "linear-gradient(90deg,rgba(40, 199, 111, 1) 0%,rgba(72, 218, 137, 1) 100%";
readonly danger: "linear-gradient(90deg,rgba(234, 84, 85, 1) 0%,rgba(240, 129, 130, 1) 100%";
readonly warning: "linear-gradient(90deg,rgba(255, 159, 67, 1) 0%,rgba(255, 185, 118, 1) 100%";
};
interface CustomColors {
[key: string]: string;
}
declare const mergeColors: (customColors: CustomColors) => Record<string, string>;
type TColors = keyof typeof colors;
type TTypographyProps = {
color?: TColors;
align?: "center" | "end" | "justify" | "left" | "right" | "start";
subColor?: TColors;
};
declare const Display1: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const Display2: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const Display3: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const Display4: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const H1: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const H2: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const H3: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const H4: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const H5: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const H6: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TTypographyProps>> & string;
declare const ParagraphLead: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TTypographyProps>> & string;
declare const Paragraph: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TTypographyProps>> & string;
declare const ParagraphMedium: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TTypographyProps>> & string;
declare const ParagraphSemiBold: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TTypographyProps>> & string;
declare const ParagraphBold: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TTypographyProps>> & string;
declare const ParagraphSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TTypographyProps>> & string;
declare const ParagraphSmallSemiBold: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TTypographyProps>> & string;
declare const ParagraphSmallBold: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TTypographyProps>> & string;
declare const DeleteText: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.DelHTMLAttributes<HTMLModElement>, HTMLModElement>, TTypographyProps>> & string;
declare const Italicized: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, TTypographyProps>> & string;
declare const Underline: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, TTypographyProps>> & string;
declare const Caption: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, TTypographyProps>> & string;
declare const ButtonLG: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const ButtonDefault: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const ButtonSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const LabelLg: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const LabelDefault: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const LabelSm: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const InputLg: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const InputDefault: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const InputSm: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const PlaceholderLg: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const PlaceholderDefault: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const PlaceholderSm: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TTypographyProps>> & string;
declare const Container: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
export { ButtonDefault, ButtonLG, ButtonSmall, Caption, Column, Container, DeleteText, Display1, Display2, Display3, Display4, H1, H2, H3, H4, H5, H6, type IColumnProps, type IFlexProps, type IRowProps, InputDefault, InputLg, InputSm, Italicized, LabelDefault, LabelLg, LabelSm, Paragraph, ParagraphBold, ParagraphLead, ParagraphMedium, ParagraphSemiBold, ParagraphSmall, ParagraphSmallBold, ParagraphSmallSemiBold, PlaceholderDefault, PlaceholderLg, PlaceholderSm, Row, Subtext, type TContent, type TDirection, type TItems, type TMedia, type TTypographyProps, type TWrap, Underline, colors, mergeColors };