rculioli/ingeli-design-system
1
Fork 0
Code Releases Activity

En cours : button

Browse source
This commit is contained in:
Roman Culioli 2026-02-04 16:40:43 +01:00
parent 36d064b276
commit 5f1e1af924
13 changed files with 161 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
2-tokens/2-generated/color.css
View file

@ -1,10 +1,18 @@
:root {
--color-primary: #9CC975;
--color-on-primary: #000001;
--color-secondary: #122135;
--color-on-secondary: #FFFFFF;
--color-success: #7CBB53;
--color-on-success: #000000;
--color-danger: #C71C22;
--color-on-danger: #FFFFFF;
--color-warning: #DD5600;
--color-on-warning: #FFFFFF;
--color-info: #354282;
--color-on-info: #FFFFFF;
--color-dark: #09101AFF;
--color-on-dark: #FFFFFF;
--color-light: #f8f9fa;
--color-on-light: #09101AFF;
}

8
2-tokens/overrides.contract.css
View file

@ -1,11 +1,19 @@
:root {
/* runtime-only variables, injected by host app */
--ingeli-primary-override: ;
--ingeli-on-primary-override: ;
--ingeli-secondary-override: ;
--ingeli-on-secondary-override: ;
--ingeli-success-override: ;
--ingeli-on-success-override: ;
--ingeli-warning-override: ;
--ingeli-on-warning-override: ;
--ingeli-danger-override: ;
--ingeli-on-danger-override: ;
--ingeli-info-override: ;
--ingeli-on-info-override: ;
--ingeli-dark-override: ;
--ingeli-on-dark-override: ;
--ingeli-light-override: ;
--ingeli-on-light-override: ;
}

8
2-tokens/overrides.css
View file

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

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

@ -9,6 +9,6 @@
[class^="istd-color-"]:not(.istd-sty-outline),
[class*=" istd-color-"]:not(.istd-sty-outline) {
--button-bg: var(--_color);
--button-text: color-contrast(var(--_color) vs black, white);
--button-text: var(--_on-color);
--button-border: color-mix(in srgb, var(--_color) 80%, black);
}

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

@ -1,8 +1,40 @@
.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-info { --_color: var(--color-info-runtime); }
.istd-color-dark { --_color: var(--color-dark-runtime); }
.istd-color-light { --_color: var(--color-light-runtime); }
.istd-color-primary {
--_color: var(--color-primary-runtime);
--_color-600: color-mix(in srgb, var(--color-primary-runtime) 80%, black);
--_on-color: var(--color-on-primary-runtime);
}
.istd-color-secondary {
--_color: var(--color-secondary-runtime);
--_on-color: var(--color-on-secondary-runtime);
--_color-600: color-mix(in srgb, var(--color-secondary-runtime) 80%, black);
}
.istd-color-success {
--_color: var(--color-success-runtime);
--_on-color: var(--color-on-success-runtime);
--_color-600: color-mix(in srgb, var(--color-success-runtime) 80%, black);
}
.istd-color-warning {
--_color: var(--color-warning-runtime);
--_on-color: var(--color-on-warning-runtime);
--_color-600: color-mix(in srgb, var(--color-warning-runtime) 80%, black);
}
.istd-color-danger {
--_color: var(--color-danger-runtime);
--_on-color: var(--color-on-danger-runtime);
--_color-600: color-mix(in srgb, var(--color-danger-runtime) 80%, black);
}
.istd-color-info {
--_color: var(--color-info-runtime);
--_on-color: var(--color-on-info-runtime);
--_color-600: color-mix(in srgb, var(--color-info-runtime) 80%, black);
}
.istd-color-dark {
--_color: var(--color-dark-runtime);
--_on-color: var(--color-on-dark-runtime);
--_color-600: color-mix(in srgb, var(--color-dark-runtime) 80%, black);
}
.istd-color-light {
--_color: var(--color-light-runtime);
--_on-color: var(--color-on-light-runtime);
--_color-600: color-mix(in srgb, var(--color-light-runtime) 80%, black);
}

4
3-styles/ingeli-std/1-behaviors/style.behavior.css
View file

@ -11,7 +11,7 @@
--button-text: var(--_color);
--button-border: var(--_color);
--button-bg-hover: var(--_color);
--button-text-hover: color-contrast(var(--_color) vs white, black);
--button-bg-hover: var(--_color-600);
--button-text-hover: var(--_on-color);
--button-border-hover: var(--_color);
}

45
3-styles/ingeli-std/2-layouts/default-layout.css Normal file
View file

@ -0,0 +1,45 @@
/* Default application layout (browser) */
.istd-layout-default {
display: flex;
height: 100vh;
overflow: hidden;
}
/* Sidebar */
.istd-layout-default .istd-main-layout-side-bar {
width: var(--layout-sidebar-width, 260px);
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Sidebar scroll */
.istd-layout-default .istd-nav-menu {
flex: 1;
overflow-y: auto;
}
/* Main frame */
.istd-layout-default .istd-main-layout-main-frame {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Toolbar */
.istd-layout-default .istd-main-layout-toolbar {
height: var(--layout-toolbar-height, 56px);
flex-shrink: 0;
display: flex;
align-items: center;
}
/* Main content */
.istd-layout-default .istd-main-layout-body {
flex: 1;
overflow-y: auto;
}

0
3-styles/ingeli-std/2-components/button.css → 3-styles/ingeli-std/3-components/button.css
View file

15
5-build/build-css.js
View file

@ -27,16 +27,19 @@ const SOURCES = [
// 2. Framework
"3-styles/ingeli-std/1-behaviors",
"3-styles/ingeli-std/2-components",
"3-styles/ingeli-std/utilities",
"3-styles/ingeli-std/2-layouts",
"3-styles/ingeli-std/3-components",
"3-styles/ingeli-std/4-pages",
"3-styles/ingeli-ils/1-behaviors",
"3-styles/ingeli-ils/2-components",
"3-styles/ingeli-ils/utilities",
"3-styles/ingeli-ils/2-layouts",
"3-styles/ingeli-ils/3-components",
"3-styles/ingeli-ils/4-pages",
"3-styles/cloud-engine/1-behaviors",
"3-styles/cloud-engine/2-components",
"3-styles/cloud-engine/utilities",
"3-styles/cloud-engine/2-layouts",
"3-styles/cloud-engine/3-components",
"3-styles/cloud-engine/4-pages",
// 3. Client commons
`4-clients/${clientName}/1-commons/styles`,

11
5-build/deploy-one.js
View file

@ -2,10 +2,11 @@
import path from "path";
import { stripBOM } from "./utils/fs-utils.js";
const [ , , clientName, appName, variantName ] = process.argv;
const [,, clientName, appName, variantName, ...flags] = process.argv;
const touchVersion = flags.includes("--touch");
if (!clientName || !appName || !variantName) {
console.error("❌ Usage: node deploy-one.js <client> <application> <variant>");
console.error("❌ Usage: node deploy-one.js <client> <application> <variant> [--touch]");
process.exit(1);
}
@ -68,6 +69,12 @@ console.log(` Variant : ${variantName}`);
console.log(` From : ${DIST_DIR}`);
console.log(` To : ${TARGET_DIR}`);
/* 1️⃣ Clean target directory */
if (fs.existsSync(TARGET_DIR)) {
fs.rmSync(TARGET_DIR, { recursive: true, force: true });
console.log(" 🧹 Target directory cleaned");
}
fs.mkdirSync(TARGET_DIR, { recursive: true });
for (const file of fs.readdirSync(DIST_DIR)) {

20
5-build/live-dev.js
View file

@ -1,5 +1,6 @@
import chokidar from "chokidar";
import { execSync } from "child_process";
import WebSocket, { WebSocketServer } from "ws";
const [ , , clientName, appName, variantName ] = process.argv;
@ -21,6 +22,23 @@ const WATCH_PATHS = [
let timeout = null;
// Port DEV uniquement
const WS_PORT = 24601;
// Serveur WebSocket
const wss = new WebSocketServer({ port: WS_PORT });
console.log(`🔌 LiveDev WebSocket listening on ws://localhost:${WS_PORT}`);
function notifyReload() {
console.log("📢 Notify browser: reload CSS");
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send("reload-css");
}
});
}
function rebuild() {
console.log("\n🔄 Change detected");
@ -34,10 +52,12 @@ function rebuild() {
`node 5-build/deploy-one.js ${clientName} ${appName} ${variantName}`,
{ stdio: "inherit" }
);
notifyReload();
console.log("✅ Rebuild + deploy done");
} catch (err) {
console.error("❌ Error during rebuild/deploy");
console.error(err);
}
}

7
package.json
View file

@ -1,4 +1,4 @@
{
{
"name": "ingeli-design-system",
"private": true,
"version": "0.1.0",
@ -13,6 +13,7 @@
"deploy all demo": "node 5-build/deploy-all.js 1-demo"
},
"devDependencies": {
"chokidar": "^3.6.0"
"chokidar": "^3.6.0",
"ws": "^8.19.0"
}
}
}

9
readme.md
View file

@ -18,13 +18,18 @@
│ │ │ ├── color.behavior.css mapping behavior → tokens
│ │ │ └── color.values.css
│ │ │
│ │ ├── 2-components/
│ │ ├── 2-layouts/
│ │ │ ├── default.css
│ │ │ ├── browser.css
│ │ │ └── mobile.css
│ │ │
│ │ ├── 3-components/
│ │ │ ├── panel.css
│ │ │ ├── button.css
│ │ │ ├── alert.css
│ │ │ └── tabs.css
│ │ │
│ │ ├── 3-pages/
│ │ ├── 4-pages/
│ │ │ └── (optionnel)
│ │ │
│ │ └── utilities/