@ngcorex/cli 0.1.5 → 0.1.6

package/LICENSE.md

@@ -1,6 +1,6 @@
-MIT License
+# MIT License
 
-Copyright (c) 2026 Ajay Kumar Sharma
+Copyright © 2026 Ajay Kumar Sharma
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -1,6 +1,6 @@
 # @ngcorex/cli
 
-![NPM Version](https://img.shields.io/npm/v/%40ngcorex%2Fcli?style=flat-square&logo=npm&labelColor=%23D50100&color=%23000) ![NPM License](https://img.shields.io/npm/l/%40ngcorex%2Fcli?style=flat-square) ![Static Badge](https://img.shields.io/badge/Github-Repo-blue?style=flat-square&logo=github) ![NPM Downloads](https://img.shields.io/npm/dm/%40ngcorex%2Fcli?style=flat-square&logo=npm&logoColor=%23ffffff&labelColor=%23D50100&color=%23000)
+![NPM Version](https://img.shields.io/npm/v/%40ngcorex%2Fcli?style=flat-square&logo=npm&labelColor=%23D50100&color=%23000) ![NPM License](https://img.shields.io/npm/l/%40ngcorex%2Fcli?style=flat-square) ![Static Badge](https://img.shields.io/badge/Github-Repo-blue?style=flat-square&logo=github) ![NPM Downloads](https://img.shields.io/npm/dm/%40ngcorex%2Fcli?style=flat-square&logo=npm&logoColor=%23ffffff&labelColor=%23D50100&color=%23000) ![GitHub Issues or Pull Requests](https://img.shields.io/github/issues/arkdezin/ngcorex)
 
 Command-line interface for **ngCorex**.
 
@@ -63,18 +63,191 @@ Create a `tokens.json` file at your project root:
 ```json
 {
   "spacing": {
-    "1": "1rem",
-    "2": "2rem"
+    "xs": "1rem",
+    "sm": "1.25rem"
   },
   "colors": {
     "gray": {
       "100": "#f3f4f6",
       "900": "#111827"
     }
+  },
+  "radius": {
+    "sm": "4px",
+    "md": "8px",
+    "lg": "16px",
+    "full": "9999px"
+  },
+  "zIndex": {
+    "dropdown": "1000",
+    "modal": "2000",
+    "toast": "3000"
+  },
+  "typography": {
+    "fontSize": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem"
+    },
+    "fontWeight": {
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "lineHeight": {
+      "tight": "1.25",
+      "normal": "1.5",
+      "relaxed": "1.75"
+    }
+  },
+  "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)"
   }
 }
 ```
 
+### Supported Token Categories
+
+ngCorex supports the following design token categories:
+
+| Category | Description | Example Values |
+| ---------- | ------------- | ---------------- |
+| `spacing` | Spacing scale for margins, padding, gaps | `"4px"`, `"1rem"`, `"0.5em"` |
+| `colors` | Color palette with nested shades | `"#f3f4f6"`, `"rgb(37, 99, 235)"` |
+| `radius` | Border radius values | `"4px"`, `"8px"`, `"16px"`, `"full"` |
+| `zIndex` | Z-index layer values | `"1000"`, `"2000"`, `"3000"` |
+| `typography` | Font properties (fontSize, fontWeight, lineHeight) | See below |
+| `shadows` | Box shadow values | `"0 1px 2px 0 rgba(0,0,0,0.05)"` |
+
+#### Typography Sub-categories
+
+| Sub-category | Description | Example Values |
+| ------------- | ------------- | ---------------- |
+| `fontSize` | Font size values | `"0.75rem"`, `"16px"`, `"1.25em"` |
+| `fontWeight` | Font weight values | `"400"`, `"500"`, `"bold"`, `"700"` |
+| `lineHeight` | Line height values | `"1.25"`, `"1.5"`, `"1.75"` |
+
+### Constraint Configuration
+
+You can configure constraint levels in your `ngcorex.config.ts`:
+
+```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'`.
+
+### Output Layer Configuration
+
+You can optionally wrap generated CSS in a CSS layer for better organization and specificity control:
+
+```ts
+import { defineNgCorexConfig } from '@ngcorex/css';
+
+export default defineNgCorexConfig({
+  output: {
+    layer: 'tokens',  // Wraps CSS in @layer tokens { ... }
+    file: 'src/styles/ngcorex.css'
+  }
+});
+```
+
+```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
@@ -95,6 +268,18 @@ export default defineNgCorexConfig({
 });
 ```
 
+In case you want to output in layer
+**add:**
+
+```ts
+export default defineNgCorexConfig({
+  output: {
+    layer: 'layer-name',
+    file: 'src/styles/ngcorex.css'
+  }
+});
+```
+
 ### Important Rules
 
 - The config file **must import from npm packages only**
@@ -107,12 +292,12 @@ export default defineNgCorexConfig({
 
 The ngCorex CLI supports the following commands:
 
-- `ngcorex init` – create starter config and tokens
-- `ngcorex build` – generate CSS from tokens
-- `ngcorex build --watch` – rebuild on file changes
-- `ngcorex build --dry-run` – validate without writing files
-- `ngcorex version` / `--version` / `-v` – print CLI version
-- `ngcorex --help` / `-h` – show help information
+- `ngcorex init` - create starter config and tokens
+- `ngcorex build` - generate CSS from tokens
+- `ngcorex build --watch` - rebuild on file changes
+- `ngcorex build --dry-run` - validate without writing files
+- `ngcorex version` / `--version` / `-v` - print CLI version
+- `ngcorex --help` / `-h` - show help information
 
 ## Commands
 
@@ -187,11 +372,20 @@ The CLI generates CSS variables based on your tokens and constraints.
 Example output:
 
 ```css
-:root {
-  --nx-spacing-1: 1rem;
-  --nx-spacing-2: 2rem;
-  --nx-color-gray-100: #f3f4f6;
-  --nx-color-gray-900: #111827;
+@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;
+    --nx-zIndex-dropdown: 1000;
+    --nx-fontSize-xs: 0.75rem;
+    --nx-fontWeight-medium: 500;
+    --nx-lineHeight-normal: 1.5;
+    --nx-shadows-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
+  }
 }
 ```
 

package/dist/commands/run-build.js

@@ -66,6 +66,50 @@ export async function runBuild(options = {}) {
                 process.exit(1);
             }
         }
+        if ('radius' in tokens) {
+            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('');
+                process.exit(1);
+            }
+        }
+        if ('zIndex' in tokens) {
+            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('');
+                process.exit(1);
+            }
+        }
+        if ('typography' in tokens) {
+            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('');
+                process.exit(1);
+            }
+        }
+        if ('shadows' in tokens) {
+            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('');
+                process.exit(1);
+            }
+        }
     }
     // Validate spacing token values
     if (fileTokens !== null) {
@@ -82,6 +126,124 @@ export async function runBuild(options = {}) {
                 }
             }
         }
+        // Validate radius token values
+        if (fileTokens !== null) {
+            const tokens = fileTokens;
+            if (tokens.radius) {
+                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('');
+                        process.exit(1);
+                    }
+                }
+            }
+        }
+        // Validate z-index token values
+        if (fileTokens !== null) {
+            const tokens = fileTokens;
+            if (tokens.zIndex) {
+                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('');
+                        process.exit(1);
+                    }
+                }
+            }
+        }
+        // Validate typography token structure
+        if (fileTokens !== null) {
+            const tokens = fileTokens;
+            if (tokens.typography) {
+                const typography = tokens.typography;
+                if (typography.fontSize) {
+                    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('');
+                        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('');
+                            process.exit(1);
+                        }
+                    }
+                }
+                if (typography.fontWeight) {
+                    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('');
+                        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('');
+                            process.exit(1);
+                        }
+                    }
+                }
+                if (typography.lineHeight) {
+                    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('');
+                        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('');
+                            process.exit(1);
+                        }
+                    }
+                }
+            }
+        }
+        // Validate shadows token values
+        if (fileTokens !== null) {
+            const tokens = fileTokens;
+            if (tokens.shadows) {
+                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('');
+                        process.exit(1);
+                    }
+                }
+            }
+        }
     }
     // Validate color token structure & values
     if (fileTokens !== null) {
@@ -139,8 +301,8 @@ export async function runBuild(options = {}) {
         config.tokens &&
         !hasShownInlineTokenNotice) {
         console.info('');
-        console.info('ℹ️ Inline tokens detected.');
-        console.info('   Using tokens.json is recommended for larger or shared projects.');
+        console.info('i Inline tokens detected.');
+        console.info('Using tokens.json is recommended for larger or shared projects.');
         console.info('');
         hasShownInlineTokenNotice = true;
     }

package/dist/output/write-css.js

@@ -2,7 +2,7 @@ import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname } from 'node:path';
 export function writeCss(filePath, css, options = {}) {
     if (options.dryRun) {
-        console.log(`ℹ Dry run – skipping write to ${filePath}`);
+        console.log(`i Dry run - skipping write to ${filePath}`);
         return;
     }
     const dir = dirname(filePath);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngcorex/cli",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "CLI for ngCorex - Angular-native design token engine",
   "keywords": [
     "design-tokens",
@@ -12,7 +12,12 @@
     "frontend-tooling",
     "ngcorex",
     "typescript",
-    "angular"
+    "angular",
+    "css-variables",
+    "utility-css",
+    "build-time",
+    "design-system",
+    "theming"
   ],
   "license": "MIT",
   "type": "module",