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