adds tailwind color alias

for primary and secondary

Author: Lailo

src/components/Button.tsx

@@ -20,8 +20,9 @@ const Button: React.FC<Props & React.HTMLProps<HTMLButtonElement>> = ({
     'px-4 py-2',
     { 'text-white': !disabled, 'text-gray-500 dark:text-gray-700': disabled },
     {
-      'bg-green-700 hover:bg-green-800': !disabled && type === 'primary',
-      'bg-blue-700 hover:bg-blue-800': !disabled && type === 'secondary',
+      'bg-primary hover:bg-primary-darker': !disabled && type === 'primary',
+      'bg-secondary hover:bg-secondary-darker':
+        !disabled && type === 'secondary',
       'bg-gray-300 dark:bg-gray-800': disabled,
     },
     {

src/components/Dropdown.tsx

@@ -30,8 +30,8 @@ const Dropdown: React.FC<Props> = ({ className, buttonLabel, children }) => {
     <div ref={node} className={clsx('relative inline-block', className)}>
       <button
         className={clsx('p-2 rounded-full', {
-          'hover:bg-green-700 hover:bg-opacity-25': !showDropdown,
-          'bg-green-700 text-white': showDropdown,
+          'hover:bg-primary hover:bg-opacity-25': !showDropdown,
+          'bg-primary text-white': showDropdown,
         })}
         onClick={toggleDropdown}
       >

src/components/__snapshots__/Button.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`Button matches loading state 1`] = `
 
 exports[`Button matches primary (default) type snapshot 1`] = `
 <button
-  className="px-4 py-2 text-white bg-green-700 hover:bg-green-800"
+  className="px-4 py-2 text-white bg-primary hover:bg-primary-darker"
   disabled={false}
 >
   Primary
@@ -30,7 +30,7 @@ exports[`Button matches primary (default) type snapshot 1`] = `
 
 exports[`Button matches secondary type snapshot 1`] = `
 <button
-  className="px-4 py-2 text-white bg-blue-700 hover:bg-blue-800"
+  className="px-4 py-2 text-white bg-secondary hover:bg-secondary-darker"
   disabled={false}
 >
   Secondary
@@ -39,7 +39,7 @@ exports[`Button matches secondary type snapshot 1`] = `
 
 exports[`Button matches with external className as object 1`] = `
 <button
-  className="px-4 py-2 text-white bg-green-700 hover:bg-green-800 external-classname-true"
+  className="px-4 py-2 text-white bg-primary hover:bg-primary-darker external-classname-true"
   disabled={false}
 >
   Hello
@@ -48,7 +48,7 @@ exports[`Button matches with external className as object 1`] = `
 
 exports[`Button matches with external className as string 1`] = `
 <button
-  className="px-4 py-2 text-white bg-green-700 hover:bg-green-800 external-classname"
+  className="px-4 py-2 text-white bg-primary hover:bg-primary-darker external-classname"
   disabled={false}
 >
   Hello

src/components/__snapshots__/Dropdown.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Dropdown matches snapshot 1`] = `
   className="relative inline-block"
 >
   <button
-    className="p-2 rounded-full hover:bg-green-700 hover:bg-opacity-25"
+    className="p-2 rounded-full hover:bg-primary hover:bg-opacity-25"
     onClick={[Function]}
   >
     menu

src/pages/index.tsx

@@ -19,12 +19,18 @@ const IndexPage: NextPage = () => {
       </p>
       <div className="space-x-4">
         <Link {...routes.COMPONENTS}>
-          <a className="bg-green-700 text-white px-4 py-2" title="components">
+          <a
+            className="bg-primary hover:bg-primary-darker text-white px-4 py-2"
+            title="components"
+          >
             Components <FiArrowRight className="inline ml-1" />
           </a>
         </Link>
         <Link {...routes.TYPOGRAPHY}>
-          <a className="bg-blue-700 text-white px-4 py-2" title="Typography">
+          <a
+            className="bg-secondary hover:bg-secondary-darker text-white px-4 py-2"
+            title="Typography"
+          >
             Typography <FiArrowRight className="inline ml-1" />
           </a>
         </Link>

src/styles/nprogress.css

@@ -3,7 +3,7 @@
 }
 
 #nprogress .bar {
-  @apply bg-green-600;
+  @apply bg-primary;
   @apply fixed top-0 left-0;
   @apply z-50;
   @apply w-full h-1;

tailwind.config.js

@@ -10,7 +10,20 @@ module.exports = {
       header: ['Open Sans', 'sans-serif'],
       body: ['Open Sans', 'sans-serif'],
     },
-    extend: {},
+    extend: {
+      colors: {
+        primary: {
+          lighter: '#4FD1C5',
+          default: '#38B2AC',
+          darker: '#319795',
+        },
+        secondary: {
+          lighter: '#63B3ED',
+          default: '#4299E1',
+          darker: '#3182CE',
+        },
+      },
+    },
   },
   variants: {
     backgroundColor: ['dark', 'responsive', 'hover', 'focus'],