{% 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,
    'tweaking-gray-chroma': tweaking.grayChroma,
    'tweaked-chroma': tweaked?.chroma,
    'tweaked-hue': tweaked?.hue,
    'tweaked-any': tweaked
  }"
  :style="{
    '--chroma-scale': chromaScale,
    '--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
    }">

  {% include 'breadcrumbs.njk' %}

  <h1 class="title">
    <span v-content="title">{{ title }}</span>
    <template v-if="saved || tweaked">
      <wa-button appearance="plain" size="small" @click="rename">
        <wa-icon name="pencil" label="Rename palette"></wa-icon>
      </wa-button>
      <wa-button appearance="plain" size="small" v-if="saved" class="delete" @click="deleteSaved">
        <wa-icon name="trash" label="Delete palette"></wa-icon>
      </wa-button>
      <wa-button @click="save()" :disabled="!unsavedChanges"
        :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
        <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
      </wa-button>
    </template>
  </h1>

  <div class="block-info">
    <code class="class">.wa-palette-{{ paletteId }}</code>
    {% include '../_includes/status.njk' %}
    {% if not isPro %}
    <wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
    {% endif %}
  </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="warning">
  <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
   This palette has been tweaked.
   <div class="wa-cluster wa-gap-xs">
    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" with-remove @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
   </div>

  <wa-button @click="reset()" appearance="outlined" variant="danger" size="small">
    <wa-icon slot="start" name="circle-xmark" variant="regular"></wa-icon>
    Reset
  </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 coreTint = palettes[paletteId][hue].maxChromaTint %}
{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
{% if hue === 'gray' %}
<tr data-hue="{{ hue }}" class="color-scale"
    :class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
{% else %}
<tr data-hue="{{ hue }}" class="color-scale"
    :class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
    :style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
{% endif %}
  <th>
    {{ hue | capitalize }}
  </th>
  <td class="core-column"
      style="--color: var(--wa-color-{{ hue }})"
      :style="{
        '--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
        '--color-gray-undertone': colors[grayColor][{{coreTint}}],
        '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
      }">
    <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">
      {% if hue === 'gray' %}
        <swatch-select label="Gray undertone" shape="circle" :values="hues" v-model="grayColor"></swatch-select>

        <div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
          <wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
          value="0" min="0" :max="maxGrayChroma" step="0.01"
            @input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
            <div slot="label">
              Gray colorfulness
              <wa-button appearance="plain" @click="grayChroma = originalGrayChroma" class="clear-button">
                <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
              </wa-button>
            </div>
          </wa-slider>
          <div class="label-min">Neutral</div>
          <div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
        </div>
      {% else %}
      {%- 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 -%}

      <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-button appearance="plain" @click="hueShifts.{{ hue }} = 0" class="clear-button">
              <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
            </wa-button>
          </div>
        </wa-slider>
        <div class="label-min">More {{hueBefore}}</div>
        <div class="label-max">More {{hueAfter}}</div>
      </div>
      {%- set hueBefore = hue -%}
      {% endif %}
      <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>
  </td>
  {% for tint in tints -%}
    {%- set color = palettes[paletteId][hue][tint] -%}
    <td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
        :style="{
          '--color-tweaked': colors.{{ hue }}[{{ tint }}],
          '--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
        }">
      <div class="color swatch" style="--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" ref="chromaScaleSlider"
    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-button appearance="plain" @click="chromaScale = 1" class="clear-button">
        <wa-icon name="circle-xmark" label="Reset" variant="regular"></wa-icon>
      </wa-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 %}


