f1af81962c
- Menus, popovers, dialogs, tooltips, and the toolbar drop the hard 1px border for the established deep floating shadow (0 8px 30px /40%) and a unified rounded-xl, so overlays read as floating rather than outlined - Appearance section pairs Blend mode with Opacity on a 7fr/5fr grid so 'Pass through' no longer truncates at the denser 24px control height - Normalize AppSelect text to 11px to match the panel type scale
29 lines
764 B
TypeScript
29 lines
764 B
TypeScript
import { tv } from 'tailwind-variants'
|
|
|
|
export const dialog = tv({
|
|
slots: {
|
|
overlay: 'fixed inset-0 z-40 bg-black/50',
|
|
content:
|
|
'fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 rounded-xl bg-panel shadow-[0_8px_30px_rgb(0_0_0/0.4)] outline-none',
|
|
title: 'text-sm font-semibold text-surface',
|
|
description: 'text-xs text-muted'
|
|
}
|
|
})
|
|
|
|
interface DialogUI {
|
|
overlay?: string
|
|
content?: string
|
|
title?: string
|
|
description?: string
|
|
}
|
|
|
|
export function useDialogUI(ui?: DialogUI) {
|
|
const cls = dialog()
|
|
return {
|
|
overlay: cls.overlay({ class: ui?.overlay }),
|
|
content: cls.content({ class: ui?.content }),
|
|
title: cls.title({ class: ui?.title }),
|
|
description: cls.description({ class: ui?.description })
|
|
}
|
|
}
|