feat(editor): add multicolor highlight with auto-contrast text (#3110)

* feat(editor): add multicolor highlight with auto-contrast text

Enable the Tiptap Highlight extension in multicolor mode, replacing the
single-color yellow toggle with a full color picker (16 presets + custom).
When the chosen highlight color is perceptually dark, text inside the mark
automatically renders white for readability.

Changes span the full pipeline:
- Editor: ColorPicker UI, extended renderHTML for contrast detection
- PDF: normalizeMarkElements preserves data-color as inline style
- DOCX: mergeStyle reads actual background-color from <mark>
- Utils: new isDarkColor() luminance helper

Backward-compatible: legacy <mark> without data-color still renders yellow.

Resolves #3109

* fix: handle multicolor highlight edge cases

---------

Co-authored-by: Amruth Pillai <im.amruth@gmail.com>

apps/web/locales/af-ZA.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: af\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Afrikaans\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Chinees (Tradisioneel)"
 msgid "Choose a model and resume draft."
 msgstr "Kies 'n model en CV-konsep."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Kies 'n bestaande gesprek vanaf die sybalk, of begin 'n nuwe konsep-gefo
 msgid "Circle"
 msgstr "Sirkel"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Hoog"
 msgid "Highlight"
 msgstr "Merk"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Kleurmerk"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hongaars"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikoon"
@@ -3996,4 +4001,3 @@ msgstr "Zoem uit"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zoeloe"
-

apps/web/locales/am-ET.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: am\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Amharic\n"
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
@@ -653,6 +653,7 @@ msgstr "ቻይንኛ (ባለባለት)"
 msgid "Choose a model and resume draft."
 msgstr "ሞዴል ይምረጡ እና የሪዚሜ ረቂቅ ይምረጡ።"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "ከጎን አሞሌው ላይ አንድ ነባር ውይይት ይምረ
 msgid "Circle"
 msgstr "ክብ"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "ከፍተኛ"
 msgid "Highlight"
 msgstr "አብራጭ"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "ሒንዱኛ"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "ሀንጋሪኛ"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "አዶ"
@@ -3996,4 +4001,3 @@ msgstr "አጉር"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "ዙሉ"
-

apps/web/locales/ar-SA.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ar\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Arabic\n"
 "Plural-Forms: nplurals=6; plural=(n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 && n%100<=10 ? 3 : n%100>=11 && n%100<=99 ? 4 : 5);\n"
@@ -653,6 +653,7 @@ msgstr "الصينية (التقليدية)"
 msgid "Choose a model and resume draft."
 msgstr "اختر نموذجًا واكتب مسودة سيرة ذاتية."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "اختر محادثة موجودة من الشريط الجانبي، أ
 msgid "Circle"
 msgstr "دائرة"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "عالية"
 msgid "Highlight"
 msgstr "تمييز"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "لون مميز"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "الهندية"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "الهنغارية"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "الأيقونة"
@@ -3996,4 +4001,3 @@ msgstr "تصغير"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "الزولو"
-

apps/web/locales/az-AZ.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: az\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Azerbaijani\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Çin (Ənənəvi)"
 msgid "Choose a model and resume draft."
 msgstr "Bir model seçin və qaralamanı davam etdirin."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Yan paneldən mövcud bir söhbət seçin və ya qaralamaya yönəlmiş
 msgid "Circle"
 msgstr "Dairə"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Yüksək"
 msgid "Highlight"
 msgstr "Vurğula"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hind"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Macar"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "İkon"
@@ -3996,4 +4001,3 @@ msgstr "Uzaqlaşdır"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/bg-BG.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: bg\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Bulgarian\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Китайски (традиционен)"
 msgid "Choose a model and resume draft."
 msgstr "Изберете модел и чернова на автобиография."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Изберете съществуващ разговор от стран
 msgid "Circle"
 msgstr "Кръг"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Висока"
 msgid "Highlight"
 msgstr "Маркер за подчертаване"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Цвят на акцента"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Хинди"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Унгарски"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Икона"
@@ -3996,4 +4001,3 @@ msgstr "Намаляване"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Зулуски"
-

apps/web/locales/bn-BD.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: bn\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Bengali\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "চীনা (প্রচলিত)"
 msgid "Choose a model and resume draft."
 msgstr "একটি মডেল বেছে নিন এবং জীবনবৃত্তান্তের খসড়া তৈরি করুন।"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "সাইডবার থেকে একটি চলমান আল
 msgid "Circle"
 msgstr "বৃত্ত"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "উচ্চ"
 msgid "Highlight"
 msgstr "হাইলাইট"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "হিন্দি"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "হাঙ্গেরিয়ান"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "আইকন"
@@ -3996,4 +4001,3 @@ msgstr "জুম আউট"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "জুলু"
-

apps/web/locales/ca-ES.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ca\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Catalan\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Xinès (tradicional)"
 msgid "Choose a model and resume draft."
 msgstr "Trieu un model i un esborrany de currículum."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Trieu una conversa existent de la barra lateral o inicieu un fil nou cen
 msgid "Circle"
 msgstr "Cercle"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Alt"
 msgid "Highlight"
 msgstr "Ressaltat"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Color de ressaltat"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hongarès"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Icona"
@@ -3996,4 +4001,3 @@ msgstr "Allunya"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulú"
-

apps/web/locales/cs-CZ.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: cs\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Czech\n"
 "Plural-Forms: nplurals=4; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 3;\n"
@@ -653,6 +653,7 @@ msgstr "Čínština (tradiční)"
 msgid "Choose a model and resume draft."
 msgstr "Vyberte si model a návrh životopisu."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Vyberte existující konverzaci z postranního panelu nebo začněte nov
 msgid "Circle"
 msgstr "Kruh"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Vysoká"
 msgid "Highlight"
 msgstr "Zvýraznění"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Barva zvýraznění"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindština"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Maďarština"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikona"
@@ -3996,4 +4001,3 @@ msgstr "Oddálit"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/da-DK.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: da\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Danish\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Kinesisk (traditionelt)"
 msgid "Choose a model and resume draft."
 msgstr "Vælg en model og et udkast til CV."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Vælg en eksisterende samtale fra sidebjælken, eller start en ny tråd
 msgid "Circle"
 msgstr "Cirkel"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Høj"
 msgid "Highlight"
 msgstr "Fremhæv"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Fremhævelsesfarve"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Ungarsk"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikon"
@@ -3996,4 +4001,3 @@ msgstr "Zoom ud"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/de-DE.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: de\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Chinesisch (traditionell)"
 msgid "Choose a model and resume draft."
 msgstr "Wählen Sie ein Modell und erstellen Sie einen Lebenslaufentwurf."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Wählen Sie eine bestehende Konversation aus der Seitenleiste oder start
 msgid "Circle"
 msgstr "Kreis"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Hoch"
 msgid "Highlight"
 msgstr "Hervorheben"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Hervorhebungsfarbe"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Ungarisch"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Symbol"
@@ -3996,4 +4001,3 @@ msgstr "Herauszoomen"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/el-GR.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: el\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Greek\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Κινέζικα (Παραδοσιακά)"
 msgid "Choose a model and resume draft."
 msgstr "Επιλέξτε ένα μοντέλο και γράψτε το βιογραφικό σας ως προσχέδιο."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Επιλέξτε μια υπάρχουσα συζήτηση από τη
 msgid "Circle"
 msgstr "Κύκλος"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Υψηλή"
 msgid "Highlight"
 msgstr "Επισήμανση"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Χρώμα επισήμανσης"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Χίντι"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Ουγγρικά"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Εικονίδιο"
@@ -3996,4 +4001,3 @@ msgstr "Σμίκρυνση"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Ζουλού"
-

apps/web/locales/en-GB.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: en_GB\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: English, United Kingdom\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Chinese (Traditional)"
 msgid "Choose a model and resume draft."
 msgstr "Choose a model and resume draft."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Choose an existing conversation from the sidebar, or start a new draft-f
 msgid "Circle"
 msgstr "Circle"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "High"
 msgid "Highlight"
 msgstr "Highlight"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Highlight Color"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hungarian"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Icon"
@@ -3996,4 +4001,3 @@ msgstr "Zoom out"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/en-US.po

@@ -648,6 +648,7 @@ msgstr "Chinese (Traditional)"
 msgid "Choose a model and resume draft."
 msgstr "Choose a model and resume draft."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -665,6 +666,7 @@ msgstr "Choose an existing conversation from the sidebar, or start a new draft-f
 msgid "Circle"
 msgstr "Circle"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1774,6 +1776,10 @@ msgstr "High"
 msgid "Highlight"
 msgstr "Highlight"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Highlight Color"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1803,7 +1809,6 @@ msgid "Hungarian"
 msgstr "Hungarian"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Icon"

apps/web/locales/es-ES.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: es\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Spanish\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Chino (tradicional)"
 msgid "Choose a model and resume draft."
 msgstr "Elige un modelo y un borrador de currículum."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Selecciona una conversación existente en la barra lateral o inicia un n
 msgid "Circle"
 msgstr "Círculo"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Alta"
 msgid "Highlight"
 msgstr "Resaltado"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Color de resaltado"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Húngaro"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Icono"
@@ -3996,4 +4001,3 @@ msgstr "Alejar"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulú"
-

apps/web/locales/fa-IR.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: fa\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Persian\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "چینی (سنتی)"
 msgid "Choose a model and resume draft."
 msgstr "یک مدل انتخاب کنید و پیش‌نویس رزومه را بنویسید."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "یک مکالمه موجود را از نوار کناری انتخاب
 msgid "Circle"
 msgstr "دایره"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "بالا"
 msgid "Highlight"
 msgstr "هایلایت"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "هندی"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "مجاری"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "آیکون"
@@ -3996,4 +4001,3 @@ msgstr "کوچک‌نمایی"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "زولو"
-

apps/web/locales/fi-FI.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: fi\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Finnish\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "kiina (perinteinen)"
 msgid "Choose a model and resume draft."
 msgstr "Valitse malli ja ansioluettelon luonnos."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Valitse olemassa oleva keskustelu sivupalkista tai aloita uusi luonnosty
 msgid "Circle"
 msgstr "Ympyrä"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Korkea"
 msgid "Highlight"
 msgstr "Korostus"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Korostusväri"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "unkari"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikoni"
@@ -3996,4 +4001,3 @@ msgstr "Loitonna"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/fr-FR.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: fr\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: French\n"
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
@@ -653,6 +653,7 @@ msgstr "Chinois (traditionnel)"
 msgid "Choose a model and resume draft."
 msgstr "Choisissez un modèle et un brouillon de CV."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Choisissez une conversation existante dans la barre latérale, ou créez
 msgid "Circle"
 msgstr "Cercle"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Haut"
 msgid "Highlight"
 msgstr "Mettre en surbrillance"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Couleur de surbrillance"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hongrois"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Icône"
@@ -3996,4 +4001,3 @@ msgstr "Zoom arrière"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zoulou"
-

apps/web/locales/he-IL.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: he\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Hebrew\n"
 "Plural-Forms: nplurals=4; plural=n%100==1 ? 0 : n%100==2 ? 1 : n%100==3 || n%100==4 ? 2 : 3;\n"
@@ -653,6 +653,7 @@ msgstr "סינית (מסורתית)"
 msgid "Choose a model and resume draft."
 msgstr "בחר מודל וטיוטת קורות חיים."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "בחר שיחה קיימת מסרגל הצד, או התחל שרשור
 msgid "Circle"
 msgstr "עיגול"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "גבוה"
 msgid "Highlight"
 msgstr "סימון"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "צבע סימון"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "הינדי"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "הונגרית"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "סמל"
@@ -3996,4 +4001,3 @@ msgstr "התרחקות"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "זולו"
-

apps/web/locales/hi-IN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: hi\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Hindi\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "चीनी (परंपरागत)"
 msgid "Choose a model and resume draft."
 msgstr "एक मॉडल चुनें और रिज्यूमे का ड्राफ्ट तैयार करें।"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "साइडबार से किसी मौजूदा बात
 msgid "Circle"
 msgstr "गोला"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "उच्च"
 msgid "Highlight"
 msgstr "हाइलाइट"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "हिन्दी"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "हंगेरियन"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "आइकॉन"
@@ -3996,4 +4001,3 @@ msgstr "ज़ूम आउट"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "ज़ुलु"
-

apps/web/locales/hu-HU.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: hu\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Hungarian\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "kínai (hagyományos)"
 msgid "Choose a model and resume draft."
 msgstr "Válasszon egy modellt és önéletrajz-tervezetet."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Válasszon egy meglévő beszélgetést az oldalsávon, vagy indítson e
 msgid "Circle"
 msgstr "Kör"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Magas"
 msgid "Highlight"
 msgstr "Kiemelés"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Kiemelő szín"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "magyar"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikon"
@@ -3996,4 +4001,3 @@ msgstr "Kicsinyítés"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/id-ID.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: id\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Indonesian\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "Cina (Tradisional)"
 msgid "Choose a model and resume draft."
 msgstr "Pilih model dan draf resume."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Pilih percakapan yang sudah ada dari bilah sisi, atau mulai utas baru ya
 msgid "Circle"
 msgstr "Lingkaran"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Tinggi"
 msgid "Highlight"
 msgstr "Sorot"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hungaria"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikon"
@@ -3996,4 +4001,3 @@ msgstr "Perkecil"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/it-IT.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: it\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Italian\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Cinese (tradizionale)"
 msgid "Choose a model and resume draft."
 msgstr "Scegli un modello e una bozza di curriculum."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Scegli una conversazione esistente dalla barra laterale oppure avvia una
 msgid "Circle"
 msgstr "Cerchio"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Alto"
 msgid "Highlight"
 msgstr "Evidenzia"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Colore di evidenziazione"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Ungherese"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Icona"
@@ -3996,4 +4001,3 @@ msgstr "Rimpicciolisci"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/ja-JP.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ja\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Japanese\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "中国語（繁体字）"
 msgid "Choose a model and resume draft."
 msgstr "モデルを選び、履歴書の草稿を作成してください。"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "サイドバーから既存の会話を選択するか、下書きに特
 msgid "Circle"
 msgstr "円"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "高い"
 msgid "Highlight"
 msgstr "ハイライト"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "ハイライトカラー"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "ヒンディー語"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "ハンガリー語"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "アイコン"
@@ -3996,4 +4001,3 @@ msgstr "ズームアウト"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "ズールー語"
-

apps/web/locales/km-KH.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: km\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Khmer\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "Chinese (Traditional)"
 msgid "Choose a model and resume draft."
 msgstr "ជ្រើសរើសគំរូ និងប្រវត្តិរូបសង្ខេប។"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "ជ្រើសរើសការសន្ទនាដែលមានស
 msgid "Circle"
 msgstr "រង្វង់"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "ខ្ពស់"
 msgid "Highlight"
 msgstr "រំលេច"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hungarian"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "រូបតំណាង"
@@ -3996,4 +4001,3 @@ msgstr "បង្រួម"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/kn-IN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: kn\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Kannada\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "ಚೈನೀಸ್ (ಸಾಂಪ್ರದಾಯಿಕ)"
 msgid "Choose a model and resume draft."
 msgstr "ಮಾದರಿ ಮತ್ತು ಪುನರಾರಂಭದ ಡ್ರಾಫ್ಟ್ ಅನ್ನು ಆರಿಸಿ."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "ಸೈಡ್‌ಬಾರ್‌ನಿಂದ ಅಸ್ತಿತ್ವದ
 msgid "Circle"
 msgstr "ವೃತ್ತ"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "ಹೆಚ್ಚು"
 msgid "Highlight"
 msgstr "ಹೈಲೈಟ್ ಮಾಡಿ"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "ಹಿಂದಿ"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "ಹಂಗೇರಿಯನ್"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "ಐಕಾನ್"
@@ -3996,4 +4001,3 @@ msgstr "ಗಾತ್ರ ಕುಗ್ಗಿಸಿ"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "ಜೂಲೂ"
-

apps/web/locales/ko-KR.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ko\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Korean\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "중국어(번체)"
 msgid "Choose a model and resume draft."
 msgstr "모델을 선택하고 이력서 초안을 작성하세요."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "사이드바에서 기존 대화를 선택하거나, 초안 작성에
 msgid "Circle"
 msgstr "원"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "높음"
 msgid "Highlight"
 msgstr "형광펜"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "하이라이트 색상"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "힌디어"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "헝가리어"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "아이콘"
@@ -3996,4 +4001,3 @@ msgstr "축소"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "줄루어"
-

apps/web/locales/lt-LT.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: lt\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Lithuanian\n"
 "Plural-Forms: nplurals=4; plural=(n%10==1 && (n%100>19 || n%100<11) ? 0 : (n%10>=2 && n%10<=9) && (n%100>19 || n%100<11) ? 1 : n%1!=0 ? 2: 3);\n"
@@ -653,6 +653,7 @@ msgstr "Kinų (tradicinė)"
 msgid "Choose a model and resume draft."
 msgstr "Pasirinkite modelį ir gyvenimo aprašymo juodraštį."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Šoninėje juostoje pasirinkite esamą pokalbį arba pradėkite naują,
 msgid "Circle"
 msgstr "Apskritimas"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Aukštas"
 msgid "Highlight"
 msgstr "Paryškinti"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Vengrų"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikona"
@@ -3996,4 +4001,3 @@ msgstr "Tolinti"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulų"
-

apps/web/locales/lv-LV.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: lv\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Latvian\n"
 "Plural-Forms: nplurals=3; plural=n%10==1 && n%100!=11 ? 0 : n != 0 ? 1 : 2;\n"
@@ -653,6 +653,7 @@ msgstr "Ķīniešu (tradicionālā)"
 msgid "Choose a model and resume draft."
 msgstr "Izvēlieties modeli un CV melnrakstu."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Sānjoslā izvēlieties esošu sarunu vai sāciet jaunu, uz melnrakstu o
 msgid "Circle"
 msgstr "Aplis"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Augsts"
 msgid "Highlight"
 msgstr "Izcelt"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Ungāru"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikona"
@@ -3996,4 +4001,3 @@ msgstr "Tālināt"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/ml-IN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ml\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Malayalam\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "ചൈനീസ് (ട്രഡീഷണൽ)"
 msgid "Choose a model and resume draft."
 msgstr "ഒരു മോഡൽ തിരഞ്ഞെടുത്ത് ഡ്രാഫ്റ്റ് റെസ്യൂമെ ചെയ്യുക."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "സൈഡ്‌ബാറിൽ നിന്ന് നിലവിലു
 msgid "Circle"
 msgstr "വൃത്തം"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "ഉയർന്ന"
 msgid "Highlight"
 msgstr "ഹൈലൈറ്റ്"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "ഹിന്ദി"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "ഹംഗേറിയൻ"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "ഐക്കൺ"
@@ -3996,4 +4001,3 @@ msgstr "സൂം ഔട്ട് ചെയ്യുക"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "സൂളു"
-

apps/web/locales/mr-IN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: mr\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Marathi\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "चीनी (परंपरागत)"
 msgid "Choose a model and resume draft."
 msgstr "मॉडेल आणि रिझ्युमेचा मसुदा निवडा."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "साइडबारमधून आधीपासून सुरू
 msgid "Circle"
 msgstr "गोलाकार"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "उच्च"
 msgid "Highlight"
 msgstr "हायलाइट"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "हिंदी"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "हंगेरीयन"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "आयकन"
@@ -3996,4 +4001,3 @@ msgstr "बाहेर झूम करा"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "झुलू"
-

apps/web/locales/ms-MY.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ms\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Malay\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "Cina (Tradisional)"
 msgid "Choose a model and resume draft."
 msgstr "Pilih model dan draf resume."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Pilih perbualan sedia ada daripada bar sisi atau mulakan thread berfokus
 msgid "Circle"
 msgstr "Bulatan"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Tinggi"
 msgid "Highlight"
 msgstr "Sorot"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hungary"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikon"
@@ -3996,4 +4001,3 @@ msgstr "Zum keluar"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/ne-NP.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ne\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Nepali\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "चिनियाँ (परम्परागत)"
 msgid "Choose a model and resume draft."
 msgstr "एउटा मोडेल छान्नुहोस् र मस्यौदा पुनः सुरु गर्नुहोस्।"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "साइडबारबाट अवस्थित कुराका
 msgid "Circle"
 msgstr "वृत्त"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "उच्च"
 msgid "Highlight"
 msgstr "हाइलाइट"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "हिन्दी"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "हंगेरीयाली"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "आइकन"
@@ -3996,4 +4001,3 @@ msgstr "जूम आउट"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "जुलु"
-

apps/web/locales/nl-NL.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: nl\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Dutch\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Chinees (traditioneel)"
 msgid "Choose a model and resume draft."
 msgstr "Kies een model en stel een concept-cv op."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Kies een bestaand gesprek uit de zijbalk of start een nieuw discussieond
 msgid "Circle"
 msgstr "Cirkel"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Hoog"
 msgid "Highlight"
 msgstr "Markeren"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hongaars"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Pictogram"
@@ -3996,4 +4001,3 @@ msgstr "Uitzoomen"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/no-NO.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: no\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Norwegian\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Kinesisk (tradisjonell)"
 msgid "Choose a model and resume draft."
 msgstr "Velg en modell og et utkast til CV."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Velg en eksisterende samtale fra sidefeltet, eller start en ny utkastfok
 msgid "Circle"
 msgstr "Sirkel"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Høy"
 msgid "Highlight"
 msgstr "Fremhev"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Ungarsk"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikon"
@@ -3996,4 +4001,3 @@ msgstr "Zoom ut"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/or-IN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: or\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Odia\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "ଚାଇନିଜ୍ (ପାରମ୍ପରିକ)"
 msgid "Choose a model and resume draft."
 msgstr "ଏକ ମଡେଲ୍ ବାଛନ୍ତୁ ଏବଂ ଡ୍ରାଫ୍ଟ ପୁଣି ଆରମ୍ଭ କରନ୍ତୁ।"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "ସାଇଡବାରରୁ ଏକ ପୂର୍ବରୁ ଥିବା
 msgid "Circle"
 msgstr "ବୃତ୍ତ"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "ଉଚ୍ଚ"
 msgid "Highlight"
 msgstr "ହାଇଲାଇଟ୍"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "ହିନ୍ଦୀ"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "ହଙ୍ଗେରିଆନ୍"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "ଆଇକନ୍"
@@ -3996,4 +4001,3 @@ msgstr "ଜୁମ୍ ଆଉଟ୍ କରନ୍ତୁ"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "ଜୁଲୁ"
-

apps/web/locales/pl-PL.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: pl\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Polish\n"
 "Plural-Forms: nplurals=4; plural=(n==1 ? 0 : (n%10>=2 && n%10<=4) && (n%100<12 || n%100>14) ? 1 : n!=1 && (n%10>=0 && n%10<=1) || (n%10>=5 && n%10<=9) || (n%100>=12 && n%100<=14) ? 2 : 3);\n"
@@ -653,6 +653,7 @@ msgstr "Chiński (tradycyjny)"
 msgid "Choose a model and resume draft."
 msgstr "Wybierz model i szkic CV."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Wybierz istniejącą konwersację z paska bocznego lub rozpocznij nowy w
 msgid "Circle"
 msgstr "Koło"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Wysoki"
 msgid "Highlight"
 msgstr "Zakreślenie"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Węgierski"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikona"
@@ -3996,4 +4001,3 @@ msgstr "Pomniejsz"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/pt-BR.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: pt\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Portuguese, Brazilian\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Chinês (Tradicional)"
 msgid "Choose a model and resume draft."
 msgstr "Escolha um modelo e um rascunho de currículo."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Escolha uma conversa existente na barra lateral ou inicie uma nova discu
 msgid "Circle"
 msgstr "Círculo"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Alta"
 msgid "Highlight"
 msgstr "Realce"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Húngaro"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ícone"
@@ -3996,4 +4001,3 @@ msgstr "Diminuir zoom"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/pt-PT.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: pt\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Portuguese\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Chinês (tradicional)"
 msgid "Choose a model and resume draft."
 msgstr "Escolha um modelo e um esboço de currículo."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Escolha uma conversa existente na barra lateral ou inicie uma nova discu
 msgid "Circle"
 msgstr "Círculo"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Elevado"
 msgid "Highlight"
 msgstr "Realce"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Húngaro"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ícone"
@@ -3996,4 +4001,3 @@ msgstr "Afastar"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/ro-RO.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ro\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Romanian\n"
 "Plural-Forms: nplurals=3; plural=(n==1 ? 0 : (n==0 || (n%100>0 && n%100<20)) ? 1 : 2);\n"
@@ -653,6 +653,7 @@ msgstr "Chineză (tradițională)"
 msgid "Choose a model and resume draft."
 msgstr "Alegeți un model și o schiță de CV."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Alege o conversație existentă din bara laterală sau începe un nou fi
 msgid "Circle"
 msgstr "Cerc"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Înaltă"
 msgid "Highlight"
 msgstr "Evidențiere"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr "Culoare evidențiere"
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Maghiară"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Iconiță"
@@ -3996,4 +4001,3 @@ msgstr "Micșorează"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/ru-RU.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ru\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Russian\n"
 "Plural-Forms: nplurals=4; plural=((n%10==1 && n%100!=11) ? 0 : ((n%10 >= 2 && n%10 <=4 && (n%100 < 12 || n%100 > 14)) ? 1 : ((n%10 == 0 || (n%10 >= 5 && n%10 <=9)) || (n%100 >= 11 && n%100 <= 14)) ? 2 : 3));\n"
@@ -653,6 +653,7 @@ msgstr "Китайский (традиционный)"
 msgid "Choose a model and resume draft."
 msgstr "Выберите образец и черновик резюме."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Выберите существующую беседу на боково
 msgid "Circle"
 msgstr "Круг"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Высокий"
 msgid "Highlight"
 msgstr "Подсветка"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Хинди"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Венгерский"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Иконка"
@@ -3996,4 +4001,3 @@ msgstr "Уменьшить"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Зулу"
-

apps/web/locales/sk-SK.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: sk\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Slovak\n"
 "Plural-Forms: nplurals=4; plural=(n==1) ? 0 : (n>=2 && n<=4) ? 1 : 3;\n"
@@ -653,6 +653,7 @@ msgstr "Čínština (tradičná)"
 msgid "Choose a model and resume draft."
 msgstr "Vyberte si model a návrh životopisu."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Vyberte existujúcu konverzáciu z bočného panela alebo začnite nové
 msgid "Circle"
 msgstr "Kruh"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Vysoká"
 msgid "Highlight"
 msgstr "Zvýraznenie"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindčina"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Maďarčina"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikona"
@@ -3996,4 +4001,3 @@ msgstr "Oddialiť"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/sl-SI.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: sl\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Slovenian\n"
 "Plural-Forms: nplurals=4; plural=n%100==1 ? 0 : n%100==2 ? 1 : n%100==3 || n%100==4 ? 2 : 3;\n"
@@ -653,6 +653,7 @@ msgstr "Kitajščina (tradicionalna)"
 msgid "Choose a model and resume draft."
 msgstr "Izberite model in osnutek življenjepisa."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "V stranski vrstici izberite obstoječi pogovor ali začnite novo nit, os
 msgid "Circle"
 msgstr "Krog"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Visoka"
 msgid "Highlight"
 msgstr "Označi"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindujščina"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Madžarščina"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikona"
@@ -3996,4 +4001,3 @@ msgstr "Oddalji"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zuluščina"
-

apps/web/locales/sq-AL.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: sq\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Albanian\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Kinezçe (Tradicionale)"
 msgid "Choose a model and resume draft."
 msgstr "Zgjidhni një model dhe rifilloni draftin."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Zgjidh një bisedë ekzistuese nga shiriti anësor ose fillo një temë
 msgid "Circle"
 msgstr "Rreth"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "I lartë"
 msgid "Highlight"
 msgstr "Thekso"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Indisht (Hindi)"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Hungarisht"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikona"
@@ -3996,4 +4001,3 @@ msgstr "Zvogëlo"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/sr-SP.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: sr\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Serbian (Cyrillic)\n"
 "Plural-Forms: nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);\n"
@@ -653,6 +653,7 @@ msgstr "Кинески (традиционални)"
 msgid "Choose a model and resume draft."
 msgstr "Изаберите модел и нацртајте животопис."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Изаберите постојећи разговор са бочне
 msgid "Circle"
 msgstr "Круг"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Високо"
 msgid "Highlight"
 msgstr "Истакни"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Хинди"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Мађарски"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Иконица"
@@ -3996,4 +4001,3 @@ msgstr "Умањи"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Зулу"
-

apps/web/locales/sv-SE.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: sv\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Swedish\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Kinesiska (traditionell)"
 msgid "Choose a model and resume draft."
 msgstr "Välj en modell och ett utkast till CV."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Välj en befintlig konversation från sidofältet eller starta en ny utk
 msgid "Circle"
 msgstr "Cirkel"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Hög"
 msgid "Highlight"
 msgstr "Markera"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Ungerska"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikon"
@@ -3996,4 +4001,3 @@ msgstr "Zooma ut"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/ta-IN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: ta\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Tamil\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "சீனம் (சம்பிரதாய)"
 msgid "Choose a model and resume draft."
 msgstr "ஒரு மாதிரியையும் சுயவிவர வரைவையும் தேர்வு செய்யவும்."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "பக்கப் பட்டியில் இருந்து ஏ
 msgid "Circle"
 msgstr "வட்டம்"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "உயர்"
 msgid "Highlight"
 msgstr "ஹைலைட்"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "ஹிந்தி"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "ஹங்கேரியன்"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "ஐகான்"
@@ -3996,4 +4001,3 @@ msgstr "சிறிதாக்கு"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "ஜூலு"
-

apps/web/locales/te-IN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: te\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Telugu\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "చైనీస్ (సాంప్రదాయ)"
 msgid "Choose a model and resume draft."
 msgstr "ఒక నమూనా మరియు రెజ్యూమె ముసాయిదాను ఎంచుకోండి."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "సైడ్‌బార్ నుండి ఇప్పటికే ఉ
 msgid "Circle"
 msgstr "వృత్తం"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "అధిక"
 msgid "Highlight"
 msgstr "హైలైట్"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "హిందీ"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "హంగేరియన్"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "ఐకాన్"
@@ -3996,4 +4001,3 @@ msgstr "జూమ్ అవుట్ చేయండి"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "జులు"
-

apps/web/locales/th-TH.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: th\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Thai\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "จีน (ตัวเต็ม)"
 msgid "Choose a model and resume draft."
 msgstr "เลือกแบบและร่างประวัติย่อ"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "เลือกบทสนทนาที่มีอยู่แล้
 msgid "Circle"
 msgstr "วงกลม"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "สูง"
 msgid "Highlight"
 msgstr "ไฮไลต์"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "ฮินดี"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "ฮังการี"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "ไอคอน"
@@ -3996,4 +4001,3 @@ msgstr "ซูมออก"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "ซูลู"
-

apps/web/locales/tr-TR.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: tr\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Turkish\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -653,6 +653,7 @@ msgstr "Çince (Geleneksel)"
 msgid "Choose a model and resume draft."
 msgstr "Bir model ve özgeçmiş taslağı seçin."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Yan menüden mevcut bir konuşmayı seçin veya taslak odaklı yeni bir
 msgid "Circle"
 msgstr "Daire"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Yüksek"
 msgid "Highlight"
 msgstr "Vurgula"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hintçe"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Macarca"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Simge"
@@ -3996,4 +4001,3 @@ msgstr "Uzaklaştır"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/uk-UA.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: uk\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Ukrainian\n"
 "Plural-Forms: nplurals=4; plural=((n%10==1 && n%100!=11) ? 0 : ((n%10 >= 2 && n%10 <=4 && (n%100 < 12 || n%100 > 14)) ? 1 : ((n%10 == 0 || (n%10 >= 5 && n%10 <=9)) || (n%100 >= 11 && n%100 <= 14)) ? 2 : 3));\n"
@@ -653,6 +653,7 @@ msgstr "Китайська (традиційна)"
 msgid "Choose a model and resume draft."
 msgstr "Виберіть модель та чернетку резюме."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Виберіть існуючу розмову на бічній пан
 msgid "Circle"
 msgstr "Кругле"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Високий"
 msgid "Highlight"
 msgstr "Виділити"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Гінді"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Угорська"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Іконка"
@@ -3996,4 +4001,3 @@ msgstr "Зменшити"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Зулу"
-

apps/web/locales/uz-UZ.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: uz\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Uzbek\n"
 "Plural-Forms: nplurals=2; plural=(n > 1);\n"
@@ -653,6 +653,7 @@ msgstr "Xitoy (An’anaviy)"
 msgid "Choose a model and resume draft."
 msgstr "Modelni tanlang va qoralamani rezyume qiling."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Yon paneldan mavjud suhbatni tanlang yoki qoralamaga yo'naltirilgan yang
 msgid "Circle"
 msgstr "Doira"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Yuqori"
 msgid "Highlight"
 msgstr "Ajratib ko‘rsatish"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Hind tili"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Venger tili"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Ikonka"
@@ -3996,4 +4001,3 @@ msgstr "Kichraytirish"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/vi-VN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: vi\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Vietnamese\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "Tiếng Trung (Phồn thể)"
 msgid "Choose a model and resume draft."
 msgstr "Chọn một mẫu và soạn thảo bản nháp sơ yếu lý lịch."
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "Chọn một cuộc hội thoại hiện có từ thanh bên hoặc bắ
 msgid "Circle"
 msgstr "Vòng tròn"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "Cao"
 msgid "Highlight"
 msgstr "Làm nổi bật"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "Tiếng Hindi"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "Tiếng Hungary"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "Icon"
@@ -3996,4 +4001,3 @@ msgstr "Thu nhỏ"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "Zulu"
-

apps/web/locales/zh-CN.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: zh\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Chinese Simplified\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "中文（繁体）"
 msgid "Choose a model and resume draft."
 msgstr "选择一款简历模板并撰写简历草稿。"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "从侧边栏选择现有对话，或发起新的以草稿为中心的讨
 msgid "Circle"
 msgstr "圆形"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "高"
 msgid "Highlight"
 msgstr "高亮"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "印地语"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "匈牙利语"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "图标"
@@ -3996,4 +4001,3 @@ msgstr "缩小"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "祖鲁语"
-

apps/web/locales/zh-TW.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: zh\n"
 "Project-Id-Version: reactive-resume\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2026-06-01 11:26\n"
+"PO-Revision-Date: 2026-06-01 12:55\n"
 "Last-Translator: \n"
 "Language-Team: Chinese Traditional\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
@@ -653,6 +653,7 @@ msgstr "中文（繁體）"
 msgid "Choose a model and resume draft."
 msgstr "選擇一款履歷表範本並撰寫履歷草稿。"
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -670,6 +671,7 @@ msgstr "從側邊欄選擇現有對話，或發起新的以草稿為中心的討
 msgid "Circle"
 msgstr "圓形"
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1779,6 +1781,10 @@ msgstr "高"
 msgid "Highlight"
 msgstr "螢光標記"
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr "印地語"
@@ -1808,7 +1814,6 @@ msgid "Hungarian"
 msgstr "匈牙利語"
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr "圖示"
@@ -3996,4 +4001,3 @@ msgstr "縮小"
 #: src/libs/locale.ts
 msgid "Zulu"
 msgstr "祖魯語"
-

apps/web/locales/zu-ZA.po

@@ -648,6 +648,7 @@ msgstr ""
 msgid "Choose a model and resume draft."
 msgstr ""
 
+#. Preset or custom shade refer to the color picker
 #. Preset or custom shade refer to the color picker
 #: src/components/input/rich-input.tsx
 msgid "Choose a preset or custom shade."
@@ -665,6 +666,7 @@ msgstr ""
 msgid "Circle"
 msgstr ""
 
+#. Clear the highlight color
 #. Clear the text color
 #: src/components/input/rich-input.tsx
 msgid "Clear"
@@ -1774,6 +1776,10 @@ msgstr ""
 msgid "Highlight"
 msgstr ""
 
+#: src/components/input/rich-input.tsx
+msgid "Highlight Color"
+msgstr ""
+
 #: src/libs/locale.ts
 msgid "Hindi"
 msgstr ""
@@ -1803,7 +1809,6 @@ msgid "Hungarian"
 msgstr ""
 
 #: src/components/level/combobox.tsx
-#: src/dialogs/resume/sections/custom.tsx
 #: src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
 msgid "Icon"
 msgstr ""

apps/web/src/components/input/rich-input.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { resolveHighlightToolbarState } from "./rich-input";
+
+describe("resolveHighlightToolbarState", () => {
+	it("shows legacy colorless highlights as default yellow and clearable", () => {
+		expect(resolveHighlightToolbarState(true, null)).toEqual({
+			visibleHighlightColor: "rgba(255, 255, 0, 1)",
+			canClearHighlight: true,
+		});
+	});
+
+	it("does not show or clear a highlight when no highlight mark is active", () => {
+		expect(resolveHighlightToolbarState(false, null)).toEqual({
+			visibleHighlightColor: undefined,
+			canClearHighlight: false,
+		});
+	});
+});

apps/web/src/components/input/rich-input.tsx

@@ -62,12 +62,14 @@ import {
 } from "@reactive-resume/ui/components/dropdown-menu";
 import { PopoverHeader, PopoverTitle, PopoverTrigger } from "@reactive-resume/ui/components/popover";
 import { Toggle } from "@reactive-resume/ui/components/toggle";
+import { isDarkColor } from "@reactive-resume/utils/color";
 import { cn } from "@reactive-resume/utils/style";
 import { usePrompt } from "@/hooks/use-prompt";
 import { isRTL } from "@/libs/locale";
 import { ColorPicker } from "./color-picker";
 
 const defaultTextColor = "rgba(0, 0, 0, 1)";
+const defaultHighlightColor = "rgba(255, 255, 0, 1)";
 
 const extensions = [
 	StarterKit.configure({
@@ -86,7 +88,15 @@ const extensions = [
 	}),
 	TextStyle,
 	Color,
-	Highlight.configure(),
+	Highlight.configure({ multicolor: true }).extend({
+		renderHTML({ HTMLAttributes }) {
+			const color = HTMLAttributes["data-color"] as string | undefined;
+			if (color && isDarkColor(color)) {
+				HTMLAttributes.style = `${HTMLAttributes.style ?? ""}; color: #ffffff`;
+			}
+			return ["mark", HTMLAttributes, 0];
+		},
+	}),
 	TextAlign.configure({ types: ["heading", "paragraph", "listItem"] }),
 	TableKit.configure(),
 ];
@@ -223,10 +233,12 @@ function useEditorToolbarState(editor: Editor) {
 				canStrike: ctx.editor.can().chain().toggleStrike().run() ?? false,
 				toggleStrike: () => ctx.editor.chain().focus().toggleStrike().run(),
 
-				// Highlight
+				// Highlight Color
 				isHighlight: ctx.editor.isActive("highlight") ?? false,
-				canHighlight: ctx.editor.can().chain().toggleHighlight().run() ?? false,
-				toggleHighlight: () => ctx.editor.chain().focus().toggleHighlight().run(),
+				highlightColor: (ctx.editor.getAttributes("highlight").color as string | undefined) ?? null,
+				canHighlightColor: ctx.editor.can().chain().toggleHighlight().run() ?? false,
+				setHighlightColor: (color: string) => ctx.editor.chain().focus().toggleHighlight({ color }).run(),
+				unsetHighlightColor: () => ctx.editor.chain().focus().unsetHighlight().run(),
 
 				// Text Color
 				textColor: (ctx.editor.getAttributes("textStyle").color as string | undefined) ?? null,
@@ -372,6 +384,12 @@ function useEditorToolbarState(editor: Editor) {
 
 type EditorToolbarState = ReturnType<typeof useEditorToolbarState>;
 
+export function resolveHighlightToolbarState(isHighlight: boolean, highlightColor: string | null) {
+	const visibleHighlightColor = highlightColor ?? (isHighlight ? defaultHighlightColor : undefined);
+
+	return { visibleHighlightColor, canClearHighlight: isHighlight };
+}
+
 type EditorToolbarProps = {
 	editor: Editor;
 	isFullscreen: boolean;
@@ -384,6 +402,11 @@ function EditorToolbar({ editor, isFullscreen }: EditorToolbarProps) {
 }
 
 function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
+	const { visibleHighlightColor, canClearHighlight } = resolveHighlightToolbarState(
+		state.isHighlight,
+		state.highlightColor,
+	);
+
 	return (
 		<div className="flex flex-wrap items-center gap-y-0.5 rounded-md rounded-b-none border border-b-0">
 			<Toggle
@@ -434,17 +457,65 @@ function renderEditorToolbar(state: EditorToolbarState, isFullscreen: boolean) {
 				<TextStrikethroughIcon className="size-3.5" />
 			</Toggle>
 
-			<Toggle
-				size={isFullscreen ? "lg" : "sm"}
-				tabIndex={-1}
-				className="rounded-none"
-				title={t`Highlight`}
-				pressed={state.isHighlight}
-				disabled={!state.canHighlight}
-				onPressedChange={state.toggleHighlight}
+			<ColorPicker
+				defaultValue={defaultHighlightColor}
+				value={visibleHighlightColor}
+				onChange={state.setHighlightColor}
+				trigger={
+					<PopoverTrigger
+						render={
+							<Button
+								size={isFullscreen ? "lg" : "sm"}
+								tabIndex={-1}
+								variant="ghost"
+								className={cn("rounded-none px-2", state.isHighlight && "bg-muted text-foreground")}
+								title={t`Highlight`}
+								disabled={!state.canHighlightColor}
+							>
+								<span className="flex flex-col items-center leading-none">
+									<HighlighterCircleIcon className="size-3.5" />
+									<span
+										className="mt-0.5 h-0.5 w-3 rounded-full"
+										style={{ backgroundColor: visibleHighlightColor ?? "currentColor" }}
+									/>
+								</span>
+							</Button>
+						}
+					/>
+				}
 			>
-				<HighlighterCircleIcon className="size-3.5" />
-			</Toggle>
+				<PopoverHeader className="flex-row items-start justify-between gap-2">
+					<div className="flex items-center gap-2.5">
+						<span
+							className="grid size-9 place-items-center rounded-lg border border-border bg-muted/60 text-sm shadow-xs"
+							style={{ backgroundColor: visibleHighlightColor ?? defaultHighlightColor }}
+						>
+							<HighlighterCircleIcon className="size-4" />
+						</span>
+
+						<div className="flex flex-col gap-0.5">
+							<PopoverTitle>
+								<Trans>Highlight Color</Trans>
+							</PopoverTitle>
+							<span className="text-muted-foreground text-xs">
+								<Trans comment="Preset or custom shade refer to the color picker">
+									Choose a preset or custom shade.
+								</Trans>
+							</span>
+						</div>
+					</div>
+
+					<Button
+						size="xs"
+						variant="ghost"
+						className="shrink-0"
+						onClick={state.unsetHighlightColor}
+						disabled={!canClearHighlight}
+					>
+						<Trans comment="Clear the highlight color">Clear</Trans>
+					</Button>
+				</PopoverHeader>
+			</ColorPicker>
 
 			<ColorPicker
 				defaultValue={defaultTextColor}

packages/docx/src/html-to-docx.test.ts

@@ -55,4 +55,17 @@ describe("htmlToParagraphs", () => {
 		const result = htmlToParagraphs("<!--c--><script>x</script><p>Hello</p>");
 		expect(result.length).toBeGreaterThanOrEqual(1);
 	});
+
+	it("applies default yellow shading for <mark> without background-color", () => {
+		const result = htmlToParagraphs("<p><mark>highlighted</mark></p>");
+		const json = JSON.stringify(result[0]);
+		// TextRun with shading should contain "FFFF00" in serialized output
+		expect(json).toContain("FFFF00");
+	});
+
+	it("reads custom background-color from <mark> style for shading fill", () => {
+		const result = htmlToParagraphs('<p><mark style="background-color: rgba(204, 255, 204, 1)">green</mark></p>');
+		const json = JSON.stringify(result[0]);
+		expect(json).toContain("CCFFCC");
+	});
 });

packages/docx/src/html-to-docx.ts

@@ -1,6 +1,6 @@
 import type { IShadingAttributesProperties, ISpacingProperties } from "docx";
 import { ExternalHyperlink, HeadingLevel, Paragraph, TextRun } from "docx";
-import { parseColorString } from "@reactive-resume/utils/color";
+import { isDarkColor, parseColorString } from "@reactive-resume/utils/color";
 import { toSafeDocxLink } from "./link-utils";
 
 export interface HtmlStyleConfig {
@@ -65,9 +65,13 @@ function mergeStyle(parent: InlineStyle, tag: string, element?: HTMLElement): In
 		case "CODE":
 			next.font = "Courier New";
 			break;
-		case "MARK":
-			next.shading = { fill: "FFFF00" };
+		case "MARK": {
+			const bgColor = (element as HTMLElement | undefined)?.style.backgroundColor;
+			const fill = bgColor ? toDocxColorValue(bgColor) : null;
+			next.shading = { fill: fill ?? "FFFF00" };
+			if (bgColor && isDarkColor(bgColor)) next.color = "FFFFFF";
 			break;
+		}
 	}
 
 	const colorValue = (element as HTMLElement | undefined)?.style.color;

packages/pdf/src/templates/shared/rich-text-html.test.ts

@@ -50,6 +50,29 @@ describe("normalizeRichTextHtml", () => {
 		);
 	});
 
+	it("preserves data-color as inline background-color on multicolor <mark>", () => {
+		const result = normalizeRichTextHtml(
+			'<mark data-color="rgba(204, 255, 204, 1)" style="background-color: rgba(204, 255, 204, 1)">green</mark>',
+		);
+		// data-color is kept, class is added, background-color is set from data-color
+		expect(result).toContain("rr-pdf-mark");
+		expect(result).toContain("background-color: rgba(204, 255, 204, 1)");
+		expect(result).toContain(">green</span>");
+	});
+
+	it("keeps generated dark-highlight contrast after existing Tiptap mark styles", () => {
+		const result = normalizeRichTextHtml(
+			'<mark data-color="rgba(0, 0, 0, 1)" style="background-color: rgba(0, 0, 0, 1); color: inherit">dark</mark>',
+		);
+
+		expect(result.indexOf("color: inherit")).toBeLessThan(result.lastIndexOf("color: #ffffff"));
+	});
+
+	it("does not add inline style to legacy <mark> without data-color", () => {
+		const result = normalizeRichTextHtml("<mark>yellow</mark>");
+		expect(result).toBe('<p><span class="rr-pdf-mark">yellow</span></p>');
+	});
+
 	it("keeps highlighted text in the same react-pdf-html inline text bucket", () => {
 		const root = renderHtml(normalizeRichTextHtml("before <mark>highlighted</mark> after"), {
 			resetStyles: true,

packages/pdf/src/templates/shared/rich-text-html.ts

@@ -1,5 +1,6 @@
 import type { HTMLElement, Node } from "node-html-parser";
 import { NodeType, parse } from "node-html-parser";
+import { isDarkColor } from "@reactive-resume/utils/color";
 
 export const richTextMarkClassName = "rr-pdf-mark";
 
@@ -45,8 +46,19 @@ const mergeClassNames = (...classNames: (string | undefined)[]): string => {
 
 const normalizeMarkElements = (root: ReturnType<typeof parse>) => {
 	for (const mark of root.querySelectorAll("mark")) {
+		const dataColor = mark.getAttribute("data-color");
+
 		mark.tagName = "span";
 		mark.setAttribute("class", mergeClassNames(mark.getAttribute("class"), richTextMarkClassName));
+
+		// Preserve custom highlight color as inline background-color for react-pdf-html.
+		// Legacy marks without data-color fall back to the .rr-pdf-mark stylesheet (yellow).
+		if (dataColor) {
+			const existingStyle = mark.getAttribute("style") ?? "";
+			let inlineStyle = `background-color: ${dataColor}`;
+			if (isDarkColor(dataColor)) inlineStyle += "; color: #ffffff";
+			mark.setAttribute("style", existingStyle ? `${existingStyle}; ${inlineStyle}` : inlineStyle);
+		}
 	}
 };
 

packages/utils/src/color.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { parseColorString, rgbaStringToHex } from "./color";
+import { isDarkColor, parseColorString, rgbaStringToHex } from "./color";
 
 describe("rgbaStringToHex", () => {
 	it("converts opaque rgb to hex", () => {
@@ -28,6 +28,16 @@ describe("rgbaStringToHex", () => {
 	});
 });
 
+describe("isDarkColor", () => {
+	it("classifies opaque dark colors as dark", () => {
+		expect(isDarkColor("rgba(0, 0, 0, 1)")).toBe(true);
+	});
+
+	it("composites transparent colors over white before checking darkness", () => {
+		expect(isDarkColor("rgba(0, 0, 0, 0.1)")).toBe(false);
+	});
+});
+
 describe("parseColorString", () => {
 	describe("rgb format", () => {
 		it("parses rgb without alpha as alpha=1", () => {

packages/utils/src/color.ts

@@ -54,3 +54,16 @@ export function parseColorString(value: string): ColorResult["rgba"] | null {
 
 	return null;
 }
+
+/** Returns true if the given color string is perceptually dark (luminance < 128). */
+export function isDarkColor(colorString: string): boolean {
+	const color = parseColorString(colorString);
+	if (!color) return false;
+	const alpha = Math.max(0, Math.min(1, color.a ?? 1));
+	const r = color.r * alpha + 255 * (1 - alpha);
+	const g = color.g * alpha + 255 * (1 - alpha);
+	const b = color.b * alpha + 255 * (1 - alpha);
+	// Relative luminance (ITU-R BT.601)
+	const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+	return luminance < 128;
+}