tdesign-react/esm/style/web/components/skeleton/_var.less

TDesign Component for React

// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]

// component: 组件名，如 button
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如 color、height、radius 等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等

// 如：@button-line-bg-color-hover
// 如：@button-line-height-s

// 尺寸
@skeleton-base-height-default: 32px;
@skeleton-rect-width-default: 120px;
@skeleton-rect-height-default: 88px;

// 基础变量
@skeleton-border-radius-square: @border-radius-default;
@skeleton-border-radius-circle: @border-radius-circle;

// skeleton 变量
@skeleton-type-text-height: @font-size-l;

// skeleton 动画
:root,
:root[theme-mode="light"] {
  --skeleton-animation-gradient: rgba(0, 0, 0, 4%);
}

:root[theme-mode="dark"] {
  --skeleton-animation-gradient: rgba(255, 255, 255, 6%);
}

@skeleton-animation-gradient: var(--skeleton-animation-gradient);
@skeleton-animation-flashed: rgba(90%, 90%, 90%, .3);