From f8767c32f1f11d58894baceee00592aa7444e821 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Tue, 29 Sep 2026 00:56:59 +0200 Subject: [PATCH] refactor(ui): retire the shadcn colour aliases Every class that used the old names (muted, primary, card, border, input and the rest) now uses the Desk & Paper token it resolved to, with text colours on their text tokens (accent-text, danger-text, ink-3). The compatibility block in the theme is gone. --- apps/web/src/components/input/chip-input.tsx | 22 +++++----- .../web/src/components/input/color-picker.tsx | 14 +++--- apps/web/src/components/input/rich-input.tsx | 26 +++++------ .../src/components/layout/loading-screen.tsx | 2 +- .../components/typography/font-display.tsx | 2 +- apps/web/src/components/ui/combobox.tsx | 4 +- apps/web/src/components/ui/copyright.test.tsx | 2 +- apps/web/src/components/ui/copyright.tsx | 2 +- .../src/dialogs/auth/enable-two-factor.tsx | 2 +- .../components/application-form-sheet.tsx | 18 ++++---- .../applications/components/calendar-view.tsx | 44 +++++++++---------- .../components/export-applications-sheet.tsx | 4 +- .../components/file-attachment-field.tsx | 8 ++-- .../components/interview-dialog.tsx | 10 ++--- .../ats-checker/report/finding-row.tsx | 6 +-- .../ats-checker/report/jd-coverage.tsx | 14 +++--- .../ats-checker/report/report-view.tsx | 14 +++--- .../ats-checker/report/score-header.tsx | 10 ++--- apps/web/src/features/auth/pages/consent.tsx | 6 +-- .../features/auth/pages/forgot-password.tsx | 4 +- apps/web/src/features/auth/pages/login.tsx | 2 +- apps/web/src/features/auth/pages/register.tsx | 4 +- .../features/auth/pages/reset-password.tsx | 2 +- .../features/auth/pages/resume-password.tsx | 2 +- .../src/features/auth/pages/verify-2fa.tsx | 2 +- .../src/features/command-palette/index.tsx | 2 +- .../pages/preferences/language.tsx | 2 +- .../command-palette/pages/resumes.tsx | 4 +- .../src/features/locale/locale-options.tsx | 2 +- .../resume/builder/password-dialog.tsx | 4 +- .../resume/editor/write/picture-settings.tsx | 22 +++++----- .../features/resume/preview/pdf-canvas.tsx | 2 +- .../resume/preview/preview.shared.tsx | 2 +- .../src/features/resume/public/pdf-viewer.tsx | 4 +- .../src/features/resume/stylesheet/editor.tsx | 6 +-- .../src/features/resume/stylesheet/status.tsx | 2 +- .../web/src/routes/_home/-sections/footer.tsx | 6 +-- .../web/src/routes/_home/-sections/header.tsx | 2 +- apps/web/src/routes/_home/route.tsx | 2 +- .../-sidebar/right/sections/custom-styles.tsx | 2 +- .../-sidebar/right/sections/design.tsx | 4 +- .../right/sections/layout/pages.test.tsx | 2 +- .../-sidebar/right/sections/layout/pages.tsx | 20 ++++----- .../-sidebar/right/sections/notes.tsx | 2 +- packages/ui/src/components/otp-field.tsx | 2 +- packages/ui/src/components/scroll-area.tsx | 4 +- packages/ui/src/styles/globals.css | 34 -------------- 47 files changed, 161 insertions(+), 197 deletions(-) diff --git a/apps/web/src/components/input/chip-input.tsx b/apps/web/src/components/input/chip-input.tsx index 16d1e6d9c..eab48aabb 100644 --- a/apps/web/src/components/input/chip-input.tsx +++ b/apps/web/src/components/input/chip-input.tsx @@ -43,7 +43,7 @@ function ChipDragPreview({ chip }: ChipDragPreviewProps) { return ( {chip} @@ -84,9 +84,9 @@ function ChipItem({ id, chip, index, isEditing, onEdit, onRemove }: ChipItemProp {chip} @@ -99,7 +99,7 @@ function ChipItem({ id, chip, index, isEditing, onEdit, onRemove }: ChipItemProp -
+
{state.isLink ? ( - + {state.characterCount} characters
diff --git a/apps/web/src/components/layout/loading-screen.tsx b/apps/web/src/components/layout/loading-screen.tsx index 5c084b2a5..f0830d4eb 100644 --- a/apps/web/src/components/layout/loading-screen.tsx +++ b/apps/web/src/components/layout/loading-screen.tsx @@ -3,7 +3,7 @@ import { Spinner } from "@reactive-resume/ui/components/spinner"; export function LoadingScreen() { return ( -
+
diff --git a/apps/web/src/components/typography/font-display.tsx b/apps/web/src/components/typography/font-display.tsx index e9d653aa2..cb482dbc7 100644 --- a/apps/web/src/components/typography/font-display.tsx +++ b/apps/web/src/components/typography/font-display.tsx @@ -38,7 +38,7 @@ export function FontDisplay({ family, label, type, url }: FontDisplayProps) { > {label} - {label !== family && {family}} + {label !== family && {family}}
); } diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx index b5eb1b447..e148b8c00 100644 --- a/apps/web/src/components/ui/combobox.tsx +++ b/apps/web/src/components/ui/combobox.tsx @@ -224,7 +224,7 @@ function Combobox(props: ComboboxProps< render ?? (
diff --git a/apps/web/src/components/ui/copyright.test.tsx b/apps/web/src/components/ui/copyright.test.tsx index 3bef13802..2f456e14a 100644 --- a/apps/web/src/components/ui/copyright.test.tsx +++ b/apps/web/src/components/ui/copyright.test.tsx @@ -44,7 +44,7 @@ describe("Copyright", () => { const { container } = renderCopyright({ className: "extra-class" }); const wrapper = container.firstChild as HTMLElement; expect(wrapper.className).toContain("extra-class"); - expect(wrapper.className).toContain("text-muted-foreground"); + expect(wrapper.className).toContain("text-ink-3"); }); it("opens external links in a new tab", () => { diff --git a/apps/web/src/components/ui/copyright.tsx b/apps/web/src/components/ui/copyright.tsx index 51d9573a6..ff585ba08 100644 --- a/apps/web/src/components/ui/copyright.tsx +++ b/apps/web/src/components/ui/copyright.tsx @@ -5,7 +5,7 @@ type Props = React.ComponentProps<"div">; export function Copyright({ className, ...props }: Props) { return ( -
+

Licensed under{" "} diff --git a/apps/web/src/dialogs/auth/enable-two-factor.tsx b/apps/web/src/dialogs/auth/enable-two-factor.tsx index bc12c4b9b..6d6b3520e 100644 --- a/apps/web/src/dialogs/auth/enable-two-factor.tsx +++ b/apps/web/src/dialogs/auth/enable-two-factor.tsx @@ -313,7 +313,7 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)

{backupCodes.map((code) => ( -
+
{code}
))} diff --git a/apps/web/src/features/applications/components/application-form-sheet.tsx b/apps/web/src/features/applications/components/application-form-sheet.tsx index ff1bf5f33..d24e54c70 100644 --- a/apps/web/src/features/applications/components/application-form-sheet.tsx +++ b/apps/web/src/features/applications/components/application-form-sheet.tsx @@ -212,16 +212,16 @@ export function ApplicationFormSheet({ open, onOpenChange, application }: Props) {/* Pasted job description: stored with the application and used for every AI action. Collapsed by default so the form stays short; hidden entirely when AI is off. */} {aiEnabled && ( - + - + Job description -

+

Copy the entire job description from the posting and paste it below. We'll fill in the fields for you and keep the text with this application for match scoring and tailoring. @@ -239,7 +239,7 @@ export function ApplicationFormSheet({ open, onOpenChange, application }: Props) onPaste={(event) => runAutofill(event.clipboardData.getData("text"))} />

-

+

{autofill.isPending ? ( Reading the posting… ) : ( @@ -348,7 +348,7 @@ export function ApplicationFormSheet({ open, onOpenChange, application }: Props) attachLabel={t`Or upload a resume PDF`} onChange={(value) => set("resumeFile", value)} /> -

+

Link a Reactive Resume to use AI match scoring and tailoring.

@@ -401,9 +401,9 @@ export function ApplicationFormSheet({ open, onOpenChange, application }: Props) function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) { return (
-
@@ -455,13 +455,13 @@ function TagsField({ value, suggestions, onChange }: TagsFieldProps) { {value.map((tag) => ( {tag}
-
+
{INTERVIEW_KINDS.map((kind) => ( @@ -224,15 +224,15 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A {upcoming.length === 0 ? ( -
-
- +
+
+

Nothing scheduled yet

-

+

Add screening calls and technical interviews to see them here and on the calendar.

@@ -247,7 +247,7 @@ export function ApplicationCalendar({ applications, allApplications, onOpen }: A if (!first) return null; return (
-

{dayHeading(first.start)}

+

{dayHeading(first.start)}

{group.map((item) => ( -
@@ -327,13 +327,13 @@ function InterviewChip({ item, time, onOpen }: InterviewChipProps) { diff --git a/apps/web/src/features/applications/components/export-applications-sheet.tsx b/apps/web/src/features/applications/components/export-applications-sheet.tsx index da2334e68..c1e4c7a41 100644 --- a/apps/web/src/features/applications/components/export-applications-sheet.tsx +++ b/apps/web/src/features/applications/components/export-applications-sheet.tsx @@ -97,11 +97,11 @@ export function ExportApplicationsSheet({ open, onOpenChange, applications, filt
{!validRange && ( -

+

Start date must be on or before end date.

)} -

+

diff --git a/apps/web/src/features/applications/components/file-attachment-field.tsx b/apps/web/src/features/applications/components/file-attachment-field.tsx index 84bbae4f9..e654a5e9e 100644 --- a/apps/web/src/features/applications/components/file-attachment-field.tsx +++ b/apps/web/src/features/applications/components/file-attachment-field.tsx @@ -55,8 +55,8 @@ export function FileAttachmentField({ value, onChange, attachLabel, disabled }: return ( <> {value ? ( -
- +
+ @@ -82,7 +82,7 @@ export function FileAttachmentField({ value, onChange, attachLabel, disabled }: type="button" disabled={disabled || upload.isPending} onClick={() => inputRef.current?.click()} - className="flex w-full items-center gap-2 rounded-lg border border-border border-dashed p-2.5 text-muted-foreground text-sm hover:bg-muted/50 disabled:opacity-60" + className="flex w-full items-center gap-2 rounded-lg border border-line border-dashed p-2.5 text-ink-3 text-sm hover:bg-sunken/50 disabled:opacity-60" > {upload.isPending ? Uploading… : attachLabel} diff --git a/apps/web/src/features/applications/components/interview-dialog.tsx b/apps/web/src/features/applications/components/interview-dialog.tsx index e1ff7044c..8fe83923b 100644 --- a/apps/web/src/features/applications/components/interview-dialog.tsx +++ b/apps/web/src/features/applications/components/interview-dialog.tsx @@ -200,9 +200,7 @@ export function InterviewDialog({ aria-pressed={selected} className={cn( "flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors", - selected - ? "border-foreground bg-foreground text-background" - : "border-border text-muted-foreground hover:bg-muted hover:text-foreground", + selected ? "border-ink bg-ink text-bg" : "border-line text-ink-3 hover:bg-sunken hover:text-ink", )} onClick={() => set("kind", kind.value)} > @@ -259,7 +257,7 @@ export function InterviewDialog({
diff --git a/apps/web/src/features/auth/pages/login.tsx b/apps/web/src/features/auth/pages/login.tsx index 6d11ba72d..4008110d8 100644 --- a/apps/web/src/features/auth/pages/login.tsx +++ b/apps/web/src/features/auth/pages/login.tsx @@ -124,7 +124,7 @@ export function LoginPage({ disableEmailAuth, disableSignups }: Props) { {!disableSignups && ( -
+
Don't have an account?{" "}
diff --git a/apps/web/src/features/auth/pages/reset-password.tsx b/apps/web/src/features/auth/pages/reset-password.tsx index 387c87839..d2bd1a6c9 100644 --- a/apps/web/src/features/auth/pages/reset-password.tsx +++ b/apps/web/src/features/auth/pages/reset-password.tsx @@ -62,7 +62,7 @@ export function ResetPasswordPage({ token }: Props) { Reset your password -
+
Enter a new password for your account
diff --git a/apps/web/src/features/auth/pages/resume-password.tsx b/apps/web/src/features/auth/pages/resume-password.tsx index 47a651ca6..5db257eef 100644 --- a/apps/web/src/features/auth/pages/resume-password.tsx +++ b/apps/web/src/features/auth/pages/resume-password.tsx @@ -81,7 +81,7 @@ export function ResumePasswordPage({ username, slug, redirectPath }: ResumePassw This resume is password protected -
+
Enter the password the resume owner shared with you.
diff --git a/apps/web/src/features/auth/pages/verify-2fa.tsx b/apps/web/src/features/auth/pages/verify-2fa.tsx index 38e66720f..d91c5e0d0 100644 --- a/apps/web/src/features/auth/pages/verify-2fa.tsx +++ b/apps/web/src/features/auth/pages/verify-2fa.tsx @@ -74,7 +74,7 @@ function TwoFactorVerificationPage({ backupCode = false }: TwoFactorVerification

{backupCode ? Verify with a Backup Code : Two-Factor Authentication}

-
+
{backupCode ? ( Enter one of your saved backup codes to access your account ) : ( diff --git a/apps/web/src/features/command-palette/index.tsx b/apps/web/src/features/command-palette/index.tsx index e8d17d81a..8a72888f1 100644 --- a/apps/web/src/features/command-palette/index.tsx +++ b/apps/web/src/features/command-palette/index.tsx @@ -122,7 +122,7 @@ export function CommandPalette() { comment: "Accessible label for command list region inside command palette", message: "Command Palette", })} - className="[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3" + className="[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-ink-3 **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3" > Language}> {Object.entries(localeMap).map(([value, label]) => ( changeLocale(value)}> - {value} + {value} {i18n.t(label)} ))} diff --git a/apps/web/src/features/command-palette/pages/resumes.tsx b/apps/web/src/features/command-palette/pages/resumes.tsx index 63b9e3827..be11ebb66 100644 --- a/apps/web/src/features/command-palette/pages/resumes.tsx +++ b/apps/web/src/features/command-palette/pages/resumes.tsx @@ -181,7 +181,7 @@ export function ResumesCommandGroup() { > {application.company} - {application.role} + {application.role} )) )} @@ -207,7 +207,7 @@ export function ResumesCommandGroup() { > {thread.title} - {documentName} + {documentName} ); }) diff --git a/apps/web/src/features/locale/locale-options.tsx b/apps/web/src/features/locale/locale-options.tsx index 19d851af9..5f7a164cc 100644 --- a/apps/web/src/features/locale/locale-options.tsx +++ b/apps/web/src/features/locale/locale-options.tsx @@ -10,7 +10,7 @@ export const getLocaleOptions = () => { value: value as Locale, label: ( - {value} + {value} {name} ), diff --git a/apps/web/src/features/resume/builder/password-dialog.tsx b/apps/web/src/features/resume/builder/password-dialog.tsx index 4da5fbdd3..cb99b0779 100644 --- a/apps/web/src/features/resume/builder/password-dialog.tsx +++ b/apps/web/src/features/resume/builder/password-dialog.tsx @@ -96,7 +96,7 @@ export function ResumePasswordDialog({ onSubmit, onClose }: ResumePasswordDialog aria-invalid={!!error} aria-describedby={`${id}-hint${error ? ` ${id}-error` : ""}`} /> -

+

Use between 6 and 64 characters.

@@ -119,7 +119,7 @@ export function ResumePasswordDialog({ onSubmit, onClose }: ResumePasswordDialog />
{error && ( - )} diff --git a/apps/web/src/features/resume/editor/write/picture-settings.tsx b/apps/web/src/features/resume/editor/write/picture-settings.tsx index c93bf8d91..0351bd73b 100644 --- a/apps/web/src/features/resume/editor/write/picture-settings.tsx +++ b/apps/web/src/features/resume/editor/write/picture-settings.tsx @@ -79,7 +79,7 @@ function PicturePreviewControls({ type="button" onClick={picture.url ? onDeletePicture : onSelectPicture} aria-label={picture.url ? t`Delete picture` : t`Upload picture`} - className="group/picture relative size-18 cursor-pointer overflow-hidden rounded-md bg-secondary transition-colors hover:bg-secondary/50" + className="group/picture relative size-18 cursor-pointer overflow-hidden rounded-md bg-sunken transition-colors hover:bg-sunken/50" > {normalizedPictureUrl && ( -
+
@@ -368,7 +368,7 @@ function PictureGeometryFields({ form, onAutoSave }: PictureFieldProps) { onAutoSave(); }} > -
+
@@ -632,7 +632,7 @@ export function PictureSettings() { {cropState && ( -
+
Zoom - {zoom.toFixed(1)}× + {zoom.toFixed(1)}×
- + - +
diff --git a/apps/web/src/features/resume/preview/pdf-canvas.tsx b/apps/web/src/features/resume/preview/pdf-canvas.tsx index c5ce3ae2c..22a9bc5cf 100644 --- a/apps/web/src/features/resume/preview/pdf-canvas.tsx +++ b/apps/web/src/features/resume/preview/pdf-canvas.tsx @@ -185,7 +185,7 @@ export function PdfCanvasPage({
{caption ?? (showPageNumbers ? ( -
+
Page {pageNumber} of {totalPages}
) : null)} diff --git a/apps/web/src/features/resume/preview/preview.shared.tsx b/apps/web/src/features/resume/preview/preview.shared.tsx index 963d2f400..47eaeb7b8 100644 --- a/apps/web/src/features/resume/preview/preview.shared.tsx +++ b/apps/web/src/features/resume/preview/preview.shared.tsx @@ -66,7 +66,7 @@ export function ResumePreviewLoader({ return (
{showPageNumbers ? ( -
+
Page {pageNumber} of {pageCount}
) : null} diff --git a/apps/web/src/features/resume/public/pdf-viewer.tsx b/apps/web/src/features/resume/public/pdf-viewer.tsx index 601c5148e..34332df6b 100644 --- a/apps/web/src/features/resume/public/pdf-viewer.tsx +++ b/apps/web/src/features/resume/public/pdf-viewer.tsx @@ -245,11 +245,11 @@ export function PdfViewer({
{error ? ( -
+
Unable to display PDF preview.
) : isReady ? null : ( -
+
)} diff --git a/apps/web/src/features/resume/stylesheet/editor.tsx b/apps/web/src/features/resume/stylesheet/editor.tsx index 3495fdb99..10f28c0b4 100644 --- a/apps/web/src/features/resume/stylesheet/editor.tsx +++ b/apps/web/src/features/resume/stylesheet/editor.tsx @@ -330,7 +330,7 @@ export function StylesheetCodeEditor({ type="button" title={t`Edit color ${selectedColor.token.value}`} aria-label={t`Edit color ${selectedColor.token.value}`} - className="pointer-events-auto size-3 rounded-full border border-foreground/40" + className="pointer-events-auto size-3 rounded-full border border-ink/40" style={{ backgroundColor: selectedColor.token.value }} /> } @@ -514,12 +514,12 @@ function StylesheetEditorShell({ readOnly = false }: StylesheetEditorShellProps) onFocusToggle={toggleFocus} /> -

+

(

  • {diagnostic.message}

    -

    +

    Line {diagnostic.range.start.line}, column {diagnostic.range.start.column} diff --git a/apps/web/src/routes/_home/-sections/footer.tsx b/apps/web/src/routes/_home/-sections/footer.tsx index 34dd83c17..4022fd20a 100644 --- a/apps/web/src/routes/_home/-sections/footer.tsx +++ b/apps/web/src/routes/_home/-sections/footer.tsx @@ -61,7 +61,7 @@ export function Footer() {

    Reactive Resume

    -

    +

    A free and open-source resume builder that makes it easy to create, update, and share your resume. @@ -109,7 +109,7 @@ export function Footer() { function FooterLinkGroup({ title, links }: FooterLinkGroupProps) { return (

    -

    {title}

    +

    {title}

      {links.map((link) => ( @@ -127,7 +127,7 @@ function FooterLink({ url, label }: FooterLinkItem) { href={url} target="_blank" rel="noopener noreferrer" - className="relative inline-block text-sm transition-colors after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:rounded-md after:bg-primary after:content-[''] hover:text-foreground hover:after:scale-x-100 rtl:after:origin-right after:[transition:scale_200ms_var(--ease-out-strong)]" + className="relative inline-block text-sm transition-colors after:pointer-events-none after:absolute after:inset-x-0 after:-bottom-0.5 after:h-px after:origin-left after:scale-x-0 after:rounded-md after:bg-accent after:content-[''] hover:text-ink hover:after:scale-x-100 rtl:after:origin-right after:[transition:scale_200ms_var(--ease-out-strong)]" > {label} diff --git a/apps/web/src/routes/_home/-sections/header.tsx b/apps/web/src/routes/_home/-sections/header.tsx index 6bd336f16..c03fc9790 100644 --- a/apps/web/src/routes/_home/-sections/header.tsx +++ b/apps/web/src/routes/_home/-sections/header.tsx @@ -20,7 +20,7 @@ export function Header() { return (