ShapeStyle - OneScript

background() and foregroundStyle() accept any serializable ShapeStyle. A Color is also a shape style.

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

<Text
  modifier={Modifier
    .foregroundStyle(ShapeStyle.secondary)
    .padding(12)
    .background(Material.ultraThin)}
>
  Hierarchical text
</Text>

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

Hierarchical values are primary, secondary, tertiary, quaternary, and quinary. Materials are ultraThin, thin, regular, thick, ultraThick, and bar.

Gradients support linear, radial, and angular forms. Supply either at least two colors or at least two ordered 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,
})

Angles use degrees. Gradient stops use locations from 0 through 1 in ascending order. Custom light/dark colors remain adaptive inside gradients.