enfrancais-app/src/assets/scss/_variables.scss

// Texte de départ (id: 9)
$color-starting: white;
// Texte critique (id: 22)
$color-critical: #ffba7d;
// Constellation en écho (id: 63)
$color-echo: #e191ff;
// Réflexion théorique (id: 6)
$color-thinking: #ffeb91;
// Lecture rapprochée (id: 7)
$color-reading: #a5a5ff;
// Expérience sensible (id: 8)
$color-experience: #cdae87;
// Kit de désapprentissage (id: 23)
$color-kit: #ff8873;

$families: (
  9: $color-starting,
  22: $color-critical,
  63: $color-echo,
  6: $color-thinking,
  7: $color-reading,
  8: $color-experience,
  23: $color-kit
);

@function setColorFromId($id) {
  @return map-get($families, $id);
}