chore: work item card enhancements

* refactor: update styling and class names according to new design system in charts

* refactor: clean up

.github/ISSUE_TEMPLATE/--bug-report.yaml

@@ -1,7 +1,7 @@
 name: Bug report
 description: Create a bug report to help us improve Plane
 title: "[bug]: "
-labels: [🐛bug]
+labels: [🐛bug, plane]
 assignees: [vihar, pushya22]
 body:
 - type: markdown

.github/ISSUE_TEMPLATE/--feature-request.yaml

@@ -1,7 +1,7 @@
 name: Feature request
 description: Suggest a feature to improve Plane
 title: "[feature]: "
-labels: [✨feature]
+labels: [✨feature, plane]
 assignees: [vihar, pushya22]
 body:
 - type: markdown

.github/workflows/pull-request-build-lint-api.yml

@@ -27,11 +27,13 @@ jobs:
       github.event.pull_request.draft == false &&
       github.event.pull_request.requested_reviewers != null
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Set up Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: "3.12.x"
+          cache: 'pip'
+          cache-dependency-path: 'apps/api/requirements.txt'
       - name: Install Pylint
         run: python -m pip install ruff
       - name: Install API Dependencies

.github/workflows/pull-request-build-lint-web-apps.yml

@@ -17,10 +17,11 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  build-and-lint:
-    name: Build and lint web apps
+  # Format check has no build dependencies - run immediately in parallel
+  check-format:
+    name: check:format
     runs-on: ubuntu-latest
-    timeout-minutes: 25
+    timeout-minutes: 10
     if: |
       github.event.pull_request.draft == false &&
       github.event.pull_request.requested_reviewers != null
@@ -29,28 +30,140 @@ jobs:
       TURBO_SCM_HEAD: ${{ github.sha }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 50
           filter: blob:none
 
       - name: Set up Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
 
       - name: Enable Corepack and pnpm
         run: corepack enable pnpm
 
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build Affected
-        run: pnpm turbo run build --affected
-
-      - name: Lint Affected
-        run: pnpm turbo run check:lint --affected
-
-      - name: Check Affected format
+      - name: Check formatting
         run: pnpm turbo run check:format --affected
 
-      - name: Check Affected types
-        run: pnpm turbo run check:types --affected
+  # Build packages - required for lint and type checks
+  build:
+    name: Build packages
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    if: |
+      github.event.pull_request.draft == false &&
+      github.event.pull_request.requested_reviewers != null
+    env:
+      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
+      TURBO_SCM_HEAD: ${{ github.sha }}
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 50
+          filter: blob:none
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+
+      - name: Enable Corepack and pnpm
+        run: corepack enable pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
+      - name: Restore Turbo cache
+        uses: actions/cache/restore@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-
+            turbo-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm turbo run build --affected
+
+      - name: Save Turbo cache
+        uses: actions/cache/save@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+
+  # Lint and type checks depend on build artifacts
+  check:
+    name: ${{ matrix.task }}
+    runs-on: ubuntu-latest
+    needs: build
+    timeout-minutes: 15
+    strategy:
+      fail-fast: false
+      matrix:
+        task: [check:lint, check:types]
+    env:
+      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
+      TURBO_SCM_HEAD: ${{ github.sha }}
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 50
+          filter: blob:none
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+
+      - name: Enable Corepack and pnpm
+        run: corepack enable pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
+      - name: Restore Turbo cache
+        uses: actions/cache/restore@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run ${{ matrix.task }}
+        run: pnpm turbo run ${{ matrix.task }} --affected

.gitignore

@@ -105,10 +105,8 @@ CLAUDE.md
 
 build/
 .react-router/
-AGENTS.md
 
 build/
 .react-router/
-AGENTS.md
 temp/
 scripts/

AGENTS.md

@@ -0,0 +1,24 @@
+# Agent Development Guide
+
+## Commands
+
+- `pnpm dev` - Start all dev servers (web:3000, admin:3001)
+- `pnpm build` - Build all packages and apps
+- `pnpm check` - Run all checks (format, lint, types)
+- `pnpm check:lint` - ESLint across all packages
+- `pnpm check:types` - TypeScript type checking
+- `pnpm fix` - Auto-fix format and lint issues
+- `pnpm turbo run <command> --filter=<package>` - Target specific package/app
+- `pnpm --filter=@plane/ui storybook` - Start Storybook on port 6006
+
+## Code Style
+
+- **Imports**: Use `workspace:*` for internal packages, `catalog:` for external deps
+- **TypeScript**: Strict mode enabled, all files must be typed
+- **Formatting**: Prettier with Tailwind plugin, run `pnpm fix:format`
+- **Linting**: ESLint with shared config, max warnings vary by package
+- **Naming**: camelCase for variables/functions, PascalCase for components/types
+- **Error Handling**: Use try-catch with proper error types, log errors appropriately
+- **State Management**: MobX stores in `packages/shared-state`, reactive patterns
+- **Testing**: All features require unit tests, use existing test framework per package
+- **Components**: Build in `@plane/ui` with Storybook for isolated development

apps/admin/app/(all)/(dashboard)/ai/form.tsx

@@ -42,7 +42,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           <a
             href="https://platform.openai.com/docs/models/overview"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -63,7 +63,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           <a
             href="https://platform.openai.com/api-keys"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -94,8 +94,8 @@ export function InstanceAIForm(props: IInstanceAIForm) {
     <div className="space-y-8">
       <div className="space-y-3">
         <div>
-          <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
-          <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
+          <div className="pb-1 text-18 font-medium text-primary">OpenAI</div>
+          <div className="text-13 font-regular text-tertiary">If you use ChatGPT, this is for you.</div>
         </div>
         <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
           {aiFormFields.map((field) => (
@@ -114,12 +114,12 @@ export function InstanceAIForm(props: IInstanceAIForm) {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+      <div className="flex flex-col gap-2 items-start">
+        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
 
-        <div className="relative inline-flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
+        <div className="relative inline-flex items-center gap-2 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-4 py-2 text-11 text-accent-secondary">
           <Lightbulb height="14" width="14" />
           <div>
             If you have a preferred AI models vendor, please get in{" "}

apps/admin/app/(all)/(dashboard)/ai/page.tsx

@@ -16,9 +16,9 @@ const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentP
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
-          <div className="text-sm font-normal text-custom-text-300">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-18 font-medium text-primary">AI features for all your workspaces</div>
+          <div className="text-13 font-regular text-tertiary">
             Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
           </div>
         </div>

apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx

@@ -4,10 +4,9 @@ import Link from "next/link";
 import { useForm } from "react-hook-form";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
+import { Button, getButtonStyling } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IFormattedInstanceConfiguration, TInstanceGiteaAuthenticationConfigurationKeys } from "@plane/types";
-import { Button, getButtonStyling } from "@plane/ui";
-import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
@@ -69,7 +68,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href="https://gitea.com/user/settings/applications"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Gitea OAuth application settings.
@@ -91,7 +90,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href="https://gitea.com/user/settings/applications"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Gitea OAuth application settings.
@@ -117,7 +116,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             tabIndex={-1}
             href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -163,7 +162,7 @@ export function InstanceGiteaConfigForm(props: Props) {
       <div className="flex flex-col gap-8">
         <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
           <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">Gitea-provided details for Plane</div>
+            <div className="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
             {GITEA_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -179,22 +178,24 @@ export function InstanceGiteaConfigForm(props: Props) {
             ))}
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={handleSubmit(onSubmit)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                >
                   {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
-                  onClick={handleGoBack}
-                >
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>
             </div>
           </div>
           <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for Gitea</div>
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-1/60 rounded-lg">
+              <div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
               {GITEA_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}

apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx

@@ -58,7 +58,7 @@ const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthentic
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Gitea"
             description="Allow members to login or sign up to plane with their Gitea accounts."

apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx

@@ -60,7 +60,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitHub OAuth application settings.
@@ -82,7 +82,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitHub OAuth application settings.
@@ -116,7 +116,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -139,7 +139,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -185,7 +185,7 @@ export function InstanceGithubConfigForm(props: Props) {
       <div className="flex flex-col gap-8">
         <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
           <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">GitHub-provided details for Plane</div>
+            <div className="pt-2.5 text-18 font-medium">GitHub-provided details for Plane</div>
             {GITHUB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -201,25 +201,27 @@ export function InstanceGithubConfigForm(props: Props) {
             ))}
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={handleSubmit(onSubmit)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                >
                   {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
-                  onClick={handleGoBack}
-                >
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>
             </div>
           </div>
           <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
-            <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
+            <div className="pt-2 text-18 font-medium">Plane-provided details for GitHub</div>
 
             <div className="flex flex-col gap-y-4">
               {/* common service details */}
-              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+              <div className="flex flex-col gap-y-4 px-6 py-4 bg-layer-1 rounded-lg">
                 {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
                   <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                 ))}
@@ -227,11 +229,11 @@ export function InstanceGithubConfigForm(props: Props) {
 
               {/* web service details */}
               <div className="flex flex-col rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
+                <div className="px-6 py-3 bg-layer-1/60 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
                   <Monitor className="w-3 h-3" />
                   Web
                 </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
                   {GITHUB_SERVICE_DETAILS.map((field) => (
                     <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                   ))}

apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx

@@ -67,7 +67,7 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="GitHub"
             description="Allow members to login or sign up to plane with their GitHub accounts."

apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx

@@ -71,7 +71,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application settings
@@ -94,7 +94,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application settings
@@ -120,7 +120,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application
@@ -167,7 +167,7 @@ export function InstanceGitlabConfigForm(props: Props) {
       <div className="flex flex-col gap-8">
         <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
           <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">GitLab-provided details for Plane</div>
+            <div className="pt-2.5 text-18 font-medium">GitLab-provided details for Plane</div>
             {GITLAB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -183,22 +183,24 @@ export function InstanceGitlabConfigForm(props: Props) {
             ))}
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={handleSubmit(onSubmit)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                >
                   {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
-                  onClick={handleGoBack}
-                >
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>
             </div>
           </div>
           <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
-              <div className="pt-2 text-xl font-medium">Plane-provided details for GitLab</div>
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-1/60 rounded-lg">
+              <div className="pt-2 text-18 font-medium">Plane-provided details for GitLab</div>
               {GITLAB_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}

apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx

@@ -58,7 +58,7 @@ const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthent
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="GitLab"
             description="Allow members to login or sign up to plane with their GitLab accounts."

apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx

@@ -58,7 +58,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             tabIndex={-1}
             href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -80,7 +80,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             tabIndex={-1}
             href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -105,7 +105,7 @@ export function InstanceGoogleConfigForm(props: Props) {
           <a
             href="https://console.cloud.google.com/apis/credentials/oauthclient"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -127,7 +127,7 @@ export function InstanceGoogleConfigForm(props: Props) {
           <a
             href="https://console.cloud.google.com/apis/credentials/oauthclient"
             target="_blank"
-            className="text-custom-primary-100 hover:underline"
+            className="text-accent-primary hover:underline"
             rel="noreferrer"
           >
             here.
@@ -172,7 +172,7 @@ export function InstanceGoogleConfigForm(props: Props) {
       <div className="flex flex-col gap-8">
         <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
           <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
-            <div className="pt-2.5 text-xl font-medium">Google-provided details for Plane</div>
+            <div className="pt-2.5 text-18 font-medium">Google-provided details for Plane</div>
             {GOOGLE_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -188,25 +188,27 @@ export function InstanceGoogleConfigForm(props: Props) {
             ))}
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={handleSubmit(onSubmit)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                >
                   {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link
-                  href="/authentication"
-                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
-                  onClick={handleGoBack}
-                >
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>
             </div>
           </div>
           <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
-            <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
+            <div className="pt-2 text-18 font-medium">Plane-provided details for Google</div>
 
             <div className="flex flex-col gap-y-4">
               {/* common service details */}
-              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+              <div className="flex flex-col gap-y-4 px-6 py-4 bg-layer-1 rounded-lg">
                 {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
                   <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                 ))}
@@ -214,11 +216,11 @@ export function InstanceGoogleConfigForm(props: Props) {
 
               {/* web service details */}
               <div className="flex flex-col rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
+                <div className="px-6 py-3 bg-layer-1/60 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
                   <Monitor className="w-3 h-3" />
                   Web
                 </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
                   {GOOGLE_SERVICE_DETAILS.map((field) => (
                     <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                   ))}

apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx

@@ -58,7 +58,7 @@ const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthent
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Google"
             description="Allow members to login or sign up to plane with their Google

apps/admin/app/(all)/(dashboard)/authentication/page.tsx

@@ -57,20 +57,20 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">Manage authentication modes for your instance</div>
-          <div className="text-sm font-normal text-custom-text-300">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-18 font-medium text-primary">Manage authentication modes for your instance</div>
+          <div className="text-13 font-regular text-tertiary">
             Configure authentication modes for your team and restrict sign-ups to be invite only.
           </div>
         </div>
         <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <div className="space-y-3">
-              <div className={cn("w-full flex items-center gap-14 rounded")}>
+              <div className={cn("w-full flex items-center gap-14 rounded-sm")}>
                 <div className="flex grow items-center gap-4">
                   <div className="grow">
-                    <div className="text-lg font-medium pb-1">Allow anyone to sign up even without an invite</div>
-                    <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                    <div className="text-16 font-medium pb-1">Allow anyone to sign up even without an invite</div>
+                    <div className={cn("font-regular leading-5 text-tertiary text-11")}>
                       Toggling this off will only let users sign up when they are invited.
                     </div>
                   </div>
@@ -92,7 +92,7 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
                   </div>
                 </div>
               </div>
-              <div className="text-lg font-medium pt-6">Available authentication modes</div>
+              <div className="text-16 font-medium pt-6">Available authentication modes</div>
               <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
             </div>
           ) : (

apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx

@@ -157,12 +157,12 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             />
           ))}
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Email security</h4>
+            <h4 className="text-13 text-tertiary">Email security</h4>
             <CustomSelect
               value={emailSecurityKey}
               label={EMAIL_SECURITY_OPTIONS[emailSecurityKey]}
               onChange={handleEmailSecurityChange}
-              buttonClassName="rounded-md border-custom-border-200"
+              buttonClassName="rounded-md border-subtle"
               input
             >
               {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
@@ -173,12 +173,12 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             </CustomSelect>
           </div>
         </div>
-        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
+        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-subtle">
           <div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
             <div className="mr-8 flex items-center gap-10 pt-4">
               <div className="grow">
-                <div className="text-sm font-medium text-custom-text-100">Authentication</div>
-                <div className="text-xs font-normal text-custom-text-300">
+                <div className="text-13 font-medium text-primary">Authentication</div>
+                <div className="text-11 font-regular text-tertiary">
                   This is optional, but we recommend setting up a username and a password for your SMTP server.
                 </div>
               </div>
@@ -204,6 +204,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
       <div className="flex max-w-4xl items-center py-1 gap-4">
         <Button
           variant="primary"
+          size="lg"
           onClick={handleSubmit(onSubmit)}
           loading={isSubmitting}
           disabled={!isValid || !isDirty}
@@ -211,7 +212,8 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
         <Button
-          variant="outline-primary"
+          variant="secondary"
+          size="lg"
           onClick={() => setIsSendTestEmailModalOpen(true)}
           loading={isSubmitting}
           disabled={!isValid}

apps/admin/app/(all)/(dashboard)/email/page.tsx

@@ -51,14 +51,14 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="flex items-center justify-between gap-4 border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="py-4 space-y-1 flex-shrink-0">
-            <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
-            <div className="text-sm font-normal text-custom-text-300">
+            <div className="text-18 font-medium text-primary">Secure emails from your own instance</div>
+            <div className="text-13 font-regular text-tertiary">
               Plane can send useful emails to you and your users from your own instance without talking to the Internet.
-              <div className="text-sm font-normal text-custom-text-300">
+              <div className="text-13 font-regular text-tertiary">
                 Set it up below and please test your settings before you save them.&nbsp;
-                <span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
+                <span className="text-danger">Misconfigs can lead to email bounces and errors.</span>
               </div>
             </div>
           </div>

apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx

@@ -72,7 +72,7 @@ export function SendTestEmailModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="my-10 flex justify-center p-4 text-center sm:p-0 md:my-20">
@@ -85,8 +85,8 @@ export function SendTestEmailModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl">
-                <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl">
+                <h3 className="text-16 font-medium leading-6 text-primary">
                   {sendEmailStep === ESendEmailSteps.SEND_EMAIL
                     ? "Send test email"
                     : sendEmailStep === ESendEmailSteps.SUCCESS
@@ -101,12 +101,12 @@ export function SendTestEmailModal(props: Props) {
                       value={receiverEmail}
                       onChange={(e) => setReceiverEmail(e.target.value)}
                       placeholder="Receiver email"
-                      className="w-full resize-none text-lg"
+                      className="w-full resize-none text-16"
                       tabIndex={1}
                     />
                   )}
                   {sendEmailStep === ESendEmailSteps.SUCCESS && (
-                    <div className="flex flex-col gap-y-4 text-sm">
+                    <div className="flex flex-col gap-y-4 text-13">
                       <p>
                         We have sent the test email to {receiverEmail}. Please check your spam folder if you cannot find
                         it.
@@ -114,13 +114,13 @@ export function SendTestEmailModal(props: Props) {
                       <p>If you still cannot find it, recheck your SMTP configuration and trigger a new test email.</p>
                     </div>
                   )}
-                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-sm">{error}</div>}
+                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
                   <div className="flex items-center gap-2 justify-end mt-5">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={2}>
+                    <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
                       {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
                     </Button>
                     {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
-                      <Button variant="primary" size="sm" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
+                      <Button variant="primary" size="lg" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
                         {isLoading ? "Sending email..." : "Send email"}
                       </Button>
                     )}

apps/admin/app/(all)/(dashboard)/general/form.tsx

@@ -63,8 +63,8 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
 
   return (
     <div className="space-y-8">
-      <div className="space-y-3">
-        <div className="text-lg font-medium">Instance details</div>
+      <div className="space-y-4">
+        <div className="text-16 font-medium text-primary">Instance details</div>
         <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
           <ControllerInput
             key="instance_name"
@@ -78,54 +78,52 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
           />
 
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Email</h4>
+            <h4 className="text-13 text-tertiary">Email</h4>
             <Input
               id="email"
               name="email"
               type="email"
               value={instanceAdmins[0]?.user_detail?.email ?? ""}
               placeholder="Admin email"
-              className="w-full cursor-not-allowed !text-custom-text-400"
+              className="w-full cursor-not-allowed !text-placeholder"
               autoComplete="on"
               disabled
             />
           </div>
 
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm text-custom-text-300">Instance ID</h4>
+            <h4 className="text-13 text-tertiary">Instance ID</h4>
             <Input
               id="instance_id"
               name="instance_id"
               type="text"
               value={instance.instance_id}
-              className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
+              className="w-full cursor-not-allowed rounded-md font-medium !text-placeholder"
               disabled
             />
           </div>
         </div>
       </div>
 
-      <div className="space-y-3">
-        <div className="text-lg font-medium">Chat + telemetry</div>
+      <div className="space-y-4">
+        <div className="text-16 font-medium text-primary">Chat + telemetry</div>
         <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
-        <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+        <div className="flex items-center gap-14 px-4 py-3 border border-subtle rounded-sm">
           <div className="grow flex items-center gap-4">
             <div className="shrink-0">
-              <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
-                <Telescope className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+              <div className="flex items-center justify-center w-10 h-10 bg-layer-1 rounded-full">
+                <Telescope className="w-6 h-6 text-tertiary/80 p-0.5" />
               </div>
             </div>
             <div className="grow">
-              <div className="text-sm font-medium text-custom-text-100 leading-5">
-                Let Plane collect anonymous usage data
-              </div>
-              <div className="text-xs font-normal text-custom-text-300 leading-5">
+              <div className="text-13 font-medium text-primary leading-5">Let Plane collect anonymous usage data</div>
+              <div className="text-11 font-regular text-tertiary leading-5">
                 No PII is collected.This anonymized data is used to understand how you use Plane and build new features
                 in line with{" "}
                 <a
                   href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
-                  className="text-custom-primary-100 hover:underline"
+                  className="text-accent-primary hover:underline"
                   rel="noreferrer"
                 >
                   our Telemetry Policy.
@@ -146,7 +144,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
       </div>
 
       <div>
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
       </div>

apps/admin/app/(all)/(dashboard)/general/intercom.tsx

@@ -49,17 +49,17 @@ export const IntercomConfig = observer(function IntercomConfig(props: TIntercomC
 
   return (
     <>
-      <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+      <div className="flex items-center gap-14 px-4 py-3 border border-subtle rounded-sm">
         <div className="grow flex items-center gap-4">
           <div className="shrink-0">
-            <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
-              <MessageSquare className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+            <div className="flex items-center justify-center w-10 h-10 bg-layer-1 rounded-full">
+              <MessageSquare className="w-6 h-6 text-tertiary/80 p-0.5" />
             </div>
           </div>
 
           <div className="grow">
-            <div className="text-sm font-medium text-custom-text-100 leading-5">Chat with us</div>
-            <div className="text-xs font-normal text-custom-text-300 leading-5">
+            <div className="text-13 font-medium text-primary leading-5">Chat with us</div>
+            <div className="text-11 font-regular text-tertiary leading-5">
               Let your users chat with us via Intercom or another service. Toggling Telemetry off turns this off
               automatically.
             </div>

apps/admin/app/(all)/(dashboard)/general/page.tsx

@@ -11,9 +11,9 @@ function GeneralPage() {
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">General settings</div>
-          <div className="text-sm font-normal text-custom-text-300">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-18 font-medium text-primary">General settings</div>
+          <div className="text-13 font-regular text-tertiary">
             Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
             instance.
           </div>

apps/admin/app/(all)/(dashboard)/header.tsx

@@ -12,10 +12,10 @@ export const HamburgerToggle = observer(function HamburgerToggle() {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   return (
     <div
-      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      className="w-7 h-7 rounded-sm flex justify-center items-center bg-layer-1 transition-all hover:bg-layer-1-hover cursor-pointer group md:hidden"
       onClick={() => toggleSidebar(!isSidebarCollapsed)}
     >
-      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
+      <Menu size={14} className="text-secondary group-hover:text-primary transition-all" />
     </div>
   );
 });
@@ -71,7 +71,7 @@ export const AdminHeader = observer(function AdminHeader() {
   const breadcrumbItems = generateBreadcrumbItems(pathName);
 
   return (
-    <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-subtle bg-surface-1 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <HamburgerToggle />
         {breadcrumbItems.length >= 0 && (
@@ -82,7 +82,7 @@ export const AdminHeader = observer(function AdminHeader() {
                   <BreadcrumbLink
                     href="/general/"
                     label="Settings"
-                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                    icon={<Settings className="h-4 w-4 text-tertiary" />}
                   />
                 }
               />

apps/admin/app/(all)/(dashboard)/image/form.tsx

@@ -56,7 +56,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
               <a
                 href="https://unsplash.com/documentation#creating-a-developer-account"
                 target="_blank"
-                className="text-custom-primary-100 hover:underline"
+                className="text-accent-primary hover:underline"
                 rel="noreferrer"
               >
                 Learn more.
@@ -70,7 +70,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
       </div>
 
       <div>
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
       </div>

apps/admin/app/(all)/(dashboard)/image/page.tsx

@@ -16,9 +16,9 @@ const InstanceImagePage = observer(function InstanceImagePage(_props: Route.Comp
   return (
     <>
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>
-          <div className="text-sm font-normal text-custom-text-300">
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-18 font-medium text-primary">Third-party image libraries</div>
+          <div className="text-13 font-regular text-tertiary">
             Let your users search and choose images from third-party libraries
           </div>
         </div>

apps/admin/app/(all)/(dashboard)/layout.tsx

@@ -34,9 +34,9 @@ function AdminLayout(_props: Route.ComponentProps) {
     return (
       <div className="relative flex h-screen w-screen overflow-hidden">
         <AdminSidebar />
-        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
           <AdminHeader />
-          <div className="h-full w-full overflow-hidden">
+          <div className="h-full w-full overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
             <Outlet />
           </div>
         </main>

apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -33,20 +33,20 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   const getSidebarMenuItems = () => (
     <Menu.Items
       className={cn(
-        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
+        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 shadow-lg outline-none",
         {
           "left-4": isSidebarCollapsed,
         }
       )}
     >
       <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
+        <span className="px-2 text-secondary truncate">{currentUser?.email}</span>
       </div>
       <div className="py-2">
         <Menu.Item
           as="button"
           type="button"
-          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+          className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
           onClick={handleThemeSwitch}
         >
           <Palette className="h-4 w-4 stroke-[1.5]" />
@@ -59,7 +59,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
           <Menu.Item
             as="button"
             type="submit"
-            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+            className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
           >
             <LogOut className="h-4 w-4 stroke-[1.5]" />
             Sign out
@@ -75,10 +75,10 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   }, [csrfToken]);
 
   return (
-    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
+    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-subtle px-4 py-3.5">
       <div className="h-full w-full truncate">
         <div
-          className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
+          className={`flex flex-grow items-center gap-x-2 truncate rounded-sm py-1 ${
             isSidebarCollapsed ? "justify-center" : ""
           }`}
         >
@@ -88,8 +88,8 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
                 "cursor-default": !isSidebarCollapsed,
               })}
             >
-              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
-                <UserCog2 className="h-5 w-5 text-custom-text-200" />
+              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
+                <UserCog2 className="h-5 w-5 text-secondary" />
               </div>
             </Menu.Button>
             {isSidebarCollapsed && (
@@ -109,7 +109,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
           {!isSidebarCollapsed && (
             <div className="flex w-full gap-2">
-              <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
+              <h4 className="grow truncate text-14 font-medium text-secondary">Instance admin</h4>
             </div>
           )}
         </div>
@@ -123,7 +123,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
               src={getFileURL(currentUser.avatar_url)}
               size={24}
               shape="square"
-              className="!text-base"
+              className="!text-14"
             />
           </Menu.Button>
 

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -45,7 +45,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
   return (
     <div
       className={cn(
-        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
+        "flex w-full items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4 h-14 flex-shrink-0",
         {
           "flex-col h-auto py-1.5": isSidebarCollapsed,
         }
@@ -55,7 +55,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
           <a
             href={redirectionLink}
-            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
+            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded-sm border border-accent-strong/20 bg-accent-primary/10 text-11 text-accent-secondary whitespace-nowrap`}
           >
             <ExternalLink size={14} />
             {!isSidebarCollapsed && "Redirect to Plane"}
@@ -64,7 +64,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
-            className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+            className={`ml-auto grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
@@ -75,7 +75,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+            className={`grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => toggleSidebar(!isSidebarCollapsed)}
@@ -98,7 +98,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
           <div
             className={`absolute bottom-2 min-w-[10rem] z-[15] ${
               isSidebarCollapsed ? "left-full" : "-left-[75px]"
-            } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+            } divide-y divide-subtle-1 whitespace-nowrap rounded-sm bg-surface-1 p-1 shadow-custom-shadow-xs`}
             ref={helpOptionsRef}
           >
             <div className="space-y-1 pb-2">
@@ -106,11 +106,11 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
                 if (href)
                   return (
                     <Link href={href} key={name} target="_blank">
-                      <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
+                      <div className="flex items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1-hover">
                         <div className="grid flex-shrink-0 place-items-center">
-                          <Icon className="h-3.5 w-3.5 text-custom-text-200" width={14} height={14} />
+                          <Icon className="h-3.5 w-3.5 text-secondary" width={14} height={14} />
                         </div>
-                        <span className="text-xs">{name}</span>
+                        <span className="text-11">{name}</span>
                       </div>
                     </Link>
                   );
@@ -119,17 +119,17 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
                     <button
                       key={name}
                       type="button"
-                      className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                      className="flex w-full items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1"
                     >
                       <div className="grid flex-shrink-0 place-items-center">
-                        <Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                        <Icon className="h-3.5 w-3.5 text-secondary" />
                       </div>
-                      <span className="text-xs">{name}</span>
+                      <span className="text-11">{name}</span>
                     </button>
                   );
               })}
             </div>
-            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
+            <div className="px-2 pb-1 pt-2 text-10">Version: v{packageJson.version}</div>
           </div>
         </Transition>
       </div>

apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx

@@ -72,8 +72,8 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
                   className={cn(
                     `group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
                     isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80",
+                      ? "bg-accent-primary/10 text-accent-primary"
+                      : "text-secondary hover:bg-layer-1-hover focus:bg-layer-1-hover",
                     isSidebarCollapsed ? "justify-center" : "w-[260px]"
                   )}
                 >
@@ -82,16 +82,16 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
                     <div className="w-full ">
                       <div
                         className={cn(
-                          `text-sm font-medium transition-colors`,
-                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-200"
+                          `text-13 font-medium transition-colors`,
+                          isActive ? "text-accent-primary" : "text-secondary"
                         )}
                       >
                         {item.name}
                       </div>
                       <div
                         className={cn(
-                          `text-[10px] transition-colors`,
-                          isActive ? "text-custom-primary-90" : "text-custom-sidebar-text-400"
+                          `text-10 transition-colors`,
+                          isActive ? "text-accent-secondary" : "text-placeholder"
                         )}
                       >
                         {item.description}

apps/admin/app/(all)/(dashboard)/sidebar.tsx

@@ -38,7 +38,7 @@ export const AdminSidebar = observer(function AdminSidebar() {
 
   return (
     <div
-      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
+      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300
         fixed md:relative
         ${isSidebarCollapsed ? "-ml-[290px]" : ""}
         sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx

@@ -84,7 +84,7 @@ export function WorkspaceCreateForm() {
     <div className="space-y-8">
       <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-x-10 gap-y-6 lg:grid-cols-2">
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm text-custom-text-300">Name your workspace</h4>
+          <h4 className="text-13 text-tertiary">Name your workspace</h4>
           <div className="flex flex-col gap-1">
             <Controller
               control={control}
@@ -118,13 +118,13 @@ export function WorkspaceCreateForm() {
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-red-500">{errors?.name?.message}</span>
           </div>
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm text-custom-text-300">Set your workspace&apos;s URL</h4>
-          <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
-            <span className="whitespace-nowrap text-sm text-custom-text-200">{workspaceBaseURL}</span>
+          <h4 className="text-13 text-tertiary">Set your workspace&apos;s URL</h4>
+          <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-subtle px-3">
+            <span className="whitespace-nowrap text-13 text-secondary">{workspaceBaseURL}</span>
             <Controller
               control={control}
               name="slug"
@@ -148,19 +148,19 @@ export function WorkspaceCreateForm() {
                   ref={ref}
                   hasError={Boolean(errors.slug)}
                   placeholder="workspace-name"
-                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-sm"
+                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-13"
                 />
               )}
             />
           </div>
-          {slugError && <p className="text-sm text-red-500">This URL is taken. Try something else.</p>}
+          {slugError && <p className="text-13 text-red-500">This URL is taken. Try something else.</p>}
           {invalidSlug && (
-            <p className="text-sm text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+            <p className="text-13 text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
           )}
-          {errors.slug && <span className="text-xs text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>}
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm text-custom-text-300">How many people will use this workspace?</h4>
+          <h4 className="text-13 text-tertiary">How many people will use this workspace?</h4>
           <div className="w-full">
             <Controller
               name="organization_size"
@@ -172,10 +172,10 @@ export function WorkspaceCreateForm() {
                   onChange={onChange}
                   label={
                     ORGANIZATION_SIZE.find((c) => c === value) ?? (
-                      <span className="text-custom-text-400">Select a range</span>
+                      <span className="text-placeholder">Select a range</span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                  buttonClassName="!border-[0.5px] !border-subtle !shadow-none"
                   input
                 >
                   {ORGANIZATION_SIZE.map((item) => (
@@ -187,7 +187,7 @@ export function WorkspaceCreateForm() {
               )}
             />
             {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
@@ -195,14 +195,14 @@ export function WorkspaceCreateForm() {
       <div className="flex max-w-4xl items-center py-1 gap-4">
         <Button
           variant="primary"
-          size="sm"
+          size="lg"
           onClick={handleSubmit(handleCreateWorkspace)}
           disabled={!isValid}
           loading={isSubmitting}
         >
           {isSubmitting ? "Creating workspace" : "Create workspace"}
         </Button>
-        <Link className={getButtonStyling("neutral-primary", "sm")} href="/workspace">
+        <Link className={getButtonStyling("secondary", "lg")} href="/workspace">
           Go back
         </Link>
       </div>

apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx

@@ -6,9 +6,9 @@ import { WorkspaceCreateForm } from "./form";
 const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
   return (
     <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-      <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
-        <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div>
-        <div className="text-sm font-normal text-custom-text-300">
+      <div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="text-18 font-medium text-primary">Create a new workspace on this instance.</div>
+        <div className="text-13 font-regular text-tertiary">
           You will need to invite users from Workspace Settings after you create this workspace.
         </div>
       </div>

apps/admin/app/(all)/(dashboard)/workspace/page.tsx

@@ -69,22 +69,20 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
 
   return (
     <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
-      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="flex items-center justify-between gap-4 border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
         <div className="flex flex-col gap-1">
-          <div className="text-xl font-medium text-custom-text-100">Workspaces on this instance</div>
-          <div className="text-sm font-normal text-custom-text-300">
-            See all workspaces and control who can create them.
-          </div>
+          <div className="text-18 font-medium text-primary">Workspaces on this instance</div>
+          <div className="text-13 font-regular text-tertiary">See all workspaces and control who can create them.</div>
         </div>
       </div>
       <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
         <div className="space-y-3">
           {formattedConfig ? (
-            <div className={cn("w-full flex items-center gap-14 rounded")}>
+            <div className={cn("w-full flex items-center gap-14 rounded-sm")}>
               <div className="flex grow items-center gap-4">
                 <div className="grow">
-                  <div className="text-lg font-medium pb-1">Prevent anyone else from creating a workspace.</div>
-                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                  <div className="text-16 font-medium pb-1">Prevent anyone else from creating a workspace.</div>
+                  <div className={cn("font-regular leading-5 text-tertiary text-11")}>
                     Toggling this on will let only you create workspaces. You will have to invite users to new
                     workspaces.
                   </div>
@@ -116,20 +114,19 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
             <>
               <div className="pt-6 flex items-center justify-between gap-2">
                 <div className="flex flex-col items-start gap-x-2">
-                  <div className="flex items-center gap-2 text-lg font-medium">
-                    All workspaces on this instance{" "}
-                    <span className="text-custom-text-300">• {workspaceIds.length}</span>
+                  <div className="flex items-center gap-2 text-16 font-medium">
+                    All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
                     {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
                       <LoaderIcon className="w-4 h-4 animate-spin" />
                     )}
                   </div>
-                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                  <div className={cn("font-regular leading-5 text-tertiary text-11")}>
                     You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
                     Member.
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Link href="/workspace/create" className={getButtonStyling("primary", "sm")}>
+                  <Link href="/workspace/create" className={getButtonStyling("primary", "lg")}>
                     Create workspace
                   </Link>
                 </div>
@@ -142,7 +139,8 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
               {hasNextPage && (
                 <div className="flex justify-center">
                   <Button
-                    variant="link-primary"
+                    variant="link"
+                    size="lg"
                     onClick={() => fetchNextWorkspaces()}
                     disabled={workspaceLoader === "pagination"}
                   >

apps/admin/app/(all)/(home)/auth-banner.tsx

@@ -14,13 +14,13 @@ export function AuthBanner(props: TAuthBanner) {
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
       <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-        <Info size={16} className="text-custom-primary-100" />
+        <Info size={16} className="text-accent-primary" />
       </div>
-      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
       <div
-        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary/80"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
         <CloseIcon className="w-4 h-4 flex-shrink-0" />

apps/admin/app/(all)/(home)/auth-header.tsx

@@ -5,7 +5,7 @@ export function AuthHeader() {
   return (
     <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
       <Link href="/">
-        <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+        <PlaneLockup height={20} width={95} className="text-primary" />
       </Link>
     </div>
   );

apps/admin/app/(all)/(home)/auth-helpers.tsx

@@ -117,14 +117,14 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
     name: "Unique codes",
     description:
       "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
-    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    icon: <Mails className="h-6 w-6 p-0.5 text-tertiary/80" />,
     config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {
     key: "passwords-login",
     name: "Passwords",
     description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
-    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-tertiary/80" />,
     config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {

apps/admin/app/(all)/(home)/layout.tsx

@@ -16,7 +16,7 @@ function RootLayout() {
   }, [replace, isUserLoggedIn]);
 
   return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8 bg-surface-1">
       <Outlet />
     </div>
   );

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -128,11 +128,11 @@ export function InstanceSignInForm() {
             <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+              <label className="text-13 text-tertiary font-medium" htmlFor="email">
                 Email <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                 id="email"
                 name="email"
                 type="email"
@@ -146,12 +146,12 @@ export function InstanceSignInForm() {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+              <label className="text-13 text-tertiary font-medium" htmlFor="password">
                 Password <span className="text-red-500">*</span>
               </label>
               <div className="relative">
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                   id="password"
                   name="password"
                   type={showPassword ? "text" : "password"}
@@ -164,7 +164,7 @@ export function InstanceSignInForm() {
                 {showPassword ? (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(false)}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -172,7 +172,7 @@ export function InstanceSignInForm() {
                 ) : (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(true)}
                   >
                     <Eye className="h-4 w-4" />
@@ -181,7 +181,7 @@ export function InstanceSignInForm() {
               </div>
             </div>
             <div className="py-2">
-              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+              <Button type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
                 {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
               </Button>
             </div>

apps/admin/app/components/404.tsx

@@ -7,22 +7,22 @@ import Image404 from "@/app/assets/images/404.svg?url";
 
 function PageNotFound() {
   return (
-    <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+    <div className={`h-screen w-full overflow-hidden bg-surface-1`}>
       <div className="grid h-full place-items-center p-4">
         <div className="space-y-8 text-center">
           <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
             <img src={Image404} alt="404 - Page not found" className="h-full w-full object-contain" />
           </div>
           <div className="space-y-2">
-            <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
-            <p className="text-sm text-custom-text-200">
+            <h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>
+            <p className="text-13 text-secondary">
               Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
               temporarily unavailable.
             </p>
           </div>
           <Link to="/general/">
             <span className="flex justify-center py-4">
-              <Button variant="neutral-primary" size="md">
+              <Button variant="secondary" size="lg">
                 Go to general settings
               </Button>
             </span>

apps/admin/app/root.tsx

@@ -56,7 +56,11 @@ export const meta: Route.MetaFunction = () => [
 ];
 
 export default function Root() {
-  return <Outlet />;
+  return (
+    <div className="bg-canvas min-h-screen">
+      <Outlet />
+    </div>
+  );
 }
 
 export function HydrateFallback() {

apps/admin/ce/components/authentication/authentication-modes.tsx

@@ -43,14 +43,14 @@ export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) =>
     name: "Unique codes",
     description:
       "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
-    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    icon: <Mails className="h-6 w-6 p-0.5 text-tertiary/80" />,
     config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {
     key: "passwords-login",
     name: "Passwords",
     description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
-    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-tertiary/80" />,
     config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
   },
   {
@@ -112,7 +112,7 @@ export const AuthenticationModes = observer(function AuthenticationModes(props:
   const { resolvedTheme } = useTheme();
 
   return (
-    <>
+    <div className="flex flex-col gap-3">
       {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
         <AuthenticationMethodCard
           key={method.key}
@@ -124,6 +124,6 @@ export const AuthenticationModes = observer(function AuthenticationModes(props:
           unavailable={method.unavailable}
         />
       ))}
-    </>
+    </div>
   );
 });

apps/admin/ce/components/common/upgrade-button.tsx

@@ -10,7 +10,7 @@ export function UpgradeButton() {
     <a
       href="https://plane.so/pricing?mode=self-hosted"
       target="_blank"
-      className={cn(getButtonStyling("primary", "sm"))}
+      className={cn(getButtonStyling("primary", "base"))}
       rel="noreferrer"
     >
       Upgrade

apps/admin/core/components/authentication/authentication-method-card.tsx

@@ -16,8 +16,8 @@ export function AuthenticationMethodCard(props: Props) {
 
   return (
     <div
-      className={cn("w-full flex items-center gap-14 rounded", {
-        "px-4 py-3 border border-custom-border-200": withBorder,
+      className={cn("w-full flex items-center gap-14 rounded-sm", {
+        "px-4 py-3 border border-subtle": withBorder,
       })}
     >
       <div
@@ -26,21 +26,21 @@ export function AuthenticationMethodCard(props: Props) {
         })}
       >
         <div className="shrink-0">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-custom-background-80">{icon}</div>
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-layer-1">{icon}</div>
         </div>
         <div className="grow">
           <div
-            className={cn("font-medium leading-5 text-custom-text-100", {
-              "text-sm": withBorder,
-              "text-xl": !withBorder,
+            className={cn("font-medium leading-5 text-primary", {
+              "text-13": withBorder,
+              "text-18": !withBorder,
             })}
           >
             {name}
           </div>
           <div
-            className={cn("font-normal leading-5 text-custom-text-300", {
-              "text-xs": withBorder,
-              "text-sm": !withBorder,
+            className={cn("font-regular leading-5 text-tertiary", {
+              "text-11": withBorder,
+              "text-13": !withBorder,
             })}
           >
             {description}

apps/admin/core/components/authentication/gitea-config.tsx

@@ -1,11 +1,11 @@
-import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
 // plane internal packages
+import { getButtonStyling } from "@plane/propel/button";
 import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+import { ToggleSwitch } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -28,7 +28,7 @@ export const GiteaConfiguration = observer(function GiteaConfiguration(props: Pr
     <>
       {GiteaConfigured ? (
         <div className="flex items-center gap-4">
-          <Link href="/authentication/gitea" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+          <Link href="/authentication/gitea" className={cn(getButtonStyling("link", "base"), "font-medium")}>
             Edit
           </Link>
           <ToggleSwitch
@@ -43,11 +43,8 @@ export const GiteaConfiguration = observer(function GiteaConfiguration(props: Pr
           />
         </div>
       ) : (
-        <Link
-          href="/authentication/gitea"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+        <Link href="/authentication/gitea" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary/80" />
           Configure
         </Link>
       )}

apps/admin/core/components/authentication/github-config.tsx

@@ -28,7 +28,7 @@ export const GithubConfiguration = observer(function GithubConfiguration(props:
     <>
       {isGithubConfigured ? (
         <div className="flex items-center gap-4">
-          <Link href="/authentication/github" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+          <Link href="/authentication/github" className={cn(getButtonStyling("link", "base"), "font-medium")}>
             Edit
           </Link>
           <ToggleSwitch
@@ -42,11 +42,8 @@ export const GithubConfiguration = observer(function GithubConfiguration(props:
           />
         </div>
       ) : (
-        <Link
-          href="/authentication/github"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+        <Link href="/authentication/github" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary/80" />
           Configure
         </Link>
       )}

apps/admin/core/components/authentication/gitlab-config.tsx

@@ -27,7 +27,7 @@ export const GitlabConfiguration = observer(function GitlabConfiguration(props:
     <>
       {isGitlabConfigured ? (
         <div className="flex items-center gap-4">
-          <Link href="/authentication/gitlab" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+          <Link href="/authentication/gitlab" className={cn(getButtonStyling("link", "base"), "font-medium")}>
             Edit
           </Link>
           <ToggleSwitch
@@ -41,11 +41,8 @@ export const GitlabConfiguration = observer(function GitlabConfiguration(props:
           />
         </div>
       ) : (
-        <Link
-          href="/authentication/gitlab"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+        <Link href="/authentication/gitlab" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary/80" />
           Configure
         </Link>
       )}

apps/admin/core/components/authentication/google-config.tsx

@@ -27,7 +27,7 @@ export const GoogleConfiguration = observer(function GoogleConfiguration(props:
     <>
       {isGoogleConfigured ? (
         <div className="flex items-center gap-4">
-          <Link href="/authentication/google" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+          <Link href="/authentication/google" className={cn(getButtonStyling("link", "base"), "font-medium")}>
             Edit
           </Link>
           <ToggleSwitch
@@ -41,11 +41,8 @@ export const GoogleConfiguration = observer(function GoogleConfiguration(props:
           />
         </div>
       ) : (
-        <Link
-          href="/authentication/google"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+        <Link href="/authentication/google" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary/80" />
           Configure
         </Link>
       )}

apps/admin/core/components/common/banner.tsx

@@ -23,7 +23,7 @@ export function Banner(props: TBanner) {
           )}
         </div>
         <div className="ml-1">
-          <p className={`text-sm font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
+          <p className={`text-13 font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
         </div>
       </div>
     </div>

apps/admin/core/components/common/breadcrumb-link.tsx

@@ -14,17 +14,12 @@ export function BreadcrumbLink(props: Props) {
       <li className="flex items-center space-x-2" tabIndex={-1}>
         <div className="flex flex-wrap items-center gap-2.5">
           {href ? (
-            <Link
-              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
-              href={href}
-            >
-              {icon && (
-                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-              )}
+            <Link className="flex items-center gap-1 text-13 font-medium text-tertiary hover:text-primary" href={href}>
+              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-16">{icon}</div>}
               <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
             </Link>
           ) : (
-            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+            <div className="flex cursor-default items-center gap-1 text-13 font-medium text-primary">
               {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
               <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
             </div>

apps/admin/core/components/common/code-block.tsx

@@ -10,9 +10,9 @@ export function CodeBlock({ children, className, darkerShade }: TProps) {
   return (
     <span
       className={cn(
-        "px-0.5 text-xs text-custom-text-300 bg-custom-background-90 font-semibold rounded-md border border-custom-border-100",
+        "px-0.5 text-11 text-tertiary bg-surface-2 font-semibold rounded-md border border-subtle",
         {
-          "text-custom-text-200 bg-custom-background-80 border-custom-border-200": darkerShade,
+          "text-secondary bg-layer-1 border-subtle": darkerShade,
         },
         className
       )}

apps/admin/core/components/common/confirm-discard-modal.tsx

@@ -26,7 +26,7 @@ export function ConfirmDiscardModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-10 overflow-y-auto">
           <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
@@ -39,15 +39,15 @@ export function ConfirmDiscardModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]">
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-300">
+                      <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-tertiary">
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-400">
+                        <p className="text-13 text-placeholder">
                           Changes you made will be lost if you go back. Do you wish to go back?
                         </p>
                       </div>
@@ -55,10 +55,10 @@ export function ConfirmDiscardModal(props: Props) {
                   </div>
                 </div>
                 <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <Button variant="secondary" size="lg" onClick={handleClose}>
                     Keep editing
                   </Button>
-                  <Link href={onDiscardHref} className={getButtonStyling("primary", "sm")}>
+                  <Link href={onDiscardHref} className={getButtonStyling("primary", "base")}>
                     Go back
                   </Link>
                 </div>

apps/admin/core/components/common/controller-input.tsx

@@ -35,7 +35,7 @@ export function ControllerInput(props: Props) {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">{label}</h4>
+      <h4 className="text-13 text-tertiary">{label}</h4>
       <div className="relative">
         <Controller
           control={control}
@@ -61,7 +61,7 @@ export function ControllerInput(props: Props) {
           (showPassword ? (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(false)}
             >
               <EyeOff className="h-4 w-4" />
@@ -69,14 +69,14 @@ export function ControllerInput(props: Props) {
           ) : (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(true)}
             >
               <Eye className="h-4 w-4" />
             </button>
           ))}
       </div>
-      {description && <p className="pt-0.5 text-xs text-custom-text-300">{description}</p>}
+      {description && <p className="pt-0.5 text-11 text-tertiary">{description}</p>}
     </div>
   );
 }

apps/admin/core/components/common/copy-field.tsx

@@ -22,9 +22,10 @@ export function CopyField(props: Props) {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-200">{label}</h4>
+      <h4 className="text-13 text-secondary">{label}</h4>
       <Button
-        variant="neutral-primary"
+        variant="secondary"
+        size="lg"
         className="flex items-center justify-between py-2"
         onClick={() => {
           navigator.clipboard.writeText(url);
@@ -35,10 +36,10 @@ export function CopyField(props: Props) {
           });
         }}
       >
-        <p className="text-sm font-medium">{url}</p>
+        <p className="text-13 font-medium">{url}</p>
         <Copy size={18} color="#B9B9B9" />
       </Button>
-      <div className="text-xs text-custom-text-300">{description}</div>
+      <div className="text-11 text-tertiary">{description}</div>
     </div>
   );
 }

apps/admin/core/components/common/empty-state.tsx

@@ -19,8 +19,8 @@ export function EmptyState({ title, description, image, primaryButton, secondary
     <div className={`flex h-full w-full items-center justify-center`}>
       <div className="flex w-full flex-col items-center text-center">
         {image && <img src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
-        <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
-        {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
+        <h6 className="mb-3 mt-6 text-18 font-semibold sm:mt-8">{title}</h6>
+        {description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
         <div className="flex items-center gap-4">
           {primaryButton && (
             <Button
@@ -28,6 +28,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
               prependIcon={primaryButton.icon}
               onClick={primaryButton.onClick}
               disabled={disabled}
+              size="lg"
             >
               {primaryButton.text}
             </Button>

apps/admin/core/components/instance/failure.tsx

@@ -22,13 +22,13 @@ export const InstanceFailureView = observer(function InstanceFailureView() {
         <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
           <div className="relative flex flex-col justify-center items-center space-y-4">
             <img src={instanceImage} alt="Instance failure illustration" />
-            <h3 className="font-medium text-2xl text-white text-center">Unable to fetch instance details.</h3>
-            <p className="font-medium text-base text-center">
+            <h3 className="font-medium text-20 text-on-color text-center">Unable to fetch instance details.</h3>
+            <p className="font-medium text-14 text-center">
               We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
             </p>
           </div>
           <div className="flex justify-center">
-            <Button size="md" onClick={handleRetry}>
+            <Button size="lg" onClick={handleRetry}>
               Retry
             </Button>
           </div>

apps/admin/core/components/instance/form-header.tsx

@@ -1,8 +1,8 @@
 export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
   return (
     <div className="flex flex-col gap-1">
-      <span className="text-2xl font-semibold text-custom-text-100 leading-7">{heading}</span>
-      <span className="text-lg font-semibold text-custom-text-400 leading-7">{subHeading}</span>
+      <span className="text-20 font-semibold text-primary leading-7">{heading}</span>
+      <span className="text-16 font-semibold text-placeholder leading-7">{subHeading}</span>
     </div>
   );
 }

apps/admin/core/components/instance/instance-not-ready.tsx

@@ -8,16 +8,14 @@ export function InstanceNotReady() {
     <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
       <div className="w-auto max-w-2xl relative space-y-8 py-10">
         <div className="relative flex flex-col justify-center items-center space-y-4">
-          <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
+          <h1 className="text-24 font-bold pb-3">Welcome aboard Plane!</h1>
           <img src={PlaneTakeOffImage} alt="Plane Logo" />
-          <p className="font-medium text-base text-custom-text-400">
-            Get started by setting up your instance and workspace
-          </p>
+          <p className="font-medium text-14 text-placeholder">Get started by setting up your instance and workspace</p>
         </div>
 
         <div>
           <Link href={"/setup/?auth_enabled=0"}>
-            <Button size="lg" className="w-full">
+            <Button size="xl" className="w-full">
               Get started
             </Button>
           </Link>

apps/admin/core/components/instance/setup-form.tsx

@@ -156,11 +156,11 @@ export function InstanceSetupForm() {
 
             <div className="flex flex-col sm:flex-row items-center gap-4">
               <div className="w-full space-y-1">
-                <label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
+                <label className="text-13 text-tertiary font-medium" htmlFor="first_name">
                   First name <span className="text-red-500">*</span>
                 </label>
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                   id="first_name"
                   name="first_name"
                   type="text"
@@ -173,11 +173,11 @@ export function InstanceSetupForm() {
                 />
               </div>
               <div className="w-full space-y-1">
-                <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
+                <label className="text-13 text-tertiary font-medium" htmlFor="last_name">
                   Last name <span className="text-red-500">*</span>
                 </label>
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                   id="last_name"
                   name="last_name"
                   type="text"
@@ -191,11 +191,11 @@ export function InstanceSetupForm() {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+              <label className="text-13 text-tertiary font-medium" htmlFor="email">
                 Email <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                 id="email"
                 name="email"
                 type="email"
@@ -207,16 +207,16 @@ export function InstanceSetupForm() {
                 autoComplete="on"
               />
               {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+                <p className="px-1 text-11 text-red-500">{errorData.message}</p>
               )}
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
+              <label className="text-13 text-tertiary font-medium" htmlFor="company_name">
                 Company name <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                 id="company_name"
                 name="company_name"
                 type="text"
@@ -228,12 +228,12 @@ export function InstanceSetupForm() {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+              <label className="text-13 text-tertiary font-medium" htmlFor="password">
                 Set a password <span className="text-red-500">*</span>
               </label>
               <div className="relative">
                 <Input
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
                   id="password"
                   name="password"
                   type={showPassword.password ? "text" : "password"}
@@ -250,7 +250,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -259,7 +259,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <Eye className="h-4 w-4" />
@@ -267,13 +267,13 @@ export function InstanceSetupForm() {
                 )}
               </div>
               {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+                <p className="px-1 text-11 text-red-500">{errorData.message}</p>
               )}
               <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+              <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
                 Confirm password <span className="text-red-500">*</span>
               </label>
               <div className="relative">
@@ -285,7 +285,7 @@ export function InstanceSetupForm() {
                   value={formData.confirm_password}
                   onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                   placeholder="Confirm password"
-                  className="w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                  className="w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
                   onFocus={() => setIsRetryPasswordInputFocused(true)}
                   onBlur={() => setIsRetryPasswordInputFocused(false)}
                 />
@@ -293,7 +293,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -302,7 +302,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <Eye className="h-4 w-4" />
@@ -311,7 +311,7 @@ export function InstanceSetupForm() {
               </div>
               {!!formData.confirm_password &&
                 formData.password !== formData.confirm_password &&
-                renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+                renderPasswordMatchError && <span className="text-13 text-red-500">Passwords don{"'"}t match</span>}
             </div>
 
             <div className="relative flex gap-2">
@@ -324,14 +324,14 @@ export function InstanceSetupForm() {
                   checked={formData.is_telemetry_enabled}
                 />
               </div>
-              <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+              <label className="text-13 text-tertiary font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
                 Allow Plane to anonymously collect usage events.{" "}
                 <a
                   tabIndex={-1}
                   href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-sm font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                  className="text-13 font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
                 >
                   See More
                 </a>
@@ -339,7 +339,7 @@ export function InstanceSetupForm() {
             </div>
 
             <div className="py-2">
-              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+              <Button type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
                 {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
               </Button>
             </div>

apps/admin/core/components/new-user-popup.tsx

@@ -18,19 +18,19 @@ export const NewUserPopup = observer(function NewUserPopup() {
 
   if (!isNewUserPopup) return <></>;
   return (
-    <div className="absolute bottom-8 right-8 p-6 w-96 border border-custom-border-100 shadow-md rounded-lg bg-custom-background-100">
+    <div className="absolute bottom-8 right-8 p-6 w-96 border border-subtle shadow-md rounded-lg bg-surface-1">
       <div className="flex gap-4">
         <div className="grow">
-          <div className="text-base font-semibold">Create workspace</div>
-          <div className="py-2 text-sm font-medium text-custom-text-300">
+          <div className="text-14 font-semibold">Create workspace</div>
+          <div className="py-2 text-13 font-medium text-tertiary">
             Instance setup done! Welcome to Plane instance portal. Start your journey with by creating your first
             workspace.
           </div>
           <div className="flex items-center gap-4 pt-2">
-            <Link href="/workspace/create" className={getButtonStyling("primary", "sm")}>
+            <Link href="/workspace/create" className={getButtonStyling("primary", "lg")}>
               Create workspace
             </Link>
-            <Button variant="neutral-primary" size="sm" onClick={toggleNewUserPopup}>
+            <Button variant="secondary" size="lg" onClick={toggleNewUserPopup}>
               Close
             </Button>
           </div>

apps/admin/core/components/workspace/list-item.tsx

@@ -23,19 +23,19 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
       key={workspaceId}
       href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
       target="_blank"
-      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-custom-border-200/70 hover:border-custom-border-200 hover:bg-custom-background-90 rounded-md"
+      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-subtle/70 hover:border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-md"
       rel="noreferrer"
     >
       <div className="flex items-start gap-4">
         <span
-          className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 mt-1 text-xs uppercase ${
-            !workspace?.logo_url && "rounded bg-custom-primary-500 text-white"
+          className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 mt-1 text-11 uppercase ${
+            !workspace?.logo_url && "rounded-sm bg-accent-primary text-on-color"
           }`}
         >
           {workspace?.logo_url && workspace.logo_url !== "" ? (
             <img
               src={getFileURL(workspace.logo_url)}
-              className="absolute left-0 top-0 h-full w-full rounded object-cover"
+              className="absolute left-0 top-0 h-full w-full rounded-sm object-cover"
               alt="Workspace Logo"
             />
           ) : (
@@ -44,30 +44,30 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
         </span>
         <div className="flex flex-col items-start gap-1">
           <div className="flex flex-wrap w-full items-center gap-2.5">
-            <h3 className={`text-base font-medium capitalize`}>{workspace.name}</h3>/
+            <h3 className={`text-14 font-medium capitalize`}>{workspace.name}</h3>/
             <Tooltip tooltipContent="The unique URL of your workspace">
-              <h4 className="text-sm text-custom-text-300">[{workspace.slug}]</h4>
+              <h4 className="text-13 text-tertiary">[{workspace.slug}]</h4>
             </Tooltip>
           </div>
           {workspace.owner.email && (
-            <div className="flex items-center gap-1 text-xs">
-              <h3 className="text-custom-text-200 font-medium">Owned by:</h3>
-              <h4 className="text-custom-text-300">{workspace.owner.email}</h4>
+            <div className="flex items-center gap-1 text-11">
+              <h3 className="text-secondary font-medium">Owned by:</h3>
+              <h4 className="text-tertiary">{workspace.owner.email}</h4>
             </div>
           )}
-          <div className="flex items-center gap-2.5 text-xs">
+          <div className="flex items-center gap-2.5 text-11">
             {workspace.total_projects !== null && (
               <span className="flex items-center gap-1">
-                <h3 className="text-custom-text-200 font-medium">Total projects:</h3>
-                <h4 className="text-custom-text-300">{workspace.total_projects}</h4>
+                <h3 className="text-secondary font-medium">Total projects:</h3>
+                <h4 className="text-tertiary">{workspace.total_projects}</h4>
               </span>
             )}
             {workspace.total_members !== null && (
               <>
                 •
                 <span className="flex items-center gap-1">
-                  <h3 className="text-custom-text-200 font-medium">Total members:</h3>
-                  <h4 className="text-custom-text-300">{workspace.total_members}</h4>
+                  <h3 className="text-secondary font-medium">Total members:</h3>
+                  <h4 className="text-tertiary">{workspace.total_members}</h4>
                 </span>
               </>
             )}
@@ -75,7 +75,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
         </div>
       </div>
       <div className="flex-shrink-0">
-        <ExternalLink size={14} className="text-custom-text-400 group-hover:text-custom-text-200" />
+        <ExternalLink size={14} className="text-placeholder group-hover:text-secondary" />
       </div>
     </a>
   );

apps/admin/package.json

@@ -11,11 +11,11 @@
     "preview": "react-router build && serve -s build/client -l 3001",
     "start": "serve -s build/client -l 3001",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist && rm -rf build",
-    "check:lint": "eslint . --max-warnings=485",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=485",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier --check .",
-    "fix:lint": "eslint . --fix --max-warnings=485",
-    "fix:format": "prettier --write ."
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=485",
+    "fix:format": "prettier . --cache --write"
   },
   "dependencies": {
     "@bprogress/core": "catalog:",
@@ -37,7 +37,7 @@
     "lucide-react": "catalog:",
     "mobx": "catalog:",
     "mobx-react": "catalog:",
-    "next-themes": "^0.2.1",
+    "next-themes": "0.4.6",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-hook-form": "7.51.5",

apps/admin/postcss.config.cjs

@@ -1 +0,0 @@
-module.exports = require("@plane/tailwind-config/postcss.config.js");

apps/admin/postcss.config.js

@@ -0,0 +1,3 @@
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;

apps/admin/styles/globals.css

@@ -1,373 +1,4 @@
-@import "@plane/propel/styles/fonts.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .text-1\.5xl {
-    font-size: 1.375rem;
-    line-height: 1.875rem;
-  }
-
-  .text-2\.5xl {
-    font-size: 1.75rem;
-    line-height: 2.25rem;
-  }
-}
-
-@layer base {
-  html {
-    font-family: "Inter", sans-serif;
-  }
-
-  :root {
-    color-scheme: light !important;
-
-    --color-primary-10: 229, 243, 250;
-    --color-primary-20: 216, 237, 248;
-    --color-primary-30: 199, 229, 244;
-    --color-primary-40: 169, 214, 239;
-    --color-primary-50: 144, 202, 234;
-    --color-primary-60: 109, 186, 227;
-    --color-primary-70: 75, 170, 221;
-    --color-primary-80: 41, 154, 214;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 0, 99, 153;
-    --color-primary-200: 0, 92, 143;
-    --color-primary-300: 0, 86, 133;
-    --color-primary-400: 0, 77, 117;
-    --color-primary-500: 0, 66, 102;
-    --color-primary-600: 0, 53, 82;
-    --color-primary-700: 0, 43, 66;
-    --color-primary-800: 0, 33, 51;
-    --color-primary-900: 0, 23, 36;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    --color-shadow-2xs:
-      0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
-    --color-shadow-xs:
-      0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
-    --color-shadow-sm:
-      0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12);
-    --color-shadow-rg:
-      0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
-      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
-    --color-shadow-md:
-      0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-lg:
-      0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-xl:
-      0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
-      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl:
-      0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
-      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-3xl:
-      0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
-      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
-    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
-
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
-
-    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
-    --color-sidebar-shadow-xs: var(--color-shadow-xs);
-    --color-sidebar-shadow-sm: var(--color-shadow-sm);
-    --color-sidebar-shadow-rg: var(--color-shadow-rg);
-    --color-sidebar-shadow-md: var(--color-shadow-md);
-    --color-sidebar-shadow-lg: var(--color-shadow-lg);
-    --color-sidebar-shadow-xl: var(--color-shadow-xl);
-    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
-    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
-    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
-
-    /* toast theme */
-    --color-toast-success-text: 178, 221, 181;
-    --color-toast-error-text: 206, 44, 49;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 141, 164, 239;
-    --color-toast-loading-text: 255, 255, 255;
-    --color-toast-secondary-text: 185, 187, 198;
-    --color-toast-tertiary-text: 139, 141, 152;
-
-    --color-toast-success-background: 46, 46, 46;
-    --color-toast-error-background: 46, 46, 46;
-    --color-toast-warning-background: 46, 46, 46;
-    --color-toast-info-background: 46, 46, 46;
-    --color-toast-loading-background: 46, 46, 46;
-
-    --color-toast-success-border: 42, 126, 59;
-    --color-toast-error-border: 100, 23, 35;
-    --color-toast-warning-border: 79, 52, 34;
-    --color-toast-info-border: 58, 91, 199;
-    --color-toast-loading-border: 96, 100, 108;
-  }
-
-  [data-theme="light"],
-  [data-theme="light-contrast"] {
-    color-scheme: light !important;
-
-    --color-background-100: 255, 255, 255; /* primary bg */
-    --color-background-90: 247, 247, 247; /* secondary bg */
-    --color-background-80: 232, 232, 232; /* tertiary bg */
-  }
-
-  [data-theme="light"] {
-    --color-text-100: 23, 23, 23; /* primary text */
-    --color-text-200: 58, 58, 58; /* secondary text */
-    --color-text-300: 82, 82, 82; /* tertiary text */
-    --color-text-400: 163, 163, 163; /* placeholder text */
-
-    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-
-    /* toast theme */
-    --color-toast-success-text: 62, 155, 79;
-    --color-toast-error-text: 220, 62, 66;
-    --color-toast-warning-text: 255, 186, 24;
-    --color-toast-info-text: 51, 88, 212;
-    --color-toast-loading-text: 28, 32, 36;
-    --color-toast-secondary-text: 128, 131, 141;
-    --color-toast-tertiary-text: 96, 100, 108;
-
-    --color-toast-success-background: 253, 253, 254;
-    --color-toast-error-background: 255, 252, 252;
-    --color-toast-warning-background: 254, 253, 251;
-    --color-toast-info-background: 253, 253, 254;
-    --color-toast-loading-background: 253, 253, 254;
-
-    --color-toast-success-border: 218, 241, 219;
-    --color-toast-error-border: 255, 219, 220;
-    --color-toast-warning-border: 255, 247, 194;
-    --color-toast-info-border: 210, 222, 255;
-    --color-toast-loading-border: 224, 225, 230;
-  }
-
-  [data-theme="light-contrast"] {
-    --color-text-100: 11, 11, 11; /* primary text */
-    --color-text-200: 38, 38, 38; /* secondary text */
-    --color-text-300: 58, 58, 58; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark"],
-  [data-theme="dark-contrast"] {
-    color-scheme: dark !important;
-
-    --color-primary-10: 8, 31, 43;
-    --color-primary-20: 10, 37, 51;
-    --color-primary-30: 13, 49, 69;
-    --color-primary-40: 16, 58, 81;
-    --color-primary-50: 18, 68, 94;
-    --color-primary-60: 23, 86, 120;
-    --color-primary-70: 28, 104, 146;
-    --color-primary-80: 31, 116, 163;
-    --color-primary-90: 34, 129, 180;
-    --color-primary-100: 40, 146, 204;
-    --color-primary-200: 41, 154, 214;
-    --color-primary-300: 75, 170, 221;
-    --color-primary-400: 109, 186, 227;
-    --color-primary-500: 144, 202, 234;
-    --color-primary-600: 169, 214, 239;
-    --color-primary-700: 199, 229, 244;
-    --color-primary-800: 216, 237, 248;
-    --color-primary-900: 229, 243, 250;
-
-    --color-background-100: 25, 25, 25; /* primary bg */
-    --color-background-90: 32, 32, 32; /* secondary bg */
-    --color-background-80: 44, 44, 44; /* tertiary bg */
-
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
-    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
-    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
-    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
-  }
-
-  [data-theme="dark"] {
-    --color-text-100: 229, 229, 229; /* primary text */
-    --color-text-200: 163, 163, 163; /* secondary text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
-    --color-text-400: 82, 82, 82; /* placeholder text */
-
-    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
-
-    --color-border-100: 34, 34, 34; /* subtle border= 1 */
-    --color-border-200: 38, 38, 38; /* subtle border- 2 */
-    --color-border-300: 46, 46, 46; /* strong border- 1 */
-    --color-border-400: 58, 58, 58; /* strong border- 2 */
-  }
-
-  [data-theme="dark-contrast"] {
-    --color-text-100: 250, 250, 250; /* primary text */
-    --color-text-200: 241, 241, 241; /* secondary text */
-    --color-text-300: 212, 212, 212; /* tertiary text */
-    --color-text-400: 115, 115, 115; /* placeholder text */
-
-    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
-
-    --color-border-100: 245, 245, 245; /* subtle border= 1 */
-    --color-border-200: 229, 229, 229; /* subtle border- 2 */
-    --color-border-300: 212, 212, 212; /* strong border- 1 */
-    --color-border-400: 185, 185, 185; /* strong border- 2 */
-  }
-
-  [data-theme="light"],
-  [data-theme="dark"],
-  [data-theme="light-contrast"],
-  [data-theme="dark-contrast"] {
-    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
-    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
-    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
-
-    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
-    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
-    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
-    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
-
-    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
-  }
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  font-variant-ligatures: none;
-  -webkit-font-variant-ligatures: none;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  color: rgba(var(--color-text-100));
-}
-
-/* scrollbar style */
-::-webkit-scrollbar {
-  display: none;
-}
-
-@-moz-document url-prefix() {
-  * {
-    scrollbar-width: none;
-  }
-  .vertical-scrollbar,
-  .horizontal-scrollbar {
-    scrollbar-width: initial;
-    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
-  }
-  .vertical-scrollbar:hover,
-  .horizontal-scrollbar:hover {
-    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
-  }
-  .vertical-scrollbar:active,
-  .horizontal-scrollbar:active {
-    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
-  }
-}
-
-.vertical-scrollbar {
-  overflow-y: auto;
-}
-.horizontal-scrollbar {
-  overflow-x: auto;
-}
-.vertical-scrollbar::-webkit-scrollbar,
-.horizontal-scrollbar::-webkit-scrollbar {
-  display: block;
-}
-.vertical-scrollbar::-webkit-scrollbar-track,
-.horizontal-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 9999px;
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb,
-.horizontal-scrollbar::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: rgba(96, 100, 108, 0.1);
-  border-radius: 9999px;
-}
-.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
-.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(96, 100, 108, 0.25);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(96, 100, 108, 0.5);
-}
-.vertical-scrollbar::-webkit-scrollbar-thumb:active,
-.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: rgba(96, 100, 108, 0.7);
-}
-.vertical-scrollbar::-webkit-scrollbar-corner,
-.horizontal-scrollbar::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
-  margin-top: 44px;
-}
-
-/* scrollbar xs size */
-.scrollbar-xs::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
-}
-.scrollbar-xs::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
+@import "@plane/tailwind-config/index.css";
 
 .shadow-custom {
   box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
@@ -377,45 +8,12 @@ body {
   @apply backdrop-filter blur-[9px];
 }
 
-/* scrollbar sm size */
-.scrollbar-sm::-webkit-scrollbar {
-  height: 12px;
-  width: 12px;
-}
-.scrollbar-sm::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar md size */
-.scrollbar-md::-webkit-scrollbar {
-  height: 14px;
-  width: 14px;
-}
-.scrollbar-md::-webkit-scrollbar-thumb {
-  border: 3px solid rgba(0, 0, 0, 0);
-}
-/* scrollbar lg size */
-
-.scrollbar-lg::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
-}
-.scrollbar-lg::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-}
-/* end scrollbar style */
-
 /* progress bar */
 .progress-bar {
   fill: currentColor;
   color: rgba(var(--color-sidebar-background-100));
 }
 
-::-webkit-input-placeholder,
-::placeholder,
-:-ms-input-placeholder {
-  color: rgb(var(--color-text-400));
-}
-
 /* Progress Bar Styles */
 :root {
   --bprogress-color: rgb(var(--color-primary-100)) !important;

apps/admin/tailwind.config.cjs

@@ -1,5 +0,0 @@
-const sharedConfig = require("@plane/tailwind-config/tailwind.config.js");
-
-module.exports = {
-  presets: [sharedConfig],
-};

apps/api/bin/docker-entrypoint-api.sh

@@ -32,4 +32,7 @@ python manage.py create_bucket
 # Clear Cache before starting to remove stale values
 python manage.py clear_cache
 
+# Collect static files
+python manage.py collectstatic --noinput
+
 exec gunicorn -w "$GUNICORN_WORKERS" -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:"${PORT:-8000}" --max-requests 1200 --max-requests-jitter 1000 --access-logfile -

apps/api/plane/api/serializers/__init__.py

@@ -55,4 +55,4 @@ from .asset import (
 )
 from .invite import WorkspaceInviteSerializer
 from .member import ProjectMemberSerializer
-from .sticky import StickySerializer
+from .sticky import StickySerializer

apps/api/plane/api/serializers/project.py

@@ -17,7 +17,7 @@ from plane.utils.content_validator import (
 from .base import BaseSerializer
 
 
-class  ProjectCreateSerializer(BaseSerializer):
+class ProjectCreateSerializer(BaseSerializer):
     """
     Serializer for creating projects with workspace validation.
 

apps/api/plane/api/urls/invite.py

@@ -15,4 +15,4 @@ router.register(r"invitations", WorkspaceInvitationsViewset, basename="workspace
 # Wrap the router URLs with the workspace slug path
 urlpatterns = [
     path("workspaces/<str:slug>/", include(router.urls)),
-]
+]

apps/api/plane/api/views/cycle.py

@@ -195,9 +195,7 @@ class CycleListCreateAPIEndpoint(BaseAPIView):
 
         # Current Cycle
         if cycle_view == "current":
-            queryset = queryset.filter(
-                start_date__lte=timezone.now(), end_date__gte=timezone.now()
-            )
+            queryset = queryset.filter(start_date__lte=timezone.now(), end_date__gte=timezone.now())
             data = CycleSerializer(
                 queryset,
                 many=True,
@@ -254,9 +252,7 @@ class CycleListCreateAPIEndpoint(BaseAPIView):
 
         # Incomplete Cycles
         if cycle_view == "incomplete":
-            queryset = queryset.filter(
-                Q(end_date__gte=timezone.now()) | Q(end_date__isnull=True)
-            )
+            queryset = queryset.filter(Q(end_date__gte=timezone.now()) | Q(end_date__isnull=True))
             return self.paginate(
                 request=request,
                 queryset=(queryset),
@@ -302,17 +298,10 @@ class CycleListCreateAPIEndpoint(BaseAPIView):
         Create a new development cycle with specified name, description, and date range.
         Supports external ID tracking for integration purposes.
         """
-        if (
-            request.data.get("start_date", None) is None
-            and request.data.get("end_date", None) is None
-        ) or (
-            request.data.get("start_date", None) is not None
-            and request.data.get("end_date", None) is not None
+        if (request.data.get("start_date", None) is None and request.data.get("end_date", None) is None) or (
+            request.data.get("start_date", None) is not None and request.data.get("end_date", None) is not None
         ):
-
-            serializer = CycleCreateSerializer(
-                data=request.data, context={"request": request}
-            )
+            serializer = CycleCreateSerializer(data=request.data, context={"request": request})
             if serializer.is_valid():
                 if (
                     request.data.get("external_id")
@@ -355,9 +344,7 @@ class CycleListCreateAPIEndpoint(BaseAPIView):
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         else:
             return Response(
-                {
-                    "error": "Both start date and end date are either required or are to be null"
-                },
+                {"error": "Both start date and end date are either required or are to be null"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
@@ -505,9 +492,7 @@ class CycleDetailAPIEndpoint(BaseAPIView):
         """
         cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
-        current_instance = json.dumps(
-            CycleSerializer(cycle).data, cls=DjangoJSONEncoder
-        )
+        current_instance = json.dumps(CycleSerializer(cycle).data, cls=DjangoJSONEncoder)
 
         if cycle.archived_at:
             return Response(
@@ -520,20 +505,14 @@ class CycleDetailAPIEndpoint(BaseAPIView):
         if cycle.end_date is not None and cycle.end_date < timezone.now():
             if "sort_order" in request_data:
                 # Can only change sort order
-                request_data = {
-                    "sort_order": request_data.get("sort_order", cycle.sort_order)
-                }
+                request_data = {"sort_order": request_data.get("sort_order", cycle.sort_order)}
             else:
                 return Response(
-                    {
-                        "error": "The Cycle has already been completed so it cannot be edited"
-                    },
+                    {"error": "The Cycle has already been completed so it cannot be edited"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-        serializer = CycleUpdateSerializer(
-            cycle, data=request.data, partial=True, context={"request": request}
-        )
+        serializer = CycleUpdateSerializer(cycle, data=request.data, partial=True, context={"request": request})
         if serializer.is_valid():
             if (
                 request.data.get("external_id")
@@ -541,9 +520,7 @@ class CycleDetailAPIEndpoint(BaseAPIView):
                 and Cycle.objects.filter(
                     project_id=project_id,
                     workspace__slug=slug,
-                    external_source=request.data.get(
-                        "external_source", cycle.external_source
-                    ),
+                    external_source=request.data.get("external_source", cycle.external_source),
                     external_id=request.data.get("external_id"),
                 ).exists()
             ):
@@ -600,11 +577,7 @@ class CycleDetailAPIEndpoint(BaseAPIView):
                 status=status.HTTP_403_FORBIDDEN,
             )
 
-        cycle_issues = list(
-            CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list(
-                "issue", flat=True
-            )
-        )
+        cycle_issues = list(CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list("issue", flat=True))
 
         issue_activity.delay(
             type="cycle.activity.deleted",
@@ -624,9 +597,7 @@ class CycleDetailAPIEndpoint(BaseAPIView):
         # Delete the cycle
         cycle.delete()
         # Delete the user favorite cycle
-        UserFavorite.objects.filter(
-            entity_type="cycle", entity_identifier=pk, project_id=project_id
-        ).delete()
+        UserFavorite.objects.filter(entity_type="cycle", entity_identifier=pk, project_id=project_id).delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
@@ -764,9 +735,7 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
         return self.paginate(
             request=request,
             queryset=(self.get_queryset()),
-            on_results=lambda cycles: CycleSerializer(
-                cycles, many=True, fields=self.fields, expand=self.expand
-            ).data,
+            on_results=lambda cycles: CycleSerializer(cycles, many=True, fields=self.fields, expand=self.expand).data,
         )
 
     @cycle_docs(
@@ -785,9 +754,7 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
         Move a completed cycle to archived status for historical tracking.
         Only cycles that have ended can be archived.
         """
-        cycle = Cycle.objects.get(
-            pk=cycle_id, project_id=project_id, workspace__slug=slug
-        )
+        cycle = Cycle.objects.get(pk=cycle_id, project_id=project_id, workspace__slug=slug)
         if cycle.end_date >= timezone.now():
             return Response(
                 {"error": "Only completed cycles can be archived"},
@@ -818,9 +785,7 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
         Restore an archived cycle to active status, making it available for regular use.
         The cycle will reappear in active cycle lists.
         """
-        cycle = Cycle.objects.get(
-            pk=cycle_id, project_id=project_id, workspace__slug=slug
-        )
+        cycle = Cycle.objects.get(pk=cycle_id, project_id=project_id, workspace__slug=slug)
         cycle.archived_at = None
         cycle.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
@@ -883,9 +848,7 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
         # List
         order_by = request.GET.get("order_by", "created_at")
         issues = (
-            Issue.issue_objects.filter(
-                issue_cycle__cycle_id=cycle_id, issue_cycle__deleted_at__isnull=True
-            )
+            Issue.issue_objects.filter(issue_cycle__cycle_id=cycle_id, issue_cycle__deleted_at__isnull=True)
             .annotate(
                 sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
                 .order_by()
@@ -922,9 +885,7 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
         return self.paginate(
             request=request,
             queryset=(issues),
-            on_results=lambda issues: IssueSerializer(
-                issues, many=True, fields=self.fields, expand=self.expand
-            ).data,
+            on_results=lambda issues: IssueSerializer(issues, many=True, fields=self.fields, expand=self.expand).data,
         )
 
     @cycle_docs(
@@ -958,9 +919,7 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        cycle = Cycle.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=cycle_id
-        )
+        cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=cycle_id)
 
         if cycle.end_date is not None and cycle.end_date < timezone.now():
             return Response(
@@ -972,13 +931,9 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
             )
 
         # Get all CycleWorkItems already created
-        cycle_issues = list(
-            CycleIssue.objects.filter(~Q(cycle_id=cycle_id), issue_id__in=issues)
-        )
+        cycle_issues = list(CycleIssue.objects.filter(~Q(cycle_id=cycle_id), issue_id__in=issues))
         existing_issues = [
-            str(cycle_issue.issue_id)
-            for cycle_issue in cycle_issues
-            if str(cycle_issue.issue_id) in issues
+            str(cycle_issue.issue_id) for cycle_issue in cycle_issues if str(cycle_issue.issue_id) in issues
         ]
         new_issues = list(set(issues) - set(existing_issues))
 
@@ -1029,9 +984,7 @@ class CycleIssueListCreateAPIEndpoint(BaseAPIView):
             current_instance=json.dumps(
                 {
                     "updated_cycle_issues": update_cycle_issue_activity,
-                    "created_cycle_issues": serializers.serialize(
-                        "json", created_records
-                    ),
+                    "created_cycle_issues": serializers.serialize("json", created_records),
                 }
             ),
             epoch=int(timezone.now().timestamp()),
@@ -1107,9 +1060,7 @@ class CycleIssueDetailAPIEndpoint(BaseAPIView):
             cycle_id=cycle_id,
             issue_id=issue_id,
         )
-        serializer = CycleIssueSerializer(
-            cycle_issue, fields=self.fields, expand=self.expand
-        )
+        serializer = CycleIssueSerializer(cycle_issue, fields=self.fields, expand=self.expand)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     @cycle_docs(
@@ -1214,7 +1165,7 @@ class TransferCycleIssueAPIEndpoint(BaseAPIView):
                 {"error": "New Cycle Id is required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        
+
         old_cycle = Cycle.objects.get(
             workspace__slug=slug,
             project_id=project_id,

apps/api/plane/api/views/member.py

@@ -154,7 +154,6 @@ class ProjectMemberListCreateAPIEndpoint(BaseAPIView):
 
 # API endpoint to get and update a project member
 class ProjectMemberDetailAPIEndpoint(ProjectMemberListCreateAPIEndpoint):
-
     @extend_schema(
         operation_id="get_project_member",
         summary="Get project member",

apps/api/plane/app/serializers/project.py

@@ -3,6 +3,7 @@ from rest_framework import serializers
 
 # Module imports
 from .base import BaseSerializer, DynamicBaseSerializer
+from django.db.models import Max
 from plane.app.serializers.workspace import WorkspaceLiteSerializer
 from plane.app.serializers.user import UserLiteSerializer, UserAdminLiteSerializer
 from plane.db.models import (
@@ -12,6 +13,7 @@ from plane.db.models import (
     ProjectIdentifier,
     DeployBoard,
     ProjectPublicMember,
+    IssueSequence
 )
 from plane.utils.content_validator import (
     validate_html_content,
@@ -105,6 +107,7 @@ class ProjectListSerializer(DynamicBaseSerializer):
     members = serializers.SerializerMethodField()
     cover_image_url = serializers.CharField(read_only=True)
     inbox_view = serializers.BooleanField(read_only=True, source="intake_view")
+    next_work_item_sequence = serializers.SerializerMethodField()
 
     def get_members(self, obj):
         project_members = getattr(obj, "members_list", None)
@@ -113,6 +116,11 @@ class ProjectListSerializer(DynamicBaseSerializer):
             return [member.member_id for member in project_members if member.is_active and not member.member.is_bot]
         return []
 
+    def get_next_work_item_sequence(self, obj):
+        """Get the next sequence ID that will be assigned to a new issue"""
+        max_sequence = IssueSequence.objects.filter(project_id=obj.id).aggregate(max_seq=Max("sequence"))["max_seq"]
+        return (max_sequence + 1) if max_sequence else 1
+
     class Meta:
         model = Project
         fields = "__all__"

apps/api/plane/app/urls/exporter.py

@@ -9,4 +9,4 @@ urlpatterns = [
         ExportIssuesEndpoint.as_view(),
         name="export-issues",
     ),
-]
+]

apps/api/plane/app/views/asset/v2.py

@@ -45,9 +45,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
             # Save the new avatar
             user.avatar_asset_id = asset_id
             user.save()
-            invalidate_cache_directly(
-                path="/api/users/me/", url_params=False, user=True, request=request
-            )
+            invalidate_cache_directly(path="/api/users/me/", url_params=False, user=True, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/settings/",
                 url_params=False,
@@ -65,9 +63,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
             # Save the new cover image
             user.cover_image_asset_id = asset_id
             user.save()
-            invalidate_cache_directly(
-                path="/api/users/me/", url_params=False, user=True, request=request
-            )
+            invalidate_cache_directly(path="/api/users/me/", url_params=False, user=True, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/settings/",
                 url_params=False,
@@ -83,9 +79,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
             user = User.objects.get(id=asset.user_id)
             user.avatar_asset_id = None
             user.save()
-            invalidate_cache_directly(
-                path="/api/users/me/", url_params=False, user=True, request=request
-            )
+            invalidate_cache_directly(path="/api/users/me/", url_params=False, user=True, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/settings/",
                 url_params=False,
@@ -98,9 +92,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
             user = User.objects.get(id=asset.user_id)
             user.cover_image_asset_id = None
             user.save()
-            invalidate_cache_directly(
-                path="/api/users/me/", url_params=False, user=True, request=request
-            )
+            invalidate_cache_directly(path="/api/users/me/", url_params=False, user=True, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/settings/",
                 url_params=False,
@@ -160,9 +152,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
         # Get the presigned URL
         storage = S3Storage(request=request)
         # Generate a presigned URL to share an S3 object
-        presigned_url = storage.generate_presigned_post(
-            object_name=asset_key, file_type=type, file_size=size_limit
-        )
+        presigned_url = storage.generate_presigned_post(object_name=asset_key, file_type=type, file_size=size_limit)
         # Return the presigned URL
         return Response(
             {
@@ -199,9 +189,7 @@ class UserAssetsV2Endpoint(BaseAPIView):
         asset.is_deleted = True
         asset.deleted_at = timezone.now()
         # get the entity and save the asset id for the request field
-        self.entity_asset_delete(
-            entity_type=asset.entity_type, asset=asset, request=request
-        )
+        self.entity_asset_delete(entity_type=asset.entity_type, asset=asset, request=request)
         asset.save(update_fields=["is_deleted", "deleted_at"])
         return Response(status=status.HTTP_204_NO_CONTENT)
 
@@ -265,18 +253,14 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
             workspace.logo = ""
             workspace.logo_asset_id = asset_id
             workspace.save()
-            invalidate_cache_directly(
-                path="/api/workspaces/", url_params=False, user=False, request=request
-            )
+            invalidate_cache_directly(path="/api/workspaces/", url_params=False, user=False, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/workspaces/",
                 url_params=False,
                 user=True,
                 request=request,
             )
-            invalidate_cache_directly(
-                path="/api/instances/", url_params=False, user=False, request=request
-            )
+            invalidate_cache_directly(path="/api/instances/", url_params=False, user=False, request=request)
             return
 
         # Project Cover
@@ -303,18 +287,14 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
                 return
             workspace.logo_asset_id = None
             workspace.save()
-            invalidate_cache_directly(
-                path="/api/workspaces/", url_params=False, user=False, request=request
-            )
+            invalidate_cache_directly(path="/api/workspaces/", url_params=False, user=False, request=request)
             invalidate_cache_directly(
                 path="/api/users/me/workspaces/",
                 url_params=False,
                 user=True,
                 request=request,
             )
-            invalidate_cache_directly(
-                path="/api/instances/", url_params=False, user=False, request=request
-            )
+            invalidate_cache_directly(path="/api/instances/", url_params=False, user=False, request=request)
             return
         # Project Cover
         elif entity_type == FileAsset.EntityTypeContext.PROJECT_COVER:
@@ -375,17 +355,13 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
             workspace=workspace,
             created_by=request.user,
             entity_type=entity_type,
-            **self.get_entity_id_field(
-                entity_type=entity_type, entity_id=entity_identifier
-            ),
+            **self.get_entity_id_field(entity_type=entity_type, entity_id=entity_identifier),
         )
 
         # Get the presigned URL
         storage = S3Storage(request=request)
         # Generate a presigned URL to share an S3 object
-        presigned_url = storage.generate_presigned_post(
-            object_name=asset_key, file_type=type, file_size=size_limit
-        )
+        presigned_url = storage.generate_presigned_post(object_name=asset_key, file_type=type, file_size=size_limit)
         # Return the presigned URL
         return Response(
             {
@@ -422,9 +398,7 @@ class WorkspaceFileAssetEndpoint(BaseAPIView):
         asset.is_deleted = True
         asset.deleted_at = timezone.now()
         # get the entity and save the asset id for the request field
-        self.entity_asset_delete(
-            entity_type=asset.entity_type, asset=asset, request=request
-        )
+        self.entity_asset_delete(entity_type=asset.entity_type, asset=asset, request=request)
         asset.save(update_fields=["is_deleted", "deleted_at"])
         return Response(status=status.HTTP_204_NO_CONTENT)
 
@@ -587,9 +561,7 @@ class ProjectAssetEndpoint(BaseAPIView):
         # Get the presigned URL
         storage = S3Storage(request=request)
         # Generate a presigned URL to share an S3 object
-        presigned_url = storage.generate_presigned_post(
-            object_name=asset_key, file_type=type, file_size=size_limit
-        )
+        presigned_url = storage.generate_presigned_post(object_name=asset_key, file_type=type, file_size=size_limit)
         # Return the presigned URL
         return Response(
             {
@@ -619,9 +591,7 @@ class ProjectAssetEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def delete(self, request, slug, project_id, pk):
         # Get the asset
-        asset = FileAsset.objects.get(
-            id=pk, workspace__slug=slug, project_id=project_id
-        )
+        asset = FileAsset.objects.get(id=pk, workspace__slug=slug, project_id=project_id)
         # Check deleted assets
         asset.is_deleted = True
         asset.deleted_at = timezone.now()
@@ -632,9 +602,7 @@ class ProjectAssetEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id, pk):
         # get the asset id
-        asset = FileAsset.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=pk
-        )
+        asset = FileAsset.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
         # Check if the asset is uploaded
         if not asset.is_uploaded:
@@ -667,9 +635,7 @@ class ProjectBulkAssetEndpoint(BaseAPIView):
 
         # Check if the asset ids are provided
         if not asset_ids:
-            return Response(
-                {"error": "No asset ids provided."}, status=status.HTTP_400_BAD_REQUEST
-            )
+            return Response({"error": "No asset ids provided."}, status=status.HTTP_400_BAD_REQUEST)
 
         # get the asset id
         assets = FileAsset.objects.filter(id__in=asset_ids, workspace__slug=slug)
@@ -723,14 +689,11 @@ class AssetCheckEndpoint(BaseAPIView):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def get(self, request, slug, asset_id):
-        asset = FileAsset.all_objects.filter(
-            id=asset_id, workspace__slug=slug, deleted_at__isnull=True
-        ).exists()
+        asset = FileAsset.all_objects.filter(id=asset_id, workspace__slug=slug, deleted_at__isnull=True).exists()
         return Response({"exists": asset}, status=status.HTTP_200_OK)
 
 
 class DuplicateAssetEndpoint(BaseAPIView):
-
     throttle_classes = [AssetRateThrottle]
 
     def get_entity_id_field(self, entity_type, entity_id):
@@ -766,17 +729,13 @@ class DuplicateAssetEndpoint(BaseAPIView):
 
         return {}
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def post(self, request, slug, asset_id):
         project_id = request.data.get("project_id", None)
         entity_id = request.data.get("entity_id", None)
         entity_type = request.data.get("entity_type", None)
 
-
-        if (
-            not entity_type
-            or entity_type not in FileAsset.EntityTypeContext.values
-        ):
+        if not entity_type or entity_type not in FileAsset.EntityTypeContext.values:
             return Response(
                 {"error": "Invalid entity type or entity id"},
                 status=status.HTTP_400_BAD_REQUEST,
@@ -786,23 +745,15 @@ class DuplicateAssetEndpoint(BaseAPIView):
         if project_id:
             # check if project exists in the workspace
             if not Project.objects.filter(id=project_id, workspace=workspace).exists():
-                return Response(
-                    {"error": "Project not found"}, status=status.HTTP_404_NOT_FOUND
-                )
+                return Response({"error": "Project not found"}, status=status.HTTP_404_NOT_FOUND)
 
         storage = S3Storage(request=request)
-        original_asset = FileAsset.objects.filter(
-            workspace=workspace, id=asset_id, is_uploaded=True
-        ).first()
+        original_asset = FileAsset.objects.filter(id=asset_id, is_uploaded=True).first()
 
         if not original_asset:
-            return Response(
-                {"error": "Asset not found"}, status=status.HTTP_404_NOT_FOUND
-            )
+            return Response({"error": "Asset not found"}, status=status.HTTP_404_NOT_FOUND)
 
-        destination_key = (
-            f"{workspace.id}/{uuid.uuid4().hex}-{original_asset.attributes.get('name')}"
-        )
+        destination_key = f"{workspace.id}/{uuid.uuid4().hex}-{original_asset.attributes.get('name')}"
         duplicated_asset = FileAsset.objects.create(
             attributes={
                 "name": original_asset.attributes.get("name"),
@@ -822,9 +773,7 @@ class DuplicateAssetEndpoint(BaseAPIView):
         # Update the is_uploaded field for all newly created assets
         FileAsset.objects.filter(id=duplicated_asset.id).update(is_uploaded=True)
 
-        return Response(
-            {"asset_id": str(duplicated_asset.id)}, status=status.HTTP_200_OK
-        )
+        return Response({"asset_id": str(duplicated_asset.id)}, status=status.HTTP_200_OK)
 
 
 class WorkspaceAssetDownloadEndpoint(BaseAPIView):

apps/api/plane/app/views/cycle/base.py

@@ -97,9 +97,7 @@ class CycleViewSet(BaseViewSet):
             .prefetch_related(
                 Prefetch(
                     "issue_cycle__issue__assignees",
-                    queryset=User.objects.only(
-                        "avatar_asset", "first_name", "id"
-                    ).distinct(),
+                    queryset=User.objects.only("avatar_asset", "first_name", "id").distinct(),
                 )
             )
             .prefetch_related(
@@ -150,8 +148,7 @@ class CycleViewSet(BaseViewSet):
             .annotate(
                 status=Case(
                     When(
-                        Q(start_date__lte=current_time_in_utc)
-                        & Q(end_date__gte=current_time_in_utc),
+                        Q(start_date__lte=current_time_in_utc) & Q(end_date__gte=current_time_in_utc),
                         then=Value("CURRENT"),
                     ),
                     When(start_date__gt=current_time_in_utc, then=Value("UPCOMING")),
@@ -170,11 +167,7 @@ class CycleViewSet(BaseViewSet):
                         "issue_cycle__issue__assignees__id",
                         distinct=True,
                         filter=~Q(issue_cycle__issue__assignees__id__isnull=True)
-                        & (
-                            Q(
-                                issue_cycle__issue__issue_assignee__deleted_at__isnull=True
-                            )
-                        ),
+                        & (Q(issue_cycle__issue__issue_assignee__deleted_at__isnull=True)),
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
                 )
@@ -205,9 +198,7 @@ class CycleViewSet(BaseViewSet):
 
         # Current Cycle
         if cycle_view == "current":
-            queryset = queryset.filter(
-                start_date__lte=current_time_in_utc, end_date__gte=current_time_in_utc
-            )
+            queryset = queryset.filter(start_date__lte=current_time_in_utc, end_date__gte=current_time_in_utc)
 
             data = queryset.values(
                 # necessary fields
@@ -274,16 +265,10 @@ class CycleViewSet(BaseViewSet):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
     def create(self, request, slug, project_id):
-        if (
-            request.data.get("start_date", None) is None
-            and request.data.get("end_date", None) is None
-        ) or (
-            request.data.get("start_date", None) is not None
-            and request.data.get("end_date", None) is not None
+        if (request.data.get("start_date", None) is None and request.data.get("end_date", None) is None) or (
+            request.data.get("start_date", None) is not None and request.data.get("end_date", None) is not None
         ):
-            serializer = CycleWriteSerializer(
-                data=request.data, context={"project_id": project_id}
-            )
+            serializer = CycleWriteSerializer(data=request.data, context={"project_id": project_id})
             if serializer.is_valid():
                 serializer.save(project_id=project_id, owned_by=request.user)
                 cycle = (
@@ -323,9 +308,7 @@ class CycleViewSet(BaseViewSet):
                 project_timezone = project.timezone
 
                 datetime_fields = ["start_date", "end_date"]
-                cycle = user_timezone_converter(
-                    cycle, datetime_fields, project_timezone
-                )
+                cycle = user_timezone_converter(cycle, datetime_fields, project_timezone)
 
                 # Send the model activity
                 model_activity.delay(
@@ -341,17 +324,13 @@ class CycleViewSet(BaseViewSet):
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
         else:
             return Response(
-                {
-                    "error": "Both start date and end date are either required or are to be null"
-                },
+                {"error": "Both start date and end date are either required or are to be null"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
     def partial_update(self, request, slug, project_id, pk):
-        queryset = self.get_queryset().filter(
-            workspace__slug=slug, project_id=project_id, pk=pk
-        )
+        queryset = self.get_queryset().filter(workspace__slug=slug, project_id=project_id, pk=pk)
         cycle = queryset.first()
         if cycle.archived_at:
             return Response(
@@ -359,29 +338,21 @@ class CycleViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        current_instance = json.dumps(
-            CycleSerializer(cycle).data, cls=DjangoJSONEncoder
-        )
+        current_instance = json.dumps(CycleSerializer(cycle).data, cls=DjangoJSONEncoder)
 
         request_data = request.data
 
         if cycle.end_date is not None and cycle.end_date < timezone.now():
             if "sort_order" in request_data:
                 # Can only change sort order for a completed cycle``
-                request_data = {
-                    "sort_order": request_data.get("sort_order", cycle.sort_order)
-                }
+                request_data = {"sort_order": request_data.get("sort_order", cycle.sort_order)}
             else:
                 return Response(
-                    {
-                        "error": "The Cycle has already been completed so it cannot be edited"
-                    },
+                    {"error": "The Cycle has already been completed so it cannot be edited"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-        serializer = CycleWriteSerializer(
-            cycle, data=request.data, partial=True, context={"project_id": project_id}
-        )
+        serializer = CycleWriteSerializer(cycle, data=request.data, partial=True, context={"project_id": project_id})
         if serializer.is_valid():
             serializer.save()
             cycle = queryset.values(
@@ -481,9 +452,7 @@ class CycleViewSet(BaseViewSet):
         )
 
         if data is None:
-            return Response(
-                {"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND
-            )
+            return Response({"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND)
 
         queryset = queryset.first()
         # Fetch the project timezone
@@ -505,11 +474,7 @@ class CycleViewSet(BaseViewSet):
     def destroy(self, request, slug, project_id, pk):
         cycle = Cycle.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
-        cycle_issues = list(
-            CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list(
-                "issue", flat=True
-            )
-        )
+        cycle_issues = list(CycleIssue.objects.filter(cycle_id=self.kwargs.get("pk")).values_list("issue", flat=True))
 
         issue_activity.delay(
             type="cycle.activity.deleted",
@@ -560,9 +525,7 @@ class CycleDateCheckEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        start_date = convert_to_utc(
-            date=str(start_date), project_id=project_id, is_start_date=True
-        )
+        start_date = convert_to_utc(date=str(start_date), project_id=project_id, is_start_date=True)
         end_date = convert_to_utc(
             date=str(end_date),
             project_id=project_id,
@@ -666,12 +629,8 @@ class CycleUserPropertiesEndpoint(BaseAPIView):
         )
 
         cycle_properties.filters = request.data.get("filters", cycle_properties.filters)
-        cycle_properties.rich_filters = request.data.get(
-            "rich_filters", cycle_properties.rich_filters
-        )
-        cycle_properties.display_filters = request.data.get(
-            "display_filters", cycle_properties.display_filters
-        )
+        cycle_properties.rich_filters = request.data.get("rich_filters", cycle_properties.rich_filters)
+        cycle_properties.display_filters = request.data.get("display_filters", cycle_properties.display_filters)
         cycle_properties.display_properties = request.data.get(
             "display_properties", cycle_properties.display_properties
         )
@@ -695,13 +654,9 @@ class CycleUserPropertiesEndpoint(BaseAPIView):
 class CycleProgressEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id, cycle_id):
-        cycle = Cycle.objects.filter(
-            workspace__slug=slug, project_id=project_id, id=cycle_id
-        ).first()
+        cycle = Cycle.objects.filter(workspace__slug=slug, project_id=project_id, id=cycle_id).first()
         if not cycle:
-            return Response(
-                {"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND
-            )
+            return Response({"error": "Cycle not found"}, status=status.HTTP_404_NOT_FOUND)
         aggregate_estimates = (
             Issue.issue_objects.filter(
                 estimate_point__estimate__type="points",
@@ -747,9 +702,7 @@ class CycleProgressEndpoint(BaseAPIView):
                         output_field=FloatField(),
                     )
                 ),
-                total_estimate_points=Sum(
-                    "value_as_float", default=Value(0), output_field=FloatField()
-                ),
+                total_estimate_points=Sum("value_as_float", default=Value(0), output_field=FloatField()),
             )
         )
         if cycle.progress_snapshot:
@@ -809,22 +762,11 @@ class CycleProgressEndpoint(BaseAPIView):
 
         return Response(
             {
-                "backlog_estimate_points": aggregate_estimates["backlog_estimate_point"]
-                or 0,
-                "unstarted_estimate_points": aggregate_estimates[
-                    "unstarted_estimate_point"
-                ]
-                or 0,
-                "started_estimate_points": aggregate_estimates["started_estimate_point"]
-                or 0,
-                "cancelled_estimate_points": aggregate_estimates[
-                    "cancelled_estimate_point"
-                ]
-                or 0,
-                "completed_estimate_points": aggregate_estimates[
-                    "completed_estimate_points"
-                ]
-                or 0,
+                "backlog_estimate_points": aggregate_estimates["backlog_estimate_point"] or 0,
+                "unstarted_estimate_points": aggregate_estimates["unstarted_estimate_point"] or 0,
+                "started_estimate_points": aggregate_estimates["started_estimate_point"] or 0,
+                "cancelled_estimate_points": aggregate_estimates["cancelled_estimate_point"] or 0,
+                "completed_estimate_points": aggregate_estimates["completed_estimate_points"] or 0,
                 "total_estimate_points": aggregate_estimates["total_estimate_points"],
                 "backlog_issues": backlog_issues,
                 "total_issues": total_issues,
@@ -842,9 +784,7 @@ class CycleAnalyticsEndpoint(BaseAPIView):
     def get(self, request, slug, project_id, cycle_id):
         analytic_type = request.GET.get("type", "issues")
         cycle = (
-            Cycle.objects.filter(
-                workspace__slug=slug, project_id=project_id, id=cycle_id
-            )
+            Cycle.objects.filter(workspace__slug=slug, project_id=project_id, id=cycle_id)
             .annotate(
                 total_issues=Count(
                     "issue_cycle__issue__id",
@@ -927,9 +867,7 @@ class CycleAnalyticsEndpoint(BaseAPIView):
                     )
                 )
                 .values("display_name", "assignee_id", "avatar_url")
-                .annotate(
-                    total_estimates=Sum(Cast("estimate_point__value", FloatField()))
-                )
+                .annotate(total_estimates=Sum(Cast("estimate_point__value", FloatField())))
                 .annotate(
                     completed_estimates=Sum(
                         Cast("estimate_point__value", FloatField()),
@@ -964,9 +902,7 @@ class CycleAnalyticsEndpoint(BaseAPIView):
                 .annotate(color=F("labels__color"))
                 .annotate(label_id=F("labels__id"))
                 .values("label_name", "color", "label_id")
-                .annotate(
-                    total_estimates=Sum(Cast("estimate_point__value", FloatField()))
-                )
+                .annotate(total_estimates=Sum(Cast("estimate_point__value", FloatField())))
                 .annotate(
                     completed_estimates=Sum(
                         Cast("estimate_point__value", FloatField()),
@@ -1068,11 +1004,7 @@ class CycleAnalyticsEndpoint(BaseAPIView):
                 .annotate(color=F("labels__color"))
                 .annotate(label_id=F("labels__id"))
                 .values("label_name", "color", "label_id")
-                .annotate(
-                    total_issues=Count(
-                        "label_id", filter=Q(archived_at__isnull=True, is_draft=False)
-                    )
-                )
+                .annotate(total_issues=Count("label_id", filter=Q(archived_at__isnull=True, is_draft=False)))
                 .annotate(
                     completed_issues=Count(
                         "label_id",

apps/api/plane/app/views/issue/label.py

@@ -39,9 +39,7 @@ class LabelViewSet(BaseViewSet):
     @allow_permission([ROLE.ADMIN])
     def create(self, request, slug, project_id):
         try:
-            serializer = LabelSerializer(
-                data=request.data, context={"project_id": project_id}
-            )
+            serializer = LabelSerializer(data=request.data, context={"project_id": project_id})
             if serializer.is_valid():
                 serializer.save(project_id=project_id)
                 return Response(serializer.data, status=status.HTTP_201_CREATED)

apps/api/plane/app/views/page/base.py

@@ -495,14 +495,12 @@ class PagesDescriptionViewSet(BaseViewSet):
     permission_classes = [ProjectPagePermission]
 
     def retrieve(self, request, slug, project_id, page_id):
-        page = (
-            Page.objects.get(
-                Q(owned_by=self.request.user) | Q(access=0),
-                pk=page_id,
-                workspace__slug=slug,
-                projects__id=project_id,
-                project_pages__deleted_at__isnull=True,
-            )
+        page = Page.objects.get(
+            Q(owned_by=self.request.user) | Q(access=0),
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
         )
         binary_data = page.description_binary
 
@@ -517,14 +515,12 @@ class PagesDescriptionViewSet(BaseViewSet):
         return response
 
     def partial_update(self, request, slug, project_id, page_id):
-        page = (
-            Page.objects.get(
-                Q(owned_by=self.request.user) | Q(access=0),
-                pk=page_id,
-                workspace__slug=slug,
-                projects__id=project_id,
-                project_pages__deleted_at__isnull=True,
-            )
+        page = Page.objects.get(
+            Q(owned_by=self.request.user) | Q(access=0),
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
         )
 
         if page.is_locked:

apps/api/plane/app/views/project/base.py

@@ -1,17 +1,14 @@
 # Python imports
 import json
 
-import boto3
 
 # Django imports
-from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
 from django.db.models import Exists, F, OuterRef, Prefetch, Q, Subquery
 from django.utils import timezone
 
 # Third Party imports
 from rest_framework import status
-from rest_framework.permissions import AllowAny
 from rest_framework.response import Response
 
 # Module imports
@@ -38,8 +35,6 @@ from plane.db.models import (
     Workspace,
     WorkspaceMember,
 )
-from plane.utils.cache import cache_response
-from plane.utils.exception_logger import log_exception
 from plane.utils.host import base_host
 
 

apps/api/plane/authentication/adapter/base.py

@@ -90,9 +90,9 @@ class Adapter:
         """Check if sign up is enabled or not and raise exception if not enabled"""
 
         # Get configuration value
-        (ENABLE_SIGNUP,) = get_configuration_value([
-            {"key": "ENABLE_SIGNUP", "default": os.environ.get("ENABLE_SIGNUP", "1")}
-        ])
+        (ENABLE_SIGNUP,) = get_configuration_value(
+            [{"key": "ENABLE_SIGNUP", "default": os.environ.get("ENABLE_SIGNUP", "1")}]
+        )
 
         # Check if sign up is disabled and invite is present or not
         if ENABLE_SIGNUP == "0" and not WorkspaceMemberInvite.objects.filter(email=email).exists():

apps/api/plane/authentication/provider/oauth/gitea.py

@@ -101,9 +101,7 @@ class GiteaOAuthProvider(OauthAdapter):
                     else None
                 ),
                 "refresh_token_expired_at": (
-                    datetime.fromtimestamp(
-                        token_response.get("refresh_token_expired_at"), tz=pytz.utc
-                    )
+                    datetime.fromtimestamp(token_response.get("refresh_token_expired_at"), tz=pytz.utc)
                     if token_response.get("refresh_token_expired_at")
                     else None
                 ),
@@ -168,4 +166,4 @@ class GiteaOAuthProvider(OauthAdapter):
                     "is_password_autoset": True,
                 },
             }
-        )
+        )

apps/api/plane/authentication/views/app/gitea.py

@@ -37,9 +37,7 @@ class GiteaOauthInitiateEndpoint(View):
             params = exc.get_error_dict()
             if next_path:
                 params["next_path"] = str(validate_next_path(next_path))
-            url = urljoin(
-                base_host(request=request, is_app=True), "?" + urlencode(params)
-            )
+            url = urljoin(base_host(request=request, is_app=True), "?" + urlencode(params))
             return HttpResponseRedirect(url)
         try:
             state = uuid.uuid4().hex
@@ -51,9 +49,7 @@ class GiteaOauthInitiateEndpoint(View):
             params = e.get_error_dict()
             if next_path:
                 params["next_path"] = str(validate_next_path(next_path))
-            url = urljoin(
-                base_host(request=request, is_app=True), "?" + urlencode(params)
-            )
+            url = urljoin(base_host(request=request, is_app=True), "?" + urlencode(params))
             return HttpResponseRedirect(url)
 
 
@@ -87,9 +83,7 @@ class GiteaCallbackEndpoint(View):
             return HttpResponseRedirect(url)
 
         try:
-            provider = GiteaOAuthProvider(
-                request=request, code=code, callback=post_user_auth_workflow
-            )
+            provider = GiteaOAuthProvider(request=request, code=code, callback=post_user_auth_workflow)
             user = provider.authenticate()
             # Login the user and record his device info
             user_login(request=request, user=user, is_app=True)

apps/api/plane/bgtasks/export_task.py

@@ -15,9 +15,10 @@ from django.utils import timezone
 from django.db.models import Prefetch
 
 # Module imports
-from plane.db.models import ExporterHistory, Issue, IssueRelation
+from plane.db.models import ExporterHistory, Issue, IssueComment, IssueRelation, IssueSubscriber
 from plane.utils.exception_logger import log_exception
-from plane.utils.exporters import Exporter, IssueExportSchema
+from plane.utils.porters.exporter import DataExporter
+from plane.utils.porters.serializers.issue import IssueExportSerializer
 
 
 def create_zip_file(files: List[tuple[str, str | bytes]]) -> io.BytesIO:
@@ -159,10 +160,16 @@ def issue_export_task(
                 "labels",
                 "issue_cycle__cycle",
                 "issue_module__module",
-                "issue_comments",
                 "assignees",
-                "issue_subscribers",
                 "issue_link",
+                Prefetch(
+                    "issue_subscribers",
+                    queryset=IssueSubscriber.objects.select_related("subscriber"),
+                ),
+                Prefetch(
+                    "issue_comments",
+                    queryset=IssueComment.objects.select_related("actor").order_by("created_at"),
+                ),
                 Prefetch(
                     "issue_relation",
                     queryset=IssueRelation.objects.select_related("related_issue", "related_issue__project"),
@@ -180,11 +187,7 @@ def issue_export_task(
 
         # Create exporter for the specified format
         try:
-            exporter = Exporter(
-                format_type=provider,
-                schema_class=IssueExportSchema,
-                options={"list_joiner": ", "},
-            )
+            exporter = DataExporter(IssueExportSerializer, format_type=provider)
         except ValueError as e:
             # Invalid format type
             exporter_instance = ExporterHistory.objects.get(token=token_id)

apps/api/plane/bgtasks/logger_task.py

@@ -0,0 +1,96 @@
+# Python imports
+import logging
+from typing import Optional, Dict, Any
+
+# Third party imports
+from pymongo.collection import Collection
+from celery import shared_task
+
+# Django imports
+from plane.settings.mongo import MongoConnection
+from plane.utils.exception_logger import log_exception
+from plane.db.models import APIActivityLog
+
+
+logger = logging.getLogger("plane.worker")
+
+
+def get_mongo_collection() -> Optional[Collection]:
+    """
+    Returns the MongoDB collection for external API activity logs.
+    """
+    if not MongoConnection.is_configured():
+        logger.info("MongoDB not configured")
+        return None
+
+    try:
+        return MongoConnection.get_collection("api_activity_logs")
+    except Exception as e:
+        logger.error(f"Error getting MongoDB collection: {str(e)}")
+        log_exception(e)
+        return None
+
+
+def safe_decode_body(content: bytes) -> Optional[str]:
+    """
+    Safely decodes request/response body content, handling binary data.
+    Returns "[Binary Content]" if the content is binary, or a string representation of the content.
+    Returns None if the content is None or empty.
+    """
+    # If the content is None, return None
+    if content is None:
+        return None
+
+    # If the content is an empty bytes object, return None
+    if content == b"":
+        return None
+
+    # Check if content is binary by looking for common binary file signatures
+    if content.startswith(b"\x89PNG") or content.startswith(b"\xff\xd8\xff") or content.startswith(b"%PDF"):
+        return "[Binary Content]"
+
+    try:
+        return content.decode("utf-8")
+    except UnicodeDecodeError:
+        return "[Could not decode content]"
+
+
+def log_to_mongo(log_document: Dict[str, Any]) -> bool:
+    """
+    Logs the request to MongoDB if available.
+    """
+    mongo_collection = get_mongo_collection()
+    if mongo_collection is None:
+        logger.error("MongoDB not configured")
+        return False
+
+    try:
+        mongo_collection.insert_one(log_document)
+        return True
+    except Exception as e:
+        log_exception(e)
+        return False
+
+
+def log_to_postgres(log_data: Dict[str, Any]) -> bool:
+    """
+    Fallback to logging to PostgreSQL if MongoDB is unavailable.
+    """
+    try:
+        APIActivityLog.objects.create(**log_data)
+        return True
+    except Exception as e:
+        log_exception(e)
+        return False
+
+
+@shared_task
+def process_logs(log_data: Dict[str, Any], mongo_log: Dict[str, Any]) -> None:
+    """
+    Process logs to save to MongoDB or Postgres based on the configuration
+    """
+
+    if MongoConnection.is_configured():
+        log_to_mongo(mongo_log)
+    else:
+        log_to_postgres(log_data)

apps/api/plane/bgtasks/page_transaction_task.py

@@ -88,7 +88,6 @@ def page_transaction(new_description_html, old_description_html, page_id):
 
         has_existing_logs = PageLog.objects.filter(page_id=page_id).exists()
 
-
         # Extract all components in a single pass (optimized)
         old_components = extract_all_components(old_description_html)
         new_components = extract_all_components(new_description_html)
@@ -125,12 +124,9 @@ def page_transaction(new_description_html, old_description_html, page_id):
                     )
                 )
 
-
         # Bulk insert and cleanup
         if new_transactions:
-            PageLog.objects.bulk_create(
-                new_transactions, batch_size=50, ignore_conflicts=True
-            )
+            PageLog.objects.bulk_create(new_transactions, batch_size=50, ignore_conflicts=True)
 
         if deleted_transaction_ids:
             PageLog.objects.filter(transaction__in=deleted_transaction_ids).delete()

apps/api/plane/bgtasks/workspace_seed_task.py

@@ -107,56 +107,60 @@ def create_project_and_member(workspace: Workspace, bot_user: User) -> Dict[int,
         )
 
         # Create project members
-        ProjectMember.objects.bulk_create([
-            ProjectMember(
-                project=project,
-                member_id=workspace_member["member_id"],
-                role=workspace_member["role"],
-                workspace_id=workspace.id,
-                created_by_id=bot_user.id,
-            )
-            for workspace_member in workspace_members
-        ])
+        ProjectMember.objects.bulk_create(
+            [
+                ProjectMember(
+                    project=project,
+                    member_id=workspace_member["member_id"],
+                    role=workspace_member["role"],
+                    workspace_id=workspace.id,
+                    created_by_id=bot_user.id,
+                )
+                for workspace_member in workspace_members
+            ]
+        )
 
         # Create issue user properties
-        IssueUserProperty.objects.bulk_create([
-            IssueUserProperty(
-                project=project,
-                user_id=workspace_member["member_id"],
-                workspace_id=workspace.id,
-                display_filters={
-                    "layout": "list",
-                    "calendar": {"layout": "month", "show_weekends": False},
-                    "group_by": "state",
-                    "order_by": "sort_order",
-                    "sub_issue": True,
-                    "sub_group_by": None,
-                    "show_empty_groups": True,
-                },
-                display_properties={
-                    "key": True,
-                    "link": True,
-                    "cycle": False,
-                    "state": True,
-                    "labels": False,
-                    "modules": False,
-                    "assignee": True,
-                    "due_date": False,
-                    "estimate": True,
-                    "priority": True,
-                    "created_on": True,
-                    "issue_type": True,
-                    "start_date": False,
-                    "updated_on": True,
-                    "customer_count": True,
-                    "sub_issue_count": False,
-                    "attachment_count": False,
-                    "customer_request_count": True,
-                },
-                created_by_id=bot_user.id,
-            )
-            for workspace_member in workspace_members
-        ])
+        IssueUserProperty.objects.bulk_create(
+            [
+                IssueUserProperty(
+                    project=project,
+                    user_id=workspace_member["member_id"],
+                    workspace_id=workspace.id,
+                    display_filters={
+                        "layout": "list",
+                        "calendar": {"layout": "month", "show_weekends": False},
+                        "group_by": "state",
+                        "order_by": "sort_order",
+                        "sub_issue": True,
+                        "sub_group_by": None,
+                        "show_empty_groups": True,
+                    },
+                    display_properties={
+                        "key": True,
+                        "link": True,
+                        "cycle": False,
+                        "state": True,
+                        "labels": False,
+                        "modules": False,
+                        "assignee": True,
+                        "due_date": False,
+                        "estimate": True,
+                        "priority": True,
+                        "created_on": True,
+                        "issue_type": True,
+                        "start_date": False,
+                        "updated_on": True,
+                        "customer_count": True,
+                        "sub_issue_count": False,
+                        "attachment_count": False,
+                        "customer_request_count": True,
+                    },
+                    created_by_id=bot_user.id,
+                )
+                for workspace_member in workspace_members
+            ]
+        )
         # update map
         projects_map[project_id] = project.id
         logger.info(f"Task: workspace_seed_task -> Project {project_id} created")

apps/api/plane/db/mixins.py

@@ -188,3 +188,30 @@ class ChangeTrackerMixin:
                   all non-deferred fields).
         """
         return self._original_values
+
+    def save(self, *args: Any, **kwargs: Any) -> None:
+        """
+        Override save to automatically capture changed fields and reset tracking.
+
+        Before saving, the current changed_fields are captured and stored in
+        _changes_on_save. After saving, the tracked fields are reset so
+        that subsequent saves correctly detect changes relative to the last
+        saved state, not the original load-time state.
+
+        Models that need to access the changed fields after save (e.g., for
+        syncing related models) can use self._changes_on_save.
+        """
+        self._changes_on_save = self.changed_fields
+        super().save(*args, **kwargs)
+        self._reset_tracked_fields()
+
+    def _reset_tracked_fields(self) -> None:
+        """
+        Reset the tracked field values to the current state.
+
+        This is called automatically after save() to ensure that subsequent
+        saves correctly detect changes relative to the last saved state,
+        rather than the original load-time state.
+        """
+        self._original_values = {}
+        self._track_fields()

apps/api/plane/db/models/issue.py

@@ -207,39 +207,35 @@ class Issue(ProjectBaseModel):
 
         if self._state.adding:
             with transaction.atomic():
-                # Create a lock for this specific project using an advisory lock
+                # Create a lock for this specific project using a transaction-level advisory lock
                 # This ensures only one transaction per project can execute this code at a time
+                # The lock is automatically released when the transaction ends
                 lock_key = convert_uuid_to_integer(self.project.id)
 
                 with connection.cursor() as cursor:
-                    # Get an exclusive lock using the project ID as the lock key
-                    cursor.execute("SELECT pg_advisory_lock(%s)", [lock_key])
+                    # Get an exclusive transaction-level lock using the project ID as the lock key
+                    cursor.execute("SELECT pg_advisory_xact_lock(%s)", [lock_key])
 
-                try:
-                    # Get the last sequence for the project
-                    last_sequence = IssueSequence.objects.filter(project=self.project).aggregate(
-                        largest=models.Max("sequence")
-                    )["largest"]
-                    self.sequence_id = last_sequence + 1 if last_sequence else 1
-                    # Strip the html tags using html parser
-                    self.description_stripped = (
-                        None
-                        if (self.description_html == "" or self.description_html is None)
-                        else strip_tags(self.description_html)
-                    )
-                    largest_sort_order = Issue.objects.filter(project=self.project, state=self.state).aggregate(
-                        largest=models.Max("sort_order")
-                    )["largest"]
-                    if largest_sort_order is not None:
-                        self.sort_order = largest_sort_order + 10000
+                # Get the last sequence for the project
+                last_sequence = IssueSequence.objects.filter(project=self.project).aggregate(
+                    largest=models.Max("sequence")
+                )["largest"]
+                self.sequence_id = last_sequence + 1 if last_sequence else 1
+                # Strip the html tags using html parser
+                self.description_stripped = (
+                    None
+                    if (self.description_html == "" or self.description_html is None)
+                    else strip_tags(self.description_html)
+                )
+                largest_sort_order = Issue.objects.filter(project=self.project, state=self.state).aggregate(
+                    largest=models.Max("sort_order")
+                )["largest"]
+                if largest_sort_order is not None:
+                    self.sort_order = largest_sort_order + 10000
 
-                    super(Issue, self).save(*args, **kwargs)
+                super(Issue, self).save(*args, **kwargs)
 
-                    IssueSequence.objects.create(issue=self, sequence=self.sequence_id, project=self.project)
-                finally:
-                    # Release the lock
-                    with connection.cursor() as cursor:
-                        cursor.execute("SELECT pg_advisory_unlock(%s)", [lock_key])
+                IssueSequence.objects.create(issue=self, sequence=self.sequence_id, project=self.project)
         else:
             # Strip the html tags using html parser
             self.description_stripped = (
@@ -513,10 +509,12 @@ class IssueComment(ChangeTrackerMixin, ProjectBaseModel):
                     "comment_json": "description_json",
                 }
 
+                # Use _changes_on_save which is captured by ChangeTrackerMixin.save()
+                # before the tracked fields are reset
                 changed_fields = {
                     desc_field: getattr(self, comment_field)
                     for comment_field, desc_field in field_mapping.items()
-                    if self.has_changed(comment_field)
+                    if comment_field in self._changes_on_save
                 }
 
                 # Update description only if comment fields changed

apps/api/plane/db/models/user.py

@@ -147,6 +147,11 @@ class User(AbstractBaseUser, PermissionsMixin):
             return self.cover_image
         return None
 
+    @property
+    def full_name(self):
+        """Return user's full name (first + last)."""
+        return f"{self.first_name} {self.last_name}".strip()
+
     def save(self, *args, **kwargs):
         self.email = self.email.lower().strip()
         self.mobile_number = self.mobile_number

apps/api/plane/license/api/views/admin.py

@@ -134,8 +134,10 @@ class InstanceAdminSignUpEndpoint(View):
                 },
             )
             url = urljoin(
-                base_host(request=request, is_admin=True, ),
-                
+                base_host(
+                    request=request,
+                    is_admin=True,
+                ),
                 "?" + urlencode(exc.get_error_dict()),
             )
             return HttpResponseRedirect(url)

apps/api/plane/middleware/logger.py

@@ -4,13 +4,15 @@ import time
 
 # Django imports
 from django.http import HttpRequest
+from django.utils import timezone
 
 # Third party imports
 from rest_framework.request import Request
 
 # Module imports
 from plane.utils.ip_address import get_client_ip
-from plane.db.models import APIActivityLog
+from plane.utils.exception_logger import log_exception
+from plane.bgtasks.logger_task import process_logs
 
 api_logger = logging.getLogger("plane.api.request")
 
@@ -70,6 +72,10 @@ class RequestLoggerMiddleware:
 
 
 class APITokenLogMiddleware:
+    """
+    Middleware to log External API requests to MongoDB or PostgreSQL.
+    """
+
     def __init__(self, get_response):
         self.get_response = get_response
 
@@ -104,24 +110,41 @@ class APITokenLogMiddleware:
     def process_request(self, request, response, request_body):
         api_key_header = "X-Api-Key"
         api_key = request.headers.get(api_key_header)
-        # If the API key is present, log the request
-        if api_key:
-            try:
-                APIActivityLog.objects.create(
-                    token_identifier=api_key,
-                    path=request.path,
-                    method=request.method,
-                    query_params=request.META.get("QUERY_STRING", ""),
-                    headers=str(request.headers),
-                    body=(self._safe_decode_body(request_body) if request_body else None),
-                    response_body=(self._safe_decode_body(response.content) if response.content else None),
-                    response_code=response.status_code,
-                    ip_address=get_client_ip(request=request),
-                    user_agent=request.META.get("HTTP_USER_AGENT", None),
-                )
 
-            except Exception as e:
-                api_logger.exception(e)
-                # If the token does not exist, you can decide whether to log this as an invalid attempt
+        # If the API key is not present, return
+        if not api_key:
+            return
+
+        try:
+            log_data = {
+                "token_identifier": api_key,
+                "path": request.path,
+                "method": request.method,
+                "query_params": request.META.get("QUERY_STRING", ""),
+                "headers": str(request.headers),
+                "body": self._safe_decode_body(request_body) if request_body else None,
+                "response_body": self._safe_decode_body(response.content) if response.content else None,
+                "response_code": response.status_code,
+                "ip_address": get_client_ip(request=request),
+                "user_agent": request.META.get("HTTP_USER_AGENT", None),
+            }
+            user_id = (
+                str(request.user.id)
+                if getattr(request, "user") and getattr(request.user, "is_authenticated", False)
+                else None
+            )
+            # Additional fields for MongoDB
+            mongo_log = {
+                **log_data,
+                "created_at": timezone.now(),
+                "updated_at": timezone.now(),
+                "created_by": user_id,
+                "updated_by": user_id,
+            }
+
+            process_logs.delay(log_data=log_data, mongo_log=mongo_log)
+
+        except Exception as e:
+            log_exception(e)
 
         return None

apps/api/plane/seeds/data/issues.json

@@ -3,7 +3,7 @@
     "id": 1,
     "name": "Welcome to Plane 👋",
     "sequence_id": 1,
-    "description_html": "<p class=\"editor-paragraph-block\">Hey there! This demo project is your playground to get hands-on with Plane. We've set this up so you can click around and see how everything works without worrying about breaking anything.</p><p class=\"editor-paragraph-block\">Each work item is designed to make you familiar with the basics of using Plane. Just follow along card by card at your own pace.</p><p class=\"editor-paragraph-block\">First thing to try</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look in the <strong>Properties</strong> section below where it says <strong>State: Todo</strong>.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on it and change it to <strong>Done</strong> from the dropdown. Alternatively, you can drag and drop the card to the Done column.</p></li></ol>",
+    "description_html": "<p class=\"editor-paragraph-block\">Hey there! This demo project is your playground to get hands-on with Plane. We've set this up so you can click around and see how everything works without worrying about breaking anything.</p><p class=\"editor-paragraph-block\">Each work item is designed to make you familiar with the basics of using Plane. Just follow along card by card at your own pace.</p><p class=\"editor-paragraph-block\">First thing to try</p><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look in the <strong>Properties</strong> section below where it says <strong>State: Todo</strong>.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on it and change it to <strong>Done</strong> from the dropdown. Alternatively, you can drag and drop the card to the Done column.</p></li></ol>",
     "description_stripped": "Hey there! This demo project is your playground to get hands-on with Plane. We've set this up so you can click around and see how everything works without worrying about breaking anything.Each work item is designed to make you familiar with the basics of using Plane. Just follow along card by card at your own pace.First thing to tryLook in the Properties section below where it says State: Todo.Click on it and change it to Done from the dropdown. Alternatively, you can drag and drop the card to the Done column.",
     "sort_order": 1000,
     "state_id": 4,
@@ -17,7 +17,7 @@
     "id": 2,
     "name": "1. Create Projects 🎯",
     "sequence_id": 2,
-    "description_html": "<p class=\"editor-paragraph-block\"><br>A Project in Plane is where all your work comes together. Think of it as a base that organizes your work items and everything else your team needs to get things done.</p><div data-emoji-unicode=\"128204\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4cc.png\" data-logo-in-use=\"emoji\" data-background=\"light-blue\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note: </strong>This tutorial is already set up as a Project, and these cards you're reading are work items within it!</p><p class=\"editor-paragraph-block\">We're showing you how to create a new project just so you'll know exactly what to do when you're ready to start your own real one.</p></div><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look over at the left sidebar and find where it says <strong>Projects.</strong></p><image-component src=\"https://media.docs.plane.so/seed_assets/21.png\" width=\"395px\" height=\"362px\" id=\"7cb0d276-8686-4c8e-9f00-06a18140964d\" aspectratio=\"1.0900243309002433\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Hover your mouse there and you'll see a little <strong>+</strong> icon pop up - go ahead and click it!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">A modal opens where you can give your project a name and other details.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Notice the Access type<strong> </strong>options? <strong>Public</strong> means anyone (except Guest users) can see and join it, while <strong>Private</strong> keeps it just for those you invite.</p><div data-icon-color=\"#6d7b8a\" data-icon-name=\"Info\" data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> You can also quickly create a new project by using the keyboard shortcut <strong>P</strong> from anywhere in Plane!</p></div></li></ol>",
+    "description_html": "<p class=\"editor-paragraph-block\"><br>A Project in Plane is where all your work comes together. Think of it as a base that organizes your work items and everything else your team needs to get things done.</p><div data-emoji-unicode=\"128204\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4cc.png\" data-logo-in-use=\"emoji\" data-background=\"light-blue\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note: </strong>This tutorial is already set up as a Project, and these cards you're reading are work items within it!</p><p class=\"editor-paragraph-block\">We're showing you how to create a new project just so you'll know exactly what to do when you're ready to start your own real one.</p></div><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look over at the left sidebar and find where it says <strong>Projects.</strong></p><image-component src=\"https://media.docs.plane.so/seed_assets/21.png\" width=\"395px\" height=\"362px\" id=\"7cb0d276-8686-4c8e-9f00-06a18140964d\" aspectratio=\"1.0900243309002433\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Hover your mouse there and you'll see a little <strong>+</strong> icon pop up - go ahead and click it!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">A modal opens where you can give your project a name and other details.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Notice the Access type<strong> </strong>options? <strong>Public</strong> means anyone (except Guest users) can see and join it, while <strong>Private</strong> keeps it just for those you invite.</p><div data-icon-color=\"#6d7b8a\" data-icon-name=\"Info\" data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> You can also quickly create a new project by using the keyboard shortcut <strong>P</strong> from anywhere in Plane!</p></div></li></ol>",
     "sort_order": 2000,
     "state_id": 2,
     "labels": [2],
@@ -30,7 +30,7 @@
     "id": 3,
     "name": "2. Invite your team 🤜🤛",
     "sequence_id": 3,
-    "description_html": "<p class=\"editor-paragraph-block\">Let's get your teammates on board!</p><p class=\"editor-paragraph-block\">First, you'll need to invite them to your workspace before they can join specific projects:</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on your workspace name in the top-left corner, then select <strong>Settings</strong> from the dropdown.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/31.png\" width=\"395px\" height=\"367px\" id=\"26b0f613-b9d8-48b8-a10d-1a75501f19e0\" aspectratio=\"1.074766355140187\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Head over to the <strong>Members</strong> tab - this is your user management hub. Click <strong>Add member</strong> on the top right.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/32.png\" width=\"1144.380859375px\" height=\"206.3244316692872px\" id=\"7c64e9b0-4f6d-4958-917d-f77119cd48bd\" aspectratio=\"5.546511627906977\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">To do this, go to your project's <strong>Settings</strong> page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/33.png\" width=\"1119.380859375px\" height=\"329.9601265352615px\" id=\"3029c693-19fc-458e-9f5c-fdf3511dd2b6\" aspectratio=\"3.39247311827957\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Find the <strong>Members</strong> section, select your teammate, and assign them a project role - this controls what they can do within just this project.</p></li></ol><p class=\"editor-paragraph-block\"><br>That's it!</p><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">To learn more about user management, see <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/workspaces/members\">Manage users and roles</a>.</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">Let's get your teammates on board!</p><p class=\"editor-paragraph-block\">First, you'll need to invite them to your workspace before they can join specific projects:</p><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click on your workspace name in the top-left corner, then select <strong>Settings</strong> from the dropdown.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/31.png\" width=\"395px\" height=\"367px\" id=\"26b0f613-b9d8-48b8-a10d-1a75501f19e0\" aspectratio=\"1.074766355140187\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Head over to the <strong>Members</strong> tab - this is your user management hub. Click <strong>Add member</strong> on the top right.<br></p><image-component src=\"https://media.docs.plane.so/seed_assets/32.png\" width=\"1144.380859375px\" height=\"206.3244316692872px\" id=\"7c64e9b0-4f6d-4958-917d-f77119cd48bd\" aspectratio=\"5.546511627906977\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">To do this, go to your project's <strong>Settings</strong> page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/33.png\" width=\"1119.380859375px\" height=\"329.9601265352615px\" id=\"3029c693-19fc-458e-9f5c-fdf3511dd2b6\" aspectratio=\"3.39247311827957\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Find the <strong>Members</strong> section, select your teammate, and assign them a project role - this controls what they can do within just this project.</p></li></ol><p class=\"editor-paragraph-block\"><br>That's it!</p><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">To learn more about user management, see <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/workspaces/members\">Manage users and roles</a>.</p>",
     "description_stripped": "Let's get your teammates on board!First, you'll need to invite them to your workspace before they can join specific projects:Click on your workspace name in the top-left corner, then select Settings from the dropdown.Head over to the Members tab - this is your user management hub. Click Add member on the top right.Enter your teammate's email address. Select a role for them (Admin, Member or Guest) that determines what they can do in the workspace.Your team member will get an email invite. Once they've joined your workspace, you can add them to specific projects.To do this, go to your project's Settings page.Find the Members section, select your teammate, and assign them a project role - this controls what they can do within just this project.That's it!To learn more about user management, see Manage users and roles.",
     "sort_order": 3000,
     "state_id": 1,
@@ -44,7 +44,7 @@
     "id": 4,
     "name": "3. Create and assign Work Items ✏️",
     "sequence_id": 4,
-    "description_html": "<p class=\"editor-paragraph-block\">A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.</p><p class=\"editor-paragraph-block\">Ready to add something to your project's to-do list? Here's how:</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add work item</strong> button in the top-right corner of the Work Items page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/41.png\" width=\"1085.380859375px\" height=\"482.53758375605696px\" id=\"ba055bc3-4162-4750-9ad4-9434fc0e7121\" aspectratio=\"2.249318801089918\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Give your task a clear title and add any details in the description.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Set up the essentials:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Assign it to a team member (or yourself!)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose a priority level</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add start and due dates if there's a timeline</p></li></ul></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Save time by using the keyboard shortcut <strong>C</strong> from anywhere in your project to quickly create a new work item!</p></div><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to dive deeper into all the things you can do with work items? Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/overview\">documentation</a>.</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.</p><p class=\"editor-paragraph-block\">Ready to add something to your project's to-do list? Here's how:</p><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add work item</strong> button in the top-right corner of the Work Items page.</p><image-component src=\"https://media.docs.plane.so/seed_assets/41.png\" width=\"1085.380859375px\" height=\"482.53758375605696px\" id=\"ba055bc3-4162-4750-9ad4-9434fc0e7121\" aspectratio=\"2.249318801089918\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Give your task a clear title and add any details in the description.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Set up the essentials:</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Assign it to a team member (or yourself!)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose a priority level</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add start and due dates if there's a timeline</p></li></ul></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Save time by using the keyboard shortcut <strong>C</strong> from anywhere in your project to quickly create a new work item!</p></div><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to dive deeper into all the things you can do with work items? Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/overview\">documentation</a>.</p>",
     "description_stripped": "A work item is the fundamental building block of your project. Think of these as the actionable tasks that move your project forward.Ready to add something to your project's to-do list? Here's how:Click the Add work item button in the top-right corner of the Work Items page.Give your task a clear title and add any details in the description.Set up the essentials:Assign it to a team member (or yourself!)Choose a priority levelAdd start and due dates if there's a timelineTip: Save time by using the keyboard shortcut C from anywhere in your project to quickly create a new work item!Want to dive deeper into all the things you can do with work items? Check out our documentation.",
     "sort_order": 4000,
     "state_id": 3,
@@ -58,7 +58,7 @@
     "id": 5,
     "name": "4. Visualize your work 🔮",
     "sequence_id": 5,
-    "description_html": "<p class=\"editor-paragraph-block\">Plane offers multiple ways to look at your work items depending on what you need to see. Let's explore how to change views and customize them!</p><image-component src=\"https://media.docs.plane.so/seed_assets/51.png\" aspectratio=\"4.489130434782608\"></image-component><h2 class=\"editor-heading-block\">Switch between layouts</h2><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look at the top toolbar in your project. You'll see several layout icons.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click any of these icons to instantly switch between layouts.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Different layouts work best for different needs. Try Board view for tracking progress, Calendar for deadline management, and Gantt for timeline planning! See <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/layouts\"><strong>Layouts</strong></a> for more info.</p></div><h2 class=\"editor-heading-block\">Filter and display options</h2><p class=\"editor-paragraph-block\">Need to focus on specific work?</p><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Filters</strong> dropdown in the toolbar. Select criteria and choose which items to show.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Display</strong> dropdown to tailor how the information appears in your layout</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Created the perfect setup? Save it for later by clicking the the <strong>Save View</strong> button.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Access saved views anytime from the <strong>Views</strong> section in your sidebar.</p></li></ol>",
+    "description_html": "<p class=\"editor-paragraph-block\">Plane offers multiple ways to look at your work items depending on what you need to see. Let's explore how to change views and customize them!</p><image-component src=\"https://media.docs.plane.so/seed_assets/51.png\" aspectratio=\"4.489130434782608\"></image-component><h2 class=\"editor-heading-block\">Switch between layouts</h2><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Look at the top toolbar in your project. You'll see several layout icons.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click any of these icons to instantly switch between layouts.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> Different layouts work best for different needs. Try Board view for tracking progress, Calendar for deadline management, and Gantt for timeline planning! See <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/issues/layouts\"><strong>Layouts</strong></a> for more info.</p></div><h2 class=\"editor-heading-block\">Filter and display options</h2><p class=\"editor-paragraph-block\">Need to focus on specific work?</p><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Filters</strong> dropdown in the toolbar. Select criteria and choose which items to show.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Display</strong> dropdown to tailor how the information appears in your layout</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Created the perfect setup? Save it for later by clicking the the <strong>Save View</strong> button.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Access saved views anytime from the <strong>Views</strong> section in your sidebar.</p></li></ol>",
     "description_stripped": "Plane offers multiple ways to look at your work items depending on what you need to see. Let's explore how to change views and customize them!Switch between layoutsLook at the top toolbar in your project. You'll see several layout icons.Click any of these icons to instantly switch between layouts.Tip: Different layouts work best for different needs. Try Board view for tracking progress, Calendar for deadline management, and Gantt for timeline planning! See Layouts for more info.Filter and display optionsNeed to focus on specific work?Click the Filters dropdown in the toolbar. Select criteria and choose which items to show.Click the Display dropdown to tailor how the information appears in your layoutCreated the perfect setup? Save it for later by clicking the the Save View button.Access saved views anytime from the Views section in your sidebar.",
     "sort_order": 5000,
     "state_id": 3,
@@ -72,7 +72,7 @@
     "id": 6,
     "name": "5. Use Cycles to time box tasks 🗓️",
     "sequence_id": 6,
-    "description_html": "<p class=\"editor-paragraph-block\">A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.</p><h2 class=\"editor-heading-block\"><strong>Setup Cycles</strong></h2><ol class=\"list-decimal pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Go to the <strong>Cycles</strong> section in your project (you can find it in the left sidebar)</p><image-component src=\"https://media.docs.plane.so/seed_assets/61.png\" width=\"1144.380859375px\" height=\"341.8747850334119px\" id=\"9c3aea94-703a-4d4c-8c39-4201e994711d\" aspectratio=\"3.3473684210526318\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add cycle </strong>button in the top-right corner</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter details and set the start and end dates for your cycle.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click <strong>Create cycle</strong> and you're ready to go!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add existing work items to the Cycle or create new ones.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> To create a new Cycle quickly, just press <code class=\"rounded bg-custom-background-80 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-custom-border-200\" spellcheck=\"false\">Q</code> from anywhere in your project!</p></div><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to learn more?</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Starting and stopping cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Transferring work items between cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Tracking progress with charts</p></li></ul><p class=\"editor-paragraph-block\">Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/cycles\">detailed documentation</a> for everything you need to know!</p>",
+    "description_html": "<p class=\"editor-paragraph-block\">A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.</p><h2 class=\"editor-heading-block\"><strong>Setup Cycles</strong></h2><ol class=\"list-decimal pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Go to the <strong>Cycles</strong> section in your project (you can find it in the left sidebar)</p><image-component src=\"https://media.docs.plane.so/seed_assets/61.png\" width=\"1144.380859375px\" height=\"341.8747850334119px\" id=\"9c3aea94-703a-4d4c-8c39-4201e994711d\" aspectratio=\"3.3473684210526318\"></image-component></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click the <strong>Add cycle </strong>button in the top-right corner</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enter details and set the start and end dates for your cycle.</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Click <strong>Create cycle</strong> and you're ready to go!</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Add existing work items to the Cycle or create new ones.</p></li></ol><div data-emoji-unicode=\"128161\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Tip:</strong> To create a new Cycle quickly, just press <code class=\"rounded bg-layer-1 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-subtle-1\" spellcheck=\"false\">Q</code> from anywhere in your project!</p></div><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\">Want to learn more?</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Starting and stopping cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Transferring work items between cycles</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Tracking progress with charts</p></li></ul><p class=\"editor-paragraph-block\">Check out our <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer\" href=\"https://docs.plane.so/core-concepts/cycles\">detailed documentation</a> for everything you need to know!</p>",
     "description_stripped": "A Cycle in Plane is like a sprint - a dedicated timeframe where your team focuses on completing specific work items. It helps you break down your project into manageable chunks with clear start and end dates so everyone knows what to work on and when it needs to be done.Setup CyclesGo to the Cycles section in your project (you can find it in the left sidebar)Click the Add cycle button in the top-right cornerEnter details and set the start and end dates for your cycle.Click Create cycle and you're ready to go!Add existing work items to the Cycle or create new ones.Tip: To create a new Cycle quickly, just press Q from anywhere in your project!Want to learn more?Starting and stopping cyclesTransferring work items between cyclesTracking progress with chartsCheck out our detailed documentation for everything you need to know!",
     "sort_order": 6000,
     "state_id": 1,
@@ -86,7 +86,7 @@
     "id": 7,
     "name": "6. Customize your settings ⚙️",
     "sequence_id": 7,
-    "description_html": "<p class=\"editor-paragraph-block\">Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!</p><h2 class=\"editor-heading-block\">Workspace settings</h2><p class=\"editor-paragraph-block\">Remember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite and manage workspace members</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Upgrade plans and manage billing</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Import data from other tools</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Export your data</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Manage integrations</p></li></ul><h2 class=\"editor-heading-block\">Project Settings</h2><p class=\"editor-paragraph-block\">Each project has its own settings where you can:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Change project details and visibility</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite specific members to just this project</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Customize your workflow States (like adding a \"Testing\" state)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Create and organize Labels</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enable or disable features you need (or don't need)</p></li></ul><h2 class=\"editor-heading-block\">Your Profile Settings</h2><p class=\"editor-paragraph-block\">You can also customize your own personal experience! Click on your profile icon in the top-right corner to find:</p><ul class=\"list-disc pl-7 space-y-[--list-spacing-y] tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Profile settings (update your name, photo, etc.)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose your timezone and preferred language for the interface</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Email notification preferences (what you want to be alerted about)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Appearance settings (light/dark mode)<br></p></li></ul><p class=\"editor-paragraph-block\">Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!</p><div data-emoji-unicode=\"128278\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f516.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note:</strong> Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.</p></div><p class=\"editor-paragraph-block\"></p><div class=\"py-4 border-custom-border-400\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\"></p>",
+    "description_html": "<p class=\"editor-paragraph-block\">Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!</p><h2 class=\"editor-heading-block\">Workspace settings</h2><p class=\"editor-paragraph-block\">Remember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite and manage workspace members</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Upgrade plans and manage billing</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Import data from other tools</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Export your data</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Manage integrations</p></li></ul><h2 class=\"editor-heading-block\">Project Settings</h2><p class=\"editor-paragraph-block\">Each project has its own settings where you can:</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Change project details and visibility</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Invite specific members to just this project</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Customize your workflow States (like adding a \"Testing\" state)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Create and organize Labels</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Enable or disable features you need (or don't need)</p></li></ul><h2 class=\"editor-heading-block\">Your Profile Settings</h2><p class=\"editor-paragraph-block\">You can also customize your own personal experience! Click on your profile icon in the top-right corner to find:</p><ul class=\"list-disc pl-7 space-y-(--list-spacing-y) tight\" data-tight=\"true\"><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Profile settings (update your name, photo, etc.)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Choose your timezone and preferred language for the interface</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Email notification preferences (what you want to be alerted about)</p></li><li class=\"not-prose space-y-2\"><p class=\"editor-paragraph-block\">Appearance settings (light/dark mode)<br></p></li></ul><p class=\"editor-paragraph-block\">Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!</p><div data-emoji-unicode=\"128278\" data-emoji-url=\"https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f516.png\" data-logo-in-use=\"emoji\" data-background=\"green\" data-block-type=\"callout-component\"><p class=\"editor-paragraph-block\"><strong>Note:</strong> Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.</p></div><p class=\"editor-paragraph-block\"></p><div class=\"py-4 border-strong-1\" data-type=\"horizontalRule\"><div></div></div><p class=\"editor-paragraph-block\"></p>",
     "description_stripped": "Now that you're getting familiar with Plane, let's explore how you can customize settings to make it work just right for you and your team!Workspace settingsRemember those workspace settings we mentioned when inviting team members? There's a lot more you can do there:Invite and manage workspace membersUpgrade plans and manage billingImport data from other toolsExport your dataManage integrationsProject SettingsEach project has its own settings where you can:Change project details and visibilityInvite specific members to just this projectCustomize your workflow States (like adding a \"Testing\" state)Create and organize LabelsEnable or disable features you need (or don't need)Your Profile SettingsYou can also customize your own personal experience! Click on your profile icon in the top-right corner to find:Profile settings (update your name, photo, etc.)Choose your timezone and preferred language for the interfaceEmail notification preferences (what you want to be alerted about)Appearance settings (light/dark mode)Taking a few minutes to set things up just the way you like will make your everyday Plane experience much smoother!Note: Some settings are only available to workspace or project admins. If you don't see certain options, you might need admin access.",
     "sort_order": 7000,
     "state_id": 1,

apps/api/plane/settings/common.py

@@ -36,6 +36,7 @@ INSTALLED_APPS = [
     "django.contrib.auth",
     "django.contrib.contenttypes",
     "django.contrib.sessions",
+    "django.contrib.staticfiles",
     # Inhouse apps
     "plane.analytics",
     "plane.app",
@@ -58,6 +59,7 @@ INSTALLED_APPS = [
 MIDDLEWARE = [
     "corsheaders.middleware.CorsMiddleware",
     "django.middleware.security.SecurityMiddleware",
+    "whitenoise.middleware.WhiteNoiseMiddleware",
     "plane.authentication.middleware.session.SessionMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",

apps/api/plane/tests/unit/serializers/test_label.py

@@ -10,9 +10,7 @@ class TestLabelSerializer:
     @pytest.mark.django_db
     def test_label_serializer_create_valid_data(self, db, workspace):
         """Test creating a label with valid data"""
-        project = Project.objects.create(
-            name="Test Project", identifier="TEST", workspace=workspace
-        )
+        project = Project.objects.create(name="Test Project", identifier="TEST", workspace=workspace)
 
         serializer = LabelSerializer(
             data={"name": "Test Label"},
@@ -30,14 +28,10 @@ class TestLabelSerializer:
     @pytest.mark.django_db
     def test_label_serializer_create_duplicate_name(self, db, workspace):
         """Test creating a label with a duplicate name"""
-        project = Project.objects.create(
-            name="Test Project", identifier="TEST", workspace=workspace
-        )
+        project = Project.objects.create(name="Test Project", identifier="TEST", workspace=workspace)
 
         Label.objects.create(name="Test Label", project=project)
 
-        serializer = LabelSerializer(
-            data={"name": "Test Label"}, context={"project_id": project.id}
-        )
+        serializer = LabelSerializer(data={"name": "Test Label"}, context={"project_id": project.id})
         assert not serializer.is_valid()
         assert serializer.errors == {"name": ["LABEL_NAME_ALREADY_EXISTS"]}

apps/api/plane/utils/content_validator.py

@@ -56,9 +56,7 @@ def validate_binary_data(data):
     # Check for suspicious text patterns (HTML/JS)
     try:
         decoded_text = binary_data.decode("utf-8", errors="ignore")[:200]
-        if any(
-            pattern in decoded_text.lower() for pattern in SUSPICIOUS_BINARY_PATTERNS
-        ):
+        if any(pattern in decoded_text.lower() for pattern in SUSPICIOUS_BINARY_PATTERNS):
             return False, "Binary data contains suspicious content patterns"
     except Exception:
         pass  # Binary data might not be decodable as text, which is fine

apps/api/plane/utils/cycle_transfer_issues.py

@@ -51,9 +51,7 @@ def transfer_cycle_issues(
         dict: Response data with success or error message
     """
     # Get the new cycle
-    new_cycle = Cycle.objects.filter(
-        workspace__slug=slug, project_id=project_id, pk=new_cycle_id
-    ).first()
+    new_cycle = Cycle.objects.filter(workspace__slug=slug, project_id=project_id, pk=new_cycle_id).first()
 
     # Check if new cycle is already completed
     if new_cycle.end_date is not None and new_cycle.end_date < timezone.now():
@@ -216,9 +214,7 @@ def transfer_cycle_issues(
         assignee_estimate_distribution = [
             {
                 "display_name": item["display_name"],
-                "assignee_id": (
-                    str(item["assignee_id"]) if item["assignee_id"] else None
-                ),
+                "assignee_id": (str(item["assignee_id"]) if item["assignee_id"] else None),
                 "avatar_url": item.get("avatar_url"),
                 "total_estimates": item["total_estimates"],
                 "completed_estimates": item["completed_estimates"],
@@ -310,9 +306,7 @@ def transfer_cycle_issues(
             )
         )
         .values("display_name", "assignee_id", "avatar_url")
-        .annotate(
-            total_issues=Count("id", filter=Q(archived_at__isnull=True, is_draft=False))
-        )
+        .annotate(total_issues=Count("id", filter=Q(archived_at__isnull=True, is_draft=False)))
         .annotate(
             completed_issues=Count(
                 "id",
@@ -360,9 +354,7 @@ def transfer_cycle_issues(
         .annotate(color=F("labels__color"))
         .annotate(label_id=F("labels__id"))
         .values("label_name", "color", "label_id")
-        .annotate(
-            total_issues=Count("id", filter=Q(archived_at__isnull=True, is_draft=False))
-        )
+        .annotate(total_issues=Count("id", filter=Q(archived_at__isnull=True, is_draft=False)))
         .annotate(
             completed_issues=Count(
                 "id",
@@ -409,9 +401,7 @@ def transfer_cycle_issues(
     )
 
     # Get the current cycle and save progress snapshot
-    current_cycle = Cycle.objects.filter(
-        workspace__slug=slug, project_id=project_id, pk=cycle_id
-    ).first()
+    current_cycle = Cycle.objects.filter(workspace__slug=slug, project_id=project_id, pk=cycle_id).first()
 
     current_cycle.progress_snapshot = {
         "total_issues": old_cycle.total_issues,
@@ -461,9 +451,7 @@ def transfer_cycle_issues(
         )
 
     # Bulk update cycle issues
-    cycle_issues = CycleIssue.objects.bulk_update(
-        updated_cycles, ["cycle_id"], batch_size=100
-    )
+    cycle_issues = CycleIssue.objects.bulk_update(updated_cycles, ["cycle_id"], batch_size=100)
 
     # Capture Issue Activity
     issue_activity.delay(

apps/api/plane/utils/openapi/decorators.py

@@ -263,6 +263,7 @@ def state_docs(**kwargs):
 
     return extend_schema(**_merge_schema_options(defaults, kwargs))
 
+
 def sticky_docs(**kwargs):
     """Decorator for sticky management endpoints"""
     defaults = {
@@ -276,4 +277,4 @@ def sticky_docs(**kwargs):
         },
     }
 
-    return extend_schema(**_merge_schema_options(defaults, kwargs))
+    return extend_schema(**_merge_schema_options(defaults, kwargs))

apps/api/plane/utils/porters/__init__.py

@@ -0,0 +1,15 @@
+from .formatters import BaseFormatter, CSVFormatter, JSONFormatter, XLSXFormatter
+from .exporter import DataExporter
+from .serializers import IssueExportSerializer
+
+__all__ = [
+    # Formatters
+    "BaseFormatter",
+    "CSVFormatter",
+    "JSONFormatter",
+    "XLSXFormatter",
+    # Exporters
+    "DataExporter",
+    # Export Serializers
+    "IssueExportSerializer",
+]