{"_id":"@cimom/vben-core-design","_rev":"10-baa82298a47ed9cc808449cb3be7375f","name":"@cimom/vben-core-design","dist-tags":{"latest":"5.6.3"},"versions":{"5.5.6":{"name":"@cimom/vben-core-design","version":"5.5.6","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.5.6","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"f64357f636c09fe8bdf1e4382042d9127dc51a0b","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.5.6.tgz","fileCount":15,"integrity":"sha512-Kl2ye+cxr6+ZcMol8czzvIkfI7J5et+fE2tqlP3hxN3T2AKZgQsn/5HmEZWBPXxrVaYDOzlJw1yroEbXcn0TKQ==","signatures":[{"sig":"MEQCIGIfmkcj/6BEUi8HSO+u72TkLk3OtJ3h9qBAZgPsmL+pAiBXgzB92qVWlJ5m7kv2wmFYnF5SaU448tQeL6qUvwzUHg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56965},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./dist/design.css","development":"./src/index.ts"},"./bem":{"default":"./dist/bem.scss","development":"./src/scss-bem/bem.scss"}},"private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public","exports":{".":{"default":"./dist/index.mjs"}}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.5.6_1748315084903_0.7308967659701924","host":"s3://npm-registry-packages-npm-production"}},"5.5.7":{"name":"@cimom/vben-core-design","version":"5.5.7","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.5.7","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"93048a7fb08cf83332d23449e57c7911f4fd5ff4","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.5.7.tgz","fileCount":15,"integrity":"sha512-AiAyaIlAlXFmljuiWY9SkkUJIYNcfWqPmTKSsoXNYfwC22HBZ9+RKi2P6b/2C+3uuu1lKVB0+mXG6hMdWHLeXQ==","signatures":[{"sig":"MEUCIHrJsjdLYGW2vIdAmyv090QPKaexftbFbloIOI5C/J42AiEAmmJEbEZO+Sm1jugB8+/91wQZiGnjNJMQSS+SP6pNdFs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":79348},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./dist/design.css","development":"./src/index.ts"},"./bem":{"default":"./dist/bem.scss","development":"./src/scss-bem/bem.scss"}},"private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public","exports":{".":{"default":"./dist/index.mjs"}}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.5.7_1748325913368_0.0860956142315148","host":"s3://npm-registry-packages-npm-production"}},"5.5.8":{"name":"@cimom/vben-core-design","version":"5.5.8","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.5.8","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"1a305a831f7debdd4bd324412e90e694eb6803da","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.5.8.tgz","fileCount":15,"integrity":"sha512-upIZgtS4yxeKYrE2ixp64jTJXHftC+os0G1BDE+w4wu8lg31Ex3vStgDiWxVA/hSgT0aRNNIB3gn/vB9Yx0/ww==","signatures":[{"sig":"MEUCIFZW83jsDF9YuIfhzhtCzjed184X/6cw55GaqKJ9LXBMAiEAh8LxI9QZbszqxZO9IRRG47GhP1iU+MeposZm/H8NbsM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":57643},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./dist/vben-core-design.css","development":"./src/index.ts"},"./bem":{"default":"./dist/bem.scss","development":"./src/scss-bem/bem.scss"},"./constants":{"default":"./dist/constants.scss","development":"./src/scss-bem/constants.scss"}},"private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public","exports":{".":{"default":"./dist/index.mjs"}}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.5.8_1748326949665_0.8526801540091484","host":"s3://npm-registry-packages-npm-production"}},"5.5.9":{"name":"@cimom/vben-core-design","version":"5.5.9","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.5.9","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"3f831326d8dc05e3b2bbe19ca29038dc474b66ca","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.5.9.tgz","fileCount":16,"integrity":"sha512-Toz+DiqENsLNg4ZcAuCBvqXoQZoW+uymI5ih6tx6G0wv1dFun424q3+vuQxvHk4JdU6zB9V5qzGSy3Mz+38AjQ==","signatures":[{"sig":"MEQCIEYcgujfwKca254p4ZD9U633k1VRV8UueO7Us7yaVZZDAiB6hi9Hor/NiEigksMhFzDtTKy4AXFHZGd0Bo5LwvuhDQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67026},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.ts","default":"./dist/vben-core-design.css","development":"./src/index.ts"},"./bem":{"default":"./dist/bem.scss","development":"./src/scss-bem/bem.scss"},"./constants":{"default":"./dist/constants.scss","development":"./src/scss-bem/constants.scss"}},"private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","description":"该包提供了 Vue Vben Admin 项目的核心设计系统，包括设计令牌（Design Tokens）、CSS 变量、BEM 规范工具和全局样式。它是整个项目样式系统的基础，确保了界面风格的一致性和可定制性。","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public","exports":{".":{"default":"./dist/index.mjs"}}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.5.9_1748390958260_0.254639941443644","host":"s3://npm-registry-packages-npm-production"}},"5.5.12":{"name":"@cimom/vben-core-design","version":"5.5.12","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.5.12","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"b02ff112a562e393e184cf245d0c6b39066bcaa3","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.5.12.tgz","fileCount":6,"integrity":"sha512-YSgnz7Q/pf1rZUd4yJvVCwITmzUQAefM7vXKjjhogb9mH9O8fjP4onjuchIxzqRRaxvAWJ5DbyoIRB7eOqP9JA==","signatures":[{"sig":"MEUCIQDG5AfYLm/Qy8foa/cPx2VLdJ6xCDI/GA5y42Ob1eHO8QIgNqd8/RIkpKmwG858hc8zpPYRXi+29DPDj9HefSznmYw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33233},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"default":"./dist/vben-core-design.css"},"./bem":{"default":"./dist/bem.scss"},"./constants":{"default":"./dist/constants.scss"}},"private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","description":"该包提供了 Vue Vben Admin 项目的核心设计系统，包括设计令牌（Design Tokens）、CSS 变量、BEM 规范工具和全局样式。它是整个项目样式系统的基础，确保了界面风格的一致性和可定制性。","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.5.12_1748505262033_0.2028349294578209","host":"s3://npm-registry-packages-npm-production"}},"5.6.0":{"name":"@cimom/vben-core-design","version":"5.6.0","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.6.0","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"e48bcc3bbf5871acd37075abc492907cd41806d7","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.6.0.tgz","fileCount":13,"integrity":"sha512-v5qb7cgxcVIWhzNszC2uNqXg9gKeSFcoaxBQoDqEpuyUSLjTOeElwvQDUgK59Caa1BFHBd85Igt2NspOs4GZSg==","signatures":[{"sig":"MEUCIQDNBepIOXgfbkjZw9QzOXvNp7DWLpRHmunqJwAHuUq74gIgD3oRNGQ9+W44iHzzkWtztVH7QTGmxBZ9OWRfSFwvZNk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56271},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"#types":"./src/index.ts","default":"./dist/vben-core-design.css"},"./bem":{"default":"./src/scss-bem/bem.scss"},"./constants":{"default":"./src/scss-bem/constants.scss"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.6.0_1749428379709_0.23197102421795113","host":"s3://npm-registry-packages-npm-production"}},"5.6.1":{"name":"@cimom/vben-core-design","version":"5.6.1","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.6.1","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"08744bd6574b0b5349c959bccd47179efecbf4e8","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.6.1.tgz","fileCount":14,"integrity":"sha512-5zNed2QkeL0yr4ZaCkqgz9mjMjKf4QwDyc4nIvrzc0oJ72jPgWSSe+GcpVYF3RLgxUzp0KDLZBqPjIv0H+iiCw==","signatures":[{"sig":"MEUCIQDSDlm7Zf441V9rgCveAqAKmUxYoC8jIrpqDhSKf+fjhAIgC0b+Ilnw0AYnL1HK0qBlOsAYevriIyt20Z5J32Xmb7w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65654},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"#types":"./src/index.ts","default":"./dist/vben-core-design.css"},"./bem":{"default":"./src/scss-bem/bem.scss"},"./constants":{"default":"./src/scss-bem/constants.scss"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","description":"该包提供了 Vue Vben Admin 项目的核心设计系统，包括设计令牌（Design Tokens）、CSS 变量、BEM 规范工具和全局样式。它是整个项目样式系统的基础，确保了界面风格的一致性和可定制性。","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.6.1_1749440441404_0.7650599367048272","host":"s3://npm-registry-packages-npm-production"}},"5.6.2":{"name":"@cimom/vben-core-design","version":"5.6.2","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.6.2","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"7064942ebd9504201fa98e0d462a21cbf9ce1866","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.6.2.tgz","fileCount":14,"integrity":"sha512-WR9Df6WUakaoiXgQq5tvB+kOn5sFvOB6q2d9oOWtZbgqe6rGCNCQ62D5tVVmlmJHiJifHyHSQOWq7q00DNptWA==","signatures":[{"sig":"MEYCIQD+JyAmbZBOIpid1RFoQ8SEzw8PFFKrMxPBS3i95Tst/QIhAImf2JwDVHObNeD2einV5KrM321cFvzgAuP2iUaReOlD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65654},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"#types":"./src/index.ts","default":"./dist/vben-core-design.css"},"./bem":{"default":"./src/scss-bem/bem.scss"},"./constants":{"default":"./src/scss-bem/constants.scss"}},"gitHead":"24e92c6254ccf3ebf0a31fecdee560339ed47e46","private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","description":"该包提供了 Vue Vben Admin 项目的核心设计系统，包括设计令牌（Design Tokens）、CSS 变量、BEM 规范工具和全局样式。它是整个项目样式系统的基础，确保了界面风格的一致性和可定制性。","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.6.2_1749456168636_0.1285285626248187","host":"s3://npm-registry-packages-npm-production"}},"5.6.3":{"name":"@cimom/vben-core-design","version":"5.6.3","author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","_id":"@cimom/vben-core-design@5.6.3","maintainers":[{"name":"hdeqi2005","email":"57237184@qq.com"},{"name":"xxcazzy","email":"6983376@qq.com"}],"homepage":"https://github.com/vbenjs/vue-vben-admin","bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"dist":{"shasum":"6aa67f52ad26814ab43c673444f9dbd02fe9aef5","tarball":"https://registry.npmjs.org/@cimom/vben-core-design/-/vben-core-design-5.6.3.tgz","fileCount":14,"integrity":"sha512-DCrgAdqw7TJ8D11/ppkau+LMdPS7qIGq1nFbZ2/1aW/QAPnuI8IqoxLcMugx07KKrEJsZVkC4prsgNqxgifb+g==","signatures":[{"sig":"MEUCIQDOAFyXXQF6nl3nIUsgnK8e8HYH4Nc5AqB0wkNPAU6usQIgcT1XMH0pa8lY8G62JF4SjzsnsxoPE0tBWD+hQ/6DriA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65642},"main":"./dist/index.mjs","type":"module","module":"./dist/index.mjs","exports":{".":{"#types":"./src/index.ts","default":"./dist/vben-core-design.css"},"./bem":{"default":"./src/scss-bem/bem.scss"},"./constants":{"default":"./src/scss-bem/constants.scss"}},"gitHead":"4658e451554fb07b03bcd870c1694010f7362c31","private":false,"scripts":{"build":"pnpm vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"hdeqi2005","email":"57237184@qq.com"},"repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"_npmVersion":"10.5.1","description":"该包提供了 Vue Vben Admin 项目的核心设计系统，包括设计令牌（Design Tokens）、CSS 变量、BEM 规范工具和全局样式。它是整个项目样式系统的基础，确保了界面风格的一致性和可定制性。","directories":{},"_nodeVersion":"22.0.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vben-core-design_5.6.3_1749566709579_0.6136338281860194","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-27T03:04:44.855Z","modified":"2026-01-14T01:37:28.185Z","5.5.6":"2025-05-27T03:04:45.106Z","5.5.7":"2025-05-27T06:05:13.572Z","5.5.8":"2025-05-27T06:22:29.941Z","5.5.9":"2025-05-28T00:09:18.510Z","5.5.12":"2025-05-29T07:54:22.186Z","5.6.0":"2025-06-09T00:19:39.917Z","5.6.1":"2025-06-09T03:40:41.659Z","5.6.2":"2025-06-09T08:02:48.875Z","5.6.3":"2025-06-10T14:45:09.804Z"},"bugs":{"url":"https://github.com/vbenjs/vue-vben-admin/issues"},"author":{"name":"Andy Huang","email":"57237184@qq.com"},"license":"MIT","homepage":"https://github.com/vbenjs/vue-vben-admin","repository":{"url":"git+https://github.com/vbenjs/vue-vben-admin.git","type":"git","directory":"packages/@vben-core/base/design"},"description":"该包提供了 Vue Vben Admin 项目的核心设计系统，包括设计令牌（Design Tokens）、CSS 变量、BEM 规范工具和全局样式。它是整个项目样式系统的基础，确保了界面风格的一致性和可定制性。","maintainers":[{"email":"msj1370380114@gmail.com","name":"moushangjie"},{"email":"57237184@qq.com","name":"hdeqi2005"},{"email":"6983376@qq.com","name":"xxcazzy"}],"readme":"# @cimom/vben-core-design\n\n该包提供了 Vue Vben Admin 项目的核心设计系统，包括设计令牌（Design Tokens）、CSS 变量、BEM 规范工具和全局样式。它是整个项目样式系统的基础，确保了界面风格的一致性和可定制性。\n\n## 安装\n\n```bash\npnpm add @cimom/vben-core-design\n```\n\n## 基本使用\n\n### 引入全局样式\n\n在应用的入口文件中引入全局样式：\n\n```ts\n// main.ts\nimport '@cimom/vben-core-design';\n```\n\n### 使用 BEM 规范工具\n\n在 SCSS 文件中使用 BEM 规范工具：\n\n```scss\n// 引入 BEM 工具\n@import '@cimom/vben-core-design/bem';\n\n// 使用 BEM 工具创建组件样式\n@include b(button) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 500;\n  border-radius: var(--border-radius-base);\n\n  // 元素\n  @include e(icon) {\n    margin-right: 8px;\n  }\n\n  // 修饰符\n  @include m(primary) {\n    background-color: var(--primary-color);\n    color: #fff;\n  }\n\n  @include m(small) {\n    padding: 4px 12px;\n    font-size: 14px;\n  }\n\n  @include m(large) {\n    padding: 12px 20px;\n    font-size: 16px;\n  }\n}\n```\n\n### 使用设计常量\n\n在 SCSS 文件中使用设计常量：\n\n```scss\n// 引入设计常量\n@import '@cimom/vben-core-design/constants';\n\n.custom-element {\n  // 使用预定义的断点\n  @media (min-width: $screen-sm) {\n    width: 80%;\n  }\n\n  @media (min-width: $screen-md) {\n    width: 60%;\n  }\n\n  @media (min-width: $screen-lg) {\n    width: 40%;\n  }\n}\n```\n\n### 使用 CSS 变量\n\n在组件中使用 CSS 变量：\n\n```vue\n<template>\n  <div class=\"custom-component\">\n    <h2 class=\"title\">标题</h2>\n    <p class=\"content\">内容</p>\n  </div>\n</template>\n\n<style scoped>\n.custom-component {\n  padding: var(--padding-md);\n  background-color: var(--background-color);\n  border-radius: var(--border-radius-base);\n  box-shadow: var(--box-shadow-base);\n}\n\n.title {\n  color: var(--text-color);\n  font-size: var(--font-size-lg);\n  margin-bottom: var(--margin-sm);\n}\n\n.content {\n  color: var(--text-color-secondary);\n  font-size: var(--font-size-base);\n}\n</style>\n```\n\n## 包含内容\n\n### 设计令牌（Design Tokens）\n\n设计令牌是设计系统的基础变量，包括：\n\n- 颜色系统\n- 字体系统\n- 间距系统\n- 边框系统\n- 阴影系统\n- 动画系统\n\n这些令牌被转换为 CSS 变量，可以在整个项目中使用。\n\n### 全局样式\n\n包含以下全局样式：\n\n- 基础样式重置\n- 通用工具类\n- 过渡动画\n- NProgress 样式\n- UI 组件基础样式\n\n### BEM 规范工具\n\n提供了一套基于 SCSS 的 BEM（Block, Element, Modifier）规范工具，用于创建可维护的 CSS 代码。\n\n### CSS 变量\n\n所有设计令牌都被转换为 CSS 变量，可以在项目中使用。\n\n## CSS 变量参考\n\n### 颜色变量\n\n```css\n:root {\n  /* 主题色 */\n  --primary-color: #1890ff;\n  --primary-color-hover: #40a9ff;\n  --primary-color-active: #096dd9;\n  --primary-color-outline: rgba(24, 144, 255, 0.2);\n\n  /* 成功色 */\n  --success-color: #52c41a;\n  --success-color-hover: #73d13d;\n  --success-color-active: #389e0d;\n  --success-color-outline: rgba(82, 196, 26, 0.2);\n\n  /* 警告色 */\n  --warning-color: #faad14;\n  --warning-color-hover: #ffc53d;\n  --warning-color-active: #d48806;\n  --warning-color-outline: rgba(250, 173, 20, 0.2);\n\n  /* 错误色 */\n  --error-color: #ff4d4f;\n  --error-color-hover: #ff7875;\n  --error-color-active: #d9363e;\n  --error-color-outline: rgba(255, 77, 79, 0.2);\n\n  /* 文本色 */\n  --text-color: rgba(0, 0, 0, 0.85);\n  --text-color-secondary: rgba(0, 0, 0, 0.65);\n  --text-color-disabled: rgba(0, 0, 0, 0.25);\n\n  /* 背景色 */\n  --background-color: #fff;\n  --background-color-light: #f5f5f5;\n  --background-color-dark: #f0f2f5;\n\n  /* 边框色 */\n  --border-color: #d9d9d9;\n  --border-color-split: #f0f0f0;\n}\n\n/* 暗黑模式 */\n.dark {\n  --primary-color: #177ddc;\n  --primary-color-hover: #1890ff;\n  --primary-color-active: #0050b3;\n\n  --text-color: rgba(255, 255, 255, 0.85);\n  --text-color-secondary: rgba(255, 255, 255, 0.65);\n  --text-color-disabled: rgba(255, 255, 255, 0.3);\n\n  --background-color: #141414;\n  --background-color-light: #1f1f1f;\n  --background-color-dark: #000;\n\n  --border-color: #434343;\n  --border-color-split: #303030;\n}\n```\n\n### 字体变量\n\n```css\n:root {\n  /* 字体系列 */\n  --font-family:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',\n    'Segoe UI Symbol', 'Noto Color Emoji';\n\n  /* 字体大小 */\n  --font-size-base: 14px;\n  --font-size-sm: 12px;\n  --font-size-lg: 16px;\n  --font-size-xl: 20px;\n  --font-size-xxl: 24px;\n\n  /* 行高 */\n  --line-height-base: 1.5;\n  --line-height-sm: 1.2;\n  --line-height-lg: 1.8;\n}\n```\n\n### 间距变量\n\n```css\n:root {\n  /* 间距 */\n  --spacing-unit: 4px;\n  --spacing-xs: calc(var(--spacing-unit) * 1); /* 4px */\n  --spacing-sm: calc(var(--spacing-unit) * 2); /* 8px */\n  --spacing-md: calc(var(--spacing-unit) * 4); /* 16px */\n  --spacing-lg: calc(var(--spacing-unit) * 6); /* 24px */\n  --spacing-xl: calc(var(--spacing-unit) * 8); /* 32px */\n\n  /* 内边距 */\n  --padding-xs: var(--spacing-xs);\n  --padding-sm: var(--spacing-sm);\n  --padding-md: var(--spacing-md);\n  --padding-lg: var(--spacing-lg);\n  --padding-xl: var(--spacing-xl);\n\n  /* 外边距 */\n  --margin-xs: var(--spacing-xs);\n  --margin-sm: var(--spacing-sm);\n  --margin-md: var(--spacing-md);\n  --margin-lg: var(--spacing-lg);\n  --margin-xl: var(--spacing-xl);\n}\n```\n\n### 边框变量\n\n```css\n:root {\n  /* 边框 */\n  --border-width-base: 1px;\n  --border-style-base: solid;\n  --border-color-base: var(--border-color);\n  --border-base: var(--border-width-base) var(--border-style-base)\n    var(--border-color-base);\n\n  /* 边框圆角 */\n  --border-radius-base: 2px;\n  --border-radius-sm: 2px;\n  --border-radius-md: 4px;\n  --border-radius-lg: 8px;\n  --border-radius-circle: 50%;\n}\n```\n\n### 阴影变量\n\n```css\n:root {\n  /* 阴影 */\n  --box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);\n  --box-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.1);\n  --box-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2);\n  --box-shadow-card:\n    0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),\n    0 5px 12px 4px rgba(0, 0, 0, 0.09);\n}\n```\n\n### 动画变量\n\n```css\n:root {\n  /* 动画 */\n  --animation-duration-slow: 0.3s;\n  --animation-duration-base: 0.2s;\n  --animation-duration-fast: 0.1s;\n\n  /* 过渡 */\n  --transition-base: all var(--animation-duration-base)\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n  --transition-fade: opacity var(--animation-duration-base)\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n  --transition-slide: transform var(--animation-duration-base)\n    cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n```\n\n## BEM 规范工具参考\n\n### 块（Block）\n\n```scss\n@include b(button) {\n  // 样式\n}\n\n// 编译为\n.vben-button {\n  // 样式\n}\n```\n\n### 元素（Element）\n\n```scss\n@include b(button) {\n  @include e(icon) {\n    // 样式\n  }\n}\n\n// 编译为\n.vben-button__icon {\n  // 样式\n}\n```\n\n### 修饰符（Modifier）\n\n```scss\n@include b(button) {\n  @include m(primary) {\n    // 样式\n  }\n}\n\n// 编译为\n.vben-button--primary {\n  // 样式\n}\n```\n\n### 状态（State）\n\n```scss\n@include b(button) {\n  @include when(disabled) {\n    // 样式\n  }\n}\n\n// 编译为\n.vben-button.is-disabled {\n  // 样式\n}\n```\n\n## 高级用法\n\n### 自定义主题\n\n可以通过覆盖 CSS 变量来自定义主题：\n\n```css\n:root {\n  --primary-color: #722ed1; /* 紫色主题 */\n  --success-color: #13c2c2; /* 青色成功色 */\n  --warning-color: #fa8c16; /* 橙色警告色 */\n  --error-color: #eb2f96; /* 粉色错误色 */\n}\n```\n\n### 响应式设计\n\n结合 CSS 变量和媒体查询实现响应式设计：\n\n```scss\n.container {\n  padding: var(--padding-md);\n\n  @media (max-width: 768px) {\n    padding: var(--padding-sm);\n  }\n\n  @media (max-width: 480px) {\n    padding: var(--padding-xs);\n  }\n}\n```\n\n### 主题切换\n\n实现亮色/暗色主题切换：\n\n```ts\n// 切换主题\nfunction toggleTheme(theme: 'light' | 'dark') {\n  const htmlEl = document.documentElement;\n\n  if (theme === 'dark') {\n    htmlEl.classList.add('dark');\n  } else {\n    htmlEl.classList.remove('dark');\n  }\n}\n```\n\n## 注意事项\n\n1. 该包主要提供设计系统的基础，不包含具体的组件实现。\n2. 使用 BEM 规范工具时，默认的命名空间是 `vben-`，可以通过配置修改。\n3. 在使用 CSS 变量时，建议始终提供回退值，以确保在不支持 CSS 变量的浏览器中也能正常显示。\n\n## 与其他包的关系\n\n- **@cimom/vben-styles**: 基于此包构建，提供了更高级别的样式封装。\n- **@cimom/vben-core-ui-kit**: 使用此包的设计系统构建 UI 组件。\n- **@cimom/vben-preferences**: 可以通过偏好设置来动态切换主题。\n\n## 常见问题\n\n### CSS 变量不生效\n\n确保你的目标浏览器支持 CSS 变量，或者使用 PostCSS 插件进行兼容性处理。\n\n### 样式冲突\n\n如果遇到样式冲突，可以通过以下方式解决：\n\n1. 使用 BEM 规范确保类名唯一性\n2. 使用 CSS Modules 或 Scoped CSS 隔离样式\n3. 调整样式优先级\n\n### 自定义命名空间\n\n如果需要自定义 BEM 命名空间，可以在引入 BEM 工具之前设置变量：\n\n```scss\n$namespace: 'custom-'; // 默认是 'vben-'\n@import '@cimom/vben-core-design/bem';\n```\n","readmeFilename":"README.md"}