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">
|
<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 -->
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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"],
|
||||||
[],
|
[],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Add table
Reference in a new issue