Packages
moon
2.82.0
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/pages/tokens_page.ex
defmodule MoonWeb.Pages.TokensPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Link
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.Page
alias MoonWeb.Components.TokensTable
data(breadcrumbs, :any,
default: [
%{
to: "/tokens",
name: "Tokens"
}
]
)
data(border_radius_array, :list,
default: [
%{
:property => ~c"XS interactive border radius",
:css => ~c"--radius-i-xs",
:key => ~c"rounded-moon-i-xs",
:value => ~c"4px"
},
%{
:property => ~c"SM interactive border radius",
:css => ~c"--radius-i-sm",
:key => ~c"rounded-moon-i-sm",
:value => ~c"8px"
},
%{
:property => ~c"MD interactive border radius",
:css => ~c"--radius-i-md",
:key => ~c"rounded-moon-i-md",
:value => ~c"12px"
},
%{
:property => ~c"XS surface border radius",
:css => ~c"--radius-s-xs",
:key => ~c"rounded-moon-s-xs",
:value => ~c"4px"
},
%{
:property => ~c"SM surface border radius",
:css => ~c"--radius-s-sm",
:key => ~c"rounded-moon-s-sm",
:value => ~c"8px"
},
%{
:property => ~c"MD surface border radius",
:css => ~c"--radius-s-md",
:key => ~c"rounded-moon-s-md",
:value => ~c"12px"
},
%{
:property => ~c"LG surface border radius",
:css => ~c"--radius-s-lg",
:key => ~c"rounded-moon-s-lg",
:value => ~c"16px"
}
]
)
data(box_shadow_style_array, :list,
default: [
%{
:property => ~c"XS box shadow",
:css => ~c"--shadow-xs",
:key => ~c"shadow-moon-xs",
:value => ~c"0 4px 12px -6px rgb(0 0 0 / 0.06)"
},
%{
:property => ~c"SM box shadow",
:css => ~c"--shadow-sm",
:key => ~c"shadow-moon-sm",
:value => ~c"0 6px 6px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4)"
},
%{
:property => ~c"MD box shadow",
:css => ~c"--shadow-md",
:key => ~c"shadow-moon-md",
:value => ~c"0 12px 12px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4)"
},
%{
:property => ~c"LG box shadow",
:css => ~c"--shadow-lg",
:key => ~c"shadow-moon-lg",
:value => ~c"0 8px 24px -6px rgb(0 0 0 / 0.16), 0 0 1px rgb(0 0 0 / 0.4)"
},
%{
:property => ~c"XL box shadow",
:css => ~c"--shadow-xl",
:key => ~c"shadow-moon-xl",
:value =>
~c"0 32px 32px -8px rgb(0 0 0 / 0.08), 0 0 32px -8px rgb(0 0 0 / 0.12), 0 0 1px rgb(0 0 0 / 0.2)"
}
]
)
data(opacity, :list,
default: [
%{
:property => ~c"Opacity",
:css => ~c"--opacity-moon",
:key => ~c"opacity-moon",
:value => ~c"0.6"
}
]
)
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Tokens" image="facing/tokens.webp">
<p>Design tokens are <span class="font-semibold">all the values needed to construct and maintain a design system</span> — spacing, color, typography, object styles, animation, etc.</p>
<p>These can represent anything defined by design: a color as a HEX value, an opacity as a number, an animation ease as Bezier coordinates.</p>
<p>They're used in place of hard-coded values in order to ensure flexibility and unity across all multi-product experiences.</p>
<p>Design tokens are directly integrated into our component libraries. They cover the various options of platform scales, color themes, and more.</p>
<h2 class="text-moon-20 font-semibold">How to create your own custom theme based and use it for your product.</h2>
<ul class="list-decimal list-inside">
<li>Create your product <Link
to="https://github.com/coingaming/moon/tree/main/priv/static/themes"
target="_black"
rel="noreferrer"
is_underline="underline"
>theme template file</Link>.</li>
<li>Check the <Link to="/colours" is_underline="underline">guide for colours</Link>.</li>
<li>Replace colour values one by one.</li>
<li>Change the values to your product ones.</li>
<li>Publish your changes.</li>
<li>Share tokens with your product front-end developers.</li>
<li>Enjoy your new theme! 🎉</li>
</ul>
</ComponentPageDescription>
<TokensTable title="Border Radius" data={@border_radius_array} />
<TokensTable title="Box Shadow" data={@box_shadow_style_array} />
<TokensTable title="Opacity" data={@opacity} />
</Page>
"""
end
end