Allow progress bar color to be controlled dynamically

[ganyicz]

The scenario

The progress bar color can't be changed dynamically from Alpine.

Value updates work via x-bind:value, but color doesn't:

<flux:progress
    x-bind:value="progress"
    x-bind:color="failed ? 'red' : 'green'"
/>

The problem

The color is baked in at render time.

$barClasses = Flux::classes()
    ->add(match ($color) {
        'red'   => 'bg-red-600 dark:bg-red-400',
        'green' => 'bg-green-600 dark:bg-green-400',
        // ...
    })
    ;

The solution

We expose the bar color as a CSS variable (--flux-progress-color), following the same approach the callout component uses for its colors. The match() now sets the variable on the outer element, and the bar reads from it:

$trackClasses = Flux::classes()
    ->add(match ($color) {
        'red'   => '[--flux-progress-color:var(--color-red-600)] dark:[--flux-progress-color:var(--color-red-400)]',
        'green' => '[--flux-progress-color:var(--color-green-600)] dark:[--flux-progress-color:var(--color-green-400)]',
        // ...
    })
    ;

$barClasses = Flux::classes()
    ->add('bg-[var(--flux-progress-color)]')
    ;

Static usage is unchanged:

<flux:progress value="75" color="blue" />

Users can now control the color dynamically by setting the CSS variable from Alpine:

<flux:progress
    x-bind:value="progress"
    x-bind:style="failed && '--flux-progress-color: var(--color-red-600)'"
/>

Fixes #2487