ShapeStyle - OneScript

background() 和 foregroundStyle() 接受可序列化的 ShapeStyle，Color 也属于 ShapeStyle。

import {
  Color, Gradient, Material, Modifier, ShapeStyle, Text, UnitPoint,
} from "onescript/views"

<Text
  modifier={Modifier
    .foregroundStyle(ShapeStyle.secondary)
    .padding(12)
    .background(Material.ultraThin)}
>
  层级文本
</Text>

Modifier.background(Gradient.linear({
  colors: [Color.pink, Color.purple],
  startPoint: UnitPoint.topLeading,
  endPoint: UnitPoint.bottomTrailing,
}))

层级样式包括 primary、secondary、tertiary、quaternary 和 quinary。材质包括 ultraThin、thin、regular、thick、ultraThick 和 bar。

渐变支持 linear、radial 和 angular。传入至少两个 colors，或者至少两个按位置升序排列的 stops：

Gradient.radial({
  stops: [
    { color: "#FFFFFF", location: 0 },
    { color: "#00000000", location: 1 },
  ],
  center: UnitPoint.center,
  startRadius: 0,
  endRadius: 120,
})

Gradient.angular({
  colors: [Color.red, Color.blue],
  center: UnitPoint.center,
  startAngle: 0,
  endAngle: 360,
})

角度统一使用 degree。渐变 stop 的 location 位于 0...1 且保持升序。自定义明暗颜色在渐变中继续响应系统外观。