Merge pull request #3 from waterbeside/dev

waterbeside · web-flow · commit 5f07a5a5750d · 2023-02-03T17:26:53.000+08:00
Dev
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,13 @@
+# [1.1.0](https://github.com/waterbeside/colorsea/compare/v1.0.1...v1.1.0) (2023-02-03)
+
+### Features
+
+* Brightness method  and visibility method , Check the visibility of one color over another. ([12bca3f](https://github.com/waterbeside/colorsea/commit/12bca3f37e60771c531929ceab47afcbe980887e))
+
+
+## [1.0.1](https://github.com/waterbeside/colorsea/compare/v0.3.3...v1.0.1) (2023-02-03)
+
+### Features
+
+* Random color ([96b8892](https://github.com/waterbeside/colorsea/commit/96b88927dfbfa89e154fbc9301704f6b99fceeaa))
+
diff --git a/README.md b/README.md
@@ -1,11 +1,12 @@
-# <span style="color: #1BA784">CO</span><span style="color:#1ba2a7">L</span><span style="color:#158BB8">OR</span><span style="color: #6f4faf">S</span><span style="color: #A35C8F">E</span><span style="color: #af4f4f">A</span>
+# COLORSEA
 
 [For detailed documents, please click here](https://waterbeside.github.io/colorsea/)
 
-![](https://img.shields.io/bundlephobia/minzip/colorsea)
-![](https://img.shields.io/github/languages/top/waterbeside/colorsea)
-![](https://img.shields.io/npm/l/colorsea)
-![](https://img.shields.io/github/last-commit/waterbeside/colorsea)
+![minzipped size](https://img.shields.io/bundlephobia/minzip/colorsea)
+![typescript](https://img.shields.io/github/languages/top/waterbeside/colorsea)
+![license](https://img.shields.io/npm/l/colorsea)
+![last commit](https://img.shields.io/github/last-commit/waterbeside/colorsea)
+![build](https://img.shields.io/github/actions/workflow/status/waterbeside/colorsea/build.yml)
 
 [English](./README.md) | [简体中文](./README.zh-CN.md)
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -1,12 +1,13 @@
 
-# <span style="color: #1BA784">CO</span><span style="color:#1ba2a7">L</span><span style="color:#158BB8">OR</span><span style="color: #6f4faf">S</span><span style="color: #A35C8F">E</span><span style="color: #af4f4f">A</span>
+# COLORSEA
 
 [详细文档请点这里](https://waterbeside.github.io/colorsea/zh/)
 
-![](https://img.shields.io/bundlephobia/minzip/colorsea)
-![](https://img.shields.io/github/languages/top/waterbeside/colorsea)
-![](https://img.shields.io/npm/l/colorsea)
-![](https://img.shields.io/github/last-commit/waterbeside/colorsea)
+![minzipped size](https://img.shields.io/bundlephobia/minzip/colorsea)
+![typescript](https://img.shields.io/github/languages/top/waterbeside/colorsea)
+![license](https://img.shields.io/npm/l/colorsea)
+![last commit](https://img.shields.io/github/last-commit/waterbeside/colorsea)
+![build](https://img.shields.io/github/actions/workflow/status/waterbeside/colorsea/build.yml)
 
 [English](./README.md) | **简体中文**
 
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -26,12 +26,12 @@ export default defineUserConfig({
     '/': {
       lang: 'en-US', // 将会被设置为 <html> 的 lang 属性
       title: 'COLORSEA',
-      description: 'A simple color space conversion and color manipulation library'
+      description: 'Colorsea.js is a simple color space conversion and color manipulation library'
     },
     '/zh/': {
       lang: 'zh-CN',
       title: 'COLORSEA',
-      description: '简单轻量的颜色空间转换和颜色操作查询库'
+      description: 'colorsea.js - 简单轻量的颜色空间转换和颜色操作查询库'
     }
   },
   theme: defaultTheme({
diff --git a/docs/README.md b/docs/README.md
@@ -1,6 +1,6 @@
 ---
 home: true
-title: Home
+title: colorsea.js
 actions:
   - text: Get Started
     link: /pages/QuickStart
diff --git a/docs/pages/ColorOperation.md b/docs/pages/ColorOperation.md
@@ -1,5 +1,5 @@
 
-# Color operation
+# Color manipulation
 
 ## Example
 
@@ -32,7 +32,7 @@ Increase lightness
 ```typescript
 /**
   * Increase lightness
-  * @param amount Brightness increase percentage, the default is 5, which means 5%
+  * @param amount Lightness increase percentage, the default is 5, which means 5%
   * @param method If you fill in 'relative', it means that the parameter amount is a relative value
   * @returns Color
   */
@@ -173,7 +173,7 @@ color mixing
 
 ```typescript
 /**
-  * mix color
+  * color mixing
   * @param color Another color, which can be a Color instance, a hexadecimal color string, or an [r, g, b] color tuple
   * @param weight The mixing ratio of another color, the default value is 50 or 50%
   * @returns Color
diff --git a/docs/pages/Converting.md b/docs/pages/Converting.md
@@ -1,4 +1,4 @@
-# Color space converting
+# Color converting
 
 After the **color instance** is created, the corresponding color space value can be obtained by the following methods of the color instance, so that the color space conversion can be easily carried out.
 
diff --git a/docs/pages/Value.md b/docs/pages/Value.md
@@ -1,5 +1,5 @@
 
-# Color value and change value
+# Get and set value
 
 ## color.red()
 
@@ -190,6 +190,53 @@ Example:
 colorsea('#22994a').luma() // 0.23616959154733871
 ```
 
+## color.brightness()
+
+get Brightness
+
+range: [0, 100]
+
+```typescript
+color.brightness() => number
+```
+
+Example:
+
+```typescript
+colorsea('#FFFFFF').brightness() // 100
+```
+
+## color.visibility()
+
+Check that one color is easily visible on another color,
+If false is returned, visibility is poor.
+
+> refer to: https://www.w3.org/TR/AERT/#color-contrast
+
+```typescript
+/**
+   * @param anotherColor color for contrast
+   * @param setting Setting value judged as poor visibility,{b, c}. 
+   * * b: brightness difference, the default value is 125, the range of brightness value is [0,255]
+   * * c: color difference, the default value is 500
+   */
+  color.visibility(
+    anotherColor: Color | string | CommonColoraTuple | CommonColorTuple,
+    setting?: { b: number; c: number }
+  ) => boolean
+```
+
+Example:
+
+```typescript
+colorsea('red').visibility(colorsea('#ee6666')) // false
+colorsea('#ffff00').visibility('#000000') // true
+```
+<ColorBox box-color="red" text-color="#ee6666">#ff0000, #ee6666, return false</ColorBox>, 
+<ColorBox box-color="#ffff00" text-color="#000000">#ffff00, #000000, return true</ColorBox>
+
+------
+
 :::tip
 For methods such as `color.red()`,`color.green()`,`color.blue()`,`color.hue()`,`color.saturation()`,`color.lightness()`, `color.alpha()`,`color.luma()`, if the calculation result is a decimal, all decimal places will be returned, and the result will not be rounded or how many decimal places will be truncated.
 :::
diff --git a/docs/zh/Converting.md b/docs/zh/Converting.md
@@ -1,5 +1,4 @@
-# 转换到其它颜色空间
-
+# 颜色空间转换
 
 创建color实例后，可以通过color实例的以下这些方法取得对应的颜色空间数值，从而轻易地进行颜色空间转换。
 
diff --git a/docs/zh/README.md b/docs/zh/README.md
@@ -1,6 +1,6 @@
 ---
 home: true
-title: 首页
+title: colorsea.js
 actions:
   - text: 快速上手
     link: /zh/QuickStart
diff --git a/docs/zh/Value.md b/docs/zh/Value.md
@@ -190,6 +190,53 @@ color.luma() => number
 colorsea('#22994a').luma() // 0.23616959154733871
 ```
 
+## color.brightness()
+
+取得明度Brightness
+
+range: [0, 100]
+
+```typescript
+color.brightness() => number
+```
+
+例:
+
+```typescript
+colorsea('#FFFFFF').brightness() // 100
+```
+
+## color.visibility()
+
+检查一个颜色在另一个颜色上是否易于可见,
+如果返回false, 则为可见性比较差。
+
+> refer to: [https://www.w3.org/TR/AERT/#color-contrast](https://www.w3.org/TR/AERT/#color-contrast)
+
+```typescript
+/**
+   * @param anotherColor 另一个用于对比的颜色
+   * @param setting 用于判定可见性好坏的阈值设置,{b, c}. 
+   * * b: brightness差值, 默认值为125, 小于或等于此值说明可见性差。颜色brightness值的范围取[0,255]
+   * * c: rgb差值, 默认值为500，小于或等于此值说明可见性差
+   */
+  color.visibility(
+    anotherColor: Color | string | CommonColoraTuple | CommonColorTuple,
+    setting?: { b: number; c: number }
+  ) => boolean
+```
+
+例:
+
+```typescript
+colorsea('red').visibility(colorsea('#ee6666')) // false
+colorsea('#ffff00').visibility('#000000') // true
+```
+<ColorBox box-color="red" text-color="#ee6666">#ff0000, #ee6666, return false</ColorBox>, 
+<ColorBox box-color="#ffff00" text-color="#000000">#ffff00, #000000, return true</ColorBox>
+
+------
+
 :::tip
 `color.red()`,`color.green()`,`color.blue()`,`color.hue()`,`color.saturation()`,`color.lightness()`, `color.alpha()`,`color.luma()`等方法的取值，如果其计算结果为小数，将会返会所有小数位数，并不会将结果进行取整或截取多少位小数。
 :::
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "colorsea",
-  "version": "1.0.1",
-  "description": "A color tool library written in Typescript, you can use it to convert color spaces, and operate on colors like LESS/SASS ( darken/lighten, saturate/desaturate, spin, mix), and color difference query. 一个使用Typescript编写的颜色工具库，你可以使用此进行颜色空间的转换、颜色操作、以及色差查询, 支持中国色、日本色的查询",
+  "version": "1.1.0",
+  "description": "A color tool library written in Typescript, you can use it to convert color spaces, and operate on colors like LESS/SASS ( darken/lighten, saturate/desaturate, spin, mix), and color difference query. 颜色工具库，支持颜色空间的转换、各种颜色操作、多种色差查询, 支持中国色、日本色的查询",
   "main": "dist/index.js",
   "types": "dist/typings/index.d.ts",
   "scripts": {
@@ -11,9 +11,29 @@
     "lint": "eslint --fix --ext .js,.ts src",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
-    "test": "jest"
+    "test": "jest",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
-  "keywords": ["color", "convert", "diff", "rgb", "deltaE", "hue", "lightness", "saturation", "hsl", "color-diff", "color-space", "color-names", "X11", "CIE", "CMC", "色差", "中国传统色", "nippon colors"],
+  "keywords": [
+    "color",
+    "convert",
+    "diff",
+    "rgb",
+    "deltaE",
+    "hue",
+    "lightness",
+    "saturation",
+    "hsl",
+    "color-diff",
+    "color-space",
+    "color-names",
+    "X11",
+    "CIE",
+    "CMC",
+    "色差",
+    "中国传统色",
+    "nippon colors"
+  ],
   "author": "Natron Kan (waterbeside)",
   "homepage": "https://waterbeside.github.io/colorsea/",
   "repository": {
@@ -37,6 +57,7 @@
     "@vuepress/plugin-back-to-top": "2.0.0-beta.60",
     "@vuepress/plugin-register-components": "2.0.0-beta.60",
     "babel-jest": "^29.3.1",
+    "conventional-changelog-cli": "^2.2.2",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/color.ts b/src/color.ts
diff --git a/src/convertor/rgbHsx.ts b/src/convertor/rgbHsx.ts
diff --git a/src/utils/contrast.ts b/src/utils/contrast.ts
diff --git a/src/utils/getOrSet.ts b/src/utils/getOrSet.ts
diff --git a/src/utils/index.ts b/src/utils/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# Color space converting`
	`1`	`+# Color converting`
`2`	`2`
`3`	`3`	`After the color instance is created, the corresponding color space value can be obtained by the following methods of the color instance, so that the color space conversion can be easily carried out.`
`4`	`4`