No notes defined.
<div class="themePicker">
<ul class="themePicker__list">
<li class="themePicker__item">
<button title="Blue" aria-label="Set blue theme" class="themePicker__option" data-theme="blue">
<span class="visually-hidden">Set blue theme</span>
</button>
</li>
<li class="themePicker__item">
<button title="Navy" aria-label="Set navy theme" class="themePicker__option" data-theme="navy">
<span class="visually-hidden">Set navy theme</span>
</button>
</li>
<li class="themePicker__item">
<button title="Yellow" aria-label="Set yellow theme" class="themePicker__option" data-theme="yellow">
<span class="visually-hidden">Set yellow theme</span>
</button>
</li>
<li class="themePicker__item">
<button title="Pink" aria-label="Set pink theme" class="themePicker__option" data-theme="pink">
<span class="visually-hidden">Set pink theme</span>
</button>
</li>
<li class="themePicker__item">
<button title="Grey" aria-label="Set grey theme" class="themePicker__option" data-theme="grey">
<span class="visually-hidden">Set grey theme</span>
</button>
</li>
</ul>
</div>
{% set themePickerColors = [
{
key: 'blue',
label: 'Blue'
},
{
key: 'navy',
label: 'Navy'
},
{
key: 'yellow',
label: 'Yellow'
},
{
key: 'pink',
label: 'Pink'
},
{
key: 'grey',
label: 'Grey'
},
] %}
<div class="themePicker">
<ul class="themePicker__list">
{% for item in themePickerColors %}
<li class="themePicker__item">
{# this might want to be an input[type='radio'],
but we'd have to generate a unique ID/name pair
to make this work in the prototype... #}
<button title="{{ item.label }}" aria-label="Set {{ item.key }} theme" class="themePicker__option" data-theme="{{ item.key }}" {{ theme == item.key ? 'disabled' }}>
<span class="visually-hidden">Set {{ item.key }} theme</span>
</button>
</li>
{% endfor %}
</ul>
</div>
.themePicker {
&__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
&__item {
margin: 0;
}
input[type='radio'] {
@include visually-hidden;
}
&__option {
// either button, or label for radio (like view-mode-switcher)
border: 1px solid rgba(white, 0.5);
width: 2rem;
height: 2rem;
background: var(--accent, $yellow);
box-sizing: border-box;
cursor: pointer;
&:where([data-theme="blue"]) {
--accent: #{$blue};
}
&:where([data-theme="navy"]) {
--accent: #{$navy};
}
&:where([data-theme="yellow"]) {
--accent: #{$yellow};
}
&:where([data-theme="pink"]) {
--accent: #{$pink};
}
&:where([data-theme="grey"]) {
--accent: #{$grey};
}
&:hover,
&:focus {
border-width: 2px;
border-color: rgba(white, 0.8);
}
&[checked],
&[disabled] {
border: 2px solid rgba(white, 0.8);
cursor: not-allowed;
}
}
}