react-garden
Version:
React + TypeScript + ThreeJS app using Material UI on NextJS, Apollo Client, GraphQL + WordPress REST APIs, for ThreeD web development.. a part of the threed.ai code family.
127 lines (122 loc) • 3.31 kB
JavaScript
const DefaultPalette = (mode, skin, themeColor) => {
// ** Vars
const lightColor = '58, 53, 65'
const darkColor = '231, 227, 252'
// const darkColor = '233, 244, 255'
// const darkColor = '76, 153, 0' // #4C9900 'ThreeD Green'
const mainColor = mode === 'light' ? lightColor : darkColor
const primaryGradient = () => {
if (themeColor === 'primary') {
return '#4C9900' // '#C6A7FE'
} else if (themeColor === 'secondary') {
return '#9C9FA4'
} else if (themeColor === 'success') {
return '#93DD5C'
} else if (themeColor === 'error') {
return '#FF8C90'
} else if (themeColor === 'warning') {
return '#FFCF5C'
}
// default 'threed'
return '#4C9900' // '#6ACDFF'
}
const defaultBgColor = () => {
if (skin === 'bordered' && mode === 'light') {
return '#FFF'
} else if (skin === 'bordered' && mode === 'dark') {
return '#09090D' // '#312D4B'
} else if (mode === 'light') {
return '#F4F5FA'
}
// default
return '#09090D' // '#28243D'
}
return {
customColors: {
dark: darkColor,
main: mainColor,
light: lightColor,
darkBg: '#09090D', // '#28243D',
lightBg: '#F4F5FA',
primaryGradient: primaryGradient(),
bodyBg: mode === 'light' ? '#F4F5FA' : '#09090D', // '#28243D',
tableHeaderBg: mode === 'light' ? '#F9FAFC' : '#3D3759'
},
common: {
black: '#000',
white: '#FFF'
},
mode: mode,
primary: {
light: '#9E69FD',
main: '#4C9900', // '#9155FD'
dark: '#66CC00', // '#804BDF'
contrastText: '#FFF'
},
secondary: {
light: '#9C9FA4',
main: '#8A8D93',
dark: '#777B82',
contrastText: '#FFF'
},
success: {
light: '#6AD01F',
main: '#56CA00',
dark: '#4CB200',
contrastText: '#FFF'
},
error: {
light: '#FF6166',
main: '#FF4C51',
dark: '#E04347',
contrastText: '#FFF'
},
warning: {
light: '#FFCA64',
main: '#FFB400',
dark: '#E09E00',
contrastText: '#FFF'
},
info: {
light: '#32BAFF',
main: '#16B1FF',
dark: '#139CE0',
contrastText: '#FFF'
},
grey: {
50: '#FAFAFA',
100: '#F5F5F5',
200: '#EEEEEE',
300: '#E0E0E0',
400: '#BDBDBD',
500: '#9E9E9E',
600: '#757575',
700: '#616161',
800: '#424242',
900: '#212121',
A100: '#D5D5D5',
A200: '#AAAAAA',
A400: '#616161',
A700: '#303030'
},
text: {
primary: `rgba(${mainColor}, 0.87)`,
secondary: `rgba(${mainColor}, 0.68)`,
disabled: `rgba(${mainColor}, 0.38)`
},
divider: `rgba(${mainColor}, 0.12)`,
background: {
paper: mode === 'light' ? '#FFF' : '#131418', // '#312D4B'
default: defaultBgColor()
},
action: {
active: `rgba(${mainColor}, 0.54)`,
hover: `rgba(${mainColor}, 0.04)`,
selected: `rgba(${mainColor}, 0.08)`,
disabled: `rgba(${mainColor}, 0.3)`,
disabledBackground: `rgba(${mainColor}, 0.18)`,
focus: `rgba(${mainColor}, 0.12)`
}
}
}
export default DefaultPalette