Package Exports

chromatic-ui-themes
chromatic-ui-themes/dist/index.cjs.js
chromatic-ui-themes/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chromatic-ui-themes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎨 Chromatic UI Themes

Une bibliothèque de thèmes React moderne et flexible qui offre une collection de thèmes magnifiques et une API simple pour créer des interfaces utilisateur cohérentes et personnalisables.

✨ Caractéristiques

🎯 Simple & Intuitif - API minimaliste avec classes CSS courtes
🌈 Thèmes Magnifiques - Collection de thèmes light/dark pré-conçus
⚡ Performances - Variables CSS natives, changement de thème instantané
🔧 TypeScript - Support complet avec types intégrés
🎪 Flexible - Compatible avec Tailwind, Bootstrap ou CSS vanilla
📱 Responsive - Conçu pour tous les écrans
♿ Accessible - Respecte les standards WCAG
🌙 Mode Sombre - Basculement light/dark automatique

📦 Installation

npm install chromatic-ui-themes

yarn add chromatic-ui-themes

pnpm add chromatic-ui-themes

🚀 Utilisation Rapide

1. Configuration de base

import React from 'react';
import { ThemeProvider } from 'chromatic-ui-themes';
import 'chromatic-ui-themes/dist/themes.css'; // 📌 Important !

function App() {
  return (
    <ThemeProvider defaultTheme="oceanic-light">
      <div className="min-h-screen bg-background">
        <h1 className="text-4xl font-bold primary">
          Hello Chromatic UI! 🎨
        </h1>
        <p className="text-lg secondary mt-4">
          Votre interface avec des couleurs magnifiques
        </p>
        <button className="btn-primary px-6 py-3 rounded-lg mt-6 cursor-pointer">
          Get Started
        </button>
      </div>
    </ThemeProvider>
  );
}

export default App;

⚠️ Important : N'oubliez pas d'importer le CSS 'chromatic-ui-themes/dist/themes.css'

2. Utilisation des classes CSS

// Classes de couleurs de texte
<h1 className="primary">Titre principal</h1>
<p className="secondary">Texte secondaire</p>
<span className="text-muted">Texte atténué</span>

// Classes de background
<div className="bg-primary">Fond principal</div>
<div className="bg-surface p-6">Carte/Surface</div>
<div className="bg-accent">Fond d'accent</div>

// Classes de bordures
<div className="border border-color">Bordure par défaut</div>
<div className="border-2 border-primary">Bordure colorée</div>

// Classes d'état
<div className="success">Texte de succès</div>
<div className="bg-error text-white">Message d'erreur</div>
<div className="warning">Avertissement</div>

🎨 Thèmes Disponibles

Thèmes Clairs (Light)

Thème	Nom	Description
`oceanic-light`	Oceanic Light	Bleus océan apaisants avec accents corail
`sakura-light`	Sakura Light	Roses cerisier délicats et violets doux
`forest-light`	Forest Light	Verts naturels avec accents terre
`sunset-light`	Sunset Light	Oranges chaleureux et violets crépusculaires
`arctic-light`	Arctic Light	Bleus glaciaires et tons cristallins

Thèmes Sombres (Dark)

Thème	Nom	Description
`arctic-dark`	Arctic Dark	Version sombre du thème arctique

Plus de thèmes sombres arrivent bientôt !

🛠️ API Complète

ThemeProvider

Le composant principal qui enveloppe votre application.

import { ThemeProvider } from 'chromatic-ui-themes';

<ThemeProvider 
  defaultTheme="sakura-light"  // Thème par défaut
  themes={customThemes}        // Thèmes personnalisés (optionnel)
>
  {/* Votre app */}
</ThemeProvider>

Props

Prop	Type	Défaut	Description
`defaultTheme`	`string`	`'oceanic-light'`	Nom du thème par défaut
`themes`	`Theme[]`	`allThemes`	Liste des thèmes disponibles
`children`	`ReactNode`	-	Contenu de l'application

Hooks

useTheme()

Hook principal pour interagir avec les thèmes.

import { useTheme } from 'chromatic-ui-themes';

function MyComponent() {
  const { 
    currentTheme,      // Thème actuel
    setTheme,          // Fonction pour changer de thème  
    availableThemes,   // Liste des thèmes disponibles
    isDarkMode,        // Boolean si mode sombre
    toggleDarkMode     // Basculer light/dark
  } = useTheme();

  return (
    <div>
      <h2>Thème actuel: {currentTheme.displayName}</h2>
      <button onClick={() => setTheme('sakura-light')}>
        Sakura Theme
      </button>
      <button onClick={toggleDarkMode}>
        {isDarkMode ? '☀️' : '🌙'}
      </button>
    </div>
  );
}

useThemeColors()

Accès direct aux couleurs du thème actuel.

import { useThemeColors } from 'chromatic-ui-themes';

function ColorPalette() {
  const colors = useThemeColors();
  
  return (
    <div>
      <div style={{ backgroundColor: colors.primary }}>
        Couleur primaire: {colors.primary}
      </div>
      <div style={{ backgroundColor: colors.secondary }}>
        Couleur secondaire: {colors.secondary}
      </div>
    </div>
  );
}

useIsDarkMode()

import { useIsDarkMode } from 'chromatic-ui-themes';

function ThemeIcon() {
  const isDark = useIsDarkMode();
  return <span>{isDark ? '🌙' : '☀️'}</span>;
}

useToggleDarkMode()

import { useToggleDarkMode } from 'chromatic-ui-themes';

function ThemeToggle() {
  const toggleDarkMode = useToggleDarkMode();
  return (
    <button onClick={toggleDarkMode}>
      Basculer le thème
    </button>
  );
}

🎭 Classes CSS Disponibles

Classes de Couleurs de Texte

.primary           /* Couleur primaire */
.primary-light     /* Primaire claire */
.primary-dark      /* Primaire sombre */
.secondary         /* Couleur secondaire */
.secondary-light   /* Secondaire claire */
.secondary-dark    /* Secondaire sombre */
.accent            /* Couleur d'accent */
.accent-light      /* Accent claire */
.accent-dark       /* Accent sombre */
.text              /* Texte par défaut */
.text-secondary    /* Texte secondaire */
.text-muted        /* Texte atténué */
.text-inverse      /* Texte inversé */

Classes de Couleurs de Fond

.bg-primary        /* Fond primaire */
.bg-primary-light  /* Fond primaire clair */
.bg-primary-dark   /* Fond primaire sombre */
.bg-secondary      /* Fond secondaire */
.bg-accent         /* Fond accent */
.bg-background     /* Fond principal */
.bg-surface        /* Fond de surface */
.bg-success        /* Fond de succès */
.bg-warning        /* Fond d'avertissement */
.bg-error          /* Fond d'erreur */
.bg-info           /* Fond d'information */

Classes de Bordures

.border-primary    /* Bordure primaire */
.border-secondary  /* Bordure secondaire */
.border-accent     /* Bordure accent */
.border-color      /* Bordure par défaut */
.border-light      /* Bordure claire */
.border-dark       /* Bordure sombre */
.border-success    /* Bordure de succès */
.border-warning    /* Bordure d'avertissement */
.border-error      /* Bordure d'erreur */
.border-info       /* Bordure d'information */

Classes d'État

.success           /* Texte de succès */
.success-light     /* Succès clair */
.success-dark      /* Succès sombre */
.warning           /* Texte d'avertissement */
.warning-light     /* Avertissement clair */
.warning-dark      /* Avertissement sombre */
.error             /* Texte d'erreur */
.error-light       /* Erreur claire */
.error-dark        /* Erreur sombre */
.info              /* Texte d'information */
.info-light        /* Information claire */
.info-dark         /* Information sombre */

Classes avec Hover

.hover-primary:hover     /* Texte primaire au hover */
.hover-secondary:hover   /* Texte secondaire au hover */
.hover-accent:hover      /* Texte accent au hover */
.hover-bg-primary:hover  /* Fond primaire au hover */
.hover-bg-secondary:hover /* Fond secondaire au hover */
.hover-bg-accent:hover   /* Fond accent au hover */

Classes de Boutons Pré-stylés

.btn-primary           /* Bouton primaire */
.btn-secondary         /* Bouton secondaire */
.btn-outline-primary   /* Bouton outline primaire */

Classes de Liens

.link-primary          /* Lien primaire avec hover */

🎨 Variables CSS Disponibles

Toutes les couleurs sont disponibles comme variables CSS :

:root {
  /* Couleurs principales */
  --theme-primary: #0077BE;
  --theme-primaryLight: #4A9FD9;
  --theme-primaryDark: #005A8A;
  
  /* Couleurs secondaires */
  --theme-secondary: #17A2B8;
  --theme-secondaryLight: #5BC0DE;
  --theme-secondaryDark: #117A8B;
  
  /* Et toutes les autres... */
}

Vous pouvez les utiliser directement dans votre CSS :

.my-custom-class {
  color: var(--theme-primary);
  background-color: var(--theme-surface);
  border: 1px solid var(--theme-border);
}

🔧 Utilisation avec Tailwind CSS

Chromatic UI fonctionne parfaitement avec Tailwind ! Combinez les utilitaires Tailwind avec nos classes de couleurs :

<div className="flex items-center justify-between p-6 bg-surface rounded-xl shadow-lg border border-color">
  <h2 className="text-2xl font-bold primary">Mon Titre</h2>
  <button className="bg-accent text-white px-4 py-2 rounded-lg font-medium hover:bg-accent-dark transition-colors">
    Action
  </button>
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
  <div className="bg-success-light border-l-4 border-success p-4 rounded">
    <p className="success-dark font-semibold">Succès</p>
  </div>
  <div className="bg-warning-light border-l-4 border-warning p-4 rounded">
    <p className="warning-dark font-semibold">Attention</p>
  </div>
  <div className="bg-error-light border-l-4 border-error p-4 rounded">
    <p className="error-dark font-semibold">Erreur</p>
  </div>
</div>

🎯 Exemples Pratiques

Sélecteur de Thème

import { useTheme } from 'chromatic-ui-themes';

function ThemeSelector() {
  const { currentTheme, setTheme, availableThemes } = useTheme();

  return (
    <div className="bg-surface p-6 rounded-lg border border-color">
      <h3 className="text-lg font-semibold primary mb-4">Choisir un thème</h3>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        {availableThemes.map((theme) => (
          <button
            key={theme.name}
            onClick={() => setTheme(theme.name)}
            className={`p-3 rounded border-2 transition-all ${
              currentTheme.name === theme.name
                ? 'border-primary bg-primary text-white'
                : 'border-color bg-background hover:border-primary'
            }`}
          >
            {theme.displayName}
          </button>
        ))}
      </div>
    </div>
  );
}

Carte avec Actions

function ActionCard() {
  return (
    <div className="bg-surface rounded-xl shadow-lg border border-color overflow-hidden">
      <div className="bg-primary text-white p-4">
        <h3 className="text-xl font-bold">Titre de la Carte</h3>
        <p className="text-primary-light">Description rapide</p>
      </div>
      
      <div className="p-6">
        <p className="secondary mb-4">
          Contenu principal de la carte avec du texte explicatif.
        </p>
        
        <div className="flex gap-3">
          <button className="btn-primary px-4 py-2 rounded font-medium">
            Action Principale
          </button>
          <button className="btn-outline-primary px-4 py-2 rounded font-medium">
            Action Secondaire
          </button>
        </div>
      </div>
      
      <div className="bg-background-light p-4 border-t border-color">
        <span className="text-muted text-sm">Dernière mise à jour: il y a 2h</span>
      </div>
    </div>
  );
}

Formulaire Thématisé

function ThemedForm() {
  return (
    <form className="bg-surface p-8 rounded-xl shadow-lg border border-color max-w-md mx-auto">
      <h2 className="text-2xl font-bold primary mb-6 text-center">Connexion</h2>
      
      <div className="mb-4">
        <label className="block secondary font-medium mb-2">Email</label>
        <input
          type="email"
          className="w-full p-3 border border-color rounded-lg bg-background focus:border-primary focus:outline-none transition-colors"
          placeholder="votre.email@exemple.com"
        />
      </div>
      
      <div className="mb-6">
        <label className="block secondary font-medium mb-2">Mot de passe</label>
        <input
          type="password"
          className="w-full p-3 border border-color rounded-lg bg-background focus:border-primary focus:outline-none transition-colors"
          placeholder="••••••••"
        />
      </div>
      
      <button
        type="submit"
        className="w-full btn-primary py-3 rounded-lg font-medium text-lg mb-4"
      >
        Se connecter
      </button>
      
      <p className="text-center text-muted">
        Pas de compte ? 
        <a href="#" className="link-primary ml-1">S'inscrire</a>
      </p>
    </form>
  );
}

Dashboard avec Statistiques

function StatsDashboard() {
  const stats = [
    { label: 'Utilisateurs', value: '2,543', change: '+12%', type: 'success' },
    { label: 'Ventes', value: '€18,752', change: '+8%', type: 'success' },
    { label: 'Commandes', value: '156', change: '-3%', type: 'error' },
    { label: 'Revenus', value: '€52,348', change: '+15%', type: 'success' },
  ];

  return (
    <div className="bg-background min-h-screen p-6">
      <h1 className="text-3xl font-bold primary mb-8">Dashboard</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {stats.map((stat, index) => (
          <div key={index} className="bg-surface p-6 rounded-xl border border-color">
            <h3 className="secondary font-medium mb-2">{stat.label}</h3>
            <div className="flex items-end justify-between">
              <span className="text-2xl font-bold text">{stat.value}</span>
              <span className={`text-sm font-medium ${stat.type}`}>
                {stat.change}
              </span>
            </div>
          </div>
        ))}
      </div>
      
      <div className="bg-surface rounded-xl border border-color p-6">
        <h2 className="text-xl font-semibold primary mb-4">Activité Récente</h2>
        <div className="space-y-4">
          {[1, 2, 3].map((item) => (
            <div key={item} className="flex items-center justify-between py-3 border-b border-color last:border-b-0">
              <div>
                <p className="font-medium text">Nouvelle commande #00{item}23</p>
                <p className="text-sm text-muted">Il y a {item * 2} heures</p>
              </div>
              <span className="bg-success-light text-success-dark px-3 py-1 rounded-full text-sm font-medium">
                Confirmée
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

🎨 Créer un Thème Personnalisé

import { Theme } from 'chromatic-ui-themes';

const monThemeCustom: Theme = {
  name: 'mon-theme-custom',
  displayName: 'Mon Thème Custom',
  category: 'light',
  colors: {
    // Couleurs principales
    primary: '#6366F1',
    primaryLight: '#818CF8',
    primaryDark: '#4338CA',
    
    // Couleurs secondaires  
    secondary: '#10B981',
    secondaryLight: '#34D399',
    secondaryDark: '#059669',
    
    // Couleurs d'accent
    accent: '#F59E0B',
    accentLight: '#FBB142',
    accentDark: '#D97706',
    
    // Couleurs de fond
    background: '#FAFAFA',
    backgroundLight: '#FFFFFF',
    backgroundDark: '#F5F5F5',
    surface: '#FFFFFF',
    surfaceLight: '#FAFAFA',
    surfaceDark: '#F5F5F5',
    
    // Couleurs de texte
    text: '#1F2937',
    textSecondary: '#4B5563',
    textMuted: '#9CA3AF',
    textInverse: '#FFFFFF',
    
    // Couleurs de bordure
    border: '#E5E7EB',
    borderLight: '#F3F4F6',
    borderDark: '#D1D5DB',
    
    // Couleurs d'état
    success: '#10B981',
    successLight: '#6EE7B7',
    successDark: '#059669',
    warning: '#F59E0B',
    warningLight: '#FCD34D',
    warningDark: '#D97706',
    error: '#EF4444',
    errorLight: '#FCA5A5',
    errorDark: '#DC2626',
    info: '#3B82F6',
    infoLight: '#93C5FD',
    infoDark: '#1D4ED8',
  },
};

// Utilisation
<ThemeProvider defaultTheme="mon-theme-custom" themes={[monThemeCustom]}>
  <App />
</ThemeProvider>

🔧 Utilitaires

generateCSSVariables

Génère les variables CSS pour un thème :

import { generateCSSVariables } from 'chromatic-ui-themes';

const cssVariables = generateCSSVariables(monTheme);
console.log(cssVariables);
// :root {
//   --theme-primary: #6366F1;
//   --theme-primaryLight: #818CF8;
//   ...
// }

applyThemeToDOM

Applique un thème directement au DOM :

import { applyThemeToDOM } from 'chromatic-ui-themes';

applyThemeToDOM(monTheme);

Fonctions d'accessibilité

import { getContrastRatio, isAccessible, hexToRgb } from 'chromatic-ui-themes';

// Calculer le contraste entre deux couleurs
const contrast = getContrastRatio('#000000', '#FFFFFF'); // 21

// Vérifier l'accessibilité WCAG
const accessible = isAccessible('#000000', '#FFFFFF'); // true

// Convertir hex vers RGB
const rgb = hexToRgb('#FF0000'); // { r: 255, g: 0, b: 0 }

📱 Responsive Design

Toutes les classes fonctionnent parfaitement avec les breakpoints :

<div className="bg-surface p-4 md:p-8 rounded-lg border border-color">
  <h2 className="primary text-lg md:text-2xl font-bold mb-4">
    Titre Responsive
  </h2>
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div className="bg-accent text-white p-4 rounded">Item 1</div>
    <div className="bg-secondary text-white p-4 rounded">Item 2</div>
    <div className="bg-primary text-white p-4 rounded">Item 3</div>
  </div>
</div>

♿ Accessibilité

Chromatic UI respecte les standards WCAG :

✅ Contraste minimum de 4.5:1 (AA)
✅ Support des lecteurs d'écran
✅ Navigation au clavier
✅ Focus visible
✅ Couleurs ne sont pas la seule indication

// Utilisation avec attributs d'accessibilité
<button 
  className="btn-primary"
  aria-label="Sauvegarder le document"
  tabIndex={0}
>
  💾 Sauvegarder
</button>

<div 
  className="bg-error-light border border-error p-4 rounded"
  role="alert"
  aria-live="polite"
>
  <span className="error-dark">⚠️ Erreur de validation</span>
</div>

🎯 TypeScript

Support TypeScript complet avec types exportés :

import { 
  Theme, 
  ThemeColors, 
  ThemeContextValue,
  ThemeCategory,
  useTheme 
} from 'chromatic-ui-themes';

// Composant typé
interface MyComponentProps {
  theme?: Theme;
  colors?: ThemeColors;
}

const MyComponent: React.FC<MyComponentProps> = ({ theme, colors }) => {
  const { currentTheme }: ThemeContextValue = useTheme();
  
  return (
    <div style={{ color: colors?.primary || currentTheme.colors.primary }}>
      Thème: {currentTheme.displayName}
    </div>
  );
};

🚀 Performance

⚡ Variables CSS natives - Pas de recalculs JavaScript
🎯 CSS optimisé - Classes minimalistes avec !important ciblé
📦 Bundle léger - ~5KB gzippé
♻️ Changement de thème instantané - Pas de re-render React
🎨 Lazy loading - Chargez seulement les thèmes utilisés

🔄 Migration & Mises à Jour

Depuis v1.0.0

npm update chromatic-ui-themes

Pas de breaking changes, ajout de nouveaux thèmes et fonctionnalités.

🤝 Contribution

Les contributions sont les bienvenues !

Fork le projet
Créez votre branche (git checkout -b feature/AmazingFeature)
Commitez vos changements (git commit -m 'Add: Amazing Feature')
Push la branche (git push origin feature/AmazingFeature)
Ouvrez une Pull Request

Ajouter un Nouveau Thème

Créez un fichier dans src/themes/light/ ou src/themes/dark/
Suivez la structure des thèmes existants
Ajoutez-le à l'index du dossier
Testez l'accessibilité avec nos utilitaires
Ajoutez une documentation

📄 License

🙏 Remerciements

Inspiré par les meilleures bibliothèques UI modernes
Communauté React pour les retours
Contributeurs et testeurs

Fait avec ❤️ pour la communauté React

Documentation • Exemples • NPM