GradientText 渐变文字
以渐变色填充文字的纯展示组件，background-clip: text 实现；默认走主题 token 双色渐变，支持任意色标数组与方向。无事件。
基础用法
默认 token 渐变（to right）
自定义色标
红→蓝 双色
三色渐变
方向
direction=to bottom
direction=135deg
语义色渐变（type）
type 语义色渐变对
type 走 token 派生双色渐变（暗色自动换色，零硬编码色值）；与 gradient 并存时 gradient 优先。
动画渐变
animated 流动渐变
animated + 多色标
animated 让背景位置沿渐变轴流动（回文色标 + 双倍背景宽度无缝循环）；动画周期可用 --oas-gradient-text-duration 定制，prefers-reduced-motion 下自动静止。
文字描边
渐变 + 描边（默认 token 描边色）
渐变 + 自定义描边色
stroke 设置描边宽度（仅接受数字 + px/em/rem/pt，非法值不启用），stroke-color 设置描边颜色；缺省描边色走 --oas-color-text-primary token，随亮暗主题自动切换，保证对比度可读。
实现上用双层叠字避开兼容冲突：底层为只画描边的镜像文字（-webkit-text-stroke + 透明填色），叠在渐变层之下，描边外沿透出、不被 background-clip: text 裁剪。与 type、gradient、animated 可任意组合。
兼容性说明
background-clip: text与透明色只写在@supports块内：老浏览器不支持 clip 时文字回退为普通前景色，不会出现"隐形文字"。- 文字描边（
-webkit-text-stroke）与background-clip: text直接叠加会被裁剪，组件内部用双层叠字解决；不支持 clip 的老浏览器回退为主文字直接描边（普通前景色 + 描边），不会出现双重文字重影。 - 多行截断（ellipsis）与
background-clip: text叠加在各浏览器行为不一，渐变文字建议单行使用。
字号定制
字号默认跟随外层 font-size（继承），可用 CSS 变量 --oas-gradient-text-font 显式定制（如 18px）。
API
oas-gradient-text
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
animated | 流动动画（回文色标无缝循环，周期走 --oas-gradient-text-duration；prefers-reduced-motion 静止） | boolean | — |
direction | 渐变方向（linear-gradient 第一参数，如 to right、135deg） | string | — |
gradient | JSON 色标数组，如 ["#f00","#00f"]；单个色标渲染纯色；缺失/非法回退默认 token 渐变 | string | — |
stroke | 描边宽度（如 1px / 2px，仅接受数字 + px/em/rem/pt；非法值不启用描边；双层叠字避开 background-clip:text 裁剪冲突） | string | — |
stroke-color | 描边颜色（缺省走 --oas-color-text-primary token，随主题亮暗自适应；经白名单校验） | string | — |
type | 语义色渐变：primary / success / warning / danger / info（token 派生双 stop；显式 gradient 优先） | string | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 渐变文字内容 |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-gradient-text-dir | to right |
--oas-gradient-text-duration | 3s |
--oas-gradient-text-font | inherit |
--oas-gradient-text-from | var(--oas-color-primary) |
--oas-gradient-text-stroke-c | — |
--oas-gradient-text-stroke-w | — |
--oas-gradient-text-to | var(--oas-color-primary-hover) |
- 默认渐变使用主题 token（
--oas-color-primary→--oas-color-primary-hover），随亮暗主题自动切换，无硬编码色值。 - 色标条目经白名单校验，防止 CSS 注入。
- 无事件，纯展示。