enhance(style):调整基本PostCSS处理以及基本颜色尺寸定义。

2023-12-22 14:31:54 +08:00 · 2023-12-22 14:31:54 +08:00 · dc1394ce32
commit dc1394ce32
parent f4969fd7d1
12 changed files with 327 additions and 150 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -19,26 +19,33 @@
    "tauri": "tauri"
  },
  "dependencies": {
+    "@solidjs/router": "^0.10.5",
+    "@tauri-apps/api": "^1.5.2",
    "clsx": "^2.0.0",
    "dayjs": "^1.11.10",
    "events": "^3.3.0",
    "ramda": "^0.29.1",
-    "solid-js": "^1.7.8",
-    "@tauri-apps/api": "^1.5.2"
+    "sanitize.css": "^13.0.0",
+    "solid-js": "^1.7.8"
  },
  "devDependencies": {
+    "@tauri-apps/cli": "^1.5.8",
    "@types/events": "^3.0.1",
    "@types/ramda": "^0.29.6",
    "@typescript-eslint/parser": "^6.13.0",
+    "cssnano": "^6.0.2",
    "eslint": "^8.45.0",
    "lost": "^9.0.2",
    "postcss": "^8.4.31",
+    "postcss-advanced-variables": "^3.0.1",
+    "postcss-color-mod-function": "^3.0.3",
+    "postcss-css-variables": "^0.19.0",
+    "postcss-import": "^15.1.0",
    "postcss-preset-env": "^9.2.0",
-    "postcss-preset-mantine": "^1.8.0",
-    "postcss-simple-vars": "^7.0.1",
+    "postcss-scss": "^4.0.9",
    "postcss-utilities": "^0.8.4",
+    "precss": "^4.0.0",
    "vite": "^5.0.0",
-    "vite-plugin-solid": "^2.8.0",
-    "@tauri-apps/cli": "^1.5.8"
+    "vite-plugin-solid": "^2.8.0"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,20 +1,16 @@
 // eslint-disable-next-line no-undef
 export default {
+  syntax: "postcss-scss",
  plugins: {
-    "postcss-preset-mantine": {},
-    "postcss-simple-vars": {
-      variables: {
-        "mantine-breakpoint-xs": "36em",
-        "mantine-breakpoint-sm": "48em",
-        "mantine-breakpoint-md": "62em",
-        "mantine-breakpoint-lg": "75em",
-        "mantine-breakpoint-xl": "88em",
-      },
-    },
-    "postcss-utilities": {},
-    lost: {},
+    "postcss-import": {},
    "postcss-preset-env": {
      stage: 2,
    },
+    precss: {},
+    "postcss-css-variables": {},
+    "postcss-color-mod-function": {},
+    "postcss-utilities": {},
+    lost: {},
+    cssnano: {},
  },
 };
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,7 +1,8 @@
-import { createSignal } from "solid-js";
-import logo from "./assets/logo.svg";
 import { invoke } from "@tauri-apps/api/tauri";
+import { createSignal } from "solid-js";
 import "./App.css";
+import logo from "./assets/logo.svg";
+import WindowMoveHandler from "./components/WindowMoveHandler/WindowMoveHandler";

 function App() {
  const [greetMsg, setGreetMsg] = createSignal("");
@ -13,40 +14,43 @@ function App() {
  }

  return (
-    <div class="container">
-      <h1>Welcome to Tauri!</h1>
+    <>
+      <WindowMoveHandler />
+      <div class="container">
+        <h1>Welcome to Tauri!</h1>

-      <div class="row">
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo vite" alt="Vite logo" />
-        </a>
-        <a href="https://tauri.app" target="_blank">
-          <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
-        </a>
-        <a href="https://solidjs.com" target="_blank">
-          <img src={logo} class="logo solid" alt="Solid logo" />
-        </a>
+        <div class="row">
+          <a href="https://vitejs.dev" target="_blank">
+            <img src="/vite.svg" class="logo vite" alt="Vite logo" />
+          </a>
+          <a href="https://tauri.app" target="_blank">
+            <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
+          </a>
+          <a href="https://solidjs.com" target="_blank">
+            <img src={logo} class="logo solid" alt="Solid logo" />
+          </a>
+        </div>
+
+        <p>Click on the Tauri, Vite, and Solid logos to learn more.</p>
+
+        <form
+          class="row"
+          onSubmit={(e) => {
+            e.preventDefault();
+            greet();
+          }}
+        >
+          <input
+            id="greet-input"
+            onChange={(e) => setName(e.currentTarget.value)}
+            placeholder="Enter a name..."
+          />
+          <button type="submit">Greet</button>
+        </form>
+
+        <p>{greetMsg()}</p>
      </div>
-
-      <p>Click on the Tauri, Vite, and Solid logos to learn more.</p>
-
-      <form
-        class="row"
-        onSubmit={(e) => {
-          e.preventDefault();
-          greet();
-        }}
-      >
-        <input
-          id="greet-input"
-          onChange={(e) => setName(e.currentTarget.value)}
-          placeholder="Enter a name..."
-        />
-        <button type="submit">Greet</button>
-      </form>
-
-      <p>{greetMsg()}</p>
-    </div>
+    </>
  );
 }

--- a/src/BootLayout.jsx
+++ b/src/BootLayout.jsx
@ -0,0 +1,10 @@
+import WindowMoveHandler from "./components/WindowMoveHandler/WindowMoveHandler";
+
+export default function BootLayout(props) {
+  return (
+    <>
+      <WindowMoveHandler />
+      {props.children}
+    </>
+  );
+}
--- a/src/components/WindowMoveHandler/WindowMoveHandler.jsx
+++ b/src/components/WindowMoveHandler/WindowMoveHandler.jsx
@ -0,0 +1,8 @@
+import cx from "clsx";
+import classes from "./WindowMoveHandler.module.css";
+
+export default function WindowMoveHandler() {
+  return (
+    <div data-tauri-drag-region class={cx(classes["window-drag-region"])}></div>
+  );
+}
--- a/src/components/WindowMoveHandler/WindowMoveHandler.module.css
+++ b/src/components/WindowMoveHandler/WindowMoveHandler.module.css
@ -0,0 +1,8 @@
+.window-drag-region {
+  @util size(100vw, 64px);
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
--- a/src/index.jsx
+++ b/src/index.jsx
@ -1,7 +1,11 @@
 /* @refresh reload */
 import { render } from "solid-js/web";

+import { Router } from "@solidjs/router";
+import BootLayout from "./BootLayout";
 import "./styles.css";
-import App from "./App";

-render(() => <App />, document.getElementById("root"));
+render(
+  () => <Router root={BootLayout}></Router>,
+  document.getElementById("root")
+);
--- a/src/mixins.css
+++ b/src/mixins.css
@ -0,0 +1,5 @@
+@mixin dark-mode {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
--- a/src/styles.css
+++ b/src/styles.css
@ -1,11 +1,26 @@
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+@import "sanitize.css";
+@import "./variables.css";
+@import "./mixins.css";

-  color: #0f0f0f;
-  background-color: #f6f6f6;
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+
+  --color-primary: var(--palette-bright-blue-6);
+  --color-danger: var(--palette-tomato-6);
+
+  color: var(--color-light-fg);
+  background-color: var(--color-light-bg);
+
+  @include dark-mode {
+    color: var(--color-dark-fg);
+    background-color: var(--color-dark-bg);
+  }
+
+  @util size(100vw, 100vh);
+  overflow: hidden;
+  user-select: none;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
@ -14,96 +29,16 @@
  -webkit-text-size-adjust: 100%;
 }

-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
+body,
+#root {
+  @util size(100vw, 100vh);
+  overflow: hidden;
+  user-select: none;
 }

-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
-
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-}
-
-.row {
-  display: flex;
-  justify-content: center;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: #396cd8;
-}
-button:active {
-  border-color: #396cd8;
-  background-color: #e8e8e8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-#greet-input {
-  margin-right: 5px;
-}
-
-@media (prefers-color-scheme: dark) {
+/* @media (prefers-color-scheme: dark) {
  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
+    color: var(--color-dark-fg);
+    background-color: var(--color-dark-bg);
  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}
+} */
--- a/src/variables.css
+++ b/src/variables.css
@ -0,0 +1,194 @@
+:root {
+  --color-light-fg: rgba(0, 0, 0, 0.87);
+  --color-light-bg: rgba(219, 219, 219, 0.05);
+  --color-dark-fg: rgba(255, 255, 255, 0.87);
+  --color-dark-bg: rgba(36, 36, 36, 0.05);
+  --palette-gray: #848484;
+  --palette-bright-blue: #0063ff;
+  --palette-blue: #1f32c4;
+  --palette-yellow: #d9d02f;
+  --palette-bright-green: #6bd731;
+  --palette-green: #2bdd66;
+  --palette-tomato: #f06418;
+  --palette-bright-red: #f0185c;
+  --palette-red: #f21616;
+  --palette-bright-orange: #ffa903;
+  --palette-orange: #fc8a08;
+  --palette-violet: #7b2eda;
+  --palette-pink: #f018e8;
+  --palette-blue-gray: #63687c;
+  --palette-indigo: #4c5897;
+
+  --palette-gray-0: color-mod(var(--palette-gray) tint(60%));
+  --palette-gray-1: color-mod(var(--palette-gray) tint(50%));
+  --palette-gray-2: color-mod(var(--palette-gray) tint(40%));
+  --palette-gray-3: color-mod(var(--palette-gray) tint(30%));
+  --palette-gray-4: color-mod(var(--palette-gray) tint(20%));
+  --palette-gray-5: color-mod(var(--palette-gray) tint(10%));
+  --palette-gray-6: var(--palette-gray);
+  --palette-gray-7: color-mod(var(--palette-gray) shade(10%));
+  --palette-gray-8: color-mod(var(--palette-gray) shade(20%));
+  --palette-gray-9: color-mod(var(--palette-gray) shade(30%));
+
+  --palette-bright-blue-0: color-mod(var(--palette-bright-blue) tint(60%));
+  --palette-bright-blue-1: color-mod(var(--palette-bright-blue) tint(50%));
+  --palette-bright-blue-2: color-mod(var(--palette-bright-blue) tint(40%));
+  --palette-bright-blue-3: color-mod(var(--palette-bright-blue) tint(30%));
+  --palette-bright-blue-4: color-mod(var(--palette-bright-blue) tint(20%));
+  --palette-bright-blue-5: color-mod(var(--palette-bright-blue) tint(10%));
+  --palette-bright-blue-6: var(--palette-bright-blue);
+  --palette-bright-blue-7: color-mod(var(--palette-bright-blue) shade(10%));
+  --palette-bright-blue-8: color-mod(var(--palette-bright-blue) shade(20%));
+  --palette-bright-blue-9: color-mod(var(--palette-bright-blue) shade(30%));
+
+  --palette-blue-0: color-mod(var(--palette-blue) tint(60%));
+  --palette-blue-1: color-mod(var(--palette-blue) tint(50%));
+  --palette-blue-2: color-mod(var(--palette-blue) tint(40%));
+  --palette-blue-3: color-mod(var(--palette-blue) tint(30%));
+  --palette-blue-4: color-mod(var(--palette-blue) tint(20%));
+  --palette-blue-5: color-mod(var(--palette-blue) tint(10%));
+  --palette-blue-6: var(--palette-blue);
+  --palette-blue-7: color-mod(var(--palette-blue) shade(10%));
+  --palette-blue-8: color-mod(var(--palette-blue) shade(20%));
+  --palette-blue-9: color-mod(var(--palette-blue) shade(30%));
+
+  --palette-yellow-0: color-mod(var(--palette-yellow) tint(60%));
+  --palette-yellow-1: color-mod(var(--palette-yellow) tint(50%));
+  --palette-yellow-2: color-mod(var(--palette-yellow) tint(40%));
+  --palette-yellow-3: color-mod(var(--palette-yellow) tint(30%));
+  --palette-yellow-4: color-mod(var(--palette-yellow) tint(20%));
+  --palette-yellow-5: color-mod(var(--palette-yellow) tint(10%));
+  --palette-yellow-6: var(--palette-yellow);
+  --palette-yellow-7: color-mod(var(--palette-yellow) shade(10%));
+  --palette-yellow-8: color-mod(var(--palette-yellow) shade(20%));
+  --palette-yellow-9: color-mod(var(--palette-yellow) shade(30%));
+
+  --palette-bright-green-0: color-mod(var(--palette-bright-green) tint(60%));
+  --palette-bright-green-1: color-mod(var(--palette-bright-green) tint(50%));
+  --palette-bright-green-2: color-mod(var(--palette-bright-green) tint(40%));
+  --palette-bright-green-3: color-mod(var(--palette-bright-green) tint(30%));
+  --palette-bright-green-4: color-mod(var(--palette-bright-green) tint(20%));
+  --palette-bright-green-5: color-mod(var(--palette-bright-green) tint(10%));
+  --palette-bright-green-6: var(--palette-bright-green);
+  --palette-bright-green-7: color-mod(var(--palette-bright-green) shade(10%));
+  --palette-bright-green-8: color-mod(var(--palette-bright-green) shade(20%));
+  --palette-bright-green-9: color-mod(var(--palette-bright-green) shade(30%));
+
+  --palette-green-0: color-mod(var(--palette-green) tint(60%));
+  --palette-green-1: color-mod(var(--palette-green) tint(50%));
+  --palette-green-2: color-mod(var(--palette-green) tint(40%));
+  --palette-green-3: color-mod(var(--palette-green) tint(30%));
+  --palette-green-4: color-mod(var(--palette-green) tint(20%));
+  --palette-green-5: color-mod(var(--palette-green) tint(10%));
+  --palette-green-6: var(--palette-green);
+  --palette-green-7: color-mod(var(--palette-green) shade(10%));
+  --palette-green-8: color-mod(var(--palette-green) shade(20%));
+  --palette-green-9: color-mod(var(--palette-green) shade(30%));
+
+  --palette-tomato-0: color-mod(var(--palette-tomato) tint(60%));
+  --palette-tomato-1: color-mod(var(--palette-tomato) tint(50%));
+  --palette-tomato-2: color-mod(var(--palette-tomato) tint(40%));
+  --palette-tomato-3: color-mod(var(--palette-tomato) tint(30%));
+  --palette-tomato-4: color-mod(var(--palette-tomato) tint(20%));
+  --palette-tomato-5: color-mod(var(--palette-tomato) tint(10%));
+  --palette-tomato-6: var(--palette-tomato);
+  --palette-tomato-7: color-mod(var(--palette-tomato) shade(10%));
+  --palette-tomato-8: color-mod(var(--palette-tomato) shade(20%));
+  --palette-tomato-9: color-mod(var(--palette-tomato) shade(30%));
+
+  --palette-bright-red-0: color-mod(var(--palette-bright-red) tint(60%));
+  --palette-bright-red-1: color-mod(var(--palette-bright-red) tint(50%));
+  --palette-bright-red-2: color-mod(var(--palette-bright-red) tint(40%));
+  --palette-bright-red-3: color-mod(var(--palette-bright-red) tint(30%));
+  --palette-bright-red-4: color-mod(var(--palette-bright-red) tint(20%));
+  --palette-bright-red-5: color-mod(var(--palette-bright-red) tint(10%));
+  --palette-bright-red-6: var(--palette-bright-red);
+  --palette-bright-red-7: color-mod(var(--palette-bright-red) shade(10%));
+  --palette-bright-red-8: color-mod(var(--palette-bright-red) shade(20%));
+  --palette-bright-red-9: color-mod(var(--palette-bright-red) shade(30%));
+
+  --palette-red-0: color-mod(var(--palette-red) tint(60%));
+  --palette-red-1: color-mod(var(--palette-red) tint(50%));
+  --palette-red-2: color-mod(var(--palette-red) tint(40%));
+  --palette-red-3: color-mod(var(--palette-red) tint(30%));
+  --palette-red-4: color-mod(var(--palette-red) tint(20%));
+  --palette-red-5: color-mod(var(--palette-red) tint(10%));
+  --palette-red-6: var(--palette-red);
+  --palette-red-7: color-mod(var(--palette-red) shade(10%));
+  --palette-red-8: color-mod(var(--palette-red) shade(20%));
+  --palette-red-9: color-mod(var(--palette-red) shade(30%));
+
+  --palette-bright-orange-0: color-mod(var(--palette-bright-orange) tint(60%));
+  --palette-bright-orange-1: color-mod(var(--palette-bright-orange) tint(50%));
+  --palette-bright-orange-2: color-mod(var(--palette-bright-orange) tint(40%));
+  --palette-bright-orange-3: color-mod(var(--palette-bright-orange) tint(30%));
+  --palette-bright-orange-4: color-mod(var(--palette-bright-orange) tint(20%));
+  --palette-bright-orange-5: color-mod(var(--palette-bright-orange) tint(10%));
+  --palette-bright-orange-6: var(--palette-bright-orange);
+  --palette-bright-orange-7: color-mod(var(--palette-bright-orange) shade(10%));
+  --palette-bright-orange-8: color-mod(var(--palette-bright-orange) shade(20%));
+  --palette-bright-orange-9: color-mod(var(--palette-bright-orange) shade(30%));
+
+  --palette-orange-0: color-mod(var(--palette-orange) tint(60%));
+  --palette-orange-1: color-mod(var(--palette-orange) tint(50%));
+  --palette-orange-2: color-mod(var(--palette-orange) tint(40%));
+  --palette-orange-3: color-mod(var(--palette-orange) tint(30%));
+  --palette-orange-4: color-mod(var(--palette-orange) tint(20%));
+  --palette-orange-5: color-mod(var(--palette-orange) tint(10%));
+  --palette-orange-6: var(--palette-orange);
+  --palette-orange-7: color-mod(var(--palette-orange) shade(10%));
+  --palette-orange-8: color-mod(var(--palette-orange) shade(20%));
+  --palette-orange-9: color-mod(var(--palette-orange) shade(30%));
+
+  --palette-violet-0: color-mod(var(--palette-violet) tint(60%));
+  --palette-violet-1: color-mod(var(--palette-violet) tint(50%));
+  --palette-violet-2: color-mod(var(--palette-violet) tint(40%));
+  --palette-violet-3: color-mod(var(--palette-violet) tint(30%));
+  --palette-violet-4: color-mod(var(--palette-violet) tint(20%));
+  --palette-violet-5: color-mod(var(--palette-violet) tint(10%));
+  --palette-violet-6: var(--palette-violet);
+  --palette-violet-7: color-mod(var(--palette-violet) shade(10%));
+  --palette-violet-8: color-mod(var(--palette-violet) shade(20%));
+  --palette-violet-9: color-mod(var(--palette-violet) shade(30%));
+
+  --palette-pink-0: color-mod(var(--palette-pink) tint(60%));
+  --palette-pink-1: color-mod(var(--palette-pink) tint(50%));
+  --palette-pink-2: color-mod(var(--palette-pink) tint(40%));
+  --palette-pink-3: color-mod(var(--palette-pink) tint(30%));
+  --palette-pink-4: color-mod(var(--palette-pink) tint(20%));
+  --palette-pink-5: color-mod(var(--palette-pink) tint(10%));
+  --palette-pink-6: var(--palette-pink);
+  --palette-pink-7: color-mod(var(--palette-pink) shade(10%));
+  --palette-pink-8: color-mod(var(--palette-pink) shade(20%));
+  --palette-pink-9: color-mod(var(--palette-pink) shade(30%));
+
+  --palette-blue-gray-0: color-mod(var(--palette-blue-gray) tint(60%));
+  --palette-blue-gray-1: color-mod(var(--palette-blue-gray) tint(50%));
+  --palette-blue-gray-2: color-mod(var(--palette-blue-gray) tint(40%));
+  --palette-blue-gray-3: color-mod(var(--palette-blue-gray) tint(30%));
+  --palette-blue-gray-4: color-mod(var(--palette-blue-gray) tint(20%));
+  --palette-blue-gray-5: color-mod(var(--palette-blue-gray) tint(10%));
+  --palette-blue-gray-6: var(--palette-blue-gray);
+  --palette-blue-gray-7: color-mod(var(--palette-blue-gray) shade(10%));
+  --palette-blue-gray-8: color-mod(var(--palette-blue-gray) shade(20%));
+  --palette-blue-gray-9: color-mod(var(--palette-blue-gray) shade(30%));
+
+  --palette-indigo-0: color-mod(var(--palette-indigo) tint(60%));
+  --palette-indigo-1: color-mod(var(--palette-indigo) tint(50%));
+  --palette-indigo-2: color-mod(var(--palette-indigo) tint(40%));
+  --palette-indigo-3: color-mod(var(--palette-indigo) tint(30%));
+  --palette-indigo-4: color-mod(var(--palette-indigo) tint(20%));
+  --palette-indigo-5: color-mod(var(--palette-indigo) tint(10%));
+  --palette-indigo-6: var(--palette-indigo);
+  --palette-indigo-7: color-mod(var(--palette-indigo) shade(10%));
+  --palette-indigo-8: color-mod(var(--palette-indigo) shade(20%));
+  --palette-indigo-9: color-mod(var(--palette-indigo) shade(30%));
+
+  --spacing-xxs: 0.25rem;
+  --spacing-xs: 0.5rem;
+  --spacing-s: 0.75rem;
+  --spacing-m: 1rem;
+  --spacing-l: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-xxl: 3rem;
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -1,8 +1,14 @@
+import path from "path";
 import { defineConfig } from "vite";
 import solid from "vite-plugin-solid";

 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
  plugins: [solid()],

  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`