magic-color - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.d.ts

@@ -1,4 +0,72 @@
-declare const one = 1;
-declare const two = 2;
+type ColorType = 'hsl' | 'hsb' | 'rgb' | 'hex';
 
-export { one, two };
+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 isColor(color: string): boolean;
+declare function getColorType(color: string): ColorType | null;
+declare function rgbToHex(color: string): string;
+declare function rgbToHsl(color: string): string;
+declare function rgbToHsb(color: string): string;
+declare function hslToHex(color: string): string;
+declare function hslToRgb(color: string): string;
+declare function hslToHsb(color: string): string;
+declare function hexToRgb(color: string): string;
+declare function hexToHsl(color: string): string;
+declare function hexToHsb(color: string): string;
+declare function hsbToHex(color: string): string;
+declare function hsbToRgb(color: string): string;
+declare function hsbToHsl(color: string): string;
+/**
+ * Convert color from one format to another.
+ * @param colorString valid color string
+ * @param targetFormat ColorType
+ * @returns Result of ColorType
+ */
+declare function convertColor(colorString: string, targetFormat: ColorType): string | null;
+
+interface ThemeOptions {
+    /**
+     * Output color type
+     *
+     * @default same type as input
+     */
+    type?: ColorType;
+    /**
+     * Custom render output color
+     *
+     * @param meta [name, color]
+     * @returns [CustomedName, CustomedColor]
+     */
+    render?: (meta: [string, string]) => [string, string];
+}
+/**
+ * Generate a theme from a color
+ *
+ * @example
+ * ```ts
+ * theme('#9955FF')
+ * =>
+ {
+   "50": "#faf7ff",
+  "100": "#f5eeff",
+  "200": "#e6d5ff",
+  "300": "#d6bbff",
+  "400": "#b888ff",
+  "500": "#9955ff",
+  "600": "#8a4de6",
+  "700": "#5c3399",
+  "800": "#452673",
+  "900": "#2e1a4d",
+  "950": "#1f1133",
+  }
+ * ```
+ *
+ * @param color theme color
+ * @param options ThemeOptions
+ * @returns Record<string, string>
+ */
+declare function theme(color: string, options?: ThemeOptions): Record<string, string>;
+
+export { type ColorType, type ThemeOptions, convertColor, getColorType, hexToHsb, hexToHsl, hexToRgb, hsbToHex, hsbToHsl, hsbToRgb, hslToHex, hslToHsb, hslToRgb, isColor, isHex, isHsb, isHsl, isRgb, rgbToHex, rgbToHsb, rgbToHsl, theme };

package.json

 {
   "name": "magic-color",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "packageManager": "pnpm@8.14.0",
@@ -15,3 +15,7 @@ "description": "Magic color creator.",
   "bugs": "https://github.com/zyyv/magic-color/issues",
-  "keywords": [],
+  "keywords": [
+    "color",
+    "colors",
+    "magic-color"
+  ],
   "sideEffects": false,
@@ -47,2 +51,3 @@ "exports": {
     "test": "vitest",
+    "test:update": "vitest -u",
     "typecheck": "tsc --noEmit",
@@ -49,0 +54,0 @@ "prepare": "simple-git-hooks"

README.md

@@ -1,29 +0,107 @@
-# magic-color
+<img src="https://raw.githubusercontent.com/zyyv/magic-color/main/public/logo.svg" style="width:100px;" />
 
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![bundle][bundle-src]][bundle-href]
-[![JSDocs][jsdocs-src]][jsdocs-href]
-[![License][license-src]][license-href]
+# magic-color [![NPM version](https://img.shields.io/npm/v/magic-color?color=a1b858&label=)](https://www.npmjs.com/package/magic-color)
 
 Magic color creator.
 
-> **Note**:
-> Replace `magic-color`, `Magic color creator.` and `zyyv` globally to use this template.
+## Usage
 
-## License
+```bash
+pnpm add magic-color
+```
 
-[MIT](./LICENSE) License © 2023-PRESENT [Chris](https://github.com/zyyv)
+A lot of color tool functions for you to use, providing easy conversion, generation, parsing, comparison, operation and other functions.
 
-<!-- Badges -->
+## Example
 
-[npm-version-src]: https://img.shields.io/npm/v/magic-color?style=flat&colorA=080f12&colorB=1fa669
-[npm-version-href]: https://npmjs.com/package/magic-color
-[npm-downloads-src]: https://img.shields.io/npm/dm/magic-color?style=flat&colorA=080f12&colorB=1fa669
-[npm-downloads-href]: https://npmjs.com/package/magic-color
-[bundle-src]: https://img.shields.io/bundlephobia/minzip/magic-color?style=flat&colorA=080f12&colorB=1fa669&label=minzip
-[bundle-href]: https://bundlephobia.com/result?p=magic-color
-[license-src]: https://img.shields.io/github/license/zyyv/magic-color.svg?style=flat&colorA=080f12&colorB=1fa669
-[license-href]: https://github.com/zyyv/magic-color/blob/main/LICENSE
-[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
-[jsdocs-href]: https://www.jsdocs.io/package/magic-color
+```ts
+import { hexTorgb, rgbTohex } from 'magic-color'
+
+hexTorgb('#fff') // [255, 255, 255]
+rgbTohex(255, 255, 255) // '#fff'
+```
+
+And more...
+
+### theme
+
+Well, you can use it to create a theme color.
+
+```ts
+import { theme } from 'magic-color'
+
+theme('#9955ff')
+
+// Will output:
+// {
+//   "50": "#faf7ff",
+//   "100": "#f5eeff",
+//   "200": "#e6d5ff",
+//   "300": "#d6bbff",
+//   "400": "#b888ff",
+//   "500": "#9955ff",
+//   "600": "#8a4de6",
+//   "700": "#5c3399",
+//   "800": "#452673",
+//   "900": "#2e1a4d",
+//   "950": "#1f1133",
+// }
+```
+
+And you can custom it with `themeOptions`.
+
+```ts
+export interface ThemeOptions {
+  /**
+   * Output color type
+   *
+   * @default same type as input
+   */
+  type?: ColorType
+
+  /**
+   * Custom render output color
+   *
+   * @param meta [name, color]
+   * @returns [CustomedName, CustomedColor]
+   */
+  render?: (meta: [string, string]) => [string, string]
+}
+```
+
+```ts
+import { theme } from 'magic-color'
+
+theme('#9955ff', {
+  type: 'rgb',
+  render: (meta) => {
+    return [
+      `--color-primary-${meta[0]}`,
+      meta[1].replace(/rgb\((.*)\)/, '$1').replace(/,/g, ''),
+    ]
+  },
+})
+
+// Will output:
+// {
+//   "--color-primary-50": "250 247 255",
+//   "--color-primary-100": "245 238 255",
+//   "--color-primary-200": "230 213 255",
+//   "--color-primary-300": "214 187 255",
+//   "--color-primary-400": "184 136 255",
+//   "--color-primary-500": "153 85 255",
+//   "--color-primary-600": "138 77 230",
+//   "--color-primary-700": "92 51 153",
+//   "--color-primary-800": "69 38 115",
+//   "--color-primary-900": "46 26 77",
+//   "--color-primary-950": "31 17 51",
+// }
+```
+
+## Credits
+
+- [theme-colors](https://github.com/unjs/theme-colors) - (*Better than it*)
+
+## license
+
+[MIT](./LICENSE)

New alerts

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

Improved metrics

Total package byte prevSize

37907

increased by755.69%

Lines of code

1013

increased by9109.09%

Number of lines in readme file

108

increased by260%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes