piloti 1.0.0 → 1.0.1

package/bin/piloti.js

@@ -27,13 +27,13 @@ Usage:
 
 Options:
   -c, --config <path>   Path to custom config.json (default: ./piloti.config.json)
-  -o, --output <path>   Output directory for generated CSS (default: ./piloti-output)
+  -o, --output <path>   Output directory for generated CSS (default: ./piloti)
   -h, --help            Show this help message
 
 Examples:
   npx piloti
   npx piloti --config ./my-tokens.json
-  npx piloti --config ./tokens.json --output ./styles/generated
+  npx piloti --config ./tokens.json --output ./styles
 `);
     process.exit(0);
   }
@@ -54,7 +54,7 @@ configPath = configPath
 
 outputDir = outputDir
   ? path.resolve(cwd, outputDir)
-  : path.join(cwd, 'piloti-output');
+  : path.join(cwd, 'piloti');
 
 // Load config
 if (!fs.existsSync(configPath)) {
@@ -102,6 +102,56 @@ const sanitizeClassName = (name) => {
   return name.replace(/\//g, '\\/');
 };
 
+/**
+ * Copy file from package to output
+ */
+const copyFile = (src, dest) => {
+  if (fs.existsSync(src)) {
+    fs.copyFileSync(src, dest);
+    return true;
+  }
+  return false;
+};
+
+// =============================================================================
+// COPY BASE FILES (reset, compositions)
+// =============================================================================
+
+console.log('Copying base files...');
+
+const srcDir = path.join(packageDir, 'src');
+let baseFilesCount = 0;
+
+// Reset
+if (copyFile(path.join(srcDir, '1-reset/reset.css'), path.join(outputDir, 'reset.css'))) {
+  console.log('   ✓ reset.css');
+  baseFilesCount++;
+}
+
+// Base
+if (copyFile(path.join(srcDir, '2-base/global.css'), path.join(outputDir, 'base.css'))) {
+  console.log('   ✓ base.css');
+  baseFilesCount++;
+}
+
+// Compositions - combine into one file
+const compositionsDir = path.join(srcDir, '3-compositions');
+if (fs.existsSync(compositionsDir)) {
+  let compositionsContent = '/* Piloti Compositions */\n\n';
+  const compositionFiles = ['stack.css', 'cluster.css', 'flow.css'];
+
+  compositionFiles.forEach(file => {
+    const filePath = path.join(compositionsDir, file);
+    if (fs.existsSync(filePath)) {
+      compositionsContent += fs.readFileSync(filePath, 'utf8') + '\n';
+    }
+  });
+
+  fs.writeFileSync(path.join(outputDir, 'compositions.css'), compositionsContent);
+  console.log('   ✓ compositions.css (stack, cluster, flow)');
+  baseFilesCount++;
+}
+
 // =============================================================================
 // GENERATE VARIABLES CSS
 // =============================================================================
@@ -230,6 +280,9 @@ if (Object.keys(breakpoints).length > 0) {
 // =============================================================================
 
 let mainContent = `/* Piloti CSS Framework - Generated Entry Point */\n`;
+mainContent += `@import url('./reset.css');\n`;
+mainContent += `@import url('./base.css');\n`;
+mainContent += `@import url('./compositions.css');\n`;
 mainContent += `@import url('./variables.css');\n`;
 mainContent += `@import url('./utilities.css');\n`;
 if (responsiveCount > 0) {
@@ -254,11 +307,12 @@ if (warnings.length > 0) {
 console.log('\n' + '='.repeat(50));
 console.log('✅ Build complete!');
 console.log('='.repeat(50));
+console.log(`   Base files:  ${baseFilesCount} (reset, base, compositions)`);
 console.log(`   Variables:   ${variableCount}`);
 console.log(`   Utilities:   ${utilityCount}`);
 console.log(`   Responsive:  ${responsiveCount}`);
-console.log(`   Total:       ${variableCount + utilityCount + responsiveCount}`);
+console.log(`   Total:       ${baseFilesCount + variableCount + utilityCount + responsiveCount}`);
 console.log('='.repeat(50));
 console.log(`\nImport in your project:`);
-console.log(`   @import url('${path.relative(cwd, outputDir)}/index.css');`);
+console.log(`   @import url('./${path.relative(cwd, outputDir)}/index.css');`);
 console.log('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piloti",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A config-driven CSS framework following CUBE CSS methodology",
   "main": "src/main.css",
   "bin": {

package/src/0-gen-settings/base.css

@@ -0,0 +1,25 @@
+:root {
+  color-scheme: light dark;
+}
+
+/* Styles du body */
+body {
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+  color: var(--color-dark);
+  background-color: var(--color-light);
+}
+
+/* Liens par défaut */
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  body {
+    color: var(--color-light);
+    background-color: var(--color-dark);
+  }
+}

package/src/0-gen-settings/compositions.css

@@ -0,0 +1,56 @@
+/* Piloti Compositions */
+
+/* Stack - Empilement vertical */
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stack-space, var(--spacing-4));
+}
+
+.stack[data-space="sm"] {
+  --stack-space: var(--spacing-2);
+}
+
+.stack[data-space="lg"] {
+  --stack-space: var(--spacing-8);
+}
+
+/* Cluster - Groupement horizontal */
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cluster-space, var(--spacing-4));
+  align-items: center;
+}
+
+.cluster[data-justify="between"] {
+  justify-content: space-between;
+}
+
+.cluster[data-justify="center"] {
+  justify-content: center;
+}
+
+/* Flow - Espacement */
+.flow > * + * {
+  margin-top: var(--flow-space, var(--spacing-4));
+}
+
+.test {
+  padding: var(--spacing-3)
+}
+
+.flow[data-space="sm"] {
+  --flow-space: 0.5rem;
+}
+
+.flow[data-space="lg"] {
+  --flow-space: 2rem;
+}
+
+/* Plus d'espace avant les titres */
+.flow > * + h2,
+.flow > * + h3 {
+  margin-top: calc(var(--flow-space, 1rem) * 2);
+}
+

package/src/0-gen-settings/index.css

@@ -1,4 +1,7 @@
 /* Piloti CSS Framework - Generated Entry Point */
+@import url('./reset.css');
+@import url('./base.css');
+@import url('./compositions.css');
 @import url('./variables.css');
 @import url('./utilities.css');
 @import url('./responsive.css');

package/src/0-gen-settings/reset.css

@@ -0,0 +1,48 @@
+/* 1. Use a more-intuitive box-sizing model */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+body {
+  /* 4. Add accessible line-height */
+  line-height: 1.5;
+  /* 5. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 6. Improve media defaults */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 7. Inherit fonts for form controls */
+input, button, textarea, select {
+  font: inherit;
+}
+
+/* 8. Avoid text overflows */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* 9. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+}