search

osxpeppermint / peppermint

The official bug/features tracker for Peppermint
8 stars 2 forks source link

Theme editor and creator? #82

Open bobrocke opened 9 years ago

bobrocke commented 9 years ago

Can the theme creator also be a theme editor? That is, can you open an existing theme into the editor and make changes that are saved back to the style sheet?

osxpeppermint commented 9 years ago

Well, very good point. It's most certainly in my to-do list.

For now, what you can do is:

Future additions:

osxpeppermint commented 9 years ago

For now, a little (?) addition, as of the upcoming beta, is the Theme Browser (meaning you can actually browse through user plugins - published on the website - and download/install them with one click, from within Peppermint :) )

Have a look:

themebrowser

bobrocke commented 9 years ago

How do Theme Creator themes differ from .ppThemes?

osxpeppermint commented 9 years ago

How do Theme Creator themes differ from .ppThemes?

Well, that's a good question.

Let me put it this way: The ultimate goal is to have something Ace-friendly (which means JavaScript).

The more... user-friendly approach of the .ppThemes and their style.less uses LESS and much simpler class naming. As for the Theme Creator, what it currently does is to "populate" a generic LESS theme template with the values being chosen by the user. Being able to "edit" any template would mean to be able to extract all classes and class attributes from LESS.

P.S. If you look into ~/Library/Application Support/Data/Plugins/Global/Theme Creator.ppPlugin you'll understand what it is about (the "crucial" files are: script.coffee, index.html, style.less.template (basically a Mustache.js template) and the templates folder)

bobrocke commented 9 years ago

Hmmm. I though Ace used CSS files with a JS "wrapper." Not so?

osxpeppermint commented 9 years ago

Well, this is rather true.

The reason I choose LESS over CSS is because it's much more readable + I had to eliminate the ultra-verbose Ace naming: #ace_peppermint .ace_marker-layer could just be #peppermint .marker-layer, couldn't it?

bobrocke commented 9 years ago

I agree. My preference would be LESS or SCSS. And the simpler class names are much nicer. Could Peppermint work as the intermediary and compile LESS/SCSS on saves and make it into CSS for Ace?

osxpeppermint commented 9 years ago

OK, here's an idea (I'm working on it conceptually in the past 1-2 weeks and actually implementing it the past 2-3 days)...

What if the whole theme was something like that (yep, that's a real theme - the Peppermint dark one - and fully converted. as for the class supported, it'll be pretty much anything possible) :

/* General */
@body_background: rgb(32, 32, 32);
@body_color: rgb(230, 225, 220);
@body_font: Menlo;

/* Elements */
@fold_background: rgb(172, 136, 91);
@fold_hover_color: rgb(119, 119, 119);
@gutter_active_line_background: rgb(86, 86, 86);
@gutter_background: rgb(77, 77, 77);
@gutter_color: rgb(0, 0, 0);
@gutter_hover_underline: true;
@gutter_marker_error_color: rgb(186, 35, 53);
@gutter_marker_info_color: rgb(136, 136, 136);
@gutter_marker_warning_color: rgb(220, 88, 44);
@print_margin_background: rgb(38, 38, 38);
@selection_background: rgba(221, 240, 225, 0.4);
@tooltip_background: rgba(255, 255, 255, 0.901961);
@tooltip_font: Helvetica;

/* Syntax */
@syntax_comment_color: rgb(63, 58, 64);
@syntax_comment_italic: true;
@syntax_constant_character_color: rgb(255, 80, 28);
@syntax_constant_character_escape_color: rgb(255, 80, 28);
@syntax_constant_color: rgb(255, 80, 28);
@syntax_constant_other_color: rgb(255, 80, 28);
@syntax_entity_name_function_color: rgb(172, 136, 91);
@syntax_invalid_deprecated_color: rgb(210, 168, 161);
@syntax_invalid_deprecated_italic: true;
@syntax_invalid_deprecated_underline: true;
@syntax_invalid_illegal_background: rgba(86, 45, 86, 0.74902);
@syntax_invalid_illegal_color: rgb(248, 248, 248);
@syntax_invisible_color: rgba(255, 255, 255, 0.247059);
@syntax_keyword_color: rgb(255, 181, 55);
@syntax_meta_color: rgb(255, 181, 55);
@syntax_meta_heading_color: rgb(255, 80, 28);
@syntax_meta_list_color: rgb(249, 238, 152);
@syntax_meta_tag_color: rgb(172, 136, 91);
@syntax_storage_color: rgb(249, 238, 152);
@syntax_string_color: rgb(187, 255, 8);
@syntax_string_regex_color: rgb(233, 192, 98);
@syntax_support_color: rgb(155, 133, 157);
@syntax_support_constant_color: rgb(255, 80, 28);
@syntax_support_function_color: rgb(255, 236, 96);
@syntax_variable_color: rgb(117, 135, 166);
@syntax_variable_color: rgb(172, 136, 91);

What do you think?

bobrocke commented 9 years ago

Not bad!

Do you see an advantage to this versus “straight up” LESS?

Bob

Robert J. Rockefeller Richmond Hill, GA www.bobrockefeller.com

On Jul 9, 2015, at 4:16 AM, Peppermint - Code Editor for Mac notifications@github.com wrote:

OK, here's an idea (I'm working on it conceptually in the past 1-2 weeks and actually implementing it the past 2-3 days)...

What if the whole theme was something like that (yep, that's a real theme - the Peppermint dark one - and fully converted. as for the class supported, it'll be pretty much anything possible) :

/* General */ @body_background: rgb(32, 32, 32); @body_color: rgb(230, 225, 220); @body_font: Menlo;

/* Elements */ @fold_background: rgb(172, 136, 91); @fold_hover_color: rgb(119, 119, 119); @gutter_active_line_background: rgb(86, 86, 86); @gutter_background: rgb(77, 77, 77); @gutter_color: rgb(0, 0, 0); @gutter_hover_underline: true; @gutter_marker_error_color: rgb(186, 35, 53); @gutter_marker_info_color: rgb(136, 136, 136); @gutter_marker_warning_color: rgb(220, 88, 44); @print_margin_background: rgb(38, 38, 38); @selection_background: rgba(221, 240, 225, 0.4); @tooltip_background: rgba(255, 255, 255, 0.901961); @tooltip_font: Helvetica;

/* Syntax */ @syntax_comment_color: rgb(63, 58, 64); @syntax_comment_italic: true; @syntax_constant_character_color: rgb(255, 80, 28); @syntax_constant_character_escape_color: rgb(255, 80, 28); @syntax_constant_color: rgb(255, 80, 28); @syntax_constant_other_color: rgb(255, 80, 28); @syntax_entity_name_function_color: rgb(172, 136, 91); @syntax_invalid_deprecated_color: rgb(210, 168, 161); @syntax_invalid_deprecated_italic: true; @syntax_invalid_deprecated_underline: true; @syntax_invalid_illegal_background: rgba(86, 45, 86, 0.74902); @syntax_invalid_illegal_color: rgb(248, 248, 248); @syntax_invisible_color: rgba(255, 255, 255, 0.247059); @syntax_keyword_color: rgb(255, 181, 55); @syntax_meta_color: rgb(255, 181, 55); @syntax_meta_heading_color: rgb(255, 80, 28); @syntax_meta_list_color: rgb(249, 238, 152); @syntax_meta_tag_color: rgb(172, 136, 91); @syntax_storage_color: rgb(249, 238, 152); @syntax_string_color: rgb(187, 255, 8); @syntax_string_regex_color: rgb(233, 192, 98); @syntax_support_color: rgb(155, 133, 157); @syntax_support_constant_color: rgb(255, 80, 28); @syntax_support_function_color: rgb(255, 236, 96); @syntax_variable_color: rgb(117, 135, 166); @syntax_variable_color: rgb(172, 136, 91); What do you think?

— Reply to this email directly or view it on GitHub https://github.com/osxpeppermint/peppermint/issues/82#issuecomment-119870181.

osxpeppermint commented 9 years ago

Well, first of all it's not complicated. I mean I will provide a list of the "themable" parts and in the theme you can provide a style for any of its associated properties (color, background, bold/italic/underline, border + font), e.g. (if the part you're styling is @syntax_comment):

Obviously, as you can see in the above example, you don't have to set all properties for each of the available parts (and trust me there are LOTS of them). You can just set what you need.

Now, the really big advantage is that the Theme creator will (soon, if not in the very next update) be able to save in this format. And also re-load a theme (for editing) that has been saved in this format.

In a few words, instead of keeping to version of the theme data (the .less one, and a variable map which would allow editing), we'll keep just one.

Now, as for the old themes (until and if they are converted) they will still be working 100%.

The idea is: The theme format (= MYTHEME.ppTheme/info.json + THEME_STYLE) remains the same. If Peppermint finds a style.less as your THEME_STYLE, it'll use that one and everything will be ok. BUT: if it finds a variables.less in your .ppTheme bundle, then it will treat it as a new-style variable-based theme. :)

osxpeppermint commented 9 years ago

As for the full list of "themable" sections (all have the usual suffixes, as described above: _color, _background, _bold, _italic, _underline, _border, _font), here it is (once the feature is in the Theme Creator, I will also fully document it):

/* Theme name */

@theme;

/* General */

@body
@body_active_line

/* Elements */

@bracket
@console
@cursor
@fold
@fold_closed
@fold_end
@fold_hover
@fold_start
@gutter_active_line
@gutter
@gutter_breakpoint
@gutter_hover
@gutter_marker_error
@gutter_marker_info
@gutter_marker_warning
@print_margin
@scope
@scroller
@selection
@selection_word
@step
@tooltip

/* Syntax */

@syntax_comment
@syntax_comment_block
@syntax_comment_block_documentation
@syntax_comment_line
@syntax_constant
@syntax_constant_character
@syntax_constant_character_escape
@syntax_constant_language
@syntax_constant_numeric
@syntax_constant_other
@syntax_entity
@syntax_entity_name
@syntax_entity_name_function
@syntax_entity_name_section
@syntax_entity_name_tag
@syntax_entity_name_type
@syntax_entity_other_attribute
@syntax_entity_other
@syntax_entity_other_inherited
@syntax_invalid
@syntax_invalid_deprecated
@syntax_invalid_illegal
@syntax_invisible
@syntax_keyword
@syntax_keyword_control
@syntax_keyword_operator
@syntax_keyword_other
@syntax_markup
@syntax_markup_heading
@syntax_markup_link
@syntax_markup_list
@syntax_markup_quote
@syntax_markup_raw
@syntax_meta
@syntax_meta_tag
@syntax_storage
@syntax_storage_modifier
@syntax_storage_type
@syntax_string
@syntax_string_interpolated
@syntax_string_quoted
@syntax_string_quoted_double
@syntax_string_quoted_single
@syntax_string_quoted_triple
@syntax_string_regex
@syntax_string_unquoted
@syntax_support
@syntax_support_class
@syntax_support_constant
@syntax_support_function
@syntax_support_other
@syntax_support_type
@syntax_support_variable
@syntax_variable
@syntax_variable_language
@syntax_variable_other
@syntax_variable_parameter