seven-design-ui 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/.eslintrc.json +35 -0
  2. package/.prettierrc.json +10 -0
  3. package/CONTRIBUTING.md +350 -0
  4. package/PROJECT_STRUCTURE.md +343 -0
  5. package/README.md +83 -0
  6. package/app/globals.css +125 -0
  7. package/app/layout.tsx +45 -0
  8. package/app/page.tsx +202 -0
  9. package/components/theme-provider.tsx +11 -0
  10. package/components/ui/accordion.tsx +66 -0
  11. package/components/ui/alert-dialog.tsx +157 -0
  12. package/components/ui/alert.tsx +66 -0
  13. package/components/ui/aspect-ratio.tsx +11 -0
  14. package/components/ui/avatar.tsx +53 -0
  15. package/components/ui/badge.tsx +46 -0
  16. package/components/ui/breadcrumb.tsx +109 -0
  17. package/components/ui/button-group.tsx +83 -0
  18. package/components/ui/button.tsx +60 -0
  19. package/components/ui/calendar.tsx +213 -0
  20. package/components/ui/card.tsx +92 -0
  21. package/components/ui/carousel.tsx +241 -0
  22. package/components/ui/chart.tsx +353 -0
  23. package/components/ui/checkbox.tsx +32 -0
  24. package/components/ui/collapsible.tsx +33 -0
  25. package/components/ui/command.tsx +184 -0
  26. package/components/ui/context-menu.tsx +252 -0
  27. package/components/ui/dialog.tsx +143 -0
  28. package/components/ui/drawer.tsx +135 -0
  29. package/components/ui/dropdown-menu.tsx +257 -0
  30. package/components/ui/empty.tsx +104 -0
  31. package/components/ui/field.tsx +244 -0
  32. package/components/ui/form.tsx +167 -0
  33. package/components/ui/hover-card.tsx +44 -0
  34. package/components/ui/input-group.tsx +169 -0
  35. package/components/ui/input-otp.tsx +77 -0
  36. package/components/ui/input.tsx +21 -0
  37. package/components/ui/item.tsx +193 -0
  38. package/components/ui/kbd.tsx +28 -0
  39. package/components/ui/label.tsx +24 -0
  40. package/components/ui/menubar.tsx +276 -0
  41. package/components/ui/navigation-menu.tsx +166 -0
  42. package/components/ui/pagination.tsx +127 -0
  43. package/components/ui/popover.tsx +48 -0
  44. package/components/ui/progress.tsx +31 -0
  45. package/components/ui/radio-group.tsx +45 -0
  46. package/components/ui/resizable.tsx +56 -0
  47. package/components/ui/scroll-area.tsx +58 -0
  48. package/components/ui/select.tsx +185 -0
  49. package/components/ui/separator.tsx +28 -0
  50. package/components/ui/sheet.tsx +139 -0
  51. package/components/ui/sidebar.tsx +726 -0
  52. package/components/ui/skeleton.tsx +13 -0
  53. package/components/ui/slider.tsx +63 -0
  54. package/components/ui/sonner.tsx +25 -0
  55. package/components/ui/spinner.tsx +16 -0
  56. package/components/ui/switch.tsx +31 -0
  57. package/components/ui/table.tsx +116 -0
  58. package/components/ui/tabs.tsx +66 -0
  59. package/components/ui/textarea.tsx +18 -0
  60. package/components/ui/toast.tsx +129 -0
  61. package/components/ui/toaster.tsx +35 -0
  62. package/components/ui/toggle-group.tsx +73 -0
  63. package/components/ui/toggle.tsx +47 -0
  64. package/components/ui/tooltip.tsx +61 -0
  65. package/components/ui/use-mobile.tsx +19 -0
  66. package/components/ui/use-toast.ts +191 -0
  67. package/components.json +21 -0
  68. package/docs/components/button.mdx +155 -0
  69. package/docs/components/input.mdx +157 -0
  70. package/docs/components/pagination.mdx +186 -0
  71. package/docs/components/switch.mdx +134 -0
  72. package/docs/doc_build/.nojekyll +0 -0
  73. package/docs/doc_build/404.html +15 -0
  74. package/docs/doc_build/components/button.html +39 -0
  75. package/docs/doc_build/components/input.html +39 -0
  76. package/docs/doc_build/components/pagination.html +39 -0
  77. package/docs/doc_build/components/switch.html +38 -0
  78. package/docs/doc_build/guide/introduction.html +58 -0
  79. package/docs/doc_build/guide/quick-start.html +98 -0
  80. package/docs/doc_build/guide/theme.html +139 -0
  81. package/docs/doc_build/index.html +15 -0
  82. package/docs/doc_build/logo.svg +1 -0
  83. package/docs/doc_build/static/css/styles.5a3e7113.css +1 -0
  84. package/docs/doc_build/static/js/414.04bb58dd.js +6 -0
  85. package/docs/doc_build/static/js/414.04bb58dd.js.LICENSE.txt +21 -0
  86. package/docs/doc_build/static/js/async/166.f43be01a.js +2 -0
  87. package/docs/doc_build/static/js/async/166.f43be01a.js.LICENSE.txt +19 -0
  88. package/docs/doc_build/static/js/async/218.cd780e24.js +1 -0
  89. package/docs/doc_build/static/js/async/232.11414fd7.js +1 -0
  90. package/docs/doc_build/static/js/async/416.b217df75.js +1 -0
  91. package/docs/doc_build/static/js/async/509.97958e51.js +1 -0
  92. package/docs/doc_build/static/js/async/512.9047d21e.js +1 -0
  93. package/docs/doc_build/static/js/async/531.131f5963.js +1 -0
  94. package/docs/doc_build/static/js/async/562.b402b94f.js +2 -0
  95. package/docs/doc_build/static/js/async/562.b402b94f.js.LICENSE.txt +11 -0
  96. package/docs/doc_build/static/js/async/637.cb5d76c9.js +1 -0
  97. package/docs/doc_build/static/js/async/712.558b85be.js +1 -0
  98. package/docs/doc_build/static/js/index.0991c749.js +1 -0
  99. package/docs/doc_build/static/js/lib-react.ce4199ca.js +2 -0
  100. package/docs/doc_build/static/js/lib-react.ce4199ca.js.LICENSE.txt +49 -0
  101. package/docs/doc_build/static/js/lib-router.4000fe55.js +2 -0
  102. package/docs/doc_build/static/js/lib-router.4000fe55.js.LICENSE.txt +32 -0
  103. package/docs/doc_build/static/js/styles.f2af9a40.js +1 -0
  104. package/docs/doc_build/static/search_index.72c9c372.json +1 -0
  105. package/docs/docs/public/logo.svg +1 -0
  106. package/docs/guide/introduction.md +50 -0
  107. package/docs/guide/quick-start.md +132 -0
  108. package/docs/guide/theme.md +230 -0
  109. package/docs/index.md +85 -0
  110. package/docs/package.json +22 -0
  111. package/docs/public/logo.svg +1 -0
  112. package/docs/rspress.config.ts +116 -0
  113. package/hooks/use-mobile.ts +19 -0
  114. package/hooks/use-toast.ts +191 -0
  115. package/next.config.mjs +11 -0
  116. package/package.json +75 -0
  117. package/packages/components/package.json +34 -0
  118. package/packages/components/src/button/Button.tsx +83 -0
  119. package/packages/components/src/button/button.css +256 -0
  120. package/packages/components/src/button/index.ts +2 -0
  121. package/packages/components/src/index.ts +8 -0
  122. package/packages/components/src/input/Input.tsx +230 -0
  123. package/packages/components/src/input/index.ts +2 -0
  124. package/packages/components/src/input/input.css +99 -0
  125. package/packages/components/src/pagination/Pagination.tsx +271 -0
  126. package/packages/components/src/pagination/index.ts +1 -0
  127. package/packages/components/src/pagination/pagination.css +225 -0
  128. package/packages/components/src/switch/Switch.tsx +145 -0
  129. package/packages/components/src/switch/index.ts +2 -0
  130. package/packages/components/src/switch/switch.css +119 -0
  131. package/packages/components/tsconfig.json +12 -0
  132. package/packages/components/vite.config.ts +31 -0
  133. package/packages/core/package.json +23 -0
  134. package/packages/core/src/hooks/useControllableState.ts +31 -0
  135. package/packages/core/src/hooks/useEventListener.ts +37 -0
  136. package/packages/core/src/index.ts +7 -0
  137. package/packages/core/src/utils/classnames.ts +48 -0
  138. package/packages/core/tsconfig.json +12 -0
  139. package/packages/core/vite.config.ts +24 -0
  140. package/packages/theme/package.json +20 -0
  141. package/packages/theme/src/index.css +138 -0
  142. package/packages/theme/src/index.ts +1 -0
  143. package/packages/theme/vite.config.ts +21 -0
  144. package/play/index.html +13 -0
  145. package/play/package.json +25 -0
  146. package/play/src/App.tsx +237 -0
  147. package/play/src/index.css +93 -0
  148. package/play/src/main.tsx +14 -0
  149. package/play/tsconfig.json +8 -0
  150. package/play/vite.config.ts +10 -0
  151. package/pnpm-workspace.yaml +4 -0
  152. package/postcss.config.mjs +8 -0
  153. package/public/logo.svg +1 -0
  154. package/scripts/build.sh +19 -0
  155. package/scripts/deploy-docs.js +38 -0
  156. package/styles/globals.css +125 -0
  157. package/tsconfig.json +30 -0
package/docs/doc_build/guide/theme.html ADDED
@@ -0,0 +1,139 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <meta name="generator" content="Rspress v1.47.0">
8
+ <title data-rh="true">主题定制 - SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
9
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.04bb58dd.js"></script><script defer src="/sevenDesign/static/js/index.0991c749.js"></script><link href="/sevenDesign/static/css/styles.5a3e7113.css" rel="stylesheet"></head>
10
+
11
+ <body >
12
+ <div id="root"><link rel="preload" as="image" href="/sevenDesign/logo.svg"/><div class="navContainer_d18b1 rspress-nav px-6 sticky_ddfa7"><div class="container_e4235 flex justify-between items-center h-full"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_a2fea"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_df1fb"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg><p class="searchWord_af2c1">Search</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_d85a9"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div><div class="flex-center flex-row"><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6m0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4M12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3M19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3M3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3M18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5s.2.8-.1 1.1c-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2M9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2"></path></svg></div></div></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div><div class="mobileNavMenu_e7045"><div class="navScreen_ec30c rspress-nav-screen" id="navScreen"><div class="container_c935d"><div class="navMenu_b887b"><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a></div><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_bf893 flex justify-center"></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" rspress-mobile-hamburger navHamburger_ac64c text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="docLayout_af141 pt-0"><aside class="sidebar_dd719 rspress-sidebar "><div class="navTitleMask_fb17c"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div></div><div class="rspress-scrollbar sidebarContent_da296"><nav class="pb-2"><section class="rspress-sidebar-section mt-0.5 block" style="margin-left:0"><div class="rspress-sidebar-collapse flex justify-between items-center menuItem_ac22e" style="border-radius:0 var(--rp-radius) var(--rp-radius) 0;cursor:pointer"><h2 class="py-2 px-3 text-sm font-medium flex" style="font-size:14px;padding-left:24px;font-weight:bold"><span class="flex-center" style="font-size:14px">开始</span></h2><div class="collapseContainer_d6e4e p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="rspress-sidebar-group transition-opacity duration-500 ease-in-out" style="opacity:1;margin-left:12px"><div class="rspress-sidebar-item"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>介绍</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/guide/quick-start.html" class="link_a7cea menuLink_bb039"><div class="menuItem_ac22e mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>快速开始</span></div></a></div><div class="rspress-sidebar-item"><a href="/sevenDesign/guide/theme.html" class="link_a7cea menuLink_bb039"><div class="menuItemActive_de63c mt-0.5 py-2 px-3 font-medium flex" style="font-size:13px;margin-left:18px;border-radius:0 var(--rp-radius) var(--rp-radius) 0"><span>主题定制</span></div></a></div></div></div></section></nav></div></aside><div class="flex-1 relative min-w-0"><div class="rspress-sidebar-menu-container "><div class="rspress-sidebar-menu"><button type="button" class="flex-center mr-auto"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button><button type="button" class="flex-center ml-auto"><span class="text-sm">ON THIS PAGE</span><div class="text-md mr-2" style="transform:rotate(0deg);transition:transform 0.2s ease-out;margin-top:2px"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></button><div class="rspress-local-toc-container "><ul><li><a href="#css-variables" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">CSS Variables</span></a></li><li><a href="#品牌色" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">品牌色</span></a></li><li><a href="#文本颜色" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">文本颜色</span></a></li><li><a href="#边框颜色" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">边框颜色</span></a></li><li><a href="#背景色" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">背景色</span></a></li><li><a href="#自定义主题" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">自定义主题</span></a></li><li><a href="#方式一覆盖-css-variables" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">方式一：覆盖 CSS Variables</span></a></li><li><a href="#方式二使用内联样式" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">方式二：使用内联样式</span></a></li><li><a href="#暗色主题" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">暗色主题</span></a></li><li><a href="#自定义暗色主题" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">自定义暗色主题</span></a></li><li><a href="#完整的-css-variables-列表" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">完整的 CSS Variables 列表</span></a></li><li><a href="#颜色" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">颜色</span></a></li><li><a href="#文本颜色-1" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">文本颜色</span></a></li><li><a href="#边框" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">边框</span></a></li><li><a href="#字体" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">字体</span></a></li><li><a href="#组件尺寸" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">组件尺寸</span></a></li><li><a href="#阴影" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">阴影</span></a></li><li><a href="#示例" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">示例</span></a></li><li><a href="#创建绿色主题" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">创建绿色主题</span></a></li><li><a href="#创建紧凑主题" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:12px"><span class="rspress-toc-link-text block">创建紧凑主题</span></a></li><li><a href="#最佳实践" class="link_a7cea rspress-toc-link sm:text-normal text-sm" style="margin-left:0"><span class="rspress-toc-link-text block">最佳实践</span></a></li></ul></div></div></div><div class="content_ff766 rspress-doc-container flex"><div class="flex-1 overflow-x-auto"><div class="rspress-doc"><!--$--><h1 id="主题定制" class="rspress-doc-title text-3xl mb-10 leading-10 tracking-tight title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#主题定制">#</a>主题定制</h1>
13
+ <p class="my-4 leading-7">SevenDesign 使用 CSS Variables 实现主题定制，你可以轻松地修改组件的样式。</p>
14
+ <h2 id="css-variables" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#css-variables">#</a>CSS Variables</h2>
15
+ <p class="my-4 leading-7">所有的设计 token 都以 CSS Variables 的形式暴露出来，你可以通过覆盖这些变量来自定义主题。</p>
16
+ <h3 id="品牌色" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#品牌色">#</a>品牌色</h3>
17
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token selector">:root</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
18
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #409eff</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
19
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-success</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #67c23a</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
20
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-warning</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #e6a23c</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
21
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-danger</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #f56c6c</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
22
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-info</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #909399</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
23
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
24
+ <h3 id="文本颜色" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#文本颜色">#</a>文本颜色</h3>
25
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token selector">:root</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
26
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-text-color-primary</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #303133</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
27
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-text-color-regular</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #606266</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
28
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-text-color-secondary</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #909399</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
29
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-text-color-placeholder</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #a8abb2</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
30
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-text-color-disabled</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #c0c4cc</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
31
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
32
+ <h3 id="边框颜色" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#边框颜色">#</a>边框颜色</h3>
33
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token selector">:root</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
34
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-border-color</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #dcdfe6</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
35
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-border-color-light</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #e4e7ed</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
36
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-border-color-lighter</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #ebeef5</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
37
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-border-color-extra-light</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #f2f6fc</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
38
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
39
+ <h3 id="背景色" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#背景色">#</a>背景色</h3>
40
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token selector">:root</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
41
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-bg-color</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #ffffff</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
42
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-bg-color-page</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #f2f3f5</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
43
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-bg-color-overlay</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #ffffff</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
44
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
45
+ <h2 id="自定义主题" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#自定义主题">#</a>自定义主题</h2>
46
+ <h3 id="方式一覆盖-css-variables" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#方式一覆盖-css-variables">#</a>方式一：覆盖 CSS Variables</h3>
47
+ <p class="my-4 leading-7">在你的项目中创建一个样式文件，覆盖默认的 CSS Variables：</p>
48
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">/* custom-theme.css */</span><span>
49
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token selector">:root</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
50
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/* 修改主色调 */</span><span>
51
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #1890ff</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
52
+ </span></span><span style="display:block;padding:0 1.25rem">
53
+ </span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/* 修改圆角 */</span><span>
54
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-border-radius-base</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> 8px</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
55
+ </span></span><span style="display:block;padding:0 1.25rem">
56
+ </span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-comment)">/* 修改字体大小 */</span><span>
57
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-font-size-base</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> 16px</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
58
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
59
+ <p class="my-4 leading-7">然后在你的应用入口引入：</p>
60
+ <div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;seven-design-ui/dist/style.css&#x27;</span><span>
61
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-keyword)">import</span><span> </span><span class="token" style="color:var(--code-token-string)">&#x27;./custom-theme.css&#x27;</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
62
+ <h3 id="方式二使用内联样式" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#方式二使用内联样式">#</a>方式二：使用内联样式</h3>
63
+ <p class="my-4 leading-7">你也可以直接在 HTML 中修改 CSS Variables：</p>
64
+ <div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">App</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
65
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
66
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token" style="color:var(--code-token-function)">div</span><span class="token" style="color:var(--code-token-function)">
67
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">style</span><span class="token script language-javascript script-punctuation" style="color:var(--code-token-function)">=</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">{</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">{</span><span class="token script language-javascript" style="color:var(--code-token-function)">
68
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript string-property" style="color:var(--code-token-function)">&#x27;--sd-color-primary&#x27;</span><span class="token script language-javascript operator" style="color:var(--code-token-function)">:</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-string)">&#x27;#1890ff&#x27;</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">,</span><span class="token script language-javascript" style="color:var(--code-token-function)">
69
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript string-property" style="color:var(--code-token-function)">&#x27;--sd-border-radius-base&#x27;</span><span class="token script language-javascript operator" style="color:var(--code-token-function)">:</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-string)">&#x27;8px&#x27;</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">,</span><span class="token script language-javascript" style="color:var(--code-token-function)">
70
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">}</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-keyword)">as</span><span class="token script language-javascript" style="color:var(--code-token-function)"> React</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">.</span><span class="token script language-javascript" style="color:var(--code-token-function)">CSSProperties</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-function)">
71
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">
72
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token plain-text"> </span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token class-name" style="color:var(--code-token-function)">Button</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">type</span><span class="token attr-equals" style="color:var(--code-token-punctuation)">=</span><span class="token" style="color:var(--code-token-punctuation)">&quot;</span><span class="token" style="color:var(--code-token-string-expression)">primary</span><span class="token" style="color:var(--code-token-punctuation)">&quot;</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">自定义主题按钮</span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token class-name" style="color:var(--code-token-function)">Button</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">
73
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token plain-text"> </span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token" style="color:var(--code-token-function)">div</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span>
74
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">)</span><span>
75
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
76
+ <h2 id="暗色主题" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#暗色主题">#</a>暗色主题</h2>
77
+ <p class="my-4 leading-7">SevenDesign 内置了暗色主题支持，只需在根元素添加 <code>.sd-dark</code> 类名：</p>
78
+ <div class="language-tsx"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-tsx" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-keyword)">function</span><span> </span><span class="token" style="color:var(--code-token-function)">App</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
79
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">const</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">[</span><span>dark</span><span class="token" style="color:var(--code-token-punctuation)">,</span><span> setDark</span><span class="token" style="color:var(--code-token-punctuation)">]</span><span> </span><span class="token operator">=</span><span> React</span><span class="token" style="color:var(--code-token-punctuation)">.</span><span class="token" style="color:var(--code-token-function)">useState</span><span class="token" style="color:var(--code-token-punctuation)">(</span><span class="token boolean">false</span><span class="token" style="color:var(--code-token-punctuation)">)</span><span>
80
+ </span></span><span style="display:block;padding:0 1.25rem">
81
+ </span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-keyword)">return</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">(</span><span>
82
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token" style="color:var(--code-token-function)">div</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">className</span><span class="token script language-javascript script-punctuation" style="color:var(--code-token-function)">=</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">{</span><span class="token script language-javascript" style="color:var(--code-token-function)">dark </span><span class="token script language-javascript operator" style="color:var(--code-token-function)">?</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-string)">&#x27;sd-dark&#x27;</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript operator" style="color:var(--code-token-function)">:</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-string)">&#x27;&#x27;</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">
83
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token plain-text"> </span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token" style="color:var(--code-token-function)">button</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">onClick</span><span class="token script language-javascript script-punctuation" style="color:var(--code-token-function)">=</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">{</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">(</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">)</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript operator" style="color:var(--code-token-function)">=&gt;</span><span class="token script language-javascript" style="color:var(--code-token-function)"> </span><span class="token script language-javascript" style="color:var(--code-token-function)">setDark</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">(</span><span class="token script language-javascript operator" style="color:var(--code-token-function)">!</span><span class="token script language-javascript" style="color:var(--code-token-function)">dark</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">)</span><span class="token script language-javascript" style="color:var(--code-token-punctuation)">}</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">切换主题</span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token" style="color:var(--code-token-function)">button</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">
84
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token plain-text"> </span><span class="token" style="color:var(--code-token-punctuation)">&lt;</span><span class="token class-name" style="color:var(--code-token-function)">Button</span><span class="token" style="color:var(--code-token-function)"> </span><span class="token" style="color:var(--code-token-symbol)">type</span><span class="token attr-equals" style="color:var(--code-token-punctuation)">=</span><span class="token" style="color:var(--code-token-punctuation)">&quot;</span><span class="token" style="color:var(--code-token-string-expression)">primary</span><span class="token" style="color:var(--code-token-punctuation)">&quot;</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">按钮</span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token class-name" style="color:var(--code-token-function)">Button</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span class="token plain-text">
85
+ </span></span><span style="display:block;padding:0 1.25rem"><span class="token plain-text"> </span><span class="token" style="color:var(--code-token-punctuation)">&lt;/</span><span class="token" style="color:var(--code-token-function)">div</span><span class="token" style="color:var(--code-token-punctuation)">&gt;</span><span>
86
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-punctuation)">)</span><span>
87
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
88
+ <h3 id="自定义暗色主题" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#自定义暗色主题">#</a>自定义暗色主题</h3>
89
+ <p class="my-4 leading-7">你也可以覆盖暗色主题的 CSS Variables：</p>
90
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">/* custom-dark-theme.css */</span><span>
91
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token selector">.sd-dark</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
92
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #177ddc</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
93
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-bg-color</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #1f1f1f</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
94
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-text-color-primary</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #e5e5e5</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
95
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
96
+ <h2 id="完整的-css-variables-列表" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#完整的-css-variables-列表">#</a>完整的 CSS Variables 列表</h2>
97
+ <h3 id="颜色" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#颜色">#</a>颜色</h3>
98
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">变量名</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-color-primary</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">主色</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#409eff</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-color-success</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">成功色</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#67c23a</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-color-warning</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">警告色</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#e6a23c</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-color-danger</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">危险色</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#f56c6c</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-color-info</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">信息色</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#909399</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-color-white</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">白色</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#ffffff</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-color-black</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">黑色</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#000000</code></td></tr></tbody></table>
99
+ <h3 id="文本颜色-1" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#文本颜色-1">#</a>文本颜色</h3>
100
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">变量名</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-text-color-primary</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">主要文本</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#303133</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-text-color-regular</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">常规文本</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#606266</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-text-color-secondary</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">次要文本</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#909399</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-text-color-placeholder</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">占位文本</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#a8abb2</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-text-color-disabled</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">禁用文本</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#c0c4cc</code></td></tr></tbody></table>
101
+ <h3 id="边框" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#边框">#</a>边框</h3>
102
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">变量名</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-border-color</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">边框颜色</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#dcdfe6</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-border-color-light</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">浅边框</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#e4e7ed</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-border-color-lighter</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">更浅边框</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#ebeef5</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-border-color-extra-light</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">极浅边框</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>#f2f6fc</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-border-radius-base</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">基础圆角</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>4px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-border-radius-small</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">小圆角</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>2px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-border-radius-round</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">圆形</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>20px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-border-radius-circle</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">圆</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>100%</code></td></tr></tbody></table>
103
+ <h3 id="字体" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#字体">#</a>字体</h3>
104
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">变量名</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-font-size-extra-large</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">超大字号</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>20px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-font-size-large</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">大字号</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>18px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-font-size-medium</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">中等字号</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>16px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-font-size-base</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">基础字号</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>14px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-font-size-small</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">小字号</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>13px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-font-size-extra-small</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">超小字号</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>12px</code></td></tr></tbody></table>
105
+ <h3 id="组件尺寸" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#组件尺寸">#</a>组件尺寸</h3>
106
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">变量名</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">默认值</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-component-size-large</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">大尺寸</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>40px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-component-size-default</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">默认尺寸</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>32px</code></td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-component-size-small</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">小尺寸</td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>24px</code></td></tr></tbody></table>
107
+ <h3 id="阴影" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#阴影">#</a>阴影</h3>
108
+ <table class="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"><thead><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">变量名</th><th class="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider">说明</th></tr></thead><tbody><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-box-shadow-base</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">基础阴影</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-box-shadow-light</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">浅阴影</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-box-shadow-lighter</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">更浅阴影</td></tr><tr class="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"><code>--sd-box-shadow-dark</code></td><td class="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider">深阴影</td></tr></tbody></table>
109
+ <h2 id="示例" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#示例">#</a>示例</h2>
110
+ <h3 id="创建绿色主题" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#创建绿色主题">#</a>创建绿色主题</h3>
111
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">/* green-theme.css */</span><span>
112
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token selector">:root</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
113
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #52c41a</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
114
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary-light-3</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #7ed321</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
115
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary-light-5</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #95de64</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
116
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary-light-7</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #b7eb8f</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
117
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary-light-8</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #d9f7be</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
118
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary-light-9</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #f6ffed</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
119
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-color-primary-dark-2</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> #389e0d</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
120
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
121
+ <h3 id="创建紧凑主题" class="mt-10 mb-2 leading-7 text-xl title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#创建紧凑主题">#</a>创建紧凑主题</h3>
122
+ <div class="language-css"><div class="rspress-code-content rspress-scrollbar"><div><pre class="code" style="background-color:inherit"><code class="language-css" style="white-space:pre"><span style="display:block;padding:0 1.25rem"><span class="token" style="color:var(--code-token-comment)">/* compact-theme.css */</span><span>
123
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token selector">:root</span><span> </span><span class="token" style="color:var(--code-token-punctuation)">{</span><span>
124
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-component-size-large</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> 36px</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
125
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-component-size-default</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> 28px</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
126
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-component-size-small</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> 20px</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
127
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-font-size-base</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> 12px</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
128
+ </span></span><span style="display:block;padding:0 1.25rem"><span> </span><span class="token" style="color:var(--code-token-parameter)">--sd-border-radius-base</span><span class="token" style="color:var(--code-token-punctuation)">:</span><span> 2px</span><span class="token" style="color:var(--code-token-punctuation)">;</span><span>
129
+ </span></span><span style="display:block;padding:0 1.25rem"><span></span><span class="token" style="color:var(--code-token-punctuation)">}</span></span></code></pre></div><div class="code-button-group_fb445"><button title="Toggle code wrap"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrapped_fb89b"><path fill="#22a041" d="M21 5H3v2h18zM3 19h7v-2H3zm0-6h15c1 0 2 .43 2 2s-1 2-2 2h-2v-2l-4 3 4 3v-2h2c2.95 0 4-1.27 4-4 0-2.72-1-4-4-4H3z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="icon-wrap_ccd3d"><path fill="currentColor" d="M16 7H3V5h13zM3 19h13v-2H3zm19-7-4-3v2H3v2h15v2z"></path></svg></button><button class="code-copy-button_c5089" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 30 30" class="icon-copy_ef942"><path fill="currentColor" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"></path><path fill="currentColor" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"></path></svg><svg width="32" height="32" viewBox="0 0 30 30" class="icon-success_d5ec0"><path fill="#49cd37" d="m13 24-9-9 1.414-1.414L13 21.171 26.586 7.586 28 9z"></path></svg></button></div></div></div>
130
+ <h2 id="最佳实践" class="mt-12 mb-6 pt-8 text-2xl tracking-tight border-t-[1px] border-divider-light title_fb7eb"><a class="link_a7cea header-anchor link_a9ef4 inline-link_f855c" aria-hidden="true" href="#最佳实践">#</a>最佳实践</h2>
131
+ <ol class="list-decimal pl-5 my-4 leading-7">
132
+ <li class="[&amp;:not(:first-child)]:mt-2"><strong class="font-semibold">保持一致性</strong>：确保主题颜色在整个应用中保持一致</li>
133
+ <li class="[&amp;:not(:first-child)]:mt-2"><strong class="font-semibold">考虑可访问性</strong>：确保文本和背景色有足够的对比度</li>
134
+ <li class="[&amp;:not(:first-child)]:mt-2"><strong class="font-semibold">测试暗色模式</strong>：如果支持暗色模式，确保在两种模式下都测试过</li>
135
+ <li class="[&amp;:not(:first-child)]:mt-2"><strong class="font-semibold">使用设计系统</strong>：建议基于设计系统来定制主题，而不是随意修改</li>
136
+ </ol><!--/$--></div><div class="rspress-doc-footer"><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_c92d1 flex flex-col"><a href="/sevenDesign/guide/quick-start.html" class="link_a7cea pager-link_e0d2d"><span class="desc_dcc01">Previous Page</span><span class="title_a3acb">快速开始</span></a></div><div class="next_c11be flex flex-col"></div></div></footer></div></div><div class="aside-container_bc5fa"><div class="flex flex-col"><div id="aside-container" class="relative text-sm font-medium"><div class="leading-7 block text-sm font-semibold pl-3">ON THIS PAGE</div><nav class="mt-1"><ul class="relative"><li><a href="#css-variables" title="CSS Variables" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">CSS Variables</span></a></li><li><a href="#品牌色" title="品牌色" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">品牌色</span></a></li><li><a href="#文本颜色" title="文本颜色" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">文本颜色</span></a></li><li><a href="#边框颜色" title="边框颜色" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">边框颜色</span></a></li><li><a href="#背景色" title="背景色" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">背景色</span></a></li><li><a href="#自定义主题" title="自定义主题" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">自定义主题</span></a></li><li><a href="#方式一覆盖-css-variables" title="方式一：覆盖 CSS Variables" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">方式一：覆盖 CSS Variables</span></a></li><li><a href="#方式二使用内联样式" title="方式二：使用内联样式" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">方式二：使用内联样式</span></a></li><li><a href="#暗色主题" title="暗色主题" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">暗色主题</span></a></li><li><a href="#自定义暗色主题" title="自定义暗色主题" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">自定义暗色主题</span></a></li><li><a href="#完整的-css-variables-列表" title="完整的 CSS Variables 列表" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">完整的 CSS Variables 列表</span></a></li><li><a href="#颜色" title="颜色" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">颜色</span></a></li><li><a href="#文本颜色-1" title="文本颜色" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">文本颜色</span></a></li><li><a href="#边框" title="边框" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">边框</span></a></li><li><a href="#字体" title="字体" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">字体</span></a></li><li><a href="#组件尺寸" title="组件尺寸" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">组件尺寸</span></a></li><li><a href="#阴影" title="阴影" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">阴影</span></a></li><li><a href="#示例" title="示例" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">示例</span></a></li><li><a href="#创建绿色主题" title="创建绿色主题" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">创建绿色主题</span></a></li><li><a href="#创建紧凑主题" title="创建紧凑主题" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:12px;font-weight:semibold"><span class="aside-link-text block">创建紧凑主题</span></a></li><li><a href="#最佳实践" title="最佳实践" class="aside-link transition-all duration-300 hover:text-text-1 text-text-2 block" style="margin-left:0;font-weight:semibold"><span class="aside-link-text block">最佳实践</span></a></li></ul></nav></div></div></div></div></div></div></section></div>
137
+ <div id="search-container"></div>
138
+ </body>
139
+ </html>
package/docs/doc_build/index.html ADDED
@@ -0,0 +1,15 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <meta name="generator" content="Rspress v1.47.0">
8
+ <title data-rh="true">SevenDesign</title><meta data-rh="true" name="description" content="企业级 React UI 组件库"/>
9
+ <script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script><link rel="icon" href="/sevenDesign/logo.svg" type="image/svg+xml"><script defer src="/sevenDesign/static/js/styles.f2af9a40.js"></script><script defer src="/sevenDesign/static/js/lib-react.ce4199ca.js"></script><script defer src="/sevenDesign/static/js/lib-router.4000fe55.js"></script><script defer src="/sevenDesign/static/js/414.04bb58dd.js"></script><script defer src="/sevenDesign/static/js/index.0991c749.js"></script><link href="/sevenDesign/static/css/styles.5a3e7113.css" rel="stylesheet"></head>
10
+
11
+ <body >
12
+ <div id="root"><link rel="preload" as="image" href="/sevenDesign/logo.svg"/><div class="navContainer_d18b1 rspress-nav px-6 sticky_ddfa7"><div class="container_e4235 flex justify-between items-center h-full"><div class="navBarTitle_c5f07"><a href="/sevenDesign/index.html" class="link_a7cea flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><div class="mr-1 min-w-8"><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo dark:hidden"/><img src="/sevenDesign/logo.svg" alt="logo" id="logo" class="rspress-logo hidden dark:block"/></div></a></div><div class="flex flex-1 justify-end items-center"><div class="rightNav_a2fea"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="rspress-nav-search-button navSearchButton_df1fb"><button><svg width="18" height="18" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg><p class="searchWord_af2c1">Search</p><div style="opacity:0"><span></span><span>K</span></div></button></div><div class="mobileNavSearchButton_d85a9"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--rp-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9"></path></svg></div></div><div class="rspress-nav-menu menu h-14"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div><div class="flex-center flex-row"><div class="mx-2"><div class="md:mr-2 rspress-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400 cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300 w-7 h-7"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="dark:hidden" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6m0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4M12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1M5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3M19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3M3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1M4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3M18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" class="hidden dark:block" width="18" height="18" fill="currentColor"><path d="M12.1 22h-.9c-5.5-.5-9.5-5.4-9-10.9.4-4.8 4.2-8.6 9-9 .4 0 .8.2 1 .5s.2.8-.1 1.1c-2 2.7-1.4 6.4 1.3 8.4 2.1 1.6 5 1.6 7.1 0 .3-.2.7-.3 1.1-.1.3.2.5.6.5 1-.2 2.7-1.5 5.1-3.6 6.8-1.9 1.4-4.1 2.2-6.4 2.2M9.3 4.4c-2.9 1-5 3.6-5.2 6.8-.4 4.4 2.8 8.3 7.2 8.7 2.1.2 4.2-.4 5.8-1.8 1.1-.9 1.9-2.1 2.4-3.4-2.5.9-5.3.5-7.5-1.1-2.8-2.2-3.9-5.9-2.7-9.2"></path></svg></div></div></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div><div class="mobileNavMenu_e7045"><div class="navScreen_ec30c rspress-nav-screen" id="navScreen"><div class="container_c935d"><div class="navMenu_b887b"><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/guide/introduction.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">指南</div></a></div><div class="navMenuItem_e7978 w-full"><a href="/sevenDesign/components/button.html" class="link_a7cea "><div class="rspress-nav-menu-item singleItem_c1154 text-sm font-medium mx-1.5 px-3 py-2 flex items-center break-keep">组件</div></a></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_bf893 flex justify-center"></div><div class="social-links menu-item_e90a6 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/7777even/sevenDesign.git" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_a4ad0"><div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a></div></div></div></div></div><button aria-label="mobile hamburger" class=" rspress-mobile-hamburger navHamburger_ac64c text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div><section><div class="relative" style="min-height:calc(100vh - var(--rp-nav-height));padding-bottom:80px"><div class="pb-12"><div class="m-auto pt-0 px-6 pb-12 sm:pt-10 sm:px-16 md:pt-16 md:px-16 md:pb-16 relative"><div class="mask_bbaa6" style="left:75%"></div><div class="m-auto flex flex-col md:flex-row max-w-6xl min-h-[50vh] mt-12 sm:mt-0"><div class="flex flex-col justify-center items-center text-center max-w-xl sm:max-w-4xl m-auto order-2 md:order-1"><h1 class="font-bold text-3xl pb-2 sm:text-6xl md:text-7xl m-auto sm:m-4 md:m-0 md:pb-3 lg:pb-2 leading-tight z-10"><span class="clip_aacad" style="line-height:1.3">SevenDesign</span></h1><p class="rspress-home-hero-text mx-auto md:m-0 text-3xl sm:text-5xl md:text-6xl sm:pb-2 font-bold z-10 sm:max-w-xl" style="line-height:1.2">企业级 React UI 组件库</p><p class="rspress-home-hero-tagline whitespace-pre-wrap pt-4 m-auto md:m-0 md:text-[1.5rem] text-text-2 font-medium z-10 sm:max-w-xl">现代化、可定制、TypeScript 驱动的组件库</p><div class="grid md:flex md:flex-wrap md:justify-center gap-3 m--1.5 pt-6 sm:pt-8 z-10"><div class="flex flex-shrink-0 p-1"><a class="link_a7cea button_e8e0d brand_dc619 big_f7033 w-full" href="/sevenDesign/guide/quick-start.html">快速开始</a></div><div class="flex flex-shrink-0 p-1"><a class="link_a7cea button_e8e0d alt_b0249 big_f7033 w-full" href="/sevenDesign/components/button.html">组件示例</a></div></div></div><div class="rspress-home-hero-image md:flex-center m-auto order-1 md:order-2 sm:flex md:none lg:flex"><img src="/sevenDesign/logo.svg" alt="SevenDesign Logo" width="375" height="375" class="dark:hidden"/><img src="/sevenDesign/logo.svg" alt="SevenDesign Logo" width="375" height="375" class="hidden dark:block"/></div></div></div><div class="overflow-hidden m-auto flex flex-wrap max-w-6xl"><div class="grid-4_bd059 rounded hover:var(--rp-c-brand)"><div class="h-full p-2"><article class="rspress-home-feature-card featureCard_a17b6 h-full p-8 rounded-4xl border-transparent" style="cursor:auto"><h2 class="rspress-home-feature-title font-bold text-center">🎨 精美设计</h2><p class="rspress-home-feature-detail leading-6 pt-2 text-sm text-text-2 font-medium">现代化的设计风格，参考 Element Plus，提供优雅的用户体验</p></article></div></div><div class="grid-4_bd059 rounded hover:var(--rp-c-brand)"><div class="h-full p-2"><article class="rspress-home-feature-card featureCard_a17b6 h-full p-8 rounded-4xl border-transparent" style="cursor:auto"><h2 class="rspress-home-feature-title font-bold text-center">📦 开箱即用</h2><p class="rspress-home-feature-detail leading-6 pt-2 text-sm text-text-2 font-medium">丰富的组件库，满足企业级应用的各种需求</p></article></div></div><div class="grid-4_bd059 rounded hover:var(--rp-c-brand)"><div class="h-full p-2"><article class="rspress-home-feature-card featureCard_a17b6 h-full p-8 rounded-4xl border-transparent" style="cursor:auto"><h2 class="rspress-home-feature-title font-bold text-center">🔧 TypeScript</h2><p class="rspress-home-feature-detail leading-6 pt-2 text-sm text-text-2 font-medium">完整的类型定义，提供更好的开发体验和代码提示</p></article></div></div><div class="grid-4_bd059 rounded hover:var(--rp-c-brand)"><div class="h-full p-2"><article class="rspress-home-feature-card featureCard_a17b6 h-full p-8 rounded-4xl border-transparent" style="cursor:auto"><h2 class="rspress-home-feature-title font-bold text-center">🎭 主题定制</h2><p class="rspress-home-feature-detail leading-6 pt-2 text-sm text-text-2 font-medium">基于 CSS Variables 的主题系统，轻松定制你的品牌风格</p></article></div></div><div class="grid-4_bd059 rounded hover:var(--rp-c-brand)"><div class="h-full p-2"><article class="rspress-home-feature-card featureCard_a17b6 h-full p-8 rounded-4xl border-transparent" style="cursor:auto"><h2 class="rspress-home-feature-title font-bold text-center">⚡ 按需加载</h2><p class="rspress-home-feature-detail leading-6 pt-2 text-sm text-text-2 font-medium">支持 Tree-shaking，只打包你使用的组件，减小打包体积</p></article></div></div><div class="grid-4_bd059 rounded hover:var(--rp-c-brand)"><div class="h-full p-2"><article class="rspress-home-feature-card featureCard_a17b6 h-full p-8 rounded-4xl border-transparent" style="cursor:auto"><h2 class="rspress-home-feature-title font-bold text-center">📚 完善文档</h2><p class="rspress-home-feature-detail leading-6 pt-2 text-sm text-text-2 font-medium">详细的组件文档和示例代码，帮助你快速上手</p></article></div></div></div></div></div></section></div>
13
+ <div id="search-container"></div>
14
+ </body>
15
+ </html>