Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

finalising colors

Browse Source
This commit is contained in:
Alex Windett 2017-02-14 15:03:21 +00:00
parent cb796c7886
commit f88808fc26
2 changed files with 14 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/colors/story.js
View File

@ -36,14 +36,14 @@ const StyledP = styled.p`
margin: 0; margin: 0;
`; `;
const convertCase = (val) => { const convertCase = (val) => {
const result = val.replace( /([A-Z])/g, ' $1' ); const result = val.replace( /([A-Z])/g, ' $1' );
return result.charAt(0).toUpperCase() + result.slice(1); return result.charAt(0).toUpperCase() + result.slice(1);
}; };
storiesOf('Colors', module) storiesOf('Colors', module)
.add('default', () => { .add('default', () => {
const renderColors = Object.keys(colors.base).map( (color, index) => { const renderColors = Object.keys(colors.base).sort().map( (color, index) => {
const StyledSquare = styled(Square)` const StyledSquare = styled(Square)`
background: ${colors.base[color]} background: ${colors.base[color]}

47
ui/src/shared/constants/colors.js
View File

@ -3,30 +3,10 @@
* If a new colors needs to be used, check it doesn't already exist, or * 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 * 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. * there. Lets try and keep different color variations down ot a minimum.
* */ *
let base = { ---
primary: '#1838c0',
primaryLight: '#3b46cc',
primaryDark: '#12279f',
secondary: '#464646',
secondaryDark: '#646464',
secondaryLight: '#919191',
white: '#FFFFFF',
grey: '#f8f8f8',
greyLight: '#e9e9e9',
greyDark: '#d8d8d8',
greyDarker: '#919191',
green: '#00AF66',
greenDark: '#009858',
orange: '#E38200',
orangeDark: '#CB7400',
yellow: '#E4A800',
red: '#DA4B42',
redDark: '#CD251B',
};
/*
Color Object example Color Object example
const color_name = { const color_name = {
@ -60,15 +40,12 @@ const white = {
whiteActive: '#E9E9E9', whiteActive: '#E9E9E9',
}; };
const grey = { const base = {
grey: '#D8D8D8',
}
base = {
...primary, ...primary,
...secondary, ...secondary,
...white, ...white,
...grey, text: '#646464',
grey: '#D8D8D8',
disabled: "#FAFAFA", disabled: "#FAFAFA",
background: "#FAFAFA", background: "#FAFAFA",
green: '#00AF66', green: '#00AF66',
@ -81,24 +58,24 @@ base = {
const fonts = { const fonts = {
semibold: base.secondary, semibold: base.secondary,
regular: base.secondaryDark regular: base.text,
}; };
const inactive = { const inactive = {
default: '#FAFAFA', default: base.disabled,
border: base.greyLight, border: base.grey,
text: base.greyLight text: base.grey,
}; };
const notifications = { const notifications = {
alert: base.red, alert: base.red,
confirmation: base.green, confirmation: base.green,
warning: base.yellow, warning: base.orange,
}; };
const forms = { const forms = {
inputError: base.red, inputError: base.red,
inputWarning: base.yellow inputWarning: base.orange
}; };
const metrics = { const metrics = {
@ -107,7 +84,7 @@ const metrics = {
}; };
const topology = { const topology = {
topologyBackground: '#343434', topologyBackground: base.secondaryActive,
}; };
const colors = { const colors = {