@xr-ui/colors 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 XR Design
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,194 @@
1
+ # xr-design-colors
2
+
3
+ XR Design 颜色库
4
+
5
+ ## Demo
6
+
7
+ ![Demo](./docs/assets/demo.png)
8
+
9
+ ## Install
10
+
11
+ ```bash
12
+ # NPM
13
+ npm install @xr-ui/colors
14
+
15
+ # YARN
16
+ yarn add @xr-ui/colors
17
+
18
+ # PNPM
19
+ pnpm add @xr-ui/colors
20
+ ```
21
+
22
+ ## Usage
23
+
24
+ ```ts
25
+ import {
26
+ red,
27
+ orange,
28
+ yellow,
29
+ green,
30
+ cyan,
31
+ blue,
32
+ purple,
33
+ gray
34
+ } from '@xr-ui/colors'
35
+
36
+ console.log(red.base) // #E53E3E
37
+ console.log(red.colors) // [#F6D5D5, #ECA7A7, #EC6F6F, #E53E3E, #C91B1B, #911414, #600606]
38
+ ```
39
+
40
+ ```less
41
+ @import '@xr-ui/colors/css/variables.css';
42
+
43
+ /* 基色系 */
44
+ @color-red-base: var(--xrd-color-red-base)
45
+ @color-orange-base: var(--xrd-color-orange-base);
46
+ @color-yellow-base: var(--xrd-color-yellow-base);
47
+ @color-green-base: var(--xrd-color-green-base);
48
+ @color-cyan-base: var(--xrd-color-cyan-base);
49
+ @color-blue-base: var(--xrd-color-blue-base);
50
+ @color-purple-base: var(--xrd-color-purple-base);
51
+ @color-gray-base: var(--xrd-color-gray-base);
52
+
53
+ /* 红色系 */
54
+ @color-red-0: var(--xrd-color-red-0)
55
+ @color-red-1: var(--xrd-color-red-1)
56
+ @color-red-2: var(--xrd-color-red-2)
57
+ @color-red-3: var(--xrd-color-red-3)
58
+ @color-red-4: var(--xrd-color-red-4)
59
+ @color-red-5: var(--xrd-color-red-5)
60
+ @color-red-6: var(--xrd-color-red-6)
61
+
62
+ /* 橙色系 */
63
+ @color-orange-0: var(--xrd-color-orange-0)
64
+ @color-orange-1: var(--xrd-color-orange-1)
65
+ @color-orange-2: var(--xrd-color-orange-2)
66
+ @color-orange-3: var(--xrd-color-orange-3)
67
+ @color-orange-4: var(--xrd-color-orange-4)
68
+ @color-orange-5: var(--xrd-color-orange-5)
69
+ @color-orange-6: var(--xrd-color-orange-6)
70
+
71
+ /* 黄色系 */
72
+ @color-yellow-0: var(--xrd-color-yellow-0)
73
+ @color-yellow-1: var(--xrd-color-yellow-1)
74
+ @color-yellow-2: var(--xrd-color-yellow-2)
75
+ @color-yellow-3: var(--xrd-color-yellow-3)
76
+ @color-yellow-4: var(--xrd-color-yellow-4)
77
+ @color-yellow-5: var(--xrd-color-yellow-5)
78
+ @color-yellow-6: var(--xrd-color-yellow-6)
79
+
80
+ /* 绿色系 */
81
+ @color-green-0: var(--xrd-color-green-0)
82
+ @color-green-1: var(--xrd-color-green-1)
83
+ @color-green-2: var(--xrd-color-green-2)
84
+ @color-green-3: var(--xrd-color-green-3)
85
+ @color-green-4: var(--xrd-color-green-4)
86
+ @color-green-5: var(--xrd-color-green-5)
87
+ @color-green-6: var(--xrd-color-green-6)
88
+
89
+ /* 青色系 */
90
+ @color-cyan-0: var(--xrd-color-cyan-0)
91
+ @color-cyan-1: var(--xrd-color-cyan-1)
92
+ @color-cyan-2: var(--xrd-color-cyan-2)
93
+ @color-cyan-3: var(--xrd-color-cyan-3)
94
+ @color-cyan-4: var(--xrd-color-cyan-4)
95
+ @color-cyan-5: var(--xrd-color-cyan-5)
96
+ @color-cyan-6: var(--xrd-color-cyan-6)
97
+
98
+ /* 蓝色系 */
99
+ @color-blue-0: var(--xrd-color-blue-0)
100
+ @color-blue-1: var(--xrd-color-blue-1)
101
+ @color-blue-2: var(--xrd-color-blue-2)
102
+ @color-blue-3: var(--xrd-color-blue-3)
103
+ @color-blue-4: var(--xrd-color-blue-4)
104
+ @color-blue-5: var(--xrd-color-blue-5)
105
+ @color-blue-6: var(--xrd-color-blue-6)
106
+
107
+ /* 紫色系 */
108
+ @color-purple-0: var(--xrd-color-purple-0)
109
+ @color-purple-1: var(--xrd-color-purple-1)
110
+ @color-purple-2: var(--xrd-color-purple-2)
111
+ @color-purple-3: var(--xrd-color-purple-3)
112
+ @color-purple-4: var(--xrd-color-purple-4)
113
+ @color-purple-5: var(--xrd-color-purple-5)
114
+ @color-purple-6: var(--xrd-color-purple-6)
115
+
116
+ /* 中性灰 */
117
+ @color-gray-0: var(--xrd-color-gray-0)
118
+ @color-gray-1: var(--xrd-color-gray-1)
119
+ @color-gray-2: var(--xrd-color-gray-2)
120
+ @color-gray-3: var(--xrd-color-gray-3)
121
+ @color-gray-4: var(--xrd-color-gray-4)
122
+ @color-gray-5: var(--xrd-color-gray-5)
123
+ @color-gray-6: var(--xrd-color-gray-6)
124
+ ```
125
+
126
+ ## Scripts
127
+
128
+ ```bash
129
+ # 项目启动
130
+ pnpm serve
131
+
132
+ # 项目构建(CommonJS)
133
+ pnpm build:cjs
134
+
135
+ # 项目构建(ES Module)
136
+ pnpm build:esm
137
+
138
+ # 项目构建(CSS)
139
+ pnpm build:css
140
+
141
+ # 项目构建(All)
142
+ pnpm build:all
143
+
144
+ # 代码检测
145
+ pnpm lint
146
+
147
+ # 代码修复
148
+ pnpm lint:fix
149
+
150
+ # 单元测试
151
+ pnpm test
152
+ ```
153
+
154
+ ## Publish
155
+
156
+ ```bash
157
+ # 第 1 步:在 develop 分支推送本地代码至远端,提 PR 合并 main 分支
158
+ git add .
159
+ git commit -m 'feat: 新增 xxx 功能'
160
+ git push
161
+
162
+ # 第 2 步:切换到 main 分支,拉取最新代码
163
+ git checkout main
164
+ git pull
165
+
166
+ # 第 3 步:在 main 分支新建 release 分支,升级包版本号(pnpm 自动生成 tag)
167
+ git checkout -b release/vx.x.x
168
+ pnpm version patch # 1.0.0 -> 1.0.1
169
+ pnpm version minor # 1.0.0 → 1.1.0
170
+ pnpm version major # 1.0.0 → 2.0.0
171
+
172
+ # 第 4 步:将 release 分支推送至远端,提 PR 合并 main 分支
173
+ git push origin release/vx.x.x
174
+
175
+ # 第 5 步:切换回 main 分支,拉取最新代码,推送 tags 至远端
176
+ git checkout main
177
+ git pull
178
+ git push origin --tags
179
+
180
+ # 第 6 步:发布包
181
+ pnpm publish
182
+ ```
183
+
184
+ ## Others
185
+
186
+ | 颜色阶号 | 建议用途 |
187
+ | :---: | :---: |
188
+ | 0 | 浅色背景、页面背景 |
189
+ | 1 | 轻 hover、卡片底色 |
190
+ | 2 | 次要组件、分割线、占位 |
191
+ | 3 | 主题色 |
192
+ | 4 | 按钮 hover、次要文字 |
193
+ | 5 | 强调文字、正文文字 |
194
+ | 6 | 深色标签、标题 |
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={RED:`#E53E3E`,ORANGE:`#ED8936`,YELLOW:`#D69E2E`,GREEN:`#38A169`,CYAN:`#319795`,BLUE:`#3182CE`,PURPLE:`#805AD5`,GRAY:`#6E6E6E`};function t(e){let t=[0,0,0];return t[0]=parseInt(e.slice(1,3),16),t[1]=parseInt(e.slice(3,5),16),t[2]=parseInt(e.slice(5,7),16),t}function n(e){let t=`#`;return t+=e.map(e=>e.toString(16).toUpperCase().padStart(2,`0`)).join(``),t}function r(e){let n=[0,0,0],[r,i,a]=t(e),o=r/255,s=i/255,c=a/255,l=Math.max(o,s,c),u=Math.min(o,s,c),d,f,p=(l+u)/2;if(l===u)d=0,f=0;else{let e=l-u;switch(f=p>.5?e/(2-l-u):e/(l+u),l){case o:d=((s-c)/e+(s<c?6:0))/6;break;case s:d=((c-o)/e+2)/6;break;case c:d=((o-s)/e+4)/6;break;default:d=0}}return n[0]=Number((d*360).toFixed(2)),n[1]=Number((f*100).toFixed(2)),n[2]=Number((p*100).toFixed(2)),n}function i(e){let[t,r,i]=e,a=t/360,o=r/100,s=i/100,c=o*Math.min(s,1-s),l=e=>{let t=(e+a*12)%12;return s-c*Math.max(Math.min(t-3,9-t,1),-1)};return n([Number((l(0)*255).toFixed(0)),Number((l(8)*255).toFixed(0)),Number((l(4)*255).toFixed(0))])}function a(e,t){let n=[],[a,o,s]=r(e),c=Number(t||0)<7?7:Number(t),l=[],u=c-1,d=Math.ceil(u/2),f=Math.floor(u/2),p=(e,t)=>{let n;switch(!0){case e<2:n=0;break;case t>70:n=e*.85;break;case t<30:n=e*1.15;break;default:n=e}return n};if(d>0){let e=(90-s)/d;for(let t=0;t<d;t+=1){let r=Number((90-e*t).toFixed(2)),s=[a,Number(p(o,r).toFixed(2)),r],c=i(s);l.push({hsl:s,hex:c}),n.push(c)}}let m=o<2?0:o;if(l.push({hsl:[a,m,s],hex:e}),n.push(e),f>0){let e=(s-20)/f;for(let t=1;t<=f;t+=1){let r=Number((s-e*t).toFixed(2)),c=[a,Number(p(o,r).toFixed(2)),r],u=i(c);l.push({hsl:c,hex:u}),n.push(u)}}return l.forEach((e,t)=>{e.level=t}),n}function o(t){let n=e[t.toUpperCase()];return{base:n,colors:a(n)}}var s=o(`red`),c=o(`orange`),l=o(`yellow`),u=o(`green`),d=o(`cyan`),f=o(`blue`),p=o(`purple`),m=o(`gray`);exports.blue=f,exports.cyan=d,exports.gray=m,exports.green=u,exports.orange=c,exports.purple=p,exports.red=s,exports.yellow=l;
@@ -0,0 +1 @@
1
+ :root{--xrd-color-red-base:#e53e3e;--xrd-color-orange-base:#ed8936;--xrd-color-yellow-base:#d69e2e;--xrd-color-green-base:#38a169;--xrd-color-cyan-base:#319795;--xrd-color-blue-base:#3182ce;--xrd-color-purple-base:#805ad5;--xrd-color-gray-base:#6e6e6e;--xrd-color-red-0:#f6d5d5;--xrd-color-red-1:#eca7a7;--xrd-color-red-2:#ec6f6f;--xrd-color-red-3:#e53e3e;--xrd-color-red-4:#c91b1b;--xrd-color-red-5:#911414;--xrd-color-red-6:#600606;--xrd-color-orange-0:#f8e4d3;--xrd-color-orange-1:#f0c6a4;--xrd-color-orange-2:#f2a769;--xrd-color-orange-3:#ed8936;--xrd-color-orange-4:#d16913;--xrd-color-orange-5:#974c0e;--xrd-color-orange-6:#642e02;--xrd-color-yellow-0:#f4ead7;--xrd-color-yellow-1:#e6cfa3;--xrd-color-yellow-2:#e1b865;--xrd-color-yellow-3:#d69e2e;--xrd-color-yellow-4:#ad7f22;--xrd-color-yellow-5:#815f19;--xrd-color-yellow-6:#5a400c;--xrd-color-green-0:#dbf0e5;--xrd-color-green-1:#a2d8bb;--xrd-color-green-2:#61c891;--xrd-color-green-3:#38a169;--xrd-color-green-4:#2e8556;--xrd-color-green-5:#1f6d44;--xrd-color-green-6:#174f31;--xrd-color-cyan-0:#daf1f0;--xrd-color-cyan-1:#9dd8d7;--xrd-color-cyan-2:#56c8c6;--xrd-color-cyan-3:#319795;--xrd-color-cyan-4:#297e7d;--xrd-color-cyan-5:#1c6b69;--xrd-color-cyan-6:#155150;--xrd-color-blue-0:#d8e6f3;--xrd-color-blue-1:#a4c5e3;--xrd-color-blue-2:#68a3db;--xrd-color-blue-3:#3182ce;--xrd-color-blue-4:#2768a5;--xrd-color-blue-5:#1d4e7c;--xrd-color-blue-6:#0f3457;--xrd-color-purple-0:#e1d9f2;--xrd-color-purple-1:#c2b1e6;--xrd-color-purple-2:#a083e0;--xrd-color-purple-3:#805ad5;--xrd-color-purple-4:#5b30bc;--xrd-color-purple-5:#412287;--xrd-color-purple-6:#261056;--xrd-color-gray-0:#e6e6e6;--xrd-color-gray-1:#bebebe;--xrd-color-gray-2:#969696;--xrd-color-gray-3:#6e6e6e;--xrd-color-gray-4:#5a5a5a;--xrd-color-gray-5:#474747;--xrd-color-gray-6:#333}
@@ -0,0 +1,41 @@
1
+ export declare const blue: {
2
+ base: string;
3
+ colors: string[];
4
+ };
5
+
6
+ export declare const cyan: {
7
+ base: string;
8
+ colors: string[];
9
+ };
10
+
11
+ export declare const gray: {
12
+ base: string;
13
+ colors: string[];
14
+ };
15
+
16
+ export declare const green: {
17
+ base: string;
18
+ colors: string[];
19
+ };
20
+
21
+ export declare const orange: {
22
+ base: string;
23
+ colors: string[];
24
+ };
25
+
26
+ export declare const purple: {
27
+ base: string;
28
+ colors: string[];
29
+ };
30
+
31
+ export declare const red: {
32
+ base: string;
33
+ colors: string[];
34
+ };
35
+
36
+ export declare const yellow: {
37
+ base: string;
38
+ colors: string[];
39
+ };
40
+
41
+ export { }
@@ -0,0 +1,131 @@
1
+ //#region src/constants/colors.ts
2
+ var e = {
3
+ RED: "#E53E3E",
4
+ ORANGE: "#ED8936",
5
+ YELLOW: "#D69E2E",
6
+ GREEN: "#38A169",
7
+ CYAN: "#319795",
8
+ BLUE: "#3182CE",
9
+ PURPLE: "#805AD5",
10
+ GRAY: "#6E6E6E"
11
+ };
12
+ //#endregion
13
+ //#region src/utils/convert.ts
14
+ function t(e) {
15
+ let t = [
16
+ 0,
17
+ 0,
18
+ 0
19
+ ];
20
+ return t[0] = parseInt(e.slice(1, 3), 16), t[1] = parseInt(e.slice(3, 5), 16), t[2] = parseInt(e.slice(5, 7), 16), t;
21
+ }
22
+ function n(e) {
23
+ let t = "#";
24
+ return t += e.map((e) => e.toString(16).toUpperCase().padStart(2, "0")).join(""), t;
25
+ }
26
+ function r(e) {
27
+ let n = [
28
+ 0,
29
+ 0,
30
+ 0
31
+ ], [r, i, a] = t(e), o = r / 255, s = i / 255, c = a / 255, l = Math.max(o, s, c), u = Math.min(o, s, c), d, f, p = (l + u) / 2;
32
+ if (l === u) d = 0, f = 0;
33
+ else {
34
+ let e = l - u;
35
+ switch (f = p > .5 ? e / (2 - l - u) : e / (l + u), l) {
36
+ case o:
37
+ d = ((s - c) / e + (s < c ? 6 : 0)) / 6;
38
+ break;
39
+ case s:
40
+ d = ((c - o) / e + 2) / 6;
41
+ break;
42
+ case c:
43
+ d = ((o - s) / e + 4) / 6;
44
+ break;
45
+ default: d = 0;
46
+ }
47
+ }
48
+ return n[0] = Number((d * 360).toFixed(2)), n[1] = Number((f * 100).toFixed(2)), n[2] = Number((p * 100).toFixed(2)), n;
49
+ }
50
+ function i(e) {
51
+ let [t, r, i] = e, a = t / 360, o = r / 100, s = i / 100, c = o * Math.min(s, 1 - s), l = (e) => {
52
+ let t = (e + a * 12) % 12;
53
+ return s - c * Math.max(Math.min(t - 3, 9 - t, 1), -1);
54
+ };
55
+ return n([
56
+ Number((l(0) * 255).toFixed(0)),
57
+ Number((l(8) * 255).toFixed(0)),
58
+ Number((l(4) * 255).toFixed(0))
59
+ ]);
60
+ }
61
+ //#endregion
62
+ //#region src/utils/generate.ts
63
+ function a(e, t) {
64
+ let n = [], [a, o, s] = r(e), c = Number(t || 0) < 7 ? 7 : Number(t), l = [], u = c - 1, d = Math.ceil(u / 2), f = Math.floor(u / 2), p = (e, t) => {
65
+ let n;
66
+ switch (!0) {
67
+ case e < 2:
68
+ n = 0;
69
+ break;
70
+ case t > 70:
71
+ n = e * .85;
72
+ break;
73
+ case t < 30:
74
+ n = e * 1.15;
75
+ break;
76
+ default: n = e;
77
+ }
78
+ return n;
79
+ };
80
+ if (d > 0) {
81
+ let e = (90 - s) / d;
82
+ for (let t = 0; t < d; t += 1) {
83
+ let r = Number((90 - e * t).toFixed(2)), s = [
84
+ a,
85
+ Number(p(o, r).toFixed(2)),
86
+ r
87
+ ], c = i(s);
88
+ l.push({
89
+ hsl: s,
90
+ hex: c
91
+ }), n.push(c);
92
+ }
93
+ }
94
+ let m = o < 2 ? 0 : o;
95
+ if (l.push({
96
+ hsl: [
97
+ a,
98
+ m,
99
+ s
100
+ ],
101
+ hex: e
102
+ }), n.push(e), f > 0) {
103
+ let e = (s - 20) / f;
104
+ for (let t = 1; t <= f; t += 1) {
105
+ let r = Number((s - e * t).toFixed(2)), c = [
106
+ a,
107
+ Number(p(o, r).toFixed(2)),
108
+ r
109
+ ], u = i(c);
110
+ l.push({
111
+ hsl: c,
112
+ hex: u
113
+ }), n.push(u);
114
+ }
115
+ }
116
+ return l.forEach((e, t) => {
117
+ e.level = t;
118
+ }), n;
119
+ }
120
+ //#endregion
121
+ //#region src/main.ts
122
+ function o(t) {
123
+ let n = e[t.toUpperCase()];
124
+ return {
125
+ base: n,
126
+ colors: a(n)
127
+ };
128
+ }
129
+ var s = o("red"), c = o("orange"), l = o("yellow"), u = o("green"), d = o("cyan"), f = o("blue"), p = o("purple"), m = o("gray");
130
+ //#endregion
131
+ export { f as blue, d as cyan, m as gray, u as green, c as orange, p as purple, s as red, l as yellow };
package/package.json ADDED
@@ -0,0 +1,66 @@
1
+ {
2
+ "name": "@xr-ui/colors",
3
+ "version": "1.0.3",
4
+ "description": "XR Design 颜色库",
5
+ "keywords": [
6
+ "frontend",
7
+ "design",
8
+ "ui",
9
+ "xr-design",
10
+ "xrd",
11
+ "xr-ui",
12
+ "colors"
13
+ ],
14
+ "license": "MIT",
15
+ "homepage": "https://github.com/xr-design/xr-design-colors",
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "https://github.com/xr-design/xr-design-colors.git"
19
+ },
20
+ "bugs": {
21
+ "url": "https://github.com/xr-design/xr-design-colors/issues"
22
+ },
23
+ "main": "dist/cjs/main.js",
24
+ "types": "dist/esm/main.d.ts",
25
+ "module": "dist/esm/main.js",
26
+ "files": [
27
+ "dist"
28
+ ],
29
+ "publishConfig": {
30
+ "access": "public",
31
+ "registry": "https://registry.npmjs.org"
32
+ },
33
+ "engines": {
34
+ "node": ">=24.15.0"
35
+ },
36
+ "devDependencies": {
37
+ "@commitlint/cli": "^21.0.2",
38
+ "@commitlint/config-conventional": "^21.0.2",
39
+ "@eslint/js": "^10.0.1",
40
+ "@microsoft/api-extractor": "^7.58.9",
41
+ "eslint": "^10.5.0",
42
+ "eslint-config-prettier": "^10.1.8",
43
+ "eslint-plugin-prettier": "^5.5.6",
44
+ "globals": "^17.6.0",
45
+ "html2canvas": "^1.4.1",
46
+ "husky": "^9.1.7",
47
+ "less": "^4.6.6",
48
+ "lint-staged": "^17.0.7",
49
+ "prettier": "^3.8.4",
50
+ "typescript": "^6.0.3",
51
+ "typescript-eslint": "^8.61.1",
52
+ "vite": "^8.0.16",
53
+ "vite-plugin-dts": "^5.0.2",
54
+ "vitest": "^4.1.9"
55
+ },
56
+ "scripts": {
57
+ "serve": "vite serve",
58
+ "build:cjs": "vite build --mode cjs",
59
+ "build:esm": "vite build --mode esm",
60
+ "build:css": "vite build --mode css",
61
+ "build:all": "pnpm build:cjs && pnpm build:esm && pnpm build:css",
62
+ "lint": "eslint src",
63
+ "lint:fix": "eslint src --fix",
64
+ "test": "vitest run"
65
+ }
66
+ }