Fonctionnement avec des boutons basiques

2-tokens/2-generated/color.css

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

2-tokens/2-generated/radius.css

@@ -0,0 +1,16 @@
+:root {
+    /* No rounding */
+    --radius-none: 0;
+
+    /* Subtle rounding */
+    --radius-xs: 2px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+
+    /* Strong rounding */
+    --radius-lg: 10px;
+    --radius-xl: 16px;
+
+    /* Fully rounded (pill, circle) */
+    --radius-full: 9999px;
+}

2-tokens/2-generated/size.css

@@ -0,0 +1,10 @@
+:root {
+    --space-100: 0.25rem;
+    --space-200: 0.5rem;
+    --space-300: 0.75rem;
+    --space-400: 1rem;
+
+    --font-size-75: 0.75rem;
+    --font-size-87: 0.875rem;
+    --font-size-100: 1rem;
+}

2-tokens/overrides.contract.css

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

2-tokens/overrides.css

@@ -4,6 +4,7 @@
     --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-info-runtime: var(--ingeli-info-override, var(--color-info));
     --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.values.css

@@ -3,5 +3,6 @@
 .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); }

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

@@ -0,0 +1,17 @@
+.istd-size-small {
+    --button-padding-y: var(--space-100);
+    --button-padding-x: var(--space-200);
+    --button-font-size: var(--font-size-75);
+}
+
+.istd-size-medium {
+    --button-padding-y: var(--space-200);
+    --button-padding-x: var(--space-300);
+    --button-font-size: var(--font-size-87);
+}
+
+.istd-size-large {
+    --button-padding-y: var(--space-300);
+    --button-padding-x: var(--space-400);
+    --button-font-size: var(--font-size-100);
+}

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

@@ -1,4 +1,46 @@
 .istd-co-button {
-    background: var(--button-bg);
+    /* reset navigateur */
+    appearance: none;
+    font: inherit;
+
+    /* layout */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+
+    /* interaction */
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+
+    /* shape */
+    border-radius: var(--radius-sm, 4px);
+
+    /* colors (via behaviors) */
+    background-color: var(--button-bg, inherit);
     color: var(--button-text);
+    border: 1px solid var(--button-border, transparent);
+
+    padding: var(--button-padding-y) var(--button-padding-x);
+    font-size: var(--button-font-size);
+
+    /* animation */
+    transition: background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.istd-co-button:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--button-bg) 85%, black);
+}
+
+.istd-co-button:active:not(:disabled) {
+    background-color: color-mix(in srgb, var(--button-bg) 70%, black);
+}
+
+.istd-co-button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--button-bg) 60%, transparent);
 }

5-build/build-css.js

@@ -1,6 +1,13 @@
 import fs from "fs";
 import path from "path";
 
+function stripBOM(str) {
+    if (str.charCodeAt(0) === 0xFEFF) {
+        return str.slice(1);
+    }
+    return str;
+}
+
 const [ , , clientName, variantName ] = process.argv;
 
 if (!clientName || !variantName) {
@@ -82,7 +89,7 @@ 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");
+    output += stripBOM(fs.readFileSync(file, "utf8"));
 }
 
 fs.writeFileSync(OUTPUT_FILE, output, "utf8");