跳到主要内容

Skeleton 圆角/颜色挂 token + 卡片级斜向扫光(WEB-889)

版本: 0.2.0 · 类型: ✨ 新功能

WEB-889([Skeleton] 圆角/颜色挂 token + 卡片级扫光)

问题

旧 Skeleton 用 animate-pulse + rounded-md + 写死浅灰,圆角/底色/光色都没挂 token,暗色不适配,且扫光是「每个元素各自一道光」,不符合设计的「卡片级连续扫光」诉求。

改动文件

  • src/components/ui/skeleton.tsx
  • src/components/Skeleton/Skeleton.tsx
  • src/components/Skeleton/SkeletonGroup.tsx(新增)
  • src/components/Skeleton/skeleton-shimmer.ts(新增)
  • src/components/Skeleton/skeleton-group-context.ts(新增)
  • src/components/Skeleton/index.ts
  • src/components/index.ts
  • src/components/Skeleton/__tests__/Skeleton.test.tsx
  • packages/design-site/docs/components/atomic/progress-indicators/skeleton.mdx
  • packages/design-site/i18n/zh-CN/.../skeleton.mdx
  • packages/design-site/src/theme/ReactLiveScope/index.tsx

改动内容

  • 圆角 rounded-md(.375rem)→ rounded-sm--radius-sm = .25rem)。
  • 底色挂 --Grays-Gray-1,扫光色挂 --Grays-Gray-2,均引用 token,不写死;暗色由 token 自动切换。
  • 扫光改为 115° 斜向、2.4s cubic-bezier(0.65, 0, 0.35, 1) 循环;渐变两端用 gray1、中心 gray2(不淡向 transparent,避免脏边)。
  • prefers-reduced-motion: reduce 时关闭扫光(保持纯灰);测量就绪后才起扫,首帧不露光
  • 新增 SkeletonGroup:把整张卡片当成一块画布,测量每个块在卡片内的偏移与卡片尺寸(ResizeObserver + MutationObserver),让一道光跨块连续扫过;块间空隙保持纯灰;不同 group 之间互不串联。单独使用的 Skeleton 视作「单块画布」按自身尺寸扫光。

备注

  • 扫光的渐变与 keyframes 依赖每个块上的几何 CSS 变量(--plaud-skeleton-gw/--plaud-skeleton-gh/--plaud-skeleton-sx/--plaud-skeleton-sy),无法用纯 Tailwind 工具类表达且需跨多个消费方一致,故以单例 <style> 注入(ensureSkeletonShimmerStyles),底色/圆角仍用 Tailwind class(rounded-sm bg-(--Grays-Gray-1))。
  • 方案选型:纯 CSS 覆盖层会让光扫过块间空隙,不满足「空隙不受影响」,故采用 JS 测量(设计 issue 的方案 3)以实现「组内连续、组间独立、空隙纯灰」。