serv_benchmark/.gemini/skills/frontend-creator/references/css_variables.md

Variables CSS (Thème)

Le projet utilise des variables CSS pour maintenir une cohérence visuelle.

Variables de Layout

:root {
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Font */
  --font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  --font-mono: 'Courier New', Courier, monospace;

  /* Icon sizing */
  --section-icon-size: 32px;
  --button-icon-size: 24px;
  --icon-btn-size: 42px;
  --icon-btn-icon-size: 26px;
}

Thème Monokai (exemple de couleurs courantes)

Les couleurs du thème sont définies dans monokai.css et themes/. Généralement :

• --bg-primary : Fond principal.
• --bg-secondary : Fond des cartes/sections.
• --text-primary : Texte principal.
• --color-primary : Couleur d'accentuation (souvent jaune/orange Monokai).
• --border-color : Couleur des bordures.
• --color-danger : Rouge pour les erreurs/suppression.
• --color-success : Vert pour les succès.