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"> <span class="ms-6 grow">
<!-- Heading of the tab, changes color when active --> <!-- Heading of the tab, changes color when active -->
<span <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 >{heading}</span
> >
<!-- Content of the tab, changes color when active --> <!-- Content of the tab, changes color when active -->

View file

@ -203,7 +203,7 @@ export const Icons = {
}, },
], ],
class: 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, width: 16,
height: 16, height: 16,
viewBox: "0 0 16 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", "hover:text-neutral-500",
"dark: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"); nav.setAttribute("aria-current", "page");
} }
}); });

View file

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

View file

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