Redoing the dark theme to be more plain CSS and not rely on central variables

[dangoor]

This is a fix for #8420.

This turns the dark theme into a reasonably simple collection of rules that do not rely on any of the built-in LESS files.

cc: @MiguelCastillo @larz0 @peterflynn

[larz0]

@dangoor @peterflynn since the inline editor is part of the core UI we shouldn't use Themes to control its colors so it shouldn't be dark since we haven't introduced the dark core UI.

It should look like this:

In order to make the inline editor look like the screenshot above, we'll need to make these changes:

Hope these make sense.

[dangoor]

@larz0 I had thought that inline editors were still under the control of the theme, because it is within the editor area. (So, someone writing an editor theme could choose to make inline editors look entirely different...)

[MiguelCastillo]

@dangoor I thought the inline editor DOM was indeed inside the editor space. That should be skinnable.

[dangoor]

I've updated this theme so that the inline editors are styled correctly (thanks for the pointers, @larz0!)

I think this is ready to land now. You want to review @larz0?

[larz0]

@dangoor yeah I can take a look. Inline editor is a part of the core UI because it's possible for other extension to use this pattern.

If it's a part of a theme then it'd be possible for it to miss a few spots on certain extensions and the buttons within it could look out of place out of place as well because buttons are part of core UI. Hope that makes sense.

[dangoor]

@larz0 Yeah, I was thinking about inline code editors, but it's definitely the case that the other inline editors need to be treated as something for UI theme and not editor theme.

It seems to me that the inline editor styles that I set in the Thor Dark stylesheet should probably live in one of the default stylesheets but only be applied when you are using a theme other than the default theme. Does that make sense to you?

[larz0]

@dangoor yep that makes sense 👍

[dangoor]

Actually, I don't think what we're doing works well. Maybe themes should be able to style inline code editors (but not the other inline editors). Here's the Ruby Blue theme, for example:

The text is not very readable. It seems like we either need to force the inline code editor to be the default theme, or we need to let editor themes style inline code editors.

[larz0]

We should let the theme authors override the inline editor then.

[dangoor]

FWIW, the inline color editor and bezier curve editor both look fine in Ruby Blue. The text of the inline color editor is barely readable in Thor Dark.

[MiguelCastillo]

+1 inline editor should be themable

[MiguelCastillo]

Maybe I am actually a bit confused... But I am not even sure how we would prevent people from theming them if inline editors are children of editor-container...

[dangoor]

@MiguelCastillo it's less a matter of preventing and more a matter of what we'll document as how people should be doing things.

[MiguelCastillo]

Ha! Ok that makes more sense :)

[MiguelCastillo]

@dangoor the Ruby Blue theme actually reminded me of something I meant to bring up before. I would have probably done a scheme key/value in the package.json where people can specify a particular color to base the rest of the editor from... Maybe the field dark is enough, but it would be nice if the tree container matched the main editor color, for example.

[dangoor]

@MiguelCastillo I remember talking about something like that earlier. I do like the idea of the editor theme suggesting colors for the UI theme to use. I think the "dark" hint is a reasonable starting point, especially because I think there would be some complexity in implementing editor theme suggested UI colors. The way production builds work right now, we can't just plug in those variables and reinterpret the UI theme because we don't interpret the LESS files at runtime.

[larz0]

Not sure if we need a newline here.

[dangoor]

Ha! Actually, it does require a newline. And that's the cause of #8481.

[peterflynn]

@dangoor Should we file a (post-0.42) bug on the Themes code being so finicky about trailing newlines? I could see third-party theme authors being totally befuddled by this as well...

[dangoor]

Good idea. #8490 filed.

[larz0]

@dangoor looks good here.

[larz0]

Merging.