ajoy-style-rules 1.0.0

package/index.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+import prompts from "prompts";
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+
+// Fix __dirname for ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function setup() {
+  const response = await prompts({
+    type: "select",
+    name: "platform",
+    message: "Choose your platform",
+    choices: [
+      { title: "React (Web)", value: "react" },
+      { title: "React Native", value: "react-native" },
+    ],
+  });
+
+  let sourceFile;
+
+  if (response.platform === "react") {
+    sourceFile = path.join(__dirname, "templates", "react.js");
+  } else {
+    sourceFile = path.join(__dirname, "templates", "react-native.js");
+  }
+
+  // Destination (user project root)
+  const destFile = path.join(
+    process.cwd(),
+    `theme.${response.platform === "react" ? "web" : "native"}.js`,
+  );
+
+  try {
+    await fs.copy(sourceFile, destFile);
+    console.log("Theme file created successfully!");
+  } catch (err) {
+    console.error("Error copying file:", err);
+  }
+}
+
+setup();

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "ajoy-style-rules",
+  "version": "1.0.0",
+  "description": "CLI to generate style rules for React and React Native",
+  "main": "index.js",
+  "type": "module",
+  "files": [
+    "index.js",
+    "templates"
+  ],
+  "bin": {
+    "ajoy-style": "index.js"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "react-native",
+    "cli"
+  ],
+  "author": "Ajoy Das",
+  "license": "MIT"
+}

package/readme.md

@@ -0,0 +1,90 @@
+# AJOY STYLE RULES
+
+A simple CLI tool to generate a clean design system for **React** or **React Native**.
+
+---
+
+## Installation
+
+```bash
+npm install ajoy-style-rules
+```
+
+Or run directly:
+
+```bash
+npx ajoy-style-rules
+```
+
+---
+
+## Usage
+
+Run the CLI:
+
+```bash
+npx ajoy-style-rules
+```
+
+You will be prompted:
+
+```
+Choose your platform
+> React (Web)
+  React Native
+```
+
+---
+
+## Output
+
+Based on your selection, a theme file will be created in your project:
+
+### React
+
+```
+theme.web.js
+```
+
+### React Native
+
+```
+theme.native.js
+```
+
+---
+
+## Example
+
+```js
+import theme from "./theme";
+
+const styles = {
+  container: {
+    backgroundColor: theme.bg.base,
+    padding: theme.spacing.lg,
+  },
+};
+```
+
+---
+
+## Features
+
+* Clean design system
+* Light & Dark themes
+* Ready for production
+* Works with React & React Native
+
+---
+
+## Notes
+
+* The file will be created in your current project folder
+* Existing files will not be overwritten
+
+---
+
+## Author
+
+Ajoy Das

package/templates/react-native.js

@@ -0,0 +1,348 @@
+
+/**
+ * LIGHT THEME
+ *
+ * PURPOSE:
+ * - Default theme for light mode UI
+ * - Use across all components (no raw values)
+ */
+export const lightTheme = {
+  /**
+   * BRAND COLORS
+   *
+   * USE:
+   * - primary → main actions (buttons, links)
+   * - secondary → supporting UI
+   * - accent → highlights / special UI
+   */
+  brand: {
+    primary: "#2563EB",
+    secondary: "#64748B",
+    accent: "#7C3AED",
+  },
+
+  /**
+   * SEMANTIC COLORS
+   *
+   * USE:
+   * - success → success states
+   * - warning → warnings
+   * - danger → errors/destructive
+   * - info → informational UI
+   */
+  colors: {
+    success: "#16A34A",
+    warning: "#F59E0B",
+    danger: "#DC2626",
+    info: "#0EA5E9",
+  },
+
+  /**
+   * BACKGROUND SYSTEM
+   *
+   * USE:
+   * - base → app background
+   * - surface → cards / containers
+   * - elevated → modals / overlays
+   * - subtle → hover / press feedback
+   * - inverse → dark sections inside light UI
+   */
+  bg: {
+    base: "#FFFFFF",
+    surface: "#F8FAFC",
+    elevated: "#FFFFFF",
+    subtle: "#F1F5F9",
+    inverse: "#0F172A",
+  },
+
+  /**
+   * TEXT COLORS
+   *
+   * USE:
+   * - primary → main readable text
+   * - secondary → less important text
+   * - tertiary → hints / disabled
+   * - inverse → text on dark background
+   * - link → clickable text
+   */
+  text: {
+    primary: "#0F172A",
+    secondary: "#475569",
+    tertiary: "#94A3B8",
+    inverse: "#FFFFFF",
+    link: "#2563EB",
+  },
+
+  /**
+   * BORDER SYSTEM
+   *
+   * USE:
+   * - color → default border
+   * - subtle → low visibility borders
+   * - strong → emphasis borders
+   */
+  border: {
+    color: "#E2E8F0",
+    subtle: "#F1F5F9",
+    strong: "#CBD5F5",
+  },
+
+  /**
+   * BORDER RADIUS
+   *
+   * USE:
+   * - sm → small elements (inputs, chips)
+   * - md → default (buttons, cards)
+   * - lg/xl → containers, modals
+   * - full → rounded (avatars, pills)
+   */
+  radius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+  },
+
+  /**
+   * SHADOW (React Native)
+   *
+   * USE:
+   * - sm → subtle elevation
+   * - md → default card
+   * - lg → modal / high elevation
+   *
+   * NOTE:
+   * - Works for both iOS (shadow*) and Android (elevation)
+   */
+  shadow: {
+    sm: {
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 2,
+      shadowOffset: { width: 0, height: 1 },
+      elevation: 1,
+    },
+    md: {
+      shadowColor: "#000",
+      shadowOpacity: 0.08,
+      shadowRadius: 6,
+      shadowOffset: { width: 0, height: 4 },
+      elevation: 3,
+    },
+    lg: {
+      shadowColor: "#000",
+      shadowOpacity: 0.12,
+      shadowRadius: 12,
+      shadowOffset: { width: 0, height: 10 },
+      elevation: 6,
+    },
+  },
+
+  /**
+   * TYPOGRAPHY
+   *
+   * USE:
+   * - fontFamily → base font
+   * - size → text sizes
+   * - weight → font weights
+   *
+   * NOTE:
+   * - Load custom fonts (e.g., Inter) using expo-font
+   */
+  typography: {
+    fontFamily: "System",
+    size: {
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 18,
+      xl: 20,
+      "2xl": 24,
+      "3xl": 30,
+    },
+    weight: {
+      regular: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+    },
+  },
+
+  /**
+   * SPACING SYSTEM
+   *
+   * USE:
+   * - Consistent padding/margin
+   *
+   * RULE:
+   * - Never use random numbers (like 13, 22)
+   */
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    "2xl": 32,
+  },
+
+  /**
+   * STATE TOKENS
+   *
+   * USE:
+   * - hover → press/hover feedback
+   * - active → pressed state
+   * - focus → focus ring / highlight
+   * - disabled → disabled UI
+   */
+  state: {
+    hover: "rgba(0,0,0,0.04)",
+    active: "rgba(0,0,0,0.08)",
+    focus: "#2563EB",
+    disabled: "rgba(0,0,0,0.3)",
+  },
+};
+
+/**
+ * DARK THEME
+ *
+ * PURPOSE:
+ * - Used when dark mode is enabled
+ *
+ * RULE:
+ * - Same structure as lightTheme (never change structure)
+ */
+export const darkTheme = {
+  /**
+   * BRAND COLORS (slightly brighter for contrast)
+   */
+  brand: {
+    primary: "#3B82F6",
+    secondary: "#94A3B8",
+    accent: "#8B5CF6",
+  },
+
+  /**
+   * SEMANTIC COLORS (adjusted for dark visibility)
+   */
+  colors: {
+    success: "#22C55E",
+    warning: "#FBBF24",
+    danger: "#EF4444",
+    info: "#38BDF8",
+  },
+
+  /**
+   * BACKGROUND SYSTEM (dark hierarchy)
+   */
+  bg: {
+    base: "#0F172A",
+    surface: "#1E293B",
+    elevated: "#334155",
+    subtle: "#1E293B",
+    inverse: "#FFFFFF",
+  },
+
+  /**
+   * TEXT SYSTEM (high contrast)
+   */
+  text: {
+    primary: "#F8FAFC",
+    secondary: "#CBD5F5",
+    tertiary: "#64748B",
+    inverse: "#0F172A",
+    link: "#3B82F6",
+  },
+
+  /**
+   * BORDER SYSTEM (darker tones)
+   */
+  border: {
+    color: "#334155",
+    subtle: "#1E293B",
+    strong: "#475569",
+  },
+
+  /**
+   * RADIUS (same as light — consistency)
+   */
+  radius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+  },
+
+  /**
+   * SHADOW (stronger for dark backgrounds)
+   */
+  shadow: {
+    sm: {
+      shadowColor: "#000",
+      shadowOpacity: 0.4,
+      shadowRadius: 2,
+      shadowOffset: { width: 0, height: 1 },
+      elevation: 1,
+    },
+    md: {
+      shadowColor: "#000",
+      shadowOpacity: 0.5,
+      shadowRadius: 6,
+      shadowOffset: { width: 0, height: 4 },
+      elevation: 3,
+    },
+    lg: {
+      shadowColor: "#000",
+      shadowOpacity: 0.6,
+      shadowRadius: 12,
+      shadowOffset: { width: 0, height: 10 },
+      elevation: 6,
+    },
+  },
+
+  /**
+   * TYPOGRAPHY (same as light)
+   */
+  typography: {
+    fontFamily: "System",
+    size: {
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 18,
+      xl: 20,
+      "2xl": 24,
+      "3xl": 30,
+    },
+    weight: {
+      regular: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+    },
+  },
+
+  /**
+   * SPACING (same as light)
+   */
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    "2xl": 32,
+  },
+
+  /**
+   * STATE TOKENS (adapted for dark)
+   */
+  state: {
+    hover: "rgba(255,255,255,0.06)",
+    active: "rgba(255,255,255,0.12)",
+    focus: "#3B82F6",
+    disabled: "rgba(255,255,255,0.3)",
+  },
+};

package/templates/react.js

@@ -0,0 +1,228 @@
+export const lightTheme = {
+  brand: {
+    primary: "#2563EB", // modern blue (trust, tech)
+    secondary: "#64748B", // neutral slate
+    accent: "#7C3AED", // subtle personality (purple)
+  },
+
+  /**
+   * SEMANTIC COLORS (REAL USAGE)
+   */
+  colors: {
+    success: "#16A34A",
+    warning: "#F59E0B",
+    danger: "#DC2626",
+    info: "#0EA5E9",
+  },
+
+  /**
+   * BACKGROUND SYSTEM (STRICT HIERARCHY)
+   */
+  background: {
+    base: "#FFFFFF", // app background
+    surface: "#F8FAFC", // cards
+    elevated: "#FFFFFF", // modals
+    subtle: "#F1F5F9", // hover
+    inverse: "#0F172A", // dark sections
+  },
+
+  /**
+   * TEXT SYSTEM (PROPER CONTRAST)
+   */
+  text: {
+    primary: "#0F172A",
+    secondary: "#475569",
+    tertiary: "#94A3B8",
+    inverse: "#FFFFFF",
+    link: "#2563EB",
+  },
+
+  /**
+   * BORDER SYSTEM (CLEAN)
+   */
+  border: {
+    color: "#E2E8F0",
+    subtle: "#F1F5F9",
+    strong: "#CBD5F5",
+  },
+
+  /**
+   * RADIUS (CONSISTENT SCALE)
+   */
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px",
+  },
+
+  /**
+   * SHADOW (MODERN, SOFT)
+   */
+  shadow: {
+    sm: "0 1px 2px rgba(0,0,0,0.05)",
+    md: "0 4px 12px rgba(0,0,0,0.08)",
+    lg: "0 10px 25px rgba(0,0,0,0.12)",
+  },
+
+  /**
+   * TYPOGRAPHY (REALISTIC DEFAULT)
+   */
+  typography: {
+    fontFamily: `"Inter", system-ui, sans-serif`,
+    size: {
+      xs: "12px",
+      sm: "14px",
+      md: "16px",
+      lg: "18px",
+      xl: "20px",
+      "2xl": "24px",
+      "3xl": "30px",
+    },
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+  },
+
+  /**
+   * SPACING (SYSTEMATIC)
+   */
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+    "2xl": "32px",
+  },
+
+  /**
+   * STATE (INTERACTION READY)
+   */
+  state: {
+    hover: "rgba(0,0,0,0.04)",
+    active: "rgba(0,0,0,0.08)",
+    focus: "#2563EB",
+    disabled: "rgba(0,0,0,0.3)",
+  },
+};
+
+export const darkTheme = {
+  /**
+   * BRAND CORE (same identity, slightly adjusted brightness)
+   */
+  brand: {
+    primary: "#3B82F6", // brighter for dark bg
+    secondary: "#94A3B8",
+    accent: "#8B5CF6",
+  },
+
+  /**
+   * SEMANTIC COLORS
+   */
+  colors: {
+    success: "#22C55E",
+    warning: "#FBBF24",
+    danger: "#EF4444",
+    info: "#38BDF8",
+  },
+
+  /**
+   * BACKGROUND SYSTEM (dark hierarchy)
+   */
+  background: {
+    base: "#0F172A", // main app bg
+    surface: "#1E293B", // cards
+    elevated: "#334155", // modals
+    subtle: "#1E293B", // hover layers
+    inverse: "#FFFFFF", // rare light section
+  },
+
+  /**
+   * TEXT SYSTEM (high contrast)
+   */
+  text: {
+    primary: "#F8FAFC",
+    secondary: "#CBD5F5",
+    tertiary: "#64748B",
+    inverse: "#0F172A",
+    link: "#3B82F6",
+  },
+
+  /**
+   * BORDER SYSTEM
+   */
+  border: {
+    color: "#334155",
+    subtle: "#1E293B",
+    strong: "#475569",
+  },
+
+  /**
+   * RADIUS (same as light — NEVER change)
+   */
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px",
+  },
+
+  /**
+   * SHADOW (lighter because dark bg already heavy)
+   */
+  shadow: {
+    sm: "0 1px 2px rgba(0,0,0,0.4)",
+    md: "0 4px 12px rgba(0,0,0,0.5)",
+    lg: "0 10px 25px rgba(0,0,0,0.6)",
+  },
+
+  /**
+   * TYPOGRAPHY (same — consistency)
+   */
+  typography: {
+    fontFamily: `"Inter", system-ui, sans-serif`,
+    size: {
+      xs: "12px",
+      sm: "14px",
+      md: "16px",
+      lg: "18px",
+      xl: "20px",
+      "2xl": "24px",
+      "3xl": "30px",
+    },
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+  },
+
+  /**
+   * SPACING (same — NEVER change)
+   */
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+    "2xl": "32px",
+  },
+
+  /**
+   * STATE SYSTEM
+   */
+  state: {
+    hover: "rgba(255,255,255,0.06)",
+    active: "rgba(255,255,255,0.12)",
+    focus: "#3B82F6",
+    disabled: "rgba(255,255,255,0.3)",
+  },
+};