Blur

시맨틱 역할(overlayScrim, surfaceFrost)을 사용하세요 — CSS --refineui-blur-overlay-scrim. 컴포넌트에 일회성 blur(2px)를 쓰지 마세요.

시맨틱 역할

토큰	CSS 변수	Foundation	용도
overlayScrim	--refineui-blur-overlay-scrim	blur2	Dialog / Drawer scrim backdrop-filter
surfaceFrost	--refineui-blur-surface-frost	blur16	Menu / Dropdown / Select / Context Menu / SidebarPeek frosted 패널
scrollEdge	--refineui-blur-scroll-edge	blur2	ScrollArea 가장자리에 걸친 행(data-scroll-edge-item), 예: Command, Select, Dropdown

Blur는 반투명 fill surfaceFrosted(--refineui-color-alias-surface-frosted)와 함께 씁니다. 불투명 backgroundPrimary만 있으면면 blur가 보이지 않습니다.

Foundation 스텝

값 기반 키만 — 새 시맨틱 역할을 추가하기 전에 여기를 확장하세요.

토큰	값
blurNone	0
blur2	2px
blur4	4px
blur8	8px
blur12	12px
blur16	16px

Scrim 틴트는 surfaceOverlay / --refineui-overlay-backdrop에 둡니다 (투명도, 컬러 참고). Blur는 필터 반경만 담당합니다.

prefers-reduced-transparency: reduce일 때 Dialog/Drawer backdrop-filter는 refineui.css에서 none으로 접힙니다.

사용법

.menu-panel {
  background: var(--refineui-color-alias-surface-frosted);
  backdrop-filter: blur(var(--refineui-blur-surface-frost));
}

.scrim {
  background: var(--refineui-overlay-backdrop);
  backdrop-filter: blur(var(--refineui-blur-overlay-scrim));
}