Impressionist Oil

油画印象派风组件配方

组件变体

font-serif font-bold tracking-wide rounded-lg transition-all duration-300 ease-in-out bg-[#e8a87c] text-[#2c3e50] shadow-[0_4px_0_#c0392b,0_6px_16px_rgba(232,168,124,0.30)] hover:brightness-110 active:translate-y-[2px]

button

按钮

Impasto paint-tube button with linear-gradient fill simulating thick paint, layered bottom shadow for dimensional depth, and brushstroke texture background

基础骨架: font-serif font-bold tracking-wide rounded-lg transition-all duration-300 ease-in-out
变体: 暖橙、深蓝、朱红、轮廓
状态: hover、active、disabled

card

卡片

Canvas-textured card with repeating-linear-gradient brushstroke overlay, dappled light radial-gradient spot, and layered impasto box-shadow depth

基础骨架: bg-[#f5f0e1] rounded-lg border border-[#e8a87c]/25 transition-all duration-300 ease-in-out
变体: 默认、暖调、冷调
状态: hover

input

输入框

Canvas-surface input with warm inset shadow simulating paint indentation, serif typography, and impasto focus glow

基础骨架: w-full rounded-lg border-2 border-[#e8a87c]/25 bg-[#f5f0e1] text-[#2c3e50] placeholder:text-[#2c3e50]/30 font-serif focus:outline-none transition-all duration-300 ease-in-out
变体: 默认、暖调、青绿
状态: focus、disabled

canvasPanel

画布面板

Panel with canvas/linen texture background

基础骨架: bg-[#f5f0e1] rounded-lg border border-[#e8a87c]/20 font-serif transition-all duration-300 ease-in-out relative bg-[repeating-linear-gradient(90deg,transparent_0px,transparent_3px,rgba(232,168,124,0.03)_3px,rgba(232,168,124,0.03)_4px)]
变体: 默认、暖调、冷调
状态: hover

brushstrokeBadge

笔触徽章

Badge with brushstroke-shaped background

基础骨架: inline-flex items-center justify-center rounded-[60%_40%_50%_50%/40%_60%_50%_50%] font-serif font-bold transition-all duration-300 ease-in-out
变体: 暖调、冷调、大地
状态: hover

paletteNav

调色板导航

Navigation styled like a painter's palette

基础骨架: bg-[#f5f0e1] rounded-[50%_50%_50%_50%/60%_60%_40%_40%] border border-[#e8a87c]/20 px-4 py-2 md:px-6 md:py-3 flex items-center gap-2 font-serif transition-all duration-300 ease-in-out
变体: 默认、暖调、冷调
状态: hover

galleryFrame

画廊相框

Ornate gallery-style frame for content

基础骨架: bg-[#f5f0e1] rounded-sm transition-all duration-300 ease-in-out relative
变体: 金色、深色、极简
状态: hover

impastoAlert

厚涂提示

Alert with thick impasto texture border

基础骨架: bg-[#f5f0e1] rounded-lg border-4 p-4 md:p-5 font-serif transition-all duration-300 ease-in-out
变体: 信息、警告、成功
状态: hover