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:
parent
c92a067040
commit
b3f670ef52
5 changed files with 7 additions and 6 deletions
|
@ -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 -->
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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"],
|
||||
[],
|
||||
);
|
||||
}
|
||||
|
|
|
@ -55,6 +55,7 @@ export default {
|
|||
},
|
||||
zinc: {
|
||||
200: "#e4e4e7",
|
||||
400: "#a1a1aa",
|
||||
500: "#71717a",
|
||||
600: "#52525b",
|
||||
700: "#3f3f46",
|
||||
|
|
Loading…
Add table
Reference in a new issue