From 36855830fed6cc0e56ebb808af22a19e7edc7857 Mon Sep 17 00:00:00 2001
From: Victor Bo <10667379@qq.com>
Date: Thu, 30 Nov 2023 17:15:21 +0800
Subject: [PATCH] feat: added utils color package fns docs
---
docs/.vitepress/guides.ts | 21 ++++++++++
docs/examples/color/darken/hexToDarken.ts | 9 ++++
docs/examples/color/darken/rgbaToDarken.ts | 8 ++++
docs/examples/color/hexToRgba/hexToRgb.ts | 7 ++++
docs/examples/color/hexToRgba/hexToRgba.ts | 7 ++++
docs/examples/color/lighten/hexToLighten.ts | 9 ++++
docs/examples/color/lighten/rgbaToLighten.ts | 8 ++++
docs/examples/color/rgbaToHex/rgbToHex.ts | 5 +++
docs/examples/color/rgbaToHex/rgbaToHex.ts | 5 +++
docs/functions/color/darken.md | 43 ++++++++++++++++++++
docs/functions/color/hexToRgba.md | 42 +++++++++++++++++++
docs/functions/color/lighten.md | 43 ++++++++++++++++++++
docs/functions/color/rgbaToHex.md | 42 +++++++++++++++++++
13 files changed, 249 insertions(+)
create mode 100644 docs/examples/color/darken/hexToDarken.ts
create mode 100644 docs/examples/color/darken/rgbaToDarken.ts
create mode 100644 docs/examples/color/hexToRgba/hexToRgb.ts
create mode 100644 docs/examples/color/hexToRgba/hexToRgba.ts
create mode 100644 docs/examples/color/lighten/hexToLighten.ts
create mode 100644 docs/examples/color/lighten/rgbaToLighten.ts
create mode 100644 docs/examples/color/rgbaToHex/rgbToHex.ts
create mode 100644 docs/examples/color/rgbaToHex/rgbaToHex.ts
create mode 100644 docs/functions/color/darken.md
create mode 100644 docs/functions/color/hexToRgba.md
create mode 100644 docs/functions/color/lighten.md
create mode 100644 docs/functions/color/rgbaToHex.md
diff --git a/docs/.vitepress/guides.ts b/docs/.vitepress/guides.ts
index b246314..cd5350b 100644
--- a/docs/.vitepress/guides.ts
+++ b/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: [
diff --git a/docs/examples/color/darken/hexToDarken.ts b/docs/examples/color/darken/hexToDarken.ts
new file mode 100644
index 0000000..9db2cdf
--- /dev/null
+++ b/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))
diff --git a/docs/examples/color/darken/rgbaToDarken.ts b/docs/examples/color/darken/rgbaToDarken.ts
new file mode 100644
index 0000000..314cc05
--- /dev/null
+++ b/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))
diff --git a/docs/examples/color/hexToRgba/hexToRgb.ts b/docs/examples/color/hexToRgba/hexToRgb.ts
new file mode 100644
index 0000000..cc3ab45
--- /dev/null
+++ b/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))
diff --git a/docs/examples/color/hexToRgba/hexToRgba.ts b/docs/examples/color/hexToRgba/hexToRgba.ts
new file mode 100644
index 0000000..a43c58a
--- /dev/null
+++ b/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))
diff --git a/docs/examples/color/lighten/hexToLighten.ts b/docs/examples/color/lighten/hexToLighten.ts
new file mode 100644
index 0000000..ad36e6f
--- /dev/null
+++ b/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))
diff --git a/docs/examples/color/lighten/rgbaToLighten.ts b/docs/examples/color/lighten/rgbaToLighten.ts
new file mode 100644
index 0000000..f161c26
--- /dev/null
+++ b/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))
diff --git a/docs/examples/color/rgbaToHex/rgbToHex.ts b/docs/examples/color/rgbaToHex/rgbToHex.ts
new file mode 100644
index 0000000..871140d
--- /dev/null
+++ b/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))
diff --git a/docs/examples/color/rgbaToHex/rgbaToHex.ts b/docs/examples/color/rgbaToHex/rgbaToHex.ts
new file mode 100644
index 0000000..9036a5b
--- /dev/null
+++ b/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))
diff --git a/docs/functions/color/darken.md b/docs/functions/color/darken.md
new file mode 100644
index 0000000..02ad03d
--- /dev/null
+++ b/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`颜色加深
+
+
+
+### `RGB`或`RGBA`颜色加深
+
+
+
+## 参数
+
+| 名称 | 描述 | 类型 | 必填 | 默认值 |
+|-------|---------|----------|-----|-----|
+| color | 欲加深的颜色值 | `string` | `是` | - |
+| level | 加深级别 | `number` | `否` | 10 |
diff --git a/docs/functions/color/hexToRgba.md b/docs/functions/color/hexToRgba.md
new file mode 100644
index 0000000..2f40aff
--- /dev/null
+++ b/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`
+
+
+
+### 4/8位`HEX`转换为`RGBA`
+
+
+
+## 参数
+
+| 名称 | 描述 | 类型 | 必填 | 默认值 |
+|-----|---------|----------|-----|-----|
+| hex | 欲转换的颜色值 | `string` | `是` | - |
diff --git a/docs/functions/color/lighten.md b/docs/functions/color/lighten.md
new file mode 100644
index 0000000..a505cfe
--- /dev/null
+++ b/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`颜色变浅
+
+
+
+### `RGB`或`RGBA`颜色变浅
+
+
+
+## 参数
+
+| 名称 | 描述 | 类型 | 必填 | 默认值 |
+|-------|---------|----------|-----|-----|
+| color | 欲变浅的颜色值 | `string` | `是` | - |
+| level | 变浅级别 | `number` | `否` | 10 |
diff --git a/docs/functions/color/rgbaToHex.md b/docs/functions/color/rgbaToHex.md
new file mode 100644
index 0000000..4078c8f
--- /dev/null
+++ b/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
+
+
+
+### RGB 转 HEX
+
+
+
+## 参数
+
+| 名称 | 描述 | 类型 | 必填 | 默认值 |
+|------|---------|----------|-----|-----|
+| rgba | 欲转换的颜色值 | `string` | `是` | - |