chore: update classnames according to the new theming structure (#1494)

* chore: store various shades of accent color

* refactor: custom theme selector

* refactor: custom theme selector

* chore: update custom theme input labels

* fix: color generator function logic

* fix: accent color preloaded data

* chore: new theming structure

* chore: update shades calculation logic

* refactor: variable names

* chore: update color scheming

* chore: new color scheming

* refactor: themes folder structure

* chore: update classnames to the new ones

* chore: update static colors

* chore: sidebar link colors

* chore: placeholder color

* chore: update border classnames

apps/app/components/integration/github/import-configure.tsx

@@ -36,7 +36,7 @@ export const GithubImportConfigure: React.FC<Props> = ({
       <div className="flex items-center gap-2 py-5">
         <div className="w-full">
           <div className="font-medium">Configure</div>
-          <div className="text-sm text-brand-secondary">Set up your GitHub import.</div>
+          <div className="text-sm text-custom-text-200">Set up your GitHub import.</div>
         </div>
         <div className="flex-shrink-0">
           <GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />

apps/app/components/integration/github/import-confirm.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
   <div className="mt-6">
-    <h4 className="font-medium text-brand-secondary">
+    <h4 className="font-medium text-custom-text-200">
       You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm &
       Import{'" '}
       to complete the process.

apps/app/components/integration/github/import-data.tsx

@@ -37,7 +37,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Repository</h4>
-            <p className="text-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Select the repository that you want the issues to be imported from.
             </p>
           </div>
@@ -54,7 +54,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                       value ? (
                         `${value.full_name}`
                       ) : (
-                        <span className="text-brand-secondary">Select Repository</span>
+                        <span className="text-custom-text-200">Select Repository</span>
                       )
                     }
                     onChange={onChange}
@@ -68,7 +68,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Project</h4>
-            <p className="text-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Select the project to import the issues to.
             </p>
           </div>
@@ -84,7 +84,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                       value ? (
                         projects.find((p) => p.id === value)?.name
                       ) : (
-                        <span className="text-brand-secondary">Select Project</span>
+                        <span className="text-custom-text-200">Select Project</span>
                       )
                     }
                     onChange={onChange}
@@ -99,7 +99,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Sync Issues</h4>
-            <p className="text-xs text-brand-secondary">
+            <p className="text-xs text-custom-text-200">
               Set whether you want to sync the issues or not.
             </p>
           </div>

apps/app/components/integration/github/import-users.tsx

@@ -26,8 +26,8 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
     <div className="mt-6">
       <div>
         <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
-          <div className="text-brand-secondary">Name</div>
-          <div className="text-brand-secondary">Import as...</div>
+          <div className="text-custom-text-200">Name</div>
+          <div className="text-custom-text-200">Import as...</div>
           <div className="text-right">
             {users.filter((u) => u.import !== false).length} users selected
           </div>

apps/app/components/integration/github/repo-details.tsx

@@ -64,20 +64,20 @@ export const GithubRepoDetails: FC<Props> = ({
           <div className="flex items-center justify-between gap-4">
             <div>
               <div className="font-medium">Repository Details</div>
-              <div className="text-sm text-brand-secondary">Import completed. We have found:</div>
+              <div className="text-sm text-custom-text-200">Import completed. We have found:</div>
             </div>
             <div className="mt-4 flex gap-16">
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.issue_count}</p>
-                <h6 className="text-sm text-brand-secondary">Issues</h6>
+                <h6 className="text-sm text-custom-text-200">Issues</h6>
               </div>
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.labels}</p>
-                <h6 className="text-sm text-brand-secondary">Labels</h6>
+                <h6 className="text-sm text-custom-text-200">Labels</h6>
               </div>
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.collaborators.length}</p>
-                <h6 className="text-sm text-brand-secondary">Users</h6>
+                <h6 className="text-sm text-custom-text-200">Users</h6>
               </div>
             </div>
           </div>

apps/app/components/integration/github/root.tsx

@@ -179,13 +179,13 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
     <form onSubmit={handleSubmit(createGithubImporterService)}>
       <div className="space-y-2">
         <Link href={`/${workspaceSlug}/settings/import-export`}>
-          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-brand-secondary hover:text-brand-base">
+          <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
             <ArrowLeftIcon className="h-3 w-3" />
             <div>Cancel import & go back</div>
           </div>
         </Link>
 
-        <div className="space-y-4 rounded-[10px] border border-brand-base bg-brand-base p-4">
+        <div className="space-y-4 rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
           <div className="flex items-center gap-2">
             <div className="h-10 w-10 flex-shrink-0">
               <Image src={GithubLogo} alt="GithubLogo" />
@@ -196,12 +196,12 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                   <div
                     className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border ${
                       index <= activeIntegrationState()
-                        ? `border-brand-accent bg-brand-accent ${
+                        ? `border-custom-primary bg-custom-primary ${
                             index === activeIntegrationState()
                               ? "border-opacity-100 bg-opacity-100"
                               : "border-opacity-80 bg-opacity-80"
                           }`
-                        : "border-brand-base"
+                        : "border-custom-border-100"
                     }`}
                   >
                     <integration.icon
@@ -215,8 +215,8 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                       key={index}
                       className={`border-b px-7 ${
                         index <= activeIntegrationState() - 1
-                          ? `border-brand-accent`
-                          : `border-brand-base`
+                          ? `border-custom-primary`
+                          : `border-custom-border-100`
                       }`}
                     >
                       {" "}

apps/app/components/integration/github/select-repository.tsx

@@ -81,7 +81,7 @@ export const SelectRepository: React.FC<Props> = ({
           {userRepositories && options.length < totalCount && (
             <button
               type="button"
-              className="w-full p-1 text-center text-[0.6rem] text-brand-secondary hover:bg-brand-surface-2"
+              className="w-full p-1 text-center text-[0.6rem] text-custom-text-200 hover:bg-custom-background-80"
               onClick={() => setSize(size + 1)}
               disabled={isValidating}
             >

apps/app/components/integration/github/single-user-select.tsx

@@ -62,7 +62,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
   }));
 
   return (
-    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-brand-surface-2 px-2 py-3">
+    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-custom-background-80 px-2 py-3">
       <div className="flex items-center gap-2">
         <div className="relative h-8 w-8 flex-shrink-0 rounded">
           <img