SCHEMATIC_COMPONENT_OUTLINE_COLOR "rgba(132, 0, 0)" is not portable SVG color; strict SVG renderers reject schematic output
Nobody has claimed this yet.
Assessment
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Newbie friendliness
- 92/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- typescript
- Domain
- computer-graphics
Research direction
Start in lib/utils/constants.ts at SCHEMATIC_COMPONENT_OUTLINE_COLOR, then inspect its uses by SchematicLine, SchematicArc, SchematicRect, SchematicCircle, connector symbols, and port stems. Update the default color to the proposed portable form and verify that generated circuit JSON and circuit-to-svg output are accepted by strict SVG renderers without changing symbol bounds or port positions.
Written by the indexing model from the issue text.
Description
lib/utils/constants.ts defines
export const SCHEMATIC_COMPONENT_OUTLINE_COLOR = "rgba(132, 0, 0)"
and it is the default color for SchematicLine, SchematicArc, SchematicRect, SchematicCircle, the connector inner symbol, and port stems drawn with schStemLength. It reaches circuit JSON and circuit-to-svg output as rgba(132, 0, 0).
Three-argument rgba() is valid in CSS Color Level 4, so browsers render it. It is not valid in SVG 1.1 / CSS2 color syntax, which strict SVG consumers implement. CairoSVG, for example, fails on the generated schematic SVG.
The usual workaround in a library, drawing the stem yourself with a valid color instead of using schStemLength, has a cost. The extra line enlarges the symbol's content bounds, which changes how userCoordinateToResizedSymbolTransformMat maps the symbol into its declared width/height, and that moves every port. We did exactly that for pin/contact symbols in @tsci/adom-inc.library. The shifted ports then came out disconnected in native KiCad schematic exports (via circuit-json-to-kicad): 4 of 23 contacts lost their net. So the color can't safely be fixed downstream.
Suggested fix: rgb(132, 0, 0). It's the same color and valid in every CSS and SVG level.
Checked against main today (lib/utils/constants.ts line 44). Installed: @tscircuit/core 0.0.1914, tscircuit 0.0.2562.
- Dominant language
- TypeScript
- Stars
- 58
- Forks
- 203
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 286
Contributor guide
No contributing guide indexed for this repository
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 tscircuit/core
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·