@phoenix-plugin-registry/catdad.one-gray/main.less

A Brackets theme based on Atom's 'One Dark', but matching the gray style of Brackets.

/* Define some variables used in multiple places */
@background: #1d1f21;
//@background: #2d2e30;
@foreground: #e5e5e5;

@darkblue: #0050a0;

// TODO name there using function, not appearance
@light: @foreground;
@medium: darken(@foreground, 40);
@red: #e53f3f;
@orange: #e0952d;
@yellow: #efd43b;
@green: #82c451;
@teal: #64b6c3;
@blue: lighten(@darkblue, 40);
@purple: #cb5feb;
@pink: #e06ea5;

@comment: @medium;
@gutter-text: @medium;
@selection: @darkblue;
@cursor: lighten(@selection, 30);
@string: @green;

@atom: @teal;
@keyword: @purple;

/* General */
.cm-header { color: @pink; }

.cm-variable { color: @light; }
// among other things, this is the varibale type in less
.cm-variable-2 { color: @red; }
.cm-variable-3 { color: @blue; }

.cm-link { color: @purple; }

.cm-string { color: @string; }
.cm-string-2 { color: @orange; }

.cm-meta { color: @pink; }

.cm-comment { color: @comment; }
.cm-error { color: @red; }

.cm-atom { color: @atom; }
.cm-number { color: @string; }
.cm-attribute { color: @string; }
.cm-plus { color: @string; }
.cm-minus { color: @red; }
.cm-def { color: @blue; }
.cm-property { color: @purple; }
.cm-hr { color: @orange; }

.cm-operator { color: @foreground; }
.cm-bracket { color: @foreground; }

.cm-rangeinfo { color: #6c71c4; }
.cm-qualifier { color: @blue; }
.cm-builtin { color: @orange; }
.cm-tag { color: @blue; }
.cm-quote { color: @blue; }

// function, this, return, etc.
.cm-keyword { color: @keyword; }

/* CSS, LESS */
.cm-m-css {
    &.cm-tag { color: @red; }
    &.cm-property { color: @light; }
    &.cm-number { color: @orange; }
    &.cm-atom { color: @atom; }
    &.cm-builtin { color: @blue; }
    &.cm-qualifier { color: @orange; }
}

/* HTML, XML */
.cm-m-xml {
    &.cm-tag.cm-bracket { color: @light; }
    &.cm-tag { color: @red; }
    &.cm-attribute { color: @orange; }
}

/* Shell */
.cm-m-shell {
    &.cm-attribute { color: @light; }
    &.cm-def { color: @red; }
}

/* Javascript */
.cm-m-javascript {

    @js-atom: @orange;
    @js-operator: @light; // @atom;

    @global-var: @blue;
    @func-scope-var: @light;
    @prop: @yellow;

    // vars declared in function declaration
    &.cm-def { color: @func-scope-var; }
    // +, -, =, ||, &&, etc.
    &.cm-operator { color: @js-operator; }
    // this seems to be varibles declared outside of the function scope
    &.cm-variable { color: @global-var; }
    // this seems to be variables local to a function
    &.cm-variable-2 { color: @func-scope-var; }
    &.cm-property { color: @prop; }
    &.cm-string.cm-property { color: @red; }

    &.cm-atom { color: @js-atom; }
    &.cm-number { color: @js-atom; }
}

/* CoffeeScript, bleh */
.cm-m-coffeescript {
    @js-atom: @orange;

    &.cm-variable { color: @light; }
    &.cm-property { color: @blue; }

    &.cm-operator { color: @yellow; }
    &.cm-punctuation { color: @light; }

    &.cm-atom { color: @js-atom; }
    &.cm-number { color: @js-atom; }
}

/* C, PHP, Scala */
.cm-m-clike {
    &.cm-def { color: @orange; }
    &.cm-variable-2 { color: @red; }
    &.cm-operator { color: @light; }
    &.cm-atom { color: @atom; }
    &.cm-number { color: @orange; }
    &.cm-builtin { color: @blue; }
}

/* Markdown */
.cm-m-markdown {
    &.cm-strong {
        color: @orange;
        font-weight: bold;
    }
    &.cm-em {
        color: @purple;
        font-style: italic;
    }

    &.cm-tag { color: @red; }
    &.cm-link { color: @blue; }
}

/* Ruby */
.cm-m-ruby {
    @rb-atom: @orange;

    &.cm-property { color: @light; }
    &.cm-atom { color: @rb-atom; }
    &.cm-tag { color: @rb-atom; }
    &.cm-string-2 { color: @atom; }
}

/* Code Styling */
.CodeMirror,
.CodeMirror-scroll {
    background-color: @background;
    color: @foreground;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    // background: #2f2f2f;
}

.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
    box-shadow: inset 15px 0 0 0 #000000;
}

.CodeMirror-focused .CodeMirror-activeline {
    .CodeMirror-gutter-elt {
        background: rgba(0, 0, 0, 0.2);
        color: #ffffff;
    }
    .inline-widget .CodeMirror-gutter-elt {
        color: @gutter-text;
    }
}

.CodeMirror-searching {
    background-color: #d3cd69;

    &.searching-current-match {
        background-color: #f6a644;
    }
}

.CodeMirror-cursor {
    border-left: 1px solid @cursor;
}

.CodeMirror-overwrite .CodeMirror-cursor {
    border-bottom: 1px solid @cursor;
    border-left: 0;
}

.CodeMirror-gutters {
    background-color: @background;
    border-right: 0;
}

.CodeMirror-linenumber {
    color: @gutter-text;
}

.CodeMirror .CodeMirror-selected {
    background: desaturate(fadeout(@selection, 50), 80);
}

.CodeMirror-focused .CodeMirror-selected {
    background: fadeout(@selection, 50);
}

.CodeMirror-matchingbracket,
.CodeMirror-matchingtag {
    @color: @cursor;

    /* Ensure visibility against gray inline editor background */
    background-color: fadeout(@color, 60);
    border-bottom: 1px solid @color;
    color: @light !important;
}

.CodeMirror {
    .CodeMirror {
        background: transparent;
    }

    .CodeMirror .CodeMirror-gutters {
        background: transparent;
        border-right: 0;
    }

    .CodeMirror .CodeMirror-activeline-background {
        background: transparent;
    }

    .CodeMirror .CodeMirror-activeline .CodeMirror-gutter-elt {
        background: transparent;
        color: @gutter-text;
    }

    .CodeMirror-focused .CodeMirror-activeline-background {
        // TODO what is this?
        background: #2f2f2f;
    }

    // TODO this rule already exists above, use as mixin instead
    .CodeMirror-focused .CodeMirror-activeline {
        .CodeMirror-gutter-elt {
            background: rgba(0, 0, 0, 0.2);
            color: #ffffff;
        }
    }
}

.CodeMirror-foldgutter-open::after {
    color: @gutter-text;
}

.CodeMirror-foldgutter-folded::after {
    color: @gutter-text;
}

.CodeMirror.over-gutter,
.CodeMirror-activeline {
    .CodeMirror-foldgutter-open::after {
        color: @gutter-text;
    }
}

.CodeMirror-foldmarker {
    background-color: @background;
    border-color: fadeout(@foreground, 80);
    color: @foreground;
}

/* Non-editor styling */

.image-view,
.not-editor {
    background-color: @background;
}

.view-pane .image-view {
    color: @foreground;
}