Colors
SASS Color Variables
All of the available sass variables for theming, branding, & other UI states are available via the goponents package. These can be imported in a scss file with: @import '~@tangoe/goponents/styles/variables';
Base Colors
$base-primary: #65B360;
$base-light: #FFFFFF;
$base-light-secondary: #ADB5BD;
$base-dark: #313536;
$base-dark-secondary: #202626;
Galaxy Blue
Galaxy Blue should be used when there is a primary action on a page or other minor accents in the UI.
// Use this to apply the positive (success) state color
$ui-color-positive: #4EDED2;
// Used when the ui color needs a hover state
$ui-color-positive-hover: darken($ui-color-primary, 3.5%);
// Used when the ui color needs an active state
$ui-color-positive-active: darken($ui-color-primary, 7%);
// Use this to apply the brand color as a gradient.
// Should only be used as a small accent
$ui-color-positive-gradient: linear-gradient(to bottom, $ui-color-positive, $ui-color-positive-hover);
Earth Green
Earth Green should be used to indicate a positive event (ex: form completion), a positive status (ex: indicator), or to show a numerical positive (ex: currency).
// Use this to apply the positive (success) state color
$ui-color-positive: #1D8915;
// Used when the ui color needs a hover state
$ui-color-positive-hover: darken($ui-color-positive, 3.5%);
// Used when the ui color needs an active state
$ui-color-positive-active: darken($ui-color-positive, 7%);
// Use this to apply the brand color as a gradient.
// Should only be used as a small accent
$ui-color-positive-gradient: linear-gradient(to bottom, $ui-color-positive, $ui-color-positive-hover);
Horizon Red
Horizon Red should be used when an action will result in a negative result (ex: deletion), when an event has resulted in an error (ex: failed form submission), a sense of urgency is needed (ex: alerts or warnings), or numerical negative (ex: currency).
// Use this to apply the negative (error) state color
$ui-color-negative: #DC3545;
// Used when the ui color needs a hover state
$ui-color-negative-hover: darken($ui-color-negative, 3.5%);
// Used when the ui color needs an active state
$ui-color-negative-active: darken($ui-color-negative, 7%);
// Use this to apply the brand color as a gradient.
// Should only be used as a small accent
$ui-color-negative-gradient: linear-gradient(to bottom, $ui-color-negative, $ui-color-negative-hover);
Nebula Purple
Nebula Purple should be used to present additional information (ex: notice), or when taking a neutral action (ex: data refresh).
// Use this to apply the neutral (info) state color
$ui-color-neutral: #7F47CC;
// Used when the ui color needs a hover state
$ui-color-neutral-hover: darken($ui-color-neutral, 3.5%);
// Used when the ui color needs an active state
$ui-color-neutral-active: darken($ui-color-neutral, 7%);
// Use this to apply the brand color as a gradient.
// Should only be used as a small accent
$ui-color-neutral-gradient: linear-gradient(to bottom, $ui-color-neutral, $ui-color-neutral-hover);