[{"data":1,"prerenderedAt":5157},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-composables-backgrounds":407,"-docs-theme-utilities-composables-backgrounds-surround":5152},{"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":5144,"extension":5145,"links":5146,"meta":5147,"navigation":5148,"path":311,"seo":5149,"sitemap":5150,"stem":312,"__hash__":5151},"docs_theme/docs/theme/utilities/02.composables/02.backgrounds.md","Backgrounds Utilities",{"type":411,"value":412,"toc":5120},"minimark",[413,417,421,425,428,461,467,474,1288,1298,1304,1310,1651,1657,1663,1907,1912,1974,1980,1986,2399,2402,2537,2543,2549,2968,2974,2980,3223,3226,3279,3285,3291,3643,3652,3658,3664,3948,3952,3956,4454,4457,4536,4540,5021,5025,5073,5077,5116],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"Background utilities help you control the background styling of elements including colors, images, sizing, positioning, repeat behavior, and more.",[414,422,424],{"id":423},"why-use-background-utilities","Why Use Background Utilities?",[418,426,427],{},"Background utilities help you:",[429,430,431,443,449,455],"ul",{},[432,433,434,438,439],"li",{},[435,436,437],"strong",{},"Integrate with design tokens",": Reference your color system directly using ",[440,441,442],"code",{},"ref()",[432,444,445,448],{},[435,446,447],{},"Handle responsive images",": Control how background images scale and position",[432,450,451,454],{},[435,452,453],{},"Create consistent patterns",": Generate reusable background styles across your application",[432,456,457,460],{},[435,458,459],{},"Support theming",": Background colors can automatically adapt to theme changes",[414,462,464],{"id":463},"usebackgroundcolorutility",[440,465,466],{},"useBackgroundColorUtility",[418,468,469,470,473],{},"The ",[440,471,472],{},"useBackgroundColorUtility()"," function creates utility classes for setting background colors.",[475,476,477,881,1157],"tabs",{},[478,479,482],"tabs-item",{"icon":480,"label":481},"i-lucide-code","Code",[483,484,490],"pre",{"className":485,"code":486,"filename":487,"language":488,"meta":489,"style":489},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useColorDesignTokens } from \"@styleframe/theme\";\nimport { useBackgroundColorUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { ref } = s;\n\n// Define colors\nconst { colorPrimary, colorSecondary } = useColorDesignTokens(s, {\n    primary: '#006cff',\n    secondary: '#6c757d',\n} as const);\n\n// Create background color utilities\nuseBackgroundColorUtility(s, {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    primary: ref(colorPrimary),\n    secondary: ref(colorSecondary),\n    white: '#fff',\n    black: '#000',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[440,491,492,528,551,573,579,600,621,626,633,663,685,702,718,723,729,740,757,774,791,806,820,837,854,863,868],{"__ignoreMap":489},[493,494,497,501,505,509,512,515,518,522,525],"span",{"class":495,"line":496},"line",1,[493,498,500],{"class":499},"s7zQu","import",[493,502,504],{"class":503},"sMK4o"," {",[493,506,508],{"class":507},"sTEyZ"," styleframe",[493,510,511],{"class":503}," }",[493,513,514],{"class":499}," from",[493,516,517],{"class":503}," \"",[493,519,521],{"class":520},"sfazB","styleframe",[493,523,524],{"class":503},"\"",[493,526,527],{"class":503},";\n",[493,529,531,533,535,538,540,542,544,547,549],{"class":495,"line":530},2,[493,532,500],{"class":499},[493,534,504],{"class":503},[493,536,537],{"class":507}," useColorDesignTokens",[493,539,511],{"class":503},[493,541,514],{"class":499},[493,543,517],{"class":503},[493,545,546],{"class":520},"@styleframe/theme",[493,548,524],{"class":503},[493,550,527],{"class":503},[493,552,554,556,558,561,563,565,567,569,571],{"class":495,"line":553},3,[493,555,500],{"class":499},[493,557,504],{"class":503},[493,559,560],{"class":507}," useBackgroundColorUtility",[493,562,511],{"class":503},[493,564,514],{"class":499},[493,566,517],{"class":503},[493,568,546],{"class":520},[493,570,524],{"class":503},[493,572,527],{"class":503},[493,574,576],{"class":495,"line":575},4,[493,577,578],{"emptyLinePlaceholder":206},"\n",[493,580,582,586,589,592,595,598],{"class":495,"line":581},5,[493,583,585],{"class":584},"spNyl","const",[493,587,588],{"class":507}," s ",[493,590,591],{"class":503},"=",[493,593,508],{"class":594},"s2Zo4",[493,596,597],{"class":507},"()",[493,599,527],{"class":503},[493,601,603,605,607,610,613,616,619],{"class":495,"line":602},6,[493,604,585],{"class":584},[493,606,504],{"class":503},[493,608,609],{"class":507}," ref ",[493,611,612],{"class":503},"}",[493,614,615],{"class":503}," =",[493,617,618],{"class":507}," s",[493,620,527],{"class":503},[493,622,624],{"class":495,"line":623},7,[493,625,578],{"emptyLinePlaceholder":206},[493,627,629],{"class":495,"line":628},8,[493,630,632],{"class":631},"sHwdD","// Define colors\n",[493,634,636,638,640,643,646,649,651,653,655,658,660],{"class":495,"line":635},9,[493,637,585],{"class":584},[493,639,504],{"class":503},[493,641,642],{"class":507}," colorPrimary",[493,644,645],{"class":503},",",[493,647,648],{"class":507}," colorSecondary ",[493,650,612],{"class":503},[493,652,615],{"class":503},[493,654,537],{"class":594},[493,656,657],{"class":507},"(s",[493,659,645],{"class":503},[493,661,662],{"class":503}," {\n",[493,664,666,670,673,676,679,682],{"class":495,"line":665},10,[493,667,669],{"class":668},"swJcz","    primary",[493,671,672],{"class":503},":",[493,674,675],{"class":503}," '",[493,677,678],{"class":520},"#006cff",[493,680,681],{"class":503},"'",[493,683,684],{"class":503},",\n",[493,686,688,691,693,695,698,700],{"class":495,"line":687},11,[493,689,690],{"class":668},"    secondary",[493,692,672],{"class":503},[493,694,675],{"class":503},[493,696,697],{"class":520},"#6c757d",[493,699,681],{"class":503},[493,701,684],{"class":503},[493,703,705,707,710,713,716],{"class":495,"line":704},12,[493,706,612],{"class":503},[493,708,709],{"class":499}," as",[493,711,712],{"class":584}," const",[493,714,715],{"class":507},")",[493,717,527],{"class":503},[493,719,721],{"class":495,"line":720},13,[493,722,578],{"emptyLinePlaceholder":206},[493,724,726],{"class":495,"line":725},14,[493,727,728],{"class":631},"// Create background color utilities\n",[493,730,732,734,736,738],{"class":495,"line":731},15,[493,733,466],{"class":594},[493,735,657],{"class":507},[493,737,645],{"class":503},[493,739,662],{"class":503},[493,741,743,746,748,750,753,755],{"class":495,"line":742},16,[493,744,745],{"class":668},"    inherit",[493,747,672],{"class":503},[493,749,675],{"class":503},[493,751,752],{"class":520},"inherit",[493,754,681],{"class":503},[493,756,684],{"class":503},[493,758,760,763,765,767,770,772],{"class":495,"line":759},17,[493,761,762],{"class":668},"    current",[493,764,672],{"class":503},[493,766,675],{"class":503},[493,768,769],{"class":520},"currentColor",[493,771,681],{"class":503},[493,773,684],{"class":503},[493,775,777,780,782,784,787,789],{"class":495,"line":776},18,[493,778,779],{"class":668},"    transparent",[493,781,672],{"class":503},[493,783,675],{"class":503},[493,785,786],{"class":520},"transparent",[493,788,681],{"class":503},[493,790,684],{"class":503},[493,792,794,796,798,801,804],{"class":495,"line":793},19,[493,795,669],{"class":668},[493,797,672],{"class":503},[493,799,800],{"class":594}," ref",[493,802,803],{"class":507},"(colorPrimary)",[493,805,684],{"class":503},[493,807,809,811,813,815,818],{"class":495,"line":808},20,[493,810,690],{"class":668},[493,812,672],{"class":503},[493,814,800],{"class":594},[493,816,817],{"class":507},"(colorSecondary)",[493,819,684],{"class":503},[493,821,823,826,828,830,833,835],{"class":495,"line":822},21,[493,824,825],{"class":668},"    white",[493,827,672],{"class":503},[493,829,675],{"class":503},[493,831,832],{"class":520},"#fff",[493,834,681],{"class":503},[493,836,684],{"class":503},[493,838,840,843,845,847,850,852],{"class":495,"line":839},22,[493,841,842],{"class":668},"    black",[493,844,672],{"class":503},[493,846,675],{"class":503},[493,848,849],{"class":520},"#000",[493,851,681],{"class":503},[493,853,684],{"class":503},[493,855,857,859,861],{"class":495,"line":856},23,[493,858,612],{"class":503},[493,860,715],{"class":507},[493,862,527],{"class":503},[493,864,866],{"class":495,"line":865},24,[493,867,578],{"emptyLinePlaceholder":206},[493,869,871,874,877,879],{"class":495,"line":870},25,[493,872,873],{"class":499},"export",[493,875,876],{"class":499}," default",[493,878,618],{"class":507},[493,880,527],{"class":503},[478,882,884],{"icon":140,"label":883},"Output",[483,885,890],{"className":886,"code":887,"filename":888,"language":889,"meta":489,"style":489},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --color--primary: oklch(0.5749 0.233917 259.9541 / 1);\n    --color--secondary: oklch(0.5575 0.0165 244.89 / 1);\n}\n\n._bg\\:inherit { background-color: inherit; }\n._bg\\:current { background-color: currentColor; }\n._bg\\:transparent { background-color: transparent; }\n._bg\\:primary { background-color: var(--color--primary); }\n._bg\\:secondary { background-color: var(--color--secondary); }\n._bg\\:white { background-color: #fff; }\n._bg\\:black { background-color: #000; }\n","styleframe/index.css","css",[440,891,892,901,933,959,964,968,999,1023,1046,1076,1104,1131],{"__ignoreMap":489},[493,893,894,896,899],{"class":495,"line":496},[493,895,672],{"class":503},[493,897,898],{"class":584},"root",[493,900,662],{"class":503},[493,902,903,906,908,911,914,918,921,924,927,930],{"class":495,"line":530},[493,904,905],{"class":507},"    --color--primary",[493,907,672],{"class":503},[493,909,910],{"class":594}," oklch",[493,912,913],{"class":503},"(",[493,915,917],{"class":916},"sbssI","0.5749",[493,919,920],{"class":916}," 0.233917",[493,922,923],{"class":916}," 259.9541",[493,925,926],{"class":507}," / ",[493,928,929],{"class":916},"1",[493,931,932],{"class":503},");\n",[493,934,935,938,940,942,944,947,950,953,955,957],{"class":495,"line":553},[493,936,937],{"class":507},"    --color--secondary",[493,939,672],{"class":503},[493,941,910],{"class":594},[493,943,913],{"class":503},[493,945,946],{"class":916},"0.5575",[493,948,949],{"class":916}," 0.0165",[493,951,952],{"class":916}," 244.89",[493,954,926],{"class":507},[493,956,929],{"class":916},[493,958,932],{"class":503},[493,960,961],{"class":495,"line":575},[493,962,963],{"class":503},"}\n",[493,965,966],{"class":495,"line":581},[493,967,578],{"emptyLinePlaceholder":206},[493,969,970,973,977,980,982,984,988,990,993,996],{"class":495,"line":602},[493,971,972],{"class":503},".",[493,974,976],{"class":975},"sBMFI","_bg",[493,978,979],{"class":507},"\\:",[493,981,752],{"class":975},[493,983,504],{"class":503},[493,985,987],{"class":986},"sqsOY"," background-color",[493,989,672],{"class":503},[493,991,992],{"class":507}," inherit",[493,994,995],{"class":503},";",[493,997,998],{"class":503}," }\n",[493,1000,1001,1003,1005,1007,1010,1012,1014,1016,1019,1021],{"class":495,"line":623},[493,1002,972],{"class":503},[493,1004,976],{"class":975},[493,1006,979],{"class":507},[493,1008,1009],{"class":975},"current",[493,1011,504],{"class":503},[493,1013,987],{"class":986},[493,1015,672],{"class":503},[493,1017,1018],{"class":507}," currentColor",[493,1020,995],{"class":503},[493,1022,998],{"class":503},[493,1024,1025,1027,1029,1031,1033,1035,1037,1039,1042,1044],{"class":495,"line":628},[493,1026,972],{"class":503},[493,1028,976],{"class":975},[493,1030,979],{"class":507},[493,1032,786],{"class":975},[493,1034,504],{"class":503},[493,1036,987],{"class":986},[493,1038,672],{"class":503},[493,1040,1041],{"class":507}," transparent",[493,1043,995],{"class":503},[493,1045,998],{"class":503},[493,1047,1048,1050,1052,1054,1057,1059,1061,1063,1066,1068,1071,1074],{"class":495,"line":635},[493,1049,972],{"class":503},[493,1051,976],{"class":975},[493,1053,979],{"class":507},[493,1055,1056],{"class":975},"primary",[493,1058,504],{"class":503},[493,1060,987],{"class":986},[493,1062,672],{"class":503},[493,1064,1065],{"class":594}," var",[493,1067,913],{"class":503},[493,1069,1070],{"class":507},"--color--primary",[493,1072,1073],{"class":503},");",[493,1075,998],{"class":503},[493,1077,1078,1080,1082,1084,1087,1089,1091,1093,1095,1097,1100,1102],{"class":495,"line":665},[493,1079,972],{"class":503},[493,1081,976],{"class":975},[493,1083,979],{"class":507},[493,1085,1086],{"class":975},"secondary",[493,1088,504],{"class":503},[493,1090,987],{"class":986},[493,1092,672],{"class":503},[493,1094,1065],{"class":594},[493,1096,913],{"class":503},[493,1098,1099],{"class":507},"--color--secondary",[493,1101,1073],{"class":503},[493,1103,998],{"class":503},[493,1105,1106,1108,1110,1112,1115,1117,1119,1121,1124,1127,1129],{"class":495,"line":687},[493,1107,972],{"class":503},[493,1109,976],{"class":975},[493,1111,979],{"class":507},[493,1113,1114],{"class":975},"white",[493,1116,504],{"class":503},[493,1118,987],{"class":986},[493,1120,672],{"class":503},[493,1122,1123],{"class":503}," #",[493,1125,1126],{"class":507},"fff",[493,1128,995],{"class":503},[493,1130,998],{"class":503},[493,1132,1133,1135,1137,1139,1142,1144,1146,1148,1150,1153,1155],{"class":495,"line":704},[493,1134,972],{"class":503},[493,1136,976],{"class":975},[493,1138,979],{"class":507},[493,1140,1141],{"class":975},"black",[493,1143,504],{"class":503},[493,1145,987],{"class":986},[493,1147,672],{"class":503},[493,1149,1123],{"class":503},[493,1151,1152],{"class":507},"000",[493,1154,995],{"class":503},[493,1156,998],{"class":503},[478,1158,1161],{"icon":1159,"label":1160},"i-lucide-layout","Usage",[483,1162,1166],{"className":1163,"code":1164,"language":1165,"meta":489,"style":489},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"_bg:primary\">Primary background\u003C/div>\n\u003Cdiv class=\"_bg:secondary\">Secondary background\u003C/div>\n\u003Cheader class=\"_bg:white\">White header\u003C/header>\n\u003Cfooter class=\"_bg:black\">Black footer\u003C/footer>\n","html",[440,1167,1168,1202,1230,1259],{"__ignoreMap":489},[493,1169,1170,1173,1176,1179,1181,1183,1186,1188,1191,1194,1197,1199],{"class":495,"line":496},[493,1171,1172],{"class":503},"\u003C",[493,1174,1175],{"class":668},"div",[493,1177,1178],{"class":584}," class",[493,1180,591],{"class":503},[493,1182,524],{"class":503},[493,1184,1185],{"class":520},"_bg:primary",[493,1187,524],{"class":503},[493,1189,1190],{"class":503},">",[493,1192,1193],{"class":507},"Primary background",[493,1195,1196],{"class":503},"\u003C/",[493,1198,1175],{"class":668},[493,1200,1201],{"class":503},">\n",[493,1203,1204,1206,1208,1210,1212,1214,1217,1219,1221,1224,1226,1228],{"class":495,"line":530},[493,1205,1172],{"class":503},[493,1207,1175],{"class":668},[493,1209,1178],{"class":584},[493,1211,591],{"class":503},[493,1213,524],{"class":503},[493,1215,1216],{"class":520},"_bg:secondary",[493,1218,524],{"class":503},[493,1220,1190],{"class":503},[493,1222,1223],{"class":507},"Secondary background",[493,1225,1196],{"class":503},[493,1227,1175],{"class":668},[493,1229,1201],{"class":503},[493,1231,1232,1234,1237,1239,1241,1243,1246,1248,1250,1253,1255,1257],{"class":495,"line":553},[493,1233,1172],{"class":503},[493,1235,1236],{"class":668},"header",[493,1238,1178],{"class":584},[493,1240,591],{"class":503},[493,1242,524],{"class":503},[493,1244,1245],{"class":520},"_bg:white",[493,1247,524],{"class":503},[493,1249,1190],{"class":503},[493,1251,1252],{"class":507},"White header",[493,1254,1196],{"class":503},[493,1256,1236],{"class":668},[493,1258,1201],{"class":503},[493,1260,1261,1263,1266,1268,1270,1272,1275,1277,1279,1282,1284,1286],{"class":495,"line":575},[493,1262,1172],{"class":503},[493,1264,1265],{"class":668},"footer",[493,1267,1178],{"class":584},[493,1269,591],{"class":503},[493,1271,524],{"class":503},[493,1273,1274],{"class":520},"_bg:black",[493,1276,524],{"class":503},[493,1278,1190],{"class":503},[493,1280,1281],{"class":507},"Black footer",[493,1283,1196],{"class":503},[493,1285,1265],{"class":668},[493,1287,1201],{"class":503},[1289,1290,1291,1294,1295,1297],"tip",{},[435,1292,1293],{},"Pro tip",": Use ",[440,1296,442],{}," to reference your color design tokens so background colors automatically update with theme changes.",[414,1299,1301],{"id":1300},"usebackgroundimageutility",[440,1302,1303],{},"useBackgroundImageUtility",[418,1305,469,1306,1309],{},[440,1307,1308],{},"useBackgroundImageUtility()"," function creates utility classes for setting background images.",[475,1311,1312,1471,1587],{},[478,1313,1314],{"icon":480,"label":481},[483,1315,1317],{"className":485,"code":1316,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport { useBackgroundImageUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseBackgroundImageUtility(s, {\n    none: 'none',\n    'gradient-primary': 'linear-gradient(to right, #006cff, #00b4d8)',\n    'gradient-dark': 'linear-gradient(to bottom, #1a1a1a, #2d2d2d)',\n});\n\nexport default s;\n",[440,1318,1319,1339,1360,1364,1378,1382,1392,1408,1429,1449,1457,1461],{"__ignoreMap":489},[493,1320,1321,1323,1325,1327,1329,1331,1333,1335,1337],{"class":495,"line":496},[493,1322,500],{"class":499},[493,1324,504],{"class":503},[493,1326,508],{"class":507},[493,1328,511],{"class":503},[493,1330,514],{"class":499},[493,1332,517],{"class":503},[493,1334,521],{"class":520},[493,1336,524],{"class":503},[493,1338,527],{"class":503},[493,1340,1341,1343,1345,1348,1350,1352,1354,1356,1358],{"class":495,"line":530},[493,1342,500],{"class":499},[493,1344,504],{"class":503},[493,1346,1347],{"class":507}," useBackgroundImageUtility",[493,1349,511],{"class":503},[493,1351,514],{"class":499},[493,1353,517],{"class":503},[493,1355,546],{"class":520},[493,1357,524],{"class":503},[493,1359,527],{"class":503},[493,1361,1362],{"class":495,"line":553},[493,1363,578],{"emptyLinePlaceholder":206},[493,1365,1366,1368,1370,1372,1374,1376],{"class":495,"line":575},[493,1367,585],{"class":584},[493,1369,588],{"class":507},[493,1371,591],{"class":503},[493,1373,508],{"class":594},[493,1375,597],{"class":507},[493,1377,527],{"class":503},[493,1379,1380],{"class":495,"line":581},[493,1381,578],{"emptyLinePlaceholder":206},[493,1383,1384,1386,1388,1390],{"class":495,"line":602},[493,1385,1303],{"class":594},[493,1387,657],{"class":507},[493,1389,645],{"class":503},[493,1391,662],{"class":503},[493,1393,1394,1397,1399,1401,1404,1406],{"class":495,"line":623},[493,1395,1396],{"class":668},"    none",[493,1398,672],{"class":503},[493,1400,675],{"class":503},[493,1402,1403],{"class":520},"none",[493,1405,681],{"class":503},[493,1407,684],{"class":503},[493,1409,1410,1413,1416,1418,1420,1422,1425,1427],{"class":495,"line":628},[493,1411,1412],{"class":503},"    '",[493,1414,1415],{"class":668},"gradient-primary",[493,1417,681],{"class":503},[493,1419,672],{"class":503},[493,1421,675],{"class":503},[493,1423,1424],{"class":520},"linear-gradient(to right, #006cff, #00b4d8)",[493,1426,681],{"class":503},[493,1428,684],{"class":503},[493,1430,1431,1433,1436,1438,1440,1442,1445,1447],{"class":495,"line":635},[493,1432,1412],{"class":503},[493,1434,1435],{"class":668},"gradient-dark",[493,1437,681],{"class":503},[493,1439,672],{"class":503},[493,1441,675],{"class":503},[493,1443,1444],{"class":520},"linear-gradient(to bottom, #1a1a1a, #2d2d2d)",[493,1446,681],{"class":503},[493,1448,684],{"class":503},[493,1450,1451,1453,1455],{"class":495,"line":665},[493,1452,612],{"class":503},[493,1454,715],{"class":507},[493,1456,527],{"class":503},[493,1458,1459],{"class":495,"line":687},[493,1460,578],{"emptyLinePlaceholder":206},[493,1462,1463,1465,1467,1469],{"class":495,"line":704},[493,1464,873],{"class":499},[493,1466,876],{"class":499},[493,1468,618],{"class":507},[493,1470,527],{"class":503},[478,1472,1473],{"icon":140,"label":883},[483,1474,1476],{"className":886,"code":1475,"filename":888,"language":889,"meta":489,"style":489},"._background-image\\:none { background-image: none; }\n._background-image\\:gradient-primary { background-image: linear-gradient(to right, #006cff, #00b4d8); }\n._background-image\\:gradient-dark { background-image: linear-gradient(to bottom, #1a1a1a, #2d2d2d); }\n",[440,1477,1478,1503,1546],{"__ignoreMap":489},[493,1479,1480,1482,1485,1487,1489,1491,1494,1496,1499,1501],{"class":495,"line":496},[493,1481,972],{"class":503},[493,1483,1484],{"class":975},"_background-image",[493,1486,979],{"class":507},[493,1488,1403],{"class":975},[493,1490,504],{"class":503},[493,1492,1493],{"class":986}," background-image",[493,1495,672],{"class":503},[493,1497,1498],{"class":507}," none",[493,1500,995],{"class":503},[493,1502,998],{"class":503},[493,1504,1505,1507,1509,1511,1513,1515,1517,1519,1522,1525,1528,1530,1532,1535,1537,1539,1542,1544],{"class":495,"line":530},[493,1506,972],{"class":503},[493,1508,1484],{"class":975},[493,1510,979],{"class":507},[493,1512,1415],{"class":975},[493,1514,504],{"class":503},[493,1516,1493],{"class":986},[493,1518,672],{"class":503},[493,1520,1521],{"class":594}," linear-gradient",[493,1523,1524],{"class":503},"(to",[493,1526,1527],{"class":507}," right",[493,1529,645],{"class":503},[493,1531,1123],{"class":503},[493,1533,1534],{"class":507},"006cff",[493,1536,645],{"class":503},[493,1538,1123],{"class":503},[493,1540,1541],{"class":507},"00b4d8",[493,1543,1073],{"class":503},[493,1545,998],{"class":503},[493,1547,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1569,1571,1573,1576,1578,1580,1583,1585],{"class":495,"line":553},[493,1549,972],{"class":503},[493,1551,1484],{"class":975},[493,1553,979],{"class":507},[493,1555,1435],{"class":975},[493,1557,504],{"class":503},[493,1559,1493],{"class":986},[493,1561,672],{"class":503},[493,1563,1521],{"class":594},[493,1565,1524],{"class":503},[493,1567,1568],{"class":507}," bottom",[493,1570,645],{"class":503},[493,1572,1123],{"class":503},[493,1574,1575],{"class":507},"1a1a1a",[493,1577,645],{"class":503},[493,1579,1123],{"class":503},[493,1581,1582],{"class":507},"2d2d2d",[493,1584,1073],{"class":503},[493,1586,998],{"class":503},[478,1588,1589],{"icon":1159,"label":1160},[483,1590,1592],{"className":1163,"code":1591,"language":1165,"meta":489,"style":489},"\u003Cdiv class=\"_background-image:gradient-primary\">Gradient background\u003C/div>\n\u003Csection class=\"_background-image:gradient-dark\">Dark gradient section\u003C/section>\n",[440,1593,1594,1622],{"__ignoreMap":489},[493,1595,1596,1598,1600,1602,1604,1606,1609,1611,1613,1616,1618,1620],{"class":495,"line":496},[493,1597,1172],{"class":503},[493,1599,1175],{"class":668},[493,1601,1178],{"class":584},[493,1603,591],{"class":503},[493,1605,524],{"class":503},[493,1607,1608],{"class":520},"_background-image:gradient-primary",[493,1610,524],{"class":503},[493,1612,1190],{"class":503},[493,1614,1615],{"class":507},"Gradient background",[493,1617,1196],{"class":503},[493,1619,1175],{"class":668},[493,1621,1201],{"class":503},[493,1623,1624,1626,1629,1631,1633,1635,1638,1640,1642,1645,1647,1649],{"class":495,"line":530},[493,1625,1172],{"class":503},[493,1627,1628],{"class":668},"section",[493,1630,1178],{"class":584},[493,1632,591],{"class":503},[493,1634,524],{"class":503},[493,1636,1637],{"class":520},"_background-image:gradient-dark",[493,1639,524],{"class":503},[493,1641,1190],{"class":503},[493,1643,1644],{"class":507},"Dark gradient section",[493,1646,1196],{"class":503},[493,1648,1628],{"class":668},[493,1650,1201],{"class":503},[414,1652,1654],{"id":1653},"usebackgroundsizeutility",[440,1655,1656],{},"useBackgroundSizeUtility",[418,1658,469,1659,1662],{},[440,1660,1661],{},"useBackgroundSizeUtility()"," function creates utility classes for controlling background image sizing.",[475,1664,1665,1763,1844],{},[478,1666,1667],{"icon":480,"label":481},[483,1668,1670],{"className":485,"code":1669,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport { useBackgroundSizeUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\n// Uses built-in defaults: auto, cover, contain\nuseBackgroundSizeUtility(s);\n\nexport default s;\n",[440,1671,1672,1692,1713,1717,1731,1735,1740,1749,1753],{"__ignoreMap":489},[493,1673,1674,1676,1678,1680,1682,1684,1686,1688,1690],{"class":495,"line":496},[493,1675,500],{"class":499},[493,1677,504],{"class":503},[493,1679,508],{"class":507},[493,1681,511],{"class":503},[493,1683,514],{"class":499},[493,1685,517],{"class":503},[493,1687,521],{"class":520},[493,1689,524],{"class":503},[493,1691,527],{"class":503},[493,1693,1694,1696,1698,1701,1703,1705,1707,1709,1711],{"class":495,"line":530},[493,1695,500],{"class":499},[493,1697,504],{"class":503},[493,1699,1700],{"class":507}," useBackgroundSizeUtility",[493,1702,511],{"class":503},[493,1704,514],{"class":499},[493,1706,517],{"class":503},[493,1708,546],{"class":520},[493,1710,524],{"class":503},[493,1712,527],{"class":503},[493,1714,1715],{"class":495,"line":553},[493,1716,578],{"emptyLinePlaceholder":206},[493,1718,1719,1721,1723,1725,1727,1729],{"class":495,"line":575},[493,1720,585],{"class":584},[493,1722,588],{"class":507},[493,1724,591],{"class":503},[493,1726,508],{"class":594},[493,1728,597],{"class":507},[493,1730,527],{"class":503},[493,1732,1733],{"class":495,"line":581},[493,1734,578],{"emptyLinePlaceholder":206},[493,1736,1737],{"class":495,"line":602},[493,1738,1739],{"class":631},"// Uses built-in defaults: auto, cover, contain\n",[493,1741,1742,1744,1747],{"class":495,"line":623},[493,1743,1656],{"class":594},[493,1745,1746],{"class":507},"(s)",[493,1748,527],{"class":503},[493,1750,1751],{"class":495,"line":628},[493,1752,578],{"emptyLinePlaceholder":206},[493,1754,1755,1757,1759,1761],{"class":495,"line":635},[493,1756,873],{"class":499},[493,1758,876],{"class":499},[493,1760,618],{"class":507},[493,1762,527],{"class":503},[478,1764,1765],{"icon":140,"label":883},[483,1766,1768],{"className":886,"code":1767,"filename":888,"language":889,"meta":489,"style":489},"._background-size\\:auto { background-size: auto; }\n._background-size\\:cover { background-size: cover; }\n._background-size\\:contain { background-size: contain; }\n",[440,1769,1770,1796,1820],{"__ignoreMap":489},[493,1771,1772,1774,1777,1779,1782,1784,1787,1789,1792,1794],{"class":495,"line":496},[493,1773,972],{"class":503},[493,1775,1776],{"class":975},"_background-size",[493,1778,979],{"class":507},[493,1780,1781],{"class":975},"auto",[493,1783,504],{"class":503},[493,1785,1786],{"class":986}," background-size",[493,1788,672],{"class":503},[493,1790,1791],{"class":507}," auto",[493,1793,995],{"class":503},[493,1795,998],{"class":503},[493,1797,1798,1800,1802,1804,1807,1809,1811,1813,1816,1818],{"class":495,"line":530},[493,1799,972],{"class":503},[493,1801,1776],{"class":975},[493,1803,979],{"class":507},[493,1805,1806],{"class":975},"cover",[493,1808,504],{"class":503},[493,1810,1786],{"class":986},[493,1812,672],{"class":503},[493,1814,1815],{"class":507}," cover",[493,1817,995],{"class":503},[493,1819,998],{"class":503},[493,1821,1822,1824,1826,1828,1831,1833,1835,1837,1840,1842],{"class":495,"line":553},[493,1823,972],{"class":503},[493,1825,1776],{"class":975},[493,1827,979],{"class":507},[493,1829,1830],{"class":975},"contain",[493,1832,504],{"class":503},[493,1834,1786],{"class":986},[493,1836,672],{"class":503},[493,1838,1839],{"class":507}," contain",[493,1841,995],{"class":503},[493,1843,998],{"class":503},[478,1845,1846],{"icon":1159,"label":1160},[483,1847,1849],{"className":1163,"code":1848,"language":1165,"meta":489,"style":489},"\u003Cdiv class=\"_background-size:cover\">Full coverage background\u003C/div>\n\u003Cdiv class=\"_background-size:contain\">Contained background\u003C/div>\n",[440,1850,1851,1879],{"__ignoreMap":489},[493,1852,1853,1855,1857,1859,1861,1863,1866,1868,1870,1873,1875,1877],{"class":495,"line":496},[493,1854,1172],{"class":503},[493,1856,1175],{"class":668},[493,1858,1178],{"class":584},[493,1860,591],{"class":503},[493,1862,524],{"class":503},[493,1864,1865],{"class":520},"_background-size:cover",[493,1867,524],{"class":503},[493,1869,1190],{"class":503},[493,1871,1872],{"class":507},"Full coverage background",[493,1874,1196],{"class":503},[493,1876,1175],{"class":668},[493,1878,1201],{"class":503},[493,1880,1881,1883,1885,1887,1889,1891,1894,1896,1898,1901,1903,1905],{"class":495,"line":530},[493,1882,1172],{"class":503},[493,1884,1175],{"class":668},[493,1886,1178],{"class":584},[493,1888,591],{"class":503},[493,1890,524],{"class":503},[493,1892,1893],{"class":520},"_background-size:contain",[493,1895,524],{"class":503},[493,1897,1190],{"class":503},[493,1899,1900],{"class":507},"Contained background",[493,1902,1196],{"class":503},[493,1904,1175],{"class":668},[493,1906,1201],{"class":503},[1908,1909,1911],"h3",{"id":1910},"default-values","Default Values",[1913,1914,1915,1931],"table",{},[1916,1917,1918],"thead",{},[1919,1920,1921,1925,1928],"tr",{},[1922,1923,1924],"th",{},"Key",[1922,1926,1927],{},"Value",[1922,1929,1930],{},"Description",[1932,1933,1934,1948,1961],"tbody",{},[1919,1935,1936,1941,1945],{},[1937,1938,1939],"td",{},[440,1940,1781],{},[1937,1942,1943],{},[440,1944,1781],{},[1937,1946,1947],{},"Default size, image displays at original dimensions",[1919,1949,1950,1954,1958],{},[1937,1951,1952],{},[440,1953,1806],{},[1937,1955,1956],{},[440,1957,1806],{},[1937,1959,1960],{},"Scale to cover entire element, may crop",[1919,1962,1963,1967,1971],{},[1937,1964,1965],{},[440,1966,1830],{},[1937,1968,1969],{},[440,1970,1830],{},[1937,1972,1973],{},"Scale to fit within element, may leave gaps",[414,1975,1977],{"id":1976},"usebackgroundpositionutility",[440,1978,1979],{},"useBackgroundPositionUtility",[418,1981,469,1982,1985],{},[440,1983,1984],{},"useBackgroundPositionUtility()"," function creates utility classes for positioning background images.",[475,1987,1988,2085,2308],{},[478,1989,1990],{"icon":480,"label":481},[483,1991,1993],{"className":485,"code":1992,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport { useBackgroundPositionUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\n// Uses built-in defaults for all position combinations\nuseBackgroundPositionUtility(s);\n\nexport default s;\n",[440,1994,1995,2015,2036,2040,2054,2058,2063,2071,2075],{"__ignoreMap":489},[493,1996,1997,1999,2001,2003,2005,2007,2009,2011,2013],{"class":495,"line":496},[493,1998,500],{"class":499},[493,2000,504],{"class":503},[493,2002,508],{"class":507},[493,2004,511],{"class":503},[493,2006,514],{"class":499},[493,2008,517],{"class":503},[493,2010,521],{"class":520},[493,2012,524],{"class":503},[493,2014,527],{"class":503},[493,2016,2017,2019,2021,2024,2026,2028,2030,2032,2034],{"class":495,"line":530},[493,2018,500],{"class":499},[493,2020,504],{"class":503},[493,2022,2023],{"class":507}," useBackgroundPositionUtility",[493,2025,511],{"class":503},[493,2027,514],{"class":499},[493,2029,517],{"class":503},[493,2031,546],{"class":520},[493,2033,524],{"class":503},[493,2035,527],{"class":503},[493,2037,2038],{"class":495,"line":553},[493,2039,578],{"emptyLinePlaceholder":206},[493,2041,2042,2044,2046,2048,2050,2052],{"class":495,"line":575},[493,2043,585],{"class":584},[493,2045,588],{"class":507},[493,2047,591],{"class":503},[493,2049,508],{"class":594},[493,2051,597],{"class":507},[493,2053,527],{"class":503},[493,2055,2056],{"class":495,"line":581},[493,2057,578],{"emptyLinePlaceholder":206},[493,2059,2060],{"class":495,"line":602},[493,2061,2062],{"class":631},"// Uses built-in defaults for all position combinations\n",[493,2064,2065,2067,2069],{"class":495,"line":623},[493,2066,1979],{"class":594},[493,2068,1746],{"class":507},[493,2070,527],{"class":503},[493,2072,2073],{"class":495,"line":628},[493,2074,578],{"emptyLinePlaceholder":206},[493,2076,2077,2079,2081,2083],{"class":495,"line":635},[493,2078,873],{"class":499},[493,2080,876],{"class":499},[493,2082,618],{"class":507},[493,2084,527],{"class":503},[478,2086,2087],{"icon":140,"label":883},[483,2088,2090],{"className":886,"code":2089,"filename":888,"language":889,"meta":489,"style":489},"._background-position\\:bottom { background-position: bottom; }\n._background-position\\:center { background-position: center; }\n._background-position\\:left { background-position: left; }\n._background-position\\:left-bottom { background-position: left bottom; }\n._background-position\\:left-top { background-position: left top; }\n._background-position\\:right { background-position: right; }\n._background-position\\:right-bottom { background-position: right bottom; }\n._background-position\\:right-top { background-position: right top; }\n._background-position\\:top { background-position: top; }\n",[440,2091,2092,2117,2141,2165,2189,2213,2236,2260,2284],{"__ignoreMap":489},[493,2093,2094,2096,2099,2101,2104,2106,2109,2111,2113,2115],{"class":495,"line":496},[493,2095,972],{"class":503},[493,2097,2098],{"class":975},"_background-position",[493,2100,979],{"class":507},[493,2102,2103],{"class":975},"bottom",[493,2105,504],{"class":503},[493,2107,2108],{"class":986}," background-position",[493,2110,672],{"class":503},[493,2112,1568],{"class":507},[493,2114,995],{"class":503},[493,2116,998],{"class":503},[493,2118,2119,2121,2123,2125,2128,2130,2132,2134,2137,2139],{"class":495,"line":530},[493,2120,972],{"class":503},[493,2122,2098],{"class":975},[493,2124,979],{"class":507},[493,2126,2127],{"class":975},"center",[493,2129,504],{"class":503},[493,2131,2108],{"class":986},[493,2133,672],{"class":503},[493,2135,2136],{"class":507}," center",[493,2138,995],{"class":503},[493,2140,998],{"class":503},[493,2142,2143,2145,2147,2149,2152,2154,2156,2158,2161,2163],{"class":495,"line":553},[493,2144,972],{"class":503},[493,2146,2098],{"class":975},[493,2148,979],{"class":507},[493,2150,2151],{"class":975},"left",[493,2153,504],{"class":503},[493,2155,2108],{"class":986},[493,2157,672],{"class":503},[493,2159,2160],{"class":507}," left",[493,2162,995],{"class":503},[493,2164,998],{"class":503},[493,2166,2167,2169,2171,2173,2176,2178,2180,2182,2185,2187],{"class":495,"line":575},[493,2168,972],{"class":503},[493,2170,2098],{"class":975},[493,2172,979],{"class":507},[493,2174,2175],{"class":975},"left-bottom",[493,2177,504],{"class":503},[493,2179,2108],{"class":986},[493,2181,672],{"class":503},[493,2183,2184],{"class":507}," left bottom",[493,2186,995],{"class":503},[493,2188,998],{"class":503},[493,2190,2191,2193,2195,2197,2200,2202,2204,2206,2209,2211],{"class":495,"line":581},[493,2192,972],{"class":503},[493,2194,2098],{"class":975},[493,2196,979],{"class":507},[493,2198,2199],{"class":975},"left-top",[493,2201,504],{"class":503},[493,2203,2108],{"class":986},[493,2205,672],{"class":503},[493,2207,2208],{"class":507}," left top",[493,2210,995],{"class":503},[493,2212,998],{"class":503},[493,2214,2215,2217,2219,2221,2224,2226,2228,2230,2232,2234],{"class":495,"line":602},[493,2216,972],{"class":503},[493,2218,2098],{"class":975},[493,2220,979],{"class":507},[493,2222,2223],{"class":975},"right",[493,2225,504],{"class":503},[493,2227,2108],{"class":986},[493,2229,672],{"class":503},[493,2231,1527],{"class":507},[493,2233,995],{"class":503},[493,2235,998],{"class":503},[493,2237,2238,2240,2242,2244,2247,2249,2251,2253,2256,2258],{"class":495,"line":623},[493,2239,972],{"class":503},[493,2241,2098],{"class":975},[493,2243,979],{"class":507},[493,2245,2246],{"class":975},"right-bottom",[493,2248,504],{"class":503},[493,2250,2108],{"class":986},[493,2252,672],{"class":503},[493,2254,2255],{"class":507}," right bottom",[493,2257,995],{"class":503},[493,2259,998],{"class":503},[493,2261,2262,2264,2266,2268,2271,2273,2275,2277,2280,2282],{"class":495,"line":628},[493,2263,972],{"class":503},[493,2265,2098],{"class":975},[493,2267,979],{"class":507},[493,2269,2270],{"class":975},"right-top",[493,2272,504],{"class":503},[493,2274,2108],{"class":986},[493,2276,672],{"class":503},[493,2278,2279],{"class":507}," right top",[493,2281,995],{"class":503},[493,2283,998],{"class":503},[493,2285,2286,2288,2290,2292,2295,2297,2299,2301,2304,2306],{"class":495,"line":635},[493,2287,972],{"class":503},[493,2289,2098],{"class":975},[493,2291,979],{"class":507},[493,2293,2294],{"class":975},"top",[493,2296,504],{"class":503},[493,2298,2108],{"class":986},[493,2300,672],{"class":503},[493,2302,2303],{"class":507}," top",[493,2305,995],{"class":503},[493,2307,998],{"class":503},[478,2309,2310],{"icon":1159,"label":1160},[483,2311,2313],{"className":1163,"code":2312,"language":1165,"meta":489,"style":489},"\u003Cdiv class=\"_background-position:center\">Centered background\u003C/div>\n\u003Cdiv class=\"_background-position:top\">Top-aligned background\u003C/div>\n\u003Cdiv class=\"_background-position:right-bottom\">Bottom-right background\u003C/div>\n",[440,2314,2315,2343,2371],{"__ignoreMap":489},[493,2316,2317,2319,2321,2323,2325,2327,2330,2332,2334,2337,2339,2341],{"class":495,"line":496},[493,2318,1172],{"class":503},[493,2320,1175],{"class":668},[493,2322,1178],{"class":584},[493,2324,591],{"class":503},[493,2326,524],{"class":503},[493,2328,2329],{"class":520},"_background-position:center",[493,2331,524],{"class":503},[493,2333,1190],{"class":503},[493,2335,2336],{"class":507},"Centered background",[493,2338,1196],{"class":503},[493,2340,1175],{"class":668},[493,2342,1201],{"class":503},[493,2344,2345,2347,2349,2351,2353,2355,2358,2360,2362,2365,2367,2369],{"class":495,"line":530},[493,2346,1172],{"class":503},[493,2348,1175],{"class":668},[493,2350,1178],{"class":584},[493,2352,591],{"class":503},[493,2354,524],{"class":503},[493,2356,2357],{"class":520},"_background-position:top",[493,2359,524],{"class":503},[493,2361,1190],{"class":503},[493,2363,2364],{"class":507},"Top-aligned background",[493,2366,1196],{"class":503},[493,2368,1175],{"class":668},[493,2370,1201],{"class":503},[493,2372,2373,2375,2377,2379,2381,2383,2386,2388,2390,2393,2395,2397],{"class":495,"line":553},[493,2374,1172],{"class":503},[493,2376,1175],{"class":668},[493,2378,1178],{"class":584},[493,2380,591],{"class":503},[493,2382,524],{"class":503},[493,2384,2385],{"class":520},"_background-position:right-bottom",[493,2387,524],{"class":503},[493,2389,1190],{"class":503},[493,2391,2392],{"class":507},"Bottom-right background",[493,2394,1196],{"class":503},[493,2396,1175],{"class":668},[493,2398,1201],{"class":503},[1908,2400,1911],{"id":2401},"default-values-1",[1913,2403,2404,2414],{},[1916,2405,2406],{},[1919,2407,2408,2410,2412],{},[1922,2409,1924],{},[1922,2411,1927],{},[1922,2413,1930],{},[1932,2415,2416,2429,2442,2455,2469,2483,2496,2510,2524],{},[1919,2417,2418,2422,2426],{},[1937,2419,2420],{},[440,2421,2103],{},[1937,2423,2424],{},[440,2425,2103],{},[1937,2427,2428],{},"Align to bottom center",[1919,2430,2431,2435,2439],{},[1937,2432,2433],{},[440,2434,2127],{},[1937,2436,2437],{},[440,2438,2127],{},[1937,2440,2441],{},"Center horizontally and vertically",[1919,2443,2444,2448,2452],{},[1937,2445,2446],{},[440,2447,2151],{},[1937,2449,2450],{},[440,2451,2151],{},[1937,2453,2454],{},"Align to left center",[1919,2456,2457,2461,2466],{},[1937,2458,2459],{},[440,2460,2175],{},[1937,2462,2463],{},[440,2464,2465],{},"left bottom",[1937,2467,2468],{},"Align to bottom left corner",[1919,2470,2471,2475,2480],{},[1937,2472,2473],{},[440,2474,2199],{},[1937,2476,2477],{},[440,2478,2479],{},"left top",[1937,2481,2482],{},"Align to top left corner",[1919,2484,2485,2489,2493],{},[1937,2486,2487],{},[440,2488,2223],{},[1937,2490,2491],{},[440,2492,2223],{},[1937,2494,2495],{},"Align to right center",[1919,2497,2498,2502,2507],{},[1937,2499,2500],{},[440,2501,2246],{},[1937,2503,2504],{},[440,2505,2506],{},"right bottom",[1937,2508,2509],{},"Align to bottom right corner",[1919,2511,2512,2516,2521],{},[1937,2513,2514],{},[440,2515,2270],{},[1937,2517,2518],{},[440,2519,2520],{},"right top",[1937,2522,2523],{},"Align to top right corner",[1919,2525,2526,2530,2534],{},[1937,2527,2528],{},[440,2529,2294],{},[1937,2531,2532],{},[440,2533,2294],{},[1937,2535,2536],{},"Align to top center",[414,2538,2540],{"id":2539},"usebackgroundrepeatutility",[440,2541,2542],{},"useBackgroundRepeatUtility",[418,2544,469,2545,2548],{},[440,2546,2547],{},"useBackgroundRepeatUtility()"," function creates utility classes for controlling how background images repeat.",[475,2550,2551,2758,2905],{},[478,2552,2553],{"icon":480,"label":481},[483,2554,2556],{"className":485,"code":2555,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport { useBackgroundRepeatUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseBackgroundRepeatUtility(s, {\n    repeat: 'repeat',\n    'no-repeat': 'no-repeat',\n    'repeat-x': 'repeat-x',\n    'repeat-y': 'repeat-y',\n    round: 'round',\n    space: 'space',\n});\n\nexport default s;\n",[440,2557,2558,2578,2599,2603,2617,2621,2631,2647,2666,2685,2704,2720,2736,2744,2748],{"__ignoreMap":489},[493,2559,2560,2562,2564,2566,2568,2570,2572,2574,2576],{"class":495,"line":496},[493,2561,500],{"class":499},[493,2563,504],{"class":503},[493,2565,508],{"class":507},[493,2567,511],{"class":503},[493,2569,514],{"class":499},[493,2571,517],{"class":503},[493,2573,521],{"class":520},[493,2575,524],{"class":503},[493,2577,527],{"class":503},[493,2579,2580,2582,2584,2587,2589,2591,2593,2595,2597],{"class":495,"line":530},[493,2581,500],{"class":499},[493,2583,504],{"class":503},[493,2585,2586],{"class":507}," useBackgroundRepeatUtility",[493,2588,511],{"class":503},[493,2590,514],{"class":499},[493,2592,517],{"class":503},[493,2594,546],{"class":520},[493,2596,524],{"class":503},[493,2598,527],{"class":503},[493,2600,2601],{"class":495,"line":553},[493,2602,578],{"emptyLinePlaceholder":206},[493,2604,2605,2607,2609,2611,2613,2615],{"class":495,"line":575},[493,2606,585],{"class":584},[493,2608,588],{"class":507},[493,2610,591],{"class":503},[493,2612,508],{"class":594},[493,2614,597],{"class":507},[493,2616,527],{"class":503},[493,2618,2619],{"class":495,"line":581},[493,2620,578],{"emptyLinePlaceholder":206},[493,2622,2623,2625,2627,2629],{"class":495,"line":602},[493,2624,2542],{"class":594},[493,2626,657],{"class":507},[493,2628,645],{"class":503},[493,2630,662],{"class":503},[493,2632,2633,2636,2638,2640,2643,2645],{"class":495,"line":623},[493,2634,2635],{"class":668},"    repeat",[493,2637,672],{"class":503},[493,2639,675],{"class":503},[493,2641,2642],{"class":520},"repeat",[493,2644,681],{"class":503},[493,2646,684],{"class":503},[493,2648,2649,2651,2654,2656,2658,2660,2662,2664],{"class":495,"line":628},[493,2650,1412],{"class":503},[493,2652,2653],{"class":668},"no-repeat",[493,2655,681],{"class":503},[493,2657,672],{"class":503},[493,2659,675],{"class":503},[493,2661,2653],{"class":520},[493,2663,681],{"class":503},[493,2665,684],{"class":503},[493,2667,2668,2670,2673,2675,2677,2679,2681,2683],{"class":495,"line":635},[493,2669,1412],{"class":503},[493,2671,2672],{"class":668},"repeat-x",[493,2674,681],{"class":503},[493,2676,672],{"class":503},[493,2678,675],{"class":503},[493,2680,2672],{"class":520},[493,2682,681],{"class":503},[493,2684,684],{"class":503},[493,2686,2687,2689,2692,2694,2696,2698,2700,2702],{"class":495,"line":665},[493,2688,1412],{"class":503},[493,2690,2691],{"class":668},"repeat-y",[493,2693,681],{"class":503},[493,2695,672],{"class":503},[493,2697,675],{"class":503},[493,2699,2691],{"class":520},[493,2701,681],{"class":503},[493,2703,684],{"class":503},[493,2705,2706,2709,2711,2713,2716,2718],{"class":495,"line":687},[493,2707,2708],{"class":668},"    round",[493,2710,672],{"class":503},[493,2712,675],{"class":503},[493,2714,2715],{"class":520},"round",[493,2717,681],{"class":503},[493,2719,684],{"class":503},[493,2721,2722,2725,2727,2729,2732,2734],{"class":495,"line":704},[493,2723,2724],{"class":668},"    space",[493,2726,672],{"class":503},[493,2728,675],{"class":503},[493,2730,2731],{"class":520},"space",[493,2733,681],{"class":503},[493,2735,684],{"class":503},[493,2737,2738,2740,2742],{"class":495,"line":720},[493,2739,612],{"class":503},[493,2741,715],{"class":507},[493,2743,527],{"class":503},[493,2745,2746],{"class":495,"line":725},[493,2747,578],{"emptyLinePlaceholder":206},[493,2749,2750,2752,2754,2756],{"class":495,"line":731},[493,2751,873],{"class":499},[493,2753,876],{"class":499},[493,2755,618],{"class":507},[493,2757,527],{"class":503},[478,2759,2760],{"icon":140,"label":883},[483,2761,2763],{"className":886,"code":2762,"filename":888,"language":889,"meta":489,"style":489},"._background-repeat\\:repeat { background-repeat: repeat; }\n._background-repeat\\:no-repeat { background-repeat: no-repeat; }\n._background-repeat\\:repeat-x { background-repeat: repeat-x; }\n._background-repeat\\:repeat-y { background-repeat: repeat-y; }\n._background-repeat\\:round { background-repeat: round; }\n._background-repeat\\:space { background-repeat: space; }\n",[440,2764,2765,2790,2813,2836,2859,2882],{"__ignoreMap":489},[493,2766,2767,2769,2772,2774,2776,2778,2781,2783,2786,2788],{"class":495,"line":496},[493,2768,972],{"class":503},[493,2770,2771],{"class":975},"_background-repeat",[493,2773,979],{"class":507},[493,2775,2642],{"class":975},[493,2777,504],{"class":503},[493,2779,2780],{"class":986}," background-repeat",[493,2782,672],{"class":503},[493,2784,2785],{"class":507}," repeat",[493,2787,995],{"class":503},[493,2789,998],{"class":503},[493,2791,2792,2794,2796,2798,2800,2802,2804,2806,2809,2811],{"class":495,"line":530},[493,2793,972],{"class":503},[493,2795,2771],{"class":975},[493,2797,979],{"class":507},[493,2799,2653],{"class":975},[493,2801,504],{"class":503},[493,2803,2780],{"class":986},[493,2805,672],{"class":503},[493,2807,2808],{"class":507}," no-repeat",[493,2810,995],{"class":503},[493,2812,998],{"class":503},[493,2814,2815,2817,2819,2821,2823,2825,2827,2829,2832,2834],{"class":495,"line":553},[493,2816,972],{"class":503},[493,2818,2771],{"class":975},[493,2820,979],{"class":507},[493,2822,2672],{"class":975},[493,2824,504],{"class":503},[493,2826,2780],{"class":986},[493,2828,672],{"class":503},[493,2830,2831],{"class":507}," repeat-x",[493,2833,995],{"class":503},[493,2835,998],{"class":503},[493,2837,2838,2840,2842,2844,2846,2848,2850,2852,2855,2857],{"class":495,"line":575},[493,2839,972],{"class":503},[493,2841,2771],{"class":975},[493,2843,979],{"class":507},[493,2845,2691],{"class":975},[493,2847,504],{"class":503},[493,2849,2780],{"class":986},[493,2851,672],{"class":503},[493,2853,2854],{"class":507}," repeat-y",[493,2856,995],{"class":503},[493,2858,998],{"class":503},[493,2860,2861,2863,2865,2867,2869,2871,2873,2875,2878,2880],{"class":495,"line":581},[493,2862,972],{"class":503},[493,2864,2771],{"class":975},[493,2866,979],{"class":507},[493,2868,2715],{"class":975},[493,2870,504],{"class":503},[493,2872,2780],{"class":986},[493,2874,672],{"class":503},[493,2876,2877],{"class":507}," round",[493,2879,995],{"class":503},[493,2881,998],{"class":503},[493,2883,2884,2886,2888,2890,2892,2894,2896,2898,2901,2903],{"class":495,"line":602},[493,2885,972],{"class":503},[493,2887,2771],{"class":975},[493,2889,979],{"class":507},[493,2891,2731],{"class":975},[493,2893,504],{"class":503},[493,2895,2780],{"class":986},[493,2897,672],{"class":503},[493,2899,2900],{"class":507}," space",[493,2902,995],{"class":503},[493,2904,998],{"class":503},[478,2906,2907],{"icon":1159,"label":1160},[483,2908,2910],{"className":1163,"code":2909,"language":1165,"meta":489,"style":489},"\u003Cdiv class=\"_background-repeat:no-repeat\">Single background image\u003C/div>\n\u003Cdiv class=\"_background-repeat:repeat-x\">Horizontally repeating pattern\u003C/div>\n",[440,2911,2912,2940],{"__ignoreMap":489},[493,2913,2914,2916,2918,2920,2922,2924,2927,2929,2931,2934,2936,2938],{"class":495,"line":496},[493,2915,1172],{"class":503},[493,2917,1175],{"class":668},[493,2919,1178],{"class":584},[493,2921,591],{"class":503},[493,2923,524],{"class":503},[493,2925,2926],{"class":520},"_background-repeat:no-repeat",[493,2928,524],{"class":503},[493,2930,1190],{"class":503},[493,2932,2933],{"class":507},"Single background image",[493,2935,1196],{"class":503},[493,2937,1175],{"class":668},[493,2939,1201],{"class":503},[493,2941,2942,2944,2946,2948,2950,2952,2955,2957,2959,2962,2964,2966],{"class":495,"line":530},[493,2943,1172],{"class":503},[493,2945,1175],{"class":668},[493,2947,1178],{"class":584},[493,2949,591],{"class":503},[493,2951,524],{"class":503},[493,2953,2954],{"class":520},"_background-repeat:repeat-x",[493,2956,524],{"class":503},[493,2958,1190],{"class":503},[493,2960,2961],{"class":507},"Horizontally repeating pattern",[493,2963,1196],{"class":503},[493,2965,1175],{"class":668},[493,2967,1201],{"class":503},[414,2969,2971],{"id":2970},"usebackgroundattachmentutility",[440,2972,2973],{},"useBackgroundAttachmentUtility",[418,2975,469,2976,2979],{},[440,2977,2978],{},"useBackgroundAttachmentUtility()"," function creates utility classes for controlling how background images scroll.",[475,2981,2982,3079,3160],{},[478,2983,2984],{"icon":480,"label":481},[483,2985,2987],{"className":485,"code":2986,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport { useBackgroundAttachmentUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\n// Uses built-in defaults: fixed, local, scroll\nuseBackgroundAttachmentUtility(s);\n\nexport default s;\n",[440,2988,2989,3009,3030,3034,3048,3052,3057,3065,3069],{"__ignoreMap":489},[493,2990,2991,2993,2995,2997,2999,3001,3003,3005,3007],{"class":495,"line":496},[493,2992,500],{"class":499},[493,2994,504],{"class":503},[493,2996,508],{"class":507},[493,2998,511],{"class":503},[493,3000,514],{"class":499},[493,3002,517],{"class":503},[493,3004,521],{"class":520},[493,3006,524],{"class":503},[493,3008,527],{"class":503},[493,3010,3011,3013,3015,3018,3020,3022,3024,3026,3028],{"class":495,"line":530},[493,3012,500],{"class":499},[493,3014,504],{"class":503},[493,3016,3017],{"class":507}," useBackgroundAttachmentUtility",[493,3019,511],{"class":503},[493,3021,514],{"class":499},[493,3023,517],{"class":503},[493,3025,546],{"class":520},[493,3027,524],{"class":503},[493,3029,527],{"class":503},[493,3031,3032],{"class":495,"line":553},[493,3033,578],{"emptyLinePlaceholder":206},[493,3035,3036,3038,3040,3042,3044,3046],{"class":495,"line":575},[493,3037,585],{"class":584},[493,3039,588],{"class":507},[493,3041,591],{"class":503},[493,3043,508],{"class":594},[493,3045,597],{"class":507},[493,3047,527],{"class":503},[493,3049,3050],{"class":495,"line":581},[493,3051,578],{"emptyLinePlaceholder":206},[493,3053,3054],{"class":495,"line":602},[493,3055,3056],{"class":631},"// Uses built-in defaults: fixed, local, scroll\n",[493,3058,3059,3061,3063],{"class":495,"line":623},[493,3060,2973],{"class":594},[493,3062,1746],{"class":507},[493,3064,527],{"class":503},[493,3066,3067],{"class":495,"line":628},[493,3068,578],{"emptyLinePlaceholder":206},[493,3070,3071,3073,3075,3077],{"class":495,"line":635},[493,3072,873],{"class":499},[493,3074,876],{"class":499},[493,3076,618],{"class":507},[493,3078,527],{"class":503},[478,3080,3081],{"icon":140,"label":883},[483,3082,3084],{"className":886,"code":3083,"filename":888,"language":889,"meta":489,"style":489},"._background-attachment\\:fixed { background-attachment: fixed; }\n._background-attachment\\:local { background-attachment: local; }\n._background-attachment\\:scroll { background-attachment: scroll; }\n",[440,3085,3086,3112,3136],{"__ignoreMap":489},[493,3087,3088,3090,3093,3095,3098,3100,3103,3105,3108,3110],{"class":495,"line":496},[493,3089,972],{"class":503},[493,3091,3092],{"class":975},"_background-attachment",[493,3094,979],{"class":507},[493,3096,3097],{"class":975},"fixed",[493,3099,504],{"class":503},[493,3101,3102],{"class":986}," background-attachment",[493,3104,672],{"class":503},[493,3106,3107],{"class":507}," fixed",[493,3109,995],{"class":503},[493,3111,998],{"class":503},[493,3113,3114,3116,3118,3120,3123,3125,3127,3129,3132,3134],{"class":495,"line":530},[493,3115,972],{"class":503},[493,3117,3092],{"class":975},[493,3119,979],{"class":507},[493,3121,3122],{"class":975},"local",[493,3124,504],{"class":503},[493,3126,3102],{"class":986},[493,3128,672],{"class":503},[493,3130,3131],{"class":507}," local",[493,3133,995],{"class":503},[493,3135,998],{"class":503},[493,3137,3138,3140,3142,3144,3147,3149,3151,3153,3156,3158],{"class":495,"line":553},[493,3139,972],{"class":503},[493,3141,3092],{"class":975},[493,3143,979],{"class":507},[493,3145,3146],{"class":975},"scroll",[493,3148,504],{"class":503},[493,3150,3102],{"class":986},[493,3152,672],{"class":503},[493,3154,3155],{"class":507}," scroll",[493,3157,995],{"class":503},[493,3159,998],{"class":503},[478,3161,3162],{"icon":1159,"label":1160},[483,3163,3165],{"className":1163,"code":3164,"language":1165,"meta":489,"style":489},"\u003Cdiv class=\"_background-attachment:fixed\">Parallax-style fixed background\u003C/div>\n\u003Cdiv class=\"_background-attachment:scroll\">Normal scrolling background\u003C/div>\n",[440,3166,3167,3195],{"__ignoreMap":489},[493,3168,3169,3171,3173,3175,3177,3179,3182,3184,3186,3189,3191,3193],{"class":495,"line":496},[493,3170,1172],{"class":503},[493,3172,1175],{"class":668},[493,3174,1178],{"class":584},[493,3176,591],{"class":503},[493,3178,524],{"class":503},[493,3180,3181],{"class":520},"_background-attachment:fixed",[493,3183,524],{"class":503},[493,3185,1190],{"class":503},[493,3187,3188],{"class":507},"Parallax-style fixed background",[493,3190,1196],{"class":503},[493,3192,1175],{"class":668},[493,3194,1201],{"class":503},[493,3196,3197,3199,3201,3203,3205,3207,3210,3212,3214,3217,3219,3221],{"class":495,"line":530},[493,3198,1172],{"class":503},[493,3200,1175],{"class":668},[493,3202,1178],{"class":584},[493,3204,591],{"class":503},[493,3206,524],{"class":503},[493,3208,3209],{"class":520},"_background-attachment:scroll",[493,3211,524],{"class":503},[493,3213,1190],{"class":503},[493,3215,3216],{"class":507},"Normal scrolling background",[493,3218,1196],{"class":503},[493,3220,1175],{"class":668},[493,3222,1201],{"class":503},[1908,3224,1911],{"id":3225},"default-values-2",[1913,3227,3228,3238],{},[1916,3229,3230],{},[1919,3231,3232,3234,3236],{},[1922,3233,1924],{},[1922,3235,1927],{},[1922,3237,1930],{},[1932,3239,3240,3253,3266],{},[1919,3241,3242,3246,3250],{},[1937,3243,3244],{},[440,3245,3097],{},[1937,3247,3248],{},[440,3249,3097],{},[1937,3251,3252],{},"Background stays fixed relative to viewport",[1919,3254,3255,3259,3263],{},[1937,3256,3257],{},[440,3258,3122],{},[1937,3260,3261],{},[440,3262,3122],{},[1937,3264,3265],{},"Background scrolls with element's content",[1919,3267,3268,3272,3276],{},[1937,3269,3270],{},[440,3271,3146],{},[1937,3273,3274],{},[440,3275,3146],{},[1937,3277,3278],{},"Background scrolls with the element",[414,3280,3282],{"id":3281},"usebackgroundcliputility",[440,3283,3284],{},"useBackgroundClipUtility",[418,3286,469,3287,3290],{},[440,3288,3289],{},"useBackgroundClipUtility()"," function creates utility classes for controlling how far the background extends.",[475,3292,3293,3459,3563],{},[478,3294,3295],{"icon":480,"label":481},[483,3296,3298],{"className":485,"code":3297,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport { useBackgroundClipUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseBackgroundClipUtility(s, {\n    border: 'border-box',\n    padding: 'padding-box',\n    content: 'content-box',\n    text: 'text',\n});\n\nexport default s;\n",[440,3299,3300,3320,3341,3345,3359,3363,3373,3389,3405,3421,3437,3445,3449],{"__ignoreMap":489},[493,3301,3302,3304,3306,3308,3310,3312,3314,3316,3318],{"class":495,"line":496},[493,3303,500],{"class":499},[493,3305,504],{"class":503},[493,3307,508],{"class":507},[493,3309,511],{"class":503},[493,3311,514],{"class":499},[493,3313,517],{"class":503},[493,3315,521],{"class":520},[493,3317,524],{"class":503},[493,3319,527],{"class":503},[493,3321,3322,3324,3326,3329,3331,3333,3335,3337,3339],{"class":495,"line":530},[493,3323,500],{"class":499},[493,3325,504],{"class":503},[493,3327,3328],{"class":507}," useBackgroundClipUtility",[493,3330,511],{"class":503},[493,3332,514],{"class":499},[493,3334,517],{"class":503},[493,3336,546],{"class":520},[493,3338,524],{"class":503},[493,3340,527],{"class":503},[493,3342,3343],{"class":495,"line":553},[493,3344,578],{"emptyLinePlaceholder":206},[493,3346,3347,3349,3351,3353,3355,3357],{"class":495,"line":575},[493,3348,585],{"class":584},[493,3350,588],{"class":507},[493,3352,591],{"class":503},[493,3354,508],{"class":594},[493,3356,597],{"class":507},[493,3358,527],{"class":503},[493,3360,3361],{"class":495,"line":581},[493,3362,578],{"emptyLinePlaceholder":206},[493,3364,3365,3367,3369,3371],{"class":495,"line":602},[493,3366,3284],{"class":594},[493,3368,657],{"class":507},[493,3370,645],{"class":503},[493,3372,662],{"class":503},[493,3374,3375,3378,3380,3382,3385,3387],{"class":495,"line":623},[493,3376,3377],{"class":668},"    border",[493,3379,672],{"class":503},[493,3381,675],{"class":503},[493,3383,3384],{"class":520},"border-box",[493,3386,681],{"class":503},[493,3388,684],{"class":503},[493,3390,3391,3394,3396,3398,3401,3403],{"class":495,"line":628},[493,3392,3393],{"class":668},"    padding",[493,3395,672],{"class":503},[493,3397,675],{"class":503},[493,3399,3400],{"class":520},"padding-box",[493,3402,681],{"class":503},[493,3404,684],{"class":503},[493,3406,3407,3410,3412,3414,3417,3419],{"class":495,"line":635},[493,3408,3409],{"class":668},"    content",[493,3411,672],{"class":503},[493,3413,675],{"class":503},[493,3415,3416],{"class":520},"content-box",[493,3418,681],{"class":503},[493,3420,684],{"class":503},[493,3422,3423,3426,3428,3430,3433,3435],{"class":495,"line":665},[493,3424,3425],{"class":668},"    text",[493,3427,672],{"class":503},[493,3429,675],{"class":503},[493,3431,3432],{"class":520},"text",[493,3434,681],{"class":503},[493,3436,684],{"class":503},[493,3438,3439,3441,3443],{"class":495,"line":687},[493,3440,612],{"class":503},[493,3442,715],{"class":507},[493,3444,527],{"class":503},[493,3446,3447],{"class":495,"line":704},[493,3448,578],{"emptyLinePlaceholder":206},[493,3450,3451,3453,3455,3457],{"class":495,"line":720},[493,3452,873],{"class":499},[493,3454,876],{"class":499},[493,3456,618],{"class":507},[493,3458,527],{"class":503},[478,3460,3461],{"icon":140,"label":883},[483,3462,3464],{"className":886,"code":3463,"filename":888,"language":889,"meta":489,"style":489},"._background-clip\\:border { background-clip: border-box; }\n._background-clip\\:padding { background-clip: padding-box; }\n._background-clip\\:content { background-clip: content-box; }\n._background-clip\\:text { background-clip: text; }\n",[440,3465,3466,3492,3516,3540],{"__ignoreMap":489},[493,3467,3468,3470,3473,3475,3478,3480,3483,3485,3488,3490],{"class":495,"line":496},[493,3469,972],{"class":503},[493,3471,3472],{"class":975},"_background-clip",[493,3474,979],{"class":507},[493,3476,3477],{"class":975},"border",[493,3479,504],{"class":503},[493,3481,3482],{"class":986}," background-clip",[493,3484,672],{"class":503},[493,3486,3487],{"class":507}," border-box",[493,3489,995],{"class":503},[493,3491,998],{"class":503},[493,3493,3494,3496,3498,3500,3503,3505,3507,3509,3512,3514],{"class":495,"line":530},[493,3495,972],{"class":503},[493,3497,3472],{"class":975},[493,3499,979],{"class":507},[493,3501,3502],{"class":975},"padding",[493,3504,504],{"class":503},[493,3506,3482],{"class":986},[493,3508,672],{"class":503},[493,3510,3511],{"class":507}," padding-box",[493,3513,995],{"class":503},[493,3515,998],{"class":503},[493,3517,3518,3520,3522,3524,3527,3529,3531,3533,3536,3538],{"class":495,"line":553},[493,3519,972],{"class":503},[493,3521,3472],{"class":975},[493,3523,979],{"class":507},[493,3525,3526],{"class":975},"content",[493,3528,504],{"class":503},[493,3530,3482],{"class":986},[493,3532,672],{"class":503},[493,3534,3535],{"class":507}," content-box",[493,3537,995],{"class":503},[493,3539,998],{"class":503},[493,3541,3542,3544,3546,3548,3550,3552,3554,3556,3559,3561],{"class":495,"line":575},[493,3543,972],{"class":503},[493,3545,3472],{"class":975},[493,3547,979],{"class":507},[493,3549,3432],{"class":975},[493,3551,504],{"class":503},[493,3553,3482],{"class":986},[493,3555,672],{"class":503},[493,3557,3558],{"class":507}," text",[493,3560,995],{"class":503},[493,3562,998],{"class":503},[478,3564,3565],{"icon":1159,"label":1160},[483,3566,3568],{"className":1163,"code":3567,"language":1165,"meta":489,"style":489},"\u003Cdiv class=\"_background-clip:padding\">Clip to padding box\u003C/div>\n\u003Ch1 class=\"_background-clip:text _background-image:gradient-primary\" style=\"color: transparent;\">\n    Gradient text\n\u003C/h1>\n",[440,3569,3570,3598,3630,3635],{"__ignoreMap":489},[493,3571,3572,3574,3576,3578,3580,3582,3585,3587,3589,3592,3594,3596],{"class":495,"line":496},[493,3573,1172],{"class":503},[493,3575,1175],{"class":668},[493,3577,1178],{"class":584},[493,3579,591],{"class":503},[493,3581,524],{"class":503},[493,3583,3584],{"class":520},"_background-clip:padding",[493,3586,524],{"class":503},[493,3588,1190],{"class":503},[493,3590,3591],{"class":507},"Clip to padding box",[493,3593,1196],{"class":503},[493,3595,1175],{"class":668},[493,3597,1201],{"class":503},[493,3599,3600,3602,3605,3607,3609,3611,3614,3616,3619,3621,3623,3626,3628],{"class":495,"line":530},[493,3601,1172],{"class":503},[493,3603,3604],{"class":668},"h1",[493,3606,1178],{"class":584},[493,3608,591],{"class":503},[493,3610,524],{"class":503},[493,3612,3613],{"class":520},"_background-clip:text _background-image:gradient-primary",[493,3615,524],{"class":503},[493,3617,3618],{"class":584}," style",[493,3620,591],{"class":503},[493,3622,524],{"class":503},[493,3624,3625],{"class":520},"color: transparent;",[493,3627,524],{"class":503},[493,3629,1201],{"class":503},[493,3631,3632],{"class":495,"line":553},[493,3633,3634],{"class":507},"    Gradient text\n",[493,3636,3637,3639,3641],{"class":495,"line":575},[493,3638,1196],{"class":503},[493,3640,3604],{"class":668},[493,3642,1201],{"class":503},[1289,3644,3645,1294,3648,3651],{},[435,3646,3647],{},"Gradient text",[440,3649,3650],{},"background-clip: text"," with a gradient background and transparent text color to create gradient text effects.",[414,3653,3655],{"id":3654},"usebackgroundoriginutility",[440,3656,3657],{},"useBackgroundOriginUtility",[418,3659,469,3660,3663],{},[440,3661,3662],{},"useBackgroundOriginUtility()"," function creates utility classes for setting the background's origin point.",[475,3665,3666,3810,3885],{},[478,3667,3668],{"icon":480,"label":481},[483,3669,3671],{"className":485,"code":3670,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport { useBackgroundOriginUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseBackgroundOriginUtility(s, {\n    border: 'border-box',\n    padding: 'padding-box',\n    content: 'content-box',\n});\n\nexport default s;\n",[440,3672,3673,3693,3714,3718,3732,3736,3746,3760,3774,3788,3796,3800],{"__ignoreMap":489},[493,3674,3675,3677,3679,3681,3683,3685,3687,3689,3691],{"class":495,"line":496},[493,3676,500],{"class":499},[493,3678,504],{"class":503},[493,3680,508],{"class":507},[493,3682,511],{"class":503},[493,3684,514],{"class":499},[493,3686,517],{"class":503},[493,3688,521],{"class":520},[493,3690,524],{"class":503},[493,3692,527],{"class":503},[493,3694,3695,3697,3699,3702,3704,3706,3708,3710,3712],{"class":495,"line":530},[493,3696,500],{"class":499},[493,3698,504],{"class":503},[493,3700,3701],{"class":507}," useBackgroundOriginUtility",[493,3703,511],{"class":503},[493,3705,514],{"class":499},[493,3707,517],{"class":503},[493,3709,546],{"class":520},[493,3711,524],{"class":503},[493,3713,527],{"class":503},[493,3715,3716],{"class":495,"line":553},[493,3717,578],{"emptyLinePlaceholder":206},[493,3719,3720,3722,3724,3726,3728,3730],{"class":495,"line":575},[493,3721,585],{"class":584},[493,3723,588],{"class":507},[493,3725,591],{"class":503},[493,3727,508],{"class":594},[493,3729,597],{"class":507},[493,3731,527],{"class":503},[493,3733,3734],{"class":495,"line":581},[493,3735,578],{"emptyLinePlaceholder":206},[493,3737,3738,3740,3742,3744],{"class":495,"line":602},[493,3739,3657],{"class":594},[493,3741,657],{"class":507},[493,3743,645],{"class":503},[493,3745,662],{"class":503},[493,3747,3748,3750,3752,3754,3756,3758],{"class":495,"line":623},[493,3749,3377],{"class":668},[493,3751,672],{"class":503},[493,3753,675],{"class":503},[493,3755,3384],{"class":520},[493,3757,681],{"class":503},[493,3759,684],{"class":503},[493,3761,3762,3764,3766,3768,3770,3772],{"class":495,"line":628},[493,3763,3393],{"class":668},[493,3765,672],{"class":503},[493,3767,675],{"class":503},[493,3769,3400],{"class":520},[493,3771,681],{"class":503},[493,3773,684],{"class":503},[493,3775,3776,3778,3780,3782,3784,3786],{"class":495,"line":635},[493,3777,3409],{"class":668},[493,3779,672],{"class":503},[493,3781,675],{"class":503},[493,3783,3416],{"class":520},[493,3785,681],{"class":503},[493,3787,684],{"class":503},[493,3789,3790,3792,3794],{"class":495,"line":665},[493,3791,612],{"class":503},[493,3793,715],{"class":507},[493,3795,527],{"class":503},[493,3797,3798],{"class":495,"line":687},[493,3799,578],{"emptyLinePlaceholder":206},[493,3801,3802,3804,3806,3808],{"class":495,"line":704},[493,3803,873],{"class":499},[493,3805,876],{"class":499},[493,3807,618],{"class":507},[493,3809,527],{"class":503},[478,3811,3812],{"icon":140,"label":883},[483,3813,3815],{"className":886,"code":3814,"filename":888,"language":889,"meta":489,"style":489},"._background-origin\\:border { background-origin: border-box; }\n._background-origin\\:padding { background-origin: padding-box; }\n._background-origin\\:content { background-origin: content-box; }\n",[440,3816,3817,3841,3863],{"__ignoreMap":489},[493,3818,3819,3821,3824,3826,3828,3830,3833,3835,3837,3839],{"class":495,"line":496},[493,3820,972],{"class":503},[493,3822,3823],{"class":975},"_background-origin",[493,3825,979],{"class":507},[493,3827,3477],{"class":975},[493,3829,504],{"class":503},[493,3831,3832],{"class":986}," background-origin",[493,3834,672],{"class":503},[493,3836,3487],{"class":507},[493,3838,995],{"class":503},[493,3840,998],{"class":503},[493,3842,3843,3845,3847,3849,3851,3853,3855,3857,3859,3861],{"class":495,"line":530},[493,3844,972],{"class":503},[493,3846,3823],{"class":975},[493,3848,979],{"class":507},[493,3850,3502],{"class":975},[493,3852,504],{"class":503},[493,3854,3832],{"class":986},[493,3856,672],{"class":503},[493,3858,3511],{"class":507},[493,3860,995],{"class":503},[493,3862,998],{"class":503},[493,3864,3865,3867,3869,3871,3873,3875,3877,3879,3881,3883],{"class":495,"line":553},[493,3866,972],{"class":503},[493,3868,3823],{"class":975},[493,3870,979],{"class":507},[493,3872,3526],{"class":975},[493,3874,504],{"class":503},[493,3876,3832],{"class":986},[493,3878,672],{"class":503},[493,3880,3535],{"class":507},[493,3882,995],{"class":503},[493,3884,998],{"class":503},[478,3886,3887],{"icon":1159,"label":1160},[483,3888,3890],{"className":1163,"code":3889,"language":1165,"meta":489,"style":489},"\u003Cdiv class=\"_background-origin:border\">Background starts at border\u003C/div>\n\u003Cdiv class=\"_background-origin:content\">Background starts at content\u003C/div>\n",[440,3891,3892,3920],{"__ignoreMap":489},[493,3893,3894,3896,3898,3900,3902,3904,3907,3909,3911,3914,3916,3918],{"class":495,"line":496},[493,3895,1172],{"class":503},[493,3897,1175],{"class":668},[493,3899,1178],{"class":584},[493,3901,591],{"class":503},[493,3903,524],{"class":503},[493,3905,3906],{"class":520},"_background-origin:border",[493,3908,524],{"class":503},[493,3910,1190],{"class":503},[493,3912,3913],{"class":507},"Background starts at border",[493,3915,1196],{"class":503},[493,3917,1175],{"class":668},[493,3919,1201],{"class":503},[493,3921,3922,3924,3926,3928,3930,3932,3935,3937,3939,3942,3944,3946],{"class":495,"line":530},[493,3923,1172],{"class":503},[493,3925,1175],{"class":668},[493,3927,1178],{"class":584},[493,3929,591],{"class":503},[493,3931,524],{"class":503},[493,3933,3934],{"class":520},"_background-origin:content",[493,3936,524],{"class":503},[493,3938,1190],{"class":503},[493,3940,3941],{"class":507},"Background starts at content",[493,3943,1196],{"class":503},[493,3945,1175],{"class":668},[493,3947,1201],{"class":503},[414,3949,3951],{"id":3950},"examples","Examples",[1908,3953,3955],{"id":3954},"hero-section-with-background-image","Hero Section with Background Image",[475,3957,3958,4218],{},[478,3959,3960],{"icon":480,"label":481},[483,3961,3963],{"className":485,"code":3962,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport {\n    useBackgroundColorUtility,\n    useBackgroundImageUtility,\n    useBackgroundSizeUtility,\n    useBackgroundPositionUtility,\n    useBackgroundRepeatUtility,\n} from \"@styleframe/theme\";\n\nconst s = styleframe();\n\n// Background utilities for hero sections\nuseBackgroundColorUtility(s, {\n    overlay: 'rgba(0, 0, 0, 0.5)',\n});\n\nuseBackgroundImageUtility(s, {\n    hero: 'url(\"/images/hero.jpg\")',\n    none: 'none',\n});\n\nuseBackgroundSizeUtility(s);\nuseBackgroundPositionUtility(s);\nuseBackgroundRepeatUtility(s, { 'no-repeat': 'no-repeat' });\n\nexport default s;\n",[440,3964,3965,3985,3991,3998,4005,4012,4019,4026,4040,4044,4058,4062,4067,4077,4093,4101,4105,4115,4131,4145,4153,4157,4165,4173,4203,4207],{"__ignoreMap":489},[493,3966,3967,3969,3971,3973,3975,3977,3979,3981,3983],{"class":495,"line":496},[493,3968,500],{"class":499},[493,3970,504],{"class":503},[493,3972,508],{"class":507},[493,3974,511],{"class":503},[493,3976,514],{"class":499},[493,3978,517],{"class":503},[493,3980,521],{"class":520},[493,3982,524],{"class":503},[493,3984,527],{"class":503},[493,3986,3987,3989],{"class":495,"line":530},[493,3988,500],{"class":499},[493,3990,662],{"class":503},[493,3992,3993,3996],{"class":495,"line":553},[493,3994,3995],{"class":507},"    useBackgroundColorUtility",[493,3997,684],{"class":503},[493,3999,4000,4003],{"class":495,"line":575},[493,4001,4002],{"class":507},"    useBackgroundImageUtility",[493,4004,684],{"class":503},[493,4006,4007,4010],{"class":495,"line":581},[493,4008,4009],{"class":507},"    useBackgroundSizeUtility",[493,4011,684],{"class":503},[493,4013,4014,4017],{"class":495,"line":602},[493,4015,4016],{"class":507},"    useBackgroundPositionUtility",[493,4018,684],{"class":503},[493,4020,4021,4024],{"class":495,"line":623},[493,4022,4023],{"class":507},"    useBackgroundRepeatUtility",[493,4025,684],{"class":503},[493,4027,4028,4030,4032,4034,4036,4038],{"class":495,"line":628},[493,4029,612],{"class":503},[493,4031,514],{"class":499},[493,4033,517],{"class":503},[493,4035,546],{"class":520},[493,4037,524],{"class":503},[493,4039,527],{"class":503},[493,4041,4042],{"class":495,"line":635},[493,4043,578],{"emptyLinePlaceholder":206},[493,4045,4046,4048,4050,4052,4054,4056],{"class":495,"line":665},[493,4047,585],{"class":584},[493,4049,588],{"class":507},[493,4051,591],{"class":503},[493,4053,508],{"class":594},[493,4055,597],{"class":507},[493,4057,527],{"class":503},[493,4059,4060],{"class":495,"line":687},[493,4061,578],{"emptyLinePlaceholder":206},[493,4063,4064],{"class":495,"line":704},[493,4065,4066],{"class":631},"// Background utilities for hero sections\n",[493,4068,4069,4071,4073,4075],{"class":495,"line":720},[493,4070,466],{"class":594},[493,4072,657],{"class":507},[493,4074,645],{"class":503},[493,4076,662],{"class":503},[493,4078,4079,4082,4084,4086,4089,4091],{"class":495,"line":725},[493,4080,4081],{"class":668},"    overlay",[493,4083,672],{"class":503},[493,4085,675],{"class":503},[493,4087,4088],{"class":520},"rgba(0, 0, 0, 0.5)",[493,4090,681],{"class":503},[493,4092,684],{"class":503},[493,4094,4095,4097,4099],{"class":495,"line":731},[493,4096,612],{"class":503},[493,4098,715],{"class":507},[493,4100,527],{"class":503},[493,4102,4103],{"class":495,"line":742},[493,4104,578],{"emptyLinePlaceholder":206},[493,4106,4107,4109,4111,4113],{"class":495,"line":759},[493,4108,1303],{"class":594},[493,4110,657],{"class":507},[493,4112,645],{"class":503},[493,4114,662],{"class":503},[493,4116,4117,4120,4122,4124,4127,4129],{"class":495,"line":776},[493,4118,4119],{"class":668},"    hero",[493,4121,672],{"class":503},[493,4123,675],{"class":503},[493,4125,4126],{"class":520},"url(\"/images/hero.jpg\")",[493,4128,681],{"class":503},[493,4130,684],{"class":503},[493,4132,4133,4135,4137,4139,4141,4143],{"class":495,"line":793},[493,4134,1396],{"class":668},[493,4136,672],{"class":503},[493,4138,675],{"class":503},[493,4140,1403],{"class":520},[493,4142,681],{"class":503},[493,4144,684],{"class":503},[493,4146,4147,4149,4151],{"class":495,"line":808},[493,4148,612],{"class":503},[493,4150,715],{"class":507},[493,4152,527],{"class":503},[493,4154,4155],{"class":495,"line":822},[493,4156,578],{"emptyLinePlaceholder":206},[493,4158,4159,4161,4163],{"class":495,"line":839},[493,4160,1656],{"class":594},[493,4162,1746],{"class":507},[493,4164,527],{"class":503},[493,4166,4167,4169,4171],{"class":495,"line":856},[493,4168,1979],{"class":594},[493,4170,1746],{"class":507},[493,4172,527],{"class":503},[493,4174,4175,4177,4179,4181,4183,4185,4187,4189,4191,4193,4195,4197,4199,4201],{"class":495,"line":865},[493,4176,2542],{"class":594},[493,4178,657],{"class":507},[493,4180,645],{"class":503},[493,4182,504],{"class":503},[493,4184,675],{"class":503},[493,4186,2653],{"class":668},[493,4188,681],{"class":503},[493,4190,672],{"class":503},[493,4192,675],{"class":503},[493,4194,2653],{"class":520},[493,4196,681],{"class":503},[493,4198,511],{"class":503},[493,4200,715],{"class":507},[493,4202,527],{"class":503},[493,4204,4205],{"class":495,"line":870},[493,4206,578],{"emptyLinePlaceholder":206},[493,4208,4210,4212,4214,4216],{"class":495,"line":4209},26,[493,4211,873],{"class":499},[493,4213,876],{"class":499},[493,4215,618],{"class":507},[493,4217,527],{"class":503},[478,4219,4220],{"icon":140,"label":883},[483,4221,4223],{"className":886,"code":4222,"filename":888,"language":889,"meta":489,"style":489},"._bg\\:overlay { background-color: rgba(0, 0, 0, 0.5); }\n\n._background-image\\:hero { background-image: url(\"/images/hero.jpg\"); }\n._background-image\\:none { background-image: none; }\n\n._background-size\\:auto { background-size: auto; }\n._background-size\\:cover { background-size: cover; }\n._background-size\\:contain { background-size: contain; }\n\n._background-position\\:center { background-position: center; }\n/* ... more position utilities */\n\n._background-repeat\\:no-repeat { background-repeat: no-repeat; }\n",[440,4224,4225,4268,4272,4305,4327,4331,4353,4375,4397,4401,4423,4428,4432],{"__ignoreMap":489},[493,4226,4227,4229,4231,4233,4236,4238,4240,4242,4245,4247,4250,4252,4255,4257,4259,4261,4264,4266],{"class":495,"line":496},[493,4228,972],{"class":503},[493,4230,976],{"class":975},[493,4232,979],{"class":507},[493,4234,4235],{"class":975},"overlay",[493,4237,504],{"class":503},[493,4239,987],{"class":986},[493,4241,672],{"class":503},[493,4243,4244],{"class":594}," rgba",[493,4246,913],{"class":503},[493,4248,4249],{"class":916},"0",[493,4251,645],{"class":503},[493,4253,4254],{"class":916}," 0",[493,4256,645],{"class":503},[493,4258,4254],{"class":916},[493,4260,645],{"class":503},[493,4262,4263],{"class":916}," 0.5",[493,4265,1073],{"class":503},[493,4267,998],{"class":503},[493,4269,4270],{"class":495,"line":530},[493,4271,578],{"emptyLinePlaceholder":206},[493,4273,4274,4276,4278,4280,4283,4285,4287,4289,4292,4294,4296,4299,4301,4303],{"class":495,"line":553},[493,4275,972],{"class":503},[493,4277,1484],{"class":975},[493,4279,979],{"class":507},[493,4281,4282],{"class":975},"hero",[493,4284,504],{"class":503},[493,4286,1493],{"class":986},[493,4288,672],{"class":503},[493,4290,4291],{"class":594}," url",[493,4293,913],{"class":503},[493,4295,524],{"class":503},[493,4297,4298],{"class":520},"/images/hero.jpg",[493,4300,524],{"class":503},[493,4302,1073],{"class":503},[493,4304,998],{"class":503},[493,4306,4307,4309,4311,4313,4315,4317,4319,4321,4323,4325],{"class":495,"line":575},[493,4308,972],{"class":503},[493,4310,1484],{"class":975},[493,4312,979],{"class":507},[493,4314,1403],{"class":975},[493,4316,504],{"class":503},[493,4318,1493],{"class":986},[493,4320,672],{"class":503},[493,4322,1498],{"class":507},[493,4324,995],{"class":503},[493,4326,998],{"class":503},[493,4328,4329],{"class":495,"line":581},[493,4330,578],{"emptyLinePlaceholder":206},[493,4332,4333,4335,4337,4339,4341,4343,4345,4347,4349,4351],{"class":495,"line":602},[493,4334,972],{"class":503},[493,4336,1776],{"class":975},[493,4338,979],{"class":507},[493,4340,1781],{"class":975},[493,4342,504],{"class":503},[493,4344,1786],{"class":986},[493,4346,672],{"class":503},[493,4348,1791],{"class":507},[493,4350,995],{"class":503},[493,4352,998],{"class":503},[493,4354,4355,4357,4359,4361,4363,4365,4367,4369,4371,4373],{"class":495,"line":623},[493,4356,972],{"class":503},[493,4358,1776],{"class":975},[493,4360,979],{"class":507},[493,4362,1806],{"class":975},[493,4364,504],{"class":503},[493,4366,1786],{"class":986},[493,4368,672],{"class":503},[493,4370,1815],{"class":507},[493,4372,995],{"class":503},[493,4374,998],{"class":503},[493,4376,4377,4379,4381,4383,4385,4387,4389,4391,4393,4395],{"class":495,"line":628},[493,4378,972],{"class":503},[493,4380,1776],{"class":975},[493,4382,979],{"class":507},[493,4384,1830],{"class":975},[493,4386,504],{"class":503},[493,4388,1786],{"class":986},[493,4390,672],{"class":503},[493,4392,1839],{"class":507},[493,4394,995],{"class":503},[493,4396,998],{"class":503},[493,4398,4399],{"class":495,"line":635},[493,4400,578],{"emptyLinePlaceholder":206},[493,4402,4403,4405,4407,4409,4411,4413,4415,4417,4419,4421],{"class":495,"line":665},[493,4404,972],{"class":503},[493,4406,2098],{"class":975},[493,4408,979],{"class":507},[493,4410,2127],{"class":975},[493,4412,504],{"class":503},[493,4414,2108],{"class":986},[493,4416,672],{"class":503},[493,4418,2136],{"class":507},[493,4420,995],{"class":503},[493,4422,998],{"class":503},[493,4424,4425],{"class":495,"line":687},[493,4426,4427],{"class":631},"/* ... more position utilities */\n",[493,4429,4430],{"class":495,"line":704},[493,4431,578],{"emptyLinePlaceholder":206},[493,4433,4434,4436,4438,4440,4442,4444,4446,4448,4450,4452],{"class":495,"line":720},[493,4435,972],{"class":503},[493,4437,2771],{"class":975},[493,4439,979],{"class":507},[493,4441,2653],{"class":975},[493,4443,504],{"class":503},[493,4445,2780],{"class":986},[493,4447,672],{"class":503},[493,4449,2808],{"class":507},[493,4451,995],{"class":503},[493,4453,998],{"class":503},[418,4455,4456],{},"Usage in HTML:",[483,4458,4460],{"className":1163,"code":4459,"language":1165,"meta":489,"style":489},"\u003Csection class=\"_background-image:hero _background-size:cover _background-position:center _background-repeat:no-repeat\">\n    \u003Cdiv class=\"_bg:overlay\">\n        \u003Ch1>Welcome\u003C/h1>\n    \u003C/div>\n\u003C/section>\n",[440,4461,4462,4481,4501,4519,4528],{"__ignoreMap":489},[493,4463,4464,4466,4468,4470,4472,4474,4477,4479],{"class":495,"line":496},[493,4465,1172],{"class":503},[493,4467,1628],{"class":668},[493,4469,1178],{"class":584},[493,4471,591],{"class":503},[493,4473,524],{"class":503},[493,4475,4476],{"class":520},"_background-image:hero _background-size:cover _background-position:center _background-repeat:no-repeat",[493,4478,524],{"class":503},[493,4480,1201],{"class":503},[493,4482,4483,4486,4488,4490,4492,4494,4497,4499],{"class":495,"line":530},[493,4484,4485],{"class":503},"    \u003C",[493,4487,1175],{"class":668},[493,4489,1178],{"class":584},[493,4491,591],{"class":503},[493,4493,524],{"class":503},[493,4495,4496],{"class":520},"_bg:overlay",[493,4498,524],{"class":503},[493,4500,1201],{"class":503},[493,4502,4503,4506,4508,4510,4513,4515,4517],{"class":495,"line":553},[493,4504,4505],{"class":503},"        \u003C",[493,4507,3604],{"class":668},[493,4509,1190],{"class":503},[493,4511,4512],{"class":507},"Welcome",[493,4514,1196],{"class":503},[493,4516,3604],{"class":668},[493,4518,1201],{"class":503},[493,4520,4521,4524,4526],{"class":495,"line":575},[493,4522,4523],{"class":503},"    \u003C/",[493,4525,1175],{"class":668},[493,4527,1201],{"class":503},[493,4529,4530,4532,4534],{"class":495,"line":581},[493,4531,1196],{"class":503},[493,4533,1628],{"class":668},[493,4535,1201],{"class":503},[1908,4537,4539],{"id":4538},"gradient-text-effect","Gradient Text Effect",[475,4541,4542,4815],{},[478,4543,4544],{"icon":480,"label":481},[483,4545,4547],{"className":485,"code":4546,"filename":487,"language":488,"meta":489,"style":489},"import { styleframe } from \"styleframe\";\nimport { useBackgroundImageUtility, useBackgroundClipUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { selector } = s;\n\nuseBackgroundImageUtility(s, {\n    'gradient-rainbow': 'linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)',\n});\n\nuseBackgroundClipUtility(s, {\n    text: 'text',\n});\n\n// Create a reusable gradient text class\nselector('.gradient-text', {\n    backgroundImage: 'linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)',\n    backgroundClip: 'text',\n    WebkitBackgroundClip: 'text',\n    color: 'transparent',\n});\n\nexport default s;\n",[440,4548,4549,4569,4593,4597,4611,4628,4632,4642,4662,4670,4674,4684,4698,4706,4710,4715,4733,4748,4763,4778,4793,4801,4805],{"__ignoreMap":489},[493,4550,4551,4553,4555,4557,4559,4561,4563,4565,4567],{"class":495,"line":496},[493,4552,500],{"class":499},[493,4554,504],{"class":503},[493,4556,508],{"class":507},[493,4558,511],{"class":503},[493,4560,514],{"class":499},[493,4562,517],{"class":503},[493,4564,521],{"class":520},[493,4566,524],{"class":503},[493,4568,527],{"class":503},[493,4570,4571,4573,4575,4577,4579,4581,4583,4585,4587,4589,4591],{"class":495,"line":530},[493,4572,500],{"class":499},[493,4574,504],{"class":503},[493,4576,1347],{"class":507},[493,4578,645],{"class":503},[493,4580,3328],{"class":507},[493,4582,511],{"class":503},[493,4584,514],{"class":499},[493,4586,517],{"class":503},[493,4588,546],{"class":520},[493,4590,524],{"class":503},[493,4592,527],{"class":503},[493,4594,4595],{"class":495,"line":553},[493,4596,578],{"emptyLinePlaceholder":206},[493,4598,4599,4601,4603,4605,4607,4609],{"class":495,"line":575},[493,4600,585],{"class":584},[493,4602,588],{"class":507},[493,4604,591],{"class":503},[493,4606,508],{"class":594},[493,4608,597],{"class":507},[493,4610,527],{"class":503},[493,4612,4613,4615,4617,4620,4622,4624,4626],{"class":495,"line":581},[493,4614,585],{"class":584},[493,4616,504],{"class":503},[493,4618,4619],{"class":507}," selector ",[493,4621,612],{"class":503},[493,4623,615],{"class":503},[493,4625,618],{"class":507},[493,4627,527],{"class":503},[493,4629,4630],{"class":495,"line":602},[493,4631,578],{"emptyLinePlaceholder":206},[493,4633,4634,4636,4638,4640],{"class":495,"line":623},[493,4635,1303],{"class":594},[493,4637,657],{"class":507},[493,4639,645],{"class":503},[493,4641,662],{"class":503},[493,4643,4644,4646,4649,4651,4653,4655,4658,4660],{"class":495,"line":628},[493,4645,1412],{"class":503},[493,4647,4648],{"class":668},"gradient-rainbow",[493,4650,681],{"class":503},[493,4652,672],{"class":503},[493,4654,675],{"class":503},[493,4656,4657],{"class":520},"linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff)",[493,4659,681],{"class":503},[493,4661,684],{"class":503},[493,4663,4664,4666,4668],{"class":495,"line":635},[493,4665,612],{"class":503},[493,4667,715],{"class":507},[493,4669,527],{"class":503},[493,4671,4672],{"class":495,"line":665},[493,4673,578],{"emptyLinePlaceholder":206},[493,4675,4676,4678,4680,4682],{"class":495,"line":687},[493,4677,3284],{"class":594},[493,4679,657],{"class":507},[493,4681,645],{"class":503},[493,4683,662],{"class":503},[493,4685,4686,4688,4690,4692,4694,4696],{"class":495,"line":704},[493,4687,3425],{"class":668},[493,4689,672],{"class":503},[493,4691,675],{"class":503},[493,4693,3432],{"class":520},[493,4695,681],{"class":503},[493,4697,684],{"class":503},[493,4699,4700,4702,4704],{"class":495,"line":720},[493,4701,612],{"class":503},[493,4703,715],{"class":507},[493,4705,527],{"class":503},[493,4707,4708],{"class":495,"line":725},[493,4709,578],{"emptyLinePlaceholder":206},[493,4711,4712],{"class":495,"line":731},[493,4713,4714],{"class":631},"// Create a reusable gradient text class\n",[493,4716,4717,4720,4722,4724,4727,4729,4731],{"class":495,"line":742},[493,4718,4719],{"class":594},"selector",[493,4721,913],{"class":507},[493,4723,681],{"class":503},[493,4725,4726],{"class":520},".gradient-text",[493,4728,681],{"class":503},[493,4730,645],{"class":503},[493,4732,662],{"class":503},[493,4734,4735,4738,4740,4742,4744,4746],{"class":495,"line":759},[493,4736,4737],{"class":668},"    backgroundImage",[493,4739,672],{"class":503},[493,4741,675],{"class":503},[493,4743,4657],{"class":520},[493,4745,681],{"class":503},[493,4747,684],{"class":503},[493,4749,4750,4753,4755,4757,4759,4761],{"class":495,"line":776},[493,4751,4752],{"class":668},"    backgroundClip",[493,4754,672],{"class":503},[493,4756,675],{"class":503},[493,4758,3432],{"class":520},[493,4760,681],{"class":503},[493,4762,684],{"class":503},[493,4764,4765,4768,4770,4772,4774,4776],{"class":495,"line":793},[493,4766,4767],{"class":668},"    WebkitBackgroundClip",[493,4769,672],{"class":503},[493,4771,675],{"class":503},[493,4773,3432],{"class":520},[493,4775,681],{"class":503},[493,4777,684],{"class":503},[493,4779,4780,4783,4785,4787,4789,4791],{"class":495,"line":808},[493,4781,4782],{"class":668},"    color",[493,4784,672],{"class":503},[493,4786,675],{"class":503},[493,4788,786],{"class":520},[493,4790,681],{"class":503},[493,4792,684],{"class":503},[493,4794,4795,4797,4799],{"class":495,"line":822},[493,4796,612],{"class":503},[493,4798,715],{"class":507},[493,4800,527],{"class":503},[493,4802,4803],{"class":495,"line":839},[493,4804,578],{"emptyLinePlaceholder":206},[493,4806,4807,4809,4811,4813],{"class":495,"line":856},[493,4808,873],{"class":499},[493,4810,876],{"class":499},[493,4812,618],{"class":507},[493,4814,527],{"class":503},[478,4816,4817],{"icon":140,"label":883},[483,4818,4820],{"className":886,"code":4819,"filename":888,"language":889,"meta":489,"style":489},"._background-image\\:gradient-rainbow {\n    background-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);\n}\n\n._background-clip\\:text { background-clip: text; }\n\n.gradient-text {\n    background-image: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;\n}\n",[440,4821,4822,4834,4892,4896,4900,4922,4926,4935,4985,4996,5007,5017],{"__ignoreMap":489},[493,4823,4824,4826,4828,4830,4832],{"class":495,"line":496},[493,4825,972],{"class":503},[493,4827,1484],{"class":975},[493,4829,979],{"class":507},[493,4831,4648],{"class":975},[493,4833,662],{"class":503},[493,4835,4836,4839,4841,4843,4845,4848,4850,4852,4855,4857,4859,4862,4864,4866,4869,4871,4873,4876,4878,4880,4883,4885,4887,4890],{"class":495,"line":530},[493,4837,4838],{"class":986},"    background-image",[493,4840,672],{"class":503},[493,4842,1521],{"class":594},[493,4844,913],{"class":503},[493,4846,4847],{"class":916},"90deg",[493,4849,645],{"class":503},[493,4851,1123],{"class":503},[493,4853,4854],{"class":507},"ff0000",[493,4856,645],{"class":503},[493,4858,1123],{"class":503},[493,4860,4861],{"class":507},"ff7f00",[493,4863,645],{"class":503},[493,4865,1123],{"class":503},[493,4867,4868],{"class":507},"ffff00",[493,4870,645],{"class":503},[493,4872,1123],{"class":503},[493,4874,4875],{"class":507},"00ff00",[493,4877,645],{"class":503},[493,4879,1123],{"class":503},[493,4881,4882],{"class":507},"0000ff",[493,4884,645],{"class":503},[493,4886,1123],{"class":503},[493,4888,4889],{"class":507},"8b00ff",[493,4891,932],{"class":503},[493,4893,4894],{"class":495,"line":553},[493,4895,963],{"class":503},[493,4897,4898],{"class":495,"line":575},[493,4899,578],{"emptyLinePlaceholder":206},[493,4901,4902,4904,4906,4908,4910,4912,4914,4916,4918,4920],{"class":495,"line":581},[493,4903,972],{"class":503},[493,4905,3472],{"class":975},[493,4907,979],{"class":507},[493,4909,3432],{"class":975},[493,4911,504],{"class":503},[493,4913,3482],{"class":986},[493,4915,672],{"class":503},[493,4917,3558],{"class":507},[493,4919,995],{"class":503},[493,4921,998],{"class":503},[493,4923,4924],{"class":495,"line":602},[493,4925,578],{"emptyLinePlaceholder":206},[493,4927,4928,4930,4933],{"class":495,"line":623},[493,4929,972],{"class":503},[493,4931,4932],{"class":975},"gradient-text",[493,4934,662],{"class":503},[493,4936,4937,4939,4941,4943,4945,4947,4949,4951,4953,4955,4957,4959,4961,4963,4965,4967,4969,4971,4973,4975,4977,4979,4981,4983],{"class":495,"line":628},[493,4938,4838],{"class":986},[493,4940,672],{"class":503},[493,4942,1521],{"class":594},[493,4944,913],{"class":503},[493,4946,4847],{"class":916},[493,4948,645],{"class":503},[493,4950,1123],{"class":503},[493,4952,4854],{"class":507},[493,4954,645],{"class":503},[493,4956,1123],{"class":503},[493,4958,4861],{"class":507},[493,4960,645],{"class":503},[493,4962,1123],{"class":503},[493,4964,4868],{"class":507},[493,4966,645],{"class":503},[493,4968,1123],{"class":503},[493,4970,4875],{"class":507},[493,4972,645],{"class":503},[493,4974,1123],{"class":503},[493,4976,4882],{"class":507},[493,4978,645],{"class":503},[493,4980,1123],{"class":503},[493,4982,4889],{"class":507},[493,4984,932],{"class":503},[493,4986,4987,4990,4992,4994],{"class":495,"line":635},[493,4988,4989],{"class":986},"    background-clip",[493,4991,672],{"class":503},[493,4993,3558],{"class":507},[493,4995,527],{"class":503},[493,4997,4998,5001,5003,5005],{"class":495,"line":665},[493,4999,5000],{"class":975},"    -webkit-background-clip",[493,5002,672],{"class":503},[493,5004,3558],{"class":507},[493,5006,527],{"class":503},[493,5008,5009,5011,5013,5015],{"class":495,"line":687},[493,5010,4782],{"class":986},[493,5012,672],{"class":503},[493,5014,1041],{"class":507},[493,5016,527],{"class":503},[493,5018,5019],{"class":495,"line":704},[493,5020,963],{"class":503},[414,5022,5024],{"id":5023},"best-practices","Best Practices",[429,5026,5027,5036,5042,5048,5058,5067],{},[432,5028,5029,5032,5033,5035],{},[435,5030,5031],{},"Use design tokens for colors",": Reference your color system with ",[440,5034,442],{}," for consistent backgrounds",[432,5037,5038,5041],{},[435,5039,5040],{},"Optimize background images",": Use appropriate image formats and sizes for performance",[432,5043,5044,5047],{},[435,5045,5046],{},"Consider accessibility",": Ensure sufficient contrast between backgrounds and foreground content",[432,5049,5050,5053,5054,5057],{},[435,5051,5052],{},"Use cover for hero images",": ",[440,5055,5056],{},"background-size: cover"," is usually best for full-width hero sections",[432,5059,5060,5053,5063,5066],{},[435,5061,5062],{},"Test fixed attachments on mobile",[440,5064,5065],{},"background-attachment: fixed"," can cause issues on some mobile browsers",[432,5068,5069,5072],{},[435,5070,5071],{},"Prefer CSS gradients",": Use CSS gradients instead of image files when possible for better performance",[414,5074,5076],{"id":5075},"faq","FAQ",[5078,5079,5080,5095,5099,5103],"accordion",{},[5081,5082,5085,5086,5088,5089,5091,5092,5094],"accordion-item",{"icon":5083,"label":5084},"i-lucide-circle-help","How do I create responsive background images?","Combine ",[440,5087,1656],{}," with responsive modifiers. Use ",[440,5090,1806],{}," for full-bleed images that scale to fill their container, or ",[440,5093,1830],{}," when you need to show the entire image without cropping.",[5081,5096,5098],{"icon":5083,"label":5097},"Can I use CSS variables in background-image?","Yes, but with some limitations. CSS variables work well for solid colors and gradients. For image URLs, you'll typically want to define them directly in the utility values.",[5081,5100,5102],{"icon":5083,"label":5101},"How do I layer multiple backgrounds?","CSS supports multiple backgrounds using comma-separated values. Create utilities for each layer and combine them with a selector, or define combined backgrounds in a single utility value.",[5081,5104,5106,5109,5110,5113,5114,972],{"icon":5083,"label":5105},"What's the difference between background-clip and background-origin?",[440,5107,5108],{},"background-origin"," defines where the background image starts (its origin point), while ",[440,5111,5112],{},"background-clip"," defines where the background is visible (its clipping area). For gradient text effects, you need ",[440,5115,3650],{},[5117,5118,5119],"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 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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":489,"searchDepth":530,"depth":530,"links":5121},[5122,5123,5124,5125,5126,5129,5132,5133,5136,5137,5138,5142,5143],{"id":416,"depth":530,"text":64},{"id":423,"depth":530,"text":424},{"id":463,"depth":530,"text":466},{"id":1300,"depth":530,"text":1303},{"id":1653,"depth":530,"text":1656,"children":5127},[5128],{"id":1910,"depth":553,"text":1911},{"id":1976,"depth":530,"text":1979,"children":5130},[5131],{"id":2401,"depth":553,"text":1911},{"id":2539,"depth":530,"text":2542},{"id":2970,"depth":530,"text":2973,"children":5134},[5135],{"id":3225,"depth":553,"text":1911},{"id":3281,"depth":530,"text":3284},{"id":3654,"depth":530,"text":3657},{"id":3950,"depth":530,"text":3951,"children":5139},[5140,5141],{"id":3954,"depth":553,"text":3955},{"id":4538,"depth":553,"text":4539},{"id":5023,"depth":530,"text":5024},{"id":5075,"depth":530,"text":5076},"Create background utilities for colors, images, sizing, positioning, and more with full type safety.","md",null,{},{"title":310,"icon":7},{"title":409,"description":5144},{"loc":311},"sEDx-wLsiZ0Szq1a5URPrYZ4g2zcmPmMRUYCaSXJJnA",[5153,5155],{"title":306,"path":307,"stem":308,"description":5154,"icon":7,"children":-1},"Create animation utilities for continuous motion effects and keyframe-based animations with full type safety.",{"title":169,"path":314,"stem":315,"description":5156,"icon":7,"children":-1},"Create border utilities for colors, widths, radiuses, styles, outlines, and focus rings with full type safety.",1776621146783]