[Simplified charts] Streamline defining colors / gradients

Instead of always requiring overriding the marks snippet/slot and using LineageGradient explicitly...

<div class="h-[300px] p-4 border rounded-sm">
  <AreaChart data={dateSeriesData} x="date" y="value">
    {#snippet marks()}
      <LinearGradient class="from-primary/50 to-primary/1" vertical>
        {#snippet children({ gradient })}
          <Area line={{ class: "stroke-primary" }} fill={gradient} />
        {/snippet}
      </LinearGradient>
    {/snippet}
  </AreaChart>
</div>

it would be nice to come up with an API to do this within the simplified charts (AreaChart, BarChart, etc) by passing an array of colors

<AreaChart
  series={[
    { key: 'default', value: 'value', color: ['var(--color-primary)', 'var(--color-secondary)']
  ]}
/>

or even adding a color prop (not to be confused with the c color accessor/scale) for single series setting

<AreaChart
  color={['var(--color-primary)', 'var(--color-secondary)']}
/>

(note: should this be fill to allow the same with stroke)

Doing this with CSS variables and transparency with Tailwind 4 is a little more challenging and typically requires the use of color-mix()

Review the simplified chart components, including AreaChart and BarChart, and the existing marks/LinearGradient usage shown in the issue. Define the supported color input and determine what completion means for gradient colors without overriding marks, including the single-series case and Tailwind 4 CSS-variable transparency considerations.