mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
53 lines
1.9 KiB
Plaintext
53 lines
1.9 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 %}
|
|
{% set contrast_wcag = '' %}
|
|
{% if color_fg and color_bg -%}
|
|
{% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
|
|
{%- endif %}
|
|
<td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
|
|
data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}" data-original-contrast="{{ contrast_wcag }}">
|
|
<div v-content:number="contrast.value"
|
|
class="color swatch" :class="{
|
|
'value-up': contrast.value - contrast.original > 0.0001,
|
|
'value-down': contrast.original - contrast.value > 0.0001,
|
|
'contrast-fail': contrast.value < {{ minContrast }}
|
|
}"
|
|
style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})"
|
|
:style="{
|
|
'--color': contrast.bgColor,
|
|
color: contrast.fgColor,
|
|
}"
|
|
>
|
|
{% if contrast_wcag %}
|
|
{{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
|
|
{% else %}
|
|
{{ tint_fg }} on {{ tint_bg }}
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
{% endif %}
|
|
{%- endfor -%}
|
|
{%- endfor -%}
|
|
</tr>
|
|
{%- endfor %}
|
|
</table>
|