chore: init project

packages/@vben-core/shared/design-tokens/README.md

@@ -0,0 +1,3 @@
+# @vben-core/design-tokens
+
+用于维护全局所有的 css 变量，它由 vite 插件在全局注入，不需要手动引入

packages/@vben-core/shared/design-tokens/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@vben-core/design-tokens",
+  "version": "1.0.0",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/shared/design-tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/vbenjs/vue-vben-admin/issues"
+  },
+  "scripts": {
+    "build": "pnpm vite build",
+    "dts": "vue-tsc --declaration --emitDeclarationOnly --declarationDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.css",
+  "imports": {
+    "#*": "./src/*"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.css"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  }
+}

packages/@vben-core/shared/design-tokens/src/dark/index.scss

@@ -0,0 +1,95 @@
+.dark {
+  /* 基础背景颜色颜色 */
+
+  /* --color-background: 240 6% 18%; */
+  // --color-body: 220deg 13.04% 8%;
+  --color-body: 220deg 13.04% 8%;
+  --color-background: 220deg 13.04% 8%;
+
+  /* --color-background: 219 42% 11%; */
+
+  /* 基础文本颜色 */
+  --color-foreground: 220 13% 91%;
+
+  /* 主题颜色 */
+  --color-primary: 211 91% 39%;
+
+  /* 前景色，如按钮文本颜色 */
+  --color-primary-foreground: 0 0 98%;
+
+  /* 颜色次要 */
+  --color-secondary: 240 5% 17%;
+
+  /* 前景色，如按钮文本颜色 */
+  --color-secondary-foreground: 0 0 98%;
+
+  /* 次要文本颜色 */
+  --color-secondary-desc: 210 12.16% 70.98%;
+
+  /* 普通颜色 */
+
+  /* --color-accent: 240 3.7% 15.9%; */
+
+  /* --color-accent: 220deg 7.32% 16.08%; */
+  --color-accent: 0deg 0% 100% / 8%;
+  --color-accent-hover: 0deg 0% 100% / 12%;
+
+  /* 普通颜色前景色，如按钮文本颜色 */
+  --color-accent-foreground: 0 0 98%;
+
+  /* 破坏性颜色 */
+  --color-destructive: 0 63% 31%;
+
+  /* 破坏性颜色 */
+  --color-destructive-foreground: 0 86% 97%;
+  --color-muted: 220deg 6.82% 17.25%;
+  --color-muted-foreground: 215 20.2% 65.1%;
+  --color-heavy: 0deg 0% 100% / 12%;
+  --color-heavy-foreground: var(--color-accent-foreground);
+
+  /* 基础边框色 */
+  --color-border: 0deg 0% 100% / 10%;
+
+  /* --color-popover: 240 4% 29%; */
+  --color-popover: 222.86deg 8.43% 16.27%;
+  --color-popover-foreground: 210 40% 98%;
+  --color-card: 222.2 84% 4.9%;
+  --color-card-foreground: 210 40% 98%;
+
+  /* 基础文本边框色 */
+  --color-input: 0deg 0% 100% / 10%;
+
+  /* input placeholder 颜色 */
+  --color-input-placeholder: 218deg 11% 65%;
+
+  /* 基础文本背景色 */
+
+  /* --color-input-background: 216deg 5.38% 18.24%; */
+  --color-input-background: 0deg 0% 100% / 5%;
+
+  /* 遮罩颜色 */
+  --color-overlay: 0deg 0% 0% / 40%;
+  --color-ring: 222.2 84% 4.9%;
+
+  /* 基本文字大小 */
+  --font-size-base: 16px;
+
+  /* 基本圆角大小 */
+  --radius-base: 0.5rem;
+
+  /* ======================================== */
+
+  /* =============component & UI============= */
+
+  /* ======================================== */
+
+  /* --color-login-background: 219 42% 11%; */
+
+  /* 图标颜色 */
+
+  /* authentication */
+  --color-authentication-from: hsl(240deg 11% 6%);
+  --color-authentication-to: hsl(240deg 11% 6%);
+
+  color-scheme: dark;
+}

packages/@vben-core/shared/design-tokens/src/default/index.scss

@@ -0,0 +1,103 @@
+/* https://gavin-yyc.github.io/colorconvert/ */
+:root {
+  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
+    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+
+  /* 基础背景颜色颜色 */
+
+  /* --color-background: 210deg 25% 96.86%; */
+  --color-body: 210deg 25% 96.86%;
+  --color-background: 0 0 100%;
+  // --color-darken-background: 220deg 13.04% 8%;
+
+  /* --color-background: 220 14% 95%; */
+
+  /* 基础文本颜色 */
+  --color-foreground: 210 6% 21%;
+
+  /* 主题颜色 */
+  --color-primary: 211 91% 39%;
+
+  /* 前景色，如按钮文本颜色 */
+  --color-primary-foreground: 0 0 98%;
+
+  /* 颜色次要 */
+  --color-secondary: 240 5% 96%;
+
+  /* 前景色，如按钮文本颜色 */
+  --color-secondary-foreground: 240 6% 10%;
+
+  /* 次要文本颜色 */
+  --color-secondary-desc: 216.4 16.09% 34.12%;
+
+  /* 普通颜色 */
+  --color-accent: 240 5% 96%;
+  --color-accent-hover: 200deg 10% 90%;
+
+  /* 普通颜色前景色，如按钮文本颜色 */
+  --color-accent-foreground: 240 6% 10%;
+
+  /* 破坏性颜色 */
+  --color-destructive: 0 77.78% 68.24%;
+
+  /* 破坏性颜色 */
+  --color-destructive-foreground: 0 0 98%;
+  --color-muted: 210 40% 96.1%;
+  --color-muted-foreground: 215.4 16.3% 46.9%;
+  --color-heavy: 192deg 9.43% 89.61%;
+  --color-heavy-foreground: var(--color-accent-foreground);
+  --color-popover: 0 0% 100%;
+  --color-popover-foreground: 222.2 84% 4.9%;
+  --color-card: 0 0% 100%;
+  --color-card-foreground: 222.2 84% 4.9%;
+
+  /* 基础边框色 */
+  --color-border: 240 6% 90%;
+
+  /* 基础文本边框色 */
+  --color-input: 240deg 5.88% 90%;
+
+  /* input placeholder 颜色 */
+  --color-input-placeholder: 217 10.6% 65%;
+
+  /* 基础文本背景色 */
+  --color-input-background: 0 0 100%;
+  --color-ring: 222.2 84% 4.9%;
+
+  /* 遮罩颜色 */
+  --color-overlay: 0deg 0% 0% / 40%;
+
+  /* dark */
+  --color-dark-foreground: 220 13% 91%;
+  --color-dark-border: 0deg 0% 100% / 10%;
+  --color-dark-accent: 0deg 0% 100% / 8%;
+  --color-dark-accent-hover: 0deg 0% 100% / 12%;
+
+  /* 基本文字大小 */
+  --font-size-base: 16px;
+
+  /* 基本圆角大小 */
+  --radius-base: 0.5rem;
+
+  /* ======================================== */
+
+  /* =============component & UI============= */
+
+  /* ======================================== */
+
+  /* --color-login-background: 0 0 100%; */
+
+  /* menu */
+  --color-menu-dark: 225deg 12% 13%;
+  --color-menu-dark-darken: 223deg 11% 10%;
+  // --color-menu-darken: var(--color-background);
+  // --color-menu-opened-dark: 225deg 12.12% 11%;
+  --color-menu: 0deg 0% 100%;
+  --color-menu-darken: 0deg 0% 95%;
+  // --color-menu-opened: 0deg 0% 100%;
+
+  /* authentication */
+  --color-authentication-from: hsl(231deg 61% 44%);
+  --color-authentication-to: hsl(218deg 70% 42%);
+}

packages/@vben-core/shared/design-tokens/src/index.ts

@@ -0,0 +1,4 @@
+import './default/index.scss';
+import './dark/index.scss';
+
+export {};

packages/@vben-core/shared/design-tokens/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/library.json",
+  "include": ["src"]
+}

packages/@vben-core/shared/design-tokens/vite.config.mts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig();