@sealcode/sealgen 0.17.12 → 0.17.14

package/lib/builders/colors-builder.js

@@ -65,13 +65,21 @@ class ColorsBuilder extends Builder {
     const color_groups = JSON.parse(output.stdout);
     let css_colors = "";
     let html_colors = "";
-    function html_color_box(color, shade_no, is_main = false) {
+    function html_color_box({
+      color,
+      shade_no,
+      name,
+      group_name,
+      is_main = false
+    }) {
       return (
         /* HTML */
         `<div
 				class="color-box ${colord(color).isDark() ? "is-dark" : ""} ${is_main ? "is-main" : ""}"
 				style="background-color: ${color}; order: ${parseInt(shade_no)}"
-				data-color-name="${shade_no}"
+				data-color-name="${name}"
+				data-color-group-name="${group_name}"
+				data-color-shade-number="${shade_no}"
 			></div>`
       );
     }
@@ -85,20 +93,27 @@ class ColorsBuilder extends Builder {
         const main_color = color_info.color;
         css_colors += `--color-${group_name}-${color_name}: ${main_color};`;
         const main_l = colord(main_color).toHsl().l;
-        html_colors += html_color_box(
-          main_color,
-          Math.round((main_l - main_l % 10) / 10).toString().padStart(2, "0"),
-          true
-        );
+        html_colors += html_color_box({
+          color: main_color,
+          name: color_name,
+          shade_no: Math.round((main_l - main_l % 10) / 10).toString().padStart(2, "0"),
+          is_main: true,
+          group_name
+        });
         color_info.shades.forEach((shaded_color, index) => {
+          const shade_no = index.toString().padStart(2, "0");
+          css_colors += `--color-${group_name}-${color_name}-${shade_no}: ${shaded_color};`;
           if (Math.abs(
             colord(shaded_color).toHsl().l - colord(main_color).toHsl().l
           ) < 10) {
             return;
           }
-          const shade_no = index.toString().padStart(2, "0");
-          css_colors += `--color-${group_name}-${color_name}-shade${shade_no}: ${shaded_color};`;
-          html_colors += html_color_box(shaded_color, shade_no);
+          html_colors += html_color_box({
+            color: shaded_color,
+            shade_no,
+            name: color_name,
+            group_name
+          });
         });
         html_colors += `</div>`;
       }
@@ -128,12 +143,14 @@ class ColorsBuilder extends Builder {
 							.color-box {
 								width: 100px;
 								height: 100px;
-								transition: all 50ms;
+								transition: transform 50ms;
 								transition-timing-function: ease-in-out;
+								transform: scale(1);
 								cursor: pointer;
 
 								&:hover {
 									transform: scale(1.1);
+									z-index: 2;
 								}
 
 								&.is-main {
@@ -146,7 +163,7 @@ class ColorsBuilder extends Builder {
 							}
 
 							.color-box:after {
-								content: attr(data-color-name);
+								content: attr(data-color-shade-number);
 								box-sizing: border-box;
 								display: block;
 								color: black;
@@ -181,7 +198,7 @@ class ColorsBuilder extends Builder {
 								padding: 8px;
 								animation: float-up 800ms;
 								animation-timing-function: ease-out;
-								z-index: 2;
+								z-index: 3;
 							}
 						</style>
 					</head>
@@ -192,9 +209,11 @@ class ColorsBuilder extends Builder {
 						document.addEventListener("click", (event) => {
 							navigator.clipboard.writeText(
 								\`var(--color-\${event.target.getAttribute(
-									"data-color-group"
+									"data-color-group-name"
 								)}-\${event.target.getAttribute(
 									"data-color-name"
+								)}-\${event.target.getAttribute(
+									"data-color-shade-number"
 								)})\`
 							);
 							const toast = document.createElement("div");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.17.12",
+	"version": "0.17.14",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

package/src/builders/colors-builder.ts

@@ -75,17 +75,27 @@ export class ColorsBuilder extends Builder {
 		let css_colors = "";
 		let html_colors = "";
 
-		function html_color_box(
-			color: string,
-			shade_no: string,
-			is_main = false
-		) {
+		function html_color_box({
+			color,
+			shade_no,
+			name,
+			group_name,
+			is_main = false,
+		}: {
+			color: string;
+			shade_no: string;
+			name: string;
+			group_name: string;
+			is_main?: boolean;
+		}) {
 			return /* HTML */ `<div
 				class="color-box ${colord(color).isDark()
 					? "is-dark"
 					: ""} ${is_main ? "is-main" : ""}"
 				style="background-color: ${color}; order: ${parseInt(shade_no)}"
-				data-color-name="${shade_no}"
+				data-color-name="${name}"
+				data-color-group-name="${group_name}"
+				data-color-shade-number="${shade_no}"
 			></div>`;
 		}
 
@@ -99,25 +109,33 @@ export class ColorsBuilder extends Builder {
 				const main_color = color_info.color;
 				css_colors += `--color-${group_name}-${color_name}: ${main_color};`;
 				const main_l = colord(main_color).toHsl().l;
-				html_colors += html_color_box(
-					main_color,
-					Math.round((main_l - (main_l % 10)) / 10)
+				html_colors += html_color_box({
+					color: main_color,
+					name: color_name,
+					shade_no: Math.round((main_l - (main_l % 10)) / 10)
 						.toString()
 						.padStart(2, "0"),
-					true
-				);
+					is_main: true,
+					group_name,
+				});
 				color_info.shades.forEach((shaded_color, index) => {
+					const shade_no = index.toString().padStart(2, "0");
+					css_colors += `--color-${group_name}-${color_name}-${shade_no}: ${shaded_color};`;
 					if (
 						Math.abs(
 							colord(shaded_color).toHsl().l -
 								colord(main_color).toHsl().l
 						) < 10
 					) {
+						// this color is already in HTML as the main color, skipping adding it to html to avoid duplication
 						return;
 					}
-					const shade_no = index.toString().padStart(2, "0");
-					css_colors += `--color-${group_name}-${color_name}-shade${shade_no}: ${shaded_color};`;
-					html_colors += html_color_box(shaded_color, shade_no);
+					html_colors += html_color_box({
+						color: shaded_color,
+						shade_no,
+						name: color_name,
+						group_name,
+					});
 				});
 				html_colors += `</div>`;
 			}
@@ -148,12 +166,14 @@ export class ColorsBuilder extends Builder {
 							.color-box {
 								width: 100px;
 								height: 100px;
-								transition: all 50ms;
+								transition: transform 50ms;
 								transition-timing-function: ease-in-out;
+								transform: scale(1);
 								cursor: pointer;
 
 								&:hover {
 									transform: scale(1.1);
+									z-index: 2;
 								}
 
 								&.is-main {
@@ -166,7 +186,7 @@ export class ColorsBuilder extends Builder {
 							}
 
 							.color-box:after {
-								content: attr(data-color-name);
+								content: attr(data-color-shade-number);
 								box-sizing: border-box;
 								display: block;
 								color: black;
@@ -201,7 +221,7 @@ export class ColorsBuilder extends Builder {
 								padding: 8px;
 								animation: float-up 800ms;
 								animation-timing-function: ease-out;
-								z-index: 2;
+								z-index: 3;
 							}
 						</style>
 					</head>
@@ -212,9 +232,11 @@ export class ColorsBuilder extends Builder {
 						document.addEventListener("click", (event) => {
 							navigator.clipboard.writeText(
 								\`var(--color-\${event.target.getAttribute(
-									"data-color-group"
+									"data-color-group-name"
 								)}-\${event.target.getAttribute(
 									"data-color-name"
+								)}-\${event.target.getAttribute(
+									"data-color-shade-number"
 								)})\`
 							);
 							const toast = document.createElement("div");