[{"data":1,"prerenderedAt":1716},["ShallowReactive",2],{"navigation_docs":3,"-essentials-design-system":75,"-essentials-design-system-surround":1711},[4,20,60],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F1.installation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"Upgrading","\u002Fgetting-started\u002Fupgrading","1.getting-started\u002F2.upgrading","i-lucide-arrow-up-circle",{"title":21,"path":22,"stem":23,"children":24,"page":6},"Essentials","\u002Fessentials","2.essentials",[25,30,35,40,45,50,55],{"title":26,"path":27,"stem":28,"icon":29},"Integration Patterns","\u002Fessentials\u002Fintegration-patterns","2.essentials\u002F1.integration-patterns","i-lucide-layers",{"title":31,"path":32,"stem":33,"icon":34},"Customization","\u002Fessentials\u002Fcustomization","2.essentials\u002F2.customization","i-lucide-palette",{"title":36,"path":37,"stem":38,"icon":39},"Database Schema","\u002Fessentials\u002Fdatabase-schema","2.essentials\u002F3.database-schema","i-lucide-database",{"title":41,"path":42,"stem":43,"icon":44},"API Reference","\u002Fessentials\u002Fapi-reference","2.essentials\u002F4.api-reference","i-lucide-code",{"title":46,"path":47,"stem":48,"icon":49},"Troubleshooting","\u002Fessentials\u002Ftroubleshooting","2.essentials\u002F5.troubleshooting","i-lucide-wrench",{"title":51,"path":52,"stem":53,"icon":54},"Swimlanes","\u002Fessentials\u002Fswimlanes","2.essentials\u002F6.swimlanes","i-lucide-rows-3",{"title":56,"path":57,"stem":58,"icon":59},"Design System","\u002Fessentials\u002Fdesign-system","2.essentials\u002F7.design-system","i-lucide-swatch-book",{"title":61,"path":62,"stem":63,"children":64,"page":6},"Community","\u002Fcommunity","4.community",[65,70],{"title":66,"path":67,"stem":68,"icon":69},"Contributing","\u002Fcommunity\u002Fcontributing","4.community\u002F1.contributing","i-lucide-heart-handshake",{"title":71,"path":72,"stem":73,"icon":74},"License","\u002Fcommunity\u002Flicense","4.community\u002F2.license","i-lucide-scale",{"id":76,"title":56,"body":77,"description":1703,"extension":1704,"links":1705,"meta":1706,"navigation":1707,"path":57,"seo":1708,"stem":58,"__hash__":1710},"docs\u002F2.essentials\u002F7.design-system.md",{"type":78,"value":79,"toc":1691},"minimark",[80,84,92,97,112,115,198,208,227,230,234,249,256,796,813,816,851,855,865,1058,1064,1068,1075,1174,1191,1195,1198,1342,1345,1351,1356,1362,1431,1444,1448,1472,1475,1490,1535,1658,1668,1672,1684,1687],[81,82,83],"p",{},"A Modern board is styled through a public contract: CSS variables, class hooks and data attributes. Everything on this page is public API. Anything not listed here is internal and can change in any release.",[81,85,86,87,91],{},"The contract applies to Modern boards only. Classic boards keep their ",[88,89,90],"code",{},"flowforge-*"," classes and are not affected by anything below.",[93,94,96],"h2",{"id":95},"layering","Layering",[81,98,99,100,103,104,107,108,111],{},"Flowforge ships plain CSS. It contains no Tailwind utilities and no ",[88,101,102],{},"@apply",", so your app needs no ",[88,105,106],{},"@source"," line and a Tailwind ",[88,109,110],{},"prefix()"," cannot break it.",[81,113,114],{},"The stylesheet opens with the layer order Filament uses, and puts every rule in one sublayer:",[116,117,122],"pre",{"className":118,"code":119,"language":120,"meta":121,"style":121},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@layer properties, theme, base, components, utilities;\n\n@layer components.flowforge {\n    \u002F* every rule *\u002F\n}\n","css","",[88,123,124,162,169,185,192],{"__ignoreMap":121},[125,126,129,133,137,141,144,146,149,151,154,156,159],"span",{"class":127,"line":128},"line",1,[125,130,132],{"class":131},"s7zQu","@layer",[125,134,136],{"class":135},"sHdIc"," properties",[125,138,140],{"class":139},"sMK4o",",",[125,142,143],{"class":135}," theme",[125,145,140],{"class":139},[125,147,148],{"class":135}," base",[125,150,140],{"class":139},[125,152,153],{"class":135}," components",[125,155,140],{"class":139},[125,157,158],{"class":135}," utilities",[125,160,161],{"class":139},";\n",[125,163,165],{"class":127,"line":164},2,[125,166,168],{"emptyLinePlaceholder":167},true,"\n",[125,170,172,174,176,179,182],{"class":127,"line":171},3,[125,173,132],{"class":131},[125,175,153],{"class":135},[125,177,178],{"class":139},".",[125,180,181],{"class":135},"flowforge",[125,183,184],{"class":139}," {\n",[125,186,188],{"class":127,"line":187},4,[125,189,191],{"class":190},"sHwdD","    \u002F* every rule *\u002F\n",[125,193,195],{"class":127,"line":194},5,[125,196,197],{"class":139},"}\n",[81,199,200,201,204,205,178],{},"Your unlayered CSS always beats flowforge's. Your layered CSS wins when it sits in ",[88,202,203],{},"components"," itself or in a later layer such as ",[88,206,207],{},"utilities",[81,209,210,211,213,214,217,218,221,222,178],{},"Filament's own component styles sit in ",[88,212,203],{},", which outranks the ",[88,215,216],{},"components.flowforge"," sublayer. Flowforge uses ",[88,219,220],{},"!important"," in the few places it must beat them. See ",[223,224,226],"a",{"href":225},"#properties-set-with-important","Properties set with !important",[81,228,229],{},"Filament panels get the stylesheet in the page head. A standalone board links it in its own markup. You do not register or import it.",[93,231,233],{"id":232},"variables","Variables",[81,235,236,237,240,241,244,245,248],{},"Flowforge never sets a public ",[88,238,239],{},"--ff-*"," variable. Each rule reads the variable through a private alias with a default, so a value you set at any scope wins. That scope can be ",[88,242,243],{},":root",", ",[88,246,247],{},".ff-board"," or one card.",[81,250,251,252,255],{},"The dark column shows where the default changes under Filament's ",[88,253,254],{},".dark"," class. A single value applies to both modes.",[257,258,259,281],"table",{},[260,261,262],"thead",{},[263,264,265,269,272,275,278],"tr",{},[266,267,268],"th",{},"Variable",[266,270,271],{},"Tier",[266,273,274],{},"Default (light \u002F dark)",[266,276,277],{},"Since",[266,279,280],{},"Used for",[282,283,284,310,336,362,387,407,429,448,470,489,511,533,552,571,590,610,628,647,665,683,702,721,739,758,777],"tbody",{},[263,285,286,292,295,304,307],{},[287,288,289],"td",{},[88,290,291],{},"--ff-surface",[287,293,294],{},"semantic",[287,296,297,300,301],{},[88,298,299],{},"var(--gray-50)"," \u002F ",[88,302,303],{},"var(--gray-950)",[287,305,306],{},"4.2.0",[287,308,309],{},"Background of the sticky column-header strip in the lane view. Set it to the page background.",[263,311,312,317,319,327,329],{},[287,313,314],{},[88,315,316],{},"--ff-surface-sunken",[287,318,294],{},[287,320,321,300,324],{},[88,322,323],{},"var(--gray-100)",[88,325,326],{},"color-mix(in oklab, #fff 5%, transparent)",[287,328,306],{},[287,330,331,332,335],{},"Background of a column tray and of a lane cell. ",[88,333,334],{},"--ff-tray-bg"," overrides it.",[263,337,338,343,345,353,355],{},[287,339,340],{},[88,341,342],{},"--ff-surface-raised",[287,344,294],{},[287,346,347,300,350],{},[88,348,349],{},"#fff",[88,351,352],{},"var(--gray-900)",[287,354,306],{},[287,356,357,358,361],{},"Background of a card and of the filters panel. ",[88,359,360],{},"--ff-card-bg"," overrides it for cards.",[263,363,364,369,371,379,381],{},[287,365,366],{},[88,367,368],{},"--ff-border",[287,370,294],{},[287,372,373,300,376],{},[88,374,375],{},"color-mix(in oklab, var(--gray-950) 5%, transparent)",[88,377,378],{},"color-mix(in oklab, #fff 10%, transparent)",[287,380,306],{},[287,382,383,384,361],{},"Ring around a card and around the filters panel. ",[88,385,386],{},"--ff-card-ring",[263,388,389,394,396,402,404],{},[287,390,391],{},[88,392,393],{},"--ff-text",[287,395,294],{},[287,397,398,300,400],{},[88,399,303],{},[88,401,349],{},[287,403,306],{},[287,405,406],{},"Column titles, lane titles, card titles and the add row on hover.",[263,408,409,414,416,424,426],{},[287,410,411],{},[88,412,413],{},"--ff-text-muted",[287,415,294],{},[287,417,418,300,421],{},[88,419,420],{},"var(--gray-500)",[88,422,423],{},"var(--gray-400)",[287,425,306],{},[287,427,428],{},"Secondary text and icons: the group-by label, column icons, counts, summaries, tags, card meta, the add row, the avatar overflow, lane counts and icons, and the header subheading.",[263,430,431,436,438,443,445],{},[287,432,433],{},[88,434,435],{},"--ff-accent",[287,437,294],{},[287,439,440],{},[88,441,442],{},"var(--primary-500)",[287,444,306],{},[287,446,447],{},"Outline of an accepting drop target, the drop gap border and the loading text.",[263,449,450,455,457,465,467],{},[287,451,452],{},[88,453,454],{},"--ff-accent-tint",[287,456,294],{},[287,458,459,300,462],{},[88,460,461],{},"var(--primary-50)",[88,463,464],{},"color-mix(in oklab, var(--primary-500) 10%, transparent)",[287,466,306],{},[287,468,469],{},"Fill of a tray or lane cell that accepts the card.",[263,471,472,477,479,484,486],{},[287,473,474],{},[88,475,476],{},"--ff-danger",[287,478,294],{},[287,480,481],{},[88,482,483],{},"var(--danger-500)",[287,485,306],{},[287,487,488],{},"Outline of a refusing tray or lane cell, and the limit hint.",[263,490,491,496,498,506,508],{},[287,492,493],{},[88,494,495],{},"--ff-warning",[287,497,294],{},[287,499,500,300,503],{},[88,501,502],{},"var(--warning-600)",[88,504,505],{},"var(--warning-400)",[287,507,306],{},[287,509,510],{},"Count of a full column.",[263,512,513,518,520,525,527],{},[287,514,515],{},[88,516,517],{},"--ff-radius",[287,519,294],{},[287,521,522],{},[88,523,524],{},"0.75rem",[287,526,306],{},[287,528,529,530,178],{},"Card radius. The tray and lane cell radius is this plus ",[88,531,532],{},"0.25rem",[263,534,535,540,542,547,549],{},[287,536,537],{},[88,538,539],{},"--ff-gap",[287,541,294],{},[287,543,544],{},[88,545,546],{},"1.25rem",[287,548,306],{},[287,550,551],{},"Space between columns, on the flat board and in the lane grid.",[263,553,554,559,561,566,568],{},[287,555,556],{},[88,557,558],{},"--ff-ease",[287,560,294],{},[287,562,563],{},[88,564,565],{},"cubic-bezier(0.16, 1, 0.3, 1)",[287,567,306],{},[287,569,570],{},"Easing of tray and cell fills, add row color, card shadow and card action fades.",[263,572,573,578,580,585,587],{},[287,574,575],{},[88,576,577],{},"--ff-duration",[287,579,294],{},[287,581,582],{},[88,583,584],{},"200ms",[287,586,306],{},[287,588,589],{},"Duration of the same transitions.",[263,591,592,597,600,605,607],{},[287,593,594],{},[88,595,596],{},"--ff-column-width",[287,598,599],{},"component",[287,601,602],{},[88,603,604],{},"300px",[287,606,306],{},[287,608,609],{},"Width of a column, and of each column in the lane grid.",[263,611,612,616,618,623,625],{},[287,613,614],{},[88,615,334],{},[287,617,599],{},[287,619,620],{},[88,621,622],{},"var(--ff-surface-sunken)",[287,624,306],{},[287,626,627],{},"Background of a column tray and of a lane cell.",[263,629,630,635,637,642,644],{},[287,631,632],{},[88,633,634],{},"--ff-tray-radius",[287,636,599],{},[287,638,639],{},[88,640,641],{},"calc(var(--ff-radius) + 0.25rem)",[287,643,306],{},[287,645,646],{},"Corner radius of a tray and of a lane cell.",[263,648,649,653,655,660,662],{},[287,650,651],{},[88,652,360],{},[287,654,599],{},[287,656,657],{},[88,658,659],{},"var(--ff-surface-raised)",[287,661,306],{},[287,663,664],{},"Card background.",[263,666,667,671,673,678,680],{},[287,668,669],{},[88,670,386],{},[287,672,599],{},[287,674,675],{},[88,676,677],{},"var(--ff-border)",[287,679,306],{},[287,681,682],{},"Card ring color.",[263,684,685,690,692,697,699],{},[287,686,687],{},[88,688,689],{},"--ff-card-radius",[287,691,599],{},[287,693,694],{},[88,695,696],{},"var(--ff-radius)",[287,698,306],{},[287,700,701],{},"Card corner radius.",[263,703,704,709,711,716,718],{},[287,705,706],{},[88,707,708],{},"--ff-card-shadow",[287,710,599],{},[287,712,713],{},[88,714,715],{},"0 1px 2px 0 rgb(0 0 0 \u002F 0.05)",[287,717,306],{},[287,719,720],{},"Card shadow list. It sets the resting and the hover shadow together.",[263,722,723,728,730,734,736],{},[287,724,725],{},[88,726,727],{},"--ff-card-padding",[287,729,599],{},[287,731,732],{},[88,733,524],{},[287,735,306],{},[287,737,738],{},"Space inside a card.",[263,740,741,746,748,753,755],{},[287,742,743],{},[88,744,745],{},"--ff-drag-tilt",[287,747,599],{},[287,749,750],{},[88,751,752],{},"2.5deg",[287,754,306],{},[287,756,757],{},"Rotation of the card while it is dragged.",[263,759,760,765,767,772,774],{},[287,761,762],{},[88,763,764],{},"--ff-drag-shadow",[287,766,599],{},[287,768,769],{},[88,770,771],{},"0 10px 15px -3px rgb(0 0 0 \u002F 0.1), 0 4px 6px -4px rgb(0 0 0 \u002F 0.1)",[287,773,306],{},[287,775,776],{},"Shadow list of the dragged card.",[263,778,779,784,786,791,793],{},[287,780,781],{},[88,782,783],{},"--ff-placeholder-border",[287,785,599],{},[287,787,788],{},[88,789,790],{},"var(--ff-accent)",[287,792,306],{},[287,794,795],{},"Border of the drop gap.",[81,797,798,799,244,802,244,805,808,809,812],{},"Flowforge also reads the Filament palette: ",[88,800,801],{},"--gray-*",[88,803,804],{},"--primary-*",[88,806,807],{},"--danger-*"," and ",[88,810,811],{},"--warning-*",". It never sets them.",[81,814,815],{},"Notes that apply to several variables:",[817,818,819,834,839,844],"ul",{},[820,821,822,823,826,827,830,831,833],"li",{},"The shadow variables take a shadow list. Use ",[88,824,825],{},"0 0 #0000"," for no shadow, never ",[88,828,829],{},"none",". Flowforge combines the value with a ring, and ",[88,832,829],{}," makes the whole declaration invalid.",[820,835,836,838],{},[88,837,291],{}," paints the sticky lane-header strip behind the column headers. Set it to the background your page uses, so cards scroll under the strip without showing through.",[820,840,841,843],{},[88,842,708],{}," sets the resting shadow and the hover shadow together.",[820,845,846,847,850],{},"The dragged card is a clone on ",[88,848,849],{},"body",". Flowforge copies the variables above from the card you picked up, so a value set at any scope reaches the clone.",[93,852,854],{"id":853},"hooks","Hooks",[81,856,857,858,861,862,864],{},"Hooks are class names. Modern markup carries ",[88,859,860],{},"ff-*"," hooks only. The ",[88,863,90],{}," classes of classic boards never appear in Modern views, so a rule written for one board does not reach the other.",[257,866,867,877],{},[260,868,869],{},[263,870,871,874],{},[266,872,873],{},"Hook",[266,875,876],{},"Element",[282,878,879,889,899,909,919,929,939,949,959,969,979,989,999,1009,1019,1032,1045],{},[263,880,881,886],{},[287,882,883],{},[88,884,885],{},"ff-board",[287,887,888],{},"The board root",[263,890,891,896],{},[287,892,893],{},[88,894,895],{},"ff-columns",[287,897,898],{},"The row that holds the columns of a board without lanes. Set its padding to space the columns from the page edge",[263,900,901,906],{},[287,902,903],{},[88,904,905],{},"ff-column",[287,907,908],{},"One column: its header and its tray. In the lane view it holds only the column header",[263,910,911,916],{},[287,912,913],{},[88,914,915],{},"ff-column-header",[287,917,918],{},"The row with the title, count, summary and actions",[263,920,921,926],{},[287,922,923],{},[88,924,925],{},"ff-count",[287,927,928],{},"The card count in a column header",[263,930,931,936],{},[287,932,933],{},[88,934,935],{},"ff-summary",[287,937,938],{},"The column summary text",[263,940,941,946],{},[287,942,943],{},[88,944,945],{},"ff-tray",[287,947,948],{},"The surface that holds a column's cards. The lane view has no tray, its cells are the surface",[263,950,951,956],{},[287,952,953],{},[88,954,955],{},"ff-card",[287,957,958],{},"One card",[263,960,961,966],{},[287,962,963],{},[88,964,965],{},"ff-card-actions",[287,967,968],{},"The action menu in a card's corner",[263,970,971,976],{},[287,972,973],{},[88,974,975],{},"ff-add-row",[287,977,978],{},"The add-card row, the \"Show more cards\" button in a lane cell and the \"Show more lanes\" button",[263,980,981,986],{},[287,982,983],{},[88,984,985],{},"ff-lanes",[287,987,988],{},"The root of the lane view",[263,990,991,996],{},[287,992,993],{},[88,994,995],{},"ff-lane-header",[287,997,998],{},"The header of one lane. It stays at the left edge while the lanes scroll sideways, and a click collapses or expands the lane",[263,1000,1001,1006],{},[287,1002,1003],{},[88,1004,1005],{},"ff-cell",[287,1007,1008],{},"One lane and column intersection, a drop target",[263,1010,1011,1016],{},[287,1012,1013],{},[88,1014,1015],{},"ff-limit-hint",[287,1017,1018],{},"The hint shown over a full column's tray during a drag. The lane view does not render it",[263,1020,1021,1026],{},[287,1022,1023],{},[88,1024,1025],{},"ff-card-tag",[287,1027,1028,1029],{},"One tag from ",[88,1030,1031],{},"CardTag",[263,1033,1034,1039],{},[287,1035,1036],{},[88,1037,1038],{},"ff-card-meta",[287,1040,1041,1042],{},"The row of entries from ",[88,1043,1044],{},"CardMeta",[263,1046,1047,1052],{},[287,1048,1049],{},[88,1050,1051],{},"ff-card-avatar",[287,1053,1054,1055],{},"One avatar from ",[88,1056,1057],{},"CardAvatar",[81,1059,1060,1061,1063],{},"Other ",[88,1062,860],{}," classes exist for layout. They are internal.",[93,1065,1067],{"id":1066},"states","States",[81,1069,1070,1071,1074],{},"Flowforge reports state through data attributes. SortableJS toggles classes only, so ",[88,1072,1073],{},"flowforge-modern.js"," mirrors its states into these attributes.",[257,1076,1077,1090],{},[260,1078,1079],{},[263,1080,1081,1084,1087],{},[266,1082,1083],{},"Attribute",[266,1085,1086],{},"On",[266,1088,1089],{},"Meaning",[282,1091,1092,1105,1118,1135,1148,1161],{},[263,1093,1094,1099,1102],{},[287,1095,1096],{},[88,1097,1098],{},"data-dragging",[287,1100,1101],{},"The dragged card clone",[287,1103,1104],{},"A drag is in progress",[263,1106,1107,1112,1115],{},[287,1108,1109],{},[88,1110,1111],{},"data-placeholder",[287,1113,1114],{},"The drop gap",[287,1116,1117],{},"Where the card will land",[263,1119,1120,1129,1132],{},[287,1121,1122,1125,1126],{},[88,1123,1124],{},"data-drop=\"active\""," or ",[88,1127,1128],{},"data-drop=\"blocked\"",[287,1130,1131],{},"A column, or a lane cell",[287,1133,1134],{},"The hovered target accepts or refuses the card",[263,1136,1137,1142,1145],{},[287,1138,1139],{},[88,1140,1141],{},"data-full",[287,1143,1144],{},"A column",[287,1146,1147],{},"The column is at its limit",[263,1149,1150,1155,1158],{},[287,1151,1152],{},[88,1153,1154],{},"data-collapsed",[287,1156,1157],{},"A column, or a lane header",[287,1159,1160],{},"The column shows as a collapsed rail, or the lane's cells are hidden",[263,1162,1163,1168,1171],{},[287,1164,1165],{},[88,1166,1167],{},"data-pending",[287,1169,1170],{},"A card",[287,1172,1173],{},"Its move is saving",[81,1175,1176,1177,1179,1180,1182,1183,1186,1187,1190],{},"The dragged clone sits on ",[88,1178,849],{},", outside ",[88,1181,247],{},". A rule that must reach it starts at ",[88,1184,1185],{},".ff-card[data-dragging]",", and the visible card is its ",[88,1188,1189],{},".ff-card-body"," child.",[93,1192,1194],{"id":1193},"customizing","Customizing",[81,1196,1197],{},"Set variables in your theme and add hook rules beside them:",[116,1199,1201],{"className":118,"code":1200,"language":120,"meta":121,"style":121},":root { --ff-accent: var(--primary-600); --ff-radius: .5rem; --ff-drag-tilt: 1.5deg; }\n.dark { --ff-card-bg: var(--gray-900); }\n.ff-column[data-drop=\"blocked\"] .ff-tray { outline: 2px dashed var(--ff-danger); }\n",[88,1202,1203,1259,1285],{"__ignoreMap":121},[125,1204,1205,1208,1212,1215,1219,1221,1225,1228,1231,1234,1237,1239,1243,1246,1249,1251,1254,1256],{"class":127,"line":128},[125,1206,1207],{"class":139},":",[125,1209,1211],{"class":1210},"spNyl","root",[125,1213,1214],{"class":139}," {",[125,1216,1218],{"class":1217},"sTEyZ"," --ff-accent",[125,1220,1207],{"class":139},[125,1222,1224],{"class":1223},"s2Zo4"," var",[125,1226,1227],{"class":139},"(",[125,1229,1230],{"class":1217},"--primary-600",[125,1232,1233],{"class":139},");",[125,1235,1236],{"class":1217}," --ff-radius",[125,1238,1207],{"class":139},[125,1240,1242],{"class":1241},"sbssI"," .5rem",[125,1244,1245],{"class":139},";",[125,1247,1248],{"class":1217}," --ff-drag-tilt",[125,1250,1207],{"class":139},[125,1252,1253],{"class":1241}," 1.5deg",[125,1255,1245],{"class":139},[125,1257,1258],{"class":139}," }\n",[125,1260,1261,1263,1267,1269,1272,1274,1276,1278,1281,1283],{"class":127,"line":164},[125,1262,178],{"class":139},[125,1264,1266],{"class":1265},"sBMFI","dark",[125,1268,1214],{"class":139},[125,1270,1271],{"class":1217}," --ff-card-bg",[125,1273,1207],{"class":139},[125,1275,1224],{"class":1223},[125,1277,1227],{"class":139},[125,1279,1280],{"class":1217},"--gray-900",[125,1282,1233],{"class":139},[125,1284,1258],{"class":139},[125,1286,1287,1289,1291,1294,1297,1300,1303,1307,1309,1312,1315,1317,1319,1323,1325,1328,1331,1334,1336,1338,1340],{"class":127,"line":171},[125,1288,178],{"class":139},[125,1290,905],{"class":1265},[125,1292,1293],{"class":139},"[",[125,1295,1296],{"class":1210},"data-drop",[125,1298,1299],{"class":139},"=",[125,1301,1302],{"class":139},"\"",[125,1304,1306],{"class":1305},"sfazB","blocked",[125,1308,1302],{"class":139},[125,1310,1311],{"class":139},"]",[125,1313,1314],{"class":139}," .",[125,1316,945],{"class":1265},[125,1318,1214],{"class":139},[125,1320,1322],{"class":1321},"sqsOY"," outline",[125,1324,1207],{"class":139},[125,1326,1327],{"class":1241}," 2px",[125,1329,1330],{"class":1217}," dashed ",[125,1332,1333],{"class":1223},"var",[125,1335,1227],{"class":139},[125,1337,476],{"class":1217},[125,1339,1233],{"class":139},[125,1341,1258],{"class":139},[81,1343,1344],{},"The first line sets three variables for every board. The second sets a dark mode value. The third is a hook rule: it outlines a column that refuses the card you are dragging.",[81,1346,1347,1348,1350],{},"A variable set on ",[88,1349,247],{}," applies to that board only. A variable set on one card applies to that card only.",[1352,1353,1355],"h3",{"id":1354},"tailwind-apps","Tailwind apps",[81,1357,1358,1359,1207],{},"Tailwind v4 apps can map variables to utilities with ",[88,1360,1361],{},"@theme inline",[116,1363,1365],{"className":118,"code":1364,"language":120,"meta":121,"style":121},"@theme inline {\n    --color-ff-surface: var(--ff-surface, var(--gray-50));\n    --color-ff-accent: var(--ff-accent, var(--primary-500));\n}\n",[88,1366,1367,1378,1403,1427],{"__ignoreMap":121},[125,1368,1369,1372,1375],{"class":127,"line":128},[125,1370,1371],{"class":131},"@theme",[125,1373,1374],{"class":1217}," inline ",[125,1376,1377],{"class":139},"{\n",[125,1379,1380,1383,1385,1387,1389,1391,1393,1395,1397,1400],{"class":127,"line":164},[125,1381,1382],{"class":1217},"    --color-ff-surface",[125,1384,1207],{"class":139},[125,1386,1224],{"class":1223},[125,1388,1227],{"class":139},[125,1390,291],{"class":1217},[125,1392,140],{"class":139},[125,1394,1224],{"class":1223},[125,1396,1227],{"class":139},[125,1398,1399],{"class":1217},"--gray-50",[125,1401,1402],{"class":139},"));\n",[125,1404,1405,1408,1410,1412,1414,1416,1418,1420,1422,1425],{"class":127,"line":171},[125,1406,1407],{"class":1217},"    --color-ff-accent",[125,1409,1207],{"class":139},[125,1411,1224],{"class":1223},[125,1413,1227],{"class":139},[125,1415,435],{"class":1217},[125,1417,140],{"class":139},[125,1419,1224],{"class":1223},[125,1421,1227],{"class":139},[125,1423,1424],{"class":1217},"--primary-500",[125,1426,1402],{"class":139},[125,1428,1429],{"class":127,"line":187},[125,1430,197],{"class":139},[81,1432,1433,1434,1436,1437,1439,1440,1443],{},"Flowforge never sets ",[88,1435,239],{}," variables, so each mapped variable needs the fallback shown, which matches the light default in the variable table. Set the variable under ",[88,1438,254],{}," for a dark value. ",[88,1441,1442],{},"inline"," keeps each utility reading the variable at use time, so your overrides still apply.",[1352,1445,1447],{"id":1446},"card-components","Card components",[81,1449,1450,244,1453,244,1455,808,1457,1459,1460,1463,1464,1467,1468,178],{},[88,1451,1452],{},"CardTitle",[88,1454,1031],{},[88,1456,1044],{},[88,1458,1057],{}," are styled by the Modern stylesheet and designed for Modern boards. On a classic board they render ",[88,1461,1462],{},"ff-card-*"," markup, and their look is not guaranteed: after a ",[88,1465,1466],{},"wire:navigate"," visit to a Modern board the Modern stylesheet stays in the page head and can style them. See ",[223,1469,1471],{"href":1470},"\u002Fessentials\u002Fcustomization#card-components","Card Components",[93,1473,226],{"id":1474},"properties-set-with-important",[81,1476,1477,1478,1480,1481,1483,1484,1486,1487,1489],{},"Flowforge sets these properties with ",[88,1479,220],{},", to beat Filament component styles that outrank its sublayer. To override one, put your own ",[88,1482,220],{}," rule in an earlier layer, because cascade layers reverse the order for ",[88,1485,220],{},". An unlayered or later-layer ",[88,1488,220],{}," rule loses to flowforge's layered one.",[116,1491,1493],{"className":118,"code":1492,"language":120,"meta":121,"style":121},"@layer base {\n    .ff-card-meta .fi-badge { color: red !important; }\n}\n",[88,1494,1495,1503,1531],{"__ignoreMap":121},[125,1496,1497,1499,1501],{"class":127,"line":128},[125,1498,132],{"class":131},[125,1500,148],{"class":135},[125,1502,184],{"class":139},[125,1504,1505,1508,1510,1512,1515,1517,1520,1522,1525,1527,1529],{"class":127,"line":164},[125,1506,1507],{"class":139},"    .",[125,1509,1038],{"class":1265},[125,1511,1314],{"class":139},[125,1513,1514],{"class":1265},"fi-badge",[125,1516,1214],{"class":139},[125,1518,1519],{"class":1321}," color",[125,1521,1207],{"class":139},[125,1523,1524],{"class":1217}," red ",[125,1526,220],{"class":1241},[125,1528,1245],{"class":139},[125,1530,1258],{"class":139},[125,1532,1533],{"class":127,"line":171},[125,1534,197],{"class":139},[257,1536,1537,1547],{},[260,1538,1539],{},[263,1540,1541,1544],{},[266,1542,1543],{},"Selector",[266,1545,1546],{},"Properties",[282,1548,1549,1573,1587,1604,1616,1628,1647],{},[263,1550,1551,1556],{},[287,1552,1553],{},[88,1554,1555],{},".ff-card-meta .fi-badge",[287,1557,1558,244,1561,244,1564,244,1567,244,1570],{},[88,1559,1560],{},"padding",[88,1562,1563],{},"font-weight",[88,1565,1566],{},"color",[88,1568,1569],{},"background",[88,1571,1572],{},"box-shadow",[263,1574,1575,1580],{},[287,1576,1577],{},[88,1578,1579],{},".ff-card-meta .fi-in-text-item",[287,1581,1582,244,1585],{},[88,1583,1584],{},"font-size",[88,1586,1566],{},[263,1588,1589,1594],{},[287,1590,1591],{},[88,1592,1593],{},".ff-filters",[287,1595,1596,244,1599,244,1602],{},[88,1597,1598],{},"overflow",[88,1600,1601],{},"background-color",[88,1603,1572],{},[263,1605,1606,1611],{},[287,1607,1608],{},[88,1609,1610],{},".ff-filters-toolbar",[287,1612,1613],{},[88,1614,1615],{},"padding-inline",[263,1617,1618,1623],{},[287,1619,1620],{},[88,1621,1622],{},".ff-filters-panel--above",[287,1624,1625],{},[88,1626,1627],{},"border-bottom-width",[263,1629,1630,1638],{},[287,1631,1632,244,1635],{},[88,1633,1634],{},".ff-filters-panel--before",[88,1636,1637],{},".ff-filters-panel--after",[287,1639,1640,244,1642,244,1645],{},[88,1641,1601],{},[88,1643,1644],{},"border-radius",[88,1646,1572],{},[263,1648,1649,1654],{},[287,1650,1651],{},[88,1652,1653],{},".ff-filters-indicators",[287,1655,1656],{},[88,1657,1615],{},[81,1659,1660,1661,1664,1665,1667],{},"The ",[88,1662,1663],{},".ff-filters*"," classes are internal. They are listed because they carry ",[88,1666,220],{},", and they can change in any release.",[93,1669,1671],{"id":1670},"versioning","Versioning",[817,1673,1674,1677],{},[820,1675,1676],{},"Adding a variable, hook or state is a minor release.",[820,1678,1679,1680,1683],{},"Renaming or removing one happens in a major release only. The old name keeps working for that major through a fallback, ",[88,1681,1682],{},"var(--ff-new, var(--ff-old))",", and this page marks it deprecated.",[81,1685,1686],{},"The Since column in the variable table records the release that added each variable.",[1688,1689,1690],"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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--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 .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 .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 .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 .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 pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":121,"searchDepth":164,"depth":164,"links":1692},[1693,1694,1695,1696,1697,1701,1702],{"id":95,"depth":164,"text":96},{"id":232,"depth":164,"text":233},{"id":853,"depth":164,"text":854},{"id":1066,"depth":164,"text":1067},{"id":1193,"depth":164,"text":1194,"children":1698},[1699,1700],{"id":1354,"depth":171,"text":1355},{"id":1446,"depth":171,"text":1447},{"id":1474,"depth":164,"text":226},{"id":1670,"depth":164,"text":1671},"The tokens, hooks and states a Modern board exposes for styling, and the rules that keep them stable.","md",null,{},{"icon":59},{"description":1709,"title":56},"Style Flowforge Modern boards with CSS variables, class hooks and data attributes.","vX2eq9Gx1WO3GUBg1_haO_knoKOKLni7DDjUDE1i8GY",[1712,1714],{"title":51,"path":52,"stem":53,"description":1713,"icon":54,"children":-1},"Group a board into lanes by assignee, priority or any other field.",{"title":66,"path":67,"stem":68,"description":1715,"icon":69,"children":-1},"How to contribute to Flowforge",1792502029949]