[{"data":1,"prerenderedAt":999},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Ftheming-on-lynx":455,"\u002Fguides\u002Ftheming-on-lynx-surround":996},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,436,441,445,450],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":433,"path":434,"stem":435,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":437,"path":438,"stem":439,"package":11,"icon":440},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":442,"path":443,"stem":444,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":446,"path":447,"stem":448,"package":11,"icon":449},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":456,"title":451,"body":457,"description":988,"extension":989,"links":11,"meta":990,"navigation":991,"package":11,"path":452,"seo":992,"stem":453,"__hash__":995},"docs\u002F8.guides\u002F9.theming-on-lynx.md",{"type":458,"value":459,"toc":977},"minimark",[460,464,472,481,484,487,536,542,555,562,566,576,593,601,608,615,626,645,820,847,851,866,890,908,912,919,934,938,947,950,954,973],[461,462,463],"p",{},"Every styling failure on this page has the same shape. The CSS is valid, the browser preview is correct, the console stays empty, and the device renders something wrong, because Lynx drops what its engine cannot handle instead of rejecting it.",[461,465,466,467,471],{},"The ",[468,469,470],"a",{"href":303},"Theming section"," documents the API. This page is the layer underneath, where each constraint explains a Vy UI decision that looks arbitrary until you hit it.",[473,474,476,477],"h2",{"id":475},"lynx-resolves-one-level-of-var","Lynx resolves one level of ",[478,479,480],"code",{},"var()",[461,482,483],{},"A browser resolves custom properties recursively, so a chain of tokens pointing at tokens works fine. Lynx resolves a single level, and a longer chain evaluates to nothing, which surfaces as white backgrounds and black borders.",[461,485,486],{},"So our semantic tokens hold concrete values:",[488,489,494],"pre",{"className":490,"code":491,"language":492,"meta":493,"style":493},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* packages\u002Fkit\u002Fsrc\u002Fstyle.css — concrete, not var(--ui-color-slate-500) *\u002F\n--ui-text-muted: theme('colors.slate.500');\n--ui-bg-muted:   theme('colors.slate.50');\n","css","",[478,495,496,505,523],{"__ignoreMap":493},[497,498,501],"span",{"class":499,"line":500},"line",1,[497,502,504],{"class":503},"sHwdD","\u002F* packages\u002Fkit\u002Fsrc\u002Fstyle.css — concrete, not var(--ui-color-slate-500) *\u002F\n",[497,506,508,512,516,520],{"class":499,"line":507},2,[497,509,511],{"class":510},"sTEyZ","--ui-text-muted: theme('colors",[497,513,515],{"class":514},"sMK4o",".",[497,517,519],{"class":518},"sBMFI","slate",[497,521,522],{"class":510},".500');\n",[497,524,526,529,531,533],{"class":499,"line":525},3,[497,527,528],{"class":510},"--ui-bg-muted:   theme('colors",[497,530,515],{"class":514},[497,532,519],{"class":518},[497,534,535],{"class":510},".50');\n",[461,537,538,541],{},[478,539,540],{},"--ui-text-muted: var(--ui-color-neutral-500)"," would read more nicely and previews perfectly in a browser, then collapses on a phone. Dark mode flips these tokens to their own concrete values rather than repointing them at a different chain.",[461,543,544,546,547,550,551,554],{},[478,545,480],{}," does resolve inside ",[478,548,549],{},"linear-gradient()",", which we have confirmed on device, so gradient stops can stay as tokens and flip with ",[478,552,553],{},".dark"," for free.",[461,556,557,561],{},[558,559,560],"strong",{},"Rule for your own themes:"," a custom property may hold a value, but it may not hold another custom property.",[473,563,565],{"id":564},"most-tailwind-utilities-do-not-exist","Most Tailwind utilities do not exist",[461,567,568,571,572,575],{},[478,569,570],{},"@lynx-js\u002Ftailwind-preset"," allowlists 57 of Tailwind's 179 core plugins and disables the rest, since a class the engine cannot parse is a silent no-op. The ",[468,573,574],{"href":447},"Tailwind on Lynx guide"," covers the mechanism and the v3 pin that comes with it.",[461,577,466,578,581,582,585,586,589,590,592],{},[478,579,580],{},"ring"," family is among the casualties, so a focus ring cannot be ",[478,583,584],{},"ring-2 ring-primary-200",". A spread-only ",[478,587,588],{},"box-shadow"," works instead, with a single-level ",[478,591,480],{}," inside it:",[488,594,599],{"className":595,"code":597,"language":598},[596],"language-text","shadow-[0_0_0_2px_var(--ui-color-primary-200)]\n","text",[478,600,597],{"__ignoreMap":493},[461,602,603,604,607],{},"We track focus in JavaScript, because ",[478,605,606],{},":focus-visible"," is not supported either.",[473,609,611,614],{"id":610},"data-state-selectors-do-not-match",[478,612,613],{},"data-[state]"," selectors do not match",[461,616,617,618,621,622,625],{},"Component libraries on the web style state with ",[478,619,620],{},"data-state=\"open\""," and matching ",[478,623,624],{},"data-[state=open]:"," variants, which Lynx does not match, so those variants compile to CSS that never applies.",[461,627,628,629,632,633,636,637,640,641,644],{},"Vy UI keeps ",[478,630,631],{},"data-state"," because assistive technology and consumers read it, and drives styling from parallel ",[478,634,635],{},"ui-*"," classes generated by the preset's ",[478,638,639],{},"uiVariants"," plugin. Registering the kit's extra states is an easy step to miss in ",[468,642,643],{"href":15},"installation",":",[488,646,651],{"className":647,"code":648,"filename":649,"language":650,"meta":493,"style":493},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createVyuiPreset, VYUI_UI_STATES } from '@vyui\u002Fkit\u002Ftailwind'\n\nconst lynxPreset = createLynxPreset({\n  lynxUIPlugins: {\n    uiVariants: {\n      prefixes: defaults => ({ ...defaults, ui: [...defaults.ui, ...VYUI_UI_STATES] }),\n    },\n  },\n})\n","tailwind.config.ts","ts",[478,652,653,687,693,715,727,737,800,806,812],{"__ignoreMap":493},[497,654,655,659,662,665,668,671,674,677,680,684],{"class":499,"line":500},[497,656,658],{"class":657},"s7zQu","import",[497,660,661],{"class":514}," {",[497,663,664],{"class":510}," createVyuiPreset",[497,666,667],{"class":514},",",[497,669,670],{"class":510}," VYUI_UI_STATES",[497,672,673],{"class":514}," }",[497,675,676],{"class":657}," from",[497,678,679],{"class":514}," '",[497,681,683],{"class":682},"sfazB","@vyui\u002Fkit\u002Ftailwind",[497,685,686],{"class":514},"'\n",[497,688,689],{"class":499,"line":507},[497,690,692],{"emptyLinePlaceholder":691},true,"\n",[497,694,695,699,702,705,709,712],{"class":499,"line":525},[497,696,698],{"class":697},"spNyl","const",[497,700,701],{"class":510}," lynxPreset ",[497,703,704],{"class":514},"=",[497,706,708],{"class":707},"s2Zo4"," createLynxPreset",[497,710,711],{"class":510},"(",[497,713,714],{"class":514},"{\n",[497,716,718,722,724],{"class":499,"line":717},4,[497,719,721],{"class":720},"swJcz","  lynxUIPlugins",[497,723,644],{"class":514},[497,725,726],{"class":514}," {\n",[497,728,730,733,735],{"class":499,"line":729},5,[497,731,732],{"class":720},"    uiVariants",[497,734,644],{"class":514},[497,736,726],{"class":514},[497,738,740,743,745,749,752,755,758,761,764,766,769,771,774,777,779,781,784,786,788,791,794,797],{"class":499,"line":739},6,[497,741,742],{"class":707},"      prefixes",[497,744,644],{"class":514},[497,746,748],{"class":747},"sHdIc"," defaults",[497,750,751],{"class":697}," =>",[497,753,754],{"class":510}," (",[497,756,757],{"class":514},"{",[497,759,760],{"class":514}," ...",[497,762,763],{"class":510},"defaults",[497,765,667],{"class":514},[497,767,768],{"class":720}," ui",[497,770,644],{"class":514},[497,772,773],{"class":510}," [",[497,775,776],{"class":514},"...",[497,778,763],{"class":510},[497,780,515],{"class":514},[497,782,783],{"class":510},"ui",[497,785,667],{"class":514},[497,787,760],{"class":514},[497,789,790],{"class":510},"VYUI_UI_STATES] ",[497,792,793],{"class":514},"}",[497,795,796],{"class":510},")",[497,798,799],{"class":514},",\n",[497,801,803],{"class":499,"line":802},7,[497,804,805],{"class":514},"    },\n",[497,807,809],{"class":499,"line":808},8,[497,810,811],{"class":514},"  },\n",[497,813,815,817],{"class":499,"line":814},9,[497,816,793],{"class":514},[497,818,819],{"class":510},")\n",[461,821,822,825,826,829,830,829,833,829,836,829,839,842,843,846],{},[478,823,824],{},"VYUI_UI_STATES"," covers ",[478,827,828],{},"on",", ",[478,831,832],{},"off",[478,834,835],{},"completed",[478,837,838],{},"highlighted",[478,840,841],{},"inactive",", and ",[478,844,845],{},"dragging",". Skipping it leaves components in their default state forever.",[473,848,850],{"id":849},"icons-ignore-text-color","Icons ignore text color",[461,852,853,854,857,858,861,862,865],{},"Lynx rasterizes SVG rather than rendering it live, so an icon does not inherit ",[478,855,856],{},"color"," and ",[478,859,860],{},"text-primary-500"," on a wrapper does nothing. The color has to be baked in at render time, which is what ",[478,863,864],{},"resolveColorHex"," exists for:",[488,867,869],{"className":647,"code":868,"language":650,"meta":493,"style":493},"import { resolveColorHex } from '@vyui\u002Fkit'\n",[478,870,871],{"__ignoreMap":493},[497,872,873,875,877,880,882,884,886,888],{"class":499,"line":500},[497,874,658],{"class":657},[497,876,661],{"class":514},[497,878,879],{"class":510}," resolveColorHex",[497,881,673],{"class":514},[497,883,676],{"class":657},[497,885,679],{"class":514},[497,887,46],{"class":682},[497,889,686],{"class":514},[461,891,892,893,896,897,857,900,903,904,907],{},"Size works the same way, through the component's ",[478,894,895],{},"size"," prop rather than ",[478,898,899],{},"w-*",[478,901,902],{},"h-*",". Lynx's ",[478,905,906],{},"\u003Csvg>"," support also excludes masks, so mask-based icon sets render as solid boxes and a non-masked variant is the whole fix.",[473,909,911],{"id":910},"dynamically-built-classes-need-a-safelist","Dynamically built classes need a safelist",[461,913,914,915,918],{},"A class assembled at runtime, such as ",[478,916,917],{},"`bg-${color}-500`",", cannot be extracted by Tailwind's scanner, which only sees literal strings. On Lynx that missing utility degrades to nothing rather than to something visible, so the component renders untinted.",[461,920,921,922,925,926,929,930,933],{},"Any color slot you build dynamically has to appear literally somewhere Tailwind scans, or go in ",[478,923,924],{},"safelist",". Colors without a shade suffix, like ",[478,927,928],{},"text-primary"," or ",[478,931,932],{},"bg-success",", need the same treatment.",[473,935,937],{"id":936},"what-this-adds-up-to","What this adds up to",[461,939,940,941,943,944,946],{},"Four rules cover almost all of it. Keep custom properties one level deep, assume a utility does not exist until you have watched it render on a device, style state through ",[478,942,635],{}," classes while keeping ",[478,945,631],{}," for accessibility, and give icons an explicit color and size.",[461,948,949],{},"When the rules run out, fall back to the shape. Something that looks right in the browser and wrong on the device is usually a declaration Lynx dropped, so a device check before calling a theme finished is mandatory.",[473,951,953],{"id":952},"related","Related",[955,956,957,963,968],"card-group",{},[958,959,960],"card",{"icon":307,"title":302,"to":303},[461,961,962],{},"The API: overrides, colors, dark mode, and fonts.",[958,964,965],{"icon":449,"title":446,"to":447},[461,966,967],{},"Why v3, and which utilities survive the preset's allowlist.",[958,969,970],{"icon":84,"title":433,"to":434},[461,971,972],{},"Getting a device check into the loop.",[974,975,976],"style",{},"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .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 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":493,"searchDepth":500,"depth":507,"links":978},[979,981,982,984,985,986,987],{"id":475,"depth":507,"text":980},"Lynx resolves one level of var()",{"id":564,"depth":507,"text":565},{"id":610,"depth":507,"text":983},"data-[state] selectors do not match",{"id":849,"depth":507,"text":850},{"id":910,"depth":507,"text":911},{"id":936,"depth":507,"text":937},{"id":952,"depth":507,"text":953},"Why the same CSS behaves differently on a Lynx device than in a browser, and the engine constraints that shape every theme decision in Vy UI.","md",{},{"icon":454},{"title":993,"description":994},"Theming on Lynx — what's different from the web","Lynx resolves one level of var(), drops most Tailwind utilities, and rasterizes icons. The engine constraints behind Vy UI's theme design, and what they mean for your own.","LY2_v2l47IMJST0eZ9h02vDz9sfYY3d8RaA5pWJCp6M",[997,11],{"title":446,"path":447,"stem":448,"description":998,"icon":-1,"children":-1,"navigation":-1},"Why Lynx apps are pinned to Tailwind v3, what the Lynx preset actually does to your utility set, and how to run v3 and v4 in the same repository.",1785008681153]