[{"data":1,"prerenderedAt":601},["ShallowReactive",2],{"navigation_docs":3,"-docs-reference-theme-dsfr":118,"-docs-reference-theme-dsfr-surround":597},[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":82,"body":120,"description":591,"extension":592,"meta":593,"navigation":594,"path":116,"seo":595,"stem":117,"__hash__":596},"docs\u002Fdocs\u002Freference\u002Ftheme-dsfr\u002FREADME.md",{"type":121,"value":122,"toc":583},"minimark",[123,127,130,135,170,180,184,210,221,225,349,380,407,411,435,439,455,561,568,572,579],[124,125,126],"p",{},"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.",[124,128,129],{},"This package is not an official French state product and carries no state branding beyond the design system's public tokens.",[131,132,134],"h2",{"id":133},"install","Install",[136,137,142],"pre",{"className":138,"code":139,"language":140,"meta":141,"style":141},"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","",[143,144,145],"code",{"__ignoreMap":141},[146,147,150,154,158,161,164,167],"span",{"class":148,"line":149},"line",1,[146,151,153],{"class":152},"sBMFI","pnpm",[146,155,157],{"class":156},"sfazB"," add",[146,159,160],{"class":156}," -D",[146,162,163],{"class":156}," @vignettes\u002Ftheme-dsfr",[146,165,166],{"class":156}," @vignettes\u002Ftheme-kit",[146,168,169],{"class":156}," sass\n",[124,171,172,179],{},[173,174,178],"a",{"href":175,"rel":176},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vignettes\u002Ftheme-kit",[177],"nofollow","@vignettes\u002Ftheme-kit"," is a peer dependency: this theme is built on that engine layer.",[131,181,183],{"id":182},"use","Use",[136,185,189],{"className":186,"code":187,"language":188,"meta":141,"style":141},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@use 'pkg:@vignettes\u002Ftheme-dsfr';\n","scss",[143,190,191],{"__ignoreMap":141},[146,192,193,197,201,204,207],{"class":148,"line":149},[146,194,196],{"class":195},"s7zQu","@use",[146,198,200],{"class":199},"sMK4o"," '",[146,202,203],{"class":156},"pkg:@vignettes\u002Ftheme-dsfr",[146,205,206],{"class":199},"'",[146,208,209],{"class":199},";\n",[124,211,212,213,216,217,220],{},"That entry imports the engine layer and the ",[143,214,215],{},"layout"," preset. Compile it with Sass's package importer, as ",[173,218,178],{"href":175,"rel":219},[177]," describes.",[131,222,224],{"id":223},"extending-it","Extending it",[136,226,228],{"className":186,"code":227,"language":188,"meta":141,"style":141},"@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",[143,229,230,250,263,270,304],{"__ignoreMap":141},[146,231,232,234,236,239,241,244,248],{"class":148,"line":149},[146,233,196],{"class":195},[146,235,200],{"class":199},[146,237,238],{"class":156},"pkg:@vignettes\u002Ftheme-dsfr\u002Fvariables",[146,240,206],{"class":199},[146,242,243],{"class":195}," as",[146,245,247],{"class":246},"sTEyZ"," *",[146,249,209],{"class":199},[146,251,253,255,257,259,261],{"class":148,"line":252},2,[146,254,196],{"class":195},[146,256,200],{"class":199},[146,258,203],{"class":156},[146,260,206],{"class":199},[146,262,209],{"class":199},[146,264,266],{"class":148,"line":265},3,[146,267,269],{"emptyLinePlaceholder":268},true,"\n",[146,271,273,276,279,282,285,289,292,295,298,301],{"class":148,"line":272},4,[146,274,275],{"class":199},".",[146,277,278],{"class":152},"reveal",[146,280,281],{"class":152}," h1",[146,283,284],{"class":199}," {",[146,286,288],{"class":287},"sqsOY"," color",[146,290,291],{"class":199},":",[146,293,294],{"class":199}," #",[146,296,297],{"class":246},"0000cc",[146,299,300],{"class":199},";",[146,302,303],{"class":199}," }\n",[146,305,307,309,311,314,316,319,322,324,326,328,332,335,338,341,345,347],{"class":148,"line":306},5,[146,308,275],{"class":199},[146,310,278],{"class":152},[146,312,313],{"class":152}," section",[146,315,275],{"class":199},[146,317,318],{"class":152},"slide-h2",[146,320,321],{"class":152}," h2",[146,323,284],{"class":199},[146,325,288],{"class":287},[146,327,291],{"class":199},[146,329,331],{"class":330},"s2Zo4"," var",[146,333,334],{"class":199},"(",[146,336,337],{"class":246},"--dsfr-grey-950",[146,339,340],{"class":199},")",[146,342,344],{"class":343},"sbssI"," !important",[146,346,300],{"class":199},[146,348,303],{"class":199},[124,350,351,354,355,358,359,361,362,365,366,369,370,365,373,365,376,379],{},[143,352,353],{},"variables"," exposes the DSFR Sass variables, all declared ",[143,356,357],{},"!default",", so your own values take precedence when you set them before the ",[143,360,196],{}," of the theme. The theme also publishes every token as a custom property (",[143,363,364],{},"--dsfr-blue-france-main-525",", ",[143,367,368],{},"--dsfr-text-default"," and so on) and maps them onto the engine's semantic contract (",[143,371,372],{},"--accent",[143,374,375],{},"--surface",[143,377,378],{},"--text-default","), which the components read under any theme.",[124,381,382,385,386,389,390,365,393,389,396,399,400,403,404,275],{},[143,383,384],{},"_palette.scss"," gives the cards and the regions of a diagram the DSFR illustrative palette. Each generic name of the theme kit points to one DSFR tone (",[143,387,388],{},"green"," to ",[143,391,392],{},"green-emeraude",[143,394,395],{},"blue",[143,397,398],{},"blue-cumulus","), and the theme also defines the eighteen DSFR names, such as ",[143,401,402],{},"color=\"green-menthe\""," or ",[143,405,406],{},"color=\"orange-terre-battue\"",[131,408,410],{"id":409},"entries","Entries",[412,413,414,420,425],"ul",{},[415,416,417,419],"li",{},[143,418,203],{}," is the theme: variables, fonts, engine layer, layout preset, base, typography, components, utilities, palette.",[415,421,422,424],{},[143,423,238],{}," contains the Sass variables, to read or override them.",[415,426,427,430,431,434],{},[143,428,429],{},"pkg:@vignettes\u002Ftheme-dsfr\u002Ffonts"," contains the Marianne ",[143,432,433],{},"@font-face"," rules.",[131,436,438],{"id":437},"the-marianne-font-files","The Marianne font files",[124,440,441,442,444,445,448,449,454],{},"The ",[143,443,433],{}," rules point at ",[143,446,447],{},"\u002Fthemes\u002Fdsfr\u002Ffonts\u002FMarianne-*.woff2",". The files come from ",[173,450,453],{"href":451,"rel":452},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@gouvfr\u002Fdsfr",[177],"@gouvfr\u002Fdsfr",", and a Vignettes theme copies them through its manifest.",[136,456,460],{"className":457,"code":458,"language":459,"meta":141,"style":141},"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",[143,461,462,467,484,551,556],{"__ignoreMap":141},[146,463,464],{"class":148,"line":149},[146,465,466],{"class":199},"{\n",[146,468,469,472,476,479,481],{"class":148,"line":252},[146,470,471],{"class":199},"  \"",[146,473,475],{"class":474},"spNyl","assets",[146,477,478],{"class":199},"\"",[146,480,291],{"class":199},[146,482,483],{"class":199}," [\n",[146,485,486,489,492,495,497,499,501,504,506,509,511,514,516,518,520,523,525,527,529,532,534,536,538,541,544,547,549],{"class":148,"line":265},[146,487,488],{"class":199},"    {",[146,490,491],{"class":199}," \"",[146,493,494],{"class":152},"from",[146,496,478],{"class":199},[146,498,291],{"class":199},[146,500,491],{"class":199},[146,502,503],{"class":156},"node_modules\u002F@gouvfr\u002Fdsfr\u002Fdist\u002Ffonts",[146,505,478],{"class":199},[146,507,508],{"class":199},",",[146,510,491],{"class":199},[146,512,513],{"class":152},"to",[146,515,478],{"class":199},[146,517,291],{"class":199},[146,519,491],{"class":199},[146,521,522],{"class":156},"fonts",[146,524,478],{"class":199},[146,526,508],{"class":199},[146,528,491],{"class":199},[146,530,531],{"class":152},"match",[146,533,478],{"class":199},[146,535,291],{"class":199},[146,537,491],{"class":199},[146,539,540],{"class":156},"^Marianne-[A-Za-z]+",[146,542,543],{"class":246},"\\\\",[146,545,546],{"class":156},".woff2?$",[146,548,478],{"class":199},[146,550,303],{"class":199},[146,552,553],{"class":148,"line":272},[146,554,555],{"class":199},"  ]\n",[146,557,558],{"class":148,"line":306},[146,559,560],{"class":199},"}\n",[124,562,563,564,567],{},"Outside Vignettes, serve those files at that path yourself, or override the ",[143,565,566],{},"src"," of each face. Without them the browser falls back to the next family in the stack.",[131,569,571],{"id":570},"license","License",[124,573,574,575,275],{},"MIT. The DSFR itself is published by the French state under its own ",[173,576,570],{"href":577,"rel":578},"https:\u002F\u002Fgithub.com\u002FGouvernementFR\u002Fdsfr\u002Fblob\u002Fmain\u002FLICENSE.md",[177],[580,581,582],"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":141,"searchDepth":252,"depth":252,"links":584},[585,586,587,588,589,590],{"id":133,"depth":252,"text":134},{"id":182,"depth":252,"text":183},{"id":223,"depth":252,"text":224},{"id":409,"depth":252,"text":410},{"id":437,"depth":252,"text":438},{"id":570,"depth":252,"text":571},"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 a set of SCSS files.","md",{},{"title":82},{"title":82,"description":591},"d9EVs-DMiR4B9qnESpqrjHlf9ASwzAHdCijTgbdT8R8",[598,600],{"title":112,"path":113,"stem":114,"description":599,"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.",null,1793470087227]