♻️ use tailwind variable for teal text

thibaudbrault · Sep 24, 2024 · 3468378 · 3468378
1 parent 8a74887
commit 3468378
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 7 deletions.
diff --git a/src/app/register/plan/form.tsx b/src/app/register/plan/form.tsx
@@ -119,7 +119,7 @@ export default function Form() {
             className="w-full overflow-hidden rounded-md bg-primary-foreground-alpha p-4 text-center text-primary shadow-sm shadow-tealA-7 transition-all duration-300 hover:shadow-tealA-8"
           >
             <div>
-              <h3 className="text-sm font-semibold uppercase text-tealA-11">
+              <h3 className="text-sm font-semibold uppercase text-accent-secondary">
                 {plan.label}
               </h3>
               <p className="mt-2 text-4xl font-bold">
@@ -134,7 +134,7 @@ export default function Form() {
               <ul className="list-none text-right">
                 {plan.benefits.map((benefit) => (
                   <li key={benefit} className="flex gap-2">
-                    <Check className="text-teal-9" />
+                    <Check className="text-accent" />
                     <p>{benefit}</p>
                   </li>
                 ))}

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -15,7 +15,7 @@ const button = cva('transition-all duration-300 ease-in-out lowercase', {
         'bg-primary-foreground text-primary shadow-sm shadow-grayA-7 hover:bg-primary-foreground-hover disabled:shadow-transparent disabled:bg-transparent',
 
       secondary:
-        'bg-transparent text-tealA-11 shadow-sm shadow-tealA-7 hover:shadow-tealA-8',
+        'bg-transparent text-accent-secondary shadow-sm shadow-tealA-7 hover:shadow-tealA-8',
 
       destructive:
         'bg-destructive text-white shadow-sm shadow-transparent hover:bg-destructive-hover disabled:bg-destructive-disabled disabled:text-redA-11 disabled:shadow-sm disabled:shadow-redA-7 disabled:hover:shadow-redA-8 disabled:dark:bg-destructive-disabled-dark',

diff --git a/src/components/field/Field.tsx b/src/components/field/Field.tsx
@@ -27,7 +27,7 @@ export const Field = ({
   return (
     <div
       key={value}
-      className="flex flex-col gap-2 [&_svg]:focus-within:text-teal-10"
+      className="flex flex-col gap-2 [&_svg]:focus-within:text-accent-focus"
     >
       <div className="flex items-center gap-1">
         <Label

diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
@@ -76,7 +76,7 @@ const SelectItem = forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="size-4 text-teal-9" />
+        <Check className="size-4 text-accent" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

diff --git a/src/modules/search/Search.tsx b/src/modules/search/Search.tsx
@@ -52,7 +52,7 @@ export const Search = ({ tags }: Props) => {
 
   return (
     <section className="mx-auto flex w-11/12 items-end justify-center gap-8 md:w-3/4">
-      <div className="group/search flex w-full flex-col gap-1 [&_svg]:focus-within:text-tealA-8">
+      <div className="group/search flex w-full flex-col gap-1 [&_svg]:focus-within:text-accent-focus">
         <Label
           htmlFor="search"
           className="lowercase"

diff --git a/src/modules/settings/users/Users.tsx b/src/modules/settings/users/Users.tsx
@@ -64,7 +64,7 @@ export const Users = ({ userId, tenantId, plan, users, usersCount }: Props) => {
                 <div className="flex flex-col items-start">
                   <h2
                     className={`text-xl font-semibold ${
-                      user.role !== 'user' ? 'text-teal-11' : ''
+                      user.role !== 'user' ? 'text-accent-secondary' : ''
                     }`}
                   >
                     <b>{user.name}</b>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -48,6 +48,11 @@ module.exports = {
           muted: 'var(--gray-11)',
           negative: 'var(--gray-1)'
         },
+        accent: {
+          DEFAULT: 'var(--teal-9)',
+          focus: 'var(--teal-10)',
+          secondary: 'var(--teal-11)',
+        },
         destructive: {
           DEFAULT: 'var(--red-9)',
           hover: 'var(--red-10)'