Jennie Robinson Faber
e7ad076d6a
The .circle-desc text used --text-faint, which failed WCAG AA on the selected/hover tile surfaces (4.01:1 light / 4.31:1 dark). Promote to --text-dim to clear 4.5:1 against all tile states.
100 lines
2.2 KiB
Vue
100 lines
2.2 KiB
Vue
<template>
|
|
<div class="circle-picker">
|
|
<div
|
|
v-for="circle in circles"
|
|
:key="circle.value"
|
|
class="circle-option"
|
|
:class="{
|
|
selected: modelValue === circle.value,
|
|
current: savedValue === circle.value,
|
|
}"
|
|
@click="$emit('update:modelValue', circle.value)"
|
|
>
|
|
<span class="circle-name">{{ circle.label }}</span>
|
|
<span class="circle-desc">{{ circle.description }}</span>
|
|
<span
|
|
v-if="savedValue === circle.value"
|
|
class="circle-tag"
|
|
:style="{ color: `var(--c-${circle.value})`, borderColor: `var(--c-${circle.value})` }"
|
|
>Current</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
modelValue: { type: String, default: '' },
|
|
savedValue: { type: String, default: '' },
|
|
circles: {
|
|
type: Array,
|
|
default: () => [
|
|
{ value: 'community', label: 'Community', description: 'Learning together, exploring cooperative models' },
|
|
{ value: 'founder', label: 'Founder', description: 'Actively building a cooperative studio' },
|
|
{ value: 'practitioner', label: 'Practitioner', description: 'Experienced in cooperative practice' },
|
|
],
|
|
},
|
|
})
|
|
|
|
defineEmits(['update:modelValue'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.circle-picker {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.circle-option {
|
|
border: 1px dashed var(--border);
|
|
padding: 14px 12px;
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.circle-option:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.circle-option.selected {
|
|
border-color: var(--candle);
|
|
border-style: solid;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.circle-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.circle-option.selected .circle-name {
|
|
color: var(--candle);
|
|
}
|
|
|
|
.circle-desc {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
line-height: 1.5;
|
|
display: block;
|
|
}
|
|
|
|
.circle-tag {
|
|
font-size: 9px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
margin-top: 6px;
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
border: 1px dashed;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.circle-picker {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|