@sealcode/sealgen 0.17.10 → 0.17.12
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,50 +27,82 @@ 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
|
-
|
|
68
|
+
function html_color_box(color, shade_no, is_main = false) {
|
|
69
|
+
return (
|
|
70
|
+
/* HTML */
|
|
71
|
+
`<div
|
|
72
|
+
class="color-box ${colord(color).isDark() ? "is-dark" : ""} ${is_main ? "is-main" : ""}"
|
|
73
|
+
style="background-color: ${color}; order: ${parseInt(shade_no)}"
|
|
74
|
+
data-color-name="${shade_no}"
|
|
75
|
+
></div>`
|
|
38
76
|
);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
77
|
+
}
|
|
78
|
+
for (const group_name of Object.keys(color_groups).sort(
|
|
79
|
+
(key) => key == "brand" ? -1 : 11
|
|
80
|
+
)) {
|
|
81
|
+
html_colors += `<h2>${group_name}</h2><div class="group">`;
|
|
82
|
+
const colors = color_groups[group_name];
|
|
83
|
+
for (const [color_name, color_info] of Object.entries(colors)) {
|
|
84
|
+
html_colors += `<h3>${color_name}</h3><div class="shades">`;
|
|
85
|
+
const main_color = color_info.color;
|
|
86
|
+
css_colors += `--color-${group_name}-${color_name}: ${main_color};`;
|
|
87
|
+
const main_l = colord(main_color).toHsl().l;
|
|
88
|
+
html_colors += html_color_box(
|
|
89
|
+
main_color,
|
|
90
|
+
Math.round((main_l - main_l % 10) / 10).toString().padStart(2, "0"),
|
|
91
|
+
true
|
|
92
|
+
);
|
|
93
|
+
color_info.shades.forEach((shaded_color, index) => {
|
|
94
|
+
if (Math.abs(
|
|
95
|
+
colord(shaded_color).toHsl().l - colord(main_color).toHsl().l
|
|
96
|
+
) < 10) {
|
|
97
|
+
return;
|
|
51
98
|
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
const is_new_base = color_name_base != last_color_name_base;
|
|
58
|
-
css_colors += `--color-${group_name}-${color_name}: ${color};`;
|
|
59
|
-
if (is_new_base) {
|
|
60
|
-
html_colors += `</div><h3>${color_name_base}</h3><div class="base" base="${color_name_base}">`;
|
|
61
|
-
}
|
|
62
|
-
if (color != "#000000" && color != "#ffffff") {
|
|
63
|
-
html_colors += /* HTML */
|
|
64
|
-
`<div
|
|
65
|
-
class="color-box ${colord(color).isDark() ? "is-dark" : ""} ${index == 0 ? "is-main" : ""}"
|
|
66
|
-
style="background-color: ${color}; order: ${index}"
|
|
67
|
-
data-color-name="${color_name}"
|
|
68
|
-
data-color-group="${group_name}"
|
|
69
|
-
></div>`;
|
|
70
|
-
}
|
|
71
|
-
last_color_name_base = color_name_base;
|
|
99
|
+
const shade_no = index.toString().padStart(2, "0");
|
|
100
|
+
css_colors += `--color-${group_name}-${color_name}-shade${shade_no}: ${shaded_color};`;
|
|
101
|
+
html_colors += html_color_box(shaded_color, shade_no);
|
|
102
|
+
});
|
|
103
|
+
html_colors += `</div>`;
|
|
72
104
|
}
|
|
73
|
-
html_colors += "</div
|
|
105
|
+
html_colors += "</div>";
|
|
74
106
|
}
|
|
75
107
|
const css = await formatWithPrettier(
|
|
76
108
|
`/* DO NOT EDIT! This file is automatically generated by sealgen */
|
|
@@ -89,7 +121,7 @@ class ColorsBuilder extends Builder {
|
|
|
89
121
|
font-family: sans-serif;
|
|
90
122
|
}
|
|
91
123
|
|
|
92
|
-
.
|
|
124
|
+
.shades {
|
|
93
125
|
display: flex;
|
|
94
126
|
}
|
|
95
127
|
|
|
@@ -115,6 +147,7 @@ class ColorsBuilder extends Builder {
|
|
|
115
147
|
|
|
116
148
|
.color-box:after {
|
|
117
149
|
content: attr(data-color-name);
|
|
150
|
+
box-sizing: border-box;
|
|
118
151
|
display: block;
|
|
119
152
|
color: black;
|
|
120
153
|
font-size: 14px;
|
package/package.json
CHANGED
|
@@ -34,61 +34,94 @@ 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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
77
|
+
|
|
78
|
+
function html_color_box(
|
|
79
|
+
color: string,
|
|
80
|
+
shade_no: string,
|
|
81
|
+
is_main = false
|
|
82
|
+
) {
|
|
83
|
+
return /* HTML */ `<div
|
|
84
|
+
class="color-box ${colord(color).isDark()
|
|
85
|
+
? "is-dark"
|
|
86
|
+
: ""} ${is_main ? "is-main" : ""}"
|
|
87
|
+
style="background-color: ${color}; order: ${parseInt(shade_no)}"
|
|
88
|
+
data-color-name="${shade_no}"
|
|
89
|
+
></div>`;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
for (const group_name of Object.keys(color_groups).sort((key) =>
|
|
93
|
+
key == "brand" ? -1 : 11
|
|
94
|
+
)) {
|
|
95
|
+
html_colors += `<h2>${group_name}</h2><div class="group">`;
|
|
96
|
+
const colors = color_groups[group_name];
|
|
97
|
+
for (const [color_name, color_info] of Object.entries(colors)) {
|
|
98
|
+
html_colors += `<h3>${color_name}</h3><div class="shades">`;
|
|
99
|
+
const main_color = color_info.color;
|
|
100
|
+
css_colors += `--color-${group_name}-${color_name}: ${main_color};`;
|
|
101
|
+
const main_l = colord(main_color).toHsl().l;
|
|
102
|
+
html_colors += html_color_box(
|
|
103
|
+
main_color,
|
|
104
|
+
Math.round((main_l - (main_l % 10)) / 10)
|
|
105
|
+
.toString()
|
|
106
|
+
.padStart(2, "0"),
|
|
107
|
+
true
|
|
108
|
+
);
|
|
109
|
+
color_info.shades.forEach((shaded_color, index) => {
|
|
110
|
+
if (
|
|
111
|
+
Math.abs(
|
|
112
|
+
colord(shaded_color).toHsl().l -
|
|
113
|
+
colord(main_color).toHsl().l
|
|
114
|
+
) < 10
|
|
115
|
+
) {
|
|
116
|
+
return;
|
|
64
117
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
) {
|
|
71
|
-
steps = parseInt(modifier.at(-1)!);
|
|
72
|
-
}
|
|
73
|
-
index = multiplier * steps;
|
|
74
|
-
const is_new_base = color_name_base != last_color_name_base;
|
|
75
|
-
css_colors += `--color-${group_name}-${color_name}: ${color};`;
|
|
76
|
-
if (is_new_base) {
|
|
77
|
-
html_colors += `</div><h3>${color_name_base}</h3><div class="base" base="${color_name_base}">`;
|
|
78
|
-
}
|
|
79
|
-
if (color != "#000000" && color != "#ffffff") {
|
|
80
|
-
html_colors += /* HTML */ `<div
|
|
81
|
-
class="color-box ${colord(color).isDark()
|
|
82
|
-
? "is-dark"
|
|
83
|
-
: ""} ${index == 0 ? "is-main" : ""}"
|
|
84
|
-
style="background-color: ${color}; order: ${index}"
|
|
85
|
-
data-color-name="${color_name}"
|
|
86
|
-
data-color-group="${group_name}"
|
|
87
|
-
></div>`;
|
|
88
|
-
}
|
|
89
|
-
last_color_name_base = color_name_base;
|
|
118
|
+
const shade_no = index.toString().padStart(2, "0");
|
|
119
|
+
css_colors += `--color-${group_name}-${color_name}-shade${shade_no}: ${shaded_color};`;
|
|
120
|
+
html_colors += html_color_box(shaded_color, shade_no);
|
|
121
|
+
});
|
|
122
|
+
html_colors += `</div>`;
|
|
90
123
|
}
|
|
91
|
-
html_colors += "</div
|
|
124
|
+
html_colors += "</div>";
|
|
92
125
|
}
|
|
93
126
|
|
|
94
127
|
const css = await formatWithPrettier(
|
|
@@ -108,7 +141,7 @@ export class ColorsBuilder extends Builder {
|
|
|
108
141
|
font-family: sans-serif;
|
|
109
142
|
}
|
|
110
143
|
|
|
111
|
-
.
|
|
144
|
+
.shades {
|
|
112
145
|
display: flex;
|
|
113
146
|
}
|
|
114
147
|
|
|
@@ -134,6 +167,7 @@ export class ColorsBuilder extends Builder {
|
|
|
134
167
|
|
|
135
168
|
.color-box:after {
|
|
136
169
|
content: attr(data-color-name);
|
|
170
|
+
box-sizing: border-box;
|
|
137
171
|
display: block;
|
|
138
172
|
color: black;
|
|
139
173
|
font-size: 14px;
|