vanilla extract setup & basic layout components

visoftsolutions · Oct 14, 2023 · b6cc529 · b6cc529
1 parent 07c384a
commit b6cc529
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 10 deletions.
diff --git a/src/components/header/header.css.ts b/src/components/header/header.css.ts
@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+export const header = style({
+
+})
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -0,0 +1,6 @@
+import { component$ } from "@builder.io/qwik";
+import { header } from "./header.css";
+
+export const Header = component$(() => {
+  return <div class={header}></div>;
+});
diff --git a/src/components/sidenav/sidenav.css.ts b/src/components/sidenav/sidenav.css.ts
@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+export const sidenav = style({
+
+})
diff --git a/src/components/sidenav/sidenav.tsx b/src/components/sidenav/sidenav.tsx
@@ -0,0 +1,6 @@
+import { component$ } from "@builder.io/qwik";
+import { sidenav } from "./sidenav.css";
+
+export const SideNav = component$(() => {
+  return <div class={sidenav}></div>;
+});
diff --git a/src/root.tsx b/src/root.tsx
@@ -7,6 +7,7 @@ import {
 import { RouterHead } from "./components/router-head/router-head";
 
 import "./global.css";
+import { darkTheme, lightTheme } from "./theme.css";
 
 export default component$(() => {
   /**
@@ -24,7 +25,7 @@ export default component$(() => {
         <RouterHead />
         <ServiceWorkerRegister />
       </head>
-      <body lang="en">
+      <body lang="en" class={darkTheme}>
         <RouterOutlet />
       </body>
     </QwikCityProvider>

diff --git a/src/routes/header.css.ts b/src/routes/header.css.ts
@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+export const header = style({
+    backgroundColor: vars.color.background
+})
diff --git a/src/routes/layout.css.ts b/src/routes/layout.css.ts
@@ -0,0 +1,18 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+export const layoutRow = style({
+    width: "100vw",
+    height: "100vh",
+    display: "grid",
+    gridTemplateRows: "36px 1fr",
+    backgroundColor: vars.color.backgroundHighlight,
+    gap: "1px",
+})
+
+export const layoutColumn = style({
+    display: "grid",
+    gridTemplateColumns: "36px 1fr",
+    gap: "1px",
+    backgroundColor: vars.color.backgroundHighlight,
+})
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
@@ -2,7 +2,12 @@ import { component$, Slot, useStyles$ } from "@builder.io/qwik";
 import { routeLoader$ } from "@builder.io/qwik-city";
 import type { RequestHandler } from "@builder.io/qwik-city";
 
-import styles from "./styles.css?inline";
+import { layoutColumn, layoutRow } from "./layout.css";
+import { SideNav } from "~/components/sidenav/sidenav";
+import { Header } from "~/components/header/header";
+import { header } from "./header.css";
+import { nav } from "./nav.css";
+import { main } from "./main.css";
 
 export const onGet: RequestHandler = async ({ cacheControl }) => {
   // Control caching for this request for best performance and to reduce hosting costs:
@@ -22,14 +27,16 @@ export const useServerTimeLoader = routeLoader$(() => {
 });
 
 export default component$(() => {
-  useStyles$(styles);
+  // useStyles$(styles);
   return (
-    <>
-      {/* <Header /> */}
-      <main>
-        <Slot />
-      </main>
-      {/* <Footer /> */}
-    </>
+    <div class={layoutRow}>
+      <header class={header}><Header></Header></header>
+      <div class={layoutColumn}>
+        <nav class={nav}><SideNav></SideNav></nav>
+        <main class={main}>
+          <Slot />
+        </main>
+      </div>
+    </div>
   );
 });
diff --git a/src/routes/main.css.ts b/src/routes/main.css.ts
@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+export const main = style({
+    backgroundColor: vars.color.background
+})
diff --git a/src/routes/nav.css.ts b/src/routes/nav.css.ts
@@ -0,0 +1,6 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "~/theme.css";
+
+export const nav = style({
+    backgroundColor: vars.color.background
+})
diff --git a/src/routes/styles.css b/src/routes/styles.css
diff --git a/src/theme.css.ts b/src/theme.css.ts
@@ -0,0 +1,27 @@
+import { createTheme } from "@vanilla-extract/css";
+
+export const [darkTheme, vars] = createTheme({
+  color: {
+    background: '#2b2f3a', // Background (Dark Grayish Bluish)
+    backgroundHighlight: '#3c3f4a', // Background Highlighted (Dark Grayish Bluish)
+    red: '#d43f4a', // Muted Red
+    green: '#3d8e5d', // Muted Green
+    blue: '#2f6d99', // Muted Blue
+    text: '#e0e0e0', // Text (For light text against dark backgrounds)
+    subtext: '#a0a0a0', // Subtext (For lesser important text)
+    divider: '#42465b', // Border/Divider Color
+  },
+});
+
+export const lightTheme = createTheme(vars, {
+  color: {
+    background: '#e6eaf0', // Background (Light Grayish Bluish)
+    backgroundHighlight: '#d5d8e0', // Background Highlighted (Dark Grayish Bluish)
+    red: '#e05a67', // Muted Red
+    green: '#59a883', // Muted Green
+    blue: '#508db3', // Muted Blue
+    text: '#2c2f3b', // Text (For dark text against light backgrounds)
+    subtext: '#6c6f7f', // Subtext (For lesser important text)
+    divider: '#b2b5c3', // Border/Divider Color
+  },
+});