- Section headers become full 32px bands (title + trailing actions vertically centered) instead of an 11px line crammed against fields, giving each section a clear structural band like Figma - Select dropdowns adopt the floating-surface elevation (12px radius, no border, deep shadow), 24px flush items, and scroll up/down buttons for long lists (blend modes) - Font-settings gear trigger drops its hardcoded dark bg+border for the ghost icon-button recipe - Segmented-control active state uses neutral hover fill instead of the blue-grey selection color
19 lines
658 B
TypeScript
19 lines
658 B
TypeScript
import selectTheme from './select'
|
|
|
|
const appSelectTheme = {
|
|
slots: {
|
|
...selectTheme.slots,
|
|
trigger: [selectTheme.slots.trigger, 'w-full min-w-0 px-1.5'],
|
|
value: [selectTheme.slots.value, 'min-w-0 flex-1 truncate text-left'],
|
|
content: [selectTheme.slots.content, 'max-h-56'],
|
|
viewport: [selectTheme.slots.viewport, 'p-0.5'],
|
|
item: [selectTheme.slots.item, 'py-0 pr-2 pl-6 text-[11px]'],
|
|
indicator: 'absolute left-1.5 inline-flex items-center justify-center'
|
|
},
|
|
variants: selectTheme.variants,
|
|
defaultVariants: selectTheme.defaultVariants
|
|
}
|
|
|
|
export type AppSelectTheme = typeof appSelectTheme
|
|
export default appSelectTheme
|