[CLOSED] Show colored swatch in CSS Code Hints

[core-ai-bot]

Issue by MarcelGerber
Wednesday Jan 21, 2015 at 13:45 GMT
Originally opened as adobe/brackets#10425

---

(for updated screenshots scroll down)

I'd like to get this in Release 1.2 as well so the color support is even better (we did great progress this Release).
cc@redmunds

---

MarcelGerber included the following code: https://github.com/adobe/brackets/pull/10425/commits

[core-ai-bot]

Comment by redmunds
Wednesday Jan 21, 2015 at 15:23 GMT

---

@larz0 What do you think about this change?

In general it seems like it would be helpful. The "badges" in the color picker are square with rounded corners, so I think these badges should match (instead of being circles).

[core-ai-bot]

Comment by MarcelGerber
Wednesday Jan 21, 2015 at 15:39 GMT

---

Yeah, that's a change we can easily do anytime.

[core-ai-bot]

Comment by larz0
Wednesday Jan 21, 2015 at 17:55 GMT

---

@redmunds yep you're right.@MarcelGerber could we move the colors before the color names? Thanks for this!

[core-ai-bot]

Comment by MarcelGerber
Wednesday Jan 21, 2015 at 18:33 GMT

---

@larz0 Do you like this one?`

Notice that currentColor has noticeably less margin-left for obvious reasons - is that ok?

[core-ai-bot]

Comment by redmunds
Wednesday Jan 21, 2015 at 19:14 GMT

---

@MarcelGerber I'd prefer to see the text aligned. Can you put a transparent badge in place for currentColor, inherit, and transparent ?

[core-ai-bot]

Comment by MarcelGerber
Wednesday Jan 21, 2015 at 19:33 GMT

---

Changed again.

[core-ai-bot]

Comment by larz0
Wednesday Jan 21, 2015 at 19:57 GMT

---

@MarcelGerber could you make the swatch 12x12 with 2px border radius and use an inner shadow with 2px blur in rgba(0,0,0,0.24) for light code hints and 1px blur in rgba(255,255,255,0.1) for dark code hints?

[core-ai-bot]

Comment by larz0
Wednesday Jan 21, 2015 at 20:10 GMT

---

Just to clarify, we can remove the borders.

[core-ai-bot]

Comment by MarcelGerber
Wednesday Jan 21, 2015 at 20:11 GMT

---

Yeah, I got that.
The dark shadow is a little too faint I guess, though (look for the black swatch):

(box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.1);)

[core-ai-bot]

Comment by larz0
Wednesday Jan 21, 2015 at 20:12 GMT

---

Are you using rgba(255,255,255,0.1) for the dark swatch?

[core-ai-bot]

Comment by MarcelGerber
Wednesday Jan 21, 2015 at 20:13 GMT

---

Yeah, I use box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.1);

[core-ai-bot]

Comment by larz0
Wednesday Jan 21, 2015 at 20:14 GMT

---

Could you try a higher opacity until you can barely see the shadow on back?

[core-ai-bot]

Comment by MarcelGerber
Wednesday Jan 21, 2015 at 20:19 GMT

---

Got it like this with a opacity of 0.24:

I think this is a good one. I mean, I got pretty good eyes and can see it, while others with worse eyes probably won't see it that well. But as black is pretty much the only color that has this issue and everyone should know what black looks like, I'm fine with that.

What do you think?

[core-ai-bot]

Comment by larz0
Wednesday Jan 21, 2015 at 20:20 GMT

---

@MarcelGerber ok sounds good.

[core-ai-bot]

Comment by ingorichter
Wednesday Jan 21, 2015 at 23:29 GMT

---

I like it 👍. Ready to merge@larz0?