How to Link my color palette

[tahaListens]

#I'm learning, thanks for your patience,

I am beginning to design a format for themes that I can easily just copy and paste and just change certain values (colors, box model values).

So here is my color palette.

@import "tailwindcss";

@theme{

    /* Fire Color Palette */
    --color-*: initial;
    --color-fire-50: oklch(96% 0.06 90);
    --color-fire-100: oklch(90% 0.12 90);
    --color-fire-200: oklch(90% 0.15 90);
    --color-fire-300: oklch(87% 0.2 90);
    --color-fire-400: oklch(82% 0.19 90);
    --color-fire-500: oklch(76% 0.17 90);
    --color-fire-600: oklch(64% 0.15 90);
    --color-fire-700: oklch(38% 0.01 90);
    --color-fire-800: oklch(30% 0.06 90);
    --color-fire-900: oklch(22% 0.04 90);

    --text-1: var(--color-fire-900);
    --text-2: var(--color-fire-800);
    --link: var(--color-blue-500);
    --surface-1: var(--color-fire-200);
    --surface-2: var(--color-fire-300);
    --surface-3: var(--color-fire-400);
    --surface-btn-link: var(--color-fire-400);
}

:root{
    background-color: var(--surface-1);
}

I want to be able to use something like bg-surface-btn-link in a class name later on.

<div className="mt-8 flex flex-col items-center">
            

            {links.map((link, index) => (
                <a
                key={index}
                href={link.url}
                className="surface-btn-link mb-4 w-56 py-3 px-6 flex items-center justify-center gap-3 rounded-lg shadow-md border transition-all duration-300 sm:w-64 md:w-72"
            >
       
                {link.icon}
                {link.name}
            </a>
            
            ))}
        </div>
    );
}

in className would it have to be var(--surface-button-link)?

[wongjn]

You could change your variables to have the --color suffix and then your class name would exist:

---text-1: var(--color-fire-900);
---text-2: var(--color-fire-800);
---link: var(--color-blue-500);
---surface-1: var(--color-fire-200);
---surface-2: var(--color-fire-300);
---surface-3: var(--color-fire-400);
---surface-btn-link: var(--color-fire-400);
+--color-text-1: var(--color-fire-900);
+--color-text-2: var(--color-fire-800);
+--color-link: var(--color-blue-500);
+--color-surface-1: var(--color-fire-200);
+--color-surface-2: var(--color-fire-300);
+--color-surface-3: var(--color-fire-400);
+--color-surface-btn-link: var(--color-fire-400);
}

:root{
-   background-color: var(--surface-1);
+   background-color: var(--color-surface-1);

https://play.tailwindcss.com/w0FdoPAaI0