@sealcode/sealgen 0.17.11 → 0.17.13
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.
|
@@ -27,52 +27,97 @@ class ColorsBuilder extends Builder {
|
|
|
27
27
|
format: "esm",
|
|
28
28
|
outfile
|
|
29
29
|
});
|
|
30
|
-
await fs.appendFile(
|
|
30
|
+
await fs.appendFile(
|
|
31
|
+
outfile,
|
|
32
|
+
/* HTML */
|
|
33
|
+
`<script>
|
|
34
|
+
console.log(
|
|
35
|
+
JSON.stringify(
|
|
36
|
+
Object.fromEntries(
|
|
37
|
+
Object.entries(colors).map(
|
|
38
|
+
([group_name, group]) => [
|
|
39
|
+
group_name,
|
|
40
|
+
Object.fromEntries(
|
|
41
|
+
Object.entries(group).map(
|
|
42
|
+
([color_name, color]) => {
|
|
43
|
+
const shades = [];
|
|
44
|
+
for (let i = 0; i <= 9; i++) {
|
|
45
|
+
shades.push(
|
|
46
|
+
shade(color, i)
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
return [
|
|
50
|
+
color_name,
|
|
51
|
+
{ color, shades },
|
|
52
|
+
];
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
),
|
|
56
|
+
]
|
|
57
|
+
)
|
|
58
|
+
)
|
|
59
|
+
)
|
|
60
|
+
);
|
|
61
|
+
</script>`.replaceAll(/<\/?script>/g, "")
|
|
62
|
+
// <script> helps Prettier format this snippet
|
|
63
|
+
);
|
|
31
64
|
const output = await exec("node", [outfile]);
|
|
32
|
-
const
|
|
65
|
+
const color_groups = JSON.parse(output.stdout);
|
|
33
66
|
let css_colors = "";
|
|
34
67
|
let html_colors = "";
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
68
|
+
function html_color_box({
|
|
69
|
+
color,
|
|
70
|
+
shade_no,
|
|
71
|
+
name,
|
|
72
|
+
group_name,
|
|
73
|
+
is_main = false
|
|
74
|
+
}) {
|
|
75
|
+
return (
|
|
76
|
+
/* HTML */
|
|
77
|
+
`<div
|
|
78
|
+
class="color-box ${colord(color).isDark() ? "is-dark" : ""} ${is_main ? "is-main" : ""}"
|
|
79
|
+
style="background-color: ${color}; order: ${parseInt(shade_no)}"
|
|
80
|
+
data-color-name="${name}"
|
|
81
|
+
data-color-group-name="${group_name}"
|
|
82
|
+
data-color-shade-number="${shade_no}"
|
|
83
|
+
></div>`
|
|
40
84
|
);
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
85
|
+
}
|
|
86
|
+
for (const group_name of Object.keys(color_groups).sort(
|
|
87
|
+
(key) => key == "brand" ? -1 : 11
|
|
88
|
+
)) {
|
|
89
|
+
html_colors += `<h2>${group_name}</h2><div class="group">`;
|
|
90
|
+
const colors = color_groups[group_name];
|
|
91
|
+
for (const [color_name, color_info] of Object.entries(colors)) {
|
|
92
|
+
html_colors += `<h3>${color_name}</h3><div class="shades">`;
|
|
93
|
+
const main_color = color_info.color;
|
|
94
|
+
css_colors += `--color-${group_name}-${color_name}: ${main_color};`;
|
|
95
|
+
const main_l = colord(main_color).toHsl().l;
|
|
96
|
+
html_colors += html_color_box({
|
|
97
|
+
color: main_color,
|
|
98
|
+
name: color_name,
|
|
99
|
+
shade_no: Math.round((main_l - main_l % 10) / 10).toString().padStart(2, "0"),
|
|
100
|
+
is_main: true,
|
|
101
|
+
group_name
|
|
102
|
+
});
|
|
103
|
+
color_info.shades.forEach((shaded_color, index) => {
|
|
104
|
+
if (Math.abs(
|
|
105
|
+
colord(shaded_color).toHsl().l - colord(main_color).toHsl().l
|
|
106
|
+
) < 10) {
|
|
107
|
+
return;
|
|
53
108
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
if (color != "#000000" && color != "#ffffff") {
|
|
65
|
-
html_colors += /* HTML */
|
|
66
|
-
`<div
|
|
67
|
-
class="color-box ${colord(color).isDark() ? "is-dark" : ""} ${index == 0 ? "is-main" : ""}"
|
|
68
|
-
style="background-color: ${color}; order: ${index}"
|
|
69
|
-
data-color-name="${color_name}"
|
|
70
|
-
data-color-group="${group_name}"
|
|
71
|
-
></div>`;
|
|
72
|
-
}
|
|
73
|
-
last_color_name_base = color_name_base;
|
|
109
|
+
const shade_no = index.toString().padStart(2, "0");
|
|
110
|
+
css_colors += `--color-${group_name}-${color_name}-${shade_no}: ${shaded_color};`;
|
|
111
|
+
html_colors += html_color_box({
|
|
112
|
+
color: shaded_color,
|
|
113
|
+
shade_no,
|
|
114
|
+
name: color_name,
|
|
115
|
+
group_name
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
html_colors += `</div>`;
|
|
74
119
|
}
|
|
75
|
-
html_colors += "</div
|
|
120
|
+
html_colors += "</div>";
|
|
76
121
|
}
|
|
77
122
|
const css = await formatWithPrettier(
|
|
78
123
|
`/* DO NOT EDIT! This file is automatically generated by sealgen */
|
|
@@ -91,19 +136,21 @@ class ColorsBuilder extends Builder {
|
|
|
91
136
|
font-family: sans-serif;
|
|
92
137
|
}
|
|
93
138
|
|
|
94
|
-
.
|
|
139
|
+
.shades {
|
|
95
140
|
display: flex;
|
|
96
141
|
}
|
|
97
142
|
|
|
98
143
|
.color-box {
|
|
99
144
|
width: 100px;
|
|
100
145
|
height: 100px;
|
|
101
|
-
transition:
|
|
146
|
+
transition: transform 50ms;
|
|
102
147
|
transition-timing-function: ease-in-out;
|
|
148
|
+
transform: scale(1);
|
|
103
149
|
cursor: pointer;
|
|
104
150
|
|
|
105
151
|
&:hover {
|
|
106
152
|
transform: scale(1.1);
|
|
153
|
+
z-index: 2;
|
|
107
154
|
}
|
|
108
155
|
|
|
109
156
|
&.is-main {
|
|
@@ -116,7 +163,8 @@ class ColorsBuilder extends Builder {
|
|
|
116
163
|
}
|
|
117
164
|
|
|
118
165
|
.color-box:after {
|
|
119
|
-
content: attr(data-color-
|
|
166
|
+
content: attr(data-color-shade-number);
|
|
167
|
+
box-sizing: border-box;
|
|
120
168
|
display: block;
|
|
121
169
|
color: black;
|
|
122
170
|
font-size: 14px;
|
|
@@ -150,7 +198,7 @@ class ColorsBuilder extends Builder {
|
|
|
150
198
|
padding: 8px;
|
|
151
199
|
animation: float-up 800ms;
|
|
152
200
|
animation-timing-function: ease-out;
|
|
153
|
-
z-index:
|
|
201
|
+
z-index: 3;
|
|
154
202
|
}
|
|
155
203
|
</style>
|
|
156
204
|
</head>
|
|
@@ -161,9 +209,11 @@ class ColorsBuilder extends Builder {
|
|
|
161
209
|
document.addEventListener("click", (event) => {
|
|
162
210
|
navigator.clipboard.writeText(
|
|
163
211
|
\`var(--color-\${event.target.getAttribute(
|
|
164
|
-
"data-color-group"
|
|
212
|
+
"data-color-group-name"
|
|
165
213
|
)}-\${event.target.getAttribute(
|
|
166
214
|
"data-color-name"
|
|
215
|
+
)}-\${event.target.getAttribute(
|
|
216
|
+
"data-color-shade-number"
|
|
167
217
|
)})\`
|
|
168
218
|
);
|
|
169
219
|
const toast = document.createElement("div");
|
package/package.json
CHANGED
|
@@ -34,63 +34,111 @@ export class ColorsBuilder extends Builder {
|
|
|
34
34
|
format: "esm",
|
|
35
35
|
outfile,
|
|
36
36
|
});
|
|
37
|
-
await fs.appendFile(
|
|
37
|
+
await fs.appendFile(
|
|
38
|
+
outfile,
|
|
39
|
+
/* HTML */ `<script>
|
|
40
|
+
console.log(
|
|
41
|
+
JSON.stringify(
|
|
42
|
+
Object.fromEntries(
|
|
43
|
+
Object.entries(colors).map(
|
|
44
|
+
([group_name, group]) => [
|
|
45
|
+
group_name,
|
|
46
|
+
Object.fromEntries(
|
|
47
|
+
Object.entries(group).map(
|
|
48
|
+
([color_name, color]) => {
|
|
49
|
+
const shades = [];
|
|
50
|
+
for (let i = 0; i <= 9; i++) {
|
|
51
|
+
shades.push(
|
|
52
|
+
shade(color, i)
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
return [
|
|
56
|
+
color_name,
|
|
57
|
+
{ color, shades },
|
|
58
|
+
];
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
),
|
|
62
|
+
]
|
|
63
|
+
)
|
|
64
|
+
)
|
|
65
|
+
)
|
|
66
|
+
);
|
|
67
|
+
</script>`.replaceAll(/<\/?script>/g, "") // <script> helps Prettier format this snippet
|
|
68
|
+
);
|
|
38
69
|
const output = await exec("node", [outfile]);
|
|
39
|
-
const
|
|
70
|
+
const color_groups = JSON.parse(output.stdout) as Record<
|
|
40
71
|
string,
|
|
41
|
-
Record<string, string>
|
|
72
|
+
Record<string, { color: string; shades: string[] }>
|
|
42
73
|
>;
|
|
43
74
|
|
|
44
75
|
let css_colors = "";
|
|
45
76
|
let html_colors = "";
|
|
46
|
-
|
|
47
|
-
|
|
77
|
+
|
|
78
|
+
function html_color_box({
|
|
79
|
+
color,
|
|
80
|
+
shade_no,
|
|
81
|
+
name,
|
|
82
|
+
group_name,
|
|
83
|
+
is_main = false,
|
|
84
|
+
}: {
|
|
85
|
+
color: string;
|
|
86
|
+
shade_no: string;
|
|
87
|
+
name: string;
|
|
88
|
+
group_name: string;
|
|
89
|
+
is_main?: boolean;
|
|
90
|
+
}) {
|
|
91
|
+
return /* HTML */ `<div
|
|
92
|
+
class="color-box ${colord(color).isDark()
|
|
93
|
+
? "is-dark"
|
|
94
|
+
: ""} ${is_main ? "is-main" : ""}"
|
|
95
|
+
style="background-color: ${color}; order: ${parseInt(shade_no)}"
|
|
96
|
+
data-color-name="${name}"
|
|
97
|
+
data-color-group-name="${group_name}"
|
|
98
|
+
data-color-shade-number="${shade_no}"
|
|
99
|
+
></div>`;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
for (const group_name of Object.keys(color_groups).sort((key) =>
|
|
103
|
+
key == "brand" ? -1 : 11
|
|
48
104
|
)) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
)
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
105
|
+
html_colors += `<h2>${group_name}</h2><div class="group">`;
|
|
106
|
+
const colors = color_groups[group_name];
|
|
107
|
+
for (const [color_name, color_info] of Object.entries(colors)) {
|
|
108
|
+
html_colors += `<h3>${color_name}</h3><div class="shades">`;
|
|
109
|
+
const main_color = color_info.color;
|
|
110
|
+
css_colors += `--color-${group_name}-${color_name}: ${main_color};`;
|
|
111
|
+
const main_l = colord(main_color).toHsl().l;
|
|
112
|
+
html_colors += html_color_box({
|
|
113
|
+
color: main_color,
|
|
114
|
+
name: color_name,
|
|
115
|
+
shade_no: Math.round((main_l - (main_l % 10)) / 10)
|
|
116
|
+
.toString()
|
|
117
|
+
.padStart(2, "0"),
|
|
118
|
+
is_main: true,
|
|
119
|
+
group_name,
|
|
120
|
+
});
|
|
121
|
+
color_info.shades.forEach((shaded_color, index) => {
|
|
122
|
+
if (
|
|
123
|
+
Math.abs(
|
|
124
|
+
colord(shaded_color).toHsl().l -
|
|
125
|
+
colord(main_color).toHsl().l
|
|
126
|
+
) < 10
|
|
127
|
+
) {
|
|
128
|
+
return;
|
|
66
129
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
css_colors += `--color-${group_name}-${color_name}: ${color};`;
|
|
78
|
-
if (is_new_base) {
|
|
79
|
-
html_colors += `</div><h3>${color_name_base}</h3><div class="base" base="${color_name_base}">`;
|
|
80
|
-
}
|
|
81
|
-
if (color != "#000000" && color != "#ffffff") {
|
|
82
|
-
html_colors += /* HTML */ `<div
|
|
83
|
-
class="color-box ${colord(color).isDark()
|
|
84
|
-
? "is-dark"
|
|
85
|
-
: ""} ${index == 0 ? "is-main" : ""}"
|
|
86
|
-
style="background-color: ${color}; order: ${index}"
|
|
87
|
-
data-color-name="${color_name}"
|
|
88
|
-
data-color-group="${group_name}"
|
|
89
|
-
></div>`;
|
|
90
|
-
}
|
|
91
|
-
last_color_name_base = color_name_base;
|
|
130
|
+
const shade_no = index.toString().padStart(2, "0");
|
|
131
|
+
css_colors += `--color-${group_name}-${color_name}-${shade_no}: ${shaded_color};`;
|
|
132
|
+
html_colors += html_color_box({
|
|
133
|
+
color: shaded_color,
|
|
134
|
+
shade_no,
|
|
135
|
+
name: color_name,
|
|
136
|
+
group_name,
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
html_colors += `</div>`;
|
|
92
140
|
}
|
|
93
|
-
html_colors += "</div
|
|
141
|
+
html_colors += "</div>";
|
|
94
142
|
}
|
|
95
143
|
|
|
96
144
|
const css = await formatWithPrettier(
|
|
@@ -110,19 +158,21 @@ export class ColorsBuilder extends Builder {
|
|
|
110
158
|
font-family: sans-serif;
|
|
111
159
|
}
|
|
112
160
|
|
|
113
|
-
.
|
|
161
|
+
.shades {
|
|
114
162
|
display: flex;
|
|
115
163
|
}
|
|
116
164
|
|
|
117
165
|
.color-box {
|
|
118
166
|
width: 100px;
|
|
119
167
|
height: 100px;
|
|
120
|
-
transition:
|
|
168
|
+
transition: transform 50ms;
|
|
121
169
|
transition-timing-function: ease-in-out;
|
|
170
|
+
transform: scale(1);
|
|
122
171
|
cursor: pointer;
|
|
123
172
|
|
|
124
173
|
&:hover {
|
|
125
174
|
transform: scale(1.1);
|
|
175
|
+
z-index: 2;
|
|
126
176
|
}
|
|
127
177
|
|
|
128
178
|
&.is-main {
|
|
@@ -135,7 +185,8 @@ export class ColorsBuilder extends Builder {
|
|
|
135
185
|
}
|
|
136
186
|
|
|
137
187
|
.color-box:after {
|
|
138
|
-
content: attr(data-color-
|
|
188
|
+
content: attr(data-color-shade-number);
|
|
189
|
+
box-sizing: border-box;
|
|
139
190
|
display: block;
|
|
140
191
|
color: black;
|
|
141
192
|
font-size: 14px;
|
|
@@ -169,7 +220,7 @@ export class ColorsBuilder extends Builder {
|
|
|
169
220
|
padding: 8px;
|
|
170
221
|
animation: float-up 800ms;
|
|
171
222
|
animation-timing-function: ease-out;
|
|
172
|
-
z-index:
|
|
223
|
+
z-index: 3;
|
|
173
224
|
}
|
|
174
225
|
</style>
|
|
175
226
|
</head>
|
|
@@ -180,9 +231,11 @@ export class ColorsBuilder extends Builder {
|
|
|
180
231
|
document.addEventListener("click", (event) => {
|
|
181
232
|
navigator.clipboard.writeText(
|
|
182
233
|
\`var(--color-\${event.target.getAttribute(
|
|
183
|
-
"data-color-group"
|
|
234
|
+
"data-color-group-name"
|
|
184
235
|
)}-\${event.target.getAttribute(
|
|
185
236
|
"data-color-name"
|
|
237
|
+
)}-\${event.target.getAttribute(
|
|
238
|
+
"data-color-shade-number"
|
|
186
239
|
)})\`
|
|
187
240
|
);
|
|
188
241
|
const toast = document.createElement("div");
|