cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
47 lines (46 loc) • 1.67 kB
JavaScript
"use client";
"use client";
import { mq } from "./theme.js";
import { css } from "styled-components";
//#region src/lib/utils/mixins.tsx
var resetButton = css([`box-sizing:border-box;appearance:none;border:none;background:none;padding:0;margin:0;cursor:pointer;outline:none;`]);
var resetInput = css([`cursor:text;min-width:100px;`]);
var fullWidthStyles = (fullWidth) => {
if (fullWidth) return css([`width:100%;`]);
};
var statusBorderStyles = ($error, $success, theme) => {
if ($error) return css([`border-color:`, `;`], theme?.colors.error);
if ($success) return css([`border-color:`, `;`], theme?.colors.success);
};
var formElementHeightStyles = ($size) => {
if ($size === "big") return css([`height:60px;`]);
if ($size === "small") return css([`height:40px;`]);
return css([`height:50px;`]);
};
var generateGapStyles = (size, gap) => css([
``,
`{gap:`,
`;}`
], mq(size), gap === "none" ? "0" : `${gap}px`);
var generateColsStyles = (size, cols) => css([
``,
`{grid-template-columns:repeat(`,
`,minmax(0,1fr));}`
], mq(size), cols || 3);
var generateColSpanStyles = (size, span) => css([
``,
`{grid-column:span `,
`;}`
], mq(size), span);
var generatePaddingStyles = (size, padding) => css([
``,
`{padding:`,
`;}`
], mq(size), padding === "none" ? "0" : `${padding}px`);
var generateJustifyContentStyles = (size, justifyContent) => css([
``,
`{justify-content:`,
`;}`
], mq(size), justifyContent && `${justifyContent}`);
//#endregion
export { formElementHeightStyles, fullWidthStyles, generateColSpanStyles, generateColsStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, resetButton, resetInput, statusBorderStyles };