Fluent Design

流利设计组件配方

组件变体

font-semibold rounded-md shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] transition-all duration-150 ease-out bg-[#0078d4] text-white hover:shadow-[0_3.2px_7.2px_rgba(0,0,0,0.13),0_0.6px_1.8px_rgba(0,0,0,0.1)] hover:scale-[1.01] active:scale-[0.99]

button

按钮

Acrylic-style button with subtle shadows, rounded corners and smooth transitions

基础骨架: font-semibold rounded-md shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] transition-all duration-150 ease-out
变体: 主要、次要、轮廓
状态: hover、active、disabled

card

卡片

Acrylic surface card with layered depth shadows and subtle borders

基础骨架: bg-white rounded-md md:rounded-lg border border-[#e1e1e1] shadow-[0_1.6px_3.6px_rgba(0,0,0,0.13),0_0.3px_0.9px_rgba(0,0,0,0.1)] transition-all duration-150 ease-out
变体: 默认、亚克力、浮起
状态: hover

input

输入框

Clean input field with subtle border and Fluent-style focus indicator

基础骨架: w-full rounded-md border border-[#8a8886] bg-white font-sans text-[#323130] placeholder:text-[#a19f9d] focus:outline-none transition-all duration-150 ease-out
变体: 默认、填充
状态: focus、disabled