{% set hasSidebar = true %}
{% set hasOutline = true %}
{% set paletteId = page.fileSlug %}
{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}

{% extends '../_includes/base.njk' %}

{% block head %}
<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
<link href="{{ page.url }}../tweak.css" rel="stylesheet">
<script type="module" src="{{ page.url }}../tweak.js"></script>
{% endblock %}

{% block header %}
<div id="palette-app" data-palette-id="{{ paletteId }}">
  <div
  :class="{
    tweaking: tweaking.chroma,
    'tweaking-chroma': tweaking.chroma,
    'tweaking-hue': tweaking.chroma,
    'tweaked-chroma': tweaked.chroma,
    'tweaked-hue': tweaked.hue,
    'tweaked-any': tweaked.chroma || tweaked.hue
  }"
  :style="{ '--chroma-scale': chromaScale }">

  {% include 'breadcrumbs.njk' %}

  <h1 v-if="saved" class="title">
    {% raw %}{{ saved.title }}{% endraw %}
    <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
    <wa-icon-button class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
  </h1>
  <h1 v-if="!saved" class="title">{{ title }}</h1>

  <div class="block-info">
    <code class="class">.wa-palette-{{ paletteId }}</code>
    {% include '../_includes/status.njk' %}
  </div>
  {% if description %}
  <p class="summary">
    {{ description | inlineMarkdown | safe }}
  </p>
  {% endif %}
{% endblock %}

{% block afterContent %}

{% set maxChroma = 0 %}

<wa-callout size="small" class="tweaked-callout" variant="brand">
  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
   This palette has been tweaked.
   <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="removeTweak(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>

  <wa-button @click="reset" appearance="outlined">
    <span slot="prefix" class="icon-modifier">
      <wa-icon name="circle-xmark" variant="regular"></wa-icon>
    </span>
    Reset
  </wa-button>
  <wa-button v-if="!saved" @click="save">
    <span slot="prefix" class="icon-modifier">
      <wa-icon name="sidebar" variant="regular"></wa-icon>
      <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
    </span>
    Save
  </wa-button>
</wa-callout>

<table class="colors main wa-palette-{{ paletteId }}">
  <thead>
    <tr>
      <th></th>
      <th class="core-column">Core tint</th>
      {% for tint in tints -%}
      <th>{{ tint }}</th>
      {%- endfor %}
    </tr>
  </thead>
{# Initialize to last hue before gray #}
{%- set hueBefore = hues[hues|length - 2] -%}
{% for hue in hues -%}
{%- set coreColor = palettes[paletteId][hue][palettes[paletteId][hue].maxChromaTint] -%}
{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
<tr data-hue="{{ hue }}" class="color-scale" :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
  <th>
    {{ hue | capitalize }}
  </th>
  <td class="core-column" style="--color: var(--wa-color-{{ hue }})">
    {% if hue !== 'gray' %}
    {%- set hueAfter = hues[loop.index0 + 1] -%}
    {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
    {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
    {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
    <wa-dropdown>
    <div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
      {{ palettes[paletteId][hue].maxChromaTint }}
      <wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
    </div>
    <div class="popup">
      <div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
        <wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
          min="{{ minShift }}" max="{{ maxShift }}" step="1"
          @input="tweaking.hue = tweaking.{{hue}} = true"
          @change="tweaking.hue = tweaking.{{ hue }} = false">
          <div slot="label">
            Tweak {{ hue }} hue
            <wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
          </div>
        </wa-slider>
        <div class="label-min">More {{hueBefore}}</div>
        <div class="label-max">More {{hueAfter}}</div>
      </div>
      <div class="wa-gap-s">
        <code>--wa-color-{{ hue }}</code>
        <wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
      </div>
    </div>`
    </wa-dropdown>
    {%- set hueBefore = hue -%}
    {% else %}
    <div id="core-{{ hue }}-swatch" class="color swatch" data-tint="core" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});">
      {{ palettes[paletteId][hue].maxChromaTint }}
    </div>
    {% endif %}
  </td>
  {% for tint in tints -%}
    {%- set color = palettes[paletteId][hue][tint] -%}
    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
      </div>
    </td>
  {%- endfor -%}
</tr>
{%- endfor %}
</table>

{% set chromaScaleBounds = [
(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
:class="{ tweaked: chromaScale !== 1 }"
style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
  <wa-slider name="chroma-scale" v-model="chromaScale" value="1" step="0.01"
    min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
    @input="tweaking.chroma = true"
    @change="tweaking.chroma = false">
    <div slot="label">
      Overall colorfulness
      <wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
    </div>
  </wa-slider>
  <div class="label-min">More muted</div>
  <div class="label-max">More vibrant</div>
</div>

<h2>Used By</h2>

<section class="index-grid">
{% for page in collections.theme %}
  {%- if page.data.palette == paletteId -%}
    {% include "page-card.njk" %}
  {%- endif -%}
{% endfor %}
</section>

{% markdown %}
## Color Contrast

Web Awesome color scales are designed to guarantee certain contrast ratios,
both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
as well as the emergent APCA specification _(planned)_,
so you can ensure that text is both legible to all users, and legally conformant.

### Level 1

A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
{% endmarkdown %}

{% set difference = 40 %}
{% set minContrast = 3 %}
{% include "contrast-table.njk" %}

{% markdown %}

This also goes for a difference of `45`:

{% endmarkdown %}

{% set difference = 45 %}
{% include "contrast-table.njk" %}

{% markdown %}

### Level 2

A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
{% endmarkdown %}

{% set difference = 50 %}
{% set minContrast = 4.5 %}
{% include "contrast-table.njk" %}

{% markdown %}

This also goes for a difference of `55`:

{% endmarkdown %}

{% set difference = 55 %}
{% include "contrast-table.njk" %}

{% markdown %}
### Level 3

A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
{% endmarkdown %}

{% set difference = 60 %}
{% set minContrast = 7 %}
{% include "contrast-table.njk" %}

{% markdown %}

This also goes for a difference of `65`:

{% endmarkdown %}

{% set difference = 65 %}
{% include "contrast-table.njk" %}

{% markdown %}
## How to use this palette { #usage }

If you are using a Web Awesome theme that uses this palette, it will already be included.
To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.

{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
<wa-tab-group class="import-stylesheet-code">
<wa-tab panel="html">In HTML</wa-tab>
<wa-tab panel="css">In CSS</wa-tab>
<wa-tab-panel name="html">

Add the following code to the `<head>` of your page:
```html { v-content:html="code.html.highlighted" }
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
```
</wa-tab-panel>
<wa-tab-panel name="css">

Add the following code at the top of your CSS file:
```css { v-content:html="code.css.highlighted" }
@import url('{% cdnUrl stylesheet %}');
```
</wa-tab-panel>
</wa-tab-group>


{% endmarkdown %}
</div></div> {# end palette app #}
{% endblock %}


