https://www.reelshort.com/_next/static/chunks/pages/dev/ui-tokens-5a6f55faea5fc7c3.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3533],{16988:function(e,s,t){"use strict";t.r(s),t.d(s,{__N_SSP:function(){return A},default:function(){return K}});var a=t(25548),l=t(63200),r=t(20150),c=t.n(r),n=t(51776),o=t(55204),i=t(85575),d=t(33294),x=t(36734),p=[["ring-offset-","--un-ring-offset-color"],["text-","color"],["bg-","background-color"],["border-","border-top-color"],["fill-","fill"],["stroke-","stroke"],["caret-","caret-color"],["decoration-","text-decoration-color"],["accent-","accent-color"],["outline-","outline-color"],["ring-","--un-ring-color"],["shadow-","--un-shadow-color"]],m=function(e){var s;return null===(s=p.find((function(s){var t=(0,l.Z)(s,1)[0];return e.startsWith(t)})))||void 0===s?void 0:s[1]},u=[{className:"text-vipbrown-disabled",group:"texticon",tokenKey:"vipbrown-disabled",conflictGroup:"fills"},{className:"fill-vipbrown-disabled",group:"texticon",tokenKey:"vipbrown-disabled",conflictGroup:"fills"},{className:"stroke-vipbrown-disabled",group:"texticon",tokenKey:"vipbrown-disabled",conflictGroup:"fills"},{className:"caret-vipbrown-disabled",group:"texticon",tokenKey:"vipbrown-disabled",conflictGroup:"fills"},{className:"decoration-vipbrown-disabled",helperClassName:"underline",group:"texticon",tokenKey:"vipbrown-disabled",conflictGroup:"fills"},{className:"bg-brand-secondary",group:"fills",tokenKey:"brand-secondary",conflictGroup:"line"},{className:"accent-brand-secondary",group:"fills",tokenKey:"brand-secondary",conflictGroup:"line"},{className:"ring-offset-brand-secondary",helperClassName:"ring-4 ring-offset-4",group:"fills",tokenKey:"brand-secondary",conflictGroup:"line"},{className:"border-brand-secondary",helperClassName:"border-4 border-solid",group:"line",tokenKey:"brand-secondary",conflictGroup:"fills"},{className:"ring-brand-secondary",helperClassName:"ring-4",group:"line",tokenKey:"brand-secondary",conflictGroup:"fills"},{className:"outline-brand-secondary",helperClassName:"outline outline-4",group:"line",tokenKey:"brand-secondary",conflictGroup:"fills"},{className:"shadow-brand-secondary",helperClassName:"shadow-lg",group:"line",tokenKey:"brand-secondary",conflictGroup:"fills"}],f=[{className:"text-largetitle",cssVar:"--rs-font-size-largetitle"},{className:"text-title1",cssVar:"--rs-font-size-title1"},{className:"text-title2",cssVar:"--rs-font-size-title2"},{className:"text-title3",cssVar:"--rs-font-size-title3"},{className:"text-headline",cssVar:"--rs-font-size-headline"},{className:"text-body",cssVar:"--rs-font-size-body"},{className:"text-footnote",cssVar:"--rs-font-size-footnote"},{className:"text-caption",cssVar:"--rs-font-size-caption"}],h=[{className:"font-semibold",cssVar:"--rs-font-weight-semibold"},{className:"font-medium",cssVar:"--rs-font-weight-medium"},{className:"font-regular",cssVar:"--rs-font-weight-regular"}],N=[{className:"p-0.5",scaleKey:"0.5"},{className:"p-1",scaleKey:"1"},{className:"p-2",scaleKey:"2"},{className:"p-3",scaleKey:"3"},{className:"p-4",scaleKey:"4"},{className:"p-6",scaleKey:"6"},{className:"p-8",scaleKey:"8"},{className:"p-12",scaleKey:"12"}],b=[{className:"rounded-none",scaleKey:"none"},{className:"rounded-sm",scaleKey:"sm"},{className:"rounded",scaleKey:"DEFAULT"},{className:"rounded-md",scaleKey:"md"},{className:"rounded-lg",scaleKey:"lg"},{className:"rounded-xl",scaleKey:"xl"},{className:"rounded-2xl",scaleKey:"2xl"},{className:"rounded-3xl",scaleKey:"3xl"},{className:"rounded-full",scaleKey:"full"}],g=[{className:"animate-rs-fade-in",name:"rs-fade-in"},{className:"animate-rs-pop-in",name:"rs-pop-in"},{className:"animate-rs-slide-in-bottom",name:"rs-slide-in-bottom"},{className:"animate-rs-slide-in-top",name:"rs-slide-in-top"},{className:"animate-rs-slide-in-left",name:"rs-slide-in-left"},{className:"animate-rs-slide-in-right",name:"rs-slide-in-right"}],j={texticon:"texticon\uff08\u6587\u5b57\u4e0e\u56fe\u6807\uff09",fills:"fills\uff08\u586b\u5145\u4e0e\u80cc\u666f\uff09",line:"line\uff08\u63cf\u8fb9\uff09",mask:"mask\uff08\u8499\u5c42\uff09"},y="repeating-conic-gradient(#96969c 0% 25%, #e6e6ea 0% 50%) 0 0 / 10px 10px";function v(e){var s=e.result,t=s?s.ok?"#00A05A":"#E52E2E":"#C7C7CC";return(0,x.jsx)("span",{className:"h-8px w-8px flex-none rounded-full",style:{backgroundColor:t}})}function k(e){var s=e.title,t=e.desc,a=e.right,l=e.children;return(0,x.jsxs)("section",{className:"overflow-hidden border border-[#

1E4E4E7] rounded-12px border-solid bg-white",children:[(0,x.jsxs)("header",{className:"flex items-center justify-between gap-16px border-b border-[#EDEDF0] border-solid px-20px py-14px",children:[(0,x.jsxs)("div",{children:[(0,x.jsx)("h2",{className:"text-16px text-[#18181B] font-600",children:s}),t?(0,x.jsx)("p",{className:"mt-2px text-12px text-[#71717A] leading-18px",children:t}):null]}),a]}),(0,x.jsx)("div",{className:"p-20px",children:l})]})}function w(e){var s=e.check,t=s.className.startsWith("text-"),a=s.className.startsWith("border-");return(0,x.jsx)("div",{className:"h-36px w-36px flex-none rounded-6px",style:{background:y},children:(0,x.jsx)("div",{"data-check-id":s.id,className:"h-full w-full rounded-6px ".concat(a?"border-4 border-solid":""," ").concat(s.className),children:t?(0,x.jsx)("span",{className:"block h-full w-full rounded-6px",style:{backgroundColor:"currentColor"}}):null})})}function E(e){var s=e.check,t="".concat(s.className," ").concat(s.helperClassName||""),a=s.className.startsWith("fill-")||s.className.startsWith("stroke-"),l=s.className.startsWith("text-")||s.className.startsWith("decoration-")||s.className.startsWith("caret-");return(0,x.jsx)("div",{className:"h-40px w-40px flex flex-none items-center justify-center rounded-6px",style:{background:y},children:a?(0,x.jsx)("svg",{"data-check-id":s.id,className:"h-32px w-32px ".concat(t),viewBox:"0 0 24 24",children:(0,x.jsx)("rect",{x:"3",y:"3",width:"18",height:"18",rx:"4",strokeWidth:"3",fill:s.className.startsWith("stroke-")?"none":void 0})}):l?(0,x.jsx)("span",{"data-check-id":s.id,className:"text-16px font-600 ".concat(t),children:"Aa"}):s.className.startsWith("accent-")?(0,x.jsx)("input",{"data-check-id":s.id,type:"checkbox",defaultChecked:!0,className:"h-18px w-18px ".concat(t)}):(0,x.jsx)("div",{"data-check-id":s.id,className:"h-32px w-32px rounded-6px ".concat(t)})})}function C(e){var s=e.result;return!s||s.ok?null:(0,x.jsxs)("p",{className:"mt-2px text-11px text-[#B42318] leading-16px",children:["\u5b9e\u6d4b ",s.actual||"(\u7a7a

1)"," / \u671f\u671b ",s.expected||"(\u7a7a)",s.conflictHit?" \u2014\u2014 \u53d6\u5230\u4e86\u53e6\u4e00\u4e2a\u5206\u7ec4\u7684\u503c\uff0c\u68c0\u67e5 preset \u987a\u5e8f":"",s.varOk?"":" \u2014\u2014 \u53d8\u91cf\u503c\u4e0e\u8bbe\u8ba1\u6e90\u6570\u636e\u4e0d\u4e00\u81f4"]})}var A=!0;function K(){var e=(0,n.useState)("light"),s=e[0],t=e[1],r=(0,n.useState)(!1),p=r[0],y=r[1],A=(0,n.useState)({}),K=A[0],V=A[1],B=(0,n.useState)(null),F=B[0],S=B[1],_=(0,n.useState)(""),z=_[0],G=_[1],D=(0,n.useState)(0),W=D[0],Z=D[1],T=(0,n.useRef)(null),M=(0,n.useMemo)((function(){return i.qh.map((function(e){var t,a=e.classes[0],l=m(a);return l?{id:"token:".concat(e.group,":").concat(e.key),className:a,property:l,expectVar:e.cssVar,designValue:null===(t=o.hR["".concat(e.group,"-").concat(e.key)])||void 0===t?void 0:t.values[s],isColor:!0,label:a,note:e.description}:null})).filter((function(e){return!!e}))}),[s]),O=(0,n.useMemo)((function(){return u.map((function(e){return{id:"derived:".concat(e.className),className:e.className,helperClassName:e.helperClassName,property:m(e.className),expectVar:"--rs-".concat(e.group,"-").concat(e.tokenKey),conflictVar:"--rs-".concat(e.conflictGroup,"-").concat(e.tokenKey),isColor:!0,label:e.className,note:"\u5e94\u53d6 ".concat(e.group," \u5206\u7ec4")}}))}),[]),P=(0,n.useMemo)((function(){return[].concat((0,a.Z)(f.map((function(e){return{id:"font-size:".concat(e.className),className:e.className,property:"font-size",expectVar:e.cssVar,isColor:!1,label:e.className}}))),(0,a.Z)(h.map((function(e){return{id:"font-weight:".concat(e.className),className:e.className,property:"font-weight",expectVar:e.cssVar,isColor:!1,label:e.className}}))),[{id:"font-family:font-sans",className:"font-sans",property:"font-family",expectVar:"--rs-font-family-sans",isColor:!1,label:"font-sans"}],(0,a.Z)(N.map((function(e){return{id:"spacing:".concat(e.className),className:e.className,property:"padding-top",expectLiteral:d.W0[e.scaleKey],isColor:!1,label:e.className}}))),(0,a.Z)(b.map((function(e){return{id:"radius:".concat(e.className),className:e.className,property:"border-top-left-radius",expectLiteral:d.E0[e.scaleKey],isColor:!1,label:e.className}}))),(0,a.Z)(g.map((function(e){return{id:"animation:".concat(e.className),className:e.className,property:"animation-name",expectLiteral:e.name,isColor:!1,label:e.className}}))))}),[]),L=(0,n.useMemo)((function(){return[].concat((0,a.Z)(M),(0,a.Z)(O),(0,a.Z)(P))}),[M,O,P]),H=(0,n.useCallback)((function(){var e=T.current;if(e){var s=getComputedStyle(document.documentElement),t=function(s,t){var a=(s||"").trim();return a?t?(e.style.color="rgb(1, 2, 3)",e.style.color=a,getComputedStyle(e).color):function(e){return e.replace(/['"]/g,"").replace(/\s+/g," ").trim()}(a):""};S(""!==s.getPropertyValue("--rs-texticon-default-primary").trim());var a={};L.forEach((function(e){var l=document.querySelector('[data-check-id="'.concat(e.id,'"]'));if(l){var r=t(getComputedStyle(l).getPropertyValue(e.property),e.isColor),c=t(e.expectVar?s.getPropertyValue(e.expectVar):e.expectLiteral||"",e.isColor),n=e.designValue?t(e.designValue,e.isColor):"",o=e.conflictVar?t(s.getPropertyValue(e.conflictVar),e.isColor):"",i=!n||n===c;a[e.id]={actual:r,expected:c,varOk:i,conflictHit:!!o&&r===o&&r!==c,ok:!!c&&r===c&&i}}})),V(a),G((new Date).toLocaleTimeString())}}),[L]);(0,n.useEffect)((function(){return document.documentElement.dataset.rsTheme=s,function(){delete document.documentElement.dataset.rsTheme}}),[s]),(0,n.useEffect)((function(){var e=requestAnimationFrame(H);return function(){return cancelAnimationFrame(e)}}),[H,s]);var R=(0,n.useMemo)((function(){var e=L.filter((function(e){return K[e.id]})),s=e.filter((function(e){return!K[e.id].ok}));return{total:L.length,measured:e.length,failed:s.length,passed:e.length-s.length}}),[L,K]),q=(0,n.useCallback)((function(e){return!p||!K[e]||!K[e].ok}),[p,K]),U=(0,n.useMemo)((function(){var e=new Map;return M.forEach((function(s){var t=s.id.split(":")[1];e.set(t,[].concat((0,a.Z)(e.get(t)||[]),[s]))})),Array.from(e.entries())}),[M]);return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsxs)(c(),{children:[(0,x.jsx)("title",{children:"RS UI Tokens \u9a8c\u8bc1"}),(0,x.jsx)("meta",{name:"robots",content:"noindex"})]}

1),(0,x.jsx)("span",{ref:T,"aria-hidden":!0,className:"pointer-events-none absolute opacity-0"}),(0,x.jsxs)("main",{className:"min-h-screen bg-[#F4F4F5] pb-64px",children:[(0,x.jsx)("div",{className:"sticky top-0 z-10 border-b border-[#E4E4E7] border-solid bg-white px-24px py-16px",children:(0,x.jsxs)("div",{className:"mx-auto max-w-1180px flex flex-wrap items-center justify-between gap-16px",children:[(0,x.jsxs)("div",{children:[(0,x.jsx)("h1",{className:"text-20px text-[#18181B] font-700",children:"RS UI Tokens \u63a5\u5165\u9a8c\u8bc1"}),(0,x.jsx)("p",{className:"mt-2px text-12px text-[#71717A]",children:"@rs/ui-tokens \xb7 presetRsTokens \xb7 \u4e34\u65f6\u9875\u9762\uff0c\u9a8c\u8bc1\u5b8c\u53ef\u5220"})]}),(0,x.jsxs)("div",{className:"flex flex-wrap items-center gap-12px",children:[(0,x.jsxs)("div",{className:"flex items-center gap-16px rounded-8px bg-[#F4F4F5] px-14px py-8px text-13px",children:[(0,x.jsxs)("span",{className:"text-[#00A05A] font-600",children:["\u901a\u8fc7 ",R.passed]}),(0,x.jsxs)("span",{className:R.failed?"text-[#E52E2E] font-600":"text-[#A1A1AA]",children:["\u5931\u8d25 ",R.failed]}),(0,x.jsxs)("span",{className:"text-[#A1A1AA]",children:["\u5171 ",R.total]})]}),(0,x.jsx)("div",{className:"flex overflow-hidden border border-[#E4E4E7] rounded-8px border-solid",children:["light","dark"].map((function(e){return(0,x.jsx)("button",{type:"button",onClick:function(){return t(e)},className:"px-14px py-8px text-13px ".concat(s===e?"bg-[#18181B] text-white":"bg-white text-[#52525B]"),children:e},e)}))}),(0,x.jsxs)("label",{className:"flex items-center gap-6px text-13px text-[#52525B]",children:[(0,x.jsx)("input",{type:"checkbox",checked:p,onChange:function(e){return y(e.target.checked)}}),"\u53ea\u770b\u5931\u8d25"]}),(0,x.jsx)("button",{type:"button",onClick:H,className:"rounded-8px bg-[#18181B] px-14px py-8px text-13px text-white",children:"\u91cd\u65b0\u6d4b\u91cf"})]})]})}),(0,x.jsxs)("div",{className:"mx-auto max-w-1180px flex flex-col gap-20px px-24px pt-20px",children:[!1===F?(0,x.jsx)("div",{className:"border border-[#F5C6C6] rounded-12px border-solid bg-[#FEF2F2] p-16px text-13px text-[#B42318]",children:"\u6ca1\u8bfb\u5230 --rs-* \u53d8\u91cf\uff1a\u5165\u53e3\u6ca1\u6709 import \u2018@rs/ui-tokens/css/variables.css\u2019\uff0c\u6240\u6709 token class \u90fd\u4f1a\u53d6\u5230\u7a7a\u503c\u3002"}):null,(0,x.jsx)(k,{title:"\u94fe\u8def\u81ea\u68c0",desc:"\u6700\u540e\u6d4b\u91cf ".concat(z||"\u2014",'\uff1b\u5f53\u524d\u4e3b\u9898 data-rs-theme="').concat(s,'"'),children:(0,x.jsxs)("ul",{className:"flex flex-col gap-8px text-13px text-[#3F3F46]",children:[(0,x.jsxs)("li",{className:"flex items-center gap-8px",children:[(0,x.jsx)(v,{result:null===F?void 0:{actual:"",expected:"",varOk:!0,conflictHit:!1,ok:F}}),"variables.css \u5df2\u52a0\u8f7d\uff08:root \u4e0a\u80fd\u8bfb\u5230 --rs-* \u53d8\u91cf\uff09"]}),(0,x.jsxs)("li",{className:"flex items-center gap-8px",children:[(0,x.jsx)(v,{result:R.measured?{actual:"",expected:"",varOk:!0,conflictHit:!1,ok:R.measured===R.total}:void 0}),"\u63a2\u9488\u5168\u90e8\u91cf\u5230\uff08",R.measured,"/",R.total,"\uff09"]}),(0,x.jsxs)("li",{className:"flex items-center gap-8px",children:[(0,x.jsx)(v,{result:R.measured?{actual:"",expected:"",varOk:!0,conflictHit:!1,ok:0===R.failed}:void 0}),"class \u5b9e\u6d4b\u503c\u4e0e\u8bbe\u8ba1\u6e90\u6570\u636e\u4e00\u81f4"]})]})}),(0,x.jsx)(k,{title:"\u6d3e\u751f\u524d\u7f00\u53d6\u503c\u5206\u7ec4",desc:"preset \u987a\u5e8f\u53cd\u4e86\u8fd9\u4e9b class \u7167\u6837\u80fd\u7f16\u8bd1\uff0c\u53ea\u662f\u53d6\u9519\u5206\u7ec4\u3002\u8fd9\u91cc\u523b\u610f\u6311\u5206\u7ec4\u95f4\u5df2\u5206\u53c9\u7684 token\uff0c\u53d6\u9519\u5c31\u5fc5\u7136\u5bf9\u4e0d\u4e0a\u3002",children:(0,x.jsx)("div",{className:"grid gap-12px lg:grid-cols-3 sm:grid-cols-2",children:O.filter((function(e){return q(e.id)})).map((function(e){var s=K[e.id];return(0,x.jsxs)("div",{className:"flex items-start gap-10px border border-[#EDEDF0] rounded-8px border-solid p-12px",children:[(0,x.jsx)(E,{check:e}),(0,x.jsxs)("div",{className:"min-w-0",children:[(0,x.jsxs)("div",{className:"flex items-center gap-6px",children:[(0,x.jsx)(v,{result:s}),(0,x.jsx)("code",{className:"break-all text-12px text-[#18181B]",children:e.label})]}),(0,x.jsx)("p",{className:"mt-2px text-11px text-[#71717A]",children:e.note}),(0,x.jsx)(C,{result:s})]})]},e.id)}))})}),U.map((function(e){var s=(0,l.Z)(e,2),t=s[0],a=s[1],r=a.filter((function(e){return q(e.id)}));return r.length?(0,x.jsx)(k,{title:j[t]||t,desc:"".concat(a.length," \u4e2a token\uff0c\u8272\u5757\u7528 ").concat(a[0].className.split("-")[0],"- \u524d\u7f00\u7684 class \u7ed8\u5236\uff0c\u671f\u671b\u503c\u53d6\u81ea :root \u53d8\u91cf\u5e76\u4e0e\u8bbe\u8ba1\u6e90\u6570\u636e\u53cc\u5411\u6bd4\u5bf9"),children:(0,x.jsx)("div",{className:"grid gap-10px lg:grid-cols-3 sm:grid-cols-2",children:r.map((function(e){var s=K[e.id];return(0,x.jsxs)("div",{className:"flex items-start gap-10px border border-[#

1EDEDF0] rounded-8px border-solid p-10px",children:[(0,x.jsx)(w,{check:e}),(0,x.jsxs)("div",{className:"min-w-0",children:[(0,x.jsxs)("div",{className:"flex items-center gap-6px",children:[(0,x.jsx)(v,{result:s}),(0,x.jsx)("code",{className:"break-all text-12px text-[#18181B]",children:e.label})]}),(0,x.jsx)("p",{className:"mt-2px text-11px text-[#71717A]",children:e.note||"\u2014"}),(0,x.jsx)("p",{className:"mt-2px text-11px text-[#A1A1AA]",children:(null===s||void 0===s?void 0:s.expected)||""}),(0,x.jsx)(C,{result:s})]})]},e.id)}))})},t):null})),(0,x.jsx)(k,{title:"\u5b57\u9636\u4e0e\u5b57\u91cd",desc:"text-<scale> \u8bfb --rs-font-size-*\uff0cfont-<weight> \u8bfb --rs-font-weight-*",children:(0,x.jsxs)("div",{className:"flex flex-col gap-10px",children:[f.filter((function(e){return q("font-size:".concat(e.className))})).map((function(e){var s="font-size:".concat(e.className),t=K[s];return(0,x.jsxs)("div",{className:"flex items-center gap-12px",children:[(0,x.jsxs)("div",{className:"w-160px flex flex-none items-center gap-6px",children:[(0,x.jsx)(v,{result:t}),(0,x.jsx)("code",{className:"text-12px text-[#18181B]",children:e.className})]}),(0,x.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,x.jsx)("p",{"data-check-id":s,className:"truncate text-[#18181B] ".concat(e.className),children:"\u6c38\u8fdc\u76f8\u4fe1\u7f8e\u597d\u7684\u4e8b\u60c5\u5373\u5c06\u53d1\u751f Aa 42"}),(0,x.jsx)(C,{result:t})]}),(0,x.jsx)("span",{className:"flex-none text-11px text-[#A1A1AA]",children:null===t||void 0===t?void 0:t.expected})]},s)})),(0,x.jsx)("div",{className:"mt-4px flex flex-wrap gap-16px",children:h.concat([{className:"font-sans",cssVar:"--rs-font-family-sans"}]).filter((function(e){return q("font-sans"===e.className?"font-family:font-sans":"font-weight:".concat(e.className))})).map((function(e){var s="font-sans"===e.className?"font-family:font-sans":"font-weight:".concat(e.className),t=K[s];return(0,x.jsxs)("div",{className:"border border-[#EDEDF0] rounded-8px border-solid px-12px py-8px",children:[(0,x.jsxs)("div",{className:"flex items-center gap-6px",children:[(0,x.jsx)(v,{result:t}),(0,x.jsx)("code",{className:"text-12px text-[#18181B]",children:e.className})]}),(0,x.jsx)("p",{"data-check-id":s,className:"mt-4px text-16px text-[#18181B] ".concat(e.className),children:"The quick brown fox"}),(0,x.jsx)(C,{result:t})]},s)}))})]})}),(0,x.jsxs)(k,{title:"\u95f4\u8ddd\u4e0e\u5706\u89d2",desc:"preset \u8986\u76d6\u4e86\u5c3a\u5bf8 scale\uff1ap-2 \u4ece 0.5rem \u53d8\u6210\u7b49\u503c\u7684 8px\u3002\u672c\u9875\u4e0d\u5728 postcss px-to-viewport \u7684 include \u91cc\uff0c\u6240\u4ee5 px \u4e0d\u4f1a\u88ab\u8f6c\u6210 vw\u3002",children:[(0,x.jsx)("div",{className:"flex flex-wrap gap-12px",children:N.filter((function(e){return q("spacing:".concat(e.className))})).map((function(e){var s="spacing:".concat(e.className),t=K[s];return(0,x.jsxs)("div",{className:"w-92px",children:[(0,x.jsxs)("div",{className:"flex items-center gap-6px",children:[(0,x.jsx)(v,{result:t}),(0,x.jsx)("code",{className:"text-12px text-[#18181B]",children:e.className})]}),(0,x.jsx)("div",{"data-check-id":s,className:"mt-6px inline-block bg-[#E4E4E7] ".concat(e.className),children:(0,x.jsx)("span",{className:"block h-16px w-16px bg-[#18181B]"})}),(0,x.jsx)("p",{className:"mt-2px text-11px text-[#A1A1AA]",children:null===t||void 0===t?void 0:t.expected}),(0,x.jsx)(C,{result:t})]},s)}))}),(0,x.jsx)("div",{className:"mt-20px flex flex-wrap gap-12px",children:b.filter((function(e){return q("radius:".concat(e.className))})).map((function(e){var s="radius:".concat(e.className),t=K[s];return(0,x.jsxs)("div",{className:"w-92px",children:[(0,x.jsxs)("div",{className:"flex items-center gap-6px",children:[(0,x.jsx)(v,{result:t}),(0,x.jsx)("code",{className:"text-12px text-[#18181B]",children:e.className})]}),(0,x.jsx)("div",{"data-check-id":s,className:"mt-6px h-48px w-48px bg-[#18181B] ".concat(e.className)}),(0,x.jsx)("p",{className:"mt-2px text-11px text-[#A1A1AA]",children:null===t||void 0===t?void 0:t.expected}),(0,x.jsx)(C,{result:t})]},s)}))})]}),(0,x.jsx)(k,{title:"\u52a8\u753b",desc:"preset \u5e26\u7684 keyframes / duration / timing-function",right:(0,x.jsx)("button",{type:"button",onClick:function(){return Z((function(e){return e+1}))}

1,className:"border border-[#E4E4E7] rounded-8px border-solid px-12px py-6px text-12px text-[#52525B]",children:"\u91cd\u64ad"}),children:(0,x.jsx)("div",{className:"flex flex-wrap gap-12px",children:g.filter((function(e){return q("animation:".concat(e.className))})).map((function(e){var s="animation:".concat(e.className),t=K[s];return(0,x.jsxs)("div",{className:"w-176px border border-[#EDEDF0] rounded-8px border-solid p-12px",children:[(0,x.jsxs)("div",{className:"flex items-center gap-6px",children:[(0,x.jsx)(v,{result:t}),(0,x.jsx)("code",{className:"text-11px text-[#18181B]",children:e.name})]}),(0,x.jsx)("div",{className:"mt-8px h-48px overflow-hidden rounded-6px bg-[#F4F4F5]",children:(0,x.jsx)("div",{"data-check-id":s,className:"h-full w-full bg-[#18181B] ".concat(e.className)},W)}),(0,x.jsx)(C,{result:t})]},s)}))})}),(0,x.jsx)(k,{title:"placeholder \u5199\u6cd5\u5bf9\u7167",desc:"\u5360\u4f4d\u7b26\u6587\u5b57\u8272\u53ea\u80fd\u7528 placeholder:text-*\uff0c\u7b80\u5199 placeholder-* \u4e0d\u751f\u6548\uff08\u8fd9\u6761\u4e0d\u505a\u65ad\u8a00\uff0c\u76f4\u63a5\u770b\u6548\u679c\uff09",children:(0,x.jsxs)("div",{className:"flex flex-wrap gap-16px",children:[(0,x.jsxs)("label",{className:"flex flex-col gap-6px text-12px text-[#52525B]",children:[(0,x.jsx)("code",{children:"placeholder:text-default-tertiary"}),(0,x.jsx)("input",{className:"h-40px w-260px border border-default-line-2 rounded-8px border-solid bg-backgrounds-bg-2 px-12px text-14px text-default-primary placeholder:text-default-tertiary",placeholder:"\u6b63\u786e\u5199\u6cd5\uff0c\u80fd\u770b\u5230\u7070\u9636\u5360\u4f4d\u7b26"})]}),(0,x.jsxs)("label",{className:"flex flex-col gap-6px text-12px text-[#52525B]",children:[(0,x.jsx)("code",{children:"placeholder-default-tertiary"}),(0,x.jsx)("input",{className:"placeholder-default-tertiary h-40px w-260px border border-default-line-2 rounded-8px border-solid bg-backgrounds-bg-2 px-12px text-14px text-default-primary",placeholder:"\u9519\u8bef\u5199\u6cd5\uff0c\u5360\u4f4d\u7b26\u662f\u6d4f\u89c8\u5668\u9ed8\u8ba4\u8272"})]})]})}),(0,x.jsx)(k,{title:"\u7ec4\u5408\u5c0f\u6837",desc:"\u5168\u90e8\u7528 token class \u62fc\u88c5\uff0c\u5207\u4e3b\u9898\u65f6\u5e94\u8be5\u6574\u4f53\u8ddf\u7740\u7ffb\u8f6c",children:(0,x.jsx)("div",{className:"rounded-12px bg-backgrounds-bg-1 p-24px",children:(0,x.jsxs)("div",{className:"max-w-420px border border-default-line-1 rounded-12px border-solid bg-backgrounds-bg-2 p-20px",children:[(0,x.jsxs)("div",{className:"flex items-center justify-between gap-12px",children:[(0,x.jsx)("h3",{className:"text-title3 text-default-emphasis font-semibold",children:"\u8ba2\u9605\u65b9\u6848"}),(0,x.jsx)("span",{className:"rounded-full bg-error-secondary px-10px py-4px text-caption text-error-default",children:"\u9650\u65f6"})]}),(0,x.jsx)("p",{className:"mt-8px text-body text-default-secondary",children:"\u8fd9\u6bb5\u662f\u4e8c\u7ea7\u6587\u5b57\uff0c\u7528 text-default-secondary\u3002"}),(0,x.jsx)("p",{className:"mt-4px text-footnote text-default-tertiary",children:"\u8fd9\u6bb5\u662f\u4e09\u7ea7\u8bf4\u660e\u6587\u5b57\uff0c\u7528 text-default-tertiary\u3002"}),(0,x.jsxs)("div",{className:"mt-16px flex gap-12px",children:[(0,x.jsx)("button",{type:"button",className:"rounded-8px bg-brand-default px-16px py-10px text-body text-brand-on-default font-medium",children:"\u7acb\u5373\u8ba2\u9605"}),(0,x.jsx)("button",{type:"button",className:"rounded-8px bg-brand-secondary px-16px py-10px text-body text-brand-default font-medium",children:"\u7a0d\u540e\u518d\u8bf4"}),(0,x.jsx)("button",{type:"button",className:"border border-default-line-2 rounded-8px border-solid bg-transparent px-16px py-10px text-body text-default-primary font-medium",children:"\u4e86\u89e3\u66f4\u591a"})]})]})})})]})]})]})}},6312:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/dev/ui-tokens",function(){return t(16988)}])}},function(e){e.O(0,[2982,9774,2888,179],(function(){return s=6312,e(e.s=s);var s}));var s=e.O();_N_E=s}]);