Merge pull request #79 from Siumauricio/refactor/#39

refactor: change tokens colors to not clash with tailwind colors

__test__/newVariables.test.ts

@@ -3,22 +3,22 @@ import { expect, test } from "vitest";
 
 test("Should return colors with -- in each property", (t) => {
   const colorsMap1: any = {
-    "blue-100": "#fff",
+    "blue-2": "#fff",
   };
 
   const colorsMap2: any = {
-    "blue-200": "#fff",
+    "blue-3": "#fff",
   };
   const result = extractNewVariables(colorsMap1, colorsMap2);
 
   expect(result).toEqual({
-    "blue-200": expect.any(Function),
+    "blue-3": expect.any(Function),
   });
 });
 
 test("Should return empty obj is obj1 is empty", (t) => {
   const colorsMap1: any = {
-    "blue-100": "#fff",
+    "blue-2": "#fff",
   };
 
   const colorsMap2: any = {};

__test__/safeList.test.ts

@@ -14,8 +14,8 @@ test("should accept the following colors", (t) => {
   expect(regex.pattern.test("bg-black")).toBe(true);
   expect(regex.pattern.test("bg-blackInverted")).toBe(true);
   expect(regex.pattern.test("bg-whiteInverted")).toBe(true);
-  expect(regex.pattern.test("bg-blue-50")).toBe(true);
-  expect(regex.pattern.test("bg-blue-100")).toBe(true);
+  expect(regex.pattern.test("bg-blue-1")).toBe(true);
+  expect(regex.pattern.test("bg-blue-2")).toBe(true);
 });
 
 test("should not accept the following colors", (t) => {

__test__/theme.test.ts

@@ -118,8 +118,8 @@ test("it should merge 2 object", (t) => {
     prefersColorScheme: false,
     // @ts-ignore
     colors: {
-      "gray-400": "#4a5568",
-      "gray-500": "#718096",
+      "gray-5": "#4a5568",
+      "gray-6": "#718096",
     },
   };
 

components/informational/accordion.css

@@ -3,19 +3,19 @@
 }
 
 .accordion {
-  @apply relative flex flex-col focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-500;
+  @apply focus-visible:outline-gray-6 relative flex flex-col focus:outline-2 focus-visible:outline focus-visible:outline-offset-2;
 }
 
 .accordion-group-secondary .accordion-title {
-  @apply bg-gray-200;
+  @apply bg-gray-3;
 }
 
 .accordion-group-bordered {
-  @apply overflow-auto rounded-xl border border-gray-500;
+  @apply border-gray-6 overflow-auto rounded-xl border;
 }
 
 .accordion-title {
-  @apply relative flex w-full cursor-pointer flex-col  border-b border-gray-500 bg-gray-50 py-5 text-left text-xl font-semibold transition-none;
+  @apply border-gray-6 bg-gray-1 relative flex w-full  cursor-pointer flex-col border-b py-5 text-left text-xl font-semibold transition-none;
 }
 
 .accordion-group.accordion-group-bordered
@@ -54,15 +54,15 @@
 }
 
 .accordion-group .accordion.accordion-open .accordion-content {
-  @apply grid-rows-[1fr] border-b border-gray-500 py-5;
+  @apply border-gray-6 grid-rows-[1fr] border-b py-5;
 }
 
 .accordion-toggle:checked ~ .accordion-content {
-  @apply grid-rows-[1fr] border-b border-gray-500 py-5;
+  @apply border-gray-6 grid-rows-[1fr] border-b py-5;
 }
 
 .accordion:focus .accordion-content {
-  @apply grid-rows-[1fr] border-b border-gray-500 py-5;
+  @apply border-gray-6 grid-rows-[1fr] border-b py-5;
 }
 
 .accordion-group.accordion-group-hover .accordion-title,
@@ -80,11 +80,11 @@
 .accordion-group.accordion-group-hover
   > .accordion.accordion-open
   .accordion-title {
-  @apply bg-gray-200;
+  @apply bg-gray-3;
 }
 
 .accordion-group.accordion-group-hover > .accordion .accordion-title {
-  @apply hover:bg-gray-200;
+  @apply hover:bg-gray-3;
 }
 
 .accordion-icon {

components/informational/alert.css

@@ -1,19 +1,19 @@
 .alert {
-  @apply relative flex w-full flex-row items-center gap-3  rounded-xl bg-gray-300 p-4;
+  @apply bg-gray-4 relative flex w-full flex-row items-center  gap-3 rounded-xl p-4;
 }
 
 .alert-info {
-  @apply bg-blue-300;
+  @apply bg-blue-4;
 }
 
 .alert-success {
-  @apply bg-green-300;
+  @apply bg-green-4;
 }
 
 .alert-warning {
-  @apply bg-yellow-300;
+  @apply bg-yellow-4;
 }
 
 .alert-error {
-  @apply bg-red-300;
+  @apply bg-red-4;
 }

components/informational/avatar.css

@@ -1,5 +1,5 @@
 .avatar {
-  @apply relative  inline-flex h-10 w-10   max-w-xs bg-gray-200 align-top text-xs;
+  @apply bg-gray-3  relative inline-flex h-10   w-10 max-w-xs align-top text-xs;
 }
 
 .avatar > * {
@@ -23,7 +23,7 @@
 }
 
 .avatar-ring {
-  @apply ring-2 ring-gray-500;
+  @apply ring-gray-6 ring-2;
 }
 .avatar-ring-primary {
   @apply ring-2 ring-primary;
@@ -56,11 +56,11 @@
 
 .avatar-online.avatar-squared::before {
   transform: translate(50%, -50%);
-  @apply absolute right-0 top-0 flex h-2 w-2    items-center justify-center overflow-auto rounded-full border-2 border-success bg-green-500 content-[""];
+  @apply bg-green-6 absolute right-0 top-0 flex h-2    w-2 items-center justify-center overflow-auto rounded-full border-2 border-success content-[""];
 }
 
 .avatar-online:not(.avatar-squared)::before {
-  @apply absolute right-0  block h-2 w-2 overflow-auto rounded-full border-2 border-success bg-green-500 content-[""];
+  @apply bg-green-6 absolute  right-0 block h-2 w-2 overflow-auto rounded-full border-2 border-success content-[""];
 }
 
 .avatar-group {
@@ -81,7 +81,7 @@
         .avatar-ring-warning
       )
   ) {
-  @apply ring-gray-500;
+  @apply ring-gray-6;
 }
 
 .avatar-xs {

components/informational/badge.css

@@ -1,5 +1,5 @@
 .badge {
-  @apply inline-flex items-center  whitespace-nowrap rounded-full border border-gray-200 bg-gray-200  py-[0.3rem]  px-2 text-center align-middle text-xs font-bold  leading-none text-content1;
+  @apply border-gray-3 bg-gray-3  inline-flex items-center whitespace-nowrap rounded-full border  py-[0.3rem]  px-2 text-center align-middle text-xs font-bold  leading-none text-content1;
 }
 
 .badge-primary {
@@ -23,7 +23,7 @@
 }
 
 .badge-outline {
-  @apply border border-gray-500 bg-transparent text-content1;
+  @apply border-gray-6 border bg-transparent text-content1;
 }
 
 .badge-outline-primary {
@@ -47,27 +47,27 @@
 }
 
 .badge-flat {
-  @apply border-none bg-transparent bg-gray-300 text-gray-1000;
+  @apply text-gray-11 bg-gray-4 border-none bg-transparent;
 }
 
 .badge-flat-primary {
-  @apply border-none bg-blue-300 text-blue-1000;
+  @apply text-blue-11 bg-blue-4 border-none;
 }
 
 .badge-flat-secondary {
-  @apply border-none bg-purple-300 text-purple-1000;
+  @apply text-purple-11 bg-purple-4 border-none;
 }
 
 .badge-flat-success {
-  @apply border-none bg-green-300 text-green-1000;
+  @apply text-green-11 bg-green-4 border-none;
 }
 
 .badge-flat-error {
-  @apply border-none bg-red-300 text-red-1000;
+  @apply text-red-11 bg-red-4 border-none;
 }
 
 .badge-flat-warning {
-  @apply border-none bg-yellow-300 text-yellow-1000;
+  @apply text-yellow-11 bg-yellow-4 border-none;
 }
 
 .badge-xs {

components/informational/card.css

@@ -1,5 +1,5 @@
 .card {
-  @apply flex w-full max-w-sm flex-col gap-2 rounded-xl bg-gray-200 shadow-md;
+  @apply bg-gray-3 flex w-full max-w-sm flex-col gap-2 rounded-xl shadow-md;
 }
 
 .card.card-image-cover img:first-child {

components/informational/divider.css

@@ -8,22 +8,22 @@
 
 .divider::before,
 .divider-horizontal::before {
-  @apply h-px w-full  bg-gray-500 content-[""];
+  @apply bg-gray-6 h-px  w-full content-[""];
 }
 
 .divider::after,
 .divider-horizontal::after {
-  @apply h-px w-full  bg-gray-500 content-[""];
+  @apply bg-gray-6 h-px  w-full content-[""];
 }
 
 .divider-vertical {
   @apply my-0 mx-4 h-full w-4  flex-col;
 }
 
 .divider-vertical::before {
-  @apply h-full w-px  bg-gray-500 content-[""];
+  @apply bg-gray-6 h-full  w-px content-[""];
 }
 
 .divider-vertical::after {
-  @apply h-full  w-px  bg-gray-500 content-[""];
+  @apply bg-gray-6  h-full  w-px content-[""];
 }

components/informational/dot.css

@@ -1,5 +1,5 @@
 .dot {
-  @apply inline-flex h-2.5 min-h-[10px] w-2.5  min-w-[10px] select-none  rounded-[50%] bg-gray-700 leading-3;
+  @apply bg-gray-8 inline-flex h-2.5 min-h-[10px]  w-2.5 min-w-[10px]  select-none rounded-[50%] leading-3;
 }
 
 .dot-primary {

components/informational/kbd.css

@@ -1,5 +1,5 @@
 .kbd {
-  @apply inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md border  border-gray-500 bg-gray-200 py-1.5 px-2.5 text-xs font-semibold shadow-[0px_1.5px_0px_rgba(0,0,0,0.1)];
+  @apply border-gray-6 bg-gray-3 inline-flex h-fit items-center justify-center whitespace-nowrap  rounded-md border py-1.5 px-2.5 text-xs font-semibold shadow-[0px_1.5px_0px_rgba(0,0,0,0.1)];
 }
 
 .kbd-xs {

components/informational/menu.css

@@ -15,8 +15,9 @@
 }
 
 .menu-item {
-  transition: transform 0.12s ease;
-  @apply flex cursor-pointer select-none flex-row items-center gap-2 rounded-lg px-4 py-2 text-sm text-content1 hover:bg-gray-300 active:scale-[0.97] active:bg-gray-400;
+  transition-property: transform, opacity, visibility;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  @apply flex cursor-pointer select-none flex-row items-center gap-2 rounded-lg px-4 py-2 text-sm text-content1 duration-150 will-change-transform hover:bg-gray-4 active:scale-[0.97] active:bg-gray-5;
 }
 
 .menu-item-disabled {
@@ -28,15 +29,15 @@
 }
 
 .menu-item.menu-active {
-  @apply bg-gray-400  transition-none active:scale-[1];
+  @apply bg-gray-5  transition-none active:scale-[1];
 }
 
 .menu-toggle {
   @apply hidden;
 }
 
 .menu-item-collapse {
-  transition: padding 0.2s, grid-template-rows 0.2s;
+  transition: padding 0.15s, grid-template-rows 0.15s;
   @apply grid grid-rows-[0fr] overflow-hidden;
 }
 
@@ -49,7 +50,7 @@
 }
 
 .menu-icon {
-  @apply transition-transform duration-200;
+  @apply transition-transform duration-300;
 }
 
 .menu-toggle:checked ~ .menu-item .menu-icon {

components/informational/modal.css

@@ -22,5 +22,5 @@ html:has(.modal-state:checked) {
 }
 
 .modal-content {
-  @apply relative h-max max-h-[calc(100%-10%)] max-w-lg scale-90  overflow-auto rounded-xl bg-gray-50 p-6 transition duration-75 ease-in-out;
+  @apply bg-gray-1 relative h-max max-h-[calc(100%-10%)] max-w-lg  scale-90 overflow-auto rounded-xl p-6 transition duration-75 ease-in-out;
 }

components/informational/pagination.css

@@ -3,7 +3,7 @@
 }
 
 .pagination .btn {
-  @apply min-w-[2.5rem] border border-transparent px-0 py-2 hover:bg-gray-300;
+  @apply hover:bg-gray-4 min-w-[2.5rem] border border-transparent px-0 py-2;
 }
 
 .pagination .btn.btn-active {
@@ -31,7 +31,7 @@
 }
 
 .pagination.pagination-bordered .btn {
-  @apply border border-gray-500;
+  @apply border-gray-6 border;
 }
 
 .pagination.pagination-bordered .btn.btn-active {

components/informational/popover.css

@@ -9,8 +9,7 @@
 .popover-content {
   transition-property: transform, opacity, visibility;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  @apply invisible absolute  left-1/2 right-full z-[49]  flex w-56 origin-top -translate-y-2   -translate-x-1/2 scale-95 transform flex-col  rounded-xl  border border-transparent   bg-gray-200 p-2 opacity-0 shadow-lg outline-none;
+  @apply invisible absolute left-1/2 right-full  z-[49] flex w-56  origin-top -translate-y-2 -translate-x-1/2 scale-95   transform flex-col rounded-xl border  border-transparent  bg-gray-3 p-2   opacity-0 shadow-lg outline-none duration-150 will-change-transform;
 }
 
 .popover-bottom-center {
@@ -149,7 +148,7 @@
   @apply visible translate-x-0 translate-y-0 scale-100 opacity-100;
 }
 .popover-arrow {
-  @apply absolute h-[0.7rem] w-[0.7rem] border-transparent bg-gray-200;
+  @apply absolute h-[0.7rem] w-[0.7rem] border-transparent bg-gray-3;
 }
 .popover-border .popover-content .popover-arrow,
 .popover-border .popover-content {