mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
726dc73e2a
- General infrastructure to support palette tweaking - Hue shifts per color scale (UI, permalinks, dynamic code snippets) - Scale overall chroma up/down (UI, permalinks, dynamic code snippets) - Update contrast ratio tables (styling for contrast up/down/fail could use improvement, but it's a starting point) - Make sure it works with Turbo (i.e. things don't break when we navigate to another page)
41 lines
1.4 KiB
Plaintext
41 lines
1.4 KiB
Plaintext
<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
{% for tint_bg in tints -%}
|
|
{% for tint_fg in tints | reverse -%}
|
|
{% if (tint_fg - tint_bg) | abs == difference %}
|
|
<th>{{ tint_fg }} on {{ tint_bg }}</th>
|
|
{% endif %}
|
|
{%- endfor -%}
|
|
{%- endfor %}
|
|
</tr>
|
|
</thead>
|
|
{% for hue in hues -%}
|
|
<tr data-hue="{{ hue }}">
|
|
<th>{{ hue | capitalize }}</th>
|
|
{% for tint_bg in tints -%}
|
|
{% set color_bg = palettes[paletteId][hue][tint_bg] %}
|
|
{% for tint_fg in tints | reverse -%}
|
|
{% set color_fg = palettes[paletteId][hue][tint_fg] %}
|
|
{% if (tint_fg - tint_bg) | abs == difference %}
|
|
<td data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}">
|
|
<div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
|
|
{% set contrast_wcag = '' %}
|
|
{% if color_fg and color_bg %}
|
|
{% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
|
|
{% endif %}
|
|
{% if contrast_wcag %}
|
|
{{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
|
|
{% else %}
|
|
{{ tint_fg }} on {{ tint_bg }}
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
{% endif %}
|
|
{%- endfor -%}
|
|
{%- endfor -%}
|
|
</tr>
|
|
{%- endfor %}
|
|
</table>
|