From 73c0b7b66d6f70518991360ef6aa034a8d119a80 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Thu, 4 Dec 2025 15:02:01 +0530 Subject: [PATCH 1/3] feat: added extended colors --- packages/tailwind-config/variables.css | 115 ++++++++++++++++++++++++- 1 file changed, 114 insertions(+), 1 deletion(-) diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css index d88851460a..98cc6b26ac 100644 --- a/packages/tailwind-config/variables.css +++ b/packages/tailwind-config/variables.css @@ -112,7 +112,6 @@ --tracking-wide: 0.05rem; } -/* ---------- Light mode color tokens ---------- */ @theme { /* Neutral colors */ --color-neutral-white: oklch(1 0 0); @@ -183,6 +182,120 @@ --color-red-1000: oklch(0.3967 0.1408 25.71); --color-red-1100: oklch(0.3493 0.1215 25.21); + /* --------- Extended colors ---------- */ + /* Purple colors */ + --extended-palette-purple-25: oklch(0.981 0.0054 297.73); + --extended-palette-purple-50: oklch(0.9421 0.0162 293.74); + --extended-palette-purple-100: oklch(0.8808 0.0343 293.03); + --extended-palette-purple-200: oklch(0.779 0.0639 293.01); + --extended-palette-purple-300: oklch(0.6978 0.0888 291.44); + --extended-palette-purple-400: oklch(0.6139 0.1164 290.19); + --extended-palette-purple-500: oklch(0.5527 0.1361 288.8); + --extended-palette-purple-600: oklch(0.4895 0.157 286.65); + --extended-palette-purple-700: oklch(0.42 0.1303 287.25); + --extended-palette-purple-800: oklch(0.3617 0.1077 287.53); + --extended-palette-purple-900: oklch(0.2861 0.0795 287.41); + --extended-palette-purple-950: oklch(0.219 0.0552 288.93); + + /* Orange colors */ + --extended-palette-orange-25: oklch(0.9856 0.0084 56.32); + --extended-palette-orange-50: oklch(0.964 0.0219 58.79); + --extended-palette-orange-100: oklch(0.9152 0.0522 56.77); + --extended-palette-orange-200: oklch(0.8504 0.097 56.87); + --extended-palette-orange-300: oklch(0.801 0.1323 55.27); + --extended-palette-orange-400:oklch(0.7563 0.1644 52.56); + --extended-palette-orange-500: oklch(0.7177 0.1905 47.86); + --extended-palette-orange-600: oklch(0.6601 0.1884 45.09); + --extended-palette-orange-700: oklch(0.5737 0.162 45.72); + --extended-palette-orange-800: oklch(0.5059 0.141467 46.3267); + --extended-palette-orange-900:oklch(0.3897 0.105571 48.3415); + --extended-palette-orange-950: oklch(0.2896 0.0746 51.86); + + /* Crimson colors */ + --extended-palette-crimson-25: oklch(0.9805 0.0066 28.83); + --extended-palette-crimson-50: oklch(0.9503 0.0186 21.57); + --extended-palette-crimson-100: oklch(0.8847 0.0455 23.1); + --extended-palette-crimson-200: oklch(0.791 0.0874 23.59); + --extended-palette-crimson-300: oklch(0.72 0.124 24.83); + --extended-palette-crimson-400: oklch(0.6556 0.1604 26.47); + --extended-palette-crimson-500: oklch(0.5954 0.1956 28.51); + --extended-palette-crimson-600: oklch(0.5284 0.185 28.96); + --extended-palette-crimson-700: oklch(0.4754 0.1647 28.98); + --extended-palette-crimson-800: oklch(0.4209 0.1438 29.01); + --extended-palette-crimson-900: oklch(0.3249 0.106 28.39); + --extended-palette-crimson-950: oklch(0.2457 0.0742 27.56); + + /* Emerald colors */ + --extended-palette-emerald-25: oklch(0.9884 0.0082 157.1); + --extended-palette-emerald-50: oklch(0.9563 0.0256 154.47); + --extended-palette-emerald-100: oklch(0.9153 0.0531 153.59); + --extended-palette-emerald-200: oklch(0.8679 0.0829 153.02); + --extended-palette-emerald-300: oklch(0.8221 0.1121 152.16); + --extended-palette-emerald-400:oklch(0.7785 0.1398 151.07); + --extended-palette-emerald-500: oklch(0.7401 0.166 149.61); + --extended-palette-emerald-600: oklch(0.6567 0.1599 148.98); + --extended-palette-emerald-700: oklch(0.5883 0.1413 149.06); + --extended-palette-emerald-800: oklch(0.4965 0.1172 149.18); + --extended-palette-emerald-900: oklch(0.4003 0.0918 149.37); + --extended-palette-emerald-950: oklch(0.2982 0.0631 150.55); + + /* Pink colors */ + --extended-palette-pink-25: oklch(0.9828 0.005 345.28); + --extended-palette-pink-50: oklch(0.9394 0.0201 340.71); + --extended-palette-pink-100: oklch(0.8759 0.0418 339.71); + --extended-palette-pink-200: oklch(0.805 0.0664 341.18); + --extended-palette-pink-300: oklch(0.736 0.0938 342.16); + --extended-palette-pink-400: oklch(0.6673 0.1206 342.89); + --extended-palette-pink-500: oklch(0.6185 0.1388 344.06); + --extended-palette-pink-600: oklch(0.5704 0.1574 345.25); + --extended-palette-pink-700: oklch(0.4947 0.1333 344.88); + --extended-palette-pink-800: oklch(0.4162 0.1108 344.66); + --extended-palette-pink-900: oklch(0.326 0.0807 344.57); + --extended-palette-pink-950: oklch(0.2474 0.0553 344.95); + + /* yellow colors */ + --extended-palette-yellow-25: oklch(0.989 0.0073 80.72); + --extended-palette-yellow-50: oklch(0.9631 0.0268 85.66); + --extended-palette-yellow-100: oklch(0.9297 0.0545 86.15); + --extended-palette-yellow-200: oklch(0.8893 0.0843 85.3); + --extended-palette-yellow-300: oklch(0.8522 0.1121 85.14); + --extended-palette-yellow-400: oklch(0.8167 0.1342 83.9); + --extended-palette-yellow-500: oklch(0.79 0.1466 82.04); + --extended-palette-yellow-600: oklch(0.7399 0.1487 79.36); + --extended-palette-yellow-700: oklch(0.683 0.1365 79.84); + --extended-palette-yellow-800: oklch(0.5522 0.1093 80.44); + --extended-palette-yellow-900: oklch(0.425 0.0824 81.46); + --extended-palette-yellow-950: oklch(0.3142 0.0586 82.21); + + /* indigo colors */ + --extended-palette-indigo-25: oklch(0.9813 0.0074 260.73); + --extended-palette-indigo-50: oklch(0.9415 0.022 263.19); + --extended-palette-indigo-100: oklch(0.8828 0.045 263.07); + --extended-palette-indigo-200: oklch(0.7852 0.086 263.89); + --extended-palette-indigo-300: oklch(0.7066 0.121 263.57); + --extended-palette-indigo-400: oklch(0.6322 0.1556 262.59); + --extended-palette-indigo-500: oklch(0.579 0.1807 262.31); + --extended-palette-indigo-600: oklch(0.5291 0.2045 262.05); + --extended-palette-indigo-700: oklch(0.458 0.1753 262.2); + --extended-palette-indigo-800: oklch(0.3862 0.1436 262.12); + --extended-palette-indigo-900: oklch(0.3019 0.1051 262.16); + --extended-palette-indigo-950: oklch(0.2308 0.0713 261.96); + + /* grey colors */ + --extended-palette-grey-25: oklch(0.9851 0 0); + --extended-palette-grey-50: oklch(0.9461 0 0); + --extended-palette-grey-100: oklch(0.9067 0 0); + --extended-palette-grey-200: oklch(0.8297 0 0); + --extended-palette-grey-300: oklch(0.7668 0 0); + --extended-palette-grey-400: oklch(0.6993 0 0); + --extended-palette-grey-500: oklch(0.65 0 0); + --extended-palette-grey-600: oklch(0.5999 0 0); + --extended-palette-grey-700: oklch(0.5208 0 0); + --extended-palette-grey-800: oklch(0.4386 0 0); + --extended-palette-grey-900: oklch(0.3407 0 0); + --extended-palette-grey-950: oklch(0.2603 0 0); + + /* -------------------- Light mode custom(derived) colors -------------------- */ /* Background colors */ --background-color-canvas: var(--color-neutral-300); From ea78ffced35727c5b2f3ff00135e9874fd6f769d Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 4 Dec 2025 16:08:26 +0530 Subject: [PATCH 2/3] chore: update typography --- .../pages/editor/ai/ask-pi-menu.tsx | 4 +- .../analytics/select/analytics-params.tsx | 7 +- .../components/pages/list/search-input.tsx | 2 +- .../pages/modals/delete-page-modal.tsx | 3 +- .../components/project/settings/helper.tsx | 4 +- apps/web/core/components/readonly/date.tsx | 6 +- packages/tailwind-config/index.css | 1 + packages/tailwind-config/typography.css | 437 ++++-------------- packages/tailwind-config/variables.css | 53 +-- 9 files changed, 132 insertions(+), 385 deletions(-) diff --git a/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx b/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx index 7e2e70a31d..98a4d02394 100644 --- a/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx +++ b/apps/web/ce/components/pages/editor/ai/ask-pi-menu.tsx @@ -88,7 +88,7 @@ export function AskPiMenu(props: Props) { ) : ( -

Pi is answering...

+

AI is answering...

)}
@@ -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..." /> diff --git a/apps/web/core/components/analytics/select/analytics-params.tsx b/apps/web/core/components/analytics/select/analytics-params.tsx index 957ea2aeed..30934fd984 100644 --- a/apps/web/core/components/analytics/select/analytics-params.tsx +++ b/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={
- - + + {xAxisOptions.find((v) => v.value === value)?.label || "Add Property"}
diff --git a/apps/web/core/components/pages/list/search-input.tsx b/apps/web/core/components/pages/list/search-input.tsx index e052875f19..baf4c7a772 100644 --- a/apps/web/core/components/pages/list/search-input.tsx +++ b/apps/web/core/components/pages/list/search-input.tsx @@ -61,7 +61,7 @@ export function PageSearchInput(props: Props) { updateSearchQuery(e.target.value)} diff --git a/apps/web/core/components/pages/modals/delete-page-modal.tsx b/apps/web/core/components/pages/modals/delete-page-modal.tsx index 37845aaf43..4c91aecf15 100644 --- a/apps/web/core/components/pages/modals/delete-page-modal.tsx +++ b/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-{" "} - {name} ? The Page will be + {getPageName(name)} ? The Page will be deleted permanently. This action cannot be undone. } diff --git a/apps/web/core/components/project/settings/helper.tsx b/apps/web/core/components/project/settings/helper.tsx index b88dbd5db5..ec667b557d 100644 --- a/apps/web/core/components/project/settings/helper.tsx +++ b/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"} - +
) : ( diff --git a/apps/web/core/components/readonly/date.tsx b/apps/web/core/components/readonly/date.tsx index 0de4c22459..5e2c71af44 100644 --- a/apps/web/core/components/readonly/date.tsx +++ b/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 ( -
- {!hideIcon && } +
+ {!hideIcon && } {formattedDate ?? placeholder ?? t("common.none")}
); diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css index 926759824c..166755c830 100644 --- a/packages/tailwind-config/index.css +++ b/packages/tailwind-config/index.css @@ -1,5 +1,6 @@ @import "tailwindcss"; @import "./variables.css"; +@import "./typography.css"; @import "./animations.css"; @source "../**/*.{ts,tsx}"; diff --git a/packages/tailwind-config/typography.css b/packages/tailwind-config/typography.css index ffa7582def..d8a2628e51 100644 --- a/packages/tailwind-config/typography.css +++ b/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-*); } diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css index d88851460a..3e34cced9f 100644 --- a/packages/tailwind-config/variables.css +++ b/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; +} From 929137c144ef2aa76f7a8a5fde4f58088359861f Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 4 Dec 2025 16:17:57 +0530 Subject: [PATCH 3/3] chore: update extended color var names --- packages/tailwind-config/variables.css | 293 ++++++++++++------------- 1 file changed, 146 insertions(+), 147 deletions(-) diff --git a/packages/tailwind-config/variables.css b/packages/tailwind-config/variables.css index 37b2c3f354..c9fe886f2c 100644 --- a/packages/tailwind-config/variables.css +++ b/packages/tailwind-config/variables.css @@ -146,117 +146,116 @@ /* --------- Extended colors ---------- */ /* Purple colors */ - --extended-palette-purple-25: oklch(0.981 0.0054 297.73); - --extended-palette-purple-50: oklch(0.9421 0.0162 293.74); - --extended-palette-purple-100: oklch(0.8808 0.0343 293.03); - --extended-palette-purple-200: oklch(0.779 0.0639 293.01); - --extended-palette-purple-300: oklch(0.6978 0.0888 291.44); - --extended-palette-purple-400: oklch(0.6139 0.1164 290.19); - --extended-palette-purple-500: oklch(0.5527 0.1361 288.8); - --extended-palette-purple-600: oklch(0.4895 0.157 286.65); - --extended-palette-purple-700: oklch(0.42 0.1303 287.25); - --extended-palette-purple-800: oklch(0.3617 0.1077 287.53); - --extended-palette-purple-900: oklch(0.2861 0.0795 287.41); - --extended-palette-purple-950: oklch(0.219 0.0552 288.93); + --extended-color-purple-25: oklch(0.981 0.0054 297.73); + --extended-color-purple-50: oklch(0.9421 0.0162 293.74); + --extended-color-purple-100: oklch(0.8808 0.0343 293.03); + --extended-color-purple-200: oklch(0.779 0.0639 293.01); + --extended-color-purple-300: oklch(0.6978 0.0888 291.44); + --extended-color-purple-400: oklch(0.6139 0.1164 290.19); + --extended-color-purple-500: oklch(0.5527 0.1361 288.8); + --extended-color-purple-600: oklch(0.4895 0.157 286.65); + --extended-color-purple-700: oklch(0.42 0.1303 287.25); + --extended-color-purple-800: oklch(0.3617 0.1077 287.53); + --extended-color-purple-900: oklch(0.2861 0.0795 287.41); + --extended-color-purple-950: oklch(0.219 0.0552 288.93); /* Orange colors */ - --extended-palette-orange-25: oklch(0.9856 0.0084 56.32); - --extended-palette-orange-50: oklch(0.964 0.0219 58.79); - --extended-palette-orange-100: oklch(0.9152 0.0522 56.77); - --extended-palette-orange-200: oklch(0.8504 0.097 56.87); - --extended-palette-orange-300: oklch(0.801 0.1323 55.27); - --extended-palette-orange-400:oklch(0.7563 0.1644 52.56); - --extended-palette-orange-500: oklch(0.7177 0.1905 47.86); - --extended-palette-orange-600: oklch(0.6601 0.1884 45.09); - --extended-palette-orange-700: oklch(0.5737 0.162 45.72); - --extended-palette-orange-800: oklch(0.5059 0.141467 46.3267); - --extended-palette-orange-900:oklch(0.3897 0.105571 48.3415); - --extended-palette-orange-950: oklch(0.2896 0.0746 51.86); + --extended-color-orange-25: oklch(0.9856 0.0084 56.32); + --extended-color-orange-50: oklch(0.964 0.0219 58.79); + --extended-color-orange-100: oklch(0.9152 0.0522 56.77); + --extended-color-orange-200: oklch(0.8504 0.097 56.87); + --extended-color-orange-300: oklch(0.801 0.1323 55.27); + --extended-color-orange-400: oklch(0.7563 0.1644 52.56); + --extended-color-orange-500: oklch(0.7177 0.1905 47.86); + --extended-color-orange-600: oklch(0.6601 0.1884 45.09); + --extended-color-orange-700: oklch(0.5737 0.162 45.72); + --extended-color-orange-800: oklch(0.5059 0.141467 46.3267); + --extended-color-orange-900: oklch(0.3897 0.105571 48.3415); + --extended-color-orange-950: oklch(0.2896 0.0746 51.86); /* Crimson colors */ - --extended-palette-crimson-25: oklch(0.9805 0.0066 28.83); - --extended-palette-crimson-50: oklch(0.9503 0.0186 21.57); - --extended-palette-crimson-100: oklch(0.8847 0.0455 23.1); - --extended-palette-crimson-200: oklch(0.791 0.0874 23.59); - --extended-palette-crimson-300: oklch(0.72 0.124 24.83); - --extended-palette-crimson-400: oklch(0.6556 0.1604 26.47); - --extended-palette-crimson-500: oklch(0.5954 0.1956 28.51); - --extended-palette-crimson-600: oklch(0.5284 0.185 28.96); - --extended-palette-crimson-700: oklch(0.4754 0.1647 28.98); - --extended-palette-crimson-800: oklch(0.4209 0.1438 29.01); - --extended-palette-crimson-900: oklch(0.3249 0.106 28.39); - --extended-palette-crimson-950: oklch(0.2457 0.0742 27.56); - + --extended-color-crimson-25: oklch(0.9805 0.0066 28.83); + --extended-color-crimson-50: oklch(0.9503 0.0186 21.57); + --extended-color-crimson-100: oklch(0.8847 0.0455 23.1); + --extended-color-crimson-200: oklch(0.791 0.0874 23.59); + --extended-color-crimson-300: oklch(0.72 0.124 24.83); + --extended-color-crimson-400: oklch(0.6556 0.1604 26.47); + --extended-color-crimson-500: oklch(0.5954 0.1956 28.51); + --extended-color-crimson-600: oklch(0.5284 0.185 28.96); + --extended-color-crimson-700: oklch(0.4754 0.1647 28.98); + --extended-color-crimson-800: oklch(0.4209 0.1438 29.01); + --extended-color-crimson-900: oklch(0.3249 0.106 28.39); + --extended-color-crimson-950: oklch(0.2457 0.0742 27.56); + /* Emerald colors */ - --extended-palette-emerald-25: oklch(0.9884 0.0082 157.1); - --extended-palette-emerald-50: oklch(0.9563 0.0256 154.47); - --extended-palette-emerald-100: oklch(0.9153 0.0531 153.59); - --extended-palette-emerald-200: oklch(0.8679 0.0829 153.02); - --extended-palette-emerald-300: oklch(0.8221 0.1121 152.16); - --extended-palette-emerald-400:oklch(0.7785 0.1398 151.07); - --extended-palette-emerald-500: oklch(0.7401 0.166 149.61); - --extended-palette-emerald-600: oklch(0.6567 0.1599 148.98); - --extended-palette-emerald-700: oklch(0.5883 0.1413 149.06); - --extended-palette-emerald-800: oklch(0.4965 0.1172 149.18); - --extended-palette-emerald-900: oklch(0.4003 0.0918 149.37); - --extended-palette-emerald-950: oklch(0.2982 0.0631 150.55); + --extended-color-emerald-25: oklch(0.9884 0.0082 157.1); + --extended-color-emerald-50: oklch(0.9563 0.0256 154.47); + --extended-color-emerald-100: oklch(0.9153 0.0531 153.59); + --extended-color-emerald-200: oklch(0.8679 0.0829 153.02); + --extended-color-emerald-300: oklch(0.8221 0.1121 152.16); + --extended-color-emerald-400: oklch(0.7785 0.1398 151.07); + --extended-color-emerald-500: oklch(0.7401 0.166 149.61); + --extended-color-emerald-600: oklch(0.6567 0.1599 148.98); + --extended-color-emerald-700: oklch(0.5883 0.1413 149.06); + --extended-color-emerald-800: oklch(0.4965 0.1172 149.18); + --extended-color-emerald-900: oklch(0.4003 0.0918 149.37); + --extended-color-emerald-950: oklch(0.2982 0.0631 150.55); /* Pink colors */ - --extended-palette-pink-25: oklch(0.9828 0.005 345.28); - --extended-palette-pink-50: oklch(0.9394 0.0201 340.71); - --extended-palette-pink-100: oklch(0.8759 0.0418 339.71); - --extended-palette-pink-200: oklch(0.805 0.0664 341.18); - --extended-palette-pink-300: oklch(0.736 0.0938 342.16); - --extended-palette-pink-400: oklch(0.6673 0.1206 342.89); - --extended-palette-pink-500: oklch(0.6185 0.1388 344.06); - --extended-palette-pink-600: oklch(0.5704 0.1574 345.25); - --extended-palette-pink-700: oklch(0.4947 0.1333 344.88); - --extended-palette-pink-800: oklch(0.4162 0.1108 344.66); - --extended-palette-pink-900: oklch(0.326 0.0807 344.57); - --extended-palette-pink-950: oklch(0.2474 0.0553 344.95); + --extended-color-pink-25: oklch(0.9828 0.005 345.28); + --extended-color-pink-50: oklch(0.9394 0.0201 340.71); + --extended-color-pink-100: oklch(0.8759 0.0418 339.71); + --extended-color-pink-200: oklch(0.805 0.0664 341.18); + --extended-color-pink-300: oklch(0.736 0.0938 342.16); + --extended-color-pink-400: oklch(0.6673 0.1206 342.89); + --extended-color-pink-500: oklch(0.6185 0.1388 344.06); + --extended-color-pink-600: oklch(0.5704 0.1574 345.25); + --extended-color-pink-700: oklch(0.4947 0.1333 344.88); + --extended-color-pink-800: oklch(0.4162 0.1108 344.66); + --extended-color-pink-900: oklch(0.326 0.0807 344.57); + --extended-color-pink-950: oklch(0.2474 0.0553 344.95); /* yellow colors */ - --extended-palette-yellow-25: oklch(0.989 0.0073 80.72); - --extended-palette-yellow-50: oklch(0.9631 0.0268 85.66); - --extended-palette-yellow-100: oklch(0.9297 0.0545 86.15); - --extended-palette-yellow-200: oklch(0.8893 0.0843 85.3); - --extended-palette-yellow-300: oklch(0.8522 0.1121 85.14); - --extended-palette-yellow-400: oklch(0.8167 0.1342 83.9); - --extended-palette-yellow-500: oklch(0.79 0.1466 82.04); - --extended-palette-yellow-600: oklch(0.7399 0.1487 79.36); - --extended-palette-yellow-700: oklch(0.683 0.1365 79.84); - --extended-palette-yellow-800: oklch(0.5522 0.1093 80.44); - --extended-palette-yellow-900: oklch(0.425 0.0824 81.46); - --extended-palette-yellow-950: oklch(0.3142 0.0586 82.21); + --extended-color-yellow-25: oklch(0.989 0.0073 80.72); + --extended-color-yellow-50: oklch(0.9631 0.0268 85.66); + --extended-color-yellow-100: oklch(0.9297 0.0545 86.15); + --extended-color-yellow-200: oklch(0.8893 0.0843 85.3); + --extended-color-yellow-300: oklch(0.8522 0.1121 85.14); + --extended-color-yellow-400: oklch(0.8167 0.1342 83.9); + --extended-color-yellow-500: oklch(0.79 0.1466 82.04); + --extended-color-yellow-600: oklch(0.7399 0.1487 79.36); + --extended-color-yellow-700: oklch(0.683 0.1365 79.84); + --extended-color-yellow-800: oklch(0.5522 0.1093 80.44); + --extended-color-yellow-900: oklch(0.425 0.0824 81.46); + --extended-color-yellow-950: oklch(0.3142 0.0586 82.21); /* indigo colors */ - --extended-palette-indigo-25: oklch(0.9813 0.0074 260.73); - --extended-palette-indigo-50: oklch(0.9415 0.022 263.19); - --extended-palette-indigo-100: oklch(0.8828 0.045 263.07); - --extended-palette-indigo-200: oklch(0.7852 0.086 263.89); - --extended-palette-indigo-300: oklch(0.7066 0.121 263.57); - --extended-palette-indigo-400: oklch(0.6322 0.1556 262.59); - --extended-palette-indigo-500: oklch(0.579 0.1807 262.31); - --extended-palette-indigo-600: oklch(0.5291 0.2045 262.05); - --extended-palette-indigo-700: oklch(0.458 0.1753 262.2); - --extended-palette-indigo-800: oklch(0.3862 0.1436 262.12); - --extended-palette-indigo-900: oklch(0.3019 0.1051 262.16); - --extended-palette-indigo-950: oklch(0.2308 0.0713 261.96); + --extended-color-indigo-25: oklch(0.9813 0.0074 260.73); + --extended-color-indigo-50: oklch(0.9415 0.022 263.19); + --extended-color-indigo-100: oklch(0.8828 0.045 263.07); + --extended-color-indigo-200: oklch(0.7852 0.086 263.89); + --extended-color-indigo-300: oklch(0.7066 0.121 263.57); + --extended-color-indigo-400: oklch(0.6322 0.1556 262.59); + --extended-color-indigo-500: oklch(0.579 0.1807 262.31); + --extended-color-indigo-600: oklch(0.5291 0.2045 262.05); + --extended-color-indigo-700: oklch(0.458 0.1753 262.2); + --extended-color-indigo-800: oklch(0.3862 0.1436 262.12); + --extended-color-indigo-900: oklch(0.3019 0.1051 262.16); + --extended-color-indigo-950: oklch(0.2308 0.0713 261.96); /* grey colors */ - --extended-palette-grey-25: oklch(0.9851 0 0); - --extended-palette-grey-50: oklch(0.9461 0 0); - --extended-palette-grey-100: oklch(0.9067 0 0); - --extended-palette-grey-200: oklch(0.8297 0 0); - --extended-palette-grey-300: oklch(0.7668 0 0); - --extended-palette-grey-400: oklch(0.6993 0 0); - --extended-palette-grey-500: oklch(0.65 0 0); - --extended-palette-grey-600: oklch(0.5999 0 0); - --extended-palette-grey-700: oklch(0.5208 0 0); - --extended-palette-grey-800: oklch(0.4386 0 0); - --extended-palette-grey-900: oklch(0.3407 0 0); - --extended-palette-grey-950: oklch(0.2603 0 0); - + --extended-color-grey-25: oklch(0.9851 0 0); + --extended-color-grey-50: oklch(0.9461 0 0); + --extended-color-grey-100: oklch(0.9067 0 0); + --extended-color-grey-200: oklch(0.8297 0 0); + --extended-color-grey-300: oklch(0.7668 0 0); + --extended-color-grey-400: oklch(0.6993 0 0); + --extended-color-grey-500: oklch(0.65 0 0); + --extended-color-grey-600: oklch(0.5999 0 0); + --extended-color-grey-700: oklch(0.5208 0 0); + --extended-color-grey-800: oklch(0.4386 0 0); + --extended-color-grey-900: oklch(0.3407 0 0); + --extended-color-grey-950: oklch(0.2603 0 0); /* -------------------- Light mode custom(derived) colors -------------------- */ /* Background colors */ @@ -368,34 +367,34 @@ --text-color-link-secondary: var(--color-neutral-900); /* Label colors */ - --label-indigo-bg: var(--extended-palette-indigo-100); - --label-indigo-bg-strong: var(--extended-palette-indigo-700); - --label-indigo-hover: var(--extended-palette-indigo-300); - --label-indigo-icon: var(--extended-palette-indigo-700); - --label-indigo-text: var(--extended-palette-indigo-700); + --label-indigo-bg: var(--extended-color-indigo-100); + --label-indigo-bg-strong: var(--extended-color-indigo-700); + --label-indigo-hover: var(--extended-color-indigo-300); + --label-indigo-icon: var(--extended-color-indigo-700); + --label-indigo-text: var(--extended-color-indigo-700); --label-indigo-border: hsla(0, 0%, 100%, 0); - --label-indigo-focus: var(--extended-palette-indigo-500); - --label-emerald-bg: var(--extended-palette-emerald-50); - --label-emerald-bg-strong: var(--extended-palette-emerald-600); - --label-emerald-hover: var(--extended-palette-emerald-200); - --label-emerald-icon: var(--extended-palette-emerald-600); - --label-emerald-text: var(--extended-palette-emerald-800); + --label-indigo-focus: var(--extended-color-indigo-500); + --label-emerald-bg: var(--extended-color-emerald-50); + --label-emerald-bg-strong: var(--extended-color-emerald-600); + --label-emerald-hover: var(--extended-color-emerald-200); + --label-emerald-icon: var(--extended-color-emerald-600); + --label-emerald-text: var(--extended-color-emerald-800); --label-emerald-border: hsla(0, 0%, 100%, 0); - --label-emerald-focus: var(--extended-palette-emerald-700); - --label-grey-bg: var(--extended-palette-grey-50); - --label-grey-bg-strong: var(--extended-palette-grey-700); - --label-grey-hover: var(--extended-palette-grey-100); - --label-grey-icon: var(--extended-palette-grey-700); - --label-grey-text: var(--extended-palette-grey-700); + --label-emerald-focus: var(--extended-color-emerald-700); + --label-grey-bg: var(--extended-color-grey-50); + --label-grey-bg-strong: var(--extended-color-grey-700); + --label-grey-hover: var(--extended-color-grey-100); + --label-grey-icon: var(--extended-color-grey-700); + --label-grey-text: var(--extended-color-grey-700); --label-grey-border: hsla(0, 0%, 100%, 0); - --label-grey-focus: var(--extended-palette-grey-500); - --label-crimson-bg: var(--extended-palette-crimson-50); - --label-crimson-bg-strong: var(--extended-palette-crimson-700); - --label-crimson-hover: var(--extended-palette-crimson-100); - --label-crimson-icon: var(--extended-palette-crimson-700); - --label-crimson-text: var(--extended-palette-crimson-700); + --label-grey-focus: var(--extended-color-grey-500); + --label-crimson-bg: var(--extended-color-crimson-50); + --label-crimson-bg-strong: var(--extended-color-crimson-700); + --label-crimson-hover: var(--extended-color-crimson-100); + --label-crimson-icon: var(--extended-color-crimson-700); + --label-crimson-text: var(--extended-color-crimson-700); --label-crimson-border: hsla(0, 0%, 100%, 0); - --label-crimson-focus: var(--extended-palette-crimson-500); + --label-crimson-focus: var(--extended-color-crimson-500); /* Illustration colors */ --illustration-fill-white: var(--color-neutral-white); @@ -408,7 +407,7 @@ } @layer theme { - * { + :root { @variant dark { /* ---------- Dark mode color tokens ---------- */ /* Neutral colors */ @@ -590,34 +589,34 @@ --text-color-link-secondary: var(--color-neutral-1100); /* Label colors */ - --label-indigo-bg: var(--extended-palette-indigo-800); - --label-indigo-bg-strong: var(--extended-palette-indigo-500); - --label-indigo-hover: var(--extended-palette-indigo-700); - --label-indigo-icon: var(--extended-palette-indigo-500); - --label-indigo-text: var(--extended-palette-indigo-500); + --label-indigo-bg: var(--extended-color-indigo-800); + --label-indigo-bg-strong: var(--extended-color-indigo-500); + --label-indigo-hover: var(--extended-color-indigo-700); + --label-indigo-icon: var(--extended-color-indigo-500); + --label-indigo-text: var(--extended-color-indigo-500); --label-indigo-border: hsla(0, 0%, 100%, 0); - --label-indigo-focus: var(--extended-palette-indigo-400); - --label-emerald-bg: var(--extended-palette-emerald-700); - --label-emerald-bg-strong: var(--extended-palette-emerald-600); - --label-emerald-hover: var(--extended-palette-emerald-800); - --label-emerald-icon: var(--extended-palette-emerald-600); - --label-emerald-text: var(--extended-palette-emerald-400); + --label-indigo-focus: var(--extended-color-indigo-400); + --label-emerald-bg: var(--extended-color-emerald-700); + --label-emerald-bg-strong: var(--extended-color-emerald-600); + --label-emerald-hover: var(--extended-color-emerald-800); + --label-emerald-icon: var(--extended-color-emerald-600); + --label-emerald-text: var(--extended-color-emerald-400); --label-emerald-border: hsla(0, 0%, 100%, 0); - --label-emerald-focus: var(--extended-palette-emerald-700); - --label-grey-bg: var(--extended-palette-grey-800); - --label-grey-bg-strong: var(--extended-palette-grey-500); - --label-grey-hover: var(--extended-palette-grey-700); - --label-grey-icon: var(--extended-palette-grey-500); - --label-grey-text: var(--extended-palette-grey-500); + --label-emerald-focus: var(--extended-color-emerald-700); + --label-grey-bg: var(--extended-color-grey-800); + --label-grey-bg-strong: var(--extended-color-grey-500); + --label-grey-hover: var(--extended-color-grey-700); + --label-grey-icon: var(--extended-color-grey-500); + --label-grey-text: var(--extended-color-grey-500); --label-grey-border: hsla(0, 0%, 100%, 0); - --label-grey-focus: var(--extended-palette-grey-400); - --label-crimson-bg: var(--extended-palette-crimson-800); - --label-crimson-bg-strong: var(--extended-palette-crimson-500); - --label-crimson-hover: var(--extended-palette-crimson-700); - --label-crimson-icon: var(--extended-palette-crimson-500); - --label-crimson-text: var(--extended-palette-crimson-500); + --label-grey-focus: var(--extended-color-grey-400); + --label-crimson-bg: var(--extended-color-crimson-800); + --label-crimson-bg-strong: var(--extended-color-crimson-500); + --label-crimson-hover: var(--extended-color-crimson-700); + --label-crimson-icon: var(--extended-color-crimson-500); + --label-crimson-text: var(--extended-color-crimson-500); --label-crimson-border: hsla(0, 0%, 100%, 0); - --label-crimson-focus: var(--extended-palette-crimson-400); + --label-crimson-focus: var(--extended-color-crimson-400); /* Illustration colors */ --illustration-fill-white: var(--color-neutral-400);