Animated Circular Progress Bar - Tailwind colors

[JasonColeyNZ]

Does it make sense that the Animated Circular Progress Bar allows the use of tailwind in the color selection?

Maybe allow className for both the gauge colors?

At present we need to access the tailwind config to get these colors, not that friendly?

[itsarghyadas]

  <AnimatedCircularProgressBar
      max={100}
      min={0}
      value={value}
      gaugePrimaryColor="rgb(79 70 229)"
      gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
 />

How are you thinking of using classnames here, as we need to pass two colors for the two gauges?

[JasonColeyNZ]

Could we not have a class sent to the class of the svg sections, like stroke-ring (ring being a color class in tailwind)

So gaugePrimaryColorClassName, gaugeSecondaryColorClassName?

[itsarghyadas]

@JasonColeyNZ So, you want to create a global variable using that name and then use it? Is that what you mean?

[JasonColeyNZ]

If the AnimatedCircularProgressBar had two properties, like gaugePrimaryColorClassName and gaugeSecondaryColorClassName as well as the gaugePrimaryColor, then I could pass a standard tailwind classname, stroke-[whatever] and then i can easily use tailwind colors without having to resort to using tailwindConfig/resolveConfig to get the colors.

AnimatedCircularProgressBar
									className="h-6 w-6 text-[10px]"
									value={questionnaire.progress}
									max={100}
									min={0}
									gaugePrimaryColorClassName={"stroke-ring"}
									gaugeSecondaryColorClassName={"stroke-gray-200"}
								/>

<circle
						cx="50"
						cy="50"
						r="45"
						strokeWidth="10"
						strokeDashoffset="0"
						strokeLinecap="round"
						strokeLinejoin="round"
						className={cn("opacity-100", gaugeSecondaryColorClassName)}

Anyway, its easy enough for me to implement, just thought it could be an option in your version?

[itsarghyadas]

But since Tailwind’s default color palette can be restrictive, what if someone wants to use a specific hex color code? Will this change support hex codes as well? I believe you need to pass stroke-[#color]. Feel free to open a PR, and we’ll review it!

[JasonColeyNZ]

tailwind allows arbitrary colors,
https://tailwindcss.com/docs/stroke#arbitrary-values
And normally I'd probably use a color used in my theming anyway?