[{"data":1,"prerenderedAt":2022},["ShallowReactive",2],{"navigation_docs":3,"-rendering-themes":191,"-rendering-themes-surround":2017},[4,31,67,103,129,155,175],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"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",{"title":21,"path":22,"stem":23,"icon":24},"Quick start","\u002Fgetting-started\u002Fquick-start","1.getting-started\u002F3.quick-start","i-lucide-play",{"title":26,"path":27,"stem":28,"icon":29},"Agent Skill","\u002Fgetting-started\u002Fagent-skill","1.getting-started\u002F4.agent-skill","i-lucide-sparkles",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Authoring","i-lucide-pen-line","\u002Fauthoring","2.authoring",[37,42,47,52,57,62],{"title":38,"path":39,"stem":40,"icon":41},"Comark syntax","\u002Fauthoring\u002Fcomark-syntax","2.authoring\u002F1.comark-syntax","i-lucide-file-code",{"title":43,"path":44,"stem":45,"icon":46},"Frontmatter","\u002Fauthoring\u002Ffrontmatter","2.authoring\u002F2.frontmatter","i-lucide-heading",{"title":48,"path":49,"stem":50,"icon":51},"Modules","\u002Fauthoring\u002Fmodules","2.authoring\u002F3.modules","i-lucide-blocks",{"title":53,"path":54,"stem":55,"icon":56},"Merge tags and bindings","\u002Fauthoring\u002Fmerge-tags-and-bindings","2.authoring\u002F4.merge-tags-and-bindings","i-lucide-braces",{"title":58,"path":59,"stem":60,"icon":61},"Actions and spans","\u002Fauthoring\u002Factions-and-spans","2.authoring\u002F5.actions-and-spans","i-lucide-mouse-pointer-click",{"title":63,"path":64,"stem":65,"icon":66},"Compile errors","\u002Fauthoring\u002Fcompile-errors","2.authoring\u002F6.compile-errors","i-lucide-circle-alert",{"title":68,"icon":69,"path":70,"stem":71,"children":72,"page":30},"Rendering","i-lucide-layout-template","\u002Frendering","3.rendering",[73,78,83,88,93,98],{"title":74,"path":75,"stem":76,"icon":77},"Families and streams","\u002Frendering\u002Ffamilies-and-streams","3.rendering\u002F1.families-and-streams","i-lucide-users",{"title":79,"path":80,"stem":81,"icon":82},"Themes","\u002Frendering\u002Fthemes","3.rendering\u002F2.themes","i-lucide-palette",{"title":84,"path":85,"stem":86,"icon":87},"Config and the renderer","\u002Frendering\u002Fconfig-and-renderer","3.rendering\u002F3.config-and-renderer","i-lucide-settings",{"title":89,"path":90,"stem":91,"icon":92},"Layout and spacing","\u002Frendering\u002Flayout-and-spacing","3.rendering\u002F4.layout-and-spacing","i-lucide-ruler",{"title":94,"path":95,"stem":96,"icon":97},"HTML output","\u002Frendering\u002Fhtml-output","3.rendering\u002F5.html-output","i-lucide-code-xml",{"title":99,"path":100,"stem":101,"icon":102},"Plain text","\u002Frendering\u002Fplain-text","3.rendering\u002F6.plain-text","i-lucide-file-text",{"title":104,"icon":105,"path":106,"stem":107,"children":108,"page":30},"Sending","i-lucide-send","\u002Fsending","4.sending",[109,114,119,124],{"title":110,"path":111,"stem":112,"icon":113},"Message and MIME","\u002Fsending\u002Fmessage-and-mime","4.sending\u002F1.message-and-mime","i-lucide-mail",{"title":115,"path":116,"stem":117,"icon":118},"Router and streams","\u002Fsending\u002Frouter-and-streams","4.sending\u002F2.router-and-streams","i-lucide-route",{"title":120,"path":121,"stem":122,"icon":123},"SMTP","\u002Fsending\u002Fsmtp","4.sending\u002F3.smtp","i-lucide-server",{"title":125,"path":126,"stem":127,"icon":128},"Maps","\u002Fsending\u002Fmaps","4.sending\u002F4.maps","i-lucide-map",{"title":130,"icon":131,"path":132,"stem":133,"children":134,"page":30},"Tooling","i-lucide-wrench","\u002Ftooling","5.tooling",[135,140,145,150],{"title":136,"path":137,"stem":138,"icon":139},"The lttr CLI","\u002Ftooling\u002Fcli","5.tooling\u002F1.cli","i-lucide-terminal",{"title":141,"path":142,"stem":143,"icon":144},"Live preview","\u002Ftooling\u002Flive-preview","5.tooling\u002F2.live-preview","i-lucide-eye",{"title":146,"path":147,"stem":148,"icon":149},"Screenshots","\u002Ftooling\u002Fscreenshots","5.tooling\u002F3.screenshots","i-lucide-camera",{"title":151,"path":152,"stem":153,"icon":154},"Goldens and testing","\u002Ftooling\u002Fgoldens-and-testing","5.tooling\u002F4.goldens-and-testing","i-lucide-flask-conical",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":30},"Guides","i-lucide-book-open","\u002Fguides","6.guides",[161,166,170],{"title":162,"path":163,"stem":164,"icon":165},"The Quiet example","\u002Fguides\u002Fthe-quiet-example","6.guides\u002F1.the-quiet-example","i-lucide-mail-open",{"title":167,"path":168,"stem":169,"icon":82},"Your own family and theme","\u002Fguides\u002Fyour-own-family-and-theme","6.guides\u002F2.your-own-family-and-theme",{"title":171,"path":172,"stem":173,"icon":174},"Releasing","\u002Fguides\u002Freleasing","6.guides\u002F3.releasing","i-lucide-tag",{"title":176,"icon":177,"path":178,"stem":179,"children":180,"page":30},"Reference","i-lucide-library","\u002Freference","7.reference",[181,186],{"title":182,"path":183,"stem":184,"icon":185},"API reference","\u002Freference\u002Fapi-reference","7.reference\u002F1.api-reference","i-lucide-list-tree",{"title":187,"path":188,"stem":189,"icon":190},"Gallery","\u002Freference\u002Fgallery","7.reference\u002F2.gallery","i-lucide-images",{"id":192,"title":79,"body":193,"description":2010,"extension":2011,"links":2012,"meta":2013,"navigation":2014,"path":80,"seo":2015,"stem":81,"__hash__":2016},"docs\u002F3.rendering\u002F2.themes.md",{"type":194,"value":195,"toc":2001},"minimark",[196,205,219,291,296,303,1119,1129,1133,1144,1376,1380,1406,1599,1621,1625,1630,1676,1686,1690,1754,1808,1812,1822,1851,1854,1977,1980,1984,1998],[197,198,199,200,204],"p",{},"A theme is everything brand-specific the renderers draw with: a light palette, a dark palette, three font stacks and the brand mark. It is plain data you put in ",[201,202,203],"code",{},"Config.Theme",". The library holds no brand colours of its own.",[197,206,207,210,211,214,215,218],{},[201,208,209],{},"lttr.Theme"," is an alias for ",[201,212,213],{},"theme.Theme"," from ",[201,216,217],{},"github.com\u002Fsulv-io\u002Flttr\u002Ftheme",", a leaf package the renderers can import (D3).",[220,221,227],"pre",{"className":222,"code":223,"filename":224,"language":225,"meta":226,"style":226},"language-go shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","type Theme struct {\n    Light Light\n    Dark  Dark\n    Fonts Fonts\n    Brand Brand\n}\n","theme\u002Ftheme.go","go","",[201,228,229,248,258,267,276,285],{"__ignoreMap":226},[230,231,234,238,242,245],"span",{"class":232,"line":233},"line",1,[230,235,237],{"class":236},"sMK4o","type",[230,239,241],{"class":240},"sBMFI"," Theme",[230,243,244],{"class":236}," struct",[230,246,247],{"class":236}," {\n",[230,249,251,255],{"class":232,"line":250},2,[230,252,254],{"class":253},"sTEyZ","    Light ",[230,256,257],{"class":240},"Light\n",[230,259,261,264],{"class":232,"line":260},3,[230,262,263],{"class":253},"    Dark  ",[230,265,266],{"class":240},"Dark\n",[230,268,270,273],{"class":232,"line":269},4,[230,271,272],{"class":253},"    Fonts ",[230,274,275],{"class":240},"Fonts\n",[230,277,279,282],{"class":232,"line":278},5,[230,280,281],{"class":253},"    Brand ",[230,283,284],{"class":240},"Brand\n",[230,286,288],{"class":232,"line":287},6,[230,289,290],{"class":236},"}\n",[292,293,295],"h2",{"id":294},"write-a-theme","Write a theme",[197,297,298,299,302],{},"This is the Quiet theme from ",[201,300,301],{},"examples\u002Fquiet\u002Ftheme.go",":",[220,304,306],{"className":222,"code":305,"filename":301,"language":225,"meta":226,"style":226},"func Theme() lttr.Theme {\n    return lttr.Theme{\n        Light: theme.Light{\n            Ink: \"#141410\", Body: \"#52524A\", Secondary: \"#6B6B61\", StrongBody: \"#3C3C35\",\n            Action: \"#0B4740\", PillText: \"#FFFFFF\", Accent: \"#C84A0E\",\n            Hairline: \"#E4E4E0\", RowRule: \"#EDEDEA\", NoticeBorder: \"#D8D8D3\",\n            Ground: \"#F7F7F5\", Canvas: \"#FFFFFF\",\n            WarnBg: \"#FEF5E0\", WarnBorder: \"#F0AE23\", WarnText: \"#5A3D04\",\n            OutOfStock: \"#9D1411\",\n            BannerBg:   \"#FDF0E8\", BannerText: \"#822E09\",\n            Warm: \"#F6EDE6\", Sea: \"#E3F0EE\", Map: \"#E8F4F3\", Sun: \"#062320\",\n        },\n        Dark: theme.Dark{\n            Canvas: \"#121615\", Footer: \"#1A1F1D\", Hairline: \"#2A302E\",\n            Headline: \"#F2F2F0\", Body: \"#A8ADAB\",\n            Action: \"#8BC9C3\", PillText: \"#062320\",\n            CurrentStep: \"#EC8A50\", AccentText: \"#F4B58C\",\n            BannerBg: \"#2A1A10\", BannerText: \"#F4B58C\",\n            Placeholder: \"#1B201E\",\n            WarnBg:      \"#2A2210\", WarnBorder: \"#6B5314\", WarnText: \"#F0D9A8\",\n            OutOfStock: \"#F08A85\",\n        },\n        Fonts: theme.Fonts{\n            Serif: \"Georgia,'Times New Roman',serif\",\n            Sans:  \"Arial,Helvetica,sans-serif\",\n            Mono:  \"'Courier New',Courier,monospace\",\n        },\n        Brand: theme.Brand{Name: \"CaribHubs\", Logo: \"logo.png\", LogoDark: \"logo-dark.png\", LogoSize: 36},\n    }\n}\n",[201,307,308,330,345,362,425,469,513,543,588,605,637,696,702,719,764,794,822,853,881,898,941,957,962,979,996,1014,1031,1036,1108,1114],{"__ignoreMap":226},[230,309,310,313,316,319,322,325,328],{"class":232,"line":233},[230,311,312],{"class":236},"func",[230,314,241],{"class":315},"s2Zo4",[230,317,318],{"class":236},"()",[230,320,321],{"class":240}," lttr",[230,323,324],{"class":236},".",[230,326,327],{"class":240},"Theme",[230,329,247],{"class":236},[230,331,332,336,338,340,342],{"class":232,"line":250},[230,333,335],{"class":334},"s7zQu","    return",[230,337,321],{"class":240},[230,339,324],{"class":236},[230,341,327],{"class":240},[230,343,344],{"class":236},"{\n",[230,346,347,350,352,355,357,360],{"class":232,"line":260},[230,348,349],{"class":253},"        Light",[230,351,302],{"class":236},[230,353,354],{"class":240}," theme",[230,356,324],{"class":236},[230,358,359],{"class":240},"Light",[230,361,344],{"class":236},[230,363,364,367,369,372,376,379,382,385,387,389,392,394,396,399,401,403,406,408,410,413,415,417,420,422],{"class":232,"line":269},[230,365,366],{"class":253},"            Ink",[230,368,302],{"class":236},[230,370,371],{"class":236}," \"",[230,373,375],{"class":374},"sfazB","#141410",[230,377,378],{"class":236},"\"",[230,380,381],{"class":236},",",[230,383,384],{"class":253}," Body",[230,386,302],{"class":236},[230,388,371],{"class":236},[230,390,391],{"class":374},"#52524A",[230,393,378],{"class":236},[230,395,381],{"class":236},[230,397,398],{"class":253}," Secondary",[230,400,302],{"class":236},[230,402,371],{"class":236},[230,404,405],{"class":374},"#6B6B61",[230,407,378],{"class":236},[230,409,381],{"class":236},[230,411,412],{"class":253}," StrongBody",[230,414,302],{"class":236},[230,416,371],{"class":236},[230,418,419],{"class":374},"#3C3C35",[230,421,378],{"class":236},[230,423,424],{"class":236},",\n",[230,426,427,430,432,434,437,439,441,444,446,448,451,453,455,458,460,462,465,467],{"class":232,"line":278},[230,428,429],{"class":253},"            Action",[230,431,302],{"class":236},[230,433,371],{"class":236},[230,435,436],{"class":374},"#0B4740",[230,438,378],{"class":236},[230,440,381],{"class":236},[230,442,443],{"class":253}," PillText",[230,445,302],{"class":236},[230,447,371],{"class":236},[230,449,450],{"class":374},"#FFFFFF",[230,452,378],{"class":236},[230,454,381],{"class":236},[230,456,457],{"class":253}," Accent",[230,459,302],{"class":236},[230,461,371],{"class":236},[230,463,464],{"class":374},"#C84A0E",[230,466,378],{"class":236},[230,468,424],{"class":236},[230,470,471,474,476,478,481,483,485,488,490,492,495,497,499,502,504,506,509,511],{"class":232,"line":287},[230,472,473],{"class":253},"            Hairline",[230,475,302],{"class":236},[230,477,371],{"class":236},[230,479,480],{"class":374},"#E4E4E0",[230,482,378],{"class":236},[230,484,381],{"class":236},[230,486,487],{"class":253}," RowRule",[230,489,302],{"class":236},[230,491,371],{"class":236},[230,493,494],{"class":374},"#EDEDEA",[230,496,378],{"class":236},[230,498,381],{"class":236},[230,500,501],{"class":253}," NoticeBorder",[230,503,302],{"class":236},[230,505,371],{"class":236},[230,507,508],{"class":374},"#D8D8D3",[230,510,378],{"class":236},[230,512,424],{"class":236},[230,514,516,519,521,523,526,528,530,533,535,537,539,541],{"class":232,"line":515},7,[230,517,518],{"class":253},"            Ground",[230,520,302],{"class":236},[230,522,371],{"class":236},[230,524,525],{"class":374},"#F7F7F5",[230,527,378],{"class":236},[230,529,381],{"class":236},[230,531,532],{"class":253}," Canvas",[230,534,302],{"class":236},[230,536,371],{"class":236},[230,538,450],{"class":374},[230,540,378],{"class":236},[230,542,424],{"class":236},[230,544,546,549,551,553,556,558,560,563,565,567,570,572,574,577,579,581,584,586],{"class":232,"line":545},8,[230,547,548],{"class":253},"            WarnBg",[230,550,302],{"class":236},[230,552,371],{"class":236},[230,554,555],{"class":374},"#FEF5E0",[230,557,378],{"class":236},[230,559,381],{"class":236},[230,561,562],{"class":253}," WarnBorder",[230,564,302],{"class":236},[230,566,371],{"class":236},[230,568,569],{"class":374},"#F0AE23",[230,571,378],{"class":236},[230,573,381],{"class":236},[230,575,576],{"class":253}," WarnText",[230,578,302],{"class":236},[230,580,371],{"class":236},[230,582,583],{"class":374},"#5A3D04",[230,585,378],{"class":236},[230,587,424],{"class":236},[230,589,591,594,596,598,601,603],{"class":232,"line":590},9,[230,592,593],{"class":253},"            OutOfStock",[230,595,302],{"class":236},[230,597,371],{"class":236},[230,599,600],{"class":374},"#9D1411",[230,602,378],{"class":236},[230,604,424],{"class":236},[230,606,608,611,613,616,619,621,623,626,628,630,633,635],{"class":232,"line":607},10,[230,609,610],{"class":253},"            BannerBg",[230,612,302],{"class":236},[230,614,615],{"class":236},"   \"",[230,617,618],{"class":374},"#FDF0E8",[230,620,378],{"class":236},[230,622,381],{"class":236},[230,624,625],{"class":253}," BannerText",[230,627,302],{"class":236},[230,629,371],{"class":236},[230,631,632],{"class":374},"#822E09",[230,634,378],{"class":236},[230,636,424],{"class":236},[230,638,640,643,645,647,650,652,654,657,659,661,664,666,668,671,673,675,678,680,682,685,687,689,692,694],{"class":232,"line":639},11,[230,641,642],{"class":253},"            Warm",[230,644,302],{"class":236},[230,646,371],{"class":236},[230,648,649],{"class":374},"#F6EDE6",[230,651,378],{"class":236},[230,653,381],{"class":236},[230,655,656],{"class":253}," Sea",[230,658,302],{"class":236},[230,660,371],{"class":236},[230,662,663],{"class":374},"#E3F0EE",[230,665,378],{"class":236},[230,667,381],{"class":236},[230,669,670],{"class":253}," Map",[230,672,302],{"class":236},[230,674,371],{"class":236},[230,676,677],{"class":374},"#E8F4F3",[230,679,378],{"class":236},[230,681,381],{"class":236},[230,683,684],{"class":253}," Sun",[230,686,302],{"class":236},[230,688,371],{"class":236},[230,690,691],{"class":374},"#062320",[230,693,378],{"class":236},[230,695,424],{"class":236},[230,697,699],{"class":232,"line":698},12,[230,700,701],{"class":236},"        },\n",[230,703,705,708,710,712,714,717],{"class":232,"line":704},13,[230,706,707],{"class":253},"        Dark",[230,709,302],{"class":236},[230,711,354],{"class":240},[230,713,324],{"class":236},[230,715,716],{"class":240},"Dark",[230,718,344],{"class":236},[230,720,722,725,727,729,732,734,736,739,741,743,746,748,750,753,755,757,760,762],{"class":232,"line":721},14,[230,723,724],{"class":253},"            Canvas",[230,726,302],{"class":236},[230,728,371],{"class":236},[230,730,731],{"class":374},"#121615",[230,733,378],{"class":236},[230,735,381],{"class":236},[230,737,738],{"class":253}," Footer",[230,740,302],{"class":236},[230,742,371],{"class":236},[230,744,745],{"class":374},"#1A1F1D",[230,747,378],{"class":236},[230,749,381],{"class":236},[230,751,752],{"class":253}," Hairline",[230,754,302],{"class":236},[230,756,371],{"class":236},[230,758,759],{"class":374},"#2A302E",[230,761,378],{"class":236},[230,763,424],{"class":236},[230,765,767,770,772,774,777,779,781,783,785,787,790,792],{"class":232,"line":766},15,[230,768,769],{"class":253},"            Headline",[230,771,302],{"class":236},[230,773,371],{"class":236},[230,775,776],{"class":374},"#F2F2F0",[230,778,378],{"class":236},[230,780,381],{"class":236},[230,782,384],{"class":253},[230,784,302],{"class":236},[230,786,371],{"class":236},[230,788,789],{"class":374},"#A8ADAB",[230,791,378],{"class":236},[230,793,424],{"class":236},[230,795,797,799,801,803,806,808,810,812,814,816,818,820],{"class":232,"line":796},16,[230,798,429],{"class":253},[230,800,302],{"class":236},[230,802,371],{"class":236},[230,804,805],{"class":374},"#8BC9C3",[230,807,378],{"class":236},[230,809,381],{"class":236},[230,811,443],{"class":253},[230,813,302],{"class":236},[230,815,371],{"class":236},[230,817,691],{"class":374},[230,819,378],{"class":236},[230,821,424],{"class":236},[230,823,825,828,830,832,835,837,839,842,844,846,849,851],{"class":232,"line":824},17,[230,826,827],{"class":253},"            CurrentStep",[230,829,302],{"class":236},[230,831,371],{"class":236},[230,833,834],{"class":374},"#EC8A50",[230,836,378],{"class":236},[230,838,381],{"class":236},[230,840,841],{"class":253}," AccentText",[230,843,302],{"class":236},[230,845,371],{"class":236},[230,847,848],{"class":374},"#F4B58C",[230,850,378],{"class":236},[230,852,424],{"class":236},[230,854,856,858,860,862,865,867,869,871,873,875,877,879],{"class":232,"line":855},18,[230,857,610],{"class":253},[230,859,302],{"class":236},[230,861,371],{"class":236},[230,863,864],{"class":374},"#2A1A10",[230,866,378],{"class":236},[230,868,381],{"class":236},[230,870,625],{"class":253},[230,872,302],{"class":236},[230,874,371],{"class":236},[230,876,848],{"class":374},[230,878,378],{"class":236},[230,880,424],{"class":236},[230,882,884,887,889,891,894,896],{"class":232,"line":883},19,[230,885,886],{"class":253},"            Placeholder",[230,888,302],{"class":236},[230,890,371],{"class":236},[230,892,893],{"class":374},"#1B201E",[230,895,378],{"class":236},[230,897,424],{"class":236},[230,899,901,903,905,908,911,913,915,917,919,921,924,926,928,930,932,934,937,939],{"class":232,"line":900},20,[230,902,548],{"class":253},[230,904,302],{"class":236},[230,906,907],{"class":236},"      \"",[230,909,910],{"class":374},"#2A2210",[230,912,378],{"class":236},[230,914,381],{"class":236},[230,916,562],{"class":253},[230,918,302],{"class":236},[230,920,371],{"class":236},[230,922,923],{"class":374},"#6B5314",[230,925,378],{"class":236},[230,927,381],{"class":236},[230,929,576],{"class":253},[230,931,302],{"class":236},[230,933,371],{"class":236},[230,935,936],{"class":374},"#F0D9A8",[230,938,378],{"class":236},[230,940,424],{"class":236},[230,942,944,946,948,950,953,955],{"class":232,"line":943},21,[230,945,593],{"class":253},[230,947,302],{"class":236},[230,949,371],{"class":236},[230,951,952],{"class":374},"#F08A85",[230,954,378],{"class":236},[230,956,424],{"class":236},[230,958,960],{"class":232,"line":959},22,[230,961,701],{"class":236},[230,963,965,968,970,972,974,977],{"class":232,"line":964},23,[230,966,967],{"class":253},"        Fonts",[230,969,302],{"class":236},[230,971,354],{"class":240},[230,973,324],{"class":236},[230,975,976],{"class":240},"Fonts",[230,978,344],{"class":236},[230,980,982,985,987,989,992,994],{"class":232,"line":981},24,[230,983,984],{"class":253},"            Serif",[230,986,302],{"class":236},[230,988,371],{"class":236},[230,990,991],{"class":374},"Georgia,'Times New Roman',serif",[230,993,378],{"class":236},[230,995,424],{"class":236},[230,997,999,1002,1004,1007,1010,1012],{"class":232,"line":998},25,[230,1000,1001],{"class":253},"            Sans",[230,1003,302],{"class":236},[230,1005,1006],{"class":236},"  \"",[230,1008,1009],{"class":374},"Arial,Helvetica,sans-serif",[230,1011,378],{"class":236},[230,1013,424],{"class":236},[230,1015,1017,1020,1022,1024,1027,1029],{"class":232,"line":1016},26,[230,1018,1019],{"class":253},"            Mono",[230,1021,302],{"class":236},[230,1023,1006],{"class":236},[230,1025,1026],{"class":374},"'Courier New',Courier,monospace",[230,1028,378],{"class":236},[230,1030,424],{"class":236},[230,1032,1034],{"class":232,"line":1033},27,[230,1035,701],{"class":236},[230,1037,1039,1042,1044,1046,1048,1051,1054,1057,1059,1061,1064,1066,1068,1071,1073,1075,1078,1080,1082,1085,1087,1089,1092,1094,1096,1099,1101,1105],{"class":232,"line":1038},28,[230,1040,1041],{"class":253},"        Brand",[230,1043,302],{"class":236},[230,1045,354],{"class":240},[230,1047,324],{"class":236},[230,1049,1050],{"class":240},"Brand",[230,1052,1053],{"class":236},"{",[230,1055,1056],{"class":253},"Name",[230,1058,302],{"class":236},[230,1060,371],{"class":236},[230,1062,1063],{"class":374},"CaribHubs",[230,1065,378],{"class":236},[230,1067,381],{"class":236},[230,1069,1070],{"class":253}," Logo",[230,1072,302],{"class":236},[230,1074,371],{"class":236},[230,1076,1077],{"class":374},"logo.png",[230,1079,378],{"class":236},[230,1081,381],{"class":236},[230,1083,1084],{"class":253}," LogoDark",[230,1086,302],{"class":236},[230,1088,371],{"class":236},[230,1090,1091],{"class":374},"logo-dark.png",[230,1093,378],{"class":236},[230,1095,381],{"class":236},[230,1097,1098],{"class":253}," LogoSize",[230,1100,302],{"class":236},[230,1102,1104],{"class":1103},"sbssI"," 36",[230,1106,1107],{"class":236},"},\n",[230,1109,1111],{"class":232,"line":1110},29,[230,1112,1113],{"class":236},"    }\n",[230,1115,1117],{"class":232,"line":1116},30,[230,1118,290],{"class":236},[197,1120,1121,1122,1125,1126,324],{},"Every colour is a ",[201,1123,1124],{},"theme.Color",", a string written ",[201,1127,1128],{},"#RRGGBB",[292,1130,1132],{"id":1131},"set-the-light-palette","Set the light palette",[197,1134,1135,1136,1139,1140,1143],{},"The light palette is written inline into the HTML: ",[201,1137,1138],{},"style"," attributes and ",[201,1141,1142],{},"bgcolor",". It is what every client shows first, and what clients without dark-mode support always show.",[1145,1146,1147,1160],"table",{},[1148,1149,1150],"thead",{},[1151,1152,1153,1157],"tr",{},[1154,1155,1156],"th",{},"Field",[1154,1158,1159],{},"Used for",[1161,1162,1163,1174,1184,1198,1208,1226,1236,1250,1260,1270,1280,1290,1300,1317,1327,1340],"tbody",{},[1151,1164,1165,1171],{},[1166,1167,1168],"td",{},[201,1169,1170],{},"Ink",[1166,1172,1173],{},"Headings, pull quotes, table and receipt cells, notice titles, the signature name, product names and prices, F1 nav links",[1151,1175,1176,1181],{},[1166,1177,1178],{},[201,1179,1180],{},"Body",[1166,1182,1183],{},"Paragraphs, meta values, notice text, signature text",[1151,1185,1186,1191],{},[1166,1187,1188],{},[201,1189,1190],{},"Secondary",[1166,1192,1193,1194,1197],{},"Eyebrows, table headers, meta labels, sub-lines (such as ≈ US$), ",[201,1195,1196],{},"muted"," spans, the H3 masthead, footer text",[1151,1199,1200,1205],{},[1166,1201,1202],{},[201,1203,1204],{},"StrongBody",[1166,1206,1207],{},"Letter text, links in the footer",[1151,1209,1210,1215],{},[1166,1211,1212],{},[201,1213,1214],{},"Action",[1166,1216,1217,1218,1221,1222,1225],{},"The pill button, links in prose and ",[201,1219,1220],{},":link"," actions, ",[201,1223,1224],{},"teal"," spans, the figure amount, completed progress steps",[1151,1227,1228,1233],{},[1166,1229,1230],{},[201,1231,1232],{},"PillText",[1166,1234,1235],{},"The pill button's label",[1151,1237,1238,1243],{},[1166,1239,1240],{},[201,1241,1242],{},"Accent",[1166,1244,1245,1246,1249],{},"Orange eyebrows (",[201,1247,1248],{},"tone=\"orange\"","), story eyebrows, the current progress step",[1151,1251,1252,1257],{},[1166,1253,1254],{},[201,1255,1256],{},"Hairline",[1166,1258,1259],{},"Dividers, the lines between tiles, future progress steps, the banner's bottom border",[1151,1261,1262,1267],{},[1166,1263,1264],{},[201,1265,1266],{},"RowRule",[1166,1268,1269],{},"The rule between receipt and table rows",[1151,1271,1272,1277],{},[1166,1273,1274],{},[201,1275,1276],{},"NoticeBorder",[1166,1278,1279],{},"The border of a default notice",[1151,1281,1282,1287],{},[1166,1283,1284],{},[201,1285,1286],{},"Ground",[1166,1288,1289],{},"The footer background, and the placeholder ground of an image or tile without a tone",[1151,1291,1292,1297],{},[1166,1293,1294],{},[201,1295,1296],{},"Canvas",[1166,1298,1299],{},"The page background",[1151,1301,1302,1314],{},[1166,1303,1304,1307,1308,1307,1311],{},[201,1305,1306],{},"WarnBg",", ",[201,1309,1310],{},"WarnBorder",[201,1312,1313],{},"WarnText",[1166,1315,1316],{},"A warn notice",[1151,1318,1319,1324],{},[1166,1320,1321],{},[201,1322,1323],{},"OutOfStock",[1166,1325,1326],{},"\"Out of stock\" in the stock module",[1151,1328,1329,1337],{},[1166,1330,1331,1307,1334],{},[201,1332,1333],{},"BannerBg",[201,1335,1336],{},"BannerText",[1166,1338,1339],{},"The H2 banner",[1151,1341,1342,1356],{},[1166,1343,1344,1307,1347,1307,1350,1307,1353],{},[201,1345,1346],{},"Warm",[201,1348,1349],{},"Sea",[201,1351,1352],{},"Map",[201,1354,1355],{},"Sun",[1166,1357,1358,1359,1307,1362,1307,1365,1368,1369,1372,1373,1375],{},"Placeholder grounds for ",[201,1360,1361],{},"tone=\"warm\"",[201,1363,1364],{},"sea",[201,1366,1367],{},"map"," and ",[201,1370,1371],{},"sun","; ",[201,1374,1352],{}," is also the map band's ground",[292,1377,1379],{"id":1378},"set-the-dark-palette","Set the dark palette",[197,1381,1382,1383,1386,1387,1390,1391,1394,1395,1398,1399,1402,1403,324],{},"The dark palette only reaches the email through the head ",[201,1384,1385],{},"\u003Cstyle>",": rules under ",[201,1388,1389],{},"@media (prefers-color-scheme:dark)",", repeated under ",[201,1392,1393],{},"[data-ogsc]"," (text and border colours) and ",[201,1396,1397],{},"[data-ogsb]"," (backgrounds) for Outlook.com. Each field feeds one or more ",[201,1400,1401],{},"dk-*"," class hooks, and every rule is ",[201,1404,1405],{},"!important",[1145,1407,1408,1417],{},[1148,1409,1410],{},[1151,1411,1412,1414],{},[1154,1413,1156],{},[1154,1415,1416],{},"Class hooks",[1161,1418,1419,1431,1443,1466,1482,1493,1512,1523,1535,1547,1560,1572,1588],{},[1151,1420,1421,1425],{},[1166,1422,1423],{},[201,1424,1296],{},[1166,1426,1427,1430],{},[201,1428,1429],{},".dk-canvas"," background",[1151,1432,1433,1438],{},[1166,1434,1435],{},[201,1436,1437],{},"Footer",[1166,1439,1440,1430],{},[201,1441,1442],{},".dk-foot",[1151,1444,1445,1449],{},[1166,1446,1447],{},[201,1448,1256],{},[1166,1450,1451,1307,1454,1457,1458,1461,1462,1465],{},[201,1452,1453],{},".dk-off",[201,1455,1456],{},".dk-hr"," backgrounds; ",[201,1459,1460],{},".dk-bd"," border; the ",[201,1463,1464],{},".dk-ib"," banner's border",[1151,1467,1468,1473],{},[1166,1469,1470],{},[201,1471,1472],{},"Headline",[1166,1474,1475,1307,1478,1481],{},[201,1476,1477],{},".dk-ink",[201,1479,1480],{},".dk-step-now"," text",[1151,1483,1484,1488],{},[1166,1485,1486],{},[201,1487,1180],{},[1166,1489,1490,1481],{},[201,1491,1492],{},".dk-body",[1151,1494,1495,1499],{},[1166,1496,1497],{},[201,1498,1214],{},[1166,1500,1501,1504,1505,1508,1509,1430],{},[201,1502,1503],{},".dk-act"," text; ",[201,1506,1507],{},".dk-pill"," background and border; ",[201,1510,1511],{},".dk-done",[1151,1513,1514,1518],{},[1166,1515,1516],{},[201,1517,1232],{},[1166,1519,1520,1481],{},[201,1521,1522],{},".dk-pill-a",[1151,1524,1525,1530],{},[1166,1526,1527],{},[201,1528,1529],{},"CurrentStep",[1166,1531,1532,1430],{},[201,1533,1534],{},".dk-now",[1151,1536,1537,1542],{},[1166,1538,1539],{},[201,1540,1541],{},"AccentText",[1166,1543,1544,1481],{},[201,1545,1546],{},".dk-eo",[1151,1548,1549,1555],{},[1166,1550,1551,1307,1553],{},[201,1552,1333],{},[201,1554,1336],{},[1166,1556,1557,1559],{},[201,1558,1464],{}," background and text",[1151,1561,1562,1567],{},[1166,1563,1564],{},[201,1565,1566],{},"Placeholder",[1166,1568,1569,1430],{},[201,1570,1571],{},".dk-ph",[1151,1573,1574,1582],{},[1166,1575,1576,1307,1578,1307,1580],{},[201,1577,1306],{},[201,1579,1310],{},[201,1581,1313],{},[1166,1583,1584,1587],{},[201,1585,1586],{},".dk-warn"," background, border and text",[1151,1589,1590,1594],{},[1166,1591,1592],{},[201,1593,1323],{},[1166,1595,1596,1481],{},[201,1597,1598],{},".dk-red",[197,1600,1601,1602,1604,1605,1608,1609,1612,1613,1616,1617,324],{},"The ",[201,1603,1371],{}," placeholder ground carries no ",[201,1606,1607],{},"dk-ph"," hook, so it stays dark in dark mode (D32). The dark block also swaps the logos: ",[201,1610,1611],{},".logo-lt"," is hidden and ",[201,1614,1615],{},".logo-dk"," is shown. See ",[1618,1619,94],"a",{"href":1620},"\u002Frendering\u002Fhtml-output#support-dark-mode",[292,1622,1624],{"id":1623},"set-the-fonts","Set the fonts",[197,1626,1627,1629],{},[201,1628,976],{}," holds three CSS font stacks:",[1145,1631,1632,1640],{},[1148,1633,1634],{},[1151,1635,1636,1638],{},[1154,1637,1156],{},[1154,1639,1159],{},[1161,1641,1642,1652,1662],{},[1151,1643,1644,1649],{},[1166,1645,1646],{},[201,1647,1648],{},"Serif",[1166,1650,1651],{},"Headings, the figure amount, quotes, the signature name, product prices",[1151,1653,1654,1659],{},[1166,1655,1656],{},[201,1657,1658],{},"Sans",[1166,1660,1661],{},"Paragraphs, letters, tables and receipts, buttons, the footer",[1151,1663,1664,1669],{},[1166,1665,1666],{},[201,1667,1668],{},"Mono",[1166,1670,1671,1672,1675],{},"Eyebrows, table headers, code spans and the code module, ",[201,1673,1674],{},"mono"," spans, the H2 banner and H3 masthead",[197,1677,1678,1679,1682,1683,1685],{},"Use fallback stacks that exist on the reader's machine. Web fonts are not loaded. The Outlook VML button always uses ",[201,1680,1681],{},"Arial,sans-serif",", whatever ",[201,1684,1658],{}," says.",[292,1687,1689],{"id":1688},"set-the-brand","Set the brand",[220,1691,1693],{"className":222,"code":1692,"filename":224,"language":225,"meta":226,"style":226},"type Brand struct {\n    Name     string \u002F\u002F used in header text, logo alt and the default sign-off\n    Logo     string \u002F\u002F file name under Config.AssetBase, e.g. \"logo.png\" (72×72, shown at LogoSize)\n    LogoDark string \u002F\u002F white-chip version for dark mode\n    LogoSize int    \u002F\u002F display size in CSS pixels, 16..96\n}\n",[201,1694,1695,1706,1719,1729,1739,1750],{"__ignoreMap":226},[230,1696,1697,1699,1702,1704],{"class":232,"line":233},[230,1698,237],{"class":236},[230,1700,1701],{"class":240}," Brand",[230,1703,244],{"class":236},[230,1705,247],{"class":236},[230,1707,1708,1711,1715],{"class":232,"line":250},[230,1709,1710],{"class":253},"    Name     ",[230,1712,1714],{"class":1713},"spNyl","string",[230,1716,1718],{"class":1717},"sHwdD"," \u002F\u002F used in header text, logo alt and the default sign-off\n",[230,1720,1721,1724,1726],{"class":232,"line":260},[230,1722,1723],{"class":253},"    Logo     ",[230,1725,1714],{"class":1713},[230,1727,1728],{"class":1717}," \u002F\u002F file name under Config.AssetBase, e.g. \"logo.png\" (72×72, shown at LogoSize)\n",[230,1730,1731,1734,1736],{"class":232,"line":269},[230,1732,1733],{"class":253},"    LogoDark ",[230,1735,1714],{"class":1713},[230,1737,1738],{"class":1717}," \u002F\u002F white-chip version for dark mode\n",[230,1740,1741,1744,1747],{"class":232,"line":278},[230,1742,1743],{"class":253},"    LogoSize ",[230,1745,1746],{"class":1713},"int",[230,1748,1749],{"class":1717},"    \u002F\u002F display size in CSS pixels, 16..96\n",[230,1751,1752],{"class":232,"line":287},[230,1753,290],{"class":236},[1755,1756,1757,1775,1802],"ul",{},[1758,1759,1760,1762,1763,1766,1767,1770,1771,1774],"li",{},[201,1761,1056],{}," is the logo's ",[201,1764,1765],{},"alt",", the plain-text header line (in capitals), the ",[201,1768,1769],{},"{brand}"," placeholder and the default sign-off name, ",[201,1772,1773],{},"The {Name} team"," (D7).",[1758,1776,1777,1368,1780,1783,1784,1787,1788,1368,1791,1794,1795,1798,1799,324],{},[201,1778,1779],{},"Logo",[201,1781,1782],{},"LogoDark"," are file names, not URLs. The renderer joins each to ",[201,1785,1786],{},"Config.AssetBase",", so ",[201,1789,1790],{},"AssetBase: \"https:\u002F\u002Fcdn.acme.example\u002Femail\"",[201,1792,1793],{},"Logo: \"logo.png\""," give ",[201,1796,1797],{},"https:\u002F\u002Fcdn.acme.example\u002Femail\u002Flogo.png",". See ",[1618,1800,84],{"href":1801},"\u002Frendering\u002Fconfig-and-renderer#serve-the-logos",[1758,1803,1804,1807],{},[201,1805,1806],{},"LogoSize"," is the square size the logo is shown at. Quiet uses 36 and ships a 72×72 PNG for sharp rendering on high-density screens.",[292,1809,1811],{"id":1810},"validate-a-theme","Validate a theme",[197,1813,1814,1817,1818,1821],{},[201,1815,1816],{},"NewRenderer"," calls ",[201,1819,1820],{},"Theme.Validate",", and you can call it yourself:",[220,1823,1825],{"className":222,"code":1824,"filename":224,"language":225,"meta":226,"style":226},"func (t Theme) Validate() error\n",[201,1826,1827],{"__ignoreMap":226},[230,1828,1829,1831,1834,1838,1840,1843,1846,1848],{"class":232,"line":233},[230,1830,312],{"class":236},[230,1832,1833],{"class":236}," (",[230,1835,1837],{"class":1836},"sHdIc","t ",[230,1839,327],{"class":240},[230,1841,1842],{"class":236},")",[230,1844,1845],{"class":315}," Validate",[230,1847,318],{"class":236},[230,1849,1850],{"class":1713}," error\n",[197,1852,1853],{},"It reports every problem, one per line:",[1145,1855,1856,1869],{},[1148,1857,1858],{},[1151,1859,1860,1863,1866],{},[1154,1861,1862],{},"Value",[1154,1864,1865],{},"Rule",[1154,1867,1868],{},"Message",[1161,1870,1871,1893,1920,1935,1962],{},[1151,1872,1873,1881,1888],{},[1166,1874,1875,1876,1368,1878,1880],{},"Every ",[201,1877,359],{},[201,1879,716],{}," colour",[1166,1882,1883,1884,1887],{},"Exactly ",[201,1885,1886],{},"#"," and six hex digits, either case",[1166,1889,1890],{},[201,1891,1892],{},"theme: Light.Ink: invalid colour \"red\" (want #RRGGBB)",[1151,1894,1895,1904,1915],{},[1166,1896,1897,1307,1900,1307,1902],{},[201,1898,1899],{},"Fonts.Serif",[201,1901,1658],{},[201,1903,1668],{},[1166,1905,1906,1907,1307,1909,1368,1912],{},"Non-empty, only letters, digits, space, ",[201,1908,381],{},[201,1910,1911],{},"'",[201,1913,1914],{},"-",[1166,1916,1917],{},[201,1918,1919],{},"theme: Fonts.Sans: empty font stack",[1151,1921,1922,1927,1930],{},[1166,1923,1924],{},[201,1925,1926],{},"Brand.Name",[1166,1928,1929],{},"Non-empty",[1166,1931,1932],{},[201,1933,1934],{},"theme: Brand.Name: empty",[1151,1936,1937,1944,1957],{},[1166,1938,1939,1307,1942],{},[201,1940,1941],{},"Brand.Logo",[201,1943,1782],{},[1166,1945,1946,1947,1307,1950,1307,1953,1956],{},"Non-empty file names with no ",[201,1948,1949],{},"\u002F",[201,1951,1952],{},"\\",[201,1954,1955],{},"..",", whitespace or control characters",[1166,1958,1959],{},[201,1960,1961],{},"theme: Brand.Logo: invalid file name \"img\u002Flogo.png\"",[1151,1963,1964,1969,1972],{},[1166,1965,1966],{},[201,1967,1968],{},"Brand.LogoSize",[1166,1970,1971],{},"16 to 96",[1166,1973,1974],{},[201,1975,1976],{},"theme: Brand.LogoSize: 0 out of range 16..96",[197,1978,1979],{},"The rules exist so that nothing from a theme can break out of the CSS or markup it is written into. Once a theme validates, the renderers treat it as trusted.",[292,1981,1983],{"id":1982},"know-what-a-theme-cannot-change","Know what a theme cannot change",[197,1985,1986,1987,1990,1991,1994,1995,1997],{},"Sizes are not part of the theme. The type scale (headings 40\u002F44, body 17\u002F25.5, footer 12\u002F19, …), the 600px frame, the 56px side padding (24px under 480px), paddings, radii and the pill's 48px height are library constants in ",[201,1988,1989],{},"render\u002Fhtml\u002Ftokens.go",". They are the layout system; the theme is the brand. Spacing between modules is fixed too, in ",[201,1992,1993],{},"layout"," (see ",[1618,1996,89],{"href":90},").",[1138,1999,2000],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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}",{"title":226,"searchDepth":250,"depth":250,"links":2002},[2003,2004,2005,2006,2007,2008,2009],{"id":294,"depth":250,"text":295},{"id":1131,"depth":250,"text":1132},{"id":1378,"depth":250,"text":1379},{"id":1623,"depth":250,"text":1624},{"id":1688,"depth":250,"text":1689},{"id":1810,"depth":250,"text":1811},{"id":1982,"depth":250,"text":1983},"Give lttr your colours, font stacks and logo with theme.Theme, and see where each value ends up in the email.","md",null,{},{"icon":82},{"title":79,"description":2010},"PKHrvfyPlRFoggde6rxSSSI5XLtJxYIVGo9Maba6V-U",[2018,2020],{"title":74,"path":75,"stem":76,"description":2019,"icon":77,"children":-1},"Define the kinds of email you send, with their sender, stream, header and footer chrome, footer copy and the modules they may not use.",{"title":84,"path":85,"stem":86,"description":2021,"icon":87,"children":-1},"Build a Renderer from a Config, compile templates against your families, and render them for a recipient.",1790309825445]