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