[{"data":1,"prerenderedAt":7265},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-borders":682,"-docs-theme-design-tokens-borders-surround":7260},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":684,"body":685,"description":7253,"extension":7254,"links":7255,"meta":7256,"navigation":7257,"path":181,"seo":7258,"stem":182,"__hash__":7259},"docs_theme\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002F03.borders.md","Borders Design Tokens",{"type":686,"value":687,"toc":7231},"minimark",[688,728,732,736,740,743,777,782,789,1153,1164,1169,1172,1410,1414,1420,1680,1684,1691,1946,1956,1961,1967,2190,2213,2235,2239,2242,2507,2511,2516,2733,2737,2742,2956,2964,2969,2975,2988,3537,3557,3565,3569,3575,4101,4105,4108,4767,4771,4774,5589,5593,5596,7041,7045,7116,7128,7132,7227],[689,690,691,695,696,700,701,704,705,708,709,713,714,717,718,700,721,704,724,727],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Design Tokens Preset:"," ",[697,698,699],"code",{},"useBorderWidthDesignTokens",", ",[697,702,703],{},"useBorderStyleDesignTokens",", and ",[697,706,707],{},"useBorderColorDesignTokens"," are included in the ",[710,711,712],"a",{"href":171},"Design Tokens Preset"," (",[697,715,716],{},"useDesignTokensPreset",") and you can configure them through the preset's ",[697,719,720],{},"borderWidth",[697,722,723],{},"borderStyle",[697,725,726],{},"borderColor"," options. For most projects, applying them via the preset is the recommended approach.",[729,730,78],"h2",{"id":731},"overview",[733,734,735],"p",{},"The border composables help you create comprehensive border systems with minimal code. They generate border-related variables that can be easily referenced throughout your application, enabling flexible theming and consistent visual boundaries for your components.",[729,737,739],{"id":738},"why-use-border-composables","Why use border composables?",[733,741,742],{},"Border composables help you:",[744,745,746,753,759,765,771],"ul",{},[747,748,749,752],"li",{},[692,750,751],{},"Centralize border definitions",": Define all your border styles, widths, and colors in one place for easy management.",[747,754,755,758],{},[692,756,757],{},"Enable flexible theming",": Override border variables to instantly update component borders across your application.",[747,760,761,764],{},[692,762,763],{},"Maintain consistency",": Use semantic names to ensure consistent border usage throughout your design system.",[747,766,767,770],{},[692,768,769],{},"Reduce repetition",": Reference border variables instead of repeating CSS values throughout your stylesheets.",[747,772,773,776],{},[692,774,775],{},"Separate concerns",": Keep border colors semantically distinct from other color usage in your application.",[729,778,780],{"id":779},"useborderstyledesigntokens",[697,781,703],{},[733,783,784,785,788],{},"The ",[697,786,787],{},"useBorderStyleDesignTokens()"," function creates a set of border style variables covering all standard CSS border styles.",[790,791,792,1013],"tabs",{},[793,794,796],"tabs-item",{"icon":795,"label":290},"i-lucide-code",[797,798,804],"pre",{"className":799,"code":800,"filename":801,"language":802,"meta":803,"style":803},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useBorderStyleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    borderStyle,\n    borderStyleNone,\n    borderStyleSolid,\n    borderStyleDashed,\n    borderStyleDotted,\n    borderStyleDouble,\n    borderStyleGroove,\n    borderStyleInset,\n    borderStyleOutset,\n} = useBorderStyleDesignTokens(s);\n\nexport default s;\n","styleframe.config.ts","ts","",[697,805,806,842,865,871,892,897,905,914,922,930,938,946,954,962,970,978,994,999],{"__ignoreMap":803},[807,808,811,815,819,823,826,829,832,836,839],"span",{"class":809,"line":810},"line",1,[807,812,814],{"class":813},"s7zQu","import",[807,816,818],{"class":817},"sMK4o"," {",[807,820,822],{"class":821},"sTEyZ"," styleframe",[807,824,825],{"class":817}," }",[807,827,828],{"class":813}," from",[807,830,831],{"class":817}," '",[807,833,835],{"class":834},"sfazB","styleframe",[807,837,838],{"class":817},"'",[807,840,841],{"class":817},";\n",[807,843,845,847,849,852,854,856,858,861,863],{"class":809,"line":844},2,[807,846,814],{"class":813},[807,848,818],{"class":817},[807,850,851],{"class":821}," useBorderStyleDesignTokens",[807,853,825],{"class":817},[807,855,828],{"class":813},[807,857,831],{"class":817},[807,859,860],{"class":834},"@styleframe\u002Ftheme",[807,862,838],{"class":817},[807,864,841],{"class":817},[807,866,868],{"class":809,"line":867},3,[807,869,870],{"emptyLinePlaceholder":223},"\n",[807,872,874,878,881,884,887,890],{"class":809,"line":873},4,[807,875,877],{"class":876},"spNyl","const",[807,879,880],{"class":821}," s ",[807,882,883],{"class":817},"=",[807,885,822],{"class":886},"s2Zo4",[807,888,889],{"class":821},"()",[807,891,841],{"class":817},[807,893,895],{"class":809,"line":894},5,[807,896,870],{"emptyLinePlaceholder":223},[807,898,900,902],{"class":809,"line":899},6,[807,901,877],{"class":876},[807,903,904],{"class":817}," {\n",[807,906,908,911],{"class":809,"line":907},7,[807,909,910],{"class":821},"    borderStyle",[807,912,913],{"class":817},",\n",[807,915,917,920],{"class":809,"line":916},8,[807,918,919],{"class":821},"    borderStyleNone",[807,921,913],{"class":817},[807,923,925,928],{"class":809,"line":924},9,[807,926,927],{"class":821},"    borderStyleSolid",[807,929,913],{"class":817},[807,931,933,936],{"class":809,"line":932},10,[807,934,935],{"class":821},"    borderStyleDashed",[807,937,913],{"class":817},[807,939,941,944],{"class":809,"line":940},11,[807,942,943],{"class":821},"    borderStyleDotted",[807,945,913],{"class":817},[807,947,949,952],{"class":809,"line":948},12,[807,950,951],{"class":821},"    borderStyleDouble",[807,953,913],{"class":817},[807,955,957,960],{"class":809,"line":956},13,[807,958,959],{"class":821},"    borderStyleGroove",[807,961,913],{"class":817},[807,963,965,968],{"class":809,"line":964},14,[807,966,967],{"class":821},"    borderStyleInset",[807,969,913],{"class":817},[807,971,973,976],{"class":809,"line":972},15,[807,974,975],{"class":821},"    borderStyleOutset",[807,977,913],{"class":817},[807,979,981,984,987,989,992],{"class":809,"line":980},16,[807,982,983],{"class":817},"}",[807,985,986],{"class":817}," =",[807,988,851],{"class":886},[807,990,991],{"class":821},"(s)",[807,993,841],{"class":817},[807,995,997],{"class":809,"line":996},17,[807,998,870],{"emptyLinePlaceholder":223},[807,1000,1002,1005,1008,1011],{"class":809,"line":1001},18,[807,1003,1004],{"class":813},"export",[807,1006,1007],{"class":813}," default",[807,1009,1010],{"class":821}," s",[807,1012,841],{"class":817},[793,1014,1015],{"icon":154,"label":326},[797,1016,1021],{"className":1017,"code":1018,"filename":1019,"language":1020,"meta":803,"style":803},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --border-style--none: none;\n    --border-style--solid: solid;\n    --border-style--dashed: dashed;\n    --border-style--dotted: dotted;\n    --border-style--double: double;\n    --border-style--groove: groove;\n    --border-style--inset: inset;\n    --border-style--outset: outset;\n    --border-style: var(--border-style--solid);\n}\n","styleframe\u002Findex.css","css",[697,1022,1023,1033,1045,1057,1069,1081,1093,1105,1117,1129,1148],{"__ignoreMap":803},[807,1024,1025,1028,1031],{"class":809,"line":810},[807,1026,1027],{"class":817},":",[807,1029,1030],{"class":876},"root",[807,1032,904],{"class":817},[807,1034,1035,1038,1040,1043],{"class":809,"line":844},[807,1036,1037],{"class":821},"    --border-style--none",[807,1039,1027],{"class":817},[807,1041,1042],{"class":821}," none",[807,1044,841],{"class":817},[807,1046,1047,1050,1052,1055],{"class":809,"line":867},[807,1048,1049],{"class":821},"    --border-style--solid",[807,1051,1027],{"class":817},[807,1053,1054],{"class":821}," solid",[807,1056,841],{"class":817},[807,1058,1059,1062,1064,1067],{"class":809,"line":873},[807,1060,1061],{"class":821},"    --border-style--dashed",[807,1063,1027],{"class":817},[807,1065,1066],{"class":821}," dashed",[807,1068,841],{"class":817},[807,1070,1071,1074,1076,1079],{"class":809,"line":894},[807,1072,1073],{"class":821},"    --border-style--dotted",[807,1075,1027],{"class":817},[807,1077,1078],{"class":821}," dotted",[807,1080,841],{"class":817},[807,1082,1083,1086,1088,1091],{"class":809,"line":899},[807,1084,1085],{"class":821},"    --border-style--double",[807,1087,1027],{"class":817},[807,1089,1090],{"class":821}," double",[807,1092,841],{"class":817},[807,1094,1095,1098,1100,1103],{"class":809,"line":907},[807,1096,1097],{"class":821},"    --border-style--groove",[807,1099,1027],{"class":817},[807,1101,1102],{"class":821}," groove",[807,1104,841],{"class":817},[807,1106,1107,1110,1112,1115],{"class":809,"line":916},[807,1108,1109],{"class":821},"    --border-style--inset",[807,1111,1027],{"class":817},[807,1113,1114],{"class":821}," inset",[807,1116,841],{"class":817},[807,1118,1119,1122,1124,1127],{"class":809,"line":924},[807,1120,1121],{"class":821},"    --border-style--outset",[807,1123,1027],{"class":817},[807,1125,1126],{"class":821}," outset",[807,1128,841],{"class":817},[807,1130,1131,1134,1136,1139,1142,1145],{"class":809,"line":932},[807,1132,1133],{"class":821},"    --border-style",[807,1135,1027],{"class":817},[807,1137,1138],{"class":886}," var",[807,1140,1141],{"class":817},"(",[807,1143,1144],{"class":821},"--border-style--solid",[807,1146,1147],{"class":817},");\n",[807,1149,1150],{"class":809,"line":940},[807,1151,1152],{"class":817},"}\n",[733,1154,1155,1156,1159,1160,1163],{},"The function creates variables for all standard CSS border styles and a default ",[697,1157,1158],{},"--border-style"," variable that references ",[697,1161,1162],{},"solid"," by default.",[1165,1166,1168],"h3",{"id":1167},"creating-custom-border-style-variables","Creating Custom Border Style Variables",[733,1170,1171],{},"You can provide completely custom border style values if you need styles beyond the CSS standard keywords:",[790,1173,1174,1357],{},[793,1175,1176],{"icon":795,"label":290},[797,1177,1179],{"className":799,"code":1178,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderStyleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    borderStyle,\n    borderStyleWavy,\n    borderStyleHidden\n} = useBorderStyleDesignTokens(s, {\n    default: 'solid',\n    wavy: 'wavy',  \u002F\u002F Custom CSS value (if supported)\n    hidden: 'hidden'\n});\n\nexport default s;\n",[697,1180,1181,1201,1221,1225,1239,1243,1249,1255,1262,1267,1283,1299,1319,1334,1343,1347],{"__ignoreMap":803},[807,1182,1183,1185,1187,1189,1191,1193,1195,1197,1199],{"class":809,"line":810},[807,1184,814],{"class":813},[807,1186,818],{"class":817},[807,1188,822],{"class":821},[807,1190,825],{"class":817},[807,1192,828],{"class":813},[807,1194,831],{"class":817},[807,1196,835],{"class":834},[807,1198,838],{"class":817},[807,1200,841],{"class":817},[807,1202,1203,1205,1207,1209,1211,1213,1215,1217,1219],{"class":809,"line":844},[807,1204,814],{"class":813},[807,1206,818],{"class":817},[807,1208,851],{"class":821},[807,1210,825],{"class":817},[807,1212,828],{"class":813},[807,1214,831],{"class":817},[807,1216,860],{"class":834},[807,1218,838],{"class":817},[807,1220,841],{"class":817},[807,1222,1223],{"class":809,"line":867},[807,1224,870],{"emptyLinePlaceholder":223},[807,1226,1227,1229,1231,1233,1235,1237],{"class":809,"line":873},[807,1228,877],{"class":876},[807,1230,880],{"class":821},[807,1232,883],{"class":817},[807,1234,822],{"class":886},[807,1236,889],{"class":821},[807,1238,841],{"class":817},[807,1240,1241],{"class":809,"line":894},[807,1242,870],{"emptyLinePlaceholder":223},[807,1244,1245,1247],{"class":809,"line":899},[807,1246,877],{"class":876},[807,1248,904],{"class":817},[807,1250,1251,1253],{"class":809,"line":907},[807,1252,910],{"class":821},[807,1254,913],{"class":817},[807,1256,1257,1260],{"class":809,"line":916},[807,1258,1259],{"class":821},"    borderStyleWavy",[807,1261,913],{"class":817},[807,1263,1264],{"class":809,"line":924},[807,1265,1266],{"class":821},"    borderStyleHidden\n",[807,1268,1269,1271,1273,1275,1278,1281],{"class":809,"line":932},[807,1270,983],{"class":817},[807,1272,986],{"class":817},[807,1274,851],{"class":886},[807,1276,1277],{"class":821},"(s",[807,1279,1280],{"class":817},",",[807,1282,904],{"class":817},[807,1284,1285,1289,1291,1293,1295,1297],{"class":809,"line":940},[807,1286,1288],{"class":1287},"swJcz","    default",[807,1290,1027],{"class":817},[807,1292,831],{"class":817},[807,1294,1162],{"class":834},[807,1296,838],{"class":817},[807,1298,913],{"class":817},[807,1300,1301,1304,1306,1308,1311,1313,1315],{"class":809,"line":948},[807,1302,1303],{"class":1287},"    wavy",[807,1305,1027],{"class":817},[807,1307,831],{"class":817},[807,1309,1310],{"class":834},"wavy",[807,1312,838],{"class":817},[807,1314,1280],{"class":817},[807,1316,1318],{"class":1317},"sHwdD","  \u002F\u002F Custom CSS value (if supported)\n",[807,1320,1321,1324,1326,1328,1331],{"class":809,"line":956},[807,1322,1323],{"class":1287},"    hidden",[807,1325,1027],{"class":817},[807,1327,831],{"class":817},[807,1329,1330],{"class":834},"hidden",[807,1332,1333],{"class":817},"'\n",[807,1335,1336,1338,1341],{"class":809,"line":964},[807,1337,983],{"class":817},[807,1339,1340],{"class":821},")",[807,1342,841],{"class":817},[807,1344,1345],{"class":809,"line":972},[807,1346,870],{"emptyLinePlaceholder":223},[807,1348,1349,1351,1353,1355],{"class":809,"line":980},[807,1350,1004],{"class":813},[807,1352,1007],{"class":813},[807,1354,1010],{"class":821},[807,1356,841],{"class":817},[793,1358,1359],{"icon":154,"label":326},[797,1360,1362],{"className":1017,"code":1361,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-style--wavy: wavy;\n    --border-style--hidden: hidden;\n    --border-style: solid;\n}\n",[697,1363,1364,1372,1384,1396,1406],{"__ignoreMap":803},[807,1365,1366,1368,1370],{"class":809,"line":810},[807,1367,1027],{"class":817},[807,1369,1030],{"class":876},[807,1371,904],{"class":817},[807,1373,1374,1377,1379,1382],{"class":809,"line":844},[807,1375,1376],{"class":821},"    --border-style--wavy",[807,1378,1027],{"class":817},[807,1380,1381],{"class":821}," wavy",[807,1383,841],{"class":817},[807,1385,1386,1389,1391,1394],{"class":809,"line":867},[807,1387,1388],{"class":821},"    --border-style--hidden",[807,1390,1027],{"class":817},[807,1392,1393],{"class":821}," hidden",[807,1395,841],{"class":817},[807,1397,1398,1400,1402,1404],{"class":809,"line":873},[807,1399,1133],{"class":821},[807,1401,1027],{"class":817},[807,1403,1054],{"class":821},[807,1405,841],{"class":817},[807,1407,1408],{"class":809,"line":894},[807,1409,1152],{"class":817},[1165,1411,1413],{"id":1412},"updating-the-default-border-style-variable","Updating the Default Border Style Variable",[733,1415,1416,1417,1027],{},"You can override the default border style value after creating it by using ",[697,1418,1419],{},"variable()",[790,1421,1422,1571],{},[793,1423,1424],{"icon":795,"label":290},[797,1425,1427],{"className":799,"code":1426,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderStyleDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable } = s;\n\nconst { borderStyle } = useBorderStyleDesignTokens(s);\n\n\u002F\u002F Override the default border style\nvariable(borderStyle, 'dashed');\n\nexport default s;\n",[697,1428,1429,1449,1469,1473,1487,1504,1508,1527,1531,1536,1557,1561],{"__ignoreMap":803},[807,1430,1431,1433,1435,1437,1439,1441,1443,1445,1447],{"class":809,"line":810},[807,1432,814],{"class":813},[807,1434,818],{"class":817},[807,1436,822],{"class":821},[807,1438,825],{"class":817},[807,1440,828],{"class":813},[807,1442,831],{"class":817},[807,1444,835],{"class":834},[807,1446,838],{"class":817},[807,1448,841],{"class":817},[807,1450,1451,1453,1455,1457,1459,1461,1463,1465,1467],{"class":809,"line":844},[807,1452,814],{"class":813},[807,1454,818],{"class":817},[807,1456,851],{"class":821},[807,1458,825],{"class":817},[807,1460,828],{"class":813},[807,1462,831],{"class":817},[807,1464,860],{"class":834},[807,1466,838],{"class":817},[807,1468,841],{"class":817},[807,1470,1471],{"class":809,"line":867},[807,1472,870],{"emptyLinePlaceholder":223},[807,1474,1475,1477,1479,1481,1483,1485],{"class":809,"line":873},[807,1476,877],{"class":876},[807,1478,880],{"class":821},[807,1480,883],{"class":817},[807,1482,822],{"class":886},[807,1484,889],{"class":821},[807,1486,841],{"class":817},[807,1488,1489,1491,1493,1496,1498,1500,1502],{"class":809,"line":894},[807,1490,877],{"class":876},[807,1492,818],{"class":817},[807,1494,1495],{"class":821}," variable ",[807,1497,983],{"class":817},[807,1499,986],{"class":817},[807,1501,1010],{"class":821},[807,1503,841],{"class":817},[807,1505,1506],{"class":809,"line":899},[807,1507,870],{"emptyLinePlaceholder":223},[807,1509,1510,1512,1514,1517,1519,1521,1523,1525],{"class":809,"line":907},[807,1511,877],{"class":876},[807,1513,818],{"class":817},[807,1515,1516],{"class":821}," borderStyle ",[807,1518,983],{"class":817},[807,1520,986],{"class":817},[807,1522,851],{"class":886},[807,1524,991],{"class":821},[807,1526,841],{"class":817},[807,1528,1529],{"class":809,"line":916},[807,1530,870],{"emptyLinePlaceholder":223},[807,1532,1533],{"class":809,"line":924},[807,1534,1535],{"class":1317},"\u002F\u002F Override the default border style\n",[807,1537,1538,1541,1544,1546,1548,1551,1553,1555],{"class":809,"line":932},[807,1539,1540],{"class":886},"variable",[807,1542,1543],{"class":821},"(borderStyle",[807,1545,1280],{"class":817},[807,1547,831],{"class":817},[807,1549,1550],{"class":834},"dashed",[807,1552,838],{"class":817},[807,1554,1340],{"class":821},[807,1556,841],{"class":817},[807,1558,1559],{"class":809,"line":940},[807,1560,870],{"emptyLinePlaceholder":223},[807,1562,1563,1565,1567,1569],{"class":809,"line":948},[807,1564,1004],{"class":813},[807,1566,1007],{"class":813},[807,1568,1010],{"class":821},[807,1570,841],{"class":817},[793,1572,1573],{"icon":154,"label":326},[797,1574,1576],{"className":1017,"code":1575,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-style--none: none;\n    --border-style--solid: solid;\n    --border-style--dashed: dashed;\n    --border-style--dotted: dotted;\n    --border-style--double: double;\n    --border-style--groove: groove;\n    --border-style--inset: inset;\n    --border-style--outset: outset;\n    --border-style: dashed;\n}\n",[697,1577,1578,1586,1596,1606,1616,1626,1636,1646,1656,1666,1676],{"__ignoreMap":803},[807,1579,1580,1582,1584],{"class":809,"line":810},[807,1581,1027],{"class":817},[807,1583,1030],{"class":876},[807,1585,904],{"class":817},[807,1587,1588,1590,1592,1594],{"class":809,"line":844},[807,1589,1037],{"class":821},[807,1591,1027],{"class":817},[807,1593,1042],{"class":821},[807,1595,841],{"class":817},[807,1597,1598,1600,1602,1604],{"class":809,"line":867},[807,1599,1049],{"class":821},[807,1601,1027],{"class":817},[807,1603,1054],{"class":821},[807,1605,841],{"class":817},[807,1607,1608,1610,1612,1614],{"class":809,"line":873},[807,1609,1061],{"class":821},[807,1611,1027],{"class":817},[807,1613,1066],{"class":821},[807,1615,841],{"class":817},[807,1617,1618,1620,1622,1624],{"class":809,"line":894},[807,1619,1073],{"class":821},[807,1621,1027],{"class":817},[807,1623,1078],{"class":821},[807,1625,841],{"class":817},[807,1627,1628,1630,1632,1634],{"class":809,"line":899},[807,1629,1085],{"class":821},[807,1631,1027],{"class":817},[807,1633,1090],{"class":821},[807,1635,841],{"class":817},[807,1637,1638,1640,1642,1644],{"class":809,"line":907},[807,1639,1097],{"class":821},[807,1641,1027],{"class":817},[807,1643,1102],{"class":821},[807,1645,841],{"class":817},[807,1647,1648,1650,1652,1654],{"class":809,"line":916},[807,1649,1109],{"class":821},[807,1651,1027],{"class":817},[807,1653,1114],{"class":821},[807,1655,841],{"class":817},[807,1657,1658,1660,1662,1664],{"class":809,"line":924},[807,1659,1121],{"class":821},[807,1661,1027],{"class":817},[807,1663,1126],{"class":821},[807,1665,841],{"class":817},[807,1667,1668,1670,1672,1674],{"class":809,"line":932},[807,1669,1133],{"class":821},[807,1671,1027],{"class":817},[807,1673,1066],{"class":821},[807,1675,841],{"class":817},[807,1677,1678],{"class":809,"line":940},[807,1679,1152],{"class":817},[1165,1681,1683],{"id":1682},"extending-the-default-border-style-values","Extending the Default Border Style Values",[733,1685,1686,1687,1690],{},"You can customize which style is used as the default while keeping all other standard styles. Use the ",[697,1688,1689],{},"@"," prefix to reference another key in the values object:",[790,1692,1693,1832],{},[793,1694,1695],{"icon":795,"label":290},[797,1696,1698],{"className":799,"code":1697,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderStyleDesignTokens, defaultBorderStyleValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { borderStyle } = useBorderStyleDesignTokens(s, {\n    ...defaultBorderStyleValues,\n    default: '@border-style.dashed'\n});\n\nexport default s;\n",[697,1699,1700,1720,1745,1749,1763,1767,1787,1797,1810,1818,1822],{"__ignoreMap":803},[807,1701,1702,1704,1706,1708,1710,1712,1714,1716,1718],{"class":809,"line":810},[807,1703,814],{"class":813},[807,1705,818],{"class":817},[807,1707,822],{"class":821},[807,1709,825],{"class":817},[807,1711,828],{"class":813},[807,1713,831],{"class":817},[807,1715,835],{"class":834},[807,1717,838],{"class":817},[807,1719,841],{"class":817},[807,1721,1722,1724,1726,1728,1730,1733,1735,1737,1739,1741,1743],{"class":809,"line":844},[807,1723,814],{"class":813},[807,1725,818],{"class":817},[807,1727,851],{"class":821},[807,1729,1280],{"class":817},[807,1731,1732],{"class":821}," defaultBorderStyleValues",[807,1734,825],{"class":817},[807,1736,828],{"class":813},[807,1738,831],{"class":817},[807,1740,860],{"class":834},[807,1742,838],{"class":817},[807,1744,841],{"class":817},[807,1746,1747],{"class":809,"line":867},[807,1748,870],{"emptyLinePlaceholder":223},[807,1750,1751,1753,1755,1757,1759,1761],{"class":809,"line":873},[807,1752,877],{"class":876},[807,1754,880],{"class":821},[807,1756,883],{"class":817},[807,1758,822],{"class":886},[807,1760,889],{"class":821},[807,1762,841],{"class":817},[807,1764,1765],{"class":809,"line":894},[807,1766,870],{"emptyLinePlaceholder":223},[807,1768,1769,1771,1773,1775,1777,1779,1781,1783,1785],{"class":809,"line":899},[807,1770,877],{"class":876},[807,1772,818],{"class":817},[807,1774,1516],{"class":821},[807,1776,983],{"class":817},[807,1778,986],{"class":817},[807,1780,851],{"class":886},[807,1782,1277],{"class":821},[807,1784,1280],{"class":817},[807,1786,904],{"class":817},[807,1788,1789,1792,1795],{"class":809,"line":907},[807,1790,1791],{"class":817},"    ...",[807,1793,1794],{"class":821},"defaultBorderStyleValues",[807,1796,913],{"class":817},[807,1798,1799,1801,1803,1805,1808],{"class":809,"line":916},[807,1800,1288],{"class":1287},[807,1802,1027],{"class":817},[807,1804,831],{"class":817},[807,1806,1807],{"class":834},"@border-style.dashed",[807,1809,1333],{"class":817},[807,1811,1812,1814,1816],{"class":809,"line":924},[807,1813,983],{"class":817},[807,1815,1340],{"class":821},[807,1817,841],{"class":817},[807,1819,1820],{"class":809,"line":932},[807,1821,870],{"emptyLinePlaceholder":223},[807,1823,1824,1826,1828,1830],{"class":809,"line":940},[807,1825,1004],{"class":813},[807,1827,1007],{"class":813},[807,1829,1010],{"class":821},[807,1831,841],{"class":817},[793,1833,1834],{"icon":154,"label":326},[797,1835,1837],{"className":1017,"code":1836,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-style--none: none;\n    --border-style--solid: solid;\n    --border-style--dashed: dashed;\n    --border-style--dotted: dotted;\n    --border-style--double: double;\n    --border-style--groove: groove;\n    --border-style--inset: inset;\n    --border-style--outset: outset;\n    --border-style: var(--border-style--dashed);\n}\n",[697,1838,1839,1847,1857,1867,1877,1887,1897,1907,1917,1927,1942],{"__ignoreMap":803},[807,1840,1841,1843,1845],{"class":809,"line":810},[807,1842,1027],{"class":817},[807,1844,1030],{"class":876},[807,1846,904],{"class":817},[807,1848,1849,1851,1853,1855],{"class":809,"line":844},[807,1850,1037],{"class":821},[807,1852,1027],{"class":817},[807,1854,1042],{"class":821},[807,1856,841],{"class":817},[807,1858,1859,1861,1863,1865],{"class":809,"line":867},[807,1860,1049],{"class":821},[807,1862,1027],{"class":817},[807,1864,1054],{"class":821},[807,1866,841],{"class":817},[807,1868,1869,1871,1873,1875],{"class":809,"line":873},[807,1870,1061],{"class":821},[807,1872,1027],{"class":817},[807,1874,1066],{"class":821},[807,1876,841],{"class":817},[807,1878,1879,1881,1883,1885],{"class":809,"line":894},[807,1880,1073],{"class":821},[807,1882,1027],{"class":817},[807,1884,1078],{"class":821},[807,1886,841],{"class":817},[807,1888,1889,1891,1893,1895],{"class":809,"line":899},[807,1890,1085],{"class":821},[807,1892,1027],{"class":817},[807,1894,1090],{"class":821},[807,1896,841],{"class":817},[807,1898,1899,1901,1903,1905],{"class":809,"line":907},[807,1900,1097],{"class":821},[807,1902,1027],{"class":817},[807,1904,1102],{"class":821},[807,1906,841],{"class":817},[807,1908,1909,1911,1913,1915],{"class":809,"line":916},[807,1910,1109],{"class":821},[807,1912,1027],{"class":817},[807,1914,1114],{"class":821},[807,1916,841],{"class":817},[807,1918,1919,1921,1923,1925],{"class":809,"line":924},[807,1920,1121],{"class":821},[807,1922,1027],{"class":817},[807,1924,1126],{"class":821},[807,1926,841],{"class":817},[807,1928,1929,1931,1933,1935,1937,1940],{"class":809,"line":932},[807,1930,1133],{"class":821},[807,1932,1027],{"class":817},[807,1934,1138],{"class":886},[807,1936,1141],{"class":817},[807,1938,1939],{"class":821},"--border-style--dashed",[807,1941,1147],{"class":817},[807,1943,1944],{"class":809,"line":940},[807,1945,1152],{"class":817},[1947,1948,1949,1952,1953,1955],"tip",{},[692,1950,1951],{},"Pro tip:"," Using a default ",[697,1954,1158],{}," variable makes it easy to change your entire application's border style by overriding just one variable, while still having specific style variants available when needed.",[729,1957,1959],{"id":1958},"useborderwidthdesigntokens",[697,1960,699],{},[733,1962,784,1963,1966],{},[697,1964,1965],{},"useBorderWidthDesignTokens()"," function creates a set of border width variables for common border thickness levels.",[790,1968,1969,2106],{},[793,1970,1971],{"icon":795,"label":290},[797,1972,1974],{"className":799,"code":1973,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderWidthDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    borderWidth,\n    borderWidthNone,\n    borderWidthThin,\n    borderWidthMedium,\n    borderWidthThick,\n} = useBorderWidthDesignTokens(s);\n\nexport default s;\n",[697,1975,1976,1996,2017,2021,2035,2039,2045,2052,2059,2066,2073,2080,2092,2096],{"__ignoreMap":803},[807,1977,1978,1980,1982,1984,1986,1988,1990,1992,1994],{"class":809,"line":810},[807,1979,814],{"class":813},[807,1981,818],{"class":817},[807,1983,822],{"class":821},[807,1985,825],{"class":817},[807,1987,828],{"class":813},[807,1989,831],{"class":817},[807,1991,835],{"class":834},[807,1993,838],{"class":817},[807,1995,841],{"class":817},[807,1997,1998,2000,2002,2005,2007,2009,2011,2013,2015],{"class":809,"line":844},[807,1999,814],{"class":813},[807,2001,818],{"class":817},[807,2003,2004],{"class":821}," useBorderWidthDesignTokens",[807,2006,825],{"class":817},[807,2008,828],{"class":813},[807,2010,831],{"class":817},[807,2012,860],{"class":834},[807,2014,838],{"class":817},[807,2016,841],{"class":817},[807,2018,2019],{"class":809,"line":867},[807,2020,870],{"emptyLinePlaceholder":223},[807,2022,2023,2025,2027,2029,2031,2033],{"class":809,"line":873},[807,2024,877],{"class":876},[807,2026,880],{"class":821},[807,2028,883],{"class":817},[807,2030,822],{"class":886},[807,2032,889],{"class":821},[807,2034,841],{"class":817},[807,2036,2037],{"class":809,"line":894},[807,2038,870],{"emptyLinePlaceholder":223},[807,2040,2041,2043],{"class":809,"line":899},[807,2042,877],{"class":876},[807,2044,904],{"class":817},[807,2046,2047,2050],{"class":809,"line":907},[807,2048,2049],{"class":821},"    borderWidth",[807,2051,913],{"class":817},[807,2053,2054,2057],{"class":809,"line":916},[807,2055,2056],{"class":821},"    borderWidthNone",[807,2058,913],{"class":817},[807,2060,2061,2064],{"class":809,"line":924},[807,2062,2063],{"class":821},"    borderWidthThin",[807,2065,913],{"class":817},[807,2067,2068,2071],{"class":809,"line":932},[807,2069,2070],{"class":821},"    borderWidthMedium",[807,2072,913],{"class":817},[807,2074,2075,2078],{"class":809,"line":940},[807,2076,2077],{"class":821},"    borderWidthThick",[807,2079,913],{"class":817},[807,2081,2082,2084,2086,2088,2090],{"class":809,"line":948},[807,2083,983],{"class":817},[807,2085,986],{"class":817},[807,2087,2004],{"class":886},[807,2089,991],{"class":821},[807,2091,841],{"class":817},[807,2093,2094],{"class":809,"line":956},[807,2095,870],{"emptyLinePlaceholder":223},[807,2097,2098,2100,2102,2104],{"class":809,"line":964},[807,2099,1004],{"class":813},[807,2101,1007],{"class":813},[807,2103,1010],{"class":821},[807,2105,841],{"class":817},[793,2107,2108],{"icon":154,"label":326},[797,2109,2111],{"className":1017,"code":2110,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-width--none: 0;\n    --border-width--thin: thin;\n    --border-width--medium: medium;\n    --border-width--thick: thick;\n    --border-width: var(--border-width--thin);\n}\n",[697,2112,2113,2121,2134,2146,2158,2170,2186],{"__ignoreMap":803},[807,2114,2115,2117,2119],{"class":809,"line":810},[807,2116,1027],{"class":817},[807,2118,1030],{"class":876},[807,2120,904],{"class":817},[807,2122,2123,2126,2128,2132],{"class":809,"line":844},[807,2124,2125],{"class":821},"    --border-width--none",[807,2127,1027],{"class":817},[807,2129,2131],{"class":2130},"sbssI"," 0",[807,2133,841],{"class":817},[807,2135,2136,2139,2141,2144],{"class":809,"line":867},[807,2137,2138],{"class":821},"    --border-width--thin",[807,2140,1027],{"class":817},[807,2142,2143],{"class":821}," thin",[807,2145,841],{"class":817},[807,2147,2148,2151,2153,2156],{"class":809,"line":873},[807,2149,2150],{"class":821},"    --border-width--medium",[807,2152,1027],{"class":817},[807,2154,2155],{"class":821}," medium",[807,2157,841],{"class":817},[807,2159,2160,2163,2165,2168],{"class":809,"line":894},[807,2161,2162],{"class":821},"    --border-width--thick",[807,2164,1027],{"class":817},[807,2166,2167],{"class":821}," thick",[807,2169,841],{"class":817},[807,2171,2172,2175,2177,2179,2181,2184],{"class":809,"line":899},[807,2173,2174],{"class":821},"    --border-width",[807,2176,1027],{"class":817},[807,2178,1138],{"class":886},[807,2180,1141],{"class":817},[807,2182,2183],{"class":821},"--border-width--thin",[807,2185,1147],{"class":817},[807,2187,2188],{"class":809,"line":907},[807,2189,1152],{"class":817},[733,2191,2192,2193,2196,2197,700,2200,704,2203,2206,2207,2210,2211,1163],{},"The function creates variables for standard CSS border widths including ",[697,2194,2195],{},"none"," (0), ",[697,2198,2199],{},"thin",[697,2201,2202],{},"medium",[697,2204,2205],{},"thick",". The default ",[697,2208,2209],{},"--border-width"," variable references ",[697,2212,2199],{},[689,2214,2215,2218,2219,700,2221,704,2223,2225,2226,2228,2229,2231,2232,2234],{},[692,2216,2217],{},"Good to know:"," CSS defines ",[697,2220,2199],{},[697,2222,2202],{},[697,2224,2205],{}," as keyword values that browsers interpret consistently. Typically, ",[697,2227,2199],{}," is 1px, ",[697,2230,2202],{}," is 3px, and ",[697,2233,2205],{}," is 5px, but this can vary slightly by browser.",[1165,2236,2238],{"id":2237},"creating-custom-border-width-variables","Creating Custom Border Width Variables",[733,2240,2241],{},"You can provide completely custom border width values with specific pixel measurements:",[790,2243,2244,2441],{},[793,2245,2246],{"icon":795,"label":290},[797,2247,2249],{"className":799,"code":2248,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderWidthDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst {\n    borderWidth,\n    borderWidthHairline,\n    borderWidthBold,\n    borderWidthHeavy\n} = useBorderWidthDesignTokens(s, {\n    default: '1px',\n    hairline: '0.5px',\n    bold: '2px',\n    heavy: '4px'\n});\n\nexport default s;\n",[697,2250,2251,2271,2291,2295,2309,2313,2319,2325,2332,2339,2344,2358,2373,2389,2405,2419,2427,2431],{"__ignoreMap":803},[807,2252,2253,2255,2257,2259,2261,2263,2265,2267,2269],{"class":809,"line":810},[807,2254,814],{"class":813},[807,2256,818],{"class":817},[807,2258,822],{"class":821},[807,2260,825],{"class":817},[807,2262,828],{"class":813},[807,2264,831],{"class":817},[807,2266,835],{"class":834},[807,2268,838],{"class":817},[807,2270,841],{"class":817},[807,2272,2273,2275,2277,2279,2281,2283,2285,2287,2289],{"class":809,"line":844},[807,2274,814],{"class":813},[807,2276,818],{"class":817},[807,2278,2004],{"class":821},[807,2280,825],{"class":817},[807,2282,828],{"class":813},[807,2284,831],{"class":817},[807,2286,860],{"class":834},[807,2288,838],{"class":817},[807,2290,841],{"class":817},[807,2292,2293],{"class":809,"line":867},[807,2294,870],{"emptyLinePlaceholder":223},[807,2296,2297,2299,2301,2303,2305,2307],{"class":809,"line":873},[807,2298,877],{"class":876},[807,2300,880],{"class":821},[807,2302,883],{"class":817},[807,2304,822],{"class":886},[807,2306,889],{"class":821},[807,2308,841],{"class":817},[807,2310,2311],{"class":809,"line":894},[807,2312,870],{"emptyLinePlaceholder":223},[807,2314,2315,2317],{"class":809,"line":899},[807,2316,877],{"class":876},[807,2318,904],{"class":817},[807,2320,2321,2323],{"class":809,"line":907},[807,2322,2049],{"class":821},[807,2324,913],{"class":817},[807,2326,2327,2330],{"class":809,"line":916},[807,2328,2329],{"class":821},"    borderWidthHairline",[807,2331,913],{"class":817},[807,2333,2334,2337],{"class":809,"line":924},[807,2335,2336],{"class":821},"    borderWidthBold",[807,2338,913],{"class":817},[807,2340,2341],{"class":809,"line":932},[807,2342,2343],{"class":821},"    borderWidthHeavy\n",[807,2345,2346,2348,2350,2352,2354,2356],{"class":809,"line":940},[807,2347,983],{"class":817},[807,2349,986],{"class":817},[807,2351,2004],{"class":886},[807,2353,1277],{"class":821},[807,2355,1280],{"class":817},[807,2357,904],{"class":817},[807,2359,2360,2362,2364,2366,2369,2371],{"class":809,"line":948},[807,2361,1288],{"class":1287},[807,2363,1027],{"class":817},[807,2365,831],{"class":817},[807,2367,2368],{"class":834},"1px",[807,2370,838],{"class":817},[807,2372,913],{"class":817},[807,2374,2375,2378,2380,2382,2385,2387],{"class":809,"line":956},[807,2376,2377],{"class":1287},"    hairline",[807,2379,1027],{"class":817},[807,2381,831],{"class":817},[807,2383,2384],{"class":834},"0.5px",[807,2386,838],{"class":817},[807,2388,913],{"class":817},[807,2390,2391,2394,2396,2398,2401,2403],{"class":809,"line":964},[807,2392,2393],{"class":1287},"    bold",[807,2395,1027],{"class":817},[807,2397,831],{"class":817},[807,2399,2400],{"class":834},"2px",[807,2402,838],{"class":817},[807,2404,913],{"class":817},[807,2406,2407,2410,2412,2414,2417],{"class":809,"line":972},[807,2408,2409],{"class":1287},"    heavy",[807,2411,1027],{"class":817},[807,2413,831],{"class":817},[807,2415,2416],{"class":834},"4px",[807,2418,1333],{"class":817},[807,2420,2421,2423,2425],{"class":809,"line":980},[807,2422,983],{"class":817},[807,2424,1340],{"class":821},[807,2426,841],{"class":817},[807,2428,2429],{"class":809,"line":996},[807,2430,870],{"emptyLinePlaceholder":223},[807,2432,2433,2435,2437,2439],{"class":809,"line":1001},[807,2434,1004],{"class":813},[807,2436,1007],{"class":813},[807,2438,1010],{"class":821},[807,2440,841],{"class":817},[793,2442,2443],{"icon":154,"label":326},[797,2444,2446],{"className":1017,"code":2445,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-width--hairline: 0.5px;\n    --border-width--bold: 2px;\n    --border-width--heavy: 4px;\n    --border-width: 1px;\n}\n",[697,2447,2448,2456,2468,2480,2492,2503],{"__ignoreMap":803},[807,2449,2450,2452,2454],{"class":809,"line":810},[807,2451,1027],{"class":817},[807,2453,1030],{"class":876},[807,2455,904],{"class":817},[807,2457,2458,2461,2463,2466],{"class":809,"line":844},[807,2459,2460],{"class":821},"    --border-width--hairline",[807,2462,1027],{"class":817},[807,2464,2465],{"class":2130}," 0.5px",[807,2467,841],{"class":817},[807,2469,2470,2473,2475,2478],{"class":809,"line":867},[807,2471,2472],{"class":821},"    --border-width--bold",[807,2474,1027],{"class":817},[807,2476,2477],{"class":2130}," 2px",[807,2479,841],{"class":817},[807,2481,2482,2485,2487,2490],{"class":809,"line":873},[807,2483,2484],{"class":821},"    --border-width--heavy",[807,2486,1027],{"class":817},[807,2488,2489],{"class":2130}," 4px",[807,2491,841],{"class":817},[807,2493,2494,2496,2498,2501],{"class":809,"line":894},[807,2495,2174],{"class":821},[807,2497,1027],{"class":817},[807,2499,2500],{"class":2130}," 1px",[807,2502,841],{"class":817},[807,2504,2505],{"class":809,"line":899},[807,2506,1152],{"class":817},[1165,2508,2510],{"id":2509},"updating-the-default-border-width-variable","Updating the Default Border Width Variable",[733,2512,2513,2514,1027],{},"You can override the default border width value after creating it by using ",[697,2515,1419],{},[790,2517,2518,2664],{},[793,2519,2520],{"icon":795,"label":290},[797,2521,2523],{"className":799,"code":2522,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderWidthDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { variable } = s;\n\nconst { borderWidth } = useBorderWidthDesignTokens(s);\n\n\u002F\u002F Override the default border width\nvariable(borderWidth, '2px');\n\nexport default s;\n",[697,2524,2525,2545,2565,2569,2583,2599,2603,2622,2626,2631,2650,2654],{"__ignoreMap":803},[807,2526,2527,2529,2531,2533,2535,2537,2539,2541,2543],{"class":809,"line":810},[807,2528,814],{"class":813},[807,2530,818],{"class":817},[807,2532,822],{"class":821},[807,2534,825],{"class":817},[807,2536,828],{"class":813},[807,2538,831],{"class":817},[807,2540,835],{"class":834},[807,2542,838],{"class":817},[807,2544,841],{"class":817},[807,2546,2547,2549,2551,2553,2555,2557,2559,2561,2563],{"class":809,"line":844},[807,2548,814],{"class":813},[807,2550,818],{"class":817},[807,2552,2004],{"class":821},[807,2554,825],{"class":817},[807,2556,828],{"class":813},[807,2558,831],{"class":817},[807,2560,860],{"class":834},[807,2562,838],{"class":817},[807,2564,841],{"class":817},[807,2566,2567],{"class":809,"line":867},[807,2568,870],{"emptyLinePlaceholder":223},[807,2570,2571,2573,2575,2577,2579,2581],{"class":809,"line":873},[807,2572,877],{"class":876},[807,2574,880],{"class":821},[807,2576,883],{"class":817},[807,2578,822],{"class":886},[807,2580,889],{"class":821},[807,2582,841],{"class":817},[807,2584,2585,2587,2589,2591,2593,2595,2597],{"class":809,"line":894},[807,2586,877],{"class":876},[807,2588,818],{"class":817},[807,2590,1495],{"class":821},[807,2592,983],{"class":817},[807,2594,986],{"class":817},[807,2596,1010],{"class":821},[807,2598,841],{"class":817},[807,2600,2601],{"class":809,"line":899},[807,2602,870],{"emptyLinePlaceholder":223},[807,2604,2605,2607,2609,2612,2614,2616,2618,2620],{"class":809,"line":907},[807,2606,877],{"class":876},[807,2608,818],{"class":817},[807,2610,2611],{"class":821}," borderWidth ",[807,2613,983],{"class":817},[807,2615,986],{"class":817},[807,2617,2004],{"class":886},[807,2619,991],{"class":821},[807,2621,841],{"class":817},[807,2623,2624],{"class":809,"line":916},[807,2625,870],{"emptyLinePlaceholder":223},[807,2627,2628],{"class":809,"line":924},[807,2629,2630],{"class":1317},"\u002F\u002F Override the default border width\n",[807,2632,2633,2635,2638,2640,2642,2644,2646,2648],{"class":809,"line":932},[807,2634,1540],{"class":886},[807,2636,2637],{"class":821},"(borderWidth",[807,2639,1280],{"class":817},[807,2641,831],{"class":817},[807,2643,2400],{"class":834},[807,2645,838],{"class":817},[807,2647,1340],{"class":821},[807,2649,841],{"class":817},[807,2651,2652],{"class":809,"line":940},[807,2653,870],{"emptyLinePlaceholder":223},[807,2655,2656,2658,2660,2662],{"class":809,"line":948},[807,2657,1004],{"class":813},[807,2659,1007],{"class":813},[807,2661,1010],{"class":821},[807,2663,841],{"class":817},[793,2665,2666],{"icon":154,"label":326},[797,2667,2669],{"className":1017,"code":2668,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-width--none: 0;\n    --border-width--thin: thin;\n    --border-width--medium: medium;\n    --border-width--thick: thick;\n    --border-width: 2px;\n}\n",[697,2670,2671,2679,2689,2699,2709,2719,2729],{"__ignoreMap":803},[807,2672,2673,2675,2677],{"class":809,"line":810},[807,2674,1027],{"class":817},[807,2676,1030],{"class":876},[807,2678,904],{"class":817},[807,2680,2681,2683,2685,2687],{"class":809,"line":844},[807,2682,2125],{"class":821},[807,2684,1027],{"class":817},[807,2686,2131],{"class":2130},[807,2688,841],{"class":817},[807,2690,2691,2693,2695,2697],{"class":809,"line":867},[807,2692,2138],{"class":821},[807,2694,1027],{"class":817},[807,2696,2143],{"class":821},[807,2698,841],{"class":817},[807,2700,2701,2703,2705,2707],{"class":809,"line":873},[807,2702,2150],{"class":821},[807,2704,1027],{"class":817},[807,2706,2155],{"class":821},[807,2708,841],{"class":817},[807,2710,2711,2713,2715,2717],{"class":809,"line":894},[807,2712,2162],{"class":821},[807,2714,1027],{"class":817},[807,2716,2167],{"class":821},[807,2718,841],{"class":817},[807,2720,2721,2723,2725,2727],{"class":809,"line":899},[807,2722,2174],{"class":821},[807,2724,1027],{"class":817},[807,2726,2477],{"class":2130},[807,2728,841],{"class":817},[807,2730,2731],{"class":809,"line":907},[807,2732,1152],{"class":817},[1165,2734,2736],{"id":2735},"extending-the-default-border-width-values","Extending the Default Border Width Values",[733,2738,2739,2740,1690],{},"You can customize which width is used as the default while keeping all other standard widths. Use the ",[697,2741,1689],{},[790,2743,2744,2882],{},[793,2745,2746],{"icon":795,"label":290},[797,2747,2749],{"className":799,"code":2748,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderWidthDesignTokens, defaultBorderWidthValues } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst { borderWidth } = useBorderWidthDesignTokens(s, {\n    ...defaultBorderWidthValues,\n    default: '@border-width.medium'\n});\n\nexport default s;\n",[697,2750,2751,2771,2796,2800,2814,2818,2838,2847,2860,2868,2872],{"__ignoreMap":803},[807,2752,2753,2755,2757,2759,2761,2763,2765,2767,2769],{"class":809,"line":810},[807,2754,814],{"class":813},[807,2756,818],{"class":817},[807,2758,822],{"class":821},[807,2760,825],{"class":817},[807,2762,828],{"class":813},[807,2764,831],{"class":817},[807,2766,835],{"class":834},[807,2768,838],{"class":817},[807,2770,841],{"class":817},[807,2772,2773,2775,2777,2779,2781,2784,2786,2788,2790,2792,2794],{"class":809,"line":844},[807,2774,814],{"class":813},[807,2776,818],{"class":817},[807,2778,2004],{"class":821},[807,2780,1280],{"class":817},[807,2782,2783],{"class":821}," defaultBorderWidthValues",[807,2785,825],{"class":817},[807,2787,828],{"class":813},[807,2789,831],{"class":817},[807,2791,860],{"class":834},[807,2793,838],{"class":817},[807,2795,841],{"class":817},[807,2797,2798],{"class":809,"line":867},[807,2799,870],{"emptyLinePlaceholder":223},[807,2801,2802,2804,2806,2808,2810,2812],{"class":809,"line":873},[807,2803,877],{"class":876},[807,2805,880],{"class":821},[807,2807,883],{"class":817},[807,2809,822],{"class":886},[807,2811,889],{"class":821},[807,2813,841],{"class":817},[807,2815,2816],{"class":809,"line":894},[807,2817,870],{"emptyLinePlaceholder":223},[807,2819,2820,2822,2824,2826,2828,2830,2832,2834,2836],{"class":809,"line":899},[807,2821,877],{"class":876},[807,2823,818],{"class":817},[807,2825,2611],{"class":821},[807,2827,983],{"class":817},[807,2829,986],{"class":817},[807,2831,2004],{"class":886},[807,2833,1277],{"class":821},[807,2835,1280],{"class":817},[807,2837,904],{"class":817},[807,2839,2840,2842,2845],{"class":809,"line":907},[807,2841,1791],{"class":817},[807,2843,2844],{"class":821},"defaultBorderWidthValues",[807,2846,913],{"class":817},[807,2848,2849,2851,2853,2855,2858],{"class":809,"line":916},[807,2850,1288],{"class":1287},[807,2852,1027],{"class":817},[807,2854,831],{"class":817},[807,2856,2857],{"class":834},"@border-width.medium",[807,2859,1333],{"class":817},[807,2861,2862,2864,2866],{"class":809,"line":924},[807,2863,983],{"class":817},[807,2865,1340],{"class":821},[807,2867,841],{"class":817},[807,2869,2870],{"class":809,"line":932},[807,2871,870],{"emptyLinePlaceholder":223},[807,2873,2874,2876,2878,2880],{"class":809,"line":940},[807,2875,1004],{"class":813},[807,2877,1007],{"class":813},[807,2879,1010],{"class":821},[807,2881,841],{"class":817},[793,2883,2884],{"icon":154,"label":326},[797,2885,2887],{"className":1017,"code":2886,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-width--none: 0;\n    --border-width--thin: thin;\n    --border-width--medium: medium;\n    --border-width--thick: thick;\n    --border-width: var(--border-width--medium);\n}\n",[697,2888,2889,2897,2907,2917,2927,2937,2952],{"__ignoreMap":803},[807,2890,2891,2893,2895],{"class":809,"line":810},[807,2892,1027],{"class":817},[807,2894,1030],{"class":876},[807,2896,904],{"class":817},[807,2898,2899,2901,2903,2905],{"class":809,"line":844},[807,2900,2125],{"class":821},[807,2902,1027],{"class":817},[807,2904,2131],{"class":2130},[807,2906,841],{"class":817},[807,2908,2909,2911,2913,2915],{"class":809,"line":867},[807,2910,2138],{"class":821},[807,2912,1027],{"class":817},[807,2914,2143],{"class":821},[807,2916,841],{"class":817},[807,2918,2919,2921,2923,2925],{"class":809,"line":873},[807,2920,2150],{"class":821},[807,2922,1027],{"class":817},[807,2924,2155],{"class":821},[807,2926,841],{"class":817},[807,2928,2929,2931,2933,2935],{"class":809,"line":894},[807,2930,2162],{"class":821},[807,2932,1027],{"class":817},[807,2934,2167],{"class":821},[807,2936,841],{"class":817},[807,2938,2939,2941,2943,2945,2947,2950],{"class":809,"line":899},[807,2940,2174],{"class":821},[807,2942,1027],{"class":817},[807,2944,1138],{"class":886},[807,2946,1141],{"class":817},[807,2948,2949],{"class":821},"--border-width--medium",[807,2951,1147],{"class":817},[807,2953,2954],{"class":809,"line":907},[807,2955,1152],{"class":817},[1947,2957,2958,2960,2961,2963],{},[692,2959,1951],{}," You can mix standard CSS keywords with custom pixel values by spreading ",[697,2962,2844],{}," and adding your own custom widths. This gives you the flexibility of both approaches.",[729,2965,2967],{"id":2966},"usebordercolordesigntokens",[697,2968,707],{},[733,2970,784,2971,2974],{},[697,2972,2973],{},"useBorderColorDesignTokens()"," function creates a set of border color variables that reference your base color system. This provides semantic separation between general colors and colors specifically intended for borders.",[689,2976,2977,2979,2980,2983,2984,2987],{},[692,2978,2217],{}," When using ",[697,2981,2982],{},"useDesignTokensPreset()",", default border color values are included automatically and can be customized or disabled via the preset config (e.g., ",[697,2985,2986],{},"borderColor: false"," to disable, or provide a custom record to override).",[790,2989,2990,3347],{},[793,2991,2992],{"icon":795,"label":290},[797,2993,2995],{"className":799,"code":2994,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useColorDesignTokens, useBorderColorDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref } = s;\n\n\u002F\u002F Define base colors\nconst { colorGray, colorPrimary, colorSuccess, colorError } = useColorDesignTokens(s, {\n    gray: '#6b7280',\n    primary: '#3b82f6',\n    success: '#10b981',\n    error: '#ef4444',\n} as const);\n\n\u002F\u002F Create border color variables\nconst {\n    borderColor,\n    borderColorPrimary,\n    borderColorSuccess,\n    borderColorError,\n} = useBorderColorDesignTokens(s, {\n    default: ref(colorGray),\n    primary: ref(colorPrimary),\n    success: ref(colorSuccess),\n    error: ref(colorError),\n} as const);\n\nexport default s;\n",[697,2996,2997,3017,3043,3047,3061,3078,3082,3087,3123,3139,3155,3171,3187,3201,3205,3210,3216,3223,3230,3238,3246,3261,3276,3290,3304,3318,3331,3336],{"__ignoreMap":803},[807,2998,2999,3001,3003,3005,3007,3009,3011,3013,3015],{"class":809,"line":810},[807,3000,814],{"class":813},[807,3002,818],{"class":817},[807,3004,822],{"class":821},[807,3006,825],{"class":817},[807,3008,828],{"class":813},[807,3010,831],{"class":817},[807,3012,835],{"class":834},[807,3014,838],{"class":817},[807,3016,841],{"class":817},[807,3018,3019,3021,3023,3026,3028,3031,3033,3035,3037,3039,3041],{"class":809,"line":844},[807,3020,814],{"class":813},[807,3022,818],{"class":817},[807,3024,3025],{"class":821}," useColorDesignTokens",[807,3027,1280],{"class":817},[807,3029,3030],{"class":821}," useBorderColorDesignTokens",[807,3032,825],{"class":817},[807,3034,828],{"class":813},[807,3036,831],{"class":817},[807,3038,860],{"class":834},[807,3040,838],{"class":817},[807,3042,841],{"class":817},[807,3044,3045],{"class":809,"line":867},[807,3046,870],{"emptyLinePlaceholder":223},[807,3048,3049,3051,3053,3055,3057,3059],{"class":809,"line":873},[807,3050,877],{"class":876},[807,3052,880],{"class":821},[807,3054,883],{"class":817},[807,3056,822],{"class":886},[807,3058,889],{"class":821},[807,3060,841],{"class":817},[807,3062,3063,3065,3067,3070,3072,3074,3076],{"class":809,"line":894},[807,3064,877],{"class":876},[807,3066,818],{"class":817},[807,3068,3069],{"class":821}," ref ",[807,3071,983],{"class":817},[807,3073,986],{"class":817},[807,3075,1010],{"class":821},[807,3077,841],{"class":817},[807,3079,3080],{"class":809,"line":899},[807,3081,870],{"emptyLinePlaceholder":223},[807,3083,3084],{"class":809,"line":907},[807,3085,3086],{"class":1317},"\u002F\u002F Define base colors\n",[807,3088,3089,3091,3093,3096,3098,3101,3103,3106,3108,3111,3113,3115,3117,3119,3121],{"class":809,"line":916},[807,3090,877],{"class":876},[807,3092,818],{"class":817},[807,3094,3095],{"class":821}," colorGray",[807,3097,1280],{"class":817},[807,3099,3100],{"class":821}," colorPrimary",[807,3102,1280],{"class":817},[807,3104,3105],{"class":821}," colorSuccess",[807,3107,1280],{"class":817},[807,3109,3110],{"class":821}," colorError ",[807,3112,983],{"class":817},[807,3114,986],{"class":817},[807,3116,3025],{"class":886},[807,3118,1277],{"class":821},[807,3120,1280],{"class":817},[807,3122,904],{"class":817},[807,3124,3125,3128,3130,3132,3135,3137],{"class":809,"line":924},[807,3126,3127],{"class":1287},"    gray",[807,3129,1027],{"class":817},[807,3131,831],{"class":817},[807,3133,3134],{"class":834},"#6b7280",[807,3136,838],{"class":817},[807,3138,913],{"class":817},[807,3140,3141,3144,3146,3148,3151,3153],{"class":809,"line":932},[807,3142,3143],{"class":1287},"    primary",[807,3145,1027],{"class":817},[807,3147,831],{"class":817},[807,3149,3150],{"class":834},"#3b82f6",[807,3152,838],{"class":817},[807,3154,913],{"class":817},[807,3156,3157,3160,3162,3164,3167,3169],{"class":809,"line":940},[807,3158,3159],{"class":1287},"    success",[807,3161,1027],{"class":817},[807,3163,831],{"class":817},[807,3165,3166],{"class":834},"#10b981",[807,3168,838],{"class":817},[807,3170,913],{"class":817},[807,3172,3173,3176,3178,3180,3183,3185],{"class":809,"line":948},[807,3174,3175],{"class":1287},"    error",[807,3177,1027],{"class":817},[807,3179,831],{"class":817},[807,3181,3182],{"class":834},"#ef4444",[807,3184,838],{"class":817},[807,3186,913],{"class":817},[807,3188,3189,3191,3194,3197,3199],{"class":809,"line":956},[807,3190,983],{"class":817},[807,3192,3193],{"class":813}," as",[807,3195,3196],{"class":876}," const",[807,3198,1340],{"class":821},[807,3200,841],{"class":817},[807,3202,3203],{"class":809,"line":964},[807,3204,870],{"emptyLinePlaceholder":223},[807,3206,3207],{"class":809,"line":972},[807,3208,3209],{"class":1317},"\u002F\u002F Create border color variables\n",[807,3211,3212,3214],{"class":809,"line":980},[807,3213,877],{"class":876},[807,3215,904],{"class":817},[807,3217,3218,3221],{"class":809,"line":996},[807,3219,3220],{"class":821},"    borderColor",[807,3222,913],{"class":817},[807,3224,3225,3228],{"class":809,"line":1001},[807,3226,3227],{"class":821},"    borderColorPrimary",[807,3229,913],{"class":817},[807,3231,3233,3236],{"class":809,"line":3232},19,[807,3234,3235],{"class":821},"    borderColorSuccess",[807,3237,913],{"class":817},[807,3239,3241,3244],{"class":809,"line":3240},20,[807,3242,3243],{"class":821},"    borderColorError",[807,3245,913],{"class":817},[807,3247,3249,3251,3253,3255,3257,3259],{"class":809,"line":3248},21,[807,3250,983],{"class":817},[807,3252,986],{"class":817},[807,3254,3030],{"class":886},[807,3256,1277],{"class":821},[807,3258,1280],{"class":817},[807,3260,904],{"class":817},[807,3262,3264,3266,3268,3271,3274],{"class":809,"line":3263},22,[807,3265,1288],{"class":1287},[807,3267,1027],{"class":817},[807,3269,3270],{"class":886}," ref",[807,3272,3273],{"class":821},"(colorGray)",[807,3275,913],{"class":817},[807,3277,3279,3281,3283,3285,3288],{"class":809,"line":3278},23,[807,3280,3143],{"class":1287},[807,3282,1027],{"class":817},[807,3284,3270],{"class":886},[807,3286,3287],{"class":821},"(colorPrimary)",[807,3289,913],{"class":817},[807,3291,3293,3295,3297,3299,3302],{"class":809,"line":3292},24,[807,3294,3159],{"class":1287},[807,3296,1027],{"class":817},[807,3298,3270],{"class":886},[807,3300,3301],{"class":821},"(colorSuccess)",[807,3303,913],{"class":817},[807,3305,3307,3309,3311,3313,3316],{"class":809,"line":3306},25,[807,3308,3175],{"class":1287},[807,3310,1027],{"class":817},[807,3312,3270],{"class":886},[807,3314,3315],{"class":821},"(colorError)",[807,3317,913],{"class":817},[807,3319,3321,3323,3325,3327,3329],{"class":809,"line":3320},26,[807,3322,983],{"class":817},[807,3324,3193],{"class":813},[807,3326,3196],{"class":876},[807,3328,1340],{"class":821},[807,3330,841],{"class":817},[807,3332,3334],{"class":809,"line":3333},27,[807,3335,870],{"emptyLinePlaceholder":223},[807,3337,3339,3341,3343,3345],{"class":809,"line":3338},28,[807,3340,1004],{"class":813},[807,3342,1007],{"class":813},[807,3344,1010],{"class":821},[807,3346,841],{"class":817},[793,3348,3349],{"icon":154,"label":326},[797,3350,3352],{"className":1017,"code":3351,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --color--gray: oklch(0.5575 0.0165 244.89 \u002F 1);\n    --color--primary: oklch(0.6109 0.1903 263.71 \u002F 1);\n    --color--success: oklch(0.7051 0.1654 165.47 \u002F 1);\n    --color--error: oklch(0.6278 0.2158 27.33 \u002F 1);\n    --border-color: var(--color--gray);\n    --border-color--primary: var(--color--primary);\n    --border-color--success: var(--color--success);\n    --border-color--error: var(--color--error);\n}\n",[697,3353,3354,3362,3391,3417,3443,3469,3485,3501,3517,3533],{"__ignoreMap":803},[807,3355,3356,3358,3360],{"class":809,"line":810},[807,3357,1027],{"class":817},[807,3359,1030],{"class":876},[807,3361,904],{"class":817},[807,3363,3364,3367,3369,3372,3374,3377,3380,3383,3386,3389],{"class":809,"line":844},[807,3365,3366],{"class":821},"    --color--gray",[807,3368,1027],{"class":817},[807,3370,3371],{"class":886}," oklch",[807,3373,1141],{"class":817},[807,3375,3376],{"class":2130},"0.5575",[807,3378,3379],{"class":2130}," 0.0165",[807,3381,3382],{"class":2130}," 244.89",[807,3384,3385],{"class":821}," \u002F ",[807,3387,3388],{"class":2130},"1",[807,3390,1147],{"class":817},[807,3392,3393,3396,3398,3400,3402,3405,3408,3411,3413,3415],{"class":809,"line":867},[807,3394,3395],{"class":821},"    --color--primary",[807,3397,1027],{"class":817},[807,3399,3371],{"class":886},[807,3401,1141],{"class":817},[807,3403,3404],{"class":2130},"0.6109",[807,3406,3407],{"class":2130}," 0.1903",[807,3409,3410],{"class":2130}," 263.71",[807,3412,3385],{"class":821},[807,3414,3388],{"class":2130},[807,3416,1147],{"class":817},[807,3418,3419,3422,3424,3426,3428,3431,3434,3437,3439,3441],{"class":809,"line":873},[807,3420,3421],{"class":821},"    --color--success",[807,3423,1027],{"class":817},[807,3425,3371],{"class":886},[807,3427,1141],{"class":817},[807,3429,3430],{"class":2130},"0.7051",[807,3432,3433],{"class":2130}," 0.1654",[807,3435,3436],{"class":2130}," 165.47",[807,3438,3385],{"class":821},[807,3440,3388],{"class":2130},[807,3442,1147],{"class":817},[807,3444,3445,3448,3450,3452,3454,3457,3460,3463,3465,3467],{"class":809,"line":894},[807,3446,3447],{"class":821},"    --color--error",[807,3449,1027],{"class":817},[807,3451,3371],{"class":886},[807,3453,1141],{"class":817},[807,3455,3456],{"class":2130},"0.6278",[807,3458,3459],{"class":2130}," 0.2158",[807,3461,3462],{"class":2130}," 27.33",[807,3464,3385],{"class":821},[807,3466,3388],{"class":2130},[807,3468,1147],{"class":817},[807,3470,3471,3474,3476,3478,3480,3483],{"class":809,"line":899},[807,3472,3473],{"class":821},"    --border-color",[807,3475,1027],{"class":817},[807,3477,1138],{"class":886},[807,3479,1141],{"class":817},[807,3481,3482],{"class":821},"--color--gray",[807,3484,1147],{"class":817},[807,3486,3487,3490,3492,3494,3496,3499],{"class":809,"line":907},[807,3488,3489],{"class":821},"    --border-color--primary",[807,3491,1027],{"class":817},[807,3493,1138],{"class":886},[807,3495,1141],{"class":817},[807,3497,3498],{"class":821},"--color--primary",[807,3500,1147],{"class":817},[807,3502,3503,3506,3508,3510,3512,3515],{"class":809,"line":916},[807,3504,3505],{"class":821},"    --border-color--success",[807,3507,1027],{"class":817},[807,3509,1138],{"class":886},[807,3511,1141],{"class":817},[807,3513,3514],{"class":821},"--color--success",[807,3516,1147],{"class":817},[807,3518,3519,3522,3524,3526,3528,3531],{"class":809,"line":924},[807,3520,3521],{"class":821},"    --border-color--error",[807,3523,1027],{"class":817},[807,3525,1138],{"class":886},[807,3527,1141],{"class":817},[807,3529,3530],{"class":821},"--color--error",[807,3532,1147],{"class":817},[807,3534,3535],{"class":809,"line":932},[807,3536,1152],{"class":817},[733,3538,3539,3540,3543,3544,3547,3548,700,3550,3547,3553,3556],{},"Each key in the object becomes a border color variable with the prefix ",[697,3541,3542],{},"border-color--",", and the export name is automatically converted to camelCase (e.g., ",[697,3545,3546],{},"default"," → ",[697,3549,726],{},[697,3551,3552],{},"primary",[697,3554,3555],{},"borderColorPrimary",").",[1947,3558,3559,3561,3562,3564],{},[692,3560,1951],{}," Using ",[697,3563,2973],{}," instead of directly referencing color variables makes your intent explicit and allows you to easily adjust border colors independently from your base color palette. For example, you might want borders to be lighter or more desaturated than the base colors.",[1165,3566,3568],{"id":3567},"creating-border-color-level-variants","Creating Border Color Level Variants",[733,3570,3571,3572,3574],{},"You can combine ",[697,3573,2973],{}," with color manipulation composables to create sophisticated border color systems:",[790,3576,3577,3926],{},[793,3578,3579],{"icon":795,"label":290},[797,3580,3582],{"className":799,"code":3581,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useColorDesignTokens, useColorLevelDesignTokens, useBorderColorDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref } = s;\n\n\u002F\u002F Base color\nconst { colorGray } = useColorDesignTokens(s, { gray: '#6b7280' } as const);\n\n\u002F\u002F Create level variants\nconst { colorGray300, colorGray500, colorGray700 } = useColorLevelDesignTokens(s, colorGray, {\n    300: 35,\n    500: 55,\n    700: 82,\n} as const);\n\n\u002F\u002F Create semantic border colors\nconst {\n    borderColor,\n    borderColorLighter,\n    borderColorDarker,\n} = useBorderColorDesignTokens(s, {\n    default: ref(colorGray500),\n    lighter: ref(colorGray300),\n    darker: ref(colorGray700),\n} as const);\n\nexport default s;\n",[697,3583,3584,3604,3633,3637,3651,3667,3671,3676,3718,3722,3727,3762,3774,3786,3798,3810,3814,3819,3825,3831,3838,3845,3859,3872,3886,3900,3912,3916],{"__ignoreMap":803},[807,3585,3586,3588,3590,3592,3594,3596,3598,3600,3602],{"class":809,"line":810},[807,3587,814],{"class":813},[807,3589,818],{"class":817},[807,3591,822],{"class":821},[807,3593,825],{"class":817},[807,3595,828],{"class":813},[807,3597,831],{"class":817},[807,3599,835],{"class":834},[807,3601,838],{"class":817},[807,3603,841],{"class":817},[807,3605,3606,3608,3610,3612,3614,3617,3619,3621,3623,3625,3627,3629,3631],{"class":809,"line":844},[807,3607,814],{"class":813},[807,3609,818],{"class":817},[807,3611,3025],{"class":821},[807,3613,1280],{"class":817},[807,3615,3616],{"class":821}," useColorLevelDesignTokens",[807,3618,1280],{"class":817},[807,3620,3030],{"class":821},[807,3622,825],{"class":817},[807,3624,828],{"class":813},[807,3626,831],{"class":817},[807,3628,860],{"class":834},[807,3630,838],{"class":817},[807,3632,841],{"class":817},[807,3634,3635],{"class":809,"line":867},[807,3636,870],{"emptyLinePlaceholder":223},[807,3638,3639,3641,3643,3645,3647,3649],{"class":809,"line":873},[807,3640,877],{"class":876},[807,3642,880],{"class":821},[807,3644,883],{"class":817},[807,3646,822],{"class":886},[807,3648,889],{"class":821},[807,3650,841],{"class":817},[807,3652,3653,3655,3657,3659,3661,3663,3665],{"class":809,"line":894},[807,3654,877],{"class":876},[807,3656,818],{"class":817},[807,3658,3069],{"class":821},[807,3660,983],{"class":817},[807,3662,986],{"class":817},[807,3664,1010],{"class":821},[807,3666,841],{"class":817},[807,3668,3669],{"class":809,"line":899},[807,3670,870],{"emptyLinePlaceholder":223},[807,3672,3673],{"class":809,"line":907},[807,3674,3675],{"class":1317},"\u002F\u002F Base color\n",[807,3677,3678,3680,3682,3685,3687,3689,3691,3693,3695,3697,3700,3702,3704,3706,3708,3710,3712,3714,3716],{"class":809,"line":916},[807,3679,877],{"class":876},[807,3681,818],{"class":817},[807,3683,3684],{"class":821}," colorGray ",[807,3686,983],{"class":817},[807,3688,986],{"class":817},[807,3690,3025],{"class":886},[807,3692,1277],{"class":821},[807,3694,1280],{"class":817},[807,3696,818],{"class":817},[807,3698,3699],{"class":1287}," gray",[807,3701,1027],{"class":817},[807,3703,831],{"class":817},[807,3705,3134],{"class":834},[807,3707,838],{"class":817},[807,3709,825],{"class":817},[807,3711,3193],{"class":813},[807,3713,3196],{"class":876},[807,3715,1340],{"class":821},[807,3717,841],{"class":817},[807,3719,3720],{"class":809,"line":924},[807,3721,870],{"emptyLinePlaceholder":223},[807,3723,3724],{"class":809,"line":932},[807,3725,3726],{"class":1317},"\u002F\u002F Create level variants\n",[807,3728,3729,3731,3733,3736,3738,3741,3743,3746,3748,3750,3752,3754,3756,3758,3760],{"class":809,"line":940},[807,3730,877],{"class":876},[807,3732,818],{"class":817},[807,3734,3735],{"class":821}," colorGray300",[807,3737,1280],{"class":817},[807,3739,3740],{"class":821}," colorGray500",[807,3742,1280],{"class":817},[807,3744,3745],{"class":821}," colorGray700 ",[807,3747,983],{"class":817},[807,3749,986],{"class":817},[807,3751,3616],{"class":886},[807,3753,1277],{"class":821},[807,3755,1280],{"class":817},[807,3757,3095],{"class":821},[807,3759,1280],{"class":817},[807,3761,904],{"class":817},[807,3763,3764,3767,3769,3772],{"class":809,"line":948},[807,3765,3766],{"class":2130},"    300",[807,3768,1027],{"class":817},[807,3770,3771],{"class":2130}," 35",[807,3773,913],{"class":817},[807,3775,3776,3779,3781,3784],{"class":809,"line":956},[807,3777,3778],{"class":2130},"    500",[807,3780,1027],{"class":817},[807,3782,3783],{"class":2130}," 55",[807,3785,913],{"class":817},[807,3787,3788,3791,3793,3796],{"class":809,"line":964},[807,3789,3790],{"class":2130},"    700",[807,3792,1027],{"class":817},[807,3794,3795],{"class":2130}," 82",[807,3797,913],{"class":817},[807,3799,3800,3802,3804,3806,3808],{"class":809,"line":972},[807,3801,983],{"class":817},[807,3803,3193],{"class":813},[807,3805,3196],{"class":876},[807,3807,1340],{"class":821},[807,3809,841],{"class":817},[807,3811,3812],{"class":809,"line":980},[807,3813,870],{"emptyLinePlaceholder":223},[807,3815,3816],{"class":809,"line":996},[807,3817,3818],{"class":1317},"\u002F\u002F Create semantic border colors\n",[807,3820,3821,3823],{"class":809,"line":1001},[807,3822,877],{"class":876},[807,3824,904],{"class":817},[807,3826,3827,3829],{"class":809,"line":3232},[807,3828,3220],{"class":821},[807,3830,913],{"class":817},[807,3832,3833,3836],{"class":809,"line":3240},[807,3834,3835],{"class":821},"    borderColorLighter",[807,3837,913],{"class":817},[807,3839,3840,3843],{"class":809,"line":3248},[807,3841,3842],{"class":821},"    borderColorDarker",[807,3844,913],{"class":817},[807,3846,3847,3849,3851,3853,3855,3857],{"class":809,"line":3263},[807,3848,983],{"class":817},[807,3850,986],{"class":817},[807,3852,3030],{"class":886},[807,3854,1277],{"class":821},[807,3856,1280],{"class":817},[807,3858,904],{"class":817},[807,3860,3861,3863,3865,3867,3870],{"class":809,"line":3278},[807,3862,1288],{"class":1287},[807,3864,1027],{"class":817},[807,3866,3270],{"class":886},[807,3868,3869],{"class":821},"(colorGray500)",[807,3871,913],{"class":817},[807,3873,3874,3877,3879,3881,3884],{"class":809,"line":3292},[807,3875,3876],{"class":1287},"    lighter",[807,3878,1027],{"class":817},[807,3880,3270],{"class":886},[807,3882,3883],{"class":821},"(colorGray300)",[807,3885,913],{"class":817},[807,3887,3888,3891,3893,3895,3898],{"class":809,"line":3306},[807,3889,3890],{"class":1287},"    darker",[807,3892,1027],{"class":817},[807,3894,3270],{"class":886},[807,3896,3897],{"class":821},"(colorGray700)",[807,3899,913],{"class":817},[807,3901,3902,3904,3906,3908,3910],{"class":809,"line":3320},[807,3903,983],{"class":817},[807,3905,3193],{"class":813},[807,3907,3196],{"class":876},[807,3909,1340],{"class":821},[807,3911,841],{"class":817},[807,3913,3914],{"class":809,"line":3333},[807,3915,870],{"emptyLinePlaceholder":223},[807,3917,3918,3920,3922,3924],{"class":809,"line":3338},[807,3919,1004],{"class":813},[807,3921,1007],{"class":813},[807,3923,1010],{"class":821},[807,3925,841],{"class":817},[793,3927,3928],{"icon":154,"label":326},[797,3929,3931],{"className":1017,"code":3930,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --color--gray: oklch(0.5575 0.0165 244.89 \u002F 1);\n    --color--gray-300: oklch(from var(--color--gray) 0.35 c h \u002F a);\n    --color--gray-500: oklch(from var(--color--gray) 0.55 c h \u002F a);\n    --color--gray-700: oklch(from var(--color--gray) 0.82 c h \u002F a);\n    --border-color: var(--color--gray-500);\n    --border-color--lighter: var(--color--gray-300);\n    --border-color--darker: var(--color--gray-700);\n}\n",[697,3932,3933,3941,3963,3994,4022,4050,4065,4081,4097],{"__ignoreMap":803},[807,3934,3935,3937,3939],{"class":809,"line":810},[807,3936,1027],{"class":817},[807,3938,1030],{"class":876},[807,3940,904],{"class":817},[807,3942,3943,3945,3947,3949,3951,3953,3955,3957,3959,3961],{"class":809,"line":844},[807,3944,3366],{"class":821},[807,3946,1027],{"class":817},[807,3948,3371],{"class":886},[807,3950,1141],{"class":817},[807,3952,3376],{"class":2130},[807,3954,3379],{"class":2130},[807,3956,3382],{"class":2130},[807,3958,3385],{"class":821},[807,3960,3388],{"class":2130},[807,3962,1147],{"class":817},[807,3964,3965,3968,3970,3972,3974,3977,3980,3982,3984,3986,3989,3992],{"class":809,"line":867},[807,3966,3967],{"class":821},"    --color--gray-300",[807,3969,1027],{"class":817},[807,3971,3371],{"class":886},[807,3973,1141],{"class":817},[807,3975,3976],{"class":821},"from ",[807,3978,3979],{"class":886},"var",[807,3981,1141],{"class":817},[807,3983,3482],{"class":821},[807,3985,1340],{"class":817},[807,3987,3988],{"class":2130}," 0.35",[807,3990,3991],{"class":821}," c h \u002F a",[807,3993,1147],{"class":817},[807,3995,3996,3999,4001,4003,4005,4007,4009,4011,4013,4015,4018,4020],{"class":809,"line":873},[807,3997,3998],{"class":821},"    --color--gray-500",[807,4000,1027],{"class":817},[807,4002,3371],{"class":886},[807,4004,1141],{"class":817},[807,4006,3976],{"class":821},[807,4008,3979],{"class":886},[807,4010,1141],{"class":817},[807,4012,3482],{"class":821},[807,4014,1340],{"class":817},[807,4016,4017],{"class":2130}," 0.55",[807,4019,3991],{"class":821},[807,4021,1147],{"class":817},[807,4023,4024,4027,4029,4031,4033,4035,4037,4039,4041,4043,4046,4048],{"class":809,"line":894},[807,4025,4026],{"class":821},"    --color--gray-700",[807,4028,1027],{"class":817},[807,4030,3371],{"class":886},[807,4032,1141],{"class":817},[807,4034,3976],{"class":821},[807,4036,3979],{"class":886},[807,4038,1141],{"class":817},[807,4040,3482],{"class":821},[807,4042,1340],{"class":817},[807,4044,4045],{"class":2130}," 0.82",[807,4047,3991],{"class":821},[807,4049,1147],{"class":817},[807,4051,4052,4054,4056,4058,4060,4063],{"class":809,"line":899},[807,4053,3473],{"class":821},[807,4055,1027],{"class":817},[807,4057,1138],{"class":886},[807,4059,1141],{"class":817},[807,4061,4062],{"class":821},"--color--gray-500",[807,4064,1147],{"class":817},[807,4066,4067,4070,4072,4074,4076,4079],{"class":809,"line":907},[807,4068,4069],{"class":821},"    --border-color--lighter",[807,4071,1027],{"class":817},[807,4073,1138],{"class":886},[807,4075,1141],{"class":817},[807,4077,4078],{"class":821},"--color--gray-300",[807,4080,1147],{"class":817},[807,4082,4083,4086,4088,4090,4092,4095],{"class":809,"line":916},[807,4084,4085],{"class":821},"    --border-color--darker",[807,4087,1027],{"class":817},[807,4089,1138],{"class":886},[807,4091,1141],{"class":817},[807,4093,4094],{"class":821},"--color--gray-700",[807,4096,1147],{"class":817},[807,4098,4099],{"class":809,"line":924},[807,4100,1152],{"class":817},[1165,4102,4104],{"id":4103},"creating-border-color-state-variants","Creating Border Color State Variants",[733,4106,4107],{},"Create border colors for different interactive states:",[790,4109,4110],{},[793,4111,4112],{"icon":795,"label":290},[797,4113,4115],{"className":799,"code":4114,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderStyleDesignTokens, useBorderWidthDesignTokens, useColorDesignTokens, useBorderColorDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\nconst { borderStyle } = useBorderStyleDesignTokens(s);\nconst { borderWidth } = useBorderWidthDesignTokens(s);\n\n\u002F\u002F Define base colors for different states\nconst { colorGray, colorBlue, colorRed, colorGreen } = useColorDesignTokens(s, {\n    gray: '#d1d5db',\n    blue: '#3b82f6',\n    red: '#ef4444',\n    green: '#10b981',\n} as const);\n\n\u002F\u002F Create state-based border colors\nconst {\n    borderColor,\n    borderColorHover,\n    borderColorFocus,\n    borderColorError,\n    borderColorSuccess,\n} = useBorderColorDesignTokens(s, {\n    default: ref(colorGray),\n    hover: ref(colorBlue),\n    focus: ref(colorBlue),\n    error: ref(colorRed),\n    success: ref(colorGreen),\n} as const);\n\n\u002F\u002F Apply state-based borders\nselector('.input', {\n    border: css`${borderWidth} ${borderStyle} ${borderColor}`,\n    transition: 'border-color 0.2s ease',\n    '&:hover': {\n        borderColor: ref(borderColorHover),\n    },\n    '&:focus': {\n        borderColor: ref(borderColorFocus),\n        outline: 'none',\n    },\n    '&.error': {\n        borderColor: ref(borderColorError),\n    },\n    '&.success': {\n        borderColor: ref(borderColorSuccess),\n    },\n});\n\nexport default s;\n",[697,4116,4117,4137,4169,4173,4187,4213,4217,4235,4253,4257,4262,4297,4312,4327,4342,4357,4369,4373,4378,4384,4390,4397,4404,4410,4416,4430,4442,4456,4469,4483,4497,4510,4515,4521,4540,4574,4591,4606,4621,4627,4641,4655,4671,4676,4690,4704,4709,4723,4737,4742,4751,4756],{"__ignoreMap":803},[807,4118,4119,4121,4123,4125,4127,4129,4131,4133,4135],{"class":809,"line":810},[807,4120,814],{"class":813},[807,4122,818],{"class":817},[807,4124,822],{"class":821},[807,4126,825],{"class":817},[807,4128,828],{"class":813},[807,4130,831],{"class":817},[807,4132,835],{"class":834},[807,4134,838],{"class":817},[807,4136,841],{"class":817},[807,4138,4139,4141,4143,4145,4147,4149,4151,4153,4155,4157,4159,4161,4163,4165,4167],{"class":809,"line":844},[807,4140,814],{"class":813},[807,4142,818],{"class":817},[807,4144,851],{"class":821},[807,4146,1280],{"class":817},[807,4148,2004],{"class":821},[807,4150,1280],{"class":817},[807,4152,3025],{"class":821},[807,4154,1280],{"class":817},[807,4156,3030],{"class":821},[807,4158,825],{"class":817},[807,4160,828],{"class":813},[807,4162,831],{"class":817},[807,4164,860],{"class":834},[807,4166,838],{"class":817},[807,4168,841],{"class":817},[807,4170,4171],{"class":809,"line":867},[807,4172,870],{"emptyLinePlaceholder":223},[807,4174,4175,4177,4179,4181,4183,4185],{"class":809,"line":873},[807,4176,877],{"class":876},[807,4178,880],{"class":821},[807,4180,883],{"class":817},[807,4182,822],{"class":886},[807,4184,889],{"class":821},[807,4186,841],{"class":817},[807,4188,4189,4191,4193,4195,4197,4200,4202,4205,4207,4209,4211],{"class":809,"line":894},[807,4190,877],{"class":876},[807,4192,818],{"class":817},[807,4194,3270],{"class":821},[807,4196,1280],{"class":817},[807,4198,4199],{"class":821}," selector",[807,4201,1280],{"class":817},[807,4203,4204],{"class":821}," css ",[807,4206,983],{"class":817},[807,4208,986],{"class":817},[807,4210,1010],{"class":821},[807,4212,841],{"class":817},[807,4214,4215],{"class":809,"line":899},[807,4216,870],{"emptyLinePlaceholder":223},[807,4218,4219,4221,4223,4225,4227,4229,4231,4233],{"class":809,"line":907},[807,4220,877],{"class":876},[807,4222,818],{"class":817},[807,4224,1516],{"class":821},[807,4226,983],{"class":817},[807,4228,986],{"class":817},[807,4230,851],{"class":886},[807,4232,991],{"class":821},[807,4234,841],{"class":817},[807,4236,4237,4239,4241,4243,4245,4247,4249,4251],{"class":809,"line":916},[807,4238,877],{"class":876},[807,4240,818],{"class":817},[807,4242,2611],{"class":821},[807,4244,983],{"class":817},[807,4246,986],{"class":817},[807,4248,2004],{"class":886},[807,4250,991],{"class":821},[807,4252,841],{"class":817},[807,4254,4255],{"class":809,"line":924},[807,4256,870],{"emptyLinePlaceholder":223},[807,4258,4259],{"class":809,"line":932},[807,4260,4261],{"class":1317},"\u002F\u002F Define base colors for different states\n",[807,4263,4264,4266,4268,4270,4272,4275,4277,4280,4282,4285,4287,4289,4291,4293,4295],{"class":809,"line":940},[807,4265,877],{"class":876},[807,4267,818],{"class":817},[807,4269,3095],{"class":821},[807,4271,1280],{"class":817},[807,4273,4274],{"class":821}," colorBlue",[807,4276,1280],{"class":817},[807,4278,4279],{"class":821}," colorRed",[807,4281,1280],{"class":817},[807,4283,4284],{"class":821}," colorGreen ",[807,4286,983],{"class":817},[807,4288,986],{"class":817},[807,4290,3025],{"class":886},[807,4292,1277],{"class":821},[807,4294,1280],{"class":817},[807,4296,904],{"class":817},[807,4298,4299,4301,4303,4305,4308,4310],{"class":809,"line":948},[807,4300,3127],{"class":1287},[807,4302,1027],{"class":817},[807,4304,831],{"class":817},[807,4306,4307],{"class":834},"#d1d5db",[807,4309,838],{"class":817},[807,4311,913],{"class":817},[807,4313,4314,4317,4319,4321,4323,4325],{"class":809,"line":956},[807,4315,4316],{"class":1287},"    blue",[807,4318,1027],{"class":817},[807,4320,831],{"class":817},[807,4322,3150],{"class":834},[807,4324,838],{"class":817},[807,4326,913],{"class":817},[807,4328,4329,4332,4334,4336,4338,4340],{"class":809,"line":964},[807,4330,4331],{"class":1287},"    red",[807,4333,1027],{"class":817},[807,4335,831],{"class":817},[807,4337,3182],{"class":834},[807,4339,838],{"class":817},[807,4341,913],{"class":817},[807,4343,4344,4347,4349,4351,4353,4355],{"class":809,"line":972},[807,4345,4346],{"class":1287},"    green",[807,4348,1027],{"class":817},[807,4350,831],{"class":817},[807,4352,3166],{"class":834},[807,4354,838],{"class":817},[807,4356,913],{"class":817},[807,4358,4359,4361,4363,4365,4367],{"class":809,"line":980},[807,4360,983],{"class":817},[807,4362,3193],{"class":813},[807,4364,3196],{"class":876},[807,4366,1340],{"class":821},[807,4368,841],{"class":817},[807,4370,4371],{"class":809,"line":996},[807,4372,870],{"emptyLinePlaceholder":223},[807,4374,4375],{"class":809,"line":1001},[807,4376,4377],{"class":1317},"\u002F\u002F Create state-based border colors\n",[807,4379,4380,4382],{"class":809,"line":3232},[807,4381,877],{"class":876},[807,4383,904],{"class":817},[807,4385,4386,4388],{"class":809,"line":3240},[807,4387,3220],{"class":821},[807,4389,913],{"class":817},[807,4391,4392,4395],{"class":809,"line":3248},[807,4393,4394],{"class":821},"    borderColorHover",[807,4396,913],{"class":817},[807,4398,4399,4402],{"class":809,"line":3263},[807,4400,4401],{"class":821},"    borderColorFocus",[807,4403,913],{"class":817},[807,4405,4406,4408],{"class":809,"line":3278},[807,4407,3243],{"class":821},[807,4409,913],{"class":817},[807,4411,4412,4414],{"class":809,"line":3292},[807,4413,3235],{"class":821},[807,4415,913],{"class":817},[807,4417,4418,4420,4422,4424,4426,4428],{"class":809,"line":3306},[807,4419,983],{"class":817},[807,4421,986],{"class":817},[807,4423,3030],{"class":886},[807,4425,1277],{"class":821},[807,4427,1280],{"class":817},[807,4429,904],{"class":817},[807,4431,4432,4434,4436,4438,4440],{"class":809,"line":3320},[807,4433,1288],{"class":1287},[807,4435,1027],{"class":817},[807,4437,3270],{"class":886},[807,4439,3273],{"class":821},[807,4441,913],{"class":817},[807,4443,4444,4447,4449,4451,4454],{"class":809,"line":3333},[807,4445,4446],{"class":1287},"    hover",[807,4448,1027],{"class":817},[807,4450,3270],{"class":886},[807,4452,4453],{"class":821},"(colorBlue)",[807,4455,913],{"class":817},[807,4457,4458,4461,4463,4465,4467],{"class":809,"line":3338},[807,4459,4460],{"class":1287},"    focus",[807,4462,1027],{"class":817},[807,4464,3270],{"class":886},[807,4466,4453],{"class":821},[807,4468,913],{"class":817},[807,4470,4472,4474,4476,4478,4481],{"class":809,"line":4471},29,[807,4473,3175],{"class":1287},[807,4475,1027],{"class":817},[807,4477,3270],{"class":886},[807,4479,4480],{"class":821},"(colorRed)",[807,4482,913],{"class":817},[807,4484,4486,4488,4490,4492,4495],{"class":809,"line":4485},30,[807,4487,3159],{"class":1287},[807,4489,1027],{"class":817},[807,4491,3270],{"class":886},[807,4493,4494],{"class":821},"(colorGreen)",[807,4496,913],{"class":817},[807,4498,4500,4502,4504,4506,4508],{"class":809,"line":4499},31,[807,4501,983],{"class":817},[807,4503,3193],{"class":813},[807,4505,3196],{"class":876},[807,4507,1340],{"class":821},[807,4509,841],{"class":817},[807,4511,4513],{"class":809,"line":4512},32,[807,4514,870],{"emptyLinePlaceholder":223},[807,4516,4518],{"class":809,"line":4517},33,[807,4519,4520],{"class":1317},"\u002F\u002F Apply state-based borders\n",[807,4522,4524,4527,4529,4531,4534,4536,4538],{"class":809,"line":4523},34,[807,4525,4526],{"class":886},"selector",[807,4528,1141],{"class":821},[807,4530,838],{"class":817},[807,4532,4533],{"class":834},".input",[807,4535,838],{"class":817},[807,4537,1280],{"class":817},[807,4539,904],{"class":817},[807,4541,4543,4546,4548,4551,4554,4556,4558,4561,4563,4565,4567,4569,4572],{"class":809,"line":4542},35,[807,4544,4545],{"class":1287},"    border",[807,4547,1027],{"class":817},[807,4549,4550],{"class":886}," css",[807,4552,4553],{"class":817},"`${",[807,4555,720],{"class":821},[807,4557,983],{"class":817},[807,4559,4560],{"class":817}," ${",[807,4562,723],{"class":821},[807,4564,983],{"class":817},[807,4566,4560],{"class":817},[807,4568,726],{"class":821},[807,4570,4571],{"class":817},"}`",[807,4573,913],{"class":817},[807,4575,4577,4580,4582,4584,4587,4589],{"class":809,"line":4576},36,[807,4578,4579],{"class":1287},"    transition",[807,4581,1027],{"class":817},[807,4583,831],{"class":817},[807,4585,4586],{"class":834},"border-color 0.2s ease",[807,4588,838],{"class":817},[807,4590,913],{"class":817},[807,4592,4594,4597,4600,4602,4604],{"class":809,"line":4593},37,[807,4595,4596],{"class":817},"    '",[807,4598,4599],{"class":1287},"&:hover",[807,4601,838],{"class":817},[807,4603,1027],{"class":817},[807,4605,904],{"class":817},[807,4607,4609,4612,4614,4616,4619],{"class":809,"line":4608},38,[807,4610,4611],{"class":1287},"        borderColor",[807,4613,1027],{"class":817},[807,4615,3270],{"class":886},[807,4617,4618],{"class":821},"(borderColorHover)",[807,4620,913],{"class":817},[807,4622,4624],{"class":809,"line":4623},39,[807,4625,4626],{"class":817},"    },\n",[807,4628,4630,4632,4635,4637,4639],{"class":809,"line":4629},40,[807,4631,4596],{"class":817},[807,4633,4634],{"class":1287},"&:focus",[807,4636,838],{"class":817},[807,4638,1027],{"class":817},[807,4640,904],{"class":817},[807,4642,4644,4646,4648,4650,4653],{"class":809,"line":4643},41,[807,4645,4611],{"class":1287},[807,4647,1027],{"class":817},[807,4649,3270],{"class":886},[807,4651,4652],{"class":821},"(borderColorFocus)",[807,4654,913],{"class":817},[807,4656,4658,4661,4663,4665,4667,4669],{"class":809,"line":4657},42,[807,4659,4660],{"class":1287},"        outline",[807,4662,1027],{"class":817},[807,4664,831],{"class":817},[807,4666,2195],{"class":834},[807,4668,838],{"class":817},[807,4670,913],{"class":817},[807,4672,4674],{"class":809,"line":4673},43,[807,4675,4626],{"class":817},[807,4677,4679,4681,4684,4686,4688],{"class":809,"line":4678},44,[807,4680,4596],{"class":817},[807,4682,4683],{"class":1287},"&.error",[807,4685,838],{"class":817},[807,4687,1027],{"class":817},[807,4689,904],{"class":817},[807,4691,4693,4695,4697,4699,4702],{"class":809,"line":4692},45,[807,4694,4611],{"class":1287},[807,4696,1027],{"class":817},[807,4698,3270],{"class":886},[807,4700,4701],{"class":821},"(borderColorError)",[807,4703,913],{"class":817},[807,4705,4707],{"class":809,"line":4706},46,[807,4708,4626],{"class":817},[807,4710,4712,4714,4717,4719,4721],{"class":809,"line":4711},47,[807,4713,4596],{"class":817},[807,4715,4716],{"class":1287},"&.success",[807,4718,838],{"class":817},[807,4720,1027],{"class":817},[807,4722,904],{"class":817},[807,4724,4726,4728,4730,4732,4735],{"class":809,"line":4725},48,[807,4727,4611],{"class":1287},[807,4729,1027],{"class":817},[807,4731,3270],{"class":886},[807,4733,4734],{"class":821},"(borderColorSuccess)",[807,4736,913],{"class":817},[807,4738,4740],{"class":809,"line":4739},49,[807,4741,4626],{"class":817},[807,4743,4745,4747,4749],{"class":809,"line":4744},50,[807,4746,983],{"class":817},[807,4748,1340],{"class":821},[807,4750,841],{"class":817},[807,4752,4754],{"class":809,"line":4753},51,[807,4755,870],{"emptyLinePlaceholder":223},[807,4757,4759,4761,4763,4765],{"class":809,"line":4758},52,[807,4760,1004],{"class":813},[807,4762,1007],{"class":813},[807,4764,1010],{"class":821},[807,4766,841],{"class":817},[1165,4768,4770],{"id":4769},"updating-the-default-border-color-variable-in-themes","Updating the Default Border Color Variable in Themes",[733,4772,4773],{},"Create borders that automatically adapt to light and dark themes:",[790,4775,4776,5240],{},[793,4777,4778],{"icon":795,"label":290},[797,4779,4781],{"className":799,"code":4780,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderStyleDesignTokens, useBorderWidthDesignTokens, useColorDesignTokens, useColorLevelDesignTokens, useBorderColorDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\nconst { borderStyle } = useBorderStyleDesignTokens(s);\nconst { borderWidth } = useBorderWidthDesignTokens(s);\n\n\u002F\u002F Base color\nconst { colorGray } = useColorDesignTokens(s, { gray: '#6b7280' } as const);\n\n\u002F\u002F Create level variants\nconst { colorGray300, colorGray700 } = useColorLevelDesignTokens(s, colorGray, {\n    300: 35,\n    700: 82,\n} as const);\n\nconst { borderColor } = useBorderColorDesignTokens(s, colorGray, {\n    default: ref(colorGray300),\n} as const);\n\ntheme('dark', (ctx) => {\n    \u002F\u002F Override default border color in dark theme\n    ctx.variable(borderColor, ref(colorGray700));\n});\n\n\u002F\u002F Use theme-aware border\nselector('.card', {\n    border: css`${borderWidth} ${borderStyle} ${borderColor}`,\n});\n\nexport default s;\n",[697,4782,4783,4803,4839,4843,4857,4881,4885,4903,4921,4925,4929,4969,4973,4977,5005,5015,5025,5037,5041,5066,5078,5090,5094,5123,5128,5156,5164,5168,5173,5190,5218,5226,5230],{"__ignoreMap":803},[807,4784,4785,4787,4789,4791,4793,4795,4797,4799,4801],{"class":809,"line":810},[807,4786,814],{"class":813},[807,4788,818],{"class":817},[807,4790,822],{"class":821},[807,4792,825],{"class":817},[807,4794,828],{"class":813},[807,4796,831],{"class":817},[807,4798,835],{"class":834},[807,4800,838],{"class":817},[807,4802,841],{"class":817},[807,4804,4805,4807,4809,4811,4813,4815,4817,4819,4821,4823,4825,4827,4829,4831,4833,4835,4837],{"class":809,"line":844},[807,4806,814],{"class":813},[807,4808,818],{"class":817},[807,4810,851],{"class":821},[807,4812,1280],{"class":817},[807,4814,2004],{"class":821},[807,4816,1280],{"class":817},[807,4818,3025],{"class":821},[807,4820,1280],{"class":817},[807,4822,3616],{"class":821},[807,4824,1280],{"class":817},[807,4826,3030],{"class":821},[807,4828,825],{"class":817},[807,4830,828],{"class":813},[807,4832,831],{"class":817},[807,4834,860],{"class":834},[807,4836,838],{"class":817},[807,4838,841],{"class":817},[807,4840,4841],{"class":809,"line":867},[807,4842,870],{"emptyLinePlaceholder":223},[807,4844,4845,4847,4849,4851,4853,4855],{"class":809,"line":873},[807,4846,877],{"class":876},[807,4848,880],{"class":821},[807,4850,883],{"class":817},[807,4852,822],{"class":886},[807,4854,889],{"class":821},[807,4856,841],{"class":817},[807,4858,4859,4861,4863,4865,4867,4869,4871,4873,4875,4877,4879],{"class":809,"line":894},[807,4860,877],{"class":876},[807,4862,818],{"class":817},[807,4864,3270],{"class":821},[807,4866,1280],{"class":817},[807,4868,4199],{"class":821},[807,4870,1280],{"class":817},[807,4872,4204],{"class":821},[807,4874,983],{"class":817},[807,4876,986],{"class":817},[807,4878,1010],{"class":821},[807,4880,841],{"class":817},[807,4882,4883],{"class":809,"line":899},[807,4884,870],{"emptyLinePlaceholder":223},[807,4886,4887,4889,4891,4893,4895,4897,4899,4901],{"class":809,"line":907},[807,4888,877],{"class":876},[807,4890,818],{"class":817},[807,4892,1516],{"class":821},[807,4894,983],{"class":817},[807,4896,986],{"class":817},[807,4898,851],{"class":886},[807,4900,991],{"class":821},[807,4902,841],{"class":817},[807,4904,4905,4907,4909,4911,4913,4915,4917,4919],{"class":809,"line":916},[807,4906,877],{"class":876},[807,4908,818],{"class":817},[807,4910,2611],{"class":821},[807,4912,983],{"class":817},[807,4914,986],{"class":817},[807,4916,2004],{"class":886},[807,4918,991],{"class":821},[807,4920,841],{"class":817},[807,4922,4923],{"class":809,"line":924},[807,4924,870],{"emptyLinePlaceholder":223},[807,4926,4927],{"class":809,"line":932},[807,4928,3675],{"class":1317},[807,4930,4931,4933,4935,4937,4939,4941,4943,4945,4947,4949,4951,4953,4955,4957,4959,4961,4963,4965,4967],{"class":809,"line":940},[807,4932,877],{"class":876},[807,4934,818],{"class":817},[807,4936,3684],{"class":821},[807,4938,983],{"class":817},[807,4940,986],{"class":817},[807,4942,3025],{"class":886},[807,4944,1277],{"class":821},[807,4946,1280],{"class":817},[807,4948,818],{"class":817},[807,4950,3699],{"class":1287},[807,4952,1027],{"class":817},[807,4954,831],{"class":817},[807,4956,3134],{"class":834},[807,4958,838],{"class":817},[807,4960,825],{"class":817},[807,4962,3193],{"class":813},[807,4964,3196],{"class":876},[807,4966,1340],{"class":821},[807,4968,841],{"class":817},[807,4970,4971],{"class":809,"line":948},[807,4972,870],{"emptyLinePlaceholder":223},[807,4974,4975],{"class":809,"line":956},[807,4976,3726],{"class":1317},[807,4978,4979,4981,4983,4985,4987,4989,4991,4993,4995,4997,4999,5001,5003],{"class":809,"line":964},[807,4980,877],{"class":876},[807,4982,818],{"class":817},[807,4984,3735],{"class":821},[807,4986,1280],{"class":817},[807,4988,3745],{"class":821},[807,4990,983],{"class":817},[807,4992,986],{"class":817},[807,4994,3616],{"class":886},[807,4996,1277],{"class":821},[807,4998,1280],{"class":817},[807,5000,3095],{"class":821},[807,5002,1280],{"class":817},[807,5004,904],{"class":817},[807,5006,5007,5009,5011,5013],{"class":809,"line":972},[807,5008,3766],{"class":2130},[807,5010,1027],{"class":817},[807,5012,3771],{"class":2130},[807,5014,913],{"class":817},[807,5016,5017,5019,5021,5023],{"class":809,"line":980},[807,5018,3790],{"class":2130},[807,5020,1027],{"class":817},[807,5022,3795],{"class":2130},[807,5024,913],{"class":817},[807,5026,5027,5029,5031,5033,5035],{"class":809,"line":996},[807,5028,983],{"class":817},[807,5030,3193],{"class":813},[807,5032,3196],{"class":876},[807,5034,1340],{"class":821},[807,5036,841],{"class":817},[807,5038,5039],{"class":809,"line":1001},[807,5040,870],{"emptyLinePlaceholder":223},[807,5042,5043,5045,5047,5050,5052,5054,5056,5058,5060,5062,5064],{"class":809,"line":3232},[807,5044,877],{"class":876},[807,5046,818],{"class":817},[807,5048,5049],{"class":821}," borderColor ",[807,5051,983],{"class":817},[807,5053,986],{"class":817},[807,5055,3030],{"class":886},[807,5057,1277],{"class":821},[807,5059,1280],{"class":817},[807,5061,3095],{"class":821},[807,5063,1280],{"class":817},[807,5065,904],{"class":817},[807,5067,5068,5070,5072,5074,5076],{"class":809,"line":3240},[807,5069,1288],{"class":1287},[807,5071,1027],{"class":817},[807,5073,3270],{"class":886},[807,5075,3883],{"class":821},[807,5077,913],{"class":817},[807,5079,5080,5082,5084,5086,5088],{"class":809,"line":3248},[807,5081,983],{"class":817},[807,5083,3193],{"class":813},[807,5085,3196],{"class":876},[807,5087,1340],{"class":821},[807,5089,841],{"class":817},[807,5091,5092],{"class":809,"line":3263},[807,5093,870],{"emptyLinePlaceholder":223},[807,5095,5096,5099,5101,5103,5106,5108,5110,5112,5116,5118,5121],{"class":809,"line":3278},[807,5097,5098],{"class":886},"theme",[807,5100,1141],{"class":821},[807,5102,838],{"class":817},[807,5104,5105],{"class":834},"dark",[807,5107,838],{"class":817},[807,5109,1280],{"class":817},[807,5111,713],{"class":817},[807,5113,5115],{"class":5114},"sHdIc","ctx",[807,5117,1340],{"class":817},[807,5119,5120],{"class":876}," =>",[807,5122,904],{"class":817},[807,5124,5125],{"class":809,"line":3292},[807,5126,5127],{"class":1317},"    \u002F\u002F Override default border color in dark theme\n",[807,5129,5130,5133,5136,5138,5140,5142,5144,5146,5148,5151,5154],{"class":809,"line":3306},[807,5131,5132],{"class":821},"    ctx",[807,5134,5135],{"class":817},".",[807,5137,1540],{"class":886},[807,5139,1141],{"class":1287},[807,5141,726],{"class":821},[807,5143,1280],{"class":817},[807,5145,3270],{"class":886},[807,5147,1141],{"class":1287},[807,5149,5150],{"class":821},"colorGray700",[807,5152,5153],{"class":1287},"))",[807,5155,841],{"class":817},[807,5157,5158,5160,5162],{"class":809,"line":3320},[807,5159,983],{"class":817},[807,5161,1340],{"class":821},[807,5163,841],{"class":817},[807,5165,5166],{"class":809,"line":3333},[807,5167,870],{"emptyLinePlaceholder":223},[807,5169,5170],{"class":809,"line":3338},[807,5171,5172],{"class":1317},"\u002F\u002F Use theme-aware border\n",[807,5174,5175,5177,5179,5181,5184,5186,5188],{"class":809,"line":4471},[807,5176,4526],{"class":886},[807,5178,1141],{"class":821},[807,5180,838],{"class":817},[807,5182,5183],{"class":834},".card",[807,5185,838],{"class":817},[807,5187,1280],{"class":817},[807,5189,904],{"class":817},[807,5191,5192,5194,5196,5198,5200,5202,5204,5206,5208,5210,5212,5214,5216],{"class":809,"line":4485},[807,5193,4545],{"class":1287},[807,5195,1027],{"class":817},[807,5197,4550],{"class":886},[807,5199,4553],{"class":817},[807,5201,720],{"class":821},[807,5203,983],{"class":817},[807,5205,4560],{"class":817},[807,5207,723],{"class":821},[807,5209,983],{"class":817},[807,5211,4560],{"class":817},[807,5213,726],{"class":821},[807,5215,4571],{"class":817},[807,5217,913],{"class":817},[807,5219,5220,5222,5224],{"class":809,"line":4499},[807,5221,983],{"class":817},[807,5223,1340],{"class":821},[807,5225,841],{"class":817},[807,5227,5228],{"class":809,"line":4512},[807,5229,870],{"emptyLinePlaceholder":223},[807,5231,5232,5234,5236,5238],{"class":809,"line":4517},[807,5233,1004],{"class":813},[807,5235,1007],{"class":813},[807,5237,1010],{"class":821},[807,5239,841],{"class":817},[793,5241,5242],{"icon":154,"label":326},[797,5243,5245],{"className":1017,"code":5244,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-style--none: none;\n    --border-style--solid: solid;\n    --border-style--dashed: dashed;\n    --border-style--dotted: dotted;\n    --border-style--double: double;\n    --border-style--groove: groove;\n    --border-style--inset: inset;\n    --border-style--outset: outset;\n    --border-style: var(--border-style--solid);\n    --border-width--none: 0;\n    --border-width--thin: thin;\n    --border-width--medium: medium;\n    --border-width--thick: thick;\n    --border-width: var(--border-width--thin);\n    --color--gray: oklch(0.5575 0.0165 244.89 \u002F 1);\n    --color--gray-300: oklch(from var(--color--gray) 0.82 c h \u002F a);\n    --color--gray-700: oklch(from var(--color--gray) 0.35 c h \u002F a);\n    --border-color: var(--color--gray-300);\n}\n\n[data-theme=\"dark\"] {\n    --border-color: var(--color--gray-700);\n}\n\n.card {\n    border: var(--border-width) var(--border-style) var(--border-color);\n}\n",[697,5246,5247,5255,5265,5275,5285,5295,5305,5315,5325,5335,5349,5359,5369,5379,5389,5403,5425,5451,5477,5491,5495,5499,5521,5535,5539,5543,5553,5585],{"__ignoreMap":803},[807,5248,5249,5251,5253],{"class":809,"line":810},[807,5250,1027],{"class":817},[807,5252,1030],{"class":876},[807,5254,904],{"class":817},[807,5256,5257,5259,5261,5263],{"class":809,"line":844},[807,5258,1037],{"class":821},[807,5260,1027],{"class":817},[807,5262,1042],{"class":821},[807,5264,841],{"class":817},[807,5266,5267,5269,5271,5273],{"class":809,"line":867},[807,5268,1049],{"class":821},[807,5270,1027],{"class":817},[807,5272,1054],{"class":821},[807,5274,841],{"class":817},[807,5276,5277,5279,5281,5283],{"class":809,"line":873},[807,5278,1061],{"class":821},[807,5280,1027],{"class":817},[807,5282,1066],{"class":821},[807,5284,841],{"class":817},[807,5286,5287,5289,5291,5293],{"class":809,"line":894},[807,5288,1073],{"class":821},[807,5290,1027],{"class":817},[807,5292,1078],{"class":821},[807,5294,841],{"class":817},[807,5296,5297,5299,5301,5303],{"class":809,"line":899},[807,5298,1085],{"class":821},[807,5300,1027],{"class":817},[807,5302,1090],{"class":821},[807,5304,841],{"class":817},[807,5306,5307,5309,5311,5313],{"class":809,"line":907},[807,5308,1097],{"class":821},[807,5310,1027],{"class":817},[807,5312,1102],{"class":821},[807,5314,841],{"class":817},[807,5316,5317,5319,5321,5323],{"class":809,"line":916},[807,5318,1109],{"class":821},[807,5320,1027],{"class":817},[807,5322,1114],{"class":821},[807,5324,841],{"class":817},[807,5326,5327,5329,5331,5333],{"class":809,"line":924},[807,5328,1121],{"class":821},[807,5330,1027],{"class":817},[807,5332,1126],{"class":821},[807,5334,841],{"class":817},[807,5336,5337,5339,5341,5343,5345,5347],{"class":809,"line":932},[807,5338,1133],{"class":821},[807,5340,1027],{"class":817},[807,5342,1138],{"class":886},[807,5344,1141],{"class":817},[807,5346,1144],{"class":821},[807,5348,1147],{"class":817},[807,5350,5351,5353,5355,5357],{"class":809,"line":940},[807,5352,2125],{"class":821},[807,5354,1027],{"class":817},[807,5356,2131],{"class":2130},[807,5358,841],{"class":817},[807,5360,5361,5363,5365,5367],{"class":809,"line":948},[807,5362,2138],{"class":821},[807,5364,1027],{"class":817},[807,5366,2143],{"class":821},[807,5368,841],{"class":817},[807,5370,5371,5373,5375,5377],{"class":809,"line":956},[807,5372,2150],{"class":821},[807,5374,1027],{"class":817},[807,5376,2155],{"class":821},[807,5378,841],{"class":817},[807,5380,5381,5383,5385,5387],{"class":809,"line":964},[807,5382,2162],{"class":821},[807,5384,1027],{"class":817},[807,5386,2167],{"class":821},[807,5388,841],{"class":817},[807,5390,5391,5393,5395,5397,5399,5401],{"class":809,"line":972},[807,5392,2174],{"class":821},[807,5394,1027],{"class":817},[807,5396,1138],{"class":886},[807,5398,1141],{"class":817},[807,5400,2183],{"class":821},[807,5402,1147],{"class":817},[807,5404,5405,5407,5409,5411,5413,5415,5417,5419,5421,5423],{"class":809,"line":980},[807,5406,3366],{"class":821},[807,5408,1027],{"class":817},[807,5410,3371],{"class":886},[807,5412,1141],{"class":817},[807,5414,3376],{"class":2130},[807,5416,3379],{"class":2130},[807,5418,3382],{"class":2130},[807,5420,3385],{"class":821},[807,5422,3388],{"class":2130},[807,5424,1147],{"class":817},[807,5426,5427,5429,5431,5433,5435,5437,5439,5441,5443,5445,5447,5449],{"class":809,"line":996},[807,5428,3967],{"class":821},[807,5430,1027],{"class":817},[807,5432,3371],{"class":886},[807,5434,1141],{"class":817},[807,5436,3976],{"class":821},[807,5438,3979],{"class":886},[807,5440,1141],{"class":817},[807,5442,3482],{"class":821},[807,5444,1340],{"class":817},[807,5446,4045],{"class":2130},[807,5448,3991],{"class":821},[807,5450,1147],{"class":817},[807,5452,5453,5455,5457,5459,5461,5463,5465,5467,5469,5471,5473,5475],{"class":809,"line":1001},[807,5454,4026],{"class":821},[807,5456,1027],{"class":817},[807,5458,3371],{"class":886},[807,5460,1141],{"class":817},[807,5462,3976],{"class":821},[807,5464,3979],{"class":886},[807,5466,1141],{"class":817},[807,5468,3482],{"class":821},[807,5470,1340],{"class":817},[807,5472,3988],{"class":2130},[807,5474,3991],{"class":821},[807,5476,1147],{"class":817},[807,5478,5479,5481,5483,5485,5487,5489],{"class":809,"line":3232},[807,5480,3473],{"class":821},[807,5482,1027],{"class":817},[807,5484,1138],{"class":886},[807,5486,1141],{"class":817},[807,5488,4078],{"class":821},[807,5490,1147],{"class":817},[807,5492,5493],{"class":809,"line":3240},[807,5494,1152],{"class":817},[807,5496,5497],{"class":809,"line":3248},[807,5498,870],{"emptyLinePlaceholder":223},[807,5500,5501,5504,5507,5509,5512,5514,5516,5519],{"class":809,"line":3263},[807,5502,5503],{"class":817},"[",[807,5505,5506],{"class":876},"data-theme",[807,5508,883],{"class":817},[807,5510,5511],{"class":817},"\"",[807,5513,5105],{"class":834},[807,5515,5511],{"class":817},[807,5517,5518],{"class":817},"]",[807,5520,904],{"class":817},[807,5522,5523,5525,5527,5529,5531,5533],{"class":809,"line":3278},[807,5524,3473],{"class":821},[807,5526,1027],{"class":817},[807,5528,1138],{"class":886},[807,5530,1141],{"class":817},[807,5532,4094],{"class":821},[807,5534,1147],{"class":817},[807,5536,5537],{"class":809,"line":3292},[807,5538,1152],{"class":817},[807,5540,5541],{"class":809,"line":3306},[807,5542,870],{"emptyLinePlaceholder":223},[807,5544,5545,5547,5551],{"class":809,"line":3320},[807,5546,5135],{"class":817},[807,5548,5550],{"class":5549},"sBMFI","card",[807,5552,904],{"class":817},[807,5554,5555,5558,5560,5562,5564,5566,5568,5570,5572,5574,5576,5578,5580,5583],{"class":809,"line":3333},[807,5556,4545],{"class":5557},"sqsOY",[807,5559,1027],{"class":817},[807,5561,1138],{"class":886},[807,5563,1141],{"class":817},[807,5565,2209],{"class":821},[807,5567,1340],{"class":817},[807,5569,1138],{"class":886},[807,5571,1141],{"class":817},[807,5573,1158],{"class":821},[807,5575,1340],{"class":817},[807,5577,1138],{"class":886},[807,5579,1141],{"class":817},[807,5581,5582],{"class":821},"--border-color",[807,5584,1147],{"class":817},[807,5586,5587],{"class":809,"line":3338},[807,5588,1152],{"class":817},[729,5590,5592],{"id":5591},"using-border-variables","Using Border Variables",[733,5594,5595],{},"Here's how to combine all three border composables to create a comprehensive border system:",[790,5597,5598,6371],{},[793,5599,5600],{"icon":795,"label":290},[797,5601,5603],{"className":799,"code":5602,"filename":801,"language":802,"meta":803,"style":803},"import { styleframe } from 'styleframe';\nimport { useBorderStyleDesignTokens, useBorderWidthDesignTokens, useColorDesignTokens, useBorderColorDesignTokens } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\n\u002F\u002F Setup border styles and widths\nconst { borderStyle, borderStyleDashed } = useBorderStyleDesignTokens(s);\nconst { borderWidth, borderWidthMedium } = useBorderWidthDesignTokens(s);\n\n\u002F\u002F Setup base colors\nconst { colorGray, colorPrimary, colorSuccess, colorWarning, colorError } = useColorDesignTokens(s, {\n    gray: '#d1d5db',\n    primary: '#3b82f6',\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n} as const);\n\n\u002F\u002F Setup border colors\nconst {\n    borderColor,\n    borderColorPrimary,\n    borderColorSuccess,\n    borderColorWarning,\n    borderColorError,\n} = useBorderColorDesignTokens(s, {\n    default: ref(colorGray),\n    primary: ref(colorPrimary),\n    success: ref(colorSuccess),\n    warning: ref(colorWarning),\n    error: ref(colorError),\n} as const);\n\n\u002F\u002F Use border variables in components\nselector('.card', {\n    border: css`${borderWidth} ${borderStyle} ${borderColor}`,\n});\n\nselector('.input', {\n    border: css`${borderWidth} ${borderStyle} ${borderColor}`,\n    '&:focus': {\n        borderColor: ref(borderColorPrimary),\n    },\n});\n\nselector('.alert', {\n    border: css`${borderWidth} ${borderStyle} ${borderColor}`,\n    '&.success': {\n        borderColor: ref(borderColorSuccess),\n        borderLeftWidth: ref(borderWidthMedium),\n    },\n    '&.warning': {\n        borderColor: ref(borderColorWarning),\n        borderLeftWidth: ref(borderWidthMedium),\n    },\n    '&.error': {\n        borderColor: ref(borderColorError),\n        borderLeftWidth: ref(borderWidthMedium),\n    },\n});\n\nexport default s;\n",[697,5604,5605,5625,5657,5661,5675,5699,5703,5708,5732,5756,5760,5765,5802,5816,5830,5844,5860,5874,5886,5890,5895,5901,5907,5913,5919,5926,5932,5946,5958,5970,5982,5995,6007,6019,6023,6028,6044,6072,6080,6084,6100,6128,6140,6153,6157,6165,6169,6186,6214,6226,6238,6252,6256,6270,6284,6297,6302,6315,6328,6341,6346,6355,6360],{"__ignoreMap":803},[807,5606,5607,5609,5611,5613,5615,5617,5619,5621,5623],{"class":809,"line":810},[807,5608,814],{"class":813},[807,5610,818],{"class":817},[807,5612,822],{"class":821},[807,5614,825],{"class":817},[807,5616,828],{"class":813},[807,5618,831],{"class":817},[807,5620,835],{"class":834},[807,5622,838],{"class":817},[807,5624,841],{"class":817},[807,5626,5627,5629,5631,5633,5635,5637,5639,5641,5643,5645,5647,5649,5651,5653,5655],{"class":809,"line":844},[807,5628,814],{"class":813},[807,5630,818],{"class":817},[807,5632,851],{"class":821},[807,5634,1280],{"class":817},[807,5636,2004],{"class":821},[807,5638,1280],{"class":817},[807,5640,3025],{"class":821},[807,5642,1280],{"class":817},[807,5644,3030],{"class":821},[807,5646,825],{"class":817},[807,5648,828],{"class":813},[807,5650,831],{"class":817},[807,5652,860],{"class":834},[807,5654,838],{"class":817},[807,5656,841],{"class":817},[807,5658,5659],{"class":809,"line":867},[807,5660,870],{"emptyLinePlaceholder":223},[807,5662,5663,5665,5667,5669,5671,5673],{"class":809,"line":873},[807,5664,877],{"class":876},[807,5666,880],{"class":821},[807,5668,883],{"class":817},[807,5670,822],{"class":886},[807,5672,889],{"class":821},[807,5674,841],{"class":817},[807,5676,5677,5679,5681,5683,5685,5687,5689,5691,5693,5695,5697],{"class":809,"line":894},[807,5678,877],{"class":876},[807,5680,818],{"class":817},[807,5682,3270],{"class":821},[807,5684,1280],{"class":817},[807,5686,4199],{"class":821},[807,5688,1280],{"class":817},[807,5690,4204],{"class":821},[807,5692,983],{"class":817},[807,5694,986],{"class":817},[807,5696,1010],{"class":821},[807,5698,841],{"class":817},[807,5700,5701],{"class":809,"line":899},[807,5702,870],{"emptyLinePlaceholder":223},[807,5704,5705],{"class":809,"line":907},[807,5706,5707],{"class":1317},"\u002F\u002F Setup border styles and widths\n",[807,5709,5710,5712,5714,5717,5719,5722,5724,5726,5728,5730],{"class":809,"line":916},[807,5711,877],{"class":876},[807,5713,818],{"class":817},[807,5715,5716],{"class":821}," borderStyle",[807,5718,1280],{"class":817},[807,5720,5721],{"class":821}," borderStyleDashed ",[807,5723,983],{"class":817},[807,5725,986],{"class":817},[807,5727,851],{"class":886},[807,5729,991],{"class":821},[807,5731,841],{"class":817},[807,5733,5734,5736,5738,5741,5743,5746,5748,5750,5752,5754],{"class":809,"line":924},[807,5735,877],{"class":876},[807,5737,818],{"class":817},[807,5739,5740],{"class":821}," borderWidth",[807,5742,1280],{"class":817},[807,5744,5745],{"class":821}," borderWidthMedium ",[807,5747,983],{"class":817},[807,5749,986],{"class":817},[807,5751,2004],{"class":886},[807,5753,991],{"class":821},[807,5755,841],{"class":817},[807,5757,5758],{"class":809,"line":932},[807,5759,870],{"emptyLinePlaceholder":223},[807,5761,5762],{"class":809,"line":940},[807,5763,5764],{"class":1317},"\u002F\u002F Setup base colors\n",[807,5766,5767,5769,5771,5773,5775,5777,5779,5781,5783,5786,5788,5790,5792,5794,5796,5798,5800],{"class":809,"line":948},[807,5768,877],{"class":876},[807,5770,818],{"class":817},[807,5772,3095],{"class":821},[807,5774,1280],{"class":817},[807,5776,3100],{"class":821},[807,5778,1280],{"class":817},[807,5780,3105],{"class":821},[807,5782,1280],{"class":817},[807,5784,5785],{"class":821}," colorWarning",[807,5787,1280],{"class":817},[807,5789,3110],{"class":821},[807,5791,983],{"class":817},[807,5793,986],{"class":817},[807,5795,3025],{"class":886},[807,5797,1277],{"class":821},[807,5799,1280],{"class":817},[807,5801,904],{"class":817},[807,5803,5804,5806,5808,5810,5812,5814],{"class":809,"line":956},[807,5805,3127],{"class":1287},[807,5807,1027],{"class":817},[807,5809,831],{"class":817},[807,5811,4307],{"class":834},[807,5813,838],{"class":817},[807,5815,913],{"class":817},[807,5817,5818,5820,5822,5824,5826,5828],{"class":809,"line":964},[807,5819,3143],{"class":1287},[807,5821,1027],{"class":817},[807,5823,831],{"class":817},[807,5825,3150],{"class":834},[807,5827,838],{"class":817},[807,5829,913],{"class":817},[807,5831,5832,5834,5836,5838,5840,5842],{"class":809,"line":972},[807,5833,3159],{"class":1287},[807,5835,1027],{"class":817},[807,5837,831],{"class":817},[807,5839,3166],{"class":834},[807,5841,838],{"class":817},[807,5843,913],{"class":817},[807,5845,5846,5849,5851,5853,5856,5858],{"class":809,"line":980},[807,5847,5848],{"class":1287},"    warning",[807,5850,1027],{"class":817},[807,5852,831],{"class":817},[807,5854,5855],{"class":834},"#f59e0b",[807,5857,838],{"class":817},[807,5859,913],{"class":817},[807,5861,5862,5864,5866,5868,5870,5872],{"class":809,"line":996},[807,5863,3175],{"class":1287},[807,5865,1027],{"class":817},[807,5867,831],{"class":817},[807,5869,3182],{"class":834},[807,5871,838],{"class":817},[807,5873,913],{"class":817},[807,5875,5876,5878,5880,5882,5884],{"class":809,"line":1001},[807,5877,983],{"class":817},[807,5879,3193],{"class":813},[807,5881,3196],{"class":876},[807,5883,1340],{"class":821},[807,5885,841],{"class":817},[807,5887,5888],{"class":809,"line":3232},[807,5889,870],{"emptyLinePlaceholder":223},[807,5891,5892],{"class":809,"line":3240},[807,5893,5894],{"class":1317},"\u002F\u002F Setup border colors\n",[807,5896,5897,5899],{"class":809,"line":3248},[807,5898,877],{"class":876},[807,5900,904],{"class":817},[807,5902,5903,5905],{"class":809,"line":3263},[807,5904,3220],{"class":821},[807,5906,913],{"class":817},[807,5908,5909,5911],{"class":809,"line":3278},[807,5910,3227],{"class":821},[807,5912,913],{"class":817},[807,5914,5915,5917],{"class":809,"line":3292},[807,5916,3235],{"class":821},[807,5918,913],{"class":817},[807,5920,5921,5924],{"class":809,"line":3306},[807,5922,5923],{"class":821},"    borderColorWarning",[807,5925,913],{"class":817},[807,5927,5928,5930],{"class":809,"line":3320},[807,5929,3243],{"class":821},[807,5931,913],{"class":817},[807,5933,5934,5936,5938,5940,5942,5944],{"class":809,"line":3333},[807,5935,983],{"class":817},[807,5937,986],{"class":817},[807,5939,3030],{"class":886},[807,5941,1277],{"class":821},[807,5943,1280],{"class":817},[807,5945,904],{"class":817},[807,5947,5948,5950,5952,5954,5956],{"class":809,"line":3338},[807,5949,1288],{"class":1287},[807,5951,1027],{"class":817},[807,5953,3270],{"class":886},[807,5955,3273],{"class":821},[807,5957,913],{"class":817},[807,5959,5960,5962,5964,5966,5968],{"class":809,"line":4471},[807,5961,3143],{"class":1287},[807,5963,1027],{"class":817},[807,5965,3270],{"class":886},[807,5967,3287],{"class":821},[807,5969,913],{"class":817},[807,5971,5972,5974,5976,5978,5980],{"class":809,"line":4485},[807,5973,3159],{"class":1287},[807,5975,1027],{"class":817},[807,5977,3270],{"class":886},[807,5979,3301],{"class":821},[807,5981,913],{"class":817},[807,5983,5984,5986,5988,5990,5993],{"class":809,"line":4499},[807,5985,5848],{"class":1287},[807,5987,1027],{"class":817},[807,5989,3270],{"class":886},[807,5991,5992],{"class":821},"(colorWarning)",[807,5994,913],{"class":817},[807,5996,5997,5999,6001,6003,6005],{"class":809,"line":4512},[807,5998,3175],{"class":1287},[807,6000,1027],{"class":817},[807,6002,3270],{"class":886},[807,6004,3315],{"class":821},[807,6006,913],{"class":817},[807,6008,6009,6011,6013,6015,6017],{"class":809,"line":4517},[807,6010,983],{"class":817},[807,6012,3193],{"class":813},[807,6014,3196],{"class":876},[807,6016,1340],{"class":821},[807,6018,841],{"class":817},[807,6020,6021],{"class":809,"line":4523},[807,6022,870],{"emptyLinePlaceholder":223},[807,6024,6025],{"class":809,"line":4542},[807,6026,6027],{"class":1317},"\u002F\u002F Use border variables in components\n",[807,6029,6030,6032,6034,6036,6038,6040,6042],{"class":809,"line":4576},[807,6031,4526],{"class":886},[807,6033,1141],{"class":821},[807,6035,838],{"class":817},[807,6037,5183],{"class":834},[807,6039,838],{"class":817},[807,6041,1280],{"class":817},[807,6043,904],{"class":817},[807,6045,6046,6048,6050,6052,6054,6056,6058,6060,6062,6064,6066,6068,6070],{"class":809,"line":4593},[807,6047,4545],{"class":1287},[807,6049,1027],{"class":817},[807,6051,4550],{"class":886},[807,6053,4553],{"class":817},[807,6055,720],{"class":821},[807,6057,983],{"class":817},[807,6059,4560],{"class":817},[807,6061,723],{"class":821},[807,6063,983],{"class":817},[807,6065,4560],{"class":817},[807,6067,726],{"class":821},[807,6069,4571],{"class":817},[807,6071,913],{"class":817},[807,6073,6074,6076,6078],{"class":809,"line":4608},[807,6075,983],{"class":817},[807,6077,1340],{"class":821},[807,6079,841],{"class":817},[807,6081,6082],{"class":809,"line":4623},[807,6083,870],{"emptyLinePlaceholder":223},[807,6085,6086,6088,6090,6092,6094,6096,6098],{"class":809,"line":4629},[807,6087,4526],{"class":886},[807,6089,1141],{"class":821},[807,6091,838],{"class":817},[807,6093,4533],{"class":834},[807,6095,838],{"class":817},[807,6097,1280],{"class":817},[807,6099,904],{"class":817},[807,6101,6102,6104,6106,6108,6110,6112,6114,6116,6118,6120,6122,6124,6126],{"class":809,"line":4643},[807,6103,4545],{"class":1287},[807,6105,1027],{"class":817},[807,6107,4550],{"class":886},[807,6109,4553],{"class":817},[807,6111,720],{"class":821},[807,6113,983],{"class":817},[807,6115,4560],{"class":817},[807,6117,723],{"class":821},[807,6119,983],{"class":817},[807,6121,4560],{"class":817},[807,6123,726],{"class":821},[807,6125,4571],{"class":817},[807,6127,913],{"class":817},[807,6129,6130,6132,6134,6136,6138],{"class":809,"line":4657},[807,6131,4596],{"class":817},[807,6133,4634],{"class":1287},[807,6135,838],{"class":817},[807,6137,1027],{"class":817},[807,6139,904],{"class":817},[807,6141,6142,6144,6146,6148,6151],{"class":809,"line":4673},[807,6143,4611],{"class":1287},[807,6145,1027],{"class":817},[807,6147,3270],{"class":886},[807,6149,6150],{"class":821},"(borderColorPrimary)",[807,6152,913],{"class":817},[807,6154,6155],{"class":809,"line":4678},[807,6156,4626],{"class":817},[807,6158,6159,6161,6163],{"class":809,"line":4692},[807,6160,983],{"class":817},[807,6162,1340],{"class":821},[807,6164,841],{"class":817},[807,6166,6167],{"class":809,"line":4706},[807,6168,870],{"emptyLinePlaceholder":223},[807,6170,6171,6173,6175,6177,6180,6182,6184],{"class":809,"line":4711},[807,6172,4526],{"class":886},[807,6174,1141],{"class":821},[807,6176,838],{"class":817},[807,6178,6179],{"class":834},".alert",[807,6181,838],{"class":817},[807,6183,1280],{"class":817},[807,6185,904],{"class":817},[807,6187,6188,6190,6192,6194,6196,6198,6200,6202,6204,6206,6208,6210,6212],{"class":809,"line":4725},[807,6189,4545],{"class":1287},[807,6191,1027],{"class":817},[807,6193,4550],{"class":886},[807,6195,4553],{"class":817},[807,6197,720],{"class":821},[807,6199,983],{"class":817},[807,6201,4560],{"class":817},[807,6203,723],{"class":821},[807,6205,983],{"class":817},[807,6207,4560],{"class":817},[807,6209,726],{"class":821},[807,6211,4571],{"class":817},[807,6213,913],{"class":817},[807,6215,6216,6218,6220,6222,6224],{"class":809,"line":4739},[807,6217,4596],{"class":817},[807,6219,4716],{"class":1287},[807,6221,838],{"class":817},[807,6223,1027],{"class":817},[807,6225,904],{"class":817},[807,6227,6228,6230,6232,6234,6236],{"class":809,"line":4744},[807,6229,4611],{"class":1287},[807,6231,1027],{"class":817},[807,6233,3270],{"class":886},[807,6235,4734],{"class":821},[807,6237,913],{"class":817},[807,6239,6240,6243,6245,6247,6250],{"class":809,"line":4753},[807,6241,6242],{"class":1287},"        borderLeftWidth",[807,6244,1027],{"class":817},[807,6246,3270],{"class":886},[807,6248,6249],{"class":821},"(borderWidthMedium)",[807,6251,913],{"class":817},[807,6253,6254],{"class":809,"line":4758},[807,6255,4626],{"class":817},[807,6257,6259,6261,6264,6266,6268],{"class":809,"line":6258},53,[807,6260,4596],{"class":817},[807,6262,6263],{"class":1287},"&.warning",[807,6265,838],{"class":817},[807,6267,1027],{"class":817},[807,6269,904],{"class":817},[807,6271,6273,6275,6277,6279,6282],{"class":809,"line":6272},54,[807,6274,4611],{"class":1287},[807,6276,1027],{"class":817},[807,6278,3270],{"class":886},[807,6280,6281],{"class":821},"(borderColorWarning)",[807,6283,913],{"class":817},[807,6285,6287,6289,6291,6293,6295],{"class":809,"line":6286},55,[807,6288,6242],{"class":1287},[807,6290,1027],{"class":817},[807,6292,3270],{"class":886},[807,6294,6249],{"class":821},[807,6296,913],{"class":817},[807,6298,6300],{"class":809,"line":6299},56,[807,6301,4626],{"class":817},[807,6303,6305,6307,6309,6311,6313],{"class":809,"line":6304},57,[807,6306,4596],{"class":817},[807,6308,4683],{"class":1287},[807,6310,838],{"class":817},[807,6312,1027],{"class":817},[807,6314,904],{"class":817},[807,6316,6318,6320,6322,6324,6326],{"class":809,"line":6317},58,[807,6319,4611],{"class":1287},[807,6321,1027],{"class":817},[807,6323,3270],{"class":886},[807,6325,4701],{"class":821},[807,6327,913],{"class":817},[807,6329,6331,6333,6335,6337,6339],{"class":809,"line":6330},59,[807,6332,6242],{"class":1287},[807,6334,1027],{"class":817},[807,6336,3270],{"class":886},[807,6338,6249],{"class":821},[807,6340,913],{"class":817},[807,6342,6344],{"class":809,"line":6343},60,[807,6345,4626],{"class":817},[807,6347,6349,6351,6353],{"class":809,"line":6348},61,[807,6350,983],{"class":817},[807,6352,1340],{"class":821},[807,6354,841],{"class":817},[807,6356,6358],{"class":809,"line":6357},62,[807,6359,870],{"emptyLinePlaceholder":223},[807,6361,6363,6365,6367,6369],{"class":809,"line":6362},63,[807,6364,1004],{"class":813},[807,6366,1007],{"class":813},[807,6368,1010],{"class":821},[807,6370,841],{"class":817},[793,6372,6373],{"icon":154,"label":326},[797,6374,6376],{"className":1017,"code":6375,"filename":1019,"language":1020,"meta":803,"style":803},":root {\n    --border-style--none: none;\n    --border-style--solid: solid;\n    --border-style--dashed: dashed;\n    --border-style--dotted: dotted;\n    --border-style--double: double;\n    --border-style--groove: groove;\n    --border-style--inset: inset;\n    --border-style--outset: outset;\n    --border-style: var(--border-style--solid);\n    --border-width--none: 0;\n    --border-width--thin: thin;\n    --border-width--medium: medium;\n    --border-width--thick: thick;\n    --border-width: var(--border-width--thin);\n    --color--gray: oklch(0.8485 0.0061 264.07 \u002F 1);\n    --color--primary: oklch(0.6109 0.1903 263.71 \u002F 1);\n    --color--success: oklch(0.7051 0.1654 165.47 \u002F 1);\n    --color--warning: oklch(0.7444 0.1609 60.67 \u002F 1);\n    --color--error: oklch(0.6278 0.2158 27.33 \u002F 1);\n    --border-color: var(--color--gray);\n    --border-color--primary: var(--color--primary);\n    --border-color--success: var(--color--success);\n    --border-color--warning: var(--color--warning);\n    --border-color--error: var(--color--error);\n}\n\n.card {\n    border: var(--border-width) var(--border-style) var(--border-color);\n}\n\n.input {\n    border: var(--border-width) var(--border-style) var(--border-color);\n    \n    &:focus {\n        border-color: var(--border-color--primary);\n    }\n}\n\n.alert {\n    border: var(--border-width) var(--border-style) var(--border-color);\n\n    &.success {\n        border-color: var(--border-color--success);\n        border-left-width: var(--border-width--medium);\n    }\n    \n    &.warning {\n        border-color: var(--border-color--warning);\n        border-left-width: var(--border-width--medium);\n    }\n    \n    &.error {\n        border-color: var(--border-color--error);\n        border-left-width: var(--border-width--medium);\n    }\n}\n",[697,6377,6378,6386,6396,6406,6416,6426,6436,6446,6456,6466,6480,6490,6500,6510,6520,6534,6559,6581,6603,6629,6651,6665,6679,6693,6709,6723,6727,6731,6739,6769,6773,6777,6786,6816,6821,6831,6845,6850,6854,6858,6867,6897,6901,6906,6922,6937,6941,6945,6956,6971,6985,6989,6993,7004,7019,7033,7037],{"__ignoreMap":803},[807,6379,6380,6382,6384],{"class":809,"line":810},[807,6381,1027],{"class":817},[807,6383,1030],{"class":876},[807,6385,904],{"class":817},[807,6387,6388,6390,6392,6394],{"class":809,"line":844},[807,6389,1037],{"class":821},[807,6391,1027],{"class":817},[807,6393,1042],{"class":821},[807,6395,841],{"class":817},[807,6397,6398,6400,6402,6404],{"class":809,"line":867},[807,6399,1049],{"class":821},[807,6401,1027],{"class":817},[807,6403,1054],{"class":821},[807,6405,841],{"class":817},[807,6407,6408,6410,6412,6414],{"class":809,"line":873},[807,6409,1061],{"class":821},[807,6411,1027],{"class":817},[807,6413,1066],{"class":821},[807,6415,841],{"class":817},[807,6417,6418,6420,6422,6424],{"class":809,"line":894},[807,6419,1073],{"class":821},[807,6421,1027],{"class":817},[807,6423,1078],{"class":821},[807,6425,841],{"class":817},[807,6427,6428,6430,6432,6434],{"class":809,"line":899},[807,6429,1085],{"class":821},[807,6431,1027],{"class":817},[807,6433,1090],{"class":821},[807,6435,841],{"class":817},[807,6437,6438,6440,6442,6444],{"class":809,"line":907},[807,6439,1097],{"class":821},[807,6441,1027],{"class":817},[807,6443,1102],{"class":821},[807,6445,841],{"class":817},[807,6447,6448,6450,6452,6454],{"class":809,"line":916},[807,6449,1109],{"class":821},[807,6451,1027],{"class":817},[807,6453,1114],{"class":821},[807,6455,841],{"class":817},[807,6457,6458,6460,6462,6464],{"class":809,"line":924},[807,6459,1121],{"class":821},[807,6461,1027],{"class":817},[807,6463,1126],{"class":821},[807,6465,841],{"class":817},[807,6467,6468,6470,6472,6474,6476,6478],{"class":809,"line":932},[807,6469,1133],{"class":821},[807,6471,1027],{"class":817},[807,6473,1138],{"class":886},[807,6475,1141],{"class":817},[807,6477,1144],{"class":821},[807,6479,1147],{"class":817},[807,6481,6482,6484,6486,6488],{"class":809,"line":940},[807,6483,2125],{"class":821},[807,6485,1027],{"class":817},[807,6487,2131],{"class":2130},[807,6489,841],{"class":817},[807,6491,6492,6494,6496,6498],{"class":809,"line":948},[807,6493,2138],{"class":821},[807,6495,1027],{"class":817},[807,6497,2143],{"class":821},[807,6499,841],{"class":817},[807,6501,6502,6504,6506,6508],{"class":809,"line":956},[807,6503,2150],{"class":821},[807,6505,1027],{"class":817},[807,6507,2155],{"class":821},[807,6509,841],{"class":817},[807,6511,6512,6514,6516,6518],{"class":809,"line":964},[807,6513,2162],{"class":821},[807,6515,1027],{"class":817},[807,6517,2167],{"class":821},[807,6519,841],{"class":817},[807,6521,6522,6524,6526,6528,6530,6532],{"class":809,"line":972},[807,6523,2174],{"class":821},[807,6525,1027],{"class":817},[807,6527,1138],{"class":886},[807,6529,1141],{"class":817},[807,6531,2183],{"class":821},[807,6533,1147],{"class":817},[807,6535,6536,6538,6540,6542,6544,6547,6550,6553,6555,6557],{"class":809,"line":980},[807,6537,3366],{"class":821},[807,6539,1027],{"class":817},[807,6541,3371],{"class":886},[807,6543,1141],{"class":817},[807,6545,6546],{"class":2130},"0.8485",[807,6548,6549],{"class":2130}," 0.0061",[807,6551,6552],{"class":2130}," 264.07",[807,6554,3385],{"class":821},[807,6556,3388],{"class":2130},[807,6558,1147],{"class":817},[807,6560,6561,6563,6565,6567,6569,6571,6573,6575,6577,6579],{"class":809,"line":996},[807,6562,3395],{"class":821},[807,6564,1027],{"class":817},[807,6566,3371],{"class":886},[807,6568,1141],{"class":817},[807,6570,3404],{"class":2130},[807,6572,3407],{"class":2130},[807,6574,3410],{"class":2130},[807,6576,3385],{"class":821},[807,6578,3388],{"class":2130},[807,6580,1147],{"class":817},[807,6582,6583,6585,6587,6589,6591,6593,6595,6597,6599,6601],{"class":809,"line":1001},[807,6584,3421],{"class":821},[807,6586,1027],{"class":817},[807,6588,3371],{"class":886},[807,6590,1141],{"class":817},[807,6592,3430],{"class":2130},[807,6594,3433],{"class":2130},[807,6596,3436],{"class":2130},[807,6598,3385],{"class":821},[807,6600,3388],{"class":2130},[807,6602,1147],{"class":817},[807,6604,6605,6608,6610,6612,6614,6617,6620,6623,6625,6627],{"class":809,"line":3232},[807,6606,6607],{"class":821},"    --color--warning",[807,6609,1027],{"class":817},[807,6611,3371],{"class":886},[807,6613,1141],{"class":817},[807,6615,6616],{"class":2130},"0.7444",[807,6618,6619],{"class":2130}," 0.1609",[807,6621,6622],{"class":2130}," 60.67",[807,6624,3385],{"class":821},[807,6626,3388],{"class":2130},[807,6628,1147],{"class":817},[807,6630,6631,6633,6635,6637,6639,6641,6643,6645,6647,6649],{"class":809,"line":3240},[807,6632,3447],{"class":821},[807,6634,1027],{"class":817},[807,6636,3371],{"class":886},[807,6638,1141],{"class":817},[807,6640,3456],{"class":2130},[807,6642,3459],{"class":2130},[807,6644,3462],{"class":2130},[807,6646,3385],{"class":821},[807,6648,3388],{"class":2130},[807,6650,1147],{"class":817},[807,6652,6653,6655,6657,6659,6661,6663],{"class":809,"line":3248},[807,6654,3473],{"class":821},[807,6656,1027],{"class":817},[807,6658,1138],{"class":886},[807,6660,1141],{"class":817},[807,6662,3482],{"class":821},[807,6664,1147],{"class":817},[807,6666,6667,6669,6671,6673,6675,6677],{"class":809,"line":3263},[807,6668,3489],{"class":821},[807,6670,1027],{"class":817},[807,6672,1138],{"class":886},[807,6674,1141],{"class":817},[807,6676,3498],{"class":821},[807,6678,1147],{"class":817},[807,6680,6681,6683,6685,6687,6689,6691],{"class":809,"line":3278},[807,6682,3505],{"class":821},[807,6684,1027],{"class":817},[807,6686,1138],{"class":886},[807,6688,1141],{"class":817},[807,6690,3514],{"class":821},[807,6692,1147],{"class":817},[807,6694,6695,6698,6700,6702,6704,6707],{"class":809,"line":3292},[807,6696,6697],{"class":821},"    --border-color--warning",[807,6699,1027],{"class":817},[807,6701,1138],{"class":886},[807,6703,1141],{"class":817},[807,6705,6706],{"class":821},"--color--warning",[807,6708,1147],{"class":817},[807,6710,6711,6713,6715,6717,6719,6721],{"class":809,"line":3306},[807,6712,3521],{"class":821},[807,6714,1027],{"class":817},[807,6716,1138],{"class":886},[807,6718,1141],{"class":817},[807,6720,3530],{"class":821},[807,6722,1147],{"class":817},[807,6724,6725],{"class":809,"line":3320},[807,6726,1152],{"class":817},[807,6728,6729],{"class":809,"line":3333},[807,6730,870],{"emptyLinePlaceholder":223},[807,6732,6733,6735,6737],{"class":809,"line":3338},[807,6734,5135],{"class":817},[807,6736,5550],{"class":5549},[807,6738,904],{"class":817},[807,6740,6741,6743,6745,6747,6749,6751,6753,6755,6757,6759,6761,6763,6765,6767],{"class":809,"line":4471},[807,6742,4545],{"class":5557},[807,6744,1027],{"class":817},[807,6746,1138],{"class":886},[807,6748,1141],{"class":817},[807,6750,2209],{"class":821},[807,6752,1340],{"class":817},[807,6754,1138],{"class":886},[807,6756,1141],{"class":817},[807,6758,1158],{"class":821},[807,6760,1340],{"class":817},[807,6762,1138],{"class":886},[807,6764,1141],{"class":817},[807,6766,5582],{"class":821},[807,6768,1147],{"class":817},[807,6770,6771],{"class":809,"line":4485},[807,6772,1152],{"class":817},[807,6774,6775],{"class":809,"line":4499},[807,6776,870],{"emptyLinePlaceholder":223},[807,6778,6779,6781,6784],{"class":809,"line":4512},[807,6780,5135],{"class":817},[807,6782,6783],{"class":5549},"input",[807,6785,904],{"class":817},[807,6787,6788,6790,6792,6794,6796,6798,6800,6802,6804,6806,6808,6810,6812,6814],{"class":809,"line":4517},[807,6789,4545],{"class":5557},[807,6791,1027],{"class":817},[807,6793,1138],{"class":886},[807,6795,1141],{"class":817},[807,6797,2209],{"class":821},[807,6799,1340],{"class":817},[807,6801,1138],{"class":886},[807,6803,1141],{"class":817},[807,6805,1158],{"class":821},[807,6807,1340],{"class":817},[807,6809,1138],{"class":886},[807,6811,1141],{"class":817},[807,6813,5582],{"class":821},[807,6815,1147],{"class":817},[807,6817,6818],{"class":809,"line":4523},[807,6819,6820],{"class":821},"    \n",[807,6822,6823,6826,6828],{"class":809,"line":4542},[807,6824,6825],{"class":821},"    &",[807,6827,1027],{"class":817},[807,6829,6830],{"class":821},"focus {\n",[807,6832,6833,6836,6838,6840,6843],{"class":809,"line":4576},[807,6834,6835],{"class":821},"        border-color: ",[807,6837,3979],{"class":886},[807,6839,1141],{"class":817},[807,6841,6842],{"class":821},"--border-color--primary",[807,6844,1147],{"class":817},[807,6846,6847],{"class":809,"line":4593},[807,6848,6849],{"class":817},"    }\n",[807,6851,6852],{"class":809,"line":4608},[807,6853,1152],{"class":821},[807,6855,6856],{"class":809,"line":4623},[807,6857,870],{"emptyLinePlaceholder":223},[807,6859,6860,6862,6865],{"class":809,"line":4629},[807,6861,5135],{"class":817},[807,6863,6864],{"class":5549},"alert",[807,6866,904],{"class":817},[807,6868,6869,6871,6873,6875,6877,6879,6881,6883,6885,6887,6889,6891,6893,6895],{"class":809,"line":4643},[807,6870,4545],{"class":5557},[807,6872,1027],{"class":817},[807,6874,1138],{"class":886},[807,6876,1141],{"class":817},[807,6878,2209],{"class":821},[807,6880,1340],{"class":817},[807,6882,1138],{"class":886},[807,6884,1141],{"class":817},[807,6886,1158],{"class":821},[807,6888,1340],{"class":817},[807,6890,1138],{"class":886},[807,6892,1141],{"class":817},[807,6894,5582],{"class":821},[807,6896,1147],{"class":817},[807,6898,6899],{"class":809,"line":4657},[807,6900,870],{"emptyLinePlaceholder":223},[807,6902,6903],{"class":809,"line":4673},[807,6904,6905],{"class":821},"    &.success {\n",[807,6907,6908,6911,6913,6915,6917,6920],{"class":809,"line":4678},[807,6909,6910],{"class":5557},"        border-color",[807,6912,1027],{"class":817},[807,6914,1138],{"class":886},[807,6916,1141],{"class":817},[807,6918,6919],{"class":821},"--border-color--success",[807,6921,1147],{"class":817},[807,6923,6924,6927,6929,6931,6933,6935],{"class":809,"line":4692},[807,6925,6926],{"class":5557},"        border-left-width",[807,6928,1027],{"class":817},[807,6930,1138],{"class":886},[807,6932,1141],{"class":817},[807,6934,2949],{"class":821},[807,6936,1147],{"class":817},[807,6938,6939],{"class":809,"line":4706},[807,6940,6849],{"class":817},[807,6942,6943],{"class":809,"line":4711},[807,6944,6820],{"class":821},[807,6946,6947,6949,6951,6954],{"class":809,"line":4725},[807,6948,6825],{"class":821},[807,6950,5135],{"class":817},[807,6952,6953],{"class":5549},"warning",[807,6955,904],{"class":817},[807,6957,6958,6960,6962,6964,6966,6969],{"class":809,"line":4739},[807,6959,6910],{"class":5557},[807,6961,1027],{"class":817},[807,6963,1138],{"class":886},[807,6965,1141],{"class":817},[807,6967,6968],{"class":821},"--border-color--warning",[807,6970,1147],{"class":817},[807,6972,6973,6975,6977,6979,6981,6983],{"class":809,"line":4744},[807,6974,6926],{"class":5557},[807,6976,1027],{"class":817},[807,6978,1138],{"class":886},[807,6980,1141],{"class":817},[807,6982,2949],{"class":821},[807,6984,1147],{"class":817},[807,6986,6987],{"class":809,"line":4753},[807,6988,6849],{"class":817},[807,6990,6991],{"class":809,"line":4758},[807,6992,6820],{"class":821},[807,6994,6995,6997,6999,7002],{"class":809,"line":6258},[807,6996,6825],{"class":821},[807,6998,5135],{"class":817},[807,7000,7001],{"class":5549},"error",[807,7003,904],{"class":817},[807,7005,7006,7008,7010,7012,7014,7017],{"class":809,"line":6272},[807,7007,6910],{"class":5557},[807,7009,1027],{"class":817},[807,7011,1138],{"class":886},[807,7013,1141],{"class":817},[807,7015,7016],{"class":821},"--border-color--error",[807,7018,1147],{"class":817},[807,7020,7021,7023,7025,7027,7029,7031],{"class":809,"line":6286},[807,7022,6926],{"class":5557},[807,7024,1027],{"class":817},[807,7026,1138],{"class":886},[807,7028,1141],{"class":817},[807,7030,2949],{"class":821},[807,7032,1147],{"class":817},[807,7034,7035],{"class":809,"line":6299},[807,7036,6849],{"class":817},[807,7038,7039],{"class":809,"line":6304},[807,7040,1152],{"class":821},[729,7042,7044],{"id":7043},"best-practices","Best Practices",[744,7046,7047,7056,7069,7079,7085,7097,7103],{},[747,7048,7049,7055],{},[692,7050,7051,7052,7054],{},"Use ",[697,7053,2973],{}," for semantic separation",": Create border-specific color variables instead of directly referencing color variables. This gives you flexibility to adjust border colors independently.",[747,7057,7058,7061,7062,700,7064,704,7066,7068],{},[692,7059,7060],{},"Leverage default variables",": Use the ",[697,7063,1158],{},[697,7065,2209],{},[697,7067,5582],{}," variables for consistency across your application.",[747,7070,7071,7074,7075,7078],{},[692,7072,7073],{},"Create complete border variables",": Combine width, style, and color into single variables (like ",[697,7076,7077],{},"--border",") for frequently used border combinations.",[747,7080,7081,7084],{},[692,7082,7083],{},"Consider transparency",": Use alpha channel adjustments on border colors for subtle borders that work on any background.",[747,7086,7087,7090,7091,7093,7094,7096],{},[692,7088,7089],{},"Keep it simple",": Most applications only need 2-3 border widths and primarily use ",[697,7092,1162],{}," and ",[697,7095,1550],{}," styles.",[747,7098,7099,7102],{},[692,7100,7101],{},"Test accessibility",": Ensure borders provide sufficient contrast and aren't the only indicator of interactive states.",[747,7104,7105,7108,7109,7111,7112,7115],{},[692,7106,7107],{},"Plan for themes",": Use ",[697,7110,2973],{}," together with ",[697,7113,7114],{},"theme()"," to create theme-aware border colors that automatically adapt to light\u002Fdark modes.",[689,7117,7118,7120,7121,7123,7124,7127],{},[692,7119,2217],{}," The ",[697,7122,2973],{}," composable accepts any value, not just color references. You can pass direct color values, but using references from ",[697,7125,7126],{},"useColorDesignTokens()"," is recommended for consistency and maintainability.",[729,7129,7131],{"id":7130},"faq","FAQ",[7133,7134,7135,7143,7156,7173,7189,7193,7208],"accordion",{},[7136,7137,7140,7142],"accordion-item",{"icon":7138,"label":7139},"i-lucide-circle-help","Why use useBorderColorDesignTokens instead of directly referencing colors?",[697,7141,2973],{}," creates semantic separation between general colors and border colors. This allows you to adjust border colors independently (e.g., making them lighter, more desaturated, or transparent) without affecting your base color palette. It also makes your intent explicit when reading the code.",[7136,7144,7146,7147,7149,7150,7152,7153,7155],{"icon":7138,"label":7145},"When should I use border-style keywords vs custom values?","The composable provides all standard CSS border styles, which cover most use cases. Stick with these unless you have a specific design requirement. The most commonly used styles are ",[697,7148,1162],{}," (for most borders), ",[697,7151,1550],{}," (for secondary or inactive states), and ",[697,7154,2195],{}," (to remove borders).",[7136,7157,7159,7160,700,7162,700,7164,7166,7167,7169,7170,7172],{"icon":7138,"label":7158},"Should I use the CSS width keywords or pixel values?","CSS keywords (",[697,7161,2199],{},[697,7163,2202],{},[697,7165,2205],{},") are good defaults and are consistently rendered across browsers. Use pixel values when you need exact control, especially for hairline borders (",[697,7168,2384],{}," or ",[697,7171,2368],{},") or when your design system requires specific measurements.",[7136,7174,7176,7177,7180,7181,7184,7185,7188],{"icon":7138,"label":7175},"How do I create conditional borders?","You can create conditional borders by setting individual border properties. For example, use ",[697,7178,7179],{},"borderTop"," for top-only borders, or use ",[697,7182,7183],{},"border: none"," as a base and then override specific sides. You can also use the ",[697,7186,7187],{},"--border-width--none"," variable to effectively hide borders without changing the style or color.",[7136,7190,7192],{"icon":7138,"label":7191},"Can I animate border changes?","Yes! Border color and border width can be animated with CSS transitions. Border style changes are discrete and can't be smoothly animated. For smooth border animations, keep the style constant and animate the color or width properties.",[7136,7194,7196,7197,7199,7200,7203,7204,7207],{"icon":7138,"label":7195},"What's the best way to create focus indicators?","For accessibility, focus indicators should be clearly visible. Use a thicker border width (like ",[697,7198,2949],{},") combined with a high-contrast color. Consider using ",[697,7201,7202],{},"outline"," instead of ",[697,7205,7206],{},"border"," for focus states to avoid layout shifts, or ensure your components have space allocated for the border change.",[7136,7209,7211,7212,7214,7215,700,7218,704,7221,7224,7225,5135],{"icon":7138,"label":7210},"Can I use color manipulation with useBorderColorDesignTokens?","Yes! You can combine ",[697,7213,2973],{}," with composables like ",[697,7216,7217],{},"useColorLevelDesignTokens()",[697,7219,7220],{},"useColorShadeDesignTokens()",[697,7222,7223],{},"useColorTintDesignTokens()"," to create sophisticated border color systems with automatic variants. Just pass the manipulated color references to ",[697,7226,2973],{},[7228,7229,7230],"style",{},"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--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}",{"title":803,"searchDepth":844,"depth":844,"links":7232},[7233,7234,7235,7240,7245,7250,7251,7252],{"id":731,"depth":844,"text":78},{"id":738,"depth":844,"text":739},{"id":779,"depth":844,"text":703,"children":7236},[7237,7238,7239],{"id":1167,"depth":867,"text":1168},{"id":1412,"depth":867,"text":1413},{"id":1682,"depth":867,"text":1683},{"id":1958,"depth":844,"text":699,"children":7241},[7242,7243,7244],{"id":2237,"depth":867,"text":2238},{"id":2509,"depth":867,"text":2510},{"id":2735,"depth":867,"text":2736},{"id":2966,"depth":844,"text":707,"children":7246},[7247,7248,7249],{"id":3567,"depth":867,"text":3568},{"id":4103,"depth":867,"text":4104},{"id":4769,"depth":867,"text":4770},{"id":5591,"depth":844,"text":5592},{"id":7043,"depth":844,"text":7044},{"id":7130,"depth":844,"text":7131},"Create and manage border design tokens with CSS variables for consistent border styles, widths, and colors across your application.","md",null,{},{"title":180,"icon":183},{"title":684,"description":7253},"P-M6FuLWaaebnnYmbUHJsrDYoM7CDTBzM5TsgmGEobo",[7261,7263],{"title":175,"path":176,"stem":177,"description":7262,"icon":178,"children":-1},"Create and manage border radius design tokens with CSS variables for consistent rounded corners and curved edges across your application.",{"title":185,"path":186,"stem":187,"description":7264,"icon":188,"children":-1},"Create and manage box shadow design tokens with CSS variables for consistent elevation and depth effects across your application.",1781596321839]