@trishchuk/coolors-mcp 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/ci.yml +23 -20
- package/.github/workflows/deploy-docs.yml +6 -3
- package/.github/workflows/release.yml +11 -9
- package/README.md +123 -14
- package/dist/bin/server.js +997 -256
- package/dist/bin/server.js.map +1 -1
- package/dist/{chunk-P3ARRKLS.js → chunk-HOMDMKUY.js} +3 -1
- package/dist/{chunk-P3ARRKLS.js.map → chunk-HOMDMKUY.js.map} +1 -1
- package/dist/{chunk-IQ7NN26V.js → chunk-LHW2ZTOU.js} +14 -2
- package/dist/chunk-LHW2ZTOU.js.map +1 -0
- package/dist/color/index.js +1 -1
- package/dist/coolors-mcp.d.ts +4 -4
- package/dist/coolors-mcp.js +1 -1
- package/eslint.config.ts +13 -0
- package/jsr.json +1 -1
- package/package.json +16 -12
- package/src/bin/server.ts +13 -1
- package/src/color/__tests__/extract-colors.test.ts +20 -30
- package/src/color/apca.ts +105 -0
- package/src/color/color-blindness.ts +109 -0
- package/src/coolors-mcp.ts +1 -1
- package/src/session.ts +10 -2
- package/src/theme/matcher.ts +1 -1
- package/src/theme/refactor.ts +1 -1
- package/src/theme/types.ts +3 -0
- package/src/tools/__tests__/cohesion.test.ts +97 -0
- package/src/tools/__tests__/color-blindness.test.ts +45 -0
- package/src/tools/__tests__/color-conversion.test.ts +38 -0
- package/src/tools/__tests__/contrast-checker.test.ts +56 -0
- package/src/tools/__tests__/palette-export.test.ts +54 -0
- package/src/tools/adjust-color.tool.ts +80 -0
- package/src/tools/cohesion.tools.ts +380 -0
- package/src/tools/color-blindness.tool.ts +168 -0
- package/src/tools/color-conversion.tool.ts +1 -1
- package/src/tools/contrast-checker.tool.ts +53 -14
- package/src/tools/dislike-analyzer.tool.ts +41 -54
- package/src/tools/image-extraction.tools.ts +62 -115
- package/src/tools/index.ts +15 -2
- package/src/tools/palette-export.tool.ts +174 -0
- package/src/tools/palette-with-locks.tool.ts +8 -6
- package/src/types.ts +2 -3
- package/tsconfig.json +12 -2
- package/vitest.config.js +1 -3
- package/.claude/settings.local.json +0 -35
- package/.env +0 -2
- package/.mcp.json +0 -12
- package/CLAUDE.md +0 -201
- package/DOCUMENTATION.md +0 -274
- package/GEMINI.md +0 -54
- package/TOOLS_UK.md +0 -233
- package/demo/content_based_color.png +0 -0
- package/demo/music-player.html +0 -621
- package/demo/podcast-player.html +0 -903
- package/dist/chunk-IQ7NN26V.js.map +0 -1
- package/docs/.vitepress/cache/deps/@braintree_sanitize-url.js +0 -111
- package/docs/.vitepress/cache/deps/@braintree_sanitize-url.js.map +0 -7
- package/docs/.vitepress/cache/deps/_metadata.json +0 -127
- package/docs/.vitepress/cache/deps/chunk-BUSYA2B4.js +0 -12
- package/docs/.vitepress/cache/deps/chunk-BUSYA2B4.js.map +0 -7
- package/docs/.vitepress/cache/deps/chunk-JD3CXNQ6.js +0 -13614
- package/docs/.vitepress/cache/deps/chunk-JD3CXNQ6.js.map +0 -7
- package/docs/.vitepress/cache/deps/chunk-SYPOPCWC.js +0 -10698
- package/docs/.vitepress/cache/deps/chunk-SYPOPCWC.js.map +0 -7
- package/docs/.vitepress/cache/deps/cytoscape-cose-bilkent.js +0 -5609
- package/docs/.vitepress/cache/deps/cytoscape-cose-bilkent.js.map +0 -7
- package/docs/.vitepress/cache/deps/cytoscape.js +0 -36234
- package/docs/.vitepress/cache/deps/cytoscape.js.map +0 -7
- package/docs/.vitepress/cache/deps/dayjs.js +0 -507
- package/docs/.vitepress/cache/deps/dayjs.js.map +0 -7
- package/docs/.vitepress/cache/deps/debug.js +0 -512
- package/docs/.vitepress/cache/deps/debug.js.map +0 -7
- package/docs/.vitepress/cache/deps/package.json +0 -3
- package/docs/.vitepress/cache/deps/prismjs.js +0 -1638
- package/docs/.vitepress/cache/deps/prismjs.js.map +0 -7
- package/docs/.vitepress/cache/deps/prismjs_components_prism-bash.js +0 -235
- package/docs/.vitepress/cache/deps/prismjs_components_prism-bash.js.map +0 -7
- package/docs/.vitepress/cache/deps/prismjs_components_prism-javascript.js +0 -173
- package/docs/.vitepress/cache/deps/prismjs_components_prism-javascript.js.map +0 -7
- package/docs/.vitepress/cache/deps/prismjs_components_prism-json.js +0 -27
- package/docs/.vitepress/cache/deps/prismjs_components_prism-json.js.map +0 -7
- package/docs/.vitepress/cache/deps/prismjs_components_prism-python.js +0 -72
- package/docs/.vitepress/cache/deps/prismjs_components_prism-python.js.map +0 -7
- package/docs/.vitepress/cache/deps/prismjs_components_prism-typescript.js +0 -56
- package/docs/.vitepress/cache/deps/prismjs_components_prism-typescript.js.map +0 -7
- package/docs/.vitepress/cache/deps/prismjs_components_prism-yaml.js +0 -107
- package/docs/.vitepress/cache/deps/prismjs_components_prism-yaml.js.map +0 -7
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -5074
- package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -584
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +0 -1483
- package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +0 -7
- package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +0 -1779
- package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +0 -7
- package/docs/.vitepress/cache/deps/vitepress___minisearch.js +0 -2023
- package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +0 -7
- package/docs/.vitepress/cache/deps/vue.js +0 -344
- package/docs/.vitepress/cache/deps/vue.js.map +0 -7
- package/examples/theme-matching.md +0 -113
- package/mcp-config.json +0 -8
- package/note.md +0 -34
- package/research_results.md +0 -53
- package/src/tools/colors.ts +0 -31
- package/src/tools/registry.ts +0 -142
- package/src/tools/simple-tools.ts +0 -37
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
rgbToHsl,
|
|
10
10
|
rgbToLab,
|
|
11
11
|
} from "../color/index.js";
|
|
12
|
-
import {
|
|
12
|
+
import { RGB } from "../color/types.js";
|
|
13
13
|
|
|
14
14
|
export const paletteWithLocksTool = {
|
|
15
15
|
description:
|
|
@@ -64,7 +64,9 @@ export const paletteWithLocksTool = {
|
|
|
64
64
|
|
|
65
65
|
let minDistance = Infinity;
|
|
66
66
|
for (const locked of parsedLocked) {
|
|
67
|
-
const dist = colorDistance(candidate, locked,
|
|
67
|
+
const dist = colorDistance(candidate, locked, {
|
|
68
|
+
metric: "deltaE2000",
|
|
69
|
+
});
|
|
68
70
|
if (dist < minDistance) minDistance = dist;
|
|
69
71
|
}
|
|
70
72
|
|
|
@@ -135,17 +137,15 @@ export const paletteWithLocksTool = {
|
|
|
135
137
|
case "harmony": {
|
|
136
138
|
// Generate harmonious colors based on locked colors
|
|
137
139
|
const baseHsl = rgbToHsl(parsedLocked[0]);
|
|
138
|
-
const hueStep = 360 / totalColors;
|
|
139
140
|
|
|
140
141
|
for (let i = 0; i < remainingSlots; i++) {
|
|
141
|
-
let newHue = baseHsl.h;
|
|
142
142
|
let attempts = 0;
|
|
143
143
|
let bestColor: null | RGB = null;
|
|
144
144
|
let maxMinDistance = 0;
|
|
145
145
|
|
|
146
146
|
// Try different hues to find one that's not too close to locked colors
|
|
147
147
|
while (attempts < 36) {
|
|
148
|
-
newHue = (baseHsl.h + attempts * 10) % 360;
|
|
148
|
+
const newHue = (baseHsl.h + attempts * 10) % 360;
|
|
149
149
|
const candidate = hslToRgb({
|
|
150
150
|
h: newHue,
|
|
151
151
|
l: baseHsl.l + (Math.random() - 0.5) * 20,
|
|
@@ -155,7 +155,9 @@ export const paletteWithLocksTool = {
|
|
|
155
155
|
// Check minimum distance to all locked colors
|
|
156
156
|
let minDistance = Infinity;
|
|
157
157
|
for (const locked of parsedLocked) {
|
|
158
|
-
const dist = colorDistance(candidate, locked,
|
|
158
|
+
const dist = colorDistance(candidate, locked, {
|
|
159
|
+
metric: "deltaE2000",
|
|
160
|
+
});
|
|
159
161
|
if (dist < minDistance) minDistance = dist;
|
|
160
162
|
}
|
|
161
163
|
|
package/src/types.ts
CHANGED
|
@@ -36,8 +36,8 @@ export type Context<T extends CoolorsMCPSessionAuth> = {
|
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
export type CoolorsMCPEvents = {
|
|
39
|
-
connect: (event: { session:
|
|
40
|
-
disconnect: (event: { session:
|
|
39
|
+
connect: (event: { session: unknown }) => void;
|
|
40
|
+
disconnect: (event: { session: unknown }) => void;
|
|
41
41
|
};
|
|
42
42
|
|
|
43
43
|
export type CoolorsMCPSessionAuth = Record<string, unknown> | undefined;
|
|
@@ -164,7 +164,6 @@ export type Tool<
|
|
|
164
164
|
| ResourceLink
|
|
165
165
|
| string
|
|
166
166
|
| TextContent
|
|
167
|
-
| void
|
|
168
167
|
>;
|
|
169
168
|
name: string;
|
|
170
169
|
parameters?: Params;
|
package/tsconfig.json
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"extends": "@tsconfig/node22/tsconfig.json",
|
|
3
3
|
"compilerOptions": {
|
|
4
|
+
"ignoreDeprecations": "6.0",
|
|
4
5
|
"noEmit": true,
|
|
5
6
|
"noUnusedLocals": true,
|
|
6
|
-
"noUnusedParameters": true
|
|
7
|
-
|
|
7
|
+
"noUnusedParameters": true,
|
|
8
|
+
"types": ["node"]
|
|
9
|
+
},
|
|
10
|
+
"exclude": [
|
|
11
|
+
"dist",
|
|
12
|
+
"node_modules",
|
|
13
|
+
"src/examples",
|
|
14
|
+
"**/__tests__/**",
|
|
15
|
+
"**/*.test.ts",
|
|
16
|
+
"**/*_test.ts"
|
|
17
|
+
]
|
|
8
18
|
}
|
package/vitest.config.js
CHANGED
|
@@ -2,9 +2,7 @@ import { defineConfig } from "vitest/config";
|
|
|
2
2
|
|
|
3
3
|
export default defineConfig({
|
|
4
4
|
test: {
|
|
5
|
-
|
|
6
|
-
forks: { execArgv: ["--experimental-eventsource"] },
|
|
7
|
-
},
|
|
5
|
+
forks: { execArgv: ["--experimental-eventsource"] },
|
|
8
6
|
exclude: [
|
|
9
7
|
"**/node_modules/**",
|
|
10
8
|
"**/dist/**",
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"permissions": {
|
|
3
|
-
"allow": [
|
|
4
|
-
"Bash(grep:*)",
|
|
5
|
-
"Bash(npm test)",
|
|
6
|
-
"Bash(npm test:*)",
|
|
7
|
-
"Bash(npm run build:*)",
|
|
8
|
-
"Bash(node:*)",
|
|
9
|
-
"Bash(npm run:*)",
|
|
10
|
-
"mcp__coolors__convert_color",
|
|
11
|
-
"mcp__coolors__generate_material_theme",
|
|
12
|
-
"mcp__coolors__generate_palette",
|
|
13
|
-
"mcp__gemini-cli__ask-gemini",
|
|
14
|
-
"Bash(open /Users/taras/www/MCP/coolors-mcp/demo/music-player.html)",
|
|
15
|
-
"Bash(open /Users/taras/www/MCP/coolors-mcp/demo/podcast-player.html)",
|
|
16
|
-
"mcp__coolors__generate_theme_css",
|
|
17
|
-
"mcp__coolors__refactor_css_with_theme",
|
|
18
|
-
"Bash(npx vitest run:*)",
|
|
19
|
-
"WebSearch",
|
|
20
|
-
"Bash(for i in {1..5})",
|
|
21
|
-
"Bash(do echo \"Run $i:\")",
|
|
22
|
-
"Bash(done)",
|
|
23
|
-
"Bash(npx prettier:*)",
|
|
24
|
-
"Bash(find:*)",
|
|
25
|
-
"Bash(npm install:*)",
|
|
26
|
-
"Bash(npx tsx:*)",
|
|
27
|
-
"Bash(git pull:*)",
|
|
28
|
-
"Bash(git config:*)",
|
|
29
|
-
"Bash(npm:*)"
|
|
30
|
-
],
|
|
31
|
-
"deny": [],
|
|
32
|
-
"ask": []
|
|
33
|
-
},
|
|
34
|
-
"enabledMcpjsonServers": ["gemini-cli", "codex-cli", "coolors"]
|
|
35
|
-
}
|
package/.env
DELETED
package/.mcp.json
DELETED
package/CLAUDE.md
DELETED
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
# CLAUDE.md
|
|
2
|
-
|
|
3
|
-
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
4
|
-
|
|
5
|
-
## Project Overview
|
|
6
|
-
|
|
7
|
-
This is a Coolors MCP (Model Context Protocol) server that provides advanced color utilities, Material Design 3 theme generation, and CSS theme matching capabilities. It's built on a custom TypeScript MCP framework.
|
|
8
|
-
|
|
9
|
-
## Core Commands
|
|
10
|
-
|
|
11
|
-
### Development & Testing
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
# Install dependencies
|
|
15
|
-
npm install
|
|
16
|
-
|
|
17
|
-
# Build the project
|
|
18
|
-
npm run build
|
|
19
|
-
|
|
20
|
-
# Run all tests
|
|
21
|
-
npm test
|
|
22
|
-
|
|
23
|
-
# Run a single test file
|
|
24
|
-
npx vitest run src/color/__tests__/conversions.test.ts
|
|
25
|
-
|
|
26
|
-
# Format code
|
|
27
|
-
npm run format
|
|
28
|
-
|
|
29
|
-
# Lint and type check
|
|
30
|
-
npm run lint
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### Running the MCP Server
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
# Run the built server directly
|
|
37
|
-
node dist/bin/server.js
|
|
38
|
-
|
|
39
|
-
# Run with TypeScript (development)
|
|
40
|
-
npx tsx src/bin/server.ts
|
|
41
|
-
|
|
42
|
-
# Test with MCP CLI
|
|
43
|
-
npx fastmcp dev src/bin/server.ts
|
|
44
|
-
|
|
45
|
-
# Inspect with MCP Inspector
|
|
46
|
-
npx fastmcp inspect src/bin/server.ts
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
## Architecture & Code Organization
|
|
50
|
-
|
|
51
|
-
### MCP Server Structure
|
|
52
|
-
|
|
53
|
-
The project follows a clean separation pattern where tools are extracted into individual files rather than being defined inline:
|
|
54
|
-
|
|
55
|
-
- **`src/bin/server.ts`** (47 lines) - Clean entry point that registers all tools
|
|
56
|
-
- **`src/tools/`** - Individual tool implementations following a consistent pattern
|
|
57
|
-
- **`src/CoolorsMCP.ts`** - Core MCP server class that manages tools and sessions
|
|
58
|
-
- **`src/session.ts`** - Handles individual client connections and tool execution
|
|
59
|
-
|
|
60
|
-
### Color System Architecture
|
|
61
|
-
|
|
62
|
-
#### Multi-Layer Color Space Support
|
|
63
|
-
|
|
64
|
-
1. **Basic Color Spaces** (`src/color/conversions.ts`):
|
|
65
|
-
- RGB, HSL, HSV, XYZ, LAB
|
|
66
|
-
- All conversions go through RGB as the central format
|
|
67
|
-
|
|
68
|
-
2. **HCT Color Space** (`src/color/hct/`):
|
|
69
|
-
- Google's perceptually uniform color space (Hue, Chroma, Tone)
|
|
70
|
-
- Superior for UI applications vs traditional LAB
|
|
71
|
-
- Tone differences guarantee WCAG contrast ratios (40 = 3:1, 50 = 4.5:1)
|
|
72
|
-
|
|
73
|
-
3. **Material Design Integration** (`src/color/hct/tonal-palette.ts`):
|
|
74
|
-
- CorePalette generates primary, secondary, tertiary, error, neutral palettes
|
|
75
|
-
- Standard Material tones: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]
|
|
76
|
-
|
|
77
|
-
4. **Image Color Extraction** (`src/color/quantize/`, `src/color/score/`):
|
|
78
|
-
- Celebi quantizer combines Wu and WSMeans algorithms
|
|
79
|
-
- Score module ranks colors by UI suitability
|
|
80
|
-
- Dislike analyzer prevents selection of universally disliked colors
|
|
81
|
-
|
|
82
|
-
### Theme Matching System
|
|
83
|
-
|
|
84
|
-
The theme matching system (`src/theme/`) uses a sophisticated multi-factor approach:
|
|
85
|
-
|
|
86
|
-
1. **Parser** (`src/theme/parser.ts`): Extracts CSS variables and detects semantic roles
|
|
87
|
-
2. **Matcher** (`src/theme/matcher.ts`): Multi-factor scoring algorithm:
|
|
88
|
-
- Perceptual distance (60%) - HCT-based color similarity
|
|
89
|
-
- Semantic context (20%) - Role appropriateness (primary, surface, etc.)
|
|
90
|
-
- Accessibility (20%) - Contrast ratio considerations
|
|
91
|
-
|
|
92
|
-
3. **Refactor** (`src/theme/refactor.ts`): Automated CSS refactoring with confidence scores
|
|
93
|
-
|
|
94
|
-
### Tool Registration Pattern
|
|
95
|
-
|
|
96
|
-
Tools follow a consistent structure:
|
|
97
|
-
|
|
98
|
-
```typescript
|
|
99
|
-
export const toolName = {
|
|
100
|
-
name: "tool_name",
|
|
101
|
-
description: "Tool description",
|
|
102
|
-
parameters: z.object({
|
|
103
|
-
/* schema */
|
|
104
|
-
}),
|
|
105
|
-
execute: async (args) => {
|
|
106
|
-
/* implementation */
|
|
107
|
-
},
|
|
108
|
-
};
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
Tools are registered in `src/bin/server.ts`:
|
|
112
|
-
|
|
113
|
-
```typescript
|
|
114
|
-
server.addTool(tools.toolName);
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
## Key Technical Decisions
|
|
118
|
-
|
|
119
|
-
### HCT vs LAB Color Space
|
|
120
|
-
|
|
121
|
-
The project uses HCT instead of LAB for perceptual color operations because:
|
|
122
|
-
|
|
123
|
-
- HCT is specifically designed for UI applications
|
|
124
|
-
- Tone component directly correlates with contrast ratios
|
|
125
|
-
- Better semantic understanding of color relationships
|
|
126
|
-
- Used in production by Material Design and Android
|
|
127
|
-
|
|
128
|
-
### Distance Metrics
|
|
129
|
-
|
|
130
|
-
- **Delta E 2000**: Default for general color comparison
|
|
131
|
-
- **HCT Distance**: Used for theme matching with weighted components (tone weighted 2x)
|
|
132
|
-
- **Euclidean**: Available for simple RGB comparisons
|
|
133
|
-
|
|
134
|
-
### Theme Variable Detection
|
|
135
|
-
|
|
136
|
-
The parser automatically detects semantic roles from CSS variable names:
|
|
137
|
-
|
|
138
|
-
- `--color-primary-*` → primary role
|
|
139
|
-
- `--color-surface-*` → surface role
|
|
140
|
-
- `--*-border-*` or `--*-outline-*` → outline role
|
|
141
|
-
|
|
142
|
-
## Testing Approach
|
|
143
|
-
|
|
144
|
-
Tests are organized by module:
|
|
145
|
-
|
|
146
|
-
- `src/color/__tests__/` - Color conversion and metric tests
|
|
147
|
-
- `src/theme/__tests__/` - Theme matching and refactoring tests
|
|
148
|
-
|
|
149
|
-
The `researcher/` directory is excluded from tests (in `.gitignore` and `vitest.config.js`).
|
|
150
|
-
|
|
151
|
-
## Material Color Utilities Integration
|
|
152
|
-
|
|
153
|
-
The project incorporates algorithms from Google's Material Color Utilities:
|
|
154
|
-
|
|
155
|
-
- **Quantization**: Celebi algorithm (Wu + WSMeans) for image color extraction
|
|
156
|
-
- **Scoring**: Evaluating colors for UI suitability (target chroma ~48)
|
|
157
|
-
- **Harmonization**: Adjusting colors to work together
|
|
158
|
-
- **Dynamic Schemes**: Generating accessible color schemes
|
|
159
|
-
- **Dislike Analysis**: Detecting and fixing universally disliked colors (dark yellow-greens)
|
|
160
|
-
|
|
161
|
-
## MCP Tools Available
|
|
162
|
-
|
|
163
|
-
### Color Tools
|
|
164
|
-
|
|
165
|
-
- `convert_color` - Convert between hex, rgb, hsl, lab, hct
|
|
166
|
-
- `color_distance` - Calculate perceptual distance
|
|
167
|
-
- `check_contrast` - WCAG contrast checking
|
|
168
|
-
- `generate_palette` - Create color palettes (monochromatic, analogous, etc.)
|
|
169
|
-
|
|
170
|
-
### Material Design Tools
|
|
171
|
-
|
|
172
|
-
- `generate_material_theme` - Full Material Design 3 theme
|
|
173
|
-
- `harmonize_colors` - Harmonize multiple colors
|
|
174
|
-
- `generate_tonal_palette` - Material tonal palette
|
|
175
|
-
|
|
176
|
-
### Theme Matching Tools
|
|
177
|
-
|
|
178
|
-
- `match_theme_color` - Find closest theme variable
|
|
179
|
-
- `refactor_css_with_theme` - Automated CSS refactoring
|
|
180
|
-
- `match_theme_colors_batch` - Batch color matching
|
|
181
|
-
- `generate_theme_css` - Generate CSS custom properties
|
|
182
|
-
|
|
183
|
-
### Image Extraction Tools
|
|
184
|
-
|
|
185
|
-
- `extract_image_colors` - Extract dominant colors from images using Celebi quantization
|
|
186
|
-
- `generate_theme_from_image` - Generate Material Design theme from image colors
|
|
187
|
-
|
|
188
|
-
### Dislike Analysis Tools
|
|
189
|
-
|
|
190
|
-
- `analyze_color_likability` - Check if colors are universally disliked (bile zone)
|
|
191
|
-
- `fix_disliked_colors_batch` - Fix multiple disliked colors automatically
|
|
192
|
-
|
|
193
|
-
## Ukrainian Language Context
|
|
194
|
-
|
|
195
|
-
The user often communicates in Ukrainian. Key terms encountered:
|
|
196
|
-
|
|
197
|
-
- "кольори" = colors
|
|
198
|
-
- "ядро" = core
|
|
199
|
-
- "утиліти" = utilities
|
|
200
|
-
- "перетворення" = conversion
|
|
201
|
-
- "змінні" = variables
|
package/DOCUMENTATION.md
DELETED
|
@@ -1,274 +0,0 @@
|
|
|
1
|
-
# Документація Coolors MCP
|
|
2
|
-
|
|
3
|
-
## Вступ
|
|
4
|
-
|
|
5
|
-
Coolors MCP — це потужний інструмент командного рядка (CLI), призначений для розробників і дизайнерів, що надає широкий
|
|
6
|
-
спектр функціональних можливостей для роботи з кольорами, створення тем і рефакторингу CSS. Проект побудований на
|
|
7
|
-
TypeScript і використовує Model Context Protocol (MCP) для інтеграції з іншими інструментами розробки та AI-агентами.
|
|
8
|
-
|
|
9
|
-
Основні можливості включають:
|
|
10
|
-
|
|
11
|
-
- **Операції з кольорами**: Конвертація, обчислення відстані, перевірка контрастності.
|
|
12
|
-
- **Генерація тем**: Створення тем Material Design 3, тональних палітр і гармонізація кольорів.
|
|
13
|
-
- **Тематизація на основі зображень**: Видобування кольорів із зображень для створення динамічних тем.
|
|
14
|
-
- **Рефакторинг CSS**: Автоматизація процесу переходу від жорстко закодованих значень кольорів до змінних теми.
|
|
15
|
-
- **Аналіз кольорів**: Інструменти для виявлення та виправлення психологічно непривабливих кольорів.
|
|
16
|
-
|
|
17
|
-
Ця документація описує доступні інструменти, їхні параметри та сфери застосування.
|
|
18
|
-
|
|
19
|
-
## Інструменти для роботи з кольорами
|
|
20
|
-
|
|
21
|
-
Ці інструменти надають базові функції для маніпулювання та конвертації кольорів.
|
|
22
|
-
|
|
23
|
-
### `convert_color`
|
|
24
|
-
|
|
25
|
-
Конвертує колір між різними форматами.
|
|
26
|
-
|
|
27
|
-
- **Опис**: Цей інструмент дозволяє перетворювати кольори з одного формату в інший.
|
|
28
|
-
- **Параметри**:
|
|
29
|
-
- `color` (string): Колір для конвертації (може бути в форматі hex, rgb або hsl).
|
|
30
|
-
- `to` (enum): Цільовий формат. Можливі значення: `"hex"`, `"rgb"`, `"hsl"`, `"lab"`, `"hct"`.
|
|
31
|
-
- **Сфери застосування**:
|
|
32
|
-
- Швидка конвертація кольорів для використання в CSS, графічних редакторах або інших інструментах.
|
|
33
|
-
- Перетворення кольорів для відповідності вимогам різних бібліотек або API.
|
|
34
|
-
- **Приклад**:
|
|
35
|
-
```bash
|
|
36
|
-
coolors-mcp convert_color --color "#ff0000" --to "rgb"
|
|
37
|
-
# Output: rgb(255, 0, 0)
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### `color_distance`
|
|
41
|
-
|
|
42
|
-
Обчислює перцептивну відстань між двома кольорами.
|
|
43
|
-
|
|
44
|
-
- **Опис**: Використовує алгоритм Delta E 2000 для точного визначення візуальної різниці між кольорами, що корисно для
|
|
45
|
-
оцінки схожості відтінків.
|
|
46
|
-
- **Параметри**:
|
|
47
|
-
- `color1` (string): Перший колір.
|
|
48
|
-
- `color2` (string): Другий колір.
|
|
49
|
-
- `metric` (enum, optional): Метрика для обчислення відстані. За замовчуванням `"deltaE2000"`.
|
|
50
|
-
- **Сфери застосування**:
|
|
51
|
-
- Оцінка того, наскільки схожими є два кольори для користувача.
|
|
52
|
-
- Визначення, чи можна замінити один колір іншим без суттєвої візуальної різниці.
|
|
53
|
-
- Групування схожих кольорів у палітрі.
|
|
54
|
-
- **Приклад**:
|
|
55
|
-
```bash
|
|
56
|
-
coolors-mcp color_distance --color1 "#ff0000" --color2 "#fe0000"
|
|
57
|
-
# Output: Distance between #ff0000 and #fe0000: 0.26
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
### `check_contrast`
|
|
61
|
-
|
|
62
|
-
Перевіряє коефіцієнт контрастності WCAG між двома кольорами.
|
|
63
|
-
|
|
64
|
-
- **Опис**: Допомагає забезпечити доступність веб-контенту, перевіряючи, чи відповідає контрастність між текстом і фоном
|
|
65
|
-
стандартам WCAG AA та AAA.
|
|
66
|
-
- **Параметри**:
|
|
67
|
-
- `foreground` (string): Колір тексту.
|
|
68
|
-
- `background` (string): Колір фону.
|
|
69
|
-
- **Сфери застосування**:
|
|
70
|
-
- Перевірка доступності веб-сайтів та додатків.
|
|
71
|
-
- Автоматизація тестування дизайну на відповідність стандартам WCAG.
|
|
72
|
-
- **Приклад**:
|
|
73
|
-
```bash
|
|
74
|
-
coolors-mcp check_contrast --foreground "#ffffff" --background "#000000"
|
|
75
|
-
# Output:
|
|
76
|
-
# Contrast Ratio: 21.00:1
|
|
77
|
-
# WCAG AA: ✓ Pass (normal text)
|
|
78
|
-
# WCAG AA: ✓ Pass (large text)
|
|
79
|
-
# WCAG AAA: ✓ Pass (normal text)
|
|
80
|
-
# WCAG AAA: ✓ Pass (large text)
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### `palette_generator`
|
|
84
|
-
|
|
85
|
-
Генерує колірні палітри на основі базового кольору.
|
|
86
|
-
|
|
87
|
-
- **Опис**: Створює гармонійні колірні схеми, такі як монохроматичні, аналогічні, комплементарні та інші.
|
|
88
|
-
- **Параметри**:
|
|
89
|
-
- `baseColor` (string): Базовий колір для генерації палітри.
|
|
90
|
-
- `type` (enum, optional): Тип палітри. Можливі значення: `"monochromatic"`, `"analogous"`, `"complementary"`,
|
|
91
|
-
`"triadic"`, `"tetradic"`. За замовчуванням `"monochromatic"`.
|
|
92
|
-
- `count` (number, optional): Кількість кольорів у палітрі. За замовчуванням `5`.
|
|
93
|
-
- **Сфери застосування**:
|
|
94
|
-
- Швидке створення колірних схем для дизайну.
|
|
95
|
-
- Пошук натхнення для нових палітр.
|
|
96
|
-
- Генерація варіацій кольорів для UI-елементів.
|
|
97
|
-
- **Приклад**:
|
|
98
|
-
```bash
|
|
99
|
-
coolors-mcp palette_generator --baseColor "#3498db" --type "analogous"
|
|
100
|
-
# Output:
|
|
101
|
-
# Generated analogous palette:
|
|
102
|
-
# 1. #34d8db
|
|
103
|
-
# 2. #34b8db
|
|
104
|
-
# 3. #3498db
|
|
105
|
-
# 4. #3478db
|
|
106
|
-
# 5. #3458db
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
## Інструменти для аналізу кольорів
|
|
110
|
-
|
|
111
|
-
Ці інструменти допомагають аналізувати та виправляти кольори з точки зору їхнього сприйняття.
|
|
112
|
-
|
|
113
|
-
### `analyze_color_likability`
|
|
114
|
-
|
|
115
|
-
Аналізує, чи є колір універсально непривабливим.
|
|
116
|
-
|
|
117
|
-
- **Опис**: Виявляє темно-жовто-зелені відтінки, які асоціюються з біологічними відходами, і пропонує виправлену версію.
|
|
118
|
-
- **Параметри**:
|
|
119
|
-
- `color` (string): Колір для аналізу.
|
|
120
|
-
- `autoFix` (boolean, optional): Автоматично повертати виправлену версію, якщо колір непривабливий. За замовчуванням
|
|
121
|
-
`true`.
|
|
122
|
-
- **Сфери застосування**:
|
|
123
|
-
- Уникнення використання кольорів, які можуть викликати негативні асоціації у користувачів.
|
|
124
|
-
- Покращення естетики дизайну шляхом автоматичної корекції "проблемних" кольорів.
|
|
125
|
-
- **Приклад**:
|
|
126
|
-
```bash
|
|
127
|
-
coolors-mcp analyze_color_likability --color "#5a6e00"
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
### `fix_disliked_colors_batch`
|
|
131
|
-
|
|
132
|
-
Аналізує та виправляє кілька непривабливих кольорів одночасно.
|
|
133
|
-
|
|
134
|
-
- **Опис**: Дозволяє пакетно обробляти список кольорів, автоматично виправляючи ті, що є універсально непривабливими.
|
|
135
|
-
- **Параметри**:
|
|
136
|
-
- `colors` (array): Масив кольорів для аналізу.
|
|
137
|
-
- `includeAnalysis` (boolean, optional): Включати детальний аналіз для кожного кольору. За замовчуванням `false`.
|
|
138
|
-
- **Сфери застосування**:
|
|
139
|
-
- Перевірка та виправлення всієї палітри проекту.
|
|
140
|
-
- Забезпечення того, що жоден із кольорів у дизайн-системі не є непривабливим.
|
|
141
|
-
- **Приклад**:
|
|
142
|
-
```bash
|
|
143
|
-
coolors-mcp fix_disliked_colors_batch --colors '["#5a6e00", "#00ff00"]'
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
## Інструменти для роботи з темами Material Design
|
|
147
|
-
|
|
148
|
-
Ці інструменти призначені для створення та керування колірними темами за принципами Material Design 3.
|
|
149
|
-
|
|
150
|
-
### `generate_material_theme`
|
|
151
|
-
|
|
152
|
-
Генерує повну колірну тему Material Design 3 з вихідного кольору.
|
|
153
|
-
|
|
154
|
-
- **Опис**: Створює світлу та темну версії теми, включаючи всі ключові кольори (primary, secondary, tertiary, error,
|
|
155
|
-
background, surface тощо).
|
|
156
|
-
- **Параметри**:
|
|
157
|
-
- `sourceColor` (string): Вихідний колір для генерації теми.
|
|
158
|
-
- `includeCustomColors` (boolean, optional): Включати палітри користувацьких кольорів. За замовчуванням `false`.
|
|
159
|
-
- **Сфери застосування**:
|
|
160
|
-
- Швидке створення повноцінної теми для веб-сайту або додатка.
|
|
161
|
-
- Забезпечення узгодженості кольорів у всьому інтерфейсі.
|
|
162
|
-
- **Приклад**:
|
|
163
|
-
```bash
|
|
164
|
-
coolors-mcp generate_material_theme --sourceColor "#6750a4"
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
### `harmonize_colors`
|
|
168
|
-
|
|
169
|
-
Гармонізує кольори для кращої сумісності за допомогою алгоритмів Material Design.
|
|
170
|
-
|
|
171
|
-
- **Опис**: Допомагає кольорам краще поєднуватися один з одним, що корисно при комбінуванні кольорів з різних джерел.
|
|
172
|
-
- **Параметри**:
|
|
173
|
-
- `colors` (array): Масив кольорів для гармонізації.
|
|
174
|
-
- `method` (enum, optional): Метод гармонізації. Можливі значення: `"blend"`, `"harmonize"`, `"temperature"`. За
|
|
175
|
-
замовчуванням `"harmonize"`.
|
|
176
|
-
- `factor` (number, optional): Сила гармонізації (0-1). За замовчуванням `0.5`.
|
|
177
|
-
- **Сфери застосування**:
|
|
178
|
-
- Покращення візуальної гармонії між різними елементами інтерфейсу.
|
|
179
|
-
- Адаптація існуючої палітри до принципів Material Design.
|
|
180
|
-
|
|
181
|
-
### `generate_tonal_palette`
|
|
182
|
-
|
|
183
|
-
Генерує тональну палітру Material Design з кольору.
|
|
184
|
-
|
|
185
|
-
- **Опис**: Створює набір відтінків одного кольору з різною світлотою, що є основою для створення динамічних тем у
|
|
186
|
-
Material Design 3.
|
|
187
|
-
- **Параметри**:
|
|
188
|
-
- `color` (string): Базовий колір для палітри.
|
|
189
|
-
- `tones` (array, optional): Масив значень тонів для генерації (за замовчуванням стандартні тони Material Design).
|
|
190
|
-
- **Сфери застосування**:
|
|
191
|
-
- Створення узгоджених відтінків для станів елементів (hover, focus, disabled).
|
|
192
|
-
- Розробка гнучких колірних систем.
|
|
193
|
-
|
|
194
|
-
## Інструменти для видобування кольорів із зображень
|
|
195
|
-
|
|
196
|
-
Ці інструменти дозволяють створювати колірні схеми на основі вмісту зображень.
|
|
197
|
-
|
|
198
|
-
### `extract_image_colors`
|
|
199
|
-
|
|
200
|
-
Видобуває домінуючі кольори із зображення.
|
|
201
|
-
|
|
202
|
-
- **Опис**: Аналізує зображення та повертає палітру найбільш значущих кольорів.
|
|
203
|
-
- **Параметри**:
|
|
204
|
-
- `imageData` (object): Дані зображення з RGBA-значеннями.
|
|
205
|
-
- `maxColors` (number, optional): Максимальна кількість кольорів для видобування. За замовчуванням `5`.
|
|
206
|
-
- `quality` (enum, optional): Якість видобування: `"low"`, `"medium"`, `"high"`. За замовчуванням `"medium"`.
|
|
207
|
-
- **Сфери застосування**:
|
|
208
|
-
- Створення динамічних тем, що адаптуються до контенту.
|
|
209
|
-
- Генерація палітр на основі фотографій або ілюстрацій.
|
|
210
|
-
|
|
211
|
-
### `generate_theme_from_image`
|
|
212
|
-
|
|
213
|
-
Генерує повну тему Material Design 3 із зображення.
|
|
214
|
-
|
|
215
|
-
- **Опис**: Автоматично створює узгоджену колірну тему на основі домінуючих кольорів зображення.
|
|
216
|
-
- **Параметри**:
|
|
217
|
-
- `imageData` (object): Дані зображення з RGBA-значеннями.
|
|
218
|
-
- `isDark` (boolean, optional): Генерувати темну тему. За замовчуванням `false`.
|
|
219
|
-
- **Сфери застосування**:
|
|
220
|
-
- Створення персоналізованих інтерфейсів, що відповідають шпалерам користувача або іншим зображенням.
|
|
221
|
-
- Швидка розробка тем для мультимедійних додатків.
|
|
222
|
-
|
|
223
|
-
## Інструменти для зіставлення з темою
|
|
224
|
-
|
|
225
|
-
Ці інструменти допомагають інтегрувати існуючий CSS з дизайн-системою на основі змінних.
|
|
226
|
-
|
|
227
|
-
### `match_theme_color`
|
|
228
|
-
|
|
229
|
-
Знаходить найближчу відповідну змінну теми для заданого кольору.
|
|
230
|
-
|
|
231
|
-
- **Опис**: Допомагає замінити жорстко закодовані кольори на семантичні змінні з теми.
|
|
232
|
-
- **Параметри**:
|
|
233
|
-
- `color` (string): Колір для зіставлення.
|
|
234
|
-
- `themeCSS` (string): CSS, що містить змінні теми.
|
|
235
|
-
- `context` (enum, optional): Контекст використання для кращого зіставлення.
|
|
236
|
-
- **Сфери застосування**:
|
|
237
|
-
- Рефакторинг CSS та міграція на дизайн-систему.
|
|
238
|
-
- Забезпечення узгодженості кольорів у великих проектах.
|
|
239
|
-
|
|
240
|
-
### `refactor_css_with_theme`
|
|
241
|
-
|
|
242
|
-
Рефакторить CSS для використання змінних теми замість жорстко закодованих кольорів.
|
|
243
|
-
|
|
244
|
-
- **Опис**: Автоматично аналізує CSS, знаходить жорстко закодовані кольори, зіставляє їх зі змінними теми та замінює їх.
|
|
245
|
-
- **Параметри**:
|
|
246
|
-
- `css` (string): Вміст CSS для рефакторингу.
|
|
247
|
-
- `themeCSS` (string): CSS, що містить змінні теми.
|
|
248
|
-
- `minConfidence` (number, optional): Мінімальна впевненість для заміни.
|
|
249
|
-
- **Сфери застосування**:
|
|
250
|
-
- Масштабний рефакторинг застарілого CSS.
|
|
251
|
-
- Прискорення впровадження дизайн-системи.
|
|
252
|
-
|
|
253
|
-
### `match_theme_colors_batch`
|
|
254
|
-
|
|
255
|
-
Знаходить відповідності в темі для кількох кольорів одночасно.
|
|
256
|
-
|
|
257
|
-
- **Опис**: Дозволяє пакетно обробляти список кольорів для зіставлення зі змінними теми.
|
|
258
|
-
- **Параметри**:
|
|
259
|
-
- `colors` (array): Масив кольорів для зіставлення.
|
|
260
|
-
- `themeCSS` (string): CSS, що містить змінні теми.
|
|
261
|
-
- **Сфери застосування**:
|
|
262
|
-
- Аналіз палітри існуючого проекту перед рефакторингом.
|
|
263
|
-
|
|
264
|
-
### `generate_theme_css`
|
|
265
|
-
|
|
266
|
-
Генерує CSS-змінні для повної теми з вихідного кольору.
|
|
267
|
-
|
|
268
|
-
- **Опис**: Створює готовий до використання CSS-файл з усіма тональними палітрами та семантичними зіставленнями.
|
|
269
|
-
- **Параметри**:
|
|
270
|
-
- `sourceColor` (string): Вихідний колір для генерації теми.
|
|
271
|
-
- `prefix` (string, optional): Префікс для CSS-змінних.
|
|
272
|
-
- **Сфери застосування**:
|
|
273
|
-
- Швидке створення CSS-файлу теми для нового проекту.
|
|
274
|
-
- Генерація основи для кастомізації дизайн-системи.
|