Ckeditor5: Block toolbar UI improvements

[pjasiun]

Follow-up of https://github.com/ckeditor/ckeditor5-ui/pull/392.

I wanted to report that paragraph is allways "on". Then I realised that it is only selected. However, I asked one more person "what is wrong with this panel" and he also said that paragraph is "on". We need a lighter style for focused items.

I want to make this ticket more generric to gather whole feedback about the UI of block toolbar in CKE 5.

[Reinmar]

cc @oleq @dkonopka

[Reinmar]

BTW, @oleq, I miss your new heading icons.

[oleq]

Me too! Haven't got enough time to finish them, though.

[oleq]

I propose 2 kinds of improvements:

New icons

Focus style improvements

Note: Old icons here as the new ones haven't been SVG'd yet.

[pjasiun]

I am not sure about serif pilcrow icon. We changed it to the simpler one in Letters some time ago since the whole UI is simple. The rest :+1:.

[Reinmar]

👍 For the pilcrow icon. Stylish and smooooth ;>

👍 For p/h1/h2/h3. Much better weight and alignment.

👍 For focus. I love the transitions.

[dkonopka]

More visible focus than ATM 👍 👍 👍 TBH, to our "flat & simple" UI this pilcrow icon is too stylish.

[scofalik]

Visually the serif icon looks better but it doesn't fit the rest of the toolbar, so I am torn. I also like a bigger padding - more space for clicking the button. Lastly, I wouldn't mind some kind of border or maybe only shadow, hinting that this icon is something clickable.

[Reinmar]

Lastly, I wouldn't mind some kind of border or maybe only shadow, hinting that this icon is something clickable.

I had a similar feeling in the past. Perhaps we could do something about it (not necessarily in this ticket, though).