cherry-styled-components 0.1.11 → 0.1.12

package/src/lib/utils/theme.ts

@@ -1,297 +0,0 @@
-"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" },
-  buttonSmall: { xs: "14px", lg: "14px" },
-
-  input: { xs: "16px", lg: "16px" },
-  inputBig: { xs: "18px", lg: "18px" },
-  inputSmall: { xs: "14px", lg: "14px" },
-};
-
-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" },
-  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" },
-};
-
-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 };
-  buttonSmall: { xs: TString; lg: TString };
-
-  input: { xs: TString; lg: TString };
-  inputBig: { xs: TString; lg: TString };
-  inputSmall: { 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 };
-  buttonSmall: { xs: TString; lg: TString };
-
-  input: { xs: TString; lg: TString };
-  inputBig: { xs: TString; lg: TString };
-  inputSmall: { 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

@@ -1,204 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,8 +0,0 @@
-/// <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

@@ -1,24 +0,0 @@
-{
-  "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

@@ -1,24 +0,0 @@
-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",
-        },
-      },
-    },
-  },
-});