change(themes): replace css popup with library modal

assets/css/output.css

@@ -959,6 +959,10 @@ body {
   max-width: 24rem;
 }
 
+.max-w-xl {
+  max-width: 36rem;
+}
+
 .max-w-xs {
   max-width: 20rem;
 }
@@ -1681,14 +1685,14 @@ body {
   opacity: 1;
 }
 
-.opacity-80 {
-  opacity: 0.8;
-}
-
 .opacity-50 {
   opacity: 0.5;
 }
 
+.opacity-80 {
+  opacity: 0.8;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);

assets/js/theme-customizer.js

@@ -536,7 +536,6 @@ function themeCustomizer() {
     theme: "zinc",
     radius: "0.5",
     mode: "light",
-    showCodePopup: false,
     generatedCSS: "",
 
     init() {
@@ -573,13 +572,8 @@ function themeCustomizer() {
       preview.style.setProperty("--radius", `${this.radius}rem`);
     },
 
-    openCodePopup() {
+    getGeneratedCSS() {
       this.generatedCSS = this.generateCSS();
-      this.showCodePopup = true;
-    },
-
-    closeCodePopup() {
-      this.showCodePopup = false;
     },
 
     generateCSS() {

internals/ui/pages/themes.templ

@@ -150,39 +150,34 @@ templ ThemeCustomizer(props ThemeCustomizerProps) {
 			@RadiusSelector()
 			@ModeSelector()
 		</div>
-		@components.Button(components.ButtonProps{
-			Text:    "Generate and Copy CSS",
-			Variant: "primary",
-			Attributes: templ.Attributes{
-				"@click": "openCodePopup",
-			},
-		})
-		<div x-show="showCodePopup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style="display: none;">
-			@components.Card(components.CardProps{Attributes: templ.Attributes{}}) {
-				@components.CardHeader() {
-					@components.CardTitle() {
-						Generated CSS Code
-					}
-				}
-				@components.CardContent() {
-					<pre x-text="generatedCSS" class="text-primary p-4 rounded overflow-x-auto max-h-96"></pre>
-				}
-				@components.CardFooter() {
-					<div class="flex gap-2">
-						@components.Button(components.ButtonProps{
-							Text:       "Copy to Clipboard",
-							Variant:    "primary",
-							Attributes: templ.Attributes{"@click": "copyToClipboard"},
-						})
-						@components.Button(components.ButtonProps{
-							Text:       "Close",
-							Variant:    "secondary",
-							Attributes: templ.Attributes{"@click": "closeCodePopup"},
-						})
-					</div>
-				}
+		@components.ModalTrigger("css-modal") {
+			@components.Button(components.ButtonProps{Text: "Generate and Copy CSS", FullWidth: true, Attributes: templ.Attributes{
+				"@click": "getGeneratedCSS",
+			}})
+		}
+		@components.Modal(components.ModalProps{ID: "css-modal", Class: "max-w-xl"}) {
+			@components.ModalHeader() {
+				Generated CSS Code
 			}
-		</div>
+			@components.ModalBody() {
+				<pre x-text="generatedCSS" class="text-primary p-4 rounded overflow-x-auto max-h-96"></pre>
+			}
+			@components.ModalFooter() {
+				<div class="flex gap-2">
+					@components.Button(components.ButtonProps{
+						Text:       "Copy to Clipboard",
+						Variant:    "primary",
+						Attributes: templ.Attributes{"@click": "copyToClipboard"},
+					})
+					@components.ModalClose("css-modal") {
+						@components.Button(components.ButtonProps{
+							Text:    "Close",
+							Variant: "secondary",
+						})
+					}
+				</div>
+			}
+		}
 	</div>
 }
 

pkg/styles/goilerplate.css

@@ -1401,14 +1401,14 @@ body {
   opacity: 1;
 }
 
-.opacity-80 {
-  opacity: 0.8;
-}
-
 .opacity-50 {
   opacity: 0.5;
 }
 
+.opacity-80 {
+  opacity: 0.8;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1712,10 +1712,6 @@ body {
   opacity: 0.5;
 }
 
-.peer:disabled ~ .peer-disabled\:opacity-70 {
-  opacity: 0.7;
-}
-
 .dark\:text-gray-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));