@modern-js/module-tools-docs 2.0.0-beta.4

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 (163) hide show
  1. package/LICENSE +144 -0
  2. package/docs/.island/config.ts +245 -0
  3. package/docs/.island/dist/404.html +41 -0
  4. package/docs/.island/dist/assets/before-getting-started.1b82b538.js +87 -0
  5. package/docs/.island/dist/assets/before-getting-started.582a31cc.js +87 -0
  6. package/docs/.island/dist/assets/build-config.72eb0918.js +804 -0
  7. package/docs/.island/dist/assets/build-config.d8bb1658.js +809 -0
  8. package/docs/.island/dist/assets/build-preset.96805d7d.js +256 -0
  9. package/docs/.island/dist/assets/build-preset.c20dcd40.js +256 -0
  10. package/docs/.island/dist/assets/build-your-ui.7f349247.js +2 -0
  11. package/docs/.island/dist/assets/build-your-ui.a8361604.js +2 -0
  12. package/docs/.island/dist/assets/command-preview.2d45fc82.js +264 -0
  13. package/docs/.island/dist/assets/command-preview.dc51b953.js +264 -0
  14. package/docs/.island/dist/assets/components.esm.03560353.js +9 -0
  15. package/docs/.island/dist/assets/design-system.86694ff5.js +1254 -0
  16. package/docs/.island/dist/assets/design-system.c4745cce.js +639 -0
  17. package/docs/.island/dist/assets/dev.1d326a37.js +37 -0
  18. package/docs/.island/dist/assets/dev.1fd06000.js +37 -0
  19. package/docs/.island/dist/assets/down.f35427d3.svg +1 -0
  20. package/docs/.island/dist/assets/extension.12299fd6.js +2 -0
  21. package/docs/.island/dist/assets/extension.96dc63a4.js +2 -0
  22. package/docs/.island/dist/assets/getting-started.40e9218d.js +117 -0
  23. package/docs/.island/dist/assets/getting-started.b1ed3f10.js +114 -0
  24. package/docs/.island/dist/assets/github.3bf8ccee.svg +1 -0
  25. package/docs/.island/dist/assets/index.2b2347ea.js +33 -0
  26. package/docs/.island/dist/assets/index.6cef6f5f.js +4 -0
  27. package/docs/.island/dist/assets/index.cb118238.js +36 -0
  28. package/docs/.island/dist/assets/index.ccb6ce27.js +4 -0
  29. package/docs/.island/dist/assets/island_inject.11a12ecc.js +1 -0
  30. package/docs/.island/dist/assets/island_inject.b13deaee.js +1 -0
  31. package/docs/.island/dist/assets/loading.8c9bb911.svg +1 -0
  32. package/docs/.island/dist/assets/modify-output-product.7f6bff35.js +100 -0
  33. package/docs/.island/dist/assets/modify-output-product.b91eff1f.js +100 -0
  34. package/docs/.island/dist/assets/moon.6b705924.svg +3 -0
  35. package/docs/.island/dist/assets/plugin.895932d8.js +42 -0
  36. package/docs/.island/dist/assets/plugin.d2fbc531.js +42 -0
  37. package/docs/.island/dist/assets/publish-your-project.21b8309f.js +164 -0
  38. package/docs/.island/dist/assets/publish-your-project.8d398b17.js +166 -0
  39. package/docs/.island/dist/assets/right.89674cd7.svg +1 -0
  40. package/docs/.island/dist/assets/search.0aea6901.svg +1 -0
  41. package/docs/.island/dist/assets/search.1c85d17c.js +3 -0
  42. package/docs/.island/dist/assets/search.484eca11.js +222 -0
  43. package/docs/.island/dist/assets/search.54fca8d0.js +3 -0
  44. package/docs/.island/dist/assets/style.09015a4b.css +1 -0
  45. package/docs/.island/dist/assets/style.2e5f7bc2.css +1970 -0
  46. package/docs/.island/dist/assets/sun.841dac10.svg +11 -0
  47. package/docs/.island/dist/assets/test-your-project.18bd4582.js +190 -0
  48. package/docs/.island/dist/assets/test-your-project.f53bebf7.js +190 -0
  49. package/docs/.island/dist/assets/test.0da1f99f.js +67 -0
  50. package/docs/.island/dist/assets/test.0e81f002.js +66 -0
  51. package/docs/.island/dist/assets/translator.b1077c44.svg +1 -0
  52. package/docs/.island/dist/assets/use-micro-generator.7d9e4016.js +60 -0
  53. package/docs/.island/dist/assets/use-micro-generator.db5520c1.js +60 -0
  54. package/docs/.island/dist/assets/using-storybook.57ea6b77.js +260 -0
  55. package/docs/.island/dist/assets/using-storybook.a2212f2e.js +260 -0
  56. package/docs/.island/dist/assets/welcome.0449a9c8.js +13 -0
  57. package/docs/.island/dist/assets/welcome.a8448931.js +13 -0
  58. package/docs/.island/dist/assets/why-module-engineering-solution.6ae8c0e3.js +26 -0
  59. package/docs/.island/dist/assets/why-module-engineering-solution.c9a45cbd.js +26 -0
  60. package/docs/.island/dist/chunk-COLCRJ2V.js +1 -0
  61. package/docs/.island/dist/chunk-K5FMOYDC.js +10 -0
  62. package/docs/.island/dist/chunk-WE42KMYS.js +26 -0
  63. package/docs/.island/dist/client-entry.js +3 -0
  64. package/docs/.island/dist/en/api/build-config.html +344 -0
  65. package/docs/.island/dist/en/api/build-preset.html +82 -0
  66. package/docs/.island/dist/en/api/design-system.html +155 -0
  67. package/docs/.island/dist/en/api/dev.html +45 -0
  68. package/docs/.island/dist/en/api/index.html +41 -0
  69. package/docs/.island/dist/en/api/plugin.html +48 -0
  70. package/docs/.island/dist/en/api/test.html +58 -0
  71. package/docs/.island/dist/en/guide/before-getting-started.html +127 -0
  72. package/docs/.island/dist/en/guide/build-your-ui.html +41 -0
  73. package/docs/.island/dist/en/guide/command-preview.html +100 -0
  74. package/docs/.island/dist/en/guide/extension.html +41 -0
  75. package/docs/.island/dist/en/guide/getting-started.html +76 -0
  76. package/docs/.island/dist/en/guide/modify-output-product.html +140 -0
  77. package/docs/.island/dist/en/guide/publish-your-project.html +91 -0
  78. package/docs/.island/dist/en/guide/test-your-project.html +72 -0
  79. package/docs/.island/dist/en/guide/use-micro-generator.html +65 -0
  80. package/docs/.island/dist/en/guide/using-storybook.html +113 -0
  81. package/docs/.island/dist/en/guide/welcome.html +53 -0
  82. package/docs/.island/dist/en/guide/why-module-engineering-solution.html +49 -0
  83. package/docs/.island/dist/en/index.html +42 -0
  84. package/docs/.island/dist/react-dom.js +1 -0
  85. package/docs/.island/dist/react-dom_client.js +1 -0
  86. package/docs/.island/dist/react.js +1 -0
  87. package/docs/.island/dist/react_jsx-runtime.js +10 -0
  88. package/docs/.island/dist/ssr-manifest.json +57 -0
  89. package/docs/.island/dist/test-result.png +0 -0
  90. package/docs/.island/dist/why-module-solution.png +0 -0
  91. package/docs/.island/dist/zh/api/build-config.html +347 -0
  92. package/docs/.island/dist/zh/api/build-preset.html +82 -0
  93. package/docs/.island/dist/zh/api/design-system.html +149 -0
  94. package/docs/.island/dist/zh/api/dev.html +46 -0
  95. package/docs/.island/dist/zh/api/index.html +41 -0
  96. package/docs/.island/dist/zh/api/plugin.html +48 -0
  97. package/docs/.island/dist/zh/api/test.html +59 -0
  98. package/docs/.island/dist/zh/guide/before-getting-started.html +127 -0
  99. package/docs/.island/dist/zh/guide/build-your-ui.html +41 -0
  100. package/docs/.island/dist/zh/guide/command-preview.html +100 -0
  101. package/docs/.island/dist/zh/guide/extension.html +41 -0
  102. package/docs/.island/dist/zh/guide/getting-started.html +79 -0
  103. package/docs/.island/dist/zh/guide/modify-output-product.html +140 -0
  104. package/docs/.island/dist/zh/guide/publish-your-project.html +92 -0
  105. package/docs/.island/dist/zh/guide/test-your-project.html +72 -0
  106. package/docs/.island/dist/zh/guide/use-micro-generator.html +65 -0
  107. package/docs/.island/dist/zh/guide/using-storybook.html +114 -0
  108. package/docs/.island/dist/zh/guide/welcome.html +53 -0
  109. package/docs/.island/dist/zh/guide/why-module-engineering-solution.html +49 -0
  110. package/docs/.island/dist/zh/index.html +42 -0
  111. package/docs/.island/index.html +39 -0
  112. package/docs/.island/styles/index.css +10 -0
  113. package/docs/en/api/build-config.md +501 -0
  114. package/docs/en/api/build-preset.md +214 -0
  115. package/docs/en/api/design-system.md +524 -0
  116. package/docs/en/api/dev.md +32 -0
  117. package/docs/en/api/index.md +3 -0
  118. package/docs/en/api/plugin.md +34 -0
  119. package/docs/en/api/test.md +48 -0
  120. package/docs/en/guide/advance/asset.mdx +132 -0
  121. package/docs/en/guide/advance/build-umd.mdx +241 -0
  122. package/docs/en/guide/advance/copy.md +235 -0
  123. package/docs/en/guide/advance/external-dependency.mdx +125 -0
  124. package/docs/en/guide/advance/in-depth-about-build.md +266 -0
  125. package/docs/en/guide/advance/in-depth-about-dev-command.md +22 -0
  126. package/docs/en/guide/basic/before-getting-started.md +187 -0
  127. package/docs/en/guide/basic/command-preview.md +204 -0
  128. package/docs/en/guide/basic/modify-output-product.md +145 -0
  129. package/docs/en/guide/basic/publish-your-project.md +115 -0
  130. package/docs/en/guide/basic/test-your-project.mdx +158 -0
  131. package/docs/en/guide/basic/use-micro-generator.md +35 -0
  132. package/docs/en/guide/basic/using-storybook.mdx +187 -0
  133. package/docs/en/guide/intro/getting-started.md +78 -0
  134. package/docs/en/guide/intro/welcome.md +14 -0
  135. package/docs/en/guide/intro/why-module-engineering-solution.md +17 -0
  136. package/docs/en/index.md +35 -0
  137. package/docs/public/test-result.png +0 -0
  138. package/docs/public/why-module-solution.png +0 -0
  139. package/docs/zh/api/build-config.md +570 -0
  140. package/docs/zh/api/build-preset.md +220 -0
  141. package/docs/zh/api/design-system.md +1147 -0
  142. package/docs/zh/api/dev.md +33 -0
  143. package/docs/zh/api/index.md +3 -0
  144. package/docs/zh/api/plugins.md +108 -0
  145. package/docs/zh/api/testing.md +52 -0
  146. package/docs/zh/guide/advance/asset.mdx +132 -0
  147. package/docs/zh/guide/advance/build-umd.mdx +232 -0
  148. package/docs/zh/guide/advance/copy.md +235 -0
  149. package/docs/zh/guide/advance/external-dependency.mdx +125 -0
  150. package/docs/zh/guide/advance/in-depth-about-build.md +267 -0
  151. package/docs/zh/guide/advance/in-depth-about-dev-command.md +26 -0
  152. package/docs/zh/guide/basic/before-getting-started.md +187 -0
  153. package/docs/zh/guide/basic/command-preview.md +204 -0
  154. package/docs/zh/guide/basic/modify-output-product.md +144 -0
  155. package/docs/zh/guide/basic/publish-your-project.md +112 -0
  156. package/docs/zh/guide/basic/test-your-project.mdx +158 -0
  157. package/docs/zh/guide/basic/use-micro-generator.md +35 -0
  158. package/docs/zh/guide/basic/using-storybook.mdx +186 -0
  159. package/docs/zh/guide/intro/getting-started.md +78 -0
  160. package/docs/zh/guide/intro/welcome.md +14 -0
  161. package/docs/zh/guide/intro/why-module-engineering-solution.md +17 -0
  162. package/docs/zh/index.md +29 -0
  163. package/package.json +19 -0
package/docs/.island/dist/en/api/design-system.html ADDED
@@ -0,0 +1,155 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <link rel="icon" href="" type="image/svg+xml"></link>
7
+ <script id="check-dark-light">
8
+ ;(() => {
9
+ const saved = localStorage.getItem('island-theme-appearance')
10
+ const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
11
+ if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
12
+ document.documentElement.classList.add('dark')
13
+ }
14
+ })()
15
+ </script>
16
+ <title data-rh="true">DesignSystem</title>
17
+ <meta data-rh="true" name="description" content="Island"/>
18
+
19
+
20
+ <script defer src='https://ga.jspm.io/npm:es-module-shims@1.6.0/dist/es-module-shims.js'></script>
21
+ <script type="importmap">
22
+ {
23
+ "imports": {
24
+ "react": "/react.js","react-dom": "/react-dom.js","react-dom/client": "/react-dom_client.js","react/jsx-runtime": "/react_jsx-runtime.js"
25
+ }
26
+ }
27
+ </script>
28
+
29
+ <link rel="stylesheet" href="/assets/style.2e5f7bc2.css">
30
+
31
+ </head>
32
+ <body>
33
+ <div id="root"><div style="height:100%"><header relative="" z="4" fixed="md:~" class="top-0 left-0" w="100%"><div relative="" p="l-8 sm:x-8" transition="background-color duration-500" class="divider-bottom md:border-b-transparent lg:border-b-transparent" nav-h="mobile lg:desktop"><div flex="" justify="between" m="0 auto" nav-h="mobile lg:desktop" class="_container_1ic07_52 _has-sidebar_1ic07_16"><div shrink="0" border="border t-0 b-1 border-solid transparent" class="_nav-bar-title_1ic07_16"><a href="/en/" w="100%" h="100%" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module tools</span></a></div><div class="_content_1ic07_24" flex="~ 1" justify="end" items-center=""><div class="search" flex="sm:1" pl="sm:8"><div __island="Search:1"><div flex="" items-center="~" relative="" mr="2" font="semibold"><svg width="32" height="32" viewBox="0 0 32 32" w="5" h="5" fill="currentColor"><path fill="#888888" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><input disabled="" cursor="text focus:auto" placeholder="Search" height="8" border="none" type="text" text="sm" p="t-0 r-2 b-0 l-2" transition="all duration-200 ease" class="rounded-sm _searchInput_y03a3_1 " aria-label="Search" autoComplete="off"/><div m="r-3" w="10" h="6" p="x-1.5" rounded="md" border="1px solid gray-light-3" text="xs gray-light-3" flex="~" items-center="~" justify="around" class="_searchCommand_y03a3_7"><span>⌘</span><span>K</span></div></div></div></div><div class="_rightNav_1ic07_42"><div class="menu"><div text="sm" font="medium" m="x-3" class=""><a href="/en/guide/welcome.html" target="" class="_link_r3fql_1 ">Guide</a></div><div text="sm" font="medium" m="x-3" class="text-brand"><a href="/en/api/index.html" target="" class="_link_r3fql_1 ">API</a></div><div m="x-3" last="mr-0"><div __island="NavMenuGroup:4"><div relative=""><button flex="center" nav-h="mobile sm:desktop" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span mr="1" text="sm" font="medium">v2.0.0-beta.3</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div absolute="" pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content" style="opacity:0;visibility:hidden"><div p="3" w="100%" h="100%" class="min-w-128px max-h-100vh" border-1="" rounded="xl" bg="bg-default" style="box-shadow:var(--island-shadow-3);margin-right:-1.5rem;z-index:100"><div font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">Changelog</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">Contributing</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="translation" flex="~" text="sm" font="bold" items-center="~" before="menu-item-before"><div m="x-1.5"><div __island="NavMenuGroup:5"><div relative=""><button flex="center" nav-h="mobile sm:desktop" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span mr="1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div absolute="" pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content" style="opacity:0;visibility:hidden"><div p="3" w="100%" h="100%" class="min-w-128px max-h-100vh" border-1="" rounded="xl" bg="bg-default" style="box-shadow:var(--island-shadow-3);margin-right:-1.5rem;z-index:100"><div font="medium"><a href="/zh" target="" class="_link_r3fql_1 "><div rounded="md" hover="bg-bg-mute" p="y-1.6 l-3"><div flex=""><span mr="1">简体中文</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div rounded="md" p="y-1.6 l-3"><span mr="1" text="brand">English</span></div></div></div></div></div></div></div><div class="appearance" before="menu-item-before" display="none sm:flex" items-center="center"><div __island="SwitchAppearance:6"><button class="_switch_1tqe3_1 undefined" id="" type="button" role="switch"><span class="_check_1tqe3_17"><span class="_icon_1tqe3_34"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_sun_8e60k_1"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_moon_8e60k_5"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div></div><div __island="SocialLinks:2"><div class="social-links" nav-h="mobile sm:desktop" flex="" items-center="" before="menu-item-before" relative=""><div h="100%" flex="" gap="x-4" items-center="" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer"><div class="_social-links-icon_wx6p9_1"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-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-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div __island="NavHamburger:3"><button class=" _navHamburger_14nz8_1"><span class="_container_14nz8_14"><span class="_top_14nz8_21"></span><span class="_middle_14nz8_27"></span><span class="_bottom_14nz8_33"></span></span></button><div class="_navScreen_1mkpq_1 " id="navScreen"><div class="_container_1mkpq_21"><div class="_navMenu_1mkpq_27"><div w="100%" class="_navMenuItem_1mkpq_34"><div text="sm" font="medium" m="x-3" class=""><a href="/en/guide/welcome.html" target="" class="_link_r3fql_1 ">Guide</a></div></div><div w="100%" class="_navMenuItem_1mkpq_34"><div text="sm" font="medium" m="x-3" class="text-brand"><a href="/en/api/index.html" target="" class="_link_r3fql_1 ">API</a></div></div><div w="100%" class="_navMenuItem_1mkpq_34"><div m="x-3" last="mr-0"><div relative="" class=" _navScreenMenuGroup_1xte3_1"><button class="_button_1xte3_12"><span class="_buttonSpan_1xte3_25">v2.0.0-beta.3</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" _down_1xte3_40 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="_items_1xte3_32"><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div><div flex=""><span mr="1">Changelog</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer" class="_link_r3fql_1 "><div><div flex=""><span mr="1">Contributing</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="_socialAndAppearance_1mkpq_50" flex="~" justify="center" items-center="center"><div class="items-center appearance pa-2 _navAppearance_1mkpq_46" flex="~" justify="center"><button class="_switch_1tqe3_1 undefined" id="" type="button" role="switch"><span class="_check_1tqe3_17"><span class="_icon_1tqe3_34"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_sun_8e60k_1"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="_moon_8e60k_5"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div __island="SocialLinks:7"><div class="social-links" nav-h="mobile sm:desktop" flex="" items-center="" before="menu-item-before" relative=""><div h="100%" flex="" gap="x-4" items-center="" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js" target="_blank" rel="noopener noreferrer"><div class="_social-links-icon_wx6p9_1"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-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-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5"><div relative="" class=" _navScreenMenuGroup_1xte3_1"><button class="_button_1xte3_12"><span class="_buttonSpan_1xte3_25"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" _down_1xte3_40 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="_items_1xte3_32"><div class="pa-1" font="medium"><a href="/zh" target="" class="_link_r3fql_1 "><div><div flex=""><span mr="1">简体中文</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div class="pa-1"><span mr="1" text="brand">English</span></div></div></div></div></div></div></div></div></div></div></div></div></header><section style="padding-top:var(--island-nav-height)"><div p="t-0 x-6 b-24 sm:6" class="_docLayout_5cssi_8"><div __island="SideMenu:8"><div class="_localNav_ncerp_1"><button flex="center" class="_menu_ncerp_16"><div text="md" mr="2" class="i-carbon:menu"></div><span text="md ">Menu</span></button></div><aside class="_sidebar_iav29_1 "><nav><section block="~" not-first="divider-top mt-4"><div flex="~" justify="between" items-start="~" class="items-center"><h2 m="t-3 b-2" text="1rem text-1" font="bold">Config</h2></div><div mb="1.4 sm:1" style="height:auto;display:block"><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/api/build-config.html" target="" class="_link_r3fql_1 ">BuildConfig</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/api/build-preset.html" target="" class="_link_r3fql_1 ">BuildPreset</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/api/dev.html" target="" class="_link_r3fql_1 ">Dev</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/api/test.html" target="" class="_link_r3fql_1 ">Test</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-text-2"><a href="/en/api/plugin.html" target="" class="_link_r3fql_1 ">Plugin</a></div></div></div><div><div style="margin-left:0px"><div p="1" block="~" text="sm" font-medium="~" class="text-brand"><a href="/en/api/design-system.html" target="" class="_link_r3fql_1 ">DesignSystem</a></div></div></div></div></section></nav></aside></div><div flex="~ 1 shrink-0" m="x-auto" class="_content_5cssi_2"><div m="x-auto" flex="~ col" class="max-w-100%"><div relative="~" m="x-auto" p="l-2" class="w-100% md:max-w-712px lg:min-w-640px "><div class="island-doc "><!--$--><h1 id="designsystem"><a class="header-anchor" aria-hidden="true" href="#designsystem">#</a>DesignSystem</h1>
34
+ <p>This chapter describes the configuration related to designSystem</p>
35
+ <div class="island-directive tip"><p class="island-directive-title">TIP</p><div class="island-directive-content"><p>The Tailwind CSS feature needs to be enabled first via <code>pnpm run new</code>.</p></div></div>
36
+ <ul>
37
+ <li>Type: <code>Object</code></li>
38
+ <li>Default value: see configuration details below.</li>
39
+ </ul>
40
+ <!-- -->
41
+ <div class="island-directive tip"><p class="island-directive-title">TIP</p><div class="island-directive-content"><p>More about <a href="https://tailwindcss.com/docs/configuration#theme" target="_blank" rel="nofollow">TailwindCSS configuration</a></p></div></div>
42
+ <!-- -->
43
+ <p><code>designSystem</code> is used to define the project&#x27;s color palette, typographic scales (Typographic Scales or Type Scale), font lists, breakpoints, border rounding values, and more. Since Modern.js borrows the design approach from Tailwind Theme and integrates Tailwind CSS internally, <code>designSystem</code> is used in the same way as Tailwind CSS Theme</p>
44
+ <p>The <code>designSystem</code> object contains the <code>screens</code>, <code>colors</code> and <code>spacing</code> properties, as well as each customizable core plugin.</p>
45
+ <h2 id="screens"><a class="header-anchor" aria-hidden="true" href="#screens">#</a>Screens</h2>
46
+ <p>The responsive breakpoints in your project can be customized using <code>screens</code>: the</p>
47
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> sm: &#x27;640px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> md: &#x27;768px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> lg: &#x27;1024px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> xl: &#x27;1280px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
48
+ <p>where the property name in the <code>screens</code> object is the screen name (used as a prefix for the adaptive utility variants generated by <code>Tailwind CSS</code>, e.g. <code>md:text-center</code>) and the value is the <code>min-width</code> at which the breakpoint should start.</p>
49
+ <p>Default breakpoints are inspired by common device resolutions: the</p>
50
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> sm: &#x27;640px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (min-width: 640px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> md: &#x27;768px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (min-width: 768px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> lg: &#x27;1024px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (min-width: 1024px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> xl: &#x27;1280px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (min-width: 1280px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
51
+ <p>You can use any name you like as a breakpoint property in your project: the</p>
52
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> tablet: &#x27;640px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (min-width: 640px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> laptop: &#x27;1024px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (min-width: 1024px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> desktop: &#x27;1280px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (min-width: 1280px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
53
+ <p>These screen names are reflected in <code>utilities</code>, so <code>text-center</code> now looks like this</p>
54
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>.text-center { text-align: center }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 640px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> .tablet\:text-center { text-align: center }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 1024px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> .laptop\:text-center { text-align: center }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 1280px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> .desktop\:text-center { text-align: center }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div>
55
+ <h3 id="max-width-breakpoints"><a class="header-anchor" aria-hidden="true" href="#max-width-breakpoints">#</a>Max-width breakpoints</h3>
56
+ <p>To use the <code>max-width</code> breakpoint instead of <code>min-width</code>, you can specify the screen as an object with the <code>max</code> attribute.</p>
57
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> xl: { max: &#x27;1279px&#x27; }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (max-width: 1279px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> lg: { max: &#x27;1023px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (max-width: 1023px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> md: { max: &#x27;767px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (max-width: 767px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> sm: { max: &#x27;639px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (max-width: 639px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
58
+ <p>If necessary, to create breakpoints with <code>min-width</code> and <code>max-width</code> definitions, e.g.</p>
59
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> sm: { min: &#x27;640px&#x27;, max: &#x27;767px&#x27; }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> md: { min: &#x27;768px&#x27;, max: &#x27;1023px&#x27; }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> lg: { min: &#x27;1024px&#x27;, max: &#x27;1279px&#x27; }, lg: { min: &#x27;1024px&#x27;, max: &#x27;1279px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> xl: { min: &#x27;1280px&#x27; }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
60
+ <h3 id="multiple-range-breakpoints"><a class="header-anchor" aria-hidden="true" href="#multiple-range-breakpoints">#</a>Multiple range breakpoints</h3>
61
+ <p>Sometimes it can be useful to apply a single breakpoint definition to multiple scopes.</p>
62
+ <p>For example, suppose you have a <code>sidebar</code> and want the breakpoint to be based on the width of the content area rather than the entire viewport. You can simulate this situation by using a smaller breakpoint style when the <code>sidebar</code> is visible and the content area is narrowed: the</p>
63
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> sm: &#x27;500px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> md: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // Sidebar appears at 768px, so revert to `sm:` styles between 768px</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // and 868px, after which the main content area is wide enough again to</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // apply the `md:` styles.</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> { min: &#x27;668px&#x27;, max: &#x27;767px&#x27; }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> { min: &#x27;868px&#x27; }, { min: &#x27;868px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> lg: &#x27;1100px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> xl: &#x27;1400px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
64
+ <h3 id="custom-media-queries"><a class="header-anchor" aria-hidden="true" href="#custom-media-queries">#</a>Custom media queries</h3>
65
+ <p>If a fully customizable media query is required for a breakpoint, an object with the <code>raw</code> attribute can be used.</p>
66
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> portrait: { raw: &#x27;(orientation: portrait)&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (orientation: portrait) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
67
+ <h3 id="print-样式"><a class="header-anchor" aria-hidden="true" href="#print-样式">#</a>Print 样式</h3>
68
+ <p>如果需要为打印应用不同的样式，则 <code>raw</code> 选项可能特别有用。</p>
69
+ <p>需要做的就是在 <code>designSystem.extend.screens</code> 下添加一个 <code>print</code>：</p>
70
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> print: { raw: &#x27;print&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media print { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
71
+ <p>然后，可以使用诸如 <code>print:text-black</code> 之类的类来指定仅当某人尝试打印页面时才应用的样式：</p>
72
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>&lt;div class=&quot;text-gray-700 print:text-black&quot;&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &lt;! -- ... --&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>&lt;/div&gt;</span></div></div><br/></code></div></div>
73
+ <h3 id="dark-mode"><a class="header-anchor" aria-hidden="true" href="#dark-mode">#</a>Dark Mode</h3>
74
+ <p><code>raw</code> 选项可以用于实现 “暗模式” 屏幕：</p>
75
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> dark: { raw: &#x27;(prefers-color-scheme: dark)&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // =&gt; @media (prefers-color-scheme: dark) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
76
+ <p>然后，您可以使用 <code>dark:</code> 前缀在暗模式下为元素设置不同的样式：</p>
77
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>&lt;div class=&quot;text-gray-700 dark:text-gray-200&quot;&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &lt;! -- ... --&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>&lt;/div&gt;</span></div></div><br/></code></div></div>
78
+ <p>请注意，由于这些 <code>screen variants</code> 是在 <code>Tailwind CSS</code> 中实现的，因此<strong>无法使用这种方法将断点与暗模式结合使用</strong> ，例如 <code>md:dark:text-gray-300</code> 将不起作用。</p>
79
+ <h2 id="colors"><a class="header-anchor" aria-hidden="true" href="#colors">#</a>Colors</h2>
80
+ <p><code>colors</code> 属性可让您自定义项目的全局调色板。</p>
81
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> colors: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> transparent: &#x27;transparent&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> black: &#x27;#000&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> white: &#x27;#fff&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> gray: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 100: &#x27;#f7fafc&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // ...</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 900: &#x27;#1a202c&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // ...</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
82
+ <p>默认情况下，这些颜色由 <code>backgroundColor</code>，<code>textColor</code> 和 <code>borderColor</code> 核心插件继承。</p>
83
+ <p>想了解更多，可以查看：<a href="https://tailwindcss.com/docs/customizing-colors" target="_blank" rel="nofollow">Customizing Colors</a>。</p>
84
+ <h2 id="spacing"><a class="header-anchor" aria-hidden="true" href="#spacing">#</a>Spacing</h2>
85
+ <p>The global spacing and scaling of items can be customized using the <code>space</code> property.</p>
86
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> spacing: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> px: &#x27;1px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 1: &#x27;0.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 2: &#x27;0.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 3: &#x27;0.75rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 4: &#x27;1rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 5: &#x27;1.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 6: &#x27;1.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 8: &#x27;2rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 10: &#x27;2.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 12: &#x27;3rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 16: &#x27;4rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 20: &#x27;5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 24: &#x27;6rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 32: &#x27;8rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 40: &#x27;10rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 48: &#x27;12rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 56: &#x27;14rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 64: &#x27;16rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
87
+ <p>By default, these values are inherited by the <code>padding</code>, <code>margin</code>, <code>negativeMargin</code>, <code>width</code> and <code>height</code> core plugins.</p>
88
+ <p>To learn more, see <a href="https://tailwindcss.com/docs/customizing-spacing" target="_blank" rel="nofollow">Customizing Spacing</a>.</p>
89
+ <h2 id="core-plugins"><a class="header-anchor" aria-hidden="true" href="#core-plugins">#</a>Core Plugins</h2>
90
+ <p>The rest of the theme section is used to configure the values available for each core plugin.</p>
91
+ <p>For example, the <code>borderRadius</code> property allows you to customize the ``utilities` that will generate the rounded corners.</p>
92
+ <p>``js
93
+ const designSystem = {
94
+ borderRadius: {
95
+ none: &#x27;0&#x27;,
96
+ sm: &#x27;.125rem&#x27;,
97
+ default: &#x27;.25rem&#x27;,
98
+ lg: &#x27;.5rem&#x27;,
99
+ full: &#x27;9999px&#x27;,
100
+ },
101
+ };</p>
102
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>** The property name determines the suffix of the generated class, and the value determines the value of the actual CSS declaration. **</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>The example ``borderRadius`` configuration above will generate the following CSS classes.</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>```css</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-none { border-radius: 0 }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-sm { border-radius: .125rem }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded { border-radius: .25rem }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-lg { border-radius: .5rem }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-full { border-radius: 9999px }</span></div></div><br/></code></div></div>
103
+ <p>You will notice that the <code>rounded</code> class is created without the suffix in the theme configuration using the <code>default</code> attribute. This is a common convention in Tailwind CSS that is supported by many (though not all) core plugins.</p>
104
+ <p>To learn more about customizing a specific core plugin, please visit the documentation for that plugin.</p>
105
+ <h2 id="customizing-the-default-configuration"><a class="header-anchor" aria-hidden="true" href="#customizing-the-default-configuration">#</a>Customizing the default configuration</h2>
106
+ <p>Out of the box, your project will automatically inherit values from the default theme configuration. If you want to customize the default theme, there are several different options depending on the goal.</p>
107
+ <h3 id="override-the-default-configuration"><a class="header-anchor" aria-hidden="true" href="#override-the-default-configuration">#</a>Override the default configuration</h3>
108
+ <p>To override the options in the default configuration, add the attributes to be overridden in ``designSystem`&#x27;&#x27; at</p>
109
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // Replaces all of the default `opacity` values</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> opacity: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 20: &#x27;0.2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 40: &#x27;0.4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 60: &#x27;0.6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 80: &#x27;0.8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 100: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> source: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
110
+ <p>This will completely replace the default property configuration, so in the above example, the default <code>opacity utilities</code> will not be generated.</p>
111
+ <p>Any properties you don&#x27;t provide will be inherited from the default theme, so in the above example, the default theme configuration for color, spacing, border rounding, background position, etc. will be retained.</p>
112
+ <h3 id="extending-the-default-configuration"><a class="header-anchor" aria-hidden="true" href="#extending-the-default-configuration">#</a>Extending the default configuration</h3>
113
+ <p>If you want to keep the default values of the theme options but add new values, add the extensions under the <code>designSystem.extend</code> property.</p>
114
+ <p>For example, if you want to add an additional breakpoint but keep the existing one, you can extend the <code>screens</code> property with.</p>
115
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // Adds a new breakpoint in addition to the default breakpoints</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &#x27;2xl&#x27;: &#x27;1440px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> source: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
116
+ <p>You can of course override some parts of the default theme and extend other parts of the default theme in the same configuration: the</p>
117
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> opacity: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 20: &#x27;0.2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 40: &#x27;0.4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 60: &#x27;0.6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 80: &#x27;0.8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> 100: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &#x27;2xl&#x27;: &#x27;1440px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> source: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
118
+ <h3 id="referencing-other-values"><a class="header-anchor" aria-hidden="true" href="#referencing-other-values">#</a>Referencing other values</h3>
119
+ <p>If you need to reference another value in the configuration, you can do so by providing a closure function instead of a static value. The function will receive the <code>theme()</code> function as an argument, and you can use this function to find other values in the configuration using the dot representation.</p>
120
+ <p>For example, you can generate <code>fill</code> utilities for each color in the palette by referring to <code>theme(&#x27;colors&#x27;)</code> on the <code>fill</code> configuration.</p>
121
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> colors: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // ...</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> fill: theme =&gt; theme(&#x27;colors&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> source: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
122
+ <p>The <code>theme()</code> function attempts to find the value you are looking for from an already fully merged configuration object, so it can reference your own custom settings as well as the default theme value. It also works recursively, so as long as there is a static value at the end of the chain, it can resolve the value you are looking for.</p>
123
+ <p><strong>Reference to the default configuration</strong></p>
124
+ <p>If for any reason you want to reference a value in the default configuration, you can import it from <code>tailwindcss/defaultTheme</code>. A useful example would be to add one of the fonts provided by the default configuration to.</p>
125
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const defaultTheme = require(&#x27;tailwindcss/defaultTheme&#x27;);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> fontFamily: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> sans: [&#x27;Lato&#x27;, . .defaultTheme.fontFamily.sans],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> source: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
126
+ <h3 id="disabling-the-entire-core-plugin"><a class="header-anchor" aria-hidden="true" href="#disabling-the-entire-core-plugin">#</a>Disabling the entire core plugin</h3>
127
+ <p>If you don&#x27;t want to generate any classes for a core plugin, it is better to set the plugin to <code>false</code> in the <code>corePlugins` configuration, rather than providing an empty object for the property in the configuration: </code></p>
128
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>// Don&#x27;t assign an empty object in your theme configuration</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> opacity: {},</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>// Do disable the plugin in your corePlugins configuration</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSyttem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> corePlugins: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> opacity: { false,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
129
+ <p>The end result is the same, but since many core plugins don&#x27;t expose any configuration, it&#x27;s best to keep it consistent by only disabling them with corePlugins anyway.</p>
130
+ <h3 id="add-your-own-key"><a class="header-anchor" aria-hidden="true" href="#add-your-own-key">#</a>Add your own key</h3>
131
+ <p>In many cases it may be useful to add your own properties to the configuration object.</p>
132
+ <p>One example is to add new properties for multiplexing between multiple core plugins. For example, you can extract a <code>positions</code> object that both the <code>backgroundPosition</code> and <code>objectPosition</code> plugins can refer to.</p>
133
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> positions: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> bottom: &#x27;bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> center: &#x27;center&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> left: &#x27;left&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &#x27;left-bottom&#x27;: &#x27;left bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &#x27;left-top&#x27;: &#x27;left top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> right: &#x27;right&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &#x27;right-bottom&#x27;: &#x27;right bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &#x27;right-top&#x27;: &#x27;right top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> top: &#x27;top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> backgroundPosition: theme =&gt; theme(&#x27;positions&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> objectPosition: theme =&gt; theme(&#x27;positions&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
134
+ <p>Another example is to add a new property to a custom plugin for referencing. For example, if you write a gradient plugin for your project, you can add a gradient property to the theme object referenced by that plugin.</p>
135
+ <div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> gradients: theme =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &#x27;blue-green&#x27;: [theme(&#x27;colors.blue.500&#x27;), theme(&#x27;colors.green.500&#x27;)],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> &#x27;purple-blue&#x27;: [theme(&#x27;colors.purple.500&#x27;), theme(&#x27;colors.blue.500&#x27;)],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> // ...</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> source: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> tools: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> tailwind: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> plugins: [require(&#x27;. /plugins/gradients&#x27;)],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span> },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div>
136
+ <h2 id="configuration-references"><a class="header-anchor" aria-hidden="true" href="#configuration-references">#</a>Configuration references</h2>
137
+ <p>All properties in the configuration object, except <code>screens</code>, <code>colors</code> and <code>spacing</code>, map to the core plugins of <code>Tailwind CSS</code>. Since many plugins are responsible for CSS properties that accept only static sets of values (e.g., e.g., <code>float</code>), please note that not every plugin has a corresponding property in the theme object.</p>
138
+ <p>All of these properties can also be used under the <code>designSystem.extend</code> property to extend the default theme.</p>
139
+ <p>For more information about what all the properties do, check this <a href="https://tailwindcss.com/docs/theme#configuration-reference" target="_blank" rel="nofollow">link</a>.</p>
140
+ <h2 id="additional-configuration"><a class="header-anchor" aria-hidden="true" href="#additional-configuration">#</a>Additional Configuration</h2>
141
+ <p>In addition to the same configuration as Tailwind CSS Theme, there are additional configurations provided by Modern.js.</p>
142
+ <h3 id="supportstyledcomponents"><a class="header-anchor" aria-hidden="true" href="#supportstyledcomponents">#</a>supportStyledComponents</h3>
143
+ <ul>
144
+ <li>type: <code>boolean</code></li>
145
+ <li>default: <code>false</code></li>
146
+ </ul>
147
+ <p>With the value <code>true</code>, the <code>styled-components</code> <code>ThemeProvider</code> component is provided in the outer layer of the application at runtime and the <code>Theme Token</code> object generated by the <code>designSystem</code> is injected.</p><!--/$--></div><footer mt="8"><div class="xs:flex" p="b-5" justify="between" items-center="~"><a flex="~" items-center="" leading-8="" font-medium="~" text="sm brand" hover="text-brand-dark" href="https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/en/api/design-system.md" transition="color duration-300">📝 Edit this page on GitHub</a><div flex="" text="sm text-2" leading-6="~" leading-8="sm:~" font-medium=""><p>Last Updated: </p><span>2022/12/1 20:09:37</span></div></div><div flex="~ col sm:row" justify="sm:around" gap="2" divider-top="" pt="6"><div flex="~ col" class="_prev_1f77m_13"><a href="/en/api/plugin.html" class="_pager-link_1f77m_20"><span class="_desc_1f77m_43">Previous Page</span><span class="_title_1f77m_34">Plugin</span></a></div><div flex="~ col" class="_next_1f77m_16"></div></div></footer></div></div><div relative="~" display="none lg:block" order="2" flex="1" p="l-8" class="max-w-256px"><div class="_aside-container_5cssi_32"><div flex="~ col" p="b-8" style="min-height:calc(100vh - (var(--island-nav-height-desktop) + 32px))"><div><div flex="~ col 1"><div display="lg:block"><div relative="" divider-left="" p="l-4" text="13px" font-medium="" id="aside-container"><div absolute="" pos="top-33px" opacity="0" w="1px" h="18px" bg="brand" style="left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" leading-7="" text="13px" font="semibold">ON THIS PAGE</div><nav><ul relative=""><li><a href="#screens" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Screens</a></li><li><a href="#max-width-breakpoints" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Max-width breakpoints</a></li><li><a href="#multiple-range-breakpoints" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Multiple range breakpoints</a></li><li><a href="#custom-media-queries" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Custom media queries</a></li><li><a href="#print-样式" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Print 样式</a></li><li><a href="#dark-mode" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Dark Mode</a></li><li><a href="#colors" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Colors</a></li><li><a href="#spacing" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Spacing</a></li><li><a href="#core-plugins" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Core Plugins</a></li><li><a href="#customizing-the-default-configuration" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Customizing the default configuration</a></li><li><a href="#override-the-default-configuration" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Override the default configuration</a></li><li><a href="#extending-the-default-configuration" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Extending the default configuration</a></li><li><a href="#referencing-other-values" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Referencing other values</a></li><li><a href="#disabling-the-entire-core-plugin" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Disabling the entire core plugin</a></li><li><a href="#add-your-own-key" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">Add your own key</a></li><li><a href="#configuration-references" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Configuration references</a></li><li><a href="#additional-configuration" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:0">Additional Configuration</a></li><li><a href="#supportstyledcomponents" block="" leading-7="" text="text-2" avoid-text-overflow="" hover="text-text-1" transition="color duration-300" style="padding-left:12px">supportStyledComponents</a></li></ul></nav></div></div></div></div></div></div></div></div></div></section><div __island="BackTop:0"></div></div></div>
148
+
149
+ <script id="island-props">[{},{"langRoutePrefix":"/en/"},{"socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}]},{"localeData":{"lang":"en","label":"English","lastUpdated":"Last Updated","nav":[{"text":"Guide","link":"/en/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/en/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"Changelog","link":"https://github.com/modern-js-dev/modern.js"},{"text":"Contributing","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/en/guide/":[{"text":"Introduction","items":[{"text":"WelCome","link":"/en/guide/welcome"},{"text":"Why module project solution","link":"/en/guide/why-module-engineering-solution"},{"text":"Getting Started","link":"/en/guide/getting-started"}]},{"text":"Basic Guide","items":[{"text":"Before getting started","link":"/en/guide/before-getting-started"},{"text":"Command preview","link":"/en/guide/command-preview"},{"text":"Modify output product","link":"/en/guide/modify-output-product"},{"text":"Use Micro generator","link":"/en/guide/use-micro-generator"},{"text":"Using Storybook","link":"/en/guide/using-storybook"},{"text":"Test project","link":"/en/guide/test-your-project"},{"text":"Publish project","link":"/en/guide/publish-your-project"},{"text":"Build your UI(optional)","link":"/en/guide/build-your-ui"}]},{"text":"Advanced Guide","items":[{"text":"Plugins extension","link":"/en/guide/extension"}]}],"/en/api/":[{"text":"Config","items":[{"text":"BuildConfig","link":"/en/api/build-config"},{"text":"BuildPreset","link":"/en/api/build-preset"},{"text":"Dev","link":"/en/api/dev"},{"text":"Test","link":"/en/api/test"},{"text":"Plugin","link":"/en/api/plugin"},{"text":"DesignSystem","link":"/en/api/design-system"}]}]},"title":"Module tools","description":"Module Engineering Solutions","lastUpdatedText":"Last Updated","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 Edit this page on GitHub"},"langRoutePrefix":"/en/"},"siteData":{"lang":"en-US","title":"Module tools","description":"Island","themeConfig":{"locales":{"/zh/":{"lang":"zh","label":"简体中文","lastUpdatedText":"上次更新","nav":[{"text":"指南","link":"/zh/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/zh/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"更新日志","link":"https://github.com/modern-js-dev/modern.js"},{"text":"贡献指南","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/zh/guide/":[{"text":"介绍","items":[{"text":"欢迎使用","link":"/zh/guide/welcome"},{"text":"为什么需要模块工程解决方案","link":"/zh/guide/why-module-engineering-solution"},{"text":"快速开始","link":"/zh/guide/getting-started"}]},{"text":"基础使用","items":[{"text":"开始之前","link":"/zh/guide/before-getting-started"},{"text":"命令预览","link":"/zh/guide/command-preview"},{"text":"修改输出产物","link":"/zh/guide/modify-output-product"},{"text":"使用微生成器","link":"/zh/guide/use-micro-generator"},{"text":"使用 Storybook","link":"/zh/guide/using-storybook"},{"text":"测试项目","link":"/zh/guide/test-your-project"},{"text":"发布项目","link":"/zh/guide/publish-your-project"},{"text":"为你的项目构建UI(可选)","link":"/zh/guide/build-your-ui"}]},{"text":"进阶指南","items":[{"text":"使用插件扩展","link":"/zh/guide/extension"}]}],"/zh/api/":[{"text":"配置项","items":[{"text":"BuildConfig","link":"/zh/api/build-config"},{"text":"BuildPreset","link":"/zh/api/build-preset"},{"text":"Dev","link":"/zh/api/dev"},{"text":"Test","link":"/zh/api/test"},{"text":"Plugin","link":"/zh/api/plugin"},{"text":"DesignSystem","link":"/zh/api/design-system"}]}]},"title":"Module tools","outlineTitle":"目录","prevPageText":"上一页","nextPageText":"下一页","description":"模块工程解决方案","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 在 GitHub 上编辑此页"}},"/en/":{"lang":"en","label":"English","lastUpdated":"Last Updated","nav":[{"text":"Guide","link":"/en/guide/welcome","activeMatch":"/guide/"},{"text":"API","link":"/en/api/","activeMatch":"/api/"},{"text":"v2.0.0-beta.3","items":[{"text":"Changelog","link":"https://github.com/modern-js-dev/modern.js"},{"text":"Contributing","link":"https://github.com/modern-js-dev/modern.js"}]}],"sidebar":{"/en/guide/":[{"text":"Introduction","items":[{"text":"WelCome","link":"/en/guide/welcome"},{"text":"Why module project solution","link":"/en/guide/why-module-engineering-solution"},{"text":"Getting Started","link":"/en/guide/getting-started"}]},{"text":"Basic Guide","items":[{"text":"Before getting started","link":"/en/guide/before-getting-started"},{"text":"Command preview","link":"/en/guide/command-preview"},{"text":"Modify output product","link":"/en/guide/modify-output-product"},{"text":"Use Micro generator","link":"/en/guide/use-micro-generator"},{"text":"Using Storybook","link":"/en/guide/using-storybook"},{"text":"Test project","link":"/en/guide/test-your-project"},{"text":"Publish project","link":"/en/guide/publish-your-project"},{"text":"Build your UI(optional)","link":"/en/guide/build-your-ui"}]},{"text":"Advanced Guide","items":[{"text":"Plugins extension","link":"/en/guide/extension"}]}],"/en/api/":[{"text":"Config","items":[{"text":"BuildConfig","link":"/en/api/build-config"},{"text":"BuildPreset","link":"/en/api/build-preset"},{"text":"Dev","link":"/en/api/dev"},{"text":"Test","link":"/en/api/test"},{"text":"Plugin","link":"/en/api/plugin"},{"text":"DesignSystem","link":"/en/api/design-system"}]}]},"title":"Module tools","description":"Module Engineering Solutions","lastUpdatedText":"Last Updated","editLink":{"pattern":"https://github.com/modern-js-dev/modern.js/tree/next/website/module-tools/docs/:path","text":"📝 Edit this page on GitHub"}}},"outlineTitle":"ON THIS PAGE","socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}],"footer":{"message":"The Module Engineering Solutions","copyright":"\nCopyright © 2022 ByteDance."}},"head":[["script",{"id":"check-dark-light"},"\n ;(() => {\n const saved = localStorage.getItem('island-theme-appearance')\n const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {\n document.documentElement.classList.add('dark')\n }\n })()\n "]],"base":"","icon":"","root":"/Users/bytedance/modern.js/website/module-tools/docs","appearance":true},"pathname":"/en/api/design-system"},{"text":"v2.0.0-beta.3","items":[{"text":"Changelog","link":"https://github.com/modern-js-dev/modern.js"},{"text":"Contributing","link":"https://github.com/modern-js-dev/modern.js"}]},{"items":[{"text":"简体中文","link":"/zh"},{"text":"English","link":"/en"}],"activeIndex":1,"isTranslation":true},{},{"socialLinks":[{"icon":"github","mode":"link","content":"https://github.com/modern-js-dev/modern.js"}]},{"pathname":"/en/api/design-system","langRoutePrefix":"","sidebarData":[{"text":"Config","items":[{"text":"BuildConfig","link":"/en/api/build-config"},{"text":"BuildPreset","link":"/en/api/build-preset"},{"text":"Dev","link":"/en/api/dev"},{"text":"Test","link":"/en/api/test"},{"text":"Plugin","link":"/en/api/plugin"},{"text":"DesignSystem","link":"/en/api/design-system"}]}]}]</script><script type="module" src="/assets/island_inject.11a12ecc.js"></script>
150
+ <script type="module">import Le,{createContext as ke}from"react";import{jsx as Ce}from"react/jsx-runtime";const Ae="modulepreload",Ie=function(e){return"/"+e},ne={},Oe=function(t,n,i){return!n||n.length===0?t():Promise.all(n.map(r=>{if(r=Ie(r),r in ne)return;ne[r]=!0;const s=r.endsWith(".css"),p=s?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${r}"]${p}`))return;const a=document.createElement("link");if(a.rel=s?"stylesheet":Ae,s||(a.as="script",a.crossOrigin=""),a.href=r,document.head.appendChild(a),s)return new Promise((f,_)=>{a.addEventListener("load",f),a.addEventListener("error",()=>_(new Error(`Unable to preload CSS for ${r}`)))})})).then(()=>t())};const me=()=>typeof window<"u";ke({data:me()?window==null?void 0:window.ISLAND_PAGE_DATA:null,setData:e=>{}});const je="island-theme-appearance";let He,W,V;typeof window<"u"&&typeof localStorage<"u"&&(W=localStorage.getItem(je)||"auto",V=window.matchMedia("(prefers-color-scheme: dark)"),W==="auto"&&V.matches,V.onchange=e=>{W==="auto"&&Ne(e.matches)});const Ne=e=>{He[e?"add":"remove"]("dark")};var Re=typeof global=="object"&&global&&global.Object===Object&&global;const Pe=Re;var $e=typeof self=="object"&&self&&self.Object===Object&&self,De=Pe||$e||Function("return this")();const ue=De;var qe=ue.Symbol;const Y=qe;var pe=Object.prototype,Me=pe.hasOwnProperty,Be=pe.toString,D=Y?Y.toStringTag:void 0;function Ue(e){var t=Me.call(e,D),n=e[D];try{e[D]=void 0;var i=!0}catch{}var r=Be.call(e);return i&&(t?e[D]=n:delete e[D]),r}var We=Object.prototype,Ge=We.toString;function Fe(e){return Ge.call(e)}var Ye="[object Null]",Ke="[object Undefined]",oe=Y?Y.toStringTag:void 0;function Xe(e){return e==null?e===void 0?Ke:Ye:oe&&oe in Object(e)?Ue(e):Fe(e)}function Ze(e){return e!=null&&typeof e=="object"}var Ve="[object Symbol]";function Je(e){return typeof e=="symbol"||Ze(e)&&Xe(e)==Ve}var Qe=/\s/;function et(e){for(var t=e.length;t--&&Qe.test(e.charAt(t)););return t}var tt=/^\s+/;function nt(e){return e&&e.slice(0,et(e)+1).replace(tt,"")}function K(e){var t=typeof e;return e!=null&&(t=="object"||t=="function")}var re=0/0,ot=/^[-+]0x[0-9a-f]+$/i,rt=/^0b[01]+$/i,at=/^0o[0-7]+$/i,it=parseInt;function ae(e){if(typeof e=="number")return e;if(Je(e))return re;if(K(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=K(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=nt(e);var n=rt.test(e);return n||at.test(e)?it(e.slice(2),n?2:8):ot.test(e)?re:+e}var ct=function(){return ue.Date.now()};const J=ct;var st="Expected a function",dt=Math.max,lt=Math.min;function mt(e,t,n){var i,r,s,p,a,f,_=0,g=!1,w=!1,z=!0;if(typeof e!="function")throw new TypeError(st);t=ae(t)||0,K(n)&&(g=!!n.leading,w="maxWait"in n,s=w?dt(ae(n.maxWait)||0,t):s,z="trailing"in n?!!n.trailing:z);function L(h){var m=i,o=r;return i=r=void 0,_=h,p=e.apply(o,m),p}function E(h){return _=h,a=setTimeout(H,t),g?L(h):p}function A(h){var m=h-f,o=h-_,O=t-m;return w?lt(O,s-o):O}function M(h){var m=h-f,o=h-_;return f===void 0||m>=t||m<0||w&&o>=s}function H(){var h=J();if(M(h))return B(h);a=setTimeout(H,A(h))}function B(h){return a=void 0,z&&i?L(h):(i=r=void 0,p)}function x(){a!==void 0&&clearTimeout(a),_=0,i=f=r=a=void 0}function N(){return a===void 0?p:B(J())}function C(){var h=J(),m=M(h);if(i=arguments,r=this,f=h,m){if(a===void 0)return E(f);if(w)return clearTimeout(a),a=setTimeout(H,t),L(f)}return a===void 0&&(a=setTimeout(H,t)),p}return C.cancel=x,C.flush=N,C}var ut="Expected a function";function pt(e,t,n){var i=!0,r=!0;if(typeof e!="function")throw new TypeError(ut);return K(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),mt(e,t,{leading:i,maxWait:t,trailing:r})}var ft=function(){var e=document.getSelection();if(!e.rangeCount)return function(){};for(var t=document.activeElement,n=[],i=0;i<e.rangeCount;i++)n.push(e.getRangeAt(i));switch(t.tagName.toUpperCase()){case"INPUT":case"TEXTAREA":t.blur();break;default:t=null;break}return e.removeAllRanges(),function(){e.type==="Caret"&&e.removeAllRanges(),e.rangeCount||n.forEach(function(r){e.addRange(r)}),t&&t.focus()}},gt=ft,ie={"text/plain":"Text","text/html":"Url",default:"Text"},vt="Copy to clipboard: #{key}, Enter";function ht(e){var t=(/mac os x/i.test(navigator.userAgent)?"\u2318":"Ctrl")+"+C";return e.replace(/#{\s*key\s*}/g,t)}function _t(e,t){var n,i,r,s,p,a,f=!1;t||(t={}),n=t.debug||!1;try{r=gt(),s=document.createRange(),p=document.getSelection(),a=document.createElement("span"),a.textContent=e,a.ariaHidden="true",a.style.all="unset",a.style.position="fixed",a.style.top=0,a.style.clip="rect(0, 0, 0, 0)",a.style.whiteSpace="pre",a.style.webkitUserSelect="text",a.style.MozUserSelect="text",a.style.msUserSelect="text",a.style.userSelect="text",a.addEventListener("copy",function(g){if(g.stopPropagation(),t.format)if(g.preventDefault(),typeof g.clipboardData>"u"){n&&console.warn("unable to use e.clipboardData"),n&&console.warn("trying IE specific stuff"),window.clipboardData.clearData();var w=ie[t.format]||ie.default;window.clipboardData.setData(w,e)}else g.clipboardData.clearData(),g.clipboardData.setData(t.format,e);t.onCopy&&(g.preventDefault(),t.onCopy(g.clipboardData))}),document.body.appendChild(a),s.selectNodeContents(a),p.addRange(s);var _=document.execCommand("copy");if(!_)throw new Error("copy command was unsuccessful");f=!0}catch(g){n&&console.error("unable to copy using execCommand: ",g),n&&console.warn("trying IE specific stuff");try{window.clipboardData.setData(t.format||"text",e),t.onCopy&&t.onCopy(window.clipboardData),f=!0}catch(w){n&&console.error("unable to copy using clipboardData: ",w),n&&console.error("falling back to prompt"),i=ht("message"in t?t.message:vt),window.prompt(i,e)}}finally{p&&(typeof p.removeRange=="function"?p.removeRange(s):p.removeAllRanges()),a&&document.body.removeChild(a),r()}return f}var yt=_t;function bt(){const e=new Map;window.addEventListener("click",t=>{var i;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,s=(i=n.nextElementSibling)==null?void 0:i.nextElementSibling;if(!r||!s)return;const{innerText:p=""}=s;if(yt(p)){n.classList.add("copied"),clearTimeout(e.get(n));const f=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,f)}}})}/*! medium-zoom 1.0.6 | MIT License | https://github.com/francoischalifour/medium-zoom */var j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},G=function(t){return t.tagName==="IMG"},wt=function(t){return NodeList.prototype.isPrototypeOf(t)},F=function(t){return t&&t.nodeType===1},ce=function(t){var n=t.currentSrc||t.src;return n.substr(-4).toLowerCase()===".svg"},se=function(t){try{return Array.isArray(t)?t.filter(G):wt(t)?[].slice.call(t).filter(G):F(t)?[t].filter(G):typeof t=="string"?[].slice.call(document.querySelectorAll(t)).filter(G):[]}catch{throw new TypeError(`The provided selector is invalid.
151
+ Expects a CSS selector, a Node element, a NodeList or an array.
152
+ See: https://github.com/francoischalifour/medium-zoom`)}},Et=function(t){var n=document.createElement("div");return n.classList.add("medium-zoom-overlay"),n.style.background=t,n},xt=function(t){var n=t.getBoundingClientRect(),i=n.top,r=n.left,s=n.width,p=n.height,a=t.cloneNode(),f=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,_=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return a.removeAttribute("id"),a.style.position="absolute",a.style.top=i+f+"px",a.style.left=r+_+"px",a.style.width=s+"px",a.style.height=p+"px",a.style.transform="",a},P=function(t,n){var i=j({bubbles:!1,cancelable:!1,detail:void 0},n);if(typeof window.CustomEvent=="function")return new CustomEvent(t,i);var r=document.createEvent("CustomEvent");return r.initCustomEvent(t,i.bubbles,i.cancelable,i.detail),r},Tt=function e(t){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},i=window.Promise||function(c){function d(){}c(d,d)},r=function(c){var d=c.target;if(d===O){E();return}x.indexOf(d)!==-1&&A({target:d})},s=function(){if(!(C||!o.original)){var c=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;Math.abs(h-c)>m.scrollOffset&&setTimeout(E,150)}},p=function(c){var d=c.key||c.keyCode;(d==="Escape"||d==="Esc"||d===27)&&E()},a=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c;if(c.background&&(O.style.background=c.background),c.container&&c.container instanceof Object&&(d.container=j({},m.container,c.container)),c.template){var v=F(c.template)?c.template:document.querySelector(c.template);d.template=v}return m=j({},m,d),x.forEach(function(y){y.dispatchEvent(P("medium-zoom:update",{detail:{zoom:b}}))}),b},f=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return e(j({},m,c))},_=function(){for(var c=arguments.length,d=Array(c),v=0;v<c;v++)d[v]=arguments[v];var y=d.reduce(function(u,S){return[].concat(u,se(S))},[]);return y.filter(function(u){return x.indexOf(u)===-1}).forEach(function(u){x.push(u),u.classList.add("medium-zoom-image")}),N.forEach(function(u){var S=u.type,k=u.listener,R=u.options;y.forEach(function(I){I.addEventListener(S,k,R)})}),b},g=function(){for(var c=arguments.length,d=Array(c),v=0;v<c;v++)d[v]=arguments[v];o.zoomed&&E();var y=d.length>0?d.reduce(function(u,S){return[].concat(u,se(S))},[]):x;return y.forEach(function(u){u.classList.remove("medium-zoom-image"),u.dispatchEvent(P("medium-zoom:detach",{detail:{zoom:b}}))}),x=x.filter(function(u){return y.indexOf(u)===-1}),b},w=function(c,d){var v=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return x.forEach(function(y){y.addEventListener("medium-zoom:"+c,d,v)}),N.push({type:"medium-zoom:"+c,listener:d,options:v}),b},z=function(c,d){var v=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return x.forEach(function(y){y.removeEventListener("medium-zoom:"+c,d,v)}),N=N.filter(function(y){return!(y.type==="medium-zoom:"+c&&y.listener.toString()===d.toString())}),b},L=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c.target,v=function(){var u={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0},S=void 0,k=void 0;if(m.container)if(m.container instanceof Object)u=j({},u,m.container),S=u.width-u.left-u.right-m.margin*2,k=u.height-u.top-u.bottom-m.margin*2;else{var R=F(m.container)?m.container:document.querySelector(m.container),I=R.getBoundingClientRect(),X=I.width,ve=I.height,he=I.left,_e=I.top;u=j({},u,{width:X,height:ve,left:he,top:_e})}S=S||u.width-m.margin*2,k=k||u.height-m.margin*2;var $=o.zoomedHd||o.original,ye=ce($)?S:$.naturalWidth||S,be=ce($)?k:$.naturalHeight||k,U=$.getBoundingClientRect(),we=U.top,Ee=U.left,Q=U.width,ee=U.height,xe=Math.min(ye,S)/Q,Te=Math.min(be,k)/ee,Z=Math.min(xe,Te),Se=(-Ee+(S-Q)/2+m.margin+u.left)/Z,ze=(-we+(k-ee)/2+m.margin+u.top)/Z,te="scale("+Z+") translate3d("+Se+"px, "+ze+"px, 0)";o.zoomed.style.transform=te,o.zoomedHd&&(o.zoomedHd.style.transform=te)};return new i(function(y){if(d&&x.indexOf(d)===-1){y(b);return}var u=function X(){C=!1,o.zoomed.removeEventListener("transitionend",X),o.original.dispatchEvent(P("medium-zoom:opened",{detail:{zoom:b}})),y(b)};if(o.zoomed){y(b);return}if(d)o.original=d;else if(x.length>0){var S=x;o.original=S[0]}else{y(b);return}if(o.original.dispatchEvent(P("medium-zoom:open",{detail:{zoom:b}})),h=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,C=!0,o.zoomed=xt(o.original),document.body.appendChild(O),m.template){var k=F(m.template)?m.template:document.querySelector(m.template);o.template=document.createElement("div"),o.template.appendChild(k.content.cloneNode(!0)),document.body.appendChild(o.template)}if(document.body.appendChild(o.zoomed),window.requestAnimationFrame(function(){document.body.classList.add("medium-zoom--opened")}),o.original.classList.add("medium-zoom-image--hidden"),o.zoomed.classList.add("medium-zoom-image--opened"),o.zoomed.addEventListener("click",E),o.zoomed.addEventListener("transitionend",u),o.original.getAttribute("data-zoom-src")){o.zoomedHd=o.zoomed.cloneNode(),o.zoomedHd.removeAttribute("srcset"),o.zoomedHd.removeAttribute("sizes"),o.zoomedHd.src=o.zoomed.getAttribute("data-zoom-src"),o.zoomedHd.onerror=function(){clearInterval(R),console.warn("Unable to reach the zoom image target "+o.zoomedHd.src),o.zoomedHd=null,v()};var R=setInterval(function(){o.zoomedHd.complete&&(clearInterval(R),o.zoomedHd.classList.add("medium-zoom-image--opened"),o.zoomedHd.addEventListener("click",E),document.body.appendChild(o.zoomedHd),v())},10)}else if(o.original.hasAttribute("srcset")){o.zoomedHd=o.zoomed.cloneNode(),o.zoomedHd.removeAttribute("sizes"),o.zoomedHd.removeAttribute("loading");var I=o.zoomedHd.addEventListener("load",function(){o.zoomedHd.removeEventListener("load",I),o.zoomedHd.classList.add("medium-zoom-image--opened"),o.zoomedHd.addEventListener("click",E),document.body.appendChild(o.zoomedHd),v()})}else v()})},E=function(){return new i(function(c){if(C||!o.original){c(b);return}var d=function v(){o.original.classList.remove("medium-zoom-image--hidden"),document.body.removeChild(o.zoomed),o.zoomedHd&&document.body.removeChild(o.zoomedHd),document.body.removeChild(O),o.zoomed.classList.remove("medium-zoom-image--opened"),o.template&&document.body.removeChild(o.template),C=!1,o.zoomed.removeEventListener("transitionend",v),o.original.dispatchEvent(P("medium-zoom:closed",{detail:{zoom:b}})),o.original=null,o.zoomed=null,o.zoomedHd=null,o.template=null,c(b)};C=!0,document.body.classList.remove("medium-zoom--opened"),o.zoomed.style.transform="",o.zoomedHd&&(o.zoomedHd.style.transform=""),o.template&&(o.template.style.transition="opacity 150ms",o.template.style.opacity=0),o.original.dispatchEvent(P("medium-zoom:close",{detail:{zoom:b}})),o.zoomed.addEventListener("transitionend",d)})},A=function(){var c=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},d=c.target;return o.original?E():L({target:d})},M=function(){return m},H=function(){return x},B=function(){return o.original},x=[],N=[],C=!1,h=0,m=n,o={original:null,zoomed:null,zoomedHd:null,template:null};Object.prototype.toString.call(t)==="[object Object]"?m=t:(t||typeof t=="string")&&_(t),m=j({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},m);var O=Et(m.background);document.addEventListener("click",r),document.addEventListener("keyup",p),document.addEventListener("scroll",s),window.addEventListener("resize",E);var b={open:L,close:E,toggle:A,update:a,clone:f,attach:_,detach:g,on:w,off:z,getOptions:M,getImages:H,getZoomedImage:B};return b};function St(e,t){t===void 0&&(t={});var n=t.insertAt;if(!(!e||typeof document>"u")){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",n==="top"&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}var zt=".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";St(zt);const Lt=Tt,kt=60;function Ct(){function e(t,n,i=!1){let r=null;try{r=t.classList.contains("header-anchor")?t:document.getElementById(decodeURIComponent(n.slice(1)))}catch(s){console.warn(s)}if(r){const s=parseInt(window.getComputedStyle(r).paddingTop,10),p=window.scrollY+r.getBoundingClientRect().top-kt+s;window.scrollTo({left:0,top:p,...i?{behavior:"smooth"}:{}})}}window.addEventListener("click",t=>{const n=t.target.closest("a");if(n){const{origin:i,hash:r,target:s,pathname:p,search:a}=n,f=window.location;r&&s!=="_blank"&&i===f.origin&&p===f.pathname&&a===f.search&&r&&r!==f.hash&&n.classList.contains("header-anchor")&&(t.preventDefault(),history.pushState(null,"",r),e(n,r,!0),window.dispatchEvent(new Event("hashchange")))}},{capture:!0}),window.addEventListener("hashchange",t=>{t.preventDefault()})}function At(){function e(){return document.documentElement.scrollTop+window.innerHeight>=document.documentElement.scrollHeight}const t=60,n=document.getElementById("aside-marker"),i=document.getElementById("aside-container"),r=document.querySelectorAll(".island-doc .header-anchor");let s=null;const p=Array.from((i==null?void 0:i.getElementsByTagName("a"))||[]).map(g=>decodeURIComponent(g.hash));if(n&&!p.length){n.style.opacity="0";return}const a=(g,w)=>{if(s&&s.classList.remove("aside-active"),g[w]){g[w].classList.add("aside-active");const z=g[w].getAttribute("href"),L=p.findIndex(A=>A===z),E=i==null?void 0:i.querySelector(`a[href="#${z==null?void 0:z.slice(1)}"]`);E&&(s=E,s.classList.add("aside-active"),n.style.top=`${33+L*28}px`,n.style.opacity="1")}},f=()=>{if(e())a(r,r.length-1);else for(let g=0;g<r.length;g++){const w=r[g],z=r[g+1],L=window.scrollY,E=w.parentElement.offsetTop-t;if(g===0&&L===0&&a(r,0),!z){a(r,g);break}const A=z.parentElement.offsetTop-t;if(L>E&&L<A){a(r,g);break}}},_=pt(f,100);return requestAnimationFrame(f),window.addEventListener("scroll",_),()=>{window.removeEventListener("scroll",_)}}function It(){const e=document.querySelectorAll("img");Lt(e,{margin:100,background:"rgba(0, 0, 0, 0.7)"})}function Ot(){!me()||(At(),Ct(),bt(),It())}if(typeof window<"u"){var de={get passive(){}};window.addEventListener("testPassive",null,de),window.removeEventListener("testPassive",null,de)}typeof window<"u"&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||window.navigator.platform==="MacIntel"&&window.navigator.maxTouchPoints>1);var l={exports:{}},jt="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED",Ht=jt,Nt=Ht;function fe(){}function ge(){}ge.resetWarningCache=fe;var Rt=function(){function e(i,r,s,p,a,f){if(f!==Nt){var _=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw _.name="Invariant Violation",_}}e.isRequired=e;function t(){return e}var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:ge,resetWarningCache:fe};return n.PropTypes=n,n};l.exports=Rt();var q={BASE:"base",BODY:"body",HEAD:"head",HTML:"html",LINK:"link",META:"meta",NOSCRIPT:"noscript",SCRIPT:"script",STYLE:"style",TITLE:"title",FRAGMENT:"Symbol(react.fragment)"};Object.keys(q).map(function(e){return q[e]});var le={accesskey:"accessKey",charset:"charSet",class:"className",contenteditable:"contentEditable",contextmenu:"contextMenu","http-equiv":"httpEquiv",itemprop:"itemProp",tabindex:"tabIndex"};Object.keys(le).reduce(function(e,t){return e[le[t]]=t,e},{});q.NOSCRIPT,q.SCRIPT,q.STYLE;Le.createContext({});var Pt=l.exports.shape({setHelmet:l.exports.func,helmetInstances:l.exports.shape({get:l.exports.func,add:l.exports.func,remove:l.exports.func})});l.exports.shape({helmet:l.exports.shape()}),l.exports.node.isRequired;Pt.isRequired;l.exports.object,l.exports.object,l.exports.oneOfType([l.exports.arrayOf(l.exports.node),l.exports.node]),l.exports.string,l.exports.bool,l.exports.bool,l.exports.object,l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.func,l.exports.arrayOf(l.exports.object),l.exports.arrayOf(l.exports.object),l.exports.string,l.exports.object,l.exports.string,l.exports.bool,l.exports.object;async function $t(){if(!document.getElementById("root"))throw new Error("#root element not found");{const t=document.querySelectorAll("[__island]");if(t.length===0)return;const{hydrateRoot:n}=await Oe(()=>import("react-dom/client"),[]);for(let i=0;i<t.length;i++){const r=t[i],[s,p]=r.getAttribute("__island").split(":"),a=window.ISLANDS[s];n(r,Ce(a,{...window.ISLAND_PROPS[p]}))}}}$t().then(()=>{setTimeout(()=>{Ot()})});
153
+ </script>
154
+ </body>
155
+ </html>