robonen
aa2938cb34
Genuinely type composable any usages (useStepper/useStorage/useForm/ createEventHook/useSorted/etc.) as proper generics/unknown; keep idiomatic any-function and overload-impl signatures with comments; skipped test -> .todo.
61 lines
2.1 KiB
Vue
61 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { usePreferredReducedTransparency } from './index';
|
|
|
|
const transparency = usePreferredReducedTransparency();
|
|
|
|
const isReduced = computed(() => transparency.value === 'reduce');
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-stack max-w-sm">
|
|
<div class="flex items-center justify-between">
|
|
<span class="demo-label">
|
|
prefers-reduced-transparency
|
|
</span>
|
|
<span
|
|
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
|
|
:class="isReduced
|
|
? 'border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400'
|
|
: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'"
|
|
>
|
|
<span
|
|
class="size-1.5 rounded-full"
|
|
:class="isReduced ? 'bg-amber-500' : 'bg-emerald-500'"
|
|
/>
|
|
{{ transparency }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Live preview: a frosted glass panel that flattens when reduce is preferred -->
|
|
<div class="relative overflow-hidden rounded-xl border border-border bg-bg-inset p-4">
|
|
<div
|
|
class="pointer-events-none absolute -left-6 -top-8 size-28 rounded-full bg-accent opacity-60 blur-xl"
|
|
/>
|
|
<div
|
|
class="pointer-events-none absolute -bottom-10 right-2 size-24 rounded-full bg-sky-500 opacity-50 blur-xl"
|
|
/>
|
|
<div
|
|
class="relative rounded-lg border border-border p-4 transition"
|
|
:class="isReduced
|
|
? 'bg-bg-elevated'
|
|
: 'bg-bg-elevated/60 backdrop-blur-md'"
|
|
>
|
|
<p class="text-sm font-medium text-fg">
|
|
Glass card
|
|
</p>
|
|
<p class="mt-1 text-sm text-fg-muted">
|
|
{{ isReduced
|
|
? 'Translucency removed for clarity.'
|
|
: 'Background blurs through the panel.' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-xs leading-relaxed text-fg-subtle">
|
|
Toggle <span class="font-mono text-fg-muted">Reduce transparency</span> in your OS
|
|
accessibility settings to see this update live.
|
|
</p>
|
|
</div>
|
|
</template>
|