[{"data":1,"prerenderedAt":1171},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-css-scss-api-mixins":273,"-colorffy-css-scss-api-mixins-surround":1166},[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":106,"body":275,"description":1159,"extension":1160,"links":1161,"meta":1162,"navigation":1163,"path":107,"seo":1164,"stem":108,"__hash__":1165},"docs\u002F2.colorffy-css\u002F6.scss-api\u002F01.mixins.md",{"type":276,"value":277,"toc":1151},"minimark",[278,292,395,400,492,598,602,752,827,831,902,906,1016,1020,1085,1089,1092,1118,1147],[279,280,281,282,286,287,291],"p",{},"Import the mixins module, then ",[283,284,285],"code",{},"@include"," what you need. (Colorffy's old SCSS ",[288,289,290],"em",{},"functions"," have been migrated to native CSS relative-color syntax, so there's no functions module to import.)",[293,294,299],"pre",{"className":295,"code":296,"language":297,"meta":298,"style":298},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@use '@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fmixins' as m;\n\n.hero {\n  @include m.text-gradient(45deg, #ff0080, #ff8c00);\n}\n","scss","",[283,300,301,331,338,351,389],{"__ignoreMap":298},[302,303,306,310,314,318,321,324,328],"span",{"class":304,"line":305},"line",1,[302,307,309],{"class":308},"s7zQu","@use",[302,311,313],{"class":312},"sMK4o"," '",[302,315,317],{"class":316},"sfazB","@colorffy\u002Fcss\u002Fscss\u002Fabstracts\u002Fmixins",[302,319,320],{"class":312},"'",[302,322,323],{"class":308}," as",[302,325,327],{"class":326},"sTEyZ"," m",[302,329,330],{"class":312},";\n",[302,332,334],{"class":304,"line":333},2,[302,335,337],{"emptyLinePlaceholder":336},true,"\n",[302,339,341,344,348],{"class":304,"line":340},3,[302,342,343],{"class":312},".",[302,345,347],{"class":346},"sBMFI","hero",[302,349,350],{"class":312}," {\n",[302,352,354,357,359,361,365,368,372,375,378,381,383,386],{"class":304,"line":353},4,[302,355,356],{"class":308},"  @include",[302,358,327],{"class":326},[302,360,343],{"class":312},[302,362,364],{"class":363},"s2Zo4","text-gradient",[302,366,367],{"class":312},"(",[302,369,371],{"class":370},"sbssI","45deg",[302,373,374],{"class":326},", ",[302,376,377],{"class":312},"#",[302,379,380],{"class":326},"ff0080, ",[302,382,377],{"class":312},[302,384,385],{"class":326},"ff8c00",[302,387,388],{"class":312},");\n",[302,390,392],{"class":304,"line":391},5,[302,393,394],{"class":312},"}\n",[396,397,399],"h2",{"id":398},"gradients-text","Gradients & text",[401,402,403,419],"table",{},[404,405,406],"thead",{},[407,408,409,413,416],"tr",{},[410,411,412],"th",{},"Mixin",[410,414,415],{},"Signature",[410,417,418],{},"Purpose",[420,421,422,441,455,477],"tbody",{},[407,423,424,429,434],{},[425,426,427],"td",{},[283,428,364],{},[425,430,431],{},[283,432,433],{},"($deg: 45deg, $colors...)",[425,435,436,437,440],{},"Gradient-filled text (uses ",[283,438,439],{},"oklch"," where supported).",[407,442,443,448,452],{},[425,444,445],{},[283,446,447],{},"bg-gradient",[425,449,450],{},[283,451,433],{},[425,453,454],{},"Gradient background.",[407,456,457,462,467],{},[425,458,459],{},[283,460,461],{},"text-wrap-pretty",[425,463,464],{},[283,465,466],{},"()",[425,468,469,472,473,476],{},[283,470,471],{},"text-wrap: balance"," → ",[283,474,475],{},"pretty"," progressive enhancement.",[407,478,479,484,489],{},[425,480,481],{},[283,482,483],{},"text-variable",[425,485,486],{},[283,487,488],{},"($bold: false)",[425,490,491],{},"Apply variable-font heading settings.",[293,493,495],{"className":295,"code":494,"language":297,"meta":298,"style":298},".title {\n  @include m.text-gradient(90deg, var(--theme-primary-base), var(--theme-accent-base));\n}\n\n.panel {\n  @include m.bg-gradient(120deg, #5300fa, #ee5aaf);\n}\n",[283,496,497,506,546,550,554,563,593],{"__ignoreMap":298},[302,498,499,501,504],{"class":304,"line":305},[302,500,343],{"class":312},[302,502,503],{"class":346},"title",[302,505,350],{"class":312},[302,507,508,510,512,514,516,518,521,523,526,528,531,534,536,538,540,543],{"class":304,"line":333},[302,509,356],{"class":308},[302,511,327],{"class":326},[302,513,343],{"class":312},[302,515,364],{"class":363},[302,517,367],{"class":312},[302,519,520],{"class":370},"90deg",[302,522,374],{"class":326},[302,524,525],{"class":363},"var",[302,527,367],{"class":312},[302,529,530],{"class":326},"--theme-primary-base",[302,532,533],{"class":312},")",[302,535,374],{"class":326},[302,537,525],{"class":363},[302,539,367],{"class":312},[302,541,542],{"class":326},"--theme-accent-base",[302,544,545],{"class":312},"));\n",[302,547,548],{"class":304,"line":340},[302,549,394],{"class":312},[302,551,552],{"class":304,"line":353},[302,553,337],{"emptyLinePlaceholder":336},[302,555,556,558,561],{"class":304,"line":391},[302,557,343],{"class":312},[302,559,560],{"class":346},"panel",[302,562,350],{"class":312},[302,564,566,568,570,572,574,576,579,581,583,586,588,591],{"class":304,"line":565},6,[302,567,356],{"class":308},[302,569,327],{"class":326},[302,571,343],{"class":312},[302,573,447],{"class":363},[302,575,367],{"class":312},[302,577,578],{"class":370},"120deg",[302,580,374],{"class":326},[302,582,377],{"class":312},[302,584,585],{"class":326},"5300fa, ",[302,587,377],{"class":312},[302,589,590],{"class":326},"ee5aaf",[302,592,388],{"class":312},[302,594,596],{"class":304,"line":595},7,[302,597,394],{"class":312},[396,599,601],{"id":600},"layout-grid","Layout & grid",[401,603,604,614],{},[404,605,606],{},[407,607,608,610,612],{},[410,609,412],{},[410,611,415],{},[410,613,418],{},[420,615,616,634,648,663,684,701,722,737],{},[407,617,618,627,631],{},[425,619,620,623,624],{},[283,621,622],{},"container"," \u002F ",[283,625,626],{},"container-fluid",[425,628,629],{},[283,630,466],{},[425,632,633],{},"Responsive \u002F full-width container.",[407,635,636,641,645],{},[425,637,638],{},[283,639,640],{},"make-row",[425,642,643],{},[283,644,466],{},[425,646,647],{},"Flexbox row wrapper.",[407,649,650,655,660],{},[425,651,652],{},[283,653,654],{},"make-col",[425,656,657],{},[283,658,659],{},"($size, $columns: 12)",[425,661,662],{},"Column width out of N.",[407,664,665,673,678],{},[425,666,667,623,670],{},[283,668,669],{},"make-grid-cols",[283,671,672],{},"make-grid-rows",[425,674,675],{},[283,676,677],{},"($n)",[425,679,680,683],{},[283,681,682],{},"repeat($n, 1fr)"," tracks.",[407,685,686,691,696],{},[425,687,688],{},[283,689,690],{},"make-grid-span",[425,692,693],{},[283,694,695],{},"($span)",[425,697,698,343],{},[283,699,700],{},"grid-column: span $span",[407,702,703,708,713],{},[425,704,705],{},[283,706,707],{},"make-grid-auto",[425,709,710],{},[283,711,712],{},"($type, $size)",[425,714,715,623,718,721],{},[283,716,717],{},"auto-fit",[283,719,720],{},"auto-fill"," columns.",[407,723,724,729,734],{},[425,725,726],{},[283,727,728],{},"make-gap",[425,730,731],{},[283,732,733],{},"($direction, $size)",[425,735,736],{},"Row \u002F column gap.",[407,738,739,744,749],{},[425,740,741],{},[283,742,743],{},"container-island",[425,745,746],{},[283,747,748],{},"($position, $edge, $offset)",[425,750,751],{},"Floating pill container.",[293,753,755],{"className":295,"code":754,"language":297,"meta":298,"style":298},".layout {\n  display: grid;\n  @include m.make-grid-cols(3);\n  @include m.make-gap('inline', 1rem);\n}\n",[283,756,757,766,780,797,823],{"__ignoreMap":298},[302,758,759,761,764],{"class":304,"line":305},[302,760,343],{"class":312},[302,762,763],{"class":346},"layout",[302,765,350],{"class":312},[302,767,768,772,775,778],{"class":304,"line":333},[302,769,771],{"class":770},"sqsOY","  display",[302,773,774],{"class":312},":",[302,776,777],{"class":326}," grid",[302,779,330],{"class":312},[302,781,782,784,786,788,790,792,795],{"class":304,"line":340},[302,783,356],{"class":308},[302,785,327],{"class":326},[302,787,343],{"class":312},[302,789,669],{"class":363},[302,791,367],{"class":312},[302,793,794],{"class":370},"3",[302,796,388],{"class":312},[302,798,799,801,803,805,807,809,811,814,816,818,821],{"class":304,"line":353},[302,800,356],{"class":308},[302,802,327],{"class":326},[302,804,343],{"class":312},[302,806,728],{"class":363},[302,808,367],{"class":312},[302,810,320],{"class":312},[302,812,813],{"class":316},"inline",[302,815,320],{"class":312},[302,817,374],{"class":326},[302,819,820],{"class":370},"1rem",[302,822,388],{"class":312},[302,824,825],{"class":304,"line":391},[302,826,394],{"class":312},[396,828,830],{"id":829},"spacing-radius-opacity","Spacing, radius & opacity",[401,832,833,841],{},[404,834,835],{},[407,836,837,839],{},[410,838,412],{},[410,840,415],{},[420,842,843,854,865,890],{},[407,844,845,850],{},[425,846,847],{},[283,848,849],{},"make-margin",[425,851,852],{},[283,853,733],{},[407,855,856,861],{},[425,857,858],{},[283,859,860],{},"make-padding",[425,862,863],{},[283,864,733],{},[407,866,867,872],{},[425,868,869],{},[283,870,871],{},"make-radius",[425,873,874,877,878,623,881,623,884,623,887],{},[283,875,876],{},"($direction, $radius)"," — ",[283,879,880],{},"t",[283,882,883],{},"r",[283,885,886],{},"b",[283,888,889],{},"l",[407,891,892,897],{},[425,893,894],{},[283,895,896],{},"opacity",[425,898,899],{},[283,900,901],{},"($level)",[396,903,905],{"id":904},"media-queries","Media queries",[293,907,909],{"className":295,"code":908,"language":297,"meta":298,"style":298},".sidebar {\n  \u002F\u002F min-width (mobile-first); keys: sm md lg xl xxl\n  @include m.media-breakpoint-up(lg) {\n    width: 18rem;\n  }\n\n  \u002F\u002F max-width; keys from $breakpoints (e.g. 1024, 768)\n  @include m.media-query(768) {\n    display: none;\n  }\n}\n",[283,910,911,920,926,946,958,963,967,972,993,1006,1011],{"__ignoreMap":298},[302,912,913,915,918],{"class":304,"line":305},[302,914,343],{"class":312},[302,916,917],{"class":346},"sidebar",[302,919,350],{"class":312},[302,921,922],{"class":304,"line":333},[302,923,925],{"class":924},"sHwdD","  \u002F\u002F min-width (mobile-first); keys: sm md lg xl xxl\n",[302,927,928,930,932,934,937,939,942,944],{"class":304,"line":340},[302,929,356],{"class":308},[302,931,327],{"class":326},[302,933,343],{"class":312},[302,935,936],{"class":363},"media-breakpoint-up",[302,938,367],{"class":312},[302,940,941],{"class":326},"lg",[302,943,533],{"class":312},[302,945,350],{"class":312},[302,947,948,951,953,956],{"class":304,"line":353},[302,949,950],{"class":770},"    width",[302,952,774],{"class":312},[302,954,955],{"class":370}," 18rem",[302,957,330],{"class":312},[302,959,960],{"class":304,"line":391},[302,961,962],{"class":312},"  }\n",[302,964,965],{"class":304,"line":565},[302,966,337],{"emptyLinePlaceholder":336},[302,968,969],{"class":304,"line":595},[302,970,971],{"class":924},"  \u002F\u002F max-width; keys from $breakpoints (e.g. 1024, 768)\n",[302,973,975,977,979,981,984,986,989,991],{"class":304,"line":974},8,[302,976,356],{"class":308},[302,978,327],{"class":326},[302,980,343],{"class":312},[302,982,983],{"class":363},"media-query",[302,985,367],{"class":312},[302,987,988],{"class":370},"768",[302,990,533],{"class":312},[302,992,350],{"class":312},[302,994,996,999,1001,1004],{"class":304,"line":995},9,[302,997,998],{"class":770},"    display",[302,1000,774],{"class":312},[302,1002,1003],{"class":326}," none",[302,1005,330],{"class":312},[302,1007,1009],{"class":304,"line":1008},10,[302,1010,962],{"class":312},[302,1012,1014],{"class":304,"line":1013},11,[302,1015,394],{"class":312},[396,1017,1019],{"id":1018},"borders-glow","Borders & glow",[401,1021,1022,1032],{},[404,1023,1024],{},[407,1025,1026,1028,1030],{},[410,1027,412],{},[410,1029,415],{},[410,1031,418],{},[420,1033,1034,1056,1071],{},[407,1035,1036,1041,1046],{},[425,1037,1038],{},[283,1039,1040],{},"gradient-glow-border",[425,1042,1043],{},[283,1044,1045],{},"($colors...)",[425,1047,1048,1049,623,1052,1055],{},"Animated conic glow border (via ",[283,1050,1051],{},"::before",[283,1053,1054],{},"::after",").",[407,1057,1058,1063,1068],{},[425,1059,1060],{},[283,1061,1062],{},"gradient-static-border",[425,1064,1065],{},[283,1066,1067],{},"($angle, $colors...)",[425,1069,1070],{},"Static gradient border.",[407,1072,1073,1078,1082],{},[425,1074,1075],{},[283,1076,1077],{},"gradient-btn-border",[425,1079,1080],{},[283,1081,1067],{},[425,1083,1084],{},"Gradient border sized for buttons.",[396,1086,1088],{"id":1087},"component-helpers","Component helpers",[279,1090,1091],{},"Lower-level mixins used to build Colorffy's own components — handy when theming or extending them:",[279,1093,1094,374,1097,374,1100,374,1103,374,1106,374,1109,374,1112,374,1115,343],{},[283,1095,1096],{},"btn-base()",[283,1098,1099],{},"btn-tonal($tonal, $color, $isDark)",[283,1101,1102],{},"btn-size($size)",[283,1104,1105],{},"ripple-color($color)",[283,1107,1108],{},"form-placeholder($opacity)",[283,1110,1111],{},"make-image($size)",[283,1113,1114],{},"absolute-icon($top, $left)",[283,1116,1117],{},"container-tonal($tonal, $color, $isDark, $isBordered, $prefix)",[1119,1120,1121,1122,374,1125,374,1128,374,1131,374,1134,1137,1138,1141,1142,1146],"note",{},"The tonal-generation mixins (",[283,1123,1124],{},"surface-light-tones",[283,1126,1127],{},"semantic-light-tones",[283,1129,1130],{},"surface-dark-tones",[283,1132,1133],{},"semantic-dark-tones",[283,1135,1136],{},"primary-fixed-colors",") run once inside ",[283,1139,1140],{},":root"," to emit the ",[1143,1144,1145],"a",{"href":112},"tonal tokens"," — you normally consume those CSS variables rather than calling these directly.",[1148,1149,1150],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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}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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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}",{"title":298,"searchDepth":333,"depth":333,"links":1152},[1153,1154,1155,1156,1157,1158],{"id":398,"depth":333,"text":399},{"id":600,"depth":333,"text":601},{"id":829,"depth":333,"text":830},{"id":904,"depth":333,"text":905},{"id":1018,"depth":333,"text":1019},{"id":1087,"depth":333,"text":1088},"SCSS mixins for gradients, layout, spacing, media queries, and components.","md",null,{},{"icon":109},{"title":106,"description":1159},"VNDxSUvVr5m7zviU6WucSA41ZKfDvRx8N9jqw6TjbbE",[1167,1169],{"title":95,"path":96,"stem":97,"description":1168,"icon":98,"children":-1},"CSS Grid utilities — templates, spans, placement, auto-flow, and subgrid.",{"title":111,"path":112,"stem":113,"description":1170,"icon":114,"children":-1},"The CSS custom properties behind Colorffy's adaptive tonal color system.",1782196219260]