Use tailwind opacity instead of opaque config colors

Author: itsamoreh

components/atoms/Button/Button.module.css

@@ -44,15 +44,15 @@
 
   /* TYPES */
   &.primary {
-    @apply bg-primary text-white border-transparent;
+    @apply bg-primary text-white border-white border-opacity-0;
 
     &.disabled {
       @apply opacity-50;
     }
   }
 
   &.secondary {
-    @apply bg-transparent text-primary border-primary;
+    @apply bg-white bg-opacity-0 text-primary border-primary;
 
     &.disabled {
       @apply opacity-50;

components/molecules/Hero/Hero.js

@@ -22,7 +22,7 @@ export default function Hero({backgroundImage, body, cta, subtitle, title}) {
       style={{
         // These css custom properties are used inside the css module file to set the card's background image, tint overlay, and fallback bg color.
         '--image-url': `url(${backgroundImage})`,
-        '--image-tint-color': `${tailwindConfig.theme.colors.black[40]}`,
+        '--image-tint-color': `${tailwindConfig.theme.colors.black}50`,
         '--image-fallback-color': `${tailwindConfig.theme.colors.grey['darkest']}`
       }}
     >

tailwind.config.js

@@ -135,33 +135,8 @@ module.exports = {
         darker: '#333333',
         darkest: '#212121'
       },
-      white: {
-        DEFAULT: 'rgba(255,255,255,1)',
-        90: 'rgba(255,255,255,0.9)',
-        80: 'rgba(255,255,255,0.8)',
-        70: 'rgba(255,255,255,0.7)',
-        60: 'rgba(255,255,255,0.6)',
-        50: 'rgba(255,255,255,0.5)',
-        40: 'rgba(255,255,255,0.4)',
-        30: 'rgba(255,255,255,0.3)',
-        20: 'rgba(255,255,255,0.2)',
-        10: 'rgba(255,255,255,0.1)',
-        5: 'rgba(255,255,255,0.05)'
-      },
-      black: {
-        DEFAULT: 'rgba(0,0,0,1)',
-        90: 'rgba(0,0,0,0.9)',
-        80: 'rgba(0,0,0,0.8)',
-        70: 'rgba(0,0,0,0.7)',
-        60: 'rgba(0,0,0,0.6)',
-        50: 'rgba(0,0,0,0.5)',
-        40: 'rgba(0,0,0,0.4)',
-        30: 'rgba(0,0,0,0.3)',
-        20: 'rgba(0,0,0,0.2)',
-        10: 'rgba(0,0,0,0.1)',
-        5: 'rgba(0,0,0,0.05)'
-      },
-      transparent: 'rgba(0,0,0,0)',
+      white: '#FFFFFF',
+      black: '#000000',
       brand: {
         android: '#A4C639',
         behance: '#1769FF',