[{"data":1,"prerenderedAt":3227},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-composables-badge":407,"-docs-theme-components-composables-badge-surround":3222},{"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":234,"body":409,"description":3216,"extension":977,"links":3217,"meta":3218,"navigation":206,"path":235,"seo":3219,"sitemap":3220,"stem":236,"__hash__":3221},"docs_theme/docs/theme/components/02.composables/01.badge.md",{"type":410,"value":411,"toc":3189},"minimark",[412,416,434,441,445,448,482,486,1584,1587,1610,1613,1618,1621,1772,1779,1783,1791,1794,1797,1800,1803,1806,1809,1812,1815,1818,1821,1829,1832,1836,1845,1848,1852,1855,1950,1953,1968,2101,2117,2135,2139,2143,2148,2343,2347,2354,2531,2538,2541,2547,2550,2555,2676,2681,2770,2775,2779,2838,2842,3185],[413,414,64],"h2",{"id":415},"overview",[417,418,419,420,423,424,428,429,433],"p",{},"The ",[421,422,234],"strong",{}," is a compact UI element used for status indicators, counts, labels, and categorization. The ",[425,426,427],"code",{},"useBadgeRecipe()"," composable creates a fully configured ",[430,431,432],"a",{"href":118},"recipe"," with color, variant, and size options — plus compound variants that handle the color-variant combinations automatically.",[417,435,436,437,440],{},"The Badge recipe integrates directly with the default ",[430,438,439],{"href":157},"design tokens preset"," and generates type-safe utility classes at build time with zero runtime CSS.",[413,442,444],{"id":443},"why-use-the-badge-recipe","Why use the Badge recipe?",[417,446,447],{},"The Badge recipe helps you:",[449,450,451,458,464,470,476],"ul",{},[452,453,454,457],"li",{},[421,455,456],{},"Ship faster with sensible defaults",": Get 9 colors, 4 visual styles, and 5 sizes out of the box with a single composable call.",[452,459,460,463],{},[421,461,462],{},"Maintain consistency",": Compound variants ensure every color-variant combination follows the same design rules.",[452,465,466,469],{},[421,467,468],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[452,471,472,475],{},[421,473,474],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, or size values at compile time.",[452,477,478,481],{},[421,479,480],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[413,483,485],{"id":484},"usage","Usage",[487,488,490,495,502,750,754,761,1575,1579],"steps",{"level":489},"4",[491,492,494],"h4",{"id":493},"register-the-recipe","Register the recipe",[417,496,497,498,501],{},"Add the Badge recipe to a local Styleframe instance. The global ",[425,499,500],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipe itself:",[503,504,506,642],"code-tree",{"default-value":505},"src/components/badge.styleframe.ts",[507,508,513],"pre",{"className":509,"code":510,"filename":505,"language":511,"meta":512,"style":512},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport { useBadgeRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst badge = useBadgeRecipe(s);\n\nexport default s;\n","ts","",[425,514,515,551,574,580,601,606,623,628],{"__ignoreMap":512},[516,517,520,524,528,532,535,538,541,545,548],"span",{"class":518,"line":519},"line",1,[516,521,523],{"class":522},"s7zQu","import",[516,525,527],{"class":526},"sMK4o"," {",[516,529,531],{"class":530},"sTEyZ"," styleframe",[516,533,534],{"class":526}," }",[516,536,537],{"class":522}," from",[516,539,540],{"class":526}," '",[516,542,544],{"class":543},"sfazB","virtual:styleframe",[516,546,547],{"class":526},"'",[516,549,550],{"class":526},";\n",[516,552,554,556,558,561,563,565,567,570,572],{"class":518,"line":553},2,[516,555,523],{"class":522},[516,557,527],{"class":526},[516,559,560],{"class":530}," useBadgeRecipe",[516,562,534],{"class":526},[516,564,537],{"class":522},[516,566,540],{"class":526},[516,568,569],{"class":543},"@styleframe/theme",[516,571,547],{"class":526},[516,573,550],{"class":526},[516,575,577],{"class":518,"line":576},3,[516,578,579],{"emptyLinePlaceholder":206},"\n",[516,581,583,587,590,593,596,599],{"class":518,"line":582},4,[516,584,586],{"class":585},"spNyl","const",[516,588,589],{"class":530}," s ",[516,591,592],{"class":526},"=",[516,594,531],{"class":595},"s2Zo4",[516,597,598],{"class":530},"()",[516,600,550],{"class":526},[516,602,604],{"class":518,"line":603},5,[516,605,579],{"emptyLinePlaceholder":206},[516,607,609,611,614,616,618,621],{"class":518,"line":608},6,[516,610,586],{"class":585},[516,612,613],{"class":530}," badge ",[516,615,592],{"class":526},[516,617,560],{"class":595},[516,619,620],{"class":530},"(s)",[516,622,550],{"class":526},[516,624,626],{"class":518,"line":625},7,[516,627,579],{"emptyLinePlaceholder":206},[516,629,631,634,637,640],{"class":518,"line":630},8,[516,632,633],{"class":522},"export",[516,635,636],{"class":522}," default",[516,638,639],{"class":530}," s",[516,641,550],{"class":526},[507,643,645],{"className":509,"code":644,"filename":500,"language":511,"meta":512,"style":512},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe/theme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[425,646,647,668,695,699,713,717,726,735,739],{"__ignoreMap":512},[516,648,649,651,653,655,657,659,661,664,666],{"class":518,"line":519},[516,650,523],{"class":522},[516,652,527],{"class":526},[516,654,531],{"class":530},[516,656,534],{"class":526},[516,658,537],{"class":522},[516,660,540],{"class":526},[516,662,663],{"class":543},"styleframe",[516,665,547],{"class":526},[516,667,550],{"class":526},[516,669,670,672,674,677,680,683,685,687,689,691,693],{"class":518,"line":553},[516,671,523],{"class":522},[516,673,527],{"class":526},[516,675,676],{"class":530}," useDesignTokensPreset",[516,678,679],{"class":526},",",[516,681,682],{"class":530}," useUtilitiesPreset",[516,684,534],{"class":526},[516,686,537],{"class":522},[516,688,540],{"class":526},[516,690,569],{"class":543},[516,692,547],{"class":526},[516,694,550],{"class":526},[516,696,697],{"class":518,"line":576},[516,698,579],{"emptyLinePlaceholder":206},[516,700,701,703,705,707,709,711],{"class":518,"line":582},[516,702,586],{"class":585},[516,704,589],{"class":530},[516,706,592],{"class":526},[516,708,531],{"class":595},[516,710,598],{"class":530},[516,712,550],{"class":526},[516,714,715],{"class":518,"line":603},[516,716,579],{"emptyLinePlaceholder":206},[516,718,719,722,724],{"class":518,"line":608},[516,720,721],{"class":595},"useDesignTokensPreset",[516,723,620],{"class":530},[516,725,550],{"class":526},[516,727,728,731,733],{"class":518,"line":625},[516,729,730],{"class":595},"useUtilitiesPreset",[516,732,620],{"class":530},[516,734,550],{"class":526},[516,736,737],{"class":518,"line":630},[516,738,579],{"emptyLinePlaceholder":206},[516,740,742,744,746,748],{"class":518,"line":741},9,[516,743,633],{"class":522},[516,745,636],{"class":522},[516,747,639],{"class":530},[516,749,550],{"class":526},[491,751,753],{"id":752},"build-the-component","Build the component",[417,755,756,757,760],{},"Import the ",[425,758,759],{},"badge"," runtime function from the virtual module and pass variant props to compute class names:",[762,763,764,1197],"tabs",{},[765,766,769],"tabs-item",{"icon":767,"label":768},"i-devicon-react","React",[507,770,773],{"className":509,"code":771,"filename":772,"language":511,"meta":512,"style":512},"import { badge } from \"virtual:styleframe\";\n\ninterface BadgeProps {\n    color?: \"primary\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"outline\" | \"soft\" | \"subtle\";\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n    children?: React.ReactNode;\n}\n\nexport function Badge({\n    color = \"neutral\",\n    variant = \"solid\",\n    size = \"sm\",\n    children,\n}: BadgeProps) {\n    const classes = badge({ color, variant, size });\n\n    return \u003Cspan className={classes}>{children}\u003C/span>;\n}\n","src/components/Badge.tsx",[425,774,775,798,802,814,905,948,1000,1018,1023,1027,1041,1059,1074,1089,1096,1109,1147,1152,1192],{"__ignoreMap":512},[516,776,777,779,781,784,786,788,791,793,796],{"class":518,"line":519},[516,778,523],{"class":522},[516,780,527],{"class":526},[516,782,783],{"class":530}," badge",[516,785,534],{"class":526},[516,787,537],{"class":522},[516,789,790],{"class":526}," \"",[516,792,544],{"class":543},[516,794,795],{"class":526},"\"",[516,797,550],{"class":526},[516,799,800],{"class":518,"line":553},[516,801,579],{"emptyLinePlaceholder":206},[516,803,804,807,811],{"class":518,"line":576},[516,805,806],{"class":585},"interface",[516,808,810],{"class":809},"sBMFI"," BadgeProps",[516,812,813],{"class":526}," {\n",[516,815,816,820,823,825,828,830,833,835,838,840,842,844,847,849,851,853,856,858,860,862,865,867,869,871,874,876,878,880,883,885,887,889,892,894,896,898,901,903],{"class":518,"line":582},[516,817,819],{"class":818},"swJcz","    color",[516,821,822],{"class":526},"?:",[516,824,790],{"class":526},[516,826,827],{"class":543},"primary",[516,829,795],{"class":526},[516,831,832],{"class":526}," |",[516,834,790],{"class":526},[516,836,837],{"class":543},"secondary",[516,839,795],{"class":526},[516,841,832],{"class":526},[516,843,790],{"class":526},[516,845,846],{"class":543},"success",[516,848,795],{"class":526},[516,850,832],{"class":526},[516,852,790],{"class":526},[516,854,855],{"class":543},"info",[516,857,795],{"class":526},[516,859,832],{"class":526},[516,861,790],{"class":526},[516,863,864],{"class":543},"warning",[516,866,795],{"class":526},[516,868,832],{"class":526},[516,870,790],{"class":526},[516,872,873],{"class":543},"error",[516,875,795],{"class":526},[516,877,832],{"class":526},[516,879,790],{"class":526},[516,881,882],{"class":543},"light",[516,884,795],{"class":526},[516,886,832],{"class":526},[516,888,790],{"class":526},[516,890,891],{"class":543},"dark",[516,893,795],{"class":526},[516,895,832],{"class":526},[516,897,790],{"class":526},[516,899,900],{"class":543},"neutral",[516,902,795],{"class":526},[516,904,550],{"class":526},[516,906,907,910,912,914,917,919,921,923,926,928,930,932,935,937,939,941,944,946],{"class":518,"line":603},[516,908,909],{"class":818},"    variant",[516,911,822],{"class":526},[516,913,790],{"class":526},[516,915,916],{"class":543},"solid",[516,918,795],{"class":526},[516,920,832],{"class":526},[516,922,790],{"class":526},[516,924,925],{"class":543},"outline",[516,927,795],{"class":526},[516,929,832],{"class":526},[516,931,790],{"class":526},[516,933,934],{"class":543},"soft",[516,936,795],{"class":526},[516,938,832],{"class":526},[516,940,790],{"class":526},[516,942,943],{"class":543},"subtle",[516,945,795],{"class":526},[516,947,550],{"class":526},[516,949,950,953,955,957,960,962,964,966,969,971,973,975,978,980,982,984,987,989,991,993,996,998],{"class":518,"line":608},[516,951,952],{"class":818},"    size",[516,954,822],{"class":526},[516,956,790],{"class":526},[516,958,959],{"class":543},"xs",[516,961,795],{"class":526},[516,963,832],{"class":526},[516,965,790],{"class":526},[516,967,968],{"class":543},"sm",[516,970,795],{"class":526},[516,972,832],{"class":526},[516,974,790],{"class":526},[516,976,977],{"class":543},"md",[516,979,795],{"class":526},[516,981,832],{"class":526},[516,983,790],{"class":526},[516,985,986],{"class":543},"lg",[516,988,795],{"class":526},[516,990,832],{"class":526},[516,992,790],{"class":526},[516,994,995],{"class":543},"xl",[516,997,795],{"class":526},[516,999,550],{"class":526},[516,1001,1002,1005,1007,1010,1013,1016],{"class":518,"line":625},[516,1003,1004],{"class":818},"    children",[516,1006,822],{"class":526},[516,1008,1009],{"class":809}," React",[516,1011,1012],{"class":526},".",[516,1014,1015],{"class":809},"ReactNode",[516,1017,550],{"class":526},[516,1019,1020],{"class":518,"line":630},[516,1021,1022],{"class":526},"}\n",[516,1024,1025],{"class":518,"line":741},[516,1026,579],{"emptyLinePlaceholder":206},[516,1028,1030,1032,1035,1038],{"class":518,"line":1029},10,[516,1031,633],{"class":522},[516,1033,1034],{"class":585}," function",[516,1036,1037],{"class":595}," Badge",[516,1039,1040],{"class":526},"({\n",[516,1042,1044,1047,1050,1052,1054,1056],{"class":518,"line":1043},11,[516,1045,819],{"class":1046},"sHdIc",[516,1048,1049],{"class":526}," =",[516,1051,790],{"class":526},[516,1053,900],{"class":543},[516,1055,795],{"class":526},[516,1057,1058],{"class":526},",\n",[516,1060,1062,1064,1066,1068,1070,1072],{"class":518,"line":1061},12,[516,1063,909],{"class":1046},[516,1065,1049],{"class":526},[516,1067,790],{"class":526},[516,1069,916],{"class":543},[516,1071,795],{"class":526},[516,1073,1058],{"class":526},[516,1075,1077,1079,1081,1083,1085,1087],{"class":518,"line":1076},13,[516,1078,952],{"class":1046},[516,1080,1049],{"class":526},[516,1082,790],{"class":526},[516,1084,968],{"class":543},[516,1086,795],{"class":526},[516,1088,1058],{"class":526},[516,1090,1092,1094],{"class":518,"line":1091},14,[516,1093,1004],{"class":1046},[516,1095,1058],{"class":526},[516,1097,1099,1102,1104,1107],{"class":518,"line":1098},15,[516,1100,1101],{"class":526},"}:",[516,1103,810],{"class":809},[516,1105,1106],{"class":526},")",[516,1108,813],{"class":526},[516,1110,1112,1115,1118,1120,1122,1125,1128,1131,1133,1136,1138,1141,1143,1145],{"class":518,"line":1111},16,[516,1113,1114],{"class":585},"    const",[516,1116,1117],{"class":530}," classes",[516,1119,1049],{"class":526},[516,1121,783],{"class":595},[516,1123,1124],{"class":818},"(",[516,1126,1127],{"class":526},"{",[516,1129,1130],{"class":530}," color",[516,1132,679],{"class":526},[516,1134,1135],{"class":530}," variant",[516,1137,679],{"class":526},[516,1139,1140],{"class":530}," size",[516,1142,534],{"class":526},[516,1144,1106],{"class":818},[516,1146,550],{"class":526},[516,1148,1150],{"class":518,"line":1149},17,[516,1151,579],{"emptyLinePlaceholder":206},[516,1153,1155,1158,1161,1163,1166,1168,1170,1173,1176,1179,1181,1184,1187,1189],{"class":518,"line":1154},18,[516,1156,1157],{"class":522},"    return",[516,1159,1160],{"class":818}," \u003C",[516,1162,516],{"class":809},[516,1164,1165],{"class":809}," className",[516,1167,592],{"class":818},[516,1169,1127],{"class":526},[516,1171,1172],{"class":818},"classes",[516,1174,1175],{"class":526},"}",[516,1177,1178],{"class":818},">",[516,1180,1127],{"class":526},[516,1182,1183],{"class":530},"children",[516,1185,1186],{"class":526},"}\u003C/",[516,1188,516],{"class":530},[516,1190,1191],{"class":526},">;\n",[516,1193,1195],{"class":518,"line":1194},19,[516,1196,1022],{"class":526},[765,1198,1201],{"icon":1199,"label":1200},"i-devicon-vuejs","Vue",[507,1202,1207],{"className":1203,"code":1204,"filename":1205,"language":1206,"meta":512,"style":512},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { badge } from \"virtual:styleframe\";\n\nconst { color = \"neutral\", variant = \"solid\", size = \"sm\" } = defineProps\u003C{\n    color?: \"primary\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"outline\" | \"soft\" | \"subtle\";\n    size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n}>();\n\u003C/script>\n\n\u003Ctemplate>\n    \u003Cspan :class=\"badge({ color, variant, size })\">\n        \u003Cslot />\n    \u003C/span>\n\u003C/template>\n","src/components/Badge.vue","vue",[425,1208,1209,1234,1254,1258,1311,1389,1427,1473,1482,1491,1495,1504,1547,1558,1567],{"__ignoreMap":512},[516,1210,1211,1214,1217,1220,1223,1225,1227,1229,1231],{"class":518,"line":519},[516,1212,1213],{"class":526},"\u003C",[516,1215,1216],{"class":818},"script",[516,1218,1219],{"class":585}," setup",[516,1221,1222],{"class":585}," lang",[516,1224,592],{"class":526},[516,1226,795],{"class":526},[516,1228,511],{"class":543},[516,1230,795],{"class":526},[516,1232,1233],{"class":526},">\n",[516,1235,1236,1238,1240,1242,1244,1246,1248,1250,1252],{"class":518,"line":553},[516,1237,523],{"class":522},[516,1239,527],{"class":526},[516,1241,783],{"class":530},[516,1243,534],{"class":526},[516,1245,537],{"class":522},[516,1247,790],{"class":526},[516,1249,544],{"class":543},[516,1251,795],{"class":526},[516,1253,550],{"class":526},[516,1255,1256],{"class":518,"line":576},[516,1257,579],{"emptyLinePlaceholder":206},[516,1259,1260,1262,1264,1267,1269,1271,1273,1275,1277,1280,1282,1284,1286,1288,1290,1293,1295,1297,1299,1301,1303,1305,1308],{"class":518,"line":582},[516,1261,586],{"class":585},[516,1263,527],{"class":526},[516,1265,1266],{"class":530}," color ",[516,1268,592],{"class":526},[516,1270,790],{"class":526},[516,1272,900],{"class":543},[516,1274,795],{"class":526},[516,1276,679],{"class":526},[516,1278,1279],{"class":530}," variant ",[516,1281,592],{"class":526},[516,1283,790],{"class":526},[516,1285,916],{"class":543},[516,1287,795],{"class":526},[516,1289,679],{"class":526},[516,1291,1292],{"class":530}," size ",[516,1294,592],{"class":526},[516,1296,790],{"class":526},[516,1298,968],{"class":543},[516,1300,795],{"class":526},[516,1302,534],{"class":526},[516,1304,1049],{"class":526},[516,1306,1307],{"class":595}," defineProps",[516,1309,1310],{"class":526},"\u003C{\n",[516,1312,1313,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1385,1387],{"class":518,"line":603},[516,1314,819],{"class":818},[516,1316,822],{"class":526},[516,1318,790],{"class":526},[516,1320,827],{"class":543},[516,1322,795],{"class":526},[516,1324,832],{"class":526},[516,1326,790],{"class":526},[516,1328,837],{"class":543},[516,1330,795],{"class":526},[516,1332,832],{"class":526},[516,1334,790],{"class":526},[516,1336,846],{"class":543},[516,1338,795],{"class":526},[516,1340,832],{"class":526},[516,1342,790],{"class":526},[516,1344,855],{"class":543},[516,1346,795],{"class":526},[516,1348,832],{"class":526},[516,1350,790],{"class":526},[516,1352,864],{"class":543},[516,1354,795],{"class":526},[516,1356,832],{"class":526},[516,1358,790],{"class":526},[516,1360,873],{"class":543},[516,1362,795],{"class":526},[516,1364,832],{"class":526},[516,1366,790],{"class":526},[516,1368,882],{"class":543},[516,1370,795],{"class":526},[516,1372,832],{"class":526},[516,1374,790],{"class":526},[516,1376,891],{"class":543},[516,1378,795],{"class":526},[516,1380,832],{"class":526},[516,1382,790],{"class":526},[516,1384,900],{"class":543},[516,1386,795],{"class":526},[516,1388,550],{"class":526},[516,1390,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413,1415,1417,1419,1421,1423,1425],{"class":518,"line":608},[516,1392,909],{"class":818},[516,1394,822],{"class":526},[516,1396,790],{"class":526},[516,1398,916],{"class":543},[516,1400,795],{"class":526},[516,1402,832],{"class":526},[516,1404,790],{"class":526},[516,1406,925],{"class":543},[516,1408,795],{"class":526},[516,1410,832],{"class":526},[516,1412,790],{"class":526},[516,1414,934],{"class":543},[516,1416,795],{"class":526},[516,1418,832],{"class":526},[516,1420,790],{"class":526},[516,1422,943],{"class":543},[516,1424,795],{"class":526},[516,1426,550],{"class":526},[516,1428,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471],{"class":518,"line":625},[516,1430,952],{"class":818},[516,1432,822],{"class":526},[516,1434,790],{"class":526},[516,1436,959],{"class":543},[516,1438,795],{"class":526},[516,1440,832],{"class":526},[516,1442,790],{"class":526},[516,1444,968],{"class":543},[516,1446,795],{"class":526},[516,1448,832],{"class":526},[516,1450,790],{"class":526},[516,1452,977],{"class":543},[516,1454,795],{"class":526},[516,1456,832],{"class":526},[516,1458,790],{"class":526},[516,1460,986],{"class":543},[516,1462,795],{"class":526},[516,1464,832],{"class":526},[516,1466,790],{"class":526},[516,1468,995],{"class":543},[516,1470,795],{"class":526},[516,1472,550],{"class":526},[516,1474,1475,1478,1480],{"class":518,"line":630},[516,1476,1477],{"class":526},"}>",[516,1479,598],{"class":530},[516,1481,550],{"class":526},[516,1483,1484,1487,1489],{"class":518,"line":741},[516,1485,1486],{"class":526},"\u003C/",[516,1488,1216],{"class":818},[516,1490,1233],{"class":526},[516,1492,1493],{"class":518,"line":1029},[516,1494,579],{"emptyLinePlaceholder":206},[516,1496,1497,1499,1502],{"class":518,"line":1043},[516,1498,1213],{"class":526},[516,1500,1501],{"class":818},"template",[516,1503,1233],{"class":526},[516,1505,1506,1509,1511,1514,1517,1519,1521,1523,1526,1529,1532,1535,1537,1540,1543,1545],{"class":518,"line":1061},[516,1507,1508],{"class":526},"    \u003C",[516,1510,516],{"class":818},[516,1512,1513],{"class":526}," :",[516,1515,1516],{"class":585},"class",[516,1518,592],{"class":526},[516,1520,795],{"class":526},[516,1522,759],{"class":595},[516,1524,1525],{"class":526},"({ ",[516,1527,1528],{"class":530},"color",[516,1530,1531],{"class":526},", ",[516,1533,1534],{"class":530},"variant",[516,1536,1531],{"class":526},[516,1538,1539],{"class":530},"size",[516,1541,1542],{"class":526}," })",[516,1544,795],{"class":526},[516,1546,1233],{"class":526},[516,1548,1549,1552,1555],{"class":518,"line":1076},[516,1550,1551],{"class":526},"        \u003C",[516,1553,1554],{"class":818},"slot",[516,1556,1557],{"class":526}," />\n",[516,1559,1560,1563,1565],{"class":518,"line":1091},[516,1561,1562],{"class":526},"    \u003C/",[516,1564,516],{"class":818},[516,1566,1233],{"class":526},[516,1568,1569,1571,1573],{"class":518,"line":1098},[516,1570,1486],{"class":526},[516,1572,1501],{"class":818},[516,1574,1233],{"class":526},[491,1576,1578],{"id":1577},"see-it-in-action","See it in action",[1580,1581],"story-preview",{"story":1582,":panel":1583},"theme-recipes-badge--default","true",[413,1585,181],{"id":1586},"colors",[417,1588,1589,1590,1531,1592,1531,1594,1531,1596,1531,1598,1531,1600,1602,1603,1531,1605,1531,1607,1609],{},"The Badge recipe includes 9 color variants: 6 semantic colors (",[425,1591,827],{},[425,1593,837],{},[425,1595,846],{},[425,1597,855],{},[425,1599,864],{},[425,1601,873],{},") plus 3 neutral-scale colors (",[425,1604,882],{},[425,1606,891],{},[425,1608,900],{},"). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations.",[1580,1611],{"story":1612,":panel":1583},"theme-recipes-badge--success",[1614,1615,1617],"h3",{"id":1616},"color-reference","Color Reference",[1580,1619],{"story":1620},"theme-recipes-badge--all-variants",[1622,1623,1624,1640],"table",{},[1625,1626,1627],"thead",{},[1628,1629,1630,1634,1637],"tr",{},[1631,1632,1633],"th",{},"Color",[1631,1635,1636],{},"Token",[1631,1638,1639],{},"Use Case",[1641,1642,1643,1658,1672,1686,1700,1714,1728,1746,1760],"tbody",{},[1628,1644,1645,1650,1655],{},[1646,1647,1648],"td",{},[425,1649,827],{},[1646,1651,1652],{},[425,1653,1654],{},"@color.primary",[1646,1656,1657],{},"Default actions, links, key information",[1628,1659,1660,1664,1669],{},[1646,1661,1662],{},[425,1663,837],{},[1646,1665,1666],{},[425,1667,1668],{},"@color.secondary",[1646,1670,1671],{},"Secondary information, neutral states",[1628,1673,1674,1678,1683],{},[1646,1675,1676],{},[425,1677,846],{},[1646,1679,1680],{},[425,1681,1682],{},"@color.success",[1646,1684,1685],{},"Positive states, confirmations, completions",[1628,1687,1688,1692,1697],{},[1646,1689,1690],{},[425,1691,855],{},[1646,1693,1694],{},[425,1695,1696],{},"@color.info",[1646,1698,1699],{},"Informational messages, tips, highlights",[1628,1701,1702,1706,1711],{},[1646,1703,1704],{},[425,1705,864],{},[1646,1707,1708],{},[425,1709,1710],{},"@color.warning",[1646,1712,1713],{},"Caution states, pending actions",[1628,1715,1716,1720,1725],{},[1646,1717,1718],{},[425,1719,873],{},[1646,1721,1722],{},[425,1723,1724],{},"@color.error",[1646,1726,1727],{},"Error states, destructive actions, alerts",[1628,1729,1730,1734,1743],{},[1646,1731,1732],{},[425,1733,882],{},[1646,1735,1736,1739,1740],{},[425,1737,1738],{},"@color.white"," / ",[425,1741,1742],{},"@color.gray-*",[1646,1744,1745],{},"Light surfaces, stays light in dark mode",[1628,1747,1748,1752,1757],{},[1646,1749,1750],{},[425,1751,891],{},[1646,1753,1754],{},[425,1755,1756],{},"@color.gray-900",[1646,1758,1759],{},"Dark surfaces, stays dark in light mode",[1628,1761,1762,1766,1769],{},[1646,1763,1764],{},[425,1765,900],{},[1646,1767,1768],{},"Adaptive (light ↔ dark)",[1646,1770,1771],{},"Default color, adapts to the current color scheme",[1773,1774,1775,1778],"tip",{},[421,1776,1777],{},"Pro tip:"," Use semantic color names that describe purpose, not appearance. This makes it easier to update your palette without touching component code.",[413,1780,1782],{"id":1781},"variants","Variants",[417,1784,1785,1786,1790],{},"Four visual style variants control how the badge is rendered. Each variant is combined with the selected color through ",[430,1787,1789],{"href":1788},"/docs/api/recipes#compound-variants","compound variants",", so you always get the correct background, text, and border colors for your chosen color.",[1614,1792,1793],{"id":916},"Solid",[417,1795,1796],{},"Filled background with light text. The most prominent style, ideal for primary actions and key status indicators.",[1580,1798],{"story":1799,":panel":1583},"theme-recipes-badge--solid",[1614,1801,1802],{"id":925},"Outline",[417,1804,1805],{},"Transparent background with colored border and text. Useful for secondary indicators that shouldn't dominate the visual hierarchy.",[1580,1807],{"story":1808,":panel":1583},"theme-recipes-badge--outline",[1614,1810,1811],{"id":934},"Soft",[417,1813,1814],{},"Light tinted background with colored text. A subtle but visible style that works well for categorization and tags.",[1580,1816],{"story":1817,":panel":1583},"theme-recipes-badge--soft",[1614,1819,1820],{"id":943},"Subtle",[417,1822,1823,1824,1826,1827,1012],{},"Light tinted background with colored text and a matching border. Combines the softness of the ",[425,1825,934],{}," variant with the definition of ",[425,1828,925],{},[1580,1830],{"story":1831,":panel":1583},"theme-recipes-badge--subtle",[413,1833,1835],{"id":1834},"sizes","Sizes",[417,1837,1838,1839,1841,1842,1844],{},"Five size variants from ",[425,1840,959],{}," to ",[425,1843,995],{}," control the font size, padding, gap, and border radius of the badge.",[1580,1846],{"story":1847,":panel":1583},"theme-recipes-badge--extra-large",[1614,1849,1851],{"id":1850},"size-reference","Size Reference",[1580,1853],{"story":1854},"theme-recipes-badge--all-sizes",[1622,1856,1857,1870],{},[1625,1858,1859],{},[1628,1860,1861,1864,1867],{},[1631,1862,1863],{},"Size",[1631,1865,1866],{},"Font Size",[1631,1868,1869],{},"Border Radius",[1641,1871,1872,1888,1904,1919,1934],{},[1628,1873,1874,1878,1883],{},[1646,1875,1876],{},[425,1877,959],{},[1646,1879,1880],{},[425,1881,1882],{},"@font-size.2xs",[1646,1884,1885],{},[425,1886,1887],{},"@border-radius.sm",[1628,1889,1890,1894,1899],{},[1646,1891,1892],{},[425,1893,968],{},[1646,1895,1896],{},[425,1897,1898],{},"@font-size.xs",[1646,1900,1901],{},[425,1902,1903],{},"@border-radius.md",[1628,1905,1906,1910,1915],{},[1646,1907,1908],{},[425,1909,977],{},[1646,1911,1912],{},[425,1913,1914],{},"@font-size.sm",[1646,1916,1917],{},[425,1918,1903],{},[1628,1920,1921,1925,1930],{},[1646,1922,1923],{},[425,1924,986],{},[1646,1926,1927],{},[425,1928,1929],{},"@font-size.md",[1646,1931,1932],{},[425,1933,1903],{},[1628,1935,1936,1940,1945],{},[1646,1937,1938],{},[425,1939,995],{},[1646,1941,1942],{},[425,1943,1944],{},"@font-size.lg",[1646,1946,1947],{},[425,1948,1949],{},"@border-radius.lg",[413,1951,302],{"id":1952},"accessibility",[449,1954,1955],{},[452,1956,1957,1960,1961,1967],{},[421,1958,1959],{},"Pair color with text labels."," Don't rely on color alone to convey meaning (",[430,1962,1966],{"href":1963,"rel":1964},"https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html",[1965],"nofollow","WCAG 1.4.1","). Always include a descriptive label like \"Active\" or \"Error\".",[507,1969,1973],{"className":1970,"code":1971,"language":1972,"meta":512,"style":512},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Correct: color + descriptive text label -->\n\u003CBadge color=\"success\" variant=\"soft\">Active\u003C/Badge>\n\u003CBadge color=\"error\" variant=\"soft\">Error\u003C/Badge>\n\n\u003C!-- Avoid: color alone with ambiguous text -->\n\u003CBadge color=\"success\" variant=\"solid\">3\u003C/Badge>\n","html",[425,1974,1975,1981,2018,2055,2059,2064],{"__ignoreMap":512},[516,1976,1977],{"class":518,"line":519},[516,1978,1980],{"class":1979},"sHwdD","\u003C!-- Correct: color + descriptive text label -->\n",[516,1982,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009,2012,2014,2016],{"class":518,"line":553},[516,1984,1213],{"class":526},[516,1986,234],{"class":818},[516,1988,1130],{"class":585},[516,1990,592],{"class":526},[516,1992,795],{"class":526},[516,1994,846],{"class":543},[516,1996,795],{"class":526},[516,1998,1135],{"class":585},[516,2000,592],{"class":526},[516,2002,795],{"class":526},[516,2004,934],{"class":543},[516,2006,795],{"class":526},[516,2008,1178],{"class":526},[516,2010,2011],{"class":530},"Active",[516,2013,1486],{"class":526},[516,2015,234],{"class":818},[516,2017,1233],{"class":526},[516,2019,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038,2040,2042,2044,2046,2049,2051,2053],{"class":518,"line":576},[516,2021,1213],{"class":526},[516,2023,234],{"class":818},[516,2025,1130],{"class":585},[516,2027,592],{"class":526},[516,2029,795],{"class":526},[516,2031,873],{"class":543},[516,2033,795],{"class":526},[516,2035,1135],{"class":585},[516,2037,592],{"class":526},[516,2039,795],{"class":526},[516,2041,934],{"class":543},[516,2043,795],{"class":526},[516,2045,1178],{"class":526},[516,2047,2048],{"class":530},"Error",[516,2050,1486],{"class":526},[516,2052,234],{"class":818},[516,2054,1233],{"class":526},[516,2056,2057],{"class":518,"line":582},[516,2058,579],{"emptyLinePlaceholder":206},[516,2060,2061],{"class":518,"line":603},[516,2062,2063],{"class":1979},"\u003C!-- Avoid: color alone with ambiguous text -->\n",[516,2065,2066,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2095,2097,2099],{"class":518,"line":608},[516,2067,1213],{"class":526},[516,2069,234],{"class":818},[516,2071,1130],{"class":585},[516,2073,592],{"class":526},[516,2075,795],{"class":526},[516,2077,846],{"class":543},[516,2079,795],{"class":526},[516,2081,1135],{"class":585},[516,2083,592],{"class":526},[516,2085,795],{"class":526},[516,2087,916],{"class":543},[516,2089,795],{"class":526},[516,2091,1178],{"class":526},[516,2093,2094],{"class":530},"3",[516,2096,1486],{"class":526},[516,2098,234],{"class":818},[516,2100,1233],{"class":526},[449,2102,2103],{},[452,2104,2105,2108,2109,2111,2112,1012],{},[421,2106,2107],{},"Verify contrast ratios."," The ",[425,2110,916],{}," variant places light text on a colored background. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[430,2113,2116],{"href":2114,"rel":2115},"https://webaim.org/resources/contrastchecker/",[1965],"WebAIM Contrast Checker",[1773,2118,2119,2122,2123,2125,2126,2128,2129,2131,2132,2134],{},[421,2120,2121],{},"Good practice:"," When badges appear next to each other in a list or table, use the ",[425,2124,1534],{}," prop to create visual hierarchy rather than relying solely on color differences. For example, use ",[425,2127,916],{}," for the primary status and ",[425,2130,934],{}," or ",[425,2133,925],{}," for secondary information.",[413,2136,2138],{"id":2137},"customization","Customization",[1614,2140,2142],{"id":2141},"overriding-defaults","Overriding Defaults",[417,2144,419,2145,2147],{},[425,2146,427],{}," composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[507,2149,2151],{"className":509,"code":2150,"filename":505,"language":511,"meta":512,"style":512},"import { styleframe } from 'virtual:styleframe';\nimport { useBadgeRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst badge = useBadgeRecipe(s, {\n    base: {\n        borderRadius: '@border-radius.full',\n    },\n    defaultVariants: {\n        color: 'success',\n        variant: 'soft',\n        size: 'md',\n    },\n});\n\nexport default s;\n",[425,2152,2153,2173,2193,2197,2211,2215,2232,2242,2258,2263,2272,2287,2302,2317,2321,2329,2333],{"__ignoreMap":512},[516,2154,2155,2157,2159,2161,2163,2165,2167,2169,2171],{"class":518,"line":519},[516,2156,523],{"class":522},[516,2158,527],{"class":526},[516,2160,531],{"class":530},[516,2162,534],{"class":526},[516,2164,537],{"class":522},[516,2166,540],{"class":526},[516,2168,544],{"class":543},[516,2170,547],{"class":526},[516,2172,550],{"class":526},[516,2174,2175,2177,2179,2181,2183,2185,2187,2189,2191],{"class":518,"line":553},[516,2176,523],{"class":522},[516,2178,527],{"class":526},[516,2180,560],{"class":530},[516,2182,534],{"class":526},[516,2184,537],{"class":522},[516,2186,540],{"class":526},[516,2188,569],{"class":543},[516,2190,547],{"class":526},[516,2192,550],{"class":526},[516,2194,2195],{"class":518,"line":576},[516,2196,579],{"emptyLinePlaceholder":206},[516,2198,2199,2201,2203,2205,2207,2209],{"class":518,"line":582},[516,2200,586],{"class":585},[516,2202,589],{"class":530},[516,2204,592],{"class":526},[516,2206,531],{"class":595},[516,2208,598],{"class":530},[516,2210,550],{"class":526},[516,2212,2213],{"class":518,"line":603},[516,2214,579],{"emptyLinePlaceholder":206},[516,2216,2217,2219,2221,2223,2225,2228,2230],{"class":518,"line":608},[516,2218,586],{"class":585},[516,2220,613],{"class":530},[516,2222,592],{"class":526},[516,2224,560],{"class":595},[516,2226,2227],{"class":530},"(s",[516,2229,679],{"class":526},[516,2231,813],{"class":526},[516,2233,2234,2237,2240],{"class":518,"line":625},[516,2235,2236],{"class":818},"    base",[516,2238,2239],{"class":526},":",[516,2241,813],{"class":526},[516,2243,2244,2247,2249,2251,2254,2256],{"class":518,"line":630},[516,2245,2246],{"class":818},"        borderRadius",[516,2248,2239],{"class":526},[516,2250,540],{"class":526},[516,2252,2253],{"class":543},"@border-radius.full",[516,2255,547],{"class":526},[516,2257,1058],{"class":526},[516,2259,2260],{"class":518,"line":741},[516,2261,2262],{"class":526},"    },\n",[516,2264,2265,2268,2270],{"class":518,"line":1029},[516,2266,2267],{"class":818},"    defaultVariants",[516,2269,2239],{"class":526},[516,2271,813],{"class":526},[516,2273,2274,2277,2279,2281,2283,2285],{"class":518,"line":1043},[516,2275,2276],{"class":818},"        color",[516,2278,2239],{"class":526},[516,2280,540],{"class":526},[516,2282,846],{"class":543},[516,2284,547],{"class":526},[516,2286,1058],{"class":526},[516,2288,2289,2292,2294,2296,2298,2300],{"class":518,"line":1061},[516,2290,2291],{"class":818},"        variant",[516,2293,2239],{"class":526},[516,2295,540],{"class":526},[516,2297,934],{"class":543},[516,2299,547],{"class":526},[516,2301,1058],{"class":526},[516,2303,2304,2307,2309,2311,2313,2315],{"class":518,"line":1076},[516,2305,2306],{"class":818},"        size",[516,2308,2239],{"class":526},[516,2310,540],{"class":526},[516,2312,977],{"class":543},[516,2314,547],{"class":526},[516,2316,1058],{"class":526},[516,2318,2319],{"class":518,"line":1091},[516,2320,2262],{"class":526},[516,2322,2323,2325,2327],{"class":518,"line":1098},[516,2324,1175],{"class":526},[516,2326,1106],{"class":530},[516,2328,550],{"class":526},[516,2330,2331],{"class":518,"line":1111},[516,2332,579],{"emptyLinePlaceholder":206},[516,2334,2335,2337,2339,2341],{"class":518,"line":1149},[516,2336,633],{"class":522},[516,2338,636],{"class":522},[516,2340,639],{"class":530},[516,2342,550],{"class":526},[1614,2344,2346],{"id":2345},"filtering-variants","Filtering Variants",[417,2348,2349,2350,2353],{},"If you only need a subset of the available variants, use the ",[425,2351,2352],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[507,2355,2357],{"className":509,"code":2356,"filename":505,"language":511,"meta":512,"style":512},"import { styleframe } from 'virtual:styleframe';\nimport { useBadgeRecipe } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Only generate primary and error colors, with solid and outline styles\nconst badge = useBadgeRecipe(s, {\n    filter: {\n        color: ['primary', 'error'],\n        variant: ['solid', 'outline'],\n    },\n});\n\nexport default s;\n",[425,2358,2359,2379,2399,2403,2417,2421,2426,2442,2451,2479,2505,2509,2517,2521],{"__ignoreMap":512},[516,2360,2361,2363,2365,2367,2369,2371,2373,2375,2377],{"class":518,"line":519},[516,2362,523],{"class":522},[516,2364,527],{"class":526},[516,2366,531],{"class":530},[516,2368,534],{"class":526},[516,2370,537],{"class":522},[516,2372,540],{"class":526},[516,2374,544],{"class":543},[516,2376,547],{"class":526},[516,2378,550],{"class":526},[516,2380,2381,2383,2385,2387,2389,2391,2393,2395,2397],{"class":518,"line":553},[516,2382,523],{"class":522},[516,2384,527],{"class":526},[516,2386,560],{"class":530},[516,2388,534],{"class":526},[516,2390,537],{"class":522},[516,2392,540],{"class":526},[516,2394,569],{"class":543},[516,2396,547],{"class":526},[516,2398,550],{"class":526},[516,2400,2401],{"class":518,"line":576},[516,2402,579],{"emptyLinePlaceholder":206},[516,2404,2405,2407,2409,2411,2413,2415],{"class":518,"line":582},[516,2406,586],{"class":585},[516,2408,589],{"class":530},[516,2410,592],{"class":526},[516,2412,531],{"class":595},[516,2414,598],{"class":530},[516,2416,550],{"class":526},[516,2418,2419],{"class":518,"line":603},[516,2420,579],{"emptyLinePlaceholder":206},[516,2422,2423],{"class":518,"line":608},[516,2424,2425],{"class":1979},"// Only generate primary and error colors, with solid and outline styles\n",[516,2427,2428,2430,2432,2434,2436,2438,2440],{"class":518,"line":625},[516,2429,586],{"class":585},[516,2431,613],{"class":530},[516,2433,592],{"class":526},[516,2435,560],{"class":595},[516,2437,2227],{"class":530},[516,2439,679],{"class":526},[516,2441,813],{"class":526},[516,2443,2444,2447,2449],{"class":518,"line":630},[516,2445,2446],{"class":818},"    filter",[516,2448,2239],{"class":526},[516,2450,813],{"class":526},[516,2452,2453,2455,2457,2460,2462,2464,2466,2468,2470,2472,2474,2477],{"class":518,"line":741},[516,2454,2276],{"class":818},[516,2456,2239],{"class":526},[516,2458,2459],{"class":530}," [",[516,2461,547],{"class":526},[516,2463,827],{"class":543},[516,2465,547],{"class":526},[516,2467,679],{"class":526},[516,2469,540],{"class":526},[516,2471,873],{"class":543},[516,2473,547],{"class":526},[516,2475,2476],{"class":530},"]",[516,2478,1058],{"class":526},[516,2480,2481,2483,2485,2487,2489,2491,2493,2495,2497,2499,2501,2503],{"class":518,"line":1029},[516,2482,2291],{"class":818},[516,2484,2239],{"class":526},[516,2486,2459],{"class":530},[516,2488,547],{"class":526},[516,2490,916],{"class":543},[516,2492,547],{"class":526},[516,2494,679],{"class":526},[516,2496,540],{"class":526},[516,2498,925],{"class":543},[516,2500,547],{"class":526},[516,2502,2476],{"class":530},[516,2504,1058],{"class":526},[516,2506,2507],{"class":518,"line":1043},[516,2508,2262],{"class":526},[516,2510,2511,2513,2515],{"class":518,"line":1061},[516,2512,1175],{"class":526},[516,2514,1106],{"class":530},[516,2516,550],{"class":526},[516,2518,2519],{"class":518,"line":1076},[516,2520,579],{"emptyLinePlaceholder":206},[516,2522,2523,2525,2527,2529],{"class":518,"line":1091},[516,2524,633],{"class":522},[516,2526,636],{"class":522},[516,2528,639],{"class":530},[516,2530,550],{"class":526},[2532,2533,2534,2537],"note",{},[421,2535,2536],{},"Good to know:"," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[413,2539,59],{"id":2540},"api-reference",[1614,2542,2544],{"id":2543},"usebadgerecipes-options",[425,2545,2546],{},"useBadgeRecipe(s, options?)",[417,2548,2549],{},"Creates a full badge recipe with all variants and compound variant styling.",[417,2551,2552],{},[421,2553,2554],{},"Parameters:",[1622,2556,2557,2570],{},[1625,2558,2559],{},[1628,2560,2561,2564,2567],{},[1631,2562,2563],{},"Parameter",[1631,2565,2566],{},"Type",[1631,2568,2569],{},"Description",[1641,2571,2572,2587,2602,2617,2631,2646,2661],{},[1628,2573,2574,2579,2584],{},[1646,2575,2576],{},[425,2577,2578],{},"s",[1646,2580,2581],{},[425,2582,2583],{},"Styleframe",[1646,2585,2586],{},"The Styleframe instance",[1628,2588,2589,2594,2599],{},[1646,2590,2591],{},[425,2592,2593],{},"options",[1646,2595,2596],{},[425,2597,2598],{},"DeepPartial\u003CRecipeConfig>",[1646,2600,2601],{},"Optional overrides for the recipe configuration",[1628,2603,2604,2609,2614],{},[1646,2605,2606],{},[425,2607,2608],{},"options.base",[1646,2610,2611],{},[425,2612,2613],{},"VariantDeclarationsBlock",[1646,2615,2616],{},"Custom base styles for the badge",[1628,2618,2619,2624,2628],{},[1646,2620,2621],{},[425,2622,2623],{},"options.variants",[1646,2625,2626],{},[425,2627,1782],{},[1646,2629,2630],{},"Custom variant definitions for the recipe",[1628,2632,2633,2638,2643],{},[1646,2634,2635],{},[425,2636,2637],{},"options.defaultVariants",[1646,2639,2640],{},[425,2641,2642],{},"Record\u003Ckeyof Variants, string>",[1646,2644,2645],{},"Default variant values for the recipe",[1628,2647,2648,2653,2658],{},[1646,2649,2650],{},[425,2651,2652],{},"options.compoundVariants",[1646,2654,2655],{},[425,2656,2657],{},"CompoundVariant[]",[1646,2659,2660],{},"Custom compound variant definitions for the recipe",[1628,2662,2663,2668,2673],{},[1646,2664,2665],{},[425,2666,2667],{},"options.filter",[1646,2669,2670],{},[425,2671,2672],{},"Record\u003Cstring, string[]>",[1646,2674,2675],{},"Limit which variant values are generated",[417,2677,2678],{},[421,2679,2680],{},"Variants:",[1622,2682,2683,2696],{},[1625,2684,2685],{},[1628,2686,2687,2690,2693],{},[1631,2688,2689],{},"Variant",[1631,2691,2692],{},"Options",[1631,2694,2695],{},"Default",[1641,2697,2698,2728,2748],{},[1628,2699,2700,2704,2724],{},[1646,2701,2702],{},[425,2703,1528],{},[1646,2705,2706,1531,2708,1531,2710,1531,2712,1531,2714,1531,2716,1531,2718,1531,2720,1531,2722],{},[425,2707,827],{},[425,2709,837],{},[425,2711,846],{},[425,2713,855],{},[425,2715,864],{},[425,2717,873],{},[425,2719,882],{},[425,2721,891],{},[425,2723,900],{},[1646,2725,2726],{},[425,2727,900],{},[1628,2729,2730,2734,2744],{},[1646,2731,2732],{},[425,2733,1534],{},[1646,2735,2736,1531,2738,1531,2740,1531,2742],{},[425,2737,916],{},[425,2739,925],{},[425,2741,934],{},[425,2743,943],{},[1646,2745,2746],{},[425,2747,916],{},[1628,2749,2750,2754,2766],{},[1646,2751,2752],{},[425,2753,1539],{},[1646,2755,2756,1531,2758,1531,2760,1531,2762,1531,2764],{},[425,2757,959],{},[425,2759,968],{},[425,2761,977],{},[425,2763,986],{},[425,2765,995],{},[1646,2767,2768],{},[425,2769,968],{},[417,2771,2772],{},[430,2773,2774],{"href":118},"Learn more about recipes →",[413,2776,2778],{"id":2777},"best-practices","Best Practices",[449,2780,2781,2793,2799,2813,2822,2832],{},[452,2782,2783,2786,2787,2789,2790,2792],{},[421,2784,2785],{},"Choose colors by meaning, not appearance",": Use ",[425,2788,846],{}," for positive states and ",[425,2791,873],{}," for errors — this keeps your UI consistent when tokens change.",[452,2794,2795,2798],{},[421,2796,2797],{},"Stick to one or two sizes per context",": Mixing too many sizes in the same area creates visual noise. Pick a default size and use alternatives sparingly.",[452,2800,2801,2809,2810,2812],{},[421,2802,2803,2804,2131,2806,2808],{},"Prefer ",[425,2805,934],{},[425,2807,943],{}," for dense layouts",": Solid badges can be overwhelming when there are many on screen. Reserve ",[425,2811,916],{}," for high-importance items.",[452,2814,2815,2818,2819,2821],{},[421,2816,2817],{},"Filter what you don't need",": If your component only uses a few colors, pass a ",[425,2820,2352],{}," option to reduce generated CSS.",[452,2823,2824,2827,2828,2831],{},[421,2825,2826],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[425,2829,2830],{},"defaultVariants"," so component consumers write less code.",[452,2833,2834,2837],{},[421,2835,2836],{},"Pair color with text",": Badges should not rely on color alone to convey meaning. Always include a descriptive label so the information is accessible to users who cannot distinguish colors.",[413,2839,2841],{"id":2840},"faq","FAQ",[2843,2844,2845,2881,3123,3136,3155,3168],"accordion",{},[2846,2847,2850,2876],"accordion-item",{"icon":2848,"label":2849},"i-lucide-circle-help","How do compound variants work in the Badge recipe?",[417,2851,2852,2853,2855,2856,2858,2859,2855,2861,2863,2864,2858,2867,2870,2871,2858,2873,2875],{},"The Badge recipe uses compound variants to map each color-variant combination to specific styles. For example, when ",[425,2854,1528],{}," is ",[425,2857,827],{}," and ",[425,2860,1534],{},[425,2862,916],{},", the compound variant applies ",[425,2865,2866],{},"background: @color.primary",[425,2868,2869],{},"color: @color.light",". This approach keeps the individual ",[425,2872,1528],{},[425,2874,1534],{}," definitions clean while handling all 36 combinations (9 colors × 4 variants) automatically.",[417,2877,2878],{},[430,2879,2880],{"href":1788},"Learn more about compound variants →",[2846,2882,2884,2894],{"icon":2848,"label":2883},"Can I add custom colors beyond the default six?",[417,2885,2886,2887,2858,2890,2893],{},"Yes. Override the ",[425,2888,2889],{},"variants.color",[425,2891,2892],{},"compoundVariants"," options to add new colors. You'll need to define the empty color variant and add compound variants for each visual style:",[507,2895,2897],{"className":509,"code":2896,"filename":505,"language":511,"meta":512,"style":512},"const badge = useBadgeRecipe(s, {\n    variants: {\n        color: {\n            brand: {},\n        },\n    },\n    compoundVariants: [\n        { match: { color: 'brand', variant: 'solid' }, css: { background: '@color.brand', color: '@color.light' } },\n        { match: { color: 'brand', variant: 'outline' }, css: { color: '@color.brand', borderColor: '@color.brand' } },\n        // ... soft and subtle\n    ],\n});\n",[425,2898,2899,2915,2924,2932,2942,2947,2951,2961,3036,3103,3108,3115],{"__ignoreMap":512},[516,2900,2901,2903,2905,2907,2909,2911,2913],{"class":518,"line":519},[516,2902,586],{"class":585},[516,2904,613],{"class":530},[516,2906,592],{"class":526},[516,2908,560],{"class":595},[516,2910,2227],{"class":530},[516,2912,679],{"class":526},[516,2914,813],{"class":526},[516,2916,2917,2920,2922],{"class":518,"line":553},[516,2918,2919],{"class":818},"    variants",[516,2921,2239],{"class":526},[516,2923,813],{"class":526},[516,2925,2926,2928,2930],{"class":518,"line":576},[516,2927,2276],{"class":818},[516,2929,2239],{"class":526},[516,2931,813],{"class":526},[516,2933,2934,2937,2939],{"class":518,"line":582},[516,2935,2936],{"class":818},"            brand",[516,2938,2239],{"class":526},[516,2940,2941],{"class":526}," {},\n",[516,2943,2944],{"class":518,"line":603},[516,2945,2946],{"class":526},"        },\n",[516,2948,2949],{"class":518,"line":608},[516,2950,2262],{"class":526},[516,2952,2953,2956,2958],{"class":518,"line":625},[516,2954,2955],{"class":818},"    compoundVariants",[516,2957,2239],{"class":526},[516,2959,2960],{"class":530}," [\n",[516,2962,2963,2966,2969,2971,2973,2975,2977,2979,2982,2984,2986,2988,2990,2992,2994,2996,2999,3002,3004,3006,3009,3011,3013,3016,3018,3020,3022,3024,3026,3029,3031,3033],{"class":518,"line":630},[516,2964,2965],{"class":526},"        {",[516,2967,2968],{"class":818}," match",[516,2970,2239],{"class":526},[516,2972,527],{"class":526},[516,2974,1130],{"class":818},[516,2976,2239],{"class":526},[516,2978,540],{"class":526},[516,2980,2981],{"class":543},"brand",[516,2983,547],{"class":526},[516,2985,679],{"class":526},[516,2987,1135],{"class":818},[516,2989,2239],{"class":526},[516,2991,540],{"class":526},[516,2993,916],{"class":543},[516,2995,547],{"class":526},[516,2997,2998],{"class":526}," },",[516,3000,3001],{"class":818}," css",[516,3003,2239],{"class":526},[516,3005,527],{"class":526},[516,3007,3008],{"class":818}," background",[516,3010,2239],{"class":526},[516,3012,540],{"class":526},[516,3014,3015],{"class":543},"@color.brand",[516,3017,547],{"class":526},[516,3019,679],{"class":526},[516,3021,1130],{"class":818},[516,3023,2239],{"class":526},[516,3025,540],{"class":526},[516,3027,3028],{"class":543},"@color.light",[516,3030,547],{"class":526},[516,3032,534],{"class":526},[516,3034,3035],{"class":526}," },\n",[516,3037,3038,3040,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3066,3068,3070,3072,3074,3076,3078,3080,3082,3084,3086,3088,3091,3093,3095,3097,3099,3101],{"class":518,"line":741},[516,3039,2965],{"class":526},[516,3041,2968],{"class":818},[516,3043,2239],{"class":526},[516,3045,527],{"class":526},[516,3047,1130],{"class":818},[516,3049,2239],{"class":526},[516,3051,540],{"class":526},[516,3053,2981],{"class":543},[516,3055,547],{"class":526},[516,3057,679],{"class":526},[516,3059,1135],{"class":818},[516,3061,2239],{"class":526},[516,3063,540],{"class":526},[516,3065,925],{"class":543},[516,3067,547],{"class":526},[516,3069,2998],{"class":526},[516,3071,3001],{"class":818},[516,3073,2239],{"class":526},[516,3075,527],{"class":526},[516,3077,1130],{"class":818},[516,3079,2239],{"class":526},[516,3081,540],{"class":526},[516,3083,3015],{"class":543},[516,3085,547],{"class":526},[516,3087,679],{"class":526},[516,3089,3090],{"class":818}," borderColor",[516,3092,2239],{"class":526},[516,3094,540],{"class":526},[516,3096,3015],{"class":543},[516,3098,547],{"class":526},[516,3100,534],{"class":526},[516,3102,3035],{"class":526},[516,3104,3105],{"class":518,"line":1029},[516,3106,3107],{"class":1979},"        // ... soft and subtle\n",[516,3109,3110,3113],{"class":518,"line":1043},[516,3111,3112],{"class":530},"    ]",[516,3114,1058],{"class":526},[516,3116,3117,3119,3121],{"class":518,"line":1061},[516,3118,1175],{"class":526},[516,3120,1106],{"class":530},[516,3122,550],{"class":526},[2846,3124,3126,3127,3129,3130,3132,3133,3135],{"icon":2848,"label":3125},"What's the difference between the soft and subtle variants?","Both use a light tinted background with colored text. The difference is that ",[425,3128,943],{}," also adds a matching colored border, giving the badge more visual definition. Use ",[425,3131,934],{}," when you want a gentler appearance, and ",[425,3134,943],{}," when the badge needs slightly more structure.",[2846,3137,3139,3140,3142,3143,3145,3146,3149,3150,2131,3152,3154],{"icon":2848,"label":3138},"How does filtering affect compound variants?","When you use the ",[425,3141,2352],{}," option, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[425,3144,1534],{}," to only ",[425,3147,3148],{},"['solid', 'outline']",", all compound variants matching ",[425,3151,934],{},[425,3153,943],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[2846,3156,3158,3159,3161,3162,3164,3165,1012],{"icon":2848,"label":3157},"How do I ensure badges are accessible?","Follow WCAG 1.4.1 by never relying on color alone to convey information. Always include a descriptive text label inside the badge. All default ",[425,3160,916],{}," variant colors meet the WCAG AA 4.5:1 contrast ratio for normal text against ",[425,3163,3028],{},". If you customize colors, verify contrast using a tool like ",[430,3166,2116],{"href":2114,"rel":3167},[1965],[2846,3169,3171,3172,1531,3174,3176,3177,3180,3181,3184],{"icon":2848,"label":3170},"Can I use the Badge recipe without the design tokens preset?","The Badge recipe references design tokens like ",[425,3173,1654],{},[425,3175,1898],{},", and ",[425,3178,3179],{},"@spacing.sm"," through string refs. These tokens need to be defined in your Styleframe instance for the recipe to generate valid CSS. The easiest way is to use ",[425,3182,3183],{},"useDesignTokensPreset(s)",", but you can also define the required tokens manually.",[3186,3187,3188],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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}",{"title":512,"searchDepth":553,"depth":553,"links":3190},[3191,3192,3193,3194,3197,3203,3206,3207,3211,3214,3215],{"id":415,"depth":553,"text":64},{"id":443,"depth":553,"text":444},{"id":484,"depth":553,"text":485},{"id":1586,"depth":553,"text":181,"children":3195},[3196],{"id":1616,"depth":576,"text":1617},{"id":1781,"depth":553,"text":1782,"children":3198},[3199,3200,3201,3202],{"id":916,"depth":576,"text":1793},{"id":925,"depth":576,"text":1802},{"id":934,"depth":576,"text":1811},{"id":943,"depth":576,"text":1820},{"id":1834,"depth":553,"text":1835,"children":3204},[3205],{"id":1850,"depth":576,"text":1851},{"id":1952,"depth":553,"text":302},{"id":2137,"depth":553,"text":2138,"children":3208},[3209,3210],{"id":2141,"depth":576,"text":2142},{"id":2345,"depth":576,"text":2346},{"id":2540,"depth":553,"text":59,"children":3212},[3213],{"id":2543,"depth":576,"text":2546},{"id":2777,"depth":553,"text":2778},{"id":2840,"depth":553,"text":2841},"A compact labeling component for status indicators, counts, and categorization. Supports multiple colors, visual styles, and sizes through the recipe system.",null,{},{"title":234,"description":3216},{"loc":235},"o2ZyAyqNHjbK2PBDOvmWPFUQTCDXOcYo4I1z5nCo0rk",[3223,3225],{"title":64,"path":225,"stem":226,"description":3224,"icon":65,"children":-1},"Explore Styleframe's component recipes — pre-built, composable styling patterns for common UI elements like badges, buttons, and more.",{"title":238,"path":239,"stem":240,"description":3226,"children":-1},"An interactive control component for actions and navigation. Supports multiple colors, visual styles, sizes, and states through the recipe system.",1776621135051]