Packages
moon
2.79.7
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
Current section
Files
Jump to
Current section
Files
lib/moon_web/components/started/for_designer.ex
defmodule MoonWeb.Components.Started.ForDesigner do
@moduledoc false
use MoonWeb, :stateless_component
alias MoonWeb.Components.PageSection
def render(assigns) do
~F"""
<video controls controlsList="nodownload" preload="" class="mb-12 rounded-moon-i-md w-full">
<source src="https://s3.amazonaws.com/cdn.coingaming.io/videos/gettingStartedDesigners.mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<PageSection
title="Components usage"
image={static_path(MoonWeb.Endpoint, "/images/started/usage.webp")}
>
<p class="text-trunks">
Use search to find components, each component in the library has its own
unique name, which corresponds to the name in the code.
</p>
<p>
Drag the component you are using to your work area (product templates).
Please note that there may be hidden layers inside the component to add
various elements. Components can be in different states depending on
your layout.
</p>
<p>
<span class="font-medium">Use the Figma - Variants</span> menu to
switch states.
</p>
</PageSection>
<PageSection
title="Colour convention and rules"
image={static_path(MoonWeb.Endpoint, "/images/started/colourRules.webp")}
>
<p class="text-trunks">What makes our color system different?</p>
<p>For that, we made a decision to give our colours unique names.</p>
<p>
Meet the <span class="font-medium">Dragon Ball Z approach</span>.
</p>
<p>
Each color name is assigned for specific purpose and for each product
these values are different.
</p>
</PageSection>
<PageSection
title="Product colours"
image={static_path(MoonWeb.Endpoint, "/images/started/productColours.webp")}
>
<p class="text-trunks">
How to create your own custom colours based on the Moon colour
convention.
</p>
<ul class="list-disc ps-8">
<li>
<span class="font-medium">Check</span> the guide for colours
</li>
<li>
<span class="font-medium">Duplicate</span> Colours file
</li>
<li>
<span class="font-medium">Replace</span> colour values one by one
</li>
<li>
<span class="font-medium">Publish</span> Library
</li>
<li>
<span class="font-medium">Enable</span> it from the "Asset panel"
</li>
<li>
<span class="font-medium">🎉 Enjoy</span> your new theme.
</li>
</ul>
</PageSection>
<PageSection
title="Typography"
image={static_path(MoonWeb.Endpoint, "/images/started/typography.webp")}
>
<p class="text-trunks">
Grid of font sizes for web and mobile devices used in components.
</p>
<p>Styles contain:</p>
<ul class="list-disc ps-8">
<li>font size</li>
<li>font weight</li>
<li>line height</li>
<li>letter spacing</li>
</ul>
<p>We also use 2 types of typo:</p>
<ul class="list-disc ps-8">
<li>
<span class="font-medium">Paragraph</span> - for regular text
</li>
<li>
<span class="font-medium">UI type</span> - for UI elements
(buttons, inputs, which helps developers)
</li>
</ul>
</PageSection>
<PageSection
title="Product tokens"
image={static_path(MoonWeb.Endpoint, "/images/started/tokens.webp")}
>
<p class="text-trunks">
Design tokens are the collections of variables that customise Moon
components for your product.
</p>
<ul class="list-disc ps-8">
<li>
<span class="font-medium">Find</span> tokens page in your copy of
the components file
</li>
<li>
<span class="font-medium">Change</span> the values to your product
ones
</li>
<li>
<span class="font-medium">Publish</span> Library
</li>
<li>
<span class="font-medium">Share</span> tokens with your product
front-end dev
</li>
<li>
<span class="font-medium">🎉 Enjoy</span> your new theme.
</li>
</ul>
</PageSection>
"""
end
end