prewindcss 1.0.0 → 1.1.0

package/README.md

@@ -1,11 +1,3 @@
-<!--
-  TODO: Before publishing, replace these placeholders:
-
-  - [CDN_URL] - The actual CDN URL for prewind.css
-  - [GITHUB_THEME_URL] - The URL to the default theme.css in the GitHub repo
-  - [NPX_FLUID_COMMAND] - The npx command to generate fluid font and space sizes
--->
-
 # Prewind
 
 A lightweight CSS utility library with no build step. Prewind provides the most useful utilities for everyday styling while encouraging a simpler, more maintainable approach to CSS. The entire library is ~7KB gzipped. No build step, no purging, no tree-shaking — just one CSS file.
@@ -33,14 +25,14 @@ Prewind works with the platform, not around it. CSS already has a cascade, varia
 Load Prewind from a CDN or host it yourself:
 
 ```html
-<link rel="stylesheet" href="[CDN_URL]/prewind.css" />
+<link rel="stylesheet" href="https://unpkg.com/prewindcss@1.0.0" />
 ```
 
 ### 2. Define your theme variables
 
 Prewind's utility classes reference CSS variables for colors, spacing, fonts, and other design tokens. You need to define these variables somewhere in your CSS — either in a separate file, or at the top of your global stylesheet.
 
-You can copy the [default theme]([GITHUB_THEME_URL]) from the repository and customize it, or define the variables yourself:
+You can copy the [default theme](https://github.com/codepilotsf/prewind/blob/main/theme.css) from the repository and customize it, or define the variables yourself:
 
 ```css
 :root {
@@ -120,10 +112,17 @@ This gives you responsive typography and spacing without writing media queries,
 To generate custom fluid sizes for your project:
 
 ```bash
-[NPX_FLUID_COMMAND]
+npx prewindcss text   # Generate fluid typography scale
+npx prewindcss space  # Generate fluid spacing scale
 ```
 
-This generates both the `--text-*` and `--space-*` variables for for you to copy/paste into your theme variables.
+Each command launches an interactive configurator where you can adjust:
+
+- Viewport range (min/max)
+- Base size at each viewport
+- Scale ratio (using musical intervals like Major Third, Perfect Fifth, etc.)
+
+The generated CSS is copied to your clipboard — just paste it into your theme variables.
 
 Note: The t-shirt sizes used for borders (`--border-sm`, `--border-lg`), border radius (`--rounded-sm`, `--rounded-lg`), and shadows (`shadow-sm`, `shadow-lg`, are not fluid — they're fixed values you set manually in your theme variables.
 

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "prewindcss",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Lightweight, no-build Tailwind alternative",
+  "type": "module",
   "main": "prewind.css",
   "style": "prewind.css",
+  "unpkg": "prewind.css",
+  "bin": {
+    "prewindcss": "./script/prewindcss.js"
+  },
   "keywords": [
     "Tailwind",
     "CSS",
@@ -14,6 +19,9 @@
   ],
   "author": "Codepilot",
   "license": "MIT",
+  "dependencies": {
+    "enquirer": "^2.4.1"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/codepilotsf/prewind.git"

package/script/prewindcss.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+
+/**
+ * Prewind CSS CLI
+ *
+ * Usage:
+ *   npx prewindcss text   - Generate fluid typography scale
+ *   npx prewindcss space  - Generate fluid spacing scale
+ */
+
+const command = process.argv[2];
+
+if (command === 'text') {
+  const { run } = await import('./text.js');
+  run();
+} else if (command === 'space') {
+  const { run } = await import('./space.js');
+  run();
+} else {
+  console.log('Did you mean to run npx prewindcss text or npx prewindcss space?');
+}

package/script/shared.js

@@ -0,0 +1,267 @@
+/**
+ * Shared utilities for Prewind CSS CLI
+ */
+
+import enquirer from "enquirer";
+const { Select, NumberPrompt } = enquirer;
+
+// -----------------------------------------------------------------------------
+// Clamp Calculation
+// -----------------------------------------------------------------------------
+
+/**
+ * Calculate a CSS clamp() value for a given step in the modular scale.
+ *
+ * @param {Object} config - Scale configuration
+ * @param {number} config.minViewport - Min viewport width in px
+ * @param {number} config.maxViewport - Max viewport width in px
+ * @param {number} config.minBase - Base size at min viewport in px
+ * @param {number} config.maxBase - Base size at max viewport in px
+ * @param {number} config.minRatio - Scale ratio at min viewport
+ * @param {number} config.maxRatio - Scale ratio at max viewport
+ * @param {number} step - The step in the modular scale (0 = base)
+ * @returns {string} CSS clamp() value
+ */
+export function calculateClamp(config, step) {
+  const { minViewport, maxViewport, minBase, maxBase, minRatio, maxRatio } =
+    config;
+
+  // Calculate size at min and max viewports using modular scale
+  const minSize = minBase * Math.pow(minRatio, step);
+  const maxSize = maxBase * Math.pow(maxRatio, step);
+
+  // Utopia formula: calculate slope and intercept in pixels, then convert
+  // slope = (maxSize - minSize) / (maxWidth - minWidth)
+  // intercept = minSize - (slope * minWidth)
+  const slope = (maxSize - minSize) / (maxViewport - minViewport);
+  const intercept = minSize - slope * minViewport;
+
+  // Convert to CSS units: rem (÷16) and vw (×100)
+  const minRem = minSize / 16;
+  const maxRem = maxSize / 16;
+  const interceptRem = intercept / 16;
+  const slopeVw = slope * 100;
+
+  // Format values
+  const minStr = formatNumber(minRem) + "rem";
+  const maxStr = formatNumber(maxRem) + "rem";
+  const preferred =
+    interceptRem >= 0
+      ? `${formatNumber(interceptRem)}rem + ${formatNumber(slopeVw)}vw`
+      : `${formatNumber(Math.abs(interceptRem))}rem - ${formatNumber(Math.abs(slopeVw))}vw`;
+
+  return `clamp(${minStr}, ${preferred}, ${maxStr})`;
+}
+
+/**
+ * Format a number to 4 significant digits, removing trailing zeros.
+ */
+function formatNumber(num) {
+  return parseFloat(num.toPrecision(4)).toString();
+}
+
+// -----------------------------------------------------------------------------
+// Musical Interval Ratios
+// -----------------------------------------------------------------------------
+
+// Modular scale ratios based on musical intervals
+const RATIOS = [
+  { value: 1.067, name: "Minor Second" },
+  { value: 1.125, name: "Major Second" },
+  { value: 1.2, name: "Minor Third" },
+  { value: 1.25, name: "Major Third" },
+  { value: 1.333, name: "Perfect Fourth" },
+  { value: 1.414, name: "Augmented Fourth" },
+  { value: 1.5, name: "Perfect Fifth" },
+  { value: 1.618, name: "Golden Ratio" },
+  { value: 1.667, name: "Major Sixth" },
+  { value: 1.778, name: "Minor Seventh" },
+  { value: 1.875, name: "Major Seventh" },
+  { value: 2.0, name: "Octave" },
+];
+
+/**
+ * Get the musical interval name for a ratio value.
+ * Returns the value as string if no matching interval found.
+ */
+function getRatioName(value) {
+  const ratio = RATIOS.find((r) => r.value === value);
+  return ratio ? `${ratio.value} - ${ratio.name}` : String(value);
+}
+
+// -----------------------------------------------------------------------------
+// TUI Helpers
+// -----------------------------------------------------------------------------
+
+/**
+ * Run an interactive configuration editor.
+ * Shows settings as selectable list items with inline value editing.
+ *
+ * @param {Object} options
+ * @param {string} options.title - Display title (e.g., "Text Scale")
+ * @param {string} options.command - Command name for comment (e.g., "text")
+ * @param {Object} options.defaults - Default configuration values
+ * @param {Object} options.scale - Scale mapping { name: step } (e.g., { sm: -1, base: 0 })
+ * @param {string} options.varPrefix - CSS variable prefix (e.g., "--text" or "--space")
+ * @param {Array} options.fields - Field definitions for the editor
+ */
+export async function runEditor({
+  title,
+  command,
+  defaults,
+  scale,
+  varPrefix,
+  fields,
+}) {
+  const config = { ...defaults };
+
+  // Main interaction loop
+  while (true) {
+    console.clear();
+    console.log(`${title} Configuration\n`);
+
+    // Build choices: fields show current values, then separator, then actions
+    const choices = [
+      // Editable fields with current values displayed
+      ...fields.map((f) => {
+        // Show musical interval name for ratio fields
+        const displayValue =
+          f.type === "ratio"
+            ? getRatioName(config[f.key])
+            : `${config[f.key]}${f.suffix || ""}`;
+        return {
+          name: f.key,
+          message: `${f.label}: ${displayValue}`,
+        };
+      }),
+      // Visual separator (disabled choice)
+      { role: "separator", message: "" },
+      // Actions
+      { name: "generate", message: "Generate CSS" },
+      { name: "cancel", message: "Cancel" },
+    ];
+
+    const select = new Select({
+      name: "action",
+      message: "Select a setting to edit",
+      choices,
+    });
+
+    let action;
+    try {
+      action = await select.run();
+    } catch {
+      // Escape pressed on main menu - cancel
+      console.log("\nCancelled.");
+      return;
+    }
+
+    if (action === "cancel") {
+      console.log("\nCancelled.");
+      return;
+    }
+
+    if (action === "generate") {
+      await outputCSS({ title, command, config, scale, varPrefix, fields });
+      return;
+    }
+
+    // Edit a field
+    const field = fields.find((f) => f.key === action);
+    if (field) {
+      try {
+        if (field.type === "ratio") {
+          // Ratio fields use a select menu with musical intervals
+          const ratioSelect = new Select({
+            name: "ratio",
+            message: field.label,
+            choices: RATIOS.map((r) => ({
+              name: r.value,
+              message: `${r.value} - ${r.name}`,
+            })),
+            initial: RATIOS.findIndex((r) => r.value === config[field.key]),
+          });
+          config[field.key] = await ratioSelect.run();
+        } else {
+          // Number fields use a number prompt
+          const prompt = new NumberPrompt({
+            name: "value",
+            message: `${field.label}${field.suffix || ""}`,
+            initial: config[field.key],
+          });
+          config[field.key] = await prompt.run();
+        }
+      } catch {
+        // Escape pressed while editing - return to main menu (continue loop)
+      }
+    }
+  }
+}
+
+/**
+ * Output the generated CSS variables with settings comment.
+ * Also copies the output to the clipboard.
+ */
+async function outputCSS({ title, command, config, scale, varPrefix, fields }) {
+  console.clear();
+
+  // Build comment header
+  const outputLines = [
+    `/* Fluid ${title} – Generated with: \`npx prewindcss ${command}\``,
+  ];
+  for (const field of fields) {
+    // Show musical interval name for ratio fields in comments
+    const displayValue =
+      field.type === "ratio"
+        ? getRatioName(config[field.key])
+        : `${config[field.key]}${field.suffix || ""}`;
+    outputLines.push(`   ${field.label}: ${displayValue}`);
+  }
+  outputLines.push("*/");
+
+  // Generate CSS variables for each scale step
+  for (const [name, step] of Object.entries(scale)) {
+    const clamp = calculateClamp(config, step);
+    outputLines.push(`${varPrefix}-${name}: ${clamp};`);
+  }
+
+  const output = outputLines.join("\n");
+
+  // Print the output
+  console.log(output);
+  console.log("");
+
+  // Copy to clipboard
+  await copyToClipboard(output);
+  console.log("✓ Copied to clipboard!");
+}
+
+/**
+ * Copy text to the system clipboard.
+ * Uses pbcopy on macOS, xclip on Linux, clip on Windows.
+ */
+async function copyToClipboard(text) {
+  const { spawn } = await import("child_process");
+  const platform = process.platform;
+
+  let cmd, args;
+  if (platform === "darwin") {
+    cmd = "pbcopy";
+    args = [];
+  } else if (platform === "win32") {
+    cmd = "clip";
+    args = [];
+  } else {
+    // Linux - try xclip
+    cmd = "xclip";
+    args = ["-selection", "clipboard"];
+  }
+
+  return new Promise((resolve, reject) => {
+    const proc = spawn(cmd, args);
+    proc.stdin.write(text);
+    proc.stdin.end();
+    proc.on("close", resolve);
+    proc.on("error", reject);
+  });
+}

package/script/space.js

@@ -0,0 +1,52 @@
+/**
+ * Space (Spacing) Scale Generator
+ *
+ * Generates fluid spacing CSS variables using modular scale.
+ */
+
+import { runEditor } from "./shared.js";
+
+// Scale mapping: name -> step (sm = 0)
+const SCALE = {
+  "3xs": -3,
+  "2xs": -2,
+  xs: -1,
+  sm: 0,
+  md: 1,
+  lg: 2,
+  xl: 3,
+  "2xl": 4,
+  "3xl": 5,
+  "4xl": 6,
+};
+
+// Default configuration
+const DEFAULTS = {
+  minViewport: 320,
+  maxViewport: 1600,
+  minBase: 12,
+  maxBase: 18,
+  minRatio: 1.5,
+  maxRatio: 1.667,
+};
+
+// Field definitions for the editor
+const FIELDS = [
+  { key: "minViewport", label: "Min viewport", suffix: "px" },
+  { key: "maxViewport", label: "Max viewport", suffix: "px" },
+  { key: "minBase", label: "Min sm size", suffix: "px" },
+  { key: "maxBase", label: "Max sm size", suffix: "px" },
+  { key: "minRatio", label: "Min ratio", type: "ratio" },
+  { key: "maxRatio", label: "Max ratio", type: "ratio" },
+];
+
+export function run() {
+  runEditor({
+    title: "Space Scale",
+    command: "space",
+    defaults: DEFAULTS,
+    scale: SCALE,
+    varPrefix: "--space",
+    fields: FIELDS,
+  });
+}

package/script/text.js

@@ -0,0 +1,49 @@
+/**
+ * Text (Typography) Scale Generator
+ *
+ * Generates fluid typography CSS variables using modular scale.
+ */
+
+import { runEditor } from "./shared.js";
+
+// Scale mapping: name -> step (base = 0)
+const SCALE = {
+  sm: -1,
+  base: 0,
+  lg: 1,
+  xl: 2,
+  "2xl": 3,
+  "3xl": 4,
+  "4xl": 5,
+};
+
+// Default configuration
+const DEFAULTS = {
+  minViewport: 320,
+  maxViewport: 1600,
+  minBase: 14,
+  maxBase: 18,
+  minRatio: 1.25,
+  maxRatio: 1.414,
+};
+
+// Field definitions for the editor
+const FIELDS = [
+  { key: "minViewport", label: "Min viewport", suffix: "px" },
+  { key: "maxViewport", label: "Max viewport", suffix: "px" },
+  { key: "minBase", label: "Min base size", suffix: "px" },
+  { key: "maxBase", label: "Max base size", suffix: "px" },
+  { key: "minRatio", label: "Min ratio", type: "ratio" },
+  { key: "maxRatio", label: "Max ratio", type: "ratio" },
+];
+
+export function run() {
+  runEditor({
+    title: "Text Scale",
+    command: "text",
+    defaults: DEFAULTS,
+    scale: SCALE,
+    varPrefix: "--text",
+    fields: FIELDS,
+  });
+}

package/theme.css

@@ -57,30 +57,23 @@
 
   /* Shadow */
   --shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
-  --shadow-sm: 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-sm:
+    0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 
   /* Width Constraints */
   --max-w-text: 80ch;
   --max-w-form: 40rem;
 
-  /* Form Fields */
-  --ui-field-padding: 0.8rem;
-  --ui-field-height: 2.5rem;
-  --ui-field-font-size: 0.9rem;
-  --ui-field-border: 1px solid var(--light);
-  --ui-field-border-radius: var(--rounded-sm);
-  --ui-field-focus-outline: 2px solid;
-  --ui-field-focus-color: var(--brand-1);
-  --ui-field-bg: var(--white);
-  --ui-field-bg-disabled: var(--lighter);
-  --ui-field-placeholder-color: var(--midtone);
-  --ui-field-value-color: var(--dark);
-  --ui-field-label-color: var(--midtone);
-  --ui-field-value-color-disabled: var(--light);
-  --ui-field-icon-width: 1rem;
-
-  /* Fluid Text and Space (use [NPX command] to update these values) */
+  /* Fluid Text Scale – Generated with: `npx prewindcss text`
+     Min viewport: 320px
+     Max viewport: 1600px
+     Min base size: 14px
+     Max base size: 18px
+     Min ratio: 1.25 - Major Third
+     Max ratio: 1.414 - Augmented Fourth
+  */
   --text-sm: clamp(0.7rem, 0.6761rem + 0.1195vw, 0.7956rem);
   --text-base: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);
   --text-lg: clamp(1.094rem, 0.9695rem + 0.6212vw, 1.591rem);
@@ -89,14 +82,22 @@
   --text-3xl: clamp(2.136rem, 1.546rem + 2.951vw, 4.497rem);
   --text-4xl: clamp(2.67rem, 1.748rem + 4.611vw, 6.359rem);
 
-  --space-3xs: clamp(0.2222rem, 0.2171rem + 0.02579vw, 0.2429rem);
-  --space-2xs: clamp(0.3333rem, 0.3155rem + 0.08938vw, 0.4048rem);
-  --space-xs: clamp(0.5rem, 0.4563rem + 0.2186vw, 0.6749rem);
-  --space-sm: clamp(0.75rem, 0.6562rem + 0.4688vw, 1.125rem);
-  --space-md: clamp(1.125rem, 0.9374rem + 0.938vw, 1.875rem);
-  --space-lg: clamp(1.688rem, 1.328rem + 1.798vw, 3.126rem);
-  --space-xl: clamp(2.531rem, 1.861rem + 3.35vw, 5.211rem);
-  --space-2xl: clamp(3.797rem, 2.574rem + 6.113vw, 8.688rem);
-  --space-3xl: clamp(5.695rem, 3.499rem + 10.98vw, 14.48rem);
-  --space-4xl: clamp(8.543rem, 4.643rem + 19.5vw, 24.14rem);
+  /* Fluid Space Scale – Generated with: `npx prewindcss space`
+     Min viewport: 320px
+     Max viewport: 1600px
+     Min sm size: 12px
+     Max sm size: 18px
+     Min ratio: 1.333 - Perfect Fourth
+     Max ratio: 1.667 - Major Sixth
+  */
+  --space-3xs: clamp(0.3166rem, 0.3351rem + -0.09224vw, 0.2429rem);
+  --space-2xs: clamp(0.4221rem, 0.4264rem + -0.02156vw, 0.4048rem);
+  --space-xs: clamp(0.5626rem, 0.5346rem + 0.1403vw, 0.6749rem);
+  --space-sm: clamp(0.75rem, 0.6563rem + 0.4688vw, 1.125rem);
+  --space-md: clamp(0.9997rem, 0.7808rem + 1.095vw, 1.875rem);
+  --space-lg: clamp(1.333rem, 0.8843rem + 2.242vw, 3.126rem);
+  --space-xl: clamp(1.776rem, 0.9177rem + 4.294vw, 5.211rem);
+  --space-2xl: clamp(2.368rem, 0.7881rem + 7.899vw, 8.688rem);
+  --space-3xl: clamp(3.157rem, 0.3252rem + 14.16vw, 14.48rem);
+  --space-4xl: clamp(4.208rem, 0.7758rem - 24.92vw, 24.14rem);
 }