Feat/2101 background color#2912
Conversation
…color palette generation description
🦋 Changeset detectedLatest commit: 536fb28 The changes in this PR will be included in the next version bump. This PR includes changesets to release 21 packages
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 |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughReplaces Mantine-based palette indexing with a custom palette generator, adds tone-adjustment utilities and tests, updates color computation to use named palette fields, adjusts relationship/edge-label colors and CSS dark-mode handling, updates docs and a changeset. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User (base color input)
participant Parser as Parser / Language Server
participant Compute as computeColorValues
participant Palette as getColorPalette
participant Adjust as adjustToneHex / adjustToneRgb
participant Styles as styled-system / CSS
participant Renderer as Renderer (UI)
User->>Parser: provide color (e.g., `#db83db`)
Parser->>Compute: request derived theme
Compute->>Palette: normalize color -> build named palette
Palette-->>Compute: return palette (el_main, el_secondary, rel_main, rel_secondary, ...)
Compute->>Adjust: compute contrasts (hi/lo) and adjusted tones
Adjust-->>Compute: return contrasted hexes
Compute->>Styles: emit CSS vars / theme values
Styles->>Renderer: style updates (edge labels, element fills, dark-mode variants)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/core/src/utils/colors.ts (1)
13-23: Avoid the tuple cast in the new utility.
rgb.map(...)widens the tuple tonumber[], requiring theascast. A small helper function preserves the return type without casting, aligning with the guideline: "Use TypeScript with explicit types; avoid usinganyand type casts withas".♻️ Proposed refactor
export function adjustToneRgb(rgb: [number, number, number], factor: number): [number, number, number] { // Clamp factor to range [-1, 1] factor = Math.max(-1, Math.min(1, factor)) - return rgb.map(channel => { + const adjustChannel = (channel: number): number => { const adjusted = factor > 0 ? channel + (255 - channel) * factor // lighten : channel * (1 + factor) // darken // return a value between 0 and 255 return Math.round(Math.max(0, Math.min(255, adjusted))) - }) as [number, number, number] + } + + return [adjustChannel(rgb[0]), adjustChannel(rgb[1]), adjustChannel(rgb[2])] }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/utils/colors.ts` around lines 13 - 23, The adjustToneRgb function currently uses rgb.map(...) which widens the [number,number,number] tuple to number[] and forces an unsafe "as" cast; change the implementation to preserve the tuple type without casting by avoiding Array.prototype.map — either destructure the input and compute each channel explicitly (return [calc(r), calc(g), calc(b)]), or introduce a small typed helper (e.g., map3) that accepts [A,B,C] and a mapper to return [R,R,R]; update adjustToneRgb to use that helper or the explicit per-channel calculations and remove the "as [number, number, number]" cast.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/docs/src/content/docs/dsl/specification.mdx`:
- Line 121: Fix the subject-verb agreement in the documentation sentence that
currently reads "LikeC4 generate a color palette used to build a color scheme
from the provided base color"—change "generate" to "generates" so the sentence
reads "LikeC4 generates a color palette..." to correct grammar in the sentence
containing the fragment "LikeC4 generate a color palette".
In `@packages/core/src/styles/compute-color-values.ts`:
- Around line 21-35: The computeColorValues function currently trusts
chroma.valid but then casts palette values (e.g., colors.el_main,
colors.el_secondary, colors.rel_main, etc.) to HexColor allowing non-hex inputs
like "rgb(...)" to leak; update computeColorValues to normalize each returned
palette value to a hex string before casting to HexColor (use chroma(...) or the
palette provider’s hex conversion) for all places where you cast to HexColor
(elements.fill, elements.stroke, elements.hiContrast, elements.loContrast,
relationships.line, relationships.label, relationships.labelBg and the refColor
handling around lines ~40-48) so the function always returns canonical hex
strings.
---
Nitpick comments:
In `@packages/core/src/utils/colors.ts`:
- Around line 13-23: The adjustToneRgb function currently uses rgb.map(...)
which widens the [number,number,number] tuple to number[] and forces an unsafe
"as" cast; change the implementation to preserve the tuple type without casting
by avoiding Array.prototype.map — either destructure the input and compute each
channel explicitly (return [calc(r), calc(g), calc(b)]), or introduce a small
typed helper (e.g., map3) that accepts [A,B,C] and a mapper to return [R,R,R];
update adjustToneRgb to use that helper or the explicit per-channel calculations
and remove the "as [number, number, number]" cast.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4350dbfc-8054-4afa-8f9b-00272345536a
📒 Files selected for processing (10)
.changeset/improve-color-palette.mdapps/docs/src/content/docs/dsl/specification.mdxpackages/core/src/styles/__test__/theme-index.tspackages/core/src/styles/compute-color-values.tspackages/core/src/utils/colors.spec.tspackages/core/src/utils/colors.tspackages/language-server/src/model/__tests__/model-builder-custom-colors.spec.tsstyled-system/preset/src/defaults/relationship-colors.tsstyled-system/preset/src/globalCss.tsstyled-system/preset/src/recipes/edgeLabel.ts
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/core/src/styles/compute-color-values.ts (2)
53-53: Redundantchroma(...).hex()round-trip.
adjustToneHexalready returns a hex string, so wrapping it inchroma(...).hex()is a no-op conversion. You can drop the wrapper and cast the result directly.♻️ Proposed simplification
- const rel_secondary = chroma(adjustToneHex(el_main, -0.25)).hex() as HexColor + const rel_secondary = adjustToneHex(el_main, -0.25) as HexColor🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/styles/compute-color-values.ts` at line 53, The expression wrapping adjustToneHex(...) with chroma(...).hex() is redundant; update the assignment to set rel_secondary directly to the hex string returned by adjustToneHex and cast it to HexColor (i.e., replace chroma(adjustToneHex(el_main, -0.25)).hex() with adjustToneHex(el_main, -0.25) and keep the existing cast), referencing the rel_secondary constant and the adjustToneHex helper.
104-111: Redundantchroma(x.hex()).hex()forloContrast.
lightColorRgb.hex()/darkColorRgb.hex()already yields a hex string; re-wrapping throughchroma(...).hex()only adds work without changing the value. ThehiContrastcases do need the wrap because.brighten(0.4)/.darken(0.4)return achroma.Color, butloContrastcan be simplified.♻️ Proposed simplification
if (Math.abs(contrastWithLight) > Math.abs(contrastWithDark)) { return { hiContrast: chroma(lightColorRgb.brighten(0.4)).hex() as HexColor, - loContrast: chroma(lightColorRgb.hex()).hex() as HexColor, + loContrast: lightColorRgb.hex() as HexColor, } } else { return { hiContrast: chroma(darkColorRgb.darken(0.4)).hex() as HexColor, - loContrast: chroma(darkColorRgb.hex()).hex() as HexColor, + loContrast: darkColorRgb.hex() as HexColor, } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/styles/compute-color-values.ts` around lines 104 - 111, Simplify redundant wrapping for loContrast: instead of calling chroma(lightColorRgb.hex()).hex() and chroma(darkColorRgb.hex()).hex(), use the hex strings directly from lightColorRgb.hex() and darkColorRgb.hex() (cast to HexColor as needed) while keeping hiContrast computed via chroma(...).brighten(0.4)/darken(0.4). Ensure you update the loContrast return values in the branch that uses lightColorRgb and the branch that uses darkColorRgb to return lightColorRgb.hex() as HexColor and darkColorRgb.hex() as HexColor respectively.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/core/src/styles/compute-color-values.ts`:
- Line 53: The expression wrapping adjustToneHex(...) with chroma(...).hex() is
redundant; update the assignment to set rel_secondary directly to the hex string
returned by adjustToneHex and cast it to HexColor (i.e., replace
chroma(adjustToneHex(el_main, -0.25)).hex() with adjustToneHex(el_main, -0.25)
and keep the existing cast), referencing the rel_secondary constant and the
adjustToneHex helper.
- Around line 104-111: Simplify redundant wrapping for loContrast: instead of
calling chroma(lightColorRgb.hex()).hex() and chroma(darkColorRgb.hex()).hex(),
use the hex strings directly from lightColorRgb.hex() and darkColorRgb.hex()
(cast to HexColor as needed) while keeping hiContrast computed via
chroma(...).brighten(0.4)/darken(0.4). Ensure you update the loContrast return
values in the branch that uses lightColorRgb and the branch that uses
darkColorRgb to return lightColorRgb.hex() as HexColor and darkColorRgb.hex() as
HexColor respectively.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0f8b6754-7e59-4c49-87cf-9d152da32e25
📒 Files selected for processing (2)
apps/docs/src/content/docs/dsl/specification.mdxpackages/core/src/styles/compute-color-values.ts
✅ Files skipped from review due to trivial changes (1)
- apps/docs/src/content/docs/dsl/specification.mdx
davydkov
left a comment
There was a problem hiding this comment.
Thank you for contribution!
Please mention related issue in changeset and merge it :)
Checklist
mainbefore creating this PR.pnpm typecheckandpnpm test./changeset-generatorSKILL).