2017-02-02 14:35:38 +02:00
|
|
|
/*
|
|
|
|
* There should be no string value to keys outside the `base` object.
|
|
|
|
* If a new colors needs to be used, check it doesn't already exist, or
|
|
|
|
* anything that is similar, and if it doesn't, add a key-value and reference from
|
|
|
|
* there. Lets try and keep different color variations down ot a minimum.
|
2017-02-14 17:03:21 +02:00
|
|
|
*
|
|
|
|
---
|
2017-02-14 16:40:31 +02:00
|
|
|
Color Object example
|
|
|
|
const color_name = {
|
|
|
|
color_name: '#FFFFFF',
|
|
|
|
color_name_style1: '#FFF000',
|
|
|
|
color_name_style2: '#FFF333',
|
|
|
|
};
|
|
|
|
*/
|
|
|
|
|
|
|
|
const primary = {
|
2017-07-11 17:11:52 +03:00
|
|
|
primary: '#3B46CC',
|
|
|
|
primaryHover: '#475AD1',
|
|
|
|
primaryActive: '#2D3884',
|
2017-02-15 15:59:49 +02:00
|
|
|
primaryDesaturated: '#3B4AAF',
|
2017-07-11 17:11:52 +03:00
|
|
|
primaryDesaturatedHover: '#475AD1',
|
|
|
|
primaryDesaturatedActive: '#2D3884'
|
2017-02-14 16:40:31 +02:00
|
|
|
};
|
|
|
|
|
2017-07-11 17:11:52 +03:00
|
|
|
// TOPOLOGY
|
2017-02-14 16:40:31 +02:00
|
|
|
const secondary = {
|
|
|
|
secondary: '#464646',
|
|
|
|
secondaryHover: '#3F3F3F',
|
2017-02-20 16:18:19 +02:00
|
|
|
secondaryActive: '#343434'
|
2017-02-14 16:40:31 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const white = {
|
2017-07-11 17:11:52 +03:00
|
|
|
white: '#FFFFFF', // used
|
|
|
|
whiteHover: '#F8F8F8', // used
|
|
|
|
whiteActive: '#E9E9E9' // used
|
2017-02-14 16:40:31 +02:00
|
|
|
};
|
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
/** ********************************** BASE *********************************** */
|
2017-02-20 18:15:36 +02:00
|
|
|
|
|
|
|
export const base = {
|
2017-02-14 16:40:31 +02:00
|
|
|
...primary,
|
|
|
|
...secondary,
|
|
|
|
...white,
|
2017-07-11 17:11:52 +03:00
|
|
|
text: '#494949', // used
|
|
|
|
grey: '#D8D8D8', // used
|
|
|
|
disabled: '#FAFAFA', // used
|
|
|
|
background: '#FAFAFA', // used
|
|
|
|
green: '#00AF66', // used
|
|
|
|
greenDark: '#009858', // not used - BORDER
|
|
|
|
orange: '#E38200', // used
|
|
|
|
orangeDark: '#CB7400', // not used - BORDER
|
|
|
|
red: '#DA4B42', // used
|
|
|
|
redDark: '#CD251B' // not used - BORDER
|
2017-01-03 17:46:43 +02:00
|
|
|
};
|
|
|
|
|
2017-07-11 17:11:52 +03:00
|
|
|
/** ********************************** HEADER ********************************** */
|
|
|
|
|
|
|
|
const brandBackground = '#1E313B';
|
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
/** ********************************** FONTS ********************************** */
|
2017-02-20 18:15:36 +02:00
|
|
|
|
|
|
|
export const fonts = {
|
2017-02-02 14:35:38 +02:00
|
|
|
semibold: base.secondary,
|
2017-05-18 21:21:33 +03:00
|
|
|
regular: base.text,
|
|
|
|
abbrBorderColor: base.secondary,
|
|
|
|
textMuted: base.secondary
|
2017-01-04 20:51:17 +02:00
|
|
|
};
|
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
/** ******************************** INACTIVE ********************************* */
|
2017-02-20 18:15:36 +02:00
|
|
|
|
|
|
|
export const inactive = {
|
2017-02-14 17:03:21 +02:00
|
|
|
default: base.disabled,
|
|
|
|
border: base.grey,
|
2017-02-20 16:18:19 +02:00
|
|
|
text: base.grey
|
2017-01-03 17:46:43 +02:00
|
|
|
};
|
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
/** ***************************** NOTIFICATIONS ******************************* */
|
2017-02-20 18:15:36 +02:00
|
|
|
|
|
|
|
export const notifications = {
|
2017-02-02 14:35:38 +02:00
|
|
|
alert: base.red,
|
|
|
|
confirmation: base.green,
|
2017-02-20 16:18:19 +02:00
|
|
|
warning: base.orange
|
2017-01-03 17:46:43 +02:00
|
|
|
};
|
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
/** ********************************* FORMS *********************************** */
|
2017-01-16 21:42:12 +02:00
|
|
|
|
2017-02-20 18:15:36 +02:00
|
|
|
export const inputError = base.red;
|
|
|
|
export const inputWarning = base.orange;
|
2017-01-06 13:06:02 +02:00
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
/** ******************************** METRICS ********************************* */
|
2017-01-10 13:55:25 +02:00
|
|
|
|
2017-07-11 17:11:52 +03:00
|
|
|
/* export const miniBackground = '#F3F4F9';
|
|
|
|
export const seperator = '#D9DEF3'; */
|
2017-02-20 18:15:36 +02:00
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
/** ******************************** TOPOLOGY ********************************* */
|
2017-01-03 17:46:43 +02:00
|
|
|
|
2017-02-20 18:15:36 +02:00
|
|
|
export const topologyBackground = base.secondaryActive;
|
2017-05-18 21:21:33 +03:00
|
|
|
|
|
|
|
export default {
|
|
|
|
...base,
|
|
|
|
fonts,
|
|
|
|
inactive,
|
|
|
|
notifications,
|
|
|
|
inputError,
|
|
|
|
inputWarning,
|
2017-07-11 17:11:52 +03:00
|
|
|
// miniBackground,
|
|
|
|
// seperator,
|
|
|
|
topologyBackground,
|
|
|
|
brandBackground
|
2017-05-18 21:21:33 +03:00
|
|
|
};
|