[{"data":1,"prerenderedAt":690},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-css-utilities-effects":273,"-colorffy-css-utilities-effects-surround":685},[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":64,"body":275,"description":678,"extension":679,"links":680,"meta":681,"navigation":682,"path":65,"seo":683,"stem":66,"__hash__":684},"docs\u002F2.colorffy-css\u002F4.utilities\u002F04.effects.md",{"type":276,"value":277,"toc":670},"minimark",[278,283,381,435,439,447,473,511,515,528,532,538,579,583,636,640,666],[279,280,282],"h2",{"id":281},"filters","Filters",[284,285,290],"pre",{"className":286,"code":287,"language":288,"meta":289,"style":289},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cimg class=\"filter-grayscale\" src=\"\u002Fphoto.jpg\" alt=\"\" \u002F>\n\u003Cimg class=\"filter-brightness-75 filter-contrast-200\" src=\"\u002Fphoto.jpg\" alt=\"\" \u002F>\n","html","",[291,292,293,345],"code",{"__ignoreMap":289},[294,295,298,302,306,310,313,316,320,322,325,327,329,332,334,337,339,342],"span",{"class":296,"line":297},"line",1,[294,299,301],{"class":300},"sMK4o","\u003C",[294,303,305],{"class":304},"swJcz","img",[294,307,309],{"class":308},"spNyl"," class",[294,311,312],{"class":300},"=",[294,314,315],{"class":300},"\"",[294,317,319],{"class":318},"sfazB","filter-grayscale",[294,321,315],{"class":300},[294,323,324],{"class":308}," src",[294,326,312],{"class":300},[294,328,315],{"class":300},[294,330,331],{"class":318},"\u002Fphoto.jpg",[294,333,315],{"class":300},[294,335,336],{"class":308}," alt",[294,338,312],{"class":300},[294,340,341],{"class":300},"\"\"",[294,343,344],{"class":300}," \u002F>\n",[294,346,348,350,352,354,356,358,361,363,365,367,369,371,373,375,377,379],{"class":296,"line":347},2,[294,349,301],{"class":300},[294,351,305],{"class":304},[294,353,309],{"class":308},[294,355,312],{"class":300},[294,357,315],{"class":300},[294,359,360],{"class":318},"filter-brightness-75 filter-contrast-200",[294,362,315],{"class":300},[294,364,324],{"class":308},[294,366,312],{"class":300},[294,368,315],{"class":300},[294,370,331],{"class":318},[294,372,315],{"class":300},[294,374,336],{"class":308},[294,376,312],{"class":300},[294,378,341],{"class":300},[294,380,344],{"class":300},[382,383,384,390,398,406,414,422,430],"ul",{},[385,386,387],"li",{},[291,388,389],{},"filter-invert",[385,391,392,394,395],{},[291,393,319],{}," · ",[291,396,397],{},"filter-grayscale-{0|25|50|75}",[385,399,400,394,403],{},[291,401,402],{},"filter-sepia",[291,404,405],{},"filter-sepia-{0|25|50|75|200}",[385,407,408,394,411],{},[291,409,410],{},"filter-saturate",[291,412,413],{},"filter-saturate-{0|25|50|75|200}",[385,415,416,394,419],{},[291,417,418],{},"filter-brightness",[291,420,421],{},"filter-brightness-{0|25|50|75|200}",[385,423,424,394,427],{},[291,425,426],{},"filter-contrast",[291,428,429],{},"filter-contrast-{0|25|50|75|200}",[385,431,432],{},[291,433,434],{},"filter-hue-rotate-{0|15|30|45|60|90|180|270}",[279,436,438],{"id":437},"transforms","Transforms",[440,441,442,443,446],"p",{},"Responsive variants available (",[291,444,445],{},"{util}-{breakpoint}-{value}","):",[382,448,449,454,467],{},[385,450,451],{},[291,452,453],{},"rotate-{0|45|90|135|180|225|270|315|360}",[385,455,456,459,460,463,464],{},[291,457,458],{},"translate-x-{step}"," \u002F ",[291,461,462],{},"translate-y-{step}",", with negatives ",[291,465,466],{},"translate-x--{step}",[385,468,469,472],{},[291,470,471],{},"scale-{0|1|2|3|4|5}"," (0, 0.25, 0.5, 0.75, 1, 1.25)",[284,474,476],{"className":286,"code":475,"language":288,"meta":289,"style":289},"\u003Cdiv class=\"rotate-45 scale-4\">…\u003C\u002Fdiv>\n",[291,477,478],{"__ignoreMap":289},[294,479,480,482,485,487,489,491,494,496,499,503,506,508],{"class":296,"line":297},[294,481,301],{"class":300},[294,483,484],{"class":304},"div",[294,486,309],{"class":308},[294,488,312],{"class":300},[294,490,315],{"class":300},[294,492,493],{"class":318},"rotate-45 scale-4",[294,495,315],{"class":300},[294,497,498],{"class":300},">",[294,500,502],{"class":501},"sTEyZ","…",[294,504,505],{"class":300},"\u003C\u002F",[294,507,484],{"class":304},[294,509,510],{"class":300},">\n",[279,512,514],{"id":513},"opacity-blend-modes","Opacity & blend modes",[382,516,517,523],{},[385,518,519,522],{},[291,520,521],{},"opacity-{0–100}"," (steps of 10)",[385,524,525],{},[291,526,527],{},"mix-blend-{normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity}",[279,529,531],{"id":530},"aspect-ratio","Aspect ratio",[440,533,534,537],{},[291,535,536],{},"aspect-{auto|square|1x1|video|16x9|portrait|cinema|4x3|3x2|2x1}",":",[284,539,541],{"className":286,"code":540,"language":288,"meta":289,"style":289},"\u003Cimg class=\"aspect-video\" src=\"\u002Fcover.jpg\" alt=\"\" \u002F>\n",[291,542,543],{"__ignoreMap":289},[294,544,545,547,549,551,553,555,558,560,562,564,566,569,571,573,575,577],{"class":296,"line":297},[294,546,301],{"class":300},[294,548,305],{"class":304},[294,550,309],{"class":308},[294,552,312],{"class":300},[294,554,315],{"class":300},[294,556,557],{"class":318},"aspect-video",[294,559,315],{"class":300},[294,561,324],{"class":308},[294,563,312],{"class":300},[294,565,315],{"class":300},[294,567,568],{"class":318},"\u002Fcover.jpg",[294,570,315],{"class":300},[294,572,336],{"class":308},[294,574,312],{"class":300},[294,576,341],{"class":300},[294,578,344],{"class":300},[279,580,582],{"id":581},"scroll-overflow","Scroll & overflow",[382,584,585,598,612,622],{},[385,586,587,588,591,592,459,595],{},"Overflow: ",[291,589,590],{},"overflow-{hidden|visible|auto|scroll|clip}"," and axis ",[291,593,594],{},"overflow-x-*",[291,596,597],{},"overflow-y-*",[385,599,600,601,604,605,459,608,611],{},"Overscroll: ",[291,602,603],{},"overscroll-{auto|contain|none}"," (and ",[291,606,607],{},"-x",[291,609,610],{},"-y",")",[385,613,614,615,618,619],{},"Scroll containers: ",[291,616,617],{},"inline-scroll",", ",[291,620,621],{},"block-scroll",[385,623,624,625,628,629,459,632,635],{},"Effects: ",[291,626,627],{},"scrollbar-custom"," (thin themed scrollbar), ",[291,630,631],{},"scroll-fade-block-effect",[291,633,634],{},"scroll-fade-inline-effect"," (edge fade driven by scroll position)",[279,637,639],{"id":638},"misc","Misc",[382,641,642,647,655],{},[385,643,644],{},[291,645,646],{},"cursor-{pointer|default|help|wait|grab|grabbing|not-allowed}",[385,648,649,618,652],{},[291,650,651],{},"isolate",[291,653,654],{},"isolate-auto",[385,656,657,618,660,618,663],{},[291,658,659],{},"mask-shape",[291,661,662],{},"mask-inline",[291,664,665],{},"mask-block",[667,668,669],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":289,"searchDepth":347,"depth":347,"links":671},[672,673,674,675,676,677],{"id":281,"depth":347,"text":282},{"id":437,"depth":347,"text":438},{"id":513,"depth":347,"text":514},{"id":530,"depth":347,"text":531},{"id":581,"depth":347,"text":582},{"id":638,"depth":347,"text":639},"Filters, transforms, opacity, blend modes, masks, and scroll effects.","md",null,{},{"icon":67},{"title":64,"description":678},"GQLd9MESm77cQzOyyts6DUZN7yrxMxnXx9a8WXtS4vM",[686,688],{"title":59,"path":60,"stem":61,"description":687,"icon":62,"children":-1},"Display, flexbox, alignment, position, sizing, and z-index utilities.",{"title":69,"path":70,"stem":71,"description":689,"icon":72,"children":-1},"Margin, padding, gap, and flow utilities on a consistent scale.",1782196219260]