Espacements, rayons et ombres

Trois catégories de jetons décrivent la place que prennent les choses et la façon dont elles reposent sur la page, plus une quatrième qui met en forme les blocs de code. Les quatre sont de simples tables nom-valeur, et toutes les quatre sont optionnelles.

spacing

Des jetons de mise en page nommés. Contrairement aux autres catégories, une valeur d'espacement est une chaîne de classes Tailwind plutôt qu'une valeur CSS unique — ce qui permet à un seul jeton de porter toute une décision de mise en page, variantes responsives comprises.

theme:
  spacing:
    container: 'max-w-7xl mx-auto px-4'
    section: 'py-16 sm:py-20'
    card: 'p-6'
    gap: 'gap-8'

Les noms de jetons sont en kebab-case minuscule. Référencez un jeton là où vous auriez écrit les classes à la main, et une évolution ultérieure du rythme des pages devient une modification de configuration d'une ligne au lieu d'un rechercher-remplacer sur chaque page.

borderRadius

Des jetons de rayon nommés, en valeurs CSS. Chacun devient un utilitaire rounded-{name}.

theme:
  borderRadius:
    card: '0.75rem'
    button: '0.5rem'
    pill: '9999px'

shadows

Des jetons d'ombre nommés, en valeurs CSS box-shadow. Chacun devient un utilitaire shadow-{name}.

theme:
  shadows:
    card: '0 4px 6px rgba(0, 0, 0, 0.1)'
    elevated: '0 10px 30px rgba(0, 0, 0, 0.2)'

codeBlock

Sélectionne le thème de coloration syntaxique appliqué aux blocs de code markdown — sur les pages markdown, dans les répertoires de contenu, et dans tout composant text rendant du markdown.

Propriété	Description
theme	Nom du thème de coloration, p. ex. github-dark, github-light.

theme:
  codeBlock:
    theme: github-dark

C'est un choix global unique plutôt qu'un choix par bloc : les exemples de code d'un site de documentation restent donc visuellement cohérents quelle que soit la page où ils apparaissent.

Les assembler

Les jetons se composent comme des classes écrites à la main — l'intérêt est que les décisions soient nommées et centralisées :

theme:
  spacing:
    section: 'py-20'
  borderRadius:
    card: '1rem'
  shadows:
    card: '0 1px 3px rgba(0, 0, 0, 0.08)'

- type: container
  props: { className: 'py-20' }
  children:
    - { type: card, props: { className: 'rounded-card shadow-card' } }

Pages connexes

• Aperçu du thème et couleurs — le bloc theme et les jetons de couleur.
• Typographie — le bloc fonts.
• Baseline et mode sombre — la seconde palette.
• Design responsive — breakpoints et surcharges par point de rupture.
• Composants de mise en page — les surfaces que ces jetons habillent.