Extract gradients into themes

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/controllers/web_standards_controller.ex

@@ -19,19 +19,10 @@ end
 
 defmodule ComponentsGuideWeb.WebStandardsView do
   use ComponentsGuideWeb, :view
-
   use ComponentsGuideWeb.Snippets
+  alias ComponentsGuideWeb.ThemeView
 
   def header_styles() do
-    color = {:lab, 47, 10, -44}
-
-    gradient = Styling.linear_gradient("150grad", [
-      {:lab, 47, 5, -44},
-      {:lab, 47, -24, -44},
-      color,
-      {:lab, 47, 53, -44}
-    ])
-
-    "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
+    ThemeView.gradient(:green)
   end
 end

apps/components_guide_web/lib/components_guide_web/templates/landing/index.html.eex

@@ -46,21 +46,10 @@ subhead = "Learn about accessibility, TDD, BDD, naming, performance, and the lat
   </section>
 </div>
 
-<article class="text-white py-6" style="<%= sections_styles(:blue) %>">
-  <%= render ComponentsGuideWeb.ReactTypescriptView, "_top.html" %>
-</article>
-
-<article class="text-white py-6" style="<%= sections_styles(:warm) %>">
-  <%= render ComponentsGuideWeb.AccessibilityFirstView, "_top.html" %>
-</article>
-
-<article class="text-white text-shadow py-6" style="<%= sections_styles(:other) %>">
-  <%= render ComponentsGuideWeb.WebStandardsView, "_top.html" %>
-</article>
-
-<article class="text-white text-shadow py-6" style="<%= sections_styles(:orange) %>">
-  <%= render ComponentsGuideWeb.ComposableSystemsView, "_top.html" %>
-</article>
+<%= subject_banner(:accessibility_first) %>
+<%= subject_banner(:react_typescript) %>
+<%= subject_banner(:web_standards) %>
+<%= subject_banner(:composable_systems) %>
 
 <div hidden class="text-white">
   <section class="pt-20 pb-20" style="<%= sections_styles(:dark) %>">

apps/components_guide_web/lib/components_guide_web/views/landing_view.ex

@@ -1,5 +1,19 @@
 defmodule ComponentsGuideWeb.LandingView do
   use ComponentsGuideWeb, :view
+  alias ComponentsGuideWeb.ThemeView
+
+  defp subject_to_module(:web_standards), do: ComponentsGuideWeb.WebStandardsView
+  defp subject_to_module(:accessibility_first), do: ComponentsGuideWeb.AccessibilityFirstView
+  defp subject_to_module(:composable_systems), do: ComponentsGuideWeb.ComposableSystemsView
+  defp subject_to_module(:react_typescript), do: ComponentsGuideWeb.ReactTypescriptView
+
+  def subject_banner(subject) when is_atom(subject) do
+    ~E"""
+    <article class="text-white text-shadow py-6" style="<%= ThemeView.banner_styles(subject) %>">
+      <%= render subject_to_module(subject), "_top.html" %>
+    </article>
+    """
+  end
 
   def stack_list(items) do
     ~E"""

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

@@ -0,0 +1,74 @@
+defmodule ComponentsGuideWeb.ThemeView do
+  use ComponentsGuideWeb, :view
+
+  defp gradient_styles(:green) do
+    l = 62
+    a = -50
+    b = 20
+
+    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
+
+  defp gradient_styles(:cool_pink) do
+    color = {:lab, 47, 10, -44}
+
+    gradient = Styling.linear_gradient("150grad", [
+      {:lab, 47, 5, -44},
+      {:lab, 47, -24, -44},
+      color,
+      {:lab, 47, 53, -44}
+    ])
+
+    "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
+  end
+
+  defp gradient_styles(:blue) do
+    l = 0
+    a = -60
+    b = -90
+    color = {:lab, l, a, b}
+
+    gradient = Styling.linear_gradient("150grad", [
+      {:lab, l * 1.1, a * 1.1, b * 1.4},
+      color,
+      {:lab, l * 1.3, a * 0.5, b * 0.5},
+    ])
+
+    "background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
+  end
+
+  defp gradient_styles(:orange) do
+    l = 62
+    a = 51
+    b = 24
+
+    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)
+end