chore: update typography

apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx

@@ -88,7 +88,7 @@ export function AskPiMenu(props: Props) {
             </div>
           </div>
         ) : (
-          <p className="text-sm text-custom-text-200">Pi is answering...</p>
+          <p className="text-13 text-secondary">AI is answering...</p>
         )}
       </div>
       <div className="py-3 px-4">
@@ -101,7 +101,7 @@ export function AskPiMenu(props: Props) {
             className="w-full bg-transparent border-none outline-none placeholder:text-custom-text-400 text-sm"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Tell Pi what to do..."
+            placeholder="Tell AI what to do..."
           />
           <span className="flex-shrink-0 size-4 grid place-items-center">
             <CircleArrowUp className="size-4 text-custom-text-200" />

apps/web/core/components/analytics/select/analytics-params.tsx

@@ -2,9 +2,10 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import type { Control, UseFormSetValue } from "react-hook-form";
 import { Controller } from "react-hook-form";
-import { Calendar, SlidersHorizontal } from "lucide-react";
+import { SlidersHorizontal } from "lucide-react";
 // plane package imports
 import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "@plane/constants";
+import { CalendarLayoutIcon } from "@plane/propel/icons";
 import type { IAnalyticsParams } from "@plane/types";
 import { ChartYAxisMetric } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -63,8 +64,8 @@ export const AnalyticsSelectParams = observer(function AnalyticsSelectParams(pro
               }}
               label={
                 <div className="flex items-center gap-2">
-                  <Calendar className="h-3 w-3" />
-                  <span className={cn("text-custom-text-200", value && "text-custom-text-100")}>
+                  <CalendarLayoutIcon className="h-3 w-3" />
+                  <span className={cn("text-secondary", value && "text-primary")}>
                     {xAxisOptions.find((v) => v.value === value)?.label || "Add Property"}
                   </span>
                 </div>

apps/web/core/components/pages/list/search-input.tsx

@@ -61,7 +61,7 @@ export function PageSearchInput(props: Props) {
         <Search className="h-3.5 w-3.5" />
         <input
           ref={inputRef}
-          className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
+          className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none ml-2"
           placeholder="Search pages"
           value={searchQuery}
           onChange={(e) => updateSearchQuery(e.target.value)}

apps/web/core/components/pages/modals/delete-page-modal.tsx

@@ -5,6 +5,7 @@ import { useParams } from "next/navigation";
 import { PROJECT_PAGE_TRACKER_EVENTS } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { AlertModalCore } from "@plane/ui";
+import { getPageName } from "@plane/utils";
 // constants
 // hooks
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -91,7 +92,7 @@ export const DeletePageModal = observer(function DeletePageModal(props: TConfirm
       content={
         <>
           Are you sure you want to delete page-{" "}
-          <span className="break-words font-medium text-custom-text-100 break-all">{name}</span> ? The Page will be
+          <span className="break-words font-medium text-primary break-all">{getPageName(name)}</span> ? The Page will be
           deleted permanently. This action cannot be undone.
         </>
       }

apps/web/core/components/project/settings/helper.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
-import { ChevronRight } from "lucide-react";
 import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { EPillVariant, Pill, EPillSize } from "@plane/propel/pill";
 import { ToggleSwitch } from "@plane/ui";
 import { joinUrlPath } from "@plane/utils";
@@ -27,7 +27,7 @@ export function ProjectFeatureToggle(props: Props) {
         >
           {value ? "Enabled" : "Disabled"}
         </Pill>
-        <ChevronRight className="h-4 w-4 text-custom-text-300" />
+        <ChevronRightIcon className="h-4 w-4 text-tertiary" />
       </div>
     </Link>
   ) : (

apps/web/core/components/readonly/date.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
-import { Calendar } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { CalendarLayoutIcon } from "@plane/propel/icons";
 import { cn, renderFormattedDate, getDate } from "@plane/utils";
 
 export type TReadonlyDateProps = {
@@ -19,8 +19,8 @@ export const ReadonlyDate = observer(function ReadonlyDate(props: TReadonlyDateP
   const formattedDate = value ? renderFormattedDate(getDate(value), formatToken) : null;
 
   return (
-    <div className={cn("flex items-center gap-1 text-sm", className)}>
-      {!hideIcon && <Calendar className="size-4 flex-shrink-0" />}
+    <div className={cn("flex items-center gap-1 text-13", className)}>
+      {!hideIcon && <CalendarLayoutIcon className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{formattedDate ?? placeholder ?? t("common.none")}</span>
     </div>
   );

packages/tailwind-config/index.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "./variables.css";
+@import "./typography.css";
 @import "./animations.css";
 @source "../**/*.{ts,tsx}";
 

packages/tailwind-config/typography.css

@@ -1,360 +1,127 @@
-/* Text Styles  */
-.font-h1-regular {
-  font-family: Inter;
-  font-size: 32px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
+@theme {
+  /* ---------- Font family ---------- */
+  --font-family-*: initial;
+  --font-family-heading: Inter;
+  --font-family-body: Inter;
+  --font-family-code: IBM Mono;
+
+  /* ---------- Font weight ---------- */
+  --font-weight-*: initial;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heavy: 800;
+
+  /* ---------- Font size ---------- */
+  --text-*: initial;
+  --text-9: 0.5625rem;
+  --text-10: 0.625rem;
+  --text-11: 0.6875rem;
+  --text-12: 0.75rem;
+  --text-13: 0.8125rem;
+  --text-14: 0.875rem;
+  --text-16: 1rem;
+  --text-18: 1.125rem;
+  --text-20: 1.25rem;
+  --text-24: 1.5rem;
+  --text-28: 1.75rem;
+  --text-32: 2rem;
+  --text-40: 2.5rem;
+
+  /* ---------- Letter spacing ---------- */
+  --tracking-*: initial;
+  --tracking-extra-tight: -0.025rem;
+  --tracking-tight: -0.05rem;
+  --tracking-default: 0;
+  --tracking-wide: 0.05rem;
 }
 
-.font-h1-medium {
-  font-family: Inter;
-  font-size: 32px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
+@utility text-h1-* {
+  font-size: var(--text-32);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h1-semibold {
-  font-family: Inter;
-  font-size: 32px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
+@utility text-h2-* {
+  font-size: var(--text-28);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h1-bold {
-  font-family: Inter;
-  font-size: 32px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
+@utility text-h3-* {
+  font-size: var(--text-24);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h2-regular {
-  font-family: Inter;
-  font-size: 28px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
+@utility text-h4-* {
+  font-size: var(--text-20);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h2-medium {
-  font-family: Inter;
-  font-size: 28px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
+@utility text-h5-* {
+  font-size: var(--text-16);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h2-semibold {
-  font-family: Inter;
-  font-size: 28px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
+@utility text-h6-* {
+  font-size: var(--text-14);
+  line-height: 1.2;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h2-bold {
-  font-family: Inter;
-  font-size: 28px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
+@utility text-body-md-* {
+  --font-size: var(--text-16);
+  font-size: var(--font-size);
+  line-height: 1.4;
+  letter-spacing: calc(0.01 * var(--font-size));
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h3-regular {
-  font-family: Inter;
-  font-size: 24px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
+@utility text-body-sm-* {
+  --font-size: var(--text-14);
+  font-size: var(--font-size);
+  line-height: 1.4;
+  letter-spacing: calc(0.01 * var(--font-size));
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h3-medium {
-  font-family: Inter;
-  font-size: 24px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
+@utility text-body-xs-* {
+  --font-size: var(--text-13);
+  font-size: var(--font-size);
+  line-height: 1.4;
+  letter-spacing: calc(0.01 * var(--font-size));
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h3-semibold {
-  font-family: Inter;
-  font-size: 24px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
+@utility text-caption-md-* {
+  font-size: var(--text-12);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h3-bold {
-  font-family: Inter;
-  font-size: 24px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
+@utility text-caption-sm-* {
+  font-size: var(--text-11);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-default);
+  font-weight: --value(--font-weight-*);
 }
 
-.font-h4-regular {
-  font-family: Inter;
-  font-size: 20px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-h4-medium {
-  font-family: Inter;
-  font-size: 20px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-h4-semibold {
-  font-family: Inter;
-  font-size: 20px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-h4-bold {
-  font-family: Inter;
-  font-size: 20px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
-}
-
-.font-h5-regular {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-h5-medium {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-h5-semibold {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-h5-bold {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
-}
-
-.font-h6-regular {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-h6-medium {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-h6-semibold {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-h6-bold {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 120%;
-  letter-spacing: 0%;
-  font-weight: 700;
-}
-
-.font-body-md-light {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 300;
-}
-
-.font-body-md-regular {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 400;
-}
-
-.font-body-md-medium {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 500;
-}
-
-.font-body-md-semibold {
-  font-family: Inter;
-  font-size: 16px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 600;
-}
-
-.font-body-sm-light {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 300;
-}
-
-.font-body-sm-regular {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 400;
-}
-
-.font-body-sm-medium {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 500;
-}
-
-.font-body-sm-semibold {
-  font-family: Inter;
-  font-size: 14px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 600;
-}
-
-.font-body-xs-light {
-  font-family: Inter;
-  font-size: 13px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 300;
-}
-
-.font-body-xs-regular {
-  font-family: Inter;
-  font-size: 13px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 400;
-}
-
-.font-body-xs-medium {
-  font-family: Inter;
-  font-size: 13px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 500;
-}
-
-.font-body-xs-semibold {
-  font-family: Inter;
-  font-size: 13px;
-  line-height: 140%;
-  letter-spacing: 1%;
-  font-weight: 600;
-}
-
-.font-caption-md-regular {
-  font-family: Inter;
-  font-size: 12px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-caption-md-medium {
-  font-family: Inter;
-  font-size: 12px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-caption-md-semibold {
-  font-family: Inter;
-  font-size: 12px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-caption-sm-regular {
-  font-family: Inter;
-  font-size: 11px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 400;
-}
-
-.font-caption-sm-medium {
-  font-family: Inter;
-  font-size: 11px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 500;
-}
-
-.font-caption-sm-semibold {
-  font-family: Inter;
-  font-size: 11px;
-  line-height: 110%;
-  letter-spacing: 0%;
-  font-weight: 600;
-}
-
-.font-caption-xs-regular {
-  font-family: Inter;
-  font-size: 10px;
-  line-height: 100%;
-  letter-spacing: 1%;
-  font-weight: 400;
-}
-
-.font-caption-xs-medium {
-  font-family: Inter;
-  font-size: 10px;
-  line-height: 100%;
-  letter-spacing: 1%;
-  font-weight: 500;
-}
-
-.font-caption-xs-semibold {
-  font-family: Inter;
-  font-size: 10px;
-  line-height: 100%;
-  letter-spacing: 1%;
-  font-weight: 600;
+@utility text-caption-xs-* {
+  --font-size: var(--text-10);
+  font-size: var(--font-size);
+  line-height: 1;
+  letter-spacing: calc(0.01 * var(--font-size));
+  font-weight: --value(--font-weight-*);
 }

packages/tailwind-config/variables.css

@@ -72,44 +72,6 @@
   --border-width-lg: 2px;
   --border-width-xl: 2.5px;
   --default-border-width: 1px;
-
-  /* ---------- Font family ---------- */
-  --font-family-*: initial;
-  --font-family-heading: Inter;
-  --font-family-body: Inter;
-  --font-family-code: IBM Mono;
-
-  /* ---------- Font weight ---------- */
-  --font-weight-*: initial;
-  --font-weight-light: Light;
-  --font-weight-regular: 400;
-  --font-weight-medium: medium;
-  --font-weight-semi-bold: semi bold;
-  --font-weight-bold: bold;
-  --font-weight-heavy: heavy;
-
-  /* ---------- Font size ---------- */
-  --text-*: initial;
-  --text-9: 0.5625rem;
-  --text-10: 0.625rem;
-  --text-11: 0.6875rem;
-  --text-12: 0.75rem;
-  --text-13: 0.8125rem;
-  --text-14: 0.875rem;
-  --text-16: 1rem;
-  --text-18: 1.125rem;
-  --text-20: 1.25rem;
-  --text-24: 1.5rem;
-  --text-28: 1.75rem;
-  --text-32: 2rem;
-  --text-40: 2.5rem;
-
-  /* ---------- Letter spacing ---------- */
-  --tracking-*: initial;
-  --tracking-extra-tight: -0.025rem;
-  --tracking-tight: -0.05rem;
-  --tracking-default: 0;
-  --tracking-wide: 0.05rem;
 }
 
 /* ---------- Light mode color tokens ---------- */
@@ -555,3 +517,18 @@
     }
   }
 }
+
+@utility outline-* {
+  outline-width: --value(--border-width-*);
+  outline-color: --value(--border-color-*);
+}
+
+@utility px-page-x {
+  padding-left: 1.35rem;
+  padding-right: 1.35rem;
+}
+
+@utility py-page-y {
+  padding-top: 1.35rem;
+  padding-bottom: 1.35rem;
+}