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 🍰