ionic-framework/scss/ionic/_theme-variables.scss

// Brand Colors
// -------------------------------
$brandPrimary:         #428bca;
$brandSuccess:         #5cb85c;
$brandWarning:         #f0ad4e;
$brandDanger:          #d9534f;
$brandInfo:            #5bc0de;


// Grays
// -------------------------------
$black:                 #000 !default;
$grayDarker:            #222 !default;
$grayDark:              #333 !default;
$gray:                  #555 !default;
$grayLight:             #999 !default;
$grayLighter:           #eee !default;
$white:                 #fff !default;


// Accent colors
// -------------------------------
$blue:                  #049cdb !default;
$blueDark:              #0064cd !default;
$green:                 #46a546 !default;
$red:                   #9d261d !default;
$yellow:                #ffc40d !default;
$orange:                #f89406 !default;
$pink:                  #c3325f !default;
$purple:                #7a43b6 !default;


// Fonts
// -------------------------------
$sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$lightSansFontFamily:   "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
$monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace !default;


// Forms
// -------------------------
$inputBackground:               $white !default;
$inputBorder:                   #ccc !default;
$inputBorderRadius:             4px !default;
$inputDisabledBackground:       $grayLighter !default;
$formActionsBackground:         #f5f5f5 !default;
$inputHeight:                   $baseFontSize + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
$placeholderText:               $grayLight !default;


// Base
// -------------------------------
$baseFontFamily: $sansFontFamily;
$baseBackgroundColor: #fff;
$textColor:             $grayDark !default;


// Typography
// -------------------------------
$lightColor: #fff;
$darkColor: #333;


// Buttons
// -------------------------------
$buttonColor: #222;
$buttonPadding: 10px 15px;
$buttonClearPadding: 10px 0px;
$buttonBorderRadius: 2px;
$buttonBorderWidth: 1px;

// Button block that has spacing
$buttonBlockMargin: 0 0 10px 0;

$buttonDefaultBackground: #fff;
$buttonDefaultBackgroundActive: #eee;
$buttonDefaultBorder: #ddd;

$buttonSecondaryBackground: #f5f5f5;
$buttonSecondaryBackgroundActive: #eee;
$buttonSecondaryBorder: #ccc;

$buttonPrimaryBackground: #6999e9;
$buttonPrimaryBackgroundActive: #eee;
$buttonPrimaryBorder: #5981c5;

$buttonInfoBackground: #60d2e6;
$buttonInfoBackgroundActive: #eee;
$buttonInfoBorder: #51b3c4;

$buttonSuccessBackground: #89c163;
$buttonSuccessBackgroundActive: #eee;
$buttonSuccessBorder: #71a052;

$buttonWarningBackground: #f0b840;
$buttonWarningBackgroundActive: #eee;
$buttonWarningBorder: #cf9a29;

$buttonDangerBackground: #de5645;
$buttonDangerBackgroundActive: #eee;
$buttonDangerBorder: #bc4435;

$buttonDarkBackground: #444;
$buttonDarkBackgroundActive: #eee;
$buttonDarkBorder: #111;


// Bars
// -------------------------------
$barBackground: white;

// Bar variations
$barDefaultBackground: #fff;
$barDefaultBorderColor: #ddd;

$barSecondaryBackground: #f5f5f5;
$barSecondaryBorderColor: #ccc;

$barPrimaryBackground: #6999e9;
$barPrimaryBorderColor: #5981c5;

$barInfoBackground: #60d2e6;
$barInfoBorderColor: #51b3c4;

$barSuccessBackground: #89c163;
$barSuccessBorderColor: #71a052;

$barWarningBackground: #f0b840;
$barWarningBorderColor: #cf9a29;

$barDangerBackground: #de5645;
$barDangerBorderColor: #bc4435;

$barDarkBackground: #444;
$barDarkBorderColor: #111;


// Lists
// -------------------------------
$listDividerBackground: #f5f5f5;
$listDividerColor: #222;


// Form states and alerts
// -------------------------------
$warningText:             #c09853;
$warningBackground:       #fcf8e3;
$warningBorder:           darken(adjust-hue($warningBackground, -10), 3%);

$errorText:               #b94a48;
$errorBackground:         #f2dede;
$errorBorder:             darken(adjust-hue($errorBackground, -10), 3%);

$successText:             #468847;
$successBackground:       #dff0d8;
$successBorder:           darken(adjust-hue($successBackground, -10), 5%);

$infoText:                #3a87ad;
$infoBackground:          #d9edf7;
$infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);


// Panels
// -------------------------------
$menuBackgroundColor:    #eee;
$menuInsetBorderColor:   #bbb;