style: TT-332 color palette

Author: JosueOb

src/app/modules/shared/components/dark-mode/dark-mode.component.html

@@ -1,10 +1,10 @@
 <button
-  class="w-10 h-6 rounded-full bg-white flex items-center transition duration-300 focus:outline-none shadow"
+  class="w-10 h-6 rounded-full bg-gray-lightest flex items-center transition duration-300 focus:outline-none shadow"
   (click)="changeToDarkOrLightTheme()"
 >
   <div
     #themeToggle
-    class="w-7 h-7 relative rounded-full transition duration-500 transform bg-yellow-300 -translate-x-1 p-1"
+    class="w-7 h-7 relative rounded-full transition duration-500 transform bg-warning -translate-x-1 p-1"
   >
     <ng-container *ngIf="isDarkTheme(); else elseToggle">
       <img src="assets/icons/moon.svg" alt="moon icon" />

src/app/modules/shared/components/dark-mode/dark-mode.component.ts

@@ -61,12 +61,12 @@ export class DarkModeComponent implements AfterViewInit {
   switchThemeToggleStyles(theme: string): void {
     switch (theme) {
       case 'dark':
-        this.themeToggle.nativeElement.classList.remove('bg-yellow-300', '-translate-x-1');
-        this.themeToggle.nativeElement.classList.add('bg-gray-300', 'translate-x-1/2');
+        this.themeToggle.nativeElement.classList.remove('bg-warning', '-translate-x-1');
+        this.themeToggle.nativeElement.classList.add('bg-gray-lighter', 'translate-x-1/2');
         break;
       case 'light':
-        this.themeToggle.nativeElement.classList.remove('bg-gray-300', 'translate-x-1/2');
-        this.themeToggle.nativeElement.classList.add('bg-yellow-300', '-translate-x-1');
+        this.themeToggle.nativeElement.classList.remove('bg-gray-lighter', 'translate-x-1/2');
+        this.themeToggle.nativeElement.classList.add('bg-warning', '-translate-x-1');
         break;
     }
   }

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -1,23 +1,23 @@
-<div class="d-flex dark:bg-gray" id="wrapper">
-  <div class="border-right dark:bg-grey-dark" id="sidebar-wrapper">
+<div class="d-flex bg-gray-lighter dark:bg-gray-darker dark:text-white" id="wrapper">
+  <div class="border-right bg-gray-lightest dark:bg-gray-dark" id="sidebar-wrapper">
     <div class="sidebar-heading" style="text-align: center">
       <img src="assets/img/ioet.png" width="90" height="auto" style="padding-top: 2rem; padding-bottom: 2rem;" alt="logo" />
     </div>
-    <div class="list-group list-group-flush">
+    <div class="list-group list-group-flush bg-gray-lightest dark:bg-gray-darker">
             <a
               *ngFor="let item of itemsSidebar"
               [routerLink]="item.route"
               routerLinkActive=""
-              class="list-group-item list-group-item-action dark:bg-grey-dark dark:text-white"
+              class="list-group-item list-group-item-action bg-gray-lightest dark:bg-gray-dark dark:text-white"
               [ngClass]="{active: item.active}"
             >
               <i class="{{ item.icon }}"></i> {{ item.text }}
             </a>
     </div>
   </div>
   <div id="page-content-wrapper">
-    <nav class="navbar navbar-expand-lg navbar-light border-bottom">
-      <button class="btn btn-primary" id="menu-toggle">
+    <nav class="navbar navbar-expand-lg navbar-light border-bottom bg-gray-lightest dark:bg-gray-dark">
+      <button class="btn btn-primary bg-primary hover:bg-primary-light" id="menu-toggle">
         Toggle Menu
       </button>
       <div class="dark-mode-toggle">
@@ -33,7 +33,7 @@
       </div>
     </nav>
     <div class="container-fluid px-0 full-height">
-        <div class="content_app h-100">
+        <div class="content_app mx-10 my-10 rounded-md bg-gray-lightest dark:bg-gray-dark">
           <router-outlet></router-outlet>
         </div>
     </div>

tailwind.config.js

@@ -1,94 +1,63 @@
 module.exports = {
-    prefix: '',
-    purge: {
-      content: [
-        './src/**/*.{html,ts}',
-      ]
-    },
-    darkMode: 'class',
-    theme: {
-      extend: {
-        screens: {
-          sm: '640px',
-          md: '768px',
-          lg: '1024px',
-          xl: '1280px',
-          '2xl': '1536px',
-        },
-        fontFamily: {
-          sans: [
-            'Poppins'
-          ],
-        },
-        fontSize: {
-          xs: ['0.75rem', { lineHeight: '1rem' }],
-          sm: ['0.875rem', { lineHeight: '1.25rem' }],
-          base: ['1rem', { lineHeight: '1.5rem' }],
-          lg: ['1.125rem', { lineHeight: '1.75rem' }],
-          xl: ['1.25rem', { lineHeight: '1.75rem' }],
-          '2xl': ['1.5rem', { lineHeight: '2rem' }],
-        },
-        fontWeight: {
-          regular: '400',
-          medium: '500',
-          semibold: '600',
-        },
-        colors: {
-          info: {
-            light: "#20CDD3",
-            DEFAULT: "#30BCED",
-            dark: "#3D57D9",      
-          },
-          warn: {
-            light: "#E87002",
-            DEFAULT: "#FF5E0A",
-            dark: "#E53402", 
-          },     
-          danger: {
-            light: "#E5524C",
-            DEFAULT: "#FF3948",
-            dark: "#E83C27",
-          },
-          success: {
-            light: "#31E080", 
-            DEFAULT: "#2ED47A",
-            dark: "#25A860",
-          },
-          purple: {
-            light: "#8C0E9E",
-            DEFAULT: "#861388",
-            dark: "#5E1973", 
-          },
-          black: {
-            light: "#FFFFFF",
-            DEFAULT: "#192A3E",
-            dark: "#161429", 
-          },
-          grey: {
-            light: "#C2CFE0",
-            DEFAULT: "#90A0B7",
-            dark: "#334D6E", 
-          }, 
-        },
-        width: (theme) => ({
-          auto: 'auto',
-          ...theme('spacing'),
-          '1/2': '50%',
-          '1/3': '33.333333%',
-          '2/3': '66.666667%',
-          '1/5': '20%',
-          '2/5': '40%',
-          '3/5': '60%',
-          '4/5': '80%',
-          full: '100%',
-          screen: '100vw',
-          min: 'min-content',
-          max: 'max-content',
-        }),
+  prefix: '',
+  purge: {
+    content: ['./src/**/*.{html,ts}'],
+  },
+  darkMode: 'class',
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      white: '#FFFFFF',
+      black: '#000000',
+      primary: {
+        light: '#59C9F0',
+        DEFAULT: '#30BCED',
+        dark: '#2183A5',
+      },
+      secondary: {
+        light: '#FF7E3B',
+        DEFAULT: '#FF5E0A',
+        dark: '#B24107',
+      },
+      info: {
+        light: '#44C7D0',
+        DEFAULT: '#16BAC5',
+        dark: '#0F8289',
+      },
+      error: {
+        light: '#FF606C',
+        DEFAULT: '#FF3948',
+        dark: '#B22732',
+      },
+      success: {
+        light: '#57DC94',
+        DEFAULT: '#2ED47A',
+        dark: '#209455',
+      },
+      warning: {
+        light: '#FFC76B',
+        DEFAULT: '#FFB946',
+        dark: '#B28131',
+      },
+      gray: {
+        lightest: '#F3F4F6',
+        lighter: '#D6D6D7',
+        light: '#6F6F6F',
+        DEFAULT: '#4B4B4B',
+        dark: '#323639',
+        darker: '#282C2F',
+        darkest: '#202124',
       },
     },
-    variants: {
-      extend: {},
+    extend: {
+      fontFamily: {
+        poppins: ['Poppins', 'sans-serif'],
+      },
     },
-    plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
 };