energylink/public/sass/_variables.light.scss

// Cosmo 2.3.2
// Variables
// --------------------------------------------------


// Global values
// --------------------------------------------------

$theme-name: light;

// Grays
// -------------------------
$black:                 #000;

// -------------------------
$black:            #000;
$dark-1:           #141414;
$dark-2:           #1d1d1f;
$dark-3:           #262628;
$dark-4:           #373737;
$dark-5:           #444444;
$gray-1:           #555555;
$gray-2:           #7B7B7B;
$gray-3:           #b3b3b3;
$gray-4:           #D8D9DA;
$gray-5:           #ECECEC;
$gray-6:           #f4f5f8;
$gray-7:           #fbfbfb;

$white:            #fff;

// Accent colors
// -------------------------
$blue:             	   	#2AB2E4;
$blue-dark:             #3CAAD6;
$green:                 #3aa655;
$red:                   #d44939;
$yellow:                #FF851B;
$orange:                #Ff7941;
$pink:                  #E671B8;
$purple:                #9954BB;
$variable:              #2AB2E4;

$brand-primary:         $orange;
$brand-success:         $green;
$brand-warning:         $orange;
$brand-danger:          $red;

// Status colors
// -------------------------
$online:                #01A64F;
$warn:                  #F79520;
$critical:              #EC2128;

// Scaffolding
// -------------------------

$body-bg:  		  		    $white;
$page-bg:  		  		    $white;
$body-color:    		    $gray-1;
$text-color:    		    $gray-1;
$text-color-strong:	    $white;
$text-color-weak: 	    $gray-3;
$text-color-faint:      $gray-4;
$text-color-emphasis: 	$dark-5;

$text-shadow-strong: none;
$text-shadow-faint: none;

// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
$page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
$dashboard-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);

// Links
// -------------------------
$link-color:             $gray-1;
$link-color-disabled:    lighten($link-color, 30%);
$link-hover-color:       darken($link-color, 20%);
$external-link-color:    $blue;

// Typography
// -------------------------
$headings-color:       $text-color;
$abbr-border-color: 	 $gray-2 !default;
$text-muted: 			     $text-color-weak;

$blockquote-small-color:  $gray-2 !default;
$blockquote-border-color: $gray-3 !default;

$hr-border-color: $dark-3 !default;

// Components
$component-active-color: $white !default;
$component-active-bg:    $brand-primary !default;

// Panel
// -------------------------

$panel-bg: 		       $gray-7;
$panel-border-color: $gray-5;
$panel-border:       solid 1px $panel-border-color;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
$panel-header-hover-bg:       $gray-6;
$panel-header-menu-hover-bg:  $gray-4;

$divider-border-color:	      $gray-2;

// Graphite Target Editor
$tight-form-border:     $gray-4;
$tight-form-bg:    	    #eaebee;

$tight-form-func-bg:            $gray-5;
$tight-form-func-highlight-bg:  $gray-6;

$modal-backdrop-bg: $body-bg;
$code-tag-bg:       $gray-6;
$code-tag-border:   darken($code-tag-bg, 3%);

// Lists
$grafanaListBackground:    	   #eaebee;
$grafanaListAccent:            $gray-5;
$grafanaListBorderTop:         $gray-3;
$grafanaListBorderBottom:      $gray-3;
$grafanaListHighlight:         $gray-5;
$grafanaListMainLinkColor:     $text-color;


// Tables
// -------------------------
$table-bg:                   transparent; // overall background-color
$table-bg-accent:            $gray-5; // for striping
$table-bg-hover:             $gray-5; // for hover
$table-bg-active:            $table-bg-hover !default;
$table-border:               $gray-3; // table and cell border

// Scrollbars
$scrollbarBackground:   $gray-5;
$scrollbarBackground2:  $gray-5;
$scrollbarBorder:       $gray-4;

// Buttons
// -------------------------
$btn-primary-bg:        $brand-primary;
$btn-primary-bg-hl:     lighten($brand-primary, 8%);

$btn-secondary-bg:      $blue-dark;
$btn-secondary-bg-hl:   lighten($blue-dark, 4%);

$btn-success-bg:        lighten($green, 3%);
$btn-success-bg-hl:     darken($green, 3%);

$btn-warning-bg:        lighten($orange, 3%);
$btn-warning-bg-hl:     darken($orange, 3%);

$btn-danger-bg:         lighten($red, 3%);
$btn-danger-bg-hl:      darken($red, 3%);

$btn-inverse-bg:          $gray-5;
$btn-inverse-bg-hl:       darken($gray-5, 5%);
$btn-inverse-text-color:  $dark-4;

$btn-link-color: $gray-1;

$btn-divider-left:   $gray-4;
$btn-divider-right:  $gray-7;
$btn-drag-image:    '../img/grab_light.svg';

$iconContainerBackground: $white;

// Forms
// -------------------------
$input-bg:                       $gray-7;
$input-bg-disabled:              $gray-5;

$input-color:                    $dark-3;
$input-border-color:             $gray-5;
$input-box-shadow:               none;
$input-border-focus:             $blue !default;
$input-box-shadow-focus:         $blue !default;
$input-color-placeholder:        $gray-4 !default;
$input-label-bg:	        	 #eaebee;
$input-label-border-color:       #e3e4e7;
$input-invalid-border-color:     lighten($red, 5%);

// Sidemenu
// -------------------------
$side-menu-bg:            $body-bg;
$side-menu-item-hover-bg: $gray-6;
$side-menu-shadow:        0 0 5px #c2c2c2;

// Menu dropdowns
// -------------------------
$menu-dropdown-bg:            $white;
$menu-dropdown-hover-bg:      $gray-6;
$menu-dropdown-border-color:  $tight-form-border;
$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;

// Breadcrumb
// -------------------------
$page-nav-bg:               #eaebee;
$page-nav-shadow:           5px 5px 20px -5px $gray-4;
$page-nav-breadcrumb-color: $black;
$breadcrumb-hover-hl:       #d9dadd;

// search
$search-shadow: 0 5px 30px 0 $gray-4;

// Dropdowns
// -------------------------
$dropdownBackground:            $white;
$dropdownBorder:                $tight-form-border;
$dropdownDividerTop:            $gray-6;
$dropdownDividerBottom:         $white;
$dropdownDivider:               $dropdownDividerTop;
$dropdownTitle:                 $gray-3;

$dropdownLinkColor:             $dark-3;
$dropdownLinkColorHover:        $link-color;
$dropdownLinkColorActive:       $link-color;

$dropdownLinkBackgroundActive:  $gray-6;
$dropdownLinkBackgroundHover:   $gray-6;

// COMPONENT VARIABLES
// --------------------------------------------------


// Input placeholder text color
// -------------------------
$placeholderText:         $gray-2;


// Hr border color
// -------------------------
$hrBorder:                $gray-3;


// Horizontal forms & lists
// -------------------------
$horizontalComponentOffset:       180px;


// Wells
// -------------------------
$wellBackground:                  $gray-3;


// Navbar
// -------------------------

$navbarHeight:                    52px;
$navbarBackgroundHighlight:       #f8f8f8;
$navbarBackground:                #f2f3f7;
$navbarBorder:                    1px solid $tight-form-border;
$navbarShadow:                    0 0 3px #c1c1c1;

$navbarText:                      #444;
$navbarLinkColor:                 #444;
$navbarLinkColorHover:            #000;
$navbarLinkColorActive:           #333;
$navbarLinkBackgroundHover:       transparent;
$navbarLinkBackgroundActive:      darken($navbarBackground, 6.5%);
$navbarDropdownShadow:            inset 0px 4px 7px -4px darken($body-bg, 20%);

$navbarBrandColor:                $navbarLinkColor;

$navbarButtonBackground:          lighten($navbarBackground, 3%);
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);


// Pagination
// -------------------------
$paginationBackground:                $gray-2;
$paginationBorder:                    transparent;
$paginationActiveBackground:          $blue;


// Form states and alerts
// -------------------------
$warning-text-color:            lighten($orange, 10%);
$error-text-color:              lighten($red, 10%);
$success-text-color:            lighten($green, 10%);
$info-text-color:                     $blue;

$alert-error-bg:          linear-gradient(90deg, #d44939, #e04d3d);
$alert-success-bg:        linear-gradient(90deg, #3aa655, #47b274);
$alert-warning-bg:        linear-gradient(90deg, #d44939, #e04d3d);
$alert-info-bg:           $blue-dark;

// popover
$popover-bg:              $panel-bg;
$popover-color:           $text-color;
$popover-border-color:    $gray-5;
$popover-shadow:          0 0 20px $white;

$popover-help-bg:         $blue-dark;
$popover-help-color:      $gray-6;
$popover-error-bg:        $btn-danger-bg;

// Tooltips and popovers
// -------------------------
$tooltipColor:            $popover-help-color;
$tooltipBackground:       $popover-help-bg;
$tooltipArrowWidth:       5px;
$tooltipArrowColor:       $tooltipBackground;
$tooltipLinkColor:        lighten($popover-help-color, 5%);
$graph-tooltip-bg:        $gray-5;

// images
$checkboxImageUrl: '../img/checkbox_white.png';

// cards
$card-background: linear-gradient(135deg, $gray-5, $gray-6);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);

// info box
$info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff);

// footer
$footer-link-color:   $gray-3;
$footer-link-hover:   $dark-5;

// collapse box
$collapse-box-body-border: $gray-4;
$collapse-box-body-error-border: $red;

// json explorer
$json-explorer-default-color: black;
$json-explorer-string-color: green;
$json-explorer-number-color: blue;
$json-explorer-boolean-color: red;
$json-explorer-null-color: #855A00;
$json-explorer-undefined-color: rgb(202, 11, 105);
$json-explorer-function-color: #FF20ED;
$json-explorer-rotate-time: 100ms;
$json-explorer-toggler-opacity: 0.6;
$json-explorer-toggler-color: #45376F;
$json-explorer-bracket-color: blue;
$json-explorer-key-color: #00008B;
$json-explorer-url-color: blue;

// Changelog and diff
// -------------------------
$diff-label-bg:         $gray-5;
$diff-label-fg:         $gray-2;

$diff-switch-bg:        $gray-7;
$diff-switch-disabled:  $gray-5;

$diff-arrow-color:      $dark-3;
$diff-group-bg:         $gray-7;

$diff-json-bg:          $gray-5;
$diff-json-fg:          $gray-2;

$diff-json-added:       lighten(desaturate($green, 30%), 10%);
$diff-json-deleted:     desaturate($red, 35%);

$diff-json-old:       #5a372a;
$diff-json-new:       #664e33;

$diff-json-changed-fg:  $gray-6;
$diff-json-changed-num: $gray-4;
$diff-json-icon:        $gray-4;