commit c0966d32cbb9a0e768001e02849dada7a9201601 Author: Roman Culioli Date: Wed Jan 28 02:05:19 2026 +0100 Création du projet diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..77c630a --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/.idea/* +dist/* diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..3a6c8ef --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +20 \ No newline at end of file diff --git a/1-figma/readme.md b/1-figma/readme.md new file mode 100644 index 0000000..5a7b5a0 --- /dev/null +++ b/1-figma/readme.md @@ -0,0 +1,4 @@ +# TODO + +Expliquer le fonctionnement de l'import depuis figma + diff --git a/2-tokens/1-src/color.json b/2-tokens/1-src/color.json new file mode 100644 index 0000000..a734d52 --- /dev/null +++ b/2-tokens/1-src/color.json @@ -0,0 +1,7 @@ +{ + "color": { + "primary": "#7cbb53", + "secondary": "#1d6c87", + "danger": "#c71c22" + } +} \ No newline at end of file diff --git a/2-tokens/2-generated/color.css b/2-tokens/2-generated/color.css new file mode 100644 index 0000000..025be05 --- /dev/null +++ b/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; +} diff --git a/2-tokens/overrides.css b/2-tokens/overrides.css new file mode 100644 index 0000000..166bb0c --- /dev/null +++ b/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)); +} \ No newline at end of file diff --git a/3-styles/ingeli-std/1-behaviors/color.behavior.css b/3-styles/ingeli-std/1-behaviors/color.behavior.css new file mode 100644 index 0000000..2b0fd38 --- /dev/null +++ b/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); +} diff --git a/3-styles/ingeli-std/1-behaviors/color.values.css b/3-styles/ingeli-std/1-behaviors/color.values.css new file mode 100644 index 0000000..85546ef --- /dev/null +++ b/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); } diff --git a/3-styles/ingeli-std/2-components/button.css b/3-styles/ingeli-std/2-components/button.css new file mode 100644 index 0000000..429cf32 --- /dev/null +++ b/3-styles/ingeli-std/2-components/button.css @@ -0,0 +1,4 @@ +.istd-co-button { + background: var(--button-bg); + color: var(--button-text); +} \ No newline at end of file diff --git a/5-build/build-css.js b/5-build/build-css.js new file mode 100644 index 0000000..95bbc50 --- /dev/null +++ b/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 "); + 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}`); diff --git a/package.json b/package.json new file mode 100644 index 0000000..4cd12df --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..6b38904 --- /dev/null +++ b/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