jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replace color hex codes with Tailwind color palette

Browse source 
Replaced all custom color hex codes used in various component classes with their corresponding color names from the expanded Tailwind color palette. This ensures consistent styling across components and enhances readability and maintainability of the code.
This commit is contained in:
Emil Gulamov 2024-04-07 18:23:16 +04:00
parent 4ab913d11a
commit c92a067040
23 changed files with 89 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/ThemeIcon.astro
View file

@ -2,7 +2,7 @@
<button
type="button"
aria-label="Dark Theme Toggle"
class="hs-dark-mode group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-[#fa5a15] hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
class="hs-dark-mode group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-orange-400 hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-orange-300 dark:focus:outline-none"
data-hs-theme-click-value="dark"
>
<!-- The SVG displayed shows an abstract icon that represents the moon (dark theme) -->
@ -24,7 +24,7 @@
<button
type="button"
aria-label="Light Theme Toggle"
class="hs-dark-mode group hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:flex dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-[#fb713b] dark:focus:outline-none"
class="hs-dark-mode group hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-orange-400 hs-dark-mode-active:flex dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-orange-300 dark:focus:outline-none"
data-hs-theme-click-value="light"
>
<!-- The SVG displayed shows a standard sun icon that stands for the light theme -->

2
src/components/sections/FooterSection.astro
View file

@ -44,7 +44,7 @@ const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafte
{link.name}
</a>
{section.section === "Company" && index === 2 ? (
<span class="ms-1 inline rounded-lg bg-[#e14d0b] px-2 py-1 text-xs font-bold text-neutral-50">
<span class="ms-1 inline rounded-lg bg-orange-500 px-2 py-1 text-xs font-bold text-neutral-50">
We're hiring!
</span>
) : null}

2
src/components/sections/features/FeaturesStatsAlt.astro
View file

@ -13,7 +13,7 @@ interface Props {
}
// Define SVG marker to be used in the component
const ListItemMarker: string = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-0.5 h-6 w-6 text-[#fa5a15] dark:text-[#fb713b]"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
const ListItemMarker: string = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-0.5 h-6 w-6 text-orange-400 dark:text-orange-300"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
---
<section

2
src/components/ui/LanguagePicker.astro
View file

@ -8,7 +8,7 @@ import Icon from "./icons/Icon.astro";
id="hs-dropdown-default"
type="button"
aria-label="Change language"
class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-[#fa5a15] dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-[#fb713b] dark:focus:outline-none"
class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text--orange-400 dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-orange-300 dark:focus:outline-none"
>
<Icon name="earth" />
<svg

2
src/components/ui/blocks/IconBlock.astro
View file

@ -8,7 +8,7 @@ interface Props {
}
// Define classes for heading and content
const headingClasses =
"text-balance text-lg font-bold text-gray-800 dark:text-neutral-200";
"text-balance text-lg font-bold text-neutral-800 dark:text-neutral-200";
const contentClasses =
"mt-1 text-pretty text-neutral-700 dark:text-neutral-300";
---

2
src/components/ui/blocks/StatsBig.astro
View file

@ -10,7 +10,7 @@ interface Props {
<!-- Container for the title and subtitle -->
<div class="lg:pe-6 xl:pe-12">
<p class="text-6xl font-bold leading-10 text-[#fa5a15] dark:text-[#fb713b]">
<p class="text-6xl font-bold leading-10 text-orange-400 dark:text-orange-300">
{title}
</p>
<p class="mt-2 text-neutral-600 dark:text-neutral-400 sm:mt-3">{subTitle}</p>

2
src/components/ui/blocks/StatsSmall.astro
View file

@ -10,6 +10,6 @@ interface Props {
<!-- Container for title and subtitle -->
<div>
<p class="text-3xl font-bold text-[#fa5a15] dark:text-[#fb713b]">{title}</p>
<p class="text-3xl font-bold text-orange-400 dark:text-orange-300">{title}</p>
<p class="mt-1 text-neutral-600 dark:text-neutral-400">{subTitle}</p>
</div>

2
src/components/ui/buttons/Btn404.astro
View file

@ -13,7 +13,7 @@ const baseClasses =
"group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none";
const borderClasses = "border border-transparent";
const bgColorClasses =
"bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none";
"bg-orange-400 hover:bg-orange-500 active:bg-orange-500 dark:focus:outline-none";
const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
const fontSizeClasses = "2xl:text-base";
const ringClasses = "dark:ring-zinc-200";

2
src/components/ui/buttons/LoginBtn.astro
View file

@ -7,7 +7,7 @@ interface Props {
const baseClasses =
"flex items-center gap-x-2 text-base md:text-sm font-medium text-neutral-600 ring-zinc-500 transition duration-300 focus-visible:ring outline-none";
const hoverClasses = "hover:text-[#fa5a15] dark:hover:text-[#fb713b]";
const hoverClasses = "hover:text-orange-400 dark:hover:text-orange-300";
const darkClasses =
"dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:focus:outline-none";
const mdClasses = "md:my-6 md:border-s md:border-neutral-300 md:ps-6";

2
src/components/ui/buttons/PrimaryCTA.astro
View file

@ -13,7 +13,7 @@ const baseClasses =
"group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none";
const borderClasses = "border border-transparent";
const bgColorClasses =
"bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none";
"bg-orange-400 hover:bg-orange-500 active:bg-orange-500 dark:focus:outline-none";
const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
const fontSizeClasses = "2xl:text-base";
const ringClasses = "dark:ring-zinc-200";

2
src/components/ui/buttons/ProductTabBtn.astro
View file

@ -27,7 +27,7 @@ const INACTIVE_HEADING_CLASS = "text-neutral-800 dark:text-neutral-200";
>
<!-- Tab text -->
<span
class={`${HEADING_CLASS} ${first ? "text-[#fa5a15] dark:text-[#fb713b]" : INACTIVE_HEADING_CLASS}`}
class={`${HEADING_CLASS} ${first ? "text-orange-400 dark:text-orange-300" : INACTIVE_HEADING_CLASS}`}
>
{title}
</span>

2
src/components/ui/buttons/SocialShare.astro
View file

@ -87,7 +87,7 @@ const socialPlatforms: SocialPlatform[] = [
</svg>
<svg
class="js-clipboard-success text-primary-accent-light dark:text-primary-accent-dark hidden h-4 w-4"
class="js-clipboard-success text-neutral-700 dark:text-neutral-300 hidden h-4 w-4"
width="24"
height="24"
viewBox="0 0 24 24"

2
src/components/ui/cards/CardBlogRecent.astro
View file

@ -34,7 +34,7 @@ interface Props {
class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-3xl lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight"
>
<a
class="outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:text-neutral-300 dark:ring-zinc-200 dark:hover:text-neutral-50 dark:focus:outline-none"
class="outline-none ring-zinc-500 transition duration-300 hover:text-orange-400 focus-visible:ring dark:text-neutral-300 dark:ring-zinc-200 dark:hover:text-neutral-50 dark:focus:outline-none"
href={`/blog/${blogEntry.slug}/`}
>
{blogEntry.data.description}

2
src/components/ui/cards/CardInsight.astro
View file

@ -40,7 +40,7 @@ interface Props {
</p>
<!-- The "Read More" hyperlink going to the full insight. With an arrow icon -->
<p
class="mt-5 inline-flex items-center gap-x-1 font-medium text-[#fa5a15] decoration-2 group-hover:underline dark:text-[#fb713b]"
class="mt-5 inline-flex items-center gap-x-1 font-medium text-orange-400 decoration-2 group-hover:underline dark:text-orange-300"
>
Read more
<Icon name="arrowRightStatic" />

2
src/components/ui/cards/CardRelated.astro
View file

@ -26,7 +26,7 @@ interface Props {
/>
<!-- The title of the blog post -->
<h3
class="mt-2 text-balance text-lg font-medium text-neutral-800 group-hover:text-[#fa5a15] dark:text-neutral-300 dark:group-hover:text-neutral-50"
class="mt-2 text-balance text-lg font-medium text-neutral-800 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-neutral-50"
>
{blogEntry.data.title}
</h3>

2
src/components/ui/forms/LoginModal.astro
View file

@ -38,7 +38,7 @@ const config = {
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
{config.subTitle}
<button
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
class="rounded-lg p-1 font-medium text-orange-400 decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-none"
data-hs-overlay={config.registerBtnDataHS}
>
{config.registerBtn}

2
src/components/ui/forms/RecoverModal.astro
View file

@ -38,7 +38,7 @@ const config = {
{config.subTitle}
<!-- Button that, when clicked, opens the login modal -->
<button
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
class="rounded-lg p-1 font-medium text-orange-400 decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-none"
data-hs-overlay={config.loginBtnDataHS}
>
{config.loginBtn}

4
src/components/ui/forms/RegisterModal.astro
View file

@ -38,7 +38,7 @@ const config = {
{config.subTitle}
<!-- Button to toggle login modal -->
<button
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
class="rounded-lg p-1 font-medium text-orange-400 decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-none"
data-hs-overlay={config.loginBtnDataHS}
>
{config.loginBtn}
@ -76,7 +76,7 @@ const config = {
<!-- Checkbox with a label and a link for accepting the terms and conditions -->
<Checkbox label="I accept the " , id="terms-agree">
<a
class="font-medium text-[#fa5a15] decoration-2 hover:underline dark:text-[#fa5a15] dark:focus:outline-none"
class="font-medium text-orange-400 decoration-2 hover:underline dark:text-orange-400 dark:focus:outline-none"
href="#">Terms and Conditions</a
>
</Checkbox>

4
src/components/ui/forms/input/EmailFooterInput.astro
View file

@ -23,12 +23,12 @@ const placeholder = Astro.currentLocale === "fr" ? "Entrez votre email" : "Enter
type="text"
id={id}
name="footer-input"
class="block w-full rounded-lg border-transparent bg-neutral-100 px-4 py-3 text-sm text-neutral-600 focus:border-[#fa5a15] focus:ring-[#fa5a15] disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:bg-neutral-700 dark:text-gray-300 dark:placeholder:text-neutral-300"
class="block w-full rounded-lg border-transparent bg-neutral-100 px-4 py-3 text-sm text-neutral-600 focus:border-orange-400 focus:ring-orange-400 disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:bg-neutral-700 dark:text-gray-300 dark:placeholder:text-neutral-300"
placeholder={placeholder}
/>
</div>
<a
class="inline-flex w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-lg border border-transparent bg-[#fa5a15] p-3 text-sm font-bold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 sm:w-auto"
class="inline-flex w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-lg border border-transparent bg-orange-400 p-3 text-sm font-bold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-orange-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 sm:w-auto"
href="#"
>
{title}

2
src/components/ui/forms/input/PasswordInput.astro
View file

@ -26,7 +26,7 @@ interface Props {
{
forgot ? (
<button
class="rounded-lg text-sm font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1"
class="rounded-lg text-sm font-medium text-orange-400 decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1"
data-hs-overlay="#hs-toggle-between-modals-recover-modal"
>
Forgot password?

16
src/components/ui/icons/icons.ts
View file

@ -5,7 +5,7 @@ export const Icons = {
d: "m150-400 82-80-82-82-80 82 80 80Zm573-10 87-140 88 140H723Zm-243-70q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm.351-180Q455-660 437.5-642.851t-17.5 42.5Q420-575 437.351-557.5t43 17.5Q506-540 523-557.351t17-43Q540-626 522.851-643t-42.5-17ZM480-600ZM0-240v-53q0-39.464 42-63.232T150.398-380q12.158 0 23.38.5T196-377.273q-8 17.273-12 34.842-4 17.57-4 37.431v65H0Zm240 0v-65q0-65 66.5-105T480-450q108 0 174 40t66 105v65H240Zm570-140q67.5 0 108.75 23.768T960-293v53H780v-65q0-19.861-3.5-37.431Q773-360 765-377.273q11-1.727 22.171-2.227 11.172-.5 22.829-.5Zm-330.2-10Q400-390 350-366q-50 24-50 61v5h360v-6q0-36-49.5-60t-130.7-24Zm.2 90Z",
},
],
class: "mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]",
class: "mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300",
width: 48,
height: 48,
viewBox: "0 -960 960 960",
@ -16,7 +16,7 @@ export const Icons = {
d: "M343-420h225v-60H343v60Zm0-90h395v-60H343v60Zm0-90h395v-60H343v60Zm-83 400q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560v-560H260v560ZM140-80q-24 0-42-18t-18-42v-620h60v620h620v60H140Zm120-740v560-560Z",
},
],
class: "mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]",
class: "mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300",
width: 48,
height: 48,
viewBox: "0 -960 960 960",
@ -27,7 +27,7 @@ export const Icons = {
d: "m346-60-76-130-151-31 17-147-96-112 96-111-17-147 151-31 76-131 134 62 134-62 77 131 150 31-17 147 96 111-96 112 17 147-150 31-77 130-134-62-134 62Zm27-79 107-45 110 45 67-100 117-30-12-119 81-92-81-94 12-119-117-28-69-100-108 45-110-45-67 100-117 28 12 119-81 94 81 92-12 121 117 28 70 100Zm107-341Zm-43 133 227-225-45-41-182 180-95-99-46 45 141 140Z",
},
],
class: "mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]",
class: "mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300",
width: 48,
height: 48,
viewBox: "0 -960 960 960",
@ -38,7 +38,7 @@ export const Icons = {
d: "M480-480q-51 0-85.5-34.5T360-600q0-50 34.5-85t85.5-35q50 0 85 35t35 85q0 51-35 85.5T480-480Zm-.351-60Q505-540 522.5-557.149t17.5-42.5Q540-625 522.649-642.5t-43-17.5Q454-660 437-642.649t-17 43Q420-574 437.149-557t42.5 17ZM240-240v-76q0-27 17.5-47.5T300-397q42-22 86.943-32.5 44.942-10.5 93-10.5Q528-440 573-429.5t87 32.5q25 13 42.5 33.5T720-316v76H240Zm240-140q-47.546 0-92.773 13T300-328v28h360v-28q-42-26-87.227-39-45.227-13-92.773-13Zm0-220Zm0 300h180-360 180ZM140-80q-24 0-42-18t-18-42v-172h60v172h172v60H140ZM80-648v-172q0-24 18-42t42-18h172v60H140v172H80ZM648-80v-60h172v-172h60v172q0 24-18 42t-42 18H648Zm172-568v-172H648v-60h172q24 0 42 18t18 42v172h-60Z",
},
],
class: "mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]",
class: "mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300",
width: 48,
height: 48,
viewBox: "0 -960 960 960",
@ -50,7 +50,7 @@ export const Icons = {
},
],
class:
"mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7",
"mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-orange-400 dark:fill-neutral-300 dark:hs-tab-active:fill-orange-300 md:h-7 md:w-7",
width: 48,
height: 48,
viewBox: "0 -960 960 960",
@ -62,7 +62,7 @@ export const Icons = {
},
],
class:
"mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7",
"mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-orange-400 dark:fill-neutral-300 dark:hs-tab-active:fill-orange-300 md:h-7 md:w-7",
width: 48,
height: 48,
viewBox: "0 -960 960 960",
@ -74,7 +74,7 @@ export const Icons = {
},
],
class:
"h-6 w-6 flex-shrink-0 text-neutral-700 hs-tab-active:text-[#fa5a15] dark:text-neutral-300 dark:hs-tab-active:text-[#fb713b] md:h-7 md:w-7",
"h-6 w-6 flex-shrink-0 text-neutral-700 hs-tab-active:text-orange-400 dark:text-neutral-300 dark:hs-tab-active:text-orange-300 md:h-7 md:w-7",
width: 24,
height: 24,
viewBox: "0 0 24 24",
@ -93,7 +93,7 @@ export const Icons = {
d: "M12 19V5",
},
],
class: "h-5 w-5 flex-shrink-0 text-[#fa5a15] dark:text-[#fb713b]",
class: "h-5 w-5 flex-shrink-0 text-orange-400 dark:text-orange-300",
width: 24,
height: 24,
viewBox: "0 0 24 24",

4
src/pages/insights/[...slug].astro
View file

@ -38,7 +38,7 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
</div>
<div
id="progress-mobile"
class="fixed left-0 top-0 h-2 w-full bg-gradient-to-r from-[#fa5a15]/30 to-[#fa5a15] md:hidden"
class="fixed left-0 top-0 h-2 w-full bg-gradient-to-r from-orange-400/30 to-orange-400 md:hidden"
>
</div>
<div id="pin" class="mt-10 hidden space-y-4 md:block">
@ -47,7 +47,7 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
>
<div
id="progress"
class="h-px w-full bg-gradient-to-r from-[#fa5a15]/30 to-[#fa5a15]"
class="h-px w-full bg-gradient-to-r from-orange-400/30 to-orange-400"
>
</div>
</div>

57
tailwind.config.mjs
View file

@ -7,11 +7,66 @@ export default {
],
darkMode: "class",
theme: {
colors: {
transparent: "transparent",
current: "currentColor",
black: "#000000",
white: "#ffffff",
gray: {
100: "#f3f4f6",
300: "#d1d5db",
500: "#6b7280",
600: "#4b5563",
800: "#1f2937",
},
indigo: {
200: "#c7d2fe",
300: "#a5b4fc",
},
neutral: {
50: "#fafafa",
100: "#f5f5f5",
200: "#e5e5e5",
300: "#d4d4d4",
400: "#a3a3a3",
500: "#737373",
600: "#525252",
700: "#404040",
800: "#262626",
900: "#171717",
},
yellow: {
50: "#fefce8",
100: "#fef9c3",
400: "#facc15",
500: "#eab308",
},
orange: {
100: "#ffedd5",
200: "#fed7aa",
300: "#fb713b",
400: "#fa5a15",
500: "#e14d0b",
600: "#ea580c",
},
red: {
400: "#f87171",
500: "#ef4444",
},
zinc: {
200: "#e4e4e7",
500: "#71717a",
600: "#52525b",
700: "#3f3f46",
800: "#27272a",
900: "#18181b",
},
},
extend: {},
},
plugins: [
require("tailwindcss/nesting"),
require("preline/plugin"),
require("@tailwindcss/forms")
require("@tailwindcss/forms"),
],
};