@cieloazul310/digital-go-pandacss-utils 0.0.0
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/.turbo/turbo-build.log +25 -0
- package/dist/chunk-OVJB6WNL.mjs +38 -0
- package/dist/colors.d.mts +60 -0
- package/dist/colors.d.ts +60 -0
- package/dist/colors.js +62 -0
- package/dist/colors.mjs +6 -0
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +64 -0
- package/dist/index.mjs +6 -0
- package/eslint.config.mjs +6 -0
- package/package.json +51 -0
- package/src/colors.ts +50 -0
- package/src/index.ts +1 -0
- package/tsconfig.json +4 -0
- package/tsup.config.ts +9 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
|
|
2
|
+
> @cieloazul310/digital-go-pandacss-utils@0.0.0 build
|
|
3
|
+
> tsup
|
|
4
|
+
|
|
5
|
+
[34mCLI[39m Building entry: src/colors.ts, src/index.ts
|
|
6
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
7
|
+
[34mCLI[39m tsup v8.5.0
|
|
8
|
+
[34mCLI[39m Using tsup config: /home/runner/work/digital-go-design-system-with-panda/digital-go-design-system-with-panda/packages/utils/tsup.config.ts
|
|
9
|
+
[34mCLI[39m Target: es2022
|
|
10
|
+
[34mCLI[39m Cleaning output folder
|
|
11
|
+
[34mESM[39m Build start
|
|
12
|
+
[34mCJS[39m Build start
|
|
13
|
+
[32mESM[39m [1mdist/colors.mjs [22m[32m86.00 B[39m
|
|
14
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m86.00 B[39m
|
|
15
|
+
[32mESM[39m [1mdist/chunk-OVJB6WNL.mjs [22m[32m6.85 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 15ms
|
|
17
|
+
[32mCJS[39m [1mdist/colors.js [22m[32m7.85 KB[39m
|
|
18
|
+
[32mCJS[39m [1mdist/index.js [22m[32m7.86 KB[39m
|
|
19
|
+
[32mCJS[39m ⚡️ Build success in 14ms
|
|
20
|
+
[34mDTS[39m Build start
|
|
21
|
+
[32mDTS[39m ⚡️ Build success in 1935ms
|
|
22
|
+
[32mDTS[39m [1mdist/colors.d.mts [22m[32m1.04 KB[39m
|
|
23
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m56.00 B[39m
|
|
24
|
+
[32mDTS[39m [1mdist/colors.d.ts [22m[32m1.04 KB[39m
|
|
25
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m55.00 B[39m
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// src/colors.ts
|
|
2
|
+
function createKeyColor(palette) {
|
|
3
|
+
return {
|
|
4
|
+
primary: {
|
|
5
|
+
value: `{colors.${palette}.900}`,
|
|
6
|
+
description: "\u30A6\u30A7\u30D6\u30B5\u30A4\u30C8\u306E\u30C8\u30FC\u30F3\uFF06\u30DE\u30CA\u30FC\u3092\u78BA\u5B9A\u3059\u308B\u30AB\u30E9\u30FC\u3067\u3059\u3002\u30B5\u30A4\u30C8\u5168\u4F53\u3092\u901A\u3058\u3066\u8996\u899A\u7684\u306B\u30D6\u30E9\u30F3\u30C9\u3092\u4F1D\u3048\u308B\u4E3B\u8981\u306A\u8981\u7D20\uFF08\u305F\u3068\u3048\u3070\u3001\u30ED\u30B4\u30BF\u30A4\u30D7\u3001\u30D8\u30C3\u30C0\u30FC\u3084\u30B0\u30ED\u30FC\u30D0\u30EB\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u306E\u8996\u899A\u8868\u73FE\uFF09\u3084\u3001\u512A\u5148\u3055\u308C\u308B\u52D5\u7DDA\u3084\u72B6\u6CC1\u3092\u793A\u3059UI\uFF08\u305F\u3068\u3048\u3070\u3001CTA\u30DC\u30BF\u30F3\u3001\u30A2\u30AF\u30C6\u30A3\u30D6\u306A\u72B6\u614B\u8868\u793A\u7B49\uFF09\u306B\u4F7F\u7528\u3055\u308C\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u306B\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002"
|
|
7
|
+
},
|
|
8
|
+
secondary: {
|
|
9
|
+
value: `{colors.${palette}.700}`,
|
|
10
|
+
description: "\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u306F\u3001\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u88DC\u5B8C\u3057\u3066\u3001\u3042\u307E\u308A\u76EE\u7ACB\u305F\u306A\u304F\u3066\u3044\u3044\u526F\u6B21\u7684\u306A\u52D5\u7DDA\u3084\u72B6\u6CC1\u3092\u793A\u3059UI\uFF08\u305F\u3068\u3048\u3070\u3001\u9078\u629E\u80A2\u3092\u63D0\u4F9B\u3059\u308B\u30DC\u30BF\u30F3\u3001\u6A5F\u80FD\u3084\u72B6\u614B\u3092\u8868\u793A\u3059\u308B\u30D1\u30FC\u30C4\u7B49\uFF09\u3067\u4F7F\u7528\u3057\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u540C\u3058\u8272\u76F8\u3067\u660E\u5EA6\u304C\u9AD8\u3044\u307E\u305F\u306F\u4F4E\u3044\u3082\u306E\u3092\u9078\u629E\u3057\u307E\u3059\u3002\u3053\u308C\u306B\u3088\u308A\u3001\u30AB\u30E9\u30FC\u306E\u4E00\u8CAB\u6027\u3092\u4FDD\u3061\u306A\u304C\u3089\u8996\u899A\u7684\u306A\u5BFE\u6BD4\u3001\u60C5\u5831\u306E\u968E\u5C64\u3001\u512A\u5148\u306E\u9806\u5217\u7B49\u3092\u53CD\u6620\u3057\u305FUI\u3092\u4F5C\u6210\u3059\u308B\u969B\u306B\u5F79\u7ACB\u3061\u307E\u3059\u3002\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u96A3\u63A5\u3059\u308B\u8868\u793A\u8981\u7D20\u306B\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30823:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002\u306A\u304A\u3001\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u30C6\u30AD\u30B9\u30C8\u306E\u30AB\u30E9\u30FC\u3068\u3057\u3066\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3067\u306A\u3051\u308C\u3070\u306A\u308A\u307E\u305B\u3093\u3002"
|
|
11
|
+
},
|
|
12
|
+
tertiary: {
|
|
13
|
+
value: `{colors.${palette}.1000}`,
|
|
14
|
+
description: "\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u306F\u3001\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u53CD\u5BFE\u306E\u660E\u5EA6\u3067\u8A2D\u5B9A\u3057\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u540C\u8272\u76F8\u3067\u3001\u660E\u5EA6\u9AD8\u3092\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u305F\u5834\u5408\u306F\u660E\u5EA6\u4F4E\u3092\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u306B\u3001\u660E\u5EA6\u4F4E\u3092\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u305F\u5834\u5408\u306F\u660E\u5EA6\u9AD8\u3092\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u307E\u3059\u3002\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u96A3\u63A5\u3059\u308B\u8868\u793A\u8981\u7D20\u306B\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30823:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002\u306A\u304A\u3001\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u30C6\u30AD\u30B9\u30C8\u306E\u30AB\u30E9\u30FC\u3068\u3057\u3066\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3067\u306A\u3051\u308C\u3070\u306A\u308A\u307E\u305B\u3093\u3002"
|
|
15
|
+
},
|
|
16
|
+
bg: {
|
|
17
|
+
value: `{colors.${palette}.50}`,
|
|
18
|
+
description: "\u767D\u307E\u305F\u306F\u9ED2\u4EE5\u5916\u306E\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306F\u3001\u30A6\u30A7\u30D6\u30B5\u30A4\u30C8\u3084\u30A2\u30D7\u30EA\u306E\u3055\u307E\u3056\u307E\u306A\u30BB\u30AF\u30B7\u30E7\u30F3\u3084\u8981\u7D20\u306E\u80CC\u666F\u306B\u7279\u5225\u306B\u9078\u3070\u308C\u308B\u30AB\u30E9\u30FC\u3067\u3059\u3002\u30C6\u30AD\u30B9\u30C8\u3084\u975E\u30C6\u30AD\u30B9\u30C8\u8981\u7D20\u306E\u30AB\u30E9\u30FC\u306F\u3001\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u3092\u8003\u616E\u3057\u3066\u8A2D\u5B9A\u3055\u308C\u3066\u3044\u307E\u3059\u304C\u3001\u901A\u5E38\u3001\u3053\u306E\u6642\u306B\u60F3\u5B9A\u3057\u3066\u3044\u308B\u80CC\u666F\u8272\u306F\u767D\u307E\u305F\u306F\u9ED2\u3067\u3059\u3002\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306E\u4E0A\u306B\u30C6\u30AD\u30B9\u30C8\u3084\u975E\u30C6\u30AD\u30B9\u30C8\u8981\u7D20\u304C\u914D\u7F6E\u3055\u308C\u308B\u5834\u5408\u3001\u305D\u306E\u307E\u307E\u3067\u306F\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u8981\u4EF6\u3092\u6E80\u305F\u3055\u306A\u304F\u306A\u308B\u5834\u5408\u304C\u3042\u308A\u307E\u3059\u3002\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306B\u5FDC\u3058\u3066\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u3092\u8ABF\u6574\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
|
|
19
|
+
},
|
|
20
|
+
50: { value: `{colors.${palette}.50}` },
|
|
21
|
+
100: { value: `{colors.${palette}.100}` },
|
|
22
|
+
200: { value: `{colors.${palette}.200}` },
|
|
23
|
+
300: { value: `{colors.${palette}.300}` },
|
|
24
|
+
400: { value: `{colors.${palette}.400}` },
|
|
25
|
+
500: { value: `{colors.${palette}.500}` },
|
|
26
|
+
600: { value: `{colors.${palette}.600}` },
|
|
27
|
+
700: { value: `{colors.${palette}.700}` },
|
|
28
|
+
800: { value: `{colors.${palette}.800}` },
|
|
29
|
+
900: { value: `{colors.${palette}.900}` },
|
|
30
|
+
1e3: { value: `{colors.${palette}.1000}` },
|
|
31
|
+
1100: { value: `{colors.${palette}.1100}` },
|
|
32
|
+
1200: { value: `{colors.${palette}.1200}` }
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export {
|
|
37
|
+
createKeyColor
|
|
38
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
type Palette = "blue" | "light-blue" | "cyan" | "green" | "lime" | "yellow" | "orange" | "red" | "magenta" | "purple" | "solid-gray";
|
|
2
|
+
declare function createKeyColor(palette: Palette): {
|
|
3
|
+
primary: {
|
|
4
|
+
value: string;
|
|
5
|
+
description: string;
|
|
6
|
+
};
|
|
7
|
+
secondary: {
|
|
8
|
+
value: string;
|
|
9
|
+
description: string;
|
|
10
|
+
};
|
|
11
|
+
tertiary: {
|
|
12
|
+
value: string;
|
|
13
|
+
description: string;
|
|
14
|
+
};
|
|
15
|
+
bg: {
|
|
16
|
+
value: string;
|
|
17
|
+
description: string;
|
|
18
|
+
};
|
|
19
|
+
50: {
|
|
20
|
+
value: string;
|
|
21
|
+
};
|
|
22
|
+
100: {
|
|
23
|
+
value: string;
|
|
24
|
+
};
|
|
25
|
+
200: {
|
|
26
|
+
value: string;
|
|
27
|
+
};
|
|
28
|
+
300: {
|
|
29
|
+
value: string;
|
|
30
|
+
};
|
|
31
|
+
400: {
|
|
32
|
+
value: string;
|
|
33
|
+
};
|
|
34
|
+
500: {
|
|
35
|
+
value: string;
|
|
36
|
+
};
|
|
37
|
+
600: {
|
|
38
|
+
value: string;
|
|
39
|
+
};
|
|
40
|
+
700: {
|
|
41
|
+
value: string;
|
|
42
|
+
};
|
|
43
|
+
800: {
|
|
44
|
+
value: string;
|
|
45
|
+
};
|
|
46
|
+
900: {
|
|
47
|
+
value: string;
|
|
48
|
+
};
|
|
49
|
+
1000: {
|
|
50
|
+
value: string;
|
|
51
|
+
};
|
|
52
|
+
1100: {
|
|
53
|
+
value: string;
|
|
54
|
+
};
|
|
55
|
+
1200: {
|
|
56
|
+
value: string;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export { type Palette, createKeyColor };
|
package/dist/colors.d.ts
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
type Palette = "blue" | "light-blue" | "cyan" | "green" | "lime" | "yellow" | "orange" | "red" | "magenta" | "purple" | "solid-gray";
|
|
2
|
+
declare function createKeyColor(palette: Palette): {
|
|
3
|
+
primary: {
|
|
4
|
+
value: string;
|
|
5
|
+
description: string;
|
|
6
|
+
};
|
|
7
|
+
secondary: {
|
|
8
|
+
value: string;
|
|
9
|
+
description: string;
|
|
10
|
+
};
|
|
11
|
+
tertiary: {
|
|
12
|
+
value: string;
|
|
13
|
+
description: string;
|
|
14
|
+
};
|
|
15
|
+
bg: {
|
|
16
|
+
value: string;
|
|
17
|
+
description: string;
|
|
18
|
+
};
|
|
19
|
+
50: {
|
|
20
|
+
value: string;
|
|
21
|
+
};
|
|
22
|
+
100: {
|
|
23
|
+
value: string;
|
|
24
|
+
};
|
|
25
|
+
200: {
|
|
26
|
+
value: string;
|
|
27
|
+
};
|
|
28
|
+
300: {
|
|
29
|
+
value: string;
|
|
30
|
+
};
|
|
31
|
+
400: {
|
|
32
|
+
value: string;
|
|
33
|
+
};
|
|
34
|
+
500: {
|
|
35
|
+
value: string;
|
|
36
|
+
};
|
|
37
|
+
600: {
|
|
38
|
+
value: string;
|
|
39
|
+
};
|
|
40
|
+
700: {
|
|
41
|
+
value: string;
|
|
42
|
+
};
|
|
43
|
+
800: {
|
|
44
|
+
value: string;
|
|
45
|
+
};
|
|
46
|
+
900: {
|
|
47
|
+
value: string;
|
|
48
|
+
};
|
|
49
|
+
1000: {
|
|
50
|
+
value: string;
|
|
51
|
+
};
|
|
52
|
+
1100: {
|
|
53
|
+
value: string;
|
|
54
|
+
};
|
|
55
|
+
1200: {
|
|
56
|
+
value: string;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export { type Palette, createKeyColor };
|
package/dist/colors.js
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/colors.ts
|
|
21
|
+
var colors_exports = {};
|
|
22
|
+
__export(colors_exports, {
|
|
23
|
+
createKeyColor: () => createKeyColor
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(colors_exports);
|
|
26
|
+
function createKeyColor(palette) {
|
|
27
|
+
return {
|
|
28
|
+
primary: {
|
|
29
|
+
value: `{colors.${palette}.900}`,
|
|
30
|
+
description: "\u30A6\u30A7\u30D6\u30B5\u30A4\u30C8\u306E\u30C8\u30FC\u30F3\uFF06\u30DE\u30CA\u30FC\u3092\u78BA\u5B9A\u3059\u308B\u30AB\u30E9\u30FC\u3067\u3059\u3002\u30B5\u30A4\u30C8\u5168\u4F53\u3092\u901A\u3058\u3066\u8996\u899A\u7684\u306B\u30D6\u30E9\u30F3\u30C9\u3092\u4F1D\u3048\u308B\u4E3B\u8981\u306A\u8981\u7D20\uFF08\u305F\u3068\u3048\u3070\u3001\u30ED\u30B4\u30BF\u30A4\u30D7\u3001\u30D8\u30C3\u30C0\u30FC\u3084\u30B0\u30ED\u30FC\u30D0\u30EB\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u306E\u8996\u899A\u8868\u73FE\uFF09\u3084\u3001\u512A\u5148\u3055\u308C\u308B\u52D5\u7DDA\u3084\u72B6\u6CC1\u3092\u793A\u3059UI\uFF08\u305F\u3068\u3048\u3070\u3001CTA\u30DC\u30BF\u30F3\u3001\u30A2\u30AF\u30C6\u30A3\u30D6\u306A\u72B6\u614B\u8868\u793A\u7B49\uFF09\u306B\u4F7F\u7528\u3055\u308C\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u306B\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002"
|
|
31
|
+
},
|
|
32
|
+
secondary: {
|
|
33
|
+
value: `{colors.${palette}.700}`,
|
|
34
|
+
description: "\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u306F\u3001\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u88DC\u5B8C\u3057\u3066\u3001\u3042\u307E\u308A\u76EE\u7ACB\u305F\u306A\u304F\u3066\u3044\u3044\u526F\u6B21\u7684\u306A\u52D5\u7DDA\u3084\u72B6\u6CC1\u3092\u793A\u3059UI\uFF08\u305F\u3068\u3048\u3070\u3001\u9078\u629E\u80A2\u3092\u63D0\u4F9B\u3059\u308B\u30DC\u30BF\u30F3\u3001\u6A5F\u80FD\u3084\u72B6\u614B\u3092\u8868\u793A\u3059\u308B\u30D1\u30FC\u30C4\u7B49\uFF09\u3067\u4F7F\u7528\u3057\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u540C\u3058\u8272\u76F8\u3067\u660E\u5EA6\u304C\u9AD8\u3044\u307E\u305F\u306F\u4F4E\u3044\u3082\u306E\u3092\u9078\u629E\u3057\u307E\u3059\u3002\u3053\u308C\u306B\u3088\u308A\u3001\u30AB\u30E9\u30FC\u306E\u4E00\u8CAB\u6027\u3092\u4FDD\u3061\u306A\u304C\u3089\u8996\u899A\u7684\u306A\u5BFE\u6BD4\u3001\u60C5\u5831\u306E\u968E\u5C64\u3001\u512A\u5148\u306E\u9806\u5217\u7B49\u3092\u53CD\u6620\u3057\u305FUI\u3092\u4F5C\u6210\u3059\u308B\u969B\u306B\u5F79\u7ACB\u3061\u307E\u3059\u3002\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u96A3\u63A5\u3059\u308B\u8868\u793A\u8981\u7D20\u306B\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30823:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002\u306A\u304A\u3001\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u30C6\u30AD\u30B9\u30C8\u306E\u30AB\u30E9\u30FC\u3068\u3057\u3066\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3067\u306A\u3051\u308C\u3070\u306A\u308A\u307E\u305B\u3093\u3002"
|
|
35
|
+
},
|
|
36
|
+
tertiary: {
|
|
37
|
+
value: `{colors.${palette}.1000}`,
|
|
38
|
+
description: "\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u306F\u3001\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u53CD\u5BFE\u306E\u660E\u5EA6\u3067\u8A2D\u5B9A\u3057\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u540C\u8272\u76F8\u3067\u3001\u660E\u5EA6\u9AD8\u3092\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u305F\u5834\u5408\u306F\u660E\u5EA6\u4F4E\u3092\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u306B\u3001\u660E\u5EA6\u4F4E\u3092\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u305F\u5834\u5408\u306F\u660E\u5EA6\u9AD8\u3092\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u307E\u3059\u3002\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u96A3\u63A5\u3059\u308B\u8868\u793A\u8981\u7D20\u306B\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30823:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002\u306A\u304A\u3001\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u30C6\u30AD\u30B9\u30C8\u306E\u30AB\u30E9\u30FC\u3068\u3057\u3066\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3067\u306A\u3051\u308C\u3070\u306A\u308A\u307E\u305B\u3093\u3002"
|
|
39
|
+
},
|
|
40
|
+
bg: {
|
|
41
|
+
value: `{colors.${palette}.50}`,
|
|
42
|
+
description: "\u767D\u307E\u305F\u306F\u9ED2\u4EE5\u5916\u306E\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306F\u3001\u30A6\u30A7\u30D6\u30B5\u30A4\u30C8\u3084\u30A2\u30D7\u30EA\u306E\u3055\u307E\u3056\u307E\u306A\u30BB\u30AF\u30B7\u30E7\u30F3\u3084\u8981\u7D20\u306E\u80CC\u666F\u306B\u7279\u5225\u306B\u9078\u3070\u308C\u308B\u30AB\u30E9\u30FC\u3067\u3059\u3002\u30C6\u30AD\u30B9\u30C8\u3084\u975E\u30C6\u30AD\u30B9\u30C8\u8981\u7D20\u306E\u30AB\u30E9\u30FC\u306F\u3001\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u3092\u8003\u616E\u3057\u3066\u8A2D\u5B9A\u3055\u308C\u3066\u3044\u307E\u3059\u304C\u3001\u901A\u5E38\u3001\u3053\u306E\u6642\u306B\u60F3\u5B9A\u3057\u3066\u3044\u308B\u80CC\u666F\u8272\u306F\u767D\u307E\u305F\u306F\u9ED2\u3067\u3059\u3002\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306E\u4E0A\u306B\u30C6\u30AD\u30B9\u30C8\u3084\u975E\u30C6\u30AD\u30B9\u30C8\u8981\u7D20\u304C\u914D\u7F6E\u3055\u308C\u308B\u5834\u5408\u3001\u305D\u306E\u307E\u307E\u3067\u306F\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u8981\u4EF6\u3092\u6E80\u305F\u3055\u306A\u304F\u306A\u308B\u5834\u5408\u304C\u3042\u308A\u307E\u3059\u3002\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306B\u5FDC\u3058\u3066\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u3092\u8ABF\u6574\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
|
|
43
|
+
},
|
|
44
|
+
50: { value: `{colors.${palette}.50}` },
|
|
45
|
+
100: { value: `{colors.${palette}.100}` },
|
|
46
|
+
200: { value: `{colors.${palette}.200}` },
|
|
47
|
+
300: { value: `{colors.${palette}.300}` },
|
|
48
|
+
400: { value: `{colors.${palette}.400}` },
|
|
49
|
+
500: { value: `{colors.${palette}.500}` },
|
|
50
|
+
600: { value: `{colors.${palette}.600}` },
|
|
51
|
+
700: { value: `{colors.${palette}.700}` },
|
|
52
|
+
800: { value: `{colors.${palette}.800}` },
|
|
53
|
+
900: { value: `{colors.${palette}.900}` },
|
|
54
|
+
1e3: { value: `{colors.${palette}.1000}` },
|
|
55
|
+
1100: { value: `{colors.${palette}.1100}` },
|
|
56
|
+
1200: { value: `{colors.${palette}.1200}` }
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
60
|
+
0 && (module.exports = {
|
|
61
|
+
createKeyColor
|
|
62
|
+
});
|
package/dist/colors.mjs
ADDED
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Palette, createKeyColor } from './colors.mjs';
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Palette, createKeyColor } from './colors.js';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
createKeyColor: () => createKeyColor
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(index_exports);
|
|
26
|
+
|
|
27
|
+
// src/colors.ts
|
|
28
|
+
function createKeyColor(palette) {
|
|
29
|
+
return {
|
|
30
|
+
primary: {
|
|
31
|
+
value: `{colors.${palette}.900}`,
|
|
32
|
+
description: "\u30A6\u30A7\u30D6\u30B5\u30A4\u30C8\u306E\u30C8\u30FC\u30F3\uFF06\u30DE\u30CA\u30FC\u3092\u78BA\u5B9A\u3059\u308B\u30AB\u30E9\u30FC\u3067\u3059\u3002\u30B5\u30A4\u30C8\u5168\u4F53\u3092\u901A\u3058\u3066\u8996\u899A\u7684\u306B\u30D6\u30E9\u30F3\u30C9\u3092\u4F1D\u3048\u308B\u4E3B\u8981\u306A\u8981\u7D20\uFF08\u305F\u3068\u3048\u3070\u3001\u30ED\u30B4\u30BF\u30A4\u30D7\u3001\u30D8\u30C3\u30C0\u30FC\u3084\u30B0\u30ED\u30FC\u30D0\u30EB\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3\u306E\u8996\u899A\u8868\u73FE\uFF09\u3084\u3001\u512A\u5148\u3055\u308C\u308B\u52D5\u7DDA\u3084\u72B6\u6CC1\u3092\u793A\u3059UI\uFF08\u305F\u3068\u3048\u3070\u3001CTA\u30DC\u30BF\u30F3\u3001\u30A2\u30AF\u30C6\u30A3\u30D6\u306A\u72B6\u614B\u8868\u793A\u7B49\uFF09\u306B\u4F7F\u7528\u3055\u308C\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u306B\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002"
|
|
33
|
+
},
|
|
34
|
+
secondary: {
|
|
35
|
+
value: `{colors.${palette}.700}`,
|
|
36
|
+
description: "\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u306F\u3001\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u88DC\u5B8C\u3057\u3066\u3001\u3042\u307E\u308A\u76EE\u7ACB\u305F\u306A\u304F\u3066\u3044\u3044\u526F\u6B21\u7684\u306A\u52D5\u7DDA\u3084\u72B6\u6CC1\u3092\u793A\u3059UI\uFF08\u305F\u3068\u3048\u3070\u3001\u9078\u629E\u80A2\u3092\u63D0\u4F9B\u3059\u308B\u30DC\u30BF\u30F3\u3001\u6A5F\u80FD\u3084\u72B6\u614B\u3092\u8868\u793A\u3059\u308B\u30D1\u30FC\u30C4\u7B49\uFF09\u3067\u4F7F\u7528\u3057\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u540C\u3058\u8272\u76F8\u3067\u660E\u5EA6\u304C\u9AD8\u3044\u307E\u305F\u306F\u4F4E\u3044\u3082\u306E\u3092\u9078\u629E\u3057\u307E\u3059\u3002\u3053\u308C\u306B\u3088\u308A\u3001\u30AB\u30E9\u30FC\u306E\u4E00\u8CAB\u6027\u3092\u4FDD\u3061\u306A\u304C\u3089\u8996\u899A\u7684\u306A\u5BFE\u6BD4\u3001\u60C5\u5831\u306E\u968E\u5C64\u3001\u512A\u5148\u306E\u9806\u5217\u7B49\u3092\u53CD\u6620\u3057\u305FUI\u3092\u4F5C\u6210\u3059\u308B\u969B\u306B\u5F79\u7ACB\u3061\u307E\u3059\u3002\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u96A3\u63A5\u3059\u308B\u8868\u793A\u8981\u7D20\u306B\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30823:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002\u306A\u304A\u3001\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u30C6\u30AD\u30B9\u30C8\u306E\u30AB\u30E9\u30FC\u3068\u3057\u3066\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3067\u306A\u3051\u308C\u3070\u306A\u308A\u307E\u305B\u3093\u3002"
|
|
37
|
+
},
|
|
38
|
+
tertiary: {
|
|
39
|
+
value: `{colors.${palette}.1000}`,
|
|
40
|
+
description: "\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u306F\u3001\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u53CD\u5BFE\u306E\u660E\u5EA6\u3067\u8A2D\u5B9A\u3057\u307E\u3059\u3002\u30D7\u30E9\u30A4\u30DE\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u540C\u8272\u76F8\u3067\u3001\u660E\u5EA6\u9AD8\u3092\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u305F\u5834\u5408\u306F\u660E\u5EA6\u4F4E\u3092\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u306B\u3001\u660E\u5EA6\u4F4E\u3092\u30BB\u30AB\u30F3\u30C0\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u305F\u5834\u5408\u306F\u660E\u5EA6\u9AD8\u3092\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3068\u3057\u307E\u3059\u3002\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u96A3\u63A5\u3059\u308B\u8868\u793A\u8981\u7D20\u306B\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u4E3B\u8981\u306A\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30823:1\u4EE5\u4E0A\u3092\u7DAD\u6301\u3067\u304D\u308B\u30AB\u30E9\u30FC\u3092\u9078\u629E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059\u3002\u306A\u304A\u3001\u30BF\u30FC\u30B7\u30E3\u30EA\u30FC\u30AB\u30E9\u30FC\u3092\u30C6\u30AD\u30B9\u30C8\u306E\u30AB\u30E9\u30FC\u3068\u3057\u3066\u4F7F\u7528\u3059\u308B\u5834\u5408\u306F\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u304C\u5C11\u306A\u304F\u3068\u30824.5:1\u4EE5\u4E0A\u3067\u306A\u3051\u308C\u3070\u306A\u308A\u307E\u305B\u3093\u3002"
|
|
41
|
+
},
|
|
42
|
+
bg: {
|
|
43
|
+
value: `{colors.${palette}.50}`,
|
|
44
|
+
description: "\u767D\u307E\u305F\u306F\u9ED2\u4EE5\u5916\u306E\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306F\u3001\u30A6\u30A7\u30D6\u30B5\u30A4\u30C8\u3084\u30A2\u30D7\u30EA\u306E\u3055\u307E\u3056\u307E\u306A\u30BB\u30AF\u30B7\u30E7\u30F3\u3084\u8981\u7D20\u306E\u80CC\u666F\u306B\u7279\u5225\u306B\u9078\u3070\u308C\u308B\u30AB\u30E9\u30FC\u3067\u3059\u3002\u30C6\u30AD\u30B9\u30C8\u3084\u975E\u30C6\u30AD\u30B9\u30C8\u8981\u7D20\u306E\u30AB\u30E9\u30FC\u306F\u3001\u80CC\u666F\u8272\u3068\u306E\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u3092\u8003\u616E\u3057\u3066\u8A2D\u5B9A\u3055\u308C\u3066\u3044\u307E\u3059\u304C\u3001\u901A\u5E38\u3001\u3053\u306E\u6642\u306B\u60F3\u5B9A\u3057\u3066\u3044\u308B\u80CC\u666F\u8272\u306F\u767D\u307E\u305F\u306F\u9ED2\u3067\u3059\u3002\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306E\u4E0A\u306B\u30C6\u30AD\u30B9\u30C8\u3084\u975E\u30C6\u30AD\u30B9\u30C8\u8981\u7D20\u304C\u914D\u7F6E\u3055\u308C\u308B\u5834\u5408\u3001\u305D\u306E\u307E\u307E\u3067\u306F\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u8981\u4EF6\u3092\u6E80\u305F\u3055\u306A\u304F\u306A\u308B\u5834\u5408\u304C\u3042\u308A\u307E\u3059\u3002\u30D0\u30C3\u30AF\u30B0\u30E9\u30A6\u30F3\u30C9\u30AB\u30E9\u30FC\u306B\u5FDC\u3058\u3066\u3001\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8\u6BD4\u3092\u8ABF\u6574\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
|
|
45
|
+
},
|
|
46
|
+
50: { value: `{colors.${palette}.50}` },
|
|
47
|
+
100: { value: `{colors.${palette}.100}` },
|
|
48
|
+
200: { value: `{colors.${palette}.200}` },
|
|
49
|
+
300: { value: `{colors.${palette}.300}` },
|
|
50
|
+
400: { value: `{colors.${palette}.400}` },
|
|
51
|
+
500: { value: `{colors.${palette}.500}` },
|
|
52
|
+
600: { value: `{colors.${palette}.600}` },
|
|
53
|
+
700: { value: `{colors.${palette}.700}` },
|
|
54
|
+
800: { value: `{colors.${palette}.800}` },
|
|
55
|
+
900: { value: `{colors.${palette}.900}` },
|
|
56
|
+
1e3: { value: `{colors.${palette}.1000}` },
|
|
57
|
+
1100: { value: `{colors.${palette}.1100}` },
|
|
58
|
+
1200: { value: `{colors.${palette}.1200}` }
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
62
|
+
0 && (module.exports = {
|
|
63
|
+
createKeyColor
|
|
64
|
+
});
|
package/dist/index.mjs
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cieloazul310/digital-go-pandacss-utils",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"homepage": "https://github.com/cieloazul310/digital-go-design-system-with-panda",
|
|
6
|
+
"author": {
|
|
7
|
+
"name": "cieloazul310",
|
|
8
|
+
"url": "https://cieloazul310.github.io"
|
|
9
|
+
},
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "git+https://github.com/cieloazul310/digital-go-design-system-with-panda.git",
|
|
13
|
+
"directory": "packages/utils"
|
|
14
|
+
},
|
|
15
|
+
"publishConfig": {
|
|
16
|
+
"access": "public",
|
|
17
|
+
"registry": "https://registry.npmjs.org/"
|
|
18
|
+
},
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"main": "./dist/index.js",
|
|
21
|
+
"exports": {
|
|
22
|
+
".": {
|
|
23
|
+
"source": "./src/index.ts",
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"import": {
|
|
26
|
+
"types": "./dist/index.d.mts",
|
|
27
|
+
"default": "./dist/index.mjs"
|
|
28
|
+
},
|
|
29
|
+
"require": "./dist/index.js"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"scripts": {
|
|
33
|
+
"build": "tsup",
|
|
34
|
+
"dev": "npm run build -- --watch",
|
|
35
|
+
"eslint": "eslint src --fix",
|
|
36
|
+
"format": "prettier --parser typescript --write ."
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@repo/eslint-config": "^0.0.0",
|
|
40
|
+
"@repo/typescript-config": "^0.0.0",
|
|
41
|
+
"eslint": "^9.28.0",
|
|
42
|
+
"tsup": "8.5.0",
|
|
43
|
+
"typescript": "5.8.3"
|
|
44
|
+
},
|
|
45
|
+
"lint-staged": {
|
|
46
|
+
"**/*.{js,mjs,cjs,tsx,ts,tsx}": [
|
|
47
|
+
"eslint --fix",
|
|
48
|
+
"prettier --parser typescript --write"
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
}
|
package/src/colors.ts
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export type Palette =
|
|
2
|
+
| "blue"
|
|
3
|
+
| "light-blue"
|
|
4
|
+
| "cyan"
|
|
5
|
+
| "green"
|
|
6
|
+
| "lime"
|
|
7
|
+
| "yellow"
|
|
8
|
+
| "orange"
|
|
9
|
+
| "red"
|
|
10
|
+
| "magenta"
|
|
11
|
+
| "purple"
|
|
12
|
+
| "solid-gray";
|
|
13
|
+
|
|
14
|
+
export function createKeyColor(palette: Palette) {
|
|
15
|
+
return {
|
|
16
|
+
primary: {
|
|
17
|
+
value: `{colors.${palette}.900}`,
|
|
18
|
+
description:
|
|
19
|
+
"ウェブサイトのトーン&マナーを確定するカラーです。サイト全体を通じて視覚的にブランドを伝える主要な要素(たとえば、ロゴタイプ、ヘッダーやグローバルナビゲーションの視覚表現)や、優先される動線や状況を示すUI(たとえば、CTAボタン、アクティブな状態表示等)に使用されます。プライマリーカラーには、主要な背景色とのコントラスト比が少なくとも4.5:1以上を維持できるカラーを選択する必要があります。",
|
|
20
|
+
},
|
|
21
|
+
secondary: {
|
|
22
|
+
value: `{colors.${palette}.700}`,
|
|
23
|
+
description:
|
|
24
|
+
"セカンダリーカラーは、プライマリーカラーを補完して、あまり目立たなくていい副次的な動線や状況を示すUI(たとえば、選択肢を提供するボタン、機能や状態を表示するパーツ等)で使用します。プライマリーカラーと同じ色相で明度が高いまたは低いものを選択します。これにより、カラーの一貫性を保ちながら視覚的な対比、情報の階層、優先の順列等を反映したUIを作成する際に役立ちます。セカンダリーカラーを主要な背景色と隣接する表示要素に使用する場合は、主要な背景色とのコントラスト比が少なくとも3:1以上を維持できるカラーを選択する必要があります。なお、セカンダリーカラーをテキストのカラーとして使用する場合は、コントラスト比が少なくとも4.5:1以上でなければなりません。",
|
|
25
|
+
},
|
|
26
|
+
tertiary: {
|
|
27
|
+
value: `{colors.${palette}.1000}`,
|
|
28
|
+
description:
|
|
29
|
+
"ターシャリーカラーは、セカンダリーカラーと反対の明度で設定します。プライマリーカラーと同色相で、明度高をセカンダリーカラーとした場合は明度低をターシャリーカラーに、明度低をセカンダリーカラーとした場合は明度高をターシャリーカラーとします。ターシャリーカラーを主要な背景色と隣接する表示要素に使用する場合は、主要な背景色とのコントラスト比が少なくとも3:1以上を維持できるカラーを選択する必要があります。なお、ターシャリーカラーをテキストのカラーとして使用する場合は、コントラスト比が少なくとも4.5:1以上でなければなりません。",
|
|
30
|
+
},
|
|
31
|
+
bg: {
|
|
32
|
+
value: `{colors.${palette}.50}`,
|
|
33
|
+
description:
|
|
34
|
+
"白または黒以外のバックグラウンドカラーは、ウェブサイトやアプリのさまざまなセクションや要素の背景に特別に選ばれるカラーです。テキストや非テキスト要素のカラーは、背景色とのコントラスト比を考慮して設定されていますが、通常、この時に想定している背景色は白または黒です。バックグラウンドカラーの上にテキストや非テキスト要素が配置される場合、そのままではコントラスト要件を満たさなくなる場合があります。バックグラウンドカラーに応じて、コントラスト比を調整してください。",
|
|
35
|
+
},
|
|
36
|
+
50: { value: `{colors.${palette}.50}` },
|
|
37
|
+
100: { value: `{colors.${palette}.100}` },
|
|
38
|
+
200: { value: `{colors.${palette}.200}` },
|
|
39
|
+
300: { value: `{colors.${palette}.300}` },
|
|
40
|
+
400: { value: `{colors.${palette}.400}` },
|
|
41
|
+
500: { value: `{colors.${palette}.500}` },
|
|
42
|
+
600: { value: `{colors.${palette}.600}` },
|
|
43
|
+
700: { value: `{colors.${palette}.700}` },
|
|
44
|
+
800: { value: `{colors.${palette}.800}` },
|
|
45
|
+
900: { value: `{colors.${palette}.900}` },
|
|
46
|
+
1000: { value: `{colors.${palette}.1000}` },
|
|
47
|
+
1100: { value: `{colors.${palette}.1100}` },
|
|
48
|
+
1200: { value: `{colors.${palette}.1200}` },
|
|
49
|
+
};
|
|
50
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./colors";
|
package/tsconfig.json
ADDED