feat: Updates styles

Sources/Styleguide/Buttons.swift

@@ -11,8 +11,10 @@ public struct SubmitButton: HTML, Sendable {
     button(
       .type(.submit),
       .class("""
-        w-full \(bg: .blue) \(text: .yellow) font-bold py-3 rounded-md
-        hover:\(bg: .darkBlue) transition-colors
+        w-full font-bold py-3 rounded-md transition-colors
+        bg-yellow-300 dark:bg-blue-500
+        hover:bg-yellow-400 hover:dark:bg-blue-600
+        text-blue-500 dark:text-yellow-300
       """)
     ) { label }
   }

Sources/Styleguide/Colors.swift

@@ -32,12 +32,16 @@ public enum Color {
   }
 
   public enum BorderColor: Sendable {
+    case blue
+    case darkGray
     case darkYellow
     case gray
     case yellow
 
     var color: String {
       switch self {
+      case .blue: return "border-blue-500"
+      case .darkGray: return "border-gray-400"
       case .darkYellow: return "border-yellow-800"
       case .gray: return "border-gray-300"
       case .yellow: return "border-yellow-300"

Sources/Styleguide/FormElements.swift

@@ -18,7 +18,7 @@ public struct FormHeader: HTML, Sendable {
 
   public var content: some HTML {
     LabeledContent {
-      h2(.class("text-2xl font-extrabold dark:\(text: .white)")) { label }
+      h2(.class("text-2xl font-extrabold text-gray-600 dark:text-slate-200")) { label }
     } label: {
       SVG(svg, color: .blue)
     }
@@ -50,8 +50,8 @@ public struct Input: HTML, Sendable {
     input(
       .id(id), .placeholder(placeholder), .name(name ?? id),
       .class("""
-        w-full px-4 py-2 border \(border: .gray) rounded-md focus:ring-2
-        focus:ring-yellow-800 focus:border-yellow-800 \(text: .darkGray) dark:\(text: .white)
+        w-full px-4 py-2 border border-gray-300 dark:border-gray-400 rounded-md focus:ring-2
+        focus:ring-yellow-800 focus:border-yellow-800 text-blue-600 dark:text-gray-300
       """)
     )
   }
@@ -74,7 +74,7 @@ public struct InputLabel<InputLabel: HTML>: HTML {
   public var content: some HTML<HTMLTag.label> {
     label(
       .for(forInputId),
-      .class("block text-sm font-medium \(text: .darkGray) dark:\(text: .gray) mb-2")
+      .class("block text-sm font-medium text-blue-500 dark:text-gray-300 mb-2")
     ) {
       self.inputLabel
     }

Sources/Styleguide/ResultContainer.swift

@@ -10,8 +10,12 @@ public struct ResultContainer<Body: HTML>: HTML {
   }
 
   public var content: some HTML {
-    div(.class("mt-6 p-6 bg-blue-50 dark:bg-slate-400 rounded-lg")) {
-      h3(.class("text-xl font-semibold \(text: .darkGray) mb-4")) { "Results" }
+    div(.class("""
+      mt-6 p-6 rounded-lg border border-blue-500
+      bg-blue-50 dark:bg-slate-600
+      text-blue-500 dark:text-slate-200
+    """)) {
+      h3(.class("text-xl font-semibold mb-4")) { "Results" }
       body
     }
   }