Global Styles

"use client";
import React from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { GlobalStyles, Theme } from "../utils";

function CherryThemeProvider({
  children,
  theme,
}: {
  children: React.ReactNode;
  theme: Theme;
}) {
  const GlobalStylesComponent = GlobalStyles(theme);

  return (
    <StyledThemeProvider theme={theme}>
      <GlobalStylesComponent />
      {children}
    </StyledThemeProvider>
  );
}

export { CherryThemeProvider };

"use client";
import { createGlobalStyle } from "styled-components";
import { Theme } from "./theme";

const GlobalStyles = (theme: Theme) => createGlobalStyle`
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  scroll-behavior: smooth;
  background-color: ${theme.colors.light};
}

body {
  font-family: "Inter", sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

pre, code, kbd, samp {
  font-family: monospace, monospace;
}

pre, code, kbd, samp, blockquote, p, a,
h1, h2, h3, h4, h5, h6, ul li, ol li {
  margin: 0;
  padding: 0;
  color: ${theme.colors.dark};
}

a {
  color: ${theme.isDark ? theme.colors.dark : theme.colors.primary};
}

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

figure { margin: 0; }

fieldset {
  appearance: none;
  border: none;
}

button, input, a, img, svg, svg * {
  transition: all 0.3s ease;
}

strong, b { font-weight: 700; }
`;

export { GlobalStyles };