Refactor code to use Tailwind color names

This commit includes both a typo fix in the `icons.ts` file, and substituting hard-coded color hex codes with corresponding Tailwind color palette names.
This commit is contained in:
Emil Gulamov 2024-04-09 19:23:28 +04:00
parent c92a067040
commit b3f670ef52
5 changed files with 7 additions and 6 deletions

View file

@ -43,7 +43,7 @@ Example:
<span class="ms-6 grow">
<!-- Heading of the tab, changes color when active -->
<span
class="block text-lg font-bold text-neutral-800 hs-tab-active:text-[#fa5a15] dark:text-neutral-200 dark:hs-tab-active:text-[#fb713b]"
class="block text-lg font-bold text-neutral-800 hs-tab-active:text-orange-400 dark:text-neutral-200 dark:hs-tab-active:text-orange-300"
>{heading}</span
>
<!-- Content of the tab, changes color when active -->

View file

@ -203,7 +203,7 @@ export const Icons = {
},
],
class:
"w-4.5 h-4.5 tarnsition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1",
"w-4.5 h-4.5 transition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1",
width: 16,
height: 16,
viewBox: "0 0 16 16",

View file

@ -45,7 +45,7 @@ If URL is '/' (home page), assign ID as 'home'
"hover:text-neutral-500",
"dark:hover:text-neutral-500"
);
nav.classList.add("text-[#fa5a15]", "dark:text-[#fb713b]");
nav.classList.add("text-orange-400", "dark:text-orange-300");
nav.setAttribute("aria-current", "page");
}
});

View file

@ -269,7 +269,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
changeHeadingStyle(
btn,
["text-neutral-800", "dark:text-neutral-200"],
["text-[#fa5a15]", "dark:text-[#fb713b]"],
["text-orange-400", "dark:text-orange-300"],
);
}
}
@ -292,7 +292,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
changeHeadingStyle(
button,
["text-[#fa5a15]", "dark:text-[#fb713b]"],
["text-orange-400", "dark:text-orange-300"],
["text-neutral-800", "dark:text-neutral-200"],
);
}
@ -314,7 +314,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
if (tabButtons.length > 0) {
changeHeadingStyle(
tabButtons[0],
["text-[#fa5a15]", "dark:text-[#fb713b]"],
["text-orange-400", "dark:text-orange-300"],
[],
);
}

View file

@ -55,6 +55,7 @@ export default {
},
zinc: {
200: "#e4e4e7",
400: "#a1a1aa",
500: "#71717a",
600: "#52525b",
700: "#3f3f46",