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