brackets_colors.less

// Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
//  
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the "Software"), 
// to deal in the Software without restriction, including without limitation 
// the rights to use, copy, modify, merge, publish, distribute, sublicense, 
// and/or sell copies of the Software, and to permit persons to whom the 
// Software is furnished to do so, subject to the following conditions:
//  
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//  
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
// DEALINGS IN THE SOFTWARE.



/* 
 * Brackets Colors
 *
 * Based on a de-saturated modification of Solarized
 *  http://ethanschoonover.com/solarized
 *
 * These are general purpose colors that can be used in defining
 * themes or UI elements. We should NEVER use color literals (e.g. #aaa)
 * elsewhere in our LESS. (Using "lighten" and "darken") functions
 * is encouraged however.
 
 * IMPORTANT: IF we want a UI element to be themeable, these variable 
 * names should _not_ be used in its definition.
 * 
 * Instead, a new semantically-meaningful variables/mixins should be added 
 * to the "brackets_theme_default.less" file, and then these variables/mixins
 * should be used in the definition of the UI element
 *
 * For UI elements we do NOT want to theme, we should use these color names
 * 
 * All brackets color variable names (that refer to an actual color)
 * are prefixed with "bc-" for "brackets color". This is to avoid confusion
 * with system and css color names. (We define our own colors because system
 * colors are ugly.)
 */

// use the "lighten" or "darken" function with integer multiples of this
@bc-color-step-size: 10%;

@bc-black:       #000000;
@bc-grey:        #808080;
@bc-gray:        @bc-grey; // because people spell it both ways
@bc-white:       #ffffff;

@bc-yellow:      #b58900;
@bc-orange:      #cb4b16;
@bc-red:         #dc322f;
@bc-magenta:     #d33682;
@bc-violet:      #6c71c4;
@bc-blue:        #268bd2;
@bc-light-blue:  #d8e0e8;
@bc-cyan:        #2aa198;
@bc-green:       #859900;

@bc-error:       #f74687;

// TopCoat colors and styles, putting them here for now; let me know if there's a better place for these. 

@tc-icon-down:                  0.5;
@tc-disabled-opacity:           0.3;

@tc-link:                          #0083e8;
@tc-link-hover:                    #0083e8;
@tc-dropdown-shadow:               0 3px 9px rgba(0, 0, 0, 0.24);
@tc-gray-panel:                    #dfe2e2;
@tc-gray-panel-border:             rgba(0, 0, 0, 0.12);
@tc-gray-panel-bevel:              inset 0 1px 0 rgba(255, 255, 255, 0.3);
@tc-gray-panel-top-bar:            #d4d7d7;
@tc-gray-panel-top-bar-shadow:     1px solid rgba(0, 0, 0, 0.03);
@tc-gray-panel-separator:          #c3c6c5;
@tc-gray-component-border:         #b2b5b5;
@tc-gray-component-focused-border: #2893ef;
@tc-gray-component-error-border:   #fa689d;
@tc-gray-component-triangle:       #878787;
@tc-alt-component-border:          rgba(0, 0, 0, 0.24);

@tc-button-background:             #e5e9e9;
@tc-button-highlight:              inset 0 1px 0 #f3f3f3;
@tc-button-alt-highlight:          inset 0 1px 0 rgba(255, 255, 255, 0.06);
@tc-button-down-background:        #d3d7d7;
@tc-button-alt-down-background:    #404141;
@tc-button-down-shadow:            inset 0 1px 0 rgba(0, 0, 0, 0.06);
@tc-inline-border-radius:          2px;
@tc-control-border-radius:         3px;
@tc-panel-border-radius:           5px;
@tc-small-shadow-top:              0 -1px 3px rgba(0, 0, 0, 0.12);
@tc-small-shadow-bottom:           0 1px 3px rgba(0, 0, 0, 0.12);
@tc-normal-shadow-bottom:          0 5px 10px rgba(0, 0, 0, 0.21);
@tc-highlight:                     #e0f0fa;
@tc-selected-row:                  #d0d5d5;
@tc-hover-highlight:               rgba(255, 255, 255, 0.6);
@tc-text:                          #454545;
@tc-emphasized-text:               #333;
@tc-quiet-text:                    #aaa;
@tc-text-shadow:                   0 1px 0 rgba(255, 255, 255, 0.75);
@tc-call-to-action:                #288edf;
@tc-call-to-action-border:         #1474bf;
@tc-call-to-action-highlight:      inset 0 1px 0 #48a0e8;
@tc-call-to-action-down:           #0380e8;
@tc-call-to-action-down-shadow:    inset 0 1px 0 rgba(0,0,0,0.12);
@tc-call-to-action-text:           #ffffff;
@tc-call-to-action-text-shadow:    0 -1px 0 rgba(0,0,0,0.36);
@tc-input-background:              #ffffff;
@tc-input-border:                  #b2b5b5;
@tc-input-inner-shadow:            inset 0 1px 0 rgba(0, 0, 0, 0.06);
@tc-input-placeholder-text:        #888;
@tc-input-glow:                    0 0 0 1px #94ceff;
@tc-input-error-glow:              0 0 0 1px #ffb0cd;
@tc-light-weight-text:             #000;
@tc-light-weight-quiet-text:       #777;
@tc-warning-background:            #FDF5CC;
@tc-warning-text:                  #635301;
@tc-error-text:                    #F74687;
@tc-lighter-gray:                  #e6e9e9;
@tc-sidebar-selection:             #2D2E30;
@tc-sidebar-selection-highlight:   rgba(255, 255, 255, 0.12);
@tc-sidebar-selection-shadow:      rgba(0, 0, 0, 0.12);