Packages
moon
2.90.5
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/typography_page.ex
defmodule MoonWeb.Pages.TypographyPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.Page
alias MoonWeb.Components.ExampleAndCode
data(breadcrumbs, :any,
default: [
%{
to: "/typography",
name: "Typography"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Typography">
<p>Typography includes text, headings, and captions.</p>
</ComponentPageDescription>
<ExampleAndCode id="text_1" title="Text">
<:example>
<div class="flex flex-col gap-2 w-full">
<p class="text-moon-9 transition-colors">Size 9</p>
<p class="text-moon-10 transition-colors">Size 10</p>
<p class="text-moon-12 transition-colors">Size 12</p>
<p class="text-moon-14 transition-colors">Size 14</p>
<p class="text-moon-16 transition-colors">Size 16</p>
<p class="text-moon-18 transition-colors">Size 18</p>
<p class="text-moon-20 transition-colors">Size 20</p>
<p class="text-moon-24 transition-colors">Size 24</p>
<p class="text-moon-32 transition-colors">Size 32</p>
<p class="text-moon-48 transition-colors">Size 48</p>
<p class="text-moon-56 transition-colors">Size 56</p>
<p class="text-moon-64 transition-colors">Size 64</p>
<p class="text-moon-72 transition-colors">Size 72</p>
</div>
</:example>
<:code>{get_example_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="text_2" title="Heading">
<:example>
<div class="flex flex-col gap-2 w-full">
<h3 class="text-moon-9 font-medium transition-colors">Size 9</h3>
<h3 class="text-moon-10 font-medium transition-colors">Size 10</h3>
<h3 class="text-moon-12 font-medium transition-colors">Size 12</h3>
<h3 class="text-moon-14 font-medium transition-colors">Size 14</h3>
<h3 class="text-moon-16 font-medium transition-colors">Size 16</h3>
<h3 class="text-moon-18 font-medium transition-colors">Size 18</h3>
<h3 class="text-moon-20 font-medium transition-colors">Size 20</h3>
<h3 class="text-moon-24 font-medium transition-colors">Size 24</h3>
<h3 class="text-moon-32 font-medium transition-colors">Size 32</h3>
<h3 class="text-moon-48 font-medium transition-colors">Size 48</h3>
<h3 class="text-moon-56 font-medium transition-colors">Size 56</h3>
<h3 class="text-moon-64 font-medium transition-colors">Size 64</h3>
<h3 class="text-moon-72 font-medium transition-colors">Size 72</h3>
</div>
</:example>
<:code>{get_example_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="text_3" title="Caption">
<:example>
<div class="flex flex-col gap-2 w-full">
<span class="text-moon-9-caption uppercase transition-colors">
Size 9
</span>
<span class="text-moon-10-caption uppercase transition-colors">
Size 10
</span>
</div>
</:example>
<:code>{get_example_3_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="text_4" title="Custom Colours">
<:example>
<div class="flex justify-around gap-2 w-full">
<p class="text-trunks">Trunks</p>
<p class="text-piccolo">Piccolo</p>
<p class="text-roshi">Roshi</p>
<p class="text-chichi">Chichi</p>
</div>
</:example>
<:code>{get_example_4_code()}</:code>
</ExampleAndCode>
</Page>
"""
end
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def get_example_1_code() do
"""
<div class="flex flex-col gap-2 w-full">
<p class="text-moon-9 transition-colors">Size 9</p>
<p class="text-moon-10 transition-colors">Size 10</p>
<p class="text-moon-12 transition-colors">Size 12</p>
<p class="text-moon-14 transition-colors">Size 14</p>
<p class="text-moon-16 transition-colors">Size 16</p>
<p class="text-moon-18 transition-colors">Size 18</p>
<p class="text-moon-20 transition-colors">Size 20</p>
<p class="text-moon-24 transition-colors">Size 24</p>
<p class="text-moon-32 transition-colors">Size 32</p>
<p class="text-moon-48 transition-colors">Size 48</p>
<p class="text-moon-56 transition-colors">Size 56</p>
<p class="text-moon-64 transition-colors">Size 64</p>
<p class="text-moon-72 transition-colors">Size 72</p>
</div>
"""
end
def get_example_2_code() do
"""
<div class="flex flex-col gap-2 w-full">
<h3 class="text-moon-9 font-medium transition-colors">Size 9</h3>
<h3 class="text-moon-10 font-medium transition-colors">Size 10</h3>
<h3 class="text-moon-12 font-medium transition-colors">Size 12</h3>
<h3 class="text-moon-14 font-medium transition-colors">Size 14</h3>
<h3 class="text-moon-16 font-medium transition-colors">Size 16</h3>
<h3 class="text-moon-18 font-medium transition-colors">Size 18</h3>
<h3 class="text-moon-20 font-medium transition-colors">Size 20</h3>
<h3 class="text-moon-24 font-medium transition-colors">Size 24</h3>
<h3 class="text-moon-32 font-medium transition-colors">Size 32</h3>
<h3 class="text-moon-48 font-medium transition-colors">Size 48</h3>
<h3 class="text-moon-56 font-medium transition-colors">Size 56</h3>
<h3 class="text-moon-64 font-medium transition-colors">Size 64</h3>
<h3 class="text-moon-72 font-medium transition-colors">Size 72</h3>
</div>
"""
end
def get_example_3_code() do
"""
<div class="flex flex-col gap-2 w-full">
<span class="text-moon-9-caption uppercase transition-colors">
Size 9
</span>
<span class="text-moon-10-caption uppercase transition-colors">
Size 10
</span>
</div>
"""
end
def get_example_4_code() do
"""
<div class="flex justify-around p-4 gap-2 w-full">
<p class="text-trunks">Trunks</p>
<p class="text-piccolo">Piccolo</p>
<p class="text-roshi">Roshi</p>
<p class="text-chichi">Chichi</p>
</div>
"""
end
end