swatchkit 0.0.21 → 0.0.22

package/README.md

@@ -28,7 +28,7 @@ my-project/
 ├── css/
 │   ├── compositions/       # Layout primitives (flow, sidebar, etc.)
 │   ├── tokens.css          # Generated from tokens/*.json
-│   ├── styles.css          # Starter stylesheet (imports tokens + compositions)
+│   ├── main.css            # Main stylesheet (imports tokens + compositions)
 │   └── swatchkit-ui.css    # UI styles for the documentation sidebar
 ├── swatchkit/
 │   ├── _layout.html        # Layout template (you own this)
@@ -158,7 +158,7 @@ You can mix modular scales with manual overrides.
 
 ### 5. CSS Workflow
 
-SwatchKit generates `css/tokens.css` with your design tokens. The starter `css/styles.css` imports this file along with layout primitives:
+SwatchKit generates `css/tokens.css` with your design tokens. Your `css/main.css` imports this file along with layout primitives:
 
 ```css
 @import 'tokens.css';
@@ -170,7 +170,7 @@ body {
 }
 ```
 
-The pattern library uses **your stylesheet** (`styles.css`), so components render exactly as they will in your app.
+The pattern library uses **your stylesheet** (`main.css`), so components render exactly as they will in your app.
 
 **Documentation Styling:**
 The sidebar and documentation layout are styled by `css/swatchkit-ui.css`. This file is separate from your app styles so you can customize the docs UI without affecting your production CSS.

package/build.js

@@ -116,7 +116,7 @@ function resolveSettings(cliOptions, fileConfig) {
       ? path.resolve(cwd, fileConfig.outDir)
       : path.join(cwd, "public/swatchkit");
 
-  // CSS directory - where tokens.css and user's styles.css live
+  // CSS directory - where tokens.css and user's main.css live
   // Default: css/ at project root
   const cssDir = fileConfig.cssDir
     ? path.resolve(cwd, fileConfig.cssDir)
@@ -153,7 +153,7 @@ function resolveSettings(cliOptions, fileConfig) {
     outputFile: path.join(outDir, "index.html"),
     outputJsFile: path.join(outDir, "js/swatches.js"),
     tokensCssFile: path.join(cssDir, "tokens.css"),
-    stylesCssFile: path.join(cssDir, "styles.css"),
+    mainCssFile: path.join(cssDir, "main.css"),
   };
 }
 
@@ -234,12 +234,12 @@ function runInit(settings, options) {
     console.log(`Created tokens script at ${tokensScriptFile}`);
   }
 
-  // Create starter styles.css
-  if (!fs.existsSync(settings.stylesCssFile)) {
-    const srcPath = path.join(__dirname, "src/blueprints/styles.css");
+  // Create main.css entry point
+  if (!fs.existsSync(settings.mainCssFile)) {
+    const srcPath = path.join(__dirname, "src/blueprints/main.css");
     const content = fs.readFileSync(srcPath, "utf-8");
-    fs.writeFileSync(settings.stylesCssFile, content);
-    console.log(`Created starter stylesheet at ${settings.stylesCssFile}`);
+    fs.writeFileSync(settings.mainCssFile, content);
+    console.log(`Created main stylesheet at ${settings.mainCssFile}`);
   }
 
   // Copy CSS Reset
@@ -637,7 +637,7 @@ function watch(settings) {
     settings.swatchkitDir,
     settings.tokensDir,
     settings.projectLayout,
-    settings.stylesCssFile,
+    settings.mainCssFile,
   ].filter((p) => fs.existsSync(p)); // Only watch files that exist
 
   console.log("[SwatchKit] Watch mode enabled.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swatchkit",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "A lightweight tool for creating HTML pattern libraries.",
   "main": "build.js",
   "bin": {

package/src/layout.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SwatchKit</title>
-    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="css/main.css" />
     <link rel="stylesheet" href="css/swatchkit-ui.css" />
     <!-- HEAD_EXTRAS -->
   </head>