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/pages/[workspaceSlug]/settings/billing.tsx

@@ -44,18 +44,18 @@ const BillingSettings: NextPage = () => {
         <section className="space-y-8">
           <div>
             <h3 className="text-2xl font-semibold leading-6">Billing & Plans</h3>
-            <p className="mt-4 text-sm text-brand-secondary">[Free launch preview] plan Pro</p>
+            <p className="mt-4 text-sm text-custom-text-200">[Free launch preview] plan Pro</p>
           </div>
           <div className="space-y-8 md:w-2/3">
             <div>
-              <div className="w-80 rounded-md border border-brand-base bg-brand-base p-4 text-center">
+              <div className="w-80 rounded-md border border-custom-border-100 bg-custom-background-100 p-4 text-center">
                 <h4 className="text-md mb-1 leading-6">Payment due</h4>
                 <h2 className="text-3xl font-extrabold">--</h2>
               </div>
             </div>
             <div>
               <h4 className="text-md mb-1 leading-6">Current plan</h4>
-              <p className="mb-3 text-sm text-brand-secondary">
+              <p className="mb-3 text-sm text-custom-text-200">
                 You are currently using the free plan
               </p>
               <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
@@ -64,7 +64,7 @@ const BillingSettings: NextPage = () => {
             </div>
             <div>
               <h4 className="text-md mb-1 leading-6">Billing history</h4>
-              <p className="mb-3 text-sm text-brand-secondary">There are no invoices to display</p>
+              <p className="mb-3 text-sm text-custom-text-200">There are no invoices to display</p>
             </div>
           </div>
         </section>

apps/app/pages/[workspaceSlug]/settings/index.tsx

@@ -177,7 +177,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Logo</h4>
-                <p className="text-sm text-brand-secondary">
+                <p className="text-sm text-custom-text-200">
                   Max file size is 5MB. Supported file types are .jpg and .png.
                 </p>
               </div>
@@ -218,7 +218,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">URL</h4>
-                <p className="text-sm text-brand-secondary">Your workspace URL.</p>
+                <p className="text-sm text-custom-text-200">Your workspace URL.</p>
               </div>
               <div className="col-span-12 flex items-center gap-2 sm:col-span-6">
                 <Input
@@ -258,7 +258,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Name</h4>
-                <p className="text-sm text-brand-secondary">Give a name to your workspace.</p>
+                <p className="text-sm text-custom-text-200">Give a name to your workspace.</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Input
@@ -277,7 +277,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Company Size</h4>
-                <p className="text-sm text-brand-secondary">How big is your company?</p>
+                <p className="text-sm text-custom-text-200">How big is your company?</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Controller
@@ -308,7 +308,7 @@ const WorkspaceSettings: NextPage = () => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold">Danger Zone</h4>
-                <p className="text-sm text-brand-secondary">
+                <p className="text-sm text-custom-text-200">
                   The danger zone of the workspace delete page is a critical area that requires
                   careful consideration and attention. When deleting a workspace, all of the data
                   and resources within that workspace will be permanently removed and cannot be

apps/app/pages/[workspaceSlug]/settings/members.tsx

@@ -154,7 +154,7 @@ const MembersSettings: NextPage = () => {
             <h3 className="text-2xl font-semibold">Members</h3>
             <button
               type="button"
-              className="flex items-center gap-2 text-brand-accent outline-none"
+              className="flex items-center gap-2 text-custom-primary outline-none"
               onClick={() => setInviteModal(true)}
             >
               <PlusIcon className="h-4 w-4" />
@@ -169,7 +169,7 @@ const MembersSettings: NextPage = () => {
               <Loader.Item height="40px" />
             </Loader>
           ) : (
-            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base bg-brand-base px-6">
+            <div className="divide-y divide-custom-border-100 rounded-[10px] border border-custom-border-100 bg-custom-background-100 px-6">
               {members.length > 0
                 ? members.map((member) => (
                     <div key={member.id} className="flex items-center justify-between py-6">
@@ -191,7 +191,7 @@ const MembersSettings: NextPage = () => {
                           <h4 className="text-sm">
                             {member.first_name} {member.last_name}
                           </h4>
-                          <p className="text-xs text-brand-secondary">{member.email}</p>
+                          <p className="text-xs text-custom-text-200">{member.email}</p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2 text-xs">