@sealcode/sealgen 0.17.12 → 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.
Files changed (3) hide show
  1. package/lib/builders/colors-builder.js +32 -13
  2. package/package.json +1 -1
  3. package/src/builders/colors-builder.ts +38 -17
package/lib/builders/colors-builder.js CHANGED
@@ -65,13 +65,21 @@ class ColorsBuilder extends Builder {
65
65
  const color_groups = JSON.parse(output.stdout);
66
66
  let css_colors = "";
67
67
  let html_colors = "";
68
- function html_color_box(color, shade_no, is_main = false) {
68
+ function html_color_box({
69
+ color,
70
+ shade_no,
71
+ name,
72
+ group_name,
73
+ is_main = false
74
+ }) {
69
75
  return (
70
76
  /* HTML */
71
77
  `<div
72
78
  class="color-box ${colord(color).isDark() ? "is-dark" : ""} ${is_main ? "is-main" : ""}"
73
79
  style="background-color: ${color}; order: ${parseInt(shade_no)}"
74
- data-color-name="${shade_no}"
80
+ data-color-name="${name}"
81
+ data-color-group-name="${group_name}"
82
+ data-color-shade-number="${shade_no}"
75
83
  ></div>`
76
84
  );
77
85
  }
@@ -85,11 +93,13 @@ class ColorsBuilder extends Builder {
85
93
  const main_color = color_info.color;
86
94
  css_colors += `--color-${group_name}-${color_name}: ${main_color};`;
87
95
  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
- );
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
+ });
93
103
  color_info.shades.forEach((shaded_color, index) => {
94
104
  if (Math.abs(
95
105
  colord(shaded_color).toHsl().l - colord(main_color).toHsl().l
@@ -97,8 +107,13 @@ class ColorsBuilder extends Builder {
97
107
  return;
98
108
  }
99
109
  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);
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
+ });
102
117
  });
103
118
  html_colors += `</div>`;
104
119
  }
@@ -128,12 +143,14 @@ class ColorsBuilder extends Builder {
128
143
  .color-box {
129
144
  width: 100px;
130
145
  height: 100px;
131
- transition: all 50ms;
146
+ transition: transform 50ms;
132
147
  transition-timing-function: ease-in-out;
148
+ transform: scale(1);
133
149
  cursor: pointer;
134
150
 
135
151
  &:hover {
136
152
  transform: scale(1.1);
153
+ z-index: 2;
137
154
  }
138
155
 
139
156
  &.is-main {
@@ -146,7 +163,7 @@ class ColorsBuilder extends Builder {
146
163
  }
147
164
 
148
165
  .color-box:after {
149
- content: attr(data-color-name);
166
+ content: attr(data-color-shade-number);
150
167
  box-sizing: border-box;
151
168
  display: block;
152
169
  color: black;
@@ -181,7 +198,7 @@ class ColorsBuilder extends Builder {
181
198
  padding: 8px;
182
199
  animation: float-up 800ms;
183
200
  animation-timing-function: ease-out;
184
- z-index: 2;
201
+ z-index: 3;
185
202
  }
186
203
  </style>
187
204
  </head>
@@ -192,9 +209,11 @@ class ColorsBuilder extends Builder {
192
209
  document.addEventListener("click", (event) => {
193
210
  navigator.clipboard.writeText(
194
211
  \`var(--color-\${event.target.getAttribute(
195
- "data-color-group"
212
+ "data-color-group-name"
196
213
  )}-\${event.target.getAttribute(
197
214
  "data-color-name"
215
+ )}-\${event.target.getAttribute(
216
+ "data-color-shade-number"
198
217
  )})\`
199
218
  );
200
219
  const toast = document.createElement("div");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sealcode/sealgen",
3
- "version": "0.17.12",
3
+ "version": "0.17.13",
4
4
  "description": "Module to automate adding routes and collections to a sealious application",
5
5
  "main": "lib/index.js",
6
6
  "type": "module",
package/src/builders/colors-builder.ts CHANGED
@@ -75,17 +75,27 @@ export class ColorsBuilder extends Builder {
75
75
  let css_colors = "";
76
76
  let html_colors = "";
77
77
 
78
- function html_color_box(
79
- color: string,
80
- shade_no: string,
81
- is_main = false
82
- ) {
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
+ }) {
83
91
  return /* HTML */ `<div
84
92
  class="color-box ${colord(color).isDark()
85
93
  ? "is-dark"
86
94
  : ""} ${is_main ? "is-main" : ""}"
87
95
  style="background-color: ${color}; order: ${parseInt(shade_no)}"
88
- data-color-name="${shade_no}"
96
+ data-color-name="${name}"
97
+ data-color-group-name="${group_name}"
98
+ data-color-shade-number="${shade_no}"
89
99
  ></div>`;
90
100
  }
91
101
 
@@ -99,13 +109,15 @@ export class ColorsBuilder extends Builder {
99
109
  const main_color = color_info.color;
100
110
  css_colors += `--color-${group_name}-${color_name}: ${main_color};`;
101
111
  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)
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)
105
116
  .toString()
106
117
  .padStart(2, "0"),
107
- true
108
- );
118
+ is_main: true,
119
+ group_name,
120
+ });
109
121
  color_info.shades.forEach((shaded_color, index) => {
110
122
  if (
111
123
  Math.abs(
@@ -116,8 +128,13 @@ export class ColorsBuilder extends Builder {
116
128
  return;
117
129
  }
118
130
  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);
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
+ });
121
138
  });
122
139
  html_colors += `</div>`;
123
140
  }
@@ -148,12 +165,14 @@ export class ColorsBuilder extends Builder {
148
165
  .color-box {
149
166
  width: 100px;
150
167
  height: 100px;
151
- transition: all 50ms;
168
+ transition: transform 50ms;
152
169
  transition-timing-function: ease-in-out;
170
+ transform: scale(1);
153
171
  cursor: pointer;
154
172
 
155
173
  &:hover {
156
174
  transform: scale(1.1);
175
+ z-index: 2;
157
176
  }
158
177
 
159
178
  &.is-main {
@@ -166,7 +185,7 @@ export class ColorsBuilder extends Builder {
166
185
  }
167
186
 
168
187
  .color-box:after {
169
- content: attr(data-color-name);
188
+ content: attr(data-color-shade-number);
170
189
  box-sizing: border-box;
171
190
  display: block;
172
191
  color: black;
@@ -201,7 +220,7 @@ export class ColorsBuilder extends Builder {
201
220
  padding: 8px;
202
221
  animation: float-up 800ms;
203
222
  animation-timing-function: ease-out;
204
- z-index: 2;
223
+ z-index: 3;
205
224
  }
206
225
  </style>
207
226
  </head>
@@ -212,9 +231,11 @@ export class ColorsBuilder extends Builder {
212
231
  document.addEventListener("click", (event) => {
213
232
  navigator.clipboard.writeText(
214
233
  \`var(--color-\${event.target.getAttribute(
215
- "data-color-group"
234
+ "data-color-group-name"
216
235
  )}-\${event.target.getAttribute(
217
236
  "data-color-name"
237
+ )}-\${event.target.getAttribute(
238
+ "data-color-shade-number"
218
239
  )})\`
219
240
  );
220
241
  const toast = document.createElement("div");