magic-color - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

dist/index.d.ts

@@ -1,59 +0,61 @@
-type ColorType = 'hsl' | 'hsb' | 'rgb' | 'hex' | 'keyword';
-type hslColor = [number, number, number];
-type hsbColor = [number, number, number];
-type rgbColor = [number, number, number];
-type hexColor = string;
-type keywordColor = string;
-type Color = hslColor | hsbColor | rgbColor | hexColor | keywordColor;
-
-declare const keywordColors: Record<string, hexColor>;
-type ColorKeyword = keyof typeof keywordColors;
-declare function isHex(color: string): boolean;
-declare function isHsl(color: string): boolean;
-declare function isRgb(color: string): boolean;
-declare function isHsb(color: string): boolean;
-declare function isKeyword(color: string): color is ColorKeyword;
-declare function isColor(color: string): boolean;
-declare function getColorType(color: string): ColorType | null;
-declare function rgbToHex(color: rgbColor | string): hexColor;
-declare function rgbToHsl(color: rgbColor | string): hslColor;
-declare function rgbToHsl(color: rgbColor | string, toString: false): hslColor;
-declare function rgbToHsl(color: rgbColor | string, toString: true): string;
-declare function rgbToHsl(color: rgbColor | string, toString: boolean): hslColor | string;
-declare function rgbToHsb(color: rgbColor | string): hsbColor;
-declare function rgbToHsb(color: rgbColor | string, toString: false): hsbColor;
-declare function rgbToHsb(color: rgbColor | string, toString: true): string;
-declare function rgbToHsb(color: rgbColor | string, toString: boolean): hsbColor | string;
-declare function hslToHex(color: hslColor | string): hexColor;
-declare function hslToRgb(color: hslColor | string, toString?: boolean): rgbColor | string;
-declare function hslToHsb(color: hslColor | string, toString?: boolean): hsbColor | string;
-declare function hexToRgb(color: hexColor, toString?: boolean): rgbColor | string;
-declare function hexToHsl(color: hexColor, toString?: boolean): hsbColor | string;
-declare function hexToHsb(color: hexColor, toString?: boolean): hsbColor | string;
-declare function hsbToHex(color: hsbColor | string): hexColor;
-declare function hsbToRgb(color: hsbColor | string, toString?: boolean): rgbColor | string;
-declare function hsbToHsl(color: hsbColor | string, toString?: boolean): hslColor | string;
 /**
- * Convert color from one format to another.
- * @param colorString valid color string
- * @param format ColorType
- * @returns Result of ColorType
+ * [0-360, 0-100, 0-100]
  */
-declare function convertColor(colorString: string, format: 'rgb'): rgbColor | null;
-declare function convertColor(colorString: string, format: 'rgb', toString: false): rgbColor | null;
-declare function convertColor(colorString: string, format: 'rgb', toString: true): string | null;
-declare function convertColor(colorString: string, format: 'rgb', toString: boolean): rgbColor | string | null;
-declare function convertColor(colorString: string, format: 'hsl'): hslColor | null;
-declare function convertColor(colorString: string, format: 'hsl', toString: false): hslColor | null;
-declare function convertColor(colorString: string, format: 'hsl', toString: true): string | null;
-declare function convertColor(colorString: string, format: 'hsl', toString: boolean): hslColor | string | null;
-declare function convertColor(colorString: string, format: 'hsb'): hsbColor | null;
-declare function convertColor(colorString: string, format: 'hsb', toString: false): hsbColor | null;
-declare function convertColor(colorString: string, format: 'hsb', toString: true): string | null;
-declare function convertColor(colorString: string, format: 'hsb', toString: boolean): hsbColor | string | null;
-declare function convertColor(colorString: string, format: 'hex'): hexColor | null;
-declare function convertColor(colorString: string, format: 'hex', toString: false): hexColor | null;
-declare function convertColor(colorString: string, format: 'hex', toString: true): string | null;
-declare function convertColor(colorString: string, format: 'hex', toString: boolean): hexColor | string | null;
+type HslColor = [number, number, number];
+/**
+ * [0-360, 0-100, 0-100]
+ */
+type HsbColor = [number, number, number];
+/**
+ * [0-255, 0-255, 0-255]
+ */
+type RgbColor = [number, number, number];
+/**
+ * #RRGGBB or #RRGGBBAA
+ */
+type HexColor = string;
+/**
+ * CSS color keyword
+ */
+type KeywordColor = string;
+/**
+ * 0-1
+ */
+type Opacity = number;
+interface Colors {
+    keyword: KeywordColor;
+    rgb: RgbColor;
+    hex: HexColor;
+    hsb: HsbColor;
+    hsl: HslColor;
+}
+type ColorType = keyof Colors;
+type ColorValue = Colors[keyof Colors];
+interface ColorObject<T extends ColorType> {
+    type: T;
+    value: Colors[T];
+    opacity: Opacity;
+}
 
+declare class MagicColor<T extends ColorType> implements ColorObject<T> {
+    type: T;
+    value: Colors[T];
+    opacity: Opacity;
+    constructor(value: Colors[T], type: T, opacity: Opacity);
+    toString(withOpacity?: boolean): string;
+    toRgb(): MagicColor<"rgb">;
+    toHex(): MagicColor<"hex">;
+    toHsl(): MagicColor<"hsl">;
+    toHsb(): MagicColor<"hsb">;
+}
+declare function createMagicColor<T extends ColorType = any>(value: string, type?: T, opacity?: Opacity): MagicColor<T>;
+declare function createMagicColor<T extends ColorType = any>(value: Colors[T], type: T, opacity?: Opacity): MagicColor<T>;
+declare function opacityToString(opacity: Opacity, toHex?: boolean): string;
+declare function guessType(color: string): keyof Colors | undefined;
+
+declare function isColor(color: string): boolean;
+declare function getContrastRatio(c1: string, c2: string): number;
+declare function calcuRelativeLuminance(rgb: RgbColor): number;
+declare function getReadableTextColor(bgColor: string, textColor?: string): '#000000' | '#ffffff';
+
 interface ThemeMetas {
@@ -115,2 +117,2 @@ '50': string;
 
-export { type Color, type ColorType, type ThemeMetas, type ThemeOptions, convertColor, getColorType, type hexColor, hexToHsb, hexToHsl, hexToRgb, type hsbColor, hsbToHex, hsbToHsl, hsbToRgb, type hslColor, hslToHex, hslToHsb, hslToRgb, isColor, isHex, isHsb, isHsl, isKeyword, isRgb, type keywordColor, type rgbColor, rgbToHex, rgbToHsb, rgbToHsl, theme };
+export { type ColorObject, type ColorType, type ColorValue, type Colors, type HexColor, type HsbColor, type HslColor, type KeywordColor, MagicColor, type Opacity, type RgbColor, type ThemeMetas, type ThemeOptions, calcuRelativeLuminance, createMagicColor, getContrastRatio, getReadableTextColor, guessType, isColor, opacityToString, theme };

package.json

 {
   "name": "magic-color",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "packageManager": "pnpm@8.14.0",
@@ -52,3 +52,4 @@ "description": "Magic color creator.",
     "typecheck": "tsc --noEmit",
-    "prepare": "simple-git-hooks"
+    "prepare": "simple-git-hooks",
+    "play": "pnpm -C playground dev"
   },
@@ -55,0 +56,0 @@ "devDependencies": {

README.md

@@ -21,11 +21,35 @@ <img src="https://raw.githubusercontent.com/zyyv/magic-color/main/public/logo.svg" style="width:100px;" />
 
-## Example
+### basic
 
 ```ts
-import { hexTorgb, rgbTohex } from 'magic-color'
+import { MagicColor, createMagicColor } from 'magic-color'
 
-hexTorgb('#fff') // [255, 255, 255]
-rgbTohex('rgb(255, 255, 255)') // '#fff'
+const mc = new MagicColor('#ffffff', 'hex', '1')
+// or
+const mc = createMagicColor('#ffffff') // recommended
 ```
 
+`createMagicColor` will automatically infer the input color type and the opacity.
+
+Now support color types: `RGB`, `HEX`, `HSL`, `HSB`, `Keyword`.
+
+You can convert between supported types.
+
+```ts
+mc.toRgb().value // [255, 255, 255]
+mc.toHex().value // '#ffffff'
+mc.toHsl().value // [0, 0, 100]
+mc.toHsb().value // [0, 0, 100]
+```
+
+If you want to output a color string, you can use the `toString` method, and you can choose whether you need opacity.
+
+```ts
+mc.toRgb().toString() // 'rgb(255, 255, 255)'
+// with opacity
+mc.toRgb().toString(true) // 'rgba(255, 255, 255, 100%)'
+```
+
+Refer to the [type documentation](https://github.com/zyyv/magic-color/blob/main/src/core/types.ts) for more information.
+
 And more...
@@ -32,0 +56,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1223

increased by16.7%

Number of lines in readme file

138

increased by21.05%

Worsened metrics

Total package byte prevSize

44899

decreased by-2.35%

No dependency changes