cherry-styled-components
Version:
Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.
280 lines (279 loc) • 4.4 kB
JavaScript
"use client";
"use client";
//#region src/lib/utils/theme.ts
var breakpoints = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1440,
xxxl: 1920
};
function mq(minWidth) {
return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
}
var spacing = {
maxWidth: {
xs: "1280px",
xxxl: "1440px"
},
padding: {
xs: "20px",
lg: "40px"
},
radius: {
xs: "6px",
lg: "12px",
xl: "30px"
},
gridGap: {
xs: "20px",
lg: "40px"
}
};
var colors = {
primaryLight: "#91aec4",
primary: "#4d6f8b",
primaryDark: "#194569",
secondaryLight: "#a4b17b",
secondary: "#5c6e46",
secondaryDark: "#354c2b",
tertiaryLight: "#ebccb9",
tertiary: "#816b5a",
tertiaryDark: "#675445",
grayLight: "#e5e7eb",
gray: "#9ca3af",
grayDark: "#4b5563",
success: "#84cc16",
error: "#ef4444",
warning: "#eab308",
info: "#06b6d4",
dark: "#000000",
light: "#ffffff"
};
var colorsDark = {
primaryLight: "#79C5FF",
primary: "#6198C6",
primaryDark: "#339DF4",
secondaryLight: "#a4b17b",
secondary: "#5c6e46",
secondaryDark: "#354c2b",
tertiaryLight: "#ebccb9",
tertiary: "#816b5a",
tertiaryDark: "#675445",
grayLight: "#1a1a1a",
gray: "#454444",
grayDark: "#808080",
success: "#84cc16",
error: "#ef4444",
warning: "#eab308",
info: "#06b6d4",
dark: "#ffffff",
light: "#000000"
};
var shadows = {
xs: "0px 4px 4px 0px rgba(18, 18, 18, 0.04), 0px 1px 3px 0px rgba(39, 41, 45, 0.02)",
sm: "0px 4px 4px 0px rgba(18, 18, 18, 0.08), 0px 1px 3px 0px rgba(39, 41, 45, 0.04)",
md: "0px 8px 8px 0px rgba(18, 18, 18, 0.16), 0px 2px 3px 0px rgba(39, 41, 45, 0.06)",
lg: "0px 16px 24px 0px rgba(18, 18, 18, 0.20), 0px 2px 3px 0px rgba(39, 41, 45, 0.08)",
xl: "0px 24px 32px 0px rgba(18, 18, 18, 0.24), 0px 2px 3px 0px rgba(39, 41, 45, 0.12)"
};
var shadowsDark = {
xs: "0px 4px 4px 0px rgba(255, 255, 255, 0.04), 0px 1px 3px 0px rgba(255, 255, 255, 0.02)",
sm: "0px 4px 4px 0px rgba(255, 255, 255, 0.08), 0px 1px 3px 0px rgba(255, 255, 255, 0.04)",
md: "0px 8px 8px 0px rgba(255, 255, 255, 0.16), 0px 2px 3px 0px rgba(255, 255, 255, 0.06)",
lg: "0px 16px 24px 0px rgba(255, 255, 255, 0.20), 0px 2px 3px 0px rgba(255, 255, 255, 0.08)",
xl: "0px 24px 32px 0px rgba(255, 255, 255, 0.24), 0px 2px 3px 0px rgba(255, 255, 255, 0.12)"
};
var fonts = {
text: "Inter",
head: "Inter",
mono: "monospace"
};
var fontSizes = {
hero1: {
xs: "72px",
lg: "128px"
},
hero2: {
xs: "60px",
lg: "96px"
},
hero3: {
xs: "36px",
lg: "72px"
},
h1: {
xs: "40px",
lg: "60px"
},
h2: {
xs: "30px",
lg: "36px"
},
h3: {
xs: "28px",
lg: "30px"
},
h4: {
xs: "26px",
lg: "24px"
},
h5: {
xs: "18px",
lg: "20px"
},
h6: {
xs: "16px",
lg: "18px"
},
text: {
xs: "14px",
lg: "16px"
},
strong: {
xs: "14px",
lg: "16px"
},
small: {
xs: "12px",
lg: "14px"
},
blockquote: {
xs: "16px",
lg: "18px"
},
code: {
xs: "14px",
lg: "16px"
},
button: {
xs: "16px",
lg: "16px"
},
buttonBig: {
xs: "18px",
lg: "18px"
},
buttonSmall: {
xs: "14px",
lg: "14px"
},
input: {
xs: "16px",
lg: "16px"
},
inputBig: {
xs: "18px",
lg: "18px"
},
inputSmall: {
xs: "14px",
lg: "14px"
}
};
var lineHeights = {
hero1: {
xs: "1.10",
lg: "1.10"
},
hero2: {
xs: "1.10",
lg: "1.10"
},
hero3: {
xs: "1.20",
lg: "1.10"
},
h1: {
xs: "1.50",
lg: "1.40"
},
h2: {
xs: "1.50",
lg: "1.50"
},
h3: {
xs: "1.30",
lg: "1.50"
},
h4: {
xs: "1.30",
lg: "1.50"
},
h5: {
xs: "1.60",
lg: "1.50"
},
h6: {
xs: "1.60",
lg: "1.60"
},
text: {
xs: "1.70",
lg: "1.70"
},
strong: {
xs: "1.70",
lg: "1.70"
},
small: {
xs: "1.70",
lg: "1.70"
},
blockquote: {
xs: "1.70",
lg: "1.70"
},
code: {
xs: "1.70",
lg: "1.70"
},
button: {
xs: "1.00",
lg: "1.00"
},
buttonBig: {
xs: "1.00",
lg: "1.00"
},
buttonSmall: {
xs: "1.00",
lg: "1.00"
},
input: {
xs: "1.00",
lg: "1.00"
},
inputBig: {
xs: "1.00",
lg: "1.00"
},
inputSmall: {
xs: "1.00",
lg: "1.00"
}
};
var theme = {
breakpoints,
spacing,
colors,
shadows,
fonts,
fontSizes,
lineHeights,
isDark: false
};
var themeDark = {
breakpoints,
spacing,
colors: colorsDark,
shadows: shadowsDark,
fonts,
fontSizes,
lineHeights,
isDark: true
};
//#endregion
export { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark };