It's a work in progress, and still has a lot of rough edges, but this is what the new TinyMCE theme looks like at the present.
Looks much better than yesterday (after the first shock) with some borders and grouping 
Are mobiles or small screen devices using the same scale or is this a zoomed screenshot?
That's it at full size, no zoom. We are using one size for all screen types, with the intent of making it consistent and touch screen friendly.
Although it's certainly better than the grey icons sitting on a grey background, the fact that the icons are still grey makes my brain see them all as being disabled. If I look more closely, I then start to notice the even lighter grey icons and wonder whether they're all disabled or just the lighter ones, but there's not enough visual difference to immediately tell "that's disabled" vs "that's enabled".
If it's not already on the cards, I'd suggest making the "enabled" state substantially darker - and increasing the contrast in the "background colour" (at least, I assume that's what it is) button would also be helpful, as at a glance it looks like a box with feet. The TinyMCE4 basic demo uses much darker icons (though still not black - but close enough that they stand out as being active). In fact, the TinyMCE4 demo's "disabled" state is virtually indistinguishable from the "enabled" state in your screenshots!
Paul, that "box with feet" for the font highlight button is a background that changes colour along with the choices that the user makes. So if the font has a red highlight, the background will be red.
Ah. The "A" should probably have a border, then, so it stands out against similar colours - otherwise somebody could choose the exact same colour and it'd actually become a box wit feet! (Unless the "A" automatically changes colour if the BG colour gets close enough, in which case that "close enough" determination needs to be tweaked...)
Ah, great suggestion, I will talk to the designer about it, and get that sorted!
Paul, after your suggestion about the box with feet, we went back and had a look at it, and this is what we have now. Most of the rough edges have been smoothed over, and it is looking pretty consistent with the rest of the Toolbar UI.
Hi Jason,
That looks better. I still think that the icons are too light, though - even with some disabled icons in the mix (such as "redo" and the link-related icons), my brain initially sees all of the icons as being disabled (the ones which actually are disabled are so light that they almost disappear entirely). Making them darker might also help prevent the coloured triangles in the font/bg colour icons from standing out so much - at the moment, being the only colour in a sea of grey makes them stick out (though if they still reflect the current colour choices, I imagine it wouldn't be quite so bad if you have it set for black text on a white background).
I agree. I was testing today customised Moodle plugins (tinymce 3) in tinymce 4 with compat3x plugin and that tiny difference between icon fonts and gray png images is visible in attached toolbar
TinyMCE 4 skins made with skin creator work ok in my test install but unfortunately all those custom moodle plugins must be converted to TinyMCE 4 API - none of them was fully functional with compatibility files for the old 3.x branch (compat3x).
I have to agree that in my mind (and in UX in general) gray = disabled. That said, it does look a bit like the gmail signature editor, but that has increased contrast, and 'button' on hover.
guess which one I'm hovering ;)
We have a hover effect on all our toolbar buttons now, it's currently awaiting integration for atto https://tracker.moodle.org/browse/MDL-42091