I looked into this a little bit... It looks like the color of the circles is dependent on one of these CSS classes by default:
.status.live - Green
.status.pending - Orange
.status.expired - Red
.status.disabled - White
I'm assuming (haven't checked this) that the status gets applied to the color dot as a lowercased version of the name. So for example, if you have a status called "Awesome", you would end up with a dot with the class
* If I'm mistaken about how this works, anyone is welcome to correct me.
Now that you've got your
.status.awesome classes applied to the
<span> which produces the color dots, you get to make your own dot! The default versions are pulling from two sprite files... You'll be served up the version which best matches your display:
Since you're not going to be changing anything in the
app folder, you'll need to make your own image to represent your dot. One great bonus of this: Your dot doesn't have to be dot shaped! You could just as easily make a star, question mark icon, etc. I'd suggest making both a "regular" and "2x" versions, to stay compliant with the native Craft handling.
Put your new image files into your plugin's resources folder:
Then, you'd reference those in your plugin's CSS:
.status class handles a lot of the generic positioning, so you shouldn't have to override much.
Anyway, most of this is speculative and untested... But let us know if it works out for you!