@zixili/design-system 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export { ThemeProvider, useTheme } from './context/ThemeContext';
+export { LanguageProvider, useLanguage } from './context/LanguageContext';

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@zixili/design-system",
+  "version": "1.0.0",
+  "description": "BEDI Design System — 企业级 React 组件库，50+ 组件，TypeScript + 暗色模式 + i18n",
+  "license": "MIT",
+  "author": "ZiXi",
+  "keywords": ["react", "design-system", "components", "typescript", "ui", "bedi"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Zixi370719/BDesign.git"
+  },
+  "type": "module",
+  "main": "dist/bedi.cjs",
+  "module": "dist/bedi.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/bedi.css",
+  "exports": {
+    ".": {
+      "import": "./dist/bedi.js",
+      "require": "./dist/bedi.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens": "./src/tokens/index.css",
+    "./src/tokens/index.css": "./src/tokens/index.css",
+    "./src/tokens/variables.css": "./src/tokens/variables.css",
+    "./src/tokens/dark.css": "./src/tokens/dark.css",
+    "./src/tokens/base.css": "./src/tokens/base.css",
+    "./src/index.css": "./src/index.css"
+  },
+  "files": [
+    "dist",
+    "src/tokens",
+    "src/index.css",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "release": "npm run build:lib && npm version patch && npm publish --access public"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "framer-motion": "^10.16.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "framer-motion": "^10.16.16",
+    "fuse.js": "^7.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.7.0"
+  }
+}

package/src/index.css

@@ -0,0 +1 @@
+@import './tokens/index.css';

package/src/tokens/base.css

@@ -0,0 +1,58 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--color-text-1);
+  background-color: var(--color-bg-2);
+  line-height: var(--line-height-base);
+  font-size: var(--font-size-md);
+}
+
+#root {
+  min-height: 100vh;
+}
+
+.app {
+  min-height: 100vh;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+:where(a, button, input, select, textarea):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+  border-radius: var(--radius-md);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-fill-2);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-fill-3);
+}

package/src/tokens/dark.css

@@ -0,0 +1,27 @@
+[data-theme="dark"] {
+  --color-text-1: #F6F6F6;
+  --color-text-2: #C9CDD4;
+  --color-text-3: #86909C;
+  --color-text-4: #4E5969;
+
+  --color-bg-1: #1D2129;
+  --color-bg-2: #23272E;
+  --color-bg-3: #2A2E35;
+  --color-bg-4: #33373E;
+
+  --color-border-1: #33373E;
+  --color-border-2: #484848;
+  --color-border-3: #5B5B5B;
+
+  --color-fill-1: #33373E;
+  --color-fill-2: #484848;
+  --color-fill-3: #5B5B5B;
+
+  /* 优化深色模式下的primary颜色，提高饱和度 */
+  --color-primary: #4D94FF;
+  --color-primary-hover: #6FA8FF;
+  --color-primary-active: #2D7FE8;
+  --color-primary-light: rgba(77, 148, 255, 0.2);
+
+  --shadow-focus: 0 0 0 2px rgba(77, 148, 255, 0.4);
+}

package/src/tokens/index.css

@@ -0,0 +1,4 @@
+@import './variables.css';
+@import './dark.css';
+@import './base.css';
+@import './utilities.css';

package/src/tokens/utilities.css

@@ -0,0 +1,57 @@
+/* BDesign utility classes */
+
+/* 三级标题 - 标准样式 */
+.third-level-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin-bottom: var(--spacing-md);
+}
+
+/* 三级标题 - 小间距 */
+.third-level-title-small-margin {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin-bottom: var(--spacing-sm);
+}
+
+/* 三级标题 - 左对齐 */
+.third-level-title-left-align {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin-bottom: var(--spacing-sm);
+  text-align: left;
+}
+
+/* 三级标题 - 无间距 */
+.third-level-title-no-margin {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin-bottom: 0;
+}
+
+/* 三级标题 - 居中对齐 */
+.third-level-title-center {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin-bottom: var(--spacing-md);
+  text-align: center;
+}
+
+/* 三级标题 - 带下划线 */
+.third-level-title-underline {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin-bottom: var(--spacing-md);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid transparent;
+  background-image: linear-gradient(to right, #e0e0e0, transparent);
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  background-size: 100% 1px;
+}

package/src/tokens/variables.css

@@ -0,0 +1,145 @@
+:root {
+  /* =========================================================
+   * BEDI Design System (Arco-inspired)
+   * ========================================================= */
+
+  /* Layout */
+  --page-max-width: 1200px;
+  --content-max-width: 1040px;
+  --header-height: 64px;
+
+  /* Brand / Semantic colors */
+  --color-primary: #165DFF;
+  --color-primary-hover: #4080FF;
+  --color-primary-active: #0E42D2;
+  --color-primary-light: #E8F3FF;
+
+  --color-success: #00B42A;
+  --color-success-hover: #23C343;
+  --color-success-active: #009122;
+  --color-success-light: #E8FFEA;
+
+  --color-warning: #FF7D00;
+  --color-warning-hover: #FF9A2E;
+  --color-warning-active: #D25F00;
+  --color-warning-light: #FFF7E8;
+
+  --color-error: #F53F3F;
+  --color-error-hover: #F76560;
+  --color-error-active: #CB272D;
+  --color-error-light: #FFE8E8;
+
+  /* Neutral (text) */
+  --color-text-1: #1D2129;
+  --color-text-2: #4E5969;
+  --color-text-3: #86909C;
+  --color-text-4: #C9CDD4;
+
+  /* Neutral (surface) */
+  --color-bg-1: #FFFFFF;
+  --color-bg-2: #F7F8FA;
+  --color-bg-3: #F2F3F5;
+  --color-bg-4: #E5E6EB;
+
+  --color-border-1: #E5E6EB;
+  --color-border-2: #D9D9D9;
+  --color-border-3: #C9CDD4;
+
+  --color-fill-1: #F2F3F5;
+  --color-fill-2: #E5E6EB;
+  --color-fill-3: #D9D9D9;
+
+  /* Color scales (minimal subset used by components) */
+  --color-blue-1: #E8F3FF;
+  --color-blue-2: #C9DDFF;
+  --color-blue-3: #A6C8FF;
+  --color-blue-4: #7DB3FF;
+  --color-blue-6: var(--color-primary);
+  --color-blue-7: var(--color-primary-active);
+
+  --color-green-1: #E8FFEA;
+  --color-green-2: #CFFFD6;
+  --color-green-4: #4CD263;
+  --color-green-6: var(--color-success);
+  --color-green-7: #009A29;
+
+  --color-orange-1: #FFF7E8;
+  --color-orange-2: #FFE4BA;
+  --color-orange-4: #FF9A2E;
+  --color-orange-6: var(--color-warning);
+  --color-orange-7: #D25F00;
+
+  --color-red-1: #FFE8E8;
+  --color-red-2: #FFCECE;
+  --color-red-4: #F76560;
+  --color-red-6: var(--color-error);
+  --color-red-7: var(--color-error-active);
+
+  /* Spacing (semantic + numeric) */
+  --spacing-unit: 4px;
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+
+  --spacing-xs: var(--spacing-1);
+  --spacing-sm: var(--spacing-2);
+  --spacing-md: var(--spacing-3);
+  --spacing-lg: var(--spacing-4);
+  --spacing-xl: var(--spacing-6);
+  --spacing-xxl: var(--spacing-8);
+  --spacing-xxxl: var(--spacing-12);
+
+  /* Typography */
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 20px;
+  --font-size-xxl: 24px;
+  --font-size-hero: 48px;
+
+  --line-height-base: 1.5715;
+
+  /* Radius */
+  --radius-xs: 2px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-xxl: 16px;
+
+  /* Shadow */
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.14);
+  --shadow-5: 0 12px 32px rgba(0, 0, 0, 0.16);
+
+  --shadow-sm: var(--shadow-1);
+  --shadow-md: var(--shadow-2);
+  --shadow-lg: var(--shadow-3);
+
+  /* Focus ring */
+  --shadow-focus: 0 0 0 2px rgba(22, 93, 255, 0.2);
+
+  /* Compatibility aliases (older component CSS) */
+  --text-primary: var(--color-text-1);
+  --text-secondary: var(--color-text-2);
+  --text-tertiary: var(--color-text-3);
+
+  --bg-primary: var(--color-bg-1);
+  --bg-secondary: var(--color-bg-2);
+  --bg-tertiary: var(--color-fill-1);
+
+  --border-color: var(--color-border-1);
+  --color-border: var(--color-border-1);
+}