update colors (#317)

* update colors * update colors names to match tailwind * update component classes to new colors Co-authored-by: Zuza <[email protected]>
SnowdogApps · Jul 16, 2021 · 848a58e · 848a58e
1 parent 5e6ce1e
commit 848a58e
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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: {},