chore: Adjust WDS text colors

[ichik]

Description

Fixes #39956

Increased lightness (in light mode) and chroma for fg, fgNeutral, fgNeutralSubtle, fgAccent colors (and dependant child styles).

Before	After

Examples with other seeds, changes to dark mode etc.

Automation

/ok-to-test tags="@tag.Sanity"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14218884554
Commit: 4c30030
Cypress dashboard.
Tags: @tag.Sanity
Spec:

---

Wed, 02 Apr 2025 12:34:13 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

• Yes
• No

Summary by CodeRabbit

• New Features
• • Light Mode Enhancements: The light mode theme has been refreshed with optimized foreground and accent colors, enhancing readability and overall visual clarity.
• Dark Mode Enhancements: Updated the dark mode palette now delivers a more balanced interface with refined contrasts and accent details for improved visual appeal.

[coderabbitai]

Walkthrough

This change adjusts chroma and lightness values in both dark mode and light mode themes. In the dark theme, thresholds in methods like bgNeutralSubtle, fg, and fgAccent are updated with increased chroma and adjusted lightness. In the light theme, foreground color calculations in getters such as fg, fgAccent, fgNeutral, and fgNeutralSubtle have been modified. Corresponding test files have been updated to reflect the new expected RGB values for various conditions.

Changes

Files	Change Summary
app/client/.../color/src/DarkModeTheme.ts and app/client/.../color/tests/DarkModeTheme.test.ts	Adjusted chroma and lightness parameters in methods (bgNeutralSubtle, fg, fgAccent) and updated the expected RGB outputs in tests.
app/client/.../color/src/LightModeTheme.ts and app/client/.../color/tests/LightModeTheme.test.ts	Modified foreground color calculations in getters (fg, fgAccent, fgNeutral, fgNeutralSubtle) and revised corresponding test cases with new RGB expectations.

Assessment against linked issues

Objective	Addressed	Explanation
Adjust WDS text color tokens (#39956)	✅

Possibly related PRs

• chore: WDS text inputs visual refinements #35581: Involves similar modifications to chroma and lightness in DarkModeTheme.
• feat: WDS bg-color-soft color algo #36951: Contains adjustments to both dark and light mode themes related to color calculations.
• chore: WDS inputs in dark mode with better visibility #33796: Focuses on changes in chroma and lightness logic in the DarkModeTheme class.

Suggested labels

Task, Enhancement, WDS team, ok-to-test, AI Agents

Suggested reviewers

• KelvinOm
• tbrizitsky
• danielmorris-as

Poem

In the code, new hues arise,
Dark and light with fresh disguise.
Chroma climbs and lightness shifts,
As the theme's palette gently lifts.
A burst of color in our skies!

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 67ed4cf and 4c30030.

📒 Files selected for processing (4)

• app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts (4 hunks)
• app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts (3 hunks)
• app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts (3 hunks)
• app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts (4 hunks)

🧰 Additional context used

🧬 Code Definitions (2)

app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts (1)

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts (5)

• fg (726-744)
• LightModeTheme (7-1324)
• fgNeutral (766-773)
• fgNeutralSubtle (775-781)
• bd (960-966)

app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts (2)

app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts (6)

• fg (722-740)
• DarkModeTheme (7-1325)
• fgAccent (742-760)
• fgNeutral (762-769)
• fgNeutralSubtle (771-777)
• bd (955-961)

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts (5)

• fg (726-744)
• fgAccent (746-764)
• fgNeutral (766-773)
• fgNeutralSubtle (775-781)
• bd (960-966)

⏰ Context from checks skipped due to timeout of 90000ms (7)

• GitHub Check: client-unit-tests / client-unit-tests
• GitHub Check: client-lint / client-lint
• GitHub Check: client-build / client-build
• GitHub Check: client-prettier / prettier-check
• GitHub Check: chromatic-deployment
• GitHub Check: storybook-tests
• GitHub Check: chromatic-deployment

🔇 Additional comments (27)

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts (7)

728-729: Clearer documentation for the foreground color treatment.

The updated comment more concisely describes the role of this color in the light mode theme.

---

732-733: Improved foreground color visibility through increased lightness.

The lightness value has been significantly increased from 0.12 to 0.37, which will make text more visible in light mode.

---

739-741: Enhanced color richness for non-achromatic foreground.

The chroma value has been increased from 0.006 to 0.039, giving the foreground more color saturation when the seed color isn't achromatic.

---

752-753: Increased lightness threshold for accent foreground.

Raising the lightness from 0.35 to 0.5 will make accent text more prominent while maintaining good contrast.

---

758-760: Boosted accent color saturation.

The chroma value has been increased from 0.164 to 0.185, making accent colors slightly more vibrant.

---

770-771: Different approach for neutral foreground calculation.

Changed the strategy from increasing lightness to decreasing chroma for neutral foreground colors, which should maintain readability while appearing more neutral.

---

778-779: Reduced lightness increment for subtle neutral foreground.

The lightness increment has been decreased from 0.35 to 0.22, resulting in a less dramatic difference between neutral and subtle neutral text.

app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts (6)

418-420: Increased chroma threshold for neutral subtle backgrounds.

The threshold has been increased from 0.005 to 0.025, allowing for more color saturation in subtle neutral backgrounds.

---

728-729: Slightly darker main foreground for dark mode.

The lightness has been reduced from 0.935 to 0.91, creating a slightly more contrasting text against dark backgrounds.

---

735-737: Significantly increased foreground color saturation.

The chroma value has been increased from 0.012 to 0.065, making foreground text considerably more vibrant in dark mode.

---

748-749: Brighter accent foreground for dark mode.

The lightness has been increased from 0.82 to 0.86, making accent text stand out more against dark backgrounds.

---

754-756: Enhanced color saturation for accent foreground.

The chroma has been substantially increased from 0.136 to 0.225, creating more visually striking accent text.

---

766-767: Simplified neutral foreground color calculation.

Changed to directly setting chroma to 0 rather than modifying lightness, creating a true neutral gray.

app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts (7)

645-645: Updated fg color expectation for achromatic mode

The expected RGB value for fg color has been increased from a very dark color to a lighter one (24.944%). This change aligns with the PR's objective of increasing lightness for better visibility in light mode.

---

651-651: Updated fg color expectation for chromatic mode

The foreground color expectation when chroma > 0.04 has been adjusted to increase lightness while maintaining proportional RGB relationships. The new values provide better visibility while preserving the color characteristics.

---

673-673: Changed fgNeutral from grayscale to blue-tinted color

The expected fgNeutral color for achromatic mode has been significantly changed from a gray (12.685%) to a blue-tinted color (0%, 26.839%, 41.548%). This is a substantial shift from neutral to colored text.

---

679-679: Updated fgNeutral color expectation for mid-hue range

The expectation for fgNeutral when hue is between 120-300 has been updated to have more contrast between RGB components, creating a more distinctive appearance.

---

685-685: Updated fgNeutral color expectation for other hue ranges

The expectation for fgNeutral when chroma > 0.04 and hue is outside 120-300 now has a more pronounced blue component (34.901%), enhancing color differentiation.

---

695-695: Enhanced fgNeutralSubtle with stronger blue tint

The fgNeutralSubtle color has been changed from a mid-gray (49.631%) to a blue-tinted color (27.658%, 51.819%, 68%), significantly increasing the color's differentiation.

---

837-837: Adjusted border color for better visual distinction

The border color expectation has been updated to have greater variance between RGB components (82.064%, 72.324%, 64.769%), creating a more distinctive border appearance compared to the previous more neutral gray tone.

app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts (7)

613-613: Updated dark mode fg color for achromatic case

The fg color expectation for dark mode with chroma < 0.04 has been updated to 88.268%, providing a subtle adjustment to maintain text visibility in dark mode.

---

619-619: Enhanced dark mode fg color for chromatic case

The fg color for dark mode with chroma > 0.04 has been updated to have more contrast (100%, 84.682%, 71.568%), enhancing readability while maintaining the warm color characteristics.

---

627-627: Increased brightness of fgAccent in achromatic dark mode

The fgAccent color for dark mode with chroma < 0.04 has been brightened from 76.823% to 81.873%, improving visibility for accent text.

---

633-633: Enhanced fgAccent color contrast in dark mode

The fgAccent color for dark mode with chroma > 0.04 has been adjusted to have higher values across all components (100%, 74.36%, 48.84%), making accent text more prominent.

---

641-641: Standardized fgNeutral color across all test cases

The fgNeutral color has been standardized to "rgb(88.268% 88.268% 88.268%)" across all three test cases, providing a consistent neutral text color regardless of chroma and hue values.

Also applies to: 647-647, 653-653

---

663-663: Increased lightness of fgNeutralSubtle in dark mode

The fgNeutralSubtle color in dark mode has been lightened from 42.772% to 51.374%, improving the visibility of subtle text elements.

---

795-795: Enhanced border color contrast in dark mode

The border color in dark mode has been adjusted to have greater variance between RGB components (38.135%, 24.611%, 12.977%), making borders more distinct by increasing the color's chroma.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.