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

@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-hue: hue(@ui-syntax-color);

@ui-s-s: saturation(@ui-syntax-color);
.ui-saturation() when (@ui-hue <=  80) { @ui-saturation: min(@ui-s-s,  6%); } // minimize saturation for brown
.ui-saturation() when (@ui-hue >   80)
                  and (@ui-hue <  160) { @ui-saturation: min(@ui-s-s, 12%); } // reduce saturation for green
.ui-saturation() when (@ui-hue >= 160) { @ui-saturation: min(@ui-s-s, 24%); } // limit max saturaiotn for the rest
.ui-saturation();

@ui-s-l: lightness(@ui-syntax-color);
.ui-lightness() when (@ui-s-l <  16%) { @ui-lightness: @ui-s-l + 6%; } // increase lightness when too dark
.ui-lightness() when (@ui-s-l >= 16%) { @ui-lightness: min(@ui-s-l, 22%); } // limit max lightness
.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





/* 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:  saturate( lighten(@text-color, 20%), 40%);
@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, 100%, 50%);
@background-color-success: hsl(160,  70%, 42%);
@background-color-warning: hsl(32,   60%, 50%);
@background-color-error:   hsl(0,    70%, 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:     hsl(@ui-hue, @ui-saturation, @ui-lightness*.7);


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

@input-background-color:           hsla(0,0%,0%,.2);
@input-border-color:               hsla(0,0%,0%,.2);

@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: @base-accent-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%); // green
@ui-site-color-2: hsl(160,  70%, 42%); // blue
@ui-site-color-3: hsl(32,   60%, 50%); // orange
@ui-site-color-4: #D831B0;             // pink
@ui-site-color-5: #EBDD5B;             // yellow


// Sizes -----------------
@font-size:               11px;
@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: 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;





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

// 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%);


// Base -----------------
@base-accent-color: hsl(@ui-hue, @ui-saturation + 70%, @ui-lightness + 40%);


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

@button-text-color-selected:       contrast(@button-background-color-selected, white, hsl(@ui-hue,100%,10%), 40% );
@button-border-color-selected:     @base-border-color;

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

@input-background-color-focus:     fadein(@input-background-color, 6%);
@input-selection-color:            darken(@background-color-selected, 6%);
@input-selection-color-focus:      @background-color-selected;

@key-binding-border-color:         hsla(0,0%,100%,.1);
@key-binding-background-color:     hsla(0,0%,100%,.1);

@overlay-backdrop-color:           hsla(@ui-hue,@ui-saturation,5%,.5);

@progress-background-color:        @base-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

@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-icon-color:                   @text-color-subtle;
@tab-background-color-editor:      @ui-syntax-color;

@tooltip-background-color:         @base-accent-color;
@tooltip-text-color:               contrast(@tooltip-background-color, white, hsl(@ui-hue,100%,10%), 40% );
@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.25;
@ui-padding:              @ui-size*1.5;
@ui-padding-icon:         @ui-padding/3.3;
@ui-line-height:          @ui-size*2;
@ui-tab-height:           @ui-padding*2;




/* 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);

@markdown-preview-color: lighten(@text-color, 15%);
@markdown-preview-background-color: lighten(@base-background-color, 3%);
@markdown-preview-hr-color: lighten(@base-background-color, 3%);
@markdown-preview-code-color: lighten(@text-color, 30%);
@markdown-preview-code-background-color: lighten(@base-background-color, 10%);



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

// html:before {
//   content: "@{variable}";
// }
