magic-color - npm Package Compare versions

Comparing version 0.1.0 to 1.0.1

dist/index.d.ts

@@ -1,38 +0,8 @@
-/**
- * [0-360, 0-100, 0-100]
- */
-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];
+import { ColorType, Colors, Opacity, RgbColor } from '@magic-color/core';
+export * from '@magic-color/core';
+
 interface ColorObject<T extends ColorType> {
     type: T;
     value: Colors[T];
-    opacity: Opacity;
+    alpha: Opacity;
 }
@@ -43,14 +13,25 @@
     value: Colors[T];
-    opacity: Opacity;
-    constructor(value: Colors[T], type: T, opacity: Opacity);
+    alpha: Opacity;
+    private _stack;
+    constructor(value: string);
+    constructor(value: Colors[T] | string, type: T);
+    constructor(value: Colors[T] | string, type: T, alpha: Opacity);
     toString(withOpacity?: boolean): string;
-    toRgb(): MagicColor<"rgb">;
-    toHex(): MagicColor<"hex">;
-    toHsl(): MagicColor<"hsl">;
-    toHsb(): MagicColor<"hsb">;
+    toRgb(): MagicColor<'rgb'>;
+    toHex(): MagicColor<'hex'>;
+    toHsl(): MagicColor<'hsl'>;
+    toHsb(): MagicColor<'hsb'>;
+    to(type: ColorType): MagicColor<"rgb"> | MagicColor<"hex"> | MagicColor<"hsl"> | MagicColor<"hsb">;
+    private _push;
+    get history(): MagicColor<any>[];
+    get last(): MagicColor<any>;
+    get first(): MagicColor<any>;
+    revert(): void;
+    clear(): void;
 }
-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 createMagicColor<T extends ColorType = any>(value: string, type?: T, alpha?: Opacity): MagicColor<T>;
+declare function createMagicColor<T extends ColorType = any>(value: Colors[T], type: T, alpha?: Opacity): MagicColor<T>;
+declare function alphaToString(alpha: Opacity, toHex?: boolean): string;
+declare function guessType(color: string): ColorType | undefined;
+declare const mc: typeof createMagicColor;
 
@@ -61,15 +42,16 @@ declare function isColor(color: string): boolean;
 declare function getReadableTextColor(bgColor: string, textColor?: string): '#000000' | '#ffffff';
+declare function isWarmColor(color: string): boolean;
 
 interface ThemeMetas {
-    '50': string;
-    '100': string;
-    '200': string;
-    '300': string;
-    '400': string;
-    '500': string;
-    '600': string;
-    '700': string;
-    '800': string;
-    '900': string;
-    '950': string;
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
 }
@@ -119,2 +101,2 @@ interface ThemeOptions {
 
-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 };
+export { type ColorObject, MagicColor, type ThemeMetas, type ThemeOptions, alphaToString, calcuRelativeLuminance, createMagicColor, getContrastRatio, getReadableTextColor, guessType, isColor, isWarmColor, mc, theme };

package.json

 {
   "name": "magic-color",
   "type": "module",
-  "version": "0.1.0",
-  "packageManager": "pnpm@8.14.0",
+  "version": "1.0.1",
   "description": "Magic color creator.",
@@ -24,4 +23,3 @@ "author": "Chris <[e-mail]>",
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.mjs"
     }
@@ -43,38 +41,9 @@ },
   ],
+  "dependencies": {
+    "@magic-color/core": "1.0.1"
+  },
   "scripts": {
     "build": "unbuild",
-    "dev": "unbuild --stub",
-    "lint": "eslint .",
-    "prepublishOnly": "nr build",
-    "release": "bumpp && npm publish",
-    "start": "esno src/index.ts",
-    "test": "vitest",
-    "test:update": "vitest -u",
-    "typecheck": "tsc --noEmit",
-    "prepare": "simple-git-hooks",
-    "play": "pnpm -C playground dev"
-  },
-  "devDependencies": {
-    "@antfu/eslint-config": "^2.6.2",
-    "@antfu/ni": "^0.21.12",
-    "@antfu/utils": "^0.7.7",
-    "@types/node": "^20.10.7",
-    "bumpp": "^9.2.1",
-    "eslint": "^8.56.0",
-    "esno": "^4.0.0",
-    "lint-staged": "^15.2.0",
-    "pnpm": "^8.14.0",
-    "rimraf": "^5.0.5",
-    "simple-git-hooks": "^2.9.0",
-    "typescript": "^5.3.3",
-    "unbuild": "^2.0.0",
-    "vite": "^5.0.11",
-    "vitest": "^1.1.3"
-  },
-  "simple-git-hooks": {
-    "pre-commit": "pnpm lint-staged"
-  },
-  "lint-staged": {
-    "*": "eslint --fix"
+    "dev": "unbuild --stub"
   }
-}
+}

README.md

 <img src="https://raw.githubusercontent.com/zyyv/magic-color/main/public/logo.svg" style="width:100px;" />
 
-# magic-color [![NPM version](https://img.shields.io/npm/v/magic-color?color=a1b858&label=)](https://www.npmjs.com/package/magic-color)
+# magic-color [![NPM version](https://img.shields.io/npm/v/magic-color?color=a1b858&label=)](https://www.npmjs.com/package/magic-color) [![Netlify Status](https://api.netlify.com/api/v1/badges/53ddaf28-1a23-40b2-8ed9-7ed65931744c/deploy-status)](https://app.netlify.com/sites/quiet-entremet-477970/deploys)
 
-Magic color creator.
+Make the colors be magical.
 
+You can watch my [talk](https://color.zyob.top/talk) to learn more basic knowledge points.
+
 ## Features
 
-- 🎨 Convert between RGB, HEX, HSL and HSB.
-- 🦄 Theme color generator.
-- etc.
+- 💫 Support `multi-color model` conversion.
+- 📦 Built-in color related components.
+- 🚀 Provides utility toolset functions
+- 🦄 Theme color generator and fully customizable.
+- 🥳 esm only & 0 dependencies.
 
@@ -24,10 +28,10 @@ ## Usage
 ```ts
-import { MagicColor, createMagicColor } from 'magic-color'
+import { MagicColor } from 'magic-color'
 
-const mc = new MagicColor('#ffffff', 'hex', '1')
-// or
-const mc = createMagicColor('#ffffff') // recommended
+const mc = new MagicColor('#ffffff') // auto parse color
+const mc = new MagicColor('#ffffff', 'hex') // specify color type
+const mc = new MagicColor('#ffffff', 'hex', 1) // specify opacity
 ```
 
-`createMagicColor` will automatically infer the input color type and the opacity.
+`MagicColor` will automatically infer the input color type and the opacity.
 
@@ -39,6 +43,9 @@ Now support color types: `RGB`, `HEX`, `HSL`, `HSB`, `Keyword`.
 ```ts
-mc.toRgb().value // [255, 255, 255]
-mc.toHex().value // '#ffffff'
-mc.toHsl().value // [0, 0, 100]
-mc.toHsb().value // [0, 0, 100]
+mc.toRgb() // RGB value: [255, 255, 255]
+mc.toHex() // HEX value: '#ffffff'
+mc.toHsl() // HSL value: [0, 0, 100]
+mc.toHsb() // HSB value: [0, 0, 100]
+
+// or you can use the `to` method
+mc.to('your transformed type')
 ```
@@ -49,4 +56,5 @@
 ```ts
-mc.toRgb().toString() // 'rgb(255, 255, 255)'
+mc.toString() // '#ffffff'
 // with opacity
+mc.toString(true) // '#ffffffff'
 mc.toRgb().toString(true) // 'rgba(255, 255, 255, 100%)'
@@ -53,0 +61,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

146

increased by5.8%

Worsened metrics

Total package byte prevSize

20963

decreased by-53.31%

Dependency count

1

increased byInfinity%

Number of package files

6

decreased by-25%

Lines of code

431

decreased by-64.76%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@magic-color/core@1.0.1

• + Added@magic-color/core@1.0.1(transitive)