# Charte Graphique - Blocks Orphic UI

## 1. Convention de Nommage

### 1.1 Préfixes Globaux

- Préfixe pour les blocks : `orphic-ui`
- Préfixe pour les classes CSS : `orphic-wp-block`
- Préfixe pour les variables CSS : `--orphic-wp-block`

### 1.2 Structure des Noms

#### Blocks

```
orphic-ui/nom-du-block
```

Exemples : `orphic-ui/carousel`, `orphic-ui/faq`

#### Classes CSS (BEM)

```
orphic-wp-block-[nom-du-block]__[element]--[modifier]
```

Exemples :

```css
.orphic-wp-block-faq__container
.orphic-wp-block-carousel__slide
.orphic-wp-block-button--primary
```

#### Variables CSS

```css
--orphic-wp-block-[catégorie]-[propriété]
```

Exemples :

```css
--orphic-wp-block-spacing-md
--orphic-wp-block-color-primary
```

## 2. Système de Couleurs

### 2.1 Couleurs Principales (Classic)

Ce sont les couleurs du theme pas default mais le nom des variables change pas.

```css
/* Couleurs de base */
--orphic-wp-block-plugin-color-primary: #0052cc;
--orphic-wp-block-plugin-color-secondary: #172b4d;
--orphic-wp-block-plugin-color-accent: #5487df;
--orphic-wp-block-plugin-color-background: transparent;
--orphic-wp-block-plugin-color-section-background: #f4f5f7;
--orphic-wp-block-plugin-color-text: #172b4d;
--orphic-wp-block-plugin-color-border: #ebecf0;

/* Couleurs d'état */
--orphic-wp-block-plugin-color-error: #de350b;
--orphic-wp-block-plugin-color-success: #36b37e;
--orphic-wp-block-plugin-color-warning: #ffab00;
--orphic-wp-block-plugin-color-info: #0065ff;

/* Backgrounds d'état */
--orphic-wp-block-plugin-color-success-background: #e6f9f4;
--orphic-wp-block-plugin-color-error-background: #ffbdad;
--orphic-wp-block-plugin-color-warning-background: #fff8e6;
--orphic-wp-block-plugin-color-info-background: #e6f4ff;
```

### 2.2 Opacités

```css
--orphic-wp-block-opacity-hover: 0.8;
--orphic-wp-block-opacity-disabled: 0.5;
--orphic-wp-block-opacity-overlay: 0.4;
```

## 3. Typographie

⚠️ **Règle Fondamentale pour les InnerBlocks** :

- Les styles typographiques définis ici ne doivent PAS être appliqués aux éléments `InnerBlocks` d'un bloc Gutenberg
- La typographie des `InnerBlocks` doit être héritée du `theme.json` du thème WordPress actif
- Seuls les éléments UI fixes de notre plugin doivent utiliser ces styles

### 3.1 Tailles de Police (Uniquement pour les éléments UI fixes)

```css
/* À utiliser UNIQUEMENT pour les éléments d'interface fixes comme :
 * - Boutons d'action
 * - Labels de configuration
 * - Messages système
 * - Éléments de navigation
 */
--orphic-wp-block-font-size-xs: 12px; /* Ex: Texte d'aide, badges */
--orphic-wp-block-font-size-sm: 14px; /* Ex: Boutons secondaires */
--orphic-wp-block-font-size-md: 16px; /* Ex: Labels, texte interface */
--orphic-wp-block-font-size-lg: 18px; /* Ex: Titres sections config */
--orphic-wp-block-font-size-xl: 24px; /* Ex: Titres modaux */
--orphic-wp-block-font-size-2xl: 32px; /* Ex: Grands titres fixes */
```

### 3.2 Poids de Police (Uniquement pour les éléments UI fixes)

```css
/* À utiliser UNIQUEMENT pour les éléments d'interface fixes */
--orphic-wp-block-font-weight-regular: 400; /* Ex: Texte normal interface */
--orphic-wp-block-font-weight-medium: 500; /* Ex: Labels importants */
--orphic-wp-block-font-weight-semibold: 600; /* Ex: Boutons, titres sections */
--orphic-wp-block-font-weight-bold: 700; /* Ex: Messages importants */
```

### 3.3 Polices Disponibles

```css
/* Plus Jakarta Sans - Pour les éléments UI fixes uniquement */
- Regular (400)  : Texte interface standard
- Medium (500)   : Labels et textes mis en avant
- SemiBold (600) : Boutons et titres sections
- Bold (700)     : Éléments critiques
- ExtraBold (800): Rarement utilisé, headers spéciaux
- Light (300)    : Textes secondaires
- ExtraLight (200): Usage très spécifique
```

### 3.4 Exemple d'Application Correcte

```css
/* ✅ CORRECT : Élément d'interface fixe */
.orphic-wp-block-config-panel__label {
	font-size: var(--orphic-wp-block-font-size-sm);
	font-weight: var(--orphic-wp-block-font-weight-medium);
}

/* ❌ INCORRECT : Ne jamais styler les innerBlocks */
.orphic-wp-block-wrapper .wp-block-paragraph {
	font-size: var(--orphic-wp-block-font-size-md); /* NON! */
}
```

### 3.5 Gestion des InnerBlocks

```css
/* Règle d'or : Laisser le theme.json gérer la typographie des innerBlocks */
.orphic-wp-block-wrapper {
	/* ✅ Les innerBlocks hériteront naturellement du theme.json */
	.block-editor-block-list__layout {
		/* Ne pas définir de styles typographiques ici */
	}
}
```

## 4. Espacement

### 4.1 Échelle d'Espacement

```css
--orphic-wp-block-spacing-xs: 4px;
--orphic-wp-block-spacing-sm: 8px;
--orphic-wp-block-spacing-md: 16px;
--orphic-wp-block-spacing-lg: 24px;
--orphic-wp-block-spacing-xl: 32px;
--orphic-wp-block-spacing-2xl: 48px;
```

## 5. Animations

### 5.1 Durées

```css
--orphic-wp-block-duration-fast: 0.2s;
--orphic-wp-block-duration-normal: 0.3s;
--orphic-wp-block-duration-slow: 0.5s;
```

### 5.2 Courbes d'Animation

```css
--orphic-wp-block-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--orphic-wp-block-ease-in: cubic-bezier(0.4, 0, 1, 1);
--orphic-wp-block-ease-out: cubic-bezier(0, 0, 0.2, 1);
--orphic-wp-block-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
```

## 6. Ombres

```css
--orphic-wp-block-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--orphic-wp-block-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--orphic-wp-block-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
```

## 7. Bordures et Arrondis

```css
/* Rayons de bordure */
--orphic-wp-block-border-radius-sm: 4px;
--orphic-wp-block-border-radius-md: 8px;
--orphic-wp-block-border-radius-lg: 16px;
--orphic-wp-block-border-radius-full: 9999px;

/* Épaisseurs de bordure */
--orphic-wp-block-border-width-thin: 1px;
--orphic-wp-block-border-width-medium: 2px;
--orphic-wp-block-border-width-thick: 4px;
```

## 8. Composants Communs

### 8.1 Bouton d'Ajout

```css
.orphic-wp-block-wrapper__add-button {
	position: absolute !important;
	bottom: 0 !important;
	right: var(--orphic-wp-block-spacing-md) !important;
	z-index: 1000 !important;
	background: var(--orphic-wp-block-plugin-color-primary) !important;
	color: var(--orphic-wp-block-plugin-color-background) !important;
	border: none !important;
	border-radius: var(--orphic-wp-block-border-radius-full);
	padding: var(--orphic-wp-block-spacing-sm) var(--orphic-wp-block-spacing-lg);
	box-shadow: var(--orphic-wp-block-shadow-md);
	display: flex;
	align-items: center;
	gap: var(--orphic-wp-block-spacing-sm);
	transition: all var(--orphic-wp-block-duration-fast) var(
			--orphic-wp-block-ease-default
		);
	font-size: var(--orphic-wp-block-font-size-sm);
}
```

### 8.2 Animation de Base

```css
.orphic-motion-animation {
	visibility: hidden;
	will-change: transform, opacity;
}

.orphic-motion-animation[data-animation-type="fadeIn"] {
	transform: none !important;
}
```

## 9. Bonnes Pratiques

### 9.1 Utilisation des Variables

- Toujours utiliser les variables CSS définies
- Ne pas créer de nouvelles variables sans nécessité
- Respecter la hiérarchie des variables (plugin > block)

### 9.2 Responsive Design

```css
/* Mobile */
@media (max-width: 768px) {
	/* Styles */
}

/* Tablet */
@media (min-width: 768px) and (max-width: 950px) {
	/* Styles */
}

/* Desktop */
@media (min-width: 1025px) {
	/* Styles */
}
```

### 9.3 Performance

- Maximum 3 niveaux de sélecteurs
- Privilégier les classes aux sélecteurs d'éléments
- Éviter !important sauf pour les composants critiques

### 9.4 Accessibilité

- Contraste minimum : 4.5:1 pour le texte normal
- Taille de police minimum : 12px
- États de focus visibles obligatoires

## 10. Gestion des États

### 10.1 États de Base

```css
/* Hover */
element:hover {
	opacity: var(--orphic-wp-block-opacity-hover);
}

/* Disabled */
element:disabled {
	opacity: var(--orphic-wp-block-opacity-disabled);
}

/* Focus */
element:focus {
	box-shadow: 0 0 0 2px var(--orphic-wp-block-plugin-color-primary);
}
```

### 10.2 États de Message

```css
/* Success */
.message--success {
	background: var(--orphic-wp-block-plugin-color-success-background);
	color: var(--orphic-wp-block-plugin-color-success);
}

/* Error */
.message--error {
	background: var(--orphic-wp-block-plugin-color-error-background);
	color: var(--orphic-wp-block-plugin-color-error);
}

/* Warning */
.message--warning {
	background: var(--orphic-wp-block-plugin-color-warning-background);
	color: var(--orphic-wp-block-plugin-color-warning);
}

/* Info */
.message--info {
	background: var(--orphic-wp-block-plugin-color-info-background);
	color: var(--orphic-wp-block-plugin-color-info);
}
```
