@nons-dev/uikit 0.1.5 → 0.1.6

package/generated/components.json

@@ -2660,6 +2660,6 @@
       "schemaExample": "{\n  \"type\": \"side-panel\",\n  \"props\": {}\n}"
     }
   ],
-  "scannedAt": "2026-06-26T16:53:20.600Z",
+  "scannedAt": "2026-06-27T05:59:11.393Z",
   "totalFiles": 53
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nons-dev/uikit",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "BUSL-1.1",
   "type": "module",
   "main": "./dist/index.js",

package/readme.md

@@ -49,23 +49,44 @@ The `nons.config.yaml` file at your project root is the **single source of truth
 
 ```yaml
 theme:
-  preset: nons          # theme preset (nons, custom)
+  preset: nons
 
 brand:
-  name: Nons            # brand name
+  name: Nons
 
 direction:
-  default: rtl          # UI direction (rtl, ltr)
+  default: rtl
 
 locale:
-  default: fa           # default language
-  supported: [fa, en]   # supported languages
+  default: fa
+  supported: [fa, en]
 
 font:
   fa:
     family: IRANSansX
   en:
     family: Satoshi
+
+tokens:
+  colors:
+    light:
+      --color-primary: '#9FE870'
+      --color-danger: '#F31260'
+      # ... override any CSS custom property
+    dark:
+      --color-primary: '#9FE870'
+      --color-danger: '#f31260'
+  spacing:
+    --space-4: 16px
+  # ... typography, radius, shadows, z-index, opacity, button, alert
+
+theme-mappings:
+  light:
+    --bg-primary: var(--color-ui-window)
+    --text-primary: var(--color-text-default)
+  dark:
+    --bg-primary: var(--color-ui-window)
+    --text-primary: var(--color-text-default)
 ```
 
 Run `npx @nons-dev/uikit generate` to regenerate CSS variables from your config.
@@ -81,6 +102,26 @@ npx @nons-dev/uikit schema <name>     # Show schema JSON for a component
 npx @nons-dev/uikit search <query>    # Search components by name or description
 ```
 
+## Customizing Colors & Tokens
+
+Edit `nons.config.yaml` in your project root, then regenerate:
+
+```bash
+npx @nons-dev/uikit generate
+```
+
+This produces `generated/tokens.css` (color schemes + all tokens) and `generated/theme.css` (semantic theme mappings). Import them in your app after the uikit CSS:
+
+```ts
+import '@nons-dev/uikit/style.css'
+import './generated/tokens.css'
+import './generated/theme.css'
+```
+
+The generated CSS uses `:root` / `[data-theme="dark"]` blocks — your custom values override the defaults with the same specificity.
+
+All visual values in the uikit reference CSS custom properties (`var(--color-primary)`), so changing a token in YAML propagates to every component.
+
 ## Documentation
 
 | Resource | Description |

package/scripts/cli.mjs

@@ -16,7 +16,6 @@ const GREEN = '\x1b[32m'
 const CYAN = '\x1b[36m'
 const YELLOW = '\x1b[33m'
 const MAGENTA = '\x1b[35m'
-const WHITE = '\x1b[37m'
 const GRAY = '\x1b[90m'
 const RED = '\x1b[31m'
 const BLUE = '\x1b[34m'
@@ -41,6 +40,168 @@ font:
     family: IRANSansX
   en:
     family: Satoshi
+  # Faces loaded automatically from @nons-dev/uikit/dist/font/
+  # Uncomment and customize src to use your own font files:
+  # faces:
+  #   - family: Satoshi
+  #     weight: 400
+  #     src: fonts/Satoshi-Regular.woff2
+  #     format: woff2
+  #   - family: IRANSansX
+  #     weight: 400
+  #     src: fonts/IRANSansX-Regular.woff
+  #     format: woff
+
+tokens:
+  colors:
+    light:
+      --color-text-default: '#37352F'
+      --color-text-grey: '#787774'
+      --color-ui-window: '#FFFFFF'
+      --color-ui-sidebar: '#F7F6F3'
+      --color-ui-hover: rgba(55, 53, 47, 0.08)
+      --color-primary: '#9FE870'
+      --color-primary-bg: rgba(159, 232, 112, 0.15)
+      --color-primary-dark: '#163300'
+      --color-primary-text: var(--color-primary-dark)
+      --color-primary-selected-bg: rgba(159, 232, 112, 0.08)
+      --color-danger: '#F31260'
+      --color-danger-bg: '#FEE7EF'
+      --color-success: '#17C964'
+      --color-success-bg: '#E8FAF0'
+      --color-warning: '#F5A524'
+      --color-warning-bg: '#FEFCE8'
+      --color-secondary: '#7828C8'
+      --color-secondary-bg: '#F2EAFA'
+      --color-info: '#006FEE'
+      --color-info-bg: '#E7F3F8'
+      --color-default: '#11181C'
+      --color-default-bg: '#F4F4F5'
+      --color-border: '#D5D5D2'
+      --color-text-secondary: var(--color-text-grey)
+      --color-white: '#FFFFFF'
+    dark:
+      --color-text-default: '#FFFFFF'
+      --color-text-grey: '#979A9B'
+      --color-ui-window: '#111111'
+      --color-ui-sidebar: '#000000'
+      --color-ui-hover: rgba(255, 255, 255, 0.08)
+      --color-primary: '#9FE870'
+      --color-primary-bg: rgba(159, 232, 112, 0.15)
+      --color-primary-dark: '#163300'
+      --color-primary-text: var(--color-primary-dark)
+      --color-primary-selected-bg: rgba(159, 232, 112, 0.08)
+      --color-danger: '#f31260'
+      --color-danger-bg: '#310413'
+      --color-success: '#17c964'
+      --color-success-bg: '#052814'
+      --color-warning: '#f5a524'
+      --color-warning-bg: '#312107'
+      --color-secondary: '#9353d3'
+      --color-secondary-bg: '#180828'
+      --color-info: '#006fee'
+      --color-info-bg: '#001731'
+      --color-default: '#006fee'
+      --color-default-bg: '#001731'
+      --color-border: '#1D1D1D'
+      --color-text-secondary: var(--color-text-grey)
+      --color-white: '#FFFFFF'
+
+  spacing:
+    --space-0-5: 2px
+    --space-1: 4px
+    --space-2: 8px
+    --space-2-5: 10px
+    --space-3: 12px
+    --space-4: 16px
+    --space-5: 24px
+    --space-6: 32px
+    --space-8: 48px
+    --space-10: 64px
+    --space-3-5: 14px
+    --space-4-5: 18px
+    --border-width: 1px
+    --border-width-lg: 2px
+
+  typography:
+    --font-family: "'IRANSansX', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
+    --font-family-mono: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace"
+    --font-size-xs: 12px
+    --font-size-sm: 12px
+    --font-size-md: 14px
+    --font-size-lg: 16px
+    --font-size-xl: 18px
+    --font-size-2xl: 24px
+    --font-weight-normal: 400
+    --font-weight-medium: 500
+    --font-weight-bold: 700
+    --line-height-sm: 18px
+    --line-height-md: 22px
+    --line-height-lg: 30px
+
+  radius:
+    --radius-sm: 4px
+    --radius-md: 8px
+    --radius-lg: 12px
+    --radius-xl: 16px
+    --radius-full: 9999px
+
+  shadows:
+    light:
+      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06)
+      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08)
+      --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1)
+    dark:
+      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3)
+      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35)
+      --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4)
+
+  z-index:
+    --z-dropdown: 100
+    --z-popover: 90
+    --z-tooltip: 150
+    --z-modal: 1000
+    --z-panel: 200
+
+  opacity:
+    --opacity-disabled: 0.5
+    --opacity-secondary: 0.6
+    --opacity-placeholder: 0.6
+    --opacity-hint: 0.8
+    --opacity-hover: 0.8
+
+  button:
+    --btn-border-radius: 8px
+    --btn-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05)
+    --btn-padding: 10px 16px
+    --btn-font-size: 14px
+    --btn-font-weight: 500
+    --btn-font-family: "'IRANSansX', sans-serif"
+
+  alert:
+    --alert-border-radius: 16px
+    --alert-padding: 12px
+    --alert-gap: 16px
+
+theme-mappings:
+  light:
+    --bg-primary: var(--color-ui-window)
+    --bg-sidebar: var(--color-ui-sidebar)
+    --bg-hover: var(--color-ui-hover)
+    --bg-card: var(--color-ui-window)
+    --text-primary: var(--color-text-default)
+    --text-secondary: var(--color-text-secondary)
+    --border-primary: var(--color-border)
+    --overlay-bg: rgba(0, 0, 0, 0.4)
+  dark:
+    --bg-primary: var(--color-ui-window)
+    --bg-sidebar: var(--color-ui-sidebar)
+    --bg-hover: var(--color-ui-hover)
+    --bg-card: '#161816'
+    --text-primary: var(--color-text-default)
+    --text-secondary: var(--color-text-grey)
+    --border-primary: var(--color-border)
+    --overlay-bg: rgba(0, 0, 0, 0.6)
 `
 
 // ── Data ──
@@ -70,6 +231,111 @@ function searchComponents(data, query) {
   )
 }
 
+// ── Generate helpers ──
+
+function writeTokenBlock(tokens, indent) {
+  return Object.entries(tokens || {}).map(([k, v]) => `${indent}${k}: ${v};`).join('\n')
+}
+
+function generateFontCSS(config) {
+  const faces = config.font?.faces
+  if (!faces || !faces.length) return ''
+  const lines = []
+  for (const face of faces) {
+    lines.push('@font-face {')
+    lines.push(`  font-family: '${face.family}';`)
+    lines.push(`  src: url('./${face.src}') format('${face.format}');`)
+    lines.push(`  font-weight: ${face.weight};`)
+    lines.push('  font-style: normal;')
+    lines.push('  font-display: swap;')
+    lines.push('}')
+    lines.push('')
+  }
+  return lines.join('\n')
+}
+
+function generateTokensCSS(config) {
+  const lines = []
+  const fonts = generateFontCSS(config)
+  if (fonts) lines.push(fonts)
+
+  const t = config.tokens || {}
+
+  // Light & dark color schemes
+  const hasLight = t.colors?.light && Object.keys(t.colors.light).length
+  const hasDark = t.colors?.dark && Object.keys(t.colors.dark).length
+
+  if (hasLight) {
+    lines.push(':root {')
+    lines.push('  color-scheme: light;')
+    lines.push(writeTokenBlock(t.colors.light, '  '))
+    lines.push('}')
+    lines.push('')
+  }
+
+  if (hasDark) {
+    lines.push('[data-theme="dark"] {')
+    lines.push('  color-scheme: dark;')
+    lines.push(writeTokenBlock(t.colors.dark, '  '))
+    lines.push('}')
+    lines.push('')
+  }
+
+  // Flat token sections (no light/dark split)
+  const flatSections = {
+    spacing: 'Spacing', typography: 'Typography', radius: 'Border Radius',
+    'z-index': 'Z-Index', opacity: 'Opacity', button: 'Button', alert: 'Alert',
+  }
+  for (const [section, label] of Object.entries(flatSections)) {
+    const tokens = t[section]
+    if (!tokens || !Object.keys(tokens).length) continue
+    lines.push(`/* ${label} */`)
+    lines.push(':root {')
+    lines.push(writeTokenBlock(tokens, '  '))
+    lines.push('}')
+    lines.push('')
+  }
+
+  // Shadows (light + dark)
+  const hasShadowLight = t.shadows?.light && Object.keys(t.shadows.light).length
+  const hasShadowDark = t.shadows?.dark && Object.keys(t.shadows.dark).length
+  if (hasShadowLight) {
+    lines.push(':root {')
+    lines.push('  color-scheme: light;')
+    lines.push(writeTokenBlock(t.shadows.light, '  '))
+    lines.push('}')
+    lines.push('')
+  }
+  if (hasShadowDark) {
+    lines.push('[data-theme="dark"] {')
+    lines.push('  color-scheme: dark;')
+    lines.push(writeTokenBlock(t.shadows.dark, '  '))
+    lines.push('}')
+    lines.push('')
+  }
+
+  return lines.join('\n')
+}
+
+function generateThemeCSS(config) {
+  const m = config['theme-mappings']
+  if (!m) return ''
+  const lines = []
+
+  lines.push(':root {')
+  lines.push('  color-scheme: light;')
+  if (m.light) lines.push(writeTokenBlock(m.light, '  '))
+  lines.push('}')
+
+  lines.push('')
+  lines.push('[data-theme="dark"] {')
+  lines.push('  color-scheme: dark;')
+  if (m.dark) lines.push(writeTokenBlock(m.dark, '  '))
+  lines.push('}')
+
+  return lines.join('\n')
+}
+
 // ── Commands ──
 
 function cmdInit() {
@@ -93,16 +359,19 @@ function cmdGenerate() {
   const generatedDir = path.join(CWD, 'generated')
   if (!fs.existsSync(generatedDir)) fs.mkdirSync(generatedDir, { recursive: true })
 
-  const lines = [':root {']
-  const sections = ['colors', 'spacing', 'typography', 'radius', 'z-index', 'opacity', 'button', 'alert']
-  for (const section of sections) {
-    const tokens = config.tokens?.[section]
-    if (!tokens) continue
-    for (const [key, val] of Object.entries(tokens)) lines.push(`  ${key}: ${val};`)
-  }
-  lines.push('}')
-  fs.writeFileSync(path.join(generatedDir, 'tokens.css'), lines.join('\n'), 'utf-8')
+  // tokens.css
+  const tokensCSS = generateTokensCSS(config)
+  fs.writeFileSync(path.join(generatedDir, 'tokens.css'), tokensCSS, 'utf-8')
   console.log(`${GREEN}✓${RESET}  generated/tokens.css`)
+
+  // theme.css
+  const themeCSS = generateThemeCSS(config)
+  if (themeCSS) {
+    fs.writeFileSync(path.join(generatedDir, 'theme.css'), themeCSS, 'utf-8')
+    console.log(`${GREEN}✓${RESET}  generated/theme.css`)
+  }
+
+  console.log(`${YELLOW}ℹ${RESET}  Import in your app:\n      import './generated/tokens.css'\n      import './generated/theme.css'`)
 }
 
 function cmdList() {
@@ -225,19 +494,19 @@ function printHelp() {
   console.log(`\n${BOLD}${CYAN}Nons UIKit CLI${RESET}\n`)
   console.log(`${BOLD}Commands:${RESET}\n`)
   console.log(`  ${GREEN}init${RESET}               Create nons.config.yaml in current directory`)
-  console.log(`  ${GREEN}generate${RESET}           Generate CSS from nons.config.yaml`)
+  console.log(`  ${GREEN}generate${RESET}           Generate tokens.css + theme.css from config`)
   console.log(`  ${GREEN}list${RESET}               List all components`)
   console.log(`  ${GREEN}show${RESET} ${DIM}<name>${RESET}          Show full detail for a component`)
   console.log(`  ${GREEN}schema${RESET} ${DIM}<name>${RESET}         Show schema JSON for a component`)
   console.log(`  ${GREEN}search${RESET} ${DIM}<query>${RESET}        Search components by name/description`)
   console.log(`  ${GREEN}help${RESET}               Show this help\n`)
   console.log(`${BOLD}Usage:${RESET}\n`)
+  console.log(`  ${DIM}npx @nons-dev/uikit init${RESET}`)
+  console.log(`  ${DIM}npx @nons-dev/uikit generate${RESET}`)
   console.log(`  ${DIM}npx @nons-dev/uikit list${RESET}`)
   console.log(`  ${DIM}npx @nons-dev/uikit show Button${RESET}`)
   console.log(`  ${DIM}npx @nons-dev/uikit schema Input${RESET}`)
-  console.log(`  ${DIM}npx @nons-dev/uikit search table${RESET}`)
-  console.log(`  ${DIM}npx @nons-dev/uikit init${RESET}`)
-  console.log(`  ${DIM}npx @nons-dev/uikit generate${RESET}\n`)
+  console.log(`  ${DIM}npx @nons-dev/uikit search table${RESET}\n`)
 }
 
 // ── Main ──