antstackio · pruthvi2103 · Feb 2, 2023
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -25,19 +25,22 @@ const config = {
     defaultLocale: "en",
     locales: ["en"]
   },
-
   presets: [
     [
       "classic",
       /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
+
+      {
         docs: {
           sidebarPath: require.resolve("./sidebars.js")
         },
         blog: {
           showReadingTime: true
+        },
+        theme: {
+          customCss: require.resolve("./src/styles/typography/typography.css")
         }
-      })
+      }
     ]
   ],
 

diff --git a/docs/package.json b/docs/package.json
@@ -15,14 +15,15 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.1",
-    "@docusaurus/preset-classic": "2.0.1",
+    "@docusaurus/core": "2.3.0",
+    "@docusaurus/preset-classic": "2.3.0",
     "@hover-design/react": "*",
     "@mdx-js/react": "^1.6.22",
     "@vanilla-extract/css": "^1.6.8",
     "@vanilla-extract/webpack-plugin": "^2.1.10",
     "clsx": "^1.1.1",
     "docusaurus-plugin-vanilla-extract": "^1.0.1",
+    "polished": "^4.1.3",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/docs/src/pages/index.copy.tsx b/docs/src/pages/index.copy.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./index.module.css";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  console.log(siteConfig);
+
+  return (
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttonFlex}>
+          <div className={styles.buttons}>
+            <Link
+              className="button button--secondary button--lg"
+              to="/docs/intro"
+            >
+              Quick Start
+            </Link>
+          </div>
+          <div className={styles.buttons}>
+            <a
+              className="button button--secondary button--lg"
+              href="https://github.com/antstackio/hover-design"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Github
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />"
+    >
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -1,9 +1,13 @@
 import React from "react";
-
-type Props = {};
-
-const HomePage = (props: Props) => {
-  return <div>HomePage</div>;
+import { HoverProvider } from "@hover-design/react";
+import { theme } from "../styles/theme/theme";
+import { primaryThemeClassName } from "../styles";
+const HomePage = () => {
+  return (
+    <HoverProvider value={{ theme }}>
+      <div className={primaryThemeClassName}>Hello World</div>
+    </HoverProvider>
+  );
 };
 
 export default HomePage;
diff --git a/docs/src/styles/constants/breakpoints/breakpoints.ts b/docs/src/styles/constants/breakpoints/breakpoints.ts
@@ -0,0 +1,11 @@
+export const breakpoints = {
+  desktop: 1024,
+  tablet: 768,
+  mobile: 320
+};
+
+export const breakpointMediaQueries = {
+  desktop: `(min-width: ${breakpoints.desktop}px)`,
+  tablet: `(min-width: ${breakpoints.tablet}px)`,
+  mobile: `(min-width: ${breakpoints.mobile}px)`
+};
diff --git a/docs/src/styles/constants/colors/colors.ts b/docs/src/styles/constants/colors/colors.ts
@@ -0,0 +1,78 @@
+import { IColors } from "./colors.types";
+
+export const colors: IColors = {
+  blue: {
+    10: "#E5F3FF",
+    20: "#B7DDFF",
+    30: "#8AC7FF",
+    40: "#5CB1FF",
+    50: "#2E9BFF",
+    60: "#0070D6",
+    70: "#0070D6",
+    80: "#005BAD",
+    90: "#004585",
+    100: "#00305C",
+    1000: "#0F1528"
+  },
+  orange: {
+    10: "#FFF1E5",
+    20: "#FFDAB7",
+    30: "#FFC28A",
+    40: "#FFAA5C",
+    50: "#FF922E",
+    60: "#FF7A00",
+    70: "#D66700",
+    80: "#AD5300",
+    90: "#854000",
+    100: "#5C2C00",
+    1000: "#231000"
+  },
+  red: {
+    10: "#fff1f1",
+    20: "#ffd7d9",
+    30: "#ffb3b8",
+    40: "#ff8389",
+    50: "#fa4d56",
+    60: "#da1e28",
+    70: "#a2191f",
+    80: "#750e13",
+    90: "#520408",
+    100: "#2d0709"
+  },
+  green: {
+    10: "#defbe6",
+    20: "#a7f0ba",
+    30: "#6fdc8c",
+    40: "#42be65",
+    50: "#24a148",
+    60: "#198038",
+    70: "#0e6027",
+    80: "#044317",
+    90: "#022d0d",
+    100: "#071908"
+  },
+  yellow: {
+    10: "#fcf4d6",
+    20: "#fddc69",
+    30: "#f1c21b",
+    40: "#d2a106",
+    50: "#b28600",
+    60: "#8e6a00",
+    70: "#684e00",
+    80: "#483700",
+    90: "#302400",
+    100: "#1c1500"
+  },
+  gray: {
+    10: "#f4f4f4",
+    20: "#e0e0e0",
+    30: "#c6c6c6",
+    40: "#a8a8a8",
+    50: "#8d8d8d",
+    60: "#6f6f6f",
+    70: "#525252",
+    80: "#393939",
+    90: "#262626",
+    100: "#161616"
+  }
+};
diff --git a/docs/src/styles/constants/colors/colors.types.ts b/docs/src/styles/constants/colors/colors.types.ts
@@ -0,0 +1,21 @@
+export interface IColorWeights {
+  readonly 10: string;
+  readonly 20: string;
+  readonly 30: string;
+  readonly 40: string;
+  readonly 50: string;
+  readonly 60: string;
+  readonly 70: string;
+  readonly 80: string;
+  readonly 90: string;
+  readonly 100: string;
+}
+
+export interface IColors {
+  blue: IColorWeights & { readonly 1000: string };
+  orange: IColorWeights & { readonly 1000: string };
+  red: IColorWeights;
+  green: IColorWeights;
+  yellow: IColorWeights;
+  gray: IColorWeights;
+}
diff --git a/docs/src/styles/constants/typography/typography.ts b/docs/src/styles/constants/typography/typography.ts
@@ -0,0 +1,21 @@
+import { rem } from "polished";
+import { IFontSizes } from "./typography.types";
+
+export const rootFontSize = "16px";
+
+export const fontFamily = {
+  primary: '"niveau-grotesk", sans-serif'
+};
+
+export const fontSizes: IFontSizes = {
+  xxs: `${rem(10)}`,
+  xs: `${rem(12)}`,
+  sm: `${rem(14)}`,
+  md: `${rem(16)}`,
+  lg: `${rem(18)}`,
+  xl: `${rem(20)}`,
+  "2xl": `${rem(24)}`,
+  "3xl": `${rem(30)}`,
+  "4xl": `${rem(36)}`,
+  "5xl": `${rem(48)}`
+};
diff --git a/docs/src/styles/constants/typography/typography.types.ts b/docs/src/styles/constants/typography/typography.types.ts
@@ -0,0 +1,16 @@
+export type IFontSizes = {
+  xxs: string;
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  "2xl": string;
+  "3xl": string;
+  "4xl": string;
+  "5xl": string;
+};
+
+export type IFontFamily = {
+  primary: string;
+};
diff --git a/docs/src/styles/index.ts b/docs/src/styles/index.ts
@@ -0,0 +1,2 @@
+export * from "./theme/theme";
+export * from "./theme/theme-config.css";
diff --git a/docs/src/styles/theme/theme-config.css.ts b/docs/src/styles/theme/theme-config.css.ts
@@ -0,0 +1,5 @@
+import { createTheme } from "@vanilla-extract/css";
+import { theme } from "./theme";
+import { ITheme } from "./theme.types";
+
+export const [primaryThemeClassName, themeVars] = createTheme<ITheme>(theme);
diff --git a/docs/src/styles/theme/theme.ts b/docs/src/styles/theme/theme.ts
@@ -0,0 +1,8 @@
+import { colors } from "../constants/colors/colors";
+import { fontFamily, fontSizes } from "../constants/typography/typography";
+import { ITheme } from "./theme.types";
+export const theme: ITheme = {
+  colors,
+  fontFamily,
+  fontSizes
+};
diff --git a/docs/src/styles/theme/theme.types.ts b/docs/src/styles/theme/theme.types.ts
@@ -0,0 +1,12 @@
+import { IColors } from "../constants/colors/colors.types";
+import {
+  IFontFamily,
+  IFontSizes
+} from "../constants/typography/typography.types";
+
+export interface ITheme {
+  [key: string]: string | any;
+  colors: IColors;
+  fontFamily: IFontFamily;
+  fontSizes: IFontSizes;
+}
diff --git a/docs/src/styles/typography/typography.css b/docs/src/styles/typography/typography.css
@@ -0,0 +1,4 @@
+@import url(https://use.typekit.net/xwa0rlm.css);
+:root {
+  --ifm-font-family-base: "niveau-grotesk", sans-serif;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./theme/theme";
		export * from "./theme/theme-config.css";