[{"data":1,"prerenderedAt":859},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-installation":273,"-getting-started-installation-surround":854},[4,21,115],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,268],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,204,209,214,218,223,228,233,238,243,248,253,258,263],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F09.card","i-lucide-square",{"title":181,"path":182,"stem":183,"icon":184},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F10.datatable","i-lucide-table",{"title":186,"path":187,"stem":188,"icon":189},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F11.empty","i-lucide-inbox",{"title":191,"path":192,"stem":193,"icon":194},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F12.icons","i-lucide-shapes",{"title":196,"path":197,"stem":198,"icon":199},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F13.inputs","i-lucide-text-cursor-input",{"title":79,"path":201,"stem":202,"icon":203},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F14.layout","i-lucide-layout",{"title":205,"path":206,"stem":207,"icon":208},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F15.list","i-lucide-list",{"title":210,"path":211,"stem":212,"icon":213},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F16.loading","i-lucide-loader-circle",{"title":215,"path":216,"stem":217,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F17.modal",{"title":219,"path":220,"stem":221,"icon":222},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F18.navbar","i-lucide-panel-top",{"title":224,"path":225,"stem":226,"icon":227},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F19.navigation-bar","i-lucide-navigation",{"title":229,"path":230,"stem":231,"icon":232},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F20.popover","i-lucide-message-square",{"title":234,"path":235,"stem":236,"icon":237},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F21.popover-menu","i-lucide-ellipsis",{"title":239,"path":240,"stem":241,"icon":242},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F22.progress","i-lucide-loader",{"title":244,"path":245,"stem":246,"icon":247},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F23.segmented-controls","i-lucide-toggle-left",{"title":249,"path":250,"stem":251,"icon":252},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F24.sidebar","i-lucide-panel-left",{"title":254,"path":255,"stem":256,"icon":257},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F25.skeleton","i-lucide-square-dashed",{"title":259,"path":260,"stem":261,"icon":262},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F26.tabs","i-lucide-panels-top-left",{"title":264,"path":265,"stem":266,"icon":267},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F27.tooltip","i-lucide-message-circle",{"title":269,"path":270,"stem":271,"icon":272},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"id":274,"title":16,"body":275,"description":847,"extension":848,"links":849,"meta":850,"navigation":851,"path":17,"seo":852,"stem":18,"__hash__":853},"docs\u002F1.getting-started\u002F2.installation.md",{"type":276,"value":277,"toc":837},"minimark",[278,283,307,311,382,387,391,435,439,446,475,479,483,612,616,619,672,750,754,757,833],[279,280,282],"h2",{"id":281},"prerequisites","Prerequisites",[284,285,286,304],"ul",{},[287,288,289,290,294,295,299,300,303],"li",{},"A ",[291,292,293],"strong",{},"Vue 3"," (",[296,297,298],"code",{},"^3.5",") or ",[291,301,302],{},"Nuxt 3 \u002F 4"," project.",[287,305,306],{},"Node.js 18+ and your package manager of choice.",[279,308,310],{"id":309},"install-colorffy-ui","Install Colorffy UI",[312,313,314,339,354,368],"code-group",{},[315,316,322],"pre",{"className":317,"code":318,"filename":319,"language":320,"meta":321,"style":321},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @colorffy\u002Fui\n","pnpm","bash","",[296,323,324],{"__ignoreMap":321},[325,326,329,332,336],"span",{"class":327,"line":328},"line",1,[325,330,319],{"class":331},"sBMFI",[325,333,335],{"class":334},"sfazB"," add",[325,337,338],{"class":334}," @colorffy\u002Fui\n",[315,340,343],{"className":317,"code":341,"filename":342,"language":320,"meta":321,"style":321},"npm install @colorffy\u002Fui\n","npm",[296,344,345],{"__ignoreMap":321},[325,346,347,349,352],{"class":327,"line":328},[325,348,342],{"class":331},[325,350,351],{"class":334}," install",[325,353,338],{"class":334},[315,355,358],{"className":317,"code":356,"filename":357,"language":320,"meta":321,"style":321},"yarn add @colorffy\u002Fui\n","yarn",[296,359,360],{"__ignoreMap":321},[325,361,362,364,366],{"class":327,"line":328},[325,363,357],{"class":331},[325,365,335],{"class":334},[325,367,338],{"class":334},[315,369,372],{"className":317,"code":370,"filename":371,"language":320,"meta":321,"style":321},"bun add @colorffy\u002Fui\n","bun",[296,373,374],{"__ignoreMap":321},[325,375,376,378,380],{"class":327,"line":328},[325,377,371],{"class":331},[325,379,335],{"class":334},[325,381,338],{"class":334},[383,384,386],"h3",{"id":385},"peer-dependencies","Peer dependencies",[388,389,390],"p",{},"Colorffy UI relies on the following peer dependencies:",[312,392,393,416],{},[315,394,396],{"className":317,"code":395,"filename":319,"language":320,"meta":321,"style":321},"pnpm add @vueuse\u002Fcomponents @vueuse\u002Fcore floating-vue vue\n",[296,397,398],{"__ignoreMap":321},[325,399,400,402,404,407,410,413],{"class":327,"line":328},[325,401,319],{"class":331},[325,403,335],{"class":334},[325,405,406],{"class":334}," @vueuse\u002Fcomponents",[325,408,409],{"class":334}," @vueuse\u002Fcore",[325,411,412],{"class":334}," floating-vue",[325,414,415],{"class":334}," vue\n",[315,417,419],{"className":317,"code":418,"filename":342,"language":320,"meta":321,"style":321},"npm install @vueuse\u002Fcomponents @vueuse\u002Fcore floating-vue vue\n",[296,420,421],{"__ignoreMap":321},[325,422,423,425,427,429,431,433],{"class":327,"line":328},[325,424,342],{"class":331},[325,426,351],{"class":334},[325,428,406],{"class":334},[325,430,409],{"class":334},[325,432,412],{"class":334},[325,434,415],{"class":334},[279,436,438],{"id":437},"install-colorffy-css-recommended","Install Colorffy CSS (recommended)",[388,440,441,442,445],{},"Colorffy UI ships ",[291,443,444],{},"unstyled",". Add Colorffy CSS for beautiful styling out of the box:",[312,447,448,462],{},[315,449,451],{"className":317,"code":450,"filename":319,"language":320,"meta":321,"style":321},"pnpm add @colorffy\u002Fcss\n",[296,452,453],{"__ignoreMap":321},[325,454,455,457,459],{"class":327,"line":328},[325,456,319],{"class":331},[325,458,335],{"class":334},[325,460,461],{"class":334}," @colorffy\u002Fcss\n",[315,463,465],{"className":317,"code":464,"filename":342,"language":320,"meta":321,"style":321},"npm install @colorffy\u002Fcss\n",[296,466,467],{"__ignoreMap":321},[325,468,469,471,473],{"class":327,"line":328},[325,470,342],{"class":331},[325,472,351],{"class":334},[325,474,461],{"class":334},[476,477,478],"tip",{},"You can also use Colorffy CSS on its own — it has no dependency on Colorffy UI.",[279,480,482],{"id":481},"register-in-vue-3","Register in Vue 3",[315,484,489],{"className":485,"code":486,"filename":487,"language":488,"meta":321,"style":321},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import ColorffyUI from '@colorffy\u002Fui'\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\nimport '@colorffy\u002Fcss'\n\ncreateApp(App).use(ColorffyUI).mount('#app')\n","main.ts","ts",[296,490,491,514,538,555,567,574],{"__ignoreMap":321},[325,492,493,497,501,504,508,511],{"class":327,"line":328},[325,494,496],{"class":495},"s7zQu","import",[325,498,500],{"class":499},"sTEyZ"," ColorffyUI ",[325,502,503],{"class":495},"from",[325,505,507],{"class":506},"sMK4o"," '",[325,509,510],{"class":334},"@colorffy\u002Fui",[325,512,513],{"class":506},"'\n",[325,515,517,519,522,525,528,531,533,536],{"class":327,"line":516},2,[325,518,496],{"class":495},[325,520,521],{"class":506}," {",[325,523,524],{"class":499}," createApp",[325,526,527],{"class":506}," }",[325,529,530],{"class":495}," from",[325,532,507],{"class":506},[325,534,535],{"class":334},"vue",[325,537,513],{"class":506},[325,539,541,543,546,548,550,553],{"class":327,"line":540},3,[325,542,496],{"class":495},[325,544,545],{"class":499}," App ",[325,547,503],{"class":495},[325,549,507],{"class":506},[325,551,552],{"class":334},".\u002FApp.vue",[325,554,513],{"class":506},[325,556,558,560,562,565],{"class":327,"line":557},4,[325,559,496],{"class":495},[325,561,507],{"class":506},[325,563,564],{"class":334},"@colorffy\u002Fcss",[325,566,513],{"class":506},[325,568,570],{"class":327,"line":569},5,[325,571,573],{"emptyLinePlaceholder":572},true,"\n",[325,575,577,581,584,587,590,593,595,598,601,604,607,609],{"class":327,"line":576},6,[325,578,580],{"class":579},"s2Zo4","createApp",[325,582,583],{"class":499},"(App)",[325,585,586],{"class":506},".",[325,588,589],{"class":579},"use",[325,591,592],{"class":499},"(ColorffyUI)",[325,594,586],{"class":506},[325,596,597],{"class":579},"mount",[325,599,600],{"class":499},"(",[325,602,603],{"class":506},"'",[325,605,606],{"class":334},"#app",[325,608,603],{"class":506},[325,610,611],{"class":499},")\n",[279,613,615],{"id":614},"register-in-nuxt-3","Register in Nuxt 3",[388,617,618],{},"Add the stylesheet, then register the plugin:",[315,620,623],{"className":485,"code":621,"filename":622,"language":488,"meta":321,"style":321},"export default defineNuxtConfig({\n  css: ['@colorffy\u002Fcss'],\n})\n","nuxt.config.ts",[296,624,625,641,665],{"__ignoreMap":321},[325,626,627,630,633,636,638],{"class":327,"line":328},[325,628,629],{"class":495},"export",[325,631,632],{"class":495}," default",[325,634,635],{"class":579}," defineNuxtConfig",[325,637,600],{"class":499},[325,639,640],{"class":506},"{\n",[325,642,643,647,650,653,655,657,659,662],{"class":327,"line":516},[325,644,646],{"class":645},"swJcz","  css",[325,648,649],{"class":506},":",[325,651,652],{"class":499}," [",[325,654,603],{"class":506},[325,656,564],{"class":334},[325,658,603],{"class":506},[325,660,661],{"class":499},"]",[325,663,664],{"class":506},",\n",[325,666,667,670],{"class":327,"line":540},[325,668,669],{"class":506},"}",[325,671,611],{"class":499},[315,673,676],{"className":485,"code":674,"filename":675,"language":488,"meta":321,"style":321},"import ColorffyUI from '@colorffy\u002Fui'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(ColorffyUI)\n})\n","plugins\u002Fcolorffy-ui.ts",[296,677,678,692,696,723,744],{"__ignoreMap":321},[325,679,680,682,684,686,688,690],{"class":327,"line":328},[325,681,496],{"class":495},[325,683,500],{"class":499},[325,685,503],{"class":495},[325,687,507],{"class":506},[325,689,510],{"class":334},[325,691,513],{"class":506},[325,693,694],{"class":327,"line":516},[325,695,573],{"emptyLinePlaceholder":572},[325,697,698,700,702,705,707,709,713,716,720],{"class":327,"line":540},[325,699,629],{"class":495},[325,701,632],{"class":495},[325,703,704],{"class":579}," defineNuxtPlugin",[325,706,600],{"class":499},[325,708,600],{"class":506},[325,710,712],{"class":711},"sHdIc","nuxtApp",[325,714,715],{"class":506},")",[325,717,719],{"class":718},"spNyl"," =>",[325,721,722],{"class":506}," {\n",[325,724,725,728,730,733,735,737,739,742],{"class":327,"line":557},[325,726,727],{"class":499},"  nuxtApp",[325,729,586],{"class":506},[325,731,732],{"class":499},"vueApp",[325,734,586],{"class":506},[325,736,589],{"class":579},[325,738,600],{"class":645},[325,740,741],{"class":499},"ColorffyUI",[325,743,611],{"class":645},[325,745,746,748],{"class":327,"line":569},[325,747,669],{"class":506},[325,749,611],{"class":499},[279,751,753],{"id":752},"verify-the-installation","Verify the installation",[388,755,756],{},"Render a button anywhere in your app:",[315,758,762],{"className":759,"code":760,"filename":761,"language":535,"meta":321,"style":321},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CUiButton variant=\"filled\" color=\"primary\" text=\"It works!\" \u002F>\n\u003C\u002Ftemplate>\n","App.vue",[296,763,764,775,824],{"__ignoreMap":321},[325,765,766,769,772],{"class":327,"line":328},[325,767,768],{"class":506},"\u003C",[325,770,771],{"class":645},"template",[325,773,774],{"class":506},">\n",[325,776,777,780,783,786,789,792,795,797,800,802,804,807,809,812,814,816,819,821],{"class":327,"line":516},[325,778,779],{"class":506},"  \u003C",[325,781,782],{"class":645},"UiButton",[325,784,785],{"class":718}," variant",[325,787,788],{"class":506},"=",[325,790,791],{"class":506},"\"",[325,793,794],{"class":334},"filled",[325,796,791],{"class":506},[325,798,799],{"class":718}," color",[325,801,788],{"class":506},[325,803,791],{"class":506},[325,805,806],{"class":334},"primary",[325,808,791],{"class":506},[325,810,811],{"class":718}," text",[325,813,788],{"class":506},[325,815,791],{"class":506},[325,817,818],{"class":334},"It works!",[325,820,791],{"class":506},[325,822,823],{"class":506}," \u002F>\n",[325,825,826,829,831],{"class":327,"line":540},[325,827,828],{"class":506},"\u003C\u002F",[325,830,771],{"class":645},[325,832,774],{"class":506},[834,835,836],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .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}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":321,"searchDepth":516,"depth":516,"links":838},[839,840,843,844,845,846],{"id":281,"depth":516,"text":282},{"id":309,"depth":516,"text":310,"children":841},[842],{"id":385,"depth":540,"text":386},{"id":437,"depth":516,"text":438},{"id":481,"depth":516,"text":482},{"id":614,"depth":516,"text":615},{"id":752,"depth":516,"text":753},"How to install Colorffy in a Vue 3 or Nuxt 3 project.","md",null,{},{"icon":19},{"title":16,"description":847},"jVQ92OWSevX_8lSf_r9W44LzbHpR5RPpXAJDdkmwj0o",[855,857],{"title":11,"path":12,"stem":13,"description":856,"icon":14,"children":-1},"Learn what Colorffy is and when to use it.",{"title":28,"path":29,"stem":30,"description":858,"icon":31,"children":-1},"An expressive SCSS framework with a tonal color system and vivid gradients.",1782196219260]