[{"data":1,"prerenderedAt":632},["ShallowReactive",2],{"navigation_docs":3,"-themes-reference-theme-dsfr":127,"-themes-reference-theme-dsfr-surround":627},[4,19,71,101],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":18},"Démarrer","i-lucide-rocket","\u002Fdemarrer","1.demarrer",[10,14],{"title":11,"path":12,"stem":13},"Rejoindre le studio","\u002Fdemarrer\u002Frejoindre-le-studio","1.demarrer\u002F1.rejoindre-le-studio",{"title":15,"path":16,"stem":17},"Première présentation","\u002Fdemarrer\u002Fpremiere-presentation","1.demarrer\u002F2.premiere-presentation",false,{"title":20,"icon":21,"path":22,"stem":23,"children":24,"page":18},"Écrire","i-lucide-pen-line","\u002Fecrire","2.ecrire",[25,29,33,37,41,45,49,53],{"title":26,"path":27,"stem":28},"La syntaxe","\u002Fecrire\u002Fsyntaxe","2.ecrire\u002F1.syntaxe",{"title":30,"path":31,"stem":32},"Les composants","\u002Fecrire\u002Fcomposants","2.ecrire\u002F2.composants",{"title":34,"path":35,"stem":36},"Story Storybook","\u002Fecrire\u002Fstory-storybook","2.ecrire\u002F3.story-storybook",{"title":38,"path":39,"stem":40},"Image et texte","\u002Fecrire\u002Fimage-a-cote-du-texte","2.ecrire\u002F4.image-a-cote-du-texte",{"title":42,"path":43,"stem":44},"Notes de l'orateur","\u002Fecrire\u002Fnotes-de-presentation","2.ecrire\u002F5.notes-de-presentation",{"title":46,"path":47,"stem":48},"Exporter en PDF","\u002Fecrire\u002Fexport-pdf","2.ecrire\u002F6.export-pdf",{"title":50,"path":51,"stem":52},"Écrire avec un agent","\u002Fecrire\u002Fecrire-avec-un-agent","2.ecrire\u002F7.ecrire-avec-un-agent",{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":18},"Référence","i-lucide-book-open","\u002Fecrire\u002Freference","ecrire\u002Freference",[59,63,67],{"title":60,"path":61,"stem":62},"nuxt","\u002Fecrire\u002Freference\u002Fnuxt","ecrire\u002Freference\u002Fnuxt\u002FREADME",{"title":64,"path":65,"stem":66},"schemas","\u002Fecrire\u002Freference\u002Fschemas","ecrire\u002Freference\u002Fschemas\u002FREADME",{"title":68,"path":69,"stem":70},"storybook","\u002Fecrire\u002Freference\u002Fstorybook","ecrire\u002Freference\u002Fstorybook\u002FREADME",{"title":72,"icon":73,"path":74,"stem":75,"children":76,"page":18},"Studio","i-lucide-layout-grid","\u002Fstudio","3.studio",[77,81,85,89,93,97],{"title":78,"path":79,"stem":80},"Les rôles","\u002Fstudio\u002Froles","3.studio\u002F1.roles",{"title":82,"path":83,"stem":84},"Visibilité et partage","\u002Fstudio\u002Fvisibilite-et-partage","3.studio\u002F2.visibilite-et-partage",{"title":86,"path":87,"stem":88},"Versions et brouillon","\u002Fstudio\u002Fversions-et-brouillon","3.studio\u002F3.versions-et-brouillon",{"title":90,"path":91,"stem":92},"Jetons d'accès","\u002Fstudio\u002Fjetons-d-acces","3.studio\u002F4.jetons-d-acces",{"title":94,"path":95,"stem":96},"Organiser le catalogue","\u002Fstudio\u002Forganiser-le-catalogue","3.studio\u002F4.organiser-le-catalogue",{"title":98,"path":99,"stem":100},"Problèmes fréquents","\u002Fstudio\u002Fproblemes-frequents","3.studio\u002F5.problemes-frequents",{"title":102,"icon":103,"path":104,"stem":105,"children":106,"page":18},"Thèmes","i-lucide-palette","\u002Fthemes","4.themes",[107,111],{"title":108,"path":109,"stem":110},"Le thème de votre équipe","\u002Fthemes\u002Ftheme-de-votre-equipe","4.themes\u002F1.theme-de-votre-equipe",{"title":54,"icon":55,"path":112,"stem":113,"children":114,"page":18},"\u002Fthemes\u002Freference","themes\u002Freference",[115,119,123],{"title":116,"path":117,"stem":118},"theme-dsfr","\u002Fthemes\u002Freference\u002Ftheme-dsfr","themes\u002Freference\u002Ftheme-dsfr\u002FREADME",{"title":120,"path":121,"stem":122},"theme-kit","\u002Fthemes\u002Freference\u002Ftheme-kit","themes\u002Freference\u002Ftheme-kit\u002FREADME",{"title":124,"path":125,"stem":126},"Theme system","\u002Fthemes\u002Freference\u002Ftheme-system","themes\u002Freference\u002Ftheme-system",{"id":128,"title":129,"body":130,"description":621,"extension":622,"meta":623,"navigation":624,"path":117,"seo":625,"stem":118,"__hash__":626},"docs\u002Fthemes\u002Freference\u002Ftheme-dsfr\u002FREADME.md","@vignettes\u002Ftheme-dsfr",{"type":131,"value":132,"toc":613},"minimark",[133,137,155,158,161,166,201,209,213,239,250,254,378,409,413,465,469,485,591,598,602,609],[134,135,129],"h1",{"id":136},"vignettestheme-dsfr",[138,139,140,141,148,149,154],"p",{},"The base ",[142,143,147],"a",{"href":144,"rel":145},"https:\u002F\u002Fgithub.com\u002FShallowRed\u002Fvignettes",[146],"nofollow","Vignettes"," theme following the ",[142,150,153],{"href":151,"rel":152},"https:\u002F\u002Fwww.systeme-de-design.gouv.fr",[146],"Système de Design de l'État"," (DSFR), the French state design system: its palette, Marianne typography and type scale, on light surfaces. It is pure SCSS with no JavaScript.",[138,156,157],{},"The theme is brand-neutral and meant to be extended. Use it as it is for a deck that should look like a French public service, or build a brand on top of it and keep its proportions.",[138,159,160],{},"This package is not an official French state product and carries no state branding beyond the design system's public tokens.",[162,163,165],"h2",{"id":164},"install","Install",[167,168,173],"pre",{"className":169,"code":170,"language":171,"meta":172,"style":172},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D @vignettes\u002Ftheme-dsfr @vignettes\u002Ftheme-kit sass\n","bash","",[174,175,176],"code",{"__ignoreMap":172},[177,178,181,185,189,192,195,198],"span",{"class":179,"line":180},"line",1,[177,182,184],{"class":183},"sBMFI","pnpm",[177,186,188],{"class":187},"sfazB"," add",[177,190,191],{"class":187}," -D",[177,193,194],{"class":187}," @vignettes\u002Ftheme-dsfr",[177,196,197],{"class":187}," @vignettes\u002Ftheme-kit",[177,199,200],{"class":187}," sass\n",[138,202,203,208],{},[142,204,207],{"href":205,"rel":206},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vignettes\u002Ftheme-kit",[146],"@vignettes\u002Ftheme-kit"," is a peer dependency: this theme is built on that engine layer.",[162,210,212],{"id":211},"use","Use",[167,214,218],{"className":215,"code":216,"language":217,"meta":172,"style":172},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@use 'pkg:@vignettes\u002Ftheme-dsfr';\n","scss",[174,219,220],{"__ignoreMap":172},[177,221,222,226,230,233,236],{"class":179,"line":180},[177,223,225],{"class":224},"s7zQu","@use",[177,227,229],{"class":228},"sMK4o"," '",[177,231,232],{"class":187},"pkg:@vignettes\u002Ftheme-dsfr",[177,234,235],{"class":228},"'",[177,237,238],{"class":228},";\n",[138,240,241,242,245,246,249],{},"That entry imports the engine layer and the ",[174,243,244],{},"layout"," preset. Compile it with Sass's package importer, as ",[142,247,207],{"href":205,"rel":248},[146]," describes.",[162,251,253],{"id":252},"extending-it","Extending it",[167,255,257],{"className":215,"code":256,"language":217,"meta":172,"style":172},"@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",[174,258,259,279,292,299,333],{"__ignoreMap":172},[177,260,261,263,265,268,270,273,277],{"class":179,"line":180},[177,262,225],{"class":224},[177,264,229],{"class":228},[177,266,267],{"class":187},"pkg:@vignettes\u002Ftheme-dsfr\u002Fvariables",[177,269,235],{"class":228},[177,271,272],{"class":224}," as",[177,274,276],{"class":275},"sTEyZ"," *",[177,278,238],{"class":228},[177,280,282,284,286,288,290],{"class":179,"line":281},2,[177,283,225],{"class":224},[177,285,229],{"class":228},[177,287,232],{"class":187},[177,289,235],{"class":228},[177,291,238],{"class":228},[177,293,295],{"class":179,"line":294},3,[177,296,298],{"emptyLinePlaceholder":297},true,"\n",[177,300,302,305,308,311,314,318,321,324,327,330],{"class":179,"line":301},4,[177,303,304],{"class":228},".",[177,306,307],{"class":183},"reveal",[177,309,310],{"class":183}," h1",[177,312,313],{"class":228}," {",[177,315,317],{"class":316},"sqsOY"," color",[177,319,320],{"class":228},":",[177,322,323],{"class":228}," #",[177,325,326],{"class":275},"0000cc",[177,328,329],{"class":228},";",[177,331,332],{"class":228}," }\n",[177,334,336,338,340,343,345,348,351,353,355,357,361,364,367,370,374,376],{"class":179,"line":335},5,[177,337,304],{"class":228},[177,339,307],{"class":183},[177,341,342],{"class":183}," section",[177,344,304],{"class":228},[177,346,347],{"class":183},"slide-h2",[177,349,350],{"class":183}," h2",[177,352,313],{"class":228},[177,354,317],{"class":316},[177,356,320],{"class":228},[177,358,360],{"class":359},"s2Zo4"," var",[177,362,363],{"class":228},"(",[177,365,366],{"class":275},"--dsfr-grey-950",[177,368,369],{"class":228},")",[177,371,373],{"class":372},"sbssI"," !important",[177,375,329],{"class":228},[177,377,332],{"class":228},[138,379,380,383,384,387,388,390,391,394,395,398,399,394,402,394,405,408],{},[174,381,382],{},"variables"," exposes the DSFR Sass variables, all declared ",[174,385,386],{},"!default",", so your own values take precedence when you set them before the ",[174,389,225],{}," of the theme. The theme also publishes every token as a custom property (",[174,392,393],{},"--dsfr-blue-france-main-525",", ",[174,396,397],{},"--dsfr-text-default"," and so on) and maps them onto the engine's semantic contract (",[174,400,401],{},"--accent",[174,403,404],{},"--surface",[174,406,407],{},"--text-default","), which is what theme-agnostic components read.",[162,410,412],{"id":411},"entries","Entries",[414,415,416,429],"table",{},[417,418,419],"thead",{},[420,421,422,426],"tr",{},[423,424,425],"th",{},"Entry",[423,427,428],{},"What it is",[430,431,432,442,451],"tbody",{},[420,433,434,439],{},[435,436,437],"td",{},[174,438,232],{},[435,440,441],{},"The theme: variables, fonts, engine layer, layout preset, base, typography, components, utilities",[420,443,444,448],{},[435,445,446],{},[174,447,267],{},[435,449,450],{},"The Sass variables alone, to read or override them",[420,452,453,458],{},[435,454,455],{},[174,456,457],{},"pkg:@vignettes\u002Ftheme-dsfr\u002Ffonts",[435,459,460,461,464],{},"The Marianne ",[174,462,463],{},"@font-face"," rules alone",[162,466,468],{"id":467},"the-marianne-font-files","The Marianne font files",[138,470,471,472,474,475,478,479,484],{},"The ",[174,473,463],{}," rules point at ",[174,476,477],{},"\u002Fthemes\u002Fdsfr\u002Ffonts\u002FMarianne-*.woff2",". The files themselves are not in this package: they come from ",[142,480,483],{"href":481,"rel":482},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@gouvfr\u002Fdsfr",[146],"@gouvfr\u002Fdsfr",", and a Vignettes theme copies them through its manifest.",[167,486,490],{"className":487,"code":488,"language":489,"meta":172,"style":172},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"assets\": [\n    { \"from\": \"node_modules\u002F@gouvfr\u002Fdsfr\u002Fdist\u002Ffonts\", \"to\": \"fonts\", \"match\": \"^Marianne-[A-Za-z]+\\\\.woff2?$\" }\n  ]\n}\n","json",[174,491,492,497,514,581,586],{"__ignoreMap":172},[177,493,494],{"class":179,"line":180},[177,495,496],{"class":228},"{\n",[177,498,499,502,506,509,511],{"class":179,"line":281},[177,500,501],{"class":228},"  \"",[177,503,505],{"class":504},"spNyl","assets",[177,507,508],{"class":228},"\"",[177,510,320],{"class":228},[177,512,513],{"class":228}," [\n",[177,515,516,519,522,525,527,529,531,534,536,539,541,544,546,548,550,553,555,557,559,562,564,566,568,571,574,577,579],{"class":179,"line":294},[177,517,518],{"class":228},"    {",[177,520,521],{"class":228}," \"",[177,523,524],{"class":183},"from",[177,526,508],{"class":228},[177,528,320],{"class":228},[177,530,521],{"class":228},[177,532,533],{"class":187},"node_modules\u002F@gouvfr\u002Fdsfr\u002Fdist\u002Ffonts",[177,535,508],{"class":228},[177,537,538],{"class":228},",",[177,540,521],{"class":228},[177,542,543],{"class":183},"to",[177,545,508],{"class":228},[177,547,320],{"class":228},[177,549,521],{"class":228},[177,551,552],{"class":187},"fonts",[177,554,508],{"class":228},[177,556,538],{"class":228},[177,558,521],{"class":228},[177,560,561],{"class":183},"match",[177,563,508],{"class":228},[177,565,320],{"class":228},[177,567,521],{"class":228},[177,569,570],{"class":187},"^Marianne-[A-Za-z]+",[177,572,573],{"class":275},"\\\\",[177,575,576],{"class":187},".woff2?$",[177,578,508],{"class":228},[177,580,332],{"class":228},[177,582,583],{"class":179,"line":301},[177,584,585],{"class":228},"  ]\n",[177,587,588],{"class":179,"line":335},[177,589,590],{"class":228},"}\n",[138,592,593,594,597],{},"Outside Vignettes, serve those files at that path yourself, or override the ",[174,595,596],{},"src"," of each face. Without them the browser falls back to the next family in the stack.",[162,599,601],{"id":600},"license","License",[138,603,604,605,304],{},"MIT. The DSFR itself is published by the French state under its own ",[142,606,600],{"href":607,"rel":608},"https:\u002F\u002Fgithub.com\u002FGouvernementFR\u002Fdsfr\u002Fblob\u002Fmain\u002FLICENSE.md",[146],[610,611,612],"style",{},"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 .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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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}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}",{"title":172,"searchDepth":281,"depth":281,"links":614},[615,616,617,618,619,620],{"id":164,"depth":281,"text":165},{"id":211,"depth":281,"text":212},{"id":252,"depth":281,"text":253},{"id":411,"depth":281,"text":412},{"id":467,"depth":281,"text":468},{"id":600,"depth":281,"text":601},"The base Vignettes theme following the Système de Design de l'État (DSFR), the French state design system: its palette, Marianne typography and type scale, on light surfaces. It is pure SCSS with no JavaScript.","md",{},{"title":116},{"title":129,"description":621},"3GcWzWMSynaYh3e0owaLFlg18ZAWI7e5CmwlIWs3mFc",[628,630],{"title":108,"path":109,"stem":110,"description":629,"children":-1},"Écrire un thème aux couleurs de votre équipe, le vérifier dans un studio installé sur votre ordinateur, puis le faire publier par l'exploitant de votre instance.",{"title":120,"path":121,"stem":122,"description":631,"children":-1},"The engine CSS layer that every Vignettes theme builds on. It is pure SCSS with no JavaScript and no dependencies.",1792605686258]