[{"data":1,"prerenderedAt":1292},["ShallowReactive",2],{"navigation":3,"\u002Ftheming\u002Fcolors":460,"\u002Ftheming\u002Fcolors-surround":1287},[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,437,441,446,450,455],{"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},"Why use Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":433,"path":434,"stem":435,"package":11,"icon":436},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":438,"path":439,"stem":440,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":442,"path":443,"stem":444,"package":11,"icon":445},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":447,"path":448,"stem":449,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":461,"title":313,"body":462,"description":1281,"extension":1282,"links":11,"meta":1283,"navigation":1284,"package":11,"path":314,"seo":1285,"stem":315,"__hash__":1286},"docs\u002F4.theming\u002F3.colors.md",{"type":463,"value":464,"toc":1276},"minimark",[465,507,510,607,636,641,647,727,745,749,752,766,856,859,884,1004,1082,1142,1159,1207,1218,1239,1257,1261,1272],[466,467,468,471,472,475,476,475,479,475,482,475,485,475,488,491,492,495,496,498,499,502,503,506],"p",{},[469,470,46],"code",{}," ships six configurable semantic colors — ",[469,473,474],{},"primary",", ",[469,477,478],{},"secondary",[469,480,481],{},"success",[469,483,484],{},"info",[469,486,487],{},"warning",[469,489,490],{},"error"," — plus ",[469,493,494],{},"neutral",", which is always present but kept out of the configurable list (mirrors nuxt\u002Fui, which excludes ",[469,497,494],{}," from ",[469,500,501],{},"theme.colors"," too). Source of truth: ",[469,504,505],{},"packages\u002Fkit\u002Fsrc\u002Ftheme\u002Fcolor-constants.js",".",[466,508,509],{},"Default semantic → Tailwind-palette mapping:",[511,512,513,526],"table",{},[514,515,516],"thead",{},[517,518,519,523],"tr",{},[520,521,522],"th",{},"Semantic",[520,524,525],{},"Palette",[527,528,529,541,552,563,574,585,596],"tbody",{},[517,530,531,536],{},[532,533,534],"td",{},[469,535,474],{},[532,537,538],{},[469,539,540],{},"green",[517,542,543,547],{},[532,544,545],{},[469,546,478],{},[532,548,549],{},[469,550,551],{},"blue",[517,553,554,558],{},[532,555,556],{},[469,557,481],{},[532,559,560],{},[469,561,562],{},"emerald",[517,564,565,569],{},[532,566,567],{},[469,568,484],{},[532,570,571],{},[469,572,573],{},"sky",[517,575,576,580],{},[532,577,578],{},[469,579,487],{},[532,581,582],{},[469,583,584],{},"amber",[517,586,587,591],{},[532,588,589],{},[469,590,490],{},[532,592,593],{},[469,594,595],{},"red",[517,597,598,602],{},[532,599,600],{},[469,601,494],{},[532,603,604],{},[469,605,606],{},"slate",[466,608,609,610,612,613,475,615,612,617,619,620,623,624,623,626,628,629,623,631,623,633,635],{},"Not the obvious 1:1 (",[469,611,481],{}," isn't stock ",[469,614,540],{},[469,616,484],{},[469,618,551],{},"): Tailwind's base ",[469,621,622],{},"yellow"," \u002F ",[469,625,551],{},[469,627,540],{}," read too washed out at shade-500 for contrast on white, so ",[469,630,584],{},[469,632,573],{},[469,634,562],{}," stand in.",[637,638,640],"h2",{"id":639},"three-css-variable-tiers","Three CSS-variable tiers",[466,642,643,646],{},[469,644,645],{},"packages\u002Fkit\u002Fsrc\u002Fstyle.css"," defines every color as three tiers of custom property. This is the mental model to keep in your head when overriding or reading theme files:",[648,649,650,671,698],"ol",{},[651,652,653,656,657,660,661,664,665,475,668,506],"li",{},[654,655,525],"strong",{}," — ",[469,658,659],{},"--ui-color-{semantic}-{50..950}",", the full Tailwind shade scale per semantic color (e.g. ",[469,662,663],{},"--ui-color-primary-500: theme('colors.green.500')","). Powers ramp utilities: ",[469,666,667],{},"bg-primary-500",[469,669,670],{},"border-error-200",[651,672,673,656,676,679,680,683,684,687,688,691,692,475,695,506],{},[654,674,675],{},"Mode",[469,677,678],{},"--ui-{semantic}"," (e.g. ",[469,681,682],{},"--ui-primary","), a single active shade per color mode (",[469,685,686],{},"-500"," in light, ",[469,689,690],{},"-400"," in dark). Powers shorthand utilities: ",[469,693,694],{},"bg-primary",[469,696,697],{},"text-error",[651,699,700,703,704,708,709,475,712,475,715,718,719,722,723,726],{},[654,701,702],{},"Semantic \u002F surface"," — role-based tokens about UI ",[705,706,707],"em",{},"role",", not a specific color, that flip entirely between light and dark: ",[469,710,711],{},"text-dimmed\u002Fmuted\u002Ftoned\u002Fdefault\u002Fhighlighted\u002Finverted",[469,713,714],{},"bg-default\u002Fmuted\u002Felevated\u002Faccented\u002Finverted",[469,716,717],{},"border-default\u002Fmuted\u002Faccented\u002Finverted",". Component themes use these for text, surfaces, and borders instead of raw ",[469,720,721],{},"neutral-*"," classes, so components adapt to dark mode automatically with zero ",[469,724,725],{},"dark:"," variants.",[466,728,729,730,733,734,737,738,741,742,744],{},"One nuance that trips people up: the ",[654,731,732],{},"palette tier's neutral ramp does not invert",". ",[469,735,736],{},"bg-neutral-100"," is the literal same slate shade in light or dark mode — picking a raw ramp class is a \"you picked a literal shade\" contract. Only the semantic\u002Fsurface tier flips. Reach for ",[469,739,740],{},"bg-muted",", not ",[469,743,736],{},", for anything that should adapt to dark mode.",[637,746,748],{"id":747},"configuring-colors","Configuring colors",[466,750,751],{},"Two ways to customize, depending on how far you need to go.",[466,753,754,757,758,761,762,765],{},[654,755,756],{},"Rebrand via CSS only"," — override the ",[469,759,760],{},"--ui-color-{semantic}-{shade}"," variables in your own stylesheet, after importing ",[469,763,764],{},"@vyui\u002Fkit\u002Fstyle.css",". No build step, no config file:",[767,768,774],"pre",{"className":769,"code":770,"filename":771,"language":772,"meta":773,"style":773},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import '@vyui\u002Fkit\u002Fstyle.css';\n\n:root {\n  --ui-color-primary-500: #6366f1;\n  --ui-color-primary-600: #4f46e5;\n}\n","src\u002Findex.css","css","",[469,775,776,798,805,818,835,850],{"__ignoreMap":773},[777,778,781,785,789,792,795],"span",{"class":779,"line":780},"line",1,[777,782,784],{"class":783},"s7zQu","@import",[777,786,788],{"class":787},"sMK4o"," '",[777,790,764],{"class":791},"sfazB",[777,793,794],{"class":787},"'",[777,796,797],{"class":787},";\n",[777,799,801],{"class":779,"line":800},2,[777,802,804],{"emptyLinePlaceholder":803},true,"\n",[777,806,808,811,815],{"class":779,"line":807},3,[777,809,810],{"class":787},":",[777,812,814],{"class":813},"spNyl","root",[777,816,817],{"class":787}," {\n",[777,819,821,825,827,830,833],{"class":779,"line":820},4,[777,822,824],{"class":823},"sTEyZ","  --ui-color-primary-500",[777,826,810],{"class":787},[777,828,829],{"class":787}," #",[777,831,832],{"class":823},"6366f1",[777,834,797],{"class":787},[777,836,838,841,843,845,848],{"class":779,"line":837},5,[777,839,840],{"class":823},"  --ui-color-primary-600",[777,842,810],{"class":787},[777,844,829],{"class":787},[777,846,847],{"class":823},"4f46e5",[777,849,797],{"class":787},[777,851,853],{"class":779,"line":852},6,[777,854,855],{"class":787},"}\n",[466,857,858],{},"This only rebrands a color already in the configurable set — it doesn't add a new slot.",[466,860,861,679,864,867,868,871,872,875,876,879,880,883],{},[654,862,863],{},"Add a new color slot",[469,865,866],{},"tertiary",") — the Tailwind preset has to ",[705,869,870],{},"generate"," the classes and the runtime has to ",[705,873,874],{},"select"," the same set, so author the color list once with ",[469,877,878],{},"defineVyuiConfig"," (from the light ",[469,881,882],{},"@vyui\u002Fkit\u002Fconfig"," entry — safe to import in a Tailwind config, it never pulls component code) and feed it to both planes:",[767,885,890],{"className":886,"code":887,"filename":888,"language":889,"meta":773,"style":773},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineVyuiConfig } from '@vyui\u002Fkit\u002Fconfig'\nimport { COLORS } from '@vyui\u002Fkit\u002Ftailwind'\n\nexport default defineVyuiConfig({\n  theme: { colors: [...COLORS, 'tertiary'] },\n})\n","vyui.config.ts","ts",[469,891,892,916,936,940,957,996],{"__ignoreMap":773},[777,893,894,897,900,903,906,909,911,913],{"class":779,"line":780},[777,895,896],{"class":783},"import",[777,898,899],{"class":787}," {",[777,901,902],{"class":823}," defineVyuiConfig",[777,904,905],{"class":787}," }",[777,907,908],{"class":783}," from",[777,910,788],{"class":787},[777,912,882],{"class":791},[777,914,915],{"class":787},"'\n",[777,917,918,920,922,925,927,929,931,934],{"class":779,"line":800},[777,919,896],{"class":783},[777,921,899],{"class":787},[777,923,924],{"class":823}," COLORS",[777,926,905],{"class":787},[777,928,908],{"class":783},[777,930,788],{"class":787},[777,932,933],{"class":791},"@vyui\u002Fkit\u002Ftailwind",[777,935,915],{"class":787},[777,937,938],{"class":779,"line":807},[777,939,804],{"emptyLinePlaceholder":803},[777,941,942,945,948,951,954],{"class":779,"line":820},[777,943,944],{"class":783},"export",[777,946,947],{"class":783}," default",[777,949,902],{"class":950},"s2Zo4",[777,952,953],{"class":823},"(",[777,955,956],{"class":787},"{\n",[777,958,959,963,965,967,970,972,975,978,981,984,986,988,990,993],{"class":779,"line":837},[777,960,962],{"class":961},"swJcz","  theme",[777,964,810],{"class":787},[777,966,899],{"class":787},[777,968,969],{"class":961}," colors",[777,971,810],{"class":787},[777,973,974],{"class":823}," [",[777,976,977],{"class":787},"...",[777,979,980],{"class":823},"COLORS",[777,982,983],{"class":787},",",[777,985,788],{"class":787},[777,987,866],{"class":791},[777,989,794],{"class":787},[777,991,992],{"class":823},"] ",[777,994,995],{"class":787},"},\n",[777,997,998,1001],{"class":779,"line":852},[777,999,1000],{"class":787},"}",[777,1002,1003],{"class":823},")\n",[767,1005,1008],{"className":886,"code":1006,"filename":1007,"language":889,"meta":773,"style":773},"import vyuiConfig from '.\u002Fvyui.config'\nimport { createVyuiPreset } from '@vyui\u002Fkit\u002Ftailwind'\n\nexport default {\n  presets: [lynxPreset, createVyuiPreset(vyuiConfig)],\n}\n","tailwind.config.ts",[469,1009,1010,1027,1046,1050,1058,1078],{"__ignoreMap":773},[777,1011,1012,1014,1017,1020,1022,1025],{"class":779,"line":780},[777,1013,896],{"class":783},[777,1015,1016],{"class":823}," vyuiConfig ",[777,1018,1019],{"class":783},"from",[777,1021,788],{"class":787},[777,1023,1024],{"class":791},".\u002Fvyui.config",[777,1026,915],{"class":787},[777,1028,1029,1031,1033,1036,1038,1040,1042,1044],{"class":779,"line":800},[777,1030,896],{"class":783},[777,1032,899],{"class":787},[777,1034,1035],{"class":823}," createVyuiPreset",[777,1037,905],{"class":787},[777,1039,908],{"class":783},[777,1041,788],{"class":787},[777,1043,933],{"class":791},[777,1045,915],{"class":787},[777,1047,1048],{"class":779,"line":807},[777,1049,804],{"emptyLinePlaceholder":803},[777,1051,1052,1054,1056],{"class":779,"line":820},[777,1053,944],{"class":783},[777,1055,947],{"class":783},[777,1057,817],{"class":787},[777,1059,1060,1063,1065,1068,1070,1072,1075],{"class":779,"line":837},[777,1061,1062],{"class":961},"  presets",[777,1064,810],{"class":787},[777,1066,1067],{"class":823}," [lynxPreset",[777,1069,983],{"class":787},[777,1071,1035],{"class":950},[777,1073,1074],{"class":823},"(vyuiConfig)]",[777,1076,1077],{"class":787},",\n",[777,1079,1080],{"class":779,"line":852},[777,1081,855],{"class":787},[767,1083,1086],{"className":886,"code":1084,"filename":1085,"language":889,"meta":773,"style":773},"import vyuiConfig from '.\u002Fvyui.config'\nimport { provideVyUI } from '@vyui\u002Fkit' \u002F\u002F or: app.use(VyUI, vyuiConfig) on web\n\nprovideVyUI(app, vyuiConfig)\n","src\u002Findex.ts",[469,1087,1088,1102,1125,1129],{"__ignoreMap":773},[777,1089,1090,1092,1094,1096,1098,1100],{"class":779,"line":780},[777,1091,896],{"class":783},[777,1093,1016],{"class":823},[777,1095,1019],{"class":783},[777,1097,788],{"class":787},[777,1099,1024],{"class":791},[777,1101,915],{"class":787},[777,1103,1104,1106,1108,1111,1113,1115,1117,1119,1121],{"class":779,"line":800},[777,1105,896],{"class":783},[777,1107,899],{"class":787},[777,1109,1110],{"class":823}," provideVyUI",[777,1112,905],{"class":787},[777,1114,908],{"class":783},[777,1116,788],{"class":787},[777,1118,46],{"class":791},[777,1120,794],{"class":787},[777,1122,1124],{"class":1123},"sHwdD"," \u002F\u002F or: app.use(VyUI, vyuiConfig) on web\n",[777,1126,1127],{"class":779,"line":807},[777,1128,804],{"emptyLinePlaceholder":803},[777,1130,1131,1134,1137,1139],{"class":779,"line":820},[777,1132,1133],{"class":950},"provideVyUI",[777,1135,1136],{"class":823},"(app",[777,1138,983],{"class":787},[777,1140,1141],{"class":823}," vyuiConfig)\n",[466,1143,1144,1147,1148,1151,1152,1154,1155,1158],{},[469,1145,1146],{},"createVyuiPreset"," dev-warns if a listed color has no backing ",[469,1149,1150],{},"--ui-color-*"," var, so a \"class resolves to nothing\" mistake surfaces at build time instead of on device. To also type-check ",[469,1153,866],{}," on every component's ",[469,1156,1157],{},"color"," prop:",[767,1160,1163],{"className":886,"code":1161,"filename":1162,"language":889,"meta":773,"style":773},"declare module '@vyui\u002Fkit' {\n  interface VyuiColorRegistry { tertiary: true }\n}\n","vyui-colors.d.ts",[469,1164,1165,1181,1203],{"__ignoreMap":773},[777,1166,1167,1170,1173,1175,1177,1179],{"class":779,"line":780},[777,1168,1169],{"class":813},"declare",[777,1171,1172],{"class":813}," module",[777,1174,788],{"class":787},[777,1176,46],{"class":791},[777,1178,794],{"class":787},[777,1180,817],{"class":787},[777,1182,1183,1186,1190,1192,1195,1197,1200],{"class":779,"line":800},[777,1184,1185],{"class":813},"  interface",[777,1187,1189],{"class":1188},"sBMFI"," VyuiColorRegistry",[777,1191,899],{"class":787},[777,1193,1194],{"class":961}," tertiary",[777,1196,810],{"class":787},[777,1198,1199],{"class":1188}," true",[777,1201,1202],{"class":787}," }\n",[777,1204,1205],{"class":779,"line":807},[777,1206,855],{"class":787},[466,1208,1209,1210,1213,1214,1217],{},"Then add the ",[469,1211,1212],{},"--ui-color-tertiary-{50..950}"," CSS-var block — generate the ",[469,1215,1216],{},".d.ts"," and the CSS together with:",[767,1219,1223],{"className":1220,"code":1221,"language":1222,"meta":773,"style":773},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","node node_modules\u002F@vyui\u002Fkit\u002Fscripts\u002Fgen-colors.mjs --colors tertiary=indigo\n","sh",[469,1224,1225],{"__ignoreMap":773},[777,1226,1227,1230,1233,1236],{"class":779,"line":780},[777,1228,1229],{"class":1188},"node",[777,1231,1232],{"class":791}," node_modules\u002F@vyui\u002Fkit\u002Fscripts\u002Fgen-colors.mjs",[777,1234,1235],{"class":791}," --colors",[777,1237,1238],{"class":791}," tertiary=indigo\n",[466,1240,1241,1242,1249,1250,1253,1254,1256],{},"See the ",[1243,1244,1248],"a",{"href":1245,"rel":1246},"https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Ftree\u002Fmain\u002Fpackages\u002Fkit#adding-a-custom-color",[1247],"nofollow","@vyui\u002Fkit README"," for the full flow, or ",[1243,1251,14],{"href":1252},"\u002Fgetting-started\u002Finstallation#single-source-config-with-definevyuiconfig"," for how ",[469,1255,878],{}," fits alongside the rest of the plugin setup.",[637,1258,1260],{"id":1259},"related","Related",[1262,1263,1264,1268],"ul",{},[651,1265,1266],{},[1243,1267,318],{"href":319},[651,1269,1270],{},[1243,1271,309],{"href":310},[1273,1274,1275],"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":773,"searchDepth":780,"depth":800,"links":1277},[1278,1279,1280],{"id":639,"depth":800,"text":640},{"id":747,"depth":800,"text":748},{"id":1259,"depth":800,"text":1260},"Semantic colors, the three CSS-variable tiers, and how to configure or add a color.","md",{},{"icon":316},{"title":313,"description":1281},"YWRioUA29JFWSsnJ8R9b7FFp9WIg8nO55eHAzKVGqck",[1288,1290],{"title":309,"path":310,"stem":311,"description":1289,"icon":-1,"children":-1,"navigation":-1},"Per-component theme files, createTv\u002Ftv, and runtime app config — the three ways to override a Vy UI theme.",{"title":318,"path":319,"stem":320,"description":1291,"icon":-1,"children":-1,"navigation":-1},"useColorMode, the app-root class + remount contract, and what's not yet migrated to the semantic surface tier.",1785060134266]