Skip to content

style: edge label readability#2918

Merged
davydkov merged 3 commits into
mainfrom
edge-readability
Apr 25, 2026
Merged

style: edge label readability#2918
davydkov merged 3 commits into
mainfrom
edge-readability

Conversation

@davydkov

@davydkov davydkov commented Apr 25, 2026

Copy link
Copy Markdown
Member

Trying to Improve edge label readability by decreasing background opacity and changing the dark theme blend mode from ‎⁠screen⁠ to ‎⁠luminosity⁠.

@changeset-bot

changeset-bot Bot commented Apr 25, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 57a58b4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages
Name Type
@likec4/style-preset Patch
@likec4/styles Patch
@likec4/core Patch
@likec4/spa Patch
likec4 Patch
@likec4/vscode-preview Patch
likec4-vscode Patch
@likec4/docs-astro Patch
@likec4/playground Patch
@likec4/config Patch
@likec4/diagram Patch
@likec4/generators Patch
@likec4/language-server Patch
@likec4/language-services Patch
@likec4/layouts Patch
@likec4/leanix-bridge Patch
@likec4/log Patch
@likec4/lsp Patch
@likec4/mcp Patch
@likec4/react Patch
@likec4/tsconfig Patch
@likec4/vite-plugin Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@davydkov

davydkov commented Apr 25, 2026

Copy link
Copy Markdown
Member Author

/preview playground

@github-actions github-actions Bot temporarily deployed to playground-preview April 25, 2026 11:06 Destroyed
@github-actions

github-actions Bot commented Apr 25, 2026

Copy link
Copy Markdown
Contributor

Playground: https://926430d9-playground-production.likec4.workers.dev

davydkov and others added 2 commits April 25, 2026 13:12
@davydkov
decrease playwright's maxDiffPixelRatio
6c19448
@likec4-ci @davydkov
chore: update e2e screenshots (#2919)
57a58b4 
Co-authored-by: davydkov <824903+davydkov@users.noreply.github.com>
@davydkov davydkov marked this pull request as ready for review April 25, 2026 12:40
@davydkov davydkov merged commit 37b1167 into main Apr 25, 2026
17 of 18 checks passed
@davydkov davydkov deleted the edge-readability branch April 25, 2026 12:40
@coderabbitai

coderabbitai Bot commented Apr 25, 2026

Copy link
Copy Markdown
Contributor

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b073d1a3-7c5e-4c30-81dd-970395d0832d

📥 Commits

Reviewing files that changed from the base of the PR and between be04c8d and 57a58b4.

⛔ Files ignored due to path filters (3)
  • e2e/tests/__screenshots__/chromium-linux/e2e-amazon-lambdas.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-amazon-sqs.png is excluded by !**/*.png
  • e2e/tests/__screenshots__/chromium-linux/e2e-dynamic-view-1.png is excluded by !**/*.png
📒 Files selected for processing (4)
  • .changeset/improve-edge-label-styles.md
  • e2e/playwright.config.ts
  • styled-system/preset/src/globalCss.ts
  • styled-system/preset/src/recipes/edgeLabel.ts
📝 Walkthrough

Walkthrough

The PR improves edge label styling by adjusting color token references, blend modes, and lightness values in the styled-system preset. It also tightens Playwright screenshot comparison tolerance and introduces a corresponding changeset for the style-preset package.

Changes

Cohort / File(s) Summary
Changeset & Release
.changeset/improve-edge-label-styles.md		 Adds a patch-level changeset documenting improved edge label readability and corrected color token references for @likec4/style-preset.
Test Configuration
e2e/playwright.config.ts		 Reduces maxDiffPixelRatio in screenshot comparisons from 0.02 to 0.01, enforcing stricter screenshot diff validation in CI.
Edge Label Styling
styled-system/preset/src/globalCss.ts, styled-system/preset/src/recipes/edgeLabel.ts		 Updates --xy-edge-label-color and --xy-edge-label-background-color theming with adjusted oklch lightness values; changes mixBlendMode from hard-light to luminosity for base and adjusts light variant; fixes color token path references from {likec4.mixColor} to {colors.likec4.mixColor} in stepNumber background styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • Feat/2101 background color #2912: Modifies the same styled-system preset files (globalCss and edgeLabel recipe) to adjust edge-label color tokens and blend modes.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch edge-readability

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@likec4-ci likec4-ci Bot mentioned this pull request Apr 25, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@davydkov