diff --git a/2-tokens/2-generated/color.css b/2-tokens/2-generated/color.css index 025be05..c65261a 100644 --- a/2-tokens/2-generated/color.css +++ b/2-tokens/2-generated/color.css @@ -1,9 +1,10 @@ :root { - --color-primary: #1D6C87; - --color-secondary: #DD5600; + --color-primary: #9CC975; + --color-secondary: #122135; --color-success: #7CBB53; --color-danger: #C71C22; --color-warning: #DD5600; - --color-dark: #000000; - --color-light: #FFFFFF; + --color-info: #354282; + --color-dark: #09101AFF; + --color-light: #f8f9fa; } diff --git a/2-tokens/2-generated/radius.css b/2-tokens/2-generated/radius.css new file mode 100644 index 0000000..b206960 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/2-tokens/2-generated/size.css b/2-tokens/2-generated/size.css new file mode 100644 index 0000000..56f680c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/2-tokens/overrides.contract.css b/2-tokens/overrides.contract.css new file mode 100644 index 0000000..4c5c8be --- /dev/null +++ b/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: ; +} \ No newline at end of file diff --git a/2-tokens/overrides.css b/2-tokens/overrides.css index 166bb0c..0dcfbe2 100644 --- a/2-tokens/overrides.css +++ b/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)); } \ No newline at end of file diff --git a/3-styles/ingeli-std/1-behaviors/color.values.css b/3-styles/ingeli-std/1-behaviors/color.values.css index 85546ef..1e4054e 100644 --- a/3-styles/ingeli-std/1-behaviors/color.values.css +++ b/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); } diff --git a/3-styles/ingeli-std/1-behaviors/size.behavior.css b/3-styles/ingeli-std/1-behaviors/size.behavior.css new file mode 100644 index 0000000..ea4f547 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/3-styles/ingeli-std/2-components/button.css b/3-styles/ingeli-std/2-components/button.css index 429cf32..381af6e 100644 --- a/3-styles/ingeli-std/2-components/button.css +++ b/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); } \ No newline at end of file diff --git a/5-build/build-css.js b/5-build/build-css.js index 95bbc50..391b989 100644 --- a/5-build/build-css.js +++ b/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");