feat(eds-color-palette-generator): add CLI tool to generate color palettes (#4033)

Fixes: #4033

Author: Copilot

packages/eds-color-palette-generator/.gitignore

@@ -10,3 +10,7 @@ node_modules/
 
 # TypeScript
 *.tsbuildinfo
+
+# Build output
+dist/
+output/

packages/eds-color-palette-generator/README.md

@@ -10,10 +10,13 @@ An accessible color palette generator for the Equinor Design System. This tool c
 * **Light and dark mode support**: Separate configurations for optimal contrast in each mode
 * **Interactive configuration**: Adjust lightness values and Gaussian parameters in real-time
 * **Export/Import**: Save and share color palette configurations
+* **CLI tool**: Generate color tokens from configuration files
 * **About page**: Comprehensive documentation with interactive demos explaining how the generator works
 
 ## Getting Started
 
+### Web Interface
+
 First, run the development server:
 
 ```bash
@@ -24,6 +27,24 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 To learn how the generator works internally, visit the About page at [http://localhost:3000/about](http://localhost:3000/about).
 
+### CLI Tool
+
+Generate color tokens from a configuration file:
+
+```bash
+generate-colors [configPath] [outputDir]
+```
+
+See [src/cli/README.md](./src/cli/README.md) for detailed CLI documentation and examples.
+
+**Example:**
+
+```bash
+generate-colors examples/palette-config.json output/
+```
+
+This will generate `color.tokens.light.json` and `color.tokens.dark.json` files in the output directory.
+
 ## How It Works
 
 The generator uses a three-step process:
@@ -51,7 +72,7 @@ Color palettes can be configured through:
 
 ## Testing
 
-Run tests with:
+Run unit tests with:
 
 ```bash
 pnpm test
@@ -63,6 +84,16 @@ Run end-to-end tests:
 pnpm test:e2e
 ```
 
+## Building
+
+Build the CLI tool:
+
+```bash
+pnpm build:cli
+```
+
+This will compile the TypeScript CLI script into a distributable JavaScript file in the `dist/` directory.
+
 ## Documentation
 
 * **[ABOUT_PAGE.md](./ABOUT_PAGE.md)**: Documentation for the About page and interactive components

packages/eds-color-palette-generator/examples/Screenshot 2025-03-28 at 08.55.57.png

@@ -4,9 +4,13 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
+  "bin": {
+    "generate-colors": "./dist/cli/generate-colors.js"
+  },
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
+    "build:cli": "vite build",
     "start": "next start",
     "lint": "next lint",
     "test": "vitest",
@@ -41,6 +45,8 @@
     "tailwindcss": "^4.1.12",
     "tsx": "^4.20.5",
     "typescript": "^5.9.2",
+    "vite": "^7.1.3",
+    "vite-plugin-dts": "^3.9.1",
     "vitest": "^3.2.4"
   }
 }

packages/eds-color-palette-generator/examples/Screenshot 2025-03-28 at 08.56.25.png

@@ -0,0 +1,113 @@
+# Generate Colors CLI
+
+A CLI tool to generate color palettes for light and dark modes based on a configuration file.
+
+## Installation
+
+This tool is part of the `@equinor/eds-color-palette-generator` package.
+
+## Usage
+
+### Basic Usage
+
+```bash
+generate-colors [configPath] [outputDir]
+```
+
+**Arguments:**
+- `configPath` (optional): Path to the palette configuration JSON file. Defaults to `palette-config.json` in the current directory.
+- `outputDir` (optional): Output directory for the generated token files. Defaults to `output/` in the current directory.
+
+**Example:**
+
+```bash
+generate-colors examples/palette-config.json output/
+```
+
+### Configuration File Format
+
+The configuration file should be a JSON file with the following structure:
+
+```json
+{
+  "colors": [
+    { "name": "Moss Green", "value": "#007079" },
+    { "name": "Gray", "value": "#4A4A4A" },
+    { "name": "Blue", "value": "#0084C4" }
+  ],
+  "colorFormat": "HEX",
+  "outputFileLight": "Color Light.Mode 1.json",
+  "outputFileDark": "Color Dark.Mode 1.json",
+  "meanLight": 0.6,
+  "stdDevLight": 2,
+  "meanDark": 0.7,
+  "stdDevDark": 2
+}
+```
+
+**Required fields:**
+- `colors`: An array of color definitions, each with:
+  - `name`: The name of the color
+  - `value`: The hex color value
+
+**Optional fields:**
+- `colorFormat`: Output color format - either `"HEX"` or `"OKLCH"` (default: `"HEX"`)
+- `outputFileLight`: Custom filename for light mode tokens (default: `"Color Light.Mode 1.json"`)
+- `outputFileDark`: Custom filename for dark mode tokens (default: `"Color Dark.Mode 1.json"`)
+- `meanLight`: Mean value for the Gaussian distribution in light mode (default: 0.6)
+- `stdDevLight`: Standard deviation for the Gaussian distribution in light mode (default: 2)
+- `meanDark`: Mean value for the Gaussian distribution in dark mode (default: 0.7)
+- `stdDevDark`: Standard deviation for the Gaussian distribution in dark mode (default: 2)
+
+### Output
+
+The tool generates two files with configurable names:
+- Default: `Color Light.Mode 1.json` - Color tokens for light mode
+- Default: `Color Dark.Mode 1.json` - Color tokens for dark mode
+
+Both files follow the W3C Design Tokens Community Group format and include all the semantic color steps defined in the palette configuration.
+
+#### Output Formats
+
+**HEX Format (default):**
+```json
+{
+  "Light": {
+    "Moss Green": {
+      "1": {
+        "$type": "color",
+        "$value": "#f5fefe",
+        ...
+      }
+    }
+  }
+}
+```
+
+**OKLCH Format:**
+```json
+{
+  "Light": {
+    "Moss Green": {
+      "1": {
+        "$type": "color",
+        "$value": "oklch(0.970 0.015 204.6)",
+        ...
+      }
+    }
+  }
+}
+```
+
+## Example
+
+See the `examples/` directory for a sample configuration file and generated output:
+- `examples/palette-config.json`: Sample configuration
+- `examples/color.tokens.light.json`: Generated light mode tokens
+- `examples/color.tokens.dark.json`: Generated dark mode tokens
+
+## How It Works
+
+The tool uses the existing `generateColorScale` function from the color utilities to create color scales for each color in the configuration. The lightness values and other configuration parameters are derived from the predefined `PALETTE_STEPS` configuration, ensuring consistency with the EDS color system.
+
+The Gaussian distribution parameters (`mean` and `stdDev`) control the chroma (saturation) of colors at different lightness levels, creating natural-looking color scales that maintain the hue while varying lightness and saturation.