gongxiangp2/components/upload/upload-field-styles.ts

34 lines
2.7 KiB
TypeScript

export const fieldLabelClass =
'mb-2 block text-[14px] font-medium tracking-[-0.02em] text-[#1a1c1d]'
export const fieldHintClass = 'text-[12px] leading-relaxed text-[#6b7075]'
export const fieldControlClass =
'w-full rounded-[8px] border border-[#e7e8ea] bg-white px-4 py-2.5 text-[14px] tracking-[-0.02em] text-[#1a1c1d] placeholder:text-[#6b7075] outline-none transition-colors focus:border-[#1a1c1d] focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/70 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60'
export const fieldErrorClass = 'mt-1 text-[13px] text-[#b42318]'
export const inkButtonClass =
'inline-flex h-11 items-center justify-center rounded-[8px] bg-[#1a1c1d] px-6 text-[14px] font-medium tracking-[-0.02em] text-white transition-colors hover:bg-[#2a2d2f] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/70 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'
export const outlineButtonClass =
'inline-flex h-11 items-center justify-center rounded-[8px] border border-[#1a1c1d] bg-white px-6 text-[14px] font-medium tracking-[-0.02em] text-[#1a1c1d] transition-colors hover:bg-[#1a1c1d] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/70 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50'
export const dropZoneIdleClass =
'rounded-[8px] border border-dashed border-[#cbd5e1] bg-[#fafafa] transition-colors hover:border-[#8b95a1]'
export const dropZoneActiveClass =
'rounded-[8px] border border-dashed border-[#1677ff] bg-[#eef4fb] transition-colors'
export const uploadAreaButtonClass =
'inline-flex min-h-11 items-center justify-center gap-2 rounded-[8px] px-3 text-[14px] font-medium text-[#1a1c1d] transition-colors hover:bg-[#edf0f2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] disabled:cursor-not-allowed disabled:opacity-50'
export const uploadAreaTileClass =
'relative h-20 w-20 shrink-0 overflow-hidden rounded-[8px] border border-[#e7e8ea] bg-white'
export const uploadAreaEmptyButtonClass =
'flex min-h-12 w-full items-center justify-center gap-2 rounded-[8px] text-[14px] font-medium text-[#1a1c1d] transition-colors hover:bg-[#edf0f2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] disabled:cursor-not-allowed disabled:opacity-50'
export const uploadAreaAddTileClass =
'flex h-20 w-20 items-center justify-center rounded-[8px] border border-dashed border-[#cbd5e1] bg-white text-[#1a1c1d] transition-colors hover:bg-[#edf0f2] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff] disabled:cursor-not-allowed disabled:opacity-50'