[{"data":1,"prerenderedAt":764},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-css-color-system":273,"-colorffy-css-color-system-surround":759},[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":33,"body":275,"description":752,"extension":753,"links":754,"meta":755,"navigation":756,"path":34,"seo":757,"stem":35,"__hash__":758},"docs\u002F2.colorffy-css\u002F2.color-system.md",{"type":276,"value":277,"toc":747},"minimark",[278,282,287,575,579,582,635,639,743],[279,280,281],"p",{},"Colorffy CSS ships a powerful tonal color system exposed through utility classes and CSS variables.",[283,284,286],"h2",{"id":285},"apply-color-utilities","Apply color utilities",[288,289,294],"pre",{"className":290,"code":291,"language":292,"meta":293,"style":293},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Primary colors -->\n\u003Cdiv class=\"bg-primary\">Primary\u003C\u002Fdiv>\n\u003Cdiv class=\"text-primary\">Primary text\u003C\u002Fdiv>\n\u003Cdiv class=\"border border-primary\">Primary border\u003C\u002Fdiv>\n\n\u003C!-- Semantic colors -->\n\u003Cdiv class=\"bg-success\">Success\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-warning\">Warning\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-danger\">Danger\u003C\u002Fdiv>\n\n\u003C!-- Tonal & gradient variants -->\n\u003Cdiv class=\"bg-primary-fixed\">Tonal primary\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-gradient\">Gradient primary\u003C\u002Fdiv>\n","html","",[295,296,297,306,348,377,406,413,419,448,477,506,511,517,546],"code",{"__ignoreMap":293},[298,299,302],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"sHwdD","\u003C!-- Primary colors -->\n",[298,307,309,313,317,321,324,327,331,333,336,340,343,345],{"class":300,"line":308},2,[298,310,312],{"class":311},"sMK4o","\u003C",[298,314,316],{"class":315},"swJcz","div",[298,318,320],{"class":319},"spNyl"," class",[298,322,323],{"class":311},"=",[298,325,326],{"class":311},"\"",[298,328,330],{"class":329},"sfazB","bg-primary",[298,332,326],{"class":311},[298,334,335],{"class":311},">",[298,337,339],{"class":338},"sTEyZ","Primary",[298,341,342],{"class":311},"\u003C\u002F",[298,344,316],{"class":315},[298,346,347],{"class":311},">\n",[298,349,351,353,355,357,359,361,364,366,368,371,373,375],{"class":300,"line":350},3,[298,352,312],{"class":311},[298,354,316],{"class":315},[298,356,320],{"class":319},[298,358,323],{"class":311},[298,360,326],{"class":311},[298,362,363],{"class":329},"text-primary",[298,365,326],{"class":311},[298,367,335],{"class":311},[298,369,370],{"class":338},"Primary text",[298,372,342],{"class":311},[298,374,316],{"class":315},[298,376,347],{"class":311},[298,378,380,382,384,386,388,390,393,395,397,400,402,404],{"class":300,"line":379},4,[298,381,312],{"class":311},[298,383,316],{"class":315},[298,385,320],{"class":319},[298,387,323],{"class":311},[298,389,326],{"class":311},[298,391,392],{"class":329},"border border-primary",[298,394,326],{"class":311},[298,396,335],{"class":311},[298,398,399],{"class":338},"Primary border",[298,401,342],{"class":311},[298,403,316],{"class":315},[298,405,347],{"class":311},[298,407,409],{"class":300,"line":408},5,[298,410,412],{"emptyLinePlaceholder":411},true,"\n",[298,414,416],{"class":300,"line":415},6,[298,417,418],{"class":304},"\u003C!-- Semantic colors -->\n",[298,420,422,424,426,428,430,432,435,437,439,442,444,446],{"class":300,"line":421},7,[298,423,312],{"class":311},[298,425,316],{"class":315},[298,427,320],{"class":319},[298,429,323],{"class":311},[298,431,326],{"class":311},[298,433,434],{"class":329},"bg-success",[298,436,326],{"class":311},[298,438,335],{"class":311},[298,440,441],{"class":338},"Success",[298,443,342],{"class":311},[298,445,316],{"class":315},[298,447,347],{"class":311},[298,449,451,453,455,457,459,461,464,466,468,471,473,475],{"class":300,"line":450},8,[298,452,312],{"class":311},[298,454,316],{"class":315},[298,456,320],{"class":319},[298,458,323],{"class":311},[298,460,326],{"class":311},[298,462,463],{"class":329},"bg-warning",[298,465,326],{"class":311},[298,467,335],{"class":311},[298,469,470],{"class":338},"Warning",[298,472,342],{"class":311},[298,474,316],{"class":315},[298,476,347],{"class":311},[298,478,480,482,484,486,488,490,493,495,497,500,502,504],{"class":300,"line":479},9,[298,481,312],{"class":311},[298,483,316],{"class":315},[298,485,320],{"class":319},[298,487,323],{"class":311},[298,489,326],{"class":311},[298,491,492],{"class":329},"bg-danger",[298,494,326],{"class":311},[298,496,335],{"class":311},[298,498,499],{"class":338},"Danger",[298,501,342],{"class":311},[298,503,316],{"class":315},[298,505,347],{"class":311},[298,507,509],{"class":300,"line":508},10,[298,510,412],{"emptyLinePlaceholder":411},[298,512,514],{"class":300,"line":513},11,[298,515,516],{"class":304},"\u003C!-- Tonal & gradient variants -->\n",[298,518,520,522,524,526,528,530,533,535,537,540,542,544],{"class":300,"line":519},12,[298,521,312],{"class":311},[298,523,316],{"class":315},[298,525,320],{"class":319},[298,527,323],{"class":311},[298,529,326],{"class":311},[298,531,532],{"class":329},"bg-primary-fixed",[298,534,326],{"class":311},[298,536,335],{"class":311},[298,538,539],{"class":338},"Tonal primary",[298,541,342],{"class":311},[298,543,316],{"class":315},[298,545,347],{"class":311},[298,547,549,551,553,555,557,559,562,564,566,569,571,573],{"class":300,"line":548},13,[298,550,312],{"class":311},[298,552,316],{"class":315},[298,554,320],{"class":319},[298,556,323],{"class":311},[298,558,326],{"class":311},[298,560,561],{"class":329},"bg-gradient",[298,563,326],{"class":311},[298,565,335],{"class":311},[298,567,568],{"class":338},"Gradient primary",[298,570,342],{"class":311},[298,572,316],{"class":315},[298,574,347],{"class":311},[283,576,578],{"id":577},"theme-at-runtime-with-css-variables","Theme at runtime with CSS variables",[279,580,581],{},"Override custom properties to retheme without recompiling SCSS:",[288,583,587],{"className":584,"code":585,"language":586,"meta":293,"style":293},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --theme-primary-base: #4f46e5;\n  --theme-secondary-base: #ec4899;\n}\n","css",[295,588,589,600,616,630],{"__ignoreMap":293},[298,590,591,594,597],{"class":300,"line":301},[298,592,593],{"class":311},":",[298,595,596],{"class":319},"root",[298,598,599],{"class":311}," {\n",[298,601,602,605,607,610,613],{"class":300,"line":308},[298,603,604],{"class":338},"  --theme-primary-base",[298,606,593],{"class":311},[298,608,609],{"class":311}," #",[298,611,612],{"class":338},"4f46e5",[298,614,615],{"class":311},";\n",[298,617,618,621,623,625,628],{"class":300,"line":350},[298,619,620],{"class":338},"  --theme-secondary-base",[298,622,593],{"class":311},[298,624,609],{"class":311},[298,626,627],{"class":338},"ec4899",[298,629,615],{"class":311},[298,631,632],{"class":300,"line":379},[298,633,634],{"class":311},"}\n",[283,636,638],{"id":637},"generate-tonal-colors-in-scss","Generate tonal colors in SCSS",[288,640,644],{"className":641,"code":642,"language":643,"meta":293,"style":293},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@use '@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Ffunctions' as fn;\n@use '@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fvariables' as vars;\n\n.swatch {\n  background: fn.tonal-color(vars.$primary, 10);\n}\n","scss",[295,645,646,669,687,691,702,739],{"__ignoreMap":293},[298,647,648,652,655,658,661,664,667],{"class":300,"line":301},[298,649,651],{"class":650},"s7zQu","@use",[298,653,654],{"class":311}," '",[298,656,657],{"class":329},"@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Ffunctions",[298,659,660],{"class":311},"'",[298,662,663],{"class":650}," as",[298,665,666],{"class":338}," fn",[298,668,615],{"class":311},[298,670,671,673,675,678,680,682,685],{"class":300,"line":308},[298,672,651],{"class":650},[298,674,654],{"class":311},[298,676,677],{"class":329},"@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fvariables",[298,679,660],{"class":311},[298,681,663],{"class":650},[298,683,684],{"class":338}," vars",[298,686,615],{"class":311},[298,688,689],{"class":300,"line":350},[298,690,412],{"emptyLinePlaceholder":411},[298,692,693,696,700],{"class":300,"line":379},[298,694,695],{"class":311},".",[298,697,699],{"class":698},"sBMFI","swatch",[298,701,599],{"class":311},[298,703,704,708,710,712,714,718,721,724,726,729,732,736],{"class":300,"line":408},[298,705,707],{"class":706},"sqsOY","  background",[298,709,593],{"class":311},[298,711,666],{"class":338},[298,713,695],{"class":311},[298,715,717],{"class":716},"s2Zo4","tonal-color",[298,719,720],{"class":311},"(",[298,722,723],{"class":338},"vars",[298,725,695],{"class":311},[298,727,728],{"class":338},"$primary",[298,730,731],{"class":311},",",[298,733,735],{"class":734},"sbssI"," 10",[298,737,738],{"class":311},");\n",[298,740,741],{"class":300,"line":415},[298,742,634],{"class":311},[744,745,746],"style",{},"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 .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 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 .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":293,"searchDepth":308,"depth":308,"links":748},[749,750,751],{"id":285,"depth":308,"text":286},{"id":577,"depth":308,"text":578},{"id":637,"depth":308,"text":638},"Use Colorffy's tonal colors, semantic colors, and gradients.","md",null,{},{"icon":36},{"title":33,"description":752},"zczO0amNHS_7-kaSiy04MrbhUL5aZzpty2UGVGMh-TI",[760,762],{"title":28,"path":29,"stem":30,"description":761,"icon":31,"children":-1},"An expressive SCSS framework with a tonal color system and vivid gradients.",{"title":38,"path":39,"stem":40,"description":763,"icon":41,"children":-1},"Override SCSS variables, mixins, and CSS custom properties.",1782196218795]