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 moderne de thèmes React avec support Tailwind CSS. Créez des interfaces magnifiques avec des palettes de couleurs soigneusement conçues.

✨ Fonctionnalités

🎨 5 thèmes light magnifiques (Oceanic, Sakura, Forest, Sunset, Arctic)
🌙 Support dark mode (thèmes dark à venir)
⚡ Compatible Tailwind CSS avec variables CSS automatiques
🎯 TypeScript - Support complet avec types
🪝 Hooks React - API simple et intuitive
♿ Utilitaires d'accessibilité - Vérification des contrastes WCAG
📱 Responsive - Fonctionne sur tous les appareils

📦 Installation

npm install @chromatic-ui/themes

🚀 Utilisation rapide

1. Enveloppez votre app avec ThemeProvider

import React from 'react';
import { ThemeProvider } from '@chromatic-ui/themes';

function App() {
  return (
    <ThemeProvider defaultTheme="oceanic-light">
      <div className="min-h-screen" style={{ backgroundColor: 'var(--theme-background)' }}>
        <h1 style={{ color: 'var(--theme-primary)' }}>
          Hello Chromatic UI! 🎨
        </h1>
      </div>
    </ThemeProvider>
  );
}

2. Utilisez les hooks dans vos composants

import { useTheme, useThemeColors } from '@chromatic-ui/themes';

function MyComponent() {
  const { currentTheme, setTheme, availableThemes } = useTheme();
  const colors = useThemeColors();

  return (
    <div>
      <h2 style={{ color: colors.primary }}>
        Thème actuel: {currentTheme.displayName}
      </h2>
      
      <select 
        value={currentTheme.name} 
        onChange={(e) => setTheme(e.target.value)}
      >
        {availableThemes.map(theme => (
          <option key={theme.name} value={theme.name}>
            {theme.displayName}
          </option>
        ))}
      </select>
    </div>
  );
}

🎨 Thèmes disponibles

Light Themes

Oceanic Light 🌊 - Bleu océan et turquoise
Sakura Light 🌸 - Rose cerisier et violet doux
Forest Light 🌿 - Vert nature et orange terre
Sunset Light ☀️ - Orange et rouge coucher de soleil
Arctic Light ❄️ - Bleu glaciaire et cyan cristal

Les thèmes dark arrivent bientôt !

🎯 Classes CSS disponibles

Après avoir importé le CSS, vous pouvez utiliser ces classes directement :

Couleurs de texte

<p class="primary">Texte primary</p>
<p class="secondary">Texte secondary</p>
<p class="accent">Texte accent</p>
<p class="success">Texte success</p>
<p class="warning">Texte warning</p>
<p class="error">Texte error</p>

Couleurs de fond

<div class="bg-primary">Background primary</div>
<div class="bg-secondary">Background secondary</div>
<div class="bg-surface">Background surface</div>
<div class="bg-success">Background success</div>

Boutons prêts à l'emploi

<button class="btn-primary">Bouton Primary</button>
<button class="btn-secondary">Bouton Secondary</button>
<button class="btn-outline-primary">Bouton Outline</button>

Couleurs de bordure

<div class="border border-primary">Bordure primary</div>
<div class="border border-accent">Bordure accent</div>

États hover

<div class="hover-primary">Hover primary</div>
<div class="hover-bg-secondary">Hover background</div>

🎯 Configuration Tailwind (optionnel)

Ajoutez cette configuration à votre tailwind.config.js pour utiliser les couleurs de thème :

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        'theme-primary': 'var(--theme-primary)',
        'theme-secondary': 'var(--theme-secondary)',
        'theme-accent': 'var(--theme-accent)',
        'theme-background': 'var(--theme-background)',
        'theme-surface': 'var(--theme-surface)',
        'theme-text': 'var(--theme-text)',
        // Ajoutez d'autres couleurs selon vos besoins
      }
    }
  },
  plugins: []
}

Puis utilisez dans vos classes :

<div className="bg-theme-background text-theme-text">
  <button className="bg-theme-primary text-white hover:bg-theme-primary-dark">
    Mon bouton
  </button>
</div>

🪝 API des Hooks

`useTheme()`

const { 
  currentTheme,      // Thème actuel
  setTheme,          // Changer de thème
  availableThemes,   // Liste des thèmes
  isDarkMode,        // Mode sombre actif ?
  toggleDarkMode     // Basculer light/dark
} = useTheme();

`useThemeColors()`

const colors = useThemeColors();
// Accès direct : colors.primary, colors.secondary, etc.

`useIsDarkMode()` & `useToggleDarkMode()`

const isDark = useIsDarkMode();
const toggleMode = useToggleDarkMode();

🛠️ Utilitaires

Génération CSS

import { generateCSSVariables, generateTailwindConfig } from '@chromatic-ui/themes';

// Générer les variables CSS pour un thème
const css = generateCSSVariables(oceanicLight);

// Générer la config Tailwind
const config = generateTailwindConfig(oceanicLight);

Vérification d'accessibilité

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

// Vérifier le contraste WCAG
const accessible = isAccessible('#000000', '#ffffff'); // true
const contrast = getContrastRatio('#000000', '#ffffff'); // 21

📁 Structure des couleurs

Chaque thème contient ces couleurs :

interface ThemeColors {
  // Couleurs principales
  primary: string;
  primaryLight: string;
  primaryDark: string;
  
  // Couleurs secondaires  
  secondary: string;
  secondaryLight: string;
  secondaryDark: string;
  
  // Couleurs d'accent
  accent: string;
  accentLight: string;
  accentDark: string;
  
  // Couleurs de fond
  background: string;
  backgroundLight: string;
  backgroundDark: string;
  surface: string;
  
  // Couleurs de texte
  text: string;
  textSecondary: string;
  textMuted: string;
  textInverse: string;
  
  // Couleurs de bordure
  border: string;
  borderLight: string;
  borderDark: string;
  
  // Couleurs d'état
  success: string;
  warning: string;  
  error: string;
  info: string;
  // + variations light/dark
}

🤝 Contribution

Les contributions sont les bienvenues !

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

📄 Licence

Distribué sous licence MIT. Voir LICENSE pour plus d'informations.

👨‍💻 Auteur

Kcyvx - @Kcyvx

🌟 Remerciements

Inspiré par les meilleures bibliothèques de design systems
Conçu pour s'intégrer parfaitement avec Tailwind CSS
Pensé pour les développeurs React modernes

🎨 Créé avec amour par Chromatic UI 🎨