@arkkad/design-system 0.1.0

package/README.md

@@ -0,0 +1,74 @@
+# Fondr Design System
+
+Design system TailwindCSS réutilisable sous forme de preset + CSS compilé.
+
+## Installation
+
+Depuis ce repo :
+
+```bash
+npm install
+```
+
+## Build du CSS
+
+```bash
+npm run build:ds
+```
+
+Le fichier généré :
+- `packages/fondr-design-system/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` :
+
+```js
+module.exports = {
+  presets: [require("@fondr/design-system/preset")],
+  content: ["./src/**/*.{html,js,ts,jsx,tsx,php}"]
+};
+```
+
+Importer le CSS :
+
+```css
+@import "@fondr/design-system/styles";
+```
+
+## Police OTSono (auto)
+
+Le CSS du design system inclut les `@font-face` OTSono.  
+Les fichiers `.woff/.woff2` sont packagés dans `@fondr/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 :
+
+```css
+:root {
+  --color-accent: #ff6b00;
+}
+```
+
+Valeurs par défaut :
+- `--color-text: #14140f`
+- `--color-card: #f5f5eb`
+- `--color-accent: #2e5dff`
+
+## Démo rapide
+
+1. Builder le CSS.
+2. Ouvrir `packages/fondr-design-system/demo/index.html` dans un navigateur.
+
+## Notes
+
+- Les polices `Inter` et `Space Grotesk` doivent être chargées (Google Fonts ou self-host).
+- Les composants de base incluent `btn`, `btn-primary` et `card`.

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@arkkad/design-system",
+  "version": "0.1.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "tailwind.preset.js",
+  "exports": {
+    ".": "./tailwind.preset.js",
+    "./preset": "./tailwind.preset.js",
+    "./styles": "./dist/tailwind.css"
+  },
+  "files": [
+    "assets",
+    "dist",
+    "src",
+    "tailwind.preset.js",
+    "tailwind.config.js"
+  ],
+  "devDependencies": {
+    "tailwindcss": "3.4.17"
+  },
+  "scripts": {
+    "build": "tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ./dist/tailwind.css",
+    "build:public": "tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ../../public/assets/style/design-system.css",
+    "dev:public": "tailwindcss -c tailwind.config.js -i ./src/tailwind.css -o ../../public/assets/style/design-system.css --watch"
+  }
+}

package/src/tailwind.css

@@ -0,0 +1,338 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "OTSono";
+  src: url("/public/assets/fonts/OTSono/OTSono-Regular.woff2") format("woff2"),
+    url("/public/assets/fonts/OTSono/OTSono-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "OTSono";
+  src: url("/public/assets/fonts/OTSono/OTSono-Medium.woff2") format("woff2"),
+    url("/public/assets/fonts/OTSono/OTSono-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+    --color-text: #14140f;
+    --color-card: #ffffff;
+    --color-accent: #2e5dff;
+  }
+
+  body {
+    font-family: theme("fontFamily.body");
+    font-weight: 400;
+    color: theme("colors.text");
+    background: #ffffff;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: theme("fontFamily.display");
+    font-weight: 500;
+    letter-spacing: -0.02em;
+  }
+
+  .shadow,
+  [class*="shadow-"] {
+    box-shadow: none !important;
+  }
+
+  .sidebar {
+    transition: width 200ms ease;
+  }
+
+  .sidebar-text,
+  .sidebar-section {
+    transition: opacity 150ms ease, transform 200ms ease;
+  }
+
+  .sidebar-collapsed .sidebar {
+    width: 88px !important;
+  }
+
+  .sidebar-collapsed .sidebar-text,
+  .sidebar-collapsed .sidebar-section {
+    opacity: 0;
+    transform: translateX(-8px);
+    pointer-events: none;
+  }
+
+  .sidebar-collapsed .sidebar summary {
+    justify-content: center;
+  }
+}
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm transition;
+    border-radius: 8px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .btn-primary {
+    @apply btn bg-accent text-white hover:brightness-95;
+    border-radius: 8px !important;
+    color: #ffffff;
+  }
+
+  .btn-primary:hover {
+    color: #ffffff;
+    filter: brightness(0.9);
+  }
+
+  .btn-ghost {
+    @apply btn border border-black/10 text-text hover:border-black/20;
+    border-width: 1.5px;
+    border-radius: 8px !important;
+  }
+
+  .card {
+    @apply rounded-lg border border-[#f5f5eb] bg-card p-6;
+    border-width: 1.5px;
+  }
+
+  .badge {
+    @apply inline-flex items-center rounded-full border border-black/10 bg-white px-2.5 py-1 text-xs font-semibold text-text;
+  }
+
+  .badge-brand {
+    @apply inline-flex items-center rounded-full border-transparent bg-accent px-2.5 py-1 text-xs font-semibold text-white;
+  }
+
+  .badge-soft {
+    @apply inline-flex items-center rounded-full border border-black/10 bg-[#f5f5eb] px-2.5 py-1 text-xs text-text;
+  }
+
+  .badge-new {
+    @apply inline-flex items-center rounded-full border border-transparent bg-black text-white px-2.5 py-1 text-xs;
+  }
+
+  .badge-success {
+    @apply inline-flex items-center rounded-full border border-transparent bg-[#1f7a3d] text-white px-2.5 py-1 text-xs;
+  }
+
+  .badge-warning {
+    @apply inline-flex items-center rounded-full border border-transparent bg-[#b76a00] text-white px-2.5 py-1 text-xs;
+  }
+
+  .badge-error {
+    @apply inline-flex items-center rounded-full border border-transparent bg-[#b91c1c] text-white px-2.5 py-1 text-xs;
+  }
+
+  .chip {
+    @apply inline-flex items-center gap-2 rounded-full border border-black/10 bg-white px-3 py-1 text-xs text-text;
+  }
+
+  .chip-dot::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: currentColor;
+    display: inline-block;
+  }
+
+  .alert {
+    @apply flex items-start gap-3 rounded-lg border border-black/10 bg-white p-4 text-sm text-text;
+  }
+
+  .alert-info {
+    @apply border-[#d9d9d1] bg-[#f8f8f2];
+  }
+
+  .alert-success {
+    @apply border-[#c9e7d0] bg-[#f3fbf5];
+  }
+
+  .alert-warning {
+    @apply border-[#f0dd9c] bg-[#fff9e6];
+  }
+
+  .alert-danger {
+    @apply border-[#f2c0c0] bg-[#fff2f2];
+  }
+
+  .input {
+    @apply w-full rounded-md border border-black/10 bg-white px-3 py-2 text-sm text-text transition focus:border-black/40 focus:outline-none;
+    border-width: 1.5px;
+  }
+
+  .select {
+    @apply w-full rounded-md border border-black/10 bg-white px-3 py-2 text-sm text-text transition focus:border-black/40 focus:outline-none;
+    appearance: none;
+    border-width: 1.5px;
+    background-image:
+      linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%),
+      linear-gradient(to right, transparent, transparent);
+    background-position:
+      calc(100% - 18px) calc(50% - 2px),
+      calc(100% - 12px) calc(50% - 2px),
+      calc(100% - 2.2rem) 50%;
+    background-size: 6px 6px, 6px 6px, 1px 60%;
+    background-repeat: no-repeat;
+    padding-right: 2.5rem;
+  }
+
+  .select option {
+    color: #14140f;
+  }
+
+  .input-error {
+    @apply border-red-400 focus:border-red-500;
+  }
+
+  .input-help {
+    @apply text-xs text-black/50;
+  }
+
+  .input-error-text {
+    @apply text-xs text-red-600;
+  }
+
+  .navbar {
+    @apply flex items-center justify-between gap-6 rounded-xl border border-black/10 bg-white/90 px-5 py-3 backdrop-blur;
+  }
+
+  .nav-link {
+    @apply text-sm font-semibold text-text transition hover:text-black;
+  }
+
+  .nav-link-active {
+    @apply text-accent;
+  }
+
+  .table {
+    @apply w-full border-collapse text-left text-sm;
+  }
+
+  .table thead th {
+    @apply border-b border-black/15 pb-3 text-xs font-semibold uppercase tracking-[0.2em] text-black/40;
+  }
+
+  .table tbody tr {
+    @apply border-b border-black/10;
+  }
+
+  .table tbody tr:hover {
+    @apply bg-black/5;
+  }
+
+  .table td {
+    @apply py-3 text-text;
+  }
+
+  .table-compact td {
+    @apply py-2;
+  }
+
+  .table-zebra tbody tr:nth-child(even) {
+    @apply bg-[#fafaf6];
+  }
+
+  .table-cell-muted {
+    @apply text-black/55;
+  }
+
+  .table-cell-strong {
+    @apply font-medium text-text;
+  }
+
+  .tooltip {
+    position: relative;
+  }
+
+  .tooltip::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    background: #14140f;
+    color: #ffffff;
+    font-size: 0.75rem;
+    padding: 6px 10px;
+    border-radius: 8px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 120ms ease;
+  }
+
+  .tooltip:hover::after,
+  .tooltip:focus-visible::after {
+    opacity: 1;
+  }
+
+  .tabs {
+    @apply flex items-center gap-2 border-b border-[#f5f5eb];
+  }
+
+  .tab {
+    @apply px-3 py-2 text-sm text-black/60 transition;
+    border-bottom: 2px solid transparent;
+  }
+
+  .tab-active {
+    @apply text-text;
+    border-bottom-color: var(--color-accent);
+  }
+
+  .modal-overlay {
+    @apply fixed inset-0 bg-black/30;
+  }
+
+  .modal {
+    @apply fixed left-1/2 top-1/2 w-[90vw] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-[#f5f5eb] bg-white p-6;
+  }
+
+  .pagination {
+    @apply flex items-center gap-2;
+  }
+
+  .page-link {
+    @apply inline-flex items-center justify-center border border-black/10 text-sm text-text;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+  }
+
+  .page-link-active {
+    @apply bg-accent text-white border-transparent;
+  }
+
+  .empty-state {
+    @apply flex flex-col items-center justify-center gap-2 rounded-lg border border-[#f5f5eb] bg-white p-8 text-center text-black/60;
+  }
+
+  .toast {
+    @apply flex items-start gap-3 rounded-lg border border-[#f5f5eb] bg-white px-4 py-3 text-sm text-text;
+  }
+
+  .toast-success {
+    @apply border-[#c9e7d0] bg-[#f3fbf5];
+  }
+
+  .toast-warning {
+    @apply border-[#f0dd9c] bg-[#fff9e6];
+  }
+
+  .toast-error {
+    @apply border-[#f2c0c0] bg-[#fff2f2];
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require("./tailwind.preset.js")],
+  content: [
+    "./src/**/*.{css,html,js,ts,jsx,tsx}",
+    "../../src/**/*.{php,html,js,ts,jsx,tsx}",
+    "../../views/**/*.{php,html}",
+    "../../public/**/*.{php,html,js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {}
+  }
+};

package/tailwind.preset.js

@@ -0,0 +1,29 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        accent: "var(--color-accent)",
+        text: "var(--color-text)",
+        card: "var(--color-card)"
+      },
+      fontFamily: {
+        display: ["OTSono", "system-ui", "sans-serif"],
+        body: ["OTSono", "system-ui", "sans-serif"]
+      },
+      borderRadius: {
+        sm: "16px",
+        DEFAULT: "16px",
+        md: "16px",
+        lg: "16px",
+        xl: "16px",
+        "2xl": "16px",
+        "3xl": "16px"
+      },
+      boxShadow: {
+        soft: "none",
+        edge: "none"
+      }
+    }
+  }
+};