@basiclines/rampa 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/README.md +37 -1
- package/dist/index.js +47 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,6 +4,19 @@ Generate mathematically accurate, accessible color palettes from a base color.
|
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
+
### npm
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npx @basiclines/rampa -C "#3b82f6"
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Or install globally:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install -g @basiclines/rampa
|
|
17
|
+
rampa -C "#3b82f6"
|
|
18
|
+
```
|
|
19
|
+
|
|
7
20
|
### Homebrew (macOS/Linux)
|
|
8
21
|
|
|
9
22
|
```bash
|
|
@@ -44,6 +57,9 @@ rampa -C "#3b82f6" --size=5 -L 10:90
|
|
|
44
57
|
# Add complementary harmony
|
|
45
58
|
rampa -C "#3b82f6" --add=complementary
|
|
46
59
|
|
|
60
|
+
# Add hue-shifted ramp (45 degrees)
|
|
61
|
+
rampa -C "#3b82f6" --add=shift:45
|
|
62
|
+
|
|
47
63
|
# Output as CSS variables
|
|
48
64
|
rampa -C "#3b82f6" --output=css
|
|
49
65
|
```
|
|
@@ -108,7 +124,14 @@ Available blend modes: `normal`, `multiply`, `screen`, `overlay`, `darken`, `lig
|
|
|
108
124
|
|------|-------------|
|
|
109
125
|
| `--add` | Add harmony ramp (repeatable) |
|
|
110
126
|
|
|
111
|
-
Available
|
|
127
|
+
Available types:
|
|
128
|
+
- `complementary` — Opposite on color wheel (+180°)
|
|
129
|
+
- `triadic` — 3 colors, 120° apart
|
|
130
|
+
- `analogous` — Adjacent colors, 30° apart
|
|
131
|
+
- `split-complementary` — 2 colors near opposite
|
|
132
|
+
- `square` — 4 colors, 90° apart
|
|
133
|
+
- `compound` — Complementary + split
|
|
134
|
+
- `shift:N` — Custom hue rotation by N degrees (e.g., `shift:45`, `shift:-30`)
|
|
112
135
|
|
|
113
136
|
### Output
|
|
114
137
|
|
|
@@ -150,6 +173,19 @@ rampa -C "#3b82f6" --tint-color="#FF0000" --tint-opacity=15 --tint-blend=overlay
|
|
|
150
173
|
rampa -C "#3b82f6" --add=complementary --add=triadic
|
|
151
174
|
```
|
|
152
175
|
|
|
176
|
+
### Custom Hue Shifts
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
# Warm shift (+45°)
|
|
180
|
+
rampa -C "#3b82f6" --add=shift:45
|
|
181
|
+
|
|
182
|
+
# Cool shift (-30°)
|
|
183
|
+
rampa -C "#3b82f6" --add=shift:-30
|
|
184
|
+
|
|
185
|
+
# Multiple shifts
|
|
186
|
+
rampa -C "#3b82f6" --add=shift:30 --add=shift:60 --add=shift:90
|
|
187
|
+
```
|
|
188
|
+
|
|
153
189
|
### JSON Output
|
|
154
190
|
|
|
155
191
|
```bash
|
package/dist/index.js
CHANGED
|
@@ -9906,7 +9906,7 @@ function showHelp() {
|
|
|
9906
9906
|
const dim = "\x1B[2m";
|
|
9907
9907
|
const reset = "\x1B[0m";
|
|
9908
9908
|
const help = `
|
|
9909
|
-
rampa v1.0
|
|
9909
|
+
rampa v1.1.0
|
|
9910
9910
|
Generate mathematically accurate color palettes from a base color
|
|
9911
9911
|
|
|
9912
9912
|
USAGE
|
|
@@ -9944,7 +9944,7 @@ HARMONIES
|
|
|
9944
9944
|
${cyan}--add <type>${reset} ${dim}Add harmony ramp (can repeat)${reset}
|
|
9945
9945
|
|
|
9946
9946
|
${dim}Types: complementary, triadic, analogous,${reset}
|
|
9947
|
-
${dim}split-complementary, square, compound
|
|
9947
|
+
${dim}split-complementary, square, compound, shift:<degrees>${reset}
|
|
9948
9948
|
|
|
9949
9949
|
OUTPUT
|
|
9950
9950
|
${cyan}-O, --output <format>${reset} ${dim}Output format (default: text)${reset}
|
|
@@ -9960,6 +9960,7 @@ EXAMPLES
|
|
|
9960
9960
|
${cyan}rampa -C "#3b82f6"${reset}
|
|
9961
9961
|
${cyan}rampa -C "#3b82f6" --size=5 -L 10:90${reset}
|
|
9962
9962
|
${cyan}rampa -C "#3b82f6" --add=complementary --add=triadic${reset}
|
|
9963
|
+
${cyan}rampa -C "#3b82f6" --add=shift:45 --add=shift:90${reset}
|
|
9963
9964
|
${cyan}rampa -C "#3b82f6" -O css${reset}
|
|
9964
9965
|
${cyan}rampa -C "#3b82f6" --tint-color="#FF0000" --tint-opacity=15${reset}
|
|
9965
9966
|
`;
|
|
@@ -10077,16 +10078,19 @@ Examples:
|
|
|
10077
10078
|
rampa -C "#3b82f6" --tint-color="#FF0000" --tint-opacity=20 --tint-blend=screen
|
|
10078
10079
|
`,
|
|
10079
10080
|
add: `
|
|
10080
|
-
--add <
|
|
10081
|
+
--add <type> Add harmony ramps (can be used multiple times)
|
|
10081
10082
|
|
|
10082
|
-
Available
|
|
10083
|
+
Available types:
|
|
10083
10084
|
${HARMONY_TYPES.join(", ")}
|
|
10085
|
+
shift:<degrees> - Custom hue rotation (e.g., shift:45, shift:-30)
|
|
10084
10086
|
|
|
10085
10087
|
Examples:
|
|
10086
10088
|
rampa -C "#3b82f6" --add=complementary
|
|
10087
10089
|
rampa -C "#3b82f6" --add=triadic
|
|
10088
10090
|
rampa -C "#3b82f6" --add=complementary --add=analogous
|
|
10089
|
-
rampa -C "#3b82f6" --add=
|
|
10091
|
+
rampa -C "#3b82f6" --add=shift:45 # Warm shift
|
|
10092
|
+
rampa -C "#3b82f6" --add=shift:-30 # Cool shift
|
|
10093
|
+
rampa -C "#3b82f6" --add=shift:45 --add=shift:90
|
|
10090
10094
|
`,
|
|
10091
10095
|
output: `
|
|
10092
10096
|
--output, -O <format> Output format
|
|
@@ -10140,7 +10144,7 @@ var validFormats = ["hex", "hsl", "rgb", "oklch"];
|
|
|
10140
10144
|
var main = defineCommand({
|
|
10141
10145
|
meta: {
|
|
10142
10146
|
name: "rampa",
|
|
10143
|
-
version: "1.0
|
|
10147
|
+
version: "1.1.0",
|
|
10144
10148
|
description: "Generate mathematically accurate color palettes from a base color"
|
|
10145
10149
|
},
|
|
10146
10150
|
args: {
|
|
@@ -10214,7 +10218,7 @@ var main = defineCommand({
|
|
|
10214
10218
|
},
|
|
10215
10219
|
add: {
|
|
10216
10220
|
type: "string",
|
|
10217
|
-
description: "Add harmony ramp (repeatable: complementary, triadic, etc.)"
|
|
10221
|
+
description: "Add harmony ramp (repeatable: complementary, triadic, shift:N, etc.)"
|
|
10218
10222
|
},
|
|
10219
10223
|
output: {
|
|
10220
10224
|
type: "string",
|
|
@@ -10334,14 +10338,29 @@ var main = defineCommand({
|
|
|
10334
10338
|
}
|
|
10335
10339
|
const addValues = args.add ? Array.isArray(args.add) ? args.add : [args.add] : [];
|
|
10336
10340
|
const harmonies = [];
|
|
10337
|
-
|
|
10338
|
-
|
|
10339
|
-
|
|
10341
|
+
const hueShifts = [];
|
|
10342
|
+
for (const value of addValues) {
|
|
10343
|
+
if (value.startsWith("shift:")) {
|
|
10344
|
+
const shiftStr = value.slice(6);
|
|
10345
|
+
const shift = parseFloat(shiftStr);
|
|
10346
|
+
if (isNaN(shift)) {
|
|
10347
|
+
console.error(`Error: Invalid shift value "${shiftStr}" - must be a number
|
|
10340
10348
|
`);
|
|
10341
|
-
|
|
10342
|
-
|
|
10343
|
-
|
|
10344
|
-
|
|
10349
|
+
showFlagHelp("add");
|
|
10350
|
+
}
|
|
10351
|
+
const normalized = (shift % 360 + 360) % 360;
|
|
10352
|
+
if (!hueShifts.includes(normalized)) {
|
|
10353
|
+
hueShifts.push(normalized);
|
|
10354
|
+
}
|
|
10355
|
+
} else {
|
|
10356
|
+
if (!isValidHarmonyType(value)) {
|
|
10357
|
+
console.error(`Error: Invalid harmony type "${value}"
|
|
10358
|
+
`);
|
|
10359
|
+
showFlagHelp("add");
|
|
10360
|
+
}
|
|
10361
|
+
if (!harmonies.includes(value)) {
|
|
10362
|
+
harmonies.push(value);
|
|
10363
|
+
}
|
|
10345
10364
|
}
|
|
10346
10365
|
}
|
|
10347
10366
|
if (!tintColor && tintOpacity > 0) {
|
|
@@ -10431,6 +10450,20 @@ var main = defineCommand({
|
|
|
10431
10450
|
});
|
|
10432
10451
|
});
|
|
10433
10452
|
}
|
|
10453
|
+
for (const shift of hueShifts) {
|
|
10454
|
+
const baseChroma = chroma_js_default(validatedColor);
|
|
10455
|
+
const [h2, s2, l2] = baseChroma.hsl();
|
|
10456
|
+
const shiftedHue = ((h2 || 0) + shift) % 360;
|
|
10457
|
+
const shiftedBaseColor = chroma_js_default.hsl(shiftedHue, s2, l2).hex();
|
|
10458
|
+
const shiftedRampColors = generateColorRamp(buildConfig(shiftedBaseColor));
|
|
10459
|
+
const formattedShiftedColors = shiftedRampColors.map((c4) => formatColor2(c4, outputFormat));
|
|
10460
|
+
ramps.push({
|
|
10461
|
+
name: `shift-${Math.round(shift)}`,
|
|
10462
|
+
baseColor: formatColor2(shiftedBaseColor, outputFormat),
|
|
10463
|
+
config: buildRampConfig(),
|
|
10464
|
+
colors: formattedShiftedColors
|
|
10465
|
+
});
|
|
10466
|
+
}
|
|
10434
10467
|
if (outputType === "json") {
|
|
10435
10468
|
console.log(formatJson(ramps));
|
|
10436
10469
|
} else if (outputType === "css") {
|