[{"data":1,"prerenderedAt":858},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-css-customization":273,"-colorffy-css-customization-surround":853},[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":38,"body":275,"description":846,"extension":847,"links":848,"meta":849,"navigation":850,"path":39,"seo":851,"stem":40,"__hash__":852},"docs\u002F2.colorffy-css\u002F3.customization.md",{"type":276,"value":277,"toc":840},"minimark",[278,282,287,300,403,408,504,508,634,638,641,772,776,836],[279,280,281],"p",{},"Colorffy CSS is built to be customized — override variables at build time or CSS custom properties at runtime.",[283,284,286],"h2",{"id":285},"override-scss-variables","Override SCSS variables",[279,288,289,290,294,295,299],{},"Use ",[291,292,293],"code",{},"@forward ... with"," to set your brand values ",[296,297,298],"strong",{},"before"," importing the framework:",[301,302,308],"pre",{"className":303,"code":304,"filename":305,"language":306,"meta":307,"style":307},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@forward '@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fvariables' with (\n  $primary: #4f46e5,\n  $secondary: #ec4899,\n  $accent: #0ea5e9,\n);\n\n@use '@colorffy\u002Fcss\u002Fscss\u002Fmain';\n","variables.scss","scss","",[291,309,310,338,350,361,372,381,388],{"__ignoreMap":307},[311,312,315,319,323,327,330,334],"span",{"class":313,"line":314},"line",1,[311,316,318],{"class":317},"s7zQu","@forward",[311,320,322],{"class":321},"sMK4o"," '",[311,324,326],{"class":325},"sfazB","@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fvariables",[311,328,329],{"class":321},"'",[311,331,333],{"class":332},"s2Zo4"," with",[311,335,337],{"class":336},"sTEyZ"," (\n",[311,339,341,344,347],{"class":313,"line":340},2,[311,342,343],{"class":336},"  $primary: #",[311,345,346],{"class":332},"4f46e5",[311,348,349],{"class":336},",\n",[311,351,353,356,359],{"class":313,"line":352},3,[311,354,355],{"class":336},"  $secondary: #",[311,357,358],{"class":332},"ec4899",[311,360,349],{"class":336},[311,362,364,367,370],{"class":313,"line":363},4,[311,365,366],{"class":336},"  $accent: #",[311,368,369],{"class":332},"0ea5e9",[311,371,349],{"class":336},[311,373,375,378],{"class":313,"line":374},5,[311,376,377],{"class":336},")",[311,379,380],{"class":321},";\n",[311,382,384],{"class":313,"line":383},6,[311,385,387],{"emptyLinePlaceholder":386},true,"\n",[311,389,391,394,396,399,401],{"class":313,"line":390},7,[311,392,393],{"class":317},"@use",[311,395,322],{"class":321},[311,397,398],{"class":325},"@colorffy\u002Fcss\u002Fscss\u002Fmain",[311,400,329],{"class":321},[311,402,380],{"class":321},[279,404,405],{},[296,406,407],{},"Commonly overridden variables:",[301,409,411],{"className":303,"code":410,"language":306,"meta":307,"style":307},"\u002F\u002F Colors\n$primary: #002678;\n$secondary: #0075d6;\n$accent: #fda001;\n\n\u002F\u002F Typography\n$font-primary: 'Your Font Family';\n$font-secondary: 'Your Font Family';\n",[291,412,413,419,435,449,463,467,472,488],{"__ignoreMap":307},[311,414,415],{"class":313,"line":314},[311,416,418],{"class":417},"sHwdD","\u002F\u002F Colors\n",[311,420,421,424,427,430,433],{"class":313,"line":340},[311,422,423],{"class":336},"$primary",[311,425,426],{"class":321},":",[311,428,429],{"class":321}," #",[311,431,432],{"class":336},"002678",[311,434,380],{"class":321},[311,436,437,440,442,444,447],{"class":313,"line":352},[311,438,439],{"class":336},"$secondary",[311,441,426],{"class":321},[311,443,429],{"class":321},[311,445,446],{"class":336},"0075d6",[311,448,380],{"class":321},[311,450,451,454,456,458,461],{"class":313,"line":363},[311,452,453],{"class":336},"$accent",[311,455,426],{"class":321},[311,457,429],{"class":321},[311,459,460],{"class":336},"fda001",[311,462,380],{"class":321},[311,464,465],{"class":313,"line":374},[311,466,387],{"emptyLinePlaceholder":386},[311,468,469],{"class":313,"line":383},[311,470,471],{"class":417},"\u002F\u002F Typography\n",[311,473,474,477,479,481,484,486],{"class":313,"line":390},[311,475,476],{"class":336},"$font-primary",[311,478,426],{"class":321},[311,480,322],{"class":321},[311,482,483],{"class":325},"Your Font Family",[311,485,329],{"class":321},[311,487,380],{"class":321},[311,489,491,494,496,498,500,502],{"class":313,"line":490},8,[311,492,493],{"class":336},"$font-secondary",[311,495,426],{"class":321},[311,497,322],{"class":321},[311,499,483],{"class":325},[311,501,329],{"class":321},[311,503,380],{"class":321},[283,505,507],{"id":506},"use-mixins-and-functions","Use mixins and functions",[301,509,511],{"className":303,"code":510,"language":306,"meta":307,"style":307},"@use '@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fmixins' as mix;\n@use '@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Ffunctions' as fn;\n\n.hero {\n  @include mix.flex-center;\n  @include mix.glass-effect;\n  @include mix.text-gradient(45deg, (#ff0080, #ff8c00));\n}\n",[291,512,513,532,550,554,566,580,593,629],{"__ignoreMap":307},[311,514,515,517,519,522,524,527,530],{"class":313,"line":314},[311,516,393],{"class":317},[311,518,322],{"class":321},[311,520,521],{"class":325},"@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fmixins",[311,523,329],{"class":321},[311,525,526],{"class":317}," as",[311,528,529],{"class":336}," mix",[311,531,380],{"class":321},[311,533,534,536,538,541,543,545,548],{"class":313,"line":340},[311,535,393],{"class":317},[311,537,322],{"class":321},[311,539,540],{"class":325},"@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Ffunctions",[311,542,329],{"class":321},[311,544,526],{"class":317},[311,546,547],{"class":336}," fn",[311,549,380],{"class":321},[311,551,552],{"class":313,"line":352},[311,553,387],{"emptyLinePlaceholder":386},[311,555,556,559,563],{"class":313,"line":363},[311,557,558],{"class":321},".",[311,560,562],{"class":561},"sBMFI","hero",[311,564,565],{"class":321}," {\n",[311,567,568,571,573,575,578],{"class":313,"line":374},[311,569,570],{"class":317},"  @include",[311,572,529],{"class":336},[311,574,558],{"class":321},[311,576,577],{"class":332},"flex-center",[311,579,380],{"class":321},[311,581,582,584,586,588,591],{"class":313,"line":383},[311,583,570],{"class":317},[311,585,529],{"class":336},[311,587,558],{"class":321},[311,589,590],{"class":332},"glass-effect",[311,592,380],{"class":321},[311,594,595,597,599,601,604,607,611,614,617,620,623,626],{"class":313,"line":390},[311,596,570],{"class":317},[311,598,529],{"class":336},[311,600,558],{"class":321},[311,602,603],{"class":332},"text-gradient",[311,605,606],{"class":321},"(",[311,608,610],{"class":609},"sbssI","45deg",[311,612,613],{"class":336},", ",[311,615,616],{"class":321},"(#",[311,618,619],{"class":336},"ff0080, ",[311,621,622],{"class":321},"#",[311,624,625],{"class":336},"ff8c00",[311,627,628],{"class":321},"));\n",[311,630,631],{"class":313,"line":490},[311,632,633],{"class":321},"}\n",[283,635,637],{"id":636},"customize-in-nuxt-3","Customize in Nuxt 3",[279,639,640],{},"Feed your variables into every SCSS file via Vite:",[301,642,647],{"className":643,"code":644,"filename":645,"language":646,"meta":307,"style":307},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  css: ['~\u002Fassets\u002Fscss\u002Fmain.scss'],\n  vite: {\n    css: {\n      preprocessorOptions: {\n        scss: {\n          additionalData: '@use \"~\u002Fassets\u002Fscss\u002Fvariables.scss\" as *;',\n        },\n      },\n    },\n  },\n})\n","nuxt.config.ts","ts",[291,648,649,665,688,697,706,715,724,740,745,751,757,763],{"__ignoreMap":307},[311,650,651,654,657,660,662],{"class":313,"line":314},[311,652,653],{"class":317},"export",[311,655,656],{"class":317}," default",[311,658,659],{"class":332}," defineNuxtConfig",[311,661,606],{"class":336},[311,663,664],{"class":321},"{\n",[311,666,667,671,673,676,678,681,683,686],{"class":313,"line":340},[311,668,670],{"class":669},"swJcz","  css",[311,672,426],{"class":321},[311,674,675],{"class":336}," [",[311,677,329],{"class":321},[311,679,680],{"class":325},"~\u002Fassets\u002Fscss\u002Fmain.scss",[311,682,329],{"class":321},[311,684,685],{"class":336},"]",[311,687,349],{"class":321},[311,689,690,693,695],{"class":313,"line":352},[311,691,692],{"class":669},"  vite",[311,694,426],{"class":321},[311,696,565],{"class":321},[311,698,699,702,704],{"class":313,"line":363},[311,700,701],{"class":669},"    css",[311,703,426],{"class":321},[311,705,565],{"class":321},[311,707,708,711,713],{"class":313,"line":374},[311,709,710],{"class":669},"      preprocessorOptions",[311,712,426],{"class":321},[311,714,565],{"class":321},[311,716,717,720,722],{"class":313,"line":383},[311,718,719],{"class":669},"        scss",[311,721,426],{"class":321},[311,723,565],{"class":321},[311,725,726,729,731,733,736,738],{"class":313,"line":390},[311,727,728],{"class":669},"          additionalData",[311,730,426],{"class":321},[311,732,322],{"class":321},[311,734,735],{"class":325},"@use \"~\u002Fassets\u002Fscss\u002Fvariables.scss\" as *;",[311,737,329],{"class":321},[311,739,349],{"class":321},[311,741,742],{"class":313,"line":490},[311,743,744],{"class":321},"        },\n",[311,746,748],{"class":313,"line":747},9,[311,749,750],{"class":321},"      },\n",[311,752,754],{"class":313,"line":753},10,[311,755,756],{"class":321},"    },\n",[311,758,760],{"class":313,"line":759},11,[311,761,762],{"class":321},"  },\n",[311,764,766,769],{"class":313,"line":765},12,[311,767,768],{"class":321},"}",[311,770,771],{"class":336},")\n",[283,773,775],{"id":774},"override-at-runtime","Override at runtime",[301,777,781],{"className":778,"code":779,"language":780,"meta":307,"style":307},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --theme-primary-base: #4f46e5;\n  --_btn-radius: 50px;\n  --_card-bg-color: #ffffff;\n}\n","css",[291,782,783,793,806,818,832],{"__ignoreMap":307},[311,784,785,787,791],{"class":313,"line":314},[311,786,426],{"class":321},[311,788,790],{"class":789},"spNyl","root",[311,792,565],{"class":321},[311,794,795,798,800,802,804],{"class":313,"line":340},[311,796,797],{"class":336},"  --theme-primary-base",[311,799,426],{"class":321},[311,801,429],{"class":321},[311,803,346],{"class":336},[311,805,380],{"class":321},[311,807,808,811,813,816],{"class":313,"line":352},[311,809,810],{"class":336},"  --_btn-radius",[311,812,426],{"class":321},[311,814,815],{"class":609}," 50px",[311,817,380],{"class":321},[311,819,820,823,825,827,830],{"class":313,"line":363},[311,821,822],{"class":336},"  --_card-bg-color",[311,824,426],{"class":321},[311,826,429],{"class":321},[311,828,829],{"class":336},"ffffff",[311,831,380],{"class":321},[311,833,834],{"class":313,"line":374},[311,835,633],{"class":321},[837,838,839],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":307,"searchDepth":340,"depth":340,"links":841},[842,843,844,845],{"id":285,"depth":340,"text":286},{"id":506,"depth":340,"text":507},{"id":636,"depth":340,"text":637},{"id":774,"depth":340,"text":775},"Override SCSS variables, mixins, and CSS custom properties.","md",null,{},{"icon":41},{"title":38,"description":846},"tPq-EhApoO9kaELLi-qwwRtkHkSFe3UzvE0H8cB6Eoc",[854,856],{"title":33,"path":34,"stem":35,"description":855,"icon":36,"children":-1},"Use Colorffy's tonal colors, semantic colors, and gradients.",{"title":49,"path":50,"stem":51,"description":857,"icon":52,"children":-1},"Borders, corner radius, gradient borders, and elevation shadows.",1782196219260]