common-styles-css
Version:
its a library common css styles
756 lines (713 loc) • 21.2 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
ButtonDefault: () => ButtonDefault,
ButtonLG: () => ButtonLG,
ButtonSmall: () => ButtonSmall,
Caption: () => Caption,
Column: () => Column,
Container: () => Container,
DeleteText: () => DeleteText,
Display1: () => Display1,
Display2: () => Display2,
Display3: () => Display3,
Display4: () => Display4,
H1: () => H1,
H2: () => H2,
H3: () => H3,
H4: () => H4,
H5: () => H5,
H6: () => H6,
InputDefault: () => InputDefault,
InputLg: () => InputLg,
InputSm: () => InputSm,
Italicized: () => Italicized,
LabelDefault: () => LabelDefault,
LabelLg: () => LabelLg,
LabelSm: () => LabelSm,
Paragraph: () => Paragraph,
ParagraphBold: () => ParagraphBold,
ParagraphLead: () => ParagraphLead,
ParagraphMedium: () => ParagraphMedium,
ParagraphSemiBold: () => ParagraphSemiBold,
ParagraphSmall: () => ParagraphSmall,
ParagraphSmallBold: () => ParagraphSmallBold,
ParagraphSmallSemiBold: () => ParagraphSmallSemiBold,
PlaceholderDefault: () => PlaceholderDefault,
PlaceholderLg: () => PlaceholderLg,
PlaceholderSm: () => PlaceholderSm,
Row: () => Row,
Subtext: () => Subtext,
Underline: () => Underline,
colors: () => colors,
mergeColors: () => mergeColors
});
module.exports = __toCommonJS(src_exports);
// src/flexbox.ts
var import_styled_components = __toESM(require("styled-components"));
var mediaLists = [
{ key: "xs", minWidth: "0px" },
{ key: "sm", minWidth: "576px" },
{ key: "md", minWidth: "768px" },
{ key: "lg", minWidth: "992px" },
{ key: "xl", minWidth: "1200px" },
{ key: "2xl", minWidth: "1440px" }
];
var rowStyles = mediaLists.map((media) => {
return import_styled_components.css`
@media (min-width: ${media.minWidth}) {
width: ${({ width }) => typeof width === "object" ? width[media.key] : width ? width : "100%"};
flex-wrap: ${({ wrap }) => typeof wrap === "object" ? wrap[media.key] : wrap ? wrap : "wrap"};
flex-direction: ${({ direction }) => typeof direction === "object" ? direction[media.key] : direction && direction};
justify-content: ${({ content }) => typeof content === "object" ? content[media.key] : content && content};
align-items: ${({ align_items }) => typeof align_items === "object" ? align_items[media.key] : align_items && align_items};
align-content: ${({ align_content }) => typeof align_content === "object" ? align_content[media.key] : align_content && align_content};
gap: ${({ gap }) => typeof gap === "object" ? `${!gap ? 0 : gap[media.key]}px` : `${gap}px`};
row-gap: ${({ row_gap }) => typeof row_gap === "object" ? `${!row_gap ? 0 : row_gap[media.key]}px` : `${row_gap}px`};
column-gap: ${({ column_gap }) => typeof column_gap === "object" ? `${!column_gap ? 0 : column_gap[media.key]}px` : `${column_gap}px`};
}
`;
});
var Row = import_styled_components.default.div`
&& {
display: flex;
${rowStyles}
width: ${({ width }) => width || "100%"};
}
`;
function extractSizes(breakpoints, sizes) {
return breakpoints.map((breakpoint) => ({
key: breakpoint.key,
minWidth: breakpoint.minWidth,
size: sizes[breakpoint.key]
})).filter((breakpoint) => breakpoint.size !== void 0);
}
var columnStyles = import_styled_components.css`
// background-color: red;
${({ size, difference }) => {
const getWidth = (sizeValue) => sizeValue ? `${sizeValue / 12 * 100}%` : "0%";
if (typeof size === "object" && typeof difference === "object") {
const mediaFilter = extractSizes(mediaLists, size);
return import_styled_components.css`
${mediaFilter.map(
(media) => import_styled_components.css`
@media (min-width: ${media.minWidth}) {
width: calc(
${getWidth(media.size)} - ${difference[media.key] || 0}px
);
}
`
)}
`;
} else if (typeof size === "number" && typeof difference === "number") {
return import_styled_components.css`
width: calc(${getWidth(size)} - ${difference}px);
`;
} else if (typeof size === "object" && typeof difference === "number") {
const mediaFilter = extractSizes(mediaLists, size);
return import_styled_components.css`
${mediaFilter.map(
(media) => import_styled_components.css`
@media (min-width: ${media.minWidth}) {
width: calc(${getWidth(size[media.key])} - ${difference}px);
}
`
)}
`;
}
return "";
}}
`;
var Column = import_styled_components.default.div`
&& {
${rowStyles}
${columnStyles}
}
`;
// src/subtext.s.ts
var import_styled_components2 = __toESM(require("styled-components"));
var Subtext = import_styled_components2.default.span``;
// src/constants/colors.ts
var colors = {
/* ---------- solid ----------*/
"primary-25": "rgba(184, 243, 151, 1)",
"primary-50": "rgba(248, 254, 244, 1)",
"primary-100": "rgba(241, 253, 234, 1)",
"primary-200": "rgba(227, 250, 213, 1)",
"primary-300": "rgba(212, 248, 193, 1 )",
"primary-400": "rgba(198, 245, 172, 1)",
"primary-500": "rgba(184, 243, 151, 1)",
// (Base)
"primary-600": "rgba(166, 219, 136, 1)",
// (Hover)
"primary-700": "rgba(157, 207, 128, 1)",
// (Active)
"primary-800": "rgba(147, 194, 121, 1)",
"primary-900": "rgba(138, 182, 113, 1)",
"secondary-50": " rgba(240, 231, 254, 1)",
"secondary-100": " rgba(208, 181, 251, 1)",
"secondary-200": " rgba(185, 145, 249, 1)",
"secondary-300": " rgba(152, 95, 246, 1)",
"secondary-400": " rgba(133, 64, 245, 1)",
"secondary-500": " rgba(102, 16, 242, 1)",
// (Base)
"secondary-600": " rgba(93, 15, 220, 1)",
// (Hover)
"secondary-700": " rgba(72, 11, 172, 1)",
// (Active)
"secondary-800": " rgba(56, 9, 133, 1)",
"secondary-900": " rgba(43, 7, 102, 1)",
"gray-25": "rgba(252, 252, 252, 1)",
"gray-50": "rgba(249, 250, 251, 1)",
"gray-100": "rgba(242, 244, 247, 1)",
"gray-200": "rgba(234, 236, 240, 1)",
"gray-300": "rgba(208, 213, 221, 1)",
"gray-400": "rgba(152, 162, 179, 1)",
"gray-500": "rgba(102, 112, 133, 1)",
// (Base)
"gray-600": "rgba(71, 84, 103, 1)",
//( Hover)
"gray-700": "rgba(52, 64, 84, 1)",
// (Active)
"gray-800": "rgba(29, 41, 57, 1)",
"gray-900": "rgba(16, 24, 40, 1)",
// message and status colors
"success-50": "rgb(234, 249, 241, 1)",
"success-100": "rgba(212, 244, 226, 1)",
"success-200": "rgba(169, 233, 197, 1)",
"success-300": "rgba(126, 221, 169, 1)",
"success-400": "rgba(83, 210, 140, 1)",
"success-500": "rgba(40, 199, 111, 1)",
// (Base)
"success-600": "rgba(36, 179, 100, 1)",
// (Hover)
"success-700": "rgba(34, 169, 94, 1)",
// (Active)
"success-800": "rgba(32, 159, 89, 1)",
"success-900": "rgba(30, 149, 83, 1)",
"danger-50": "rgb(253, 238, 238, 1)",
"danger-100": "rgba(251, 221, 221, 1)",
"danger-200": "rgba(247, 187, 187, 1)",
"danger-300": "rgba(242, 152, 153, 1)",
"danger-400": "rgba(238, 118, 119, 1)",
"danger-500": "rgba(234, 84, 85, 1)",
// (Base)
"danger-600": "rgba(211, 76, 77, 1)",
// (Hover)
"danger-700": "rgba(199, 71, 72, 1)",
// (Active)
"danger-800": "rgba(187, 67, 68, 1)",
"danger-900": "rgba(175, 63, 64, 1)",
"warning-50": "rgb(255, 245, 236, 1)",
"warning-100": "rgba(255, 236, 217, 1)",
"warning-200": "rgba(255, 217, 180, 1)",
"warning-300": "rgba(255, 197, 142, 1)",
"warning-400": "rgba(255, 178, 105, 1)",
"warning-500": "rgba(255, 159, 67, 1)",
// (Base)
"warning-600": "rgba(230, 143, 60, 1)",
// (Hover)
"warning-700": "rgba(217, 135, 57, 1)",
// (Active)
"warning-800": "rgba(204, 127, 54, 1)",
"warning-900": "rgba(191, 119, 50, 1)",
// extra colors
"extra-white": "rgba(255, 255, 255, 1)",
/* ---------- common ---------- */
// typography
"typography-heading": "rgba(24, 28, 50, 1)",
"typography-body": "rgba(63, 66, 84, 1)",
"typography-muted": "rgba(161, 165, 183, 1)",
"typography-placeholder": "rgba(161, 165, 183, 1)",
// opacity
"opacity-primary8": "rgba(184, 243, 151, 0.07999999821186066)",
"opacity-primary16": "rgba(184, 243, 151, 0.1599999964237213)",
"opacity-primary24": "rgba(184, 243, 151, 0.23999999463558197)",
"opacity-primary32": "rgba(184, 243, 151, 0.3199999928474426)",
"opacity-primary40": "rgba(184, 243, 151, 0.4000000059604645)",
"opacity-primary48": "rgba(184, 243, 151, 0.47999998927116394)",
"opacity-secondary8": "rgba(102, 16, 242, 0.07999999821186066)",
"opacity-secondary16": "rgba(102, 16, 242, 0.1599999964237213)",
"opacity-secondary24": "rgba(102, 16, 242, 0.23999999463558197)",
"opacity-secondary32": "rgba(102, 16, 242, 0.3199999928474426)",
"opacity-secondary40": "rgba(102, 16, 242, 0.4000000059604645)",
"opacity-secondary48": "rgba(102, 16, 242, 0.47999998927116394)",
"opacity-gray8": "rgba(102, 112, 133, 0.07999999821186066)",
"opacity-gray16": "rgba(102, 112, 133, 0.1599999964237213)",
"opacity-gray24": "rgba(102, 112, 133, 0.23999999463558197)",
"opacity-gray32": "rgba(102, 112, 133, 0.3199999928474426)",
"opacity-gray40": "rgba(102, 112, 133, 0.4000000059604645)",
"opacity-gray48": "rgba(102, 112, 133, 0.47999998927116394)",
"opacity-success8": "rgba(40, 199, 111, 0.08)",
"opacity-success16": "rgba(40, 199, 111, 0.016)",
"opacity-success24": "rgba(40, 199, 111, 0.024)",
"opacity-success32": "rgba(40, 199, 111, 0.032)",
"opacity-success40": "rgba(40, 199, 111, 0.4)",
"opacity-success48": "rgba(40, 199, 111, 0.48)",
"opacity-warning8": "rgba(255, 159, 67, 0,08)",
"opacity-warning16": "rgba(255, 159, 67, 0.016)",
"opacity-warning24": "rgba(255, 159, 67, 0.024)",
"opacity-warning32": "rgba(255, 159, 67, 0.032)",
"opacity-warning40": "rgba(255, 159, 67, 0.4)",
"opacity-warning48": "rgba(255, 159, 67, 0.48)",
"opacity-danger8": "rgba(234, 84, 85, 0,08)",
"opacity-danger16": "rgba(234, 84, 85, 0.016)",
"opacity-danger24": "rgba(234, 84, 85, 0.024)",
"opacity-danger32": "rgba(234, 84, 85, 0.032)",
"opacity-danger40": "rgba(234, 84, 85, 0.4)",
"opacity-danger48": "rgba(234, 84, 85, 0.48)",
// gradient
primary: "linear-gradient(90deg, rgba(184, 243, 151, 1) 0%, rgba(212, 248, 193, 1) 100%)",
secondary: "linear-gradient(90deg,rgba(102, 16, 242, 1) 0%,rgba(152, 95, 246, 1) 100%",
gray: "linear-gradient(90deg,rgba(102, 112, 133, 1) 0%,rgba(208, 213, 221, 1) 100%",
success: "linear-gradient(90deg,rgba(40, 199, 111, 1) 0%,rgba(72, 218, 137, 1) 100%",
danger: "linear-gradient(90deg,rgba(234, 84, 85, 1) 0%,rgba(240, 129, 130, 1) 100%",
warning: "linear-gradient(90deg,rgba(255, 159, 67, 1) 0%,rgba(255, 185, 118, 1) 100%"
};
var mergeColors = (customColors) => {
return {
...colors,
...customColors
};
};
// src/typography.s.ts
var import_styled_components3 = __toESM(require("styled-components"));
var subColorStyle = import_styled_components3.css`
&& {
span {
${({ subColor }) => {
return subColor?.substring(0, 8) === "gradient" ? import_styled_components3.css`
background: ${colors[subColor]};
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
` : import_styled_components3.css`
color: ${subColor ? colors[subColor] : "var(--grey-900, #101010)"};
`;
}}
}
}
`;
var globalStyle = import_styled_components3.css`
${({ color }) => {
return color?.substring(0, 8) === "gradient" ? import_styled_components3.css`
background: ${colors[color]};
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
` : import_styled_components3.css`
color: ${color ? colors[color] : "var(--grey-900, #101010)"} ;
`;
}}
${({ align }) => align && import_styled_components3.css`
text-align: ${align};
`}
${({ subColor }) => subColor && subColorStyle}
font-family: 'Mulish', sans-serif;
font-style: normal;
text-transform: none;
`;
var Display1 = import_styled_components3.default.h1`
&& {
${globalStyle}
font-size: 64px;
font-weight: 500;
letter-spacing: 0px;
line-height: 84px;
}
`;
var Display2 = import_styled_components3.default.h1`
&& {
${globalStyle}
font-size: 56px;
font-weight: 500;
letter-spacing: 0px;
line-height: 78px;
}
`;
var Display3 = import_styled_components3.default.h1`
&& {
${globalStyle}
font-size: 48px;
font-weight: 500;
letter-spacing: 0px;
line-height: 68px;
}
`;
var Display4 = import_styled_components3.default.h1`
&& {
${globalStyle}
font-size: 32px;
font-weight: 500;
letter-spacing: 0px;
line-height: 46px;
}
`;
var H1 = import_styled_components3.default.h1`
&& {
${globalStyle}
font-size: 38px;
font-weight: 600;
letter-spacing: 0px;
line-height: 52px;
}
`;
var H2 = import_styled_components3.default.h2`
&& {
${globalStyle}
font-size: 32px;
font-weight: 600;
letter-spacing: 0px;
line-height: 44px;
}
`;
var H3 = import_styled_components3.default.h3`
&& {
${globalStyle}
font-size: 26px;
font-weight: 600;
letter-spacing: 0px;
line-height: 36px;
}
`;
var H4 = import_styled_components3.default.h4`
&& {
${globalStyle}
font-size: 22px;
font-weight: 600;
letter-spacing: 0px;
line-height: 30px;
}
`;
var H5 = import_styled_components3.default.h5`
&& {
${globalStyle}
font-size: 18px;
font-weight: 600;
letter-spacing: 0px;
line-height: 24px;
}
`;
var H6 = import_styled_components3.default.h6`
&& {
${globalStyle}
font-size: 15px;
font-weight: 600;
letter-spacing: 0px;
line-height: 21px;
}
`;
var ParagraphLead = import_styled_components3.default.p`
&& {
${globalStyle}
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 28px;
}
`;
var Paragraph = import_styled_components3.default.p`
&& {
${globalStyle}
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
line-height: 22px;
}
`;
var ParagraphMedium = import_styled_components3.default.p`
&& {
${globalStyle}
font-size: 15px;
font-weight: 500;
letter-spacing: 0px;
line-height: 22px;
}
`;
var ParagraphSemiBold = import_styled_components3.default.p`
&& {
${globalStyle}
font-size: 15px;
font-weight: 600;
letter-spacing: 0px;
line-height: 22px;
}
`;
var ParagraphBold = import_styled_components3.default.p`
&& {
${globalStyle}
font-size: 15px;
font-weight: 700;
letter-spacing: 0px;
line-height: 22px;
}
`;
var ParagraphSmall = import_styled_components3.default.p`
&& {
${globalStyle}
font-size: 13px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20px;
}
`;
var ParagraphSmallSemiBold = import_styled_components3.default.p`
&& {
${globalStyle}
font-size: 13px;
font-weight: 600;
letter-spacing: 0px;
line-height: 14px;
}
`;
var ParagraphSmallBold = import_styled_components3.default.p`
&& {
${globalStyle}
font-size: 13px;
font-weight: 700;
letter-spacing: 0px;
line-height: 20px;
}
`;
var DeleteText = import_styled_components3.default.del`
&& {
${globalStyle}
font-size: 15px;
text-decoration: line-through;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
}
`;
var Italicized = import_styled_components3.default.i`
&& {
${globalStyle}
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
text-transform: lowercase;
}
`;
var Underline = import_styled_components3.default.u`
&& {
${globalStyle}
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
}
`;
var Caption = import_styled_components3.default.caption`
&& {
${globalStyle}
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
line-height: 14px;
}
`;
var ButtonLG = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 17px;
font-weight: 500;
letter-spacing: 0.4300000071525574px;
line-height: 22px;
}
`;
var ButtonDefault = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 15px;
font-weight: 500;
letter-spacing: 0.4300000071525574px;
}
`;
var ButtonSmall = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 13px;
font-weight: 500;
letter-spacing: 0.4300000071525574px;
line-height: 16px;
}
`;
var LabelLg = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
}
`;
var LabelDefault = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
}
`;
var LabelSm = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 13px;
font-weight: 400;
letter-spacing: 0px;
}
`;
var InputLg = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
}
`;
var InputDefault = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
}
`;
var InputSm = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 13px;
font-weight: 400;
letter-spacing: 0px;
}
`;
var PlaceholderLg = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 22px;
}
`;
var PlaceholderDefault = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 15px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
}
`;
var PlaceholderSm = import_styled_components3.default.button`
&& {
${globalStyle}
font-size: 13px;
font-weight: 400;
letter-spacing: 0px;
line-height: 21px;
}
`;
// src/container.s.ts
var import_styled_components4 = __toESM(require("styled-components"));
var Container = import_styled_components4.default.div`
&& {
margin-left: auto;
margin-right: auto;
/* max-width: "100vw"; */
width: 100%;
transition: all 250ms ease-in-out;
width: clamp(200px, 95%, 394px);
// Extra small devices (landscape phones, 320px and 430px) - 24px
@media (min-width: 320px) {
width: clamp(296px, 95%, 394px);
}
// Small devices (landscape phones, 576px and 744px) - 36px
@media (min-width: 430px) {
width: clamp(394px, 90%, 688px);
}
// Medium devices (tablets, 744px and 992px) - 56px
@media (min-width: 744px) {
width: clamp(688px, 85%, 920px);
}
// Large devices (laptop, 992px and 1440px) - 72px
@media (min-width: 992px) {
width: clamp(920px, 80%, 1340px);
}
// Extra large devices (laptop, 1440px and up) - 100px
@media (min-width: 1440px) {
width: clamp(1340px, 75%, 1600px);
}
}
`;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ButtonDefault,
ButtonLG,
ButtonSmall,
Caption,
Column,
Container,
DeleteText,
Display1,
Display2,
Display3,
Display4,
H1,
H2,
H3,
H4,
H5,
H6,
InputDefault,
InputLg,
InputSm,
Italicized,
LabelDefault,
LabelLg,
LabelSm,
Paragraph,
ParagraphBold,
ParagraphLead,
ParagraphMedium,
ParagraphSemiBold,
ParagraphSmall,
ParagraphSmallBold,
ParagraphSmallSemiBold,
PlaceholderDefault,
PlaceholderLg,
PlaceholderSm,
Row,
Subtext,
Underline,
colors,
mergeColors
});