@sealcode/sealgen 0.17.11 → 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,52 +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
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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>`
|
|
40
76
|
);
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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;
|
|
53
98
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const is_new_base = color_name_base != last_color_name_base;
|
|
60
|
-
css_colors += `--color-${group_name}-${color_name}: ${color};`;
|
|
61
|
-
if (is_new_base) {
|
|
62
|
-
html_colors += `</div><h3>${color_name_base}</h3><div class="base" base="${color_name_base}">`;
|
|
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;
|
|
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>`;
|
|
74
104
|
}
|
|
75
|
-
html_colors += "</div
|
|
105
|
+
html_colors += "</div>";
|
|
76
106
|
}
|
|
77
107
|
const css = await formatWithPrettier(
|
|
78
108
|
`/* DO NOT EDIT! This file is automatically generated by sealgen */
|
|
@@ -91,7 +121,7 @@ class ColorsBuilder extends Builder {
|
|
|
91
121
|
font-family: sans-serif;
|
|
92
122
|
}
|
|
93
123
|
|
|
94
|
-
.
|
|
124
|
+
.shades {
|
|
95
125
|
display: flex;
|
|
96
126
|
}
|
|
97
127
|
|
|
@@ -117,6 +147,7 @@ class ColorsBuilder extends Builder {
|
|
|
117
147
|
|
|
118
148
|
.color-box:after {
|
|
119
149
|
content: attr(data-color-name);
|
|
150
|
+
box-sizing: border-box;
|
|
120
151
|
display: block;
|
|
121
152
|
color: black;
|
|
122
153
|
font-size: 14px;
|
package/package.json
CHANGED
|
@@ -34,63 +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
|
-
|
|
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
|
|
48
94
|
)) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
)
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
if (
|
|
65
|
-
|
|
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;
|
|
66
117
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
) {
|
|
73
|
-
steps = parseInt(modifier.at(-1)!);
|
|
74
|
-
}
|
|
75
|
-
index = multiplier * steps;
|
|
76
|
-
const is_new_base = color_name_base != last_color_name_base;
|
|
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;
|
|
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>`;
|
|
92
123
|
}
|
|
93
|
-
html_colors += "</div
|
|
124
|
+
html_colors += "</div>";
|
|
94
125
|
}
|
|
95
126
|
|
|
96
127
|
const css = await formatWithPrettier(
|
|
@@ -110,7 +141,7 @@ export class ColorsBuilder extends Builder {
|
|
|
110
141
|
font-family: sans-serif;
|
|
111
142
|
}
|
|
112
143
|
|
|
113
|
-
.
|
|
144
|
+
.shades {
|
|
114
145
|
display: flex;
|
|
115
146
|
}
|
|
116
147
|
|
|
@@ -136,6 +167,7 @@ export class ColorsBuilder extends Builder {
|
|
|
136
167
|
|
|
137
168
|
.color-box:after {
|
|
138
169
|
content: attr(data-color-name);
|
|
170
|
+
box-sizing: border-box;
|
|
139
171
|
display: block;
|
|
140
172
|
color: black;
|
|
141
173
|
font-size: 14px;
|