feat: added utils color package fns docs

docs/.vitepress/guides.ts

@@ -14,6 +14,27 @@ export const functions: DefaultTheme.NavItemChildren[] = [
       },
     ],
   },
+  {
+    text: 'utils-color',
+    items: [
+      {
+        text: 'hexToRgba',
+        link: '/functions/color/hexToRgba',
+      },
+      {
+        text: 'rgbaToHex',
+        link: '/functions/color/rgbaToHex',
+      },
+      {
+        text: 'darken',
+        link: '/functions/color/darken',
+      },
+      {
+        text: 'lighten',
+        link: '/functions/color/lighten',
+      },
+    ],
+  },
   {
     text: 'utils-is',
     items: [

docs/examples/color/darken/hexToDarken.ts

@@ -0,0 +1,9 @@
+import { darken } from '@vtrbo/utils-color'
+
+const hex3: string = '#333'
+const level3: number = 3
+console.log(darken(hex3, level3))
+
+const hex6: string = '#666666'
+const level6: number = 6
+console.log(darken(hex6, level6))

docs/examples/color/darken/rgbaToDarken.ts

@@ -0,0 +1,8 @@
+import { darken } from '@vtrbo/utils-color'
+
+const rgba: string = 'rgba(123, 32, 18, 0.6)'
+console.log(darken(rgba, 4))
+
+const rgb: string = 'rgb(123, 32, 18)'
+const level4: number = 4
+console.log(darken(rgb, level4))

docs/examples/color/hexToRgba/hexToRgb.ts

@@ -0,0 +1,7 @@
+import { hexToRgba } from '@vtrbo/utils-color'
+
+const hex3: string = '#333'
+console.log(hexToRgba(hex3))
+
+const hex6: string = '#666666'
+console.log(hexToRgba(hex6))

docs/examples/color/hexToRgba/hexToRgba.ts

@@ -0,0 +1,7 @@
+import { hexToRgba } from '@vtrbo/utils-color'
+
+const hex4: string = '#3333'
+console.log(hexToRgba(hex4))
+
+const hex8: string = '#66666666'
+console.log(hexToRgba(hex8))

docs/examples/color/lighten/hexToLighten.ts

@@ -0,0 +1,9 @@
+import { lighten } from '@vtrbo/utils-color'
+
+const hex3: string = '#333'
+const level3: number = 3
+console.log(lighten(hex3, level3))
+
+const hex6: string = '#666666'
+const level6: number = 6
+console.log(lighten(hex6, level6))

docs/examples/color/lighten/rgbaToLighten.ts

@@ -0,0 +1,8 @@
+import { lighten } from '@vtrbo/utils-color'
+
+const rgba: string = 'rgba(123, 32, 18, 0.6)'
+console.log(lighten(rgba, 4))
+
+const rgb: string = 'rgb(123, 32, 18)'
+const level4: number = 4
+console.log(lighten(rgb, level4))

docs/examples/color/rgbaToHex/rgbToHex.ts

@@ -0,0 +1,5 @@
+import { rgbaToHex } from '@vtrbo/utils-color'
+
+const rgba: string = 'rgb(123, 213, 35)'
+
+console.log(rgbaToHex(rgba))

docs/examples/color/rgbaToHex/rgbaToHex.ts

@@ -0,0 +1,5 @@
+import { rgbaToHex } from '@vtrbo/utils-color'
+
+const rgba: string = 'rgba(123, 213, 35, 0.4)'
+
+console.log(rgbaToHex(rgba))

docs/functions/color/darken.md

@@ -0,0 +1,43 @@
+---
+title: darken
+lang: zh-CN
+---
+
+# darken
+
+将颜色加深
+
+## 安装
+
+::: code-group
+
+```bash [pnpm]
+pnpm add @vtrbo/utils-color
+```
+
+```bash [yarn]
+yarn add @vtrbo/utils-color
+```
+
+```bash [npm]
+npm install @vtrbo/utils-color
+```
+
+:::
+
+## 使用
+
+### 3/6位`HEX`颜色加深
+
+<demo example="color/darken/hexToDarken.ts"></demo>
+
+### `RGB`或`RGBA`颜色加深
+
+<demo example="color/darken/rgbaToDarken.ts"></demo>
+
+## 参数
+
+| 名称    | 描述      | 类型       | 必填  | 默认值 |
+|-------|---------|----------|-----|-----|
+| color | 欲加深的颜色值 | `string` | `是` | -   |
+| level | 加深级别    | `number` | `否` | 10  |

docs/functions/color/hexToRgba.md

@@ -0,0 +1,42 @@
+---
+title: hexToRgba
+lang: zh-CN
+---
+
+# hexToRgba
+
+将`HEX`颜色值转换为`RGB`或`RGBA`颜色值
+
+## 安装
+
+::: code-group
+
+```bash [pnpm]
+pnpm add @vtrbo/utils-color
+```
+
+```bash [yarn]
+yarn add @vtrbo/utils-color
+```
+
+```bash [npm]
+npm install @vtrbo/utils-color
+```
+
+:::
+
+## 使用
+
+### 3/6位`HEX`转换为`RGB`  
+
+<demo example="color/hexToRgba/hexToRgb.ts"></demo>
+
+### 4/8位`HEX`转换为`RGBA`  
+
+<demo example="color/hexToRgba/hexToRgba.ts"></demo>
+
+## 参数
+
+| 名称  | 描述      | 类型       | 必填  | 默认值 |
+|-----|---------|----------|-----|-----|
+| hex | 欲转换的颜色值 | `string` | `是` | -   |

docs/functions/color/lighten.md

@@ -0,0 +1,43 @@
+---
+title: lighten
+lang: zh-CN
+---
+
+# lighten
+
+将颜色变浅
+
+## 安装
+
+::: code-group
+
+```bash [pnpm]
+pnpm add @vtrbo/utils-color
+```
+
+```bash [yarn]
+yarn add @vtrbo/utils-color
+```
+
+```bash [npm]
+npm install @vtrbo/utils-color
+```
+
+:::
+
+## 使用
+
+### 3/6位`HEX`颜色变浅
+
+<demo example="color/lighten/hexToLighten.ts"></demo>
+
+### `RGB`或`RGBA`颜色变浅
+
+<demo example="color/lighten/rgbaToLighten.ts"></demo>
+
+## 参数
+
+| 名称    | 描述      | 类型       | 必填  | 默认值 |
+|-------|---------|----------|-----|-----|
+| color | 欲变浅的颜色值 | `string` | `是` | -   |
+| level | 变浅级别    | `number` | `否` | 10  |

docs/functions/color/rgbaToHex.md

@@ -0,0 +1,42 @@
+---
+title: rgbaToHex
+lang: zh-CN
+---
+
+# rgbaToHex
+
+将`RGB`或`RGBA`颜色值转换为`HEX`颜色值
+
+## 安装
+
+::: code-group
+
+```bash [pnpm]
+pnpm add @vtrbo/utils-color
+```
+
+```bash [yarn]
+yarn add @vtrbo/utils-color
+```
+
+```bash [npm]
+npm install @vtrbo/utils-color
+```
+
+:::
+
+## 使用
+
+### RGBA 转 HEX
+
+<demo example="color/rgbaToHex/rgbaToHex.ts"></demo>
+
+### RGB 转 HEX
+
+<demo example="color/rgbaToHex/rgbToHex.ts"></demo>
+
+## 参数
+
+| 名称   | 描述      | 类型       | 必填  | 默认值 |
+|------|---------|----------|-----|-----|
+| rgba | 欲转换的颜色值 | `string` | `是` | -   |