[{"data":1,"prerenderedAt":896},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-css-scss-api-tonal-tokens":273,"-colorffy-css-scss-api-tonal-tokens-surround":891},[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":111,"body":275,"description":884,"extension":885,"links":886,"meta":887,"navigation":888,"path":112,"seo":889,"stem":113,"__hash__":890},"docs\u002F2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens.md",{"type":276,"value":277,"toc":875},"minimark",[278,297,302,337,397,401,455,503,583,587,675,679,700,747,751,776,780,812,816,823,866,871],[279,280,281,282,286,287,291,292,296],"p",{},"Colorffy generates a full set of ",[283,284,285],"strong",{},"CSS custom properties"," (the ",[288,289,290],"code",{},"--theme-*"," variables) from a handful of brand seed colors. They adapt to light \u002F dark mode automatically and power every component and color utility. Use them directly in your own CSS, or override them for ",[293,294,295],"a",{"href":39},"runtime theming",".",[298,299,301],"h2",{"id":300},"how-a-tone-is-built","How a tone is built",[279,303,304,305,308,309,312,313,316,317,320,321,324,325,328,329,332,333,336],{},"Each brand color starts from a seed (e.g. ",[288,306,307],{},"--color-brand-primary-500","), becomes an adaptive ",[283,310,311],{},"base"," (",[288,314,315],{},"--theme-primary-base",", which swaps light\u002Fdark via ",[288,318,319],{},"light-dark()","), then a ",[283,322,323],{},"ramp"," of tones ",[288,326,327],{},"a10","→",[288,330,331],{},"a90"," is generated with ",[288,334,335],{},"color-mix()"," at increasing intensity. The blend strength is controlled by two knobs:",[338,339,344],"pre",{"className":340,"code":341,"language":342,"meta":343,"style":343},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  --theme-tonal-light-intensity: 40%;\n  --theme-tonal-dark-intensity: 80%;\n}\n","css","",[288,345,346,362,378,391],{"__ignoreMap":343},[347,348,351,355,359],"span",{"class":349,"line":350},"line",1,[347,352,354],{"class":353},"sMK4o",":",[347,356,358],{"class":357},"spNyl","root",[347,360,361],{"class":353}," {\n",[347,363,365,369,371,375],{"class":349,"line":364},2,[347,366,368],{"class":367},"sTEyZ","  --theme-tonal-light-intensity",[347,370,354],{"class":353},[347,372,374],{"class":373},"sbssI"," 40%",[347,376,377],{"class":353},";\n",[347,379,381,384,386,389],{"class":349,"line":380},3,[347,382,383],{"class":367},"  --theme-tonal-dark-intensity",[347,385,354],{"class":353},[347,387,388],{"class":373}," 80%",[347,390,377],{"class":353},[347,392,394],{"class":349,"line":393},4,[347,395,396],{"class":353},"}\n",[298,398,400],{"id":399},"semantic-colors","Semantic colors",[402,403,404,417],"table",{},[405,406,407],"thead",{},[408,409,410,414],"tr",{},[411,412,413],"th",{},"Token",[411,415,416],{},"Notes",[418,419,420,431,441],"tbody",{},[408,421,422,428],{},[423,424,425],"td",{},[288,426,427],{},"--theme-{color}-base",[423,429,430],{},"Adaptive base (light\u002Fdark aware).",[408,432,433,438],{},[423,434,435],{},[288,436,437],{},"--theme-{color}-base-fixed",[423,439,440],{},"Fixed brand value (ignores mode).",[408,442,443,452],{},[423,444,445,448,449],{},[288,446,447],{},"--theme-{color}-a10"," … ",[288,450,451],{},"--theme-{color}-a90",[423,453,454],{},"Tonal ramp, light → strong.",[279,456,457,460,461,464,465,464,468,464,471,464,474,464,477,464,480,464,483,286,486,488,489,492,493,464,496,464,499,502],{},[288,458,459],{},"{color}"," = ",[288,462,463],{},"primary",", ",[288,466,467],{},"secondary",[288,469,470],{},"accent",[288,472,473],{},"success",[288,475,476],{},"warning",[288,478,479],{},"danger",[288,481,482],{},"info",[288,484,485],{},"muted",[288,487,311],{}," \u002F ",[288,490,491],{},"base-fixed"," set also includes ",[288,494,495],{},"dark",[288,497,498],{},"white",[288,500,501],{},"black",").",[338,504,506],{"className":340,"code":505,"language":342,"meta":343,"style":343},".badge {\n  color: var(--theme-primary-a90);\n  background: var(--theme-primary-a10);\n  border: 1px solid var(--theme-primary-a30);\n}\n",[288,507,508,518,539,555,578],{"__ignoreMap":343},[347,509,510,512,516],{"class":349,"line":350},[347,511,296],{"class":353},[347,513,515],{"class":514},"sBMFI","badge",[347,517,361],{"class":353},[347,519,520,524,526,530,533,536],{"class":349,"line":364},[347,521,523],{"class":522},"sqsOY","  color",[347,525,354],{"class":353},[347,527,529],{"class":528},"s2Zo4"," var",[347,531,532],{"class":353},"(",[347,534,535],{"class":367},"--theme-primary-a90",[347,537,538],{"class":353},");\n",[347,540,541,544,546,548,550,553],{"class":349,"line":380},[347,542,543],{"class":522},"  background",[347,545,354],{"class":353},[347,547,529],{"class":528},[347,549,532],{"class":353},[347,551,552],{"class":367},"--theme-primary-a10",[347,554,538],{"class":353},[347,556,557,560,562,565,568,571,573,576],{"class":349,"line":393},[347,558,559],{"class":522},"  border",[347,561,354],{"class":353},[347,563,564],{"class":373}," 1px",[347,566,567],{"class":367}," solid ",[347,569,570],{"class":528},"var",[347,572,532],{"class":353},[347,574,575],{"class":367},"--theme-primary-a30",[347,577,538],{"class":353},[347,579,581],{"class":349,"line":580},5,[347,582,396],{"class":353},[298,584,586],{"id":585},"surfaces","Surfaces",[402,588,589,597],{},[405,590,591],{},[408,592,593,595],{},[411,594,413],{},[411,596,416],{},[418,598,599,612,625,647],{},[408,600,601,609],{},[423,602,603,488,606],{},[288,604,605],{},"--theme-background",[288,607,608],{},"--theme-surface-base",[423,610,611],{},"Page & base surface.",[408,613,614,622],{},[423,615,616,448,619],{},[288,617,618],{},"--theme-surface-a0",[288,620,621],{},"--theme-surface-a90",[423,623,624],{},"Elevation ramp.",[408,626,627,644],{},[423,628,629,488,632,488,635,488,638,488,641],{},[288,630,631],{},"--theme-surface-container-lowest",[288,633,634],{},"-low",[288,636,637],{},"--theme-surface-container",[288,639,640],{},"-high",[288,642,643],{},"-highest",[423,645,646],{},"Container elevations.",[408,648,649,672],{},[423,650,651,464,654,464,657,464,660,464,663,464,666,464,669],{},[288,652,653],{},"--theme-surface-body-pane",[288,655,656],{},"--theme-surface-overlay",[288,658,659],{},"--theme-surface-navigation",[288,661,662],{},"--theme-surface-tooltip",[288,664,665],{},"--theme-surface-toast",[288,667,668],{},"--theme-surface-kbd",[288,670,671],{},"--theme-surface-accordion",[423,673,674],{},"Named surfaces.",[298,676,678],{"id":677},"foreground-on-colors","Foreground (on-colors)",[279,680,681,682,685,686,689,690,693,694,488,696,699],{},"Readable text \u002F icon colors for a given surface: ",[288,683,684],{},"--theme-on-background"," (+ ",[288,687,688],{},"-inverse","), and ",[288,691,692],{},"--theme-on-{primary|secondary|accent|success|warning|danger|info}"," (several also offer ",[288,695,688],{},[288,697,698],{},"-container"," variants).",[338,701,703],{"className":340,"code":702,"language":342,"meta":343,"style":343},".cta {\n  background: var(--theme-primary-base);\n  color: var(--theme-on-primary);\n}\n",[288,704,705,714,728,743],{"__ignoreMap":343},[347,706,707,709,712],{"class":349,"line":350},[347,708,296],{"class":353},[347,710,711],{"class":514},"cta",[347,713,361],{"class":353},[347,715,716,718,720,722,724,726],{"class":349,"line":364},[347,717,543],{"class":522},[347,719,354],{"class":353},[347,721,529],{"class":528},[347,723,532],{"class":353},[347,725,315],{"class":367},[347,727,538],{"class":353},[347,729,730,732,734,736,738,741],{"class":349,"line":380},[347,731,523],{"class":522},[347,733,354],{"class":353},[347,735,529],{"class":528},[347,737,532],{"class":353},[347,739,740],{"class":367},"--theme-on-primary",[347,742,538],{"class":353},[347,744,745],{"class":349,"line":393},[347,746,396],{"class":353},[298,748,750],{"id":749},"outlines-states","Outlines & states",[279,752,753,464,756,464,759,464,762,464,765,768,769,772,773,296],{},[288,754,755],{},"--theme-outline-surface",[288,757,758],{},"--theme-outline-button",[288,760,761],{},"--theme-outline-text-field",[288,763,764],{},"--theme-outline-overlay",[288,766,767],{},"--theme-overlay-backdrop",", plus state tokens ",[288,770,771],{},"--theme-surface-disabled"," and ",[288,774,775],{},"--theme-primary-disabled",[298,777,779],{"id":778},"elevation-shadows","Elevation (shadows)",[279,781,782,464,785,464,788,464,791,464,794,797,798,488,801,804,805,811],{},[288,783,784],{},"--shadow-xs",[288,786,787],{},"--shadow-sm",[288,789,790],{},"--shadow-md",[288,792,793],{},"--shadow-lg",[288,795,796],{},"--shadow-xl"," (tunable via ",[288,799,800],{},"--theme-shadow-base",[288,802,803],{},"--theme-shadow-intensity","). The ",[293,806,807,810],{"href":50},[288,808,809],{},"shadow-*"," utilities"," map to these.",[298,813,815],{"id":814},"override-at-runtime","Override at runtime",[279,817,818,819,822],{},"Any token can be overridden on ",[288,820,821],{},":root"," (or any scope) without recompiling SCSS:",[338,824,826],{"className":340,"code":825,"language":342,"meta":343,"style":343},":root {\n  --theme-primary-base: #4f46e5;\n  --theme-tonal-light-intensity: 35%;\n}\n",[288,827,828,836,851,862],{"__ignoreMap":343},[347,829,830,832,834],{"class":349,"line":350},[347,831,354],{"class":353},[347,833,358],{"class":357},[347,835,361],{"class":353},[347,837,838,841,843,846,849],{"class":349,"line":364},[347,839,840],{"class":367},"  --theme-primary-base",[347,842,354],{"class":353},[347,844,845],{"class":353}," #",[347,847,848],{"class":367},"4f46e5",[347,850,377],{"class":353},[347,852,853,855,857,860],{"class":349,"line":380},[347,854,368],{"class":367},[347,856,354],{"class":353},[347,858,859],{"class":373}," 35%",[347,861,377],{"class":353},[347,863,864],{"class":349,"line":393},[347,865,396],{"class":353},[279,867,868,869,296],{},"For build-time overrides via SCSS variables, see ",[293,870,38],{"href":39},[872,873,874],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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}",{"title":343,"searchDepth":364,"depth":364,"links":876},[877,878,879,880,881,882,883],{"id":300,"depth":364,"text":301},{"id":399,"depth":364,"text":400},{"id":585,"depth":364,"text":586},{"id":677,"depth":364,"text":678},{"id":749,"depth":364,"text":750},{"id":778,"depth":364,"text":779},{"id":814,"depth":364,"text":815},"The CSS custom properties behind Colorffy's adaptive tonal color system.","md",null,{},{"icon":114},{"title":111,"description":884},"6rM684EyJ1zhtIuCADqnTyGs5M0SKPShey0HhHRCCkE",[892,894],{"title":106,"path":107,"stem":108,"description":893,"icon":109,"children":-1},"SCSS mixins for gradients, layout, spacing, media queries, and components.",{"title":122,"path":123,"stem":124,"description":895,"icon":31,"children":-1},"Register and use Colorffy UI components in Vue 3 and Nuxt 3.",1782196219260]