soft-aesthetic / soft-era-atom-syntax

🌸 soft era for Atom ~ Light pastel syntax theme for soft, warm, cozy, cute coding. 🌱

~ soft era ~

syntax theme for Atom

🌸 Light pastel syntax theme for cozy, cute coding & typing. 🌱

UI theme in screenshot is a WIP soft era UI. you can use One Light UI and these CSS overrides to use it now :)

~.~
  a soft, warm, low contrast theme,
  with pastel accents that are easy on your eyes

^.^
  make stuff and learn.
  make the world your kinda place.
  take care of the people around you

🌿

Installation

• Go to Settings > Install > Themes tab
• Search for soft-era-syntax and click Install
• Go to Settings > Themes and choose Soft Era from the dropdown menu

or, from the command line:

apm install soft-era-syntax

💾 enjoy <3

---

Fixes

Some UI may cause the cursor to appear as invisible, or the same as the background color, in search boxes. If you have this issue, you can add this to your stylesheet:

.cursor {
  color: rgba(244,129,187,1);
  border-left: 2px solid rgba(244,129,187,1) !important;
}

Contributing

TODO:

• do a full pass on markdown styles to make sure formatting is colored consistently with the rest of the system, and with the correct inheritence rules. reference the highlight colors in soft era for VC Code.
• create variable for operator and whatever other @soft- is still in use in the base.less file
• this theme reports deprecations in the CSS selectors, pull in new version of atom one theme to compare/revise
  • also compare with the Flatwhite theme for colors & how they decides to higlight various elements.
  • if that doesn't work, just update selectors in this theme
• examine differences between the packages react (~500k downloads) and language-babel (~1.5m downloads), as they lead to different colors in a lot of cases.
• build in better support for language-babel
  • theme selectors, particularly special javascript selectors, are built with the react way of handling things—this should not be treated as primary since it isn't default
  • see how styling works without either of these packages activated
• parameter vs arguments are fucked up
• determine other packages that require or would benefit from specific support.
  • group these into separate .less files. currently there are already special styles for the indent-guide-improved package, inside of index.less
• make html tag punctuation and text same color? (maybe depend on determining the differences of above-named packages)
• add support for package language-markdown -> package contribution reference
  • currently the quote characters put in syntax--string classes and that makes it not work well (especially when writing with punctuation)
• see about removing all direct color variables like @cyan from base.less
• move all color definitions into one place, written in a standardized way, to make it easier to keep track, make alternate versions of the theme, and port to other programs.
  • verify this is being done in the best way to match up with the latest theme code
• separate out "special treatments" and overrides. (most are currently at bottom of file, but there are some atom-specific treatments like before and after elements, special function coloring, italicizing words, changing font weight — appropriate to pull these out and group at bottom of file or in separate .less file?)
  • these seem to be a bit of a mess and first fixing some of the package support/conflicts above may help this organization
• nicer clickable link treatment (for markdown previews and wherever else they are clickable)

Much of this cleanup and organization is in the push to make this theme easier to 1) organize for porting to other editors, and 2) using the same organizational thought behind the syntax highlighting to quickly create other themes.

---

Steps for cloning a repo from http://flight-manual.atom.io/hacking-atom/sections/creating-a-theme/#creating-a-ui-theme

if the editor loses track of the local working copy of this (or any) theme, follow steps 3 – 9

must use apm link instead of apm link --dev for this local theme to work in normal, non-dev editor instances.

(using --dev is a "safe mode" which will prevent the theme from activating in a normal window, in case you break something while editing.)

1. Fork the ui-theme-template [or this theme, if this is what you're forking]
2. Clone the forked repository to the local filesystem
3. Open a terminal in the forked theme's directory
4. Open your new theme in a Dev Mode Atom window run atom --dev . in the terminal or use the View > Developer > Open in Dev Mode menu
5. Change the name of the theme in the theme's package.json file
6. Name your theme end with a -ui, for example super-white-ui [for syntax themes like this package, use -syntax instead of -ui]
7. Run apm link --dev to symlink your repository to ~/.atom/dev/packages
8. Reload Atom using Alt+Cmd+Ctrl+L
9. Enable the theme via the "UI Theme" drop-down in the "Themes" tab of the Settings View
10. Make changes! Since you opened the theme in a Dev Mode window, changes will be instantly reflected in the editor without having to reload.

---

Currently styled with .js, .css, .html, .json, .md, .svg files in mind as that's my main use case. Would like to hear more about other files/languages.

Happy to hear any input <3

💖 @animalphase on twitter

soft-era-atom-syntax's Issues

UI theme in screenshots?

What UI theme is it in the screenshots? Thanks in advance ✨

Deprecated selector in `soft-era-syntax/index.less`

In soft-era-syntax/index.less:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

• .comment => .syntax--comment

• .entity => .syntax--entity

• .entity.name.type => .syntax--entity.syntax--name.syntax--type

• .entity.other.inherited-class => .syntax--entity.syntax--other.syntax--inherited-class

• .keyword => .syntax--keyword

• .keyword.control => .syntax--keyword.syntax--control

• .keyword.operator => .syntax--keyword.syntax--operator

• .keyword.other.special-method => .syntax--keyword.syntax--other.syntax--special-method

• .keyword.other.unit => .syntax--keyword.syntax--other.syntax--unit

• .storage => .syntax--storage

• .constant => .syntax--constant

• .constant.other => .syntax--constant.syntax--other

• .constant.character.escape => .syntax--constant.syntax--character.syntax--escape

• .constant.other.color => .syntax--constant.syntax--other.syntax--color

• .variable => .syntax--variable

• .variable.interpolation => .syntax--variable.syntax--interpolation

• .variable.parameter.function => .syntax--variable.syntax--parameter.syntax--function

• .invalid.illegal => .syntax--invalid.syntax--illegal

• .string => .syntax--string

• .string.regexp .source.ruby.embedded => .syntax--string.syntax--regexp .syntax--source.syntax--ruby.syntax--embedded

• .string.other.link => .syntax--string.syntax--other.syntax--link

• .punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"] => .syntax--punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"]

• .punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].definition.comment => .syntax--punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].syntax--definition.syntax--comment

• .punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].definition.heading, .punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].definition.identity => .syntax--punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].syntax--definition.syntax--heading, .syntax--punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].syntax--definition.syntax--identity

• .punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].definition.bold => .syntax--punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].syntax--definition.syntax--bold

• .punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].definition.italic => .syntax--punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].syntax--definition.syntax--italic

• .punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].section.embedded => .syntax--punctuation[not=".syntax--string.syntax--begin"][not=".syntax--string.syntax--end"].syntax--section.syntax--embedded

• .support.class => .syntax--support.syntax--class

• .support.function => .syntax--support.syntax--function

• .support.function.any-method => .syntax--support.syntax--function.syntax--any-method

• .entity.name.function => .syntax--entity.syntax--name.syntax--function

• .entity.name.class, .entity.name.type.class => .syntax--entity.syntax--name.syntax--class, .syntax--entity.syntax--name.syntax--type.syntax--class

• .entity.name.section => .syntax--entity.syntax--name.syntax--section

• .entity.name.tag => .syntax--entity.syntax--name.syntax--tag

• .entity.other.attribute-name => .syntax--entity.syntax--other.syntax--attribute-name

• .entity.other.attribute-name.id => .syntax--entity.syntax--other.syntax--attribute-name.syntax--id

• .meta.class => .syntax--meta.syntax--class

• .meta.link => .syntax--meta.syntax--link

• .meta.require => .syntax--meta.syntax--require

• .meta.selector => .syntax--meta.syntax--selector

• .meta.separator => .syntax--meta.syntax--separator

• .none => .syntax--none

• .markup.bold => .syntax--markup.syntax--bold

• .markup.changed => .syntax--markup.syntax--changed

• .markup.deleted => .syntax--markup.syntax--deleted

• .markup.italic => .syntax--markup.syntax--italic

• .markup.heading => .syntax--markup.syntax--heading

• .markup.heading .punctuation.definition.heading => .syntax--markup.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading

• .markup.inserted => .syntax--markup.syntax--inserted

• .markup.list => .syntax--markup.syntax--list

• .markup.quote => .syntax--markup.syntax--quote

• .markup.raw.inline => .syntax--markup.syntax--raw.syntax--inline

• .markup.link => .syntax--markup.syntax--link

• .source.gfm .markup => .syntax--source.syntax--gfm .syntax--markup

• .source.gfm .markup.heading => .syntax--source.syntax--gfm .syntax--markup.syntax--heading

• .variable.language => .syntax--variable.syntax--language

• atom-text-editor::shadow .meta.arguments.js => atom-text-editor.editor .syntax--meta.syntax--arguments.syntax--js

• .syntax--key, .syntax--key .string => .syntax--key, .syntax--key .syntax--string

Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

duplicate definition of `@soft-violet`

See

soft-era-atom-syntax/styles/colors.less

Lines 29 to 30 in b9d96b2

	@soft-violet: #ce9ae8;
	@soft-violet: #cb8dd7;

It looks like the value defined on line 30 is the value that is currently active in the theme, so maybe we can remove line 29?

TODO / etc highlighting not working?

currently rendering as a violent color. should be #e4846f

perhaps this functionality is different depending on if you have babel, react, or atom-ide installed? need to check and fix.

styles for platformio-ide-terminal (and other terminal integrations?)

most popular terminal plugin: https://atom.io/packages/platformio-ide-terminal