[{"data":1,"prerenderedAt":1323},["ShallowReactive",2],{"navigation":3,"\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ftokens":199,"\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ftokens-surround":1318},[4,9,41,111,116,132],{"title":5,"path":6,"stem":7,"icon":8},"准备","\u002Fdocs\u002Fpreparation","1.docs\u002F1.preparation","i-lucide-rocket",{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":40},"用户手册","i-lucide-book-open","\u002Fdocs\u002Fgetting-started","1.docs\u002F2.getting-started",[15,20,25,30,35],{"title":16,"path":17,"stem":18,"icon":19},"认识 UDhold","\u002Fdocs\u002Fgetting-started\u002Fwhat-is-udhold","1.docs\u002F2.getting-started\u002F1.what-is-udhold","i-lucide-info",{"title":21,"path":22,"stem":23,"icon":24},"核心概念","\u002Fdocs\u002Fgetting-started\u002Fcore-concepts","1.docs\u002F2.getting-started\u002F2.core-concepts","i-lucide-lightbulb",{"title":26,"path":27,"stem":28,"icon":29},"主面板布局","\u002Fdocs\u002Fgetting-started\u002Fmain-interface","1.docs\u002F2.getting-started\u002F3.main-interface","i-lucide-monitor",{"title":31,"path":32,"stem":33,"icon":34},"快速上手 5 分钟","\u002Fdocs\u002Fgetting-started\u002Fquick-tour","1.docs\u002F2.getting-started\u002F4.quick-tour","i-lucide-zap",{"title":36,"path":37,"stem":38,"icon":39},"常用快捷键","\u002Fdocs\u002Fgetting-started\u002Fshortcut-keys","1.docs\u002F2.getting-started\u002F5.shortcut-keys","i-lucide-keyboard",false,{"title":42,"path":43,"stem":44,"children":45,"icon":110},"核心功能","\u002Fdocs\u002Ffeatures","1.docs\u002F3.features\u002F1.index",[46,49,53,58,63,67,71,76,81,86,91,96,101,106],{"title":47,"path":43,"stem":44,"icon":48},"功能总览","i-lucide-layout-grid",{"title":50,"path":51,"stem":52,"icon":39},"快捷键","\u002Fdocs\u002Ffeatures\u002Fshortcuts","1.docs\u002F3.features\u002F10.shortcuts",{"title":54,"path":55,"stem":56,"icon":57},"AI 模型","\u002Fdocs\u002Ffeatures\u002Fai-models","1.docs\u002F3.features\u002F16.ai-models","i-lucide-bot",{"title":59,"path":60,"stem":61,"icon":62},"AI 助手","\u002Fdocs\u002Ffeatures\u002Fai-helper","1.docs\u002F3.features\u002F17.ai-helper","i-lucide-bot-message-square",{"title":64,"path":65,"stem":66,"icon":19},"关于","\u002Fdocs\u002Ffeatures\u002Fabout","1.docs\u002F3.features\u002F19.about",{"title":68,"path":69,"stem":70,"icon":29},"系统命令","\u002Fdocs\u002Ffeatures\u002Fsystem","1.docs\u002F3.features\u002F2.system",{"title":72,"path":73,"stem":74,"icon":75},"调试日志","\u002Fdocs\u002Ffeatures\u002Fdebug","1.docs\u002F3.features\u002F20.debug","i-lucide-terminal",{"title":77,"path":78,"stem":79,"icon":80},"通用设置","\u002Fdocs\u002Ffeatures\u002Fsettings","1.docs\u002F3.features\u002F21.settings","i-mdi-cog-outline",{"title":82,"path":83,"stem":84,"icon":85},"文件资源管理器","\u002Fdocs\u002Ffeatures\u002Ffiles","1.docs\u002F3.features\u002F3.files","i-lucide-folder-tree",{"title":87,"path":88,"stem":89,"icon":90},"文件树","\u002Fdocs\u002Ffeatures\u002Ffiles-tree","1.docs\u002F3.features\u002F4.files-tree","i-lucide-list-tree",{"title":92,"path":93,"stem":94,"icon":95},"文件预览","\u002Fdocs\u002Ffeatures\u002Fpreview","1.docs\u002F3.features\u002F5.preview","i-lucide-eye",{"title":97,"path":98,"stem":99,"icon":100},"本地启动","\u002Fdocs\u002Ffeatures\u002Flocal-launch","1.docs\u002F3.features\u002F6.local-launch","i-lucide-app-window",{"title":102,"path":103,"stem":104,"icon":105},"插件中心","\u002Fdocs\u002Ffeatures\u002Fplugins","1.docs\u002F3.features\u002F7.plugins","i-lucide-puzzle",{"title":107,"path":108,"stem":109,"icon":8},"快速启动","\u002Fdocs\u002Ffeatures\u002Fquick-start","1.docs\u002F3.features\u002F8.quick-start","i-lucide-star",{"title":112,"path":113,"stem":114,"icon":115},"主题","\u002Fdocs\u002Fthemes","1.docs\u002F4.themes","i-lucide-palette",{"title":117,"icon":118,"path":119,"stem":120,"children":121,"page":40},"相关协议","i-lucide-scroll","\u002Fdocs\u002Flegal","1.docs\u002F5.legal",[122,127],{"title":123,"path":124,"stem":125,"icon":126},"用户须知","\u002Fdocs\u002Flegal\u002Fuser-notice","1.docs\u002F5.legal\u002F1.user-notice","i-lucide-file-text",{"title":128,"path":129,"stem":130,"icon":131},"隐私协议","\u002Fdocs\u002Flegal\u002Fprivacy","1.docs\u002F5.legal\u002F2.privacy","i-lucide-shield-check",{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":40},"开发指南","i-lucide-code","\u002Fdocs\u002Fdevelopment","1.docs\u002F6.development",[138,156,190],{"title":139,"icon":8,"path":140,"stem":141,"children":142,"page":40},"快速开始","\u002Fdocs\u002Fdevelopment\u002Fquick-start","1.docs\u002F6.development\u002F1.quick-start",[143,147,151],{"title":144,"path":145,"stem":146,"icon":19},"介绍","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Fintroduction","1.docs\u002F6.development\u002F1.quick-start\u002F1.introduction",{"title":148,"path":149,"stem":150,"icon":34},"快速上手","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Fgetting-started","1.docs\u002F6.development\u002F1.quick-start\u002F2.getting-started",{"title":152,"path":153,"stem":154,"icon":155},"常见问题","\u002Fdocs\u002Fdevelopment\u002Fquick-start\u002Ffaq","1.docs\u002F6.development\u002F1.quick-start\u002F3.faq","i-lucide-circle-help",{"title":157,"icon":115,"path":158,"stem":159,"children":160,"page":40},"设计系统","\u002Fdocs\u002Fdevelopment\u002Fdesign-system","1.docs\u002F6.development\u002F2.design-system",[161,166,171,176,181,186],{"title":162,"path":163,"stem":164,"icon":165},"设计令牌","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ftokens","1.docs\u002F6.development\u002F2.design-system\u002F1.tokens","i-lucide-pipette",{"title":167,"path":168,"stem":169,"icon":170},"主题与明暗模式","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ftheming","1.docs\u002F6.development\u002F2.design-system\u002F2.theming","i-lucide-sun-moon",{"title":172,"path":173,"stem":174,"icon":175},"基础样式类","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fbase-styles","1.docs\u002F6.development\u002F2.design-system\u002F3.base-styles","i-lucide-layout-template",{"title":177,"path":178,"stem":179,"icon":180},"图标体系","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Ficons","1.docs\u002F6.development\u002F2.design-system\u002F4.icons","i-lucide-shapes",{"title":182,"path":183,"stem":184,"icon":185},"通用组件","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fcomponents","1.docs\u002F6.development\u002F2.design-system\u002F5.components","i-lucide-component",{"title":187,"path":188,"stem":189,"icon":48},"场景组件","\u002Fdocs\u002Fdevelopment\u002Fdesign-system\u002Fscene-components","1.docs\u002F6.development\u002F2.design-system\u002F6.scene-components",{"title":191,"icon":57,"path":192,"stem":193,"children":194,"page":40},"AI","\u002Fdocs\u002Fdevelopment\u002Fai","1.docs\u002F6.development\u002F3.ai",[195],{"title":196,"path":197,"stem":198,"icon":126},"LLMs.txt","\u002Fdocs\u002Fdevelopment\u002Fai\u002Fllms-txt","1.docs\u002F6.development\u002F3.ai\u002F1.llms-txt",{"id":200,"title":162,"body":201,"description":1311,"extension":1312,"meta":1313,"navigation":1314,"path":163,"rawbody":1315,"seo":1316,"stem":164,"__hash__":1317},"docs\u002F1.docs\u002F6.development\u002F2.design-system\u002F1.tokens.md",{"type":202,"value":203,"toc":1302},"minimark",[204,208,211,241,268,272,275,499,516,519,522,589,592,687,696,699,717,775,846,850,990,993,1033,1047,1051,1054,1086,1104,1107,1281,1291,1299],[205,206,207],"p",{},"设计令牌（Design Tokens）是把设计决策沉淀为 CSS 变量的一套体系。插件只要消费这些变量而不是写死颜色值，就能自动获得明暗双主题、六种主题色、以及与宿主原生功能一致的视觉风格。",[205,209,210],{},"引入方式（一行）：",[212,213,218],"pre",{"className":214,"code":215,"language":216,"meta":217,"style":217},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import '@udhold\u002Fudhold-ui\u002Fstyles\u002Fglobal.css'\n","ts","",[219,220,221],"code",{"__ignoreMap":217},[222,223,226,230,234,238],"span",{"class":224,"line":225},"line",1,[222,227,229],{"class":228},"s7zQu","import",[222,231,233],{"class":232},"sMK4o"," '",[222,235,237],{"class":236},"sfazB","@udhold\u002Fudhold-ui\u002Fstyles\u002Fglobal.css",[222,239,240],{"class":232},"'\n",[242,243,245],"callout",{"color":244,"icon":19},"primary",[205,246,247,248,252,253,256,257,260,261,256,264,267],{},"第一原则：",[249,250,251],"strong",{},"代码里不要出现写死的颜色值","。用 ",[219,254,255],{},"var(--ink)"," 而不是 ",[219,258,259],{},"#1f2124","，用 ",[219,262,263],{},"var(--line)",[219,265,266],{},"#ecedef","——写死的颜色在暗色主题下必然出错。",[269,270,271],"h2",{"id":271},"中性色板",[205,273,274],{},"中性色是设计系统的语义真相源，采用「表面四级 + 文字三级 + 线两级」的结构：",[276,277,278,297],"table",{},[279,280,281],"thead",{},[282,283,284,288,291,294],"tr",{},[285,286,287],"th",{},"变量",[285,289,290],{},"亮色值",[285,292,293],{},"暗色值",[285,295,296],{},"用途",[298,299,300,321,341,361,381,401,420,440,460,479],"tbody",{},[282,301,302,308,313,318],{},[303,304,305],"td",{},[219,306,307],{},"--surface",[303,309,310],{},[219,311,312],{},"#ffffff",[303,314,315],{},[219,316,317],{},"#232427",[303,319,320],{},"卡片、浮层等表面底色",[282,322,323,328,333,338],{},[303,324,325],{},[219,326,327],{},"--field",[303,329,330],{},[219,331,332],{},"#f2f2f3",[303,334,335],{},[219,336,337],{},"#2b2c2f",[303,339,340],{},"输入框、内嵌区域底色",[282,342,343,348,353,358],{},[303,344,345],{},[219,346,347],{},"--hover",[303,349,350],{},[219,351,352],{},"#f4f5f6",[303,354,355],{},[219,356,357],{},"#2a2b2e",[303,359,360],{},"悬停反馈底色",[282,362,363,368,373,378],{},[303,364,365],{},[219,366,367],{},"--inset",[303,369,370],{},[219,371,372],{},"#f7f8f9",[303,374,375],{},[219,376,377],{},"#1f2022",[303,379,380],{},"凹陷区域（代码块底、空态图标底）",[282,382,383,388,393,398],{},[303,384,385],{},[219,386,387],{},"--canvas",[303,389,390],{},[219,391,392],{},"#f1f2f3",[303,394,395],{},[219,396,397],{},"#1c1d1f",[303,399,400],{},"画布底（低于 surface 的一级背景）",[282,402,403,408,412,417],{},[303,404,405],{},[219,406,407],{},"--ink",[303,409,410],{},[219,411,259],{},[303,413,414],{},[219,415,416],{},"#f2f3f4",[303,418,419],{},"主文字",[282,421,422,427,432,437],{},[303,423,424],{},[219,425,426],{},"--ink-2",[303,428,429],{},[219,430,431],{},"#62656b",[303,433,434],{},[219,435,436],{},"#a5a8ad",[303,438,439],{},"次级文字（说明、辅助信息）",[282,441,442,447,452,457],{},[303,443,444],{},[219,445,446],{},"--ink-3",[303,448,449],{},[219,450,451],{},"#6c6f75",[303,453,454],{},[219,455,456],{},"#9a9da3",[303,458,459],{},"三级文字（占位符、禁用态）",[282,461,462,467,471,476],{},[303,463,464],{},[219,465,466],{},"--line",[303,468,469],{},[219,470,266],{},[303,472,473],{},[219,474,475],{},"#2e3033",[303,477,478],{},"分隔线",[282,480,481,486,491,496],{},[303,482,483],{},[219,484,485],{},"--line-strong",[303,487,488],{},[219,489,490],{},"#e0e2e5",[303,492,493],{},[219,494,495],{},"#3a3c40",[303,497,498],{},"强分隔线、控件描边",[205,500,501,502,505,506,505,509,505,512,515],{},"另有一组历史别名（",[219,503,504],{},"--bg-color","、",[219,507,508],{},"--card-bg",[219,510,511],{},"--text-color",[219,513,514],{},"--border-color"," 等）映射到上表语义色，老插件零破坏，新代码建议直接用语义名。",[269,517,518],{"id":518},"语义色与状态色",[205,520,521],{},"场景语义色（成功 \u002F 危险 \u002F 警示三类高频语义）：",[276,523,524,536],{},[279,525,526],{},[282,527,528,530,533],{},[285,529,287],{},[285,531,532],{},"亮色",[285,534,535],{},"暗色",[298,537,538,555,572],{},[282,539,540,545,550],{},[303,541,542],{},[219,543,544],{},"--green",[303,546,547],{},[219,548,549],{},"#189a4d",[303,551,552],{},[219,553,554],{},"#3dbb72",[282,556,557,562,567],{},[303,558,559],{},[219,560,561],{},"--red",[303,563,564],{},[219,565,566],{},"#d8353c",[303,568,569],{},[219,570,571],{},"#f3616c",[282,573,574,579,584],{},[303,575,576],{},[219,577,578],{},"--orange",[303,580,581],{},[219,582,583],{},"#e56d24",[303,585,586],{},[219,587,588],{},"#f08a4b",[205,590,591],{},"交互状态色（按钮、提示、表单校验等场景）：",[276,593,594,604],{},[279,595,596],{},[282,597,598,600,602],{},[285,599,287],{},[285,601,532],{},[285,603,535],{},[298,605,606,623,638,655,670],{},[282,607,608,613,618],{},[303,609,610],{},[219,611,612],{},"--primary-color",[303,614,615],{},[219,616,617],{},"#2f6fec",[303,619,620],{},[219,621,622],{},"#4d8cf7",[282,624,625,630,634],{},[303,626,627],{},[219,628,629],{},"--danger-color",[303,631,632],{},[219,633,566],{},[303,635,636],{},[219,637,571],{},[282,639,640,645,650],{},[303,641,642],{},[219,643,644],{},"--warning-color",[303,646,647],{},[219,648,649],{},"#f59e0b",[303,651,652],{},[219,653,654],{},"#fbbf24",[282,656,657,662,666],{},[303,658,659],{},[219,660,661],{},"--success-color",[303,663,664],{},[219,665,549],{},[303,667,668],{},[219,669,554],{},[282,671,672,677,682],{},[303,673,674],{},[219,675,676],{},"--highlight-color",[303,678,679],{},[219,680,681],{},"#ea580c",[303,683,684],{},[219,685,686],{},"#fb923c",[205,688,689,691,692,695],{},[219,690,612],{}," 不是常量：它随用户选择的主题色变化（见下节），所以",[249,693,694],{},"主色操作永远引用它","。",[269,697,698],{"id":698},"主题色",[205,700,701,702,705,706,709,710,713,714,716],{},"用户可以在宿主设置里切换六种预设主题色（蓝 \u002F 紫 \u002F 绿 \u002F 橙 \u002F 红 \u002F 粉）或自定义颜色。实现方式是 ",[219,703,704],{},"body"," 上挂 ",[219,707,708],{},"theme-blue"," ~ ",[219,711,712],{},"theme-pink"," 类（自定义色则直接写内联 ",[219,715,612],{},"），体系自动派生：",[276,718,719,731],{},[279,720,721],{},[282,722,723,726,729],{},[285,724,725],{},"派生变量",[285,727,728],{},"生成规则",[285,730,296],{},[298,732,733,746,759],{},[282,734,735,740,743],{},[303,736,737],{},[219,738,739],{},"--primary-hover",[303,741,742],{},"主色压暗 15%",[303,744,745],{},"主色按钮 hover",[282,747,748,753,756],{},[303,749,750],{},[219,751,752],{},"--primary-light-bg",[303,754,755],{},"主色 10% 透明度",[303,757,758],{},"选中态底色、标签底",[282,760,761,766,772],{},[303,762,763],{},[219,764,765],{},"--focus-ring",[303,767,768,771],{},[219,769,770],{},"0 0 0 3px"," 主色光圈",[303,773,774],{},"键盘焦点环",[212,776,780],{"className":777,"code":778,"language":779,"meta":217,"style":217},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* 你的组件样式 *\u002F\n.tag-active {\n  background: var(--primary-light-bg);\n  color: var(--primary-color);\n}\n","css",[219,781,782,788,801,824,840],{"__ignoreMap":217},[222,783,784],{"class":224,"line":225},[222,785,787],{"class":786},"sHwdD","\u002F* 你的组件样式 *\u002F\n",[222,789,791,794,798],{"class":224,"line":790},2,[222,792,793],{"class":232},".",[222,795,797],{"class":796},"sBMFI","tag-active",[222,799,800],{"class":232}," {\n",[222,802,804,808,811,815,818,821],{"class":224,"line":803},3,[222,805,807],{"class":806},"sqsOY","  background",[222,809,810],{"class":232},":",[222,812,814],{"class":813},"s2Zo4"," var",[222,816,817],{"class":232},"(",[222,819,752],{"class":820},"sTEyZ",[222,822,823],{"class":232},");\n",[222,825,827,830,832,834,836,838],{"class":224,"line":826},4,[222,828,829],{"class":806},"  color",[222,831,810],{"class":232},[222,833,814],{"class":813},[222,835,817],{"class":232},[222,837,612],{"class":820},[222,839,823],{"class":232},[222,841,843],{"class":224,"line":842},5,[222,844,845],{"class":232},"}\n",[269,847,849],{"id":848},"圆角阴影与动效","圆角、阴影与动效",[276,851,852,863],{},[279,853,854],{},[282,855,856,858,861],{},[285,857,287],{},[285,859,860],{},"值",[285,862,296],{},[298,864,865,880,895,910,925,945,960,975],{},[282,866,867,872,877],{},[303,868,869],{},[219,870,871],{},"--radius-sm",[303,873,874],{},[219,875,876],{},"6px",[303,878,879],{},"小控件（标签、开关）",[282,881,882,887,892],{},[303,883,884],{},[219,885,886],{},"--radius-md",[303,888,889],{},[219,890,891],{},"8px",[303,893,894],{},"按钮、输入框",[282,896,897,902,907],{},[303,898,899],{},[219,900,901],{},"--radius-lg",[303,903,904],{},[219,905,906],{},"12px",[303,908,909],{},"卡片、弹窗",[282,911,912,917,922],{},[303,913,914],{},[219,915,916],{},"--shadow-hairline",[303,918,919],{},[219,920,921],{},"0 0 0 1px var(--line)",[303,923,924],{},"发丝线描边（比 border 更细腻）",[282,926,927,932,942],{},[303,928,929],{},[219,930,931],{},"--shadow-raised",[303,933,934,935,938,939],{},"亮 ",[219,936,937],{},"0 12px 30px rgba(20,26,40,.14)"," \u002F 暗 ",[219,940,941],{},"rgba(0,0,0,.5)",[303,943,944],{},"悬浮层投影",[282,946,947,952,957],{},[303,948,949],{},[219,950,951],{},"--ease-out",[303,953,954],{},[219,955,956],{},"cubic-bezier(0.23, 1, 0.32, 1)",[303,958,959],{},"标准缓动",[282,961,962,967,972],{},[303,963,964],{},[219,965,966],{},"--duration-fast",[303,968,969],{},[219,970,971],{},"120ms",[303,973,974],{},"快速反馈（hover、按压）",[282,976,977,982,987],{},[303,978,979],{},[219,980,981],{},"--duration-mid",[303,983,984],{},[219,985,986],{},"200ms",[303,988,989],{},"常规过渡（面板、弹层）",[269,991,992],{"id":992},"字体",[276,994,995,1005],{},[279,996,997],{},[282,998,999,1002],{},[285,1000,1001],{},"场景",[285,1003,1004],{},"字体栈",[298,1006,1007,1018],{},[282,1008,1009,1012],{},[303,1010,1011],{},"正文",[303,1013,1014,1017],{},[219,1015,1016],{},"Inter, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif","（系统栈，Windows 中文走雅黑、macOS 走苹方）",[282,1019,1020,1023],{},[303,1021,1022],{},"代码 \u002F 数值",[303,1024,1025,1028,1029,1032],{},[219,1026,1027],{},"var(--font-mono)"," = ",[219,1030,1031],{},"'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace","（woff2 随组件库打包，按需加载）",[205,1034,1035,1036,1039,1040,505,1043,1046],{},"正文基础排版由 ",[219,1037,1038],{},"global.css"," 设定：",[219,1041,1042],{},"font-size: 14px",[219,1044,1045],{},"line-height: 1.5","，插件无需重复声明。",[269,1048,1050],{"id":1049},"窗口不透明度变量勿覆盖","窗口不透明度变量（勿覆盖）",[205,1052,1053],{},"Windows 下宿主支持窗口透明度（亚克力材质），体系通过这组变量传递混合率：",[1055,1056,1057,1068,1081],"ul",{},[1058,1059,1060,1063,1064,1067],"li",{},[219,1061,1062],{},"--window-opacity"," \u002F ",[219,1065,1066],{},"--panel-opacity","：由宿主写入；",[1058,1069,1070,1073,1074,938,1077,1080],{},[219,1071,1072],{},"--bg-color-base","：原始基色（亮 ",[219,1075,1076],{},"#f7f7f8",[219,1078,1079],{},"#1d1e20","）；",[1058,1082,1083,1085],{},[219,1084,504],{},"：按不透明度混合后的实际背景色。",[205,1087,1088,1089,1092,1093,1096,1097,1100,1101,695],{},"你的样式里页面底色用 ",[219,1090,1091],{},"var(--bg-color)","、卡片用 ",[219,1094,1095],{},"var(--surface)"," 即可自动参与透明度合成。",[249,1098,1099],{},"不要覆盖这几个变量","，也不要在它们之上再做二次 ",[219,1102,1103],{},"color-mix",[269,1105,1106],{"id":1106},"用法示例",[212,1108,1112],{"className":1109,"code":1110,"language":1111,"meta":217,"style":217},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cstyle scoped>\n.setting-row {\n  padding: 10px 12px;\n  border-radius: var(--radius-md);\n  color: var(--ink);\n}\n.setting-row:hover {\n  background: var(--hover);\n}\n.setting-row .desc {\n  color: var(--ink-2);\n  font-size: 12px;\n}\n\u003C\u002Fstyle>\n","vue",[219,1113,1114,1130,1139,1156,1171,1185,1190,1204,1219,1224,1239,1254,1266,1271],{"__ignoreMap":217},[222,1115,1116,1119,1123,1127],{"class":224,"line":225},[222,1117,1118],{"class":232},"\u003C",[222,1120,1122],{"class":1121},"swJcz","style",[222,1124,1126],{"class":1125},"spNyl"," scoped",[222,1128,1129],{"class":232},">\n",[222,1131,1132,1134,1137],{"class":224,"line":790},[222,1133,793],{"class":232},[222,1135,1136],{"class":796},"setting-row",[222,1138,800],{"class":232},[222,1140,1141,1144,1146,1150,1153],{"class":224,"line":803},[222,1142,1143],{"class":806},"  padding",[222,1145,810],{"class":232},[222,1147,1149],{"class":1148},"sbssI"," 10px",[222,1151,1152],{"class":1148}," 12px",[222,1154,1155],{"class":232},";\n",[222,1157,1158,1161,1163,1165,1167,1169],{"class":224,"line":826},[222,1159,1160],{"class":806},"  border-radius",[222,1162,810],{"class":232},[222,1164,814],{"class":813},[222,1166,817],{"class":232},[222,1168,886],{"class":820},[222,1170,823],{"class":232},[222,1172,1173,1175,1177,1179,1181,1183],{"class":224,"line":842},[222,1174,829],{"class":806},[222,1176,810],{"class":232},[222,1178,814],{"class":813},[222,1180,817],{"class":232},[222,1182,407],{"class":820},[222,1184,823],{"class":232},[222,1186,1188],{"class":224,"line":1187},6,[222,1189,845],{"class":232},[222,1191,1193,1195,1197,1199,1202],{"class":224,"line":1192},7,[222,1194,793],{"class":232},[222,1196,1136],{"class":796},[222,1198,810],{"class":232},[222,1200,1201],{"class":1125},"hover",[222,1203,800],{"class":232},[222,1205,1207,1209,1211,1213,1215,1217],{"class":224,"line":1206},8,[222,1208,807],{"class":806},[222,1210,810],{"class":232},[222,1212,814],{"class":813},[222,1214,817],{"class":232},[222,1216,347],{"class":820},[222,1218,823],{"class":232},[222,1220,1222],{"class":224,"line":1221},9,[222,1223,845],{"class":232},[222,1225,1227,1229,1231,1234,1237],{"class":224,"line":1226},10,[222,1228,793],{"class":232},[222,1230,1136],{"class":796},[222,1232,1233],{"class":232}," .",[222,1235,1236],{"class":796},"desc",[222,1238,800],{"class":232},[222,1240,1242,1244,1246,1248,1250,1252],{"class":224,"line":1241},11,[222,1243,829],{"class":806},[222,1245,810],{"class":232},[222,1247,814],{"class":813},[222,1249,817],{"class":232},[222,1251,426],{"class":820},[222,1253,823],{"class":232},[222,1255,1257,1260,1262,1264],{"class":224,"line":1256},12,[222,1258,1259],{"class":806},"  font-size",[222,1261,810],{"class":232},[222,1263,1152],{"class":1148},[222,1265,1155],{"class":232},[222,1267,1269],{"class":224,"line":1268},13,[222,1270,845],{"class":232},[222,1272,1274,1277,1279],{"class":224,"line":1273},14,[222,1275,1276],{"class":232},"\u003C\u002F",[222,1278,1122],{"class":1121},[222,1280,1129],{"class":232},[205,1282,1283,1284,505,1287,1290],{},"配合 UnoCSS 时也可以直接写 ",[219,1285,1286],{},"text-[var(--ink-2)]",[219,1288,1289],{},"bg-[var(--hover)]"," 这类原子类。",[205,1292,1293,1294,1298],{},"下一节看",[1295,1296,167],"a",{"href":1297},".\u002Ftheming","：令牌的值是如何随宿主设置切换的，以及插件接入主题联动的三个步骤。",[1122,1300,1301],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":217,"searchDepth":790,"depth":790,"links":1303},[1304,1305,1306,1307,1308,1309,1310],{"id":271,"depth":790,"text":271},{"id":518,"depth":790,"text":518},{"id":698,"depth":790,"text":698},{"id":848,"depth":790,"text":849},{"id":992,"depth":790,"text":992},{"id":1049,"depth":790,"text":1050},{"id":1106,"depth":790,"text":1106},"UDhold 设计系统的颜色、字体、圆角、阴影与动效变量参考，插件界面与宿主保持一致视觉的基础。","md",{},{"icon":165},"---\ntitle: 设计令牌\ndescription: UDhold 设计系统的颜色、字体、圆角、阴影与动效变量参考，插件界面与宿主保持一致视觉的基础。\nnavigation:\n  icon: i-lucide-pipette\n---\n\n设计令牌（Design Tokens）是把设计决策沉淀为 CSS 变量的一套体系。插件只要消费这些变量而不是写死颜色值，就能自动获得明暗双主题、六种主题色、以及与宿主原生功能一致的视觉风格。\n\n引入方式（一行）：\n\n```ts\nimport '@udhold\u002Fudhold-ui\u002Fstyles\u002Fglobal.css'\n```\n\n::callout{icon=\"i-lucide-info\" color=\"primary\"}\n第一原则：**代码里不要出现写死的颜色值**。用 `var(--ink)` 而不是 `#1f2124`，用 `var(--line)` 而不是 `#ecedef`——写死的颜色在暗色主题下必然出错。\n::\n\n## 中性色板\n\n中性色是设计系统的语义真相源，采用「表面四级 + 文字三级 + 线两级」的结构：\n\n| 变量 | 亮色值 | 暗色值 | 用途 |\n|------|--------|--------|------|\n| `--surface` | `#ffffff` | `#232427` | 卡片、浮层等表面底色 |\n| `--field` | `#f2f2f3` | `#2b2c2f` | 输入框、内嵌区域底色 |\n| `--hover` | `#f4f5f6` | `#2a2b2e` | 悬停反馈底色 |\n| `--inset` | `#f7f8f9` | `#1f2022` | 凹陷区域（代码块底、空态图标底） |\n| `--canvas` | `#f1f2f3` | `#1c1d1f` | 画布底（低于 surface 的一级背景） |\n| `--ink` | `#1f2124` | `#f2f3f4` | 主文字 |\n| `--ink-2` | `#62656b` | `#a5a8ad` | 次级文字（说明、辅助信息） |\n| `--ink-3` | `#6c6f75` | `#9a9da3` | 三级文字（占位符、禁用态） |\n| `--line` | `#ecedef` | `#2e3033` | 分隔线 |\n| `--line-strong` | `#e0e2e5` | `#3a3c40` | 强分隔线、控件描边 |\n\n另有一组历史别名（`--bg-color`、`--card-bg`、`--text-color`、`--border-color` 等）映射到上表语义色，老插件零破坏，新代码建议直接用语义名。\n\n## 语义色与状态色\n\n场景语义色（成功 \u002F 危险 \u002F 警示三类高频语义）：\n\n| 变量 | 亮色 | 暗色 |\n|------|------|------|\n| `--green` | `#189a4d` | `#3dbb72` |\n| `--red` | `#d8353c` | `#f3616c` |\n| `--orange` | `#e56d24` | `#f08a4b` |\n\n交互状态色（按钮、提示、表单校验等场景）：\n\n| 变量 | 亮色 | 暗色 |\n|------|------|------|\n| `--primary-color` | `#2f6fec` | `#4d8cf7` |\n| `--danger-color` | `#d8353c` | `#f3616c` |\n| `--warning-color` | `#f59e0b` | `#fbbf24` |\n| `--success-color` | `#189a4d` | `#3dbb72` |\n| `--highlight-color` | `#ea580c` | `#fb923c` |\n\n`--primary-color` 不是常量：它随用户选择的主题色变化（见下节），所以**主色操作永远引用它**。\n\n## 主题色\n\n用户可以在宿主设置里切换六种预设主题色（蓝 \u002F 紫 \u002F 绿 \u002F 橙 \u002F 红 \u002F 粉）或自定义颜色。实现方式是 `body` 上挂 `theme-blue` ~ `theme-pink` 类（自定义色则直接写内联 `--primary-color`），体系自动派生：\n\n| 派生变量 | 生成规则 | 用途 |\n|----------|----------|------|\n| `--primary-hover` | 主色压暗 15% | 主色按钮 hover |\n| `--primary-light-bg` | 主色 10% 透明度 | 选中态底色、标签底 |\n| `--focus-ring` | `0 0 0 3px` 主色光圈 | 键盘焦点环 |\n\n```css\n\u002F* 你的组件样式 *\u002F\n.tag-active {\n  background: var(--primary-light-bg);\n  color: var(--primary-color);\n}\n```\n\n## 圆角、阴影与动效\n\n| 变量 | 值 | 用途 |\n|------|----|------|\n| `--radius-sm` | `6px` | 小控件（标签、开关） |\n| `--radius-md` | `8px` | 按钮、输入框 |\n| `--radius-lg` | `12px` | 卡片、弹窗 |\n| `--shadow-hairline` | `0 0 0 1px var(--line)` | 发丝线描边（比 border 更细腻） |\n| `--shadow-raised` | 亮 `0 12px 30px rgba(20,26,40,.14)` \u002F 暗 `rgba(0,0,0,.5)` | 悬浮层投影 |\n| `--ease-out` | `cubic-bezier(0.23, 1, 0.32, 1)` | 标准缓动 |\n| `--duration-fast` | `120ms` | 快速反馈（hover、按压） |\n| `--duration-mid` | `200ms` | 常规过渡（面板、弹层） |\n\n## 字体\n\n| 场景 | 字体栈 |\n|------|--------|\n| 正文 | `Inter, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif`（系统栈，Windows 中文走雅黑、macOS 走苹方） |\n| 代码 \u002F 数值 | `var(--font-mono)` = `'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace`（woff2 随组件库打包，按需加载） |\n\n正文基础排版由 `global.css` 设定：`font-size: 14px`、`line-height: 1.5`，插件无需重复声明。\n\n## 窗口不透明度变量（勿覆盖）\n\nWindows 下宿主支持窗口透明度（亚克力材质），体系通过这组变量传递混合率：\n\n- `--window-opacity` \u002F `--panel-opacity`：由宿主写入；\n- `--bg-color-base`：原始基色（亮 `#f7f7f8` \u002F 暗 `#1d1e20`）；\n- `--bg-color`：按不透明度混合后的实际背景色。\n\n你的样式里页面底色用 `var(--bg-color)`、卡片用 `var(--surface)` 即可自动参与透明度合成。**不要覆盖这几个变量**，也不要在它们之上再做二次 `color-mix`。\n\n## 用法示例\n\n```vue\n\u003Cstyle scoped>\n.setting-row {\n  padding: 10px 12px;\n  border-radius: var(--radius-md);\n  color: var(--ink);\n}\n.setting-row:hover {\n  background: var(--hover);\n}\n.setting-row .desc {\n  color: var(--ink-2);\n  font-size: 12px;\n}\n\u003C\u002Fstyle>\n```\n\n配合 UnoCSS 时也可以直接写 `text-[var(--ink-2)]`、`bg-[var(--hover)]` 这类原子类。\n\n下一节看[主题与明暗模式](.\u002Ftheming)：令牌的值是如何随宿主设置切换的，以及插件接入主题联动的三个步骤。\n",{"title":162,"description":1311},"KFEHs4KWY2QIjhuoE4w4_klyx1AYl6mG_Vfcrrb1UgY",[1319,1321],{"title":152,"path":153,"stem":154,"description":1320,"icon":155,"children":-1},"插件开发中高频问题的排查手册：调试不生效、权限被拒、主题不跟随、打包缺文件等。",{"title":167,"path":168,"stem":169,"description":1322,"icon":170,"children":-1},"插件如何跟随宿主的明暗主题、主题色与窗口透明度，三步接入与底层机制。",1793010248947]