style: TT-332 TW prefix added to the color palette

Author: JosueOb

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

@@ -1,11 +1,11 @@
 <button
-  class="w-10 h-6 rounded-full bg-gray-lightest flex items-center transition duration-300 focus:outline-none shadow"
+  class="w-10 h-6 rounded-full bg-grayTW-lightest flex items-center transition duration-300 focus:outline-none shadow"
   (click)="changeToDarkOrLightTheme()"
   *ngIf="isFeatureToggleDarkModeActive"
 >
   <div
     #themeToggle
-    class="w-7 h-7 relative rounded-full transition duration-500 transform bg-warning -translate-x-1 p-1"
+    class="w-7 h-7 relative rounded-full transition duration-500 transform bg-warningTW -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.spec.ts

@@ -80,6 +80,6 @@ describe('DarkModeComponent', () => {
     fixture.detectChanges();
     component.ngAfterViewInit();
     fixture.detectChanges();
-    expect(component.themeToggle.nativeElement.classList.contains('bg-warning')).toBe(true);
+    expect(component.themeToggle.nativeElement.classList.contains('bg-warningTW')).toBe(true);
   });
 });

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

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

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

@@ -1,23 +1,23 @@
-<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="d-flex bg-grayTW-lightest dark:bg-grayTW-darker dark:text-whiteTW" id="wrapper">
+  <div class="border-right bg-whiteTW dark:bg-grayTW-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 bg-gray-lightest dark:bg-gray-darker">
+    <div class="list-group list-group-flush bg-whiteTW dark:bg-grayTW-darker">
             <a
               *ngFor="let item of itemsSidebar"
               [routerLink]="item.route"
               routerLinkActive=""
-              class="list-group-item list-group-item-action bg-gray-lightest dark:bg-gray-dark dark:text-white"
+              class="list-group-item list-group-item-action bg-whiteTW dark:bg-grayTW-dark dark:text-whiteTW"
               [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 bg-gray-lightest dark:bg-gray-dark">
-      <button class="btn btn-primary bg-primary hover:bg-primary-light" id="menu-toggle">
+    <nav class="navbar navbar-expand-lg navbar-light border-bottom bg-whiteTW dark:bg-grayTW-dark">
+      <button class="btn bg-primaryTW hover:bg-primaryTW-dark text-whiteTW hover:text-whiteTW" 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 mx-10 my-10 rounded-md bg-gray-lightest dark:bg-gray-dark">
+        <div class="content_app mx-10 my-10 rounded-md bg-whiteTW dark:bg-grayTW-dark">
           <router-outlet></router-outlet>
         </div>
     </div>

tailwind.config.js

@@ -8,39 +8,39 @@ module.exports = {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-      white: '#FFFFFF',
-      black: '#000000',
-      primary: {
+      whiteTW: '#FFFFFF',
+      blackTW: '#000000',
+      primaryTW: {
         light: '#59C9F0',
         DEFAULT: '#30BCED',
         dark: '#2183A5',
       },
-      secondary: {
+      secondaryTW: {
         light: '#FF7E3B',
         DEFAULT: '#FF5E0A',
         dark: '#B24107',
       },
-      info: {
+      infoTW: {
         light: '#44C7D0',
         DEFAULT: '#16BAC5',
         dark: '#0F8289',
       },
-      error: {
+      errorTW: {
         light: '#FF606C',
         DEFAULT: '#FF3948',
         dark: '#B22732',
       },
-      success: {
+      successTW: {
         light: '#57DC94',
         DEFAULT: '#2ED47A',
         dark: '#209455',
       },
-      warning: {
+      warningTW: {
         light: '#FFC76B',
         DEFAULT: '#FFB946',
         dark: '#B28131',
       },
-      gray: {
+      grayTW: {
         lightest: '#F3F4F6',
         lighter: '#D6D6D7',
         light: '#6F6F6F',