@ngcorex/cli 0.1.6 → 0.1.7

package/README.md

@@ -63,25 +63,41 @@ Create a `tokens.json` file at your project root:
 ```json
 {
   "spacing": {
-    "xs": "1rem",
-    "sm": "1.25rem"
+    "xs": "0.25rem",
+    "sm": "0.5rem",
+    "md": "1rem",
+    "lg": "1.5rem",
+    "xl": "2rem"
   },
   "colors": {
-    "gray": {
-      "100": "#f3f4f6",
-      "900": "#111827"
+    "neutral": {
+      "0": "#ffffff",
+      "100": "#f5f5f5",
+      "300": "#d4d4d4",
+      "500": "#737373",
+      "700": "#404040",
+      "900": "#171717"
+    },
+    "primary": {
+      "500": "#2563eb"
     }
   },
   "radius": {
-    "sm": "4px",
-    "md": "8px",
-    "lg": "16px",
+    "sm": "0.25rem",
+    "md": "0.5rem",
+    "lg": "0.75rem",
+    "xl": "1rem",
     "full": "9999px"
   },
   "zIndex": {
+    "base": "0",
     "dropdown": "1000",
-    "modal": "2000",
-    "toast": "3000"
+    "sticky": "1020",
+    "fixed": "1030",
+    "modal-backdrop": "1040",
+    "modal": "1050",
+    "popover": "1060",
+    "tooltip": "1070"
   },
   "typography": {
     "fontSize": {
@@ -89,25 +105,35 @@ Create a `tokens.json` file at your project root:
       "sm": "0.875rem",
       "base": "1rem",
       "lg": "1.125rem",
-      "xl": "1.25rem"
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem"
     },
     "fontWeight": {
+      "light": "300",
       "normal": "400",
       "medium": "500",
       "semibold": "600",
-      "bold": "700"
+      "bold": "700",
+      "extrabold": "800"
     },
     "lineHeight": {
+      "none": "1",
       "tight": "1.25",
+      "snug": "1.375",
       "normal": "1.5",
-      "relaxed": "1.75"
+      "relaxed": "1.625",
+      "loose": "2"
     }
   },
   "shadows": {
-    "sm": "0 1px 2px 0 rgba(0,0,0,0.05)",
-    "md": "0 4px 6px -1px rgba(0,0,0,0.1)",
-    "lg": "0 10px 15px -3px rgba(0,0,0,0.1)",
-    "xl": "0 20px 25px -5px rgba(0,0,0,0.1)"
+    "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    "base": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
   }
 }
 ```
@@ -200,55 +226,6 @@ export default defineNgCorexConfig({
 });
 ```
 
-```ts
-import { defineNgCorexConfig } from '@ngcorex/css';
-
-export default defineNgCorexConfig({
-  constraints: {
-    spacing: {
-      unit: 'warning',  // Warn about unitless numbers
-      format: 'error',   // Error on invalid formats
-      type: 'error'      // Error on wrong types
-    },
-    colors: {
-      format: 'error',
-      shadeKey: 'error',
-      type: 'error'
-    },
-    radius: {
-      unit: 'warning',
-      format: 'error',
-      type: 'error'
-    },
-    zIndex: {
-      format: 'error',
-      type: 'error'
-    },
-    typography: {
-      fontSize: {
-        format: 'error',
-        type: 'error'
-      },
-      fontWeight: {
-        format: 'error',
-        type: 'error'
-      },
-      lineHeight: {
-        format: 'error',
-        type: 'error'
-      }
-    },
-    shadows: {
-      format: 'error',
-      type: 'error'
-    }
-  }
-});
-```
-
-Available constraint levels: `'error'`, `'warning'`, `'off'`.
-
-If `tokens.json` is present, it is used automatically.
 
 ## Configuration File
 
@@ -374,17 +351,49 @@ Example output:
 ```css
 @layer tokens {
   :root {
-    --nx-spacing-xs: 1rem;
-    --nx-spacing-sm: 1.25rem;
-    --nx-color-gray-100: #f3f4f6;
-    --nx-color-gray-900: #111827;
-    --nx-radius-sm: 4px;
-    --nx-radius-md: 8px;
+    /* Spacing */
+    --nx-spacing-xs: 0.25rem;
+    --nx-spacing-sm: 0.5rem;
+    --nx-spacing-md: 1rem;
+    --nx-spacing-lg: 1.5rem;
+    --nx-spacing-xl: 2rem;
+
+    /* Colors */
+    --nx-color-neutral-0: #ffffff;
+    --nx-color-neutral-100: #f5f5f5;
+    --nx-color-neutral-500: #737373;
+    --nx-color-neutral-900: #171717;
+    --nx-color-primary-500: #2563eb;
+
+    /* Radius */
+    --nx-radius-sm: 0.25rem;
+    --nx-radius-md: 0.5rem;
+    --nx-radius-lg: 0.75rem;
+    --nx-radius-xl: 1rem;
+    --nx-radius-full: 9999px;
+
+    /* Z-Index */
+    --nx-zIndex-base: 0;
     --nx-zIndex-dropdown: 1000;
+    --nx-zIndex-modal: 1050;
+    --nx-zIndex-tooltip: 1070;
+
+    /* Typography */
     --nx-fontSize-xs: 0.75rem;
-    --nx-fontWeight-medium: 500;
+    --nx-fontSize-base: 1rem;
+    --nx-fontSize-xl: 1.25rem;
+    --nx-fontSize-3xl: 1.875rem;
+    --nx-fontWeight-normal: 400;
+    --nx-fontWeight-bold: 700;
     --nx-lineHeight-normal: 1.5;
-    --nx-shadows-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
+    --nx-lineHeight-loose: 2;
+
+    /* Shadows */
+    --nx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --nx-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --nx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --nx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --nx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   }
 }
 ```

package/dist/commands/init.js

@@ -9,14 +9,77 @@ export async function initCommand() {
     if (!fs.existsSync(tokensPath)) {
         fs.writeFileSync(tokensPath, JSON.stringify({
             spacing: {
-                "xs": "1rem",
-                "sm": "1.25rem"
+                "xs": "0.25rem",
+                "sm": "0.5rem",
+                "md": "1rem",
+                "lg": "1.5rem",
+                "xl": "2rem"
             },
             colors: {
-                gray: {
-                    "100": "#f3f4f6",
-                    "900": "#111827"
+                neutral: {
+                    "0": "#ffffff",
+                    "100": "#f5f5f5",
+                    "300": "#d4d4d4",
+                    "500": "#737373",
+                    "700": "#404040",
+                    "900": "#171717"
+                },
+                primary: {
+                    "500": "#2563eb"
                 }
+            },
+            radius: {
+                "sm": "0.25rem",
+                "md": "0.5rem",
+                "lg": "0.75rem",
+                "xl": "1rem",
+                "full": "9999px"
+            },
+            zIndex: {
+                "base": "0",
+                "dropdown": "1000",
+                "sticky": "1020",
+                "fixed": "1030",
+                "modal-backdrop": "1040",
+                "modal": "1050",
+                "popover": "1060",
+                "tooltip": "1070"
+            },
+            typography: {
+                fontSize: {
+                    "xs": "0.75rem",
+                    "sm": "0.875rem",
+                    "base": "1rem",
+                    "lg": "1.125rem",
+                    "xl": "1.25rem",
+                    "2xl": "1.5rem",
+                    "3xl": "1.875rem",
+                    "4xl": "2.25rem"
+                },
+                fontWeight: {
+                    "light": "300",
+                    "normal": "400",
+                    "medium": "500",
+                    "semibold": "600",
+                    "bold": "700",
+                    "extrabold": "800"
+                },
+                lineHeight: {
+                    "none": "1",
+                    "tight": "1.25",
+                    "snug": "1.375",
+                    "normal": "1.5",
+                    "relaxed": "1.625",
+                    "loose": "2"
+                }
+            },
+            shadows: {
+                "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+                "base": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+                "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+                "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+                "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+                "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
             }
         }, null, 2));
         console.info('✔ Created tokens.json');

package/dist/commands/run-build.js

@@ -3,13 +3,15 @@ import path from 'node:path';
 import { resolveConfigPath } from '../config/resolve-path.js';
 import { loadConfig } from '../config/load-config.js';
 import { writeCss } from '../output/write-css.js';
-import { buildCssFromConfig } from '@ngcorex/css';
+import { buildCssFromConfig, runValidations, printValidationResults, hasValidationResults, hasValidationErrors } from '@ngcorex/css';
 import { resolve } from 'node:path';
+import { BuildSummary, success, info, warning, error, section } from '../utils/logger.js';
 let hasShownInlineTokenNotice = false;
 export async function runBuild(options = {}) {
+    const buildSummary = new BuildSummary();
     const configPath = resolveConfigPath();
     const config = await loadConfig(configPath);
-    console.log('✔ Loaded ngcorex.config.ts');
+    success('Loaded ngcorex.config.ts');
     const outputFile = config.output?.file ?? 'src/styles/ngcorex.css';
     const outputPath = resolve(process.cwd(), outputFile);
     const tokensPath = path.resolve(process.cwd(), 'tokens.json');
@@ -20,24 +22,19 @@ export async function runBuild(options = {}) {
         try {
             fileTokens = JSON.parse(raw);
         }
-        catch (error) {
-            console.error('');
-            console.error('❌ Invalid tokens.json');
-            console.error('Failed to parse JSON.');
-            if (error instanceof SyntaxError) {
-                console.error(error.message);
+        catch (err) {
+            error('Invalid tokens.json');
+            if (err instanceof SyntaxError) {
+                console.log(`   Details: ${err.message}`);
             }
-            console.error('');
             process.exit(1);
         }
     }
     // Validate top-level token shape
     if (fileTokens !== null) {
         if (typeof fileTokens !== 'object' || Array.isArray(fileTokens)) {
-            console.error('');
-            console.error('❌ Invalid tokens.json');
-            console.error('The file must export a JSON object at the top level.');
-            console.error('');
+            error('Invalid tokens.json');
+            console.log('   Details: The file must export a JSON object at the top level.');
             process.exit(1);
         }
     }
@@ -48,10 +45,8 @@ export async function runBuild(options = {}) {
             if (typeof tokens.spacing !== 'object' ||
                 tokens.spacing === null ||
                 Array.isArray(tokens.spacing)) {
-                console.error('');
-                console.error('❌ Invalid tokens.json');
-                console.error('The "spacing" token must be an object.');
-                console.error('');
+                error('Invalid tokens.json');
+                console.log('   Details: The "spacing" token must be an object.');
                 process.exit(1);
             }
         }
@@ -59,10 +54,8 @@ export async function runBuild(options = {}) {
             if (typeof tokens.colors !== 'object' ||
                 tokens.colors === null ||
                 Array.isArray(tokens.colors)) {
-                console.error('');
-                console.error('❌ Invalid tokens.json');
-                console.error('The "colors" token must be an object.');
-                console.error('');
+                error('Invalid tokens.json');
+                console.log('   Details: The "colors" token must be an object.');
                 process.exit(1);
             }
         }
@@ -70,10 +63,8 @@ export async function runBuild(options = {}) {
             if (typeof tokens.radius !== 'object' ||
                 tokens.radius === null ||
                 Array.isArray(tokens.radius)) {
-                console.error('');
-                console.error('❌ Invalid tokens.json');
-                console.error('The "radius" token must be an object.');
-                console.error('');
+                error('Invalid tokens.json');
+                console.log('   Details: The "radius" token must be an object.');
                 process.exit(1);
             }
         }
@@ -81,10 +72,8 @@ export async function runBuild(options = {}) {
             if (typeof tokens.zIndex !== 'object' ||
                 tokens.zIndex === null ||
                 Array.isArray(tokens.zIndex)) {
-                console.error('');
-                console.error('❌ Invalid tokens.json');
-                console.error('The "zIndex" token must be an object.');
-                console.error('');
+                error('Invalid tokens.json');
+                console.log('   Details: The "zIndex" token must be an object.');
                 process.exit(1);
             }
         }
@@ -92,10 +81,8 @@ export async function runBuild(options = {}) {
             if (typeof tokens.typography !== 'object' ||
                 tokens.typography === null ||
                 Array.isArray(tokens.typography)) {
-                console.error('');
-                console.error('❌ Invalid tokens.json');
-                console.error('The "typography" token must be an object.');
-                console.error('');
+                error('Invalid tokens.json');
+                console.log('   Details: The "typography" token must be an object.');
                 process.exit(1);
             }
         }
@@ -103,10 +90,8 @@ export async function runBuild(options = {}) {
             if (typeof tokens.shadows !== 'object' ||
                 tokens.shadows === null ||
                 Array.isArray(tokens.shadows)) {
-                console.error('');
-                console.error('❌ Invalid tokens.json');
-                console.error('The "shadows" token must be an object.');
-                console.error('');
+                error('Invalid tokens.json');
+                console.log('   Details: The "shadows" token must be an object.');
                 process.exit(1);
             }
         }
@@ -118,10 +103,8 @@ export async function runBuild(options = {}) {
             const spacing = tokens.spacing;
             for (const [key, value] of Object.entries(spacing)) {
                 if (typeof value !== 'number' && typeof value !== 'string') {
-                    console.error('');
-                    console.error('❌ Invalid tokens.json');
-                    console.error(`Invalid spacing value for key "${key}". Expected number or string.`);
-                    console.error('');
+                    error('Invalid tokens.json');
+                    console.log(`   Details: Invalid spacing value for key "${key}". Expected number or string.`);
                     process.exit(1);
                 }
             }
@@ -133,10 +116,8 @@ export async function runBuild(options = {}) {
                 const radius = tokens.radius;
                 for (const [key, value] of Object.entries(radius)) {
                     if (typeof value !== 'number' && typeof value !== 'string') {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error(`Invalid radius value for key "${key}". Expected number or string.`);
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log(`   Details: Invalid radius value for key "${key}". Expected number or string.`);
                         process.exit(1);
                     }
                 }
@@ -149,10 +130,8 @@ export async function runBuild(options = {}) {
                 const zIndex = tokens.zIndex;
                 for (const [key, value] of Object.entries(zIndex)) {
                     if (typeof value !== 'number' && typeof value !== 'string') {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error(`Invalid zIndex value for key "${key}". Expected number or string.`);
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log(`   Details: Invalid zIndex value for key "${key}". Expected number or string.`);
                         process.exit(1);
                     }
                 }
@@ -167,19 +146,15 @@ export async function runBuild(options = {}) {
                     if (typeof typography.fontSize !== 'object' ||
                         typography.fontSize === null ||
                         Array.isArray(typography.fontSize)) {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error('The "typography.fontSize" token must be an object.');
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log('   Details: The "typography.fontSize" token must be an object.');
                         process.exit(1);
                     }
                     const fontSize = typography.fontSize;
                     for (const [key, value] of Object.entries(fontSize)) {
                         if (typeof value !== 'number' && typeof value !== 'string') {
-                            console.error('');
-                            console.error('❌ Invalid tokens.json');
-                            console.error(`Invalid typography.fontSize value for key "${key}". Expected number or string.`);
-                            console.error('');
+                            error('Invalid tokens.json');
+                            console.log(`   Details: Invalid typography.fontSize value for key "${key}". Expected number or string.`);
                             process.exit(1);
                         }
                     }
@@ -188,19 +163,15 @@ export async function runBuild(options = {}) {
                     if (typeof typography.fontWeight !== 'object' ||
                         typography.fontWeight === null ||
                         Array.isArray(typography.fontWeight)) {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error('The "typography.fontWeight" token must be an object.');
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log('   Details: The "typography.fontWeight" token must be an object.');
                         process.exit(1);
                     }
                     const fontWeight = typography.fontWeight;
                     for (const [key, value] of Object.entries(fontWeight)) {
                         if (typeof value !== 'number' && typeof value !== 'string') {
-                            console.error('');
-                            console.error('❌ Invalid tokens.json');
-                            console.error(`Invalid typography.fontWeight value for key "${key}". Expected number or string.`);
-                            console.error('');
+                            error('Invalid tokens.json');
+                            console.log(`   Details: Invalid typography.fontWeight value for key "${key}". Expected number or string.`);
                             process.exit(1);
                         }
                     }
@@ -209,19 +180,15 @@ export async function runBuild(options = {}) {
                     if (typeof typography.lineHeight !== 'object' ||
                         typography.lineHeight === null ||
                         Array.isArray(typography.lineHeight)) {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error('The "typography.lineHeight" token must be an object.');
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log('   Details: The "typography.lineHeight" token must be an object.');
                         process.exit(1);
                     }
                     const lineHeight = typography.lineHeight;
                     for (const [key, value] of Object.entries(lineHeight)) {
                         if (typeof value !== 'number' && typeof value !== 'string') {
-                            console.error('');
-                            console.error('❌ Invalid tokens.json');
-                            console.error(`Invalid typography.lineHeight value for key "${key}". Expected number or string.`);
-                            console.error('');
+                            error('Invalid tokens.json');
+                            console.log(`   Details: Invalid typography.lineHeight value for key "${key}". Expected number or string.`);
                             process.exit(1);
                         }
                     }
@@ -235,10 +202,8 @@ export async function runBuild(options = {}) {
                 const shadows = tokens.shadows;
                 for (const [key, value] of Object.entries(shadows)) {
                     if (typeof value !== 'string') {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error(`Invalid shadows value for key "${key}". Expected string.`);
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log(`   Details: Invalid shadows value for key "${key}". Expected string.`);
                         process.exit(1);
                     }
                 }
@@ -254,43 +219,56 @@ export async function runBuild(options = {}) {
                 if (typeof shades !== 'object' ||
                     shades === null ||
                     Array.isArray(shades)) {
-                    console.error('');
-                    console.error('❌ Invalid tokens.json');
-                    console.error(`Color "${colorName}" must be an object of shade values.`);
-                    console.error('');
+                    error('Invalid tokens.json');
+                    console.log(`   Details: Color "${colorName}" must be an object of shade values.`);
                     process.exit(1);
                 }
                 for (const [shade, value] of Object.entries(shades)) {
                     // shade keys must be numeric
                     if (!/^\d+$/.test(shade)) {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error(`Invalid shade key "${shade}" in color "${colorName}". Shade keys must be numeric.`);
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log(`   Details: Invalid shade key "${shade}" in color "${colorName}". Shade keys must be numeric.`);
                         process.exit(1);
                     }
                     // value must be a string
                     if (typeof value !== 'string') {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error(`Invalid value for ${colorName}.${shade}. Expected a color string.`);
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log(`   Details: Invalid value for ${colorName}.${shade}. Expected a color string.`);
                         process.exit(1);
                     }
                     // very light color format validation (delegate strictness to engine)
                     if (!value.startsWith('#') &&
                         !value.startsWith('rgb(') &&
                         !value.startsWith('rgba(')) {
-                        console.error('');
-                        console.error('❌ Invalid tokens.json');
-                        console.error(`Invalid color format for ${colorName}.${shade}: "${value}".`);
-                        console.error('');
+                        error('Invalid tokens.json');
+                        console.log(`   Details: Invalid color format for ${colorName}.${shade}: "${value}".`);
                         process.exit(1);
                     }
                 }
             }
         }
     }
+    // Run non-blocking validations
+    if (fileTokens !== null) {
+        section('Token Validation');
+        const validationReport = runValidations(fileTokens);
+        if (hasValidationResults(validationReport)) {
+            if (hasValidationErrors(validationReport)) {
+                error('Blocking validation errors found');
+                console.log('   Details: Please fix the errors below before proceeding.');
+                printValidationResults(validationReport);
+                process.exit(1);
+            }
+            else {
+                warning('Non-blocking validation warnings found');
+                console.log('   Details: Review the warnings below for potential improvements.');
+                printValidationResults(validationReport);
+            }
+        }
+        else {
+            success('Token validation passed');
+        }
+    }
     const effectiveConfig = fileTokens
         ? {
             ...config,
@@ -300,16 +278,70 @@ export async function runBuild(options = {}) {
     if (!fileTokens &&
         config.tokens &&
         !hasShownInlineTokenNotice) {
-        console.info('');
-        console.info('i Inline tokens detected.');
-        console.info('Using tokens.json is recommended for larger or shared projects.');
-        console.info('');
+        info('Inline tokens detected');
+        console.log('   Details: Using tokens.json is recommended for larger or shared projects.');
         hasShownInlineTokenNotice = true;
     }
+    section('Building CSS');
     const css = buildCssFromConfig(effectiveConfig);
-    console.log('✔ Generated CSS');
+    success('Generated CSS');
+    // Count tokens for build summary
+    if (effectiveConfig.tokens) {
+        if (effectiveConfig.tokens.spacing) {
+            buildSummary.addTokenCategory('spacing', Object.keys(effectiveConfig.tokens.spacing).length);
+        }
+        if (effectiveConfig.tokens.colors) {
+            const colorCount = countNestedTokens(effectiveConfig.tokens.colors);
+            buildSummary.addTokenCategory('colors', colorCount);
+        }
+        if (effectiveConfig.tokens.radius) {
+            buildSummary.addTokenCategory('radius', Object.keys(effectiveConfig.tokens.radius).length);
+        }
+        if (effectiveConfig.tokens.zIndex) {
+            buildSummary.addTokenCategory('zIndex', Object.keys(effectiveConfig.tokens.zIndex).length);
+        }
+        if (effectiveConfig.tokens.typography) {
+            const typography = effectiveConfig.tokens.typography;
+            if (typography.fontSize) {
+                buildSummary.addTokenCategory('typography.fontSize', Object.keys(typography.fontSize).length);
+            }
+            if (typography.fontWeight) {
+                buildSummary.addTokenCategory('typography.fontWeight', Object.keys(typography.fontWeight).length);
+            }
+            if (typography.lineHeight) {
+                buildSummary.addTokenCategory('typography.lineHeight', Object.keys(typography.lineHeight).length);
+            }
+        }
+        if (effectiveConfig.tokens.shadows) {
+            buildSummary.addTokenCategory('shadows', Object.keys(effectiveConfig.tokens.shadows).length);
+        }
+    }
+    buildSummary.setOutputFile(outputFile);
     writeCss(outputPath, css, { dryRun: options.dryRun });
     if (!options.dryRun) {
-        console.log(`✔ Output written to ${outputFile}`);
+        success(`Output written to ${outputFile}`);
+        // Get output file size
+        const stats = fs.statSync(outputPath);
+        buildSummary.setOutputSize(stats.size);
+    }
+    // Print build summary
+    buildSummary.print();
+}
+/**
+ * Count tokens in a nested structure (like colors)
+ */
+function countNestedTokens(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return 0;
+    }
+    let count = 0;
+    for (const [key, value] of Object.entries(obj)) {
+        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+            count += countNestedTokens(value);
+        }
+        else {
+            count++;
+        }
     }
+    return count;
 }

package/dist/utils/logger.js

@@ -1,8 +1,252 @@
+/**
+ * Enhanced logger for ngCorex CLI with improved developer experience
+ */
+/**
+ * Build summary tracker
+ */
+export class BuildSummary {
+    constructor(options = {}) {
+        this.tokensProcessed = new Map();
+        this.warnings = [];
+        this.errors = [];
+        this.startTime = Date.now();
+        this.options = {};
+        this.options = options;
+    }
+    addTokenCategory(category, count) {
+        this.tokensProcessed.set(category, count);
+    }
+    addWarning(message) {
+        this.warnings.push({
+            timestamp: Date.now(),
+            message
+        });
+    }
+    addError(message) {
+        this.errors.push({
+            timestamp: Date.now(),
+            message
+        });
+    }
+    setOutputFile(file) {
+        this.options.outputFile = file;
+    }
+    setOutputSize(size) {
+        this.options.outputSize = size;
+    }
+    getWarnings() {
+        return this.warnings;
+    }
+    getErrors() {
+        return this.errors;
+    }
+    getTokensProcessed() {
+        return this.tokensProcessed;
+    }
+    getDuration() {
+        return Date.now() - this.startTime;
+    }
+    hasWarnings() {
+        return this.warnings.length > 0;
+    }
+    hasErrors() {
+        return this.errors.length > 0;
+    }
+    /**
+     * Format file size in human-readable format
+     */
+    formatFileSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(2)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+    }
+    /**
+     * Format duration in human-readable format
+     */
+    formatDuration(ms) {
+        if (ms < 1000)
+            return `${ms}ms`;
+        return `${(ms / 1000).toFixed(2)}s`;
+    }
+    /**
+     * Print the build summary
+     */
+    print() {
+        const duration = this.getDuration();
+        const totalTokens = Array.from(this.tokensProcessed.values()).reduce((a, b) => a + b, 0);
+        console.log('');
+        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+        console.log('  📦 Build Summary');
+        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+        console.log('');
+        // Tokens processed
+        if (this.tokensProcessed.size > 0) {
+            console.log('  Tokens Processed:');
+            for (const [category, count] of this.tokensProcessed.entries()) {
+                console.log(`    • ${category.padEnd(12)} ${count.toString().padStart(4)} tokens`);
+            }
+            console.log(`    ${'─'.repeat(20)}`);
+            console.log(`    ${'Total'.padEnd(12)} ${totalTokens.toString().padStart(4)} tokens`);
+            console.log('');
+        }
+        // Output file
+        if (this.options.outputFile) {
+            console.log('  Output:');
+            console.log(`    • File:  ${this.options.outputFile}`);
+            if (this.options.outputSize) {
+                console.log(`    • Size:  ${this.formatFileSize(this.options.outputSize)}`);
+            }
+            console.log('');
+        }
+        // Duration
+        console.log(`  Duration: ${this.formatDuration(duration)}`);
+        console.log('');
+        // Warnings and errors
+        if (this.hasWarnings() || this.hasErrors()) {
+            console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+            if (this.hasWarnings()) {
+                console.log(`  ⚠️  ${this.warnings.length} Warning${this.warnings.length > 1 ? 's' : ''}`);
+            }
+            if (this.hasErrors()) {
+                console.log(`  ❌ ${this.errors.length} Error${this.errors.length > 1 ? 's' : ''}`);
+            }
+            console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+            console.log('');
+        }
+        else {
+            console.log('  ✅ Build completed successfully!');
+            console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+            console.log('');
+        }
+    }
+    /**
+     * Print detailed warnings
+     */
+    printWarnings() {
+        if (!this.hasWarnings())
+            return;
+        console.log('');
+        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+        console.log('  ⚠️  Warnings');
+        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+        console.log('');
+        for (const entry of this.warnings) {
+            const { message } = entry;
+            console.log(`  ${getIcon(message.type)} ${message.message}`);
+            if (message.location) {
+                console.log(`  Location: ${message.location}`);
+            }
+            if (message.details) {
+                console.log(`  Details: ${message.details}`);
+            }
+            if (message.suggestion) {
+                console.log(`  💡 ${message.suggestion}`);
+            }
+            console.log('');
+        }
+    }
+    /**
+     * Print detailed errors
+     */
+    printErrors() {
+        if (!this.hasErrors())
+            return;
+        console.log('');
+        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+        console.log('  ❌ Errors');
+        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+        console.log('');
+        for (const entry of this.errors) {
+            const { message } = entry;
+            console.log(`  ${getIcon(message.type)} ${message.message}`);
+            if (message.location) {
+                console.log(`  Location: ${message.location}`);
+            }
+            if (message.details) {
+                console.log(`  Details: ${message.details}`);
+            }
+            if (message.suggestion) {
+                console.log(`  💡 ${message.suggestion}`);
+            }
+            console.log('');
+        }
+    }
+}
+/**
+ * Get icon for log level
+ */
+function getIcon(level) {
+    const icons = {
+        success: '✅',
+        info: 'ℹ️',
+        warning: '⚠️',
+        error: '❌'
+    };
+    return icons[level] || '•';
+}
+/**
+ * Log a success message
+ */
+export function success(message) {
+    console.log(`✅ ${message}`);
+}
+/**
+ * Log an info message
+ */
+export function info(message) {
+    console.log(`ℹ️  ${message}`);
+}
+/**
+ * Log a warning message
+ */
+export function warning(message) {
+    console.log('');
+    console.log(`⚠️  ${message}`);
+    console.log('');
+}
+/**
+ * Log an error message
+ */
+export function error(message) {
+    console.log('');
+    console.log(`❌ ${message}`);
+    console.log('');
+}
+/**
+ * Handle CLI errors with improved formatting
+ */
 export function handleCliError(error) {
+    console.log('');
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    console.log('  ❌ Error');
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    console.log('');
     if (error instanceof Error) {
-        console.error(`✖ ${error.message}`);
+        console.log(`  ${error.message}`);
     }
     else {
-        console.error('✖ Unknown error');
+        console.log('  Unknown error occurred');
     }
+    console.log('');
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    console.log('');
+}
+/**
+ * Log a section header
+ */
+export function section(title) {
+    console.log('');
+    console.log(`━━━ ${title} ━━━`);
+    console.log('');
+}
+/**
+ * Log a sub-section header
+ */
+export function subsection(title) {
+    console.log('');
+    console.log(`  ${title}`);
+    console.log(`  ${'─'.repeat(title.length)}`);
+    console.log('');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngcorex/cli",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "CLI for ngCorex - Angular-native design token engine",
   "keywords": [
     "design-tokens",
@@ -42,5 +42,5 @@
     "directory": "packages/cli"
   },
 
-  "homepage": "https://github.com/arkdezin/ngCorex"
+  "homepage": "https://github.com/arkdezin/ngCorex/blob/main/README.md"
 }