<a class="pill pill--steel" href="#"><span class="pill__text u-underline">A pill</span></a>
{% set link = link | default(null) %}
{% set showInternal = showInternal ?? false %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ?? link_icon(link=link, type=linkType, showInternal=showInternal) %}
{% set iconPosition = iconPosition ?? 'before' %}
{% set tag = link ? 'a' : (tag ??? 'div') %}
{% set block = block ?? false %}
{% set whitespace = block ? '' : '' %}
<{{ tag }} {{ html_attributes({
id: id ?? false,
class: html_cva(
base: 'pill',
variants: {
color: {
yellow: 'pill--yellow',
steel: 'pill--steel',
green: 'pill--green',
orange: 'pill--orange',
gray: 'pill--gray',
},
overlay: {
true: 'u-overlay-link',
},
},
).apply({
color: color ?? null,
overlay: overlay ?? null,
}),
type: not link ? (type ??? (tag == 'button' ? 'button')),
title: title ?? false,
'aria-current': current|default ? 'true',
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
{%- if (icon and iconPosition == 'before') or leftIcon|default -%}
<span class="pill__icon">
{%- include '@icon' with { icon: leftIcon ?? icon } only -%}
{{- whitespace | raw -}}
</span>
{%- endif -%}
<span class="pill__text u-underline">
{{- text -}}
</span>
{%- if (icon and iconPosition == 'after') or rightIcon|default -%}
<span class="pill__icon">
{{- whitespace | raw -}}
{%- include '@icon' with { icon: rightIcon ?? icon } only -%}
</span>
{%- endif -%}
</{{ tag }}>
{
"text": "A pill",
"link": "#",
"color": "steel"
}
.pill {
--icon-size: 1.5em;
align-items: center;
background-color: var(--pill-background-color, var(--color-white));
border-color: var(--pill-border-color, var(--color-gray-700));
border-radius: calc((var(--pill-padding-block, 0.5em) + 1lh));
border-style: var(--pill-border-style, solid);
border-width: var(--pill-border-width, 2px);
color: var(--pill-color, var(--color-gray-700));
display: inline-flex;
font-size: var(--pill-font-size, 1.4rem);
font-weight: var(--font-weight-semibold);
gap: 0.5em;
inline-size: min-content;
line-height: var(--pill-line-height, var(--line-height-narrow));
padding-inline: var(--pill-padding-inline, 1em);
transition-property: background-color, border-color, color;
white-space: nowrap;
&:is(button:not([disabled]), :any-link):is(:hover, :focus-visible, :active) {
background-color: var(--pill-background-color--engaged, var(--color-white));
border-color: var(--pill-border-color--engaged, var(--color-gray-700));
color: var(--pill-color--engaged, var(--color-gray-700));
}
&:is([aria-current='true']) {
background-color: var(--pill-background-color--current, var(--color-gray-700));
border-color: var(--pill-border-color--current, var(--color-gray-700));
color: var(--pill-color--current, var(--color-white));
::selection {
background-color: var(--pill-color, var(--color-white));
color: var(--pill-background-color, var(--color-gray-700));
}
}
::selection {
background-color: var(--pill-color, var(--color-gray-700));
color: var(--pill-background-color, var(--color-white));
}
}
.pill--yellow {
--pill-background-color: var(--color-yellow-400);
--pill-border-color: var(--color-yellow-500);
--pill-color: var(--color-yellow-950);
--pill-background-color--engaged: var(--color-white);
--pill-border-color--engaged: var(--color-yellow-600);
--pill-color--engaged: var(--color-yellow-950);
}
.pill--steel {
--pill-background-color: var(--color-steel-500);
--pill-border-color: var(--color-steel-600);
--pill-color: var(--color-white);
--pill-background-color--engaged: var(--color-white);
--pill-border-color--engaged: var(--color-steel-700);
--pill-color--engaged: var(--color-steel-800);
}
.pill--orange {
--pill-background-color: var(--color-orange-600);
--pill-border-color: var(--color-orange-700);
--pill-color: var(--color-white);
--pill-background-color--engaged: var(--color-white);
--pill-border-color--engaged: var(--color-orange-700);
--pill-color--engaged: var(--color-orange-800);
}
.pill--green {
--pill-background-color: var(--color-green-600);
--pill-border-color: var(--color-green-700);
--pill-color: var(--color-white);
--pill-background-color--engaged: var(--color-white);
--pill-border-color--engaged: var(--color-green-700);
--pill-color--engaged: var(--color-green-800);
}
.pill--gray {
--pill-background-color: var(--color-gray-200);
--pill-border-color: var(--color-gray-300);
--pill-color: var(--color-gray-950);
--pill-background-color--engaged: var(--color-white);
--pill-border-color--engaged: var(--color-gray-700);
--pill-color--engaged: var(--color-gray-800);
}
.pill__text {
padding-block: var(--pill-padding-block, 0.5em);
}
No notes defined.