Angular-native design token and utility CSS engine
npm install @ngcorex/cssbash
npm install @ngcorex/css
``
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)" |
$3
| 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" |
Token Source
Tokens can be provided either inline via configuration or from an external tokens.json file when using the ngCorex CLI.
External token files are the recommended approach for larger projects, as they keep design tokens portable, auditable, and framework-agnostic.
Usage
This package is usually consumed internally by the CLI.
Example:
`ts
import { defineNgCorexConfig } from '@ngcorex/css';
export default defineNgCorexConfig({
output: {
file: 'src/styles/ngcorex.css'
}
});
``