Couleurs
Intégration des Couleurs
Le color picker AVS offre trois formats d'export pour intégrer facilement les couleurs dans votre projet.
Pourquoi ce sujet est important
Que vous utilisiez des variables CSS natives, Tailwind CSS v4, ou JavaScript/TypeScript, le color picker AVS vous fournit le format adapté à votre workflow.
Explication
Variables CSS
Exportez en CSS pour utiliser les variables CSS natives :
globals.css
:root {
--avs-primary: #C0573E; /* primary · avs-primary */
--avs-secondary: #F5EBE0; /* secondary · avs-secondary */
--avs-accent: #1D1D1B; /* accent · avs-accent */
--avs-mist: #B0C4C8; /* neutral · avs-mist */
}
/* Utilisation */
.button {
background: var(--avs-primary);
color: var(--avs-secondary);
}Tailwind CSS v4
Avec Tailwind CSS v4, utilisez les variables CSS natives dans votre fichier CSS :
app.css
@import "tailwindcss";
@theme {
--color-avs-primary: #C0573E;
--color-avs-secondary: #F5EBE0;
--color-avs-accent: #1D1D1B;
--color-avs-mist: #B0C4C8;
}
/* Utilisation */
<button class="bg-avs-primary text-avs-secondary">
Cliquez-moi
</button>JSON pour JavaScript/TypeScript
Exportez en JSON pour utiliser dans votre code JS/TS :
avs-colors.json
{
"primary": {
"name": "avs-primary",
"hex": "#C0573E",
"css": "--avs-primary"
},
"secondary": {
"name": "avs-secondary",
"hex": "#F5EBE0",
"css": "--avs-secondary"
},
"accent": {
"name": "avs-accent",
"hex": "#1D1D1B",
"css": "--avs-accent"
},
"neutral": {
"name": "avs-mist",
"hex": "#B0C4C8",
"css": "--avs-mist"
}
}
// Utilisation
const colors = require('./avs-colors.json');
const primaryColor = colors.primary.hex;