Purple

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/controllers/graphics_controller.ex

@@ -21,6 +21,6 @@ defmodule ComponentsGuideWeb.GraphicsView do
   alias ComponentsGuideWeb.ThemeView
 
   def header_styles() do
-    ThemeView.banner_styles(:web_standards)
+    ThemeView.banner_styles(:graphics)
   end
 end

apps/components_guide_web/lib/components_guide_web/templates/graphics/postage_stamp_live.ex

@@ -4,13 +4,14 @@ defmodule ComponentsGuideWeb.Graphics.Live.PostageStamp do
   alias ComponentsGuideWeb.StylingHelpers
 
   defmodule State do
-    defstruct primary: "Primary", secondary: "Secondary", width: 400, height: 400, center_y: false
+    defstruct primary: "Primary", secondary: "Secondary", width: 400, height: 400, center_y: false, center_x: true
 
-    def to_url(%State{primary: primary, secondary: secondary, width: width, height: height, center_y: center_y}) do
+    def to_url(%State{primary: primary, secondary: secondary, width: width, height: height, center_y: center_y, center_x: center_x}) do
       # url = URI.parse("https://postage-stamp.collected.workers.dev/1/poster")
       url = URI.parse("https://postage-stamp.fly.dev/1/poster")
       query = [primary: primary, secondary: secondary, width: width, height: height]
       query = if center_y, do: Keyword.put(query, :centerY, ""), else: query
+      query = if center_x, do: Keyword.put(query, :centerX, ""), else: query
       url = put_in(url.query, URI.encode_query(query))
       url
     end
@@ -52,7 +53,7 @@ defmodule ComponentsGuideWeb.Graphics.Live.PostageStamp do
     
     <output>
       <img src="<%= url |> URI.to_string() %>" width="<%= @state.width %>" height="<%= @state.height %>">
-      <a class="inline-block bg-blue-500 rounded-full" href="<%= url |> URI.to_string() %>">Link to image</a>
+      <a class="inline-block px-2 bg-blue-500 rounded-full" href="<%= url |> URI.to_string() %>">Link to image</a>
     </output>
 
     </div>

apps/components_guide_web/lib/components_guide_web/views/theme_view.ex

@@ -66,9 +66,29 @@ defmodule ComponentsGuideWeb.ThemeView do
 
     "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
   end
+  
+  defp gradient_styles(:purple) do
+    l = 50
+    a = 54
+    b = -85
+
+    color = {:lab, l, a, b}
+
+    gradient = Styling.linear_gradient("150grad", [
+      {:lab, l * 1.5, a * 0.7, b * 2},
+      {:lab, l * 1.3, a * 0.8, b * 1.6},
+      {:lab, l * 1.1, a * 0.9, b * 1.2},
+      color,
+      {:lab, l * 0.9, a * 1.3, b * 0.7},
+      {:lab, l * 0.8, a * 1.7, b * 0.5},
+    ])
+
+    "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
+  end
 
   def banner_styles(:accessibility_first), do: gradient_styles(:cool_pink)
   def banner_styles(:web_standards), do: gradient_styles(:green)
   def banner_styles(:composable_systems), do: gradient_styles(:orange)
   def banner_styles(:react_typescript), do: gradient_styles(:blue)
+  def banner_styles(:graphics), do: gradient_styles(:purple)
 end