@phun-ky/moebius 2.0.6 → 2.0.8

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 CHANGED
@@ -2,17 +2,18 @@
2
2
 
3
3
  ![logo](./public/images/logo/logo-ring.png)
4
4
 
5
- > Automatically generate color palettes!
5
+ > Generate harmonious, customizable color palettes from a single base color - instantly and programmatically.
6
6
 
7
7
  [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![npm version](https://img.shields.io/npm/v/@phun-ky/moebius) ![issues](https://img.shields.io/github/issues/phun-ky/moebius) ![license](https://img.shields.io/npm/l/@phun-ky/moebius) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/moebius) ![npm](https://img.shields.io/npm/dm/%40phun-ky/moebius) ![GitHub Repo stars](https://img.shields.io/github/stars/phun-ky/moebius) [![codecov](https://codecov.io/gh/phun-ky/moebius/graph/badge.svg?token=VA91DL7ZLZ)](https://codecov.io/gh/phun-ky/moebius) [![build](https://github.com/phun-ky/moebius/actions/workflows/check.yml/badge.svg)](https://github.com/phun-ky/moebius/actions/workflows/check.yml)
8
8
 
9
9
  - [@phun-ky/moebius `möbius`](#phun-kymoebius-möbius)
10
10
  - [About](#about)
11
+ - [Features](#features)
11
12
  - [Demo](#demo)
12
13
  - [Install](#install)
13
- - [API](#api)
14
+ - [Full API-reference](#full-api-reference)
14
15
  - [Usage](#usage)
15
- - [Creating paletts](#creating-paletts)
16
+ - [Creating palettes](#creating-palettes)
16
17
  - [Default options](#default-options)
17
18
  - [Interpolate](#interpolate)
18
19
  - [Luminance shift](#luminance-shift)
@@ -36,7 +37,18 @@
36
37
 
37
38
  ## About
38
39
 
39
- @phun-ky/moebius (Möbius) was created to fit a need I had regarding color palette generation, and as a little challenge to myself. I was never happy with the current online palette generators, and I did not want a "set up" palette, I wanted something that was generated, ready to use, and something that I could use as inspiration on colors to choose from in my projects.
40
+ Möbius is a color palette generation tool designed for developers and designers who need quick, consistent, and attractive color schemes. It supports a wide variety of palette types and exports color data in multiple formats RGB, HSL, LAB, CMYK, and more - making it ideal for both web design and data visualization.
41
+
42
+ ## Features
43
+
44
+ - Generate palettes using:
45
+ - Interpolation
46
+ - Luminance shifts
47
+ - Monochromatic, Complementary, Analogous, Triadic, Tetradic, etc.
48
+ - Output in multiple color spaces: RGB, HSL, LCH, CMYK, etc.
49
+ - Randomized or lightness-corrected options
50
+ - Diverging palette support
51
+ - TypeScript-friendly API
40
52
 
41
53
  ## Demo
42
54
 
@@ -48,9 +60,9 @@ You can check out a working CodePen where you can [adjust settings and colors he
48
60
  npm i -S @phun-ky/moebius
49
61
  ```
50
62
 
51
- ## API
63
+ ## Full API-reference
52
64
 
53
- Go [here](https://github.com/phun-ky/moebius/blob/main/api/README.md) to read the full API documentation.
65
+ You can find the full API documentation [here](https://github.com/phun-ky/moebius/blob/main/api/README.md).
54
66
 
55
67
  ## Usage
56
68
 
@@ -60,9 +72,15 @@ Import and run the required function:
60
72
  import Moebius from '@phun-ky/moebius';
61
73
 
62
74
  const { MoebiusColor, MoebiusPalettes } = await Moebius();
75
+
76
+ const palette = new MoebiusPalettes({
77
+ baseColor: new MoebiusColor('#1e90ff')
78
+ });
79
+
80
+ console.log(palette.colors.interpolate); // ['#1e90ff', '#3298d8', ...]
63
81
  ```
64
82
 
65
- ### Creating paletts
83
+ ### Creating palettes
66
84
 
67
85
  The main feature is the ability to create palettes with a given primary color and a secondary color (used for diverging palettes). You can also give the color to diverge to/from.
68
86
 
package/dist/moebius.d.ts CHANGED
@@ -1,212 +1,3 @@
1
- /**
2
- * Represents a color object with various color representations.
3
- */
4
- interface MoebiusColorInterface {
5
- color: MoebiusChromaColorInputType;
6
- name: string;
7
- hex: MoebiusColorValueHexType;
8
- rgb: MoebiusColorValueRgbType;
9
- hsl: MoebiusHSLObjectType;
10
- hslFloat: MoebiusHSLObjectType;
11
- rgbFloat: MoebiusRGBObjectType;
12
- hwb: MoebiusHWBObjectType;
13
- hsv: MoebiusHSVObjectType;
14
- lab: MoebiusLABObjectType;
15
- xyz: MoebiusXYZObjectType;
16
- lch: MoebiusLCHObjectType;
17
- oklch: MoebiusLCHObjectType;
18
- hsi: MoebiusHSIObjectType;
19
- oklab: MoebiusLABObjectType;
20
- cmyk: MoebiusCMYKObjectType;
21
- }
22
- interface MoebiusPaletteInterface {
23
- baseColor: MoebiusColorInterface;
24
- secondaryColor: MoebiusColorInterface;
25
- colors: Record<string, unknown> | MoebiusPaletteColorsInterface;
26
- themes: Record<string, unknown> | MoebiusThemeColorsInterface;
27
- defaultOptions: MoebiusPaletteDefaultOptionsType;
28
- options: MoebiusPaletteOptionsType;
29
- all: MoebiusColorValueHexType[];
30
- accents: MoebiusPaletteAccentColorsInterface;
31
- }
32
- /**
33
- * Represents a palette of colors with different schemes.
34
- */
35
- interface MoebiusPaletteColorsInterface {
36
- interpolate: MoebiusColorValueHexType[];
37
- luminanceShift: MoebiusColorValueHexType[];
38
- monochromatic: MoebiusColorValueHexType[];
39
- complement: MoebiusColorValueHexType[];
40
- split: MoebiusColorValueHexType[];
41
- triadic: MoebiusColorValueHexType[];
42
- tetradic: MoebiusColorValueHexType[];
43
- pentadic: MoebiusColorValueHexType[];
44
- hexadic: MoebiusColorValueHexType[];
45
- analogous: MoebiusColorValueHexType[];
46
- }
47
- /**
48
- * Represents a palette of colors with different themes.
49
- */
50
- interface MoebiusThemeColorsInterface {
51
- darkMode: Record<string, MoebiusColorValueHexType[]>;
52
- }
53
- /**
54
- * Represents a palette of accent colors with different schemes.
55
- */
56
- interface MoebiusPaletteAccentColorsInterface {
57
- interpolate: MoebiusColorValueHexType[][];
58
- luminanceShift: MoebiusColorValueHexType[][];
59
- monochromatic: MoebiusColorValueHexType[][];
60
- complement: MoebiusColorValueHexType[][];
61
- split: MoebiusColorValueHexType[][];
62
- triadic: MoebiusColorValueHexType[][];
63
- tetradic: MoebiusColorValueHexType[][];
64
- pentadic: MoebiusColorValueHexType[][];
65
- hexadic: MoebiusColorValueHexType[][];
66
- analogous: MoebiusColorValueHexType[][];
67
- }
68
- /**
69
- * Represents options for generating a color palette.
70
- */
71
- type MoebiusPaletteOptionsType = {
72
- baseColor: MoebiusColorInterface;
73
- secondaryColor: MoebiusColorInterface;
74
- divergentColor?: MoebiusColorValueHexType;
75
- diverging?: boolean;
76
- bezier?: boolean;
77
- randomOffset?: boolean;
78
- correctLightness?: boolean;
79
- noDuplicates?: boolean;
80
- colorScaleMode?: string;
81
- divergingColor?: string;
82
- reverseDirection?: boolean;
83
- numberOfColors?: number;
84
- };
85
- /**
86
- * Represents default options for generating a color palette.
87
- */
88
- type MoebiusPaletteDefaultOptionsType = {
89
- divergentColor?: MoebiusColorValueHexType;
90
- diverging: boolean;
91
- bezier: boolean;
92
- randomOffset: boolean;
93
- correctLightness: boolean;
94
- noDuplicates: boolean;
95
- colorScaleMode: string;
96
- reverseDirection: boolean;
97
- numberOfColors?: number;
98
- };
99
- /**
100
- * Represents a color value in hexadecimal format.
101
- */
102
- type MoebiusColorValueHexType = `#${string}`;
103
- /**
104
- * Represents a color value in HSL format.
105
- */
106
- type MoebiusColorValueHslType = `hsl(${number}, ${string}, ${string})`;
107
- /**
108
- * Represents a color value in HSLA format.
109
- */
110
- type MoebiusColorValueHslaType = `hsl(${number}, ${string}, ${string}, ${number})`;
111
- /**
112
- * Represents a color value in RGB format.
113
- */
114
- type MoebiusColorValueRgbType = `rgb(${number}, ${number}, ${number})`;
115
- /**
116
- * Represents a color value in RGBA format.
117
- */
118
- type MoebiusColorValueRgbaType = `rgb(${number}, ${number}, ${number}, ${number})`;
119
- /**
120
- * Represents an RGB color object.
121
- */
122
- type MoebiusRGBObjectType = {
123
- r: number;
124
- g: number;
125
- b: number;
126
- };
127
- /**
128
- * Represents an HSL color object.
129
- */
130
- type MoebiusHSLObjectType = {
131
- h: number;
132
- s: number;
133
- l: number;
134
- };
135
- /**
136
- * Represents an HSV color object.
137
- */
138
- type MoebiusHSVObjectType = {
139
- h: number;
140
- s: number;
141
- v: number;
142
- };
143
- /**
144
- * Represents an LCH color object.
145
- */
146
- type MoebiusLCHObjectType = {
147
- l: number;
148
- c: number;
149
- h: number;
150
- };
151
- /**
152
- * Represents an HSI color object.
153
- */
154
- type MoebiusHSIObjectType = {
155
- h: number;
156
- s: number;
157
- i: number;
158
- };
159
- /**
160
- * Represents an XYZ color object.
161
- */
162
- type MoebiusXYZObjectType = {
163
- x: number;
164
- y: number;
165
- z: number;
166
- };
167
- /**
168
- * Represents an HWB color object.
169
- */
170
- type MoebiusHWBObjectType = {
171
- h: number;
172
- w: number;
173
- b: number;
174
- };
175
- /**
176
- * Represents a LAB color object.
177
- */
178
- type MoebiusLABObjectType = {
179
- l: number;
180
- a: number;
181
- b: number;
182
- };
183
- /**
184
- * Represents a CMYK color object.
185
- */
186
- type MoebiusCMYKObjectType = {
187
- c: number;
188
- m: number;
189
- y: number;
190
- k: number;
191
- };
192
- /**
193
- * Represents a color specification for nearest color matching.
194
- */
195
- interface NearestColorColorSpecInterface {
196
- name: string;
197
- source: string;
198
- rgb: MoebiusRGBObjectType;
199
- }
200
- /**
201
- * Represents a color match for nearest color matching.
202
- */
203
- interface NearestColorColorMatchInterface {
204
- name: string;
205
- value: string;
206
- rgb: MoebiusRGBObjectType;
207
- }
208
- type MoebiusChromaColorInputType = MoebiusCMYKObjectType | MoebiusLCHObjectType | MoebiusHSLObjectType | MoebiusColorValueHexType | string;
209
-
210
1
  /**
211
2
  * MoebiusColor class representing a color with various formats and conversions.
212
3
  *
@@ -526,18 +317,250 @@ declare class MoebiusSVGHelper {
526
317
  getColorPiePaths(colors: MoebiusColorValueHexType[][], size?: number): DocumentFragment;
527
318
  }
528
319
 
320
+ /**
321
+ * Represents a color object with various color representations.
322
+ */
323
+ interface MoebiusColorInterface {
324
+ color: MoebiusChromaColorInputType;
325
+ name: string;
326
+ hex: MoebiusColorValueHexType;
327
+ rgb: MoebiusColorValueRgbType;
328
+ hsl: MoebiusHSLObjectType;
329
+ hslFloat: MoebiusHSLObjectType;
330
+ rgbFloat: MoebiusRGBObjectType;
331
+ hwb: MoebiusHWBObjectType;
332
+ hsv: MoebiusHSVObjectType;
333
+ lab: MoebiusLABObjectType;
334
+ xyz: MoebiusXYZObjectType;
335
+ lch: MoebiusLCHObjectType;
336
+ oklch: MoebiusLCHObjectType;
337
+ hsi: MoebiusHSIObjectType;
338
+ oklab: MoebiusLABObjectType;
339
+ cmyk: MoebiusCMYKObjectType;
340
+ }
341
+ /**
342
+ * Describes a color with multiple representations and metadata.
343
+ */
529
344
  type MoebiusReturnType = Promise<{
530
345
  MoebiusColor: typeof MoebiusColor;
531
346
  MoebiusPalettes: typeof MoebiusPalettes;
532
347
  MoebiusSVGHelper: typeof MoebiusSVGHelper;
533
348
  }>;
534
349
  /**
535
- * Asynchronous function to initialize Moebius with required data
350
+ * Represents a full palette generated from a base/secondary color combination.
351
+ */
352
+ interface MoebiusPaletteInterface {
353
+ baseColor: MoebiusColorInterface;
354
+ secondaryColor: MoebiusColorInterface;
355
+ colors: Record<string, unknown> | MoebiusPaletteColorsInterface;
356
+ themes: Record<string, unknown> | MoebiusThemeColorsInterface;
357
+ defaultOptions: MoebiusPaletteDefaultOptionsType;
358
+ options: MoebiusPaletteOptionsType;
359
+ all: MoebiusColorValueHexType[];
360
+ accents: MoebiusPaletteAccentColorsInterface;
361
+ }
362
+ /**
363
+ * Defines generated palette schemes (e.g., split, triadic).
364
+ */
365
+ interface MoebiusPaletteColorsInterface {
366
+ interpolate: MoebiusColorValueHexType[];
367
+ luminanceShift: MoebiusColorValueHexType[];
368
+ monochromatic: MoebiusColorValueHexType[];
369
+ complement: MoebiusColorValueHexType[];
370
+ split: MoebiusColorValueHexType[];
371
+ triadic: MoebiusColorValueHexType[];
372
+ tetradic: MoebiusColorValueHexType[];
373
+ pentadic: MoebiusColorValueHexType[];
374
+ hexadic: MoebiusColorValueHexType[];
375
+ analogous: MoebiusColorValueHexType[];
376
+ }
377
+ /**
378
+ * Represents a palette of colors with different themes.
379
+ */
380
+ interface MoebiusThemeColorsInterface {
381
+ darkMode: Record<string, MoebiusColorValueHexType[]>;
382
+ }
383
+ /**
384
+ * Represents a palette of accent colors with different schemes.
385
+ */
386
+ interface MoebiusPaletteAccentColorsInterface {
387
+ interpolate: MoebiusColorValueHexType[][];
388
+ luminanceShift: MoebiusColorValueHexType[][];
389
+ monochromatic: MoebiusColorValueHexType[][];
390
+ complement: MoebiusColorValueHexType[][];
391
+ split: MoebiusColorValueHexType[][];
392
+ triadic: MoebiusColorValueHexType[][];
393
+ tetradic: MoebiusColorValueHexType[][];
394
+ pentadic: MoebiusColorValueHexType[][];
395
+ hexadic: MoebiusColorValueHexType[][];
396
+ analogous: MoebiusColorValueHexType[][];
397
+ }
398
+ /**
399
+ * Represents options for generating a color palette.
400
+ */
401
+ type MoebiusPaletteOptionsType = {
402
+ baseColor: MoebiusColorInterface;
403
+ secondaryColor: MoebiusColorInterface;
404
+ divergentColor?: MoebiusColorValueHexType;
405
+ diverging?: boolean;
406
+ bezier?: boolean;
407
+ randomOffset?: boolean;
408
+ correctLightness?: boolean;
409
+ noDuplicates?: boolean;
410
+ colorScaleMode?: string;
411
+ divergingColor?: string;
412
+ reverseDirection?: boolean;
413
+ numberOfColors?: number;
414
+ };
415
+ /**
416
+ * Represents default options for generating a color palette.
417
+ */
418
+ type MoebiusPaletteDefaultOptionsType = {
419
+ divergentColor?: MoebiusColorValueHexType;
420
+ diverging: boolean;
421
+ bezier: boolean;
422
+ randomOffset: boolean;
423
+ correctLightness: boolean;
424
+ noDuplicates: boolean;
425
+ colorScaleMode: string;
426
+ reverseDirection: boolean;
427
+ numberOfColors?: number;
428
+ };
429
+ /**
430
+ * A hex-based color string, e.g., '#ffcc00'.
431
+ */
432
+ type MoebiusColorValueHexType = `#${string}`;
433
+ /**
434
+ * HSL color value string, e.g., 'hsl(240, 100%, 50%)'.
435
+ */
436
+ type MoebiusColorValueHslType = `hsl(${number}, ${string}, ${string})`;
437
+ /**
438
+ * HSLA color value string, e.g., 'hsl(240, 100%, 50%, 0.5)'.
439
+ */
440
+ type MoebiusColorValueHslaType = `hsl(${number}, ${string}, ${string}, ${number})`;
441
+ /**
442
+ * RGB color value string, e.g., 'rgb(255, 0, 0)'.
443
+ */
444
+ type MoebiusColorValueRgbType = `rgb(${number}, ${number}, ${number})`;
445
+ /**
446
+ * RGBA color value string, e.g., 'rgb(255, 0, 0, 0.75)'.
447
+ */
448
+ type MoebiusColorValueRgbaType = `rgb(${number}, ${number}, ${number}, ${number})`;
449
+ /**
450
+ * RGB color object.
451
+ */
452
+ type MoebiusRGBObjectType = {
453
+ r: number;
454
+ g: number;
455
+ b: number;
456
+ };
457
+ /**
458
+ * HSL color object.
459
+ */
460
+ type MoebiusHSLObjectType = {
461
+ h: number;
462
+ s: number;
463
+ l: number;
464
+ };
465
+ /**
466
+ * HSV color object.
467
+ */
468
+ type MoebiusHSVObjectType = {
469
+ h: number;
470
+ s: number;
471
+ v: number;
472
+ };
473
+ /**
474
+ * HSI color object.
475
+ */
476
+ type MoebiusHSIObjectType = {
477
+ h: number;
478
+ s: number;
479
+ i: number;
480
+ };
481
+ /**
482
+ * HWB color object.
483
+ */
484
+ type MoebiusHWBObjectType = {
485
+ h: number;
486
+ w: number;
487
+ b: number;
488
+ };
489
+ /**
490
+ * LAB color object.
491
+ */
492
+ type MoebiusLABObjectType = {
493
+ l: number;
494
+ a: number;
495
+ b: number;
496
+ };
497
+ /**
498
+ * LCH color object.
499
+ */
500
+ type MoebiusLCHObjectType = {
501
+ l: number;
502
+ c: number;
503
+ h: number;
504
+ };
505
+ /**
506
+ * XYZ color object.
507
+ */
508
+ type MoebiusXYZObjectType = {
509
+ x: number;
510
+ y: number;
511
+ z: number;
512
+ };
513
+ /**
514
+ * CMYK color object.
515
+ */
516
+ type MoebiusCMYKObjectType = {
517
+ c: number;
518
+ m: number;
519
+ y: number;
520
+ k: number;
521
+ };
522
+ /**
523
+ * A named color + metadata for nearest-color matching source.
524
+ */
525
+ interface NearestColorColorSpecInterface {
526
+ name: string;
527
+ source: string;
528
+ rgb: MoebiusRGBObjectType;
529
+ }
530
+ /**
531
+ * A matched color name and its RGB/hex representation.
532
+ */
533
+ interface NearestColorColorMatchInterface {
534
+ name: string;
535
+ value: string;
536
+ rgb: MoebiusRGBObjectType;
537
+ }
538
+ /**
539
+ * Input types accepted by Chroma or Moebius logic.
540
+ */
541
+ type MoebiusChromaColorInputType = MoebiusCMYKObjectType | MoebiusLCHObjectType | MoebiusHSLObjectType | MoebiusColorValueHexType | string;
542
+
543
+ /**
544
+ * Initializes and returns Moebius utilities with dynamic color naming support.
545
+ *
546
+ * This includes:
547
+ * - A subclass of `MoebiusColor` with nearest color name mapping
548
+ * - `MoebiusPalettes` for generating color palettes
549
+ * - `MoebiusSVGHelper` for generating SVG paths for colored pie slices.
550
+ *
536
551
  * @function
537
- * @returns {MoebiusReturnType} An object with Moebius classes
552
+ * @async
553
+ * @returns {Promise<MoebiusReturnType>} An object containing Moebius utility classes
538
554
  *
555
+ * @example
556
+ * ```ts
557
+ * const moebius = await Moebius();
558
+ * const color = new moebius.MoebiusColor('#abc123');
559
+ * console.log(color.name); // Closest color name, e.g., 'Avocado'
560
+ * ```
539
561
  */
540
562
  declare function Moebius(): MoebiusReturnType;
563
+ //# sourceMappingURL=main.d.ts.map
541
564
 
542
565
  export { Moebius as default };
543
566
  export type { MoebiusCMYKObjectType, MoebiusChromaColorInputType, MoebiusColorInterface, MoebiusColorValueHexType, MoebiusColorValueHslType, MoebiusColorValueHslaType, MoebiusColorValueRgbType, MoebiusColorValueRgbaType, MoebiusHSIObjectType, MoebiusHSLObjectType, MoebiusHSVObjectType, MoebiusHWBObjectType, MoebiusLABObjectType, MoebiusLCHObjectType, MoebiusPaletteAccentColorsInterface, MoebiusPaletteColorsInterface, MoebiusPaletteDefaultOptionsType, MoebiusPaletteInterface, MoebiusPaletteOptionsType, MoebiusRGBObjectType, MoebiusReturnType, MoebiusThemeColorsInterface, MoebiusXYZObjectType, NearestColorColorMatchInterface, NearestColorColorSpecInterface };
package/dist/moebius.js CHANGED
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * @phun-ky/moebius
3
- * Automatically generate color palettes!
3
+ * @phun-ky/moebius is a versatile JavaScript library that automatically generates visually pleasing and customizable color palettes from a given base color. Whether you're building data visualizations, UIs, or design systems, Möbius offers various harmony modes (analogous, complementary, triadic, and more), smooth interpolation, luminance shifts, and diverging palette generation - all with extensive color format support and intuitive API design.
4
4
  * @author Alexander Vassbotn Røyne-Helgesen <alexander+github.com@phun-ky.net>
5
- * @version 2.0.6
5
+ * @version 2.0.8
6
6
  * @license
7
7
  * Copyright (c) 2023 Alexander Vassbotn Røyne-Helgesen
8
8
  *
@@ -28,7 +28,7 @@
28
28
  * @phun-ky/typeof
29
29
  * A set of JavaScript helper functions to check for types
30
30
  * @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
31
- * @version 1.2.13
31
+ * @version 1.2.14
32
32
  * @license
33
33
  * Copyright (c) 2024 Alexander Vassbotn Røyne-Helgesen
34
34
  *