Arkkad Design System

Design system TailwindCSS réutilisable pour tous les produits Arkkad. Objectif : cohérence, rapidité d’exécution, et identité visuelle claire.

Installation

Depuis npm :

npm i @arkkad/design-system

Depuis ce repo :

npm install

Build du CSS

npm run build

Le fichier généré :

• dist/tailwind.css

Utilisation dans un projet

1. Installer le package (workspace ou via repo).
2. Ajouter le preset dans tailwind.config.js.
3. Importer le CSS généré.

Exemple tailwind.config.js :

module.exports = {
  presets: [require("@arkkad/design-system/preset")],
  content: ["./src/**/*.{html,js,ts,jsx,tsx,php}"]
};

Importer le CSS :

@import "@arkkad/design-system/styles";

Documentation

Principes

• Un produit = une couleur accent.
  Chaque site doit définir sa propre --color-accent. Cela évite la confusion entre produits tout en gardant une base visuelle commune.
• Structure constante.
  La sidebar/aside doit rester la même (logo + bouton de réduction en haut, navigation par catégories, module compte en bas).
• Typo unique.
  OTSono est la police officielle (Regular pour le corps, Medium pour les titres).
• Pas d’ombres.
  Aucune box-shadow dans le DS (choix volontaire pour un look net et sobre).

Tokens de base

:root {
  --color-text: #14140f;
  --color-card: #ffffff;
  --color-accent: #2e5dff; /* à changer par produit */
}

Sidebar / Aside (structure obligatoire)

Structure attendue :

1. En haut : logo + bouton de réduction
2. Navigation par catégories (dropdowns)
3. En bas : module compte (infos, paramètres, déconnexion)

Le layout est standardisé dans src/components/base/header.php.

Exemple de sidebar :

<aside class="sidebar flex w-72 flex-col border-r border-[#f5f5eb] bg-white text-[var(--color-text)] min-h-screen">
  <div class="flex items-center justify-between border-b border-[#f5f5eb] px-6 py-5">
    <div class="flex items-center gap-3">
      <div class="flex h-10 w-10 items-center justify-center rounded-md bg-[var(--color-accent)] text-white font-medium">A</div>
      <div class="sidebar-text">
        <h1 class="text-lg font-medium">Arkkad</h1>
        <p class="text-xs text-black/50">Legal Operations</p>
      </div>
    </div>
    <button class="btn-ghost px-2 py-1 text-xs" type="button" data-sidebar-toggle aria-label="Réduire le menu">←</button>
  </div>

  <nav class="flex-1 overflow-y-auto px-4 py-6 space-y-4">
    <details open class="group">
      <summary class="flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs font-medium uppercase tracking-[0.2em] text-black/50 hover:text-black/70">
        <span class="sidebar-section">Pilotage</span>
        <span class="text-[10px] transition group-open:rotate-180">⌄</span>
      </summary>
      <div class="mt-2 space-y-1">
        <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60">Dashboard</a>
        <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60">Sociétés</a>
        <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60">Documents</a>
      </div>
    </details>
  </nav>

  <div class="border-t border-[#f5f5eb] p-4">
    <div class="rounded-md border border-[#f5f5eb] bg-white p-4 space-y-2">
      <div class="sidebar-section text-xs font-medium uppercase tracking-[0.2em] text-black/50">Compte</div>
      <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60">Infos</a>
      <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60">Paramètres</a>
      <a href="#" class="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-black/80 hover:bg-[#f5f5eb]/60">Déconnexion</a>
    </div>
  </div>
</aside>

Pages d’auth

Les pages d’auth doivent suivre le même style DS :

• fond clair
• cartes / forms avec .card
• inputs .input
• boutons .btn-primary

Si besoin, duplique la structure de views/login.php et conserve les classes DS.

Nouveautés (dernière version)

• Tableaux avancés (toolbar, sélection, tri)
• Charts (line, bars, donut, sparkline)
• Icônes unifiées + chips
• Asides et templates auth
• Dropdown + pseudo-select (dropdown custom)
• Timelines, calendriers, progress bars
• Filtres et listes d’items en carte
• Skeleton loaders, switch, tags input, multi-select
• Breadcrumb, context menu, file upload
• Border-radius badges/chips: 4px

Composants principaux

Buttons

• .btn, .btn-primary, .btn-ghost

Inputs

• .input, .select, .input-error, .input-help, .input-error-text
• .select-dropdown, .select-trigger, .select-dropdown-menu, .select-option

Cards

• .card

Badges / Tags

• .badge, .badge-brand, .badge-soft, .badge-new
• .badge-success, .badge-warning, .badge-error
• .chip, .tag, .tags-input

Tables

• .table, .table-zebra, .table-compact
• .table-cell-muted, .table-cell-strong
• .table-shell, .table-toolbar, .table-sort, .table-check

Alerts / Toasts

• .alert, .alert-info, .alert-success, .alert-warning, .alert-danger
• .toast, .toast-success, .toast-warning, .toast-error

Layout

• .navbar, .tabs, .tab, .tab-active
• .aside-panel, .auth-shell

Charts

• .chart-card, .chart-grid, .chart-line, .chart-bars, .chart-donut

Autres

• .timeline, .calendar, .progress
• .filter-bar, .item-card, .dropdown
• .skeleton, .switch, .breadcrumb
• .context-menu, .upload

Bonnes pratiques

• Toujours utiliser .card pour les blocs de contenu.
• Utiliser .select pour un <select> natif ou .select-dropdown pour un dropdown custom.
• Utiliser .btn-primary pour l’action principale, .btn-ghost pour les actions secondaires.
• Remplacer les text-gray-* par text-[var(--color-text)] ou text-black/60.

Police OTSono (auto)

Le CSS du design system inclut les @font-face OTSono.
Les fichiers .woff/.woff2 sont packagés dans @arkkad/design-system/assets/fonts/OTSono.

Si ton bundler gère les assets (Vite, Webpack, etc.), l'import du CSS suffit.
Sinon, il faut copier ce dossier dans un chemin public et ajuster les URLs dans src/tailwind.css.

Variables de thème

Tu peux changer l’accent par site sans modifier le design system :

:root {
  --color-accent: #ff6b00;
}

Valeurs par défaut :

• --color-text: #14140f
• --color-card: #ffffff
• --color-accent: #2e5dff

Démo rapide

1. Builder le CSS.
2. Ouvrir demo/index.html dans un navigateur.

Notes

• La police OTSono est embarquée via @font-face dans le CSS.
• Les composants de base incluent btn, btn-primary, btn-ghost, card, input, select.