Adding partial night mode

cfboski · Oct 13, 2020 · 6bf209e · 6bf209e
1 parent 1629f71
commit 6bf209e
Show file tree

Hide file tree

Showing 18 changed files with 135 additions and 191 deletions.
diff --git a/assets/global.css b/assets/global.css
@@ -1,155 +1,17 @@
 @import './font.css';
 
 :root {
-  /* Spacing variables */
-  --geist-space: 4px;
-  --geist-space-2x: 8px;
-  --geist-space-4x: 16px;
-  --geist-space-8x: 32px;
-  --geist-space-16x: 64px;
-  --geist-space-24x: 96px;
-  --geist-space-32x: 128px;
-  --geist-space-48x: 192px;
-  --geist-space-64x: 256px;
-
-  --geist-space-small: 32px;
-  --geist-space-medium: 40px;
-  --geist-space-large: 48px;
-
-  --geist-space-gap: 24px;
-  --geist-space-gap-half: 12px;
-  --geist-space-gap-quarter: var(--geist-space-2x);
-
-  --geist-gap: var(--geist-space-gap);
-  --geist-gap-half: var(--geist-space-gap-half);
-  --geist-gap-quarter: var(--geist-space-gap-quarter);
-  --geist-gap-double: var(--geist-space-large);
-
-  /* Negative values */
-  --geist-space-negative: -4px;
-  --geist-space-2x-negative: -8px;
-  --geist-space-4x-negative: -16px;
-  --geist-space-8x-negative: -32px;
-  --geist-space-16x-negative: -64px;
-  --geist-space-24x-negative: -96px;
-  --geist-space-32x-negative: -128px;
-  --geist-space-48x-negative: -192px;
-  --geist-space-64x-negative: -256px;
-
-  --geist-space-small-negative: -32px;
-  --geist-space-medium-negative: -40px;
-  --geist-space-large-negative: -48px;
-
-  --geist-space-gap-negative: -24px;
-  --geist-space-gap-half-negative: -12px;
-  --geist-space-gap-quarter-negative: var(--geist-space-2x-negative);
-
-  --geist-gap-negative: var(--geist-space-gap-negative);
-  --geist-gap-half-negative: var(--geist-space-gap-half-negative);
-  --geist-gap-quarter-negative: var(--geist-space-gap-quarter-negative);
-  --geist-gap-double-negative: var(--geist-space-large-negative);
-
-  /* Page values */
-  --geist-page-margin: var(--geist-space-gap);
-  --geist-page-width: 1000px;
-  --geist-page-width-with-margin: 1048px; /* 1000px + (2 * page margin) */
-
-  /* Appearance */
-  --geist-radius: 5px;
-  --geist-marketing-radius: 8px;
-
-  /* Fonts */
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  --font-mono: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-
-  /* Header */
-  --header-height: 64px;
-  --header-border-bottom: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-  --header-background: rgba(255, 255, 255, 0.8);
-
-  /* Form sizing */
-  --geist-form-large-font: 1rem;
-  --geist-form-large-line-height: 1.5rem;
-  --geist-form-large-height: var(--geist-space-large);
-
-  --geist-form-small-font: 0.875rem;
-  --geist-form-small-line-height: 0.875rem;
-  --geist-form-small-height: var(--geist-space-small);
-
-  --geist-form-font: 0.875rem;
-  --geist-form-line-height: 1.25rem;
-  --geist-form-height: var(--geist-space-medium);
-
-  --geist-success-lighter: #d3e5ff;
-  --geist-success-light: #3291ff;
-  --geist-success: #0070f3;
-  --geist-success-dark: #0761d1;
-
-  --geist-error-lighter: #f7d4d6;
-  --geist-error-light: #ff1a1a;
-  --geist-error: #ee0000;
-  --geist-error-dark: #c50000;
-
-  --geist-warning-lighter: #ffefcf;
-  --geist-warning-light: #f7b955;
-  --geist-warning: #f5a623;
-  --geist-warning-dark: #ab570a;
-
-  --geist-violet-lighter: #e3d7fc;
-  --geist-violet-light: #8a63d2;
-  --geist-violet: #7928ca;
-  --geist-violet-dark: #4c2889;
-
-  --geist-cyan-lighter: #aaffec;
-  --geist-cyan-light: #79ffe1;
-  --geist-cyan: #50e3c2;
-  --geist-cyan-dark: #29bc9b;
-
-  --geist-highlight-purple: #f81ce5;
-  --geist-highlight-magenta: #eb367f;
-  --geist-highlight-pink: #ff0080;
-
-  --geist-foreground: #000;
-  --geist-background: #fff;
-  --geist-selection: var(--geist-cyan-light);
-  --accents-1: #fafafa;
-  --accents-2: #eaeaea;
-  --accents-3: #999999;
-  --accents-4: #888888;
-  --accents-5: #666666;
-  --accents-6: #444444;
-  --accents-7: #333333;
-  --accents-8: #111111;
-
-  --geist-link-color: var(--geist-success);
-  --geist-marketing-gray: #fafbfc;
-  --geist-code: var(--geist-highlight-purple);
-
-  /* Secondary (Gray) */
-  --geist-secondary-lighter: var(--accents-2);
-  --geist-secondary-light: var(--accents-3);
-  --geist-secondary: var(--accents-5);
-  --geist-secondary-dark: var(--accents-7);
-
-  /* Shadows and other values */
-
-  --dropdown-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.02);
-  --dropdown-triangle-stroke: #fff;
-
-  --scroller-start: rgba(255, 255, 255, 1);
-  --scroller-end: rgba(255, 255, 255, 0);
-
-  --shadow-smallest: 0px 4px 8px rgba(0, 0, 0, 0.12);
-  --shadow-small: 0 5px 10px rgba(0, 0, 0, 0.12);
-  --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
-  --shadow-large: 0 30px 60px rgba(0, 0, 0, 0.12);
-  --shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.12);
+  --bg-primary: white;
+  --bg-secondary: black;
+  --text-primary: black;
+  --text-secondary: #252f3f;
+}
 
-  --shadow-sticky: 0 12px 10px -10px rgba(0, 0, 0, 0.12);
-  --portal-opacity: 0.25;
+[data-theme='dark'] {
+  --bg-primary: black;
+  --bg-secondary: white;
+  --text-primary: white;
+  --text-secondary: white;
 }
 
 *,
@@ -174,9 +36,8 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--geist-background);
-  color: var(--geist-foreground);
-  scroll-padding-top: var(--header-height);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 body {

diff --git a/components/core/Layout/Layout.module.css b/components/core/Layout/Layout.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply h-full;
+  @apply h-full bg-primary;
 }
 
 .main {

diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css
@@ -1,3 +1,3 @@
 .link {
-  @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-100 cursor-pointer;
+  @apply group text-primary inline-flex items-center text-base leading-6 font-medium hover:text-secondary focus:outline-none focus:text-secondary transition ease-in-out duration-100 cursor-pointer;
 }
diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
@@ -1,16 +1,16 @@
-import cn from 'classnames'
-import { FC } from 'react'
 import s from './Navbar.module.css'
-import { Logo, Container } from '@components/ui'
-import { Searchbar } from '@components/core'
-import { UserNav } from '@components/core'
+import { FC } from 'react'
 import Link from 'next/link'
+import { useTheme } from 'next-themes'
+import { Logo, Container } from '@components/ui'
+import { Searchbar, Toggle, UserNav } from '@components/core'
 interface Props {
   className?: string
 }
 
 const Navbar: FC<Props> = ({ className }) => {
   const rootClassName = className
+  const { theme, setTheme } = useTheme()
   return (
     <div className={rootClassName}>
       <Container>
@@ -38,7 +38,13 @@ const Navbar: FC<Props> = ({ className }) => {
             <Searchbar />
           </div>
 
-          <div className="flex flex-initial md:flex-1 justify-end">
+          <div className="flex flex-initial md:flex-1 justify-end space-x-8">
+            <Toggle
+              checked={theme === 'dark'}
+              onChange={() =>
+                theme === 'dark' ? setTheme('light') : setTheme('dark')
+              }
+            />
             <UserNav />
           </div>
         </div>

diff --git a/components/core/Toggle/Toggle.module.css b/components/core/Toggle/Toggle.module.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx
@@ -0,0 +1,51 @@
+import React, { FC } from 'react'
+import { Switch } from '@headlessui/react'
+import { HiSun, HiMoon } from 'react-icons/hi'
+interface Props {
+  className?: string
+  checked: boolean
+  onChange: any
+}
+
+const Toggle: FC<Props> = ({ className, checked, onChange }) => {
+  return (
+    <Switch checked={checked} onChange={onChange}>
+      <span
+        role="checkbox"
+        aria-checked="false"
+        tabIndex={0}
+        className={`${
+          checked ? 'bg-gray-800' : 'bg-gray-200'
+        } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
+      >
+        <span
+          aria-hidden="true"
+          className={`${
+            checked ? 'translate-x-5' : 'translate-x-0'
+          } translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
+        >
+          <span
+            className={`${
+              checked
+                ? 'opacity-0 ease-out duration-100'
+                : 'opacity-100 ease-in duration-200'
+            } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
+          >
+            <HiSun className="h-3 w-3 text-gray-400" />
+          </span>
+          <span
+            className={`${
+              checked
+                ? 'opacity-100 ease-in duration-200'
+                : 'opacity-0 ease-out duration-100'
+            } opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
+          >
+            <HiMoon className="h-3 w-3 text-yellow-400" />
+          </span>
+        </span>
+      </span>
+    </Switch>
+  )
+}
+
+export default Toggle
diff --git a/components/core/Toggle/index.ts b/components/core/Toggle/index.ts
@@ -0,0 +1 @@
+export { default } from './Toggle'
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
@@ -6,10 +6,10 @@
 }
 
 .item {
-  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100;
+  @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-primary;
 
   &:hover {
-    @apply text-gray-500;
+    @apply text-secondary;
   }
 
   &:last-child {

diff --git a/components/core/index.ts b/components/core/index.ts
@@ -5,3 +5,4 @@ export { default as Layout } from './Layout'
 export { default as Navbar } from './Navbar'
 export { default as Searchbar } from './Searchbar'
 export { default as UserNav } from './UserNav'
+export { default as Toggle } from './Toggle'
diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css
@@ -62,11 +62,11 @@
 }
 
 .squareBg {
-  @apply transform absolute inset-0 z-0 bg-black;
+  @apply transform absolute inset-0 z-0 bg-secondary;
 }
 
 .productTitle {
-  @apply p-3 h-14 bg-white text-black font-bold text-xl truncate leading-8 inline-flex;
+  @apply p-3 h-14 bg-primary text-primary font-bold text-xl truncate leading-8 inline-flex;
   max-width: calc(100% - 50px);
 
   @screen lg {
@@ -75,9 +75,9 @@
 }
 
 .productPrice {
-  @apply px-3 py-1 pb-2 bg-white text-black font-semibold inline-block text-sm leading-6;
+  @apply px-3 py-1 pb-2 bg-primary text-primary font-semibold inline-block text-sm leading-6;
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-xs leading-6 cursor-pointer;
+  @apply w-10 h-10 flex items-center justify-center bg-primary text-primary font-semibold inline-block text-xs leading-6 cursor-pointer;
 }
diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply h-12 w-12 bg-white text-black rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none;
+  @apply h-12 w-12 bg-white text-primary rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out p-0 shadow-none;
 }
 
 .active.size {

diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
@@ -73,7 +73,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveTo="translate-x-full"
                 >
                   <div className="h-full w-screen max-w-md">
-                    <div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
+                    <div className="h-full flex flex-col text-primary bg-primary shadow-xl overflow-y-auto">
                       {children}
                     </div>
                   </div>

diff --git a/package.json b/package.json
@@ -27,10 +27,12 @@
     "lodash": "^4.17.20",
     "lodash.debounce": "^4.0.8",
     "next": "^9.5.4",
+    "next-themes": "^0.0.4",
     "postcss-nesting": "^7.0.1",
     "react": "^16.13.1",
     "react-aria": "^3.0.0",
     "react-dom": "^16.13.1",
+    "react-icons": "^3.11.0",
     "react-merge-refs": "^1.1.0",
     "react-ticker": "^1.2.2",
     "swr": "^0.3.3"

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import type { AppProps } from 'next/app'
 import { SSRProvider, OverlayProvider } from 'react-aria'
+import { ThemeProvider } from 'next-themes'
 import '@assets/global.css'
 import '@assets/tailwind.css'
 import '@assets/utils.css'
@@ -11,12 +12,14 @@ export default function MyApp({ Component, pageProps }: AppProps) {
   const Layout = (Component as any).Layout || Noop
 
   return (
-    <SSRProvider>
-      <OverlayProvider>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </OverlayProvider>
-    </SSRProvider>
+    <ThemeProvider>
+      <SSRProvider>
+        <OverlayProvider>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </OverlayProvider>
+      </SSRProvider>
+    </ThemeProvider>
   )
 }