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