cherry-styled-components 0.1.0 → 0.1.2

package/src/lib/utils/mixins.tsx

@@ -0,0 +1,108 @@
+"use client";
+import { css } from "styled-components";
+import { Breakpoints, Theme, mq } from "./theme";
+
+export const resetButton = css`
+  box-sizing: border-box;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  outline: none;
+`;
+
+export const resetInput = css`
+  cursor: text;
+  min-width: 100px;
+`;
+
+export const fullWidthStyles = (fullWidth: boolean) => {
+  if (fullWidth) {
+    return css`
+      width: 100%;
+    `;
+  }
+};
+
+export const statusBorderStyles = (
+  $error: boolean,
+  $success: boolean,
+  theme: Theme,
+) => {
+  if ($error) {
+    return css`
+      border-color: ${theme?.colors.error};
+    `;
+  }
+
+  if ($success) {
+    return css`
+      border-color: ${theme?.colors.success};
+    `;
+  }
+};
+
+export const formElementHeightStyles = ($size?: "default" | "big") => {
+  if ($size === "big") {
+    return css`
+      height: 60px;
+    `;
+  }
+
+  return css`
+    height: 50px;
+  `;
+};
+
+export const generateGapStyles = (
+  size: keyof Breakpoints<number>,
+  gap: number | "none",
+) => css`
+  ${mq(size)} {
+    gap: ${gap === "none" ? "0" : `${gap}px`};
+  }
+`;
+
+export const generateColsStyles = (
+  size: keyof Breakpoints<number>,
+  cols: number,
+) => css`
+  ${mq(size)} {
+    grid-template-columns: repeat(${cols || 3}, minmax(0, 1fr));
+  }
+`;
+
+export const generateColSpanStyles = (
+  size: keyof Breakpoints<number>,
+  span: number,
+) => css`
+  ${mq(size)} {
+    grid-column: span ${span};
+  }
+`;
+
+export const generatePaddingStyles = (
+  size: keyof Breakpoints<number>,
+  padding: number | "none",
+) => css`
+  ${mq(size)} {
+    padding: ${padding === "none" ? "0" : `${padding}px`};
+  }
+`;
+
+export const generateJustifyContentStyles = (
+  size: keyof Breakpoints<number>,
+  justifyContent?:
+    | "center"
+    | "flex-start"
+    | "flex-end"
+    | "space-between"
+    | "space-around"
+    | "space-evenly",
+) => css`
+  ${mq(size)} {
+    justify-content: ${justifyContent && `${justifyContent}`};
+  }
+`;

package/src/lib/utils/theme.ts

@@ -0,0 +1,289 @@
+"use client";
+export const breakpoints: Breakpoints = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1440,
+  xxxl: 1920,
+};
+
+export function mq(minWidth: keyof Breakpoints) {
+  return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
+}
+
+export const spacing: Spacing = {
+  maxWidth: { xs: "1280px", xxxl: "1440px" },
+  padding: { xs: "20px", lg: "40px" },
+  radius: { xs: "6px", lg: "12px", xl: "30px" },
+  gridGap: { xs: "20px", lg: "40px" },
+};
+
+export const colors: 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",
+};
+
+export const colorsDark: Colors = {
+  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",
+};
+
+export const shadows: 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)",
+};
+
+export const shadowsDark: Shadows = {
+  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)",
+};
+
+export const fonts: Fonts = {
+  text: "Inter",
+  head: "Inter",
+  mono: "monospace",
+};
+
+export const fontSizes: 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" },
+
+  input: { xs: "16px", lg: "16px" },
+  inputBig: { xs: "18px", lg: "18px" },
+};
+
+export const lineHeights: 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" },
+
+  input: { xs: "1.00", lg: "1.00" },
+  inputBig: { xs: "1.00", lg: "1.00" },
+};
+
+export const theme: Theme = {
+  breakpoints,
+  spacing,
+  colors,
+  shadows,
+  fonts,
+  fontSizes,
+  lineHeights,
+  isDark: false,
+};
+
+export const themeDark: Theme = {
+  breakpoints,
+  spacing,
+  colors: colorsDark,
+  shadows: shadowsDark,
+  fonts,
+  fontSizes,
+  lineHeights,
+  isDark: true,
+};
+
+export interface Breakpoints<TNumber = number> {
+  xs: TNumber;
+  sm: TNumber;
+  md: TNumber;
+  lg: TNumber;
+  xl: TNumber;
+  xxl: TNumber;
+  xxxl: TNumber;
+}
+
+export interface Spacing<TString = string> {
+  maxWidth: { xs: TString; xxxl: TString };
+  padding: { xs: TString; lg: TString };
+  radius: { xs: TString; lg: TString; xl: TString };
+  gridGap: { xs: TString; lg: TString };
+}
+
+export interface Colors<TString = string> {
+  primaryLight: TString;
+  primary: TString;
+  primaryDark: TString;
+
+  secondaryLight: TString;
+  secondary: TString;
+  secondaryDark: TString;
+
+  tertiaryLight: TString;
+  tertiary: TString;
+  tertiaryDark: TString;
+
+  grayLight: TString;
+  gray: TString;
+  grayDark: TString;
+
+  success: TString;
+  error: TString;
+  warning: TString;
+  info: TString;
+
+  dark: TString;
+  light: TString;
+}
+
+interface Shadows<TString = string> {
+  xs: TString;
+  sm: TString;
+  md: TString;
+  lg: TString;
+  xl: TString;
+}
+
+export interface Fonts<TString = string> {
+  head: TString;
+  text: TString;
+  mono: TString;
+}
+
+export interface FontSizes<TString = string> {
+  hero1: { xs: TString; lg: TString };
+  hero2: { xs: TString; lg: TString };
+  hero3: { xs: TString; lg: TString };
+
+  h1: { xs: TString; lg: TString };
+  h2: { xs: TString; lg: TString };
+  h3: { xs: TString; lg: TString };
+  h4: { xs: TString; lg: TString };
+  h5: { xs: TString; lg: TString };
+  h6: { xs: TString; lg: TString };
+
+  text: { xs: TString; lg: TString };
+  strong: { xs: TString; lg: TString };
+  small: { xs: TString; lg: TString };
+
+  blockquote: { xs: TString; lg: TString };
+  code: { xs: TString; lg: TString };
+
+  button: { xs: TString; lg: TString };
+  buttonBig: { xs: TString; lg: TString };
+
+  input: { xs: TString; lg: TString };
+  inputBig: { xs: TString; lg: TString };
+}
+
+export interface LineHeights<TString = string> {
+  hero1: { xs: TString; lg: TString };
+  hero2: { xs: TString; lg: TString };
+  hero3: { xs: TString; lg: TString };
+
+  h1: { xs: TString; lg: TString };
+  h2: { xs: TString; lg: TString };
+  h3: { xs: TString; lg: TString };
+  h4: { xs: TString; lg: TString };
+  h5: { xs: TString; lg: TString };
+  h6: { xs: TString; lg: TString };
+
+  text: { xs: TString; lg: TString };
+  strong: { xs: TString; lg: TString };
+  small: { xs: TString; lg: TString };
+
+  blockquote: { xs: TString; lg: TString };
+  code: { xs: TString; lg: TString };
+
+  button: { xs: TString; lg: TString };
+  buttonBig: { xs: TString; lg: TString };
+
+  input: { xs: TString; lg: TString };
+  inputBig: { xs: TString; lg: TString };
+}
+
+export interface Theme {
+  breakpoints: Breakpoints;
+  spacing: Spacing;
+  colors: Colors;
+  shadows: Shadows;
+  fonts: Fonts;
+  fontSizes: FontSizes;
+  lineHeights: LineHeights;
+  isDark: boolean;
+}

package/src/lib/utils/typography.tsx

@@ -0,0 +1,204 @@
+"use client";
+import { css } from "styled-components";
+import { Theme, mq } from "./theme";
+
+const styledHero1 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.hero1.xs};
+  line-height: ${theme.lineHeights.hero1.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.hero1.lg};
+    line-height: ${theme.lineHeights.hero1.lg};
+  }
+`;
+
+const styledHero2 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.hero2.xs};
+  line-height: ${theme.lineHeights.hero2.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.hero2.lg};
+    line-height: ${theme.lineHeights.hero2.lg};
+  }
+`;
+
+const styledHero3 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.hero3.xs};
+  line-height: ${theme.lineHeights.hero3.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.hero3.lg};
+    line-height: ${theme.lineHeights.hero3.lg};
+  }
+`;
+
+const styledH1 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.h1.xs};
+  line-height: ${theme.lineHeights.h1.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.h1.lg};
+    line-height: ${theme.lineHeights.h1.lg};
+  }
+`;
+
+const styledH2 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.h2.xs};
+  line-height: ${theme.lineHeights.h2.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.h2.lg};
+    line-height: ${theme.lineHeights.h2.lg};
+  }
+`;
+
+const styledH3 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.h3.xs};
+  line-height: ${theme.lineHeights.h3.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.h3.lg};
+    line-height: ${theme.lineHeights.h3.lg};
+  }
+`;
+
+const styledH4 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.h4.xs};
+  line-height: ${theme.lineHeights.h4.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.h4.lg};
+    line-height: ${theme.lineHeights.h4.lg};
+  }
+`;
+
+const styledH5 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.h5.xs};
+  line-height: ${theme.lineHeights.h5.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.h5.lg};
+    line-height: ${theme.lineHeights.h5.lg};
+  }
+`;
+
+const styledH6 = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.h6.xs};
+  line-height: ${theme.lineHeights.h6.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.h6.lg};
+    line-height: ${theme.lineHeights.h6.lg};
+  }
+`;
+
+const styledText = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.text.xs};
+  line-height: ${theme.lineHeights.text.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.text.lg};
+    line-height: ${theme.lineHeights.text.lg};
+  }
+`;
+
+const styledStrong = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.strong.xs};
+  line-height: ${theme.lineHeights.strong.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.strong.lg};
+    line-height: ${theme.lineHeights.strong.lg};
+  }
+`;
+
+const styledSmall = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.small.xs};
+  line-height: ${theme.lineHeights.small.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.small.lg};
+    line-height: ${theme.lineHeights.small.lg};
+  }
+`;
+
+const styledBlockquote = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.blockquote.xs};
+  line-height: ${theme.lineHeights.blockquote.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.blockquote.lg};
+    line-height: ${theme.lineHeights.blockquote.lg};
+  }
+`;
+
+const styledCode = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.code.xs};
+  line-height: ${theme.lineHeights.code.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.code.lg};
+    line-height: ${theme.lineHeights.code.lg};
+  }
+`;
+
+const styledButton = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.button.xs};
+  line-height: ${theme.lineHeights.button.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.button.lg};
+    line-height: ${theme.lineHeights.button.lg};
+  }
+`;
+
+const styledButtonBig = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.buttonBig.xs};
+  line-height: ${theme.lineHeights.buttonBig.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.buttonBig.lg};
+    line-height: ${theme.lineHeights.buttonBig.lg};
+  }
+`;
+
+const styledInput = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.input.xs};
+  line-height: ${theme.lineHeights.input.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.input.lg};
+    line-height: ${theme.lineHeights.input.lg};
+  }
+`;
+
+const styledInputBig = (theme: Theme) => css`
+  font-size: ${theme.fontSizes.inputBig.xs};
+  line-height: ${theme.lineHeights.inputBig.xs};
+
+  ${mq("lg")} {
+    font-size: ${theme.fontSizes.inputBig.lg};
+    line-height: ${theme.lineHeights.inputBig.lg};
+  }
+`;
+
+export {
+  styledHero1,
+  styledHero2,
+  styledHero3,
+  styledH1,
+  styledH2,
+  styledH3,
+  styledH4,
+  styledH5,
+  styledH6,
+  styledText,
+  styledStrong,
+  styledSmall,
+  styledBlockquote,
+  styledCode,
+  styledButton,
+  styledButtonBig,
+  styledInput,
+  styledInputBig,
+};

package/src/main.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import {
+  CherryThemeProvider,
+  StyledComponentsRegistry,
+  theme,
+  themeDark,
+} from "./lib/index.js";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <StyledComponentsRegistry>
+      <CherryThemeProvider theme={theme} themeDark={themeDark}>
+        <App />
+      </CherryThemeProvider>
+    </StyledComponentsRegistry>
+  </React.StrictMode>,
+);

package/src/toggle-theme.tsx

@@ -0,0 +1,25 @@
+import React, { useContext } from "react";
+import { useTheme } from "styled-components";
+import { theme as themeLight, themeDark, ThemeContext, Toggle } from "./lib";
+
+function ToggleTheme() {
+  const theme = useTheme();
+  const { setTheme } = useContext(ThemeContext);
+
+  return (
+    <Toggle
+      $label="Toggle Theme"
+      onChange={() => {
+        if (theme.isDark) {
+          setTheme(themeLight);
+          localStorage.theme = "light";
+        } else {
+          setTheme(themeDark);
+          localStorage.theme = "dark";
+        }
+      }}
+    />
+  );
+}
+
+export { ToggleTheme };

package/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+import "styled-components";
+import { Theme } from "./lib/utils/theme";
+
+declare module "styled-components" {
+  export interface DefaultTheme extends Theme {}
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./types",
+    "esModuleInterop": true,
+    "module": "ES6",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/vite.config.js

@@ -0,0 +1,24 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [react(), dts()],
+  build: {
+    lib: {
+      entry: "src/lib/index.ts",
+      name: "Cherry",
+      formats: ["es", "umd"],
+      fileName: "cherry",
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});