Use type recipes and Button danger variant, add danger tint, dropzone and cover-fill tokens, give SearchInput a size prop so the top bar keeps its larger search, show queue details inline on mobile, derive upload limits from constants and document the card hover style.
22 lines
487 B
Svelte
22 lines
487 B
Svelte
<script lang="ts">
|
|
interface Props {
|
|
label: string;
|
|
tone?: 'success' | 'neutral' | 'danger';
|
|
class?: string;
|
|
}
|
|
|
|
let { label, tone = 'neutral', class: klass = '' }: Props = $props();
|
|
|
|
const TONE = {
|
|
success: 'bg-accent-tint text-accent-soft',
|
|
neutral: 'bg-btn text-fg-2',
|
|
danger: 'bg-danger-tint text-danger-fg'
|
|
};
|
|
</script>
|
|
|
|
<span
|
|
class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium whitespace-nowrap {TONE[
|
|
tone
|
|
]} {klass}">{label}</span
|
|
>
|