[{"data":1,"prerenderedAt":961},["ShallowReactive",2],{"navigation_docs":3,"-docs-reference-theme-kit":118,"-docs-reference-theme-kit-surround":956},[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":112,"body":120,"description":950,"extension":951,"meta":952,"navigation":953,"path":113,"seo":954,"stem":114,"__hash__":955},"docs\u002Fdocs\u002Freference\u002Ftheme-kit\u002FREADME.md",{"type":121,"value":122,"toc":939},"minimark",[123,127,132,164,168,398,404,514,531,535,538,725,738,742,789,793,854,858,876,885,889,907,916,920,928,932,935],[124,125,126],"p",{},"A Vignettes theme sets colors, typography and sizes. This package provides what every theme shares: the semantic token contract, the Reveal.js patches, the slide skeleton, the media-layout grid, the spacing scale and the quicklink styles.",[128,129,131],"h2",{"id":130},"install","Install",[133,134,139],"pre",{"className":135,"code":136,"language":137,"meta":138,"style":138},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D @vignettes\u002Ftheme-kit sass\n","bash","",[140,141,142],"code",{"__ignoreMap":138},[143,144,147,151,155,158,161],"span",{"class":145,"line":146},"line",1,[143,148,150],{"class":149},"sBMFI","pnpm",[143,152,154],{"class":153},"sfazB"," add",[143,156,157],{"class":153}," -D",[143,159,160],{"class":153}," @vignettes\u002Ftheme-kit",[143,162,163],{"class":153}," sass\n",[128,165,167],{"id":166},"use","Use",[133,169,173],{"className":170,"code":171,"language":172,"meta":138,"style":138},"language-scss shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F mytheme.scss\n@use 'pkg:@vignettes\u002Ftheme-kit';\n\n:root {\n  --accent: #e63946;\n  --accent-soft: #fbdcdf;\n  --accent-bg: #fef4f5;\n  --surface: #ffffff;\n  --surface-contrast: #1d1d1d;\n  --on-contrast: #ffffff;\n  --text-default: #1d1d1d;\n  --text-title: #000000;\n  --text-mention: #666666;\n}\n\n.reveal h1 { font-size: 3em; }\n","scss",[140,174,175,181,201,208,221,238,253,268,283,298,312,326,341,356,362,367],{"__ignoreMap":138},[143,176,177],{"class":145,"line":146},[143,178,180],{"class":179},"sHwdD","\u002F\u002F mytheme.scss\n",[143,182,184,188,192,195,198],{"class":145,"line":183},2,[143,185,187],{"class":186},"s7zQu","@use",[143,189,191],{"class":190},"sMK4o"," '",[143,193,194],{"class":153},"pkg:@vignettes\u002Ftheme-kit",[143,196,197],{"class":190},"'",[143,199,200],{"class":190},";\n",[143,202,204],{"class":145,"line":203},3,[143,205,207],{"emptyLinePlaceholder":206},true,"\n",[143,209,211,214,218],{"class":145,"line":210},4,[143,212,213],{"class":190},":",[143,215,217],{"class":216},"spNyl","root",[143,219,220],{"class":190}," {\n",[143,222,224,228,230,233,236],{"class":145,"line":223},5,[143,225,227],{"class":226},"sTEyZ","  --accent",[143,229,213],{"class":190},[143,231,232],{"class":190}," #",[143,234,235],{"class":226},"e63946",[143,237,200],{"class":190},[143,239,241,244,246,248,251],{"class":145,"line":240},6,[143,242,243],{"class":226},"  --accent-soft",[143,245,213],{"class":190},[143,247,232],{"class":190},[143,249,250],{"class":226},"fbdcdf",[143,252,200],{"class":190},[143,254,256,259,261,263,266],{"class":145,"line":255},7,[143,257,258],{"class":226},"  --accent-bg",[143,260,213],{"class":190},[143,262,232],{"class":190},[143,264,265],{"class":226},"fef4f5",[143,267,200],{"class":190},[143,269,271,274,276,278,281],{"class":145,"line":270},8,[143,272,273],{"class":226},"  --surface",[143,275,213],{"class":190},[143,277,232],{"class":190},[143,279,280],{"class":226},"ffffff",[143,282,200],{"class":190},[143,284,286,289,291,293,296],{"class":145,"line":285},9,[143,287,288],{"class":226},"  --surface-contrast",[143,290,213],{"class":190},[143,292,232],{"class":190},[143,294,295],{"class":226},"1d1d1d",[143,297,200],{"class":190},[143,299,301,304,306,308,310],{"class":145,"line":300},10,[143,302,303],{"class":226},"  --on-contrast",[143,305,213],{"class":190},[143,307,232],{"class":190},[143,309,280],{"class":226},[143,311,200],{"class":190},[143,313,315,318,320,322,324],{"class":145,"line":314},11,[143,316,317],{"class":226},"  --text-default",[143,319,213],{"class":190},[143,321,232],{"class":190},[143,323,295],{"class":226},[143,325,200],{"class":190},[143,327,329,332,334,336,339],{"class":145,"line":328},12,[143,330,331],{"class":226},"  --text-title",[143,333,213],{"class":190},[143,335,232],{"class":190},[143,337,338],{"class":226},"000000",[143,340,200],{"class":190},[143,342,344,347,349,351,354],{"class":145,"line":343},13,[143,345,346],{"class":226},"  --text-mention",[143,348,213],{"class":190},[143,350,232],{"class":190},[143,352,353],{"class":226},"666666",[143,355,200],{"class":190},[143,357,359],{"class":145,"line":358},14,[143,360,361],{"class":190},"}\n",[143,363,365],{"class":145,"line":364},15,[143,366,207],{"emptyLinePlaceholder":206},[143,368,370,373,376,379,382,386,388,392,395],{"class":145,"line":369},16,[143,371,372],{"class":190},".",[143,374,375],{"class":149},"reveal",[143,377,378],{"class":149}," h1",[143,380,381],{"class":190}," {",[143,383,385],{"class":384},"sqsOY"," font-size",[143,387,213],{"class":190},[143,389,391],{"class":390},"sbssI"," 3em",[143,393,394],{"class":190},";",[143,396,397],{"class":190}," }\n",[124,399,400,401,213],{},"Compile it with Sass and its package importer, which resolves ",[140,402,403],{},"pkg:",[133,405,409],{"className":406,"code":407,"language":408,"meta":138,"style":138},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import * as sass from 'sass'\n\nconst { css } = sass.compile('mytheme.scss', {\n  importers: [new sass.NodePackageImporter()],\n})\n","js",[140,410,411,436,440,480,507],{"__ignoreMap":138},[143,412,413,416,419,422,425,428,430,433],{"class":145,"line":146},[143,414,415],{"class":186},"import",[143,417,418],{"class":190}," *",[143,420,421],{"class":186}," as",[143,423,424],{"class":226}," sass ",[143,426,427],{"class":186},"from",[143,429,191],{"class":190},[143,431,432],{"class":153},"sass",[143,434,435],{"class":190},"'\n",[143,437,438],{"class":145,"line":183},[143,439,207],{"emptyLinePlaceholder":206},[143,441,442,445,447,450,453,456,459,461,465,468,470,473,475,478],{"class":145,"line":203},[143,443,444],{"class":216},"const",[143,446,381],{"class":190},[143,448,449],{"class":226}," css ",[143,451,452],{"class":190},"}",[143,454,455],{"class":190}," =",[143,457,458],{"class":226}," sass",[143,460,372],{"class":190},[143,462,464],{"class":463},"s2Zo4","compile",[143,466,467],{"class":226},"(",[143,469,197],{"class":190},[143,471,472],{"class":153},"mytheme.scss",[143,474,197],{"class":190},[143,476,477],{"class":190},",",[143,479,220],{"class":190},[143,481,482,486,488,491,494,496,498,501,504],{"class":145,"line":210},[143,483,485],{"class":484},"swJcz","  importers",[143,487,213],{"class":190},[143,489,490],{"class":226}," [",[143,492,493],{"class":190},"new",[143,495,458],{"class":226},[143,497,372],{"class":190},[143,499,500],{"class":463},"NodePackageImporter",[143,502,503],{"class":226},"()]",[143,505,506],{"class":190},",\n",[143,508,509,511],{"class":145,"line":223},[143,510,452],{"class":190},[143,512,513],{"class":226},")\n",[124,515,516,518,519,526,527,530],{},[140,517,403],{}," is ",[520,521,525],"a",{"href":522,"rel":523},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fuse\u002F#pkg",[524],"nofollow","Sass's own package syntax"," and needs Sass 1.71 or later. Inside a Vignettes application, ",[140,528,529],{},"pnpm build:themes"," does this for every theme it finds.",[128,532,534],{"id":533},"the-token-contract","The token contract",[124,536,537],{},"Code that works under any theme reads these custom properties only. A theme sets them, and this package ships defaults so a theme that omits one still renders.",[539,540,541,548,554,560,575,583,595,601,606,614,628,642,651,669,693,702],"ul",{},[542,543,544,547],"li",{},[140,545,546],{},"--accent"," is the primary color, for links, dividers and accents.",[542,549,550,553],{},[140,551,552],{},"--accent-soft"," is a lighter accent, for hover tints.",[542,555,556,559],{},[140,557,558],{},"--accent-bg"," is a very light tint, for callout backgrounds.",[542,561,562,565,566,568,569,571,572,574],{},[140,563,564],{},"--accent-strong"," is the accent mixed with the title color, for text on ",[140,567,552],{}," or ",[140,570,558],{},", derived from ",[140,573,546],{}," by default.",[542,576,577,580,581,574],{},[140,578,579],{},"--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 ",[140,582,546],{},[542,584,585,588,589,592,593,574],{},[140,586,587],{},"--accent-on-contrast"," is the accent mixed with white, for a mark on ",[140,590,591],{},"--surface-contrast"," or on a dark code block, derived from ",[140,594,546],{},[542,596,597,600],{},[140,598,599],{},"--surface"," is the page background.",[542,602,603,605],{},[140,604,591],{}," is the inverse surface, for dark blocks and code panels.",[542,607,608,611,612,372],{},[140,609,610],{},"--on-contrast"," is the text color on ",[140,613,591],{},[542,615,616,619,620,623,624,627],{},[140,617,618],{},"--text-default"," colors the body text, ",[140,621,622],{},"--text-title"," the headings and strong text, ",[140,625,626],{},"--text-mention"," the muted text (captions, small print).",[542,629,630,633,634,637,638,641],{},[140,631,632],{},"--border",", ",[140,635,636],{},"--radius"," and ",[140,639,640],{},"--shadow"," give the outline, the corners and the elevation of a box drawn by a component.",[542,643,644,647,648,574],{},[140,645,646],{},"--code-min-size"," is the smallest size of a code block, in slide units, ",[140,649,650],{},"0px",[542,652,653,656,657,660,661,664,665,668],{},[140,654,655],{},"--text-step-1"," to ",[140,658,659],{},"--text-step-4"," are the type scale above the body text, in ",[140,662,663],{},"em"," of the text around, a ratio of 1.2 apart by default: the headings inside the body and the sizes of ",[140,666,667],{},"::Highlight"," read them, so they follow a column that shrinks its text.",[542,670,671,674,675,678,679,682,683,685,686,689,690,692],{},[140,672,673],{},"--flow-space"," is the space inside a group of text of the body of a content slide: between a heading and its paragraph, two paragraphs, a paragraph and its list, two list items. ",[140,676,677],{},"--block-space"," is the space above and below a block other than text (columns, a diagram, an image, a ",[140,680,681],{},"::Quote",", a ",[140,684,667],{},", code), ",[140,687,688],{},"--heading-space-before"," the space above a heading of the body. Each is in ",[140,691,663],{}," of the element that carries the margin.",[542,694,695,698,699,574],{},[140,696,697],{},"--measure"," is the maximum line length of a paragraph or a list of the body of a content slide, ",[140,700,701],{},"60ch",[542,703,704,637,707,710,711,637,714,717,718,637,721,724],{},[140,705,706],{},"--code-surface",[140,708,709],{},"--code-surface-dark"," are the backgrounds of the code themes ",[140,712,713],{},"clair",[140,715,716],{},"nuit",". By default they are the light and dark backgrounds of GitHub's code, ",[140,719,720],{},"#f6f8fa",[140,722,723],{},"#24292e",", whatever the surface of the theme.",[124,726,727,728,633,731,637,734,737],{},"The kit derives three more tokens from the text intensities, at the root of the page: ",[140,729,730],{},"--on-surface-title",[140,732,733],{},"--on-surface-default",[140,735,736],{},"--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.",[128,739,741],{"id":740},"the-card-palette","The card palette",[124,743,744,747,748,751,752,755,756,759,760,763,764,633,767,633,770,633,773,633,776,633,779,633,782,637,785,788],{},[140,745,746],{},"color=\"green\""," on a node or a region of a diagram (",[140,749,750],{},"@vignettes\u002Fschemas",") reads three properties: ",[140,753,754],{},"--palette-green-text"," for the title and the icon of the node or the region, ",[140,757,758],{},"--palette-green-bg"," for the surface of a region and ",[140,761,762],{},"--palette-green-main"," for its outline. The kit defines ",[140,765,766],{},"blue",[140,768,769],{},"green",[140,771,772],{},"yellow",[140,774,775],{},"orange",[140,777,778],{},"brown",[140,780,781],{},"pink",[140,783,784],{},"purple",[140,786,787],{},"grey",". A theme redefines these properties, and adds names of its own with the same three properties. A name the theme leaves undefined takes the accent tokens.",[128,790,792],{"id":791},"what-it-contains","What it contains",[124,794,795,798,799,802,803,806,807,810,811,814,815,818,819,822,823,826,827,830,831,834,835,838,839,842,843,846,847,637,850,853],{},[140,796,797],{},"_semantic-tokens.scss"," declares the contract above, ",[140,800,801],{},"_palette.scss"," the card palette. ",[140,804,805],{},"_reveal-patches.scss"," adapts Reveal.js defaults and bridges MDC's wrapper elements with ",[140,808,809],{},"display: contents",". ",[140,812,813],{},"_slide-structure.scss"," is the flex skeleton of the three slide kinds the engine tags on each section: ",[140,816,817],{},"slide-h1"," for a title slide, ",[140,820,821],{},"slide-h2"," for a section divider, ",[140,824,825],{},"slide-h3"," for a heading with body. It aligns the content of a slide vertically, as ",[140,828,829],{},":layout{align}"," asks or by the default of the slide kind and of its layout, and reads two size tokens a theme sets on ",[140,832,833],{},".reveal",": ",[140,836,837],{},"--slide-heading-min-height",", the height a content slide keeps for its heading, and ",[140,840,841],{},"--slide-body-padding-y",", the space above and below its body. The rhythm tokens set the vertical margins of the blocks of the body of a content slide, and override the margins a theme or a component writes. ",[140,844,845],{},"_media-layouts.scss"," is the grid behind the media layouts. ",[140,848,849],{},"_spacing.scss",[140,851,852],{},"_quicklinks.scss"," cover the spacing scale and the in-deck navigation links.",[128,855,857],{"id":856},"the-base-skin","The base skin",[133,859,861],{"className":170,"code":860,"language":172,"meta":138,"style":138},"@use 'pkg:@vignettes\u002Ftheme-kit\u002Fbase';\n",[140,862,863],{"__ignoreMap":138},[143,864,865,867,869,872,874],{"class":145,"line":146},[143,866,187],{"class":186},[143,868,191],{"class":190},[143,870,871],{"class":153},"pkg:@vignettes\u002Ftheme-kit\u002Fbase",[143,873,197],{"class":190},[143,875,200],{"class":190},[124,877,878,879,884],{},"Applies the nine color tokens to the page background, the text, the headings, the links, inline code, quotes, list markers and the navigation controls, with a system font. With the layout preset, a theme can consist of the tokens alone: ",[520,880,883],{"href":881,"rel":882},"https:\u002F\u002Fgithub.com\u002FShallowRed\u002Fvignettes\u002Ftree\u002Fmain\u002Fexamples\u002Fthemes",[524],"examples\u002Fthemes"," holds a dark theme and a brand theme written that way. A theme that draws these elements itself leaves the base skin out.",[128,886,888],{"id":887},"the-layout-preset","The layout preset",[133,890,892],{"className":170,"code":891,"language":172,"meta":138,"style":138},"@use 'pkg:@vignettes\u002Ftheme-kit\u002Fpresets\u002Flayout';\n",[140,893,894],{"__ignoreMap":138},[143,895,896,898,900,903,905],{"class":145,"line":146},[143,897,187],{"class":186},[143,899,191],{"class":190},[143,901,902],{"class":153},"pkg:@vignettes\u002Ftheme-kit\u002Fpresets\u002Flayout",[143,904,197],{"class":190},[143,906,200],{"class":190},[124,908,909,910,915],{},"Gives a theme the type scale and the spacing of the French state design system, and leaves the colors to the theme. Use it to keep those proportions under your own palette; ",[520,911,914],{"href":912,"rel":913},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@vignettes\u002Ftheme-dsfr",[524],"@vignettes\u002Ftheme-dsfr"," is the full theme.",[128,917,919],{"id":918},"reference","Reference",[124,921,922,927],{},[520,923,926],{"href":924,"rel":925},"https:\u002F\u002Fgithub.com\u002FShallowRed\u002Fvignettes\u002Fblob\u002Fmain\u002Fdocs\u002Ftheme-system.md",[524],"docs\u002Ftheme-system.md"," covers the theme manifest, the compilation, how a theme is discovered at runtime, and how slides nested under a section are tagged.",[128,929,931],{"id":930},"license","License",[124,933,934],{},"MIT",[936,937,938],"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 .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 .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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":138,"searchDepth":183,"depth":183,"links":940},[941,942,943,944,945,946,947,948,949],{"id":130,"depth":183,"text":131},{"id":166,"depth":183,"text":167},{"id":533,"depth":183,"text":534},{"id":740,"depth":183,"text":741},{"id":791,"depth":183,"text":792},{"id":856,"depth":183,"text":857},{"id":887,"depth":183,"text":888},{"id":918,"depth":183,"text":919},{"id":930,"depth":183,"text":931},"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.","md",{},{"title":112},{"title":112,"description":950},"aNSWZ3WSOgoxjUm_8IS5EUByVae2_JLiBYyppQKOUAY",[957,959],{"title":108,"path":109,"stem":110,"description":958,"children":-1},"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.",{"title":82,"path":116,"stem":117,"description":960,"children":-1},"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.",1793478541597]