diff --git a/src/atoms/label/Label.js b/src/atoms/label/Label.js index 90222b67..59d40586 100644 --- a/src/atoms/label/Label.js +++ b/src/atoms/label/Label.js @@ -12,7 +12,7 @@ export default { }, primary: { label: [ - 'text-gray-600' + 'text-gray-400' ] }, hidden: { diff --git a/src/atoms/price/Price.js b/src/atoms/price/Price.js index e0028598..17b706b8 100644 --- a/src/atoms/price/Price.js +++ b/src/atoms/price/Price.js @@ -41,7 +41,7 @@ export default { ], price__old: [ 'mr-3', - 'text-xs', 'md:text-sm', 'font-normal', 'text-gray-600', 'line-through' + 'text-xs', 'md:text-sm', 'font-normal', 'text-gray-500', 'line-through' ], price__special: [ 'text-red', 'no-underline' diff --git a/src/molecules/breadcrumbs/Breadcrumbs.js b/src/molecules/breadcrumbs/Breadcrumbs.js index 47340b6b..6dde02fe 100644 --- a/src/molecules/breadcrumbs/Breadcrumbs.js +++ b/src/molecules/breadcrumbs/Breadcrumbs.js @@ -35,11 +35,11 @@ export default { ], breadcrumbs__link: [ 'flex', 'items-center', - 'text-gray-600', 'hover:text-gray-800' + 'text-gray-400', 'hover:text-gray-500' ], 'breadcrumbs__link--current': [ 'flex', 'items-center', - 'text-gray-800' + 'text-gray-500' ], breadcrumbs__separator: [ 'mx-2' diff --git a/tailwind.config.js b/tailwind.config.js index 8f801a9e..444ec0bc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,47 @@ module.exports = { extend: { maxWidth: { content: '1328px' + }, + colors: { + gray: { + 100: '#dde1e6', + 200: '#c1c7cd', + 300: '#a2a9b0', + 400: '#6e767c', + 500: '#121619' + }, + coral: { + 100: '#ffefec', + 200: '#f5dbd7', + 300: '#deb9b3', + 400: '#956760' + }, + red: { + 100: '#ffd7d9', + 200: '#ff8389', + 300: '#da1e28' + }, + blue: { + 100: '#d0e2ff', + 200: '#78a9ff', + 300: '#0043ce' + }, + green: { + 100: '#cfe8cc', + 200: '#6eb966', + 300: '#0e8a00' + }, + yellow: { + 100: '#fcf3d1', + 200: '#f7da76', + 300: '#f1c21b' + }, + orange: { + 100: '#ffe6d5', + 200: '#ffb580', + 300: '#ff832b' + }, + focus: '#00b8ff' } }, screens: { @@ -25,32 +66,32 @@ module.exports = { ...theme('colors'), primary: theme('colors.white'), secondary: theme('colors.gray.200'), - dark: theme('colors.gray.800') + dark: theme('colors.gray.500') }), borderColor: theme => ({ ...theme('colors'), - primary: theme('colors.gray.500'), - secondary: theme('colors.gray.600'), - form: theme('colors.gray.500'), - dark: theme('colors.gray.800'), - light: theme('colors.gray.300'), + primary: theme('colors.coral.300'), + secondary: theme('colors.gray.500'), + form: theme('colors.gray.200'), + dark: theme('colors.gray.500'), + light: theme('colors.gray.200'), }), textColor: theme => ({ ...theme('colors'), - primary: theme('colors.gray.800'), - secondary: theme('colors.gray.600') + primary: theme('colors.gray.500'), + secondary: theme('colors.gray.400') }), placeholderColor: theme => ({ - primary: theme('colors.gray.600'), + primary: theme('colors.gray.400'), }), fill: theme => ({ ...theme('colors'), - dark: theme('colors.gray.800'), + dark: theme('colors.gray.500'), light: theme('colors.gray.200') }), outline: theme => ({ - focus: [`2px solid ${theme('colors.bright-sky-blue')}`, '-1px'] + focus: [`2px solid ${theme('colors.focus')}`, '-1px'] }) }, variants: {},