[{"data":1,"prerenderedAt":2115},["ShallowReactive",2],{"navigation_docs":3,"-docs-reference-theme-system":118,"-docs-reference-theme-system-surround":2110},[4,19,49,75,89],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":18},"Démarrer","i-lucide-rocket","\u002Fdocs\u002Fdemarrer","docs\u002F1.demarrer",[10,14],{"title":11,"path":12,"stem":13},"Première présentation","\u002Fdocs\u002Fdemarrer\u002Fpremiere-presentation","docs\u002F1.demarrer\u002F1.premiere-presentation",{"title":15,"path":16,"stem":17},"Le Markdown","\u002Fdocs\u002Fdemarrer\u002Fle-markdown","docs\u002F1.demarrer\u002F2.le-markdown",false,{"title":20,"icon":21,"path":22,"stem":23,"children":24,"page":18},"Écrire","i-lucide-pen-line","\u002Fdocs\u002Fecrire","docs\u002F2.ecrire",[25,29,33,37,41,45],{"title":26,"path":27,"stem":28},"La syntaxe","\u002Fdocs\u002Fecrire\u002Fsyntaxe","docs\u002F2.ecrire\u002F1.syntaxe",{"title":30,"path":31,"stem":32},"Les composants","\u002Fdocs\u002Fecrire\u002Fcomposants","docs\u002F2.ecrire\u002F2.composants",{"title":34,"path":35,"stem":36},"Story Storybook","\u002Fdocs\u002Fecrire\u002Fstory-storybook","docs\u002F2.ecrire\u002F3.story-storybook",{"title":38,"path":39,"stem":40},"Image et texte","\u002Fdocs\u002Fecrire\u002Fimage-a-cote-du-texte","docs\u002F2.ecrire\u002F4.image-a-cote-du-texte",{"title":42,"path":43,"stem":44},"Présenter et exporter","\u002Fdocs\u002Fecrire\u002Fpresenter","docs\u002F2.ecrire\u002F5.presenter",{"title":46,"path":47,"stem":48},"Écrire avec un agent","\u002Fdocs\u002Fecrire\u002Fecrire-avec-un-agent","docs\u002F2.ecrire\u002F6.ecrire-avec-un-agent",{"title":50,"icon":51,"path":52,"stem":53,"children":54,"page":18},"Studio","i-lucide-layout-grid","\u002Fdocs\u002Fstudio","docs\u002F3.studio",[55,59,63,67,71],{"title":56,"path":57,"stem":58},"Rôles et partage","\u002Fdocs\u002Fstudio\u002Froles-et-partage","docs\u002F3.studio\u002F1.roles-et-partage",{"title":60,"path":61,"stem":62},"Versions et brouillon","\u002Fdocs\u002Fstudio\u002Fversions-et-brouillon","docs\u002F3.studio\u002F2.versions-et-brouillon",{"title":64,"path":65,"stem":66},"Organiser le catalogue","\u002Fdocs\u002Fstudio\u002Forganiser-le-catalogue","docs\u002F3.studio\u002F3.organiser-le-catalogue",{"title":68,"path":69,"stem":70},"Jetons d'accès","\u002Fdocs\u002Fstudio\u002Fjetons-d-acces","docs\u002F3.studio\u002F4.jetons-d-acces",{"title":72,"path":73,"stem":74},"Problèmes fréquents","\u002Fdocs\u002Fstudio\u002Fproblemes-frequents","docs\u002F3.studio\u002F5.problemes-frequents",{"title":76,"icon":77,"path":78,"stem":79,"children":80,"page":18},"Thèmes","i-lucide-palette","\u002Fdocs\u002Fthemes","docs\u002F4.themes",[81,85],{"title":82,"path":83,"stem":84},"Thème DSFR","\u002Fdocs\u002Fthemes\u002Ftheme-dsfr","docs\u002F4.themes\u002F1.theme-dsfr",{"title":86,"path":87,"stem":88},"Thème d'équipe","\u002Fdocs\u002Fthemes\u002Ftheme-de-votre-equipe","docs\u002F4.themes\u002F2.theme-de-votre-equipe",{"title":90,"icon":91,"path":92,"stem":93,"children":94,"page":18},"Référence","i-lucide-book-open","\u002Fdocs\u002Freference","docs\u002F5.reference",[95,99,103,107,111,115],{"title":96,"path":97,"stem":98},"Module de rendu","\u002Fdocs\u002Freference\u002Fnuxt","docs\u002F5.reference\u002F1.nuxt",{"title":100,"path":101,"stem":102},"Composants de schéma","\u002Fdocs\u002Freference\u002Fschemas","docs\u002F5.reference\u002F2.schemas",{"title":104,"path":105,"stem":106},"Composants Storybook","\u002Fdocs\u002Freference\u002Fstorybook","docs\u002F5.reference\u002F3.storybook",{"title":108,"path":109,"stem":110},"Système de thèmes","\u002Fdocs\u002Freference\u002Ftheme-system","docs\u002F5.reference\u002F4.theme-system",{"title":112,"path":113,"stem":114},"Kit de thèmes","\u002Fdocs\u002Freference\u002Ftheme-kit","docs\u002F5.reference\u002F5.theme-kit",{"title":82,"path":116,"stem":117},"\u002Fdocs\u002Freference\u002Ftheme-dsfr","docs\u002F5.reference\u002F6.theme-dsfr",{"id":119,"title":108,"body":120,"description":2104,"extension":2105,"meta":2106,"navigation":2107,"path":109,"seo":2108,"stem":110,"__hash__":2109},"docs\u002Fdocs\u002Freference\u002Ftheme-system\u002Ftheme-system.md",{"type":121,"value":122,"toc":2087},"minimark",[123,128,227,231,501,602,652,773,802,806,873,877,926,930,944,999,1006,1021,1058,1062,1081,1085,1092,1212,1232,1245,1249,1280,1334,1347,1374,1378,1424,1461,1465,1468,1595,1608,1702,1705,1800,1818,1822,1850,1854,1908,1932,1959,1963,1979,2049,2053,2083],[124,125,127],"h2",{"id":126},"layers","Layers",[129,130,131,167,203],"ul",{},[132,133,134,135,139,140,143,144,147,148,151,152,155,156,158,159,162,163,166],"li",{},"The engine, package ",[136,137,138],"code",{},"@vignettes\u002Ftheme-kit"," (",[136,141,142],{},"packages\u002Ftheme-kit\u002F","), holds the CSS every theme needs to work with the Vue components: the semantic token contract, Reveal patches, the MDC ",[136,145,146],{},"display: contents"," bridge, the media-layout grid, the ",[136,149,150],{},"slide-h1\u002Fh2\u002Fh3"," flex skeleton, quicklinks, and the ",[136,153,154],{},"layout"," scale preset. Every theme builds on this layer. Its Reveal patches display inline ",[136,157,136],{}," as an ",[136,160,161],{},"inline-block"," box, and the renderer puts the code and the punctuation next to it in a ",[136,164,165],{},"code-group"," span that the kit keeps on one line: the segment moves to the next line whole, with its punctuation, and breaks inside its box only when it is longer than the line.",[132,168,169,170,139,173,176,177,179,180,183,184,187,188,190,191,194,195,198,199,202],{},"The DSFR base, package ",[136,171,172],{},"@vignettes\u002Ftheme-dsfr",[136,174,175],{},"packages\u002Ftheme-dsfr\u002F","), is the French state design system as a brand-neutral theme: palette, Marianne typography, ",[136,178,154],{}," scale, light surfaces. A brand extends it, and so does the application's own ",[136,181,182],{},"dsfr"," theme. The build copies the Marianne font files from the ",[136,185,186],{},"@gouvfr\u002Fdsfr"," npm package. ",[136,189,172],{}," leaves the surface of each slide role to the theme that extends it. ",[136,192,193],{},"themes\u002Fdsfr\u002F"," paints flat surfaces from the DSFR palette on Reveal's background layer (see \"Slides by role\"): the title slide on ",[136,196,197],{},"blue-france-975",", section dividers on ",[136,200,201],{},"blue-france-sun-113"," with light text, content slides on white.",[132,204,205,206,208,209,212,213,216,217,219,220,208,223,226],{},"The application's themes (",[136,207,182],{},", ",[136,210,211],{},"minimal",") are in ",[136,214,215],{},"themes\u002F\u003Cname>\u002F",", and a tenant's brands in ",[136,218,215],{}," of the content space (",[136,221,222],{},"NUXT_CONTENT_DIR",[136,224,225],{},"presentations\u002F"," by default). A brand extends the DSFR base or the engine alone.",[124,228,230],{"id":229},"manifest","Manifest",[232,233,238],"pre",{"className":234,"code":235,"language":236,"meta":237,"style":237},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"name\": \"brand\",\n  \"extends\": \"dsfr\",\n  \"aliases\": [],\n  \"lang\": \"fr\",\n  \"parser\": \"separator\",\n  \"reveal\": { \"slideNumber\": true, \"width\": 1200, \"height\": 800 },\n  \"backgrounds\": {\n    \"h1\": \"assets\u002Fslide-contrast.png\",\n    \"h2\": \"assets\u002Fslide-contrast.png\",\n    \"h3\": \"assets\u002Fslide-subtle.png\"\n  }\n}\n","json","",[136,239,240,249,277,297,312,333,354,413,428,450,469,489,495],{"__ignoreMap":237},[241,242,245],"span",{"class":243,"line":244},"line",1,[241,246,248],{"class":247},"sMK4o","{\n",[241,250,252,255,259,262,265,268,272,274],{"class":243,"line":251},2,[241,253,254],{"class":247},"  \"",[241,256,258],{"class":257},"spNyl","name",[241,260,261],{"class":247},"\"",[241,263,264],{"class":247},":",[241,266,267],{"class":247}," \"",[241,269,271],{"class":270},"sfazB","brand",[241,273,261],{"class":247},[241,275,276],{"class":247},",\n",[241,278,280,282,285,287,289,291,293,295],{"class":243,"line":279},3,[241,281,254],{"class":247},[241,283,284],{"class":257},"extends",[241,286,261],{"class":247},[241,288,264],{"class":247},[241,290,267],{"class":247},[241,292,182],{"class":270},[241,294,261],{"class":247},[241,296,276],{"class":247},[241,298,300,302,305,307,309],{"class":243,"line":299},4,[241,301,254],{"class":247},[241,303,304],{"class":257},"aliases",[241,306,261],{"class":247},[241,308,264],{"class":247},[241,310,311],{"class":247}," [],\n",[241,313,315,317,320,322,324,326,329,331],{"class":243,"line":314},5,[241,316,254],{"class":247},[241,318,319],{"class":257},"lang",[241,321,261],{"class":247},[241,323,264],{"class":247},[241,325,267],{"class":247},[241,327,328],{"class":270},"fr",[241,330,261],{"class":247},[241,332,276],{"class":247},[241,334,336,338,341,343,345,347,350,352],{"class":243,"line":335},6,[241,337,254],{"class":247},[241,339,340],{"class":257},"parser",[241,342,261],{"class":247},[241,344,264],{"class":247},[241,346,267],{"class":247},[241,348,349],{"class":270},"separator",[241,351,261],{"class":247},[241,353,276],{"class":247},[241,355,357,359,362,364,366,369,371,375,377,379,382,384,387,389,391,395,398,400,403,405,407,410],{"class":243,"line":356},7,[241,358,254],{"class":247},[241,360,361],{"class":257},"reveal",[241,363,261],{"class":247},[241,365,264],{"class":247},[241,367,368],{"class":247}," {",[241,370,267],{"class":247},[241,372,374],{"class":373},"sBMFI","slideNumber",[241,376,261],{"class":247},[241,378,264],{"class":247},[241,380,381],{"class":247}," true,",[241,383,267],{"class":247},[241,385,386],{"class":373},"width",[241,388,261],{"class":247},[241,390,264],{"class":247},[241,392,394],{"class":393},"sbssI"," 1200",[241,396,397],{"class":247},",",[241,399,267],{"class":247},[241,401,402],{"class":373},"height",[241,404,261],{"class":247},[241,406,264],{"class":247},[241,408,409],{"class":393}," 800",[241,411,412],{"class":247}," },\n",[241,414,416,418,421,423,425],{"class":243,"line":415},8,[241,417,254],{"class":247},[241,419,420],{"class":257},"backgrounds",[241,422,261],{"class":247},[241,424,264],{"class":247},[241,426,427],{"class":247}," {\n",[241,429,431,434,437,439,441,443,446,448],{"class":243,"line":430},9,[241,432,433],{"class":247},"    \"",[241,435,436],{"class":373},"h1",[241,438,261],{"class":247},[241,440,264],{"class":247},[241,442,267],{"class":247},[241,444,445],{"class":270},"assets\u002Fslide-contrast.png",[241,447,261],{"class":247},[241,449,276],{"class":247},[241,451,453,455,457,459,461,463,465,467],{"class":243,"line":452},10,[241,454,433],{"class":247},[241,456,124],{"class":373},[241,458,261],{"class":247},[241,460,264],{"class":247},[241,462,267],{"class":247},[241,464,445],{"class":270},[241,466,261],{"class":247},[241,468,276],{"class":247},[241,470,472,474,477,479,481,483,486],{"class":243,"line":471},11,[241,473,433],{"class":247},[241,475,476],{"class":373},"h3",[241,478,261],{"class":247},[241,480,264],{"class":247},[241,482,267],{"class":247},[241,484,485],{"class":270},"assets\u002Fslide-subtle.png",[241,487,488],{"class":247},"\"\n",[241,490,492],{"class":243,"line":491},12,[241,493,494],{"class":247},"  }\n",[241,496,498],{"class":243,"line":497},13,[241,499,500],{"class":247},"}\n",[129,502,503,516,521,526,536,554,564,578,596],{},[132,504,505,507,508,511,512,515],{},[136,506,258],{}," equals the directory name. A deck names the theme with it in ",[136,509,510],{},"theme:",", and the stylesheet is ",[136,513,514],{},"\u002Fthemes\u002F\u003Cname>.css",".",[132,517,518,520],{},[136,519,284],{}," names the theme this one builds on; the build checks it.",[132,522,523,525],{},[136,524,304],{}," lists other frontmatter names that resolve to this theme. A tenant uses it to point a name already present in its decks to its brand. The build reports an alias that shadows another theme's name.",[132,527,528,208,530,532,533,535],{},[136,529,319],{},[136,531,340],{}," and ",[136,534,361],{}," are the deck defaults the theme carries: the language for orthotypography, the slide parser and the Reveal config.",[132,537,538,540,541,543,544,546,547,549,550,553],{},[136,539,420],{}," gives the background image of the title slide (",[136,542,436],{},"), the sections (",[136,545,124],{},"), the content slides (",[136,548,476],{},") and the others (",[136,551,552],{},"default","), as a path relative to the theme directory or an absolute URL.",[132,555,556,559,560,563],{},[136,557,558],{},"entry"," is the SCSS entry, ",[136,561,562],{},"\u003Cname>.scss"," by default.",[132,565,566,569,570,573,574,577],{},[136,567,568],{},"assets"," lists extra directories copied under ",[136,571,572],{},"public\u002Fthemes\u002F\u003Cname>\u002F",", as ",[136,575,576],{},"{ \"from\": \"node_modules\u002F...\", \"to\": \"fonts\", \"match\": \"regex\" }",", resolved from the project root.",[132,579,580,582,583,139,586,208,589,208,592,595],{},[136,581,136],{}," is the default code theme of the deck blocks: a name of ",[136,584,585],{},"CODE_THEMES",[136,587,588],{},"nuit",[136,590,591],{},"sombre",[136,593,594],{},"clair","), or its properties.",[132,597,598,601],{},[136,599,600],{},"preview"," describes how the catalog draws the card of a deck on this theme, without loading the theme's stylesheet.",[603,604,605,607,608,208,611,208,614,617,618,532,621,624,625,628,629,632,633,636,637,640,641,208,643,532,645,647,648,651],"p",{},[136,606,600],{}," takes ",[136,609,610],{},"fontFamily",[136,612,613],{},"titleColor",[136,615,616],{},"titleGradient"," (a gradient applied to the text of the title), ",[136,619,620],{},"textColor",[136,622,623],{},"surface",". Its ",[136,626,627],{},"fonts"," field names an SCSS entry declaring the font faces, compiled on its own to ",[136,630,631],{},"public\u002Fthemes\u002F\u003Cname>\u002Fpreview-fonts.css",", which the catalog loads; ",[136,634,635],{},"pkg:@vignettes\u002Ftheme-dsfr\u002Ffonts"," is the value the DSFR theme uses. ",[136,638,639],{},"levels"," overrides ",[136,642,613],{},[136,644,616],{},[136,646,620],{}," for a first slide of another role, and ",[136,649,650],{},"titleGradient: 'none'"," removes the gradient there.",[232,653,655],{"className":234,"code":654,"language":236,"meta":237,"style":237},"{\n  \"preview\": {\n    \"fontFamily\": \"Marianne, Arial, sans-serif\",\n    \"fonts\": \"pkg:@vignettes\u002Ftheme-dsfr\u002Ffonts\",\n    \"titleColor\": \"#000091\",\n    \"textColor\": \"#3a3a3a\",\n    \"surface\": \"#ffffff\"\n  }\n}\n",[136,656,657,661,673,692,710,729,748,765,769],{"__ignoreMap":237},[241,658,659],{"class":243,"line":244},[241,660,248],{"class":247},[241,662,663,665,667,669,671],{"class":243,"line":251},[241,664,254],{"class":247},[241,666,600],{"class":257},[241,668,261],{"class":247},[241,670,264],{"class":247},[241,672,427],{"class":247},[241,674,675,677,679,681,683,685,688,690],{"class":243,"line":279},[241,676,433],{"class":247},[241,678,610],{"class":373},[241,680,261],{"class":247},[241,682,264],{"class":247},[241,684,267],{"class":247},[241,686,687],{"class":270},"Marianne, Arial, sans-serif",[241,689,261],{"class":247},[241,691,276],{"class":247},[241,693,694,696,698,700,702,704,706,708],{"class":243,"line":299},[241,695,433],{"class":247},[241,697,627],{"class":373},[241,699,261],{"class":247},[241,701,264],{"class":247},[241,703,267],{"class":247},[241,705,635],{"class":270},[241,707,261],{"class":247},[241,709,276],{"class":247},[241,711,712,714,716,718,720,722,725,727],{"class":243,"line":314},[241,713,433],{"class":247},[241,715,613],{"class":373},[241,717,261],{"class":247},[241,719,264],{"class":247},[241,721,267],{"class":247},[241,723,724],{"class":270},"#000091",[241,726,261],{"class":247},[241,728,276],{"class":247},[241,730,731,733,735,737,739,741,744,746],{"class":243,"line":335},[241,732,433],{"class":247},[241,734,620],{"class":373},[241,736,261],{"class":247},[241,738,264],{"class":247},[241,740,267],{"class":247},[241,742,743],{"class":270},"#3a3a3a",[241,745,261],{"class":247},[241,747,276],{"class":247},[241,749,750,752,754,756,758,760,763],{"class":243,"line":356},[241,751,433],{"class":247},[241,753,623],{"class":373},[241,755,261],{"class":247},[241,757,264],{"class":247},[241,759,267],{"class":247},[241,761,762],{"class":270},"#ffffff",[241,764,488],{"class":247},[241,766,767],{"class":243,"line":415},[241,768,494],{"class":247},[241,770,771],{"class":243,"line":430},[241,772,500],{"class":247},[603,774,775,778,779,782,783,139,786,208,789,208,792,208,795,798,799,801],{},[136,776,777],{},"packages\u002Fcore\u002Fsrc\u002Ftheme\u002Ftokens.generated.ts"," is generated from the manifests of the application's themes by ",[136,780,781],{},"scripts\u002Fbuild-theme-tokens.ts"," and committed; it seeds the runtime registry in ",[136,784,785],{},"packages\u002Fcore\u002Fsrc\u002Ftheme\u002Ftokens.ts",[136,787,788],{},"knownThemes",[136,790,791],{},"resolveThemeName",[136,793,794],{},"isKnownTheme",[136,796,797],{},"getThemeTokens","). Frontmatter accepts canonical names and aliases; ",[136,800,791],{}," maps a name to the theme whose CSS is loaded.",[124,803,805],{"id":804},"tenant-themes-at-runtime","Tenant themes at runtime",[603,807,808,809,812,813,208,816,819,820,823,824,827,828,831,832,819,835,838,839,842,843,846,847,850,851,854,855,858,859,862,863,139,866,869,870,515],{},"Themes of the content space reach a deployment through the bucket. ",[136,810,811],{},"mise run theme:push -- \u003Cname>[,\u003Cname>] --apply"," compiles them locally and uploads ",[136,814,815],{},"themes\u002F\u003Cname>.css",[136,817,818],{},"themes\u002F\u003Cname>\u002Fassets\u002F",", and ",[136,821,822],{},"themes\u002F\u003Cname>\u002Ftokens.json"," to the bucket, then rebuilds ",[136,825,826],{},"themes\u002Findex.json"," from every published theme. An instance that shares the bucket with another one reads its themes under a folder of its own: ",[136,829,830],{},"NUXT_FROZEN_S3_THEMES_PREFIX=staging"," gives ",[136,833,834],{},"staging\u002Fthemes\u002F…",[136,836,837],{},"theme:push --staging"," publishes there with the secrets of the Infisical environment ",[136,840,841],{},"staging",". On a deployment, ",[136,844,845],{},"server\u002Futils\u002Fthemes.ts"," reads that index (cached for a minute; ",[136,848,849],{},"POST \u002Fapi\u002Fadmin\u002Fthemes\u002Freload"," forces it), merges it with the themes found on disk in the content space (development), and applies the result with ",[136,852,853],{},"setThemeRegistry",". The ",[136,856,857],{},"theme-registry"," server middleware hands the registry to page requests and the universal plugin ",[136,860,861],{},"src\u002Fplugins\u002Ftheme-registry.ts"," seeds the client with it, so both sides resolve names, aliases and backgrounds identically. ",[136,864,865],{},"\u002Fthemes\u002F**",[136,867,868],{},"server\u002Froutes\u002Fthemes\u002F[...path].ts",") streams the files from the bucket for names that have no static file under ",[136,871,872],{},"public\u002Fthemes\u002F",[476,874,876],{"id":875},"the-theme-packages-a-theme-was-compiled-with","The theme packages a theme was compiled with",[603,878,879,880,532,882,884,885,888,889,891,892,895,896,899,900,903,904,907,908,911,912,915,916,918,919,921,922,925],{},"A published theme holds the CSS of ",[136,881,138],{},[136,883,172],{}," that the machine running ",[136,886,887],{},"theme:push"," had installed. ",[136,890,887],{}," writes their versions in ",[136,893,894],{},"tokens.json"," and in the index, under ",[136,897,898],{},"compiledWith",": the ",[136,901,902],{},"version"," of each package, then the start of a hash of its stylesheets (",[136,905,906],{},"0.1.0+6a73b97e14","), which changes with any change to a stylesheet. The build of an instance computes the same versions (",[136,909,910],{},"themePackageVersions"," of ",[136,913,914],{},"packages\u002Fnuxt\u002Fsrc\u002Fbuild\u002Ftheme-build.ts","). When the two differ, or when a theme has no ",[136,917,898],{},", the server writes the theme and the two versions in its log as it loads the themes, and ",[136,920,849],{}," returns them under ",[136,923,924],{},"gaps",". Publishing the theme again from a checkout of the branch the instance runs clears the gap.",[476,927,929],{"id":928},"testing-a-change-of-the-theme-packages","Testing a change of the theme packages",[603,931,932,933,936,937,940,941,943],{},"A pull request that changes ",[136,934,935],{},"packages\u002Ftheme-kit"," or ",[136,938,939],{},"packages\u002Ftheme-dsfr"," changes the CSS of the published themes once they are compiled again. To test it on staging, push the branch to ",[136,942,841],{},", then publish the themes the test decks use from that branch:",[232,945,949],{"className":946,"code":947,"language":948,"meta":237,"style":237},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","mise run theme:push -- \u003Cname>[,\u003Cname>] --staging --apply\n","sh",[136,950,951],{"__ignoreMap":237},[241,952,953,956,959,962,965,968,971,975,978,981,984,986,988,990,993,996],{"class":243,"line":244},[241,954,955],{"class":373},"mise",[241,957,958],{"class":270}," run",[241,960,961],{"class":270}," theme:push",[241,963,964],{"class":270}," --",[241,966,967],{"class":247}," \u003C",[241,969,970],{"class":270},"nam",[241,972,974],{"class":973},"sTEyZ","e",[241,976,977],{"class":247},">",[241,979,980],{"class":270},"[,",[241,982,983],{"class":247},"\u003C",[241,985,970],{"class":270},[241,987,974],{"class":973},[241,989,977],{"class":247},[241,991,992],{"class":270},"]",[241,994,995],{"class":270}," --staging",[241,997,998],{"class":270}," --apply\n",[603,1000,1001,1002,1005],{},"Staging serves the themes published under its prefix: a deck whose theme was published without ",[136,1003,1004],{},"--staging"," renders there without its stylesheet.",[603,1007,1008,1009,1011,1012,1015,1016,1018,1019,264],{},"Production keeps serving the themes published without ",[136,1010,1004],{},". After the merge into ",[136,1013,1014],{},"main"," and the deployment of production, publish the same themes from ",[136,1017,1014],{}," without ",[136,1020,1004],{},[232,1022,1024],{"className":946,"code":1023,"language":948,"meta":237,"style":237},"mise run theme:push -- \u003Cname>[,\u003Cname>] --apply\n",[136,1025,1026],{"__ignoreMap":237},[241,1027,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056],{"class":243,"line":244},[241,1029,955],{"class":373},[241,1031,958],{"class":270},[241,1033,961],{"class":270},[241,1035,964],{"class":270},[241,1037,967],{"class":247},[241,1039,970],{"class":270},[241,1041,974],{"class":973},[241,1043,977],{"class":247},[241,1045,980],{"class":270},[241,1047,983],{"class":247},[241,1049,970],{"class":270},[241,1051,974],{"class":973},[241,1053,977],{"class":247},[241,1055,992],{"class":270},[241,1057,998],{"class":270},[124,1059,1061],{"id":1060},"renaming-a-theme-in-a-deployed-instance","Renaming a theme in a deployed instance",[603,1063,1064,1065,1068,1069,1072,1073,1076,1077,1080],{},"A deck's theme is written in the frontmatter of each of its published versions, of its draft and of its snapshots, and in the ",[136,1066,1067],{},"theme"," column the catalog reads. ",[136,1070,1071],{},"mise run theme:rename -- \u003Cfrom> \u003Cto>"," rewrites all of them in one instance, through the app container, listing the decks it would touch before ",[136,1074,1075],{},"--apply"," writes anything. ",[136,1078,1079],{},"scripts\u002Flib\u002Ftheme-rename.ts"," defines what a theme declaration looks like.",[124,1082,1084],{"id":1083},"the-semantic-token-contract","The semantic token contract",[603,1086,1087,1088,1091],{},"Code that works under any theme (the engine layer, MDC components such as ",[136,1089,1090],{},"Highlight.vue",") reads these custom properties only, and each theme sets them:",[129,1093,1094,1100,1106,1112,1125,1133,1139,1145,1153,1167,1179,1196],{},[132,1095,1096,1099],{},[136,1097,1098],{},"--accent"," is the primary color, for links, dividers and accents.",[132,1101,1102,1105],{},[136,1103,1104],{},"--accent-soft"," is a lighter accent, for hover tints.",[132,1107,1108,1111],{},[136,1109,1110],{},"--accent-bg"," is a very light tint, for callout backgrounds.",[132,1113,1114,1117,1118,936,1120,1122,1123,563],{},[136,1115,1116],{},"--accent-strong"," is the accent mixed with the title color, for text on ",[136,1119,1104],{},[136,1121,1110],{},", derived from ",[136,1124,1098],{},[132,1126,1127,1130,1131,563],{},[136,1128,1129],{},"--accent-line"," is the accent mixed with the surface, for the outlines of a diagram: the cards, the subject regions and the edge labels, derived from ",[136,1132,1098],{},[132,1134,1135,1138],{},[136,1136,1137],{},"--surface"," is the page background.",[132,1140,1141,1144],{},[136,1142,1143],{},"--surface-contrast"," is the inverse surface, for dark blocks and code panels.",[132,1146,1147,1150,1151,515],{},[136,1148,1149],{},"--on-contrast"," is the text color on ",[136,1152,1143],{},[132,1154,1155,1158,1159,1162,1163,1166],{},[136,1156,1157],{},"--text-default"," colors the body text, ",[136,1160,1161],{},"--text-title"," the headings and strong text, ",[136,1164,1165],{},"--text-mention"," the muted text (small print, captions).",[132,1168,1169,208,1172,532,1175,1178],{},[136,1170,1171],{},"--border",[136,1173,1174],{},"--radius",[136,1176,1177],{},"--shadow"," give the outline, the corners and the elevation of a box drawn by a component.",[132,1180,1181,1184,1185,1188,1189,1192,1193,1195],{},[136,1182,1183],{},"--text-step-1"," to ",[136,1186,1187],{},"--text-step-4"," are the type scale above the body text, in ",[136,1190,1191],{},"em"," of the text around: the headings inside the body and the sizes of ",[136,1194,1090],{}," read them.",[132,1197,1198,208,1201,532,1204,1207,1208,1211],{},[136,1199,1200],{},"--flow-space",[136,1202,1203],{},"--block-space",[136,1205,1206],{},"--heading-space-before"," are the vertical rhythm of the body of a content slide: the space inside a group of text (between a heading and its paragraph, two paragraphs, a paragraph and its list, two list items), above and below a block other than text, and above a heading of the body. ",[136,1209,1210],{},"--measure"," is the maximum line length of a paragraph or a list of that body.",[603,1213,1214,1217,1218,1221,1222,208,1225,532,1228,1231],{},[136,1215,1216],{},"packages\u002Ftheme-kit\u002F_semantic-tokens.scss"," gives each token a default value, which applies when a theme omits it. ",[136,1219,1220],{},"packages\u002Ftheme-kit\u002F_palette.scss"," defines the tints of the diagram cards, ",[136,1223,1224],{},"--palette-\u003Cname>-bg",[136,1226,1227],{},"-main",[136,1229,1230],{},"-text",", under eight generic names a theme redefines.",[603,1233,1234,1235,208,1238,532,1241,1244],{},"The kit derives three more tokens from the text intensities, at the root of the page: ",[136,1236,1237],{},"--on-surface-title",[136,1239,1240],{},"--on-surface-default",[136,1242,1243],{},"--on-surface-mention",". A component that paints its own surface, such as a diagram card or a story frame, sets the text of that surface from them. A slide that changes its text colors, such as a dark section divider, leaves that surface with its dark text.",[124,1246,1248],{"id":1247},"the-code-theme-of-a-deck","The code theme of a deck",[603,1250,1251,1252,1255,1256,1259,1260,1263,1264,1267,1268,1271,1272,1275,1276,1279],{},"A deck sets the colors of its code blocks in its frontmatter (",[136,1253,1254],{},"code: sombre",", or ",[136,1257,1258],{},"code: { theme: sombre, string: '#FFD700' }","). ",[136,1261,1262],{},"RevealPresentation"," turns that value into ",[136,1265,1266],{},"--code-*"," custom properties on the deck root and adds the class ",[136,1269,1270],{},"reveal--code-theme",". ",[136,1273,1274],{},"packages\u002Fnuxt\u002Fsrc\u002Fruntime\u002Fassets\u002Fcode-theme.css",", which ships with the renderer, colors each token from these properties under any theme. A role the code theme omits keeps the color of the highlight theme (",[136,1277,1278],{},"mdc.highlight.theme",").",[603,1281,1282,1283,1286,1287,1289,1290,1271,1293,1295,1296,1298,1299,1302,1303,1305,1306,1308,1309,1311,1312,1314,1315,936,1317,1319,1320,1323,1324,1327,1328,1330,1331,1333],{},"A deck without a code theme takes the one its theme names in its manifest (",[136,1284,1285],{},"\"code\": \"clair\"","). The three code themes read the tokens of the theme kit. ",[136,1288,588],{}," sets the colors of github-dark on ",[136,1291,1292],{},"--code-surface-dark",[136,1294,591],{}," keeps its own dark palette. ",[136,1297,594],{}," sets a block of ",[136,1300,1301],{},"--code-surface"," with the text intensities, ",[136,1304,1116],{}," for the keys and the ",[136,1307,1230],{}," tones of the card palette for the strings, the literals and the functions. ",[136,1310,594],{}," suits a light theme: under the kit defaults and under ",[136,1313,182],{},", each of its tones reaches a contrast of 4.5:1 or more against the block, and the author of a theme that changes these tokens checks that contrast. The author of a dark theme names ",[136,1316,588],{},[136,1318,591],{}," in its manifest. The current zone of a ",[136,1321,1322],{},"JsonTour"," is marked with ",[136,1325,1326],{},"--accent-on-contrast"," on a dark block, ",[136,1329,1116],{}," on ",[136,1332,594],{},". When the theme names none, the deck carries neither the class nor the properties and its tokens keep the colors of the highlight theme.",[603,1335,1336,1338,1339,1342,1343,1346],{},[136,1337,1262],{}," adds ",[136,1340,1341],{},"reveal--code-block"," when the frontmatter of the deck names a ",[136,1344,1345],{},"background",", and the renderer then draws the block. With a code theme named in a manifest, the theme's stylesheet draws the block.",[603,1348,1349,1350,1353,1354,1357,1358,1361,1362,1365,1366,532,1368,1370,1371,515],{},"A theme reads ",[136,1351,1352],{},"--code-size"," as a minimum for its own size, and ",[136,1355,1356],{},"--code-min-size",", in slide units, as the smallest size of a code block (",[136,1359,1360],{},"0px"," in the kit; ",[136,1363,1364],{},"15px"," in ",[136,1367,182],{},[136,1369,211],{},", where a block in a narrow column stays readable): ",[136,1372,1373],{},"font-size: max(var(--code-size, 0px), 0.7em, var(--code-min-size))",[124,1375,1377],{"id":1376},"compilation","Compilation",[232,1379,1383],{"className":1380,"code":1381,"language":1382,"meta":237,"style":237},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm build:themes                       # tokens, then every theme\npnpm build:theme brand                  # one theme\nnode scripts\u002Fbuild-themes.ts --watch    # recompile on change\n","bash",[136,1384,1385,1397,1410],{"__ignoreMap":237},[241,1386,1387,1390,1393],{"class":243,"line":244},[241,1388,1389],{"class":373},"pnpm",[241,1391,1392],{"class":270}," build:themes",[241,1394,1396],{"class":1395},"sHwdD","                       # tokens, then every theme\n",[241,1398,1399,1401,1404,1407],{"class":243,"line":251},[241,1400,1389],{"class":373},[241,1402,1403],{"class":270}," build:theme",[241,1405,1406],{"class":270}," brand",[241,1408,1409],{"class":1395},"                  # one theme\n",[241,1411,1412,1415,1418,1421],{"class":243,"line":279},[241,1413,1414],{"class":373},"node",[241,1416,1417],{"class":270}," scripts\u002Fbuild-themes.ts",[241,1419,1420],{"class":270}," --watch",[241,1422,1423],{"class":1395},"    # recompile on change\n",[603,1425,1426,1429,1430,1432,1433,1436,1437,1440,1441,1444,1445,1448,1449,1452,1453,1456,1457,1460],{},[136,1427,1428],{},"packages\u002Fnuxt\u002Fsrc\u002Fbuild\u002Ftheme-registry.ts"," discovers the themes; ",[136,1431,914],{}," compiles one theme with sass and its ",[136,1434,1435],{},"NodePackageImporter",", so ",[136,1438,1439],{},"@use 'pkg:@vignettes\u002Ftheme-kit'"," resolves from the application's ",[136,1442,1443],{},"node_modules"," wherever the theme directory is. ",[136,1446,1447],{},"packages\u002Fnuxt\u002Fsrc\u002Fbuild\u002Ftheme-watcher.js"," watches theme directories and ",[136,1450,1451],{},"packages\u002F"," during ",[136,1454,1455],{},"nuxt dev"," and reloads the page after a recompile. ",[136,1458,1459],{},"server\u002Fplugins\u002Ftheme-consistency.ts"," warns at boot when a theme directory, its compiled CSS and the generated tokens disagree.",[124,1462,1464],{"id":1463},"writing-a-theme","Writing a theme",[603,1466,1467],{},"A brand on the DSFR base:",[232,1469,1473],{"className":1470,"code":1471,"language":1472,"meta":237,"style":237},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F presentations\u002Fthemes\u002Fmybrand\u002Fmybrand.scss\n@use 'pkg:@vignettes\u002Ftheme-dsfr\u002Fvariables' as *;\n@use 'pkg:@vignettes\u002Ftheme-dsfr';\n\n.reveal h1 { color: #0000cc; }\n.reveal section.slide-h2 h2 { color: var(--dsfr-grey-950) !important; }\n","scss",[136,1474,1475,1480,1504,1517,1523,1552],{"__ignoreMap":237},[241,1476,1477],{"class":243,"line":244},[241,1478,1479],{"class":1395},"\u002F\u002F presentations\u002Fthemes\u002Fmybrand\u002Fmybrand.scss\n",[241,1481,1482,1486,1489,1492,1495,1498,1501],{"class":243,"line":251},[241,1483,1485],{"class":1484},"s7zQu","@use",[241,1487,1488],{"class":247}," '",[241,1490,1491],{"class":270},"pkg:@vignettes\u002Ftheme-dsfr\u002Fvariables",[241,1493,1494],{"class":247},"'",[241,1496,1497],{"class":1484}," as",[241,1499,1500],{"class":973}," *",[241,1502,1503],{"class":247},";\n",[241,1505,1506,1508,1510,1513,1515],{"class":243,"line":279},[241,1507,1485],{"class":1484},[241,1509,1488],{"class":247},[241,1511,1512],{"class":270},"pkg:@vignettes\u002Ftheme-dsfr",[241,1514,1494],{"class":247},[241,1516,1503],{"class":247},[241,1518,1519],{"class":243,"line":299},[241,1520,1522],{"emptyLinePlaceholder":1521},true,"\n",[241,1524,1525,1527,1529,1532,1534,1538,1540,1543,1546,1549],{"class":243,"line":314},[241,1526,515],{"class":247},[241,1528,361],{"class":373},[241,1530,1531],{"class":373}," h1",[241,1533,368],{"class":247},[241,1535,1537],{"class":1536},"sqsOY"," color",[241,1539,264],{"class":247},[241,1541,1542],{"class":247}," #",[241,1544,1545],{"class":973},"0000cc",[241,1547,1548],{"class":247},";",[241,1550,1551],{"class":247}," }\n",[241,1553,1554,1556,1558,1561,1563,1566,1569,1571,1573,1575,1579,1582,1585,1588,1591,1593],{"class":243,"line":335},[241,1555,515],{"class":247},[241,1557,361],{"class":373},[241,1559,1560],{"class":373}," section",[241,1562,515],{"class":247},[241,1564,1565],{"class":373},"slide-h2",[241,1567,1568],{"class":373}," h2",[241,1570,368],{"class":247},[241,1572,1537],{"class":1536},[241,1574,264],{"class":247},[241,1576,1578],{"class":1577},"s2Zo4"," var",[241,1580,1581],{"class":247},"(",[241,1583,1584],{"class":973},"--dsfr-grey-950",[241,1586,1587],{"class":247},")",[241,1589,1590],{"class":393}," !important",[241,1592,1548],{"class":247},[241,1594,1551],{"class":247},[603,1596,1597,1598,532,1601,1604,1605,1607],{},"A theme made of the tokens, with the base skin of the kit and the DSFR sizes (",[136,1599,1600],{},"examples\u002Fthemes\u002Fexemple-sombre",[136,1602,1603],{},"exemple-marque"," are complete examples; ",[136,1606,1603],{}," also paints its section slides):",[232,1609,1611],{"className":1470,"code":1610,"language":1472,"meta":237,"style":237},"@use 'pkg:@vignettes\u002Ftheme-kit';\n@use 'pkg:@vignettes\u002Ftheme-kit\u002Fbase';\n@use 'pkg:@vignettes\u002Ftheme-kit\u002Fpresets\u002Flayout';\n\n:root {\n  --accent: #c2410c;\n  --surface: #fffdf9;\n  \u002F\u002F the ten other tokens of the contract\n}\n",[136,1612,1613,1626,1639,1652,1656,1665,1679,1693,1698],{"__ignoreMap":237},[241,1614,1615,1617,1619,1622,1624],{"class":243,"line":244},[241,1616,1485],{"class":1484},[241,1618,1488],{"class":247},[241,1620,1621],{"class":270},"pkg:@vignettes\u002Ftheme-kit",[241,1623,1494],{"class":247},[241,1625,1503],{"class":247},[241,1627,1628,1630,1632,1635,1637],{"class":243,"line":251},[241,1629,1485],{"class":1484},[241,1631,1488],{"class":247},[241,1633,1634],{"class":270},"pkg:@vignettes\u002Ftheme-kit\u002Fbase",[241,1636,1494],{"class":247},[241,1638,1503],{"class":247},[241,1640,1641,1643,1645,1648,1650],{"class":243,"line":279},[241,1642,1485],{"class":1484},[241,1644,1488],{"class":247},[241,1646,1647],{"class":270},"pkg:@vignettes\u002Ftheme-kit\u002Fpresets\u002Flayout",[241,1649,1494],{"class":247},[241,1651,1503],{"class":247},[241,1653,1654],{"class":243,"line":299},[241,1655,1522],{"emptyLinePlaceholder":1521},[241,1657,1658,1660,1663],{"class":243,"line":314},[241,1659,264],{"class":247},[241,1661,1662],{"class":257},"root",[241,1664,427],{"class":247},[241,1666,1667,1670,1672,1674,1677],{"class":243,"line":335},[241,1668,1669],{"class":973},"  --accent",[241,1671,264],{"class":247},[241,1673,1542],{"class":247},[241,1675,1676],{"class":973},"c2410c",[241,1678,1503],{"class":247},[241,1680,1681,1684,1686,1688,1691],{"class":243,"line":356},[241,1682,1683],{"class":973},"  --surface",[241,1685,264],{"class":247},[241,1687,1542],{"class":247},[241,1689,1690],{"class":973},"fffdf9",[241,1692,1503],{"class":247},[241,1694,1695],{"class":243,"line":415},[241,1696,1697],{"class":1395},"  \u002F\u002F the ten other tokens of the contract\n",[241,1699,1700],{"class":243,"line":430},[241,1701,500],{"class":247},[603,1703,1704],{},"A theme on the engine alone, with its own scale:",[232,1706,1708],{"className":1470,"code":1707,"language":1472,"meta":237,"style":237},"\u002F\u002F themes\u002Fmytheme\u002Fmytheme.scss\n@use 'pkg:@vignettes\u002Ftheme-kit';\n\n:root {\n  --accent: #e63946;\n  --surface: #ffffff;\n  \u002F\u002F the rest of the contract\n}\n\n.reveal h1 { font-size: 3em; }\n",[136,1709,1710,1715,1727,1731,1739,1752,1765,1770,1774,1778],{"__ignoreMap":237},[241,1711,1712],{"class":243,"line":244},[241,1713,1714],{"class":1395},"\u002F\u002F themes\u002Fmytheme\u002Fmytheme.scss\n",[241,1716,1717,1719,1721,1723,1725],{"class":243,"line":251},[241,1718,1485],{"class":1484},[241,1720,1488],{"class":247},[241,1722,1621],{"class":270},[241,1724,1494],{"class":247},[241,1726,1503],{"class":247},[241,1728,1729],{"class":243,"line":279},[241,1730,1522],{"emptyLinePlaceholder":1521},[241,1732,1733,1735,1737],{"class":243,"line":299},[241,1734,264],{"class":247},[241,1736,1662],{"class":257},[241,1738,427],{"class":247},[241,1740,1741,1743,1745,1747,1750],{"class":243,"line":314},[241,1742,1669],{"class":973},[241,1744,264],{"class":247},[241,1746,1542],{"class":247},[241,1748,1749],{"class":973},"e63946",[241,1751,1503],{"class":247},[241,1753,1754,1756,1758,1760,1763],{"class":243,"line":335},[241,1755,1683],{"class":973},[241,1757,264],{"class":247},[241,1759,1542],{"class":247},[241,1761,1762],{"class":973},"ffffff",[241,1764,1503],{"class":247},[241,1766,1767],{"class":243,"line":356},[241,1768,1769],{"class":1395},"  \u002F\u002F the rest of the contract\n",[241,1771,1772],{"class":243,"line":415},[241,1773,500],{"class":247},[241,1775,1776],{"class":243,"line":430},[241,1777,1522],{"emptyLinePlaceholder":1521},[241,1779,1780,1782,1784,1786,1788,1791,1793,1796,1798],{"class":243,"line":452},[241,1781,515],{"class":247},[241,1783,361],{"class":373},[241,1785,1531],{"class":373},[241,1787,368],{"class":247},[241,1789,1790],{"class":1536}," font-size",[241,1792,264],{"class":247},[241,1794,1795],{"class":393}," 3em",[241,1797,1548],{"class":247},[241,1799,1551],{"class":247},[603,1801,1802,1803,1806,1807,1810,1811,1814,1815,1817],{},"Add ",[136,1804,1805],{},"theme.json",", run ",[136,1808,1809],{},"pnpm build:themes",", and use ",[136,1812,1813],{},"theme: mytheme"," in a deck. ",[136,1816,1647],{}," gives a theme the DSFR sizes without its colors.",[124,1819,1821],{"id":1820},"the-fallback-theme","The fallback theme",[603,1823,1824,1825,1827,1828,1831,1832,1834,1835,1838,1839,1842,1843,1845,1846,1849],{},"A deck whose frontmatter declares no ",[136,1826,510],{}," renders in the fallback theme of the instance. The create form preselects that theme and a catalog card previews such a deck with it. ",[136,1829,1830],{},"runtimeConfig.public.defaultTheme"," names it (",[136,1833,182],{}," in this application) and ",[136,1836,1837],{},"NUXT_PUBLIC_DEFAULT_THEME"," overrides it at run time. Without a host setting, ",[136,1840,1841],{},"@vignettes\u002Fnuxt"," falls back to ",[136,1844,211],{},". When that name matches no registered theme, the server ignores it and writes a ",[136,1847,1848],{},"[themes]"," warning at boot that names the theme applied.",[124,1851,1853],{"id":1852},"slides-by-role","Slides by role",[603,1855,1856,1857,1860,1861,911,1864,1867,1868,1871,1872,1874,1875,1878,1879,1882,1883,139,1886,911,1889,1892,1893,1895,1896,1898,1899,532,1901,1903,1904,1907],{},"The engine tags each ",[136,1858,1859],{},"\u003Csection>"," with the class of its role, which ",[136,1862,1863],{},"surfaceLevel",[136,1865,1866],{},"packages\u002Fcore\u002Fsrc\u002Fdeck\u002Fmodel.ts"," gives: ",[136,1869,1870],{},"slide-h1"," for the title slide, ",[136,1873,1565],{}," for a section divider, ",[136,1876,1877],{},"slide-h3"," for a content slide. A section divider is a ",[136,1880,1881],{},"##"," slide made of its heading and at most one paragraph of 140 characters or fewer, besides its speaker notes and its annotations other than ",[136,1884,1885],{},":layout",[136,1887,1888],{},"isSectionSlide",[136,1890,1891],{},"packages\u002Fcore\u002Fsrc\u002Fdeck\u002Fsplit.ts","). A ",[136,1894,1881],{}," slide with more content is a content slide and carries ",[136,1897,1877],{},"; the manifest's ",[136,1900,124],{},[136,1902,476],{}," backgrounds follow the same roles. The flex skeleton comes from ",[136,1905,1906],{},"packages\u002Ftheme-kit\u002F_slide-structure.scss","; themes set sizes and colors, and backgrounds come from the manifest.",[603,1909,1910,1911,936,1914,1917,1918,1921,1922,1924,1925,1928,1929,1931],{},"A section that holds vertical slides is wrapped in Reveal's stack. That wrapper carries ",[136,1912,1913],{},"stack-h1",[136,1915,1916],{},"stack-h2"," and no ",[136,1919,1920],{},"slide-"," class, and the section's own content is the first of its vertical slides, with its own ",[136,1923,1920],{}," class. So a rule written as ",[136,1926,1927],{},".reveal section.slide-h2 h3"," styles the divider alone and cannot reach the slides nested under it. Target ",[136,1930,1916],{}," to style the wrapper itself.",[603,1933,1934,1935,1938,1939,1942,1943,1946,1947,1950,1951,1954,1955,1958],{},"A flat color surface goes on Reveal's background layer: Reveal creates one ",[136,1936,1937],{},".slide-background"," per slide under ",[136,1940,1941],{},".reveal .backgrounds",", copies the slide's classes onto it, and fills the screen with it whatever the aspect ratio. A rule such as ",[136,1944,1945],{},".reveal .slide-background.slide-h2 { background-color: … }"," colors the divider edge to edge, and Reveal reads that computed color to mark the slide and the deck ",[136,1948,1949],{},"has-dark-background",", which switches its controls to light on its own. Painting the section itself leaves the viewport color visible around the slide on screens of another ratio. The rule leaves out the parent of the layer: the print view moves the layer into the ",[136,1952,1953],{},".pdf-page"," of its slide, and the scroll view, under 435 pixels wide, into the ",[136,1956,1957],{},".scroll-page-content"," of its slide.",[124,1960,1962],{"id":1961},"checking-a-theme","Checking a theme",[603,1964,1965,1968,1969,1972,1973,1975,1976,1978],{},[136,1966,1967],{},"examples\u002Fcontrole-du-theme.md"," is a deck that holds each slide role and each element a theme colors: the title slide, a section, a short and a long content slide, inline code, a list, a table, a quote, a code block, columns, a media on the right, a media taking two thirds of the width on the left, a media at the bottom, an image behind the text on a card, an image behind the text under a veil, a Mermaid diagram, a ",[136,1970,1971],{},"Diagram"," with a colored region and colored nodes, and a ",[136,1974,1881],{}," slide with content. Write the name of the theme under check in its ",[136,1977,510],{},", import it in a local studio, and read every slide, the vertical ones included:",[129,1980,1981,1984,2022,2025,2046],{},[132,1982,1983],{},"Sizes: 1280 × 720 and 1920 × 1080, then 390 pixels wide. Under 435 pixels, reveal.js switches to its scroll view: the slides follow one another, each scaled to the width of the screen, so the body text measures a few pixels whatever the theme. Each section keeps its surface edge to edge.",[132,1985,1986,1987,208,1989,532,1991,1330,1993,1995,1996,1330,1998,2000,2001,2003,2004,1330,2006,2008,2009,1330,2012,2014,2015,1995,2017,1330,2019,2021],{},"Contrast: 4.5:1 or more between a text and its surface, 3:1 for a text of 24 pixels or more, or of 18.5 pixels or more in bold (RGAA, criterion 3.2). The pairs are ",[136,1988,1161],{},[136,1990,1157],{},[136,1992,1165],{},[136,1994,1137],{},"; ",[136,1997,1098],{},[136,1999,1137],{}," for the links and on ",[136,2002,1110],{}," for the inline code of the base skin; ",[136,2005,1116],{},[136,2007,1104],{}," for an emphasized diagram node; each ",[136,2010,2011],{},"--palette-\u003Cname>-text",[136,2013,1137],{}," and on its ",[136,2016,1224],{},[136,2018,1149],{},[136,2020,1143],{},"; the title, the text and the links of a section on its surface.",[132,2023,2024],{},"Inline code: an inline box with a padding and a background. At the end of a line, the browser can break a segment at a space it holds: the background stops at the end of the line and starts again on the next one without its padding. Read the three long segments of the long content slide at each width.",[132,2026,2027,2028,2030,2031,2033,2034,2036,2037,2039,2040,2042,2043,2045],{},"Diagrams: Mermaid fills its boxes with ",[136,2029,1110],{},", outlines them with ",[136,2032,1098],{}," and writes their labels in ",[136,2035,1237],{},"; its lines take the ",[136,2038,1165],{}," of the slide, its free text the ",[136,2041,1157],{}," of the slide, and it measures its labels with the font of the slide. The last slide has a ",[136,2044,1881],{}," heading and a diagram: it takes the surface of a content slide. The renderer scales a diagram down to the width of its column, and its height follows: a wide font scales a wide diagram down further, and a tall diagram can reach the navigation arrows.",[132,2047,2048],{},"The PDF export prints the section surfaces.",[124,2050,2052],{"id":2051},"troubleshooting","Troubleshooting",[129,2054,2055,2064,2069,2075],{},[132,2056,2057,2058,2061,2062,515],{},"Stylesheet 404: ",[136,2059,2060],{},"public\u002Fthemes\u002F\u003Cname>.css"," is missing; run ",[136,2063,1809],{},[132,2065,2066,2067,515],{},"A deck reports an unknown theme: the name is neither a directory with a manifest nor an alias; check ",[136,2068,777],{},[132,2070,2071,2072,2074],{},"Changes in a package do not show: the watcher recompiles every theme on a ",[136,2073,1451],{}," change; a hard refresh may be needed.",[132,2076,2077,2080,2081,515],{},[136,2078,2079],{},"assets \"node_modules\u002F...\" not found",": install dependencies, the DSFR fonts come from ",[136,2082,186],{},[2084,2085,2086],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":237,"searchDepth":251,"depth":251,"links":2088},[2089,2090,2091,2095,2096,2097,2098,2099,2100,2101,2102,2103],{"id":126,"depth":251,"text":127},{"id":229,"depth":251,"text":230},{"id":804,"depth":251,"text":805,"children":2092},[2093,2094],{"id":875,"depth":279,"text":876},{"id":928,"depth":279,"text":929},{"id":1060,"depth":251,"text":1061},{"id":1083,"depth":251,"text":1084},{"id":1247,"depth":251,"text":1248},{"id":1376,"depth":251,"text":1377},{"id":1463,"depth":251,"text":1464},{"id":1820,"depth":251,"text":1821},{"id":1852,"depth":251,"text":1853},{"id":1961,"depth":251,"text":1962},{"id":2051,"depth":251,"text":2052},"A theme is a directory with a theme.json manifest, an SCSS entry and an optional assets\u002F folder. The build compiles each theme to public\u002Fthemes\u002F\u003Cname>.css, copies its assets to public\u002Fthemes\u002F\u003Cname>\u002F, and generates the runtime registry from the manifests. public\u002Fthemes\u002F is a build output; pnpm dev and pnpm build produce it.","md",{},{"title":108},{"title":108,"description":2104},"lYYOMnAIze_zNIqUiQoh55yCFLEpCfwZO01USQGK8o0",[2111,2113],{"title":104,"path":105,"stem":106,"description":2112,"children":-1},"Embeds a live Storybook story in a slide. The slide loads the story from the published Storybook, and shows the component as that Storybook renders it when the deck opens.",{"title":112,"path":113,"stem":114,"description":2114,"children":-1},"The engine CSS layer that every Vignettes theme builds on. It is a set of SCSS files, and Sass is the one tool it needs.",1793470086996]