{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/basic/tokens","result":{"data":{"current":{"frontmatter":{"title":"Tokens 设计变量","order":18,"brief":"Semi Design Tokens","icon":"doc-token"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#为什么要使用-design-token","title":"为什么要使用 Design Token"},{"url":"#基础色","title":"基础色","items":[{"url":"#颜色转换","title":"颜色转换"}]},{"url":"#功能色","title":"功能色","items":[{"url":"#主要颜色---primary","title":"主要颜色 - primary"},{"url":"#次要颜色---secondary","title":"次要颜色 - secondary"},{"url":"#第三颜色---tertiary","title":"第三颜色 - tertiary"},{"url":"#信息---info","title":"信息 - info"},{"url":"#成功---success","title":"成功 - success"},{"url":"#警示---warning","title":"警示 - warning"},{"url":"#危险---danger","title":"危险 - danger"},{"url":"#ai---general","title":"AI - general"},{"url":"#ai---purple","title":"AI - purple"},{"url":"#ai---background","title":"AI - background"},{"url":"#文本与图标颜色---text","title":"文本与图标颜色 - text"},{"url":"#链接色---link","title":"链接色 - link"},{"url":"#背景色---bg","title":"背景色 - bg"},{"url":"#填充色---fill","title":"填充色 - fill"},{"url":"#描边色---border","title":"描边色 - border"},{"url":"#ai-状态色","title":"AI 状态色"},{"url":"#禁用态---disabled","title":"禁用态 - disabled"},{"url":"#常量色---static","title":"常量色 - static"},{"url":"#拟阴影色---shadow","title":"拟阴影色 - shadow"}]},{"url":"#字体排版","title":"字体排版","items":[{"url":"#字号","title":"字号"},{"url":"#字重","title":"字重"},{"url":"#字体","title":"字体"}]},{"url":"#圆角","title":"圆角"},{"url":"#阴影","title":"阴影"},{"url":"#尺寸","title":"尺寸","items":[{"url":"#高度","title":"高度"},{"url":"#描边尺寸","title":"描边尺寸"},{"url":"#图标尺寸","title":"图标尺寸"}]},{"url":"#间距","title":"间距"},{"url":"#z-index","title":"z-index"},{"url":"#动画","title":"动画"},{"url":"#尚未支持的变量","title":"尚未支持的变量"},{"url":"#定制","title":"定制"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 18,\n  \"category\": \"基础\",\n  \"title\": \"Tokens 设计变量\",\n  \"icon\": \"doc-token\",\n  \"brief\": \"Semi Design Tokens\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar JumpToToken = makeShortcode(\"JumpToToken\");\nvar FullPalette = makeShortcode(\"FullPalette\");\nvar Notice = makeShortcode(\"Notice\");\nvar ColorConverter = makeShortcode(\"ColorConverter\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(JumpToToken, {\n    mdxType: \"JumpToToken\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u8981\\u4F7F\\u7528 Design Token\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Design Token \\u8BBE\\u8BA1\\u53D8\\u91CF\\u5B9E\\u9645\\u4E0A\\u662F\\u5C06\\u8BBE\\u8BA1\\u4E2D\\u7684\\u57FA\\u7840\\u5143\\u7D20\\u4E0E\\u5177\\u4F53\\u7684\\u6837\\u5F0F\\u8FDB\\u884C\\u89E3\\u8026\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u8BBE\\u8BA1\\u5E08\\u6765\\u8BF4\\uFF0C\\u5982\\u679C\\u4EA7\\u54C1\\u7684\\u98CE\\u683C\\u9700\\u8981\\u8FED\\u4EE3\\u66F4\\u65B0\\uFF0C\\u6BD4\\u5982\\u9700\\u8981\\u66F4\\u65B0 \\u5371\\u9669 \\u7684\\u529F\\u80FD\\u8272\\uFF0C\\u5373 color-danger\\uFF0C\\u53EA\\u9700\\u8981\\u4FEE\\u6539\\u5176\\u5BF9\\u5E94\\u7684\\u989C\\u8272\\u9ED8\\u8BA4\\u503C\\uFF0C\\u65E2\\u53EF\\u4EE5\\u5B8C\\u6210\\u6574\\u5957\\u4EA7\\u54C1\\u7684 UI \\u8FED\\u4EE3\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u7814\\u53D1\\u6765\\u8BF4\\uFF0C\\u4E3A\\u4E86\\u914D\\u5408\\u4EA7\\u54C1\\u98CE\\u683C\\u7684\\u66F4\\u65B0\\u8FED\\u4EE3\\uFF0C\\u4F7F\\u7528 Design Token \\u65F6\\u53EF\\u4EE5\\u66F4\\u5FEB\\u901F\\u5730\\u5B8C\\u6210\\u6240\\u6709\\u7EC4\\u4EF6\\u7684\\u6837\\u5F0F\\u66F4\\u65B0\\uFF0C\\u800C\\u65E0\\u9700\\u4E00\\u5904\\u5904\\u5730\\u8FDB\\u884C\\u4FEE\\u6539\\uFF0C\\u8FD9\\u4E5F\\u662F\\u4E3A\\u4EC0\\u4E48\\u5728\\u5F00\\u53D1\\u7684\\u8FC7\\u7A0B\\u5C24\\u5176\\u9700\\u8981\\u6CE8\\u610F\\u4F7F\\u7528\\u53D8\\u91CF\\u800C\\u4E0D\\u662F\\u56FA\\u5B9A\\u7684\\u6570\\u9ED8\\u8BA4\\u503C\\u3002\\u5982\\u679C\\u4EA7\\u54C1\\u7684\\u98CE\\u683C\\u6709\\u591A\\u4E2A\\u5E73\\u53F0\\u5171\\u7528\\u7684\\u8BDD\\uFF0C\\u4E5F\\u80FD\\u4E8B\\u534A\\u529F\\u500D\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7279\\u522B\\u5730\\uFF0C\\u5BF9\\u4E8E\\u6709\\u6697\\u8272\\u6A21\\u5F0F\\u9700\\u6C42\\u7684\\u5E73\\u53F0\\uFF0C\\u9700\\u8981\\u4F7F\\u7528 Semi Design \\u7684\\u989C\\u8272\\u53D8\\u91CF\\u624D\\u80FD\\u5B9E\\u73B0\\u4E00\\u952E\\u5207\\u6362\\u660E\\u6697\\u8272\\u7684\\u6548\\u679C\\u3002\\u56E0\\u6B64\\u8FD9\\u91CC\\u5411\\u5927\\u5BB6\\u8BE6\\u7EC6\\u5730\\u4ECB\\u7ECD Semi Design \\u7684 Design Token \\u4F53\\u7CFB\\u4EE5\\u53CA\\u5982\\u4F55\\u4F7F\\u7528\\u5B83\\u4EEC\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u7840\\u8272\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u4E8E\\u54C1\\u724C\\u8272\\u52A8\\u6001\\u751F\\u6210\\uFF0C\\u5305\\u542B 160 \\u4E2A\\u989C\\u8272\\u5728\\u5185\\u7684\\uFF0C16 \\u4E2A\\u4E0D\\u540C\\u8272\\u76F8\\u7684\\u68AF\\u5EA6\\u8272\\u76D8\\u3002\\u901A\\u5E38\\u60C5\\u51B5\\u4E0B\\uFF0C\\u6211\\u4EEC\\u7528\\u4F7F\\u7528\\u57FA\\u7840\\u8272\\u4E2D\\u7684\\u989C\\u8272\\u6765\\u8FDB\\u4E00\\u6B65\\u5B9A\\u4E49\\u529F\\u80FD\\u8272\\u3002\\u4F60\\u53EF\\u4EE5\\u5728 Semi DSM \\u914D\\u7F6E\\u4F60\\u7684\\u4EA7\\u54C1\\u54C1\\u724C\\u8272\\uFF0C\\u52A8\\u6001\\u751F\\u6210\\u65B0\\u7684\\u57FA\\u7840\\u8272\\u76D8\\u3002\"), mdx(FullPalette, {\n    mdxType: \"FullPalette\"\n  }), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\",\n    mdxType: \"Notice\"\n  }, \"AI general \\u7CFB\\u5217\\u7684\\u989C\\u8272\\u4E3A\\u4F7F\\u7528 linear-gradient() \\u5B9E\\u73B0\\u7684\\u6E10\\u53D8\\u8272\\uFF0C\\u4F5C\\u4E3A background-color \\u7684\\u503C\\u65E0\\u6CD5\\u751F\\u6548\\uFF0C\\u9700\\u8981\\u4F5C\\u4E3A background-image \\u6216\\u8005 background \\u7684\\u503C\\u624D\\u80FD\\u751F\\u6548\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u989C\\u8272\\u8F6C\\u6362\"), mdx(ColorConverter, {\n    mdxType: \"ColorConverter\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u529F\\u80FD\\u8272\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4ECE\\u57FA\\u7840\\u8272\\u76D8\\u4E2D\\u5F15\\u7528\\uFF0C\\u5E94\\u7528\\u5728\\u5305\\u62EC\\u754C\\u9762\\u80CC\\u666F\\uFF0C\\u6587\\u672C\\u56FE\\u6807\\uFF0C\\u94FE\\u63A5\\uFF0C\\u63CF\\u8FB9\\u5728\\u5185\\u7684\\u5404\\u7C7B\\u7528\\u6237\\u754C\\u9762\\u5143\\u7D20\\u4E0A\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E3B\\u8981\\u989C\\u8272 - primary\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u754C\\u9762\\u4E3B\\u5F3A\\u8C03\\u8272\\u53CA\\u5404\\u4EA4\\u4E92\\u6001\\u989C\\u8272\\uFF0C\\u901A\\u5E38\\u7528\\u4E8E\\u4E3B\\u64CD\\u4F5C\\u6309\\u94AE\\u7B49\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-primary/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6B21\\u8981\\u989C\\u8272 - secondary\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6B21\\u8981\\u989C\\u8272 - secondary\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-secondary/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7B2C\\u4E09\\u989C\\u8272 - tertiary\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6237\\u754C\\u9762\\u4E2D\\u975E\\u5F3A\\u8C03\\u8272\\u53CA\\u5404\\u4EA4\\u4E92\\u6001\\u989C\\u8272\\uFF0C\\u901A\\u5E38\\u7528\\u4E8E\\u5E38\\u89C4\\u3001\\u975E\\u5F3A\\u8C03\\u529F\\u80FD\\u64CD\\u4F5C\\u6309\\u94AE\\u7B49\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-tertiary/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4FE1\\u606F - info\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u5E38\\u7528\\u4E8E\\u8868\\u8FBE\\u5BA2\\u89C2\\u3001\\u4E2D\\u7ACB\\u4FE1\\u606F\\uFF0C\\u5728\\u5E26\\u6709\\u4E0A\\u8FF0\\u8BED\\u4E49\\u7684\\u573A\\u666F\\u4E0B\\u4F7F\\u7528\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-info/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6210\\u529F - success\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u5E38\\u7528\\u4E8E\\u8868\\u8FBE\\u6210\\u529F\\u3001\\u5B8C\\u6210\\u3001\\u5F00\\u542F\\u72B6\\u6001\\uFF0C\\u5728\\u5E26\\u6709\\u4E0A\\u8FF0\\u8BED\\u4E49\\u7684\\u573A\\u666F\\u4E0B\\u4F7F\\u7528\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-success/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8B66\\u793A - warning\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u5E38\\u7528\\u4E8E\\u8868\\u8FBE\\u8B66\\u544A\\u3001\\u4E0D\\u5B89\\u5168\\u72B6\\u6001\\uFF0C\\u5728\\u5E26\\u6709\\u4E0A\\u8FF0\\u8BED\\u4E49\\u7684\\u573A\\u666F\\u4E0B\\u4F7F\\u7528\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-warning/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5371\\u9669 - danger\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u5E38\\u7528\\u4E8E\\u8868\\u8FBE\\u5371\\u9669\\u72B6\\u6001\\uFF0C\\u5728\\u5E26\\u6709\\u4E0A\\u8FF0\\u8BED\\u4E49\\u7684\\u573A\\u666F\\u4E0B\\u4F7F\\u7528\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-danger/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AI - general\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u4E8E AI \\u573A\\u666F\\u7684\\u80CC\\u666F\\u8272\\uFF0C\\u5B57\\u4F53\\u989C\\u8272\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-ai-general/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AI - purple\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u4E8E AI \\u76F8\\u5173\\u7684\\u6B21\\u8981\\u573A\\u666F\\u7684\\u80CC\\u666F\\u8272\\uFF0C\\u5B57\\u4F53\\u989C\\u8272\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-ai-purple/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AI - background\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u4E8E AI \\u573A\\u666F\\u7684\\u80CC\\u666F\\u8272\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-ai-background/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u672C\\u4E0E\\u56FE\\u6807\\u989C\\u8272 - text\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u56DB\\u4E2A\\u4E0D\\u540C\\u5C42\\u7EA7\\u7684\\u6587\\u672C/\\u56FE\\u6807\\u989C\\u8272\\uFF0C\\u4F9D\\u6B21\\u4EE3\\u8868\\u4EA7\\u54C1\\u754C\\u9762\\u4E2D\\u6700\\u4E3B\\u8981\\u3001\\u6B21\\u4E3B\\u8981\\u3001\\u7A0D\\u6B21\\u8981\\u548C\\u6700\\u6B21\\u8981\\u7684\\u5185\\u5BB9\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-text/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u94FE\\u63A5\\u8272 - link\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u4E8E\\u4EA7\\u54C1\\u4E2D\\u8D85\\u94FE\\u63A5\\u7684\\u6587\\u672C\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-link/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u80CC\\u666F\\u8272 - bg\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5E94\\u7528\\u4E2D\\u5404\\u7EA7\\u80CC\\u666F\\u8272\\uFF0C\\u5305\\u62EC\\u5BB9\\u5668\\u3001\\u83DC\\u5355\\u3001\\u5BFC\\u822A\\u680F\\u7B49\\u3002\\u5728\\u6697\\u8272\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u6211\\u4EEC\\u901A\\u5E38\\u7528\\u80CC\\u666F\\u8272\\u6765\\u533A\\u5206\\u524D\\u540E\\u5C42\\u7EA7\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-bg/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u586B\\u5145\\u8272 - fill\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E\\u4E00\\u4E2A\\u5143\\u7D20\\uFF0C\\u5982\\u679C\\u5176\\u6240\\u5904\\u7684\\u5BB9\\u5668\\u80CC\\u666F\\u989C\\u8272\\u4E0D\\u56FA\\u5B9A\\uFF0C\\u4E14\\u8FD9\\u4E2A\\u5143\\u7D20\\u7684\\u586B\\u5145\\u8272\\u4E0E\\u6700\\u4E0A\\u5C42\\u80CC\\u666F\\u8272\\u7684\\u5BF9\\u6BD4\\u5EA6\\u6BD4\\u8F83\\u5C0F\\uFF0C\\u4F7F\\u7528\\u586B\\u5145\\u8272\\u4F5C\\u4E3A backgroundColor\\uFF0C\\u786E\\u4FDD\\u8FD9\\u4E2A\\u5143\\u7D20\\u4E0D\\u4F1A\\u201C\\u878D\\u4E8E\\u201D\\u67D0\\u4E00\\u7EA7\\u522B\\u80CC\\u666F\\u989C\\u8272\\u4E2D\\uFF0C\\u5982\\u8868\\u5355\\u63A7\\u4EF6\\u3002\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-fill/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u63CF\\u8FB9\\u8272 - border\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u754C\\u9762\\u4E2D\\u5E26\\u6709\\u63CF\\u8FB9\\u5C5E\\u6027\\u7684\\u989C\\u8272\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-border/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"AI \\u72B6\\u6001\\u8272\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\\u6001 - disabled\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u4E8E\\u754C\\u9762\\u4E2D\\u5404\\u7C7B\\u8868\\u8FBE\\u7981\\u7528\\u7684\\u5143\\u7D20\\u586B\\u5145\\uFF0C\\u5982\\u80CC\\u666F\\u3001\\u6587\\u672C\\u3001\\u63CF\\u8FB9\\u3001\\u586B\\u5145\\u7B49\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /color-disabled/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E38\\u91CF\\u8272 - static\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u754C\\u9762\\u4E2D\\u4E0D\\u8DDF\\u968F\\u4E3B\\u9898\\u53CA\\u660E\\u6697\\u6A21\\u5F0F\\u5207\\u6362\\u7684\\u989C\\u8272\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /((--semi-black)|(--semi-white))$/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u62DF\\u9634\\u5F71\\u8272 - shadow\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6D45\\u9634\\u5F71\\uFF0C\\u901A\\u8FC7 border \\u6A21\\u62DF\\u7684\\u6241\\u5E73\\u9634\\u5F71\\u6548\\u679C\\uFF0C\\u4E3B\\u8981\\u7528\\u5728 Table \\u7EC4\\u4EF6\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /^--semi-color-shadow$/,\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5B57\\u4F53\\u6392\\u7248\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5B57\\u4F53\\u6392\\u7248\\u7528\\u6765\\u4F20\\u8FBE\\u4FE1\\u606F\\u5185\\u5BB9\\uFF0C\\u5E76\\u754C\\u9762\\u770B\\u8D77\\u6765\\u6709\\u79E9\\u5E8F\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B57\\u53F7\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u51B3\\u5B9A\\u4E0D\\u540C\\u5C42\\u7EA7\\u6587\\u672C\\u7684\\u5927\\u5C0F\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /font-size/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B57\\u91CD\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u51B3\\u5B9A\\u4E0D\\u540C\\u5C42\\u7EA7\\u6587\\u672C\\u7684\\u7C97\\u7EC6\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /font-weight/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5B57\\u4F53\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5E94\\u7528\\u4E2D\\u5404\\u7EA7\\u6587\\u672C\\u4F7F\\u7528\\u7684\\u5B57\\u4F53\\uFF0C\\u4E3A\\u51CF\\u5C11\\u6253\\u5305\\u4F53\\u79EF\\uFF0C\\u9ED8\\u8BA4\\u82F1\\u6587\\u5B57\\u4F53 Inter \\u9700\\u8981\\u5355\\u72EC\\u5F15\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E1A\\u52A1\\u4FA7\\u5982\\u679C\\u60F3\\u4F7F\\u7528\\uFF0C\\u9700\\u8981\\u5728\\u4F60\\u7684 CSS \\u4E2D\\u589E\\u52A0font-face\\u58F0\\u660E\\uFF08\\u4E0D\\u81EA\\u5E26\\u5728Semi\\u4E2D\\uFF0C\\u662F\\u7531\\u4E8E\\u8BE5\\u5B57\\u4F53\\u7565\\u5927\\uFF0C\\u9ED8\\u8BA4\\u52A0\\u8F7D\\u53EF\\u80FD\\u4F1A\\u5F71\\u54CD\\u4E1A\\u52A1\\u9996\\u5C4F\\u901F\\u5EA6\\uFF09\\uFF0C\\u7531\\u4E1A\\u52A1\\u81EA\\u884C\\u51B3\\u5B9A\\u662F\\u5426\\u9700\\u8981\\u4F7F\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@font-face {\\n  font-family: \\\"Inter\\\";\\n  src: url(\\\"https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Regular.ttf\\\") format(\\\"truetype\\\");\\n}\\n\\n@font-face {\\n  font-family: \\\"Inter-Bold\\\";\\n  src: url(\\\"https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/slepweh7nupqpognuhbo/Inter-Bold.ttf\\\") format(\\\"truetype\\\");\\n}\\n\\n\")), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /font-family/,\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5706\\u89D2\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u5706\\u89D2\\u6765\\u63CF\\u8FF0\\u5BB9\\u5668\\u4E0E\\u754C\\u9762\\u5143\\u7D20\\u7684\\u8F6E\\u5ED3\\uFF0C\\u4ECE\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u51B3\\u5B9A\\u4EA7\\u54C1\\u7684\\u89C6\\u89C9\\u8C03\\u6027\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /border-radius/,\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u9634\\u5F71\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9634\\u5F71\\u901A\\u5E38\\u7528\\u6765\\u8868\\u8FBE\\u754C\\u9762\\u5143\\u7D20\\u7684\\u5C42\\u7EA7\\uFF0C\\u9634\\u5F71\\u8D8A\\u91CD\\u7684\\u5143\\u7D20\\u8DDD\\u79BB\\u7528\\u6237\\u8D8A\\u8FD1\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /--semi-shadow/,\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\\u53D8\\u91CF\\u88AB\\u5E94\\u7528\\u5728\\u5404\\u4E2A\\u7EC4\\u4EF6\\u53CA\\u5185\\u90E8\\u5143\\u7D20\\u4E2D\\uFF0C\\u7528\\u6765\\u8C03\\u6574\\u63A7\\u4EF6\\u7684\\u5927\\u5C0F\\u3001\\u63CF\\u8FB9\\u7684\\u7C97\\u7EC6\\u3001\\u56FE\\u6807\\u7684\\u5C3A\\u5BF8\\u7B49\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9AD8\\u5EA6\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /\\height-control/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u63CF\\u8FB9\\u5C3A\\u5BF8\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /\\$border-thickness/,\n    mdxType: \"DesignToken\"\n  }), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u56FE\\u6807\\u5C3A\\u5BF8\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /\\$width-icon/,\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u95F4\\u8DDD\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u95F4\\u8DDD\\u53D8\\u91CF\\u88AB\\u5E94\\u7528\\u5728\\u5404\\u4E2A\\u7EC4\\u4EF6\\u5185\\u90E8\\uFF0C\\u6216\\u7EC4\\u4EF6\\u4E0E\\u7EC4\\u4EF6\\u4E4B\\u95F4\\uFF0C\\u7528\\u6765\\u8C03\\u6574\\u4EA7\\u54C1\\u6574\\u4F53\\u7684\\u5BC6\\u96C6\\u548C\\u7D27\\u51D1\\u7A0B\\u5EA6\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /(spacing-)|(width-base)|(loose)/,\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"z-index\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7528\\u6765\\u63CF\\u8FF0\\u754C\\u9762\\u5143\\u7D20\\u7684\\u524D\\u540E\\u987A\\u5E8F\\u5173\\u7CFB\"), mdx(DesignToken, {\n    componentName: \"global\",\n    reg: /z-/,\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u52A8\\u753B\"), mdx(DesignToken, {\n    componentName: \"global\",\n    isAnimation: true,\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5C1A\\u672A\\u652F\\u6301\\u7684\\u53D8\\u91CF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u76EE\\u524D\\uFF0CSemi \\u5C1A\\u672A\\u652F\\u6301\\u4EE5\\u4E0B\\u7C7B\\u522B\\u7684\\u5168\\u5C40\\u53D8\\u91CF\\uFF0C\\u5982\\u679C\\u4F60\\u6709\\u76F8\\u5173\\u9700\\u6C42\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7issue\\u8FDB\\u884C\\u53CD\\u9988\\uFF0C\\u8BE6\\u7EC6\\u63CF\\u8FF0\\u4F60\\u7684\\u9884\\u671F\\u9700\\u6C42\\uFF0C\\u6211\\u4EEC\\u4F1A\\u5728\\u8BC4\\u4F30\\u540E\\u8FDB\\u884C\\u5904\\u7406\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6BB5\\u843D\\u884C\\u9AD8 line height\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5B57\\u95F4\\u8DDD letter spacing\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5A92\\u4F53\\u67E5\\u8BE2 media query\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5B9A\\u5236\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u4F60\\u9700\\u8981\\u5B9A\\u5236\\u5168\\u5C40\\u53D8\\u91CF\\u6837\\u5F0F\\uFF0C\\u8BF7\\u524D\\u5F80 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://semi.design/dsm\"\n  }, \"Semi DSM\"), \" \\uFF0C\\u5236\\u4F5C\\u4F60\\u81EA\\u5DF1\\u7684\\u4E3B\\u9898\\u5E76\\u53D1\\u5E03\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/basic/tokens","next":{"fields":{"slug":"en-US/basic/layout"},"id":"36809e3d-f8c8-5242-a8bc-2f2c741e1c7f","frontmatter":{"title":"Layout","localeCode":"en-US","icon":"doc-layout","showNew":null}},"previous":{"fields":{"slug":"en-US/basic/tokens"},"id":"99c572d9-fc73-53b0-9d27-58638ef49271","frontmatter":{"title":"Tokens","localeCode":"en-US","icon":"doc-token","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}