chore: updated page and component backgrounds

2024-06-14 14:31:34 +00:00 · 2024-02-09 13:01:46 +05:30 · 2024-02-09 13:01:46 +05:30 · 146d4e72a4
commit 146d4e72a4
parent 2e444c1426
82 changed files with 200 additions and 207 deletions
--- a/packages/editor/core/src/styles/editor.css
+++ b/packages/editor/core/src/styles/editor.css
@ -197,7 +197,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
    th {
      font-weight: bold;
      text-align: left;
-      background-color: rgb(var(--color-primary-100));
+      background-color: var(--color-primary-90);
    }

    td:hover {
--- a/packages/editor/core/src/styles/table.css
+++ b/packages/editor/core/src/styles/table.css
@ -43,7 +43,7 @@
 .tableWrapper table th {
  font-weight: bold;
  text-align: left;
-  background-color: rgba(var(--color-primary-100));
+  background-color: var(--color-primary-90);
 }

 .tableWrapper table th * {
@ -112,7 +112,7 @@
 }

 .tableWrapper .tableControls .rowsControlDiv {
-  background-color: rgba(var(--color-primary-100));
+  background-color: var(--color-primary-90);
  border: 1px solid var(--color-neutral-70);
  border-radius: 2px;
  background-size: 1.25rem;
@ -127,7 +127,7 @@
 }

 .tableWrapper .tableControls .columnsControlDiv {
-  background-color: rgba(var(--color-primary-100));
+  background-color: var(--color-primary-90);
  border: 1px solid var(--color-neutral-70);
  border-radius: 2px;
  background-size: 1.25rem;
@ -166,7 +166,7 @@

 .tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
-  background-color: rgba(var(--color-background-100), 0.5);
+  background-color: var(--color-neutral-30);
 }

 .tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
--- a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
+++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
@ -33,7 +33,7 @@ export const TableHeader = Node.create<TableHeaderOptions>({
        },
      },
      background: {
-        default: "rgb(var(--color-primary-100))",
+        default: "var(--color-primary-90)",
      },
    };
  },
--- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@ -224,7 +224,7 @@ function createColorPickerToolbox({
  onSelectColor?: (color: string) => void;
 }) {
  const items = {
-    Default: "rgb(var(--color-primary-100))",
+    Default: "var(--color-primary-90)",
    Orange: "#FFE5D1",
    Grey: "#F1F1F1",
    Yellow: "#FEF3C7",
@ -437,16 +437,19 @@ export class TableView implements NodeView {
  }

  updateControls() {
-    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce((acc, curr) => {
-      if (curr.spec.hoveredCell !== undefined) {
-        acc["hoveredCell"] = curr.spec.hoveredCell;
-      }
+    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce(
+      (acc, curr) => {
+        if (curr.spec.hoveredCell !== undefined) {
+          acc["hoveredCell"] = curr.spec.hoveredCell;
+        }

-      if (curr.spec.hoveredTable !== undefined) {
-        acc["hoveredTable"] = curr.spec.hoveredTable;
-      }
-      return acc;
-    }, {} as Record<string, HTMLElement>) as any;
+        if (curr.spec.hoveredTable !== undefined) {
+          acc["hoveredTable"] = curr.spec.hoveredTable;
+        }
+        return acc;
+      },
+      {} as Record<string, HTMLElement>
+    ) as any;

    if (table === undefined || cell === undefined) {
      return this.root.classList.add("controls--disabled");
--- a/packages/editor/document-editor/src/ui/components/editor-header.tsx
+++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx
@ -83,7 +83,7 @@ export const EditorHeader = (props: IEditorHeader) => {
            }`}
          >
            {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
-              <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
+              <RefreshCw className="h-4 w-4 stroke-neutral-text-medium" />
            )}
            <span className="text-sm text-neutral-text-medium">
              {isSubmitting === "submitting" ? "Saving..." : "Saved"}
--- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx
+++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx
@ -156,13 +156,13 @@ export const PageRenderer = (props: IPageRenderer) => {
      {!readonly ? (
        <input
          onChange={(e) => handlePageTitleChange(e.target.value)}
-          className="-mt-2 w-full break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none"
+          className="-mt-2 w-full break-words border-none pr-5 text-4xl font-bold outline-none bg-transparent"
          value={pageTitle}
        />
      ) : (
        <input
          onChange={(e) => handlePageTitleChange(e.target.value)}
-          className="-mt-2 w-full overflow-x-clip break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none"
+          className="-mt-2 w-full overflow-x-clip break-words border-none pr-5 text-4xl font-bold outline-none"
          value={pageTitle}
          disabled
        />
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@ -310,14 +310,6 @@ export const theme = {
  },
  extend: {
    keyframes: {
-      leftToaster: {
-        "0%": { left: "-20rem" },
-        "100%": { left: "0" },
-      },
-      rightToaster: {
-        "0%": { right: "-20rem" },
-        "100%": { right: "0" },
-      },
      "bar-loader": {
        from: { left: "-100%" },
        to: { left: "100%" },
--- a/packages/ui/src/progress/linear-progress-indicator.tsx
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@ -45,9 +45,13 @@ export const LinearProgressIndicator: React.FC<Props> = ({
      })}
    >
      {total === 0 ? (
-        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
+        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-neutral-component-surface-medium rounded-sm">
+          {bars}
+        </div>
      ) : (
-        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
+        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-neutral-component-surface-medium rounded-sm">
+          {bars}
+        </div>
      )}
    </div>
  );
--- a/space/components/accounts/sign-in-forms/email-form.tsx
+++ b/space/components/accounts/sign-in-forms/email-form.tsx
@ -105,7 +105,7 @@ export const EmailForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
--- a/space/components/accounts/sign-in-forms/password.tsx
+++ b/space/components/accounts/sign-in-forms/password.tsx
@ -160,7 +160,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
--- a/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
+++ b/space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
@ -102,7 +102,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
--- a/space/components/accounts/sign-in-forms/unique-code.tsx
+++ b/space/components/accounts/sign-in-forms/unique-code.tsx
@ -187,7 +187,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
--- a/space/components/issues/peek-overview/issue-reaction.tsx
+++ b/space/components/issues/peek-overview/issue-reaction.tsx
@ -11,7 +11,7 @@ export const IssueReactions: React.FC = () => {
          <div className="flex items-center gap-2">
            <IssueVotes />
          </div>
-          <div className="h-8 w-0.5 bg-custom-background-200" />
+          <div className="h-8 w-0.5" />
        </>
      )}
      {projectStore?.deploySettings?.reactions && (
--- a/web/components/account/sign-in-forms/email.tsx
+++ b/web/components/account/sign-in-forms/email.tsx
@ -93,7 +93,7 @@ export const SignInEmailForm: React.FC<Props> = observer((props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
--- a/web/components/account/sign-in-forms/optional-set-password.tsx
+++ b/web/components/account/sign-in-forms/optional-set-password.tsx
@ -131,12 +131,12 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
                />
                {showPassword ? (
                  <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => setShowPassword(false)}
                  />
                ) : (
                  <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => setShowPassword(true)}
                  />
                )}
--- a/web/components/account/sign-in-forms/password.tsx
+++ b/web/components/account/sign-in-forms/password.tsx
@ -139,7 +139,7 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => {
                      if (isSmtpConfigured) handleEmailClear();
                      else onChange("");
@ -170,12 +170,12 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
                />
                {showPassword ? (
                  <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => setShowPassword(false)}
                  />
                ) : (
                  <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => setShowPassword(true)}
                  />
                )}
--- a/web/components/account/sign-in-forms/unique-code.tsx
+++ b/web/components/account/sign-in-forms/unique-code.tsx
@ -154,7 +154,7 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={handleEmailClear}
                  />
                )}
--- a/web/components/account/sign-up-forms/email.tsx
+++ b/web/components/account/sign-up-forms/email.tsx
@ -93,7 +93,7 @@ export const SignUpEmailForm: React.FC<Props> = observer((props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
--- a/web/components/account/sign-up-forms/optional-set-password.tsx
+++ b/web/components/account/sign-up-forms/optional-set-password.tsx
@ -135,12 +135,12 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
                />
                {showPassword ? (
                  <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => setShowPassword(false)}
                  />
                ) : (
                  <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => setShowPassword(true)}
                  />
                )}
--- a/web/components/account/sign-up-forms/password.tsx
+++ b/web/components/account/sign-up-forms/password.tsx
@ -98,7 +98,7 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => onChange("")}
                  />
                )}
@ -126,12 +126,12 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
                />
                {showPassword ? (
                  <EyeOff
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => setShowPassword(false)}
                  />
                ) : (
                  <Eye
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={() => setShowPassword(true)}
                  />
                )}
--- a/web/components/account/sign-up-forms/unique-code.tsx
+++ b/web/components/account/sign-up-forms/unique-code.tsx
@ -155,7 +155,7 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
                />
                {value.length > 0 && (
                  <XCircle
-                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                    onClick={handleEmailClear}
                  />
                )}
--- a/web/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
@ -19,7 +19,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
        data={[
          {
            id: "issues_closed",
-            color: "rgb(var(--color-primary-100))",
+            color: "var(--color-primary-90)",
            data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
              x: month.shortTitle,
              y:
@ -41,9 +41,6 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
            {datum.slice.points[0].data.xFormatted}
          </div>
        )}
-        theme={{
-          background: "var(--color-neutral-30)",
-        }}
        enableArea
      />
    ) : (
--- a/web/components/core/sidebar/progress-chart.tsx
+++ b/web/components/core/sidebar/progress-chart.tsx
@ -140,7 +140,7 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
          axis: {
            domain: {
              line: {
-                stroke: "rgb(var(--color-border))",
+                stroke: "var(--color-neutral-70)",
                strokeWidth: 1,
              },
            },
--- a/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@ -7,7 +7,7 @@ export const SidebarHamburgerToggle: FC = observer(() => {
  const { theme: themStore } = useApplication();
  return (
    <div
-      className="w-7 h-7 rounded flex justify-center items-center bg-neutral-component-surface-dark transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      className="w-7 h-7 rounded flex justify-center items-center bg-neutral-component-surface-dark transition-all hover:bg-neutral-component-surface-medium cursor-pointer group md:hidden"
      onClick={() => themStore.toggleSidebar()}
    >
      <Menu size={14} className="text-neutral-text-medium group-hover:text-neutral-text-strong transition-all" />
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@ -159,7 +159,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
        projectId={projectId}
      />
      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="group flex flex-col md:flex-row w-full items-center justify-between gap-5 border-b border-neutral-border-subtle bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
+        <div className="group flex flex-col md:flex-row w-full items-center justify-between gap-5 border-b border-neutral-border-subtle bg-neutral-component-surface-light px-5 py-6 text-sm hover:bg-neutral-component-surface-medium">
          <div className="relative w-full flex items-center justify-between gap-3 overflow-hidden">
            <div className="relative w-full flex items-center gap-3 overflow-hidden">
              <div className="flex-shrink-0">
--- a/web/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/components/dashboard/widgets/assigned-issues.tsx
@ -71,7 +71,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
  if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;

  return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
+    <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
      <div className="flex items-center justify-between gap-2 p-6 pl-7">
        <Link
          href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
--- a/web/components/dashboard/widgets/created-issues.tsx
+++ b/web/components/dashboard/widgets/created-issues.tsx
@ -68,7 +68,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
  if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;

  return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
+    <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
      <div className="flex items-center justify-between gap-2 p-6 pl-7">
        <Link
          href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
--- a/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/components/dashboard/widgets/issue-panels/tabs-list.tsx
@ -28,7 +28,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
    >
      <div
        className={cn(
-          "absolute top-1/2 left-[1px] bg-custom-background-100 rounded-[3px] transition-all duration-500 ease-in-out",
+          "absolute top-1/2 left-[1px] bg-neutral-component-surface-light rounded-[3px] transition-all duration-500 ease-in-out",
          {
            // right shadow
            "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
@ -48,7 +48,7 @@ export const TabsList: React.FC<Props> = observer((props) => {
          className={cn(
            "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-neutral-text-subtle focus:outline-none transition duration-500",
            {
-              "text-neutral-text-strong bg-custom-background-100": selectedTab === tab.key,
+              "text-neutral-text-strong bg-neutral-component-surface-light": selectedTab === tab.key,
              "hover:text-neutral-text-medium": selectedTab !== tab.key,
            }
          )}
--- a/web/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/components/dashboard/widgets/issues-by-priority.tsx
@ -132,7 +132,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
  };

  return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
+    <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
        <Link
          href={`/${workspaceSlug}/workspace-views/assigned`}
--- a/web/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/components/dashboard/widgets/issues-by-state-group.tsx
@ -130,7 +130,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
  };

  return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
+    <div className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
        <Link
          href={`/${workspaceSlug}/workspace-views/assigned`}
--- a/web/components/dashboard/widgets/overview-stats.tsx
+++ b/web/components/dashboard/widgets/overview-stats.tsx
@ -64,7 +64,7 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {

  return (
    <div
-      className="bg-custom-background-100 rounded-xl border-[0.5px] border-neutral-border-medium w-full grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2  p-0.5 hover:shadow-custom-shadow-4xl duration-300
+      className="bg-neutral-component-surface-light rounded-xl border-[0.5px] border-neutral-border-medium w-full grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2  p-0.5 hover:shadow-custom-shadow-4xl duration-300
        [&>div>a>div]:border-r
        [&>div:last-child>a>div]:border-0
        [&>div>a>div]:border-neutral-border-medium
--- a/web/components/dropdowns/member/workspace-member.tsx
+++ b/web/components/dropdowns/member/workspace-member.tsx
@ -184,12 +184,12 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
      {isOpen && (
        <Combobox.Options className="fixed z-10" static>
          <div
-            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
+            className="my-1 w-48 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none"
            ref={setPopperElement}
            style={styles.popper}
            {...attributes.popper}
          >
-            <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-custom-background-90 px-2">
+            <div className="flex items-center gap-1.5 rounded border border-neutral-border-subtle bg-neutral-component-surface-medium px-2">
              <Search className="h-3.5 w-3.5 text-neutral-text-subtle" strokeWidth={1.5} />
              <Combobox.Input
                className="w-full bg-transparent py-1 text-xs text-neutral-text-medium placeholder:text-neutral-text-subtle focus:outline-none"
--- a/web/components/estimates/estimates-list.tsx
+++ b/web/components/estimates/estimates-list.tsx
@ -97,7 +97,7 @@ export const EstimatesList: React.FC = observer(() => {

      {projectEstimates ? (
        projectEstimates.length > 0 ? (
-          <section className="h-full overflow-y-auto bg-neutral-component-surface-light">
+          <section className="h-full overflow-y-auto">
            {projectEstimates.map((estimate) => (
              <EstimateListItem
                key={estimate.id}
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@ -38,7 +38,7 @@ export const ProjectsHeader = observer(() => {
      </div>
      <div className="flex w-full justify-end items-center gap-3">
        {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
-          <div className=" flex items-center justify-start gap-1 rounded-md border border-neutral-border-medium bg-custom-background-100 px-2.5 py-1.5 text-neutral-text-subtle">
+          <div className=" flex items-center justify-start gap-1 rounded-md border border-neutral-border-medium bg-neutral-component-surface-light px-2.5 py-1.5 text-neutral-text-subtle">
            <Search className="h-3.5" />
            <input
              className="border-none w-full bg-transparent text-sm focus:outline-none"
--- a/web/components/headers/user-profile.tsx
+++ b/web/components/headers/user-profile.tsx
@ -47,15 +47,15 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
          <div className="flex gap-4 md:hidden">
            <CustomMenu
              maxHeight={"md"}
-              className="flex flex-grow justify-center text-custom-text-200 text-sm"
+              className="flex flex-grow justify-center text-neutral-text-medium text-sm"
              placement="bottom-start"
              customButton={
                <div className="flex gap-2 items-center px-2 py-1.5 border border-custom-border-400 rounded-md">
-                  <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{type}</span>
+                  <span className="flex flex-grow justify-center text-neutral-text-medium text-sm">{type}</span>
                  <ChevronDown className="w-4 h-4 text-custom-text-400" />
                </div>
              }
-              customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+              customButtonClassName="flex flex-grow justify-center text-neutral-text-medium text-sm"
              closeOnSelect
            >
              <></>
@ -81,7 +81,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
              <PanelRight
                className={cn(
                  "w-4 h-4 block md:hidden",
-                  !themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
+                  !themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-neutral-text-medium"
                )}
              />
            </button>
--- a/web/components/instance/setup-form/sign-in-form.tsx
+++ b/web/components/instance/setup-form/sign-in-form.tsx
@ -95,7 +95,7 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
              />
              {value.length > 0 && (
                <XCircle
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                  onClick={() => setValue("email", "")}
                />
              )}
@ -120,12 +120,12 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
              />
              {showPassword ? (
                <EyeOff
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                  onClick={() => setShowPassword(false)}
                />
              ) : (
                <Eye
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                  onClick={() => setShowPassword(true)}
                />
              )}
--- a/web/components/instance/sidebar-dropdown.tsx
+++ b/web/components/instance/sidebar-dropdown.tsx
@ -143,7 +143,7 @@ export const InstanceSidebarDropdown = observer(() => {
              <div className="p-2 pb-0">
                <Menu.Item as="button" type="button" className="w-full">
                  <Link href={`/${redirectWorkspaceSlug}`}>
-                    <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                    <span className="flex w-full items-center justify-center rounded bg-primary-component-surface-light px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-primary-component-surface-medium">
                      Exit God Mode
                    </span>
                  </Link>
--- a/web/components/instance/sidebar-menu.tsx
+++ b/web/components/instance/sidebar-menu.tsx
@ -59,7 +59,7 @@ export const InstanceAdminSidebarMenu = () => {
                <div
                  className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
                    isActive
-                      ? "bg-custom-primary-100/10 text-primary-text-subtle"
+                      ? "bg-primary-component-surface-light text-primary-text-subtle"
                      : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                  } ${sidebarCollapsed ? "justify-center" : ""}`}
                >
--- a/web/components/issues/issue-detail/relation-select.tsx
+++ b/web/components/issues/issue-detail/relation-select.tsx
@ -125,7 +125,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                return (
                  <div
                    key={relationIssueId}
-                    className={`group flex items-center gap-1 rounded px-1.5 pt-1 pb-1 leading-3 hover:bg-custom-background-90 ${issueRelationObject[relationKey].className}`}
+                    className={`group flex items-center gap-1 rounded px-1.5 pt-1 pb-1 leading-3 hover:bg-neutral-component-surface-medium ${issueRelationObject[relationKey].className}`}
                  >
                    <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name}>
                      <Link
--- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@ -91,7 +91,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {

  return (
    <>
-      <div className="h-full w-full overflow-hidden bg-neutral-component-surface-light pt-4">
+      <div className="h-full w-full overflow-hidden pt-4">
        <DragDropContext onDragEnd={onDragEnd}>
          <CalendarChart
            issuesFilterStore={issuesFilterStore}
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@ -54,7 +54,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
  const totalIssues = issueIdList?.length ?? 0;
  return (
    <>
-      <div className="group relative flex h-full w-full flex-col bg-neutral-component-surface-medium">
+      <div className="group relative flex h-full w-full flex-col">
        {/* header */}
        <div
          className={`flex-shrink-0 px-2 py-1 text-right text-xs ${
@ -63,11 +63,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                ? "font-medium"
                : "text-neutral-text-medium"
              : "font-medium" // if week layout, highlight all days
-          } ${
-            date.date.getDay() === 0 || date.date.getDay() === 6
-              ? "bg-neutral-component-surface-medium"
-              : "bg-neutral-component-surface-light"
-          }`}
+          } ${[0, 6].includes(date.date.getDay()) ? "bg-neutral-component-surface-light" : ""}`}
        >
          {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
          {date.date.getDate()}
@ -79,9 +75,9 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
            {(provided, snapshot) => (
              <div
                className={`h-full w-full select-none overflow-y-auto ${
-                  snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
-                    ? "bg-neutral-component-surface-medium"
-                    : "bg-neutral-component-surface-light"
+                  snapshot.isDraggingOver || [0, 6].includes(date.date.getDay())
+                    ? "bg-neutral-component-surface-light"
+                    : ""
                } ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
                {...provided.droppableProps}
                ref={provided.innerRef}
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@ -89,10 +89,13 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                      className={cn(
                        "group/calendar-block flex h-8 w-full items-center justify-between gap-1.5 rounded border-[0.5px] border-neutral-border-medium hover:border-neutral-border-strong px-1 py-1.5 ",
                        {
-                          "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100":
+                          "bg-neutral-component-surface-medium shadow-custom-shadow-rg border-custom-primary-100":
                            snapshot.isDragging,
                        },
-                        { "bg-custom-background-100 hover:bg-custom-background-90": !snapshot.isDragging },
+                        {
+                          "bg-neutral-component-surface-light hover:bg-neutral-component-surface-medium":
+                            !snapshot.isDragging,
+                        },
                        {
                          "border border-custom-primary-70 hover:border-custom-primary-70":
                            peekIssue?.issueId === issue.id,
--- a/web/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-header.tsx
@ -21,10 +21,10 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
        <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-custom-primary-100" />
      )}
      {Object.values(DAYS_LIST).map((day) => {
-        if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
+        if (!showWeekends && ["Sat", "Sun"].includes(day.shortTitle)) return null;

        return (
-          <div key={day.shortTitle} className="flex h-11 items-center bg-neutral-component-surface-medium px-4">
+          <div key={day.shortTitle} className="flex h-11 items-center bg-neutral-component-surface-light px-4">
            {day.shortTitle}
          </div>
        );
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@ -240,13 +240,13 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
      />

      {showLoader && issues?.loader === "init-loader" && (
-        <div className="fixed right-2 top-16 z-30 flex h-10 w-10 items-center justify-center rounded bg-neutral-component-surface-dark shadow-custom-shadow-sm">
+        <div className="fixed right-2 top-16 z-30 flex h-10 w-10 items-center justify-center bg-neutral-component-surface-dark rounded shadow-custom-shadow-sm">
          <Spinner className="h-5 w-5" />
        </div>
      )}

-      <div className="horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90">
-        <div className="relative h-max w-max min-w-full bg-custom-background-90 px-2">
+      <div className="horizontal-scroll-enable relative h-full w-full overflow-auto">
+        <div className="relative h-max w-max min-w-full px-2">
          <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
            {/* drag and delete component */}
            <div
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@ -130,11 +130,11 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
          ref={provided.innerRef}
        >
          {issue.tempId !== undefined && (
-            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
+            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-neutral-component-surface-light/20" />
          )}
          <div
            className={cn(
-              "space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-custom-background-100 px-3 py-2 text-sm transition-all hover:border-neutral-border-strong",
+              "space-y-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-3 py-2 text-sm transition-all hover:border-neutral-border-strong",
              { "hover:cursor-grab": !isDragDisabled },
              { "border-custom-primary-100": snapshot.isDragging },
              { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }
--- a/web/components/issues/issue-layouts/list/block.tsx
+++ b/web/components/issues/issue-layouts/list/block.tsx
@ -51,7 +51,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
    <>
      <div
        className={cn(
-          "relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm border border-transparent border-b-custom-border-200",
+          "relative flex items-center gap-3 bg-neutral-component-surface-light p-3 text-sm border border-transparent border-b-custom-border-200",
          {
            "border border-custom-primary-70 hover:border-custom-primary-70":
              peekIssue && peekIssue.issueId === issue.id,
--- a/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@ -38,7 +38,7 @@ export const IssueColumn = observer((props: Props) => {
    >
      <td
        tabIndex={0}
-        className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-neutral-border-subtle border-r-[1px] border-neutral-border-subtle focus:border-custom-primary-70"
+        className="h-11 w-full min-w-[8rem] bg-neutral-component-surface-light text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-neutral-border-subtle border-r-[1px] border-neutral-border-subtle focus:border-custom-primary-70"
        ref={tableCellRef}
      >
        <Column
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@ -106,7 +106,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
        {/* first column/ issue name and key column */}
        <td
          className={cn(
-            "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] border-neutral-border-medium focus:border-custom-primary-70",
+            "sticky group left-0 h-11  w-[28rem] flex items-center bg-neutral-component-surface-light text-sm after:absolute border-r-[0.5px] border-neutral-border-medium focus:border-custom-primary-70",
            {
              "border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
            }
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
@ -28,7 +28,7 @@ export const SpreadsheetHeaderColumn = observer((props: Props) => {
      shouldRenderProperty={shouldRenderProperty}
    >
      <th
-        className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-neutral-border-subtle focus:border-custom-primary-70"
+        className="h-11 w-full min-w-[8rem] items-center bg-neutral-component-surface-medium text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-neutral-border-subtle focus:border-custom-primary-70"
        ref={tableHeaderCellRef}
        tabIndex={0}
      >
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@ -22,7 +22,7 @@ export const SpreadsheetHeader = (props: Props) => {
    <thead className="sticky top-0 left-0 z-[1] border-b-[0.5px] border-neutral-border-subtle">
      <tr>
        <th
-          className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px]  before:border-neutral-border-subtle"
+          className="sticky left-0 z-[1] h-11 w-[28rem] flex items-center bg-neutral-component-surface-light text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px] before:border-neutral-border-subtle"
          tabIndex={-1}
        >
          <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@ -99,7 +99,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
    );

  return (
-    <div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg bg-custom-background-200 text-neutral-text-medium">
+    <div className="relative flex flex-col h-full w-full overflow-x-hidden whitespace-nowrap rounded-lg text-neutral-text-medium">
      <div ref={portalRef} className="spreadsheet-menu-portal" />
      <div ref={containerRef} className="horizontal-scroll-enable h-full w-full">
        <SpreadsheetTable
--- a/web/components/issues/issue-update-status.tsx
+++ b/web/components/issues/issue-update-status.tsx
@ -27,7 +27,7 @@ export const IssueUpdateStatus: React.FC<Props> = (props) => {
        }`}
      >
        {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
-          <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
+          <RefreshCw className="h-4 w-4 stroke-neutral-text-medium" />
        )}
        <span className="text-sm text-neutral-text-medium">
          {isSubmitting === "submitting" ? "Saving..." : "Saved"}
--- a/web/components/labels/label-block/drag-handle.tsx
+++ b/web/components/labels/label-block/drag-handle.tsx
@ -17,8 +17,8 @@ export const DragHandle = (props: IDragHandle) => {
      }`}
      {...dragHandleProps}
    >
-      <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
-      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-custom-text-400" />
+      <MoreVertical className="h-3.5 w-3.5 stroke-neutral-text-subtle" />
+      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-neutral-text-subtle" />
    </button>
  );
 };
--- a/web/components/page-views/workspace-dashboard.tsx
+++ b/web/components/page-views/workspace-dashboard.tsx
@ -64,7 +64,7 @@ export const WorkspaceDashboardView = observer(() => {
          {joinedProjectIds.length > 0 ? (
            <>
              <IssuePeekOverview />
-              <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
+              <div className="space-y-7 p-7 bg-neutral-page-surface-default h-full w-full flex flex-col overflow-y-auto">
                {currentUser && <UserGreetingsView user={currentUser} />}
                {currentUser && !currentUser.is_tour_completed && (
                  <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@ -52,7 +52,7 @@ export const RecentPagesList: FC = observer(() => {

            return (
              <div key={key}>
-                <h2 className="sticky top-0 z-[1] mb-2 bg-neutral-component-surface-light text-xl font-semibold capitalize">
+                <h2 className="sticky top-0 z-[1] mb-2 text-xl font-semibold capitalize">
                  {replaceUnderscoreIfSnakeCase(key)}
                </h2>
                <PagesListView pageIds={recentProjectPages[key]} />
--- a/web/components/project/integration-card.tsx
+++ b/web/components/project/integration-card.tsx
@ -90,7 +90,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
  return (
    <>
      {integration && (
-        <div className="flex items-center justify-between gap-2 border-b border-neutral-border-subtle bg-neutral-component-surface-light px-4 py-6">
+        <div className="flex items-center justify-between gap-2 border-b border-neutral-border-subtle px-4 py-6">
          <div className="flex items-start gap-4">
            <div className="h-10 w-10 flex-shrink-0">
              <Image
--- a/web/components/project/settings/features-list.tsx
+++ b/web/components/project/settings/features-list.tsx
@ -79,7 +79,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
      {PROJECT_FEATURES_LIST.map((feature) => (
        <div
          key={feature.property}
-          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-neutral-border-subtle bg-neutral-component-surface-light p-4"
+          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-neutral-border-subtle p-4"
        >
          <div className="flex items-start gap-3">
            <div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3">
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@ -151,10 +151,7 @@ export const CreateUpdateStateInline: React.FC<Props> = observer((props) => {
  };

  return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="flex items-center gap-x-2 rounded-[10px] bg-neutral-component-surface-light py-5"
-    >
+    <form onSubmit={handleSubmit(onSubmit)} className="flex items-center gap-x-2 rounded-[10px] py-5">
      <div className="flex-shrink-0">
        <Popover className="relative flex h-full w-full items-center justify-center">
          {({ open }) => (
--- a/web/components/states/project-setting-state-list-item.tsx
+++ b/web/components/states/project-setting-state-list-item.tsx
@ -48,7 +48,7 @@ export const StatesListItem: React.FC<Props> = observer((props) => {
  };

  return (
-    <div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium bg-neutral-component-surface-light px-4 py-3">
+    <div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-neutral-border-medium px-4 py-3">
      <div className="flex items-center gap-3">
        <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
        <div>
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@ -290,8 +290,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
            leaveTo="transform opacity-0 scale-95"
          >
            <Menu.Items
-              className="absolute left-0 z-20 mt-1 flex w-52 origin-top-left  flex-col divide-y
-          divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
+              className="absolute left-0 z-20 mt-1 flex w-52 origin-top-left flex-col divide-y
+          divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-light px-1 py-2 text-xs shadow-lg outline-none"
              ref={setPopperElement}
              style={styles.popper}
              {...attributes.popper}
@ -330,7 +330,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
                <div className="p-2 pb-0">
                  <Link href="/god-mode">
                    <Menu.Item as="button" type="button" className="w-full">
-                      <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                      <span className="flex w-full items-center justify-center rounded bg-primary-component-surface-light px-2 py-1 text-sm font-medium text-primary-text-subtle hover:bg-primary-component-surface-medium">
                        Enter God Mode
                      </span>
                    </Menu.Item>
--- a/web/components/workspace/workspace-active-cycles-upgrade.tsx
+++ b/web/components/workspace/workspace-active-cycles-upgrade.tsx
@ -1,8 +1,6 @@
 import React from "react";
 import Image from "next/image";
-import { observer } from "mobx-react";
-// hooks
-import { useUser } from "hooks/store";
+import { useTheme } from "next-themes";
 // ui
 import { getButtonStyling } from "@plane/ui";
 // icons
@ -12,18 +10,18 @@ import { cn } from "helpers/common.helper";
 // constants
 import { WORKSPACE_ACTIVE_CYCLES_DETAILS } from "constants/cycle";

-export const WorkspaceActiveCyclesUpgrade = observer(() => {
-  // store hooks
-  const { currentUser } = useUser();
-
-  const isDarkMode = currentUser?.theme.theme === "dark";
+export const WorkspaceActiveCyclesUpgrade = () => {
+  // next-themes
+  const { resolvedTheme } = useTheme();
+  // derived values
+  const isDarkMode = resolvedTheme === "dark";

  return (
    <div className="flex flex-col gap-10 pt-8 px-8 rounded-xl h-full">
      <div
        className={cn("flex item-center justify-between rounded-xl min-h-[25rem]", {
-          "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": currentUser?.theme.theme === "dark",
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": currentUser?.theme.theme === "light",
+          "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme === "dark",
+          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": resolvedTheme === "light",
        })}
      >
        <div className="relative px-14 flex flex-col gap-7 justify-center lg:w-1/2">
@ -86,4 +84,4 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
      </div>
    </div>
  );
-});
+};
--- a/web/helpers/string.helper.ts
+++ b/web/helpers/string.helper.ts
@ -76,7 +76,7 @@ export const copyUrlToClipboard = async (path: string) => {
 };

 export const generateRandomColor = (string: string): string => {
-  if (!string) return "rgb(var(--color-primary-100))";
+  if (!string) return "var(--color-primary-90)";

  string = `${string}`;

@ -171,10 +171,10 @@ export const getFetchKeysForIssueMutation = (options: {
  const ganttFetchKey = cycleId
    ? { ganttFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), ganttParams) }
    : moduleId
-      ? { ganttFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), ganttParams) }
-      : viewId
-        ? { ganttFetchKey: VIEW_ISSUES(viewId.toString(), viewGanttParams) }
-        : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };
+    ? { ganttFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), ganttParams) }
+    : viewId
+    ? { ganttFetchKey: VIEW_ISSUES(viewId.toString(), viewGanttParams) }
+    : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };

  return {
    ...ganttFetchKey,
--- a/web/layouts/admin-layout/layout.tsx
+++ b/web/layouts/admin-layout/layout.tsx
@ -28,7 +28,7 @@ export const InstanceAdminLayout: FC<IInstanceAdminLayout> = observer((props) =>
        <AdminAuthWrapper>
          <div className="relative flex h-screen w-full overflow-hidden">
            <InstanceAdminSidebar />
-            <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-component-surface-light">
+            <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-page-surface-default">
              <InstanceAdminHeader />
              <div className="h-full w-full overflow-hidden px-10 py-12">
                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
--- a/web/layouts/admin-layout/sidebar.tsx
+++ b/web/layouts/admin-layout/sidebar.tsx
@ -15,7 +15,7 @@ export const InstanceAdminSidebar: FC<IInstanceAdminSidebar> = observer(() => {

  return (
    <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-light duration-300 md:relative ${
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-sidebar-neutral-page-surface-default duration-300 md:relative ${
        sidebarCollapsed ? "" : "md:w-[280px]"
      } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
    >
--- a/web/layouts/app-layout/layout.tsx
+++ b/web/layouts/app-layout/layout.tsx
@ -43,7 +43,7 @@ export const AppLayout: FC<IAppLayout> = observer((props) => {
        <WorkspaceAuthWrapper>
          <div className="relative flex h-screen w-full overflow-hidden">
            <AppSidebar />
-            <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-component-surface-light">
+            <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-page-surface-default">
              {header}
              <div className="h-full w-full overflow-hidden">
                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
--- a/web/layouts/app-layout/sidebar.tsx
+++ b/web/layouts/app-layout/sidebar.tsx
@ -42,7 +42,7 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {

  return (
    <div
-      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium 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-sidebar-neutral-border-medium bg-sidebar-neutral-page-surface-default duration-300
        fixed md:relative
        ${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
        sm:${themStore.sidebarCollapsed ? "-ml-[280px]" : ""}
--- a/web/layouts/auth-layout/admin-wrapper.tsx
+++ b/web/layouts/auth-layout/admin-wrapper.tsx
@ -23,9 +23,8 @@ export const AdminAuthWrapper: FC<IAdminAuthWrapper> = observer(({ children }) =
    "";

  // if user does not have admin access to the instance
-  if (isUserInstanceAdmin !== undefined && isUserInstanceAdmin === false) {
+  if (isUserInstanceAdmin !== undefined && isUserInstanceAdmin === false)
    return <InstanceAdminRestriction redirectWorkspaceSlug={redirectWorkspaceSlug} />;
-  }

  return <>{children}</>;
 });
--- a/web/layouts/auth-layout/project-wrapper.tsx
+++ b/web/layouts/auth-layout/project-wrapper.tsx
@ -117,7 +117,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
  // check if the project member apis is loading
  if (!projectMemberInfo && projectId && hasPermissionToProject[projectId.toString()] === null)
    return (
-      <div className="grid h-screen place-items-center bg-neutral-component-surface-light p-4">
+      <div className="grid h-screen place-items-center bg-neutral-page-surface-default p-4">
        <div className="flex flex-col items-center gap-3 text-center">
          <Spinner />
        </div>
@ -130,7 +130,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
  // check if the project info is not found.
  if (!projectExists && projectId && hasPermissionToProject[projectId.toString()] === false)
    return (
-      <div className="container grid h-screen place-items-center bg-neutral-component-surface-light">
+      <div className="container grid h-screen place-items-center bg-neutral-page-surface-default">
        <EmptyState
          title="No such project exists"
          description="Try creating a new project"
--- a/web/layouts/auth-layout/user-wrapper.tsx
+++ b/web/layouts/auth-layout/user-wrapper.tsx
@ -42,15 +42,14 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
    shouldRetryOnError: false,
  });

-  if (!currentUser && !currentUserError) {
+  if (!currentUser && !currentUserError)
    return (
-      <div className="grid h-screen place-items-center bg-neutral-component-surface-light p-4">
+      <div className="grid h-screen place-items-center bg-neutral-page-surface-default p-4">
        <div className="flex flex-col items-center gap-3 text-center">
          <Spinner />
        </div>
      </div>
    );
-  }

  if (currentUserError) {
    const redirectTo = router.asPath;
--- a/web/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@ -4,7 +4,7 @@ import Link from "next/link";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useLabel, useMember, useProject, useUser } from "hooks/store";
+import { useMember, useProject, useUser } from "hooks/store";
 // icons
 import { Button, Spinner } from "@plane/ui";

@ -60,7 +60,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
    membership.hasPermissionToCurrentWorkspace === false
  ) {
    return (
-      <div className={`h-screen w-full overflow-hidden bg-neutral-component-surface-light`}>
+      <div className="h-screen w-full overflow-hidden bg-neutral-page-surface-default">
        <div className="grid h-full place-items-center p-4">
          <div className="space-y-8 text-center">
            <div className="space-y-2">
--- a/web/layouts/settings-layout/profile/layout.tsx
+++ b/web/layouts/settings-layout/profile/layout.tsx
@ -19,7 +19,7 @@ export const ProfileSettingsLayout: FC<IProfileSettingsLayout> = (props) => {
      <UserAuthWrapper>
        <div className="relative flex h-screen w-full overflow-hidden">
          <ProfileLayoutSidebar />
-          <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-component-surface-light">
+          <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-page-surface-default">
            {header}
            <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
          </main>
--- a/web/layouts/settings-layout/profile/preferences/layout.tsx
+++ b/web/layouts/settings-layout/profile/preferences/layout.tsx
@ -18,57 +18,59 @@ export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayou
  const router = useRouter();

  const showMenuItem = () => {
-    const item = router.asPath.split('/');
+    const item = router.asPath.split("/");
    let splittedItem = item[item.length - 1];
    splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
    console.log(splittedItem);
    return splittedItem;
-  }
+  };

  const profilePreferenceLinks: Array<{
    label: string;
    href: string;
  }> = [
-      {
-        label: "Theme",
-        href: `/profile/preferences/theme`,
-      },
-      {
-        label: "Email",
-        href: `/profile/preferences/email`,
-      },
-    ];
+    {
+      label: "Theme",
+      href: `/profile/preferences/theme`,
+    },
+    {
+      label: "Email",
+      href: `/profile/preferences/email`,
+    },
+  ];

  return (
-    <ProfileSettingsLayout header={
-      <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
-        <SidebarHamburgerToggle />
-        <CustomMenu
-          maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm"
-          placement="bottom-start"
-          customButton={
-            <div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
-              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{showMenuItem()}</span>
-              <ChevronDown className="w-4 h-4 text-custom-text-400" />
-            </div>
-          }
-          customButtonClassName="flex flex-grow justify-start text-custom-text-200 text-sm"
-        >
-          <></>
-          {profilePreferenceLinks.map((link) => (
-            <CustomMenu.MenuItem
-              className="flex items-center gap-2"
-            >
-              <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">{link.label}</Link>
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
-      </div>
-    }>
+    <ProfileSettingsLayout
+      header={
+        <div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
+          <SidebarHamburgerToggle />
+          <CustomMenu
+            maxHeight={"md"}
+            className="flex flex-grow justify-center text-neutral-text-medium text-sm"
+            placement="bottom-start"
+            customButton={
+              <div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
+                <span className="flex flex-grow justify-center text-neutral-text-medium text-sm">{showMenuItem()}</span>
+                <ChevronDown className="w-4 h-4 text-custom-text-400" />
+              </div>
+            }
+            customButtonClassName="flex flex-grow justify-start text-neutral-text-medium text-sm"
+          >
+            <></>
+            {profilePreferenceLinks.map((link) => (
+              <CustomMenu.MenuItem className="flex items-center gap-2">
+                <Link key={link.href} href={link.href} className="text-custom-text-300 w-full">
+                  {link.label}
+                </Link>
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+        </div>
+      }
+    >
      <div className="relative flex h-screen w-full overflow-hidden">
        <ProfilePreferenceSettingsSidebar />
-        <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-component-surface-light">
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-neutral-page-surface-default">
          {header}
          <div className="h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
        </main>
--- a/web/layouts/settings-layout/profile/preferences/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/preferences/sidebar.tsx
@ -28,7 +28,7 @@ export const ProfilePreferenceSettingsSidebar = () => {
              <div
                className={`rounded-md px-4 py-2 text-sm font-medium ${
                  (link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
-                    ? "bg-custom-primary-100/10 text-primary-text-subtle"
+                    ? "bg-primary-component-surface-light text-primary-text-subtle"
                    : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                }`}
              >
--- a/web/layouts/settings-layout/profile/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/sidebar.tsx
@ -103,7 +103,7 @@ export const ProfileLayoutSidebar = observer(() => {

  return (
    <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-sidebar-neutral-component-surface-light duration-300 md:relative 
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-sidebar-neutral-page-surface-default duration-300 md:relative 
        ${sidebarCollapsed ? "-ml-[280px]" : ""}
        sm:${sidebarCollapsed ? "-ml-[280px]" : ""}
        md:ml-0 ${sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
@ -139,7 +139,7 @@ export const ProfileLayoutSidebar = observer(() => {
                    <div
                      className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                        link.highlight(router.pathname)
-                          ? "bg-custom-primary-100/10 text-primary-text-subtle"
+                          ? "bg-primary-component-surface-light text-primary-text-subtle"
                          : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark"
                      } ${sidebarCollapsed ? "justify-center" : ""}`}
                    >
--- a/web/layouts/settings-layout/project/sidebar.tsx
+++ b/web/layouts/settings-layout/project/sidebar.tsx
@ -28,7 +28,7 @@ export const ProjectSettingsSidebar = () => {
                  <div
                    className={`rounded-md px-4 py-2 text-sm font-medium ${
                      link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
-                        ? "bg-custom-primary-100/10 text-primary-text-subtle"
+                        ? "bg-primary-component-surface-light text-primary-text-subtle"
                        : "text-sidebar-neutral-text-medium hover:bg-sidebar-neutral-component-surface-dark focus:bg-sidebar-neutral-component-surface-dark"
                    }`}
                  >
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@ -37,7 +37,7 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
  return (
    <>
      {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
-        <div className="flex h-full flex-col overflow-hidden bg-neutral-component-surface-light">
+        <div className="flex h-full flex-col overflow-hidden">
          <Tab.Group as={Fragment}>
            <Tab.List as="div" className="space-x-2 border-b border-neutral-border-medium px-5 py-3">
              {ANALYTICS_TABS.map((tab) => (
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@ -133,8 +133,10 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
                      <Tooltip key={layout.key} tooltipContent={layout.title}>
                        <button
                          type="button"
-                          className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                            cycleLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                          className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-neutral-component-surface-light ${
+                            cycleLayout == layout.key
+                              ? "bg-neutral-component-surface-light shadow-custom-shadow-2xs"
+                              : ""
                          }`}
                          onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
                        >
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@ -8,7 +8,7 @@ import { NextPageWithLayout } from "lib/types";
 import { AppLayout } from "layouts/app-layout";

 const ProjectIssuesPage: NextPageWithLayout = () => (
-  <div className="h-full w-full bg-neutral-page-surface-default">
+  <div className="h-full w-full">
    <ProjectLayoutRoot />
  </div>
 );
--- a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
@ -9,7 +9,7 @@ import { GlobalIssuesHeader } from "components/headers";
 import { NextPageWithLayout } from "lib/types";

 const GlobalViewIssuesPage: NextPageWithLayout = () => (
-  <div className="h-full overflow-hidden bg-neutral-component-surface-light">
+  <div className="h-full overflow-hidden">
    <div className="flex h-full w-full flex-col border-b border-neutral-border-medium">
      <GlobalViewsHeader />
      <AllIssueLayoutRoot />
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@ -133,12 +133,12 @@ const ResetPasswordPage: NextPageWithLayout = () => {
                    />
                    {showPassword ? (
                      <EyeOff
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                        onClick={() => setShowPassword(false)}
                      />
                    ) : (
                      <Eye
-                        className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                        className="absolute right-3 h-5 w-5 stroke-neutral-text-subtle hover:cursor-pointer"
                        onClick={() => setShowPassword(true)}
                      />
                    )}
--- a/web/styles/command-pallette.css
+++ b/web/styles/command-pallette.css
@ -3,7 +3,7 @@
 }

 [cmdk-group-heading] {
-  color: rgb(var(--color-text-secondary));
+  color: var(--color-neutral-110);
  font-size: 0.75rem;
  margin: 0 0 0.25rem 0.25rem;
 }
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@ -295,18 +295,18 @@
    --color-info-120: #c2e6ff;

    /* saturated colors */
-    --color-orange-10: #fefcfb;
-    --color-orange-20: #fff7ed;
-    --color-orange-30: #ffefd6;
-    --color-orange-40: #ffdfb5;
-    --color-orange-50: #ffd19a;
-    --color-orange-60: #ffc182;
-    --color-orange-70: #f5ae73;
-    --color-orange-80: #ec9455;
+    --color-orange-10: #17120e;
+    --color-orange-20: #1e160f;
+    --color-orange-30: #331e0b;
+    --color-orange-40: #462100;
+    --color-orange-50: #562800;
+    --color-orange-60: #66350c;
+    --color-orange-70: #7e451d;
+    --color-orange-80: #a35829;
    --color-orange-90: #f76b15;
-    --color-orange-100: #ef5f00;
-    --color-orange-110: #cc4e00;
-    --color-orange-120: #582d1d;
+    --color-orange-100: #ff801f;
+    --color-orange-110: #ffa057;
+    --color-orange-120: #ffe0c2;
  }

  [data-theme="dark-contrast"] {
@ -329,6 +329,7 @@

 body {
  color: var(--color-neutral-120);
+  background-color: var(--color-neutral-0);
 }

 /* scrollbar style */