diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js
index 810438b4..ca7827a6 100644
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@@ -6,7 +6,11 @@ const React = require('react');
const Styled = require('styled-components');
const {
- colors,
+ base,
+ inactive,
+} = constants.colors;
+
+const {
boxes
} = constants;
@@ -20,39 +24,39 @@ const {
} = Styled;
const background = match({
- secondary: colors.brandSecondary,
- disabled: colors.brandInactive
-}, colors.brandPrimary);
+ secondary: base.grey,
+ disabled: inactive.default
+}, base.primary);
const backgroundHover = match({
- secondary: colors.brandSecondaryDark,
- disabled: colors.brandInactive
-}, colors.brandPrimaryDark);
+ secondary: base.greyDark,
+ disabled: inactive.default
+}, base.primaryLight);
const backgroundActive = match({
- secondary: colors.brandSecondaryDarkest,
- disabled: colors.brandInactive
-}, colors.brandPrimaryDarkest);
+ secondary: base.secondaryDark,
+ disabled: inactive.default
+}, base.primaryDark);
const border = match({
- secondary: colors.borderSecondary,
- disabled: colors.borderInactive
-}, colors.borderPrimary);
+ secondary: base.grey,
+ disabled: inactive.default
+}, base.primary);
const borderHover = match({
- secondary: colors.borderSecondaryDark,
- disabled: colors.borderInactive
-}, colors.borderPrimaryDark);
+ secondary: base.greyDark,
+ disabled: base.greyDark
+}, base.primaryDark);
const borderActive = match({
- secondary: colors.borderSecondaryDarkest,
- disabled: colors.borderInactive
-}, colors.borderPrimaryDarkest);
+ secondary: base.secondaryDark,
+ disabled: inactive.default
+}, base.primaryDark);
const color = match({
- secondary: colors.brandSecondaryColor,
- disabled: colors.brandInactiveColor
-}, colors.brandPrimaryColor);
+ secondary: base.secondary,
+ disabled: inactive.text
+}, base.white);
const borderRadius = match({
rect: 0
diff --git a/ui/src/components/button/story.js b/ui/src/components/button/story.js
index 08e4d381..d5954143 100644
--- a/ui/src/components/button/story.js
+++ b/ui/src/components/button/story.js
@@ -4,24 +4,31 @@ const {
} = require('@kadira/storybook');
const Button = require('./');
+const Base = require('../base');
storiesOf('Button', module)
.add('With text', () => (
-
+
+
+
)).add('Secondary', () => (
-
+
+
+
)).add('Disabled', () => (
-
+
+
+
)).add('Anchor', () => (
-
+
-
+
));
\ No newline at end of file
diff --git a/ui/src/shared/constants/boxes.js b/ui/src/shared/constants/boxes.js
index 532d1f43..c01676a8 100644
--- a/ui/src/shared/constants/boxes.js
+++ b/ui/src/shared/constants/boxes.js
@@ -5,14 +5,18 @@ const {
remcalc
} = fns;
+const {
+ base
+} = colors;
+
module.exports = {
borderRadius: remcalc(4),
bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`,
bottomShaddowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`,
insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
border: {
- checked: `${remcalc(1)} solid ${colors.brandPrimary}`,
- unchecked: `${remcalc(1)} solid ${colors.borderSecondary}`,
- confirmed: `${remcalc(1)} solid ${colors.confirmation}`
+ checked: `${remcalc(1)} solid ${base.primary}`,
+ unchecked: `${remcalc(1)} solid ${base.borderSecondary}`,
+ confirmed: `${remcalc(1)} solid ${base.secondaryLight}`
}
};
diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js
index 2e4b5ff0..db9490c6 100644
--- a/ui/src/shared/constants/colors.js
+++ b/ui/src/shared/constants/colors.js
@@ -1,50 +1,46 @@
+/*
+* 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.
+* */
+
+const base = {
+ primary: '#1838c0',
+ primaryLight: '#3b46cc',
+ primaryDark: '#12279f',
+ secondary: '#464646',
+ secondaryDark: '#646464',
+ secondaryLight: '#919191',
+ white: '#FFFFFF',
+ grey: '#f8f8f8',
+ greyDark: '#e9e9e9',
+ greyLight: '#919191',
+ red: '#DA4B42',
+ yellow: '#E4A800',
+ green: '#00AF66',
+};
+
const fonts = {
- semibold: '#464646',
- regular: '#646464'
+ semibold: base.secondary,
+ regular: base.secondaryDark
};
-const brandPrimary = {
- brandPrimary: '#3B46CC',
- brandPrimaryDark: '#1838C0',
- brandPrimaryDarkest: '#12279F',
- borderPrimary: '#2531BC',
- borderPrimaryDark: '#2531BC',
- borderPrimaryDarkest: '#062BA0',
- brandPrimaryColor: '#FFFFFF',
- brandPrimaryLink: '#364ACD',
- brandPrimaryLinkUnderline: '#3B47CC'
-};
-
-const brandSecondary = {
- brandSecondary: '#FFFFFF',
- brandSecondaryDark: '#F8F8F8',
- brandSecondaryDarkest: '#E9E9E9',
- borderSecondary: '#D8D8D8',
- borderSecondaryDark: '#D8D8D8',
- borderSecondaryDarkest: '#D8D8D8',
- brandSecondaryColor: '#464646',
- brandSecondaryLink: '#FFFFFF',
- brandSecondaryLinkUnderline: '#FFFFFF'
-};
-
-const brandInactive = {
- brandInactive: '#FAFAFA',
- borderInactive: '#D8D8D8',
- brandInactiveColor: '#919191'
+const inactive = {
+ default: '#FAFAFA',
+ border: '#D8D8D8',
+ text: base.greyLight
};
const notifications = {
- alert: '#DA4B42',
- alertLight: '#FFC7C7',
- confirmation: '#00AF66',
- success: '#00AF66',
- warning: '#E4A800',
- warningLight: '#FFFAED',
+ alert: base.red,
+ confirmation: base.green,
+ warning: base.yellow,
};
const forms = {
- inputError: '#DA4B42',
- inputWarning: '#E4A700'
+ inputError: base.red,
+ inputWarning: base.yellow
};
const metrics = {
@@ -57,13 +53,12 @@ const topology = {
};
const colors = {
- ...brandPrimary,
- ...brandSecondary,
- ...brandInactive,
- ...notifications,
...metrics,
...topology,
...forms,
+ inactive,
+ notifications,
+ base,
fonts
};
diff --git a/ui/src/shared/constants/typography.js b/ui/src/shared/constants/typography.js
index 6e682734..5fc403d5 100644
--- a/ui/src/shared/constants/typography.js
+++ b/ui/src/shared/constants/typography.js
@@ -1,8 +1,12 @@
const colors = require('./colors');
+const {
+ base
+} = colors;
+
const typography = {
- abbrBorderColor: colors.brandSecondary,
- textMuted: colors.brandSecondary
+ abbrBorderColor: base.secondary,
+ textMuted: base.secondary
};
module.exports = typography;