Skip to content

Instantly share code, notes, and snippets.

@jhacksworth

jhacksworth/atom-one-dark-to-emacs.less

Last active January 31, 2018 22:06
Show Gist options
  • Save jhacksworth/889f7cf8b09efd81ef0b1b69b3ef8c0a to your computer and use it in GitHub Desktop.
Save jhacksworth/889f7cf8b09efd81ef0b1b69b3ef8c0a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jhacksworth revised this gist Jan 31, 2018. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion atom-one-dark-to-emacs.less
    View file
    Original file line number Diff line number Diff line change
    @@ -98,7 +98,9 @@

    .atom-one-dark-border , .ui-border { color:@ui-border; }

    // ============================================================================================================
    /*
    END OF MAPPING
    **************************************************************************************************************/


    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
  2. jhacksworth revised this gist Jan 31, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion atom-one-dark-to-emacs.less
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    // OR
    //
    // - Use the LESS compiler locally on your machine, e.g.:

    //
    // $ node_modules/.bin/lessc atom-one-dark-to-emacs.less
    //
    // # Where is the mapping?
  3. jhacksworth revised this gist Jan 31, 2018. No changes.
  4. jhacksworth revised this gist Jan 31, 2018. No changes.
  5. jhacksworth revised this gist Jan 31, 2018. 1 changed file with 23 additions and 18 deletions.
    41 changes: 23 additions & 18 deletions atom-one-dark-to-emacs.less
    View file
    Original file line number Diff line number Diff line change
    @@ -1,34 +1,39 @@
    // # What is this?
    //
    // A mapping of Atom "One Dark" theme colors to Emacs "atom-one-dark" theme
    // colors. Output colors are in hex and compiled by LESS, which is what Atom uses.
    //
    // # References?
    //
    // - Emacs atom-one-dark theme: https://github.com/jonathanchu/atom-one-dark-theme
    // - Atom One Dark Syntax theme: https://github.com/atom/one-dark-syntax
    // - Atom One Dark UI theme: https://github.com/atom/one-dark-ui
    // - LESS online preview: http://lesscss.org/less-preview/
    // A mapping of Atom "One Dark" theme colors to Emacs "atom-one-dark" theme
    // colors. Use this file with the LESS compiler to output colors in hex.
    //
    // # How do I use this?
    //
    // - Copy & Paste this file into the "LESS" column on this page: http://lesscss.org/less-preview/
    // - Copy & Paste this file into the "LESS" column on this page: http://lesscss.org/less-preview/
    //
    // OR
    // OR
    //
    // - Use the LESS compiler locally on your machine, e.g.:
    // $ node_modules/.bin/lessc atom-one-dark-to-emacs.less
    // - Use the LESS compiler locally on your machine, e.g.:

    // $ node_modules/.bin/lessc atom-one-dark-to-emacs.less
    //
    // # Where is the mapping?
    //
    // Jump to "MAPPING" below to see mapping between Atom's "One Dark" theme and
    // Emacs "atom-one-dark" theme
    // Jump to "MAPPING" below to see mapping between Atom's "One Dark" theme and
    // Emacs "atom-one-dark" theme
    //
    // # Where is an example of the output?
    //
    // https://gist.github.com/jhacksworth/e7efbe1a5cfe53abfe7619a3cdbf0f07
    //
    // # What is the other stuff below, after the mapping?
    //
    // Atom uses several files for defining the theme colors. They are included
    // here, either in part or whole, so that the mapping can be done easily in one
    // place.
    // Atom uses several files for defining the theme colors. They are included
    // here, either in part or whole, so that the mapping can be done easily in one
    // place.
    //
    // # References?
    //
    // - Emacs atom-one-dark theme: https://github.com/jonathanchu/atom-one-dark-theme
    // - Atom One Dark Syntax theme: https://github.com/atom/one-dark-syntax
    // - Atom One Dark UI theme: https://github.com/atom/one-dark-ui
    // - LESS online preview: http://lesscss.org/less-preview/
    //
    // ============================================================================================================

  6. jhacksworth created this gist Jan 31, 2018.
    516 changes: 516 additions & 0 deletions atom-one-dark-to-emacs.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,516 @@
    // # What is this?
    //
    // A mapping of Atom "One Dark" theme colors to Emacs "atom-one-dark" theme
    // colors. Output colors are in hex and compiled by LESS, which is what Atom uses.
    //
    // # References?
    //
    // - Emacs atom-one-dark theme: https://github.com/jonathanchu/atom-one-dark-theme
    // - Atom One Dark Syntax theme: https://github.com/atom/one-dark-syntax
    // - Atom One Dark UI theme: https://github.com/atom/one-dark-ui
    // - LESS online preview: http://lesscss.org/less-preview/
    //
    // # How do I use this?
    //
    // - Copy & Paste this file into the "LESS" column on this page: http://lesscss.org/less-preview/
    //
    // OR
    //
    // - Use the LESS compiler locally on your machine, e.g.:
    // $ node_modules/.bin/lessc atom-one-dark-to-emacs.less
    //
    // # Where is the mapping?
    //
    // Jump to "MAPPING" below to see mapping between Atom's "One Dark" theme and
    // Emacs "atom-one-dark" theme
    //
    // # What is the other stuff below, after the mapping?
    //
    // Atom uses several files for defining the theme colors. They are included
    // here, either in part or whole, so that the mapping can be done easily in one
    // place.
    //
    // ============================================================================================================


    /**************************************************************************************************************
    MAPPING
    - First CSS class name is the name of the Emacs atom-one-dark theme color
    variable
    - Second CSS class name is either:
    - the name of the Atom One Dark source variable OR
    - a comment about how the value is obtained
    .<emacs>,
    .<atom> {
    color: value
    }
    **************************************************************************************************************/
    // atom variable
    // emacs variable , or description color value compiled to hex
    //--------------------- -------------------- ---------------------------

    .atom-one-dark-accent , .syntax-accent { color: @syntax-accent; }
    .atom-one-dark-fg , .syntax-fg { color: @syntax-fg; } // same as @mono-1
    .atom-one-dark-bg , .syntax-bg { color: @syntax-bg; }

    /* Unknown origin */
    .atom-one-dark-bg-1 , .unknown { color: #121417; }
    // Possible candidate from atom theme
    // .atom-one-dark-bg-1 , .input-background-color { color: @input-background-color; }

    /* @syntax-cursor-line is defined with .04, i.e. 4%, opacity: hsla(@syntax-hue, 100%, 80%, .04) */
    /* Simulate opacity blending using the `mix` function from LESS */
    /* Current value of atom-one-dark-bg-hl doesn't match: #2F343D */
    .atom-one-dark-bg-hl , .simulate-opacity-blend { color: mix(hsl(@syntax-hue, 100%, 80%), @syntax-bg, 4%); }

    /* atom-one-dark-gutter takes opacity into account for line-number */
    /* For .line-number, @syntax-gutter-text-color will be blended with the background color */
    /* We can simulate opacity blending using the `mix` function from LESS */
    /* .line-number is defined with 0.6, i.e. 60%, opacity */
    .atom-one-dark-gutter , .simulate-opacity-blend { color: mix(@syntax-gutter-text-color, @syntax-bg, 60%); }

    .atom-one-dark-mono-1 , .mono-1 { color: @mono-1; } // default text
    .atom-one-dark-mono-2 , .mono-2 { color: @mono-2; }
    .atom-one-dark-mono-3 , .mono-3 { color: @mono-3; }
    .atom-one-dark-cyan , .hue-1 { color: @hue-1; } // cyan
    .atom-one-dark-blue , .hue-2 { color: @hue-2; } // blue
    .atom-one-dark-purple , .hue-3 { color: @hue-3; } // purple
    .atom-one-dark-green , .hue-4 { color: @hue-4; } // green
    .atom-one-dark-red-1 , .hue-5 { color: @hue-5; } // red 1
    .atom-one-dark-red-2 , .hue-5-2 { color: @hue-5-2; } // red 2
    .atom-one-dark-orange-1 , .hue-6 { color: @hue-6; } // orange 1
    .atom-one-dark-orange-2 , .hue-6-2 { color: @hue-6-2; } // orange 2
    .atom-one-dark-gray , .syntax-selection-color { color: @syntax-selection-color; }

    // This is the default foreground color of ui elements, and is used in the status-bar text
    .atom-one-dark-silver , .ui-fg { color: @ui-fg; }

    // From one-dark-ui: .status-bar {background-color: @level-3-color;}
    .atom-one-dark-black , .ui-level-3-color { color: @level-3-color; }

    .atom-one-dark-border , .ui-border { color:@ui-border; }

    // ============================================================================================================


    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // ONE-DARK-SYNTAX
    // https://github.com/atom/one-dark-syntax
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////


    // https://github.com/atom/one-dark-syntax/blob/8c4922f6f964a24ce8f4d352cbac1a9ec3a15f42/styles/colors.less
    // atom/one-dark-syntax/styles/colors.less
    // ============================================================================================================
    // (Entire file listed)

    // Config -----------------------------------
    @syntax-hue: 220;
    @syntax-saturation: 13%;
    @syntax-brightness: 18%;


    // Monochrome -----------------------------------
    @mono-1: hsl(@syntax-hue, 14%, 71%); // default text
    @mono-2: hsl(@syntax-hue, 9%, 55%);
    @mono-3: hsl(@syntax-hue, 10%, 40%);

    // Colors -----------------------------------
    @hue-1: hsl(187, 47%, 55%); // <-cyan
    @hue-2: hsl(207, 82%, 66%); // <-blue
    @hue-3: hsl(286, 60%, 67%); // <-purple
    @hue-4: hsl( 95, 38%, 62%); // <-green

    @hue-5: hsl(355, 65%, 65%); // <-red 1
    @hue-5-2: hsl( 5, 48%, 51%); // <-red 2

    @hue-6: hsl( 29, 54%, 61%); // <-orange 1
    @hue-6-2: hsl( 39, 67%, 69%); // <-orange 2


    // Base colors -----------------------------------
    @syntax-fg: @mono-1;
    @syntax-bg: hsl(@syntax-hue, @syntax-saturation, @syntax-brightness);
    @syntax-gutter: darken(@syntax-fg, 26%);
    @syntax-guide: fade(@syntax-fg, 15%);
    @syntax-accent: hsl(@syntax-hue, 100%, 66% );
    //END-OF-FILE==================================================================================================


    // https://github.com/atom/one-dark-syntax/blob/8c4922f6f964a24ce8f4d352cbac1a9ec3a15f42/styles/syntax-variables.less
    // atom/one-dark-syntax/styles/syntax-variables.less
    // ============================================================================================================
    // (Entire file listed)

    //@import "colors.less";

    // Official Syntax Variables -----------------------------------

    // General colors
    @syntax-text-color: @syntax-fg;
    @syntax-cursor-color: @syntax-accent;
    @syntax-selection-color: lighten(@syntax-background-color, 10%);
    @syntax-selection-flash-color: @syntax-accent;
    @syntax-background-color: @syntax-bg;

    // Guide colors
    @syntax-wrap-guide-color: @syntax-guide;
    @syntax-indent-guide-color: @syntax-guide;
    @syntax-invisible-character-color: @syntax-guide;

    // For find and replace markers
    @syntax-result-marker-color: fade(@syntax-accent, 24%);
    @syntax-result-marker-color-selected: @syntax-accent;

    // Gutter colors
    @syntax-gutter-text-color: @syntax-gutter;
    @syntax-gutter-text-color-selected: @syntax-fg;
    @syntax-gutter-background-color: @syntax-bg; // unused
    @syntax-gutter-background-color-selected: lighten(@syntax-bg, 8%);

    // Git colors - For git diff info. i.e. in the gutter
    @syntax-color-renamed: hsl(208, 100%, 60%);
    @syntax-color-added: hsl(150, 60%, 54%);
    @syntax-color-modified: hsl(40, 60%, 70%);
    @syntax-color-removed: hsl(0, 70%, 60%);

    // For language entity colors
    @syntax-color-variable: @hue-5;
    @syntax-color-constant: @hue-6;
    @syntax-color-property: @syntax-fg;
    @syntax-color-value: @syntax-fg;
    @syntax-color-function: @hue-2;
    @syntax-color-method: @hue-2;
    @syntax-color-class: @hue-6-2;
    @syntax-color-keyword: @hue-3;
    @syntax-color-tag: @hue-5;
    @syntax-color-attribute: @hue-6;
    @syntax-color-import: @hue-3;
    @syntax-color-snippet: @hue-4;


    // Custom Syntax Variables -----------------------------------
    // Don't use in packages

    @syntax-cursor-line: hsla(@syntax-hue, 100%, 80%, .04); // needs to be semi-transparent to show search results

    @syntax-deprecated-fg: darken(@syntax-color-modified, 50%);
    @syntax-deprecated-bg: @syntax-color-modified;
    @syntax-illegal-fg: white;
    @syntax-illegal-bg: @syntax-color-removed;
    //END-OF-FILE==================================================================================================


    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // ONE-DARK-UI
    // https://github.com/atom/one-dark-ui
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////


    // https://github.com/atom/one-dark-ui/blob/311e97284e231747f8f4e9735bc6476040e3aad5/styles/ui-variables-custom.less
    // atom/one-dark-ui/styles/ui-variables-custom.less
    // ============================================================================================================
    // (Entire file listed)

    // ONE dark UI colors
    // ----------------------------------------------

    //@import "syntax-variables";

    .ui-syntax-color() { @syntax-background-color: hsl(220,24%,20%); } .ui-syntax-color(); // fallback color
    @ui-syntax-color: @syntax-background-color;

    // Color guards -----------------
    @ui-s-h: hue(@ui-syntax-color);
    @ui-s-s: saturation(@ui-syntax-color);
    @ui-s-l: lightness(@ui-syntax-color);
    @ui-inv: 10%; // inverse lightness if below

    .ui-hue() when (@ui-s-s = 0) { @ui-hue: 220; } // Use blue hue when no saturation
    .ui-hue() when (@ui-s-s > 0) { @ui-hue: @ui-s-h; }
    .ui-hue();

    .ui-saturation() when (@ui-s-h <= 80) { @ui-saturation: min(@ui-s-s, 5%); } // minimize saturation for brown
    .ui-saturation() when (@ui-s-h > 80) and (@ui-s-h < 160) { @ui-saturation: min(@ui-s-s, 12%); } // reduce saturation for green
    .ui-saturation() when (@ui-s-h >= 160) and (@ui-s-l < @ui-inv) { @ui-saturation: min(@ui-s-s, 48%); } // limit max saturation for very dark backgrounds
    .ui-saturation() when (@ui-s-h >= 160) and (@ui-s-l >= @ui-inv) { @ui-saturation: @ui-s-s; }
    .ui-saturation();

    .ui-lightness() when (@ui-s-l < @ui-inv) {
    @ui-lightness: @ui-s-l + 8%; // increase lightness when too dark
    @ui-lightness-border: @ui-lightness*.3;
    }
    .ui-lightness() when (@ui-s-l >= @ui-inv) {
    @ui-lightness: min(@ui-s-l, 20%); // limit max lightness (for light syntax themes)
    @ui-lightness-border: @ui-lightness*.6;
    }
    .ui-lightness();

    // Main colors -----------------
    @ui-fg: hsl(@ui-hue, min(@ui-saturation, 18%), max(@ui-lightness*3, 66%) );
    @ui-bg: hsl(@ui-hue, @ui-saturation, @ui-lightness); // normalized @syntax-background-color
    @ui-border: hsl(@ui-hue, @ui-saturation, @ui-lightness-border);




    // Custom variables
    // These variables are only used in this theme
    // ----------------------------------------------

    @ui-theme-name: one-dark-ui;

    // Text (Custom) -----------------
    @text-color-faded: fade(@text-color, 20%);

    @text-color-added: @text-color-success; // green
    @text-color-ignored: @text-color-subtle; // faded
    @text-color-modified: @text-color-warning; // orange
    @text-color-removed: @text-color-error; // red
    @text-color-renamed: @text-color-info; // blue


    // Background (Custom) -----------------
    @level-1-color: lighten(@base-background-color, 6%);
    @level-2-color: @base-background-color;
    @level-3-color: darken(@base-background-color, 3%);

    @level-3-color-hover: lighten(@level-3-color, 6%);
    @level-3-color-active: lighten(@level-3-color, 3%);


    // Accent (Custom) -----------------
    @accent-luma: luma( hsl(@ui-hue, 50%, 50%) ); // get lightness of current hue

    // used for marker, inputs (smaller things)
    @accent-color: mix( hsv( @ui-hue, 100%, 66%), hsl( @ui-hue, 100%, 70%), @accent-luma ); // mix hsv + hsl (favor mostly hsl)
    @accent-text-color: contrast(@accent-color, hsl(@ui-hue,100%,10%), #fff, 25% );

    // used for button, tooltip (larger things)
    @accent-bg-color: mix( hsv( @ui-hue, 66%, 66%), hsl( @ui-hue, 66%, 60%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors)
    @accent-bg-text-color: contrast(@accent-bg-color, hsl(@ui-hue,100%,10%), #fff, 30% );

    // used for text only
    @accent-only-text-color: mix( hsv( @ui-hue, 100%, 66%), hsl( @ui-hue, 100%, 77%), @accent-luma ); // mix hsv + hsl (favor mostly hsl)

    // Components (Custom) -----------------
    @badge-background-color: lighten(@background-color-highlight, 6%);

    @button-text-color-selected: @accent-bg-text-color;
    @button-border-color-selected: @base-border-color;

    @checkbox-background-color: fade(@accent-bg-color, 33%);

    @input-background-color-focus: mix(@accent-bg-color, @input-background-color, 10%);
    @input-selection-color: mix(@accent-color, @input-background-color, 25%);
    @input-selection-color-focus: mix(@accent-color, @input-background-color, 50%);

    @overlay-backdrop-color: hsl(@ui-hue,@ui-saturation,10%);
    @overlay-backdrop-opacity: .9;

    @progress-background-color: @accent-color;

    @scrollbar-color: @level-1-color;
    @scrollbar-background-color: @level-3-color; // replaced `transparent` with a solid color to test https://github.com/atom/one-light-ui/issues/4
    @scrollbar-color-editor: contrast(@ui-syntax-color, darken(@ui-syntax-color, 18%), lighten(@ui-syntax-color, 9%) );
    @scrollbar-background-color-editor: @ui-syntax-color;


    @tab-text-color: @text-color-subtle;
    @tab-text-color-active: @text-color-highlight;
    @tab-text-color-editor: contrast(@ui-syntax-color, darken(@ui-syntax-color, 50%), @text-color-highlight );
    @tab-background-color-editor: @ui-syntax-color;
    @tab-inactive-status-added: fade(@text-color-success, 55%);
    @tab-inactive-status-modified: fade(@text-color-warning, 55%);


    @tooltip-background-color: @accent-bg-color;
    @tooltip-text-color: @accent-bg-text-color;
    @tooltip-text-key-color: @tooltip-background-color;
    @tooltip-background-key-color: @tooltip-text-color;


    // Sizes (Custom) -----------------

    @ui-size: 1em;
    @ui-input-size: @ui-size*1.15;
    @ui-padding: @ui-size*1.5;
    @ui-padding-pane: @ui-size*.5;
    @ui-padding-icon: @ui-padding/3.3;
    @ui-line-height: @ui-size*2;
    @ui-tab-height: @ui-size*2.5;




    // Packages variables
    // These variables are used to override packages
    // ----------------------------------------------

    @settings-list-background-color: darken(@level-2-color, 1.5%);
    @theme-config-box-shadow: inset 0 0 3px hsla(0, 0%, 100%, .4), 0 1px 3px hsla(0, 0%, 0%, .2);
    @theme-config-box-shadow-selected: inset 0 1px 3px hsla(0, 0%, 0%, .1);
    @theme-config-border-selected: hsla(0, 0%, 100%, .75);



    // Debug
    // Output variables to the top of the UI
    // -------------------------------------

    // html:before {
    // content: "@{variable}";
    // }
    //END-OF-FILE==================================================================================================


    // https://github.com/atom/one-dark-ui/blob/311e97284e231747f8f4e9735bc6476040e3aad5/styles/ui-variables.less
    // atom/one-dark-ui/styles/ui-variables.less
    // ============================================================================================================
    // (Entire file listed)


    //@import "ui-variables-custom.less"; // import colors and custom variables

    // ONE dark UI variables
    // ----------------------------------------------

    // Official variables
    // These variables must be defined in every theme
    // Source: https://github.com/atom/atom/blob/master/static/variables/ui-variables.less
    // ----------------------------------------------


    // Text -----------------
    @text-color: @ui-fg;
    @text-color-subtle: fadeout(@text-color, 40%);
    @text-color-highlight: lighten(@text-color, 20%);
    @text-color-selected: white;

    @text-color-info: hsl(219, 79%, 66%);
    @text-color-success: hsl(140, 44%, 62%);
    @text-color-warning: hsl( 36, 60%, 72%);
    @text-color-error: hsl( 9, 100%, 64%);


    // Background -----------------
    @background-color-info: hsl(208, 88%, 48%);
    @background-color-success: hsl(132, 58%, 40%);
    @background-color-warning: hsl( 42, 88%, 36%);
    @background-color-error: hsl( 5, 64%, 50%);

    @background-color-highlight: lighten(@base-background-color, 4%);
    @background-color-selected: lighten(@base-background-color, 8%);

    @app-background-color: @level-3-color;


    // Base -----------------
    @base-background-color: @ui-bg;
    @base-border-color: @ui-border;


    // Components -----------------
    @pane-item-background-color: @base-background-color;
    @pane-item-border-color: @base-border-color;

    @input-background-color: darken(@base-background-color, 6%);
    @input-border-color: @base-border-color;

    @tool-panel-background-color: @level-3-color;
    @tool-panel-border-color: @base-border-color;

    @inset-panel-background-color: lighten(@level-2-color, 4%);
    @inset-panel-border-color: fadeout(@base-border-color, 15%);

    @panel-heading-background-color: @level-2-color;
    @panel-heading-border-color: @base-border-color;

    @overlay-background-color: @level-2-color;
    @overlay-border-color: @base-border-color;

    @button-background-color: @level-1-color;
    @button-background-color-hover: lighten(@button-background-color, 2%);
    @button-background-color-selected: @accent-bg-color;
    @button-border-color: @base-border-color;

    @tab-bar-background-color: @level-3-color;
    @tab-bar-border-color: @base-border-color;
    @tab-background-color: @level-3-color;
    @tab-background-color-active: @level-2-color;
    @tab-border-color: @base-border-color;

    @tree-view-background-color: @level-3-color;
    @tree-view-border-color: @base-border-color;

    @ui-site-color-1: hsl(208, 100%, 50%); // blue
    @ui-site-color-2: hsl(160, 70%, 42%); // green
    @ui-site-color-3: hsl(32, 60%, 50%); // orange
    @ui-site-color-4: #D831B0; // pink
    @ui-site-color-5: #EBDD5B; // yellow


    // Sizes -----------------
    @font-size: 12px;
    @input-font-size: 14px;
    @disclosure-arrow-size: 12px;

    @component-padding: 10px;
    @component-icon-padding: 5px;
    @component-icon-size: 16px; // needs to stay 16px to look sharpest
    @component-line-height: 25px;
    @component-border-radius: 3px;

    @tab-height: 30px;


    // Font -----------------
    @font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
    //END-OF-FILE==================================================================================================


    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // Reference for line-number/gutter, cursor line and selection colors
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////

    // https://github.com/atom/atom/blob/ac9cc728450f96096aeeb7d185420a06610b4df2/static/text-editor.less#L54
    // atom/static/text-editor.less
    // ============================================================================================================
    // atom-text-editor {
    // // ...
    // .line-number {
    // // ...
    // opacity: 0.6;
    // }
    // }
    //END-OF-FILE==================================================================================================

    // https://github.com/atom/one-dark-syntax/blob/8c4922f6f964a24ce8f4d352cbac1a9ec3a15f42/styles/editor.less
    // atom/one-dark-syntax/styles/editor.less
    // ============================================================================================================
    // atom-text-editor { // L#4
    // background-color: @syntax-background-color;
    // color: @syntax-text-color;
    //
    // .line.cursor-line { // L#8
    // background-color: @syntax-cursor-line;
    // }
    //
    // .selection .region { // L#20
    // background-color: @syntax-selection-color;
    // }
    //
    // .gutter { // L#56
    //
    // .line-number { // L#58
    // color: @syntax-gutter-text-color;
    // // ...
    // }
    // }
    // }
    // }
    //END-OF-FILE==================================================================================================