[V2] feat(replaceColor): add CMYK color space conversion option (#4832)

# Description of Changes

TLDR:
- Introduced a new "Convert to CMYK" option in Replace Color settings.
- Added tooltips for the new CMYK conversion feature.
- Updated ReplaceColorParameters to support COLOR_SPACE_CONVERSION
option.

For backend reference see this PR:  #4494

This pull request adds support for converting PDF colors to the CMYK
color space in the Replace Color tool, which is especially useful for
preparing documents for professional printing. The changes include
updates to the user interface, tooltips, and type definitions to
accommodate this new option.

**Replace Color tool: Add CMYK color space conversion option**

* Feature addition:
* Added a new `COLOR_SPACE_CONVERSION` option to the
`replaceAndInvertOption` parameter in the `ReplaceColorParameters` type,
enabling support for CMYK color conversion.
* Updated the `ReplaceColorSettings` component to include "Convert to
CMYK" as a selectable option in the UI.

* User guidance:
* Added a new tooltip entry explaining the "Convert to CMYK" feature,
describing its purpose and use case for professional printing.

### Front-end
<img width="642" height="994" alt="image"
src="https://github.com/user-attachments/assets/fa1df879-f157-45ca-9865-238238afc093"
/>

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>
This commit is contained in:
Balázs Szücs 2025-11-06 15:33:34 +01:00 committed by GitHub
parent 138949caa7
commit 9440e99227
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 3 deletions

View File

@ -2996,7 +2996,8 @@
"options": {
"highContrast": "High contrast",
"invertAll": "Invert all colours",
"custom": "Custom"
"custom": "Custom",
"cmyk": "Convert to CMYK"
},
"tooltip": {
"header": {
@ -3023,6 +3024,10 @@
"text": "Define your own text and background colours using the colour pickers. Perfect for creating branded documents or specific accessibility requirements.",
"bullet1": "Text colour - Choose the colour for text elements",
"bullet2": "Background colour - Set the background colour for the document"
},
"cmyk": {
"title": "Convert to CMYK",
"text": "Convert the PDF from RGB colour space to CMYK colour space, optimized for professional printing. This process converts colours to the Cyan, Magenta, Yellow, Black model used by printers."
}
},
"error": {

View File

@ -23,6 +23,10 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
{
value: 'CUSTOM_COLOR',
label: t('replaceColor.options.custom', 'Custom')
},
{
value: 'COLOR_SPACE_CONVERSION',
label: t('replaceColor.options.cmyk', 'Convert to CMYK')
}
];

View File

@ -34,7 +34,11 @@ export const useReplaceColorTips = (): TooltipContent => {
t("replaceColor.tooltip.custom.bullet1", "Text colour - Choose the colour for text elements"),
t("replaceColor.tooltip.custom.bullet2", "Background colour - Set the background colour for the document")
]
},
{
title: t("replaceColor.tooltip.cmyk.title", "Convert to CMYK"),
description: t("replaceColor.tooltip.cmyk.text", "Convert the PDF from RGB colour space to CMYK colour space, optimized for professional printing. This process converts colours to the Cyan, Magenta, Yellow, Black model used by printers.")
}
]
};
};
};

View File

@ -2,7 +2,7 @@ import { BaseParameters } from '@app/types/parameters';
import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
export interface ReplaceColorParameters extends BaseParameters {
replaceAndInvertOption: 'HIGH_CONTRAST_COLOR' | 'CUSTOM_COLOR' | 'FULL_INVERSION';
replaceAndInvertOption: 'HIGH_CONTRAST_COLOR' | 'CUSTOM_COLOR' | 'FULL_INVERSION' | 'COLOR_SPACE_CONVERSION';
highContrastColorCombination: 'WHITE_TEXT_ON_BLACK' | 'BLACK_TEXT_ON_WHITE' | 'YELLOW_TEXT_ON_BLACK' | 'GREEN_TEXT_ON_BLACK';
textColor: string;
backGroundColor: string;