Changed colors scss to tailwind implementation

rlebre · Apr 7, 2022 · 53f754b · 53f754b
1 parent 6d4bb89
commit 53f754b
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 72 deletions.
diff --git a/components/flat-section/flat-section.module.scss b/components/flat-section/flat-section.module.scss
@@ -1,10 +1,8 @@
 @use '../../styles/mixins.scss' as mixins;
-@import '../../styles/colors.scss';
 
 section {
   .subtitle {
-    color: $blue-2;
-    @apply w-64 hidden md:block;
+    @apply w-64 hidden md:block text-dicoogle-300;
 
     h3,
     h4 {

diff --git a/components/footer/footer.module.scss b/components/footer/footer.module.scss
@@ -1,12 +1,8 @@
-@use '../../styles/colors.scss' as colors;
-
 .footer {
   border-top: 1px solid #eaeaea;
-
-  background: colors.$gray-2;
   min-height: 200px;
 
-  @apply flex flex-col items-center gap-y-4 pt-10;
+  @apply flex flex-col items-center gap-y-4 pt-10 bg-dicoogle-gray-200;
 
   a {
     display: flex;

diff --git a/components/grid-section/grid-section.module.scss b/components/grid-section/grid-section.module.scss
@@ -1,9 +1,8 @@
 @use '../../styles/mixins.scss' as mixins;
-@import '../../styles/colors.scss';
 
 section {
   .subtitle {
-    color: $blue-2;
+    @apply text-dicoogle-300;
   }
 }
 

diff --git a/components/location-section/location-section.module.scss b/components/location-section/location-section.module.scss
@@ -1,5 +1,3 @@
-@use '../../styles/colors.scss' as colors;
-
 .location {
   @apply bg-gray-100;
 }
diff --git a/components/navbar/navbar.module.scss b/components/navbar/navbar.module.scss
@@ -1,9 +1,7 @@
 @use '../../styles/mixins.scss' as mixins;
-@import '../../styles/colors.scss';
 
 .header {
-  @apply sticky top-0 w-full flex justify-between items-center z-50 transition-all duration-300;
-  background: $blue-0;
+  @apply sticky top-0 w-full flex justify-between items-center z-50 transition-all duration-300 bg-dicoogle-600;
 
   &__container {
     @apply w-full flex justify-between items-center;
@@ -18,34 +16,27 @@
 .nav {
   &__hamburger {
     @apply inline-flex p-3 md:hidden outline-none rounded-lg;
-    @apply transition duration-300;
-
-    color: $gray-2;
+    @apply transition duration-300 text-dicoogle-gray-200;
 
     &:hover {
-      color: $blue-3;
+      @apply text-dicoogle-400;
     }
   }
 
   &__links {
-    @apply fixed md:relative md:flex md:space-y-0 md:space-x-6 md:p-0 left-0 right-0 md:translate-x-0 space-y-4 p-4 transform duration-500 items-center;
-    background: $blue-0;
+    @apply fixed md:relative md:flex md:space-y-0 md:space-x-6 md:p-0 left-0 right-0 md:translate-x-0 space-y-4 p-4 transform duration-500 items-center bg-dicoogle-600;
   }
 
   &__link {
-    @apply border-gray-100 active:rounded-lg md:border-0 block font-bold pl-3 pr-4 py-2 md:hover:text-blue-400 md:p-0;
-    @apply transition ease-in-out duration-150 hover:scale-105;
-
-    color: $gray-2;
+    @apply border-gray-100 active:rounded-lg md:border-0 block font-bold pl-3 pr-4 py-2 md:hover:text-dicoogle-300 md:p-0;
+    @apply transition ease-in-out duration-150 hover:scale-105 text-dicoogle-gray-200;
 
     &__download {
       @include mixins.button1;
-      @apply rounded-md text-white p-2 w-fit;
-      background: $blue-2;
+      @apply rounded-md text-white p-2 w-fit bg-dicoogle-300;
 
       &:hover {
-        background: $blue-3;
-        color: $blue-0;
+        @apply bg-dicoogle-400 text-white;
       }
     }
   }

diff --git a/components/scroll-top/ScrollToTheTop.tsx b/components/scroll-top/ScrollToTheTop.tsx
@@ -16,7 +16,7 @@ export const ScrollToTheTop = () => {
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
-      behavior: 'smooth',
+      behavior: 'smooth'
     });
   };
 
@@ -29,7 +29,7 @@ export const ScrollToTheTop = () => {
   }, []);
 
   return (
-    <div className='fixed bottom-4 right-4'>
+    <div className='fixed bottom-4 right-4 z-50'>
       <button onClick={scrollToTop} className={`${isVisible ? 'opacity-100' : 'opacity-0'} ${styles.button}`}>
         <Up className='h-6 w-6' aria-hidden='true' />
       </button>

diff --git a/components/scroll-top/scroll-top.module.scss b/components/scroll-top/scroll-top.module.scss
@@ -1,11 +1,7 @@
-@use '../../styles/colors.scss' as colors;
-
 .button {
-  @apply inline-flex items-center p-2 rounded-md shadow-sm text-white;
-  background: colors.$blue-4;
+  @apply inline-flex items-center p-2 rounded-md shadow-sm text-white bg-dicoogle-400;
 
   &:hover {
-    background: colors.$blue-5;
-    @apply drop-shadow-2xl;
+    @apply drop-shadow-2xl bg-dicoogle-500;
   }
 }
diff --git a/components/tab-view/reference-card/reference-card.module.scss b/components/tab-view/reference-card/reference-card.module.scss
@@ -1,6 +1,3 @@
-@import '../../../styles/colors.scss';
-
 .indicator {
-  background-color: $blue-4;
-  color: white;
+  @apply bg-dicoogle-300 text-white;
 }
diff --git a/styles/colors.scss b/styles/colors.scss
diff --git a/styles/globals.scss b/styles/globals.scss
@@ -1,5 +1,3 @@
-@import './colors.scss';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -10,7 +8,7 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
     Helvetica Neue, sans-serif;
-  color: $gray-2;
+  @apply text-dicoogle-gray-200;
   font-size: 14px;
   font-weight: 300;
   letter-spacing: 0.075em;
@@ -49,7 +47,7 @@ h1 {
     width: 3rem;
     height: 1px;
     display: block;
-    background-color: $gray-2;
+    @apply bg-dicoogle-gray-200;
   }
 }
 
@@ -59,8 +57,7 @@ p {
 }
 
 .circletag {
-  background: $blue-2;
-  @apply flex items-center justify-center rounded-full;
+  @apply flex items-center justify-center rounded-full bg-dicoogle-300;
 }
 
 .image-center {

diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -1,5 +1,3 @@
-@use './colors.scss' as colors;
-
 @mixin btn {
   display: inline-block;
   padding: 6px 12px;
@@ -23,17 +21,11 @@
 
 @mixin button1 {
   @include btn;
-  @apply md:w-fit;
-
-  color: colors.$white;
-  background-color: colors.$blue-2;
-  border-color: colors.$blue-3;
+  @apply md:w-fit bg-dicoogle-300 border-dicoogle-400 text-white;
 
   &:focus,
   &:hover {
-    color: colors.$white;
-    background-color: colors.$blue-4;
-    border-color: colors.$blue-5;
+    @apply text-white bg-dicoogle-400 border-dicoogle-500;
   }
 }
 
@@ -42,9 +34,7 @@
 
   @apply my-2 py-3 px-10 border-0 rounded uppercase font-medium w-full  mx-10 md:mx-0 md:w-fit;
   @apply hover:drop-shadow-xl transition-all duration-300;
-
-  background: colors.$gray-2;
-  color: colors.$white;
+  @apply text-white bg-dicoogle-gray-200;
 
   &:hover {
     background: black;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,10 +1,34 @@
+const colors = require('tailwindcss/colors')
+
+// workaround until tailwind address the issue https://github.com/tailwindlabs/tailwindcss/issues/4690
+delete colors['lightBlue'];
+delete colors['warmGray'];
+delete colors['trueGray'];
+delete colors['coolGray'];
+delete colors['blueGray'];
+
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
+
   theme: {
-    extend: {},
+    colors: {
+      ...colors,
+      'dicoogle': {
+        100: '#cbe0f2',
+        200: '#337ab7',
+        300: '#2e6da4',
+        400: '#286090',
+        500: '#204d74',
+        600: '#eff6ff',
+      },
+      'dicoogle-gray': {
+        100: '#888888',
+        200: '#333333',
+      }
+    },
   },
   variants: {
     extend: {