Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/eds-color-palette-generator/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,7 @@ node_modules/

# TypeScript
*.tsbuildinfo

# Build output
dist/
output/
33 changes: 32 additions & 1 deletion packages/eds-color-palette-generator/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:
Expand Down Expand Up @@ -51,7 +72,7 @@ Color palettes can be configured through:

## Testing

Run tests with:
Run unit tests with:

```bash
pnpm test
Expand All @@ -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
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
6 changes: 6 additions & 0 deletions packages/eds-color-palette-generator/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}
}
113 changes: 113 additions & 0 deletions packages/eds-color-palette-generator/src/cli/README.md
Original file line number Diff line number Diff line change
@@ -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.
Loading
Loading