From b6185cd127155dd8c2f8068fb1e5a745fe7790d5 Mon Sep 17 00:00:00 2001 From: Yugonito Date: Mon, 6 Jul 2026 23:18:28 +0200 Subject: [PATCH] =?UTF-8?q?init=20:=20tokens=20de=20marque=20et=20th=C3=A8?= =?UTF-8?q?me=20s=C3=A9mantique=20shadcn=20(direction=20dark=20tech=20+=20?= =?UTF-8?q?cyan)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - tokens.css : échelles fait-cyan (#16D5FF) et fait-gray (#545454) en oklch, statuts - theme.css : variables sémantiques shadcn light/dark mappées sur les primitifs - demo : page de validation de la direction visuelle Co-Authored-By: Claude Fable 5 --- .gitignore | 1 + README.md | 28 +++ demo/direction-dark-tech.html | 403 ++++++++++++++++++++++++++++++++++ package.json | 20 ++ src/theme.css | 95 ++++++++ src/tokens.css | 46 ++++ 6 files changed, 593 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 demo/direction-dark-tech.html create mode 100644 package.json create mode 100644 src/theme.css create mode 100644 src/tokens.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..a0fa4ce --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ +# @forgetaboutit/ui + +Design system Forget About IT — tokens de marque et thème sémantique pour les applications Tailwind v4 + shadcn/ui (fait-customers, leguidepourve, …). + +## Contenu + +- `src/tokens.css` — tokens primitifs : échelles `fait-cyan` (cyan logo `#16D5FF`) et `fait-gray` (anthracite logo `#545454`), couleurs de statut. Expose les utilitaires Tailwind (`bg-fait-cyan-400`, `text-fait-gray-200`, …). +- `src/theme.css` — thème sémantique compatible shadcn/ui (`--background`, `--primary`, `--sidebar`, …) en light et dark. Direction : **dark tech + cyan** (dark = thème de référence). + +## Usage + +Installer depuis le repo git : + +```bash +npm install git+https://git.fabout.it/hcloez/forgetaboutit-ui.git +``` + +Puis dans le `globals.css` de l'app : + +```css +@import "tailwindcss"; +@import "@forgetaboutit/ui/theme.css"; /* importe aussi tokens.css */ +``` + +Les composants shadcn consomment automatiquement les variables sémantiques. Règles d'usage dans les apps : + +- Toujours les tokens sémantiques (`text-foreground`, `bg-card`, `border-border`) — jamais de couleur hardcodée (`text-zinc-400`, `bg-[#16D5FF]`). +- Les primitifs `fait-*` sont réservés aux cas où le sémantique ne suffit pas (illustrations, dégradés, marketing). diff --git a/demo/direction-dark-tech.html b/demo/direction-dark-tech.html new file mode 100644 index 0000000..66f6bd9 --- /dev/null +++ b/demo/direction-dark-tech.html @@ -0,0 +1,403 @@ +FAIT Design System — Direction dark tech + cyan + + +
+
+

@forgetaboutit/ui · proposition de direction

+

Dark tech + cyan — le design system Forget About IT

+

Les deux couleurs du logo deviennent le socle du système : l'anthracite #545454 engendre l'échelle de gris froids qui remplace le zinc, et le cyan #16D5FF devient la couleur primaire — réservée aux actions, à la navigation active et aux données mises en avant. Les statuts (succès, alerte, critique) restent sémantiques et ne se confondent jamais avec l'accent. Cette page utilise les tokens réels du package et respecte le thème de ton navigateur — bascule light/dark pour vérifier les deux mondes.

+
+ +
+

Aperçu — admin fait-customers

+
+ +
+
+
+

Tableau de bord

+
Lundi 6 juillet 2026 — tout est opérationnel
+
+ +
+
+
Clients actifs
12
+1 ce mois
+
Tickets ouverts
4
dont 1 critique
+
Heures du mois
37 h 30
dont 9 h facturables
+
MRR
4 250 €
ARR 51 000 €
+
+
+
+

Tickets récents

Tout voir
+
+ + + + + + + + +
Réf.ClientObjetStatutSLA
#A4F2C1NextauraVPN site-à-site instableCritique1 h 12
#B8E304Studio MaltRenouvellement certificatEn cours6 h 40
#C1D977AlterionQuota boîte mail dépasséAttente client—
#D5A016NextauraMigration serveur de fichiersRésolu—
+
+
+
+

Forfaits — juillet

Détails
+
+
Nextaura7 h 10 / 10 h
+
Studio Malt4 h 45 / 5 h
+
Alterion8 h 20 / 8 h
+
Kervadec & Fils1 h 05 / 4 h
+
+
+
+
+
+

Le cyan n'apparaît que là où l'œil doit aller : l'action principale, l'entrée de navigation active, le lien. Tout le reste tient sur les gris anthracite — c'est ce contraste de rareté qui fait la signature.

+
+ +
+

Composants

+
+
+
Boutons
+
+ + + + + +
+
+
+
Statuts
+
+ En cours + Résolu + Attente client + Critique +
+
+
+
Champs
+
+ + +
+
+
+
+ +
+

Tokens — échelles de marque

+
+
+
fait-cyan
+
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
950
+
+
+
+
fait-gray
+
+
50
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
950
+
+
+
+
statuts
+
+
success
+
warning
+
danger
+
+
+
+

Le 400 du cyan est le #16D5FF exact du logo ; le 600 du gris est le #545454 exact. Les applications n'utilisent jamais ces primitifs directement — elles passent par les tokens sémantiques (primary, background, muted…) définis pour les deux thèmes.

+
+ + +
diff --git a/package.json b/package.json new file mode 100644 index 0000000..030b1e1 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "@forgetaboutit/ui", + "version": "0.1.0", + "description": "Design system Forget About IT — tokens et thème Tailwind v4 / shadcn", + "license": "UNLICENSED", + "repository": { + "type": "git", + "url": "https://git.fabout.it/hcloez/forgetaboutit-ui.git" + }, + "exports": { + "./tokens.css": "./src/tokens.css", + "./theme.css": "./src/theme.css" + }, + "files": [ + "src" + ], + "peerDependencies": { + "tailwindcss": "^4.0.0" + } +} diff --git a/src/theme.css b/src/theme.css new file mode 100644 index 0000000..2531840 --- /dev/null +++ b/src/theme.css @@ -0,0 +1,95 @@ +/* + * @forgetaboutit/ui — thème sémantique (compatible shadcn/ui) + * + * Mappe les tokens primitifs (tokens.css) sur les variables sémantiques + * shadcn : --background, --foreground, --primary, etc. + * Direction : "dark tech + cyan" — le dark est le thème de référence, + * le light reste soigné pour les pages publiques et emails. + * + * Usage dans une app Tailwind v4 : + * @import "tailwindcss"; + * @import "@forgetaboutit/ui/tokens.css"; + * @import "@forgetaboutit/ui/theme.css"; + */ + +@import "./tokens.css"; + +:root { + --radius: 0.625rem; + + --background: oklch(1 0 0); + --foreground: var(--color-fait-gray-900); + --card: oklch(1 0 0); + --card-foreground: var(--color-fait-gray-900); + --popover: oklch(1 0 0); + --popover-foreground: var(--color-fait-gray-900); + + --primary: var(--color-fait-cyan-700); + --primary-foreground: oklch(0.99 0.005 215); + --secondary: var(--color-fait-gray-100); + --secondary-foreground: var(--color-fait-gray-800); + --muted: var(--color-fait-gray-100); + --muted-foreground: var(--color-fait-gray-500); + --accent: var(--color-fait-cyan-50); + --accent-foreground: var(--color-fait-cyan-800); + + --destructive: var(--color-fait-danger); + --destructive-foreground: oklch(0.99 0 0); + --border: var(--color-fait-gray-200); + --input: var(--color-fait-gray-200); + --ring: var(--color-fait-cyan-500); + + --chart-1: var(--color-fait-cyan-500); + --chart-2: var(--color-fait-cyan-700); + --chart-3: var(--color-fait-gray-500); + --chart-4: var(--color-fait-success); + --chart-5: var(--color-fait-warning); + + --sidebar: var(--color-fait-gray-50); + --sidebar-foreground: var(--color-fait-gray-900); + --sidebar-primary: var(--color-fait-cyan-700); + --sidebar-primary-foreground: oklch(0.99 0.005 215); + --sidebar-accent: var(--color-fait-gray-200); + --sidebar-accent-foreground: var(--color-fait-gray-900); + --sidebar-border: var(--color-fait-gray-200); + --sidebar-ring: var(--color-fait-cyan-500); +} + +.dark { + --background: var(--color-fait-gray-950); + --foreground: var(--color-fait-gray-100); + --card: var(--color-fait-gray-925); + --card-foreground: var(--color-fait-gray-100); + --popover: var(--color-fait-gray-925); + --popover-foreground: var(--color-fait-gray-100); + + --primary: var(--color-fait-cyan-400); + --primary-foreground: var(--color-fait-gray-950); + --secondary: var(--color-fait-gray-850); + --secondary-foreground: var(--color-fait-gray-100); + --muted: var(--color-fait-gray-850); + --muted-foreground: var(--color-fait-gray-400); + --accent: var(--color-fait-cyan-950); + --accent-foreground: var(--color-fait-cyan-300); + + --destructive: var(--color-fait-danger); + --destructive-foreground: oklch(0.99 0 0); + --border: var(--color-fait-gray-800); + --input: var(--color-fait-gray-800); + --ring: var(--color-fait-cyan-400); + + --chart-1: var(--color-fait-cyan-400); + --chart-2: var(--color-fait-cyan-600); + --chart-3: var(--color-fait-gray-400); + --chart-4: var(--color-fait-success); + --chart-5: var(--color-fait-warning); + + --sidebar: var(--color-fait-gray-925); + --sidebar-foreground: var(--color-fait-gray-100); + --sidebar-primary: var(--color-fait-cyan-400); + --sidebar-primary-foreground: var(--color-fait-gray-950); + --sidebar-accent: var(--color-fait-gray-800); + --sidebar-accent-foreground: oklch(1 0 0); + --sidebar-border: var(--color-fait-gray-800); + --sidebar-ring: var(--color-fait-cyan-400); +} diff --git a/src/tokens.css b/src/tokens.css new file mode 100644 index 0000000..962ca71 --- /dev/null +++ b/src/tokens.css @@ -0,0 +1,46 @@ +/* + * @forgetaboutit/ui — tokens primitifs de la marque + * + * Couleurs extraites du logo Forget About IT : + * cyan #16D5FF → échelle fait-cyan (teinte oklch ~215) + * gris #545454 → échelle fait-gray (neutre légèrement froid, ~fait-gray-600) + * + * Expose les utilitaires Tailwind v4 : bg-fait-cyan-400, text-fait-gray-200, etc. + * Les applications consomment plutôt theme.css (tokens sémantiques). + */ + +@theme { + /* --- Cyan de marque --- */ + --color-fait-cyan-50: oklch(0.975 0.018 215); + --color-fait-cyan-100: oklch(0.945 0.038 215); + --color-fait-cyan-200: oklch(0.895 0.075 215); + --color-fait-cyan-300: oklch(0.855 0.105 215); + --color-fait-cyan-400: oklch(0.82 0.13 215); /* #16D5FF — cyan logo */ + --color-fait-cyan-500: oklch(0.74 0.125 220); + --color-fait-cyan-600: oklch(0.64 0.115 224); + --color-fait-cyan-700: oklch(0.54 0.098 228); + --color-fait-cyan-800: oklch(0.45 0.078 230); + --color-fait-cyan-900: oklch(0.38 0.06 232); + --color-fait-cyan-950: oklch(0.28 0.048 235); + + /* --- Gris anthracite de marque (neutre froid) --- */ + --color-fait-gray-50: oklch(0.985 0.001 230); + --color-fait-gray-100: oklch(0.962 0.002 230); + --color-fait-gray-200: oklch(0.92 0.003 230); + --color-fait-gray-300: oklch(0.86 0.004 230); + --color-fait-gray-400: oklch(0.70 0.005 230); + --color-fait-gray-500: oklch(0.55 0.005 230); + --color-fait-gray-600: oklch(0.445 0.005 230); /* #545454 — anthracite logo */ + --color-fait-gray-700: oklch(0.38 0.005 231); + --color-fait-gray-800: oklch(0.295 0.006 232); + --color-fait-gray-850: oklch(0.255 0.006 233); + --color-fait-gray-900: oklch(0.215 0.006 234); + --color-fait-gray-925: oklch(0.185 0.006 235); + --color-fait-gray-950: oklch(0.155 0.006 236); + + /* --- Statuts --- */ + --color-fait-success: oklch(0.72 0.17 155); + --color-fait-warning: oklch(0.8 0.16 85); + --color-fait-danger: oklch(0.64 0.2 25); + --color-fait-info: oklch(0.74 0.125 220); +}