{% extends "templates/article.njk" %}
{% import "components/toc.njk" as toc with context %}
{% import "components/color.njk" as color with context %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="/assets/css/graphical-profile.css">
    <title>qwik - colours</title>
{% endblock %}

{% block header %}
    <img src="/assets/images/design-colors-showcase.svg" alt="A promotional image for our colour scheme.">
    Colours
    <i>Last updated 10th August 2021</i>
{% endblock %}

{% block main %}
    {{ toc.header("h1", "Basic colour rules") }}
    <p>
        We use Sea Green ({{  color.label("#3DDF89") }}) as our primary colour, and Hacky Cyan ({{  color.label("#4CDCDF") }})
        and Sky Blue ({{  color.label("#4C9CEF") }}) as accents. We use Sea Green for things like titles, H1s, and buttons.
        For all other HXs we use Hacky Cyan. We use Sky Blue for links.
    </p>

    {{ toc.header("h1", "Colour Scheme") }}
    <p>
        We have a kind of large colour scheme, although most colours are usually unused. When creating official qwik material
        only these colours should be used. The colour scheme is crafted by BurnyLlama, but is of course freely available to anyone
        outside qwik (as we believe owning colours would be a stupid idea).
    </p>
    {{ toc.header("h2", "Colours") }}
    <div class="color-list">
        {{ color.palette("Apple Red",        ["#BF3638", "#D5484A", "#EF5255", "#FA7A7C", "#FA999A"]) }}
        {{ color.palette("Fruity Orange",    ["#AF6118", "#DA7516", "#EB801B", "#F99434", "#F9AE67"]) }}
        {{ color.palette("Pineapple Yellow", ["#BD920F", "#DFAC11", "#F4C025", "#FFD147", "#FFE38F"]) }}
        {{ color.palette("Pear Green",       ["#7D9A37", "#96BB3E", "#AED651", "#C2E571", "#DBF1A7"]) }}
        {{ color.palette("Parakeet Green",   ["#53A545", "#61C350", "#72D661", "#93E684", "#BCF0B2"]) }}
        {{ color.palette("Sea Green",        ["#2AA764", "#2ACB75", "#3DDF89", "#5DEEA1", "#A9F4CC"]) }}
        {{ color.palette("Hacky Cyan",       ["#2CA3A5", "#2DCACD", "#4CDCDF", "#6BE8EB", "#B7EFF0"]) }}
        {{ color.palette("Sky Blue",         ["#1C67B5", "#2A83DF", "#4C9CEF", "#74B6FB", "#A3CEFA"]) }}
        {{ color.palette("Vivid Indigo",     ["#2143CA", "#3457E5", "#4C6DEF", "#748FFB", "#B1C0FC"]) }}
        {{ color.palette("Royal Purple",     ["#613FD9", "#7C5DE9", "#967CF4", "#BCAAFD", "#CFC2FE"]) }}
        {{ color.palette("Popping Magenta",  ["#B63AB0", "#D152CB", "#E175DB", "#EC9AEF", "#EFB1F1"]) }}
        {{ color.palette("Flower Pink",      ["#D0356D", "#E2407C", "#EE588F", "#FA80AC", "#FBA7C6"]) }}
    </div>

    {{ toc.header("h2", "Greyscale") }}
    <p>
        Internally we call our greyscale <i>Mighty Greyscale</i>, although that's kinda arbitrary.
        Our main background colour is {{ color.label("#10102F", "border: 1px solid var(--grey5);") }}.
        You can use {{ color.label("#00001F", "border: 1px solid var(--grey5);") }} for drop-shadows,
        and {{ color.label("#20203F", "border: 1px solid var(--grey5);") }} to "elevate" elements.
    </p>
    <div class="color-list">
        {{ color.palette("", ["#00001F", "#10102F", "#20203F", "#30304F", "#40405F"]) }}
        {{ color.palette("", ["#50506F", "#60607F", "#70708F", "#80809F", "#9090AF"]) }}
        {{ color.palette("", ["#A0A0BF", "#B0B0CF", "#C0C0DF", "#D0D0EF", "#E0E0FF"]) }}
    </div>

{% endblock %}