feat: update themes

idealjs · Jul 14, 2024 · 43678cb · 43678cb
1 parent fd14ab3
commit 43678cb
Show file tree

Hide file tree

Showing 27 changed files with 1,219 additions and 651 deletions.
diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -1,4 +1,4 @@
-import { light } from "@idealjs/camphora-styled";
+import { defaultTheme } from "@idealjs/camphora-styled";
 import type { Metadata } from "next";
 
 import LayoutDrawer from "@/features/LayoutDrawer";
@@ -15,7 +15,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body style={{ margin: 0, height: "100vh" }} className={light}>
+      <body style={{ margin: 0, height: "100vh" }} className={defaultTheme}>
         <LayoutDrawer>{children}</LayoutDrawer>
       </body>
     </html>

diff --git a/apps/website/components/Drawer/DrawerSide.tsx b/apps/website/components/Drawer/DrawerSide.tsx
@@ -1,8 +1,4 @@
-import {
-  drawerMenu,
-  drawerOverlay,
-  drawerSide,
-} from "@idealjs/camphora-styled";
+import { drawerMenu, drawerSide } from "@idealjs/camphora-styled";
 import clsx from "clsx";
 import { PropsWithChildren, ReactNode } from "react";
 
@@ -12,12 +8,11 @@ interface IProps {
 }
 
 export const DrawerSide = (props: PropsWithChildren<IProps>) => {
-  const { children, drawerId, overlay } = props;
+  const { children } = props;
 
   return (
-    <div className={drawerSide}>
-      {overlay ?? <label htmlFor={drawerId} className={drawerOverlay} />}
-      <aside className={clsx(drawerMenu)}>{children}</aside>
-    </div>
+    <aside className={drawerSide}>
+      <ul className={clsx(drawerMenu)}>{children}</ul>
+    </aside>
   );
 };
diff --git a/apps/website/features/LayoutDrawer/index.tsx b/apps/website/features/LayoutDrawer/index.tsx
@@ -1,5 +1,4 @@
-import { menu, menuItem, paper, vars } from "@idealjs/camphora-styled";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { menuItem, overlay } from "@idealjs/camphora-styled";
 import clsx from "clsx";
 import Link from "next/link";
 import React, { PropsWithChildren } from "react";
@@ -21,30 +20,113 @@ const LayoutDrawer = (props: PropsWithChildren<IProps>) => {
         <Navbar drawerId="main-drawer" />
         {children}
       </DrawerContent>
+      <label htmlFor={"main-drawer"} className={overlay} />
       <DrawerSide drawerId="main-drawer">
-        <div className={paper} style={{ height: "100%" }}>
-          <ul
-            className={clsx(menu)}
-            style={assignInlineVars({
-              [vars.shadow.menu]: "0",
-            })}
-          >
-            <li>
-              <SearchInput />
-            </li>
-            <li style={{ height: "8px" }}></li>
-            <li>
-              <Link href={"/tutorials/quickstart"} className={clsx(menuItem)}>
-                quick start
-              </Link>
-            </li>
-            <li>
-              <Link href={"/docs/components"} className={clsx(menuItem)}>
-                components
-              </Link>
-            </li>
-          </ul>
+        <li>
+          <SearchInput />
+        </li>
+        <li style={{ height: "8px" }}></li>
+        <li>
+          <Link href={"/tutorials/quickstart"} className={clsx(menuItem)}>
+            quick start
+          </Link>
+        </li>
+        <li>
+          <Link href={"/docs/components"} className={clsx(menuItem)}>
+            components
+          </Link>
+        </li>
+{/* 
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
         </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div>
+        <div>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+          repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam,
+          hic voluptate odio. Ut, laudantium quod optio soluta hic velit?
+        </div> */}
       </DrawerSide>
     </Drawer>
   );

diff --git a/apps/website/features/Navbar/LanguageDropdown.spec.tsx b/apps/website/features/Navbar/LanguageDropdown.spec.tsx
@@ -1,4 +1,4 @@
-import { light } from "@idealjs/camphora-styled";
+import { defaultTheme } from "@idealjs/camphora-styled";
 import { expect as playwrightExpect } from "@playwright/test";
 import { render } from "@testing-library/react";
 import { page } from "@vitest/browser/context";

diff --git a/apps/website/features/Navbar/LanguageDropdown.tsx b/apps/website/features/Navbar/LanguageDropdown.tsx
@@ -25,7 +25,10 @@ const LanguageDropdown = () => {
       >
         language
       </button>
-      <ul tabIndex={0} className={clsx(dropdownContent, menu)}>
+      <ul
+        tabIndex={0}
+        className={clsx(dropdownContent, menu, cardXs, cardShadow)}
+      >
         <li>
           <div className={clsx(menuItem)}>english</div>
         </li>

diff --git a/apps/website/features/Navbar/ThemeDropdown.tsx b/apps/website/features/Navbar/ThemeDropdown.tsx
@@ -1,8 +1,6 @@
 import {
   button,
   buttonGhost,
-  card,
-  cardSeondary,
   cardShadow,
   cardXs,
   dropdown,
@@ -25,7 +23,10 @@ const ThemeDropdown = () => {
       >
         theme
       </button>
-      <ul tabIndex={0} className={clsx(dropdownContent, menu)}>
+      <ul
+        tabIndex={0}
+        className={clsx(dropdownContent, menu, cardXs, cardShadow)}
+      >
         <li>
           <div className={clsx(menuItem)}>dark</div>
         </li>

diff --git a/apps/website/features/Navbar/VersionDropdown.tsx b/apps/website/features/Navbar/VersionDropdown.tsx
@@ -1,6 +1,8 @@
 import {
   button,
   buttonGhost,
+  cardShadow,
+  cardXs,
   dropdown,
   dropdownContent,
   menu,
@@ -25,7 +27,10 @@ const VersionDropdown = () => {
       >
         {version}
       </div>
-      <ul tabIndex={0} className={clsx(dropdownContent, menu)}>
+      <ul
+        tabIndex={0}
+        className={clsx(dropdownContent, menu, cardXs, cardShadow)}
+      >
         <li>
           <Link href={"/docs/changelog"} className={clsx(menuItem)}>
             <svg

diff --git a/apps/website/features/Navbar/style.css.ts b/apps/website/features/Navbar/style.css.ts
@@ -1,10 +1,10 @@
-import { dropdown, vars } from "@idealjs/camphora-styled";
+import { dropdown, themeVars } from "@idealjs/camphora-styled";
 import { style } from "@vanilla-extract/css";
 
 export const selectedButtonStyle = style({
   selectors: {
     [`${dropdown}:focus-within &`]: {
-      backgroundColor: `color-mix(in srgb, ${vars.colors.base.content} ${vars.opacity.btn}, #fff0)`,
+      backgroundColor: `color-mix(in srgb, ${themeVars.colors.base.content} ${themeVars.opacity.btn}, #fff0)`,
     },
   },
 });
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -13,28 +13,28 @@
     "@idealjs/camphora-styled": "workspace:^",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.4",
+    "@next/mdx": "^14.2.5",
     "@vanilla-extract/dynamic": "^2.1.1",
     "clsx": "^2.1.1",
     "nanoid": "^5.0.7",
-    "next": "14.2.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.0.0-rc.0",
+    "react": "19.0.0-rc-df5f2736-20240712",
+    "react-dom": "19.0.0-rc-df5f2736-20240712"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.0",
+    "@playwright/test": "^1.45.1",
     "@testing-library/react": "^16.0.0",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/next-plugin": "^2.4.3",
-    "@vanilla-extract/vite-plugin": "^4.0.12",
+    "@vanilla-extract/vite-plugin": "^4.0.13",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/browser": "^2.0.0-beta.12",
-    "typescript": "^5.5.2",
+    "@vitest/browser": "^2.0.2",
+    "typescript": "^5.5.3",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.0.0-beta.12"
+    "vitest": "^2.0.2"
   }
 }
diff --git a/package.json b/package.json
@@ -10,14 +10,14 @@
     "lint": "yarn workspaces foreach -A run lint"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.4",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
-    "lerna": "^8.1.5",
+    "eslint-config-next": "^14.2.5",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "lerna": "^8.1.6",
     "lerna-update-wizard": "^1.1.2",
-    "vercel": "^34.2.8"
+    "vercel": "^34.3.1"
   },
   "packageManager": "[email protected]"
 }
diff --git a/packages/camphora-styled/README.md b/packages/camphora-styled/README.md
@@ -0,0 +1,12 @@
+组件关系
+
+card -> menu -> 
+
+```mermaid
+---
+title: Animal example
+---
+classDiagram
+  card <|-- menu
+  menu <|-- drawerMenu
+```
diff --git a/packages/camphora-styled/package.json b/packages/camphora-styled/package.json
@@ -20,10 +20,10 @@
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/rollup-plugin": "^1.3.7",
     "esbuild": "^0.21.5",
-    "rimraf": "^5.0.7",
-    "rollup": "^4.18.0",
+    "rimraf": "^5.0.9",
+    "rollup": "^4.18.1",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.3"
   }
 }