gutter and line number improvements

[balupton]

// ===============================================================
// https://github.com/apex/apex-ui-slim/blob/81f8ac49c0b1632e459a7d04a6febbdb3a39261c/styles/open-color.less#L16-L30

@oc-gray-list: #f8f9fa, #f1f3f5, #e9ecef, #dee2e6, #ced4da, #adb5bd, #868e96, #495057, #343a40, #212529;

@oc-gray-0: extract(@oc-gray-list, 1);
@oc-gray-1: extract(@oc-gray-list, 2);
@oc-gray-2: extract(@oc-gray-list, 3);
@oc-gray-3: extract(@oc-gray-list, 4);
@oc-gray-4: extract(@oc-gray-list, 5);
@oc-gray-5: extract(@oc-gray-list, 6);
@oc-gray-6: extract(@oc-gray-list, 7);
@oc-gray-7: extract(@oc-gray-list, 8);
@oc-gray-8: extract(@oc-gray-list, 9);
@oc-gray-9: extract(@oc-gray-list, 10);

// ===============================================================
// @balupton's things

// needed for the git gutter variables
@import "syntax-variables";

// https://github.com/atom/git-diff/pull/19
atom-workspace.theme-apex-ui-slim atom-text-editor,
atom-text-editor {
	.gutter .line-number {
		&.git-line-modified {
			background: @syntax-color-modified;
			color: white;
		}
		&.git-line-added {
			background: @syntax-color-added;
			color: white;
		}
		&.git-line-removed {
			background: @syntax-color-removed;
			color: white;
		}
	}
}

// apex ui modifications
// https://github.com/apex/apex-ui-slim/issues/9
atom-workspace.theme-apex-ui-slim {
	// fix padding on tab bar
	.tab-bar {
		margin: 0;
	}
	.tree-view-resizer {
		border: 0;
	}

	// line numbers
	atom-text-editor {
		// hide line numbers
		.gutter {
			.line-number {
				opacity: 1;
				transition: color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
				background: @base-background-color;
				color: @base-background-color;
			}
		}

		// show line numbers when gutter hover or selection
		.gutter {
			.line-number.cursor-line:not(.cursor-line-no-selection) {
				color: @oc-gray-5;
			}
			&:hover {
				.line-number {
					color: @oc-gray-4;
				}
				.line-number.cursor-line:not(.cursor-line-no-selection) {
					color:  @oc-gray-7;
				}
			}
		}

		// change modification line numbers to hide/show accordingly
		.gutter .line-number {
			&.git-line-modified {
				color: @syntax-color-modified;
			}
			&.git-line-added {
				color: @syntax-color-added;
			}
			&.git-line-removed {
				color: @syntax-color-removed;
			}
		}
		.gutter .line-number.cursor-line:not(.cursor-line-no-selection),
		.gutter:hover .line-number {
			&.git-line-modified,
			&.git-line-added,
			&.git-line-removed {
				color: white;
			}
		}
	}
}

Standard code:

Code with changes:

Code with highlight:

Code with highlight and hover on gutter:

---

from https://github.com/balupton/dotfiles/commit/5af8ede663d5e5e975a7b0646e032e3d9d83aff7 and https://github.com/balupton/dotfiles/blob/5af8ede663d5e5e975a7b0646e032e3d9d83aff7/.atom/styles.less

[balupton]

happy to do as pull request if you want it

[tj]

I think I have most of the lineno stuff in the syntax, mine looks quite a bit different

[balupton]

@tj line numbers were always showing up for me, whereas this hides them unless hovered or selected

no worries if no merging - perhaps we can add a list of customisations to the readme, linking to issues like this, for other people's modding benefits

also pretty cool theme, really enjoying it, thanks 🍰