Module: StimulusPlumbers::Themes::Tailwind::Progress

Included in:

StimulusPlumbers::Themes::TailwindTheme

Defined in:

lib/stimulus_plumbers/themes/tailwind/progress.rb

Constant Summary

BAR =

%w[
  relative w-full overflow-hidden rounded-full
  bg-(--sp-color-muted)
].freeze

BAR_HEIGHTS =

{ false => "h-2", true => "h-5" }.freeze

VALUE_TEXT =

tabular-nums so the readout doesn't jitter as digits change under a drag.

%w[text-xs font-medium leading-none tabular-nums].freeze

BAR_GROUP =

Row wrapper for an outside readout — the track shrinks to leave room for the text.

%w[flex w-full items-center gap-(--sp-space-2)].freeze

BAR_VALUE_SPLIT =

Clipped to the glyphs, this paints primary-fg up to the fill edge and fg past it, so the digits split rather than sit on a pill — neither color alone clears AA over both. The edge is --sp-progress-percent (set by the progress controller), 0 until it connects. Must stay on one line: Tailwind scans source text, so a class split across a string continuation or interpolation never appears contiguously and is silently dropped. rubocop:disable Layout/LineLength

"bg-[linear-gradient(to_right,var(--sp-color-primary-fg)_0_calc(var(--sp-progress-percent,0)*1%),var(--sp-color-fg)_0)]"

BAR_VALUE =

Spans the track so the gradient's coordinates are the track's.

[
  *VALUE_TEXT,
  "absolute inset-x-0 top-1/2 -translate-y-1/2 text-center pointer-events-none",
  BAR_VALUE_SPLIT,
  "bg-clip-text [-webkit-background-clip:text] text-transparent"
].freeze

BAR_VALUE_OUTSIDE =

Beside the track it never sits over the fill, so it needs no pill.

[*VALUE_TEXT, "shrink-0 text-(--sp-color-primary)"].freeze

FILL_BASE =

data-intent (set per-segment by a ramp) overrides the default primary fill color.

%w[
  h-full rounded-full bg-(--sp-color-primary)
  [&[data-intent=danger]]:bg-(--sp-color-destructive)
  [&[data-intent=warning]]:bg-(--sp-color-warning)
  [&[data-intent=success]]:bg-(--sp-color-success)
].freeze

FILL_INDETERMINATE =

animations.css renames a slot fill's keyframes but reads iteration-count off this.

%w[
  [.sp-progress-indeterminate_&]:animate-progress-slide
  [.sp-progress-indeterminate_&]:motion-reduce:animate-none
].freeze

BAR_FILL =

[*FILL_BASE, *FILL_INDETERMINATE].freeze

SEGMENT_GROUP =

Row of equal-width slots; each slot is its own track with a SEGMENT_FILL inside.

%w[flex w-full gap-(--sp-space-1)].freeze

SEGMENT =

%w[
  flex-1 h-2 overflow-hidden rounded-full
  bg-(--sp-color-muted)
].freeze

SEGMENT_FILL =

Separate key so a theme can restyle a slot's chunk without touching the bar's.

[*FILL_BASE, *FILL_INDETERMINATE].freeze

RING =

Circle stroke/fill live in icons/customs/progress-ring.svg — @source never scans .svg files, so Tailwind classes there are inert. Indeterminate class and utility land on this same svg, so this needs the compound [&.foo] form, not BAR_FILL's [.foo_&] descendant form.

%w[
  -rotate-90 text-(--sp-color-primary)
  [&.sp-progress-indeterminate]:animate-spin
].freeze

RING_SIZES =

{ sm: "size-8", md: "size-12", lg: "size-16" }.freeze

METER =

%w[
  w-full h-2 rounded-full
  [&::-webkit-meter-bar]:rounded-full [&::-webkit-meter-bar]:bg-(--sp-color-muted)
  [&::-webkit-meter-optimum-value]:bg-(--sp-color-success)
  [&::-webkit-meter-suboptimum-value]:bg-(--sp-color-warning)
  [&::-webkit-meter-even-less-good-value]:bg-(--sp-color-destructive)
  [&::-moz-meter-bar]:bg-(--sp-color-success)
].freeze