Logo Studio: recolor ignores colors set in <style> elements
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 70/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- typescript
Research direction
Start in lib/logo/recolor.ts, where extractColors and recolorSvg read only attributes and inline style, then check how lib/svg/sanitize.ts handles <style> text. Read lib/logo/recolor.test.ts for the current fixtures, and run its tests with pnpm test. Done when an Illustrator-style SVG with class-based fills in a <style> block is listed, recolored and made monochrome, tests cover several classes and !important, and the output is still sanitized.
Written by the indexing model from the issue text.
Description
Summary
Logos exported from Illustrator often color shapes through classes in a <style> element (.cls-1 { fill: #e94e1b; }). extractColors and recolorSvg only read attributes and inline style, so these colors are not listed and cannot be recolored or made monochrome.
Where to look
lib/logo/recolor.tsandlib/logo/recolor.test.tslib/svg/sanitize.ts: style handling during sanitizing
Behaviour
- Parse
<style>text forfill,strokeandstop-colordeclarations and include them in extraction, recoloring and monochrome. Keep everything else in the stylesheet unchanged.
Acceptance criteria
- An Illustrator-style SVG with class-based fills lists, recolors and turns monochrome correctly.
- Unit tests cover a
<style>block with several classes and!important. - Output stays sanitized.
Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build. See CONTRIBUTING.md and the first contribution walkthrough.
Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.
- Dominant language
- TypeScript
- Stars
- 11
- Forks
- 3
- Avg merge
- 4h 4m
- Merged PRs (30d)
- 74
Getting set up
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from yakew7/DesignHub
-
area: projects difficulty: medium enhancement help wanted performance v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 55/100
Maintainers usually reply within 1 day
-
area: backgrounds difficulty: hard enhancement help wanted performance v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
dependencies difficulty: easy enhancement help wanted v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
area: mockups area: social difficulty: medium enhancement help wanted performance v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 65/100
Maintainers usually reply within 1 day
-
area: ui difficulty: medium enhancement help wanted performance v2.0.0
Difficulty 4/5 3-5 days Newbie friendliness 68/100
Maintainers usually reply within 1 day
All issues in yakew7/DesignHub
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
MoonshotAI/kimi-code#4398 ·
Maintainers usually reply within 1 day
-
Xiaomi Mimo语音识别服务异常Openpending triage
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
Maintainers usually reply within 1 day
-
package-lock.json : les binaires natifs macOS et Linux de unrs-resolver ont disparu depuis #1823Openbug dependencies
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
AxaFrance/design-system#2064 ·
Maintainers usually reply within 3 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 85/100