Création du projet

.gitignore

@@ -0,0 +1,2 @@
+/.idea/*
+dist/*

.nvmrc

@@ -0,0 +1 @@
+20

1-figma/readme.md

@@ -0,0 +1,4 @@
+# TODO
+
+Expliquer le fonctionnement de l'import depuis figma
+

2-tokens/1-src/color.json

@@ -0,0 +1,7 @@
+{
+  "color": {
+    "primary": "#7cbb53",
+    "secondary": "#1d6c87",
+    "danger": "#c71c22"
+  }
+}

2-tokens/2-generated/color.css

@@ -0,0 +1,9 @@
+:root {
+    --color-primary: #1D6C87;
+    --color-secondary: #DD5600;
+    --color-success: #7CBB53;
+    --color-danger: #C71C22;
+    --color-warning: #DD5600;
+    --color-dark: #000000;
+    --color-light: #FFFFFF;
+}

2-tokens/overrides.css

@@ -0,0 +1,9 @@
+:root {
+    --color-primary-runtime: var(--ingeli-primary-override, var(--color-primary));
+    --color-secondary-runtime: var(--ingeli-secondary-override, var(--color-secondary));
+    --color-success-runtime: var(--ingeli-success-override, var(--color-success));
+    --color-warning-runtime: var(--ingeli-warning-override, var(--color-warning));
+    --color-danger-runtime: var(--ingeli-danger-override, var(--color-danger));
+    --color-dark-runtime: var(--ingeli-dark-override, var(--color-dark));
+    --color-light-runtime: var(--ingeli-light-override, var(--color-light));
+}

3-styles/ingeli-std/1-behaviors/color.behavior.css

@@ -0,0 +1,14 @@
+/* par défaut (aucune classe couleur) */
+:root {
+    --button-bg: #e0e0e0;
+    --button-text: #000;
+    --button-border: transparent;
+}
+
+/* mapping behavior → tokens */
+[class^="istd-color-"],
+[class*=" istd-color-"] {
+    --button-bg: var(--_color);
+    --button-text: color-contrast(var(--_color) vs black, white);
+    --button-border: color-mix(in srgb, var(--_color) 80%, black);
+}

3-styles/ingeli-std/1-behaviors/color.values.css

@@ -0,0 +1,7 @@
+.istd-color-primary   { --_color: var(--color-primary-runtime); }
+.istd-color-secondary { --_color: var(--color-secondary-runtime); }
+.istd-color-success   { --_color: var(--color-success-runtime); }
+.istd-color-warning   { --_color: var(--color-warning-runtime); }
+.istd-color-danger    { --_color: var(--color-danger-runtime); }
+.istd-color-dark      { --_color: var(--color-dark-runtime); }
+.istd-color-light     { --_color: var(--color-light-runtime); }

3-styles/ingeli-std/2-components/button.css

@@ -0,0 +1,4 @@
+.istd-co-button {
+    background: var(--button-bg);
+    color: var(--button-text);
+}

5-build/build-css.js

@@ -0,0 +1,90 @@
+import fs from "fs";
+import path from "path";
+
+const [ , , clientName, variantName ] = process.argv;
+
+if (!clientName || !variantName) {
+    console.error("❌ Usage: node build-css.js <client> <variant>");
+    process.exit(1);
+}
+
+const ROOT = process.cwd();
+
+const DIST_DIR = path.join(
+    ROOT,
+    "dist",
+    clientName,
+    variantName
+);
+
+const OUTPUT_FILE = path.join(DIST_DIR, "min.css");
+
+const SOURCES = [
+    // 1. Tokens
+    "2-tokens/2-generated",
+    "2-tokens/overrides.css",
+
+    // 2. Framework
+    "3-styles/ingeli-std/1-behaviors",
+    "3-styles/ingeli-std/2-components",
+    "3-styles/ingeli-std/utilities",
+
+    "3-styles/ingeli-ils/1-behaviors",
+    "3-styles/ingeli-ils/2-components",
+    "3-styles/ingeli-ils/utilities",
+
+    "3-styles/cloud-engine/1-behaviors",
+    "3-styles/cloud-engine/2-components",
+    "3-styles/cloud-engine/utilities",
+
+    // 3. Client commons
+    `4-clients/${clientName}/1-commons/styles`,
+
+    // 4. Client apps
+    `4-clients/${clientName}/app-*/styles`,
+
+    // 5. Variant (last override)
+    `4-clients/${clientName}/variants/${variantName}`
+];
+
+function collectCssFiles(entry) {
+    const fullPath = path.join(ROOT, entry);
+
+    if (!fs.existsSync(fullPath)) return [];
+
+    const stat = fs.statSync(fullPath);
+
+    if (stat.isFile() && entry.endsWith(".css")) {
+        return [fullPath];
+    }
+
+    if (stat.isDirectory()) {
+        return fs.readdirSync(fullPath)
+            .flatMap(f => collectCssFiles(path.join(entry, f)));
+    }
+
+    return [];
+}
+
+// --- Build ---
+console.log(`🔨 Building CSS`);
+console.log(`   Client  : ${clientName}`);
+console.log(`   Variant : ${variantName}`);
+
+fs.mkdirSync(DIST_DIR, { recursive: true });
+
+const files = SOURCES.flatMap(collectCssFiles);
+
+let output = `/* Ingeli Design System */\n`;
+output += `/* Client: ${clientName} */\n`;
+output += `/* Variant: ${variantName} */\n\n`;
+
+for (const file of files) {
+    console.log(" +", path.relative(ROOT, file));
+    output += `\n/* === ${path.relative(ROOT, file)} === */\n`;
+    output += fs.readFileSync(file, "utf8");
+}
+
+fs.writeFileSync(OUTPUT_FILE, output, "utf8");
+
+console.log(`✅ CSS generated: ${OUTPUT_FILE}`);

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "ingeli-design-system",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "build": "node 5-build/build-css.js",
+    "build web demo": "node 5-build/build-css.js 1-demo blank"
+  }
+}

readme.md

@@ -0,0 +1,63 @@
+ingeli-design-system/
+├── 1-figma/
+│   ├── color.tokens.json              Fichier d'export brut figma verbeux, non versioné
+│   └── README.md
+│
+├── 2-tokens/
+│   ├── 1-src/
+│   │   └── color.json                 Fichier figma converti simplié par un outils automatique (sript python)
+│   │
+│   ├── 2-generated/
+│   │   └── color.css                  Fichier calculé à partir du fichier color.json
+│   │
+│   └── overrides.css                  Fichier qui fait le lien entre les variables design et les variables runtime
+│
+├── 3-styles/
+│   ├── ingeli-std/
+│   │   ├── 1-behaviors/
+│   │   │   ├── color.behavior.css         mapping behavior → tokens
+│   │   │   └── color.values.css
+│   │   │
+│   │   ├── 2-components/
+│   │   │   ├── panel.css
+│   │   │   ├── button.css
+│   │   │   ├── alert.css
+│   │   │   └── tabs.css
+│   │   │
+│   │   ├── 3-pages/
+│   │   │   └── (optionnel)
+│   │   │
+│   │   └── utilities/
+│   │       └── helpers.css
+│   ├── ingeli-ils/                Même structure que ingeli-std
+│   └── cloud-engine/              Même structure que ingeli-std
+│
+├── 4-clients/
+│   ├── client-xxx/
+│   │   ├── 1-commons/
+│   │   │   └── styles/          Même structure que dans le dossier 3-styles à la racine
+│   │   ├── app-xxx/
+│   │   │   └── styles/          Même structure que dans le dossier 3-styles à la racine
+│   │   ├── app-yyy/
+│   │   │   └── styles/          Même structure que dans le dossier 3-styles à la racine
+│   │   └── 2-variants/
+│   │       ├── variant-xxx/
+│   │       └── variant-yyy/
+│   │
+│   └── client-yyy/
+│   └── client-demo/
+│
+├── build/
+│   ├── build-tokens.js
+│   ├── build-css.js
+│   └── watch.js
+│
+├── dist/                       Fichiers à déployer dans le projet C#
+│   ├── client-xxx/
+│   │   ├── variant-xxx/
+│   │   │   └── min.css
+│   │   └── variant-yyy/
+│   └── client-yyy/
+│
+├── package.json
+└── README.md